academyIT
کاربر تازه وارد
- تاریخ عضویت
- 12 اکتبر 2015
- نوشتهها
- 63
- لایکها
- 14
- سن
- 39
http://academy-it.ir
===========================
سلام دوستان
قصد داریم در اینجا یک آموزش بسیار ارزشمند و کاربردی را برای شما دوستان عزیز قرار بدیم و کمک کنیم تا بتونید در زمینه طراحی وب سایت های رسپانسیو و واکنشگرا اصولی و حرفه ای عمل کنید.
این آموزش در 3 قسمت در اختیار شما عزیزان قرار میگیرد.
قسمت اول :
طراحی رسپانسیو یا واکنشگرا چیست ؟
در گذشته میزان استفاده از سخت افزار های متفرقه مثل موبایل و تبلت نزدیک به صفر بود ولی در حال حاضر شرایط خیلی تغییر کرده و خیلی از کاربران ترجیح میدن خیلی سریع از طریق موبایل و یا تبلت ایمیل هاشون رو چک کنن و یا به صفحات وب سایت دسترسی پیدا کنن . به همین علت دیگه هر وب سایتی باید به این موضوع یعنی رسپانسیو بودن وب سایت اهمیت بسیار زیادی بده .
طراحی وبسایت Responsive یا واکنشگرا یک راهکار بسیار کارآمد برای بهینه سازی وب سایت در سخت افزار های مختلف مثل موبایل و تبلت :
این نوع طراحی فاقد اندازهی ثابت صفحه، فاقد میلیمتر و اینچ و فارغ از محدودیتهای صفحه نمایش است. طراحی در واحد پیکسل فقط برای دستگاههای رومیزی (desktop) یا همراه (mobile) دیگر قدیمی شده، چراکه همواره گجتهای بیشتر و بیشتری توانایی باز کردن یک وبسایت را دارند. بنابراین میخوام در این بخش چند اصل اساسی را درخصوص طراحی وبسایت واکنشگرا به شما دوستا و همراهان دوست داشتی آکادمی آی تی بگم و به جای مقابله با وبسایت شناور (fluid web) به استقبال آن بریم. برای حفظ سادگی کار، بر چیدمان (layout) تمرکز میکنیم .
اما لازم که چند نکته رو در این مورد خدمت شما دوستان عزیز بگم :
· جریان (flow)
زمانی که شما در ابزاری مثل موبایل که عرض اون نسبت به صفحه کمتر هست وب سایت رو میبینید خوب طبیعتا ارتفاع وب سایت بسیار بیشتر میشه مثلا اگر توی یک دریف در دسکتاپ 3 ستون اخبار جا میشده توی موبایل هر ستون در یک سطر باید قرار بگیره و اینکار یعنی اشغال کردن بیشتر فضای عمودی باید باعث بشه همه محتویات بعدشون به پایین تر هل داده بشن نه اینکه به علت رعایت نکردن اصول طراحی رسپانسیو محتویات روی هم بیفتن به این کار flow یا جریان میگن . اگر شما به طراحی با پیکسل و پوینت (point) عادت کردی شاید درک این قابلیت کمی برات سخت باشه، اما وقتی به اون عادت کنی به راحتی قابل درک میشه.
· واحدهای نسبی (Relative units)
به جای استفاده از واحد های ثابت مثل پیکسل و ... بهتره از واحد های نسبی مثل درصد استفاده کنیم تا وب سایت رو نسبت به تغییرات عرض سازگارتر کنه . مثلا وقتی میگیم 100% منظورمون کل عرض مرورگر توی هر سخت افزاریه حالا چه عرض اون سخت افزار 400px باشه جه 1900px فرقی نمیکنه ولی وقتی میگیم 800px دیگه توی سخت افزار هایی که صفحه نمایش اونها از 800px کمتر هست قطعا به مشکل بر میخوریم و اسکرول افقی خواهیم داشت . به طراحی با مقیاس های ثابت مثل px , point و... Static Unit میگن و به طراحی با واحد های نسبی مثل درصد Relative Units میگن.
http://academy-it.ir
آکادمی آی تی مرجع آموزش در زمینه های مختلف آی تی از جمله : آموزش طراحی سایت ،آموزش شبکه و ...
http://academy-it.ir
===========================
سلام دوستان
قصد داریم در اینجا یک آموزش بسیار ارزشمند و کاربردی را برای شما دوستان عزیز قرار بدیم و کمک کنیم تا بتونید در زمینه طراحی وب سایت های رسپانسیو و واکنشگرا اصولی و حرفه ای عمل کنید.
این آموزش در 3 قسمت در اختیار شما عزیزان قرار میگیرد.
قسمت اول :
طراحی رسپانسیو یا واکنشگرا چیست ؟
در گذشته میزان استفاده از سخت افزار های متفرقه مثل موبایل و تبلت نزدیک به صفر بود ولی در حال حاضر شرایط خیلی تغییر کرده و خیلی از کاربران ترجیح میدن خیلی سریع از طریق موبایل و یا تبلت ایمیل هاشون رو چک کنن و یا به صفحات وب سایت دسترسی پیدا کنن . به همین علت دیگه هر وب سایتی باید به این موضوع یعنی رسپانسیو بودن وب سایت اهمیت بسیار زیادی بده .
طراحی وبسایت Responsive یا واکنشگرا یک راهکار بسیار کارآمد برای بهینه سازی وب سایت در سخت افزار های مختلف مثل موبایل و تبلت :
این نوع طراحی فاقد اندازهی ثابت صفحه، فاقد میلیمتر و اینچ و فارغ از محدودیتهای صفحه نمایش است. طراحی در واحد پیکسل فقط برای دستگاههای رومیزی (desktop) یا همراه (mobile) دیگر قدیمی شده، چراکه همواره گجتهای بیشتر و بیشتری توانایی باز کردن یک وبسایت را دارند. بنابراین میخوام در این بخش چند اصل اساسی را درخصوص طراحی وبسایت واکنشگرا به شما دوستا و همراهان دوست داشتی آکادمی آی تی بگم و به جای مقابله با وبسایت شناور (fluid web) به استقبال آن بریم. برای حفظ سادگی کار، بر چیدمان (layout) تمرکز میکنیم .
اما لازم که چند نکته رو در این مورد خدمت شما دوستان عزیز بگم :
· جریان (flow)
زمانی که شما در ابزاری مثل موبایل که عرض اون نسبت به صفحه کمتر هست وب سایت رو میبینید خوب طبیعتا ارتفاع وب سایت بسیار بیشتر میشه مثلا اگر توی یک دریف در دسکتاپ 3 ستون اخبار جا میشده توی موبایل هر ستون در یک سطر باید قرار بگیره و اینکار یعنی اشغال کردن بیشتر فضای عمودی باید باعث بشه همه محتویات بعدشون به پایین تر هل داده بشن نه اینکه به علت رعایت نکردن اصول طراحی رسپانسیو محتویات روی هم بیفتن به این کار flow یا جریان میگن . اگر شما به طراحی با پیکسل و پوینت (point) عادت کردی شاید درک این قابلیت کمی برات سخت باشه، اما وقتی به اون عادت کنی به راحتی قابل درک میشه.
· واحدهای نسبی (Relative units)
به جای استفاده از واحد های ثابت مثل پیکسل و ... بهتره از واحد های نسبی مثل درصد استفاده کنیم تا وب سایت رو نسبت به تغییرات عرض سازگارتر کنه . مثلا وقتی میگیم 100% منظورمون کل عرض مرورگر توی هر سخت افزاریه حالا چه عرض اون سخت افزار 400px باشه جه 1900px فرقی نمیکنه ولی وقتی میگیم 800px دیگه توی سخت افزار هایی که صفحه نمایش اونها از 800px کمتر هست قطعا به مشکل بر میخوریم و اسکرول افقی خواهیم داشت . به طراحی با مقیاس های ثابت مثل px , point و... Static Unit میگن و به طراحی با واحد های نسبی مثل درصد Relative Units میگن.
http://academy-it.ir
آکادمی آی تی مرجع آموزش در زمینه های مختلف آی تی از جمله : آموزش طراحی سایت ،آموزش شبکه و ...
http://academy-it.ir
Last edited: