پروژهٔ پایانی: ساخت یک لندینگ سینمایی از صفر تا انتشار

ده درس این نقشهٔ راه را که خوانده باشی، همهٔ قطعه‌ها را در اختیار داری. اما دانستن قطعه‌ها با ساختن یک چیز کامل فرق دارد. این پروژهٔ پایانی برای همین است: یک بریف واقعی، با محدودیت‌های واقعی، که در پایانش یک نمونه‌کار قابل‌ارائه داری — نه یک تمرین آموزشی.

پیشنهاد می‌کنم قبل از شروع، هر ده درس را یک‌بار مرور کنی. مسیر کامل در نقشهٔ راه طراحی سایت سینمایی است.

بریف پروژه

یک لندینگ تک‌صفحه‌ای سینمایی بساز برای کسب‌وکاری که خودت انتخاب می‌کنی. سه گزینهٔ پیشنهادی:

گزینه	حال‌وهوا	چالش اصلی
کارگاه معماری	روشن، مینیمال، فضای خالی زیاد	ساختن حس لوکس بدون تصویر شلوغ
برند قهوهٔ تخصصی	گرم، خاکی، بافت‌دار	روایت مسیر از مزرعه تا فنجان
استودیوی تولید ویدئو	تیره، پرکنتراست، پرانرژی	نمایش نمونه‌کار بدون سنگین‌شدن

اگر کسب‌وکار واقعی خودت یا مشتری‌ات را داری، حتماً همان را انتخاب کن؛ نتیجه‌اش هم انگیزه‌بخش‌تر است و هم مستقیم قابل‌استفاده.

الزامات فنی — غیرقابل‌مذاکره

• حداقل شش پرده با قوس انرژی نایکنواخت.
• حداقل یک بخش پین‌شده با اسکراب که دست‌کم سه حالت داشته باشد.
• حداقل یک نمونه پارالاکس با سرعت بین ۰٫۷ تا ۱٫۲۵.
• حداقل یک عنوان با تایپوگرافی متحرک که به کلمه شکسته شده (نه حرف).
• نسخهٔ موبایل با استراتژی متفاوت، نه صرفاً کوچک‌شدهٔ دسکتاپ.
• با جاوااسکریپت خاموش، صفحه کاملاً خوانا باشد.
• در حالت کاهش حرکت، هیچ محتوایی گم نشود.
• پیمایش کامل با کیبورد به‌همراه حلقهٔ تمرکز واضح.
• وزن بارگذاری اولیه زیر ۱٫۵ مگابایت.

مرحلهٔ ۱ — تعریف (حدود ۳۰ دقیقه)

یک فایل متنی باز کن و این پنج خط را پر کن. تا وقتی این‌ها روشن نیستند، جلوتر نرو:

کسب‌وکار:  ..................................
مخاطب:     .......... چه دردی دارد؟ ..........
پیام اصلی: ......... (یک جمله، قابل‌رد) ......
هدف صفحه:  ......... (یک اقدام مشخص) ........
حال‌وهوا:   ......... (سه صفت) ................

تست پیام: جمله‌ات را به کسی نشان بده که کسب‌وکارت را نمی‌شناسد. اگر بعد از خواندنش نتوانست بگوید تو چه می‌فروشی، بازنویسی کن.

مرحلهٔ ۲ — استوری‌بورد (حدود ۱ ساعت)

با پرامپت لایهٔ اول از درس سیستم پرامپت شروع کن، اما خروجی مدل را همان‌طور که آمد نپذیر. این سه سؤال را روی خروجی اعمال کن:

1. کدام پرده را اگر حذف کنم، صفحه ضعیف‌تر نمی‌شود؟ آن را حذف کن.
2. آیا قوس انرژی واقعاً بالا و پایین دارد یا همه‌جا ۴ و ۵ است؟
3. خروجی ذهنی هر پرده را نوشته‌ام؟ اگر نه، آن پرده هنوز آماده نیست.

خروجی این مرحله: یک جدول شش تا هفت ردیفه با ستون‌های پرده، پیام، حرکت، انرژی، و رفتار موبایل. این جدول را نگه دار؛ در همهٔ مراحل بعد به آن ارجاع می‌دهی.

مرحلهٔ ۳ — اسکلت (حدود ۱ ساعت)

با پرامپت لایهٔ دوم، اسکلت را بگیر. بعد خودت این چک را انجام بده:

بررسی	روش
هیچ عنصری با opacity:0 پنهان نشده؟	جستجوی متنی در فایل
از svh استفاده شده نه vh؟	جستجوی متنی
ظرف پین بلند و استیج یک‌صفحه‌ای؟	بازرسی در مرورگر
همهٔ تصاویر width و height دارند؟	بازرسی
صفحه بدون جاوااسکریپت خوانا است؟	غیرفعال‌کردن JS

اگر هرکدام رد شد، با تکنیک «بازگشت به قید» فقط همان بند را اصلاح بخواه، نه کل فایل را.

مرحلهٔ ۴ — حرکت (حدود ۲ ساعت)

اینجا وسوسه می‌شوی همه‌چیز را یک‌جا بخواهی. نکن. ترتیب پیشنهادی من:

1. اول فقط ظهور ساده. عناصر data-reveal را راه بینداز و تست کن.
2. بعد هیرو. زوم تصویر و تیره‌شدن پرده.
3. بعد بخش پین‌شده. با markers: true کار کن تا نقاط شروع و پایان را ببینی.
4. بعد تایپوگرافی. شکستن به کلمه و ظهور پلکانی.
5. آخر از همه پارالاکس. با شدت کم شروع کن و کم‌کم زیاد کن.

بعد از هر مرحله، یک نسخه ذخیره کن. اگر مرحلهٔ بعد خراب شد، به نقطهٔ سالم برمی‌گردی. این ساده‌ترین بیمه‌نامهٔ ممکن است.

تکنیک نسخهٔ آزمایشی

برای هر افکتی که برایت تازه است، اول یک فایل مستقل کوچک بساز که فقط همان را دارد. وقتی درست کار کرد، منتقلش کن. عیب‌یابی در سی خط، ده برابر ساده‌تر از چهارصد خط است.

مرحلهٔ ۵ — موبایل (حدود ۱ ساعت)

این مرحله را جدی بگیر؛ جایی است که بیشتر پروژه‌ها می‌شکنند. برای هر پرده تصمیم بگیر:

پردهٔ ۱ هیرو    | موبایل: تصویر ثابت، بدون زوم
پردهٔ ۲ آمار    | موبایل: همان شمارش، بدون تغییر
پردهٔ ۳ مسئله   | موبایل: متن ساده، بدون روشن‌شدن تدریجی
پردهٔ ۴ پین     | موبایل: سه کارت پشت‌سرهم، بدون پین
پردهٔ ۵ گواه    | موبایل: اسکرول افقی بومی با snap
پردهٔ ۶ اقدام   | موبایل: بدون تغییر

و حتماً روی گوشی واقعی تست کن، نه فقط در حالت شبیه‌ساز مرورگر. رفتار لمس و کارایی واقعی را فقط روی دستگاه واقعی می‌فهمی.

مرحلهٔ ۶ — کارایی (حدود ۴۵ دقیقه)

چک‌لیست ده‌مرحله‌ای درس کارایی را اجرا کن. اولویت‌بندی:

1. تصاویر را به قالب مدرن تبدیل کن و چند اندازه بساز.
2. تصویر هیرو با اولویت بالا، بقیه با بارگذاری تنبل.
3. هر انیمیشنی که width یا top را تغییر می‌دهد، به transform ببر.
4. صفت will-change را از عناصر غیرمتحرک بردار.
5. حجم نهایی را اندازه بگیر: زیر ۱٫۵ مگابایت.

مرحلهٔ ۷ — دسترس‌پذیری (حدود ۴۵ دقیقه)

تست ده‌دقیقه‌ای درس دسترس‌پذیری را اجرا کن. مهم‌ترین بند: کاهش حرکت را روشن کن و کل صفحه را اسکرول کن. اگر حتی یک پنل از بخش پین‌شده نامرئی ماند، پروژه هنوز تمام نشده.

معیار ارزیابی: به کار خودت نمره بده

معیار	امتیاز	چطور بسنجی
روایت روشن است	۲۰	غریبه بعد از یک‌بار اسکرول، پیام را بگوید
قوس انرژی درست	۱۰	حداقل یک پردهٔ آرام بین دو پردهٔ پرانرژی
پین و اسکراب روان	۱۵	بدون پرش، برگشت اسکرول هم درست کار کند
موبایل استراتژی جدا دارد	۱۵	روی گوشی واقعی، بدون گیر و پرش
بدون جاوااسکریپت خوانا	۱۰	غیرفعال‌کردن JS
کاهش حرکت کامل	۱۰	هیچ محتوایی گم نشود
کیبورد و کنتراست	۱۰	پیمایش با Tab، بازرسی کنتراست
وزن زیر ۱٫۵ مگابایت	۱۰	زبانهٔ شبکه در ابزار مرورگر

زیر ۷۰: هنوز کار دارد. ۷۰ تا ۸۵: قابل‌ارائه است. بالای ۸۵: نمونه‌کار حرفه‌ای.

پرامپت داور: از مدل بخواه کارت را نقد کند

نقش: داور فنی و طراحی، سخت‌گیر و بی‌تعارف.

زمینه: [کل کد پروژه] + [جدول استوری‌بورد]

کار: این پروژه را با معیارهای زیر ارزیابی کن و به هر بخش
از ۱۰۰ نمره بده. به من تعارف نکن؛ ضعف‌ها را مستقیم بگو.

معیارها:
- روایت: آیا هر پرده وظیفهٔ روشنی دارد یا صرفاً پرکننده است؟
- قوس انرژی: آیا یکنواخت است؟
- انیمیشن: آیا افکتی هست که به روایت کمک نمی‌کند
  و فقط برای نمایش گذاشته شده؟ نامش را ببر.
- موبایل: آیا استراتژی جدا دارد یا فقط کوچک شده؟
- پایداری: با JS خاموش و با کاهش حرکت چه می‌شود؟
- کارایی: سنگین‌ترین سه عامل کدام‌اند؟
- دسترس‌پذیری: سه مشکل جدی‌تر کدام‌اند؟

خروجی:
۱) جدول نمره با یک جملهٔ دلیل برای هر بخش.
۲) سه تغییری که بیشترین اثر را دارند، به‌ترتیب اولویت.
۳) یک چیزی که باید حذف شود.
ممنوع: تعریف کلی، بازنویسی کد.

بند سوم را جدی بگیر. تقریباً هر پروژه‌ای یک افکت اضافه دارد که سازنده‌اش عاشقش است و مخاطب اذیت می‌شود.

تحویل نهایی: چه چیزی باید داشته باشی

1. فایل index.html کامل و قابل‌اجرا.
2. پوشهٔ تصاویر در قالب مدرن و چند اندازه.
3. فایل STORYBOARD.md با جدول پرده‌ها.
4. فایل NOTES.md شامل: تصمیم‌های اصلی، چیزهایی که امتحان کردی و کنار گذاشتی، و مشکلاتی که حل کردی.
5. سه اسکرین‌شات: دسکتاپ، موبایل، و حالت کاهش حرکت.

آن فایل یادداشت‌ها را دست‌کم نگیر. وقتی این پروژه را به‌عنوان نمونه‌کار ارائه می‌دهی، چیزی که کارفرما را متقاعد می‌کند، فهم تو از تصمیم‌هاست، نه صرفاً نتیجهٔ بصری. کسی که بتواند توضیح دهد چرا فلان افکت را حذف کرده، از کسی که فقط افکت بلد است متمایز می‌شود — همان تفاوتی که در توهم هوش مصنوعی دربارهٔ آن نوشته‌ایم.

سه سطح دشواری

سطح	دامنه	زمان تقریبی
مقدماتی	پنج پرده، یک پین ساده، بدون پارالاکس	۴ ساعت
استاندارد	بریف کامل بالا	۷ ساعت
پیشرفته	به‌علاوهٔ: نوار افقی، تغییر رنگ زمینه بین پرده‌ها، حالت روشن و تیره	۱۲ ساعت

اگر تازه‌کاری، از سطح مقدماتی شروع کن و بعد همان پروژه را ارتقا بده. ساختن یک چیز کامل و ساده، همیشه از نیمه‌کاره‌رها‌کردن یک چیز پیچیده ارزشمندتر است.

پرسش‌های پرتکرار

چقدر از کد را باید خودم بنویسم؟
مهم نیست چقدر را تایپ می‌کنی؛ مهم این است که همه‌اش را بفهمی. تستش ساده است: هر خطی که نمی‌توانی توضیح دهی چه می‌کند، هنوز مال تو نیست.

اگر جایی گیر کردم چه کنم؟
از قالب عیب‌یابی درس سیستم پرامپت استفاده کن: انتظار، واقعیت، چیزی که امتحان کردی، و درخواست سه علت محتمل — نه کد اصلاحی مستقیم.

می‌توانم از قالب آماده استفاده کنم؟
برای یادگیری، نه. کل ارزش این پروژه در تصمیم‌گرفتن است و قالب آماده دقیقاً همان بخش را از تو می‌گیرد.

پروژه را کجا منتشر کنم؟
هر سرویس میزبانی رایگان استاتیک کافی است. مهم این است که یک لینک زنده داشته باشی که بتوانی به دیگران نشان دهی.

جمع‌بندی

هفت مرحله: تعریف، استوری‌بورد، اسکلت، حرکت، موبایل، کارایی، دسترس‌پذیری. بعد از هر مرحله نسخه ذخیره کن، به کار خودت با جدول نمره‌دهی نمره بده، و در پایان یک لینک زنده به‌همراه یادداشت تصمیم‌ها داشته باش.

با تمام‌شدن این پروژه، نقشهٔ راه طراحی سایت سینمایی کامل می‌شود. اگر دوست داری مسیر یادگیری‌ات را ادامه بدهی، سراغ نقشهٔ راه مهندسی پرامپت یا نقشهٔ راه برنامه‌نویسی با هوش مصنوعی برو. و اگر پروژه‌ات را ساختی، در کانال @MrChatGPT_IR برایمان بفرست — دوست داریم ببینیمش.