فلش‌کارت‌های آموزشی از صفر تا صد توسعه وب موبایل با رویکرد Smashing Mobile Web Development

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره از صفر تا صد توسعه وب موبایل با رویکرد Smashing Mobile Web Development

موضوع کلی: توسعه وب موبایل

موضوع میانی: مبانی و تکنیک‌های توسعه وب واکنش‌گرا

📋 سرفصل‌های دوره

• 1. مقدمه‌ای بر توسعه وب موبایل: چرا و چگونه؟
• 2. تاریخچه و تکامل وب موبایل
• 3. مفهوم "موبایل-فرست" (Mobile-First) چیست؟
• 4. چالش‌ها و فرصت‌های توسعه وب موبایل
• 5. تفاوت وب سایت واکنش‌گرا و وب اپلیکیشن موبایل
• 6. آشنایی با دستگاه‌های موبایل و ویژگی‌های آن‌ها
• 7. معرفی استراتژی‌های توسعه وب موبایل (واکنش‌گرا، تطبیقی، اپلیکیشن جداگانه)
• 8. بررسی آمار و اهمیت کاربران موبایل
• 9. اصول اولیه UX/UI برای موبایل
• 10. ابزارهای مورد نیاز برای شروع توسعه وب موبایل
• 11. ساختار HTML پایه برای صفحات موبایل
• 12. استفاده از متا تگ Viewport و اهمیت آن
• 13. تنظیمات اولیه Viewport: width=device-width, initial-scale=1
• 14. HTML5 و نقش آن در توسعه موبایل
• 15. تگ‌های سمنتیک (Semantic HTML5) برای ساختاردهی بهتر
• 16. استفاده از فرم‌های HTML5 بهینه برای موبایل
• 17. ورودی‌های خاص موبایل (type="tel", "email", "number")
• 18. عناصر `<picture>` و `srcset` برای تصاویر واکنش‌گرا
• 19. استفاده از Video و Audio در موبایل
• 20. بهینه‌سازی ساختار HTML برای کارایی بهتر
• 21. مقدمه‌ای بر CSS و نقش آن در طراحی واکنش‌گرا
• 22. مفهوم رسپانسیو دیزاین (Responsive Design)
• 23. آشنایی با مدیا کوئری‌ها (Media Queries)
• 24. کاربرد مدیا کوئری‌ها در تنظیمات Viewport
• 25. Breakpoints: انتخاب و مدیریت آن‌ها
• 26. استراتژی Mobile-First در CSS (استایل‌دهی از کوچک به بزرگ)
• 27. واحدهای نسبی در CSS (em, rem, vw, vh)
• 28. ایجاد طرح‌بندی‌های انعطاف‌پذیر با Flexbox
• 29. مثال‌های پیشرفته از Flexbox برای طرح‌بندی موبایل
• 30. معرفی CSS Grid برای طرح‌بندی‌های پیچیده‌تر
• 31. استفاده ترکیبی از Flexbox و Grid برای چیدمان واکنش‌گرا
• 32. مدیریت تصاویر در طراحی واکنش‌گرا: تکنیک‌های Fluid Images
• 33. Background Images واکنش‌گرا
• 34. مدیریت فونت‌ها و تایپوگرافی در موبایل
• 35. استفاده از فونت‌های وب و نکات پرفورمنس
• 36. طراحی دکمه‌ها و عناصر تعاملی لمسی (Touch Targets)
• 37. طراحی ناوبری (Navigation) مناسب برای موبایل (همبرگری، سایدبار)
• 38. تکنیک‌های پنهان‌سازی/نمایش عناصر در مدیا کوئری‌ها
• 39. استایل‌دهی جداول داده‌ای برای موبایل
• 40. ایجاد فرم‌های واکنش‌گرا و کاربرپسند در موبایل
• 41. استفاده از CSS Custom Properties (Variables) برای مدیریت استایل
• 42. انیمیشن‌ها و ترنزیشن‌های CSS برای تجربه کاربری روان در موبایل
• 43. مدیریت فضای سفید (Whitespace) در طراحی موبایل
• 44. تنظیمات استایل برای حالت افقی (Landscape) و عمودی (Portrait)
• 45. ابزارهای CSS برای توسعه واکنش‌گرا (مثل PostCSS, SASS/LESS)
• 46. مقدمه‌ای بر JavaScript در توسعه وب موبایل
• 47. بهینه‌سازی کد JavaScript برای پرفورمنس موبایل
• 48. مدیریت رویدادهای لمسی (Touch Events): touchstart, touchmove, touchend
• 49. پیاده‌سازی ژست‌های حرکتی (Gestures) مانند Swipe و Pinch
• 50. استفاده از Geolocation API
• 51. استفاده از Device Orientation API
• 52. Vibration API برای بازخورد لمسی
• 53. Storage API: LocalStorage و SessionStorage برای داده‌های آفلاین
• 54. IndexedDB برای ذخیره‌سازی داده‌های بزرگتر در سمت کلاینت
• 55. مدیریت DOM در JavaScript با تمرکز بر پرفورمنس موبایل
• 56. Ajax و Fetch API برای دریافت داده به صورت غیرهمزمان
• 57. کتابخانه‌ها و فریمورک‌های JavaScript (مثل jQuery, React, Vue) در موبایل
• 58. مبانی Progressive Web Apps (PWA) با JavaScript
• 59. Service Workers: مقدمه و کاربرد در آفلاین‌سازی
• 60. Push Notifications در PWA
• 61. اهمیت پرفورمنس در وب موبایل
• 62. معیارهای کلیدی پرفورمنس (LCP, FID, CLS) و Core Web Vitals
• 63. بهینه‌سازی تصاویر: فشرده‌سازی، فرمت‌ها (WebP, AVIF)، Lazy Loading
• 64. بهینه‌سازی فونت‌های وب: Subsetting, Font Display
• 65. بهینه‌سازی CSS: فشرده‌سازی، حذف CSS غیرضروری (Critical CSS)
• 66. بهینه‌سازی JavaScript: فشرده‌سازی، Defer/Async، Tree Shaking
• 67. تکنیک‌های Caching (کشینگ) در سمت کلاینت و سرور
• 68. استفاده از CDN (شبکه توزیع محتوا)
• 69. HTTP/2 و HTTP/3 برای بارگذاری سریع‌تر
• 70. بهینه‌سازی رندرینگ (Rendering Optimization)
• 71. Critical Rendering Path: درک و بهینه‌سازی
• 72. استفاده از Web Workers برای اجرای تسک‌های سنگین
• 73. تکنیک‌های Load-Time Optimization
• 74. ابزارهای تحلیل پرفورمنس: Lighthouse, PageSpeed Insights, WebPageTest
• 75. مانیتورینگ پرفورمنس در دنیای واقعی (RUM)
• 76. اهمیت دسترس‌پذیری (Accessibility) در وب موبایل
• 77. راهنمای WCAG و چک‌لیست‌های دسترس‌پذیری موبایل
• 78. طراحی برای Touch Targets بزرگ و مناسب
• 79. استفاده صحیح از Semantics و ARIA Roles
• 80. مدیریت فوکوس (Focus Management) برای کیبورد و صفحه‌خوان
• 81. کنتراست رنگی مناسب و خوانایی متن
• 82. استفاده از قابلیت‌های دسترسی بومی دستگاه‌ها
• 83. تست دسترس‌پذیری در دستگاه‌های موبایل
• 84. الگوهای UX موبایل: بهترین و بدترین مثال‌ها
• 85. طراحی تعاملات (Interactions) شهودی و طبیعی
• 86. معرفی ابزارهای توسعه‌دهنده مرورگرها برای موبایل
• 87. شبیه‌سازی دستگاه‌های موبایل در مرورگر (Device Emulation)
• 88. دیباگینگ JavaScript در دستگاه‌های واقعی (Remote Debugging)
• 89. تست واکنش‌گرایی در مرورگرها
• 90. استفاده از ابزارهای تست خودکار (Automated Testing) برای موبایل
• 91. تست عملکرد و پرفورمنس در محیط‌های مختلف
• 92. تست در دستگاه‌های فیزیکی واقعی
• 93. مدیریت نسخه‌ها با Git و GitHub
• 94. توسعه Progressive Web Apps (PWA) از ابتدا تا انتها
• 95. استراتژی‌های استقرار (Deployment) برای وب‌سایت‌های موبایل
• 96. معرفی Web Components برای قابلیت استفاده مجدد
• 97. مبانی AMP (Accelerated Mobile Pages) و کاربردهای آن
• 98. بهینه‌سازی برای SEO در موبایل
• 99. آینده وب موبایل: WebAssembly, WebXR و فراتر از آن
• 100. جمع‌بندی و بهترین الگوهای Smashing Mobile Web Development