مختصر كتابي: A High-Level Overview of Web Development
ماذا يحدث عندما تفتح أي موقع؟
عندما تفتح موقعًا، يرسل المتصفح (Browser) طلبًا إلى الخادم (Server) الذي يوجد عليه الموقع، فيرد الخادم بكل ملفات الموقع، ثم يجمعها المتصفح ويعرضها أمامك. وكل موقع في العالم مكتوب بثلاث لغات يفهمها المتصفح: HTML وCSS وJavaScript.
رحلة الطلب: من المتصفح إلى الخادم
- كل موقع موجود على كمبيوتر أو خادم متصل بالإنترنت، ليستقبل الطلبات ويرد عليها.
- عندما تفتح الموقع، يرسل المتصفح طلبًا (Request) إلى الخادم.
- الخادم يجمع كل الملفات التي يتكوّن منها الموقع ويرسلها في الرد (Response)، مثل ملفات HTML وCSS وJavaScript والصور.
- المتصفح يجمع هذه الملفات ويعرضها أمامك، أي يعمل لها عرضًا (Render)، فترى الموقع الذي طلبته.
الواجهة الأمامية والجهة الخلفية
- الواجهة الأمامية (Frontend): الكود الذي يظهر في المتصفح. وفي هذا الكورس سنتعلم أساسيات كثيرة منها باستخدام HTML وCSS.
- الجهة الخلفية (Backend): الجزء الخفي من الموقع الذي يعمل على الخادم، ولا نتعامل معه مباشرة كمستخدمين (end users).
- المبرمجون يكتبون الجهة الخلفية بلغات وتقنيات مثل PHP وNode.js وPython. هذه التقنية تأخذ المحتوى من قاعدة البيانات (Database)، وتضعه في ملف، وترسله للمتصفح ردًّا على طلبه.
المواقع الثابتة والمتغيرة
| الموقع الثابت (Static) | الموقع المتغير (Dynamic) |
|---|---|
| الملفات جاهزة على الخادم وتُرسَل كما هي | الموقع يُبنى على الخادم أولًا، ثم يُرسَل إليك |
| تصلك نفس الأجزاء ونفس المحتوى في كل مرة | نسخة جديدة من قاعدة البيانات مع كل زيارة أو refresh |
| تكفيه HTML وCSS | يحتاج نظامًا على الخادم وقاعدة بيانات |
مثال: موقع Twitter متغير، لأن محتواه يتغير كل لحظة: تغريدات جديدة، وصور وفيديوهات تُرفع، وأي إضافة أو حذف. لذلك يحتاج نظامًا كاملًا على الخادم وقاعدة بيانات. وفي هذا الكورس لن نتعلم صنع المواقع المتغيرة، لأن HTML وCSS لا تكفيان لذلك.
اللغات الثلاث: HTML وCSS وJavaScript
- HTML: مسؤولة عن المحتوى (Content): كل النصوص والصور والأزرار التي تراها في الموقع.
- CSS: مسؤولة عن الشكل وطريقة العرض (Presentation): أماكن العناصر وأحجامها وكل ما يخص التصميم.
- JavaScript: لغة البرمجة المسؤولة عن التفاعل (Functionality): تغيّر المحتوى أو CSS، وتحمّل بيانات من الخادم، ويمكن بناء واجهات كاملة بها باستخدام مكتبات مثل React وVue وAngular.
تشبيه الإنسان: HTML هي الهيكل العظمي، وCSS هي الشكل الخارجي والمظهر، وJavaScript هي الجهاز العصبي الذي يتحكم في كل شيء.
تشبيه البيت: HTML هي البنية الأساسية للبيت، وCSS هي الديكور والدهان، وJavaScript هي الكهرباء والمواسير التي تجعلك تتفاعل مع كل شيء في البيت. اختر التشبيه الأقرب إلى عقلك واحتفظ به.
الخلاصة
- المتصفح يرسل طلبًا، والخادم يرد بملفات الموقع، والمتصفح يعرضها.
- الواجهة الأمامية هي ما يظهر في المتصفح، والجهة الخلفية هي الجزء الخفي على الخادم.
- الموقع الثابت يُرسَل جاهزًا، والمتغير يُبنى على الخادم مع كل زيارة.
- لست مطالبًا بحفظ كل هذا الآن؛ هي نظرة عامة قبل أن نبدأ كتابة الكود.
مصطلحات الدرس
| المصطلح | بالإنجليزية | المعنى |
|---|---|---|
| المتصفح | Browser | البرنامج الذي يطلب الموقع ويعرضه لك |
| الخادم | Server | كمبيوتر متصل بالإنترنت يوجد عليه الموقع ويرد على الطلبات |
| الواجهة الأمامية | Frontend | الكود الذي يظهر ويعمل في المتصفح |
| الجهة الخلفية | Backend | الجزء الخفي من الموقع الذي يعمل على الخادم |
| قاعدة البيانات | Database | المكان الذي يُخزَّن فيه محتوى الموقع المتغير |
| موقع ثابت / متغير | Static / Dynamic | موقع يُرسَل جاهزًا / موقع يُبنى على الخادم مع كل زيارة |