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