تصميم المواقع

كيف يعمل الموقع

حين تكتب عنوان موقع، يترجم متصفحك أولاً اسم النطاق إلى عنوان رقمي، ثم يتصل بالحاسوب الجالس خلفه، فيستلم نص HTML ويبني الصفحة منه. الموقع هو هذه الرحلة القصيرة ذهاباً وإياباً، وكل مشكلة تراها وقعت في حلقة من حلقات هذه السلسلة.

  • الدرس 1 من 12
  • مبتدئ
  • مجاني، دون تسجيل

طرفا الموقع، وما يقف بينهما

المتصفح

على جهاز المستخدم، وما يفعله بناء لا استلام صورة

  • يرسل الطلب ويستلم الجواب
  • يقرأ HTML وCSS ويبني الصفحة
  • ينفذ جافاسكريبت هناك مباشرة
طلب واحد، جواب واحد

الخادم

حاسوب لا يُطفأ وينتظر الطلبات

  • خادم الويب: يستقبل الطلب ويعطي الجواب
  • تطبيق الموقع: ينتج HTML
  • قاعدة البيانات: تحفظ النص والمستخدمين والطلبات

الذي يجمع هذين هو ترجمة اسم النطاق إلى عنوان رقمي

النطاق وDNS

دفتر هاتف الإنترنت: من الاسم إلى العنوان

  • النطاق اسم مستأجر فقط، لا مساحة تخزين
  • جواب DNS يُخزَّن مدةً، فلا يُرى تغييره فوراً
  • العنوان الذي يعطيه قد يخص طبقة وسيطة

هذا الرسم مبسّط: عملياً تجلس بين المتصفح والخادم عادةً شبكة توصيل محتوى وطبقات كاش أيضاً.

آخر مراجعة: تُراجع الحقائق وأسماء الأدوات في هذا الدرس مقابل مصادرها في هذا التاريخ.

تكتب العنوان وتضغط إدخال؛ ماذا يحدث بعد ذلك؟

إنها رحلة ذهاب وإياب، لا بث مباشر. متصفحك يرسل طلباً، وحاسوب آخر يجيب، وينتهي الاتصال هناك. وكل صورة وكل ملف CSS وكل خط تحتاجه الصفحة له طلبه المنفصل، فصفحة تبدو بسيطة يقف خلفها عادةً عشرات الرحلات.

الترتيب ثابت. أولاً يجب ترجمة اسم النطاق إلى عنوان رقمي. ثم يُفتح اتصال مشفر بين المتصفح وذلك العنوان، وهو ما يشير إليه القفل بجانب شريط العنوان. ثم يقول المتصفح أي صفحة يريد. ويعيد الطرف الآخر كتلة نصية.

ما يعود ليس صورة للصفحة، بل نص. والنص نفسه يصير شكلاً على الهاتف وشكلاً آخر على الشاشة، ولمن يستعمل قارئ الشاشة لا شكل له أصلاً بل يُقرأ. يبدو الفرق صغيراً، وهو يشرح مهنة تصميم المواقع كلها: أنت لا ترسل المظهر النهائي، بل تعليمات بنائه.

وإن أردت أن تراه الآن، اضغط بالزر الأيمن على أي موقع واختر عرض مصدر الصفحة. ما يُفتح هو النص نفسه الذي استلمه متصفحك.

زيارة واحدة، من ضغطة الإدخال إلى أول ما تراه

  1. 1

    ترجمة الاسم

    يسأل المتصفح أين هذا النطاق فيحصل على عنوان رقمي.

  2. 2

    فتح اتصال آمن

    القفل الذي تراه بجانب العنوان؛ وبدونه يحذرك المتصفح.

  3. 3

    طلب الصفحة

    يقول المتصفح أي عنوان يريد ويعرّف بنفسه.

  4. 4

    إنتاج الجواب

    إما يُسلَّم ملف جاهز وإما يعمل التطبيق فيبني HTML.

  5. 5

    رسم الصفحة

    يقرأ المتصفح النص ويجلب ما يلزم ويبني الصفحة.

هذه المراحل الخمس للملف الأول فقط. أما الصور والخطوط والسكربتات فيمر كل منها بالدورة نفسها من جديد.

النطاق اسم وعنوان IP هو العنوان؛ فمن يترجم؟

الحواسيب لا تتعامل مع الأسماء بل مع الأرقام. وDNS هو دفتر هاتف الإنترنت: تسأل أين يقع rgb.ir فتستلم عنواناً رقمياً. يستغرق هذا السؤال والجواب أجزاء من مئة من الثانية، ثم يُخزَّن الجواب مدةً على جهازك وعلى الخوادم في الطريق، وهذا السبب الرئيسي لتلك الجملة المألوفة: يفتح عندي ولا يفتح عندك.

ويمكنك أن ترى الترجمة بنفسك. في طرفية لينكس أو ماك:

dig +short A rgb.ir
dig +short NS rgb.ir

الأمر الأول يعطي العنوان الرقمي، والثاني يقول من المسؤول عن الإجابة بشأن ذلك النطاق. وفي ويندوز يقوم بالمهمة نفسها nslookup rgb.ir.

وثمة أمر يربك المبتدئين: العنوان العائد ليس بالضرورة عنوان الخادم الحقيقي. فكثير من المواقع تجلس خلف شبكة توصيل محتوى، فما يسلّمه لك DNS هو أقرب محطة في تلك الشبكة، ويبقى الخادم الحقيقي طبقةً إلى الخلف. وموقعنا نفسه كذلك تماماً، وأرقامه في قسم ما فعلناه بأنفسنا.

ولا تخلط بين النطاق والاستضافة: النطاق اسم فقط ويُستأجر سنوياً، والاستضافة هي المكان الذي تعيش فيه الملفات. وإن بقي هذا الفصل غامضاً، فإن شرح النطاق يبدأ من هناك بالضبط.

ما الذي يجلس في الطرف الآخر من الخط؟

حاسوب لا يُطفأ أبداً. والفرق بين الخادم وحاسوبك المحمول ليس في نوع القطع داخله، بل في أن الجهاز يعمل دائماً، ويجلس على اتصال سريع، ويشغّل برمجيات تنتظر الطلبات.

وثلاثة أشياء تعمل عليه عادةً جنباً إلى جنب. أولاً خادم الويب، وهو برنامج مثل nginx أو Apache يستقبل الطلب ويعيد الجواب. وثانياً تطبيق الموقع، وقد يكون PHP أو أي لغة أخرى، ومهمته إنتاج HTML. وثالثاً قاعدة البيانات، حيث تُحفظ نصوص المقالات والمستخدمون والطلبات.

وصفحة بسيطة ليست سوى بضعة أسطر نصية يمكن أن تعمل دون الاثنين الأخيرين. لكن ما إن يريد الموقع استقبال نموذج أو أن يكون له مستخدمون أو أن يتغير محتواه من لوحة الإدارة، حتى يدخل التطبيق وقاعدة البيانات في الصورة. ووردبريس هو هذا تحديداً: تطبيق PHP يقرأ المحتوى من قاعدة بيانات ويبني منه HTML.

وحين تقرأ عن الاستضافة المشتركة أو الخادم الافتراضي أو الخادم المخصص، فالنقاش يدور حول هذا الحاسوب نفسه: كم موقعاً يجلس على جهاز واحد وكيف تُقسَّم موارده. وقد وضعنا ذلك في صفحة الاستضافة بالأسعار والمواصفات، وإن كنت لا تحتاج إلى أي قرار الآن لمتابعة هذا الدرس.

لماذا بعض الصفحات جاهزة وبعضها يُبنى في كل زيارة؟

هناك نموذجان وكلاهما صحيح. في الأول يكون ملف HTML موجوداً مسبقاً على الخادم ويكتفي خادم الويب بتسليمه: سريع ورخيص وبلا متاعب. وفي الثاني تُبنى الصفحة في تلك اللحظة: يعمل التطبيق، ويسأل قاعدة البيانات، وينتج HTML ويرسله. ووردبريس والمتاجر وكل ما يجيب كل مستخدم بجواب مختلف ينتمي إلى هنا.

النموذج الثاني يشتري المرونة وله ثمن. فكل زيارة تعني حفنة استعلامات من قاعدة البيانات ومئات من أجزاء الثانية من عمل المعالج. والجواب القديم البسيط هو الكاش: تُبنى النتيجة مرة، وتُحفظ ملفاً جاهزاً، ويستلم الزائر التالي ذلك الملف. أي أن الموقع الديناميكي يتحول مؤقتاً إلى موقع ثابت.

وهذا ما يجيب السؤال المتكرر: لماذا لا يظهر التغيير الذي أجريته في اللوحة على الموقع؟ لأن الزائر ما زال يستلم النسخة المحفوظة سابقاً. وحتى تُمسح تلك النسخة أو تنتهي صلاحيتها، يبقى تغييرك مرئياً لك وحدك لأنك مسجل الدخول.

وفوق ذلك كله طبقة أخرى: شبكة توصيل المحتوى تحتفظ بنسخة من الصفحة قرب المستخدم، فأحياناً لا يصل الطلب إلى خادمك أصلاً. وهذا خبر جيد لمن يبني الموقع، إلى أن يأتي اليوم الذي يحتاج فيه إلى معرفة لماذا ما زالت النسخة القديمة على الشاشة.

ملف جاهز أم صفحة تُبنى في اللحظة

ثابت: الملف جاهز مسبقاً

  • يسلّمه خادم الويب فقط ولا يعمل شيء
  • أسرع الحالات وأقلها كلفة
  • كل تغيير يعني إعادة البناء ورفع الملف
  • لا يكفي وحده للنماذج والحسابات وسلة الشراء

ديناميكي: يُبنى في اللحظة

  • يعمل التطبيق ويستعلم من قاعدة البيانات
  • يتغير المحتوى من لوحة الإدارة دون برمجة
  • يمكنه أن يجيب كل مستخدم بجواب مختلف
  • كل زيارة تكلف عمل معالج، فيلزم الكاش عادةً

لا أحد من هذين أفضل من الآخر. والاختيار يعتمد على وتيرة تغير المحتوى وعدد من يحتاجون إلى تغييره.

أين تنقطع هذه السلسلة وأي جزء منها تراه؟

الخبر الجيد أن رسالة الخطأ تسمي عادةً الحلقة التي انقطعت؛ عليك فقط أن تعرف كيف تقرؤها.

إن قال المتصفح إن الموقع غير موجود أو إن اسم الخادم لم يُحل، فالطلب لم يصل خادمك أصلاً والمشكلة في ترجمة الاسم: سجل DNS خاطئ أو نطاق منتهي الصلاحية. وإن رأيت تحذيراً أمنياً، فالترجمة نجحت والاتصال فُتح، لكن شهادة SSL معطوبة أو منتهية. وإن جاءت صفحة بيضاء أو خطأ 500، فالطلب وصل وتعطل تطبيق الموقع في منتصف الطريق؛ وهنا تقرأ سجل أخطاء الخادم لا المتصفح. وإن فُتح كل شيء وكان المحتوى قديماً، فلا شيء معطوب: الكاش يسلّم النسخة السابقة.

وثمة صنف آخر ليس عطلاً ويبدو عطلاً: الموقع يفتح لكن ببطء. هناك لم تنقطع السلسلة، بل إحدى حلقاتها تأخذ وقتها، وتتبع ذلك عمل آخر يتولاه مسار تسريع الموقع.

وعادة واحدة تسهّل هذا كله: قبل التخمين، انظر إلى ترويسات الاستجابة. أمر قصير يخبرك من أين جاء الجواب وأي رمز حمل وهل تدخّل الكاش:

curl -I https://example.com/

هذا السطر وحده يفصل بين الموقع معطل وبين الموقع سليم والكاش يقدّم نسخة الأمس.

الذكاء الاصطناعي في هذا العمل

لمن بدأ للتو، أفضل استخدام لنموذج لغوي ليس أن يبني الموقع بدلاً عنك؛ بل أن يترجم رسالة خطأ لا تفهمها. انسخ النص الدقيق للخطأ، وقل أين رأيته وماذا فعلت قبله مباشرة، واطلب قائمة بما ينبغي فحصه. هذه هي المهمة التي كانت تستغرق ساعة من البحث في المنتديات.

أدوات تساعد فعلا

  • Claude جيد في شرح خطأ وقراءة مقطع من سجل. وإيران ليست في أي من قائمتي الدول المدعومة لدى أنثروبيك؛ قرأنا ذلك في صفحة أنثروبيك نفسها لا عبر اختبار شبكة.
  • Gemini يتعامل مع الفارسية جيداً ويكفي للأسئلة الأساسية عن النطاقات والاستضافة. وصفحة غوغل نفسها تقول إن تطبيق جيميناي يعمل في أكثر من مئتين وثلاثين دولة ومنطقة، وإيران ليست في تلك القائمة.
  • ChatGPT الخيار الأشيع ومقبول لهذه المهمة. وليست لدينا صفحة له في قسم الذكاء الاصطناعي بعد، فلا ندّعي هنا شيئاً عن إتاحته أو سعره.

اين ينقلب ضدك

الخطر هنا محدد وليس نادراً: يخترع النموذج شيئاً عن خادمك بالنبرة الواثقة نفسها. مسار ملف إعدادات، أو اسم شاشة في لوحة التحكم، أو أمر غير مفعّل أصلاً على استضافتك. وأنثروبيك نفسها تسمي هذا هلوسة في وثائقها وتشرح كيفية تقليله، أي أن الجهة الصانعة تعامله ضعفاً حقيقياً لا إشاعة. والقاعدة بسيطة: كل ما يقوله النموذج عن خادمك يجب أن يُقاس بمخرجات حقيقية، أي سجل الأخطاء أو لوحة الاستضافة أو curl -I نفسه. شرح الخطأ مهمة النموذج؛ وتأكيد الواقع مهمتك أنت. ولمعرفة كيف يمكن الدفع لكل من هذه الأدوات من إيران، انظر دليل الشراء.

المصادر: Anthropic: reduce hallucinations Anthropic: supported countries Google: where Gemini Apps are available

حدود هذه النصيحة

هذا النموذج مبسّط عن قصد. فالطلب الحقيقي اليوم يمر عادةً بطبقات أخرى غير مرسومة هنا: شبكة توصيل محتوى، وموزّع أحمال، وبروتوكولات نقل أحدث، وشفرة محفوظة داخل المتصفح نفسه. والأهم أن فهم السلسلة لا يصلح شيئاً؛ بل يجعلك تنظر في المكان الصحيح حين تصلح. ولكل حلقة أدواتها ومعرفتها.

من عملنا نحن

يوم مراجعة هذا الدرس، شغّلنا هذه الأوامر على نطاقنا نحن. dig +short NS rgb.ir يعيد خادمي أسماء من كلاودفلير، وdig +short A rgb.ir يعطي عنوانين ليس أي منهما عنوان خادمنا؛ أي أن ما يسلّمه DNS لمتصفحك هو أقرب محطة في الشبكة، بينما يبقى الخادم الحقيقي طبقةً إلى الخلف. ثم أعاد curl -I https://rgb.ir/ استجابة تحمل cf-cache-status: HIT وترويسة age برقم بالثواني، أي أن النسخة التي استلمناها جاءت من الحافة وبقيت هناك تلك المدة. وأطرف جزء أن الاستجابة نفسها تُظهر أيضاً x-flying-press-source: PHP: أي أن النسخة المحفوظة بناها PHP في وقت ما، لكن طلب اليوم لم يصل PHP أصلاً. ويمكنك أنت أيضاً تكرار الأوامر الثلاثة على النطاق نفسه.

اسئلة متابعة حقيقية

ما الفرق بالضبط بين النطاق والاستضافة؟

النطاق اسم والاستضافة مكان. تستأجر الاسم سنوياً والمكان شهرياً أو سنوياً؛ ونطاق بلا استضافة لا يشير إلى شيء، واستضافة بلا نطاق لا تُفتح إلا بعنوان رقمي. ويمكنك أيضاً شراء الاثنين من شركتين مختلفتين.

لماذا يفتح الموقع عندي ولا يفتح عند غيري؟

في أغلب الحالات الجواب هو DNS: العنوان القديم ما زال محفوظاً على جهاز الطرف الآخر أو شبكته، وحتى تنتهي صلاحيته يستلم القديم. والمرشحون التالون: كاش المتصفح، ونسخة محفوظة على شبكة توصيل المحتوى، وحجب المسار على شبكة بعينها. وأول خطوة تجربة الموقع على اتصال آخر، كبيانات الهاتف مثلاً.

هل أحتاج إلى معرفة كل هذا لأبني موقعاً؟

لا. فبخدمة استضافة ووردبريس يمكنك تشغيل موقع دون معرفة أي من ذلك. هذا الدرس ليوم يتوقف فيه شيء عن العمل: عندها يعرف من يعرف السلسلة خلال دقائق إلى أي شركة أو أي إعداد يذهب.