feat: add chapter 05-design-and-ux specs

chapters/05-design-and-ux/05-lesson-responsive-design/spec.md

@@ -0,0 +1,101 @@
+# مشخصات درس‌نامه: طراحی واکنش‌گرا (Responsive Design & Mobile-First Mindset)
+- **شناسه در سیلابس:** `L5.6`
+- **فصل:** فصل ۵: طراحی تجربه و هویت محصول (Ch 5)
+- **نوع محتوا:** 📘 درس‌نامه متنی
+- **زمان تقریبی مطالعه:** ۱۲ دقیقه
+- **پیش‌نیازهای مستقیم:** `L5.5` (فاصله‌گذاری و چیدمان)
+
+---
+
+## ۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy)
+دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند:
+- [ ] **درک کند (Understand):** چرا رویکرد «موبایل‌فرست (Mobile-First)» شرط اساسی بقای محصولات وب است و بیش از ۶۵٪ از مدیران استخدام و کارفرمایان، پورتفولیو را ابتدا روی گوشی تلفن همراه باز می‌کنند.
+- [ ] **درک کند (Understand):** نقاط شکست استاندارد ریسپانسیو (Breakpoints) در وب مدرن و پیشوندهای کلیدی Tailwind CSS (`sm`, `md`, `lg`, `xl`) چگونه کار می‌کنند.
+- [ ] **به‌کار ببندد (Apply):** الگوهای بازآرایی واکنش‌گرا را بر روی پروژه محوری (تبدیل گرید ۳ ستونه پروژه‌ها به ۱ ستونه در موبایل، و تبدیل سایدبار ادمین به منوی کشویی) اعمال کند.
+- [ ] **به‌کار ببندد (Apply):** استاندارد حداقل ابعاد لمسی ۴۴×۴۴ پیکسل (Touch Target) را برای دکمه‌ها و فرم‌ها جهت جلوگیری از خطای کلیک در موبایل رعایت کند.
+- [ ] **به‌کار ببندد (Apply):** پنل شبیه‌ساز دستگاه‌ها (Device Mode) را در ابزار DevTools مرورگر با کلید میانبر فعال کرده و ظاهر پروژه را در ابعاد مختلف آزمایش کند.
+
+---
+
+## ۲. محدوده و مرزهای محتوا (Scope & Boundaries)
+
+### آنچه باید پوشش داده شود (In-Scope):
+1. **واقعیت دنیای موبایل‌فرست:**
+   * طراحی فقط برای نمایشگر لپ‌تاپ خودتان، بزرگ‌ترین اشتباه است؛ اگر وب‌سایت در صفحه کوچک موبایل شکسته شود یا نیازمند زوم کردن باشد، کاربر در کمتر از ۳ ثانیه صفحه را ترک می‌کند.
+2. **کالبدشکافی نقاط شکست (Responsive Breakpoints) در وب مدرن:**
+   * **پیش‌فرض (Mobile First - عرض زیر ۶۴۰ پیکسل):** تمام المان‌ها تمام‌عرض (`w-full`)، تک‌ستونه، متن‌ها خوانا، منو جمع‌شده.
+   * **نقطه شکست `sm: 640px` (گوشی‌های بزرگ و فبلت‌ها):** شروع تنظیم حاشیه‌های کناری.
+   * **نقطه شکست `md: 768px` (تبلت‌ها و آی‌پد):** گرید پروژه‌ها ۲ ستونه می‌شود؛ منوی ناوبری باز می‌شود.
+   * **نقطه شکست `lg: 1024px` (لپ‌تاپ‌ها):** گرید ۳ ستونه می‌شود؛ سایدبار پنل ادمین به صورت ستون ثابت سمت راست/چپ قرار می‌گیرد.
+   * **نقطه شکست `xl: 1280px` (مانیتورهای عریض رومیزی):** تثبیت کانتینر در حداکثر عرض.
+3. **انطباق بخش‌های پروژه پورتفولیوی پویا در موبایل و دسکتاپ:**
+   * **ناوبری (Navbar):** دسکتاپ (لینک‌های افقی) $\rightarrow$ موبایل (دکمه همبرگری مدرن یا هدر چسبان فشرده).
+   * **گرید پروژه‌ها:** کلاس جادویی `grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6`.
+   * **پنل مدیریت ادمین:** سایدبار دسکتاپ در موبایل به صورت منوی کشویی پایین صفحه (Bottom Sheet) درمی‌آید تا ادمین بتواند حتی با گوشی خود یک پروژه اضافه کند!
+4. **استاندارد اهداف لمسی (Touch Target - قانون ۴۴ پیکسل):**
+   * انگشت شست انسان موس پیکسلی نیست؛ دکمه‌ها، آیکون‌ها و لینک‌ها باید حداقل ۴۴×۴۴ پیکسل مساحت کلیک‌پذیر با پدینگ مناسب داشته باشند.
+5. **روش تست زنده در مرورگر (Device Mode):**
+   * آموزش زدن کلید میانبر `Ctrl+Shift+M` در ویندوز یا `Cmd+Shift+M` در مک در مرورگر Chrome برای دیدن نمای iPhone و Galaxy.
+6. **کال‌اوت‌های Quera:**
+   * `<details class="violet">`: چرا فریم‌ورک Tailwind کدهای ریسپانسیو را به صورت پیش‌فرض Mobile-First طراحی کرده است؟
+   * `<details class="red">`: تله انگشت بزرگ (Fat Finger Error)؛ پرهیز از چسباندن دکمه‌های کوچک در موبایل که باعث کلیک اشتباه کاربر می‌شود.
+
+### آنچه نباید وارد آن شویم (Out-of-Scope):
+- توسعه اپلیکیشن‌های نیتیو موبایل با React Native یا Flutter (مبحث مربوط به فصل ۱۵).
+- انیمیشن‌های سنگین باز و بسته شدن سایدبار (درس ۵.۷).
+
+---
+
+## ۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms)
+
+| اصطلاح انگلیسی | معادل فارسی مصوب | توضیح یک‌خطی ساده |
+| :--- | :--- | :--- |
+| Responsive Web Design | طراحی وب واکنش‌گرا | روش طراحی صفحاتی که خود را به طور خودکار با ابعاد و جهت نمایشگر تطبیق می‌دهند |
+| Mobile-First Approach | رویکرد موبایل‌فرست | استراتژی طراحی رابط کاربری از کوچک‌ترین اندازه صفحه (موبایل) و گسترش تدریجی به دسکتاپ |
+| Breakpoint | نقطه شکست / عطف | اندازه مشخصی از عرض صفحه (مانند ۷۶۸ پیکسل) که در آن چیدمان عناصر تغییر ساختار می‌دهد |
+| Touch Target Size | مساحت هدف لمسی | حداقل اندازه فیزیکی یک عنصر تعاملی (حداقل ۴۴×۴۴ پیکسل) برای راحتی لمس با انگشت |
+| Device Mode / Emulation | حالت شبیه‌ساز دستگاه | ابزار داخلی مرورگر برای شبیه‌سازی صفحه‌نمایش موبایل و تبلت با اندازه‌های استاندارد |
+
+---
+
+## ۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders)
+> **راهنمای ایجنت نویسنده:** تمام تصاویر باید در پوشهٔ `images/` قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند:
+
+1. **تصویر کاور درس:** `images/cover.png`
+   * **موضوع:** کاور مدرن با تم تیره که یک اپلیکیشن واحد را همزمان روی صفحه گوشی موبایل، تبلت و لپ‌تاپ با انعطاف و هماهنگی کامل نمایش می‌دهد.
+2. **طیف چنددستگاهی واکنش‌گرا:** `images/responsive-device-spectrum.png`
+   * **موضوع:** نمایش تصویری پورتفولیو در ۴ فریم: موبایل (تک‌ستونه) $\rightarrow$ تبلت (دوستونه) $\rightarrow$ لپ‌تاپ (سه‌ستونه) $\rightarrow$ مانیتور عریض.
+3. **خط‌کش نقاط شکست در Tailwind:** `images/tailwind-breakpoints-guide.png`
+   * **موضوع:** اینفوگرافیک محور افقی نقاط شکست: پیش‌فرض (موبایل)، `sm: 640px`، `md: 768px`، `lg: 1024px`، `xl: 1280px`.
+4. **مقایسه نمای موبایل و دسکتاپ پورتفولیوی پویا:** `images/portfolio-mobile-vs-desktop.png`
+   * **موضوع:** اسکرین‌شات کنار هم: نسخه موبایل با ناوبری ساده و کارت‌های عمودی در برابر نسخه دسکتاپ با سایدبار و گرید باز.
+5. **آموزش کار با ابزار Device Toolbar در مرورگر:** `images/chrome-devtools-device-mode.png`
+   * **موضوع:** اسکرین‌شات آموزشی از پنل DevTools با انتخاب دستگاه iPhone و دکمه‌های چرخش صفحه و تغییر رزولوشن.
+
+---
+
+## ۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (`README.md`)
+
+1. **تیتر اصلی:** `# طراحی واکنش‌گرا: هنر انطباق بی‌نقص با موبایل، تبلت و دسکتاپ`
+2. **مقدمه:** چرا اگر پورتفولیوی شما در گوشی کارفرما درست نمایش داده نشود، دیگر شانسی برای دیده شدن نخواهید داشت؟
+3. **جدول کاور درس**
+4. **فلسفه موبایل‌فرست (Mobile-First):** چرا از کوچک‌ترین صفحه شروع می‌کنیم؟
+5. **نقاط شکست (Breakpoints): زبان تغییر شکل المان‌ها در Tailwind CSS:**
+   * تشریح پیشوندهای `sm`, `md`, `lg`, `xl`.
+6. **باکس نکته Quera (`<details class="violet">`):** منطق Mobile-First در معماری کلاس‌های Tailwind.
+7. **پیاده‌سازی واکنش‌گرایی در پروژه پورتفولیوی پویا:**
+   * هدر و ناوبری تطبیق‌پذیر.
+   * گرید هوشمند پروژه‌ها (`grid-cols-1 md:grid-cols-2 lg:grid-cols-3`).
+   * سایدبار دسکتاپ در برابر منوی کشویی ادمین در موبایل.
+8. **استاندارد حیاتی اهداف لمسی (Touch Target ۴۴ پیکسلی):** راحتی لمس بدون خطای انگشت.
+9. **باکس هشدار Quera (`<details class="red">`):** تله خطای کلیک و فشرده کردن بیش از حد دکمه‌ها در موبایل.
+10. **روش تست زنده ریسپانسیو با ابزار DevTools مرورگر:** شبیه‌سازی گوشی‌های آیفون و سامسونگ با یک کلیک.
+11. **جمع‌بندی درس‌نامه:** تضمین نمایش بی‌نقص پروژه در تمام نمایشگرها و ورود به دنیای کامپوننت‌های تعاملی و وضعیت‌ها.
+
+---
+
+## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
+- [ ] ضرورت رویکرد Mobile-First با آمار و استدلال‌های محکم تبیین شده باشد.
+- [ ] نقاط شکست استاندارد وب و نحوه استفاده از آن‌ها در Tailwind شرح داده شود.
+- [ ] دگرگونی چیدمان پورتفولیو (گرید پروژه‌ها، هدر و پنل ادمین) در ابعاد مختلف کاملاً پوشش داده شود.
+- [ ] قاعده اهداف لمسی ۴۴ پیکسلی و شیوه تست با ابزار Inspect مرورگر به صورت تصویری ارائه گردد.