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

طراحی وب یکی از دریچه های ورود به دنیای برنامه نویسی هست. خیلی ها برای شروع بهیاد گیری برنامه نویسی انتخاب می کنند. با ما باشید تا بیشتر با این مسیر آشنا بشید.وقتی وارد اقیانوس برنامه نویسی و کد نویسی میشید، باید زود یه کشتی انتخاب کنید.تا در این جهان پر از امواج راه خودتون رو گم نکنید. یکی از کشتی هایی که می تونیدانتخاب کنید که غرق نشید، کشتیه طراحی وب هستش. تو این کشتی زیاد طول نمیکشهکه به سکان برسید و سریع مسیر خودتون رو پیدا می کنید. این کشتی دو قسمت جدا از همو مکمل هم داره : یک بخش سمت کاربر یا Front–end دو بخش سمت سرور یا Back–end هستش.البته اینم بگم که 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 داشته باشه، ارزشی نداره و فقط یه قالب هنوز تبدیل به یه سایتنشده. یعنی یه کشتی با چند تخته چوب و تعدادی الوار رو سر هم کنید. آیا این چیزی که شماساختید تبدیل به قایق میشه ؟ و اگر داخل آب قرارش بدید شروع به حرکت میکنه ؟نه این کشتی هیچ چیزی برای حرکت کردن نداره تا وقتی که شما قسمت محرک اون کشتی رو داخلشقرار ندید. قسمت محرک سایت بخش Back–end یا سمت سرور هستش.اون باعث میشهتو سایت اخباری خبر ها از پایگاه داده فراخوانی بشه نمایش داده بشه. یا تو یه سایت فروشگاهی شما بتونید خرید انجام بدید .HTML و CSS رو رایگان یاد بگیر ??در طراحی وب سرور چیه ؟ و کلاینت چیه ؟قسمت سمت کاربر کلاینت سایت نامیده میشه و قسمت سرور مغز و مرکز فرماندهیسایت ما هستش یعنی همون Back-end . این سرور رو چند تا چیز تشکیل میده :یکی پایگاه داده دومی کد ها و اطلاعات سایت ما از جمله عکس های سایت و …پایگاه داده جایی هست که اطلاعات ما در اون ذخیره میشه، مانند: لیست کاربرانلیست محصولات ، لیست مطالب و غیره. حالا به جایی رسیدیم که باید فکر اینباشیم که محرک و چهارچوب کشتیمون رو بسازیم ( یعنی همون فرانت اند و بک اند).?در طراحی وب زبان برنامه نویسی و نشانه گذاری و پیش پردازنده چی هست؟اگه شما بخوای به کامپیوتر یه چیزیو بفهمونی و اون رو مثلا بخوای به زبان فارسی بگی !و بنویسی ای کامپیوتر عزیز ! یه مستطیل درست کن اسمش رو بزار قسمت جستوجوو هر کاربری توش کلمه ای سرچ کرد، برو داخل پایگاه داده ی من بگرد، اگه مطلبی بودبردار بیار. مطمئنا جواب شما منفی هست، چون کامپیوتر چیز هایی که شما تایپ کردینرو نمی فهمه چه برسه درکشون کنه و به شما خروجی بده . شما باید از زبان های برنامه نویسی استفاده کنید.شاید این سوال واستون پیش بیاد که چرا کامپیوتر زبان برنامه نویسی رو میفهمه، ولیزبان من رو که همون انگلیسی تایپ میکنم متوجه نمیشه ؟؟ زبان های برنامه نویسیاز قبل برای کامپیوتر تعریف شده انگار یکی از قبل این زبان ها رو بهش یاد داده . اون شخصیکه این بحث رو پیاده سازی کرده ! به دو زبان مسلطه، یکی زبان خود کامپیوتر و دومی زبان برنامهنویسی . اون آقا که دو زبان رو بلده میاد یه دیکشنری مانند درست می کنه ولی نه مثل دیکشنریهای خودمون ! اول یه فایلی درست میکنه، و تمام معادل دستورات زبان برنامه نویسی و خودکامپیوتر رو واسش مینویسه. مثال : فرض رو بر این بزارید که اصغر داستان ماهمین اقاهه هست ! اون میاد تو زبان برنامه نویسیش تعریف میکنه که ! اگه کسی اومد و نوشتchap_kon(“slam Ali”)توی این دیکشنری من معادلش بشه فلان مقادیر که اون رو کامپیوتر باید بفهمهو در آخر علی رو براش چاپ کنه ! درکل این بحث یکم پیچیدس ! بخوام خیلی ساده تربراتون صحبت کنم ! زبان های برنامه نویسی مثل یک رابط بین شما و کامپیوترتون هستند !مثل یه طوطی می مونه که بهش کلمه دوست دارم رو یاد بدم و بگم برو به فلان خانم اینو بگو (((:?حالا این وسط پای زبان هایی زبان نشانه گذاری و زبان پیش پردازنده وسط میاد :/ اینا چی می گن ؟آیا زبان برنامه نویسی هستند ؟ اگه زبان برنامه نویسی نیستند پس چرا اسمشون زبان برنامه نویسی نیست ؟در طراحی وب زبان نشانه گذاری چیست؟زبان نشانه گذاری یا Markup Language ، زبانی قابل درک واسه مرورگر هستش، زبانی کهمرورگر مرورگر دیکشنری شو داره و می تونه واسه شما خروجی داشته باشه، اگه کدی نوشته باشید. زبان های نشانه گذاری یه سری از ویژگی های زبان های برنامه نویسی رو ندارند، مثل متغیر ها وتابع ها . زبان های نشانه گذاری مانند HTML ، X HTML ، XML و غیره. یه چیزم بگمبد نیست بدونید : پیش‌پردازنده برنامه ای رو میگند که داده های ورودی رو می خونه و بعدشداده ی خروجی‌ای درست می‌کند که برای ورودی یه برنامه ی دیگه استفاده میشه . خروجی پیش‌پردازندهرا اصطلاحاً فرم پیش‌پردازش‌شده داده ورودی، که غالباً به وسیله یک برنامه دومی مانند همگردانمورد استفاده قرار می‌گیرد، می‌گویند. یه چیزی که اون وسط داشتم زبان برنامه نویسی رو توضیح میدادم یادم رفت بگم.?ما چجوری می تونیم فایل دیکشنری رو دانلود کنیم و بگیم برو دستورات برنامه نویسی ما رو بر حسب اوندستورات اجرا کنه ؟؟ شما قرار نیست برید اون فایل هارو پیدا کنید و به کامپیوترتون بگید که بره بر اساس اونا بخونه .پیدا کردن یک محیط کد نویسی برای طراحی وب?شما یه محیط برنامه نویسی مرتبط با زبان برنامه نویسی خودتون از تو اینترنت پیدا می کنید دانلودشمیکنید و نصبش میکنید. بعد می رید تو این برنامه یه پروژه ی جدید ایجاد می کنید و شروع می کنید بهکد زدن. هر وقت کد زدنتون تموم شد، اگه زبان کد زدنتون نیاز به کامپایل داشت که کامپایل میشه وخروجیش رو میبینید. اگه زبان کد نویسی تون از نوع زبان نشانه گزاری بود، فایلتون رو ذخیره میکنیدو می رید رو فایلتون کلیک می کنید. بعد مرورگرتون کد هاتون رو اجرا می کنه و به شما نتیجه رو نشون میده.?برای ساده شدن و آسان تر شدن برنامه نویسی آیا راهی وجود داره ؟یا باید فقط از کد های طولانی و تکراری استفاده کنیم ؟ شما میتونید از کتابخانه ها وفریمورک ها برای کوتاه شدن و راحت تر شد کد زدنتون استفاده کنید. توی فریمورک ها وکتابخانه ها از دستورات اضافه فاکتور گرفته شده است. برای دستورات بلند و تکراریمعادلی در نظر گرفته شده و اگه شما اون معادل کوتاه شده رو بزنید، یعنی همون دستور طولانی رو زدید .