مدرس: خوش اومدید به اولین درس واقعی
این دوره.
حالا، احتمال زیادی وجود داره
که این دوره اولین تجربه‌تون
با توسعه وب باشه.
پس قبل از اینکه شروع کنیم به نوشتن کدهای HTML و CSS،
فکر می‌کنم ایده خوبی باشه که
دوره رو با یک مرور کلی سطح بالا
از حوزه توسعه وب شروع کنیم.
پس در مورد چیزهایی مثل کلاینت و سرور حرف می‌زنیم،
توسعه فرانت‌اند و بک‌اند،
وبسایت‌های استاتیک و داینامیک،
و البته در مورد زبان‌های اصلی
و فناوری‌های核心 توسعه وب.
و من همه این‌ها رو توضیح می‌دم
حول فرآیندی که اتفاق می‌افته
وقتی یک صفحه وب رو در مرورگر باز می‌کنیم.
فقط دوباره یادتون باشه
که این فقط یک مرور کلی سطح بالاست
و پس جزئیات زیادی رو جا می‌ندازم.
این واقعاً فقط برای اینه که با برخی مفاهیم و اصطلاحات
آشنا بشید
که همه توسعه‌دهنده‌های وب می‌دونن
قبل از اینکه سفر خودتون رو شروع کنید.
اما خب، فرض کنیم داریم سعی می‌کنیم
به یک صفحه وب در مرورگرمون در omnifood.dev دسترسی پیدا کنیم.
راستی، این در واقع وبسایتیه
که در طول این دوره توسعه می‌دیم.
حالا، وقتی سعی می‌کنیم به این صفحه دسترسی پیدا کنیم
مرورگرمون یک درخواست ارسال می‌کنه
به سروری که این صفحه روی اینترنت هاست شده.
پس هر وبسایتی ذخیره می‌شه
روی چیزی به نام سرور، که در واقع
یک کامپیوتره که به اینترنت وصل شده
و می‌تونه درخواست‌هایی مثل این رو دریافت کنه.
پس دوباره، وقتی به یک وبسایت خاص می‌ریم
مرورگر وبمون یک درخواست ارسال می‌کنه
به سروری که وبسایت ذخیره شده،
یعنی جایی که هاست شده.
بعد وقتی سرور درخواست رو دریافت می‌کنه،
تمام فایل‌هایی که وبسایت رو تشکیل می‌دن می‌گیره
و اونا رو به مرورگر برمی‌گردونه.
و پس می‌گیم که سرور یک پاسخ ارسال می‌کنه
به مرورگر، که در واقع شامل همه
این فایل‌هایی می‌شه که وبسایت ازشون ساخته شده.
حالا، همونطور که از این اکستنشن‌های فایل می‌بینید
ما اینجا کدهای HTML، CSS و همچنین JavaScript داریم.
و این‌ها دقیقاً سه زبانی هستن
که مرورگرها می‌تونن درک کنن.
پس این یعنی که تمام کدی
که یک وبسایت رو تشکیل می‌ده همیشه باید نوشته بشه
با HTML، CSS و JavaScript
چون دوباره، این‌ها در واقع
سه فناوری核心 هستن که هر مرورگری می‌تونه درک کنه.
خب، حالا، وقتی مرورگر
این فایل‌های HTML، CSS و JavaScript رو
از پاسخ سرور دریافت می‌کنه،
کد رو می‌گیره و وبسایتی رو رندر می‌کنه
که داشتیم سعی می‌کردیم بهش دسترسی پیدا کنیم.
پس بر اساس اون کد، خب؟
و با این شما قبلاً درک خوبی دارید
از اینکه چی واقعاً اتفاق می‌افته وقتی
به یک وبسایت می‌ریم و همچنین در مورد فناوری‌هایی
که برای ساخت هر وبسایتی استفاده می‌کنیم.
و اون فرآیند نوشتن کدهای HTML، CSS و JavaScript
که مرورگر می‌تونه درک کنه همون فرآینده
که بهش می‌گیم توسعه وب فرانت‌اند.
پس هر وقت شنیدید کسی در مورد
توسعه فرانت‌اند حرف می‌زنه،
منظورش توسعه‌دهنده‌هایی هستن که کدهایی می‌نویسن
که در مرورگر نمایش داده می‌شن،
که در واقع فرانت‌اند یک وبسایته.
و در واقع، این اساساً چیزیه که قراره یاد بگیریم
در این دوره، یا حداقل اصول اولیه اولیه
توسعه فرانت‌اند،
که یادگیری HTML و CSS هست.
حالا، فقط به عنوان نکته جانبی اینجا،
هر وقت فایل‌هایی که وبسایت رو تشکیل می‌دن
به سادگی روی سرور وب ذخیره شدن
و بعد همونطور که هستن به مرورگر ارسال می‌شن،
می‌گیم که یک وبسایت استاتیک داریم، خب؟
و این کمی بیشتر منطقی می‌شه
در یک دقیقه وقتی در مورد
وبسایت داینامیک حرف می‌زنیم.
اما برای الان، فقط یادتون باشه که وبسایت استاتیک
در واقع وبسایتیه که فایل‌هاش به سادگی از سرور
به مرورگر ارسال می‌شن همونطور که هستن،
پس بدون هیچ تغییری، خب؟
پس امیدوارم از این یاد گرفته باشید
که توسعه فرانت‌اند چیه،
و همچنین در مورد سه فناوری اصلی
که هر وبسایتی رو تشکیل می‌دن.
و حالا بیاید یک قدم جلوتر بریم
و در مورد چیزی به نام توسعه بک‌اند حرف بزنیم.
پس بیاید یک مثال دیگه امتحان کنیم اینجا،
و این بار بیاید بفهمیم
چی اتفاق می‌افته وقتی سعی می‌کنیم به یک وبسایت
مثل udemy.com دسترسی پیدا کنیم.
پس دوباره، اولین قدم اینه که یک درخواست ارسال می‌شه
به سرور وبی که udemy.com روش هاست شده.
حالا، چرا یک وبسایت مثل udemy
اینقدر متفاوت از چیزی مثل وبسایت استاتیک omnifoodه
که قبلاً نشونتون دادم؟
خب، یک سایت پیچیده مثل udemy.com
واقعاً کاملاً متفاوت
از یک سایت استاتیکه چون کلی
محتوا داره که همیشه در حال تغییره.
مثل روی Udemy، همیشه دوره‌های جدید
و نظرات جدید به سایت اضافه می‌شن.
رتبه‌بندی‌های جدید، و طول دوره جدید
مثلاً محاسبه می‌شه،
و واقعاً کلی چیز دیگه مثل این
همیشه در حال اتفاق افتادنه.
و پس برای اینکه چنین سیستمی کار کنه
udemy.com نیاز به یک اپلیکیشن کامل داره که روی سرور اجرا بشه
و همچنین به یک دیتابیس بزرگ،
که در واقع شامل همه دوره‌ها،
و همه نظرات، همه کاربران،
و واقعاً همه محتوایی که روی وبسایتشون نمایش داده می‌شه.
حالا، برای انجام همه این‌ها فناوری‌های فرانت‌اند
مثل HTML و CSS به سادگی کافی نیستن.
پس اساساً، با چیزی که قراره در این دوره یاد بگیرید،
نمی‌تونید چیزی مثل udemy.com بسازید، خب؟
پس برای نوشتن اپلیکیشن‌هایی که واقعاً اجرا می‌شن
روی سرورهای وب، توسعه‌دهنده‌ها از نوعی
زبان بک‌اند مثل Node.js، PHP یا Python استفاده می‌کنن.
پس کاری که این زبان‌ها می‌کنن اینه که داده‌ها رو
از دیتابیس بیرون می‌کشن و اساساً
اون داده‌ها رو در فایل‌های نهایی جمع‌آوری می‌کنن
که بعد به عنوان پاسخ به مرورگر ارسال می‌شن.
و این فرآیند کامل بهش می‌گن توسعه بک‌اند
چون این اساساً بخش نامرئی
یک وبسایته و پس بک‌اند وبسایته.
حالا، در این موقعیت، می‌گیم که یک وبسایت داینامیک
داریم چون وبسایت به طور داینامیک از قطعات مختلف روی سرور
جمع‌آوری می‌شه
و این هر بار که کسی به وبسایت سر می‌زنه اتفاق می‌افته.
پس برگردیم به مثال udemy.com،
در واقع هر بار که به udemy سر می‌زنید،
یک نسخه جدید از وبسایت از دیتابیسشون تولید می‌شه
و به مرورگرتون ارسال می‌شه.
حالا، از طرف دیگه، اگر udemy یک وبسایت استاتیک بود،
فایل‌های وبسایت قبلاً روی سرور نشسته بودن
و فقط منتظر بودن تا کسی بهشون دسترسی پیدا کنه، خب؟
پس این تفاوت بزرگ بین استاتیک و داینامیکه.
در استاتیک، فایل‌ها قبلاً آماده هستن
و در داینامیک، اول باید توسط یک اپلیکیشن که روی سرور اجرا می‌شه
تولید بشن.
خب، اما حالا بقیه فرآیند
در واقع مثل قبله.
پس این فایل‌ها حالا آماده ارسال
به مرورگر به عنوان پاسخ هستن، که بعد تبدیل می‌شن
به وبسایت نهایی مثل اینی
که اینجا از udemy.com می‌بینیم.
عالی.
حالا، البته نیازی نیست شما
همه این نام‌هایی که اینجا ذکر کردم حفظ کنید،
و همچنین نیازی به درک عمیق این فرآیند نیست.
همه چیزی که می‌خوام اینجا اینه که یک مرور کلی بهتون بدم
از اینکه فرانت‌اند و بک‌اند واقعاً چی هستن،
مرورگر و سرور چی هستن،
و همچنین وبسایت‌های استاتیک و داینامیک چی هستن.
چون واقعاً فکر می‌کنم این خیلی
کمک‌کننده باشه وقتی سفر توسعه‌دهندگی‌تون رو شروع می‌کنید.
اما حالا فقط برای تموم کردن، بیاید نزدیک‌تر نگاه کنیم
به سه زبان فرانت‌اند،
پس HTML، CSS و JavaScript.
و با HTML شروع کنیم،
HTML مسئول محتوای صفحه‌ست.
پس متن، تصاویر، دکمه‌ها،
و واقعاً همه محتوایی که روی یک صفحه وب می‌بینید
همیشه داخل یک فایل HTML نوشته می‌شه.
بعد CSS، مسئول ارائه
اون محتواست، پس اساساً برای استایلینگ
و چیدمان عناصر روی صفحه وب.
حالا در نهایت، JavaScript زبان برنامه‌نویسی واقعی
فرانت‌انده.
پس بهمون اجازه می‌ده افکت‌های داینامیک و تعاملی
به صفحات وب اضافه کنیم.
همچنین می‌تونیم ازش برای دستکاری محتوا
یا CSS استفاده کنیم تا داده‌ها رو از سرورهای وب لود کنیم
و حتی برای ساخت اپلیکیشن‌های فرانت‌اند کامل،
که بعد بهشون می‌گیم وب اپلیکیشن.
حالا، می‌تونیم از تشبیه اسم،
صفت و فعل استفاده کنیم تا جداسازی
نقش‌ها اینجا کمی راحت‌تر درک بشه.
پس در این تشبیه، HTML نماینده اسمهاست،
مثلاً گفتن اینکه عنصر p یک پاراگرافه.
پس پاراگراف اسم اینجا هست.
CSS بعد صفته
چون اساساً اسم رو توصیف می‌کنه،
مثل این قطعه CSS که می‌گه
متن پاراگراف قرمز باشه.
و پس قرمز صفتی هست که اسم رو توصیف می‌کنه، خب؟
در نهایت، JavaScript البته فعله،
مثل گفتن، پاراگراف رو پنهان کن.
پس اینجا واقعاً داریم کاری انجام می‌دیم
و پس یک فعل داریم، خب؟
این منطقیه؟
خب، و با این مقدمه‌مون بر توسعه وب رو تموم می‌کنیم،
و حالا آماده‌ایم
تا شروع کنیم به کار با کدهای HTML و CSS در این دوره.