حقيبة تدريبية
برمجة صفحات الويب 1 - المستوى الأساسي
24 يوماً، 48 ساعة تدريبية
تتضمن الحقيبة الملفات التالية:
- شرائح العرض PowerPoint
- دليل المدرب Word
- مذكرة المتدرب Word
- أوراق العمل "التمارين والحالات العملية" Word
- الاختبار القبلي والبعدي Word
- الدليل التعريفي للحقيبة Word
- نموذج تقييم دورة تدريبية Word
جميع الملفات مفتوحة وقابلة للتعديل (تصميم إنفوجرافيك)
وصف الدورة:
تُعنى الدورة بتدريب المشاركين على المفاهيم الأساسية لتطوير تطبيقات الويب، بدءًا من التعرف على مكونات صفحات الويب وأدوات بنائها، وصولًا إلى إنشاء صفحات تفاعلية باستخدام HTML وCSS وJavaScript، مع التعرض لتقنيات حديثة مثل DOM وjQuery.، ويُعد المقرر المدخل الرئيس لفهم كيفية تصميم واجهات المستخدم وتطوير تطبيقات ويب ديناميكية تفاعلية تتوافق مع معايير الويب الحديثة، كما يركز على الجانب التطبيقي العملي، حيث يُمارس المتدرب كتابة الأكواد البرمجية، وتنفيذ المهام الواقعية في بيئة تطوير حقيقية داخل المعمل، ويتضمن المقرر مفاهيم مهمة حول تجربة المستخدم (UX) والأمان وتحسين الأداء في تطبيقات.
أهمية الدورة:
تأتي أهمية الدورة من الدور المحوري الذي تلعبه تطبيقات الويب في الحياة اليومية والبيئة المهنية الحديثة، فاليوم تعتمد أغلب المؤسسات والشركات على مواقع إلكترونية وتطبيقات ويب لتقديم خدماتها، مما يجعل امتلاك مهارات بناء صفحات الويب من أكثر المهارات طلبًا في سوق العمل التقني، ويُعد هذا المقرر الخطوة الأولى في مسار تطوير الويب، حيث يُكسب المتدرب الأساس العملي والفكري اللازم لفهم كيفية إنشاء صفحات إلكترونية متكاملة من حيث الشكل والوظيفة، ومن خلال تعلم HTML وCSS وJavaScript، يتمكن المتدرب من تحويل الأفكار إلى واجهات تفاعلية مرئية قابلة للاستخدام، مما يمهد له الطريق نحو مراحل متقدمة مثل تطوير تطبيقات الويب الديناميكية وقواعد البيانات وتصميم واجهات المستخدم الاحترافية.
الهدف العام:
- تمكين المتدرب من اكتساب المهارات الأساسية في برمجة صفحات الويب وتطوير تطبيقات ويب تفاعلية باستخدام التقنيات الحديثة وأفضل الممارسات البرمجية
الأهداف التفصيلية:
سوف يكون المشارك بعد حضور الدورة على معرفة تامة بما يلي:
- تطوير تطبيقات الويب
- مفاهيم برمجة الشبكة
- تجربة المستخدم UX
- تكنولوجيا الويب الحديثة
- HTM
- CSS
- - JavaScript
- - jQuery
- ممارسات البرمجة الجيدة
- تحسين الأداء
- التفاعل مع خدمات الويب
- الأمان في تطبيقات الويب
الفئة المستهدفة:
- متدربي دبلوم تقنية الحاسب الآلي – تخصص البرمجيات أو تطوير الويب، ممن أكملوا مقرّر مدخل إلى البرمجة (202 برمج) أو ما يعادله.
- الأفراد المهتمين بتعلم أساسيات بناء صفحات الويب وفهم كيفية عمل المتصفحات والتفاعل مع المستخدمين.
- المبتدئين الذين يمتلكون معرفة مبدئية بالمفاهيم البرمجية العامة (مثل المتغيرات، الجمل الشرطية، الحلقات التكرارية) ويرغبون بتطبيقها في بيئة الويب.
- من يسعون إلى بناء مواقع إلكترونية شخصية أو مؤسسية أو الدخول في مجال تصميم وتطوير الواجهات الأمامية (Front-End Development).
المحاور التدريبية:
اليوم الأول: مقدمة في البرمجة وتطوير الويب
- مقدمة
- نشاط تعارف للمشاركين
- مقدمة في البرمجة وتطوير الويب
- الركائز الثلاث للواجهة الأمامية
- بيئة العمل وأدوات المطور
- تمرين
- أهمية القيادة الشابة في مواجهة تحديات القرن الـ 21.
- تمرين.
اليوم الثاني: الفروقات الجوهرية والدور في بناء الويب
- لغة HTML ودورها في تحديد هيكل الصفحة.
- لغة CSS ودورها في التنسيق والمظهر الجمالي.
- لغة JavaScript ودورها في التفاعل والديناميكية.
- كيفية تكامل اللغات الثلاث في بناء تجربة ويب متكاملة.تمرين
اليوم الثالث: مفاهيم البرمجة الأساسية (المتغيرات وأنواع البيانات)
- المتغيرات: المفهوم والتصريح
- أنواع البيانات الأساسية (Primitive Types)
- العمليات الحسابية الأساسية على الأرقام والنصوص
- تطبيق عملي: تعريف المتغيرات واستخدام console.log()
اليوم الرابع: مفاهيم البرمجة الأساسية (الدوال، الشروط، ونظرة على DOM)
- الدوال (Functions): البناء وإعادة الاستخدام
- الشروط (Conditions): أساس اتخاذ القرار (بيان if/else)
- معاملات المقارنة وأدوات الإخراج المتقدمة
- تطبيق عملي مُركز وتمرين أساسي
اليوم الخامس: تعريف JavaScript والبيانات المتقدمة
- JavaScript: نظرة أعمق على لغة التفاعل
- البيانات الأولية مقابل المرجعية
- تحويل الأنواع (Type Coercion) ومشاكلها
- تطبيق عملي وتمرين على التحويل
اليوم السادس: العمليات الحسابية والمنطقية (الجزء الأول)
- المعاملات الحسابية (Arithmetic Operators)
- أولوية العمليات الحسابية (Precedence)
- معاملات الإسناد (Assignment Operators) المركبة
- مقدمة في المعاملات المنطقية وتمرين عملي
اليوم السابع: العمليات الحسابية والمنطقية(الجزء الثاني)
- معاملات المقارنة الأساسية
- المساواة في JavaScript (== vs. ===)
- **المعاملات المنطقية (&&, `
- تطبيق عملي: بناء شروط مركبة
اليوم الثامن: كيفية إدراج JavaScript في صفحات الويب
- طرق إدراج JavaScript وموقع الوسم
- الـ defer والـ async: تحسين الأداء
- لماذا الأداء مهم: عملية تحميل المتصفح
- تطبيق عملي: اختبار التحميل باستخدام Console
اليوم التاسع: الدوال المتقدمة
- المعاملات والقيم المُعادة: التعميق والاستخدام
- نطاق المتغيرات (Scope) في JavaScript
- الـ Hoisting والـ Shadowing في الدوال
- تطبيق عملي: بناء دالة آمنة
اليوم العاشر: المعاملات والقيم المُعادة: التعميق والاستخدام
- بناء الكائنات والخصائص
- الوصول إلى البيانات وتعديلها (Notation)
- الأساليب (Methods) والكلمة المفتاحية this
- تطبيق عملي: كائن المستخدم الديناميكي
اليوم الحادي عشر: المصفوفات :التعريف والانشاء
- المصفوفات: التعريف والإنشاء
- الفهرسة والوصول إلى العناصر (صفر الأساس)
- أساليب إضافة وحذف العناصر (Mutation Methods)
- أساليب التنفيذ وإدارة البيانات (Manipulation Methods)
- تطبيق عملي: بناء قائمة مهام بسيطة (To-Do List)
اليوم الثاتي عشر: الدوال السهمية وكائنات JS القياسية
- الدوال السهمية (Arrow Functions) وبنيتها
- التعمق في this: الفرق بين الدالة العادية والسهمية
- الكائن القياسي Math ووظائفه
- الكائن القياسي Date والتعامل مع الوقت
- تمرين
اليوم الثالث عشر: بيان if والتحكم في التدفق
- التحكم في التدفق وبيان if / else الأساسي
- الشروط المتعددة: بيان else if
- الشروط المتداخلة والمعامل الثلاثي (Ternary Operator)
- تطبيق عملي: نظام تقييم الدرجات
اليوم الرابع عشر: بيان switch
- الهيكل الأساسي لـ switch وكتل case
- التحكم في التنفيذ: أهمية break و default
- تطبيق عملي ومقارنة مع if/else if
اليوم الخامس عشرة: مقدمة في البرمجة وتطوير الويب
- مفهوم الحلقات التكرارية وأهميتها
- البنية والهيكل لحلقة for
- استخدام حلقة for مع المصفوفات
- تطبيقات متقدمة: العد العكسي والتزايد المتعدد
اليوم السادس عشر: الحلقات التكرارية: while و do...while والتحكم
- حلقة while: البنية والشرط
- حلقة do...while: ضمان التنفيذ الأول
- أدوات التحكم في الحلقة: break و continue
- تطبيق عملي: محاكاة عملية سحب الأموال
اليوم السابع عشر: الحلقات التكرارية: الحلقات التكرارية: for...of و for...in
- حلقة for...of: التكرار على القيم
- حلقة for...in: التكرار على الخصائص (المفاتيح)
- مقارنة بين أنواع الحلقات الثلاثة
- تطبيق عملي: تحليل قائمة بيانات
اليوم الثامنة عشرة: الحلقات التكرارية: مفهوم الدوال عالية الترتيب ودالة forEach
- مقدمة إلى البرمجة الوظيفية والدوال عالية الترتيب
- دالة Array.prototype.forEach() والبنية
- مُعاملات دالة الـ Callback (القيمة، الفهرس، المصفوفة)
- تطبيق عملي: تحليل البيانات وطباعتها
اليوم التاسع عشر: الدوال عالية الترتيب: map() و filter()
- دالة Array.prototype.map(): التحويل
- دالة Array.prototype.filter(): التصفية
- مقارنة رئيسية ومبدأ عدم التعديل
- تطبيق عملي: تسلسل الأساليب (Chaining)
اليوم العشرون: الدوال عالية الترتيب: reduce()
- دالة Array.prototype.reduce() والبنية
- المُجمِّع والقيمة الأولية: آليات العمل
- تطبيقات متقدمة: تجميع كائنات وتحويلها
- تطبيق عملي: حساب سلة المشتريات
اليوم الواحد العشرون: مقدمة إلى DOM واختيار العناصر
- ما هو DOM؟ وكيف يعمل؟
- الوصول إلى عنصر واحد (Single Element Selection)
- الوصول إلى مجموعة من العناصر (Multiple Element Selection)
- تطبيق عملي: اختيار العناصر للتحكم بها
اليوم الثاني والعشرون: التلاعب بمحتوى وعناصر DOM
- تعديل المحتوى: textContent و innerHTML
- التعامل مع خصائص العناصر (Attributes)
- إنشاء وإضافة العناصر الجديدة (Creation & Insertion)
- تطبيق عملي: بناء قائمة ديناميكية
اليوم الثالث والعشرون: التعامل مع الأحداث (Events)
- ما هي الأحداث ومستمع الأحداث (addEventListener)
- الـ Callback الخاصة بالحدث وكائن Event
- منع السلوك الافتراضي والتحكم في النماذج
- تطبيق عملي: تفاعل كامل مع زر إرسال
اليوم الرابع والعشرون: مقدمة في البرمجة غير المتزامنة ومفهوم setTimeout
- المتزامن مقابل غير المتزامن (Sync vs Async)
- دالة setTimeout: البنية والآلية
- إلغاء التأخير: clearTimeout
- تطبيق عملي: محاكاة تحميل بيانات
