# مشخصات درس‌نامه: طراحی واکنش‌گرا (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 مرورگر به صورت تصویری ارائه گردد.