[{"data":1,"prerenderedAt":256},["ShallowReactive",2],{"lesson:t5-s08-animation":3,"course:taropood":60},{"meta":4,"prev":11,"next":15,"sections":19},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,8,"t5-s08-animation","book",5,"فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},7,"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},9,"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",[20,24,27,32,35,38,41,44,47,50,53,57],{"kind":21,"heading":22,"html":23},"normal","در این فصل چه می‌سازی","\u003Ch2 id=\"در-این-فصل-چه-می‌سازی\">در این فصل چه می‌سازی\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84-%DA%86%D9%87-%D9%85%DB%8C%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>در فصل قبل با \u003Ccode>transition\u003C\u002Fcode> یاد گرفتی چطور یک تغییر را نرم کنی — ولی \u003Ccode>transition\u003C\u002Fcode> همیشه یک محرک می‌خواهد: کاربر باید ماوس را ببرد رو، یا focus بدهد، تا چیزی حرکت کند. در این فصل حرکتی می‌سازی که \u003Cstrong>خودش\u003C\u002Fstrong> اجرا می‌شود، بی‌آنکه کسی دستش بزند، و می‌تواند بی‌نهایت تکرار شود. به این \u003Ccode>animation\u003C\u002Fcode> می‌گویند. آخر فصل یک نشانِ «پخش زنده» داری که نقطه‌اش مثل قلب می‌تپد — و مهم‌تر از خودِ حرکت، یاد می‌گیری چطور به کاربری که حرکت را دوست ندارد \u003Cstrong>احترام\u003C\u002Fstrong> بگذاری.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-keyframes-timeline.829cc6f507.160.webp 160w, \u002F_img\u002F01-image-keyframes-timeline.829cc6f507.320.webp 320w, \u002F_img\u002F01-image-keyframes-timeline.829cc6f507.640.webp 640w, \u002F_img\u002F01-image-keyframes-timeline.829cc6f507.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-keyframes-timeline.829cc6f507.1280.jpg\" srcset=\"\u002F_img\u002F01-image-keyframes-timeline.829cc6f507.160.jpg 160w, \u002F_img\u002F01-image-keyframes-timeline.829cc6f507.320.jpg 320w, \u002F_img\u002F01-image-keyframes-timeline.829cc6f507.640.jpg 640w, \u002F_img\u002F01-image-keyframes-timeline.829cc6f507.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"نواری از چند فریمِ پشت‌سرِ هم که یک دایرهٔ سبز در آن‌ها کوچک و بزرگ می‌شود؛ فریم اول و آخر کوچک، فریم وسط بزرگ، و مرورگر فاصلهٔ بینشان را پُر می‌کند\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>با \u003Ccode>@keyframes\u003C\u002Fcode> گام‌های یک حرکت را از اول تا آخر تعریف کنی\u003C\u002Fli>\n\u003Cli>با property \u003Ccode>animation\u003C\u002Fcode> آن حرکت را با اسم، مدت، ریتم و تعدادِ تکرار روشن کنی\u003C\u002Fli>\n\u003Cli>با \u003Ccode>prefers-reduced-motion\u003C\u002Fcode> حرکت را برای کسی که آن را خاموش کرده، خاموش کنی\u003C\u002Fli>\n\u003Cli>بگویی چرا یک حرکتِ بی‌پایانِ توجه‌گیر بدون این احترام، یک اشتباهِ دسترس‌پذیری است\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":21,"heading":25,"html":26},"قبل از شروع","\u003Ch2 id=\"قبل-از-شروع\">قبل از شروع\u003Ca class=\"head-anchor\" href=\"#%D9%82%D8%A8%D9%84-%D8%A7%D8%B2-%D8%B4%D8%B1%D9%88%D8%B9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>از فصل ۷:\u003C\u002Fstrong> \u003Ccode>transition\u003C\u002Fcode> و ریتم‌ها (\u003Ccode>ease\u003C\u002Fcode>, \u003Ccode>ease-in-out\u003C\u002Fcode>) — همان ریتم‌ها اینجا هم به‌کار می‌روند.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۶:\u003C\u002Fstrong> \u003Ccode>transform: scale()\u003C\u002Fcode> — گام‌های حرکتمان یک دایره را بزرگ و کوچک می‌کنند.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۴:\u003C\u002Fstrong> \u003Ccode>@media\u003C\u002Fcode> — \u003Ccode>prefers-reduced-motion\u003C\u002Fcode> هم یک ویژگیِ \u003Ccode>@media\u003C\u002Fcode> است، مثلِ \u003Ccode>prefers-color-scheme\u003C\u002Fcode>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","— یک نشانِ «پخش زنده» با یک نقطهٔ سبزِ ثابت می‌بینی. کارِ این فصل این است که خط‌به‌خط این نقطه را به تپش بیندازی و بعد یاد بگیری کجا و چطور جلوی این تپش را بگیری","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-5-interaction\u002Fsession-08-animation",{"kind":21,"heading":33,"html":34},"۱. animation چیست، و چرا با transition فرق دارد","\u003Ch2 id=\"۱-animation-چیست-و-چرا-با-transition-فرق-دارد\">۱. animation چیست، و چرا با transition فرق دارد\u003Ca class=\"head-anchor\" href=\"#%DB%B1-animation-%DA%86%DB%8C%D8%B3%D8%AA-%D9%88-%DA%86%D8%B1%D8%A7-%D8%A8%D8%A7-transition-%D9%81%D8%B1%D9%82-%D8%AF%D8%A7%D8%B1%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>transition\u003C\u002Fcode> یک پل بین \u003Cstrong>دو حالت\u003C\u002Fstrong> است: از رنگِ الان به رنگِ بعدِ hover. کاربر باید کاری کند تا این پل رد شود. ولی خیلی چیزها روی صفحه باید بی‌آنکه کسی دستشان بزند حرکت کنند: یک نشانِ «در حال بارگذاری»، یک نقطهٔ «پخش زنده»، یک فلش که آرام بالا و پایین می‌رود. برای این‌ها \u003Ccode>animation\u003C\u002Fcode> داریم.\u003C\u002Fp>\n\u003Cp>فرقِ کلیدی دو چیز است: \u003Ccode>animation\u003C\u002Fcode> \u003Cstrong>خودش شروع می‌شود\u003C\u002Fstrong> (محرک نمی‌خواهد)، و می‌تواند \u003Cstrong>تکرار شود\u003C\u002Fstrong> — حتی بی‌نهایت. \u003Ccode>transition\u003C\u002Fcode> فقط یک‌بار، از A به B. \u003Ccode>animation\u003C\u002Fcode> می‌تواند A → B → A → B تا ابد.\u003C\u002Fp>\n\u003Cp>ساختنِ یک animation دو قدم دارد که در دو بخشِ بعد یکی‌یکی می‌بینیم: اول \u003Cstrong>گام‌های حرکت\u003C\u002Fstrong> را با \u003Ccode>@keyframes\u003C\u002Fcode> تعریف می‌کنی، بعد آن گام‌ها را با property \u003Ccode>animation\u003C\u002Fcode> به یک عنصر \u003Cstrong>می‌چسبانی\u003C\u002Fstrong>.\u003C\u002Fp>\n",{"kind":21,"heading":36,"html":37},"۲. @keyframes: گام‌های حرکت را تعریف کن","\u003Ch2 id=\"۲-@keyframes-گام‌های-حرکت-را-تعریف-کن\">۲. \u003Ccode>@keyframes\u003C\u002Fcode>: گام‌های حرکت را تعریف کن\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%40keyframes-%DA%AF%D8%A7%D9%85%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%AD%D8%B1%DA%A9%D8%AA-%D8%B1%D8%A7-%D8%AA%D8%B9%D8%B1%DB%8C%D9%81-%DA%A9%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>@keyframes\u003C\u002Fcode> یعنی «فریم‌های کلیدی». تو فقط چند نقطهٔ مهمِ حرکت را می‌گویی — مثلاً «اولش این‌طور، وسطش آن‌طور، آخرش دوباره این‌طور» — و مرورگر خودش فاصلهٔ بینشان را نرم پُر می‌کند. هر گام را با یک درصد نشان می‌دهی: \u003Ccode>0%\u003C\u002Fcode> شروع، \u003Ccode>100%\u003C\u002Fcode> پایان، و هرچه بینشان بخواهی.\u003C\u002Fp>\n\u003Cp>بیا یک تپش بسازیم: نقطه از اندازهٔ عادی شروع می‌شود، وسطِ راه بزرگ می‌شود، و آخرش به اندازهٔ عادی برمی‌گردد. این \u003Ccode>@keyframes\u003C\u002Fcode> را به CSS اضافه کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>@keyframes heartbeat {\n  0% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.6);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>heartbeat\u003C\u002Fcode> اسمی است که خودت گذاشته‌ای؛ می‌توانست هرچیزِ دیگری باشد. سه گام گفتیم: اولش اندازهٔ \u003Ccode>۱\u003C\u002Fcode> برابر، وسطش \u003Ccode>۱٫۶\u003C\u002Fcode> برابر، آخرش دوباره \u003Ccode>۱\u003C\u002Fcode>. دقت کن که \u003Ccode>0%\u003C\u002Fcode> و \u003Ccode>100%\u003C\u002Fcode> یکی‌اند — همین باعث می‌شود وقتی تکرار شود، حرکت بی‌پرش و روان به اول برگردد.\u003C\u002Fp>\n\u003Cp>ولی هنوز هیچ اتفاقی نمی‌افتد. \u003Ccode>@keyframes\u003C\u002Fcode> فقط \u003Cstrong>دستور‌العملِ\u003C\u002Fstrong> حرکت است، مثلِ یک دفترچهٔ آشپزی که هنوز کسی آشپزی نکرده. باید به یک عنصر بگویی «این دستورالعمل را اجرا کن».\u003C\u002Fp>\n",{"kind":21,"heading":39,"html":40},"۳. property animation: حرکت را روشن کن","\u003Ch2 id=\"۳-property-animation-حرکت-را-روشن-کن\">۳. property \u003Ccode>animation\u003C\u002Fcode>: حرکت را روشن کن\u003Ca class=\"head-anchor\" href=\"#%DB%B3-property-animation-%D8%AD%D8%B1%DA%A9%D8%AA-%D8%B1%D8%A7-%D8%B1%D9%88%D8%B4%D9%86-%DA%A9%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>حالا با property \u003Ccode>animation\u003C\u002Fcode> گام‌ها را به نقطه می‌چسبانیم. این property چهار چیزِ اصلی را یک‌جا می‌گیرد:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>اسم\u003C\u002Fstrong> — کدام \u003Ccode>@keyframes\u003C\u002Fcode>؟ (\u003Ccode>heartbeat\u003C\u002Fcode>)\u003C\u002Fli>\n\u003Cli>\u003Cstrong>مدت\u003C\u002Fstrong> — هر دورِ کامل چند طول بکشد؟ (\u003Ccode>1.5s\u003C\u002Fcode>)\u003C\u002Fli>\n\u003Cli>\u003Cstrong>ریتم\u003C\u002Fstrong> — همان timing function فصل ۷ (\u003Ccode>ease-in-out\u003C\u002Fcode>)\u003C\u002Fli>\n\u003Cli>\u003Cstrong>تعدادِ تکرار\u003C\u002Fstrong> — چند بار؟ عددی مثل \u003Ccode>3\u003C\u002Fcode>، یا \u003Ccode>infinite\u003C\u002Fcode> برای بی‌نهایت\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>فعلاً این خط را مستقیم به \u003Ccode>.live__dot\u003C\u002Fcode> اضافه کن و ببین چه می‌شود:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.live__dot {\n  animation: heartbeat 1.5s ease-in-out infinite;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> نقطهٔ سبز حالا خودش، بی‌آنکه دستش بزنی، آرام می‌تپد و تا ابد ادامه می‌دهد. هیچ hover ای در کار نیست — به‌محضِ باز شدنِ صفحه شروع شد. حالا مقدارِ \u003Ccode>1.5s\u003C\u002Fcode> را به \u003Ccode>0.4s\u003C\u002Fcode> عوض کن: تپش تندتر و عصبی‌تر می‌شود. برگردانش به \u003Ccode>1.5s\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> ترتیبِ این چهار مقدار سخت‌گیر نیست جز یک جا: اگر \u003Cstrong>دو\u003C\u002Fstrong> مقدارِ زمانی بنویسی، مرورگر اولی را «مدت» و دومی را «تأخیرِ شروع» می‌فهمد. این تنها جای دردسرِ ترتیب است — و در بخش AI دقیقاً همین‌جا AI را سرِ کار می‌بینیم.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":42,"html":43},"۴. prefers-reduced-motion: احترام به کاربر","\u003Ch2 id=\"۴-prefers-reduced-motion-احترام-به-کاربر\">۴. \u003Ccode>prefers-reduced-motion\u003C\u002Fcode>: احترام به کاربر\u003Ca class=\"head-anchor\" href=\"#%DB%B4-prefers-reduced-motion-%D8%A7%D8%AD%D8%AA%D8%B1%D8%A7%D9%85-%D8%A8%D9%87-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>الان یک مشکلِ جدی داریم که روی صفحهٔ خودت دیده نمی‌شود، ولی واقعی است. بعضی آدم‌ها با حرکتِ روی صفحه اذیت می‌شوند — سرگیجه، حالِ تهوع، حواس‌پرتی. برای همین در تنظیماتِ سیستم گزینه‌ای هست به‌نامِ «کاهش حرکت» (Reduce motion). وقتی کسی آن را روشن می‌کند، دارد به هر سایتی می‌گوید «لطفاً حرکتِ اضافه را برایم خاموش کن».\u003C\u002Fp>\n\u003Cp>نقطهٔ ما این خواسته را نادیده می‌گیرد: هرکس هم که «کاهش حرکت» را روشن کرده باشد، باز این نقطه جلوِ چشمش تا ابد می‌تپد. بیا این را ببینیم. در DevTools مرورگر، بخشِ Rendering، گزینهٔ \u003Ccode>Emulate CSS prefers-reduced-motion\u003C\u002Fcode> را روی \u003Ccode>reduce\u003C\u002Fcode> بگذار (یا در تنظیماتِ سیستمت «کاهش حرکت» را روشن کن).\u003C\u002Fp>\n\u003Cp>نگاه کن: \u003Cstrong>نقطه هنوز می‌تپد.\u003C\u002Fstrong> ما به مرورگر گفته‌ایم کاربر حرکت نمی‌خواهد، ولی animation ما بی‌خیالِ این خواسته کارش را می‌کند.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> حرکت را مستقیم روی \u003Ccode>.live__dot\u003C\u002Fcode> گذاشتی، پس همیشه — حتی وقتی کاربر خاموشش خواسته — اجرا می‌شود. راهِ درست این است که animation را \u003Cstrong>فقط وقتی\u003C\u002Fstrong> بدهی که کاربر حرکت را رد نکرده باشد. برای این کار خطِ animation را از \u003Ccode>.live__dot\u003C\u002Fcode> بردار و داخلِ یک \u003Ccode>@media (prefers-reduced-motion: no-preference)\u003C\u002Fcode> بگذار — یعنی «فقط اگر کاربر ترجیحی برای کم‌کردنِ حرکت \u003Cstrong>نداده\u003C\u002Fstrong>، این حرکت را اجرا کن»:\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>@media (prefers-reduced-motion: no-preference) {\n  .live__dot {\n    animation: heartbeat 1.5s ease-in-out infinite;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا دوباره در DevTools بینِ \u003Ccode>reduce\u003C\u002Fcode> و \u003Ccode>no-preference\u003C\u002Fcode> جابه‌جا شو. با \u003Ccode>no-preference\u003C\u002Fcode> نقطه می‌تپد؛ با \u003Ccode>reduce\u003C\u002Fcode> نقطه کاملاً آرام و بی‌حرکت می‌ماند و نشان هنوز کارش را می‌کند — کاربر می‌بیند «پخش زنده» است، فقط بی‌تپش. این همان احترام است: حرکت یک \u003Cstrong>تزئین\u003C\u002Fstrong> است، نه اطلاعاتِ لازم، پس وقتی کاربر نخواستش، برش می‌داری بی‌آنکه چیزی از دست برود.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> چرا \u003Ccode>no-preference\u003C\u002Fcode> و نه اینکه حرکت را همیشه بدهیم و فقط داخلِ \u003Ccode>reduce\u003C\u002Fcode> خاموشش کنیم؟ چون این‌طور پیش‌فرضت «آرام» است و حرکت را فقط جایی که مطمئنی کاربر مانعی ندارد روشن می‌کنی. امن‌ترین حالت این است که سکوت پیش‌فرض باشد، نه سروصدا.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":45,"html":46},"۵. کد کاملِ این فصل","\u003Ch2 id=\"۵-کد-کاملِ-این-فصل\">۵. کد کاملِ این فصل\u003Ca class=\"head-anchor\" href=\"#%DB%B5-%DA%A9%D8%AF-%DA%A9%D8%A7%D9%85%D9%84%D9%90-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>اول \u003Ccode>index.html\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><!-- index.html -->\n<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1">\n    <title>animation<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <article class="card">\n      <p class="live">\n        <span class="live__dot"><\u002Fspan>\n        در حال پخش\n      <\u002Fp>\n      <h1>ویدیوی زنده<\u002Fh1>\n      <p class="desc">این نقطهٔ سبز خودش می‌تپد تا بگوید پخش زنده است.<\u002Fp>\n    <\u002Farticle>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و \u003Ccode>styles.css\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\n* {\n  box-sizing: border-box;\n}\n\n:root {\n  --bg: #f6edda;\n  --card: #ffffff;\n  --ink: #2c2114;\n  --muted: #6b6150;\n  --live: #55731b;\n  --line: #d8ccae;\n}\n\nbody {\n  margin: 0;\n  font-family: Tahoma, sans-serif;\n  background-color: var(--bg);\n  color: var(--ink);\n  padding: 40px;\n  line-height: 1.9;\n}\n\n.card {\n  max-width: 340px;\n  margin-inline: auto;\n  padding: 24px;\n  background-color: var(--card);\n  border: 1px solid var(--line);\n  border-radius: 16px;\n}\n\n.live {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0;\n  color: var(--live);\n  font-weight: 700;\n}\n\n.live__dot {\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background-color: var(--live);\n}\n\n.card h1 {\n  margin-block: 14px 6px;\n  font-size: 1.4rem;\n}\n\n.desc {\n  margin: 0;\n  color: var(--muted);\n}\n\n\u002F* @keyframes -> gam-haye harekat ra tarif mikonad *\u002F\n@keyframes heartbeat {\n  0% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.6);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n\u002F* faghat vaghti karbar harekat ra rad nakarde bashad *\u002F\n@media (prefers-reduced-motion: no-preference) {\n  .live__dot {\n    animation: heartbeat 1.5s ease-in-out infinite;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-reduced-motion.98c4945fca.160.webp 160w, \u002F_img\u002F02-image-reduced-motion.98c4945fca.320.webp 320w, \u002F_img\u002F02-image-reduced-motion.98c4945fca.640.webp 640w, \u002F_img\u002F02-image-reduced-motion.98c4945fca.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-reduced-motion.98c4945fca.1280.jpg\" srcset=\"\u002F_img\u002F02-image-reduced-motion.98c4945fca.160.jpg 160w, \u002F_img\u002F02-image-reduced-motion.98c4945fca.320.jpg 320w, \u002F_img\u002F02-image-reduced-motion.98c4945fca.640.jpg 640w, \u002F_img\u002F02-image-reduced-motion.98c4945fca.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"دو حالت کنارِ هم: سمتِ راست یک نقطهٔ سبز با چند کمانِ حرکت دورش که تپش را نشان می‌دهد، سمتِ چپ همان نقطه بی‌هیچ کمان و آرام؛ بالای هر دو یک کلیدِ سیستم که یکی حرکت را اجازه می‌دهد و دیگری کم می‌کند\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n",{"kind":21,"heading":48,"html":49},"۶. همیار AI: کمکِ درست، اشتباهِ رایج","\u003Ch2 id=\"۶-همیار-ai-کمکِ-درست-اشتباهِ-رایج\">۶. همیار AI: کمکِ درست، اشتباهِ رایج\u003Ca class=\"head-anchor\" href=\"#%DB%B6-%D9%87%D9%85%DB%8C%D8%A7%D8%B1-ai-%DA%A9%D9%85%DA%A9%D9%90-%D8%AF%D8%B1%D8%B3%D8%AA-%D8%A7%D8%B4%D8%AA%D8%A8%D8%A7%D9%87%D9%90-%D8%B1%D8%A7%DB%8C%D8%AC\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>animation یکی از همان جاهایی است که AI هم بیشترین کمک را می‌کند و هم راحت اشتباه می‌گوید — چون کدش «درست به‌نظر می‌رسد» ولی رفتارش را فقط با دیدن در مرورگر می‌فهمی. سه قانونِ ثابتِ کار با AI در کلِ این خودآموز اینهاست:\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> سه قانون را عیناً به خاطر بسپار: \u003Cstrong>«اول خودت، بعد AI»\u003C\u002Fstrong> — اول با معیارهای خودت تصمیم بگیر، بعد نظر AI را به‌عنوان نظرِ دوم بشنو، نه جوابِ نهایی. \u003Cstrong>«خط به خط»\u003C\u002Fstrong> — هر چیزی که AI می‌دهد را خط‌به‌خط بخوان و بفهم، هیچ‌وقت یک‌جا کپی نکن. \u003Cstrong>«AI هم اشتباه می‌کند»\u003C\u002Fstrong> — و همین الان یک نمونه‌اش را با هم می‌بینیم.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cstrong>کاربردِ خوب.\u003C\u002Fstrong> بهترین استفادهٔ AI در این فصل یک بازبینیِ دسترس‌پذیری است — دقیقاً همان چیزی که تازه یاد گرفتی:\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> بعد از اینکه خودت animation را نوشتی، CSS ات را به دستیار AI ات بده و بپرس: «آیا این حرکت به \u003Ccode>prefers-reduced-motion\u003C\u002Fcode> احترام می‌گذارد؟ اگر نه، چطور درستش کنم؟». این یک جفت‌چشمِ دومِ عالی است. ولی جوابش را همان‌جا در آزمایشگاه با \u003Ccode>Emulate prefers-reduced-motion\u003C\u002Fcode> \u003Cstrong>خودت\u003C\u002Fstrong> بسنج — ببین واقعاً با \u003Ccode>reduce\u003C\u002Fcode> حرکت می‌ایستد یا نه.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cstrong>کاربردِ اشتباه.\u003C\u002Fstrong> حالا نمونه‌ای که AI با اعتمادبه‌نفسِ کامل غلط می‌گوید. فرض کن می‌خواهی تپش را با یک ثانیه تأخیر شروع کنی و از AI می‌پرسی. خیلی وقت‌ها چیزی شبیه این می‌دهد و مطمئن توضیحش می‌دهد: «این یعنی ۱ ثانیه صبر کن، بعد یک تپشِ ۲ ثانیه‌ای»:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.live__dot {\n  animation: heartbeat 1s 2s infinite;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>جمله‌اش منطقی به‌نظر می‌رسد، ولی برعکسِ چیزی است که ادعا می‌کند. در آزمایشگاه امتحانش کن: تپش \u003Cstrong>تند\u003C\u002Fstrong> است و \u003Cstrong>دو\u003C\u002Fstrong> ثانیه هم اولش صبر می‌کند. چرا؟ با نکتهٔ بخش ۳ می‌توانی ردش کنی: وقتی دو مقدارِ زمانی بنویسی، \u003Cstrong>اولی مدت است و دومی تأخیر\u003C\u002Fstrong>. پس \u003Ccode>1s 2s\u003C\u002Fcode> یعنی مدت \u003Ccode>۱\u003C\u002Fcode> ثانیه و تأخیر \u003Ccode>۲\u003C\u002Fcode> ثانیه — دقیقاً برعکسِ چیزی که AI گفت.\u003C\u002Fp>\n\u003Cp>درستش این است که ترتیب را بچرخانی — \u003Ccode>heartbeat 2s 1s infinite\u003C\u002Fcode> (مدت \u003Ccode>۲\u003C\u002Fcode> ثانیه، تأخیر \u003Ccode>۱\u003C\u002Fcode> ثانیه) — یا برای اینکه اصلاً جای شک نماند، به‌جای shorthand از نامِ کاملشان استفاده کنی: \u003Ccode>animation-duration: 2s;\u003C\u002Fcode> و \u003Ccode>animation-delay: 1s;\u003C\u002Fcode>. این بهترین درسِ «AI هم اشتباه می‌کند» است: AI جمله‌ای ساخت که قاطع و درست به‌نظر می‌رسید، و تنها چیزی که لوش داد، دیدنِ رفتارِ واقعی در مرورگر بود. اول خودت، بعد AI.\u003C\u002Fp>\n",{"kind":21,"heading":51,"html":52},"واژه‌های تازهٔ این فصل","\u003Ch2 id=\"واژه‌های-تازهٔ-این-فصل\">واژه‌های تازهٔ این فصل\u003Ca class=\"head-anchor\" href=\"#%D9%88%D8%A7%DA%98%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%AA%D8%A7%D8%B2%D9%87%D9%94-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>کلمه\u003C\u002Fth>\n\u003Cth>تلفظ به حروف فارسی\u003C\u002Fth>\n\u003Cth>یعنی چه\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>animation\u003C\u002Ftd>\n\u003Ctd>اَنیمِیشِن\u003C\u002Ftd>\n\u003Ctd>حرکتی که خودش اجرا می‌شود و می‌تواند تکرار شود، بی‌آنکه محرکی بخواهد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>@keyframes\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>کی‌فریمز\u003C\u002Ftd>\n\u003Ctd>دستورالعملِ حرکت؛ گام‌های کلیدی از \u003Ccode>0%\u003C\u002Fcode> تا \u003Ccode>100%\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>iteration\u003C\u002Ftd>\n\u003Ctd>ایتِریشِن\u003C\u002Ftd>\n\u003Ctd>تعدادِ تکرارِ یک animation؛ \u003Ccode>infinite\u003C\u002Fcode> یعنی بی‌نهایت\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>prefers-reduced-motion\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>پریفِرز ریدیوسد موشِن\u003C\u002Ftd>\n\u003Ctd>ویژگیِ \u003Ccode>@media\u003C\u002Fcode> که می‌گوید کاربر حرکت را کم خواسته یا مانعی ندارد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":54,"heading":55,"html":56},"checkpoint","تمرین‌ها","\u003Ch2 id=\"تمرین‌ها\">تمرین‌ها\u003Ca class=\"head-anchor\" href=\"#%D8%AA%D9%85%D8%B1%DB%8C%D9%86%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: فرقِ اصلیِ \u003Ccode>animation\u003C\u002Fcode> با \u003Ccode>transition\u003C\u002Fcode> در دو کلمه چیست؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> یک \u003Ccode>@keyframes\u003C\u002Fcode> تازه به‌نامِ \u003Ccode>float-up\u003C\u002Fcode> بساز که یک عنصر را از \u003Ccode>translateY(0)\u003C\u002Fcode> به \u003Ccode>translateY(-8px)\u003C\u002Fcode> و دوباره به \u003Ccode>0\u003C\u002Fcode> ببرد (یک شناور شدنِ آرام). آن را به یک فلش یا دکمه بده، \u003Ccode>infinite\u003C\u002Fcode> و با یک مدتِ دلخواه — و \u003Cstrong>حتماً\u003C\u002Fstrong> داخلِ \u003Ccode>@media (prefers-reduced-motion: no-preference)\u003C\u002Fcode>. با \u003Ccode>Emulate\u003C\u002Fcode> هر دو حالت را چک کن.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> تپش را طوری تغییر بده که فقط \u003Cstrong>سه بار\u003C\u002Fstrong> اجرا شود و بایستد (به‌جای \u003Ccode>infinite\u003C\u002Fcode> عددِ \u003Ccode>3\u003C\u002Fcode> بگذار). حالا از AI بپرس «چطور کاری کنم بعد از این سه تپش، نقطه در حالتِ بزرگ بماند نه اندازهٔ عادی؟» — جوابش احتمالاً \u003Ccode>animation-fill-mode\u003C\u002Fcode> را می‌آورد؛ در آزمایشگاه امتحانش کن و ببین ادعایش درست است یا نه.\u003C\u002Fp>\n",{"kind":21,"heading":58,"html":59},"در فصل بعد","\u003Ch2 id=\"در-فصل-بعد\">در فصل بعد\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D9%81%D8%B5%D9%84-%D8%A8%D8%B9%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>الان می‌توانی حرکت بسازی و بااحترام به‌کارش ببری. تا اینجا هرچه ساختیم یک‌طرفه بود: صفحه واکنش نشان می‌داد ولی حالتش را نگه نمی‌داشت. فصل بعد یک selectorِ تازه و شگفت‌انگیز را می‌بینیم: \u003Ccode>:has()\u003C\u002Fcode>. با آن یک عنصر می‌تواند بر اساسِ \u003Cstrong>فرزندش\u003C\u002Fstrong> استایل بگیرد — و همین در را به تعاملِ واقعی، بدونِ یک خط JavaScript، باز می‌کند: کارتی که با تیک‌خوردنِ checkbox داخلش خودش عوض می‌شود.\u003C\u002Fp>\n",{"course":61,"entitled":69,"lessons":70,"payments_enabled":69,"terms":255,"live":5},{"active_window":62,"effective_price_toman":63,"free":5,"lesson_count":64,"price_toman":65,"slug":66,"summary_fa":67,"title_fa":68},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[71,75,79,83,87,90,94,97,100,103,107,110,113,116,119,122,125,128,131,134,137,141,144,147,150,153,156,159,162,165,168,171,174,177,180,183,186,189,192,195,198,201,204,207,210,213,216,217,218,219,222,225,228,231,234,237,240,243,246,249,252],{"free_preview":5,"order":72,"slug":73,"source":8,"term":72,"title_fa":74},1,"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":76,"slug":77,"source":8,"term":72,"title_fa":78},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":80,"slug":81,"source":8,"term":72,"title_fa":82},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":84,"slug":85,"source":8,"term":72,"title_fa":86},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":9,"slug":88,"source":8,"term":72,"title_fa":89},"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":91,"slug":92,"source":8,"term":72,"title_fa":93},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":12,"slug":95,"source":8,"term":72,"title_fa":96},"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":6,"slug":98,"source":8,"term":72,"title_fa":99},"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":16,"slug":101,"source":8,"term":72,"title_fa":102},"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":104,"slug":105,"source":8,"term":72,"title_fa":106},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":72,"slug":108,"source":8,"term":76,"title_fa":109},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":76,"slug":111,"source":8,"term":76,"title_fa":112},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":80,"slug":114,"source":8,"term":76,"title_fa":115},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":84,"slug":117,"source":8,"term":76,"title_fa":118},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":9,"slug":120,"source":8,"term":76,"title_fa":121},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":91,"slug":123,"source":8,"term":76,"title_fa":124},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":12,"slug":126,"source":8,"term":76,"title_fa":127},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":6,"slug":129,"source":8,"term":76,"title_fa":130},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":16,"slug":132,"source":8,"term":76,"title_fa":133},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":104,"slug":135,"source":8,"term":76,"title_fa":136},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":138,"slug":139,"source":8,"term":76,"title_fa":140},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":72,"slug":142,"source":8,"term":80,"title_fa":143},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":76,"slug":145,"source":8,"term":80,"title_fa":146},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":80,"slug":148,"source":8,"term":80,"title_fa":149},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":84,"slug":151,"source":8,"term":80,"title_fa":152},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":9,"slug":154,"source":8,"term":80,"title_fa":155},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":91,"slug":157,"source":8,"term":80,"title_fa":158},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":12,"slug":160,"source":8,"term":80,"title_fa":161},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":6,"slug":163,"source":8,"term":80,"title_fa":164},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":16,"slug":166,"source":8,"term":80,"title_fa":167},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":104,"slug":169,"source":8,"term":80,"title_fa":170},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":138,"slug":172,"source":8,"term":80,"title_fa":173},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":72,"slug":175,"source":8,"term":84,"title_fa":176},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":76,"slug":178,"source":8,"term":84,"title_fa":179},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":80,"slug":181,"source":8,"term":84,"title_fa":182},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":84,"slug":184,"source":8,"term":84,"title_fa":185},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":9,"slug":187,"source":8,"term":84,"title_fa":188},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":91,"slug":190,"source":8,"term":84,"title_fa":191},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":12,"slug":193,"source":8,"term":84,"title_fa":194},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":6,"slug":196,"source":8,"term":84,"title_fa":197},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":72,"slug":199,"source":8,"term":9,"title_fa":200},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":76,"slug":202,"source":8,"term":9,"title_fa":203},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":80,"slug":205,"source":8,"term":9,"title_fa":206},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":84,"slug":208,"source":8,"term":9,"title_fa":209},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":9,"slug":211,"source":8,"term":9,"title_fa":212},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":91,"slug":214,"source":8,"term":9,"title_fa":215},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},{"free_preview":5,"order":104,"slug":220,"source":8,"term":9,"title_fa":221},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":72,"slug":223,"source":8,"term":91,"title_fa":224},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":76,"slug":226,"source":8,"term":91,"title_fa":227},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":80,"slug":229,"source":8,"term":91,"title_fa":230},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":84,"slug":232,"source":8,"term":91,"title_fa":233},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":9,"slug":235,"source":8,"term":91,"title_fa":236},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":91,"slug":238,"source":8,"term":91,"title_fa":239},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":12,"slug":241,"source":8,"term":91,"title_fa":242},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":6,"slug":244,"source":8,"term":91,"title_fa":245},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":16,"slug":247,"source":8,"term":91,"title_fa":248},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":104,"slug":250,"source":8,"term":91,"title_fa":251},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":138,"slug":253,"source":8,"term":91,"title_fa":254},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105685]