ملخص أساسيات تقنية الواجهة الأمامية — ثانية ثانوي

مقدمة

المادة: البرمجة والذكاء الاصطناعي
المسار: مسار الهندسة وعلوم الحاسب

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

أهداف التعلم

أن تشرح الأدوار المميزة لكل من HTML وCSS وJavaScript في بناء صفحة الويب.
أن تشرح كيف تسهم لغة HTML الدلالية (Semantic HTML)، والتصميم المتجاوب، وأطر العمل في تحسين الواجهة الأمامية الحديثة.
أن توظف HTML الدلالية والتصميم المتجاوب لجعل صفحة ويب أسهل وصولًا وأنسب للأجهزة المختلفة.

شرح الدرس

السؤال الرئيسي: كيف تعمل HTML وCSS وJavaScript معًا لبناء صفحة ويب، وما الذي يجعل الواجهة الأمامية الحديثة ذات معنى وقابلة للتكيف وفعّالة في البناء؟ الفكرة الأساسية أن صفحة الويب تُبنى من HTML (البنية)، وCSS (المظهر)، وJavaScript (السلوك)؛ وتضيف الواجهة الأمامية الحديثة HTML الدلالية والتصميم المتجاوب وأطر العمل.

أدوار HTML وCSS وJavaScript

التقنية	الدور	التشبيه
HTML	يحدد بنية (هيكل) صفحة الويب. يصف عناصر مثل العناوين والفقرات والصور والروابط	هيكل مبنى
CSS	يحدد مظهر صفحة الويب (الألوان، التخطيط، الحجم، الخطوط، إلخ)	الديكور الداخلي والخارجي لمبنى
JavaScript	يضيف السلوك والتفاعلية إلى صفحة الويب. يفعّل الاستجابات عند الضغط على الأزرار وتحديثات جزء فقط من الشاشة	أنظمة الكهرباء والسباكة في مبنى

يمكن أن تستخدم الصفحة HTML وحده، أو HTML مع CSS وJavaScript بحسب الوظائف التي تحتاج إليها — وليس من الضروري أن تستخدم الصفحة الثلاث كلها معًا.

HTML الدلالية (Semantic HTML)

استخدام عناصر توضح وظيفة أجزاء الصفحة، مثل <header> في أعلى الصفحة، و<nav> للتنقل، و<main> للمحتوى الرئيس، و<footer> في أسفل الصفحة (بدلًا من صناديق <div> عامة لا تحمل أي دلالة عن وظيفتها). فوائد استخدامها:

إمكانية الوصول (Accessibility): يساعد HTML الدلالي قارئ الشاشة على فهم بنية الصفحة والتنقل فيها (مع الحاجة إلى ممارسات وصول أخرى أيضًا).
فهم محركات البحث للمحتوى (SEO): قد يساعد HTML الدلالي محركات البحث على فهم بنية المحتوى بصورة أفضل، لكنه لا يضمن ترتيبًا أعلى.

التصميم المتجاوب

مفهوم تصميمي يُضبط فيه التخطيط تلقائيًا وفقًا لأحجام الشاشات المختلفة، مثل أجهزة الكمبيوتر والهواتف الذكية والأجهزة اللوحية. يساعد التصميم المتجاوب الصفحة على التكيف مع أحجام الشاشات المختلفة وتحسين سهولة استخدامها. نظرًا لأن كثيرًا من الناس يستخدمون الويب عبر الهواتف، يراعي المطورون الشاشات الصغيرة منذ بداية التصميم، وهو نهج يُسمى أحيانًا الأولوية للجوال (Mobile-first).

العناصر الدلالية header وnav وmain وfooter مرتبة في شاشة حاسوب مع التنقل عمودًا جانبيًّا بجوار المحتوى الرئيس، والعناصر نفسها في هاتف مرتبة في عمود واحد بعضها تحت بعض

أطر العمل (Frameworks)

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

مكتبات وأطر شائعة لتطوير الويب:

المكتبة/إطار العمل	الخصائص
React	مكتبة JavaScript لبناء واجهات المستخدم من مكونات قابلة لإعادة الاستخدام وتحديثها عند تغيّر البيانات
Vue	له بنية بسيطة ويتيح بناء تطبيقات الويب تدريجيًا بدءًا من ميزات صغيرة
Next.js	إطار مبني على React لبناء تطبيقات ويب، ويوفر التوجيه وطرقًا مختلفة لعرض الصفحات والعمل على الخادم والعميل

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

أمثلة وتطبيقات

مثال 1 (توزيع المهام): صفحة لنادي طلابي فيها قائمة فعاليات، وألوان النادي، وعداد مباشر لعدد المسجلين:

الميزة	التقنية
قائمة الفعاليات (المحتوى)	HTML
ألوان النادي والتخطيط	CSS
العداد الذي يتحدث عند الضغط دون إعادة تحميل الصفحة	JavaScript

مثال 2 (صفحة صغيرة):

<main>
  <h1>فعاليات النادي</h1>
  <button id="join">سجّل الآن</button>
  <p>عدد المسجلين: <span id="count">0</span></p>
</main>

button { background: navy; color: white; }

let n = 0;
document.getElementById("join").onclick = () => {
  n = n + 1;
  document.getElementById("count").textContent = n;
};

كود HTML يحدد العناصر، وCSS يلوّن الزر، وJavaScript يزيد العدد ويحدّث الرقم على الشاشة عند كل ضغطة.

مثال 3 (موقع إخباري): لتحسين قراءته على الهاتف يُستخدم تخطيط متجاوب يعرض الأخبار في عمود واحد على الشاشات الصغيرة. ولمساعدة قارئ الشاشة ومحركات البحث على فهم البنية يُستخدم <article> لكل خبر و<nav> لقائمة الأقسام، مع العلم أن ذلك لا يضمن وحده ترتيبًا أعلى في نتائج البحث.

ملاحظات مهمة

HTML ليست لغة برمجة بالمعنى الدقيق؛ إنها لغة ترميز تصف بنية المحتوى، أما JavaScript فلغة برمجة.
لا يلزم استخدام التقنيات الثلاث في كل صفحة؛ فصفحة ثابتة بسيطة قد تكفيها HTML وCSS.
<div> ليس خطأً، لكنه لا يحمل معنى؛ استخدم العناصر الدلالية حين يكون للجزء وظيفة واضحة.
React مكتبة لبناء الواجهات، وNext.js إطار مبني عليها، وVue إطار مستقل.

المفاهيم الأساسية

HTML يحمل المحتوى/البنية، CSS ينسّقه، JavaScript يجعله يتفاعل ويُحدَّث.
HTML الدلالية تفيد إمكانية الوصول (قارئ الشاشة) وفهم محركات البحث للمحتوى، دون أن تضمن ترتيبًا أعلى.
التصميم المتجاوب يضبط التخطيط تلقائيًا حسب حجم الشاشة، وغالبًا يُتبع نهج الأولوية للجوال.
أطر العمل (React، Vue، Next.js) توفر مكونات ووظائف جاهزة لتطوير أكثر كفاءة دون كتابة كل شيء من الصفر.

ملخص الدرس

تُبنى صفحة الويب من HTML التي تحدد بنيتها، وCSS التي تحدد مظهرها، وJavaScript التي تضيف السلوك والتفاعل. وتجعل ممارسات الواجهة الأمامية الحديثة الصفحة أفضل: فعناصر HTML الدلالية مثل header وnav وmain وfooter تساعد قارئات الشاشة ومحركات البحث على فهم البنية، والتصميم المتجاوب يكيّف التخطيط مع أحجام الشاشات مع إعطاء الأولوية للجوال، وأطر العمل والمكتبات مثل React وVue وNext.js توفر مكونات جاهزة قابلة لإعادة الاستخدام فتجعل التطوير أكثر كفاءة.

أسئلة للتدريب

1. يريد نادٍ طلابي صفحة ويب بسيطة تعرض فعالياته، ومنسّقة بألوان النادي، وتحتوي على زر يعرض عدد الأشخاص المسجَّلين. لثلاث ميزات — قائمة الفعاليات، وألوان النادي وتخطيطه، وعدّاد التسجيل الحي — حدد أي تقنية (HTML أو CSS أو JavaScript) تقوم بكل منها.

الإجابة: قائمة الفعاليات (المحتوى والبنية النصية للصفحة) تحققها HTML. ألوان النادي وتخطيطه (المظهر البصري) تحققها CSS. عدّاد التسجيل الحي (سلوك تفاعلي يتغير عند حدث كالنقر ويحدّث جزءًا من الشاشة دون إعادة تحميلها) تحققها JavaScript.

2. لماذا يفهم قارئ الشاشة الصفحة بشكل أفضل عندما تُستخدم <header> و<nav> و<main> بدلًا من صناديق <div> عادية؟

الإجابة: لأن عناصر HTML الدلالية تحمل معنى واضحًا عن وظيفة كل جزء من الصفحة (هذا رأس الصفحة، هذا قسم التنقل، هذا المحتوى الرئيسي)، فيستطيع قارئ الشاشة إبلاغ المستخدم بهذه البنية والسماح له بالتنقل مباشرة بين الأقسام (كالقفز إلى المحتوى الرئيسي مباشرة). أما صناديق <div> العادية فلا تحمل أي دلالة عن وظيفتها، فلا يستطيع قارئ الشاشة تمييز الرأس من التنقل من المحتوى، ويضطر المستخدم لتصفح كل المحتوى خطيًا دون معرفة بنيته.

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

الإجابة: في التصميم المتجاوب: استخدام تخطيط يعيد ترتيب المحتوى تلقائيًا حسب عرض الشاشة (كعرض عمود واحد على الهاتف بدلًا من عدة أعمدة جنبًا إلى جنب كما على الحاسوب)؛ الفائدة: يبقى الموقع سهل القراءة والاستخدام بغض النظر عن حجم شاشة الزائر، وهو أمر مهم لأن كثيرًا من القراء يتصفحون الأخبار عبر الهاتف. في HTML الدلالي: استخدام <article> لكل خبر و<header> لعنوانه و<nav> لقائمة الأقسام؛ الفائدة: تساعد محركات البحث على فهم بنية المحتوى بصورة أفضل (أي جزء هو المقال الأساسي وأيها تنقّل أو هوامش)، دون أن يضمن ذلك وحده ترتيبًا أعلى في نتائج البحث.