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

1392/5/27

در شماره‌های پیش در مورد اهمیت و مزایای استفاده از پروتكل یا چارچوب‌های كاری در توسعه نرم‌افزار توضیح دادیم و گفتیم استفاده از آنها مشكلات بسیاری را كه ممكن است در طول توسعه یك برنامه داشته باشیم، براحتی و در كوتاه‌ترین زمان ممكن حل می‌كند. علاوه بر اینها استفاده از چارچوب‌های كاری برنامه‌ها را ساختارمند می‌كند و شما می‌دانید هر چیزی كجاست و چه زمانی باید از آن استفاده كنید.
با این مقدمه به سراغ طراحی رابط كاربری سایت‌ها می‌رویم. حتما مقاله هفته پیش در بخش وب را كه در مورد طراحی تعامل‌گرا بود مطالعه كرده‌اید، اگر این‌كار را نكرده‌اید پیشنهاد می‌كنم آن را مطالعه كنید. در آن مقاله درخصوص طراحی تعامل‌گرا توضیحاتی داده شد و درباره مزایا و معایب آن بحث شد، اما حالا به عنوان طراح سایتی كه مجبور است طرح‌های گرافیكی را به كد‌های 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 و كدنویسی زیادی آنها را تولید می‌كردید.
 
پشتیبانی از jQuery و استفاده از آن در بخش‌های مختلف Bootstrap.
تگ ها

Warning: Unknown: write failed: Disk quota exceeded (122) in Unknown on line 0

Warning: Unknown: Failed to write session data (files). Please verify that the current setting of session.save_path is correct (/var/cpanel/php/sessions/ea-php54) in Unknown on line 0