دوستان سلام امیدوارم همیشه سلامت باشید، امروز قراره درباره برنامه نویسی فرانت اند و مسیر یادگیری این حوزه صحبت کنیم و کلی چیزهای دیگری رو یاد بگیریم.

همان طور که میدانید، امروزه با پیشرفت تکنولوژی تمامی ابزارها به صورت الکترونیکی، ارائه می شوند. دنیای شوند. دنیای فناوری و اطلاعات به شدت در حال توسعه می باشد، طوری که تا چندین سال دیگر اسکناس های کاغذی، جای خود را به ارز های دیجیتال می دهند و ما دیگر باید با این نوع اسکناس ها خداحافظی کنیم.

مثال دیگری هم می توانم در این رابطه بزنم که امروزه ما شاهد این هستیم، هر مغازه ای برای خود کسب و کار دارد و به طوری برای خود سعی در توسعه و گسترش کسب و کار را دارد. امروزه این و توسعه و گسترش با راه اندازی یک وب سایت اینترنتی مقدور است و براحتی می توان برای کسب و کار یک سایت اینترنتی طراحی کرد و به درآمد رسید.

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

فرانت اند (Front End) چیست؟

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

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

در بخش طراحی شما می توانید با استفاده از نرم افزار های گرافیکی، از یک تمپلیت آماده استفاده کنید و یا میتوانید برای خود از صفر شروع به طراحی صفحات وب کنید که به این عمل UI گفته میشود. شما میتوانید با در نظر گرفتن تجربه کاربر UX، المنت های خود را جوری در صفحات وب طراحی کنید که زمانی کاربر به سایت شما رجوع میکند، بتواند به راحتی با آن کار کند. طوری که اولین بارش نیست وارد سایت شما شده و کار خود را به بهترین شکل انجام میدهد.

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

لازمه یادگیری فرانت اند (Front End)

برای اینکه بتوانید در دنیای فرانت اند پیش روید بایستی از یکسری اصول پیروی کنید:

بررسی صفحات ایستا و پویا

صفحات وب، شامل انواع داده های متنی، گرافیکی و چندرسانه ای هستند که در دنیای وب به اشتراک گذاشته میشوند. اگر بخواهید اطلاعاتی را برای افراد به نمایش بگذارید و این اطلاعات به ندرت نیاز به تغییر داشته باشد، یک صفحه وب ایستا بسیار مناسب است. صفحات وب ایستا به بیان ساده صفحاتی هستند که براساس یک نیاز طراحی میشوند و نیاز به به روزرسانی مداوم ندارند. این گونه صفحات مانند آگهی ها، تبلیغات، شرح فعالیت ها و یا معرفی محصولات شرکت یا سازمان میتواند استفاده شود. زبان نشانه گذاری HTML برای طراحی صفحات وب ایستا ضمن پشتیبانی مؤلفه های چندرسانه ای، از سهولت استفاده برخوردار است.

اطلاعات موجود در صفحات وب میتوانند به صورت ایستا و پویا ایجاد شوند. تارنمای ایستا  (static) website از چند صفحه  HTMLتهیه شده است. هر صفحه یک پرونده مجزاست و هیچ پرونده دیگر یا پایگاه دادهای وجود ندارد که به آن ارجاع شود. به همین دلیل برای تغییر تارنما باید جداگانه کد HTML آن را تغییر دهید. از آنجا که حجم کمتری از کد در طراحی تارنماهای ایستا استفاده میشود، این صفحات سرعت بارگذاری (Loading)بالایی دارند و با css ، javascript ، htmlنوشته میشوند.

اما مشخصه مهم تارنماهای خبری، فروشگاه های اینترنتی و آموزش های برخط، به روزرسانی و تغییر مداوم آنها است و جریان اطلاعات در آنها ثابت نیست. برای رقابت در دنیای تجاری ایجاد و توسعه صفحات وب پویا اهمیت دارد. وجود پایگاه داده همراه با صفحات وب پویا این امکان را فراهم میکند تا ارتباط بین کاربر و سرور با توجه به تغییرات و به روزرسانی، هماهنگ و یکپارچه شود. اطلاعات یک صفحه پویا بسته به عواملی از جمله اطلاعات موجود در پایگاه داده، مشخصات بازدیدکننده، زمان بازدید، کشور بازدیدکننده و دیگر عوامل میتواند تغییر کند. دریافت و ثبت نظر کاربران از قابلیت های صفحات وب پویا است. انتخاب زبان برنامه نویسی مناسب اهمیت ویژهای برای اعمال تغییرات در صفحات وب پویا دارد. زبان html و php هرکدام بنا به قابلیت ها و کاربرد میتواند برای برآورده کردن انتظارات مشتری مورد استفاده قرار گیرند.

یادگیری پروتکل HTTP

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

مفهوم سرور و کاربر

وقتی شما قصد خرید از فروشگاهی را دارید، در این تعامل شما که تقاضای خرید دارید سرویس گیرنده هستید و فروشنده فروشگاه، سرویس دهنده شما است. در دنیای شبکه های رایانه ای به سیستمی که سرویس ارائه میکندسرویس دهنده(Server) و به سیستم یا سیستم هایی که سرویس میگیرند، سرویس گیرنده (Client) میگویند.
سرویس دهنده ها سیستم هایی مشابه سیستم های سرویس گیرنده هستند با این تفاوت که از سخت افزارهای قوی تری تشکیل شده اند که موجب افزایش سرعت آنها و ارائه خدمات به سرویس گیرنده های بیشتری میشود.

پیش نیاز وب، زبان HTML

دانستن زبان html، یکی از مهمترین پیش نیاز هایی است که شما برای شروع کارتان نیاز دارید. زبان html به عنوان یک زبان نشانه گذاری ابر متن بین تمامی زبان های برنامه نویسی شناخته شده است. دقت کنید زبان html یک زبان نشانه گذاری است نه یک زبان برنامه نویسی!!!! در واقع شما می توانید با استفاده از این زبان عناصر خود را در صفحات وب پیاده سازی کنید.

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

سبک دهی به کمک CSS

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

تغییر استاتیک به دانیامیک با JS

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

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

ریسپانسیو بودن وب سایت به کمک Bootstrap

حال با این که شما با ۳ زبان اصلی برنامه نویسی فرانت اند آشنا شده‌ایم نوبت آن رسیده تا سایت خود را به این بهینه کنید شما می توانید این کار را با فریمورک های CSS انجام دهید که یکی از محبوب‌ترین آنها بوت استرپ است شما می توانید با استفاده از این فریم ورک سایت خود رو از لحاظ چیدمان و سرعت ارتقا دهید.فریمورک بوت استرپ، یک مجموعه کامل از کدهای قابل استفاده html ، css و جاوا اسکریپت است که شما می توانید به سرعت به وب‌سایت‌های ریسپانسیو خود را ایجاد کنید.

به کارگیری jQuery

برای اینکه شما به توان گفت در این مورد جی کوئری کار کنید بایستی تمامی موارد بالا را بلد باشید. جی کوئری کتابخانه کم حجم برای زبان جاوا اسکریپت است که شما می توانید با کمترین حجم کد بیشتر این کار را انجام دهید و یکی از بهترین کارهایی که میتوان انجام داد استفاده از کتابخانه جی کوئری از تمامی کارها را می‌توانیم در خطوط کمتری انجام دهیم.

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

یادگرفتن یکی از فریمورک های جاوا اسکریپت

شما می توانید با استفاده از یکی از فریم ورک های جاوا اسکریپت خودتان را یک گام به سوی حرفه ای تر شدن جلو ببرید. تمام این فریمورک ها از یک ساختار منظم تشکیل شدند که شما می توانید سریعتر کار خود را انجام دهید. انگولار و ویو توسط گوگل و ری اکت توسط فیسبوک ایجاد شده است.

بیشتر بخوانید: یادگیری اصول برنامه نویسی - بخش اول

بهترین مسیر برای فرانت اند (Front End)

1- آشنایی اولیه با اصطلاحات وب

2- یادگیری اصول UI,UX

3- کار با JSON, AJAX برای درخواست به سمت سرور

4- آموزش بوت استرپ

5- کار با یکی از فریمورک های جاوا اسکریپت

سخن آخر

دوستان عزیزی که دوست دارند وارد شغل برنامه نویسی شوند سعی کنید از بهترین منابع اطلاعاتی استفاده کنید و از این مسیری که بنده در اختیار شما قرار داده ام بهره ببرید تا شما هم بتوانید یک برنامه‌نویس فرانت اند (Front End) شوید و از زندگی خود لذت ببرید. بدرود