الخطة التدريبية
18 وحدة تدريبية متدرجة — كل وحدة تنتهي بتطبيق عملي يُقيّمه المدرّب.
مقدمة في تطوير الويب وهيكلة المشروع
من فكرة الموقع إلى مشروع منظم قابل للتطوير
تُعرِّف هذه الوحدة المتدرب بمجال تطوير وتصميم مواقع الويب ومكوّنات المنظومة الرقمية، وتوضح ما يحدث من لحظة طلب الصفحة حتى ظهورها، ثم تُرسي هيكل مشروع منظم يفصل المحتوى عن التنسيق عن السلوك، وهو الأساس الذي تُبنى عليه الوحدات التالية.
أهداف الوحدة (4)
- يوضّح مفهوم تطوير الويب ويميّز بين الواجهة الأمامية والخلفية.
- يشرح كيفية عمل الويب: المتصفح والخادم وبروتوكول HTTP واسم النطاق.
- يبني هيكل مجلدات مشروع منظمًا يسهل صيانته لاحقًا.
- يهيّئ بيئة عمل عملية بمحرر أكواد ولوحة أدوات المطوّر في المتصفح.
أساسيات HTML: بنية المستند والعناصر الدلالية
محتوى صحيح البنية يُقرأ للبشر وللآلات
تتناول هذه الوحدة لغة HTML من أساسها: بنية المستند وعناصره ووسومه وخصائصه، ثم العناصر الدلالية التي تحمل معنى المحتوى وتساعد محركات البحث وقارئات الشاشة، مع ممارسات التحقق من صحة الكود وتجنّب الأخطاء الشائعة.
أهداف الوحدة (4)
- يكتب مستند HTML صحيح البنية من إعلان النوع حتى عنصر الإغلاق.
- يميّز بين العناصر الكتلية والعناصر السطرية وأثرها في التخطيط.
- يوظّف العناصر الدلالية header وnav وmain وsection وarticle وfooter بمعناها الصحيح.
- يتحقق من صحة الكود ويصلح الأخطاء الشائعة مثل تداخل الوسوم.
HTML المتقدم: النماذج والوسائط والجداول
إدخال بيانات موثوق وعرض وسائط متوافق مع كل الأجهزة
تنتقل الوحدة من العرض إلى التفاعل: بناء النماذج وضبط حقول الإدخال والتحقق المبدئي، وإدراج الصور والصوت والفيديو بصيغ مناسبة، وتنظيم البيانات في جداول واضحة، مع مراعاة الوصول وسلامة البيانات المُدخلة.
أهداف الوحدة (4)
- يبني نموذجًا كاملًا بعنصر form وحقول إدخال مناسبة لكل نوع بيانات.
- يوظّف خصائص required وtype وplaceholder لتحسين دقة الإدخال.
- يربط كل حقل بعنصر label لتحقيق الوصول وتوسيع منطقة النقر.
- ينظّم البيانات في جدول بعنوان ورؤوس أعمدة صحيحة.
أساسيات CSS: المحددات ونموذج الصندوق
من الشكل الافتراضي إلى تصميم مقصود قابل للصيانة
ترسو هذه الوحدة على لغة CSS: كيفية ربطها بالمستند، وكتابة المحددات بأنواعها، وفهم نموذج الصندوق وحساب الأبعاد الفعلية، ثم ضبط الألوان والخطوط والمسافات وترتيب الأولوية بين الأنماط المتعارضة.
أهداف الوحدة (4)
- يربط ملف CSS بالمستند بالطريقة الأنسب للمشروع.
- يكتب محددات متنوعة بالفئة والمعرّف والصفة والعلاقة بين العناصر.
- يحسب الأبعاد الفعلية للعنصر بعد الحشوة والحدود باستخدام نموذج الصندوق.
- يرتب أولوية الأنماط ويتجنّب التعارض والتكرار المسبب لإرباك الصيانة.
تخطيط الصفحات: Flexbox والشبكات Grid
تخطيطات مرنة تُبنى بالمنطق لا بالحسابات اليدوية
تعرض هذه الوحدة أداتي التخطيط الحديثتين في CSS: Flexbox لترتيب العناصر في اتجاه واحد بمرونة، وGrid لبناء شبكات ثنائية الأبعاد للصفحة كاملة، مع معايير عملية لاختيار الأداة المناسبة لكل تصميم ودمجهما في مشروع واحد.
أهداف الوحدة (4)
- يميّز بين الترتيب أحادي البعد في Flexbox والشبكات ثنائية الأبعاد في Grid.
- يضبط اتجاه المحور الرئيسي والمحاذاة والتوزيع والمسافات بين العناصر.
- يبني شبكة أعمدة وصفوف ويتحكم في امتداد العناصر داخلها.
- ينفّذ تخطيط صفحة كاملًا: ترويسة وقائمة جانبية ومحتوى وتذييل.
التصميم المتجاوب والوحدات النسبية
واجهة واحدة تعمل بجودة على كل الأجهزة
تشرح هذه الوحدة مبدأ التصميم المتجاوب: كيف تُبنى واجهة واحدة تعمل على الهاتف والحاسب واللوحي، وما دور نقاط الانقطاع وMedia Queries، وكيف تُضبط الصور والوسائط والوحدات النسبية ومقاسات اللمس.
أهداف الوحدة (4)
- يوضّح مبدأ التصميم المتجاوب والفرق بينه وبين التصميم الثابت.
- يكتب نقاط انقطاع مناسبة بالاعتماد على المحتوى لا على أنواع الأجهزة.
- يستخدم الوحدات النسبية والأبعاد المرنة لضبط العناصر على كل المقاسات.
- يجعل الصور والوسائط متجاوبة بمقاسات مرنة دون تمدد مشوّه.
نظم التصميم والهوية البصرية
اتساق بصري يُدار بأنماط قابلة لإعادة الاستخدام
تعرض هذه الوحدة كيفية بناء هوية بصرية متسقة: لوحة الألوان والخطوط والشبكة، ثم تحويل هذه العناصر إلى مكوّنات قابلة لإعادة الاستخدام، وأخيرًا إدارة القيم المتغيّرة والاتساق بين الصفحات بمرجع واحد للتصميم.
أهداف الوحدة (4)
- يوضّح عناصر الهوية البصرية: الألوان والخطوط والشبكة والمسافات.
- يبني مكتبة مكوّنات قابلة لإعادة الاستخدام بأنماط موحّدة.
- يستخدم المتغيرات في CSS لإدارة القيم من مكان واحد.
- يقيّم الاتساق البصري ويصنّف الألوان بحسب الوظيفة لا الذوق فقط.
أساسيات JavaScript والمنطق البرمجي
تحويل الثبات إلى تفاعل: متغيرات وشروط وقرارات حاسوبية
تبدأ هذه الوحدة برمجة الواجهة: المتغيرات وأنواع البيانات والعمليات، ثم الشروط والمقارنات لاتخاذ قرارات، ثم الحلقات ومعالجة مدخلات المستخدم للوصول إلى منطق برمجي منظم وقابل للقراءة.
أهداف الوحدة (4)
- يعرّف المتغيرات ويختارها بمناسب المساحة والنطاق، ويميّز أنواع البيانات.
- ينفّذ عمليات حسابية ومنطقية وربط النصوص ويقرأ الناتج في وحدة الطرفية.
- يكتب شروطًا وأحكامًا متعددة المسارات تعالج حالات مختلفة.
- يستخدم الحلقات لمعالجة القوائم ويعالج مدخلات المستخدم بأمان.
الدوال والمصفوفات والكائنات في JavaScript
تنظيم الكود وإعادة استخدامه وتمثيل البيانات المركبة
تنتقل هذه الوحدة من الجمل المفردة إلى بناء الكود: الدوال لتنظيم المهام وإعادة استخدامها، والمصفوفات لحفظ قوائم القيم، والكائنات لتمثيل السجلات المركبة وربط البيانات ببعضها في هيكل واضح.
أهداف الوحدة (4)
- يعرّف الدوال ويستدعيها بوسائط ويعيد منها قيمًا.
- يتعامل مع المصفوفات بالإضافة والحذف والتصفية والمرور على العناصر.
- يمثّل البيانات المركبة بكائنات ويصل إلى خصائصها.
- ينظّم الكود في دوال صغيرة واضحة المسؤولية.
التعامل مع شجرة المستند DOM وأحداث المستخدم
ربط الواجهة بالسلوك واستجابة مباشرة لتصرفات المستخدم
تشرح هذه الوحدة كيف يمثّل المتصفح صفحة HTML كشجرة عناصر يمكن البرمجة عليها: اختيار العناصر، وتعديل محتواها وأنماطها، ثم الاستجابة لأحداث المستخدم مثل النقر والكتابة والتمرير، مع مراعاة الأداء وسلامة التنفيذ.
أهداف الوحدة (4)
- يوضح مفهوم شجرة المستند واختلاف أنواع العقد فيها.
- يختار العناصر بأدوات مناسبة ويعدّل محتواها وأنماطها.
- يربط الأحداث بمستمعات ويستجيب لتصرفات المستخدم.
- يتجنب أخطاء التنفيذ الشائعة مثل تنفيذ السكربت قبل بناء العناصر.
البرمجة غير المتزامنة وطلبات الشبكة وJSON
جلب بيانات حقيقية من الشبكة وعرضها في الواجهة
تعرّف هذه الوحدة بمفهوم الطلب غير المتزامن: كيف يطلب المتصفح بيانات من خادم دون تجميد الصفحة، وكيف تُقرأ صيغة JSON وتُحوّل إلى كائنات، وكيف تُعالج الوعود والأخطاء لبناء واجهات تعرض بيانات حقيقية.
أهداف الوحدة (4)
- يوضّح الفرق بين التنفيذ المتزامن وغير المتزامن وأثره في تجربة المستخدم.
- يرسل طلب شبكة ويقرأ استجابة الخادم بحسب رمز الحالة.
- يحوّل نص JSON إلى كائنات ويستخدم بياناته في بناء عناصر الواجهة.
- يعالج حالات التحميل والخطأ بمسار واضح في الواجهة.
تخزين البيانات محليًا وإدارة حالة الواجهة
بيانات تبقى بعد إغلاق الصفحة وواجهة تتزامن مع الحالة
تشرح هذه الوحدة كيف تحفظ الواجهة بيانات المستخدم في متصفحه دون خادم، وكيف تُخزَّن السجلات بصيغة JSON ثم تُقرأ وتُعرض، وكيف تُدار حالة الواجهة بحيث يبقى العرض متزامنًا مع البيانات في كل لحظة.
أهداف الوحدة (4)
- يفرّق بين أنواع التخزين في المتصفح بحسب عمر البيانات ونطاقها.
- يحفظ مصفوفة سجلات بصيغة JSON ويقرأها ويحدّثها بأمان.
- يُدير حالة الواجهة ويعرضها بحسب تغيّر البيانات.
- يتعامل مع حالات التخزين الفارغ والبيانات التالفة.
إمكانية الوصول ومعايير WCAG
موقع يخدم كل المستخدمين بما في ذلك ذوو الإعاقة
تعرض هذه الوحدة مفهوم إمكانية الوصول ومعايير المحتوى الرقمي، والمبادئ الأربعة التي يستند إليها معيار WCAG 2.2 الصادر عن W3C، ثم الممارسات العملية في HTML: التسميات والعناوين والتركيز والصيغ البديلة، وأخيرًا أدوات الفحص والاختبار.
أهداف الوحدة (4)
- يوضّح مبادئ إمكانية الوصول الأربعة المدرجة في معيار WCAG 2.2.
- يميّز مستويات المطابقة A وAA وAAA وأهمية المستوى AA في السياسات المؤسسية.
- يطبّق ممارسات HTML الوصولية: التسميات البديلة وعناوين الأقسام وترتيب التركيز.
- يستخدم ARIA بحذر ويختبر الصفحة بأدوات الفحص ولوحة المفاتيح.
تجربة المستخدم وتصميم الواجهات
قرارات تصميم تخدم هدف المستخدم وتقيس أثرها
توضح هذه الوحدة الفرق بين تجربة المستخدم وواجهة الاستخدام، وتبدأ من رحلة المستخدم وأهدافه، ثم التخطيط البصري والتسلسل الهرمي والتنقل، وأخيرًا اختبار قابلية الاستخدام وقياس النتائج قبل التطوير الكامل.
أهداف الوحدة (4)
- يفرّق بين تجربة المستخدم وواجهة الاستخدام ودور كل منهما.
- يرسم رحلة مستخدم مبسطة ويحدد نقاط الألم فيها.
- يطبق مبادئ التخطيط البصري والتسلسل الهرمي والتنقل الواضح.
- يقيس قابلية الاستخدام باختبار بسيط بمهام محددة.
اختبار المواقع وتصحيح الأخطاء
منهج منظم للكشف عن الخطأ وإصلاحه والتحقق من الإصلاح
تقدم هذه الوحدة منهجًا عمليًا لاختبار المواقع: أنماط الاختبار اليدوي والآلي واختبار الانحدار، ثم مهارات تشخيص الأخطاء باستخدام لوحة أدوات المطوّر، وأخيرًا اختبار التوافق بين المتصفحات ومعالجة حالات الحدود قبل التسليم.
أهداف الوحدة (4)
- يميّز بين أنماط الاختبار ويرتّبها بحسب المرحلة وطبيعة التغيير.
- يشخّص الأخطاء بأدوات المطوّر ويحللها برشاقة منهجية.
- يختبر التوافق بين المتصفحات وقياسات الشاشات المختلفة.
- يوثّق الخطأ والإصلاح لمنع تكراره في المشروع.
أداء الويب وتحسين سرعة التحميل
قياس أولًا ثم تحسين: صفحة أسرع وتجربة أنعم
تشرح هذه الوحدة مفهوم أداء الويب وطرق قياسه، وأثر الصور والملفات والخطوط في زمن التحميل، ثم أساليب تحسين تنفيذ السكربتات والتخزين المؤقت، مع قاعدة أساسية: لا تُحسّن قبل أن تقيس.
أهداف الوحدة (4)
- يوضّح مؤشرات الأداء الرئيسة ومعنى القياس الفعلي للتجربة.
- يقلّل حجم الصفحة بضغط الصور وتقليل الملفات غير الضرورية.
- يحسّن تحميل الخطوط والملفات ويستخدم التخزين المؤقت بكفاءة.
- يجعل تنفيذ السكربتات لا يعيق رسم الصفحة الأولى.
نشر الموقع والاستضافة وأمن الموقع الأساسي
من مشروع على جهازك إلى موقع منشور آمن
تُغلق هذه الوحدة السلسلة التدريبية بمرحلة النشر: اختيار الاستضافة وربط اسم النطاق، ورفع الملفات والتحقق من العمل، ثم أساسيات الأمن التي لا غنى عنها عند التعرض للشبكة، وأخيرًا الصيانة الدورية والنسخ الاحتياطي.
أهداف الوحدة (4)
- ينشر موقعًا على استضافة مناسبة ويربطه باسم نطاق.
- يوضّح دور بروتوكول HTTPS في حماية البيانات والثقة.
- يميّز مخاطر الويب الأساسية ويطبق ضوابط تقليلها.
- ينفّذ الصيانة الدورية والنسخ الاحتياطي ومراقبة الأخطاء.
المشروع النهائي: نموذج الإدخال مع زر الإرسال الهارب
مشروع ختامي يجمع النماذج والتنسيق وتجربة الاستخدام وأحداث المستخدم
تصميم نموذج إدخال لا يُرسل قبل اكتمال البيانات، مع زر إرسال يهرب داخل الشاشة عند نقص البيانات ويعود إلى موضعه ويسمح بالإرسال فور اكتمالها.
أهداف الوحدة (5)
- تحويل فكرة المشروع النهائي إلى نموذج إدخال مكتمل المكوّنات.
- ربط التحقق من صحة البيانات (checkValidity) بحركة عنصر في الواجهة.
- استخدام position: fixed مع transition لتنفيذ تأثير الهروب بسلاسة.
- توليد إحداثيات عشوائية داخل حدود الشاشة مع احترام الهوامش.
- إلغاء تأثير الهروب والسماح بالإرسال عند اكتمال البيانات مع رسالة نجاح.