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

این تاپیک 0 مشارکت کننده و 0 پاسخ دارد .

۲ visibility
نویسنده پست
یکشنبه ، ۲۵ شهریور ۱۳۹۷     ۱۲:۴۰ ب.ظ #


معین تفضلی

Subscriber
6 پست24 تاپیک

آموزش طراحي وب سايت با Bootstrap


طراحي سايت با Bootstrap
استقبال طراحان وبسايت از فريم ورک Bootstrap طي چند سال اخير موجب شده است که نام آن براي همه ي کساني که در حوزه وب فعال هستند آشنا باشد. البته اين همه گير شدن به اين معني نيست که طراحي سايت با Bootstrap براي همه مناسب باشد. قبل از استفاده از بوت استرپ بهتر است معايب و مزاياي آن را به خوبي بشناسيم.
در مقالات گذشته وبسيما در مورد موضوعاتي مانند Bootstrap چيست

Bootstrap مجموعه اي از ابزارهاي رايگان براي ايجاد صفحات وب است که شامل دستورات HTML، CSS و توابع جاوا اسکريپت جهت توليد المان هاي مورد نياز طراحي وب مي باشد
و مقايسه بوت استرپ و متريال ديزاين صحبت کرده ايم. در اين مقاله تلاش ميکنيم نکات مثبت و منفي طراحي سايت با Bootstrapرا بررسي کنيم.
برخي از سايت هاي شناخته شده و پربازديد در دنيا که از فريم ورک Bootstrap در طراحي سايت خود بهره ميبرند عبارتند از؛ Paypal, Aliexpress, Shetterstock, Upwork, Netflix.
چرا طراحي سايت با Bootstrap را انتخاب کنيم؟
براي استفاده از بوت استرپ دلايل بيشماري ميتوان يافت، برخي از آنها اهميت بالايي دارند و برخي ديگر ممکن است در کار شما حايز اهميت نباشند. در اين بخش مهمترين دلايل انتخاب Bootstrap را بررسي ميکنيم.

1- ساختار جدول بندي ساده و طراحي ريسپانسيو
فريم ورک بوت استرپ براساس ساختار جدول بندي 12 ستونه نوشته شده است و نحوه نمايش المان هاي مختلف در موبايل و تبلت به خوبي پيش بيني شده است. با اين ساختار گريد بندي شما قادر هستيد يک المان را در سايزهاي مختلف مديريت کنيد. بعنوان مثال يک باکس محصول ميتواند در دسکتاپ يک چهارم فضا را اشغال کند، در تبلت يک دوم و در موبايل تمام عرض صفحه را، حتي ميتوانيد به راحتي المان هاي گوناگون را در سايزهاي متفاوت پنهان کنيد.
ساختار 12 ستونه و طراحي ريسپانسيو را ميتوان مهمترين دليل افراد برا طراحي سايت با Bootstrap دانست. قابليتي که به تنهايي سرعت راه اندازي يک سايت جديد را تا 30 درصد افزايش ميدهد.
2- پيش بيني المان هاي مختلف در طراحي سايت
قابليت هاي بوت استرپ به ساختار جدول بندي ختم نميشود و ساير المان هاي مهم در طراحي سايت نيز مورد توجه توسعه دهندگان Bootstrap بوده است. المان هايي که به راحتي قابل تغيير هستند و شما ميتوانيد آنها را با طراحي مورد نظر خود به کاربران ارائه دهيد.
مهمترين المان هاي پيش بيني شده توسط اين فريم ورک عبارتند از؛ منو، دکمه، منوي آبشاري، فرم ها، اخطارها و پيام ها، نوار پيشرفت و …
3- افزونه هاي جاوا اسکريپت
علاوه بر المان هاي HTML و دستورات CSS پيش بيني هاي مورد نياز براي افزونه هاي Javascript نيز در بوت استرپ انجام شده است. ابزارهايي ساده ولي کارآمد شامل اسلايدر، تب و آکاردئون به شما کمکم ميکنند به سرعت المان هاي Interactive را به سايت خود اضافه کرده و به راحتي محتواي خود را در صفحه مديريت کنيد.
4- آموزش هاي دقيق و منابع گسترده
با يک جستجوي ساده در سطح وب متوجه ميشويد که آموزش هاي متنوعي براي آموزش طراحي سايت با Bootstrap تهيه و منتشر شده است. آموزش هايي که به شما کمک ميکند جزئيات کار با اين فريم ورک را به سرعت بياموزيد. همچنين منابع گسترده اي براي نمونه کدها و قالب هاي طراحي شده با Bootstrap در دسترس است که نقطه شروعي قابل اتکا براي وبمستران خواهد بود.
اين جامعه گسترده و دسترسي به منابع بسيار حتي از امکانات هسته بوت استرپ با اهميت تر است، زيرا عملا منابعي نامحدود با سليقه هاي مختلف را در اختيار شما قرار ميدهد.
چرا از Bootstrap در طراحي سايت استفاده نکنيم؟
در بخش قبلي نکات مثبت طراحي سايت با بوت استرپ را بررسي کرديم ولي هميشه هم اين فريم ورک انتخاب مناسبي براي پروژه طراحي وب سايت شما نخواهد بود. همچون ساير فريم ورک ها ميتوان نکات منفي هم براي آن در نظر گرفت که مهمترين آنها را در اين بخش بررسي خواهيم کرد.

1- بوت استرپ بهترين و بهينه ترين راه نيست
يکي از مهمترين ايرادات بوت استرپ آن است که المان هاي گوناگون آن هميشه براساس استانداردهاي طراحي وب و بهينه سازي نيستند. در نتيجه شما مجبور ميشويد از برخي المان ها چشم پوشي کنيد يا تغييراتي اساسي در آنها ايجاد کنيد.
يکي از مشکلات بوت استرپ استفاده از کلاس بندي هاي متعدد و بعضا بيش از اندازه است. بعنوان مثال ممکن است براي يک دکمه ساده در صفحه شما مجبور به استفاده از 4 کلاس مختلف بشويد و همين امر نسبت متن به کد در صفحات شما را کاهش ميدهد.
2- کدهاي Bootstrap براي يک طراحي سايت عمومي سنگين است
فريم ورک بوت استرپ در نقطه راه اندازي همراه با 126 کيلوبايت css و 29 کيلوبايت java خواهد بود. اگر شما از font-awesome نيز استفاده کنيد اين عدد خيلي بيشتر خواهد شد. اين اعداد زماني آزاردهنده است که بدانيد بيشتر کدها براي المان ها و شرايطي نوشته شده است که ممکن است هرگز در پروژه شما استفاده نشوند.
به اين اعداد بايد کدنويسي هاي انجام شده براي طراحي هاي اختصاصي و تهيه خروجي متناسب با طرح اوليه را نيز اضافه کنيم. در نتيجه سايت شما نمايش درستي در موبايل و تبلت خواهد داشت ولي تعداد زيادي از کاربران به دليل سرعت پايين ممکن است سايت شما را ترک کنند.
3- Bootstrap خلاقيت را از شما ميگيرد
طراحي سايت به دو بخش اصلي تقسيم ميشود که عبارتند از طراحي و کدنويسي، براي ايجاد يک خروجي ايده آل بايد هردو به خوبي کار خود را انجام داده و البته هماهنگ با يکديگر باشند. زماني که طراح شما محدود به طراحي سايت با Bootstrap باشد ناخودآگاه از خلاقيت خود مي کاهد تا المان هاي سايت متناسب با امکانات اين فريم ورک باشد.
بسياري از وبمستران معتقدند که طراحي سايت با Bootstrap موجب شده سايت هاي بسياري در اينترنت شبيه به يکديگر و در نتيجه کسل کننده باشند. ايرادي که تا حد بسيار زيادي وارد است.
استفاده از بوت استرپ نبايد موجب از بين رفتن خلاقيت شما شود، هدف استفاده از آن افزايش سرعت کدنويسي است ولي اين موضوع نبايد موجب تغيير در طراحي هاي شما شود.
از بوت استرپ استفاده کنيم يا نه؟
تمام مواردي که براي نکات مثبت و منفي طراحي سايت با Bootstrap ذکر کرديم ممکن است براي شما کم اهميت يا پر اهميت باشند. پيشنهاد ما آن است که قبل از بکارگيري، اين ابزار را به خوبي بشناسيم.
اگر تازه کار هستيد يا خيلي حرفه اي بوت استرپ بهترين انتخاب براي شماست!

براي تازه کارها، بوت استرپ المان هاي HTML بسياري را پيش بيني کرده و طراحي ريسپانسيو را بسيار ساده کرده است. به آنها کمک ميکند سريع و قابل اعتماد باشند.
براي حرفه اي هم برخورداري از يک فريم ورک محترم و شناخته شده ميتواند نقطه قوت محسوب گردد. حرفه اي ها به راحتي نکات منفي طراحي وب با بوت استرپ را رفع ميکنند و از ويژگي هاي مثبت آن بهره ميبرند.

در حال حاضر نزديک به 80 درصد نمونه کارهاي طراحي سايت

وبسيما با استفاده از فريم ورک بوت استرپ انجام ميشود.

منابع:www.websima.com
www.118file.com
www.webone.co

0  تشکر
پست 1 تا 1 (از مجموع 1 پست)

برای پاسخ دادن به این تاپیک باید وارد سایت شوید .