حقيبة تدريبية

برمجة صفحات الويب 2 – المستوى المتقدم

24 يوماً، 48 ساعة تدريبية

تتضمن الحقيبة الملفات التالية:

1. شرائح العرض PowerPoint
2. دليل المدرب Word
3. مذكرة المتدرب Word
4. أوراق العمل "التمارين والحالات العملية" Word
5. الاختبار القبلي والبعدي Word
6. الدليل التعريفي للحقيبة Word
7. نموذج تقييم دورة تدريبية Word

جميع الملفات مفتوحة وقابلة للتعديل (تصميم إنفوجرافيك)

وصف الدورة:

• يُعنى هذه الدورة بتدريب المتدرب على المفاهيم الأساسية لتطوير تطبيقات الويب، بدءًا من التعرف على مكونات صفحات الويب وأدوات بنائها، وصولًا إلى إنشاء صفحات تفاعلية باستخدام HTML وCSS وJavaScript، مع التعرض لتقنيات حديثة مثل DOM وjQuery.، وتُعد المدخل الرئيس لفهم كيفية تصميم واجهات المستخدم وتطوير تطبيقات ويب ديناميكية تفاعلية تتوافق مع معايير الويب الحديثة، وتركز على الجانب التطبيقي العملي، حيث يُمارس المتدرب كتابة الأكواد البرمجية، وتنفيذ المهام الواقعية في بيئة تطوير حقيقية داخل المعمل، كما تتضمن مفاهيم مهمة حول تجربة المستخدم (UX) والأمان وتحسين الأداء في تطبيقات.

أهمية الدورة:

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

الهدف العام:

• تمكين المتدرب من اكتساب المهارات الأساسية في برمجة صفحات الويب وتطوير تطبيقات ويب تفاعلية باستخدام التقنيات الحديثة وأفضل الممارسات البرمجية

الأهداف التفصيلية:

• تطوير تطبيقات الويب
• مفاهيم برمجة الشبكة
• تجربة المستخدم UX
• تكنولوجيا الويب الحديثة
• - HTM
• - CSS
• - JavaScript
• - jQuery
• ممارسات البرمجة الجيدة
• تحسين الأداء
• التفاعل مع خدمات الويب
• الأمان في تطبيقات الويب

الفئة المستهدفة:

• متدربي دبلوم تقنية الحاسب الآلي – تخصص البرمجيات أو تطوير الويب، ممن أكملوا مقرّر مدخل إلى البرمجة (202 برمج) أو ما يعادله.
• الأفراد المهتمين بتعلم أساسيات بناء صفحات الويب وفهم كيفية عمل المتصفحات والتفاعل مع المستخدمين.
• المبتدئين الذين يمتلكون معرفة مبدئية بالمفاهيم البرمجية العامة (مثل المتغيرات، الجمل الشرطية، الحلقات التكرارية) ويرغبون بتطبيقها في بيئة الويب.
• من يسعون إلى بناء مواقع إلكترونية شخصية أو مؤسسية أو الدخول في مجال تصميم وتطوير الواجهات الأمامية (Front-End Development).

المحاور التدريبية:

اليوم التدريبي الأول: مقدمة في البرمجة وتطوير الويب

• مقدمة
• نشاط تعارف للمشاركين
• ما هي jQuery وفوائدها
• تضمين jQuery والبنية الأساسية
• اختيار العناصر باستخدام jQuery
• ما هي jQuery وفوائدها

اليوم التدريبي الثاني: تعديل المحتوى والخصائص باستخدام jQuery

• تعديل المحتوى: .text() و .html() و .val()
• إدارة خصائص العناصر (Attributes)
• إدارة فئات CSS باستخدام .addClass() و .removeClass()

اليوم التدريبي الثالث: التعامل مع الأحداث والرسوم المتحركة في jQuery

• التعامل مع الأحداث في jQuery
• الرسوم المتحركة والتأثيرات الجاهزة
• الرسوم المتحركة المخصصة: .animate()

اليوم التدريبي الرابع: البرمجة غير المتزامنة: setInterval وبناء الساعة

• الدوال (Functions): البناء وإعادة الاستخدام
• الشروط (Conditions): أساس اتخاذ القرار (بيان if/else)
• معاملات المقارنة وأدوات الإخراج المتقدمة

اليوم التدريبي الخامس: أنواع الأخطاء البرمجية وطرق اكتشافها

• JavaScriptأنواع الأخطاء البرمجية الرئيسية
• قراءة رسائل الأخطاء الشائعة
• استخدام لسان Console لتتبع الكود
• أدوات المطور: نقاط التوقف وتتبع المكدس

اليوم التدريبي السادس: التعامل مع الأخطاء بإستخدام try...catch

• بنية try...catch ومعالجة الاستثناءات
• بيان finally والتحكم في الموارد
• إنشاء الأخطاء وإلقاؤها (throw)
• تمرين تطبيقي: حماية معالج JSON

اليوم التدريبي السابع: إنشاء لوحات معلومات ديناميكية وتوافق المتصفحات

• بناء لوحات المعلومات الديناميكية
• مشكلة التوافقية والتحديثات
• استخدام Polyfills لسد الفجوة

اليوم التدريبي الثامن: تحسين الأداء وضمان الاستجابة

• تحسين التلاعب بـ DOM
• التحكم في التردد باستخدام Debouncing
• تحديد المعدل باستخدام Throttling
• قياس الأداء وتحديد نقاط الضعف

اليوم التدريبي التاسع: الدوال المتقدمة

• البحث النصي البسيط في JavaScript
• التصفية باستخدام خصائص البيانات المخصصة
•  (Data Attributes)
• تحسين أداء البحث باستخدام Debouncing

اليوم التدريبي العاشر: التخزين المحلي: Local Storage و Session Storage

• مفهوم التخزين المحلي وأنواعه
• استخدام دوال التخزين الأساسية
• التخزين كـ سلاسل نصية والقيود
• تذكر اسم المستخدم

اليوم التدريبي الحادي عشر: تخزين البيانات المهيكلة (JSON) في Local Storage

• JSON كوسيط للتخزين
• تطبيق خطوتين الحفظ والاسترداد
• تمرين تطبيقي: حفظ سلة التسوق

اليوم التدريبي الثاتي عشر: الاتصال بالخادم باستخدام دالة fetch ونموذج Promise

• أساسيات الاتصال بين العميل والخادم
• دالة fetch وعودة إلى الوعود (Promises)
• معالجة الاستجابة وتحليل JSON
• تمرين تطبيقي: جلب ملفات المستخدمين

اليوم التدريبي الثالث عشر: إرسال البيانات (POST) وتبسيط الوعود بـ async/await

• إرسال البيانات إلى الخادم (POST Request)
• مقدمة إلى async/await لتبسيط الوعود
• معالجة الأخطاء باستخدام async/await و try...catch
• إرسال نموذج مستخدم جديد

اليوم التدريبي الرابع عشر: الفرز الديناميكي (Sorting) للبيانات المسترجعة

• أساسيات دالة sort()
• الفرز حسب القيم الرقمية
• الفرز حسب القيم النصية
• دالة فرز شاملة

اليوم التدريبي الخامس عشرة: التعديل (PUT/PATCH) والحذف (DELETE) للبيانات على الخادم

• التعديل على البيانات (PUT مقابل PATCH)
• حذف البيانات (DELETE Request)
• التفاعل مع الواجهة الأمامية

اليوم التدريبي السادس عشر: تأمين التطبيقات: منع هجمات XSS وCSRF

• أساسيات أمن الواجهة الأمامية
• منع هجمات XSS (Cross-Site Scripting)
• منع هجمات CSRF (Cross-Site Request Forgery)
• أفضل الممارسات الأمنية الأخرى

اليوم التدريبي السابع عشر: مشروع متكامل: بناء نظام إدارة مهام (CRUD To-Do App)

• هيكلة البيانات وإدارة التخزين
• إنشاء وقراءة المهام (CRUD: Create & Read)
• التحديث والحذف والفرز (CRUD: Update, Delete & Sorting)
• التصفية الديناميكية (Filtering)

اليوم التدريبي الثامنة عشرة: التفاعل بين التصفية والبحث والفرز

• بناء تسلسل المعالجة (Chaining Pipeline)
• تطبيق مبدأ عدم التغيير (Immutability)
• بناء واجهة جدول البيانات التفاعلية

اليوم التدريبي التاسع عشر: كيفية إنشاء Forms فعالة في HTML5

• أنواع حقول الإدخال الجديدة في HTML5
• خصائص القيود والتحقق الأولي
• آلية التحقق من الصحة في HTML5
• تطبيق عملي وبناء هيكل نموذج متقدم

اليوم التدريبي العشرون: استخدام JavaScript للتحقق من الصحة: الأساسيات

• السيطرة على النموذج باستخدام حدث submit
• جمع قيم الحقول والتحضير للتحقق
• تطبيق التحقق من الحقول الفارغة (Simple Validation)
• تدفق العمليات واتخاذ القرار

اليوم التدريبي الواحد العشرون: التحقق من تنسيق البيانات (Regular Expressions)

• مقدمة في التعبيرات النمطية (Regex)
• كتابة دالة للتحقق من صحة تنسيق البريد الإلكتروني
• التحقق من قوة كلمة المرور (الأنماط المعقدة)
• تطبيق عملي ودمج التعبيرات النمطية في الدالة الرئيسية

اليوم التدريبي الثاني والعشرون: عرض رسائل الخطأ المخصصة وإدارة الحالةDOM

• هيكلة الـ DOM لرسائل الخطأ المخصصة
• استخدام CSS لتطبيق فئات تصميمية على الأخطاء
• مسح رسائل الخطأ عند قيام المستخدم بالتعديل
• دمج النظام في الدالة الرئيسية

اليوم التدريبي الثالث والعشرون: استخدام HTML5 Validation API في JavaScript

• قراءة حالة الحقل عبر خاصية validity
• استخدام دالة checkValidity()
• السيطرة على رسائل الخطأ باستخدام setCustomValidity()
• تدفق عمل الـ Validation API والرسائل المخصصة

اليوم التدريبي الرابع والعشرون: تحسين تجربة المستخدم (UX) في النماذج

• التحقق الفوري (Real-time Validation) عند الخروج من الحقل
• تفعيل زر الإرسال أو تعطيله ديناميكياً
• بناء نموذج تسجيل متكامل