campaign-off40

دوره مجازی بوت استرپ (جلسه 2): پیشنیازها و آماده سازی محیط کار



visibility  
mode_comment   ۳۸

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

مطالب مطرح شده در این جلسه عبارتند از :

  • معرفی منابع برای دانلود آخرین ورژن فریم ورک بوت استرپ
  • بررسی نسخه RTL فریم ورک بوت استرپ و نحوه تهیه آن
  • مروری بر وب سایت رسمی فریم ورک بوت استرپ
  •  مفهوم و بررسی CDN های رسمی فریم ورک بوت استرپ
  • بررسی ساختار فایل های فریم ورک بوت استرپ
  • ایجاد پوشه ها و ساختار فایل بندی فریم ورک بوت استرپ در نرم افزار PhpStorm
  • بررسی متا تگ view port دلیل استفاده و توضیح در مورد ساختار آن همرا با مثال
  • نحوه اضافه کردن استاندارد فایل های بوت استرپ در اسناد وب
  • اضافه کردن اسکریپت ها respond و html5shiv برای پشتیبانی مرورگرهای قدیمی از تگ ها و ساختار html5
  • نحوه راستچین کردن فریم ورک بوت استرپ و نگاهی کوتاه به هسته بوت استرپ
info توجه

این مطلب یک جلسه از آموزش بوت استرپ 3 می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش بوت استرپ 3

comment دیدگاه کاربران
hojat replyپاسخ

سلام
قسمتی که در مورد نحوه لود کردن فایل های css,وjs توضیح دادین یه سوال داشتم.شما گفتین که نحوه اجرا و اولویت با آخرین فایل است یعنی اگر یک کلاس مشابه در دو فایل باشد اولویت با آخرین فایلی است که قرار می گیرد و کلاس مربوطه در فایل آخر مقدم خواهد بود.اما من در جای دیگر شنیده بودم که اولویت با فایلی است که به تگ خود نزدیک تر است البته حرف شما درست می شود اما اگر فایلی مانند مثال js شما در پایین ترین جای صفحه قرار بدیم در اینصورت اولویت اجرا با فایلهایی که در پایین صفحه هست خواهد بود یا فایل هایی که به تگ مربوطه نزدیک ترند؟

وحید صالحی

سلام آقا حجت اولولیت همیشه با آخرین فایل هست اگر از نظر ساختار مشابه باشند و منظور شما رو متوجه نشدم از اینکه می گید اولویت با فایلی است که که به تگ خود نزدیکتره !!!فایل js با css قضیش فرق داره ما فایل js رو در آخر صفحه قرار دادیم تا بعد از اینکه صفحه کامل لود شد بعد اونا هم لود بشن تا سزعت لود صفحه بیشتر بشه این مورد رو توضیح دادم و گفتم شما میتونید در قسمت head هم لودشون کنید ولی ترتیبشون رو رعایت کنید د

hojat

البته من این رو در مورد css شنیده بودم گفتم سوال بپرسم که صحت داره یا نه!که مثلا یه تگ داریم با کلاس name و همچنین داخل این تگ واسش استایل بصورت خطی تعریف کردیم که ابتدا استایل های خطی داخلی و سپس استایل های خارجی که کلاس مربوطه در آن قرار گرفته اجرا میشن.که یادم میاد توی مطلبی که قبلا خوندم این نوشته بود چون استایل خطی درون خود تگ قرار میگیره و بهش نزدیکتره اول اجرا میشه و بعد بقیه نسبت به فاصله ای که نسبت به تگ دارن.
منظورم از نزدیک تر بودن این بود که آیا توی فایلهای cssوjs که بصورت external لینک شده اند اولویت اجرا براساس نزدیک بودن اون فایل css و js به تگ مربوطه در صفحه است یا بر اساس آخرین فایل قرار گرفته شده در صفحه وب یعنی ابتدا آخرین فایلهای لود شده اجرا و اولویت دارن؟

وحید صالحی

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

افشین زندی

سلام دوست عزیز. این لینک رو مطالعه کنید. کاملا به ارجحیت دستورات مسلط میشید و جای سوالی براتون نمیمونه
http://front-end.ir/ui/css-specificity/

hasan_elc replyپاسخ

سلام
اقای صالحی چرا از ورژن قدیمی بوت استرپ استفاده می کنید الان ورژن3.3.5 در سایت اصلی بوت استرپ موجود است

وحید صالحی

سلام دوست عزیز این ورژن چند روزی هست که منتشر شده و زمانی که شروع به ضبط ویدئو های دوره آموزشی کردیم همین ورژن 3.3.4 در دسترس بود البته تفاوتی از نظر ساختار با ورژن 3.3.4 که ما استفاده کردیم نداره فقط یکسری باگ برطرف شده و تاثیری در کار طراحی ما نداره شما می تونید از این ورژن استفاده کنید و مشکلی براتون پیش نخواهد اومد تفاوت های عمده و تاثیر گذار زمانی که عدد وسط و سمت چپ تغییر کنه بوجود میاد…

Hamed Noktedan replyپاسخ

سلام چند تا سوال برام پیش اومده:
1- موقع توضیح فایل های قابل دانلود بوت استرپ از روی سایت خودش یه حالت Sass داشت اونو چیزی ازش نگفتید.
2-در رابطه با cdn بیشتر توضیح بدید که چطوری باعث افزایش لود صفحه میشه ؟ چون وقتی ما یک فایل css یا js رو بر روی سرور آپلود میکنیم و اون رو در فایل خودمون استفاده میکنیم در این مدل هر 2 تا فایل آنلاین قابل دسترسی هستن پس چرا به اون میگن cdn؟
3-نحوه وارد کردن فایل های map هم مثل فایل css میمونه؟لطفا یه نمونه نحوه استفاده از فایل های map رو بگید چطوریه؟
ممنون

وحید صالحی

سلام آقا حامد در مورد سوال اول و سومتون بطور کامل در ویدئو توضیح دادیم با دقت ویدوئو یکبار دیگه مرور کنید حالت sass هم مانند less هست برای استفاده از این 2 حالت شما باید با 2 زیان less و sass آشنا باشید و خود اینها نیاز به یه دوره آموزشی جداگانه داره ما تمرکزمون در این دوره روی css در بوت استرپ هست.

زمانیکه شما یک سیستم CDN را فعال میکنید تاثیر آن بصورت زیر خواهد بود:

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

2- CDN تمام اطلاعات ثابت شما مانند تصاویر، کدهای CSS و javascript، mp3، pdf و فایلهای ویدئویی شما را پشتیبانی میکنه و تنها اطلاعاتی که قابل تغییر و بروزرسانی هستند مانند متون و کدهای HTML از سرور اصلی شما فراخوانده میشه. با این کار مصرف پهنای باند هاست شما کاهش یافته و هزینه ای که سالانه برای آن میپردازید کاهش چشمگیری خواهد داشت.

3- تفاوت سرعت و عملکرد برای خودتان یا افرادی که در نزدیکی سرور اصلی شما هستند تفاوت زیادی نخواهد داشت ولی برای کسانی که ار نقاط مختلف جهان به سایت شما وارد میشن این افزایش سرعت ناشی از CDN کاملا محسوس خواهد بود، با توجه به اینکه سایتهای ایرانی معمولا سرور و هاست خود را از خارج و کشورهایی مانند آلمان و آمریکا تهیه میکنند و عموم بازدیدکنندگان از داخل کشور هستند استفاده از CDN میتواند بسیار موثر باشد بخاطر همین بهتره فایل های css و js ثابت رو مثل کتابخانه جی کوئری و همین فایل های بوت استرپ یا هر فریم ورک دیگه ای رو رو از روی CDN ها فراخونی کنیم تا از روی سرور خودمان. برای تعیین تاثیر CDN بر سرعت سایت میتوانید عملکرد خود را با ابزارهایی مانند Pingdom و GTmetrix بعد و قبل از فعال سازی CDN بررسی و مقایسه کنید.
موفق باشید.

Hamed Noktedan replyپاسخ

سلام
آقا زمانی که از یک فریم ورک برای رابط کاربری استفاده میکنیم مثل بوت استرپ یا pure.css و هر چیز دیگه ای ، آیا دیگه نیاز نیست از فایل reset css برای یکسان سازی مقادیر اولیه مرورگرهای مختلف استفاده کنیم؟

آیا خود فریم ورک ها کار reset css را نیز انجام میدهند؟

آیا خود فریم ورک ها و فایل های css قابلیت اینکه کلیه متا تگ ها رو درون خودشون دربر بگیرن نداره و کلا بایذ جدا نوشته بشه؟

وحید صالحی

فایل reset و متا تگ ها ارتباطی با فریم ورک نداره و جداگانه در صورت نیاز باید بزارید.

mehdi karimi replyپاسخ

آقای صالحی آیا همون تغییراتی که در پایان جلسه برای راست چین کردن تو خود هسته بوت استرپ اعمال کردین کافی هست یا بازم باید از اون فایل rtl که آقا مرتضی ! درست کرده استفاده کنیم ؟

وحید صالحی

سلام آقا مهدی چند تغییر جزئی دیگه هست که تا پایان جلسه 4 انجام خواهیم داد تا کاملا راستچین بشه این کار رو به مرور انجام دادیم تا شما فرق حالت راستپین و نسخه اصلی رو بهتر درک کنید با این حال در پروژه های پایانی دوره از همون فایل rtl آقا مرتضی هم استفاده می کینم تا بتونید هم از نسخه ای که خودتون rtl کردید استفاده کنید هم از نسخه های rtl آماده
موفق باشید.

روح الله وکیل زاده replyپاسخ

باسلام خسته نباشید استاد برای بنده یک مشکل پیش آماده
روی Grid displayer هر چی کلیک میکنم میره به این http://alefeuvre.github.io/foundation-grid-displayer/# آدرس لطفا” راهنمایی 🙄

وحید صالحی

سلام جلسه 10 رو مشاهده کنید در ابتداش برای رفع این مشکل توضیح داده ایم

حمید رضا مصطفی زاده replyپاسخ

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

وحید صالحی

سلام آقا حمید cdn های گوگل و cdn هایی که خود وب سایت رسمی فریم ورک ها مثل بوت استرپ پیشنهاد می کنند بسیار معتبرند و میشه ازشون با اطمینان خاطر استفاده کرد cdn ها ایرانی رو به شخصه پیشنهاد نمی کنم

حمید رضا مصطفی زاده

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

وحید صالحی

خواهش میکنم ببینید شما باید ابتدا نوع فریم ورک و یا فایل هایی رو که نیاز دارید رو مشخص کنید به عنوان مثال برای فایل های مورد نیاز برای زراحی تحت قالب فریم ورک بوت استرپ می تونید از cdn های زیر که در سایت رسمیش هم موجوده استفاده کنید:

برای کتابخانه جی کوئری می تونید از cdn زیر استفاده کنید که مربوط به سایت رسمی جی کوئری هست

و یا از cdn های معتبر دیگه که در آدرس های زیر هست استفاده کنید (به لینک های زیر مراجعه کنید)

http://www.asp.net/ajax/cdn#jQuery_Releases_on_the_CDN_0

http://cdnjs.com/libraries/jquery/

http://www.jsdelivr.com/projects/jquery

تمام اینها مورد تایید وب سایت رسمی هستند
موفق باشید

parastoo m replyپاسخ

سلام
من فایل های جلسه دوم را دانلود کردم اما session هایی که گفتید انجا نیست.

وحید صالحی

session رو خودتون باید در هنگام ایجاد پروژه ایجاد کنید و فایل های هر جلسه رو درونش قرار بدید

Somayeh Shams replyپاسخ

سلام. وقتتون بخیر
موقعی که پروژه جدید رو در phpstorme ایجاد میکنم ، پوشه ای با نام .idea هم درون فایلم ایجاد میشه که یکسری فایل xml توش هشت. این پوشه چی هست؟ پاک کردنش در روند طراحی بوت استرپ مشکلی ایجاد نمیکنه ؟

وحید صالحی

سلام فایل های سیستمی مربوط به php storm هست و مشکلی نداره اگر پاک هم بشه

Somayeh Shams replyپاسخ

سلام. فایل های اسکریپت html5shiv.min.js و respond.min.js نیاز به هسته جی کوئری ندارند؟
مشکلی پیش نمیاد که هسته جی کوئری رو بعد از این دو قرار بدیم؟

وحید صالحی

سلام نه مشکلی نداره

امین خلیلی replyپاسخ

سلام اقای صالحی نمیشه فایل ویدیویی را دانلود کرد

لقمان آوند

از موبایل یا تبلت برای دانلود استفاده نکنید
تو pc مشکلی نداره

محمدرضا replyپاسخ

عرض ادب خدمت مهندس صالحی و با آرزوی سلامتی برای ایشون
ببخشید استاد من یه سوال داشتم
لازم هست که CSS Reset رو هم به سندمون لینک کنیم یا خود فریم ورک این نرمال سازی رو برای مرورگرهای مختلف انجام میده ؟

وحید صالحی

سلام ممنون دوست عزیز بله اضافه کنید بهتر هستش مخصوصا برای مرورگر ie لازمه

ali rasapour replyپاسخ

لطفا دوره های آموزشی کاربردی CSS بزارین.
ساخت گیم انیمیت های ویژه و غیره .
UI هم مینطور.
با تشکر.

یاسر پرهیزگار replyپاسخ

سلام بنده هرکاری میکنم فونتم به byekan تغییر نمیکنه و فونت پیشفرظ نمایش داده میشه دقیقا مثل آموزش شما عمل کردم اگر مواردی هست که باید چک کنم بیزحمت بهم بگید ممنون میشم 😀

وحید صالحی

احتمالا جایی رو اشتباه کردید در آدرس دهی به هر حال یکبار در مروگر زمانی که پروژه رو اجرا کردید کلیدهای ترکیبی ctrl+F5 رو فشار بدید ساید مرورگرتون کش کرده ,کش خالی بشه

Rohallah Hatami replyپاسخ

سلام دانلود نمیشه .
با pc هم دارم انجام میدم اما نمیشه

لقمان آوند

مجددا تست کنید …

آرش ذاکری replyپاسخ

سلام، خسته نباشین
چرا نمیشه فیلم رو دانلود کرد؟

لقمان آوند

چک کردیم مشکل خاصی مشاهده نشد …
حتما روی لینک دانلود کلیک کنید و از تبلت و گوشی هم استفاده نکنید برای دانلود

zahraa kolivand replyپاسخ

سلام
برای متعادل سازی در استفاده از col ها در قسمت 3 گفته شده از col-md , col-xs استفاده کنیم، در بوت استرپ 4 col-xs حذف شده، استاندارد colها چطور میشه ؟
برای گرید بندی استاندارد از چه col هایی استفاده کنیم ؟
پیشاپیش ممنون از پاسخگوییتون

وحید صالحی

سلام در جلسه قبل در موردش توضیح دادیم شما بجای col-xs اگر مقداری نزارید بصورت بلک های 12 ستون خود کار در نظر گرفته میشه یا می تونید از کلاس col-12 یا هر عددی بین 1 تا 12 استفاده کنید پیشنهاد می کنم آخرین جلسه رو که منتشر شده ببنید

ارسال نظرات

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