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

دوره آموزش طراحی سایت پیشرفته HTML5, CSS3, jQuery, Less, Sass

دوره آموزش طراحی سایت پیشرفته  HTML5, CSS3, jQuery, Less, Sass
  • مدرس : -
  • شروع دوره : -
  • طول دوره : -
  • روزهای برگزاری : -
  • شهریه :
توجه ! در کلاس از مطالب فیلم و صدا تهیه میشود و پایان هر جلسه در اختیار دانشجویان عزیر قرار داده خواهد .

شرح مختصری از دوره

دوره آموزش طراحی سایت پیشرفته  HTML5, CSS3, jQuery, Less, Sass

مخاطبان دوره

 

  • طراحان و برنامه نویسان وب سایت
  • دوستداران برنامه نویسی سمت کلاینت (jQuery)
  • دوستداران استایل نویسی با کمک زبان های برنامه نویسی Less و Sass

پیشنیاز دوره

آشنایی کامل به HTML و CSS

آشنایی با Javascript و jQuery
 

عناوین مهم دوره

  • آشنایی با المنت های جدید HTML5
  • آشنایی با امکانات جدید CSS3
  • معرفی انواع وروردی های جدید از قبیل date , time , email, color , range , ...
  • اعتبار سنجی فرم ها
  • رسم اشکال هندسی چون مثلث و کمان و ... با استفاده از Canvas
  • استفاده از تگ SVG برای رسم اشکال
  • بررسی CSS3 بصورت کامل و تخصصی
  • آشنایی و برنامه نویسی استایل ها (Less & Sass)
  • استفاده از ابزارهای jQuery
  • استفاده از ابزارهای jQuery UI
  • طراحی یک سایت تک صفحه ای HTML5 و CSS3
  • طراحی یک سایت چند صفحه ای HTML5 و CSS3

سرفصل دوره

  • مقدمه ای بر طراحی سایت
    • مروری بر زبان نشانه گذاری
    • مروری بر جاوااسکریپت
    • معرفی HTML5 و CSS3
    • کشف قابلیت های HTML5 و CSS3
    • تاریخ انتشار
  • مهاجرت از HTML4/XHTML به HTML5
    • تغییر doctype
    • تغییر Encoding
    • اضافه کردن اسکریپت برای پشتیبانی از HTML5
    • حذف کردن تگ head
    • آشنایی با المنت های معنی دار
      • header
      • nav
      • footer
      • article
      • section
  • قابلیت های جدید HTML5
    • وروردی های جدید
      • Date
      • Time
      • Email
      • Color
      • Range
      • Slide
    • اعتبار سنجی
    • Canvas و SVG
      • تفاوت بین تگهای Canvas و SVG
      • کار با تگ SVG
        • رسم دایره
        • رسم مستطیل
        • رسم مستطیل با گوشه های گرد
        • رسم ستاره
        • رسم لوگو
      • المنت Canvas جهت طراحی گرافیکی
        • طراحی توسط javascript
        • رسم خط
        • رسم دایره
        • رسم متن
        • رنگ کردن اشکال با طیف رنگها
        • نمایش و رسم تصویر
    • نمایش و اجرای فایل های چند رسانه ای
      • Video
      • Audio
  • کار با CSS3 و قابلیت های جدید آن
    • Advanced Selectors
    • گرد کردن گوشه ها - Rounded Corners
    • حاشیه تصویری - Border Image
    • سایه ها - Box Shadow & Text Shadow
    • رنگ ها - Colors
      • RGBA
      • Gradient
    • Transform (چرخش ، جابجایی و ...)
    • قاب های چند ستونی - Multicolumn Layout
    • استفاده از فونت در وب - Web Fonts
    • متحرک سازی اجزای صفحه - Animations and Transitions
    • محاسبه مقدارها توسط calc()
    • ایجاد متن و شمارنده - Generated Content and Counters
    • Box Sizing
    • Media Queries
    • پس زمینه - Background
      • پس زمینه های متعدد - Multiple Backgrounds
      • background-size
      • background-clip
      • background-origin
    • خاصیت های جدید برای Text ها
      • text-overflow
      • word-wrap
      • word-break
    • User Interface
      • resize
      • outline-offset
    •  
  • زبان برنامه نویسی استایل ها (Less & Sass)
    • بیشتر بدانیم
    • تفاوت های Less و Sass
    • آشنایی و شروع کار با Less
      • تنظیمات اولیه برای استفاده از Less
      • متغیر ها در Less
      • استایل های ترکیبی در Less
      • استایل های تو در تو در Less
      • استفاده از اپراتورها در Less
      • استفاده از توابع در Less
      • محدوده در Less
      • ترکیب کردن چند فایل استایل در Less
    • آشنایی و شروع کار با Sass
      • نصب نرم افزار Ruby و راه اندازی Sass بروی سیستم
      • متغیر ها در Sass
      • استایل های ترکیبی در Sass
      • استایل های تو در تو در Sass
      • ارث بری کردن در Sass
      • استفاده از اپراتورها در Sass
      • ترکیب کردن چند فایل استایل در Sass
    • کامپایل کردن فایل های Less و Sass
  • انجام چند تمرین
    • ایجاد نوار پیشرفت با CSS3
    • ایجاد منو و زیر منوهای شناور با CSS3
    • ایجاد دکمه و برچسب های مختلف
    • ساخت یک اسلایدشو تنها با استفاده از CSS3
    • نحوه طراحی سایت های Responsive و قابل اجرا در تبلت و موبایل و ...
    • طراحی یک سایت ساده Responsive
    • ساخت یک گالری تصویر
  • نکات مهم درباره استاندارد بودن کدهای HTML و CSS
  • آشنایی و استفاده از ابزارهای jQuery و jQuery UI
    • کار با jQuery
      • انتخابگرها / Selectors
        • انتخابگرهای پایه
        • انتخابگرهای وراثتی
        • انتخابگرهای اصلی
        • انتخابگرهای فرزند
        • انتخابگرهای محتوی
        • فیلتر های فرم
      • ویژگی ها / Attributes
        • متد .attr()
        • متد .html()
        • متد .prop()
        • متد .removeAttr()
        • متد .removeProp()
        • متد .val()
      • CSS
        • متد .css()
        • متد .width()
        • متد .height()
        • متد .position()
        • متد .offset()
        • متد .scrollTop()
        • متد .scrollLeft()
        • متد .addClass()
        • متد .hasClass()
        • متد .removeClass()
        • متد .toggleClass()
      • Effects
        • ساده
          • متد .hide()
          • متد .show()
          • متد .toggle()
        • محو شدن
          • متد .fadeIn()
          • متد .fadeOut()
          • متد .fadeTo()
          • متد .fadeToggle()
        • کشویی
          • متد .slideDown()
          • متد .slideUp()
          • متد .slideToggle()
        • سفارشی
          • متد .animate()
          • متد .queue()
          • متد .dequeue()
          • متد .clearQueue()
          • متد .delay()
          • متد .stop()
          • متد .finish()
      • رویدادها / Events
        • رویدادهای مرورگر
          • متد .error()
          • متد .resize()
          • متد .scroll()
        • رویدادهای بارگزاری صفحه
          • متد .ready()
          • متد .load()
          • متد .unload()
        • رویدادهای صفحه
          • متد .error()
          • متد .resize()
          • متد .scroll()
        • رویدادهای فرم
          • متد .blur()
          • متد .change()
          • متد .focus()
          • متد .select()
          • متد .submit()
          • متد .scroll()
        • رویدادهای کیبورد
          • متد .keydown()
          • متد .keypress()
          • متد .keyup()
        • رویدادهای موس
          • متد .click()
          • متد .dblclick()
          • متد .hover()
          • متد .mousedown()
          • متد .mouseenter()
          • متد .mouseleave()
          • متد .mousemove()
          • متد .mouseout()
          • متد .toggle()
      • Filtering
        • فیلتر .first()
        • فیلتر .last()
        • فیلتر .eq()
        • فیلتر .filter()
        • فیلتر .slice()
        • فیلتر .has()
        • فیلتر .not()
        • فیلتر .is()
    • کار با jQuery UI
      • Interactions
        • Draggable
        • Droppable
        • Resizable
        • Selectable
        • Sortable
      • Widgets
        • Accordion
        • Autocomplete
        • Dialog
        • Menu
        • Progressbar
        • Selectmenu
        • Slider
        • Tabs
        • Tooltip
      • Effects
        • متد .effect()
        • متد .show()
        • متد .hide()
        • متد .addClass()
        • متد .removeClass()
        • متد .switchClass()
        • متد .toggle()
        • متد .toggleClass()
        • انواع Effect ها
          • Blind
          • Bounce
          • Clip
          • Animation
          • Drop
          • Easings
          • Explode
          • Fold
          • Slide
          • Transfer
          • Scale
          • Shake
          • Highlight
  • ساخت یک اسلایدشو توسط CSS و jQuery
  • انجام پروژه عملی
    • طراحی سایت تک صفحه ای - Single Page Website
    • طراحی سایت چند صفحه ای با استفاده HTML5 و CSS3 - Multi Page Website
  • جمع بندی کلیه مباحث