بسم الله الرحمن الرحیم

آموزش طراحی سایت با بوت استرپ

بخش اول

نمایش لیست آموزش های Bootstrap

بسم الله الرحمن الرحیم

آموزش طراحی سایت با بوت استرپ

بخش اول

نمایش لیست آموزش های Bootstrap

در سال های پیش مشکلاتی زیادی برای طراحی صفحات وب وجود داشت، که از بزرگترین مشکلات می توان نمایش یک سایت در مرورگرهای مختلف و همچنین در دستگاه های مختلف نام برد.
برای طراحی هر سایتی می بایست بسیاری از بخش ها که همیشه تکراری بودند، مجددا پیاده سازی می شد و یا در بهترین حالت کپی شوند، که این مشکلات خودش را داشت.
برای طراحی سایتی که بتواند در Resolution های مختلف نمایش داده شود، روش های زیادی وجود داشت که طبیعتا پیچیده بودند و زمان زیادی را باید صرف آن می کردید. در نهایت هیچگاه نمی توانستیم سایتی داشته باشیم که به زیبایی در دستگاه های مختلفی همچون Mobile, Tablet, Pc با سایز های متفاوت به خوبی نمایش داده شوند.
بهترین راه حلی که اتخاذ می شد این بود که یک سایت برای نسخه های مختلف نوشته شود مثلا 4 نسخه تولید می شد و با استفاده از کدهای Java Script نوع دستگاه کاربر تشخیص داده می شد سپس به سایت مورد نظر هدایت می شد مثلا
Mobile.Ably.ir برای دستگاه های موبایل بود که صفحه نمایش بسیار کوچکی داشتند، علاوه بر استفاده از کدهای Java Script برای تشخیص نوع دستگاه کاربر لینکی در سایت با عنوانی همچون "نسخه موبایل" قرار داده می شد تا اگر کاربر نیاز به این نسخه دارد، سایت را در این نسخه مشاهده کند.

مشکلاتی زیادی وجود داشت که برای رفع آن می بایست هزینه و زمان زیادی صرف می شد که نهایتا هم به نتیجه ی مناسبی نمی رسیدیم.

Twitter Bootstrap

همه ی این مشکلات باعث شد تا شرکت Twitter در سال 2011 در تاریخ 19 Aug یک framework با نام Bootstrap معرفی کنند.
Framework در معنای فارسی به چهارچوب شناخته می شود، که می توان آن را مجموعه ای از قوانین برای انجام یک کار تعریف کرد.
پس از معرفی این Framework، کاربران زیادی به آن جذب شده اند و همین امر باعث شد تا نسخه های بعدی Bootstrap به سرعت معرفی شوند.
با گذشته زمان Framework Bootstrap به عنوان یکی از ابزار های اساسی طراحی صفحات وب شناخته می شود. تاجایی که طراحان UI و Template در هنگام معرفی محصول خود از نام Bootstrap به عنوان یکی از برتری های سایت خود نام می برند.
همچنین بسیاری از شرکتها در آگهی های استخدام خود Bootstrap را به عنوان یکی از معیار های استخدام افراد معرفی می کنند.

با توجه به همین مسائل تصمیم گرفتیم تا در دروه ی آموزشی Bootstrap شما را با طراحی یک Template آشنا کنیم.

معرفی Bootstrap

بوت استرپ محبوب ترین Framework طراحی صفحات وب می باشد که مجموعه ای از HTML، CSS، Java Script و jQuery را برای طراحی بخش های مختلف سایت از جمله Menu, Slider و... در اختیار شما قرار می دهد و شما نیازی به کد نویسی نخواهید داشت (در واقع کد نویسی های تکرار شما را حذف می کند)، تنها کافی است که از این بخش های آماده به سادگی استفاده نمایید.
همچنین بوت استرپ یک فریم ورک رایگان و یا اصطلاحا Open Source می باشد. تمامی کدهای این محصول در github قرار داده شده است و شما می توانید آن را دریافت کنید و آن را برای خود شخصی سازی کنید و یا آن را توسعه دهید و در اختیار دیگران قرار دهید.

طراحی وب سایت پاسخگو (responsive) چیست؟

Responsive یا واکنش گرا

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

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

Responsive یا واکنش گرا بودن یک سایت باعث گرفتن نمره ی مثبت از سوی موتورهای جستجو می شود و در نتیجه SEO یک سایت افزایش پیدا خواهد کرد. از طریق بخش زیر می توانید دوره آموزشی SEO را مطالعه کنید.

سئو سایت

چرا از بوت استرپ باید استفاده کنیم ؟

مزایای استفاده از بوت استرپ

هر کسی با داشتن دانشی پایه از HTML و CSS می تواند شروع به استفاده از بوت استرپ نماید. در نتیجه کار با آن بسیار ساده و راحت خواهد بود و همچنین باعث می شود شرکت ها بتوانند بدون نیاز به هیچ آموزش داخلی از افراد توانمند در پروژه ها استفاده کنند زیرا همه ی افراد از فریم ورک بوت استرپ استفاده می کنند در نتیجه به سادگی می توانند در پروژه های متفاوت شرکت کنند.
طراحی ریسپانسیو (Responsive features) ویژگی بزرگ این فریم ورک می باشد.

Mobile-first approach

در طراحی بوت استرپ از رویکرد mobile-first استفاده می شود .یعنی در طراحی سایت قبل از اینکه به کامپیوتر فکر شود ابتدا سایت را برای کاربران موبایل و دستگاه هایی که صفحه نمایش کوچک دارند، طراحی می کنیم. دلیل این موضوع استفاده بیشتر مردم از موبایل و تبلت نسبت به کامپیوتر ها می باشد.

سازگاری با مرورگر یا Cross Browser

بوت استرپ از تمامی مرورگرهای مدرن (کروم، فایرفاکس ، اینترنت اکسپلورر، سافاری و اپرا)پشتیبانی می نماید.


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