موضوعات
سبد خرید (0)
وبینار کارگاه آنلاین طراحی های خلاقانه رابط کاربری وب سایت

وبینار کارگاه آنلاین طراحی های خلاقانه رابط کاربری وب سایت

وبینار کارگاه آنلاین طراحی های خلاقانه رابط کاربری وب سایت

شروع وبینار:   21 مهر 99 - ساعت 20:00
مدت وبینار: ساعت
افزودن به تقویم
ذخیره کردن
وبینار کارگاه آنلاین طراحی های خلاقانه رابط کاربری وب سایت
بلیت‌های وبینار
فیلم قابل دانلود
تومان
بلیت زودهنگام (20 نفر)
فعال از 19 شهریور تا 7 مهر ― ( ویدئو دارد )
دارد
بلیت عادی
فعال از 19 شهریور تا 23 مهر ― ( ویدئو دارد )
دارد
ویدئو معرفی وبینار
توضیحات وبینار

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

حداقل دانش لازم برای حضور در این دوره

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

مزایای دوره

  • شما با حضور در این دوره با کاربردهای برچسب های html و خصوصیات css آشنا می شوید.
  • با jQuery، نحوه استفاده از آن و نحوه فراخوانی چند تابع jQuery آشنا می شوید.
  • با نحوه استفاده از فونت آیکن ها در طراحی رابط کاربری وب سایت آشنا می شوید.
  • ضمن یادگیری نحوه ساخت چند رابط کاربری مهم سایت، آماده فراگیری سایر رابط های کاربری مانند کارت پروفایل، فرم آپلود، تصاویر محصولات، فرم ارتباط با ما، معرفی کارمندان و ... می شوید که در دوره های آتی آموزش داده خواهند شد.

تصویری از پروژه هایی که در این دوره نحوه ساخت آنها آموزش داده می شود:

آموزش ساخت فرم جستجو در سایت

آموزش ساخت فرم ورود به سایت و فرم ثبت نام

 

آموزش ساخت منوی افقی ریسپانسیو

آموزش ساخت اسلایدر تصاویر سایت

آموزش ساخت لیست اعلانات سایت

معرفی چند دوره ای که از مدرس کارگاه در مجموعه فرادرس منتشر شده:

یادگیری الکترونیک به زبان ساده با Arduino

جعبه ابزار برنامه‌نویسان اندروید

آموزش ساخت بازی‌های 3 بعدی در موتور بازی سازی آنریل انجین

آموزش بازی سازی در Scratch 3

سرفصل‌های وبینار

جلسه اول: فرم جستجوی انیمیشنی

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

در صورتی که روی ذره بین کلیک کنیم، کادر جستجو باز می شود که این کار با افزایش پهنای آن انجام می شود.

در این کادر متنی می توانیم متن موردنظر برای جستجو را وارد کنیم. همچنین آیکن ذره بین هم به یک دایره سبز رنگ بزرگ تبدیل می شود، با یک علامت ضربدر که به معنای این است که با کلیک کردن روی آن، کادر بسته می شود.

جلسه دوم: فرم ثبت نام و ورود به سایت

در جلسه دوم نحوه ساخت یک فرم ورود/ثبت نام آموزش داده می شود. این فرم به دو بخش تقسیم شده است. بخش سمت چپ حاوی یک متن و یک تصویر بوده و بخش سمت راست حاوی دو سربرگ یا زبانه به نام های REGISTER و LOGIN است. ابتدا سربرگ REGISTER که برای ثبت نام می باشد، فعال و قابل نمایش است که حاوی سه کادر متنی برای نام کاربری، ایمیل و کلمه عبور می باشد.

با کلیک کردن روی عبارت LOGIN سربرگ مربوطه فعال می شود که حاوی دو کادر متنی ایمیل و کلمه عبور است.

جلسه سوم: منوی افقی ریسپانسیو

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

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

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

جلسه چهارم: اسلایدر تصاویر

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

جلسه پنجم: لیست پایین افتادنی اعلانات سایت

در جلسه پنجم این دوره نحوه ساخت یک لیست پایین افتادنی اعلانات (Notification) آموزش داده می شود. ممکن است در سایت هایی که عضو می باشید، با نمونه هایی از این رابط کاربری مواجه شده باشید. در این نوع رابط کاربری، معمولاً آیکنی از یک زنگوله نمایش داده می شود که با کلیک کردن روی آن، لیستی از پیغام هایی که اخیراً دریافت شده، نمایش داده می شود. در صورتی که کاربر مجدداً روی زنگوله کلیک کند، لیست بسته می شود.

مخاطبین

علاقه مندان به طراحی وب سایت 

علاقه مندان به کامپیوتر

دانش آموزان و دانشجویان 

سوالات متداول

برای شرکت در این دوره لازم است با html و css آشنایی داشته باشم؟

بله، html تا حدی که با برچسب ها یا همان تگ ها آشنایی داشته باشید و کاربرد آنها را بدانید و css تا حدی که با خصوصیات و مقادیر آنها آشنا باشید.

هزینه حضور در دوره برای تمام جلسات است؟

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

پس از گذراندن دوره دارای چه مهارت هایی خواهم شد؟

پس از حضور در این دوره شما با برچسب های مهم و پراستفاده html آشنا خواهید شد و به طور عملی نحوه قالب بندی و سبک دهی این برچسب ها توسط css را فرامی گیرید.

آیا این دوره ادامه خواهد داشت؟

بله، در صورت استقبال از دوره، دوره های آتی با محور آموزش سایر رابط کاربری های مهم وب سایت برگزار خواهد شد.

رزومه مدرس چیست؟

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

فایل های پروژه ها در اختیار من قرار می گیرند؟

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

مدرس به سوالات جواب خواهند داد؟

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

محمود خاوریان
محمود خاوریان

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

جلسات وبینار زمان برگزاری
جلسه اول: فرم جستجوی انیمیشنی
21 مهر 1399
ساعت 20:00
ساعت 21:30
جلسه دوم: فرم ثبت نام و ورود به سایت
24 مهر 1399
ساعت 20:00
ساعت 21:30
جلسه سوم: منوی افقی ریسپانسیو
28 مهر 1399
ساعت 20:00
ساعت 21:30
نمایش همه جلسات
Host Cover
برگزارکننده: محمود خاوریان
گزارش دادن
 انتخاب بلیت