بررسی چارچوب‌های HTML و CSS

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

کد خبر: ۵۵۹۹۱۷

با این مقدمه به سراغ طراحی رابط کاربری سایت‌ها می‌رویم. حتما مقاله هفته پیش در بخش وب را که در مورد طراحی تعامل‌گرا بود مطالعه کرده‌اید، اگر این‌کار را نکرده‌اید پیشنهاد می‌کنم آن را مطالعه کنید. در آن مقاله درخصوص طراحی تعامل‌گرا توضیحاتی داده شد و درباره مزایا و معایب آن بحث شد، اما حالا به عنوان طراح سایتی که مجبور است طرح‌های گرافیکی را به کد‌های HTML و CSS تبدیل کند، باید دید چه راه‌حل‌هایی برای طراحی تعامل‌گرا پیش روی خود دارید.

راه اصلی این است که با توجه به مفاهیم، این مدل طراحی با استفاده از دانسته‌های خود در زمینه طراحی سایت آن چیزی را که مورد نیاز است پیاده‌سازی می‌کند.

با توجه به مقدمه‌ای که در بالا گفتیم یک سوال پیش می‌آید، آیا برای طراحی سایت هم چارچوب‌های کاری وجود دارد؟ استفاده از این چارچوب‌های کاری چقدر سرعت توسعه را بهبود می‌بخشد و نتیجه خروجی، چقدر به آن چیزی که واقعا نیاز بود، نزدیک است؟

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

قصد داریم در شماره‌های آینده چند نمونه از این چارچوب‌های کاری را بررسی و با هم مقایسه کنیم تا ببینیم کدام یک امکانات بهتری در اختیار ما قرار می‌دهد. اولین چارچوب کاری که بررسی می‌کنیم Twitter Bootstrap است.

Twitter Bootstrap

این چارچوب کاری مجموعه‌ای رایگان از ابزارهایی برای ایجاد وب‌سایت و برنامه‌های تحت وب است، دربردارنده قالب‌های html و cssهای آماده برای قالب‌های چاپی، فرم‌های وب، دکمه‌ها، نمودار‌ها، نوار راهبری و ... است و شامل یک‌سری توسعه از JavaScript برای طراحی سایت است.

این چارچوب کاری به‌صورت متن باز روی سایت GitHub قرار دارد که شما با استفاده از نشانی http://twitter.github.io/bootstrap/ می‌توانید به آن دسترسی داشته باشید. از جمله سایت‌های مشهوری که از این چارچوب کاری استفاده می‌کنند می‌توان به NASA و MSNBC اشاره کرد.

Bootstrap توسط مارک اوتوو و یاکوب تورنتون در توییتر طراحی و توسعه داده شد. کتابخانه‌های متعددی برای طراحی رابط کاربری توسعه داده شده بودند که بعضی از آنها ناپایداری زیادی داشتند و هزینه نگه‌داری‌شان بسیار بالا بود. این مساله آنها را بر آن داشت که این چارچوب کاری را توسعه دهند.

ویژگی‌های Bootstrap

۱ – پشتیبانی از HTML5 و CSS3

۲ – سازگاری با مرورگر‌های اصلی موجود (IE، Firefox، Chrome، ...)

۳ – پشتیبانی از طراحی تعامل‌گرا و سازگاری با مرورگر‌های دستگاه‌های موبایل و تبلت از نسخه ۲ به بعد.

نکته : پشتیبانی از تمام مرورگرها به این صورت است که بعضی ویژگی‌های موجود در CSS3 مانند گوشه‌های گرد و سایه‌ها که در مرورگرهای قدیمی پشتیبانی نمی‌شود، در این پروتکل توسعه داده شده است.

ساختار و توابع

Bootstrap به‌صورت ماژولار و شامل مجموعه‌های از LESS Stylesheet است که اجزای مختلف آن را پیاده سازی کرده‌اند. این Stylesheet با نام bootstrap.less است و به توسعه‌دهند‌گان این اجازه را می‌دهد تا اجزای سیستم را با توجه به نیاز‌های خود تغییر دهند و آن را با هر چیزی که مدنظر خودشان است یکسان‌سازی کنند.

Bootstrap از طراحی مبتنی بر جدول (Grid) در ساختار قالب‌های HTML استفاده می‌کند، که با استاندارد طول ۹۴۰ پیکسل است، اما توسعه‌دهند‌گان برحسب نیاز خود می‌توانند این عدد را تغییر دهند. این قالب‌ها در وضوح‌های مختلف موجود است: موبایل، حالت Portrait و Landscape، تبلت‌ها و رایانه‌هایی با وضوح مختلف. ستون‌های دیگر این ساختار بر اساس وضوح تصویر دستگاه نمایش دهنده، سایز خود را تطبیق می‌دهند.

مجموعه‌ای از Stylesheet‌ها برای اجزای مختلف HTML فراهم می‌آورد. این مجموعه ظاهری متحدالشکل و طراحی مدرن برای قالب‌بندی متون و جداول و فرم‌های وب را ایجاد کرده است؛ مجموعه‌ای از المان‌های جدید برای html، که شما با استفاده از المان‌های موجود در html و کدنویسی زیادی آنها را تولید می‌کردید.