در این مقاله قصد داریم به پنج مورد از دلایلی که شما را هنوز هم به آموختن HTML و CSS ترغیب می‌کند اشاره کنیم، پس با ما همراه باشید.

بسیاری از شرکت‌ها برای استخدام طراحان Full Stack آگهی می‌دهند. طراحان Full Stack به افرادی گفته می‌شود که قادرند علاوه بر طراحی ‌های UI و UX، کدنویسی هم بکنند. در حقیقت، طراحان Full Stack این قابلیت را دارند که پروژه را از مراحل ابتدایی شروع کرده و به اتمام برسانند ضمن اینکه در طراحی ‌های خود، تمام محدودیت‌ها و قابلیت‌های برنامه نویسی و توسعه پروژه را نیز در نظر می‌گیرند. احتمالا شما هم تاکنون یکی از مقالات بسیاری را که درباره “لزوم یادگیری کدنویسی توسط طراحان”، منتشر شده است خوانده اید.

 اما با این حال، بهتر است قبل از آنکه وقت و سرمایه خود را صرف رفتن به کلاس‌های آموزشی کتابخانه React و سایر نسخه‌های تکامل یافته جاوااسکریپت کنید، به خواندن این مقاله ادامه دهید. چون تجربه ثابت کرده که تنها دانستن HTML و CSS می تواند شما را چند قدم جلوتر از رقبای طراحتان قرار دهد و هر آنچه را که به عنوان یک طراح نیاز دارید در اختیارتان بگذارد.

 HTML و CSS ابزارهای طراحی هستند.

HTML و CSS در دسته زبان‌های برنامه نویسی قرار نمی‌گیرند. چرا که این زبان‌ها برخلاف زبان‌های برنامه نویسی، کامپایلری نبوده و مفسری هستند. به این معنا که در زمان بروز خطا در کدنویسی، مرورگر تنها آن خطا را رد کرده و نادیده می گیرد و در عین حال بقیه قسمت‌ها را اجرا می‌کند. حال آنکه در زبان‌های کامپایلری چنین نیست و بروز خطا در قسمتی از برنامه، مانع اجرای باقی بخش‌های آن می‌شود. در این دو زبان تحت وب، شما هیچ عبارت if-then ی را مشاهده نمی‌کنید. پس واضح است که یادگیری آنها بسیار آسان بوده و برای طراحی رابط کاربری وب استفاده می‌شوند و با این زبان‌ها (HTML ،CSS) نمی‌توانید ماهواره ای را به مدار بفرستید.

HTML و CSS قوانینی برای استایل دهی و ساختاربندی محتوا هستند. HTML یک زبان برنامه نویسی نیست، بلکه یک زبان نشانه گذاری است. پس سعی کنید یک برنامه نویس باشید و در کنار آن HTML  نیز بدانید.

علاوه بر این، HTML5 و CSS3 نسبت به نسخه های پیشین خود یعنی HTML4 و  CSS2 تا حد زیادی بهبود یافته اند. ویژگی‌های جدید موجود در HTML5، ساختارهای معنادار زیادی را به محتوای وب افزوده است و نیاز به تگ پرکاربرد <DIV> را از بین برده است.

یکی از کارفرمایان، پس از بررسی اپلیکیشن‌های تحت وب تعدادی از توسعه دهندگان front-end می‌نویسد: “هیچ کس نتوانست مهارت‌های نشانه گذاری قابل توجهی از خود نشان دهد”. و این گفته حاکی از آن است که بیشتر توسعه دهندگان سمت کاربر، حتی در زمینه HTML و CSS هم خبره نیستند.

توسعه دهنده front-end به توسعه دهنده ای گفته می‌شود که با استفاده از HTML ، CSS و JavaScript به ساخت یک سایت یا یک برنامه کاربردی تحت وب می پردازد و از آنجا که کاربر می‌تواند محصول او را ببیند و با آن تعامل کند لذا به توسعه دهنده front-end، توسعه دهنده سمت کاربر هم می‌گویند. او در ادامه می‌افزاید: بسیاری از طراحانی که می توانند از React و Angular استفاده کنند قادر نیستند به هنگام طراحی، عناصر درستی از HTML را انتخاب کنند. آنها حتی نمیدانند که فلسفه استفاده از clearfix چیست و چگونه می توان آنرا به کار گرفت و یا اگر از آنها بپرسی که قوانین ARIA برای چه ایجاد شده اند پاسخی ندارند که بگویند.

پس اگر در هفته‌های آتی مجالی یافتید جدا از دغدغه یادگیری زبان های دیگر، مفاهیم و اصول اولیه و اساسی HTML and CSS را مجددا بخوانید و جایگاه استفاده از عناصرشان را به درستی دریابید و سعی کنید اینکار را بارها و بارها تکرار کنید.

آنچه در قسمت بالا بدانها اشاره کردیم خلاءهای مهارتی هستند که خود شما باید با حضورتان آنها را پر کنید. پس درحالیکه خودتان بر روی HTML و CSS متمرکز می‌شوید، اجازه دهید که توسعه دهندگانتان وقتشان را فقط صرف برنامه نویسی کنند.

AngularJS یک فریمورک قویست که کاملا بر مبنای JavaScript طراحی شده و برای ایجاد برنامه های تحت وب قدرتمند، استفاده می‌شود.

 HTML یک زبان نشانه گذاری قابل فهم برای مرورگرهاست

هیچگاه مرعوب اسم React و دیگر زبان های تحت وب نشوید. چرا که مرورگرها آنها را نمی‌فهمند و تنها HTML برای آنها قابل فهم است بنابراین خروجی هر زبانی نهایتا باید به صورت HTML دربیاید تا برای مرورگرها قابل درک باشد. لذا آنچه بیان گردید به این معناست که شما می توانید با یک توسعه دهنده مسلط بر React کار کنید بدون آنکه مجبور شوید که خودتان هم React را بفهمید. پس با این حساب، الزامی برای یادگیری React نیست.

اگر خواستید بدانید که React چیست و چگونه کار می‌کند کافیست که به آموزش رسمی آن در آدرس زیر مراجعه کنید.

https://facebook.github.io/react/tutorial/tutorial.html

البته در این بخش، برخی از کدهای این وب سایت را جهت آشنایی شما قرار داده ایم.

 همانطور که مشاهده می‌کنید هر آنچه در درون بلوک return قرار دارد کد HTML است و تنها چیزی که نیاز است بدانید این است که className به نام کلاس‌ها در CSS اطلاق می‌شود و می‌توانید با نادیده گرفتن باقی کدها، بدون آنکه نیازی به کدنویسی با React باشد کارتان را با کدنویسی به زبان HTML و CSS پیش ببرید.

در نسخه تکمیل شده این کد، در درون بلوک return، شما با عبارت جدید دیگری مثل {this.props.author} هم مواجه می‌شوید. می‌توانید از توسعه دهنده خود بپرسید که کارکرد آن چیست و آنگاه با استفاده از  HTML و  CSS، خودتان همان مفهوم و کارکرد را پیاده سازی کنید.

حال اجازه دهید به دیگر زبان مرسوم و محبوب وب یعنی PHP هم نگاهی بیندازیم. آیا در حال طراحی یک قالب وردپرس هستید؟ اگر چنین است هدر (header) شما ممکن است چیزی شبیه کد زیر باشد:

از نظر فنی، صفحه حاوی کد بالا یک صفحه PHP است حال آنکه بیشتر این کدها HTML هستند. بنابراین اگر شما CSS و HTML را به خوبی یاد بگیرید احتمالا می‌توانید حدود 90-80 درصد کدهای PHP را بفهمید و متوجه شوید، مخصوصا زمانیکه کارتان را با یک قالب آماده شروع می‌کنید.

“دانستن” یک زبان برنامه نویسی به معنای دانستن همه یا هیچ نیست. به عبارت دیگر، دانستن یک زبان برنامه نویسی به معنای دانای کل بودن و یا برعکس دستپاچگی به خاطر احساس ندانستن زبان های دیگر نیست. دانستن خوب CSS و HTML می‌تواند در ارتباط برقرار کردن با زبانهای دیگر و فهم آنها شما را یاری کند.

 CSS3 می‌تواند جایگزین خوبی برای جاوا اسکریپت (به عنوان زبان انیمیشن وب) باشد.

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

وال هد (Val Head) که در زمینه انیمیشن‌های CSS یک فرد خبره است، در مقاله ای تحت عنوان “UI Animation and UX: A Not-So-Secret Friendship،  به این موضوع می‌پردازد که چرا و چگونه انیمیشن‌های CSS می تواند توسط طراحان به خدمت گرفته شود.

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

wireframeهای ایجاد شده با CSS از mockup فتوشاپ بهتر هستند

اگر در محیط ‌هایی مشغول بکارید که در آن توسعه دهندگان همچنان با طراحی‌های بصری (استفاده از فتوشاپ برای کشیدن صفحات سایت همراه با جزئیات) و یا پیکسل پرفکت (طراحی با توجه بسیار زیاد به جزییات)، کار می‌کنند احتمالا این مشکل را تجربه کرده اید که بخش‌هایی از جزئیات طراحی موکاب‌ها نیاز به تفسیر و برگردانده شدن به کد دارند و این مشکل خود را در قالب سوالاتی شبیه پرسش‌های زیر نشان می دهد:

چه تعداد پیکسل باید برای padding در نظر گرفته شود؟

مقدار border-radius برای این دکمه چقدر است؟

ایجاد وایرفریم (wireframe) اولین قدم در طراحی وب سایت (مخصوصا وب سایت‌های پیچیده و بزرگ) است و با استفاده از آن می توان چهارچوب کلی وب سایت و عناصر و بخش‌های مختلف پروژه را در قالب یک طرح سریع و گاها بسیار پیش پا افتاده به مشتری و اعضای تیم توسعه نشان داده تا بتوانند ذهنیتی از رابط کاربری وب سایت پیدا کنند. وایرفریم را می‌توان با ابزارهای آنلاین تحت وب، آفلاین تحت ویندوز، توسط کدهای CSS  و HTML و حتی با استفاده از یک قلم و کاغذ ترسیم نمود. البته از نرم افزار فتوشاپ هم می‌توان برای ترسیم وایرفریم استفاده کرد اما ایرادش اینجاست که ممکن است درگیر جزئیات و انجام طراحی‌های گرافیکی شوید حال آنکه نیازی به اینکارها نیست و سریعا باید طرح اولیه را دراختیار مشتری و توسعه دهندگان قرار دهید. ضمن اینکه موکاپ‌های (Mockup) فتوشاپ عمدتا توسط طراحان گرافیکی آن هم با هدف ارائه یک پیش نمایش سه بعدی از آثار گرافیکیشان (مثل : لوگو ، کارت ویزیت ، پوستر و … ) به مشتری استفاده می شود و نمی تواند جایگزین وایرفریم‌های ایجاد شده با css گردد.

برای مشاهده نحوه ایجاد وایرفریم با css می‌توانید به فیلم آموزشی ارائه شده در وب سایت www.persiangfx.com مراجعه کنید.

اگر توسعه دهندگانتان مجبور باشند که آنچه را که شما در فتوشاپ و یا Sketch ایجاد نموده اید به مشخصات CSS  ترجمه کنند، احتمال دارد که نیاز شود تا اندازه‌های واقعی را هم در اختیار آنها قرار دهید. پس با این حساب چرا باید وقت خود را صرف طراحی پیکسل پرفکت (pixel-perfect) کنید درحالیکه می دانید توسعه دهندگان front-end تان مجبور خواهند شد که به هنگام پیاده سازی آن، با کلی حدس و گمان دست و پنچه نرم کنند.

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

حداقل کاری که می‌شود انجام داد سفارشی‌سازی یک فریمورک وب است.

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

چنانچه بر روی یک محصول تحت وب مثل سایت کار می‌کنید بهترین انتخاب برای توسعه دهندگان شما بوت استرپ (Bootstrap) یا چیزی شبیه آن خواهد بود. بنابراین اگر از این فریموک توسعه وب استفاده می کنید می‌توانید با بکارگیری مهارت های CSS خود، به شخصی‌سازی قالب فریمورک بوت استرپ پرداخته و طراحی منحصر بفرد خود را خلق کنید. ضمن اینکه می‌توانید کارتان را با یکی از چندین تم سفارشی موجود در این فریموک هم شروع کنید.

همانطور که می‌دانید بوت استرپ، فریمورکیست که براساس HTML، CSS و توابع جاواسکریپت ایجاد شده است و اغلب سایت‌های طراحی شده توسط این فریمورک همگی ظاهر نسبتا یکسانی دارند که ممکن است کار تشخیص و تفکیک سایت ها را از هم دشوار سازد لذا اگر شما به این دو زبان اشراف داشته باشید می‌توانید ظاهر آن را تغییر داده و حتی رنگ بندی‌های دلخواه خود را در آن اعمال کنید.

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

ترجمه: رقیه آقایاری