طراحی سایت اختصاصی

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

این قضیه سبب ساز شد درین نوشته ی علمی از بلاگ سبزلرن، به‌این مورد بپردازیم که تفاوت بوت استرپ 4 و 5 چیست؟ و کدام ورژن برای یادگیری مطلوب میباشد؟

فریمورک بوت استرپ چیست؟
در صدر عالی میباشد معرفی مختصری از فریمورک بوت استرپ داشته باشیم.

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

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

مهم‌ترین تفاوت بوت استرپ 4 و 5 چیست؟
همان گونه که در اولِ مقاله نیز گفتیم، دو ورژن بوت استرپ 4 و بوت استرپ 5 دوست داستنی‌ترین ورژن‌های این فریمورک فعلا میباشند و توسعه و گسترش دهندگان این فریمورک، از یک کدام از این ورژن‌ها به کار گیری می‌نمایند. درپی نگاهی به مهم‌ترین تفاوت‌های Bootstrap ورژن 4 و 5 خوا‌هیم داشت.

عدم هواخواهی از جی کوئری
مطرح ترین تفاوت بوت استرپ 4 و 5، عدم به کار گیری از کتابخانه JQuery برای استعمال از کدهای جاوا اسکریپت در ورژن 5 این فریمورک بود. این شغل سبب عدم نیاز به بارگزاری این کتابخانه در پروژه و ارتقا سرعت برکزاری صفحه ها اینترنت می شود. ضمن این، کتابخانه جی کوئری محبوبیت دیرین را ندارد و با وجود رقبای قدرتمندی نظیر انگولار و React، در درحال حاضر منسوخ شدن میباشد.

حذف جی کوئری از بوت استرپ 5 منجر شد اکثری از پیشرفت دهندگانی که به جهت سرعت بار گذاری تحت صفحه ها Bootstrap از آن سفر کرده بودند، مجدد بدین فریمورک برگردند. با این شغل بوت استرپ جان مجدد‌ای گرفت و محبوبیت بیشتری نزد گسترش دهندگان فرانت اند بدست آورد.

تغییر‌و تحول واحد اندازه‌گیری از PX به Rem و Em
یکی‌از دیگر از مهم‌ترین تفاوت‌های بوت استرپ ورژن 4 و 5 در تغییر و تحول واحدهای اندازه گیری پیش‌فرض میباشد؛ جایی که‌این واحدها از پیکسل به Em و Rem تبدیل گردیده‌اند. همان گونه که احتمالا می دانید، واحد اندازه گیری پیکسل، یک واحد استاتیک میباشد؛ در فیض در‌صورتی‌که که قصد پیاده سازی یک وب سایت واکنشگرا را داشته باشید، حسابی به دردسر میفتید.

البته واحدهای Em و Rem واحدهایی نسبی می باشند و برای به کار گیری در پیاده سازی عکس العمل‌گرا، مورد‌ای بهتر محسوب می شوند. EM نوعی واحد اندازه گیری میباشد که موازی با اندازه فونت فعلی یک المان میباشد؛ مثلا در حالتی‌که مقدار Font-size برای نوشته‌های H1 را روی مقدار 20 پیکسل در اختیار بگذاریم، سایز 1.5 EM برای این تگ، موازی با سایز 30 پیکسل میباشد. REM شبیه EM میباشد، البته به مکان فونت فعلی، به فونت ریشه متعلق میباشد. به عنوان مثال، در صورتی مقدار Font-size برای المان‌های مو جود در تگ Header را روی 12 پیکسل در اختیار بگذاریم و از یک تگ H2 در Header با سایز 2 REM استعمال کنیم، سایز این هدر موازی با 24 پیکسل خواهد بود.

در شکل عدم انتخاب سایز فونت برای ریشه یک المان، سایز 16 پیکسل موازی با 1 REM احتساب گردد.

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

اضافه شدن پالت‌های رنگی بیشتر
در بوت استرپ 5 رنگ‌های نو و متنوع‌تری برای به کارگیری در وبسایت‌ها ارائه گردیده که میتواند در جذابیت و زیبایی خروجی پایانی اثر مثبتی داشته باشد. همینطور این فریموریک به وضوح و خوانایی رنگ‌ها نیز اعتنا ویژه‌ای داشته؛ به نحوی که اشخاص با ایرادات بصیرت نیز میتوانند به راحتی از وبسایت‌های بر پایه ی بوت استرپ به کار گیری نمایند و مشکلی از دید دیدن رنگ‌ها نداشته باشند!

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

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

این قضیه سبب ساز شد درین نوشته ی علمی از بلاگ سبزلرن، به‌این مورد بپردازیم که تفاوت بوت استرپ 4 و 5 چیست؟ و کدام ورژن برای یادگیری مطلوب میباشد؟

فریمورک بوت استرپ چیست؟
در صدر عالی میباشد معرفی مختصری از فریمورک بوت استرپ داشته باشیم.

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

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

مهم‌ترین تفاوت بوت استرپ 4 و 5 چیست؟
همان گونه که در اولِ مقاله نیز گفتیم، دو ورژن بوت استرپ 4 و بوت استرپ 5 دوست داستنی‌ترین ورژن‌های این فریمورک فعلا میباشند و توسعه و گسترش دهندگان این فریمورک، از یک کدام از این ورژن‌ها به کار گیری می‌نمایند. درپی نگاهی به مهم‌ترین تفاوت‌های Bootstrap ورژن 4 و 5 خوا‌هیم داشت.

عدم هواخواهی از جی کوئری
مطرح ترین تفاوت بوت استرپ 4 و 5، عدم به کار گیری از کتابخانه JQuery برای استعمال از کدهای جاوا اسکریپت در ورژن 5 این فریمورک بود. این شغل سبب عدم نیاز به بارگزاری این کتابخانه در پروژه و ارتقا سرعت برکزاری صفحه ها اینترنت می شود. ضمن این، کتابخانه جی کوئری محبوبیت دیرین را ندارد و با وجود رقبای قدرتمندی نظیر انگولار و React، در درحال حاضر منسوخ شدن میباشد.

حذف جی کوئری از بوت استرپ 5 منجر شد اکثری از پیشرفت دهندگانی که به جهت سرعت بار گذاری تحت صفحه ها Bootstrap از آن سفر کرده بودند، مجدد بدین فریمورک برگردند. با این شغل بوت استرپ جان مجدد‌ای گرفت و محبوبیت بیشتری نزد گسترش دهندگان فرانت اند بدست آورد.

تغییر‌و تحول واحد اندازه‌گیری از PX به Rem و Em
یکی‌از دیگر از مهم‌ترین تفاوت‌های بوت استرپ ورژن 4 و 5 در تغییر و تحول واحدهای اندازه گیری پیش‌فرض میباشد؛ جایی که‌این واحدها از پیکسل به Em و Rem تبدیل گردیده‌اند. همان گونه که احتمالا می دانید، واحد اندازه گیری پیکسل، یک واحد استاتیک میباشد؛ در فیض در‌صورتی‌که که قصد پیاده سازی یک وب سایت واکنشگرا را داشته باشید، حسابی به دردسر میفتید.

البته واحدهای Em و Rem واحدهایی نسبی می باشند و برای به کار گیری در پیاده سازی عکس العمل‌گرا، مورد‌ای بهتر محسوب می شوند. EM نوعی واحد اندازه گیری میباشد که موازی با اندازه فونت فعلی یک المان میباشد؛ مثلا در حالتی‌که مقدار Font-size برای نوشته‌های H1 را روی مقدار 20 پیکسل در اختیار بگذاریم، سایز 1.5 EM برای این تگ، موازی با سایز 30 پیکسل میباشد. REM شبیه EM میباشد، البته به مکان فونت فعلی، به فونت ریشه متعلق میباشد. به عنوان مثال، در صورتی مقدار Font-size برای المان‌های مو جود در تگ Header را روی 12 پیکسل در اختیار بگذاریم و از یک تگ H2 در Header با سایز 2 REM استعمال کنیم، سایز این هدر موازی با 24 پیکسل خواهد بود.

در شکل عدم انتخاب سایز فونت برای ریشه یک المان، سایز 16 پیکسل موازی با 1 REM احتساب گردد.

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

اضافه شدن پالت‌های رنگی بیشتر
در بوت استرپ 5 رنگ‌های نو و متنوع‌تری برای به کارگیری در وبسایت‌ها ارائه گردیده که میتواند در جذابیت و زیبایی خروجی پایانی اثر مثبتی داشته باشد. همینطور این فریموریک به وضوح و خوانایی رنگ‌ها نیز اعتنا ویژه‌ای داشته؛ به نحوی که اشخاص با ایرادات بصیرت نیز میتوانند به راحتی از وبسایت‌های بر پایه ی بوت استرپ به کار گیری نمایند و مشکلی از دید دیدن رنگ‌ها نداشته باشند!

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