جلسه دوم : اصول یک طرح واکنش گرا
جلسه دوم : اصول یک طرح واکنش گرا
نویسنده : ایمان یزدانی

هر طرحی با یک اصول خاصی آغاز میشود که در طراحی واکنش گرا علاوه بر اصول طرح ما یک اصل دیگر هم داریم که بر اصل طرح ارجعیت دارد،یعنی اگر طرح میطلبد که ما یک بلاک را 200 پیکسل در نظر بگیریم،واکنش گرا اگر با اصل خود مغایر ببیند آن را رد میکند و باید طرحی دیگر برای آن بلاک ریخت... (البته تمام این مراحل در مغز یک طراح صورت میگیرد)

اصل اندازه ها

در یک طرح رسپانسیو شما باید در نظر داشته باشید که یک کاربر که با موبایل می آید اگر رزولوشن آن 640 در 480 باشد و طرح شما در 1280 پردازش شده باشد،مسلما 1/4 طرح شاید از دید کاربر به دور باشد و این بخش شاید همان تبلیغات متنی وبسایت شما باشد که میتواند به سایت شما ضربه بزند.

برای این کار طراحان بر این باورند که میتوان از چند تاکتیک استفاده کرد :

1. استفاده از فریم ورک واکنش گرا
2. تغییر لینک استایل کلی بوسیله پردازش های جاوا اسکریپت
3. استفاده از طراحی درصدی
4. بهره گیری از فریم ورکهای جی کوئری
و ...

این تاکتیک ها بسیار کاربردی هستند و هرچند بنظر زیاد می آید اما هنوز هم تاکتیکهایی هستند که وجود دارند و در لیست هم نمیگنجد و نیاز به یک مقاله دارد اما بهترین این ها همین لیست است که علاوه بر سادگی در یادگیری بسیار هم حرفه ای هستند.

1. استفاده از فریم ورک واکنش گرا

در این فریم ورک ها شما میتوانید با کاتالوگ ها و اسناد موجود در خود این وبسایتها آموزش را پیش رفته و بتوانید به راحتی یک طرح رسپانسیو پیاده کنید که ما دو فریم ورک را بررسی میکنیم :

فریم ورک Yaml

در این فریم ورک به این صورت گفته شده که امکانات فوق العاده ای به شما در طراحی میدهد و محدود به طرحی دو ستونه یا ستونهای محدود نمیکند و از قابلیتهای خوب این فریم ورک پشتیبانی از RTL Design است،بطور کلی یک دیاگرام درختی از این فریم ورک را برای شما تهیه کرده ایم :

yaml/
  ├── add-ons/
  │   ├── accessible-tabs/
  │   │   ├── jquery.tabs.js
  │   │   └── tabs.css
  │   ├── microformats/
  │   │   ├── icons/
  │   │   └── microformats.css
  │   ├── rtl-support/
  │   │   ├── core/
  │   │   │   ├── base-rtl.css
  │   │   │   └── base-rtl.min.css
  │   │   ├── navigation/
  │   │   │   ├── hlist-rtl.css
  │   │   │   └── vlist-rtl.css
  │   │   └── screen/
  │   │       └── typography-rtl.css
  │   └── microformats
  │       └── jquery.syncheight.css
  ├── core/
  │   ├── base.css
  │   ├── base.min.css
  │   ├── iehacks.css
  │   └── iehacks.min.css
  ├── forms/
  │   └── gray-theme.css
  ├── navigation/
  │   ├── hlist.css
  │   └── vlist.css
  ├── print/
  │   └── print.css
  └── screen/
      ├── grid-960-12.css
      ├── grid-960-16.css
      ├── screen-FULLPAGE-layout.css
      ├── screen-PAGE-layout.css
      └── typography.css

همانطور که میبینید این فریم ورک در تمامی عناصر موجود در وب و طراحی،دست شما را باز میگزارد تا بتوانید به راحتی طرح خود را پیاده سازی کنید و میتوانید برای اینکه بیشتر آشنا شوید به سایت این فریم ورک و یا به این آدرس جهت یادگیری بروید.

فریم ورک Pure

این فریم ورک هم مانند قبلی طراحی را برای شما محدود نخواهد کرد بجز آنکه در بررسی های ما نشان داده که از RTL پشتیبانی نکرده و ظاهرا باید خودتا بصورت یک گسترش دهنده این کار را انجام دهید.

این فریم ورک قابلیت اسکین دهی را دارا است و تمامی عناصر تحت وب نویسی را پشتیبانی کرده و میتوانید برای اطلاعات بیشتر به سایت جامع این فریم ورک بروید.

این بخش ادامه دارد...

منبع : http://forum.iclassic.ir/showthread.php?tid=166
نویسنده :

X
پلاگین نمایش لینک مشترک شدن در انجمن در صفحه اصلی
[align=right]نام پلاگین : نمایش لینک مشترک شدن در انجمن در صفحه اصلی[/align] [align=right]نویسنده : ...
تعیین نشده
دیدگاه های کاربران 0

برای عضویت در کانال تلگرامی
[همیار مای بی بی]
کلیک کنید
دریافت آخرین اخبار ، کدهای تخفیف و جوایز
برای اطلاع از آخرین اخبار مای بی بی فارسی عضو کانال تلگرامی شوید :