آموزش جامع فریم ورک UIKit از صفر

  • مدرس : علی مظلوم
  • سطح آموزش : متوسط
  • مدت : 229 دقیقه
  • تعداد دانشجو : 90

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

اگر تا حالا مسیر رابط کاربری اکادمی وی لرن رو دیده باشین و دوره آموزش html و css رو گذرونده باشین یا این که تو این زمینه ها کار کرده باشین ، متوجه شدین که برای طراحی راحت تر و سریع تر رابط کاربری ( UI ) یک سایت فریم ورک های مختلفی طراحی شدن . محبوب ترین فریم ورکی که اغلب طراحان ازش استفاده میکنن ، فریم ورک بوت استرپ هست ، که اموزشش رو هم داخل سایت وی لرن میتونین ببینین .

حالا ما میخیوایم یک فریم ورک محبوب دیگه رو هم براتون معرفی کنیم . بعد از فریم ورک bootstrap ، محبوب ترین فریم ورک بین طراحان رابط کاربری ، uikit framework هست  .

معرفی فریم ورک uikit :

اگر تا حالا با بوت استرپ کار کرده باشین ، به راحتی میتونین با uikit هم ارتباط برقرار کنین . اگر هم تا حالا کار نکردین کمی براتون توضیح میدیم تا یک دید کلی نسبت به فریمورک UIkit بدست بیارین .

در uikit کلاس هایی طراحی شده که صفحه رو به ده قسمت مساوی تقسیم میکنه تا شما بتونین به راحتی ساختار مورد نیازتون رو بسازین .

همچنین component های زیادی مثل Accordion  ، Animation ، Breadcrumb و … داره که کار رو برای طراحی بسیار راحت میکنه . ویژگی مثبتش اینه که این component ها هیچ کدومشون داخل فایل فریم ورک uikit نیستن و به دلخواه طراح میشه هر کدوم از اونا رو به پروژه اضافه کرد . که این کار باعث بهینگی و سرعت بالاتر uikit framework میشه .

و بحث مهم دیگه ای که میتونیم خدمتتون بگیم استفاده از تکنولوژی جدید flexbox در UIkit هست . اگر اطلاعی در مورد خاصیت فلکس باکس ندارین ، حتما حتما دوره جذاااااااب آموزش flexbox در آکادمی وی لرن رو ببینین .

چیزی که باعث شده محبوبیت فریم ورک bootstrap نسبت به UIkit بیشتر باشه تم ها و پلاگین هایی هست که برای بوت استرپ طراحی شده و همچنین کد نویسی راحتی که داره . این به عهده خودتون هست که کدوم فریم ورک رو یاد بگیرین . ولی توصیه میشه در صورتی که میخواین در زمینه طراحی رابط کاربری حرفه ای بشین ، حداقل به دو تا فریم ورک مسلط بشین . و به نظر ما بهترین فریم ورکهایی که میتونین یاد بگیرین bootstrap و uikit هستن . امیدواریم که بهترین بهره رو از این دوره کاربردی و جذاب ببرین . اگر از دوره استفاده کردین حتما ما رو هم دعا کنین 🙂 .

 

  • 1- معرفی دوره آموزشی uikit

    6 دقیقه
  • سلام و درود خدمت شما وی لرنی های عزیز

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

    تو قسمت معرفی دوره یه سری توضیح در مورد uikit دادیم . الان یکم بحث رو باز تر میکنیم تا بیشتر در موردش بدونین .

    فریمورک uikit دارای امکانات زیادی هست که حتی میشه گفت از بوت استرپ هم بیشتر هست . که چند تا از اونا رو خدمتتون میگیم :

    Grid Layout , Elemnts , Modal , Switcher , Toggle , ScrollSpy , slider , Smooth scroll , Animation , Flexbox , flat , gradient , …

  • 2- نصب پلاگین UIKit Autocomplete در Sublime Text

    3 دقیقه
  • خب حالا میخوایم اولین قدم برای استفاده از uikit رو برداریم . پلاگینی به نام UIkit Autocomplete توسط تیم طراح uikit طراحی شده که باید اون رو نصب کنیم تا بتونیم از امکاناتش استفاده کنیم .

    برای این که بتونیم پلاگین رو نصب کنیم اول  باید package control رو واسه sublime text نصب کنیم بعدش هم uikit رو نصب میکنیم . حالا میتونیم به راحتی از فریم ورک Uikit بهره کافی رو ببریم .

  • 3- بررسی ساختار فریم ورک uikit

    6 دقیقه
  • میخوایم اولین کد رو با استفاده از uikit بنویسیم . برای این کار ، اول باید لینک های مربوط به فایل هایی که قرار هست استفاده بشن رو داخل کد هامون بنویسیم . هر کدوم از component های uikit رو که خواستیم استفاده کنیم باید فایلش رو داخل فایل پروژمون قرار بدیم و بعد لینکش رو هم داخل کدهامون بذاریم .

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 4- بررسی Layout-Grid فریم ورک uikit

    15 دقیقه
  • بحث grid رو تو این جلسه براتون مطرح میکنیم . در uikit صفحه به 10 تا ستون تقسیم میشه که ما با استفاده از کلاس uk-width میتونیم ساختار مورد نظر خودمون رو بسازیم .

    همچنین در نظر داشته باشین که طرز قرار گیری المان ها در uikit بر اساس flexbox هست . اگر هنوز باهاش آشنایی ندارین ، دوره آموزش flexbox در سایت وی لرن رو ببیین .

    قسمت اول :

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

     

    قسمت دوم :

    مشکلی تو قسمت اول داشتیم ، این بود که با استفاده از کلاس uk-width در تمام نمایشگرها یک نمایش یکسان رو داشتیم . ما میخوایم که طرز نمایش تو نمایشگرهای مختلف با هم فرق داشته باشه . مثلا میخوایم که در اندازه دسکتاپ سه ستون و در تبلت دو ستون و در موبایل یک ستون داشته باشیم .

    برای حل این مشکل از کلاس های uk-width-small , uk-width-medium , uk-width-large استفاده می کنیم که به ترتیب مربوط به نمایشگرهای بزرگتر از 480px , 768px , 960px هستن . ویدیو آموزشی این دو قسمت رو حتما تماشا کنین .

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

     

    قسمت سوم :

    در این قسمت هم به نحوه ایجاد ستون های تو در تو می پردازیم .

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 5- بررسی Push , Pop , Center فریم ورک uikit

    3 دقیقه
  • اگر بخوایم المانی رو وسط صفحه یا یک المان دیگه قرار بدیم چه باید بکنیم؟ باید از کلاس uk-container-center استفاده کنیم .

    دو تا کلاس دیگه هم داریم که کمتر استفاده میشن . کلاس های uk-push و uk-pull هستن که برای جابجایی المان ها استفاده میشن و از خاصیت left برای این جابجایی استفاده میکنن .

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 6- بررسی Dynamic Grid و filtering در فریم ورک uikit

    11 دقیقه
  • برای این که بتونیم ساختار masonry رو در سایتمون ایجاد کنیم ، باید از کتابخونه ای با همین نام استفاده می کردیم . ولی در فریم ورک uikit این ساختار با نام  Dynamic Grid وجود داره و احتیاج به هیچ کتابخونه ای هم نداره .

    برای استفاده از بحث Dynamic Grid فقط کافیه فایل اصلی فریم ورک uikit و grid رو داخل پروژه قرار بدیم و از کلاس های uk-grid-width-mediumuk-grid-width-larg و uk-grid-width-small استفاده کنیم . اون وقت میتونیم با دادن ارتفاع های دلخواهمون به ساختار مورد نظرمون دست پیدا کنیم .

    بحث دیگه ای که میخوایم خدمتتون بگیم ایجاد ساختار portfolio هست . برای این که بتونیم چنین ساختاری رو ایجاد کنیم از کتابخونه isotope استفاده می کردیم . حالا فریم ورک uikit این قابلیت رو به ما میده که ساختار portfolio رو با استفاده از بخش filtering ایجاد کنیم . برای این که به خوبی متوجه بحث بشین حتما ویدیوی آموزشی این قسمت رو تماشا کنین .

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 7- بررسی Parallax Grid در UIKIT

    4 دقیقه
  • یکی از ویژگی های باحالی که در UIKIT پشتیبانی میشه بحث parallax grid هست . پیاده سازیش هم به راحتی آب خوردنه !؟

    مواد مورد نیاز برای پیاده سازی parallax بر روی المان های مورد نظرمون ، یک عدد فایل grid-parallax هست که باید داخل پروژه مون اضافه بشه و صفت data-uk-grid-parallax هست که باید ادخل کدهامون اضافه بشه . برای دیدن دستور پخت دقیق تر parallax ویدیوی آموزشی این قسمت رو با دقت تماشا کنین 😀

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 8- صفحه بندی یا pagination در UIKit

    9 دقیقه
  • تو این درس میخوایم صفحه بندی یا pagination در uikit رو خدمتتون بگیم . اولین کاری که میکنیم ، قرار دادن فایل pagination.js داخل پروژه و بعدش لینک کردن اون به کدهای پروژمون هست .

    اصلی ترین کلاس که برای ساخت صفحه بندی استفاده میشه uk-pagination هست . کلاسهای دیگه ای هم استفاده میشن که میتونین داخل فیلم آموزشی ابن قسمت ببینین .

    بعد از آموزش هسته صفحه بندی میریم سراغ component اون ، تا بتونیم یک صفحه بندی پویا ( dynamic pagination ) داشته باشیم . شما میتونین بر اساس طراحیتون pagination  رو سمت راست ، چپ و یا وسط صفحه قرار بدین . همچنین میتونین موارد دلخواه دیگه ای رو هم روی pagination اعمال کنین که توضیحات کاملش داخل فیلم آموزشی pagination در UIKit قابل مشاهده هست .

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 9- ایجاد فرم در UIKIT بخش 1

    7 دقیقه
  • یه بخش خیلی مهم که در اغلب سایت ها هم وجود داره ، فرم هست . نحوه ایجاد فرم در UIKIT بسیار ساده هست . فقط کافیه فایل form-advanced رو داخل پروژه قرار بدین و اونو به پروژه لینک کنین . و بعد با استفاده از کلاس های مربوط به ساخت فرم ، فرم مورد نظرتون رو بسازین .
    کلاس اصلی برای ساخت فرم که ظاهر زیبایی به المان ها میده ، کلاس uk-form هست . کلاس های دیگه ای هم هستن که برای ساختن فرم دلخواهتون کمکتون میکنن . توصیه میکنیم حتما فیلم آموزشی این قسمت رو تماشا کنین .

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 10- بررسی Form advanced بخش 2

    5 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 11- بررسی Progress

    3 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 12- بررسی modal بخش 1

    5 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 13- بررسی modal بخش 2

    4 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 14- بررسی lightbox

    5 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 15- بررسی کامپوننت اسلایدر

    8 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 16- بررسی کامپوننت Slideset

    5 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 17- بررسی کامپوننت Slideset بخش 2

    5 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 18- بررسی کامپوننت Slideshow بخش 1

    7 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 19- بررسی کامپوننت Slideshow بخش 2

    4 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 20- بررسی کامپوننت Parallax

    9 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 21- بررسی کامپوننت Accordion

    4 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 22- بررسی کامپوننت Notify

    7 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 23- بررسی کامپوننت Search

    3 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 24- بررسی کامپوننت Nestable

    5 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 25- طراحی تم UIKit ( قسمت اول )

    10 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 26- طراحی تم UIKit ( قسمت دوم )

    5 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 27- طراحی تم UIKit ( قسمت سوم )

    5 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 28- طراحی تم UIKit ( قسمت چهارم )

    8 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 29- طراحی تم UIKit ( قسمت پنجم )

    6 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 30- طراحی تم UIKit ( قسمت ششم )

    3 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 31- طراحی تم UIKit ( قسمت هفتم)

    7 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 32- طراحی تم UIKit ( قسمت هشتم)

    7 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 33- طراحی تم UIKit ( قسمت نهم)

    5 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 34- طراحی تم UIKit ( قسمت دهم)

    6 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 35- طراحی تم UIKit ( قسمت آخر)

    8 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

نظرات دوره آموزش مجازی جامع فریم ورک UIKit از صفر

  • برای مشاهده نظرات و سوالات، بر روی دکمه مربوطه کلیک کنید
  • ارتباط سریع و موثر با مدرس دوره
  • امکان ارسال فایل های پروژه
  • پاسخگویی متنی، صوتی و تصویری به سوالات شما