خلاصه سریع
وب به سرعت در حال تکامل است. توسعه وب Front-end عمدتاً تحت تأثیر تغییرات اخیر در تکنیک ها و رویکردهای کدنویسی قرار گرفته است. در سال 2003، یک توسعه‌دهنده وب مقدماتی با صلاحیت، HTML و CSS را احتمالاً با کمی جاوا اسکریپت کپی و پیست می‌شناخت و وب‌سایت‌هایی را ساخت که روی رایانه‌های رومیزی مشاهده می‌شد.
در سال 2013 اینطور نیست! اکنون، یک توسعه‌دهنده وب حرفه‌ای با صلاحیت در HTML و CSS، جاوا اسکریپت و جی کوئری، پیش‌پردازنده‌های CSS، تکنیک‌های جدیدی مانند طراحی واکنش‌گرا و ابتدا در موبایل، و دنیایی از دستگاه‌های جدید برای مشاهده وب‌سایت‌ها به خوبی آشناست.
- چالش ها و پاداش های آموزش طراحی وب
- اشتباهاتی که توسعه دهندگان هنگام یادگیری طراحی مرتکب می شوند
- درس های آموخته شده از پیشروان حرفه ای جدید وب
- شور و اشتیاق خود را برای طراحی وب زنده کنید
درست همانطور که شغل یک توسعه دهنده وب front-end تغییر کرده است، کلاس های مقدماتی طراحی وب نیز باید در سراسر آموزش عالی ارائه شود. چگونه باید به دانش‌آموزانی که چیزی در مورد HTML یا CSS نمی‌دانند آموزش داد تا به طراحی و ساخت وب‌سایت‌ها به شیوه‌ای مستقل از دستگاه و با استفاده از تکنیک‌های مدرن مانند طراحی واکنش‌گرا و ابتدا در موبایل فکر کنند؟
برای در نظر گرفتن تکنیک های طراحی مدرن، به چند اصلاح نیاز است:
- استانداردسازی در یک مرورگر.. کار با فایرفاکس یا کروم را به عنوان مرورگر استاندارد در کلاس توصیه می کنم، زیرا این مرورگرها در Mac و PC در دسترس هستند و مطابق با استانداردها هستند. به دانش آموزان بگویید که این تنها مرورگری است که برای هدف این کلاس مهم است. به محض اینکه دانش آموزان بفهمند که چگونه HTML و CSS به طور کامل در این مرورگر کار می کنند، باید بعداً به مشکلات بین مرورگرها رسیدگی شود. وقتی مشکلات مرورگرهای متقابل خیلی زود معرفی می‌شوند، دانش‌آموزان گیج می‌شوند و مشخص نیست که آیا مشکل خاصی به دلیل مرورگر است یا فقط کد بد شکل‌گرفته است.
- آموزش HTML5.. دانش آموزان باید یاد بگیرند که چگونه اسناد را با بخش ها، کناره ها، ناوبری، سرصفحه ها و پاورقی ها از ابتدا علامت گذاری کنند.
- CSS3 و انواع انتخابگرها را آموزش دهید. مطمئن شوید که دانش‌آموزان به محض اینکه بتوانند سؤالات رسانه را درک کنند. انتخابگرهای خواهر و برادر مجاور، انتخابگرهای فرزند، انتخابگرهای جهانی، شبه کلاس‌های مختلف و غیره را معرفی کنید. باز هم، کمتر نگران پشتیبانی مرورگر باشید، زیرا این دانش آموزان سال ها قبل از فارغ التحصیلی فرصت دارند.
- تفکر مبتنی بر شبکه را در اوایل ترکیب کنید. حتی اگر دانش‌آموزان هنوز نتوانند شبکه خود را کدنویسی کنند، مطمئناً می‌توانند طرح‌بندی‌هایی بسازند در حالی که به ۱۲ ستون فکر می‌کنند، با استفاده از em و/یا درصد عرض و اندازه. از دانش‌آموزان بخواهید که اشکال استاندارد صفحات، مانند طرح‌بندی‌های دو و سه ستونی، با یا بدون سرصفحه، پاورقی و پیمایش افقی را کدنویسی کنند، نه اینکه دانش‌آموزان را برای کدنویسی هر نوع طرح‌بندی باز بگذارید. درک مبادلات بین طراحی و کد مهم است، بنابراین همیشه به آنها توجه کنید.
- به محض اینکه دانش آموزان شناورها و موقعیت یابی را درک کردند، نحوه کدنویسی یک شبکه را آموزش دهید. از آنجایی که دانش آموزان به طراحی وب با اصول شبکه ای فکر کرده اند، این انتقال باید برای آنها نسبتاً سریع باشد.
- طراحی پاسخگو اکنون یک سخنرانی کوتاه است، نه طولانی. دانش آموزان اکنون می توانند طرح بندی های شبکه ای و پرسش های رسانه ای را جمع آوری کنند. آنها احتمالاً در طول مسیر با مشکلات تغییر اندازه تصویر مواجه شده اند، اما اگر نه، اکنون زمان بحث در مورد آنها است.
- اکنون زمان بحث در مورد سازگاری مرورگر است. اکنون که دانش‌آموزان بر کدهای پاسخگو و معتبر و سازگار با استانداردها تسلط پیدا کرده‌اند، زمان آن رسیده است که به سازگاری مرورگر فکر کنیم. یکی از راه‌های معرفی این کار، کار با برچسب‌های HTML5 یا عناصر CSS3 با پشتیبانی ضعیف مانند گوشه‌های گرد است.
- پیش پردازش CSS یک موضوع داغ است. متمرکز کردن متغیرهای CSS یک ایده عالی است و مطمئناً یک مهارت اصلی CSS است که توسط کارفرمایان در یکی دو سال آینده مورد نیاز است. (بعضی می گویند که قبلاً اینجاست.) برخی از مفاهیم LESS و Sass، مانند متغیرهای متمرکز و منطق، انتقال آرامی را به دوره ای در جاوا اسکریپت و جی کوئری ارائه می دهند که در آن مفاهیم مشابه مهم هستند.
- پوشش چارچوب‌های طراحی واکنش‌گرا ایده بدی نیست. اگر زمان در کلاس باقی مانده است، این موضوع عالی برای بررسی است. توصیه می‌کنم اگر کمتر آموزش داده‌اید، Bootstrap یا اگر Sass را آموزش داده‌اید، Foundation را پوشش دهید. دانش آموزان یاد خواهند گرفت که چگونه کد شخص دیگری را بخوانند (مهارت مهم!) و چگونه اسناد را بخوانند. آنها همچنین فن آوری جدید را یاد خواهند گرفت و همچنین نکات مثبت و منفی استفاده از یک چارچوب مستند و منبع باز را کشف خواهند کرد. در نهایت، آنها یاد خواهند گرفت که این کد را برای هدف خود سفارشی کنند.