مهدی غفاری
مهدی غفاری
خواندن ۸ دقیقه·۴ سال پیش

دریچه ورود به دنیای برنامه نویسی وب+مفاهیمی که باید بدانید!


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

یاد گیری برنامه نویسی انتخاب می کنند. با ما باشید تا بیشتر با این مسیر آشنا بشید.

وقتی وارد اقیانوس برنامه نویسی و کد نویسی میشید، باید زود یه کشتی انتخاب کنید.

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

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

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

و مکمل هم داره : یک بخش سمت کاربر یا Frontend دو بخش سمت سرور یا  Backend هستش.

البته اینم بگم که Back-end و Front-end کاملا متفاوت اند. اینجا من می خوام شمارو به قسمت

فرانت اند یا همون سمت کاربر کشتی . بعد برای شما تک تک بخش ها رو معرفی می کنم.

تا شما رو بیشتر با این قسمت جذاب و شگت انگیز آشنا کنم. با من همراه باشید و عناوین زیر را دنبال کنید:

طراحی وب و آشنایی بیشتر با Front-end :

خوب اول بریم تا یه ذره بیشتر با Front–end آشنا بشیم. این چوب هایی که ما روش ایستادیم،

اون پله ها، اون پنجره، نرده های دور و … همشون قسمت  Front-end این کشتی حساب میشن.

front  یعنی جلو، هر چیزی که شما تو صفحه ی مانیتورتون از یه سایتی می بینید ، Front-end اون سایت محسوب میشه.

یه مثال دیگه : ماشین دو تا قسمت اصلی داره یکی بدنه و دیگری موتور . بدنه ی ماشین همون Front-end ماشین میشه .

موتور بخش قسمت مهم دیگه ای از ماشین هستش که تو طراحی سایت بهش می گند back-end که جلو تر باهاش آشنا میشیم .

?

Back-End چیست ! چرا و چگونه؟

بد نیست که به شما برادر front-end یعنی هم Back-end رو معرفی کنم. بزارین اینجوری سر صحبت رو باز کنم :

یه سایت اگه فقط قسمت Front-end داشته باشه، ارزشی نداره و فقط یه قالب هنوز تبدیل به یه سایت

نشده. یعنی یه کشتی با چند تخته چوب و تعدادی الوار رو سر هم کنید. آیا این چیزی که شما

ساختید تبدیل به قایق میشه ؟ و اگر داخل آب قرارش بدید شروع به حرکت میکنه ؟

نه این کشتی هیچ چیزی برای حرکت کردن نداره تا وقتی که شما قسمت محرک اون کشتی رو داخلش

قرار ندید. قسمت محرک سایت بخش  Backend  یا سمت سرور هستش.اون باعث میشه

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

HTML و CSS رو رایگان یاد بگیر ?

?

در طراحی وب سرور چیه ؟ و کلاینت چیه ؟

قسمت سمت کاربر کلاینت سایت نامیده میشه و قسمت سرور مغز و مرکز فرماندهی

سایت ما هستش یعنی همون Back-end . این سرور رو چند تا چیز تشکیل میده :

یکی پایگاه داده دومی کد ها و اطلاعات سایت ما از جمله عکس های سایت و …

پایگاه داده جایی هست که اطلاعات ما در اون ذخیره میشه، مانند: لیست کاربران

لیست محصولات ، لیست مطالب و غیره. حالا به جایی رسیدیم که باید فکر این

باشیم که محرک و چهارچوب کشتیمون رو بسازیم ( یعنی همون فرانت اند و بک اند).

?

در طراحی وب زبان برنامه نویسی و نشانه گذاری و پیش پردازنده چی هست؟

اگه شما بخوای به کامپیوتر یه چیزیو بفهمونی و اون رو مثلا بخوای به زبان فارسی بگی !

و بنویسی ای کامپیوتر عزیز ! یه مستطیل درست کن اسمش رو بزار قسمت جستوجو

و هر کاربری توش کلمه ای سرچ کرد، برو داخل پایگاه داده ی من بگرد،  اگه مطلبی بود

بردار بیار. مطمئنا جواب شما منفی هست، چون کامپیوتر چیز هایی که شما تایپ کردین

رو نمی فهمه چه برسه درکشون کنه و به شما خروجی بده . شما باید از زبان های برنامه نویسی استفاده کنید.

شاید این سوال واستون پیش بیاد که چرا کامپیوتر زبان برنامه نویسی رو میفهمه، ولی

زبان من رو که همون انگلیسی تایپ میکنم متوجه نمیشه ؟؟ زبان های برنامه نویسی

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

که این بحث رو پیاده سازی کرده ! به  دو زبان مسلطه، یکی زبان خود کامپیوتر و دومی زبان برنامه

نویسی . اون آقا که  دو زبان رو بلده میاد یه دیکشنری مانند درست می کنه ولی نه مثل دیکشنری

های خودمون ! اول یه فایلی درست میکنه، و تمام معادل دستورات زبان برنامه نویسی و خود

کامپیوتر رو واسش مینویسه. مثال : فرض رو بر این بزارید که اصغر داستان ما

همین اقاهه هست ! اون میاد تو زبان برنامه نویسیش تعریف میکنه که ! اگه کسی اومد و نوشت

chap_kon(“slam Ali”)

توی این دیکشنری من معادلش بشه فلان مقادیر که اون رو کامپیوتر باید بفهمه

و در آخر علی رو براش چاپ کنه ! درکل این بحث یکم پیچیدس ! بخوام خیلی ساده تر

براتون صحبت کنم ! زبان های برنامه نویسی مثل یک رابط بین شما و کامپیوترتون هستند !

مثل یه طوطی می مونه که بهش کلمه دوست دارم رو یاد بدم و بگم برو به فلان خانم اینو بگو (((:

?

حالا این وسط پای زبان هایی زبان نشانه گذاری و زبان پیش پردازنده وسط میاد :/ اینا چی می گن ؟

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

در طراحی وب زبان نشانه گذاری چیست؟

زبان نشانه گذاری یا Markup Language ، زبانی قابل درک واسه مرورگر هستش،  زبانی که

مرورگر مرورگر دیکشنری شو داره و می تونه واسه شما خروجی داشته باشه، اگه کدی نوشته باشید

. زبان های نشانه گذاری  یه سری از ویژگی های زبان های برنامه نویسی رو ندارند، مثل متغیر ها و

تابع ها . زبان های نشانه گذاری مانند HTML ، X HTML ، XML و غیره. یه چیزم بگم

بد نیست بدونید : پیش‌پردازنده برنامه ای رو میگند که داده های ورودی رو می خونه و بعدش

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

را اصطلاحاً فرم پیش‌پردازش‌شده داده ورودی، که غالباً به وسیله یک برنامه دومی مانند همگردان

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

?

ما چجوری می تونیم فایل دیکشنری رو دانلود کنیم و بگیم برو دستورات برنامه نویسی ما رو بر حسب اون

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

پیدا کردن یک محیط کد نویسی برای طراحی وب

?

شما یه محیط  برنامه نویسی مرتبط با زبان برنامه نویسی خودتون از تو اینترنت پیدا می کنید دانلودش

میکنید و نصبش میکنید. بعد می رید تو این برنامه یه پروژه ی جدید ایجاد می کنید و شروع می کنید به

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

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

و می رید رو فایلتون کلیک می کنید. بعد مرورگرتون کد هاتون رو اجرا می کنه و به شما نتیجه رو نشون میده.

?

برای  ساده شدن و آسان تر شدن برنامه نویسی آیا راهی وجود داره ؟

یا باید فقط از کد های طولانی و تکراری استفاده کنیم ؟ شما میتونید از کتابخانه ها و

فریمورک ها برای کوتاه شدن و راحت تر شد کد زدنتون استفاده کنید. توی فریمورک ها و

کتابخانه ها از دستورات اضافه فاکتور گرفته شده است. برای دستورات بلند و تکراری

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

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