1. ما هي البوابة الإلكترونية
يمكن تعريف البوابات الإلكترونية بأنها مدخل موحد لعدد من الخدمات والوظائف و هي بهذه الصيغة تتيح للمستخدم الوصول إلى هذه الخدمات من مدخل واحد.
عادة ما يصاحب البوابات الالكترونية تسجيل للمستخدمين حتى يتم تقديم الخدمات لهم بحسب طبيعة تسجيلهم.
تصميم البوابات الإلكترونية

2. تصميم البوابات الإلكترونية
عناصر المتصفح
يتكون المتصفح (Browser) عادة من شريط أدوات في الأعلى و يقوم بعدد من الوظائف توفر الوصول لوظائف المتصفح عن طريق القوائم المنسدلة.
يوجد في المتصفحات صف أو أكثر من الأزرار التي توفر الوصول السريع للخدمات والوظائف.
توفر بعض المواقع المعروفة مثل قوقل (Google) وياهو (Yahoo) مجموعة من الخدمات تضاف إلى المتصفح وتظهر على شكل أزرار في المتصفح.
تصميم البوابات الإلكترونية

3. تصميم البوابات الإلكترونية
عناصر المتصفح
يوجد عنوان الصفحة في الإطار العلوي للمتصفح.
كما يوجد في أسفل المتصفح سطر عرض الحالة:
السرية.
ما يتم تحميله.
مستوى التقدم.
منطقة التصفح (Zone).
تصميم البوابات الإلكترونية

4. عناصر المتصفح يظهر عنوان الموقع في الإطار العلوي للمتصفح
صف الأزرار التي توفر الوصول السريع للخدمات
تصميم البوابات الإلكترونية

5. عناصر البوابات الإلكترونية
الأخبار
وهي تعرض أخبار الجهة أو المنشأة وكذلك الأخبار ذات العلاقة بموضوع البوابة.
يجب العناية بتحديث هذه الأخبار دوريا.
يمكن الاشتراك في بعض الخدمات التي تقدم هذه الأخبار بشكل دوري.
تصميم البوابات الإلكترونية

6. عناصر البوابات الإلكترونية
المؤشرات
وهي مجموعة من العلامات التي ترشد مستخدم البوابة إلى خدمات مخصوصة بحسب وظيفته.
على سبيل المثال يمكن أن تظهر للمعلم مؤشرات عن عدد الطلاب الذين انهوا الاختبار وكذلك مؤشرات تظهر للمتعلمين تظهر تقدمهم في المادة التعليمية.
أو أخرى للجميع توضح بعض الإحصاءات عن الأوقات المفضلة للدخول وهكذا.
تختلف عن الأخبار بارتباطها بالوظيفة والخدمات التي تقدمها البوابة.
تصميم البوابات الإلكترونية

7. عناصر البوابات الإلكترونية
التنظيم
نظرا لاحتواء البوابة على عدد من الخدمات والمعلومات التي تخص المستخدم (المتعلم) فيجب أن تنظم بطريقة يسهل استخدام البوابة.
قد تتوفر خاصية التنظيم الشخصية لهذه المعلومات و الخدمات بحسب المستخدم حتى يمكن أن يصل إليها بسهولة.
تصميم البوابات الإلكترونية

8. عناصر البوابات الإلكترونية
العمليات
وتتركز العمليات والمهام في البوابة التعليمية في العمليات التعليمية وما يرتبط بها.
المهام المتعلقة بالمتعلم تنحصر في تصفح المادة و أداء الاختبارات و النقاش مع المعلم والمتعلمين الآخرين وهكذا.
أما المعلمين فيمكن أن يقوموا بنوع آخر من المهام مثل تحميل المواد التعليمية ومتابعة أداء المتعلمين و المشاركة في النقاش.
كذلك انجاز المعاملات مثل التقديم للقبول، طلب تصريح بناء، طلب تأشيرة إلخ.
تصميم البوابات الإلكترونية

9. عناصر البوابات الإلكترونية
المعلومات
وهي المعلومات الأساسية التي استخدمت البوابة من أجلها.
فالبوابة التعليمية ستحوى المعلومات على شكل مواد تعليمية و كذلك عدد ونوع المواد والزمن اللازم لإنهائها بالإضافة إلى المكتبة الرقمية.
أما المعلم فيجد أسماء الطلاب ودرجاتهم وسجلات أدائهم وغيرها.
وأما المعلومات العامة فتكون مفتوحة للجميع مثل بداية ونهاية الفصل الدراسي إن وجد و كذلك الرسوم و غيرها.
تصميم البوابات الإلكترونية

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

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

12. تصميم البوابات الإلكترونية
توجيعات بناء البوابات
وضعت هذه التوجيهات من واقع الدراسات العالمية المبنية على تجارب صممت خصيصا لقياس سبل تسهيل مهمة المستخدم ووصوله إلى بغيته بأقصر طريق مما يزيد من إنتاجية المستخدم سواء كان متعلما أم موظفا أو حتى زائرا عابرا.
تصميم البوابات الإلكترونية

13. توجيهات لبناء البوابات
نوع المتصفح (Browser Type)
يجب أن يكون التصميم عاما و غير مرتبط بنوع محدد من برامج التصفح بحيث يستخدم خصائص لا توجد إلا في نوع معين من البرامج.
تأكد من ظهور المحتوى لجميع المتصفحين بأسلوب واحد بغض النظر عن نوع المتصفح الذي يستخدمونه.
تجنب المزايا الخاصة بمتصفحات محددة قدر الإمكان و التي لا توجد في المتصفحات الأخرى.
تصميم البوابات الإلكترونية

14. توجيهات لبناء البوابات
دقة وضوح الشاشة (Screen Resolution)
يجب مراعاة أن المستخدمين لديهم أنواع مختلفة من الشاشات و تختلف دقة وضوح الشاشة من جهاز إلى آخر.
دقة وضوح الشاشة المستخدمة غير معلوم لدينا وقت التصميم.
حجم الشاشة المستخدمة غير معلوم أيضا.
ما هو تأثير اختلاف دقة الوضوح وحجم الشاشة على الصور و الرسومات؟
من الأفضل أن يكون تصميم الصور بافتراض دقة وضوح 72 –80 نقطة للبوصة(72-80 PPI ) وبالتالي عند وضع صورة مربعة بحجم 72 × 72 فستظهر على الشاشة بحجم بوصة مربعة إذا كان المتصفح لديه نفس دقة الوضوح.
تصميم البوابات الإلكترونية

15. توجيهات لبناء البوابات
المساحة الحية من الشاشة (Live Space)
يقصد بالمساحة الحية هي المساحة التي يسمح فيها بوضع المحتويات الخاصة بالصفحة.
المساحة التي تتغير فيها المعلومات و المحتويات بناء على الصفحة المعروضة حاليا.
يجب مراعاة هذه المساحة وعدم الخروج عنها حتى لا يضطر المستخدم إلى استعمال الأسهم للانتقال بين أجزاء الصفحة.
يتأكد هذا الأمر في عرض الصفحة حيث يجب أن يكون جميع المحتوى أمام المستخدم.
يمكن في حالة الضرورة استخدام الأسهم للتنقل للأعلى والأسفل فقط.
تصميم البوابات الإلكترونية

16. توجيهات لبناء البوابات
المساحة الحية من المستعرض
تصميم البوابات الإلكترونية

17. توجيهات لبناء البوابات
الأزرار والأيقونات (Icons & Buttons)
عند استخدام الأزرار يجب مراعاة أن تكون جميع الأزرار و الأيقونات واضحة المعنى والدلالة بحيث يسهل ربط كل أيقونة بمعنى محدد.
مع المحافظة على أن تكون جميع الأيقونات والأزرار ذات حجم واحد إلا أنه يجب تجنب تشابه الأيقونات في الشكل حتى لا يخلط المستخدم بينها.
تصميم البوابات الإلكترونية

18. توجيهات لبناء البوابات
نصوص الدلالة (roll-over text)
تستخدم نصوص الدلالة لمساعدة المستخدم لمعرفة وصف العنصر أو وظيفته عندما يمرر المؤشر فوقه.
تساعد المستخدم عند عدم ظهور الصور.
يجب التأكد من أن نصوص الدلالة صحيحة و متوافقة مع العنصر وذات معنى واضح.
تصميم البوابات الإلكترونية

19. توجيهات لبناء البوابات
إخفاء العناصر غير الفاعلة (Hide inactive objects)
يجب أن تظهر فقط العناصر والأزرار التي أعطي المستخدم صلاحية لها.
يتم إخفاء باقي العناصر غير الفعالة.
يمكن استخدام لون رمادي للدلالة على عدم فاعليتها.
تصميم البوابات الإلكترونية