دوره آموزشی برنامه نویسی وب سایت (مجتمع فنی تهران)
این دوره شامل یادگیری مباحث Responsive design with bootstrap, Less & Sass است. در ادامه مطالب برای شما هر کدام را به طور واضح و جدا توضیح می دهیم تا با اطمینان خاطر کامل در یادگیری این پکیج قدیم بردارید. اول از همه با Bootstrap آشنا بشویم.
Bootstrap یک چارچوب (framework) متنباز (open-source) و جلوهگذاری وب (front-end) است که توسط توسعهدهندگان Twitter طراحی و ارائه شده است. این چارچوب با هدف تسهیل فرآیند طراحی وبسایتهای واکنشگرا (Responsive) و شیک با استفاده از کدهای HTML، CSS و JavaScript ایجاد شده است.
ویژگیهای اصلی Bootstrap:
Bootstrap به توسعه دهندگان و طراحان وب امکان ارتقاء سرعت و کیفیت توسعه وبسایتها را میدهد. در زیر، ویژگیهای اصلی این چارچوب را مرور میکنیم:
۱. شبکه (Grid System):
– یک سیستم شبکه قدرتمند که امکان چینش اجزاء وب را در ستونها و ردیف ها فراهم میکند. این سیستم شبکه به سادگی اجازه میدهد وبسایتها را به سهولت به ابعاد مختلف دستگاهها سازگار کرد.
۲. کامپوننتهای آماده:
– Bootstrap شامل مجموعهای از کامپوننتهای آماده مانند فرمها، کشوییها، ناوبریها، جداول و غیره است که میتوانند به سرعت و به شیوه یکنواخت در وبسایتها اعمال شوند.
۳. تایپوگرافی:
– تعریفهای CSS برای مدیریت و سفارشیسازی آسان فونتها، اندازهها و سبکهای مختلف متن.
۴. جلوههای جاوااسکریپت:
– Bootstrap از برخی افکتها و جلوههای جاوااسکریپت استفاده میکند که به طراحی جذاب و تعاملی وبسایتها کمک میکنند.
۵. پایگاه داده اقلام:
– استفاده از پایگاه داده اقلام برای مدیریت متغیرهای CSS و سفارشیسازی آنها با افتخارهای طراحی.
۶. پروژه آماده:
– Bootstrap به عنوان یک چارچوب آماده برای استفاده سریع از ساختارهای پایه و ظاهر وبسایتها ارائه میشود، که زمان توسعه را به شدت کاهش میدهد.
۷. توسعه و پیشرفت:
– با توجه به جامعه گسترده توسعهدهندگان، Bootstrap به طور مداوم بهروزرسانی میشود و امکانات جدید و بهبودهای عملکردی را در اختیار کاربران قرار میدهد.
Bootstrap به عنوان یک چارچوب محبوب در جهان توسعه وب شناخته میشود و در ایجاد وبسایتهایی با طراحی زیبا و واکنشگرا بسیار کاربرد دارد.
اما دو موضوع دیگر که در این پک آموزش داده می شوند Sass و Lessاست.
Sass (Syntactically Awesome Stylesheets) و Less هر دو زبانهای پیشپردازش (preprocessor) CSS هستند که به توسعهدهندگان امکاناتی برای بهبود کدنویسی و مدیریت بهتر استایلهای وبسایتها ارائه میدهند. این دو زبان به برنامهنویسان امکان میدهند از ویژگیهای پیشرفتهتری نظیر متغیرها، پنجرهها (nesting)، جلوهها (mixins) و سایر ویژگیها بهرهمند شوند.
ویژگی Sass:
– Sass ابتدا توسط Hampton Catlin توسعه داده شد و بعداً توسط همکارانش در شرکت Haml بهبود یافت. نسخه اصلی Sass از فاصله به عنوان جداکننده بلاکها استفاده میکرد، اما Sass با نام SCSS (Sassy CSS) همچنان استفاده میشود که از نمادهای `{}` برای ایجاد بلاکها استفاده میکند.
– دارای متغیرها، پنجرهها (nesting)، جلوهها (mixins)، توابع و افزونهها.
– پشتیبانی از وارد کردن فایلها به کمک `@import`.
– امکان تعریف توابع و استفاده از اپراتورها در محاسبات.
ویژگی Less:
– Less توسط Alexis Sellier ایجاد شد. نام Less از این ایده گرفته شده است که کمتر (less) کد نویسی نیاز باشد و از نظر سینتکس شبیه به CSS است
– دارای متغیرها، پنجرهها (nesting)، جلوهها (mixins)، توابع و افزونهها.
– پشتیبانی از وارد کردن فایلها به کمک `@import`.
– امکان تعریف توابع و استفاده از اپراتورها در محاسبات.
تفاوت lessوsass :
۱. سینتکس:
– Sass دو نسخه دارد: یک نسخه با فاصله به عنوان جداکننده بلاکها و یک نسخه SCSS با نمادهای `{}`. در حالی که Less از نماد `{}` برای ایجاد بلاکها استفاده میکند.
۲. توسعه پروژه:
– در بسیاری از موارد، Sass برای پروژههای بزرگتر مورد استفاده قرار میگیرد. این به خاطر دارای ویژگیهای پیشرفتهتر و جامعتر است.
۳. وارد کردن فایلها:
– Sass و Less هر دو از امکانات وارد کردن (import) فایلها برای مدیریت بهتر و تقسیمبندی کد پشتیبانی میکنند. اما در Less، این امکان در کلیه نسخهها وجود دارد ولی در Sass باید با نسخه SCSS استفاده شود.
۴. مدیریت خطا:
– Sass معمولاً بهترین پشتیبانی از مدیریت خطا و پیامهای خطا را دارد. این امکان در Sass به توسعهدهندگان کمک میکند تا به راحتی خطاها را پیدا و رفع کنند.
۵.گستردگی جامعه و پروژهها:
– هر دو Sass و Less دارای جوامع توسعه فعال هستند و از آنجا که هر دو ابزار قدرتمندی هستند، توسعهدهندگان معمولاً به سلیقه خود یکی از آنها را انتخاب میکنند. Sass ممکن است در پروژههای بزرگتر محبوبتر باشد.
به طور کلی، انتخاب بین Sass و Less بیشتر به سلیقه شما و نیازهای پروژه شما برمیگردد. هر دو زبان امکانات فوقالعادهای برای ساخت و نگهداری استایلهای وبسایتها فراهم میکنند، و این تفاوتها ممکن است بستگی به ساختار پروژه و سلیقه شما داشته باشد.
پیش نیازها:
گذراندن دوره Web design1
سرفصل ها:
- بررسی مفهوم Responsive
- معرفی مفهوم CSS Framework
- معرفی و بررسی تاریخچه BootStrap
- بررسی روش استفاده از BootStrap در یک سند HTML
- معرفی Grid System
- معرفی Media Query
- معرفی انواع سایزها و کلاسهای مرتبط و روش تشخیص Resolution کاربر
- معرفی انواع Layout ها و کلاسهای مرتبط مانند Fluid Layout
- معرفی Fixed Layout
- معرفی Responsive Layout
- بررسی Typography با BootStrap
- بررسی روش ایجاد فرم و کلاسهای مرتبط
- بررسی روش پنهان سازی بخش هایی از سند
- بررسی نکات و کلاسهای مرتبط با جدول
- بررسی نکات و کلاسهای مرتبط با تصاویر
- بررسی روش استفاده از Icon ها
- بررسی روش استفاده از Helper ها
- بررسی نکات و کلاسهای مرتبط با دکمه
- بررسی روش سفارشی سازی BootStrap
- معرفی LESS و SASS و تشریح مزایای استفاده از آنها و تفاوت ها
- بررسی روش نصب و راه اندازی SASS و COMPASS
- بررسی روش ایجاد پروژه و ابزار های گرافیکی مورد استفاده در SASS مانند Scout App و CodeKit و LiveReload
- بررسی روش ایجاد و فشرده سازی یک StyleSheet
- بررسی روش ایجاد متغیرهای در SASS
- بررسی روش ایجاد و استفاده از فایل های Partial
- بررسی الگوهای نوشتاری Nesting
- بررسی روش اتصال Selector ها و رابطه Parent-Child بین Selector ها
- بررسی روش استفاده از @extend برای گسترش قوانین تعریف شده
- بررسی الگوهای نوشتاری Mixins
- بررسی روش های اعمال تغییرات روی رنگ ها
- معرفی پلاگین Susy و نکات مربوطه
- بررسی روش ایجاد Media Query های پیشرفته تر با SASS و MIXINS
- پیاده سازی منطق با SASS
- بررسی روش نگارش و کامپایل LESS
- بررسی روش حل مشکل CROSS BROWSER در LESS
- بررسی Server Side Compilation
- بررسی روش استفاده از Source Map
- بررسی روش Compress و Minimize کردن
- بررسی متودولوژی های OOCSS و SMACSS و BEM
- بررسی روش استفاده از متغیر ها و MIXINS
- بررسی Nested Rule ها
- بررسی انواع عملگرها و توابع
- بررسی روش استفاده از Parent Selector
- بررسی عملیات روی رنگها
- بررسی Media Query ها در LESS
- بررسی روش استفاده از LESS در GRID
- بررسی تعاملات LESS با BOOTSTRAP
در صورت نیاز به دریافت اطلاعات بیشتر شما می توانید با کارشناسان ما در مجتمع فنی تهران نمایندگی پیروزی تماس بگیرید.
نقد و بررسیها
هنوز بررسیای ثبت نشده است.