شرح صفوف ومحتوى الفقرة
بعد أن تعرّفنا في الفصول السابقة من مادة تكنولوجيا الويب على كيفية اتصال الأجهزة عبر الشبكات، وكيف تستضيف الخوادم المواقع وتتبادل الرسائل مع متصفح الويب، ننتقل الآن إلى التخصص المسؤول عن كل ما تراه عينك وتتفاعل معه بيدك داخل شاشة المتصفح: تطوير الواجهة الأمامية (). فكل عنوان، وقائمة تنقل، وزر تفاعلي، وصورة متناسقة، وبطاقة منتج تراها في أي موقع أو تطبيق ويب هي ثمرة عمل تطوير الواجهة الأمامية.
قبل الغوص في تفاصيل هذا الدرس، استعرض جدول المصطلحات الأساسية التالية:
| المصطلح بالعربية | المصطلح بالإنجليزية | النطق التقني | المعنى المبسط |
|---|---|---|---|
| تطوير الواجهة الأمامية | فرونت إند ديفيلوبمنت | بناء الجزء المرئي والتفاعلي من الموقع الذي يظهر للمستخدم مباشرة داخل شاشة المتصفح. | |
| جهة العميل | كلاينت سايد | البيئة التي يُنفَّذ فيها الكود على جهاز المستخدم نفسه (داخل متصفح الهاتف أو الحاسوب). | |
| واجهة المستخدم | يوزر إنترفيس | العناصر البصرية المعروضة على الشاشة مثل الأزرار، الألوان، القوائم، الخطوط، وحقول الإدخال. | |
| تطوير الواجهة الخلفية | باك إند ديفيلوبمنت | بناء الجزء الخفي الذي يعمل على الخادم البعيد لإدارة قواعد البيانات والحسابات والصلاحيات. | |
| جهة الخادم | سيرفر سايد | العمليات البرمجية التي تُنفَّذ داخل خادم الويب البعيد قبل إرسال النتيجة إلى متصفح المستخدم. | |
| التطوير الشامل للواجهتين | فول ستاك ديفيلوبمنت | الجمع بين مهارات بناء الواجهة الأمامية في المتصفح وبناء الواجهة الخلفية وقواعد البيانات على الخادم. |
عندما تفتح منصة تعليمية أو متجراً إلكترونياً أو موقعاً إخبارياً، فإن كل ما تتعامل معه مباشرةً على شاشتك يندرج تحت الواجهة الأمامية ():
- هيكل المحتوى المعروض: العناوين، الفقرات النصية، الصور، الجداول، الأيقونات، ومشغلات الفيديو المرتبة أمامك.
- المظهر البصري والهوية: الألوان، نوع الخط وحجمه، المسافات بين البطاقات، ودعم الوضع الليلي والنهاري ().
- عناصر التفاعل الحي: أزرار النقر، القوائم المنسدلة، مربعات البحث، نماذج تسجيل الدخول، والرسائل التنبيهية الفورية.