تعریف طراحی وب
همانطور که در مقاله‌ای جداگانه درباره‌ی طراحی وب توضیح دادیم، طراحی وب مربوط به طراحی هر آن چیزی می باشد که عضو آن را در مانیتور خویش مشاهده میکند. و یک طراح وب وظیفه‌ی طراحی المان های گرافیکی و دیداری یک تارنما یا برگه وب را دارد.
اما در دنیای طراحی وب، واژه ای نظیر Front End یا این که Back End ممکن است بسیار به گوش شما بخورد. در همین مقاله میخواهیم درباره‌ی Front End کلام کنیم و بگوییم که فرانت چیست، چه تفاوتی دارای بک اند (Back End) داراست و برای تبدیل شدن به یک طراح وب یا این که Front End Developer, به چه مهارت هایی نیاز داریم.
تعریف واژه‌ی فرانت اند
Front End چیست: در عبارت Front End، هماxنطور که میبینید واژه‌ی Front وجود دارد. و در انگلیسی یک عدد از معانی Front، به معنای «جلو» میباشد.
در دیکشنری آنلاین فست دیک، معنا واژه‌ی Front به همین رخ آمده است: جلو، پیش، صف پیش، نما، طریق برخورد، جلودار، منادی،جبهه جنگ، بطرف جلو، روکردن به، مواجه شده با،روبروی نیز قرار دادن، مقدمه نوشتن بر، درصف جلوقرارگرفتن
با توجه به تعریفی که از این واژه دیدیم، میتوانیم در جواب به سوال Front End چیست بگوییم:
طراحی یا کدنویسی هر آن چیزی که مربوط به جلوی سایت میشود. در واقع یک طراح وب یا یک Front End Developer، کسی است که چیزی را طراحی میکند عضو آنرا میبیند.
مقایسه مهم بک اند
در ادامه‌ی پاسخ به سوال Front End چیست ، عالی می باشد که یک مقایسه‌ای هم از فرانت اند و بک اند داشته باشیم.
در نقطه‌ی علیه Front End، کلمه و معنا Back End وجود داراست که اینگونه معنا میشود:
برنامه نویسی بک اند (Back End) مربوط به کدنویسی و برنامه نویسی هر آن چیزی هست که عضو آن را بازدید نمی کند و مربوط به کارهای پشت صحنه وب تارنما است. در واقع وقتی که یک وبسایت، مقالات را از دیتابیس اخذ میکند، یک امر مربوط به بک اند است. وظیفه‌ی یک برنامه نویس بک اند، برنامه نویسی چیزهایی می باشد که هسته حساس یک تارنما هستند و عضو کدهای آنرا بصورت مستقیم بازدید نمیکند.
یک تئاتر را در نظر بگیرید!
برای این‌که همین دو مفهوم را خوبتر متوجه شوید، یک اجرای تئاتر را در حیث بگیرید. درصورتیکه یک تئاتر بخواهد اجرا شود، به دو گروه از افراد نیاز دارد:
- بازیگرهایی که اجرای صحنه‌ی نمایش زنده را بر عهده دارند
- نویسنده، کارگردان، تهیه‌کننده، نورپردازی و… که بصورت مستقیم بر روی صحنه نمی‌آیند، البته اثر گذاری عمل آن‌ها در اجرای بازی زنده اثر گذار است.
دو حیطه‌ی متعدد Front End و Back End هم دقیقا به همین شکل است:
- تمام آن چیزی که مربوط به ظواهر وبسایت میباشد (مثل بازیگران در صحنه تئاتر) مربوط به اجرای Front End.
- و کل آن چیزی که مربوط به کارهای پشت صحنه سایت میباشد (مثل کارگردان و تهیه کننده که در پشت صحنه هستند) اصلی نام Back End شناخته میشود
تفاوت برنامه نویس فرانت اند کلیدی UI Designer
در ادامه‌ی پاسخ به سوال Front End چیست میخواهیم یه خرده ریز خیس به این معنی نگاه کنیم.
اگر بخواهیم در دنیای طراحی وب مقداری کوچک خیس و عمیق خیس شویم، گشوده کلیدی ۲ مفهوم دیگر مواجه میشویم:
- برنامه نویس فرانت اند یا Front End Developer
- طراح رابط کاربری یا این که UI Designer (Ui مخفف User Interface میباشد)
اما طراح رابط کاربری، عمل مختلفی انجام میدهد. کسی که اهمیت عنوان UI Designer کار میکند، کارهای مربوط به کدنویسی را انجام نمیدهد و هیچ وقت خودش دست به کد نمیشود.
بلکه یک طراح رابط کاربری، کارش طراحی گرافیک سایت در نرم افزارهایی نظیر فتوشاپ (Photoshop) است. همین اشخاص رابط کاربری و رخ ظاهری یک صفحه وب را در فتوشاپ (یا بقیه نرم افزارهای مشابه مثل Sketch) طراحی می کنند و بعد فولدر PSD را در اختیار آن فردی میگذارند که کدنویسی فرانت اند را انجام میدهد و اصطلاحا فرانت اند دولوپر است.
پس فعالیت یک UI Designer فقط اهمیت نرم افزارهای گرافیکی‌ست و کاری دارای کدها ندارد، و عمل یک طراح وب فرانت اند، با کد ها میباشد و مهم کدنویسی میتواند صفحه ها وب مختلفی را طراحی کند.
مهارت های یک طراح وب فرانت اند چیست
برای تبدیل شدن به یک طراح وب فرانت اند، شما به مهارت های بخش اعظمی نیاز دارید که همه‌ی آن‌ها برایتان کاربردی خواهد بود. در پایین بصورت خلاصه این مهارت‌ها را عنوان می‌کنیم و در آینده در یک مقاله و تدریس تخصصی، درباره‌ی کل مهارت‌هایی که برای تبدیل شدن به یک طراح وب فرانت اند نیاز داریم صحبت میکینم.
لیست مهارت‌هایی که یک Front End Developer باشد داشته باشد:
- HTML
- CSS
- Javascript
- کتابخانه‌ها و فریمورک های جاوا اسکریپت (مثل جی کوئری)
- کتابخانه‌های CSS مانند بوت استرپ (Bootstrap)
- پردازنده‌های CSS مثل Sass یا این که Less
- طراحی وب واکنش گرا (Responsive Web Design)
- نرم افزارهای گرافیکی (فتوشاپ و احتمال دارد کمیIllustrator)
- تست و امتحان خطا
- و مهارت‌جانی دیگری
این لیست، یک لیست زیاد کلی می باشد که در آینده صد رد صد در آیتم آن مفصل کلام خواهیم کرد. در همین مقاله توضیحات دوچندان لطف درباره‌ی فرانت اند ارائه دادیم و به مهربانی به سوال Front End چیست جواب دادیم.
