illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



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

دوره مجازی فاندیشن (جلسه 3) - معرفی و بررسی سیستم شبکه بندی-قسمت اول

6 805 ۲۲ اسفند ۹۴
در جلسه سوم این دوره آموزش فریم ورک فاندیشن و بخش اول آن این دوره می پرداریم به معرفی و بررسی سیستم شبکه بندی در فریم ورک فاندیشن در این جلسه می پردازیم به :
  • نحوه نصب و استفاده  از ابزار grid displayer برای نمایش سیستم شبکه بندی فاندیشن
  • توضیح مفهوم سیستم شبکه بندی و بررسی آن تحت فریم ورک فاندیشن
  • مفهوم media query ها در css و کاربرد آن در طراحی واکنشگرا
  • بررسی کامل media query های فریم ورک فاندیشن همرا با توضیح و مثال
  • بررسی مقدمات ایجاد سیستم شبکه بندی و معرفی کلاس های آن
  • بررسی کلاس row
  • بررسی کلاس column و columns و تفاوت آنها
  • بررسی کلاس small
  • بررسی کلاس medium
  • بررسی کلاس large
  • ذکر مثال های ساده برای درک بهتر نحوه کارکرد و کاربرد کلاس های فوق
این مطلب یک جلسه از دوره آموزش جامع فریمورک Foundation (پایه تا پیشرفته) است و برای دیدن آن باید در این دوره ثبت نام کنید .
توضیحات : امروزه با توجه به پیشرفت سریع تکنولوژی ,مبحث طراحی رسپانسیو و یا به عبارتی واکنشگرا در زمینه وب جز یکی از موارد اجتناب ناپذیر برای طراحان وب می باشد که در کنار چندین فاکتور اساسی و پایه ای دیگر، از مواردی به شمار می رود که نیاز است قبل از هر چیز و شروع پروژه توجه ویژه ای به آن شود و به عنوان یکی از ارکان اصلی پیاده سازی سایت های اینترنتی در بخش UI (رابط کاربری) و همچنین UX (تجربه کاربری) مد نظر قرار گیرد و توجه ویژه ای به آن شود چرا که عدم توجه به آن می تواند منجر به شکست و زیان دهی پروژه گردد. طبق آمار تا پایان سال ۲۰۱۵ بیش از ۹۱ درصد از مردم دنیا دارایی تلفن همراه هستند و و ۶۰ درصد از این جامعه آماری دارای تلفن های هوشمند در مدل های مختلف هستند و از آن برای اتصال به اینترنت و وبگردی استفاده می کنند حال با توجه به طیف وسیعی از کاربرانی که دارای تلفن های هوشمند در ابعاد و اندازه های مختلف هستند طراحان وب ملزم به طراحی UI و رعایت اصول استاندارد UX در طرح های خود می باشند تا کاربران هدف شان که درصد بالایی در جامعه آماری ذکر شده را تشکیل می دهند بتوانند با هر دستگاهی و در هر اندازه ای به راحتی و بدون دردسر و به هم ریختگی در ظاهر و قالب یک سایت آن را مشاهد و مورد کاوش قرار دهند و تجربه لذت بخشی از وبگردی در سایت مورد نظرشان داشته باشند. از این رو و برای راحتی و سرعت بخشیدن به این نوع طراحی (طراحی واکنشگرا) در کنار رعایت استاندارهای لازم، سالانه فریم ورک های مختلفی در این زمینه طراحی و تولید می شوند و به رقابت با سایر رقبای خود در این زمینه می پردازند. به همین دلیل بر آن شدیم تا یکی از فریم ورک های فوق العاده قدرتمند و با سابقه و محبوب در بین طراحان حرفه ای را به صورت اصولی و از پایه تا پیشرفته در قالب مثال های مختلف و متنوع آموزش دهیم. در پایان نیز با کدنویسی 0 تا 100 یک پروژه کاملا حرفه ای و مدرن، به صورت عملی و کاربردی از این فریمورک حرفه ای استفاده خواهیم کرد. لازم به ذکر است که قالب کنونی وب سایت سون لرن هم بر پایه فریم ورک فاندیشن پیاده سازی و طراحی شده است. در این دوره آخرین نسخه فریمورک فاندیشن (نسخه 6) تدریس خواهد شد و شما به روزترین آموزش این فریمورک را در وب فارسی خواهید داشت. امیدواریم این دوره نیز مورد توجه و استقبال علاقمندان قرار گرفته و مفید واقع گردد...
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 6 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    با سلام جناب صالحی
    در بعضی قسمت های این ویدئو صدا و تصویر همخوانی ندارد. برای مثال دقیقه 54:30 را ملاحظه کنید.

    • ‏‏
      وحید صالحی(۲۲ اسفند ۱۳۹۴)

      معلومه که با دقت مباحث رو دنبال می کنید :-) خیلی خوبه و ممنون از اطلاع رسانی تون مشکل از خروجی کمتازیا بوده که دوباره خروجی می گیریم و در اختیارتون قرار می دیم

  • ‏‏

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

    • ‏‏
      وحید صالحی(۲۳ اسفند ۱۳۹۴)

      ذر جلسه سوم اگر دقت کرده باشید در مورد مدیا کوئری ها صحبت کردیم در حقیقت gutter ها مقدار padding ی هست که برای کلاس column در هر ستون از چپ و راست براش در نظر گرفته میشه که در بالاترین کلاس که large هست و بالاترین مدیا کوئری که 1200px هست در چپ و راست هر هر ستون 15 پیکسل براش در نطر گرفته شده یا خودمون در حالت دانلود سفارشی هست براش هر مقداری رو می تونیم در نظر بگیریم که بصورت استاندارد بدون تغییر در هسته سفارشی مجموع چپ و راست میشه 30px یا همون 1.875rem حالا هر چه عرض کمتر بشه مدیا کوئری های با عرض کمتر اجرا میشن مثلا در حالت کلاس medium در مدیا کوئری مختص خودش که توضیح دادیم padding هر ستون کمتر میشه مثلا میشه 9px لذا gutter ها کوچکتر میشه این اتقاق دقیقا برای عرض ستون ها هم در مدیا کوئری های کوچکتر با عرض کمتر صقحه نمایش می افته… در جلسه بعد همین موارد رو که عرض کردم درون هسته فاندیشن توضیح خواهم داد تا رفتار شون رو بهتر درک کنید در کل همون طور که در این جلسه اشاره شد طراحی رسپانسو یعنی تغییر وضعیت و حالت عناصر در اندازه های مختلف صفحه نمایش به همراه تغییر یکسری از پراپرتی هاشون توسط مدیا کوئری ها …

  • نکته : برای پاسخگویی سریعتر و بهتر، بخش نظرات این مطلب مختص پرسش و پاسخ های کاربران ثبت نامی در دوره ی دوره آموزش جامع فریمورک Foundation (پایه تا پیشرفته) است .
    اگر قبلا در این دوره ثبت نام کرده اید پس از ورود به سایت می توانید تمامی پرسش و پاسخ ها و نظرات مطرح شده ی این مطلب را مشاهده و اگر سوالی دارید در همینجا مطرح کنید.

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

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram