به زودی دوره آموزشی فتوشاپ بروزرسانی خواهد شد.
0
09136820524

آشنایی با نقشه راه Front – End

آشنایی-با-نقشه-راه-Front-End

آشنایی با نقشه راه Front – End

آموزش گام به گام مراحل Front – End

مقالات آموزش رایگان برنامه نویسی وب

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

آن چه که در مقالات بعدی نقشه راه Front – End می آموزیم

در گام اول به صورت مختصر مروری بر مفاهیم و منابع Front-End خواهیم داشت. در گام دوم و سوم مباحث آموزشی و منابع را بررسی می کنیم و در گام چهارم و پنجم درباره حوزه‌های شغلی و زمان موردنیاز برای شروع کار در این حوزه صحبت خواهیم کرد و در گام آخر نیز حوزه‌های کاربری بعد از مسلط شدن بر Front-End را معرفی خواهیم کرد.

گام اول: نقشه راه Front-End، پیش‌نیازها و مفاهیم پایه

Front-End و اهمیت آن

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

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

Front – End به دو بخش اصلی طراحی وب و توسعه رابط کاربری تقسیم می‌شود. در بخش طراحی وب، طراحان با نرم افزار‌های گرافیکی مانند فتوشاپ ظاهر سایت را طراحی می‌کنند. اما بخش توسعه رابط کاربری مربوط به پیاده سازی ظاهر سایت در قالب کدهای HTML ، CSS و  Javascript  است. زبان‌های برنامه نویسی که در Front – End به کار می‌روند، سمت کاربر یا Client – side می‌باشند. بنابراین کدهای نوشته شده در Front – End در مرورگر کاربر پردازش و اجرا می‌شوند. این بدین معنی است که کاربر به راحتی به این کدها دسترسی مستقیم دارد و می‌تواند آن‌ها را مشاهده کند. فرانت اند(Front – End) با بخش بک اند (Back-End) در ارتباط مستقیم است و تاثیر بسیاری بر روی تجربه کاربری (UX) دارد.

مرورگرهای وب (Web browsers)

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

  • کروم (chrome)
  • سافاری (Safari)
  • اینترنت اکسپلورر (Internet Explore)
  • فایرفاکس (Firefox)
  • لبه (Edge)

تجربه‌ی کاربری (User Experience)

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

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

بک اند (Backend)

Back-end به بخشی از یک وب سایت یا نرم افزار می‌گویند که برای کاربران قابل مشاهده نیست. به عبارتی دیگر هسته و مغز یک سایت است که وظیفه‌ی کنترل منطق آن را بر عهده دارد. سایت‌های دینامیک به برنامه نویس Backend نیاز دارند تا منطق سایت را به وسیله زبان‌های برنامه نویسی پیاده‌سازی کنند. کاربران به کدهای نوشته‌شده در بک اند دسترسی ندارند و نمی‌ توانند آن‌ها را مشاهده کنند. این بخش از سایت مانند قسمتی از کوه یخ است که در زیر سطح آب قرار گرفته است. سمت سرور با بخش سمت کاربر ارتباط مستقیم دارد و به اجزایی که در رابط کاربری طراحی شده‌اند جان می‌بخشد. برنامه نویس Back-end باید اطلاعات را متناسب با اهداف مختلف از پایگاه‌داده دریافت کند و در صورت نیاز پس از پردازش به کاربر نمایش دهد. بنابراین Back-end از دو بخش منطق سایت و پایگاه داده تشکیل شده است.

پایان بخش اول نقشه راه Front – End

در جلسه آینده به بررسی گام دوم نقشه راه فرانت اند خواهیم پرداخت. با ما همراه باشید…

 

 

 

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *