[01] درک اصول توسعه وب

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

دسترسی به یک صفحه وب: سفر یک درخواست مرورگر

تصور کنید که سعی می کنید به یک وب سایت مراجعه کنید ، مثلاً https://paulanik.comبشر به محض ورود به این URL در مرورگر خود و Enter را فشار دهید ، مجموعه ای از اقدامات پشت صحنه انجام می شود.

1. مرورگر درخواست ارسال می کند: مرورگر شما درخواستی را به سرور که در آن وب سایت میزبانی شده است ارسال می کند. یک سرور در اصل یک رایانه قدرتمند است که به اینترنت متصل می شود و وب سایت ها را ذخیره می کند و در صورت درخواست آنها را برای کاربران ارائه می دهد.

2. سرور پاسخ می دهد: پس از دریافت درخواست خود ، سرور تمام پرونده هایی را که وب سایت را تشکیل می دهند – مانند HTML ، CSS و JavaScript – جمع می کند و آنها را به مرورگر خود می فرستد. به این پاسخ سرور گفته می شود.

3. ارائه وب سایت: هنگامی که مرورگر شما این پرونده ها را دریافت کرد ، کد را تفسیر می کند و وب سایت را ارائه می دهد و آن را روی صفحه شما نمایش می دهد. این روند فقط در چند ثانیه اتفاق می افتد.

فن آوری های اصلی توسعه وب

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

• HTML (زبان نشانه گذاری HyperText): HTML ستون فقرات هر صفحه وب است. این ساختار و محتوای یک صفحه وب مانند متن ، تصاویر ، دکمه ها و سایر عناصر را تعریف می کند. HTML یک زبان برنامه نویسی نیست ؛ در عوض ، این یک زبان نشانه گذاری است که برای سازماندهی و نمایش محتوا استفاده می شود.

• CSS (ورق های سبک آبشار): CSS مسئول ظاهر و چیدمان محتوای تعریف شده توسط HTML است. این امکان را به توسعه دهندگان می دهد تا صفحات وب را سبک کنند و همه چیز را از قلم ها و رنگ ها گرفته تا فاصله و طرح کلی صفحه کنترل کنند. CSS همان چیزی است که باعث می شود یک صفحه وب از نظر بصری جذاب و آسان برای حرکت باشد.

• جاذب: JavaScript زبان برنامه نویسی وب است. این ویژگی های پویا و تعاملی مانند انیمیشن ها ، اعتبار سنجی فرم و به روزرسانی های محتوا را بدون بارگیری مجدد صفحه امکان پذیر می کند. JavaScript می تواند هر دو HTML و CSS را دستکاری کند و آن را به ابزاری قدرتمند برای ایجاد تجربیات غنی کاربر تبدیل کند.

توسعه جلوی: طرح ها را زنده می کند

روند نوشتن HTML ، CSS و JavaScript برای ایجاد بخشی از وب سایتی که کاربران با آن مستقیماً با آنها ارتباط برقرار می کنند توسعه جلوبشر توسعه دهندگان جلویی بر ایجاد طرح ، طراحی و جنبه های تعاملی یک وب سایت تمرکز می کنند-“انتهای جلوی” که کاربران می بینند و از آنها استفاده می کنند.

وقتی پرونده های یک وب سایت روی یک سرور ذخیره می شوند و بدون هیچ گونه اصلاح به مرورگر تحویل داده می شوند ، به آن گفته می شود وب سایت استاتیکبشر وب سایت های استاتیک نسبتاً ساده هستند و از محتوای ثابت تشکیل شده اند که تغییر نمی کند مگر اینکه یک توسعه دهنده به صورت دستی پرونده ها را به روز کند.

توسعه پشتی: وب سایت های پویا

اکنون ، یک وب سایت مانند https://dev.to/بشر بر خلاف یک وب سایت استاتیک ، dev.to پویا است ، به این معنی که محتوای آن دائماً در حال تغییر است – مقالات ، نظرات و سایر داده ها غالباً اضافه می شوند.

در اینجا چه اتفاقی می افتد هنگام دسترسی به چنین وب سایتی:

1. درخواست و تعامل پایگاه داده: دقیقاً مانند گذشته ، مرورگر شما درخواستی را به سرور ارسال می کند. با این حال ، این بار سرور فقط فایلهای از پیش ساخته را ارسال نمی کند. در عوض ، یک برنامه پشتی را که به زبانی مانند node.js ، php یا python نوشته شده است ، اجرا می کند.

2. داده های پردازش: این برنامه با یک پایگاه داده در تعامل است که در آن تمام محتوا – مانند مقالات و اطلاعات کاربر – ذخیره می شود. برنامه Back-End داده های لازم را بازیابی می کند ، آن را در پرونده های HTML ، CSS و JavaScript مونتاژ می کند و سپس این پرونده ها را به مرورگر خود می فرستد.

3. تحویل محتوای پویا: از آنجا که محتوا در پرواز تولید می شود ، بسته به آنچه جدید یا مرتبط است ، می تواند هر بار که از سایت بازدید می کنید متفاوت باشد. این فرایند به عنوان شناخته شده است توسعه پشتی و برای وب سایتهایی که نیاز به ارائه محتوای شخصی یا مکرر به روز شده دارند بسیار مهم است.

نقش توسعه جلو و پشتی

با هم ، توسعه جلوی و پشتی دو ستون توسعه وب است. در حالی که توسعه جلو بر روی رابط کاربری و تجربه متمرکز است ، توسعه Back-End منطق ، تعامل پایگاه داده و عملیات سمت سرور را انجام می دهد که وب سایت های پویا را امکان پذیر می کند.

پایان

توسعه وب یک زمینه پیچیده و در عین حال جذاب است که فناوری ها و شیوه های مختلفی را برای ایجاد وب سایت هایی که هر روز استفاده می کنیم ، گرد هم می آورد. این که آیا شما در حال ساختن یک سایت ساده استاتیک هستید یا یک برنامه وب پیچیده پویا ، درک نقش های HTML ، CSS ، JavaScript و Back-End بسیار مهم است.

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

📬 بیایید متصل شویم
🌐 نمونه کارها: paulanik.com
💼 LinkedIn: Anik Paul
🐙 Github: anikpaul99
📩 ایمیل: hello@paulanik.com