الصفحة التي تقرؤها الآن «صفحة ويب» واحدة. والمدوّنة كلّها التي تنتمي إليها هذه الصفحة «موقع ويب». الفرق بينهما أساسٌ يخلط فيه كثيرون، ومنه يبدأ بناء أيّ شيءٍ على الويب. في المقال السابق تعرّفتَ على مَن يبني هذا (مطوّر الواجهات الأمامية)؛ والسؤال هنا: ما الذي يبنيه فعلًا؟
في هذا المقال تتعرّف على اللبنات الأساسية: ما صفحة الويب وممّ تتكوّن، وكيف تتجمّع الصفحات في موقع، ثمّ الفرق المهمّ بين «الموقع» و«تطبيق الويب»، وبين الصفحات «الثابتة» و«الديناميكية»، وأخيرًا كيف يُبنى الموقع ويُنشَر. هذه الأسس الذهنية يقوم عليها كل ما بعدها في السلسلة.
ولنبدأ بحقيقةٍ تاريخية: أوّل صفحة ويبٍ في العالم نشرها تيم بيرنرز لي في مختبر CERN سنة 1991، وكانت صفحةً بسيطةً تشرح ما هو «الويب» نفسه. ولا تزال فكرتها الأساسية قائمةً إلى اليوم رغم كل ما تطوّر: مستندٌ نصّيٌّ فيه روابط تصل إلى مستنداتٍ أخرى. كل ما أضافته العقود التالية بُني فوق هذه النواة، لم يُلغِها.
ما صفحة الويب؟
صفحة الويب في جوهرها مستندٌ نصّيٌّ واحد، مكتوبٌ بلغة HTML، يجلبه متصفّحك من خادمٍ بعيدٍ ويعرضه لك.[1] لها عنوانٌ فريد تصلها به (وهو الـURL الذي مرّ بك في سلسلة أساسيّات الإنترنت)، وما تراه فيها من نصٍّ وصورٍ وأزرارٍ ليس إلّا تفسير المتصفّح لذلك المستند.
لكنّ الصفحة الواحدة ليست HTML وحدها، بل تستدعي معها ملفّاتٍ أخرى: ملفّ CSS يحدّد شكلها، وملفّ JavaScript يحدّد سلوكها، إضافةً إلى الصور والخطوط. فحين تفتح صفحةً، يطلب متصفّحك مستند HTML أوّلًا، ثمّ يطلب كل ملفٍّ يشير إليه المستند، ويجمعها ليرسم لك الصفحة النهائية. ولو فتحت صفحةً واحدةً عاديّةً اليوم، لرأيت متصفّحك يجلب لها عشراتٍ من الملفّات: مستند HTML، وعدّة ملفّات تنسيقٍ وبرمجة، وصورًا، وخطوطًا، وربّما أدوات قياسٍ وإعلانات. «الصفحة» الواحدة في الحقيقة حصيلة طلباتٍ كثيرةٍ تتجمّع في لحظة. ولكلٍّ من هذه اللغات الثلاث (الهيكل والمظهر والسلوك) مقالها المستقلّ في هذه السلسلة، فلا داعي لتكرارها هنا، بل يكفي أن تعرف أن الصفحة الواحدة قد تكون عدّة ملفّاتٍ تعمل معًا، لا ملفًّا واحدًا.
وأجمل ما في صفحة الويب أنها مكشوفةٌ لمن أراد أن يتعلّم: في أيّ متصفّحٍ، انقر بالزرّ الأيمن واختر «عرض مصدر الصفحة»، فترى بعينك شيفرة HTML التي بُنيت منها. هذه الشفافية ميزةٌ تربويّةٌ فريدة: كل موقعٍ تعجبك صفحته كتابٌ مفتوحٌ تتعلّم منه كيف صُنع. وفي مقال المتصفّح ستجد أداةً أعمق («أدوات المطوّر») تتيح تفكيك الصفحة طبقةً طبقة.
ولأن الصفحة عدّة ملفّاتٍ تُجلَب معًا، صار «وزنها» مهمًّا: صفحةٌ مثقلةٌ بصورٍ ضخمةٍ وملفّاتٍ كثيرة تتحمّل ببطءٍ خاصّةً على الهاتف وشبكاته. ولهذا يقيس المطوّرون عدد الطلبات وحجم الصفحة، ويعتنون بتخفيفها، فسرعة التحميل جزءٌ من جودة الصفحة لا رفاهية، ولها في السلسلة تفصيلٌ مستقلّ.
ما موقع الويب؟
موقع الويب مجموعةٌ من صفحاتٍ مترابطةٍ تحت اسم نطاقٍ واحد.[5] ثلاث كلماتٍ تحمل المعنى كلّه. «مجموعة»: ليس صفحةً واحدة بل صفحاتٍ عدّة. و«مترابطة»: يصل بينها روابطٌ تشعّبية تنقلك من واحدةٍ إلى أخرى، وهذا الترابط هو ما يجعلها «شبكةً» (Web) لا أوراقًا متناثرة. و«تحت اسم نطاقٍ واحد»: كلّها تعيش تحت عنوانٍ جامعٍ واحد يميّزها (مثل kutaibashikhani.com). وقد يقسّم الموقع الكبير نفسه إلى «نطاقاتٍ فرعية» (مثل blog.example.com) لفصل أقسامٍ كبيرةٍ بعضها عن بعض، لكنّها تبقى منتميةً إلى النطاق الأمّ. فالنطاق هويّة الموقع التي يُعرَف بها ويُقصَد إليها.
ولكل موقعٍ «صفحةٌ رئيسة» (Homepage) هي مدخله وواجهته، ومنها يتفرّع الزائر إلى بقيّة الصفحات عبر قائمة التنقّل والروابط. فإن كانت الصفحة ورقةً، فالموقع كتابٌ مفهرسٌ مرتّب: غلافه الصفحة الرئيسة، وفهرسه قائمة التنقّل، وفصوله الصفحات المترابطة. وما يحوّل أوراقًا متفرّقةً إلى كتابٍ واحدٍ هو الترابط، تمامًا كما يوضّح مقال الروابط التشعبية.
لكنّ حقيقةً يغفل عنها المبتدئ تقلب هذا التصوّر: أكثر الزوّار لا يدخلون موقعك من بابه الأماميّ. يأتون من بحثٍ في جوجل أو رابطٍ في منصّةٍ اجتماعية، فيهبطون مباشرةً في صفحةٍ داخليةٍ عميقةٍ قد لا تكون الرئيسة أبدًا. ومعنى ذلك عمليًّا أن كل صفحةٍ في موقعك «بابٌ أماميٌّ» محتمَل: ينبغي أن تعرّف بنفسها وبالموقع، وأن توضّح للزائر أين هو وكيف يمضي، فلا تفترض أنه مرّ على الرئيسة أوّلًا. هذه النظرة تغيّر كيف تصمّم كل صفحة.
ولكل صفحةٍ في الموقع عنوانها الخاصّ. فالموقع الواحد ليس عنوانًا واحدًا بل شجرةً من العناوين: النطاق الجذر للصفحة الرئيسة، ثمّ مساراتٌ تتفرّع منه لكل صفحة (مثل /about لصفحة «من نحن»). وهذه البنية هي ما يسمّيه المطوّرون «التوجيه» (Routing): ربط كل عنوانٍ بالصفحة التي ينبغي أن تظهر عنده. فحين تصمّم موقعًا، أنت لا تصمّم صفحاتٍ فقط، بل بنية عناوينٍ وتنقّلٍ بينها.
وأكثر المواقع الاحترافيّة تشترك في صفحاتٍ أساسية: الصفحة الرئيسة التي تعرّف بالموقع وتوجّه الزائر، وصفحة «من نحن» التي تبني الثقة بقصّة صاحبها، وصفحة الخدمات أو المنتجات التي تعرض ما يقدّمه، وصفحة «تواصل معنا» التي تفتح قناةً مع الزائر، وغالبًا مدوّنةٌ أو قسم مقالاتٍ يجذب الزوّار ويبني المعرفة. ليست هذه قاعدةً جامدة، لكنها الهيكل الذي يلبّي توقّع الزائر فيجد ما يبحث عنه حيث يتوقّعه. وثمّة صفحةٌ ينساها المبتدئ ويعتني بها المحترف: «صفحة 404»، التي تظهر حين يطلب الزائر عنوانًا غير موجودٍ (رابطًا مكسورًا أو خطأً في الكتابة). الموقع الجيّد لا يترك زائره أمام رسالة خطأٍ جافّة، بل يصمّم صفحة 404 لطيفةً تعتذر وتعيده إلى الرئيسة أو تقترح عليه بحثًا، فيتحوّل طريقٌ مسدودٌ إلى فرصةٍ لإبقائه في الموقع.
الموقع مقابل تطبيق الويب
هنا تمييزٌ مهمٌّ يغفل عنه كثيرون. القاعدة المبسّطة: «الموقع يُعلِم، والتطبيق يُساعِد».[2] الموقع في صورته الكلاسيكية محتوًى تقرؤه وتشاهده: مدوّنةٌ، أو موقع شركةٍ، أو صحيفة. أمّا تطبيق الويب فأداةٌ تفعل بها شيئًا وتتفاعل معها: بريد جيميل، ولوحة تحكّم البنك، ومحرّر المستندات. الأول تستهلكه، والثاني تستعمله.
لكنّ الحدّ بينهما يتلاشى في الويب الحديث. فأكثر ما يُسمّى «مواقع» اليوم فيه قدرٌ من التفاعل يجعله أقرب إلى التطبيقات: تعلّق، وتشتري، وتبحث، وتسجّل دخولك. ولهذا لا تأخذ هذا التمييز حدًّا قاطعًا، بل طيفًا: من صفحةٍ ساكنةٍ تمامًا، إلى تطبيقٍ كاملٍ يعمل في المتصفّح. وفهمُ موقع مشروعك على هذا الطيف يحدّد كيف تبنيه وبأيّ أدوات.
ولنثبّت الطيف بأمثلةٍ ملموسة: صفحة هبوطٍ تعرّف بمنتجٍ هي أقرب إلى الموقع الساكن البسيط؛ ومدوّنةٌ أو صحيفةٌ موقعٌ غنيٌّ بالمحتوى لكنّك تقرؤه أكثر ممّا تتفاعل معه؛ ومتجرٌ إلكترونيٌّ يجلس في المنتصف، تتصفّح وتشتري؛ وبريد جيميل أو محرّر مستنداتٍ تطبيقٌ كاملٌ تعمل فيه ساعات. كلّها «تُفتَح في المتصفّح»، لكنّ طبيعتها وتعقيدها يختلفان اختلافًا جذريًّا، ومعهما تختلف طريقة بنائها.
وما يميّز تطبيق الويب عن «التطبيق الأصليّ» الذي تثبّته من متجر التطبيقات أنه لا يحتاج تثبيتًا: تفتحه برابطٍ ويعمل على أيّ نظامٍ فيه متصفّح، وتحدّثه مرّةً للجميع. عيبه أنه يحتاج اتصالًا وقد يكون أبطأ من الأصليّ. وقد قرّبت «تطبيقات الويب التقدّمية» (PWA) بينهما: تطبيق ويبٍ يمكن تثبيته على الجهاز والعمل دون اتصالٍ جزئيًّا، فيجمع وصول الويب وراحة التطبيق الأصليّ.
ولِمَ كل هذا على الويب أصلًا، لا بصيغةٍ أخرى كملفّ PDF أو صورة؟ لأن صفحة الويب تملك ما لا يملكه غيرها: تترابط بالروابط، وتتكيّف مع كل شاشة، وتتيح الوصول لقارئات الشاشة، وتُفتَح فورًا بلا تثبيت، وتفهمها محرّكات البحث فتصل إلى الناس. هذه الخصائص مجتمعةً هي ما جعل الويب منصّة العالم للمعلومة والخدمة، لا مجرّد طريقةٍ لعرض النصّ.
ولاحظ أن قارئ الصفحة ليس الإنسان وحده. فمحرّك البحث يقرأ شيفرة HTML ليفهم محتواها ويفهرسها، وقارئ الشاشة يقرؤها للكفيف ليتنقّل فيها. كلاهما لا يرى «الشكل»، بل يقرأ البنية. ولهذا يهمّ كيف تُكتَب الصفحة من الداخل لا كيف تبدو فقط: بنيةٌ سليمةٌ واضحة تخدم الإنسان والآلة معًا، وبنيةٌ فوضويّة تربكهما وإن بدت جميلةً للعين. هذه فكرةٌ تتكرّر في مقالات HTML والسيو وإتاحة الوصول.
وثمّة أمرٌ إضافيّ يعني بناةَ الويب العربيّ: اتجاه الصفحة. فصفحة الويب قد تكون من اليسار إلى اليمين أو من اليمين إلى اليسار، ويُحدَّد ذلك في شيفرتها. وبناء موقعٍ عربيٍّ متقنٍ لا يقف عند ترجمة النصّ: فيه ضبطُ الاتجاه، ومزجُ العربية بكلماتٍ لاتينيّةٍ وأرقامٍ دون أن يختلّ النصّ، واختيارُ خطوطٍ عربيّةٍ مقروءة. وهذه تفاصيل يغفلها من يبني بعقليّةٍ إنجليزيّة، فتخرج صفحته العربية مكسورةً وإن صحّ محتواها.
ويرتبط بهذا تمييزٌ تقنيّ: «المواقع متعدّدة الصفحات» تجلب صفحةً جديدةً من الخادم في كل نقرة، و«تطبيقات الصفحة الواحدة» تُحمَّل مرّةً ثمّ تحدّث محتواها داخل الصفحة نفسها دون إعادة تحميلٍ كامل، فتعطي إحساسًا أقرب إلى تطبيقات سطح المكتب. الأولى أبسط وأصدق مع محرّكات البحث، والثانية أسلس في التفاعل، ولكلٍّ موضعه.
ما الذي يجعل الصفحة جيّدة
بناء صفحةٍ «تعمل» سهل؛ بناء صفحةٍ جيّدةٍ هو الفنّ. والجودة هنا خمسة أمورٍ تتجاوز الشكل: وضوح الغرض (يفهم الزائر في ثوانٍ ما هذه الصفحة وماذا يفعل فيها)، وسهولة التنقّل (يجد ما يريد دون تيهٍ في قائمةٍ متشعّبة)، والتجاوب مع كل شاشةٍ من الهاتف إلى الحاسوب (وهو موضوع مقال «التصميم المتجاوب»)، وإتاحة الوصول لذوي الإعاقة، والسرعة. هذه ما يميّز صفحةً يعود إليها الناس عن صفحةٍ يغادرونها.
ومعظم هذه الجودة لا يراها الزائر مباشرةً، لكنه يشعر بأثرها: يبقى أطول، ويثق أكثر، ويعود. ولهذا الموقع الاحترافيّ ليس أجمل الصفحات بصريًّا فحسب، بل أوضحها وأسرعها وأشملها لكل مستخدم. وهذه المعايير تتكرّر عبر السلسلة كلّها، لأنها جوهر تطوير الويب لا زينته.
ومن هذه المعايير ما صار اليوم الأهمّ: الجوّال أوّلًا. فأكثر من يتصفّح الويب يفعل ذلك من هاتفه، لا من حاسوبٍ مكتبيّ. ولهذا لم يَعُد التصميم للشاشة الكبيرة ثمّ «تصغيره» للهاتف مقبولًا، بل صار التفكير يبدأ من الهاتف ثمّ يتوسّع. فالصفحة التي تتقن نفسها على شاشةٍ صغيرة، بلمسٍ لا بفأرة، هي القاعدة الآن لا الاستثناء.
الثابت مقابل الديناميكي
وراء كل صفحةٍ سؤالٌ: هل هي جاهزةٌ سلفًا، أم تُبنى لحظة طلبها؟ هذا الفرق بين الصفحات «الثابتة» و«الديناميكية».[3] الصفحة الثابتة ملفُّ HTML مكتوبٌ مسبقًا، يُرسَل كما هو لكل زائرٍ دون تغيير، كنشرةٍ مطبوعةٍ يأخذ منها الجميع النسخة نفسها. سريعةٌ وبسيطةٌ ورخيصة، لكنّ تحديثها يدويّ، وتُناسب المحتوى الذي لا يتغيّر كثيرًا (موقع تعريفيّ، صفحة هبوط).
أمّا الصفحة الديناميكية فتُبنى لحظة طلبها: يأخذ الخادم قالبًا، ويملؤه ببياناتٍ من قاعدة بيانات، ويركّب الصفحة عند كل زيارة. ولهذا يمكن أن تختلف من زائرٍ لآخر («مرحبًا يا فلان»، منتجاتٌ بحسب اهتمامك). أقوى وأمرن، لكنها أعقد وأبطأ في البناء وتحتاج خادمًا يعمل. وأكثر المواقع الكبيرة ديناميكية: متجرٌ بآلاف المنتجات لا يُكتَب يدويًّا صفحةً صفحة. وبين النوعين حلولٌ وسطى حديثة تبني الصفحات مسبقًا ثمّ تحدّثها عند الحاجة، لتجمع سرعة الثابت ومرونة الديناميكيّ.
وأكثر المواقع التي تعرفها ديناميكيّةٌ من هذا النوع: ووردبريس مثلًا لا يخزّن آلاف المقالات صفحاتٍ جاهزة، بل يحفظ نصوصها في قاعدة بيانات، ويملك «قالبًا» (Theme) يحدّد الشكل، ويركّب الصفحة لحظة طلبها من القالب والمحتوى معًا. ولهذا يكفي أن تكتب مقالًا في لوحة التحكّم لتظهر صفحته فورًا بالتنسيق نفسه، دون أن تلمس شيفرة. هذا الفصل بين المحتوى والقالب هو سرّ مرونة أنظمة إدارة المحتوى.
كيف تصل الصفحة إليك
قبل أن تُبنى الصفحة لا بدّ أن تصل. وقد فُصّلت هذه العمليّة كاملةً في سلسلة أساسيّات الإنترنت، والخلاصة هنا: تكتب العنوان، فيترجمه DNS إلى عنوان خادم، فيطلب متصفّحك المستند من الخادم ببروتوكول HTTP، فيردّ الخادم بمستند HTML، فيبدأ المتصفّح بتفسيره وجلب ملفّاته ورسم الصفحة. وتتمّ هذه العمليّة في أجزاءٍ من الثانية في كل مرّةٍ تفتح فيها صفحة.[4]
ويهمّك أن تعرف أين تعيش هذه الملفّات: على «خادمٍ» متّصلٍ بالإنترنت دائمًا، مكانٍ تستأجره يُسمّى «الاستضافة». فالموقع ليس على حاسوبك، بل على خادمٍ يصله الناس في أيّ وقت. وهذا عالمٌ له سلسلته المستقلّة في «استضافة الويب»، فلا حاجة إلى التوسّع فيه هنا.
كيف يُبنى الموقع: ثلاثة مسارات
كيف تنتقل من فكرةٍ إلى موقعٍ حيّ؟ مهما اختلفت الطريقة، تحتاج ثلاثة أشياء: اسم نطاقٍ (عنوانك)، واستضافةً (أرضك)، وبناءً للموقع نفسه. ويختلف البناء بحسب مهارتك وحاجتك على ثلاثة مسارات:
- منصّات بناء المواقع (مثل Wix أو Shopify): الأسهل. تبني بالسحب والإفلات دون شيفرة، لكنك مقيّدٌ بما تتيحه المنصّة.
- نظام إدارة محتوى (مثل ووردبريس): الأوسط والأشيع. توازنٌ بين السهولة والتحكّم، وعليه يقوم جزءٌ كبيرٌ من الويب. تفصيله في مقالَي «أنظمة إدارة المحتوى مقابل منصّات البناء».
- التطوير من الصفر بالشيفرة: الأصعب والأكثر تحكّمًا وحرّية، وهو ما تتعلّمه في بقيّة هذه السلسلة.
والمفاضلة بينها في جوهرها موازنةٌ بين ثلاثة: الكلفة، والوقت، والتحكّم. كلّما اتّجهت نحو المنصّات الجاهزة، قلّ الوقت والكلفة وقلّ تحكّمك؛ وكلّما اتّجهت نحو التطوير من الصفر، زاد تحكّمك وحرّيتك وزاد ما تدفعه وقتًا ومالًا. لا يوجد مسارٌ «أفضل» مطلقًا، بل أنسبُ لحالتك: متجرٌ صغيرٌ سريع قد يكفيه منصّة، ومدوّنةٌ احترافيّة يخدمها نظام إدارة محتوى، ومشروعٌ خاصٌّ بمتطلّباتٍ فريدة يحتاج تطويرًا من الصفر. ومعرفتك بما تحت الغطاء، التي تبنيها هذه السلسلة، تجعلك أقدر على الاختيار وعلى تطويع أيّ مسارٍ تسلكه.
وأيًّا كان المسار، تذكّر أن الموقع ليس عملًا يُنجَز مرّةً ثمّ يُترَك. إنه كائنٌ حيٌّ يحتاج رعايةً مستمرّة: محتوًى يُحدَّث، وبرمجيّاتٌ تُرقّى لسدّ الثغرات الأمنية، وأعطالٌ تُصلَح، وأداءٌ يُراقَب. كثيرون يحسبون أن إطلاق الموقع نهاية الطريق، وهو في الحقيقة بدايته. والموقع المهمَل يتقادم ويُختَرق ويتراجع، مهما كان متقنًا يوم إطلاقه.
من اللبنة إلى المُفسِّر
هذه هي اللبنات: صفحةٌ مستندٌ من ملفّاتٍ تعمل معًا، تترابط مع أخواتها في موقعٍ تحت نطاقٍ واحد، يقع على طيفٍ من الموقع الساكن إلى التطبيق التفاعليّ، ويُبنى ثابتًا أو ديناميكيًّا، بأحد ثلاثة مسارات. ولا يلزمك إتقان هذا كلّه الآن؛ يكفي أن تستقرّ في ذهنك هذه التفريقات (صفحةٌ مقابل موقعٍ مقابل تطبيق، ثابتٌ مقابل ديناميكيّ)، فعليها تُبنى كل التفاصيل التقنية التي تأتي بعد. هذه الأسس هي الأرضية التي تقوم عليها بقيّة السلسلة.
لكنّ كل ما سبق يفترض جهازًا واحدًا يحوّل هذه الملفّات إلى ما تراه على الشاشة: المتصفّح. فهو المُفسِّر الذي يقرأ HTML وCSS وJavaScript ويرسم منها الصفحة، وهو بيئة عمل المطوّر التي لا غنى عنها. وهذا موضوع المقال التالي: «متصفّح الويب: كيف يعمل».
المصادر
- MDN: بناء محتوى الصفحة بـHTML. ما صفحة الويب وممّ تتكوّن.
- freeCodeCamp: الفرق بين الموقع وتطبيق الويب. الموقع يُعلِم والتطبيق يُساعِد.
- GeeksforGeeks: الصفحات الثابتة مقابل الديناميكية. آليّة كلٍّ منهما.
- MDN: كيف تصل صفحة الويب. مسار الطلب من المتصفّح إلى الخادم.
- Wikipedia: موقع الويب. تعريفه بوصفه مجموعة صفحاتٍ مترابطة تحت نطاق.