قیمت این دوره : 40,000 تومان
  • مدرس دوره : امیرحسین معصومی ( رزومه )
  • تعداد دانشجویان این دوره : 30 نفر
  • تعداد ویدیوها : 6 ویدیو
  • مدت زمان دوره : 2:48:00
  • سطح دوره : پیشرفته
  • وضعیت دوره : در حال برگزاری
  • تاریخ ثبت دوره : 1399/02/23
  • تاریخ آخرین بروزرسانی : 1399/03/08
ثبتـــ نام در این دوره

آموزش طراحی سایت دیجیکالا با BootStrap 4

 

  • معرفی بوت استرپ ۴ و امکانات جدید آن

بعد از نزدیک به ۲ سال ارتقا و کدنویسی نسخه بوت استرپ ۴ توسط Mark otto و Jacob Thornton منتشر شد. نسخه ای که تغییرات اساسی به ویژه در ریسپانسیو سایت داشته است. درBootstrap 4 سایزبندی ریسپانسیو تغییرات اساسی داشته و بازه ۰ تا 576 پیکسل برای گوشی های همراه به آن اضافه شده که مشکلات بسیاری از طراحان وبسایت را برطرف خواهد کرد. اگر تاکنون با این فریم ورک و قابلیت های آن آشنا نشدید پیشنهاد میکنیم از این لینک استفاده کنی پس از آن به ادامه مطالعه این دوره بپردازید.

 

  • بررسی نسخه های پیشین ‌Bootstrap

اولین نسخه بوت استرپ که ۴ سال پیش منتشر شد، امکانات کمی برای ریسپانسیو کردن همراه خود داشت و در طراحی آن از سایه ها استفاده شده بود. این نسخه چندان شناخته شده نبود و استقبال زیادی از آن نشد ولی بستری مناسب برای پیشرفت و ارایه نسخه های جدید فراهم کرد.

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

انتشار بوت استرپ ۳ با موج عظیمی از رضایت کاربران و رویکرد مثبت طراحان همراه بود و به قدری همه گیر شد که در حال حاضر ۱.۵ درصد از سایت های دنیا با این فریم ورک طراحی شده اند. این ارقام زمانی جالب تر میشود که سایت های پربازدید و مطرح را بررسی کنیم زیرا ۱۳.۵ درصد از سایت هایی که رنک الکسا آنها زیر ۱۰ هزار است از فریم ورک بوت استرپ در طراحی خود استفاده کرده اند.برای یادگیری این نسخه میتونی از این لینک استفاده کنی.

با ورود بوت استرپ ۴ به طوری کلی اینترنت اکسپلورر از لیست مرورگرهایی که با این فریم ورک انطباق دارند خارج شد زیرا این مرورگر از دستورات Flexbox پشتیبانی نمیکند و بستر اصلی نسخه ۴ براساس Flex نوشته شده است. میتوان گفت نسخه جدید بیشتر از آنکه ریسپانسیو باشد انعطاف پذیر است.

علاوه براین سایز بندی Media Query ها در نسخه جدید کاملا تغییر کرده و در بازه های ۵۷۶، ۷۶۸، ۹۹۲ و ۱۲۰۰ پیکسل تقسیم بندی شده است. این تقسیم بندی جدید به شما کمک میکند مرز مشخصی میان موبایل، تبلت و دسکتاپ داشته باشید.

 

  • طراحی سایت انعطاف پذیر چیست؟

عبارت Flexbox که مخفف Flexible Box است را میتوان از آخرین دستاوردها کنسرسیوم جهانی وب دانست که در دستورات CSS3 اضافه شده است. این سیستم جدید به شما اجازه میدهد انعطاف بیشتری در ستون بندی محتوا داشته باشید. در بوت استرپ ۳ شما یک ساختار ۱۲ ستونه در اختیار داشتید که هرکدام عرض یکسانی داشتند و فاصله میان آنها ۱۵ پیکسل بود، با ترکیب چند ستون میشد باکس بندی های مختلفی ایجاد نمود ولی امکان نداشت که شما ۵ یا ۷ المان با عرض مساوی در صفحه ایجاد کنید. بعنوان مثال در طراحی سایت شرکتی و نمایش لوگوی مشتریان شما باید همیشه از تعداد زوج برای مشتریان استفاده میکردید.

ولی طراحی انعطاف پذیر امکاناتی ایده آل برای ستون بندی و چیدمان المان ها در اختیار شما قرار میدهد. چند ویژگی مهم Flex به شرح زیر است:

 

  1. تعداد المان های موجود در یک ردیف محدود نیست و براساس عرض هر کدام چیدمان انجام میشود. همچنین فاصله میان المان ها و عرض هرکدام در یک ردیف براساس عرض صفحه و تعداد آنها محاسبه میشود و عملا شما در هر سایزی نمایش صحیح خواهید داشت.
  2. میتوان ترتیب چیدمان محتوا را به راحتی تغییر داد. چیدمان المان ها در راستای عمودی و محل قرارگیری آنها نسبت به هم به راحتی قابل انجام است.
  3. فضای اختصاصی داده شده به هر المان قابل تعیین بوده و فضای باقی مانده به صورت مساوی بین سایر المان ها تقسیم میشود.

 

اینها تنها نمونه ای از امکانات Flex در طراحی سایت بود که همگی به خوبی در بوت استرپ ۴ به کار گرفته شده اند. استفاده از این ساختار جدید و البته grid که نسخه دو بعدی همین Flex محسوب میشود به شما امکان میدهد سایت هایی پیچیده تر و مدرن تر بسازید.

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

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

 

پیش نیاز این دوره : دوره آموزش BootStrap 4

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

فهرستـــ ویدیوها

مدت زمان دوره 02:48:00
راهنما ! جهت دانلود فایل ها با دانلود منیجر ( IDM ) بر روی این لینک کلیک کنید.
1
  • معرفی دوره

  • 00:16:00
  • رایگانــ

معرفی دوره طراحی وبسایت دیجیکالا با بوت استرپ 4

2
  • نصب و پیکربندی پیشنیاز ها

  • 00:40:00
  • رایگانــ

در این جلسه اقدام به نصب bootstrap و jquery میکنیم. اما این دو صرفا جنبه مرور داشتند. لذا به نصب فریمورک های دیگری که در جلسه قبل ذکر شد میپردازیم. یعنی swiper.js و popper.js. در این جلسه بطور کامل به شرح این دو می پردازیم. مهمترین نکته اینجاست که ما به سبب ورود کمتر به جاوااسکریپت و همچنین استفاده خیلی جزیی css خودمان، یه این دو فریمورک نیاز داریم. همچنین همانطور که میدانید نمیتوان دیجیکالا را صرفا بر پایه بوت استرپ بنیان نهاد. بعنوان مثال اسلایدر های دیجیکالا را در نظر بگیرید. شاید بتوان با بوت استرپ به ساخت اسلایدر اقدامی کرد، اما مسئله اینجاست که نیاز داریم که خودمان کد بنویسیم. کد css و جاوااسکریپت. درنتیجه میتوان گفت که چون قصد اصلی ما استفاده از بوت استرپ هست، ورود کمی به css خواهیم داشت، و با کمک سایر کتابخانه ها نیز آن را توسعه و به مباحثی چون عدم استفاده از جاوااسکریپت نیز ورود میکنیم. ر جلسه بعدی قصد داریم با این پشتکار و پیکربندی قوی، به طراحی اولیه و بخش نوار بالایی وبسایت دیجیکالا بپردازیم.

3
  • شروع به طراحی Navbar دیجیکالا

  • 00:38:00
  • رایگانــ

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

4
  • طراحی اسلایدر(Slider) های اصلی دیجیکالا

  • 00:30:00
  • رایگانــ

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

5
  • طراحی زیر منو های سایت دیجیکالا

  • 00:18:00
  • رایگانــ

امروز قراره کارمون رو شروع کنیم. این‌ جلسه رو هم واستون رایگان گذاشتم که اگر مشکلی توی تهیه دوره و ... بود بتونید به راحتی ازش استفاده کنید و از فریمورک بوت استرپ بهره بگیرید. امروز قراره ۱۰۰۰ خط کد بنویسیم؛-* و زیر منو های سایت دیجیکالا رو طراحی کنیم؛-)

6
  • طراحی بخش پیشنهادات ویژه دیجی کالا

  • 00:26:00
  • نقدیــ

امروز قراره یه ذره کارمون رو باحالتر کنیم. حالا که خیالمون از بخش های راحت اما وقتگیر راحت شده، می رسیم به طراحی بخش کالا های تخفیف دار یا همون پیشنهادات ویژه دیجیکالا

نظرات کاربران در رابطه با این دوره

جهت ثبت نظر باید در سایت عضو شوید و یا وارد سایت شده باشید .