نقشه راه توسعه دهندگان وب

نقشه راه توسعه دهندگان وب

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

نقشه راه توسعه دهندگان وب چیست؟

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

توی نقشه راه توسعه دهندگان وب چه چیزهایی یاد میگیریم؟

همونطور که گفتم علاوه بر مفاهیم پایه طراحی و توسعه وب، ما با موضوعات متنوعی آشنا میشیم از جمله:

• یاد میگیریم که برنامه نویسی تحت وب چی هست؟
• از کجا باید برنامه‌نویسی رو شروع کنیم؟
• برای برنامه نویسی تحت وب و توسعه وب چه زبانهایی رو باید بگیریم؟
• کدام موارد رو باید ابتدا یاد بگیریم و باید از چه ابزاری استفاده کنیم؟
• هر زبان یا نرم افزار چه کاربردی داره و چه چیزهایی جایگزین همدیگه میتونن باشن؟
• و دهها مورد دیگه که مربوط به نحوه شروع و مسیر یادگیری طراحی سایت، برنامه نویسی تحت وب و توسعه وب هست

پس بریم که نقشه راه رو با همدیگه یاد بگیریم:

این نقشه راه مناسب چه کسانی است؟

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

برنامه نویسی وب رو از کجا شروع کنم؟ اولین قدم چیست؟

برنامه‌نویسی تحت وب و توسعه وب توی ۲ بخش تقسیم میشه. شما میتونید توی یکی از این دو بخش یا هر دو بخش متخصص بشید. این دو بخش عبارتند از:

• front-end فرانت اند
• back-end بک اند

همونطور که گفتم شما میتونید تو یکی از این دو بخش یا هر دو بخش متخصص بشید ولی یادگیری بیس اولیه فرانت اند برای برنامه‌نویسان بک اند هم ضروری هست. پس نقطه شروع مشترک همه front-end است.

Front-end فرانت اند چیست؟

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

زبان‌های مورد استفاده در بخش front-end چیست؟

توی اینفوگرافیک زیر ترتیب زبان‌ها، پکیج‌ها، کتابخانه‌ها و تکنیک‌هایی که باید در بخش فرانت اند یاد بگیرید رو میتونید ببینید.

احتمالا یکم ترسناک به نظر برسه. این همه مطلب و موضوع رو باید یاد گرفت؟! ولی جای نگرانی نیست. شما لازم نیست همه این مطالب رو یکجا یاد بگیرید و بعد از اینکه همه رو تمام و کمال یاد گرفتید وارد مرحله بعد بشید. یادگیری همه این مطالب و تسلط به اونها شاید چند سال زمان ببره ولی شما میتونید به راحتی با یادگیری HTML و CSS و همچنین آشنایی اولیه با جاوا اسکریپت درک بسیار بالایی از صفحات وب و بخش فرانت اند پیدا کنید و بعد از اون میتونید در بخش ظاهر وبسایت وارد بازار کار بشید و همزمان که در این موضوعات تجربه کسب میکنید مباحث پیشرفته فرانت اند رو هم دنبال کنید.

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

برای شروع یادگیری فرانت اند، دوره های زیر رو به ترتیب دنبال کنید:

دوره آموزش HTML

دوره آموزش CSS

دوره آموزش جاوا اسکریپت

back-end بک اند چیست؟

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

زبان‌های مورد استفاده در بخش back-end چیست؟

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

از این همه زیرشاخه و گزینه نترسید. قرار نیست شما در ابتدای کار همه اینها رو یاد بگیرین. بلکه این تمام چیزی هست که باید تا انتهای مسیر یاد بگیرید. اه شما توی همه موارد بالا متخصص باشید میشه گفت کاری نیست که از عهده اون تو زمینه توسعه وب نتونید انجام بدین. پس از ابتدا شروع کنید و کم کم به علم و تجربه خودتون اضافه کنید.

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

برای یادگیری آسونتر و راحتتر لازم هست که با بعضی مفاهیم اولیه برنامه نویسی وب آشنا بشین. پس با ادامه این نوشتار همراه باشین:

گام اول: یادگیری و تسلط بر HTML

در اولین گام نقشه راه توسعه دهندگان وب به سراغ HTML میریم.

همونطور که گفتم فرقی نمیکنه که شما قصد داشته باشین که توی بخش فرانت اند فعالیت کنید یا بک اند یا اینکه قصد داشته باشین تو هر دوی اینها متخصص بشید. به هر حال شما باید HTML رو به عنوان اولین گام یاد بگیرید.

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

شما میتونید از طریق دوره آموزش رایگان HTML با این زبان آشنا بشید و اولین گام خودتون رو توی این مسیر بردارید.

<!DOCTYPE html>
<html lang="en">

<meta charset="utf-8">
<title>page Title</title>

<body>
   <p>my first html document.</p>
</body>

</html>

در بالا یه نمونه ی ساده HTML رو میبینید.

گام دوم: یادگیری و تسلط بر CSS

دومین گام مهم در نقشه راه توسعه دهندگان وب، یادگیری زبان CSS هست. این زبان به ما این امکان رو میده که ظاهر زیبا و مناسبی رو برای کدهای HTML خودمون ایجاد کنیم.

شما میتونید از طریق دوره آموزش رایگان CSS با این زبان آشنا بشید و دومین گام مهم توی این مسیر رو بردارید.

ما کدهای CSS رو میتونیم هم داخل فایل های HTML بنویسیم و هم بصورت مجزا در یک فایل دیگر با پسوند css ذخیره کنیم و بعد از آن در داخل فایل HTML استفاده کنیم.

<!DOCTYPE html>
<html>
<head>
<style>

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>ادمین سایت</h1>

</body>
</html>

توی قطعه کد بالا نمونه ای از کدهای CSS که درون فایل HTML استفاده شده است رو میبینید.

گام سوم: جاوا اسکریپت

دو گام قبلی در نقشه راه توسعه دهندگان وب برای همه یکسان بود. یعنی فرقی نمیکنه شما قصد داشته باشین که برای فرانت اند کد بزنید یا بک اند یا هر دو. باید هر دو زبان HTML و cssرو بخوبی یاد بگیرید و بهش مسلط بشید.

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

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

برخی معروفترین فریمورک‌های جاوا اسکریپت:

• Angular JS
• React
• Vue.Js
• Ember

ادامه مسیر برای هر گروه متفاوت هست و عوامل زیادی میتونه شما رو توی یک مسیر متفاوت قرار بده. طبق اینفوگرافیک بالا شما چند انتخاب پیش رو دارید. عواملی که توی تصمیم شما میتونه تاثیرگذار باشه عبارتند از:

• علاقه شخصی
• نیاز بازار
• و…

شما میتونید از طریق دوره رایگان آموزش جاوا اسکریپت، با این زبان برنامه نویسی آشنا بشید و به اون تسلط پیدا کنید.

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

پروتکل HTTP

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

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

هرچند با وجود تکنولوژی های جدید و پیدایش CMS ها و… کمتر صفحه وب ایستا یا استاتیکی در وب پیدا میکنید ولی باید بدونید که صفحات وب به طور کلی به دو دسته ایستا(استاتیک) و پویا (داینامیک) تقسیم میشن.

صفحات ایستا یا استاتیک صرفا با استفاده از HTML, CSS, JS ایجاد شدند و اطلاعات آنها همیشه ثابت هست. حتی برخی از کارشناس‌ها حضور کدهای جاوا اسکریپت در یک صفحه وب رو هم عامل پویا بودن اون میدونن و معتقدند صفحه که صرفا از HTML و css ساخته شده باشه یه صفحه ایستا هست.

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

برخی از تفاوت های صفحات پویا و ایستا

• صفحات استاتیک محتوای یکسانی رو برای همه کاربران نمایش میده ولی صفحات داینامیک میتونن برای هر کاربر محتوای جداگانه ای نمایش بده
• صفحات داینامیک از بانک های اطلاعاتی استفاده میکنن ولی صفحات استاتیک اینگونه نیستن
• صفحات داینامیک از زبانهای برنامه نویسی در بک اند استفاده میکنن ولی صفحات استاتیک اینگونه نیستند
• سرعت صفحات استاتیک نسبت به صفحات داینامیک بیشتر است
• هزینه طراحی صفحات داینامیک بیشتر از صفحات استاتیک است
• صفحات داینامیک پیچیده‌تر از صفحات استاتیک هستند

طراحی رسپانسیو

یکی از موضوعات مهم در طراحی صفحات وب، طراحی رسپانسیو Responsive Design هست. به این معنی که صفحه وب طراحی شده در هر صفه نمایشی بصورت مناسب نمایش داده بشه. با توجه به اینکه امروزه دیوایس های مختلفی در اختیار کاربران است و از صفحه کوچک گوشی های هوشمند تا تلویزیون های هوشمند، همگی قابلیت نمایش صفحات وب رو دارن، باید صفحات وب به گونه ای طراحی بشن که برای هر دیوایسی تصویر مناسب و متناسب با اون دستگاه رو نمایش بده. این همان طراحی رسپانسیو یا واکنشگرا هست. یکی از تخصص هایی که طراح فرانت اند باید یاد بگیرد طراحی رسپانسیو است. من در درس طراحی رسپانسیو از دوره آموزش CSS مقدماتی از این موضوع رو مطرح کردم.

ما با بررسی عرض صفحه نمایش مخاطب کدهای CSS اختصاصی برای هر عرضی را مینویسیم. به این ترتیب اگه عرض صفحه نمایش مخاطب با شرط ما در css همخانی داشته باشه، تنظیمات اختصاصی اون بخش اعمال میشه. قطعه کد CSS زیر رو ببینید:

	h2 { font-size: 23px; }
	@media (max-width: 425px) {
		h2 { font-size: 18px; }	
	}

مدیاکوئری ها در CSS این امکان رو به ما میدن تا بتونیم صفحه وب رسپانسیو طراحی کنیم.

همچنین ما میتونیم از بوت استرپ استفاده کنیم. این کار باعث میشه که خروجی ما رسپانسیو باشه. در حقیقت بوت استرپ همان کاری را که ما باید در CSS انجام میدادیم را برای ما انجام داده و کار را راحتتر کرده.

یک نمونه دیگه از این پکیج‌ها w3.css هست که امکاناتی مشابه bootstrap رو بصورت رایگان در اختیار ما قرار میده.

موبایل فرست چیست؟

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

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

مفاهیم UI و UX

در ادامه مسیر نقشه راه توسعه دهندگان وب به سراغ UI و UX میریم.

ما در فرانت اند با دو مفهوم مهم و پرکاربرد UI و UX سروکار داریم. UI در واقع مباحث مربوط به طراحی رابط کاربری هست و UX مربوط به موضوع طراحی تجربه کاربری هست. بیایید با مقایسه برخی از مثالهای آنها تفاوتشان را بیشتر بشناسیم:

مثال‌هایی از UI

• ظاهر منو چجوری باشه
• رنگ دکمهی جستجو با رنگ اصلی سایت یکسان باشه
• باکس بنرهای تبلیغاتی چجوری طراحی بشه

مثال‌هایی از UX

• توی منو چه گزینه‌هایی رو قرار بدیم
• باکس جستجو کجای صفحه قرار بگیره
• بنرهای تبلیغاتی کجای صفحه باشن

در دوره رایگان UI و UX به طور مفصل در خصوص این دو موضوع صحبت کردم.

ایجکس Ajax چیست؟

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

مهمترین مزایای ایجکس

• امکان خواندن اطلاعات بعد از لود صفحه
• بروزرسانی اطلاعات صفحه بدون نیاز به بارگذاری مجدد کل صفحه
• ارسال داده به سمت سرور در پس زمینه سایت

مهمترین معایب ایجکس

• نیاز به درخواست xmlhttp که توسط بعضی از مرورگرها پشتیبانی نمیشه
• در صورت غیرفعال بودن جاوا اسکریپت توسط کاربر دستورات AJAX اجرا نمیشه
• اشکال زدایی و تست برنامه‌ای ایجکس دشوارتر هست

XML و کاربرد آن

یک زبان نشانه‌ذاری است که برای دسته‌بندی و انتقال داده‌ها ازش استفاده میشه و توی ظاهر سایت هیچ تاثیری نداره. در اینجا یک نمونه کد XML رو میبینید:

<?xml version="1.0" encoding="UTF-8"?>
<breakfast_menu>
<food>
    <name>Belgian Waffles</name>
    <price>$5.95</price>
    <description>
   Two of our famous Belgian Waffles with plenty of real maple syrup
   </description>
    <calories>650</calories>
</food>
</breakfast_menu>

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

مفهوم JSON و کاربردهای جیسون

جیسون یه قالب سبک وزن برای ذخیره و حمل و نقل داده هاست. فایل های JSON هم برای انسان و هم برای کامپیوتر خوانایی دارن. شاید همین امر دلیل اصلی محبوبیت جیسون باشد. معمولا از جیسون برای ارسال داده بین سرور و صفحه وب استفاده میشه. البته امروز APIها عموما بر پایه جیسون پیاده سازی. به این ترتیب نه تنها انتقال داده بین سرور و صفحه وب بلکه انتقال داده و اپلیکیشن های موبایل هم با استفاده از جیسون متداول و پرکاربرد هست.

کد جیسون شامل داده‌ها در قالب نام/مقدار که در داخل اشیاء با علامت های {} و آرایه‌ها با علامت [] ذخیره سازی میشنه

در زیر یک نمونه کد جیسون رو میتونید ببینید:

{
"employees":[
    {"firstName":"John", "lastName":"Doe"}, 
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]
}

فریمورک

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

ما هم برای بخش فرانت اند و هم برای بخش بک اند فریم ورک های زیادی داری داریم

فریم ورک های فرانت اند

این فریم ورک ها بیشتر برای کار روی CSS طراحی شده‌اند.

فریمورک های بک اند

تعداد فریم ورک های بک اند خیلی زیاد است به عنوان مثال لاراول برای زبان php یکی از فریم ورک های محبوب و پرطرفدار است.

مزایا و معایب فریم ورک ها

مزایای استفاده از فریم ورک:

• کاهش زمان انجام پروژه
• استفاده از توابع موجود
• کاهش هزینه‌های اجرای پروژه
• استاندارد شدن کدها

معایب استفاده از فریم ورک:

• عدم درک عمق مفاهیم کدها
• تحمیل کدهای اضافی
• احتیاج به صرف زمان جهت یادگیری

بوت استرپ Bootstrap چیست

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

جی کوئری jQuery چیست؟

jQuery یه کتابخانه برای زبان برنامه نویسی جاوا اسکریپت هست که امکانات خیلی زیادی که نیاز به دهها خط کد در جاوا اسکریپت هست را در یک خط در اختیار توسعه دهنده قرار میده. جی کوئری خیلی از چیزهای پیچیده در جاوا اسکریپت رو هم بصورت ساده در اختیار توسعه دهنده قرار میده. پیشنهاد میشه بعد از یادگیری جاوا اسکریپت به سراغ جی کوئری برید.

باید بدونید که شرکتهای بزرگی توی حوزه وب از جی کوئری استفاده میکنن. شرکتهایی مثل گوگل، مایکروسافت، نت فلیکس و…

چرا جی کوئری؟

• باعث کوتاه شدن کدها نسبت به جاوا اسکریپت میشه
• به کمک node قابل استفاده سمت سرور هست
• کتابخانه‌های زیادی هستن که وابستگی به جی کوئری دارن

$("#hide").click(function(){
    $("p").hide();
});

$("#show").click(function(){
    $("p").show();
});

در بالا نمونه کدی از جی کوئری میبینید.

npm چیست؟

npm یه کتابخانه بزرگ هست که یک نصاب و package manager به حساب میاد. این کتابخانه open source و رایگان هست.

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

پیش پردازنده یا preprocessor چیست؟

در هنگام کدنویسی HTML و CSS زمان خیلی زیادی صرف نوشتن کدهای تکراری میشه. از طرفی این زبانها امکاناتی مثل متغیر و… رو پشتیبانی نمیکنند. همینطور ما هیچ چاره ای بجز html و css هم نداریم 🙁 یعنی در نهایت باید کدهای html و css رو تحویل مرورگر بدیم. همین دلایل کافی بود تا راه حلی بنام پیش پردازنده یا preprocessor خلق بشه. این برنامه‌ها امکانات بسیار خوب و کارآمدی رو در اختیار ما قرار میدن تا بتونیم کارهای تکراری و دشواری که زبان html و css راه حلی برای اونها ندارن رو راحتتر انجام بدیم. کدهایی که در این برنامه‌ها مینویسیم به html و css ترجمه میشه و ما میتونیم به راحتی از اونها استفاده کنیم. برای html میتونیم Haml رو نام ببریم که یه preprocessor هست و برای CSS هم پیش پردازنده های Sass و Less دو گزینه معروف و پرکاربرد هستند.

نمونه زیر مثالی از Haml هست:

%body
  %header
    %h1 Hello World
  %section
    %p Lorem ipsum dolor sit amet.

در نتیجه کد haml بالا خروجی HTML زیر تولید میشه:

<body>
  <header>
    <h1>Hello World</h1>
  </header>
  <section>
    <p>Lorem ipsum dolor sit amet.</p>
  </section>
</body>

بیایید یک نمونه از پیش پردازنده Sass هم ببینیم

.new
  color: #ff7b29
  font-weight: bold
  span
    text-transform: uppercase

نتیجه کامپایل شده کد بالا در CSS کد زیر میشه:

.new {
  color: #ff7b29;
  font-weight: bold;
}
.new span {
  text-transform: uppercase;
}

گیت هاب چیست؟

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

Angular JS چیست؟

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

مزایای Angular JS

• تزریق وابستگی یا dependency injection
• کدنویسی کمتر
• دایرکتیوها
• ادغام پذیر
• تست‌ پذیری راحت

React چیست؟

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

بانک اطلاعاتی یا دیتابیس چیست؟

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

DBMS یا سیستم مدیریت پایگاه داده

نرم افزاری که برای مدیریت پایگاه داده استفاده میشه رو DBMS مینامیم. ما با استفاده از این نرم افزارها میتونیم بانک های اطلاعاتی خودمون رو مدیریت کنیم. در تصویر زیر اسامی برخی از این نرم افزارها رو میبینید:

SQL چیست؟

اس کیو ال یه زبان استاندارد برای دسترسی و کار با بانک های اطلاعاتی و پایگاه‌های داده هست. SQL دستورات متعددی داره که به ما این امکان رو میده که بتونیم اطلاعاتی رو از بانک اطلاعاتی دریافت کنیم، اونها رو بروزرسانی کنیم، حذف کنیم و یا اطلاعاتی جدیدی رو به بانک های اطلاعاتی اضافه کنیم.

PHP چیست؟

زبان برنامه‌نویسی سمت سرور که برای تولید نرم افزارهای تحت وب و وب‌سایت استفاده میشه. PHP یه زبان پردازشی هست و ظاهر وبسایت‌هایی که با PHP ساخته میشه رو باید با استفاده از HTML و CSS پیاده سازی کنیم.

ویژگی های PHP

• مفسری
• شیءگرا
• مولتی پلتفرم
• پشتیبانی از دیتابیس‌ها
• یادگیری آسان

سیستم مدیریت محتوا CMS

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

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

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