يُعد إنشاء علامة تجارية مخصصة لمؤسستك طريقة مباشرة لك لتوسيع نطاق شعارك وألوانك ومعلوماتك المهمة لمستخدميك. تنقل العلامة التجارية المخصصة هوية مؤسستك وصوتها وتعهداتها وخدماتها. توجد مجموعة كاملة من الوسائل، تتراوح من السهل إلى المعقد، يمكنك من خلالها تخصيص علامتك التجارية.

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

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

صفحة "تسجيل الدخول المخصصة" وصفحة "المدخل"

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

صفحة المدخل - صفحة المدخل هي أول صفحة ويب يراها المستخدمون عند وصولهم إلى Blackboard (ما لم يتم تجاوز هذا الإعداد). يمكنك إضافة رسالة ترحيب مخصصة وصورة بالإضافة إلى إضافة وحدات نمطية تحتوي على معلومات مهمة وفي حينها. ويتطلب إنشاء وحدات نمطية مخصصة وجود خبرة في HTML و CSS. لمعرفة المزيد، راجع الوحدات النمطية وتخصيص صفحة المدخل.

أفضل الممارسات في تصميم صفحة المدخل

عادة ما تكون صفحة المدخل كصفحة "المؤسسة الخاصة بي"، هي أول صفحة سيراها المستخدم عند دخوله Blackboard Learn. وقد يؤدي الاهتمام بتصميم وترتيب محتوى الوحدة النمطية على هذه الصفحة إلى تعزيز علامتك التجارية وتحسين تجربة المستخدم. ويمكنك تحقيق ذلك في خطوتين من الخطوات العامة:

  1. راجع جميع محتويات الوحدة النمطية للتأكد من عدم تعارضها مع العلامة التجارية المطبقة حديثًا. عند تصميم محتوى الوحدة النمطية، حاول تتبع الاصطلاحات التي أنشأتها بواسطة الشكل ولوح الألوان. حاول تشفير الوحدة النمطية كتنسيق HTML حتى يستجيب نص الوحدة النمطية للون وأنماط الخط الذين تم تحديدهما بواسطة الشكل ولوح الألوان. تستخدم الوحدات النمطية في بعض الأحيان صورة كبيرة واحدة (تشبه إعلان الشعار الموجود على موقع الويب) لتوصيل رسالة. تعتبر الصور ضرورية لإضفاء الحياة على الصفحة، ولكن في بعض الأحيان يمتلئ شكل "إعلان الشعار" ومضمونه، بنص الرأس وفقرة النص والرسومات، قد يكون غير متزامن مع الشكل ولوح الألوان المستخدمين من قبل علامتك التجارية. وسيضمن لك استخدام HTML مرونة الوحدة النمطية، وسيتم تغيير حجم محتواها كلما تم تغيير حجم إطار المستعرض.
  2. حاول تحديد تدرج هرمي مرئي، لكي يتمكن المستخدم بسهولة من مسح الصفحة والعثور على محتوى قابل للتنفيذ. وعادة ما يكون القول في هذا الأمر أسهل من الفعل. نظرًا لاحتواء المدخل على عدة وحدات نمطية بمحتويات مختلفة، يجب أن تلبي دومًا احتياجات العديد من الأشخاص المعنيين الداخليين. وفي بعض الأحيان يريد كل شخص معني التأكيد على مادته أو مادتها. وبصفة عامة، إذا تم منح كل الوحدات النمطية نفس الأهمية، بدون وجود شيء مميز، فيمكن أن يؤدي هذا إلي التباس الأمر على المستخدم. حاول عرض الصفحة بشكل كلي، ورتب الوحدات النمطية بحيث يمكن للمستخدم العثور بسهولة على المحتوى الرئيسي

لا تختص أفضل الممارسات الأخرى التي تُستخدم في تصميم صفحة المدخل بنوع هذه الصفحة، لكن تتضمن تلك النوعيات التي أخذتها في الاعتبار بالفعل عند تحديد شكل "العلامة التجارية" ومضمونها.

إمكانية الوصول

علم الجمال

  • استخدم الألوان التي تتطابق مع "العلامة التجارية" والشكل
  • اجعل شكل الخط قابلاً للقراءة
  • استخدام الرسومات البسيطة
  • رتب الوحدات النمطية بحيث تملأ الصفحة
  • أنشئ تدرج هرمي مرئي بحيث يسهل الاطلاع على المحتوى
  • تجنب التخطيط/المحتوى المزدحم، الضوضائي المكتظ للصفحة
  • حدث محتوى الصفحة بشكل دوري
  • وإذا أمكن، قم بتطبيق Responsive Design techniques (تقنيات التصميم التفاعلي) بحيث يتم تحجيم المحتوى بشكل مباشر في الشاشات المختلفة

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

عناصر تحكم واجهة المستخدم الرسومية (GUI)

عناصر التحكم بـ GUI - يمكنك التحكم بسهولة في تغيير شكل العلامة التجارية من خلال تحديد مجموعة من الألوان وخيارات التخطيط الخاصة بتثبيت Learn لديك. يمكنك:

  • تغيير لون مجموعة محددة من عناصر واجهة المستخدم
  • تحديد صورة شعار ورابط لعنوان URL محدد
  • تحديد خيارات التخطيط وألوان علامة تبويب النظام.

أنت لست بحاجة إلى وجود أية معلومات لـ HTML أو CSS لإجراء هذه التغييرات. ويمكنك رؤية تحديداتك من خلال جزء المعاينة قبل إجراء تغيير واسع على مستوى النظام. ويمكن حفظ كل تحديدات ألوانك كـ"لوح الألوان".

لوح الألوان وسمة النظام

لوح الألوان - يأتي Blackboard Learn مع أكثر من اثني عشر لوح ألوان. ويمكنك تحديد لوح من ألواح الألوان هذه لعلامتك التجارية الافتراضية. ويمكنك تغيير الألوان في اللوح باستخدام واجهة المستخدم أو يمكنك تنزيل اللوح وإجراء التغييرات باستخدام أداة تحرير CSS أو تحرير النص.

شكل النظام - يُعد شكل النظام هو طبقة CSS التي تحدد شكل مؤسستك ومضمونها. ويمكنك تحديد الشكل الذي تم تزويده من قبل Blackboard Learn أو تصميمه بنفسك. ويُعد تنزيل شكل موجود لاستخدامه كقالب أسهل الطرق لإنشاء الشكل الخاصة بك. قم بإجراء تغييراتك باستخدام أداة تحرير CSS أو تحرير النص.

لوح ألوان مخصص

لوح الألوان المخصص - وسّع نطاق تخصيص واجهة المستخدم بإنشاء لوح الألوان الخاص بك ليتطابق مخطط ألوان والشعار والعلامة التجارية لمؤسستك. يشتمل Blackboard Learn على ألواح ألوان متعددة تطبق ألوان مختلفة على النظام. ويمكنك تحرير لوح ألوان موجود ليطابق متطلباتك الخاصة.

أفضل الممارسات في تصميم لوح ألوان مخصص

عند تحديد الألوان للوحك المخصص تذكر بضعة عناصر من أفضل الممارسات هذه.

  • لإمكانية الوصول، استخدم دومًا Accessible Contrast Ratios (نسب تباين إمكانية الوصول) عند وضع النص في مقابل الخلفية.
  • استخدم الألوان التي تتطابق مع الهوية المرئية لمؤسستك. راجع دليل الأنماط الخاص بالمؤسسة للحصول على الألوان المعتمدة. وتأكد من ترجمة اختيارات تركيبة الألوان إلى مخطط ألوان مناسب للاستخدام في واجهة المستخدم.
  • تأكد من أن تحديدات الألوان تعمل جيدًا معًا، مما يوفر تجربة مرئية متناغمة. Color Matters هو موقع ويب جيد للتعرف على مخططات الألوان أحادية اللون والمتجانسة والتكميلية. إن معرفة نظرية الألوان تجعل تحديد الألوان التي تنسجم سويًا مع مؤسستك أسهل.

سمة النظام المخصصة

شكل النظام المخصص - يمكنك تحويل واجهة المستخدم الخاصة بتثبيت Learn لمؤسستك بالكامل من خلال إنشاء شكل نظام مخصص. وتُعد هذه الطريقة هي أكثر الطرق من حيث التكلفة والتعقيد، مما يتطلب مراجعة وتحرير أكثر من 12000 سطر من التعليمات البرمجية. فهو يُعد أفضل خيار لمطابقة واجهة مستخدم Blackboard Learn بالهوية المرئية لمؤسستك، لكنه يتطلب اختبارًا مستمرًا لكل إصدار جديد لـ Learn.

أفضل الممارسات في تصميم شكل نظام مخصص

"تصميم شكل النظام المخصص" هو عبارة عن مشروع كبير ولا يمكن اعتباره مشروع جانبي. وستحتاج إلى وجود خبرة معينة في CSS و DOM. بالإضافة إلى ذلك، ستحتاج إلى وجود بيئة متطورة لتطوير الشكل واختباره وصيانته.

  • الألوان - ابحث عن الهوية البصرية لمؤسستك. والفرص تتمثل في وجود دليل أنماط لمؤسستك يتضمن قسمًا من ألوان العلامة التجارية للمؤسسة. وتأكد من ترجمة اختيارات تركيبة الألوان لمخطط ألوان مناسب للاستخدام في واجهة المستخدم.
  • تناغم الألوان - إن الفهم العام لمخططات الألوان الأحادية والمماثلة والمتممة يؤدي إلى تحديد الألوان التي تنسجم معًا مع ألوان العلامة التجارية لمؤسستك.
  • متطلبات إمكانية الوصول - يُعد الاطلاع أمر هام جدًا لضمان وجود التباين بشكل كافٍ في شكل النظام الناتج ويمكن الوصول إليه.
  • الخطوط - يمكنك تحديد خطوط مختلفة لعلامتك التجارية. اختبر الخطوط للتأكد من أنه يمكن عرضها في أنظمة تشغيل مختلفة. ويمكنك أيضًا تقديم خطوط مخصصة بتضمينها مع الشكل الخاص بك والرجوع إلى هذه الخطوط باستخدام قاعدة @font-face. وتأكد من إمكانية دعم الخطوط المخصصة للغات التي تقوم بتدريسها.
  • الرموز - يمكنك إعادة تصميم رموز معينة واستخدامها في التطبيق كصور للخلفية.

تغيير الإدارة للعلامة التجارية المخصصة

عند تقييمك لترقية ما واختبارها من المهم جدًا تنزيل أية تخصيصات في حال احتياجها إلى استعادة. استخدم الأداة Theme DIFF لمقارنة تغييرات CSS من إصدار واحد من Learn إلى الآخر. ستسهل هذه الأداة من اكتشاف المكان الذي أجريت فيه التغييرات في CSS بحيث يمكنك تقييم مدى تأثير هذا على عمليات التخصيص التي تقوم بها.

العناصر التي تحدد "علامة تجارية" (عادة ما تكون الشكل و/أو لوح الألوان و/أو شعار) تختلف عن محتوى الصفحة. تذكر مراجعة محتوى الصفحات "العامة"، مثل صفحات "المدخل"، لضمان اتباعه للإرشادات البصرية التي تم إنشاؤها بواسطة "العلامة التجارية".

أشكال نظام مخصصة وتثبيت Building Blocks الجديدة

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

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

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

إذا كنت تقوم بإدارة الأشكال المخصصة عن طريق تخزين نسخ من الحزم دون اتصال، فقم بتحديث حزمة الأشكال المخصصة دون اتصال عن طريق تنزيلها من "واجهة مستخدم لوحة المسؤول" بعد الترقية إلى SP14 حتى تحصل على نسخة ببنية الحزمة الجديدة المُقدمة في حزمة الخدمة هذه. لن تحدث تغييرات على صحائف الأنماط نفسها، وكذلك لن تحدث تغييرات أخرى على تخصيص سير العمل. ولكن بعد الترقية إلى SP 14، لن تتمكن بنية الحزمة السابقة من التحميل – ويتم عرض رسالة خطأ في هذه الحالة.

علامات تجارية مختلفة لتثبيت Learn ذاته

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