اسماعیل محمدی

اهداف دوره :
آموزش جنبه‌های عملی طراحی وب سایت بصورت کاربردی و پروژه ای

افراد در پایان دوره به تسلط کامل در تگ‌های HTML می‌رسند.
افراد در این دوره روش‌های کاربردی XML را در طراحی وب سایت بکار خواهند گرفت.
آموزش طراحی وب سایت با استفاده از (DIV,CSS(3
آموزش tag‌های جدید (HTML(5 در طراحی وب سایت
با استفاده از امکانات بی نظیر HTML 5 ماندد انیمیشن و مالتی مدیا در طراحی وب می‌توانند قالب وب خود را پویا نمایند.
با تسلط بر چگونگی بکارگیری استایل‌های CSS به طور کامل می‌توانند به جذابیت گرافیکی وب خود بیفزایند.
آموزش بهینه سازی وب سایت برای موتورهای جستجو
آموزش JavaScript و کاربرد آن در صفحات وب
آموزش کاربردی JQuery و کاربرد آن در صفحات وب
آموزش استفاده از کامپوننت‌های JQuery UI و استفاده از عناصر tab,accardion,popup, دیگر عناصر کاربردی JQueri UI
در این دوره دانشجویان قادر خواهند بود تا یک قالب گرافیکی طراحی شده برای سایت را به یک صفحه HTML با استانداردهای فنی بالا تبدیل نمایند.
افراد در طی این دوره با ساخت 3 عدد وب سایت بصورت کامل و عملی آشنا می‌شوند که 2 عدد از این وب سایتها به عنوان تمرین در کلاس درس داده خواهد شد
سرفصل‌های دوره:
قسمت اول:آموزشHTML(5),CSS3

مقدمه ای بر اینترنت، وب و HTML

درک مفهوم HTML
آشنایی با مرورگر وب و انواع آن
نقش CSS در ساخت صفحات وب
آشنایی با XHTML
جنگ مرورگرهای وب
استانداردهای موجود
عناصر سازنده صفحات وب

آشنایی با مارک آپ (Markup)
آشنایی با المان، تگ، خاصیت و مقدار
محتوای متنی یک صفحه وب
لینک ها، تصاویر و محتوای غیرمتنی
اسم فایلهای صفحات وب
HTML در مقابل XHTML
انواع نسخه‌های HTML
آشنایی با DOCTYPE و ضرورت استفاده از آن
ساخت اولین صفحه وب

آشنایی با نرم افزارهای ساخت صفحات وب نظیر Dreamweaver
ضرورت کدنویسی دستی و ساخت صفحه وب با Notepad
استفاده درست و به جا از نرم افزارهای WYSIWYG
ساخت اولین صفحه وب توسط Notepad
مشاهده صفحه وب ساخته شده در مرورگرهای مختلف
آشنایی با ناسازگاری‌های مرورگرهای مختلف
ساختار اساسی HTML

فنداسیون یک صفحه وب
عنوان یک صفحه وب
ساخت پاراگرافها
آشنایی با Headerها
نامگذاری المانها
تقسیم کردن یک صفحه وب به قسمتهای مختلف
Encoding برای نمایش درست متنها
کاراکترهای خاص در HTML
المانهای طلایی وب: div و span
فرمت کردن متن در HTML

نوشتن متن به صورت bold و italic
تغییر سایز نوشته یک متن
استفاده از فونتهای Monospaced
استفاده از متنهای Preformatted
متنهای نقل قول
متن‌های Superscript و Subscript
تراز متن در صفحه وب
پروژه عملی : ایجاد یک صفحه وب مشابه صفحات ویکی پدیا
تصاویر در وب

پسوندهای رایج تصاویر در وب
آشنایی با نرم افزارهای کار با تصاویر
ضرورت استفاده از فوتوشاپ (یا نرم افزارهای مشابه)
آشنایی با دستور Save for Web
آشنایی با نحوه لود شدن تصاویر در وب
شفافیت (Transparency) در تصاویر
شفافیت، تصاویر PNG و ناسازگاری‌های مرورگرها
وارد کردن تصاویر درون یک صفحه وب
تغییر سایز تصاویر توسط HTML
آشنایی با متن جایگزین عکس
شناورکردن تصاویر در صفحه وب
پروژه عملی : ایجاد یک گالری تصویر خطی ساده
لینک‌ها لینک ها: فرامتن بودن HTML
ساخت لینکها در صفحه وب
آشنایی با انواع لینکها
نحوه آدرس به لینکها
درست کردن میانبرهای کیبوردی برای کار با لینکها
آشنایی با دکمه Tab در کیبورد و نقش آن در لینک‌ها آشنایی با لینک‌های Anchor و HASHها
پروژه عملی : ایجاده منو صفحه بسیار قوی به همراه یک صفحه فهرست مقاله اینترنتی
لیست‌ها آشنایی با انواع لیست‌ها ساخت لیست‌های ترتیبی و غیرترتیبی
انتخاب نوع بولت برای لیست‌ها تعیین شماره شروع برای لیستها
ساخت لیست‌های توضیحی
لیستهای تودرتو و مدیریت آنها
پروژه عملی : ایجاد یک منوی به همراه گزینه‌های والد لایه ای
جداول

آشنایی با جداول و کاربردهای آن در صفحات وب ساخت اولین جدول
تعیین حاشیه کنار جدول
تعیین فاصله درونی و بیرونی سلول جدول
ساخت جدولهای حرفه ای‌تر تقسیم کردن جدول به گروههای افقی
تقسیم کردن جدول به قسمتهای عمودی
کنترل حرفه ای حاشیه‌های کناری و داخلی یک جدول
افزایش سرعت لود شدن جداول
پروژه عملی :ایجاد یک لیست قیمت فروشگاه الکترونیکی و یک منوی زیبا با تکنولوِژی جدول
فرم‌ها نقش فرم‌ها در صفحات وب
ساخت اولین فرم
پردازش اطلاعات وارد شده توسط کاربر
آشنایی با Server-Side Programming
ساخت اولین برنامه دینامیک فوق ساده
دسته بندی المان‌های موجود در فرم
ساخت منوهای Drop Down
ساخت دکمه‌های رادیویی و چک باکس‌ها (Checkbox)
فیلدهای آپلود فایل
فیلدهای مخفی و کاربردهای آن
آشنایی با دکمه‌های Submit و Reset
قراردادن عکس به جای دکمه تایید فرم
نقش دکمه Tab در فیلدهای یک فرم
غیرفعال کردن المان‌های موجود در فرم
فیلدهای فقط خواندنی
پروژه عملی : ایجاد یک فرم ارتباط با ما به همراه صفحه پاسخ تاییئ ارسال فرم
مقدمات کار با CSS

درک مفهوم CSS و جایگاه آن در کنار HTML
آشنایی با استایل‌ها و روش‌های مختلف نوشتن آن
درک ساختار یک دستور CSS
نوشتن دستورات CSS در کنار یکدیگر
انتخاب المان مورد نظر در HTML
آشنایی کامل با انتخاب کننده‌ها در CSS
آشنایی با کلاس‌های دروغین (Pseudo-Class)
آشنایی با المان‌های دروغین (Pseudo-Element)
وراثت در CSS
آشنایی با واژه Cascade و نحوه عملکرد آن
فرمت دهی متن و فونت توسط CSS

تعیین نوع فونت مورد نظر
آشنایی با گروه‌های کلی فونت (Font Families)
تعیین سایز فونت
آشنایی با ویژگی‌های یک فونت: style, weight, variant
تعیین تورفتگی یک متن از کناره‌ها تعیین فاصله بین حروف و فاصله بین خطوط یک متن
تراز یک متن در صفحه وب
کار با CSS3

تایپوگرافی
افکت سایه
افکت گرادیانت
افکت شعاع به المان‌ها انیمیشن در CSS3
تغییر حالت
تگ‌های مرور گر‌های مختلف
کار با فرم‌ها کار با فرم‌ها پروژه عملی : تمکیل صفحه ویکی پدیا و اجرای یک پروژه طراحی وب با امکانات استایل
تعیین موقعیت المان‌ها (Position)

درک کامل CSS Box Model و ناسازگاری‌های موجود
نقش استانداردها در CSS Box Model
شناور کردن المان‌ها در صفحه وب
کنترل المان‌های موجود در مجاورت المان‌های شناور
آشنایی با انواع مختلف تعیین موقعیت یک المان و کاربردهای آن
مخفی کردن المان‌ها در یک صفحه وب
درست کردن ساختار (Layout) توسط CSS

چرا برای ساخت یک صفحه وب، از جداول استفاده نکنیم
آشنایی با انواع صفحات وب مختلف
آشنایی با صفحات تک ستونی
آشنایی با صفحات چندستونی
ساخت صفحات دوستونی
ساخت صفحات سه ستونی ساده و پیچیده
تنظیم ارتفاع تمامی ستون‌های صفحه وب به یک اندازه
آشنایی با صفحات Absolutely-Positioned
آشنایی با باگ‌های مختلف مرورگرهای مختلف
پروژه عملی :ایجاد یک قالب کامل با CSS
معرفی HTML5

چه خصوصیاتی در html5 وجود دارد
چرا به HTML5 نیاز است
چرا ما نیاز به عناصر جدید ساختاری داریم
اساس HTML5

تعریف اسناد HTML5
HTML5 syntax
عنصر Header
عنصر nav
عنصر Section
عنصر article
عنصر aside
عنصر footer
بازنگری مدل محتوا
ساختار اسناد HTML5

درک الگوریتم outline
ایجاد اسناد section
استفاده از heading به درستی
استفاده از hgroup برای تحت الشعاع قرار دادن section‌ها ساختار مناسب تودرتو
دسته بندی محتوا در HTML5

کار کردن باشکل figure و figcaption
گروه بندی محتوا با aside
استفاده از div در HTML5
استفاده از صفات id,class در HTML5
کارکردن با لیستها در HTML5
استناد به کار بصورت semantically معنایی
استفاده از المنت address
استفاده از المنت small
استفاده از المنت mark
کارکردن با تاریخ و زمان
ایجاد لینک در سطح بلوک
فهمیدن رابطه لینکها
ساختار HTML5 معنایی برای دنیای واقعی

پشتیبانی از مرورگر کنونی
اطمینان از بلوک در سطح صفحه نمایش
اضافه کردن پشتیبانی برای عناصر در مرورگرهای قدیمی‌تر کار کردن با فرم‌های HTML5

المان جدید کادر متنی
صفت‌های جدید
بازگشت به صفحه پیشین
استایل فرم و ایجاد پیغام‌های خطا
نکات مهم در مرور گر‌ها برای فرم
استفاده از جاوا اسکریپت در فرم
پروژه عملی : ایجاد یک فرم حرفه‌های با HTML5
پشتیبانی API HTML5

معرفی Canvas
نقاشی در محیط canvas
بازنگری video
اضافه کردن ویدیو
مروری بر امکان Drag and Drop API
آموزش در رابطه با Encoding Video
مالتی مدیا در وب

مفهوم مالتی مدیا در وب
استفاده ویدیو در وب
کار با کنترلر‌های اشیاء ویدیو
دسترسی به مالتی مدیا
بوم نقاشی

مبانی طراحی در وب
رسم مسیرها
استفاده از transformes
استفاده از پیکسل‌ها انیمیشن در بوم نقاشی
مفهوم DRAG AND DROP

چگونه می‌توان یک المان را DRAG AND DROP نمود
ایجاد و تغییر در تنظیمات DRAG AND DROP
آشنایی با فناوری‌های مشارکتی و استفاده از آن‌ها در HTML5

مروری بر API مکان یابی جغرافیایی
مروری بر Web Storage API
ترکیب CSS 3 با HTML5

قسمت دوم:آموزش جاوا اسکریپت

آموزش شروع به استفاده از جاوااسکریپت
مقدمه ای بر جاوااسکریپت
شنایی با ابزارها و کاربردها
هسته دستور جاوا اسکریپت

ساختار کدهای جاوااسکریپت
ساخت متغیرها
نوشتن دستورهای شرطی
کارکردن با عملگرها
حلقه سازی در جاوااسکریپت
ساخت توابع در JavaScript
انواع داده و Object‌ها در جاوااسکریپت

ایجاد و کارکردن با آرایه‌ها ایجاد و کارکردن با اعداد
ایجاد و کارکردن با مقادیر رشته ای
استفاده از دستورات کار با تاریخ و زمان JavaScript
آموزش کاملا کاربردی Document Object Model ( DOM ) :

DOM چیست ؟
کارکردن با Node‌ها و HTML Element‌ها دسترسی یافتن به المان‌های موجود در DOM
تغییر دادن المان‌های موجود در DOM
ساخت المان‌های DOM
کارکردن با رخدادها و Event Listener‌ها :

مدیریت رخدادها در جاوااسکریپت
رخدادهای onClick و onEvent آموزش کارکردن با رخدادهای onBlur و onFocus
کار کردن با Timer
رفع خطاهای رخ داده در کدهای جاوااسکریپت

آشنایی با برخی خطاهای رایج جاوااسکریپت
استفاده از Firebug به منظور رفع خطای کدهای جاوااسکریپت
مراحل رفع خطا ی کدهای جاوااسکریپت
استفاده از جاوااسکریپت برای مدیریت داده‌های فرم‌ها دسترسی یافتن به عناصر فرم‌های وب
جلوگیری از ارسال یک فرم با داده‌های نامعتبر به سرور
نمایش و مخفی سازی بخش هایی از فرم‌های وب
قسمت سوم:آموزشJQuery

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

مروری بر انتخاب گرها Selector و فیلترها
استفاده از انتخابگرهای اولیه jQuery
استفاده از فیلترهای اولیه jQuery
استفاده از فیلترهای صفات jQuery
Child , Visibility
فیلترها و انتخابگرهای فرم
پویش مستندات Traversing Documents
درک حالت زنجیره عبارت jQuery
تعیین حاشیه عملکر صفحه لینک (Annotating page links )
دستکاری محتوای صفحه با jQuery

ایجاد ، گرفتن و تنظیم کردن محتوای صفحه
دستکاری ویژگی‌ها ( Attributes ) با jQuery
Wrapping ، جایگزینی و حذف محتوی
ستفاده از jQuery Event Object
مثال عملی : مولد خودکار TOC
کار با Events

درک جنبه‌های مدیریت Event در jQuery
bind کردن و unbind کردن Eventها
متدهای کمکی آسان Event
استفاده از آبجکت Event در jQuery
استفاده از ویژگی‌های دیگر Event
مثال عملی : برجسته سازی و نواربندی جداول
انیمیشن‌ها و افکت‌ها در jQuery

مخفی سازی و نمایش المان‌ها بوسیله jQuery
Fade کردن الملان‌ها با jQuery
Slide بندی المان‌ها از طریق jQuery
ساخت انیمیشن‌های سفارشی
Image Rotator ( گرداننده عکس )