مسیر یادگیری طراحی وب | برنامه نویس فول استک ۲۰۲3
مسیر یادگیری طراحی وب
مطمئناً شما اهداف و آرزوهای بزرگی دارید و می خواهید بدانید که چطور می توانید به اهداف خودتان برسید. اگر تصمیم دارید امسال به یک طراح وب حرفه ای مبدل شوید، مطمئن باشید تصمیم درستی گرفتید و کافی است در این مقاله با ما همراه باشید تا بدانید چطور باید به هدفتان برسید. در این مقاله، همه چیز درباره طراحی وب و مسیر یادگیری طراحی وب سایت را با تمام جزئیات به شما خواهیم گفت تا پس از مطالعه این Road Map بتوانید امسال به یک طراح وب حرفه ای تبدیل شوید. در این مقاله، شما با مسیر یادگیری برنامه نویسی وب (آنچه که باید یاد بگیرید) کاملاً آشنا خواهید شد. مهارت های مورد نیاز در مسیر آموزش طراحی وب را می توان به سه بخش تقسیم نمود:
-
مهارت های عمومی (Common Skills)
-
برنامه نویسی فرانت اند (Front End)
-
برنامه نویسی بک اند (Back End)
پس از یادگیری مهارت های عمومی، که برای همه طراحان وب، با هر گرایشی، الزامی است، باید مسیر خود را انتخاب کنید که می خواهید در کدام بخش از پروژه طراحی وب کار کنید، Back End یا Front End ؟
Front End مربوط می شود به هر آنچه که کاربر نهایی در صفحه وب می بیند و با آن تعامل دارد. فرانت اند خلاصه می شود در طراحی، افکت های سرگرم کننده، چیدمان و تصاویری که در نهایت تجربه کاربری (UX : User Experience) را خلق می کنند. برنامه نویس های Front End عموماً کسانی هستند با خلاقیت های بصری بالا، مهارت های طراحی عالی، شور و شوق بالا برای خلق صفحات وب کاربر پسند با رعایت اصول تجربه کاربری (UX).
Back End مربوط می شود به امور پردازش، ذخیره و دستکاری دیتا. در بک اند مشخص می شود که وب سایت یا وب اپلیکیشن چگونه کار کند. برنامه نویسان بک اند، اغلب تفکر منطقی و توان حل مسئله بالایی داشته و عملکرد وب سایت یا وب اپلیکیشن برای آنها موضوع مهمی است. اگر فردی هستید که تفکر و حل مسئله را به خلق افکت و زیبایی ترجیح می دهید، بهتر است برنامه نویسی در بک اند را انتخاب کنید.
Front End یا Back End ؟
اگر تصمیم گرفتید برنامه نویس فرانت اند باشید، بیشتر با این تکنولوژی ها سر و کار خواهید داشت:
-
React
-
Angular
-
Vue.js
اگر تصمیم گرفتید برنامه نویس بک اند باشید، بیشتر با زبان ها های برنامه نویسی زیر سر و کار خواهید داشت:
اگر تصمیم گرفتید یک برنامه نویس فول استک (Full Stack Developer) شوید باید هر دو تخصص را در کنار هم داشته باشید. توسعه دهنده full stack (فول استک وب دولوپر) باید همزمان به مباحث بک اند و فرانت اند مسلط باشد. برنامه نویس Full Stack وظایف بیشتری داشته و مسلماً حقوق برنامه نویس فول استک نیز از برنامه نویس وب بالاتر خواهد بود.
توجه داشته باشید که نیازی نیست همه تکنولوژی ها و فریم ورک ها را یاد بگیرید (حتی اگر برنامه نویس فول استک باشید). تنها موردی که یادگیری آن برای هر برنامه نویس وب، ضروری است HTML , CSS , JavaScript می باشد. سپس برای فرانت اند کافی است حداقل به یک فریم ورک جاوا اسکریپت (React , Angular , Vue.js) آشنا باشید و برای بک اند هم کافی است حداقل به یک زبان برنامه نویسی سمت سرور (Node.Js , Python , Ruby , PHP , Java , Dot Net) مسلط باشید. به جز موارد نامبرده، شما اگر با تکنولوژی ها و زبان های بیشتری آشنایی داشته باشید مزیت محسوب می شود ولی اجباری به این کار نخواهد بود.
۱- مهارت های عمومی
شما هر گرایشی از طراحی وب را که انتخاب کرده باشید، در هر صورت، ابتدا باید با مهارت های عمومی که برای یک طراح وب، ضروری است آشنا شوید. این ۱۱ مهارت ضروری طراحی وب را در تصویر زیر مشاهده می کنید:
گیت (Git)
Git یکی از محبوب ترین سیستم های ورژن کنترل (VCS : Version Control System) است. در واقع بدون گیت نمی توان زندگی کرد! وظیفه این ابزار کنترل نسخه، ثبت کلیه تغییرات روی فایل های پروژه است به صورتی که بعدا بتوان مجدداً به نسخه های قبلی آن فایل برگشت. نیاز به استفاده از گیت بخصوص در یک تیم برنامه نویسی، خودش را نشان خواهد داد. وقتی افراد مختلف تیم، مدام در حال اعمال تغییرات در پروژه هستند، نیاز به یک ابزار کنترل ورژن ضروری خواهد بود. بنابراین شما در ابتدای راه، قبل از هر چیزی ابتدا باید با ورژن کنترل Git آشنا شوید.
ترمینال لینوکس
نه فقط برای یک برنامه نویس وب، بلکه برای هر برنامه نویسی، توانایی کار با ترمینال لینوکس، شدیداً لازم است و توصیه میکنم حتماً چند روزی برای یادگیری آن زمان بگذارید! برای یادگیری نحوه استفاده از ترمینال لینوکس و یادگیری دستورات ساده لینوکس می توانید یک دوره آموزشی ببینید:
ساختمان داده و الگوریتم
شما به عنوان برنامه نویس، هر برنامه ای که بخواهید بنویسید، نیاز به دانش خوبی از ساختمان های داده و الگوریتم خواهید داشت. دانش ساختمان داده به شما کمک می کند برای ذخیره و سازماندهی هر نوع اطلاعات، بهترین متغیر یا آبجکت را انتخاب کنید و دانش الگوریتم به شما کمک می کند تا برای هر مسئله، بهترین راه حل الگوریتمی (یعنی راه حلی که بتوان آن را تبدیل به کد کرد) ارائه دهید.
این مهارت ها معمولاً در دانشگاه بدست می آید ولی نگران نباشید اگر شما تحصیلات دانشگاهی ندارید یا در دوره تحصیل، این موضوع را خوب یاد نگرفته اید، می توانید با مطالعه یک کتاب یا شرکت در یک دوره آموزشی یا حتی به صورت تجربی با انجام پروژه های مختلف، دانش مناسبی در این زمینه کسب کنید. معمولاً یک دوره آموزش ساختمان داده و الگوریتم، از یک زبان برنامه نویسی استفاده می کنند. سعی کنید کتاب یا دوره آموزشی را انتخاب کنید که به زبان مورد استفاده آن، کاملاً آشنا باشید.
GitHub
گیت هاب، یک کد ریپازیتوری (Code Repository) پر کاربرد است که آشنایی با آن مانند ابزار ورژن کنترل Git برای هر برنامه نویسی ضروری است.
SSH
SSH مخفف Secure Shell به معنای پوسته امن بوده و یکی از پروتکل های شبکه است که هر برنامه نویس وب باید با آن آشنا باشد. وظیفه پروتکل SSH ایجاد یک ارتباط امن بین کلاینت و سرور است. روال کار SSH به این صورت است که قبل از ارسال اطلاعات به سرور، آنها را در سمت کلاینت (بدون دخالت کاربر) رمزگذاری کرده و سپس ارسال می کند.
HTTP / HTTPS
پروتکل HTTP و نسخه امن آن یعنی پروتکل HTTPS ستون اصلی وب بوده و یادگیری آنها برای هر برنامه نویس وب اجباری است.
Design Patterns
در مبحث مهندسی نرم افزار، موضوعی داریم به نام الگوهای طراحی (Design Patterns). دیزاین پترن ها یا الگوهای طراحی، راه حل هایی با قابلیت استفاده مجدد، برای مشکلات رایج در یک زمینه خاصی از طراحی نرم افزار هستند. دیزاین پترن ها به معنای کلاس، بسته یا کتابخانه نیستند که بتوانیم آنها را به برنامه خود متصل کنیم و منتظر معجزه باشیم! بلکه دستورالعمل هایی برای چگونگی مقابله با مشکلات خاص هستند. دستورالعمل هایی که در شرایط خاص، چگونگی مقابله با مشکلات خاص را برای ما مشخص می کنند.
Character Encoding
اگر بخواهید اپلیکیشنی بنویسید که قرار است به زبان های مختلف نمایش داده شود، باید با انکودینگ کاراکترها آشنا باشید. Character Encoding، به مرورگر می گوید که اطلاعات را چگونه نمایش دهد. مسئله ای که برنامه نویسان ایرانی خیلی با آن مواجه می شوند، نمایش صحیح کاراکترهای فارسی در وب است. برای این منظور شما باید با انکودینگ UTF 8 کاملاً آشنایی داشته باشید.
۲- Front End
اگر تصمیم گرفتید امسال یک برنامه نویس فرانت اند وب حرفه ای شوید، باید Road Map زیر را دنبال کنید. روی باکس های زرد رنگ تمرکز کنید. باکس های زرد رنگ، به زبان ها و تکنولوژی های مهم و ضروری اشاره دارند، باکس های دیگر اختیاری یا مکمل هستند و به مرور می توانید آن تخصص ها را هم کسب کنید.
Learn the Basics
همانطور که در تصویر نقشه راه فرانت اند مشاهده کردید، قبل از شروع یادگیری زبان های HTML و CSS و JavaScript به توصیه شده که با اصول و مبانی وب آشنا شوید (Basics). منظور از این اصول، همان اینترنت و اپلیکیشن های وب و پروتکل هایی مانند HTTP و … است که در بخش مهارت های عمومی نیز به برخی از آنها اشاره شد. بنابراین اگر قبلاً با اصول اولیه وب آشنا شده این می توانید از این بخش عبور کنید.
HTML و CSS
Html و Css از اجزای جدا نشدنی هر وب سایت بوده و هیچ وب سایتی نیست که از این دو زبان (بهتر است بگوییم نشانه گذاری) استفاده نکرده باشد. Html ساختار سایت را می سازد و Css به آن استایل و زیبایی می دهد و موجب افزایش ویژوالیتی سایت می شود. اگر قصد دارید یک توسعه دهنده فرانت اند حرفه ای شوید، باید به Html و Css کاملاً مسلط شوید.
JavaScript
دقیقاً همانطور که شیء گرایی ۴ ستون دارد (انتزاع – بسته بندی – چند ریختی – وراثت)، توسعه وب هم ۳ ستون دارد (CSS – HTML – JavaScript). وظیفه جاوا اسکریپت این است که با افزودن قابلیت تعامل، به ساختمان بی روح ایجاد شده توسط HTML و CSS، جان ببخشد. تمام ویژگی های حرکتی و تعاملی که در وب سایت های مدرن می بینید، به واسطه جاوا اسکریپت عملی شده و هر برنامه نویس فرانت اند باید به این زبان مسلط باشد.
Package Manager
پس از اینکه به ستون های توسعه وب (CSS – HTML – JavaScript) مسلط شدید، نوبت آن می رسد که دانش خود را فراتر ببرید. از این نقطه به بعد با تکنولوژی های پیشرفته تری آشنا خواهید شد که شاید نتوان با یک ویرایشگر و مرورگر ساده، برنامه نویسی آنها را انجام داد. در واقع برای کار با این تکنولوژی ها لازم است پکیج های آنها را به همراه پکیج های پیش نیاز در سیستم خود نصب کنید. در اینجا شما نیاز به ابزاری دارید که در مدیریت پکیج های مربوط به این تکنولوژی ها به شما کمک کند. برای این کار می توانید از یک پکیج منیجر (Package Manager) مانند npm یا yarn استفاده کنید.
CSS Framework
مطمئناً شما با CSS می توان همه استایل های روتین و ساده را مدیریت کرد. ولی برای اینکه ویژگی های مدرن (مانند ریسپانسیو بودن سایت) و استایل های پیشرفته و خاصی را با کمترین کدنویسی به سایت خود اضافه کنیم باید از فریم ورک های CSS مانند بوت استرپ (BootStrap) استفاده کنیم.
JS Frameworks
امروزه جاوا اسکریپت به شدت در حوزه طراحی وب محبوب شده و فریم ورک های جاوا اسکریپت از جمله React.Js , Angular , Vue.Js , Vuex توسط اغلب برنامه نویسان، در قسمت فرانت اند استفاده می شود. فریم ورک ها یک ساختاری برای منظم کردن کدهای شما فراهم کرده اند و علاوه بر آن توسعه وب را سریع تر و راحت تر کرده اند.
انگولار (Angular) یکی از فریم ورک های جاوا اسکریپت برای توسعه وب اپلیکیشن ها می باشد که توسط کمپانی بزرگ گوگل (Google) ارائه شده است.
React نیز مانند انگولار، یک فریم ورک دیگر برای توسعه وب اپلیکیشن ها می باشد که توسط کمپانی فیسبوک (Facebook) ارائه شده است. React کمک می کند تا کامپوننت هایی با قابلیت استفاده مجدد بسازید و از آنها برای ساخت صفحات وب تعاملی با ظاهری زیبا استفاده کنید.
Vue.Js در سال اخیر به شدت محبوب شده و افراد زیادی استفاده از آن را توصیه می کنند. اگر هنوز فریم ورک خاصی را کار نکرده اید، می توانید از فریم ورک Vue Js استفاده کنید.
۳- Back End
اگر تصمیم گرفتید امسال یک برنامه نویس بک اند وب حرفه ای شوید، باید Road Map زیر را دنبال کنید. روی باکس های زرد رنگ تمرکز کنید. باکس های زرد رنگ، به تکنولوژی های مهم و ضروری اشاره دارند، باکس های دیگر اختیاری یا مکمل هستند و به مرور می توانید آن تخصص ها را هم کسب کنید.
Node.Js
برای برنامه نویسی بک اند وب سایت یا وب اپلیکیشن، گزینه های زیادی دارید. برای مثال می توانید از Java+Spring یا Python+DJango و یا از Ruby+Rail استفاده کنید. ولی چون استفاده از Node.Js نسبت به بقیه، مزایای بیشتری دارد، در سال های اخیر محبوبیت فریم ورک node js خیلی بالاتر رفته است. مهمترین مزیت فریم ورک Node.Js این است که شما کل وب اپلیکیشن را با یک زبان برنامه نویسی (جاوا اسکریپت) می نویسید. بنابراین آموزش node js را فراموش نکنید و یادگیری این فریم ورک را در برنامه های خود داشته باشید.
Java
با استفاده از زبان Java Core یا Java+Spring Boot نیز می توانید یک Back End با کارایی بالا طراحی کنید.
Python
پایتون نیز یک زبان بی نظیر با کتابخانه ها و فریم ورک های قدرتمند می باشد. اگر شما تصمیم دارید از زبان برنامه برنامه نویسی Python برای توسعه بک اند استفاده کنید می توانید از فریم ورک DJango استفاده کنید. فریم ورک دیجنگو، یک فریم ورک توسعه وب فول استک برای برنامه نویسان پایتون می باشد.
حتما می پرسید بهترین دوره آموزش پایتون کدام دوره است؟ برای شروع یادگیری پایتون بهتر است پایتون را با بهترین آموزش پایتون شروع کنید.
Ruby
روبی هم زبان قدرتمند دیگری برای توسعه وب است که دارای فریم ورک بزرگی به نام Rail می باشد. فریم ورک Rail موجب می شود توسعه وب، بسیار سریع و ساده شود. این موضوع به خاطر مزایای زبان روبی است که بسیار نزدیک به زبان انسان است.
PHP
بهتر است هر نکته منفی که از این زبان در ذهن دارید را فراموش کنید. هنوز هم PHP و MySQL ساده ترین و بهترین زبان برنامه نویسی سمت سرور بوده و تقریباً ۵۰% از اینترنت با همین ترکیب بنا شده است.
درباره مجید شبیری
کارشناس ارشد فناوری اطلاعات از دانشگاه صنعتی امیرکبیر. مدیر و مؤسس "علوم نوین امیرکبیر"، متخصص برنامه نویسی، شبکه، لینوکس و امنیت. از سال 84 همزمان با شروع تحصیلات دانشگاهی، وارد حوزه تخصصی مهندسی نرم افزار شدم و اکنون مشغول تحقیق، توسعه و آموزش در حوزه بلاک چین هستم و معتقدم بلاکچین به زودی فضای کسب و کارها را منقلب خواهد کرد.
نوشته های بیشتر از مجید شبیریمطالب زیر را حتما مطالعه کنید
دوره های آموزشی مرتبط
بوت کمپ پایتون و علم داده
دوره برنامه نویسی NFT و متاورس (Metaverse)
دوره اصول و مبانی برنامه نویسی
دوره آموزش سالیدیتی (Solidity)
دوره تخصصی امنیت و بازنگری قرارداد هوشمند (Audit)
1 دیدگاه
اولین نفری باشید که برای این نوشته دیدگاه می نویسد.
سلام
در قسمت ابتدایی توضیحاتتون، هر دوجا نوشتین Front End . اصلاح بفرمایید.
سلام دوست گرامی
ممنون از دقت نظر شما
اصلاح شد.
آرزوی موفقیت داریم برای شما و همه دوستان علاقمند به دنیای برنامه نویسی بخصوص طراحی وب.