بررسی کامل front end

                                                                      به نام خدا

Front end چیست؟

 

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

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

زبان‌های برنامه نویسی Front end کدامند؟

 

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

زبان HTML

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

زبان CSS

زبان CSS (مخفف عبارت Cascading Style Sheets) به منظور استایل دهی به اجزای مختلف صفحات وب سایت مانند متن، تصویر، کادرها و... ساخته شده است. در حقیقت شما اجزا و المان‌های یک سایت یا برنامه را با HTML در صفحه‌ی خود قرار می‌دهید و با استفاده از CSS شکل و ظاهر آن المان‌ها را شخصی سازی می‌کنید. پس CSS طراحان سایت را قادر می‌سازد که بدون محدودیت خلاقیت‌های خود را در طراحی صفحات سایت پیاده سازی کنند.

زبان برنامه نویسی Javascript

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

متخصص Front End به چه چیز هایی باید مسلط باشد؟

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

لیست مهارت‌هایی که یک Front End Developer باشد داشته باشد:

• HTML
• CSS
• Javascript
• کتابخانه‌ها و فریمورک های جاوا اسکریپت (مثل جی کوئری)
• کتابخانه‌های CSS مثل بوت استرپ (Bootstrap)
• پردازنده‌های CSS مثل Sass یا Less
• طراحی وب واکنش گرا (Responsive Web Design)
• نرم افزارهای گرافیکی (فتوشاپ و شاید کمیIllustrator)
• تست و آزمون خطا
• و مهارت‌جانی دیگری

UI‌ چیست؟

UI مخفف عبارت User Interface Design به معنای طراحی رابط کاربری است. در واقع UI طراحی بخشی از وب‌سایت یا اپلیکیشن است که کاربر آن را مشاهده می‌کند و بیشتر به جنبه‌ی گرافیکی موضوع می‌پردازد. اینکه ظاهر هر بخش به چه صورت باشد تا جلوه‌ی مناسبی به وب‌سایت دهد را طراح بخش UI مشخص می‌کند.

طراحی رابط کاربری به کمک گرافیست‌های سایت و برنامه‌نویس Front-end پیاده سازی می‌شود. طراحی رابط کاربری مهم است زیرا کاربر مستقیماً با آن ارتباط دارد و معمولاً افراد به وب‌سایت‌هایی با UI ضعیف، کمتر اعتماد می‌کنند

UX چیست؟‌

UX مخفف عبارت User Experience Design به معنای طراحی تجربه‌ی کاربری است. به احساسات و راحتی کاربر حین کار کردن با اجزای مختلف سایت گفته می‌شود و جوانب تعامل کاربر را با هر بخش در نظر می‌گیرد. اینکه وب‌سایت ما طوری طراحی شده باشد که هر بخش به راحتی در دسترس کاربران قرار بگیرد و برای کار کردن با هر قسمت آسودگی و راحتی کاربر در نظر گرفته شود اینها مسائلی از طراحی UX‌ هستند.

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

در نهایت UI و UX چه تفاوتی با هم دارند!

حتما تا به حال با تفاوت‌های UI و UX آشنا شده‌اید، در ادامه به طور خلاصه به بررسی این مورد می‌پردازیم:

• UI و UX دو مفهومی هستند که معمولا توسط افراد تازه‌کار با هم اشتباه گرفته می‌شوند، همانطور که پیش‌تر گفتیم واژه‌ی UI مخفف User Interface و به معنای رابط کاربری و واژه‌ی UX مختصر شده‌ی عبارت User Experience و به معنای تجربه‌ی کاربری می‌باشد.
• UI به مطالعه‌ی طراحی ظاهری محصول می‌پردازد، در حال UX جنبه‌های عاطفی و احساسات کاربر را نیز در بر می‌گیرد، بنابراین UI یکی از زیر مجموعه‌های UX است.
• UI و UX به طور قابل توجهی مکمل یکدیگر هستند و برای ایجاد یک تجربه‌ی کاربری دلنشین و لذت‌بخش وجود هر دوی آن‌ها لازم و ضروری بوده و نمی‌توان یکی را بر دیگری ارجح دانست.
• طراحی UI یک محصول بیشتر به سلیقه‌ی طراح بستگی دارد، در حالی که در طراحی UX باید سلیقه، عواطف و فرهنگ کاربران را در نظر گرفت.