Kaptain Kitty
دسته ها :از دست ندهید
انتشار :۱۹ آذر ۱۳۹۳
بازدید :390 بار

متد های جدید

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

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

حقه ی کلاه

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


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

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

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

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

– گروه دستگاه

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

– کلاس دستگاه

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

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

زبر، نرم

– پهنای باند

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

– جهتگیری

پرتره، منظره

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

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

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

کد قاره و کشور

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

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


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

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


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

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

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

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

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

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

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


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

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


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

 

مطالب مرتبط

اشتباه کردن در مسیر فریلنسر شدن بخشی از منحنی یادگیری است. هیچ‌کس یک شبه فریلنسر نمی‌شود و دستۀ جدیدی از مشتریان پول‌ساز را به یکباره نمی‌یابد و باز هیچ‌کس ۱۰۰۰۰ دلار در یک هفته به چنگ نمی‌آورد تا بقیۀ ماه را به خوشگذرانی در ساحل رویایی با شن‌های سفید بگذراند. زمانی که من تازه کارم […]

بیانه لینکدین در روز افتتاح لینکدین لرنینگ: “امروز خوشحالیم تا آغاز فعالیت لینکدین لرنینگ را به عنوان یک پلتفرم یادگیری آنلاین اعلام کنیم  که افراد و سازمان ها را قادر می سازد تا به آمال و اهداف خود دست یابند. هدف ما کمک به افراد برای کشف  و توسعه  مهارت های مورد نیاز آنها ازطریق  یادگیری شخصی […]

نسخه‌ی ۳٫۱۲ تلگرام ساعاتی پیش منتشر شد و در این نسخه نیز همانند ورژن‌های قبلی امکانات جذاب و بسیار کاربردی جدیدی به این برنامه‌ی محبوب اضافه شد. سرنجام بعد از مدتی انتظار نسخه‌ی ۳.۱۲ تلگرام منتشر شد و امکاناتی همچون ساخت تصاویر گیف، ویرایشگر جدید عکس‌ها و امکان اضافه کردن ماسک و استیکر و متن […]

آی‌فون ۷ و ۷ پلاس اپل هفته جاری با چندین امکان جدید ارائه شد. در این مطلب نگاهی می‌اندازیم به مهم‌ترین ویژگی‌های نسل جدید آی‌فون‌ها که در آنها دیگر خبری از جک هدفون نیست؛‌ آغاز عصر فراگیری هدفون‌های بی‌سیم، به حکم اپل. کمپانی اپل به رسم هر ساله سپتامبر امسال هم در مراسم ویژه‌ای طیفی […]

نظراتتان را برایمان بنویسید

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

مطالب ما تو این شبکه های اجتماعی هم پخش میشه