09982292579
info@mehraeen.ac.ir
فارسی پرچم
فارسی
یک زبان را انتخاب کنید
فارسی پرچم
فارسی
0
دسته ها
خانه تقویم‌آموزشی مدرس وبلاگ چارت‌‌دروس تماس‌با‌ما درباره‌ما انجمن‌ها
زبان تخصصی کامپیوتر

جلسه 23 Web design

خلاصه‌ی نکات کلیدی (برای انتقال سریع مفاهیم) جداسازی وظایف (Separation of Concerns): همواره باید ساختار (HTML)، ظاهر (CSS) و رفتار (JS) را از هم جدا نگه داشت. استانداردسازی و معناگرایی: استفاده از تگ‌های معنایی (مانند <article> یا <nav> به جای <div>) برای بهبود سئو و دسترسی‌پذیری (Accessibility). طراحی برای همه (Responsive Design): وب‌سایت باید در هر ابعادی از صفحه نمایش به درستی عمل کند (Mobile-first approach). بهینه‌سازی عملکرد: کاهش حجم فایل‌ها و مدیریت درخواست‌های شبکه برای افزایش سرعت بارگذاری. امنیت در سمت کاربر: آگاهی از حملات رایج مثل XSS (Cross-Site Scripting) و نحوه جلوگیری از آن‌ها.

 تیتر سرفصل‌های اصلی (نقشه راه درس)


  • مبانی اینترنت و معماری وب: نحوه کارکرد پروتکل‌ها (HTTP/HTTPS)، کلاینت و سرور، DNS.

  • ساختار و محتوا (HTML5): نشانه‌گذاری معنایی (Semantic HTML)، ساختار DOM.

  • شیوه‌نامه و ارائه (CSS3): مدل جعبه‌ای (Box Model)، چیدمان (Flexbox & Grid)، طراحی واکنش‌گرا (Responsive Design).

  • برنامه‌نویسی سمت کاربر (JavaScript): مفاهیم پایه، تعامل با DOM، کار با APIها و Fetch.

  • ابزارهای توسعه و گردش کار: کنترل نسخه (Git)، ابزارهای توسعه‌دهنده مرورگر (DevTools).


۲. خلاصه‌ی نکات کلیدی (برای انتقال سریع مفاهیم)


  • جداسازی وظایف (Separation of Concerns): همواره باید ساختار (HTML)، ظاهر (CSS) و رفتار (JS) را از هم جدا نگه داشت.

  • استانداردسازی و معناگرایی: استفاده از تگ‌های معنایی (مانند <article> یا <nav> به جای <div>) برای بهبود سئو و دسترسی‌پذیری (Accessibility).

  • طراحی برای همه (Responsive Design): وب‌سایت باید در هر ابعادی از صفحه نمایش به درستی عمل کند (Mobile-first approach).

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

  • امنیت در سمت کاربر: آگاهی از حملات رایج مثل XSS (Cross-Site Scripting) و نحوه جلوگیری از آن‌ها.


۳. تمرین‌های پایان فصل (برای سنجش یادگیری)









  • فصل ساختار (HTML): طراحی یک صفحه رزومه شخصی با رعایت کامل تگ‌های معنایی و ساختار درختی صحیح.

  • فصل ظاهر (CSS): بازسازی یک صفحه از یک وب‌سایت معروف تنها با استفاده از Flexbox و Grid (بدون استفاده از فریم‌ورک‌های آماده مثل Bootstrap).

  • فصل تعامل (JS): پیاده‌سازی یک «لیست کارها» (To-Do List) که داده‌ها را در localStorage مرورگر ذخیره کند.

  • پروژه جامع: طراحی و پیاده‌سازی یک وب‌سایت تک‌صفحه‌ای (Landing Page) که در موبایل، تبلت و دسکتاپ به صورت کاملاً واکنش‌گرا نمایش داده شود.
درس متنی 23/33
در حال مشاهده
جلسه 23 Web design