کتاب آموزش برنامه نویسی Ext JS
برای اولین بار در ایران
Ext JS
در مورد Ext JS بیشتر بدانید
خرید کتاب
Breakpoint ها و آینده ی وب سایت ها – قسمت دوم
دسته بندی ها :از دست ندهید
۱۹ آذر ۱۳۹۳
459 بازدید

متد های جدید

چه ایرادی دارد که ویژگی های مدیا در هر دستگاه phone یا tablet باشد؟ آنها انتخاب های بسیار مشخصی هستند و بر اساس رای گیری که در بالا به آن اشاره شد، می خواهند که آن ویژگی مشخص شده باشد. برخی ممکن است گفته باشند که این دستگاه ها هرگز در آینده به واقعیت فیزیکی تبدیل نمی شوند، اما به سختی می توان این را باور کرد زیرا اتومبیل، تلویزیون، کامپیوتر، یخچال، ساعت و عینک نیز هنوز چیزهایی هستند که مردم امروزه به آن نیاز دارند.

مدیا کوئری ها (به عنوان ابزاری برای طراحی وب در دستگاه های مختلف) نمی توانند با خط سیر خلاقانه ی طراحان وب امروزی رقابت کنند و استانداردی برای طراحی وب در آینده محسوب می شود. شاید بهتر باشد به رویکرد های دیگر هم نگاهی داشته باشیم که خیلی هم پیچیده نیستند. تنها چیزی که نیاز داریم یک کلاه، یک کت و یک کروات است.

حقه ی کلاه

احتمالا همه ی ما با سلکتور های کلاس CSS آشنا هستیم. آنها یکی از پر کاربردترین سلکتورهای مورد استفاده در طراحی وب هستند.

[code]

lt;/pre> .muttley .do_something {…} <pre>

[/code]

آنچه که سخت می توان فهمید این است که چرا ما از این کلاس ها برای ساختن وب سایت هایی که با موبایل به خوبی تعامل دارند، استفاده نمی کنیم؟

به نظر می رسد که طراحی وب سایت ها برای موقعیت های مختلف بسیار ساده تر و سریع تر انجام خواهد شد اگر مرورگر ها از قابلیت tag کردن ویژگی HTML یا (HAT) استفاده کنند. اساسا این کار باعث می شود که پارامتر های جایگذاری در ویژگی class در تگ <html> دخیل شوند (در پروسه ی بارگذاری صفحه)، و در این حالت طراح وب را قادر می سازد که از این کلاس ها در مارک آپ CSS خود استفاده کنند.

برخی از این پارامتر ها می تواند شامل موارد زیر باشد:

– گروه دستگاه

ثابت، متحرک، خانگی، پوشیدنی، خودکار و غیره

– کلاس دستگاه

کامپیوتر شخصی، موبایل، تبلت، تلویزیون، یخچال، اتومبیل، ساعت و غیره

– دستگاه ورودی

زبر، نرم

– پهنای باند

بالا، متوسط، پایین

– جهتگیری

پرتره، منظره

– تاریخ و زمان محلی

در فرمت ddmmyyyy برای تاریخ و نمایش ۲۴ ساعته برای زمان

– موقعیت جغرافیایی عمومی

کد قاره و کشور

پارامتر های بیشتری را می توان بر اساس نیاز های پیش بینی شده اضافه کرد. علاوه بر این، تمام پارامتر ها را می توان در شیء پنجره ی DOM چکیده کرد تا بتوان آنها را به راحتی از طریق JavaScript قابل دسترس نمود.

حال فرض کنید فردی از یک گوشی Nexus 5 در یک شبکه موبایل ۴G LTE استفاده می کند. مرورگر تگ های مربوطه را به صفحه اضافه می کند و کد زیر به دست می آید:

[code]

&lt;html class="mobile phone coarse high portrait v360w v640h d07052014 t0900 utc_a af_ng"&gt;

[/code]

و اگر آنها جهت گیری موبایل را به حالت landscape تغییر دهند، مرورگر تگ را آپدیت می کند و کد زیر به دست می آید:

[code]

&lt;html class="mobile phone coarse high landscape v640w v360h d07052014 t0900 utc_a af_ng"&gt;

[/code]

اگر این حالت رخ دهد، طراح وب باید گزینه های زیادی در اختیار داشته باشد تا صفحات وب را با breakpoint های منطقی مختلف مطابقت دهد. یک مثال را در نظر بگیریم.

اخیرا یک جدول قیمت گذاری که مشابه با جداول موجود در وب سایت های SaaS امروزی می باشد، مورد بررسی قرار گرفت. این جدول سه ستونه بوده و با استفاده از تگ های ul و تگ های شناور li ساخته شده است.

در زیر نیز یک جدول قیمت گذاری آمده است که محتوای پرسش و پاسخ داشته و آراش آن نیز چند ستونی است.

واضح است که این المان های چند ستونی در همه ی موبایل ها به خوبی دسکتاپ دیده نمی شوند. بنابراین، در باطن طراحی وب ریسپانسیو، باید آنها را با ابعاد صفحه نمایش های کوچکتر مطابقت دهیم. به این روش که وقتی صفحه ی وب بر روی تبلت و در حالت landscape مشاهده می شود، این دو کامپوننت تصویری را به صورت چند ستونی نمایش دهیم.

منطق موجود در این کار این است که انتظار داشته باشیم که جهت گیری تبلت در حالت landscape، فضای کافی برای نمایش جدول را فراهم می کند. اگر این شرایط مهیا نشود، در این صورت ستون ها را به صورت خطی و عمودی تبدیل می کنیم.

CSS اصلی برای جدول قیمت گذاری به این صورت است:

[code]

ul{  margin: 0;  padding: 0;  list-style: none;} ul li{  float: left;  width: 33%;}

[/code]

بنابراین با استفاده از HAT، این ویژگی ها را با استفاده از مارک آپ زیر پیاده سازی می کنیم:

[code]

.mobile ul li{  float: none;  width: 100%;} .mobile.tablet.landscape ul li{  float: left;  width: 33%;}

[/code]

 




نظراتتان را با ما در میان بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *