دوره CSS for Mixed Reality Hardware همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

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

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

عنوان دوره: دوره CSS for Mixed Reality Hardware

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

موضوع میانی: CSS

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

• 1. مقدمه‌ای بر واقعیت ترکیبی (MR)، واقعیت مجازی (VR) و واقعیت افزوده (AR)
• 2. چرا از تکنولوژی‌های وب (HTML/CSS) برای واقعیت ترکیبی استفاده کنیم؟
• 3. آشنایی با پلتفرم‌های کلیدی: WebXR و A-Frame
• 4. راه‌اندازی محیط توسعه برای CSS در MR
• 5. اولین صحنه سه‌بعدی شما: Hello World
• 6. نقش DOM در فضای سه‌بعدی: سیستم Entity-Component
• 7. مروری بر انتخابگرهای پایه‌ای CSS
• 8. انتخابگرهای پیشرفته: شبه‌کلاس‌ها (Pseudo-classes) و شبه‌عناصر (Pseudo-elements)
• 9. اولویت، وراثت و آبشاری بودن در CSS (Cascade and Specificity)
• 10. مروری بر مدل جعبه‌ای (Box Model) در زمینه دوبعدی
• 11. واحدهای اندازه‌گیری: px, rem, em و واحدهای Viewport
• 12. کار با رنگ‌ها: RGB, HSL, Hex و شفافیت (Opacity)
• 13. مبانی Flexbox برای ساخت پنل‌های UI دوبعدی
• 14. مبانی CSS Grid برای ساخت پنل‌های UI دوبعدی
• 15. ویژگی Position و مفاهیم Stacking Context
• 16. آشنایی با ویژگی transform در فضای دوبعدی
• 17. ورود به بعد سوم: معرفی تابع ()translateZ
• 18. بهینه‌سازی حرکت با ()translate3d
• 19. چرخش در فضای دوبعدی با ()rotate
• 20. چرخش در فضای سه‌بعدی: ()rotateX(), rotateY(), rotateZ
• 21. کنترل کامل چرخش با تابع ()rotate3d
• 22. تغییر مقیاس در بعد سوم: ()scaleZ و ()scale3d
• 23. مفهوم و کاربرد transform-origin در فضای سه‌بعدی
• 24. ایجاد عمق میدان با ویژگی perspective
• 25. کنترل نقطه گریز با perspective-origin
• 26. خلق یک فضای سه‌بعدی واقعی با transform-style: preserve-3d
• 27. کنترل نمایش پشت عناصر با backface-visibility
• 28. ساخت یک مکعب سه‌بعدی ساده با CSS Transforms
• 29. عناصر تودرتو در فضای سه‌بعدی و چالش‌های آن
• 30. محدودیت‌های CSS Transforms برای واقعیت ترکیبی واقعی
• 31. واحدهای اندازه‌گیری در فضای سه‌بعدی: متر
• 32. موقعیت‌دهی عناصر (Entities) در مختصات X, Y, Z
• 33. چرخش عناصر در سه محور Pitch, Yaw, Roll
• 34. مقیاس‌دهی عناصر به صورت یکنواخت و غیریکنواخت
• 35. مفهوم صحنه (Scene)، دوربین (Camera) و کاربر
• 36. روابط والد-فرزندی و تفاوت مختصات محلی و جهانی
• 37. چیدمان عناصر روی یک دایره یا کره
• 38. چیدمان استوانه‌ای برای رابط‌های کاربری منحنی
• 39. مفهوم Billboarding: همیشه رو به دوربین
• 40. ایجاد نمایشگر سربالا (HUD) با الصاق عناصر به دید کاربر
• 41. الصاق عناصر رابط کاربری به کنترلرها یا دست‌ها
• 42. موقعیت‌دهی عناصر در محیط فیزیکی (World-locked UI)
• 43. درک عمق و مفهوم هم‌پوشانی (Occlusion) در فضای سه‌بعدی
• 44. پدیده Z-Fighting و راه‌های مقابله با آن
• 45. کامپوننت‌های چیدمان در فریم‌ورک‌های WebXR
• 46. از background-color تا رنگ متریال (Material Color)
• 47. آشنایی با ویژگی‌های متریال: زبری (Roughness)
• 48. آشنایی با ویژگی‌های متریال: فلزی بودن (Metalness)
• 49. اعمال بافت (Texture) روی اشیاء سه‌بعدی
• 50. شفافیت و شیشه‌ای کردن متریال‌ها
• 51. متریال‌های تابنده (Emissive): ساخت اشیاء درخشان
• 52. استفاده از Normal Map برای ایجاد جزئیات سطح
• 53. استفاده از Environment Map برای ایجاد بازتاب‌های محیطی
• 54. مقدمه‌ای بر نورپردازی: نور محیطی (Ambient Light)
• 55. نورپردازی جهت‌دار (Directional Light)
• 56. نورپردازی نقطه‌ای (Point Light)
• 57. نورپردازی موضعی (Spotlight)
• 58. کنترل رنگ و شدت نورها
• 59. ایجاد و کنترل سایه‌ها (Casting and Receiving Shadows)
• 60. کار با تصاویر و ویدیوهای ۳۶۰ درجه (Skybox)
• 61. مقدمه‌ای بر شیدرها (Shaders) و نقش آن‌ها
• 62. تعامل مبتنی بر نگاه (Gaze Interaction) و شبه‌کلاس hover:
• 63. رویدادهای کلیک و انتخاب با کنترلرها
• 64. استایل‌دهی به نشانگر (Cursor/Reticle) در فضای سه‌بعدی
• 65. استفاده از CSS Transitions برای انیمیشن‌های نرم
• 66. انیمیشن‌سازی موقعیت، چرخش و مقیاس
• 67. انیمیشن‌سازی ویژگی‌های متریال مانند رنگ و شفافیت
• 68. توابع زمان‌بندی (Timing Functions) در انیمیشن‌های سه‌بعدی
• 69. انیمیشن‌های پیچیده با keyframes@
• 70. اعمال انیمیشن روی مدل‌های سه‌بعدی وارد شده
• 71. کنترل وضعیت پخش انیمیشن (animation-play-state)
• 72. زنجیره‌ای کردن و توالی‌بندی انیمیشن‌ها
• 73. افزودن افکت‌های صوتی به تعاملات و انیمیشن‌ها
• 74. مفهوم بازخورد لمسی (Haptic Feedback)
• 75. مدیریت حالت‌ها با استفاده از کلاس‌های CSS (مانند is-active.)
• 76. بهینه‌سازی عملکرد: درک Draw Calls
• 77. مفاهیم بهینه‌سازی هندسه مدل‌ها (Geometry)
• 78. فشرده‌سازی بافت‌ها و تکنیک Texture Atlasing
• 79. طراحی واکنش‌گرا برای میدان دیدهای (FOV) مختلف
• 80. طراحی برای تجربه‌های نشسته در مقابل تجربه‌های Room-Scale
• 81. دسترس‌پذیری (Accessibility) در MR: خوانایی متن
• 82. دسترس‌پذیری: حالت‌های کنتراست بالا
• 83. دسترس‌پذیری: پشتیبانی از روش‌های تعامل گوناگون
• 84. ادغام و استایل‌دهی مدل‌های سه‌بعدی (glTF)
• 85. کار با متن سه‌بعدی و استایل‌دهی به آن
• 86. نمایش ویدیو و محتوای چندرسانه‌ای در فضای سه‌بعدی
• 87. ملاحظات مربوط به سازگاری بین هدست‌های مختلف
• 88. اشکال‌زدایی (Debugging) کدهای CSS در یک محیط MR
• 89. پروژه اول: ساخت یک کارت ویزیت سه‌بعدی تعاملی
• 90. پروژه دوم: طراحی نمایشگر سه‌بعدی یک محصول
• 91. پروژه سوم: ساخت یک منوی رابط کاربری فضایی (Spatial UI)
• 92. پروژه چهارم: پیاده‌سازی یک گالری هنری مجازی ساده
• 93. پروژه پنجم: بصری‌سازی داده‌ها در فضای سه‌بعدی
• 94. آشنایی با WebXR Device API
• 95. نقش جاوا اسکریپت در دستکاری دینامیک استایل‌ها
• 96. استفاده از متغیرهای CSS برای تم‌بندی (Theming) صحنه‌های MR
• 97. آینده CSS در محاسبات فضایی (Spatial Computing)
• 98. جمع‌بندی دوره و گام‌های بعدی
• 99. **طراحی تعاملی و رابط کاربری در MR با CSS: رویدادها، انیمیشن‌ها و حالت‌ها**
• 100. **بهینه‌سازی CSS برای عملکرد در MR: ملاحظات رندر، بافت‌ها و مدل‌ها**