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

Front End چیست

اگر به دنبال یک جواب خیلی معمولی ولی کاربردی برای سوال Front End چیست هستید، فیلم زیر را بازدید کنید

تعریف طراحی وب

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

اما در دنیای طراحی وب،‌ واژه و کلمه ای مثل 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، کلمه و واژه و مفهوم 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 چیست پاسخ دادیم.