بسیاری از ما هنگامی که می‌خواهیم یک توسعه دهنده در زمینه‌ای خاص شویم، نمی‌دانیم باید از کجا شروع کنیم. یک نقشه راه کمک می‌کند تا آمادگی بهتری نسبت به زمینه‌هایی که قرار هست بیاموزیم و در آنها حرفه‌ای شویم کسب کنیم. در این مقاله سعی کرده‌ایم تا یک نقشه جامع برای افرادی که علاقه به کار در حوزه Front-End هستند ارائه دهیم. این نقشه در واقع یک راهنما است که همه از جمله کارآموزان، مدیران، علاقه‌مندان و غیره می‌توانند برای یادگیری و تمرین از آن استفاده کنند و به طور گسترده به تشریح مسیر Front-End (نحوه یادگیری آن و ابزار مورد استفاده آن) می‌پردازد. در ادامه به نقشه راه فرانت اند میپردازیم.
در گام اول به صورت مختصر مروری بر مفاهیم و منابع Front-End خواهیم داشت. در گام دوم و سوم مباحث آموزشی و منابع را بررسی کرده، در گام چهارم و پنجم بر حوزه‌های شغلی و زمان موردنیاز برای شروع کار در این حوزه صحبت خواهیم کرد. در گام آخر نیز حوزه‌های کاربری بعد از مسلط شدن بر Front-End را معرفی خواهیم کرد.
گام اول: دانشنامه‌ی Front-End ، پیش‌نیازها و مفاهیم پایه
فرانت اند یا Front-End ، به قسمت قابل مشاهده‌ی وب سایت (نرم‌افزار) توسط کاربران می‌گویند. هدف از طراحی سایت این است که اطمینان حاصل شود که وقتی کاربران سایت را باز می‌کنند، اطلاعات را به گونه‌ای مشاهده می‌کنند که به راحتی قابل خواندن و مرتبط هستند. در واقع باید تدبیری اندیشید تا کدهای غیر قابل فهم برای کاربران را در قالب ظاهری گرافیکی و بصری به آنها نمایش داد تا بتوانند به راحتی از بخش‌های مختلف سایت استفاده کنند. بخش فرم‌های ورودی اطلاعات، صداها، تصاویر، ویدیوها و به صورت کلی هر چیز دیگری که برای کاربر قابل درک باشد، جزو این اطلاعات قرار می‌گیرند.
این مسئله با این واقعیت پیچیده‌تر است که کاربران اکنون از دستگاه‌های متنوعی با اندازه و وضوح صفحه نمایش متفاوت استفاده می‌کنند؛ بنابراین طراح مجبور می‌شود هنگام طراحی سایت، این جنبه‌ها را مورد توجه قرار دهد. آنها باید اطمینان حاصل کنند که سایت آنها به درستی در مرورگرهای مختلف (مرورگر متقاطع)، سیستم عامل‌های مختلف و دستگاه‌های مختلف (چندسکویی) ظاهر می‌شود که به برنامه ریزی دقیق از طرف توسعه دهنده احتیاج دارند.
فرانت اند به دو بخش اصلی طراحی وب و توسعه رابط کاربری تقسیم می‌شود. در بخش طراحی وب، طراحان با نرم افزار‌های گرافیکی مانند فتوشاپ ظاهر سایت را طراحی می‌کنند. اما بخش توسعه رابط کاربری مربوط به پیاده سازی ظاهر سایت در قالب کدهای HTML ، CSS و Javascript است. زبان‌های برنامه نویسی که در فرانت به کار می‌روند، سمت کاربر یا Client – side می‌باشند. بنابراین کدهای نوشته شده در فرانت در مرورگر کاربر پردازش و اجرا می‌شوند. این بدین معنی است که کاربر به راحتی به این کدها دسترسی مستقیم دارد و می‌تواند آنها را مشاهده کند. فرانت اند با بخش بک اند (Back-end) در ارتباط مستقیم است و تاثیر بسیاری بر روی تجربه کاربری (UX) دارد. در ادامه به مابقی نقشه راه فرانت اند میپردازیم.
مرورگرهای وب (Web browsers)
یک مرورگر وب نرم‌افزاری است که برای بازیابی، ارائه و اطلاعات جغرافیایی در اینترنت استفاده می‌شود. به طور معمول، مرورگرهای وب روی کامپیوتر دسکتاپ یا لپ‌تاپ، تبلت، یا تلفن اجرا می‌شوند، اما با پیشرفت فناوری، امروزه یک مرورگر ممکن است در مورد هر چیزی (مانند وسایل خانه از جمله یخچال، تلویزیون و … ) یافت شود. معمول‌ترین مرورگرهای وب که به ترتیب اغلب مورد استفاده قرار می‌گیرند:
• کروم (chrome)
• سافاری (Safari)
• اینترنت اکسپلورر (Internet Explore)
• فایرفاکس (Firefox)
• لبه (Edge)
تجربه کاربری (User Experience)
تجربه کاربری یا UX یکی از مسائل مهم و ضروری است که در موفقیت وب سایت / اپلیکیشن یا سایر محصولات بسیار تاثیرگذار است. در گذشته طراح با فتوشاپ یا هر برنامه طراحی دیگر و با سلیقه خود و با فکر اینکه خروجی یک طرح با ظاهر زیبا باشد، اقدام به طراحی سایت یا اپلیکیشن می‌نمود. اما حالا چنین راهی نه تنها درست نیست بلکه احتمال شکست را در هدفی که داریم قوت می‌بخشد. تصور کنید سایت سفارش غذایی را طراحی کردید که ظاهری بسیار زیبا دارد. اما کاربر نمی‌تواند تمامی مراحل را به درستی طی کند و غذای خود را سفارش دهد. اگر وب سایت شما برای کاربر تجربه ای خوبی را رقم نزند در این بازار رقابتی وب و اپ، کاربر به سمت وب سایت یا اپلیکیشن رقیب شما خواهد رفت چرا که با استفاده آن تجربه بهتری نسبت به اپ یا وب سایت شما داشته است. آموزش تجربه کاربری فقط طراحی رابط نیست و موارد گسترده‌تری را شامل می‌شود. عده ای به اشتباه طراحی رابط کاربری (UI) را با تجربه کاربری یکی می‌دانند که این یک برداشت اشتباه است. تجربه کاربری یک موضوع گسترده‌تر می‌باشد که موارد بسیار مهمی را شامل می‌شود. مواردی که بایستی در طراحی محصول، سایت، اپ یا … در نظر گرفته شود. پس در نقشه راه فرانت اند، توجه به رابط کاربری هم اهمیت بسیار زیادی دارد.
بک اند (Backend)
بک اند به بخشی از یک وب سایت یا نرم افزار می‌گویند که برای کاربران قابل مشاهده نیست. به عبارتی دیگر هسته و مغز یک سایت است که وظیفه‌ی کنترل منطق آن را بر عهده دارد. سایت‌های دینامیک به برنامه نویس Backend نیاز دارند تا منطق سایت را به وسیله زبان‌های برنامه نویسی پیاده‌سازی کنند. کاربران به کدهای نوشته‌شده در بک اند دسترسی ندارند و نمی توانند آنها را مشاهده کنند. این بخش از سایت مانند قسمتی از کوه یخ است که در زیر سطح آب قرار گرفته است. سمت سرور با بخش سمت کاربر ارتباط مستقیم دارد و به اجزایی که در رابط کاربری طراحی شده‌اند جان می‌بخشد. برنامه نویس Back-end باید اطلاعات را متناسب با اهداف مختلف از پایگاه‌داده دریافت کند و در صورت نیاز پس از پردازش به کاربر نمایش دهد. بنابراین Back-end از دو بخش منطق سایت و پایگاه داده تشکیل شده است.
یادگیری تخصصی html به صورت رایگان
در این مطلب به بررسی نقشه راه فرانت اند پرداختیم. برای فعالیت در حوزه طراحی و توسعه وب، یادگیری html الزامی و ضروری است. در حال حاضر شما میتوانید از طریق وبسایت های فعال در زمینه آمورش برنامه نویسی به صورت رایگان یا با حداقل میزان هزینه ممکن این زبان را به صورت حرفه ای یاد بگیرید. یکی از دوره های باکیفیت و جامع html در حال حاضر دوره آموزش صفر تا صد html آکادمی سبزلرن است. این دوره تقریبا تمام مباحث مورد نیاز این زبان را پوشش میدهد و همچنین رایگان است. همین حالا میتوانید بدون پرداخت هیچ هزینه ای در این دوره جامع شرکت کرده و از ویدیوهای آموزشی آن نهایت استفاده را ببرید.