تقتصر الأداة على قراءة الصفحات المنشورة للعموم، ولا تطلب صلاحيات، ولا تحتفظ ببيانات الجهة. والاتصال مشفّر عبر HTTPS.
كود المنصاتقراءة ٤ دقائق

خطوات تطبيق كود المنصات

خطة تطبيق كود المنصات مرتبة بالأثر لا بالرقم: المكتبة أولًا، ثم الأساسات، ثم المكوّنات، ثم القوالب، مسنودة بقياس 29 منصة حكومية.

وهذه المقالة جزء من دليل كود المنصات، نظام التصميم الموحد للمملكة.

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

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

الترتيب الصحيح مرتب بالأثر، والقياس يدعمه مباشرةً.

الخطوة الأولى · اعتماد المكتبة

معيار ١ هو الجذر. وقد بلغ التطبيق الكلي فيه ٣٪ في عيّنة من المنصات الحكومية بلغت ٢٩ منصة، أي أن جهة واحدة فقط من تسع وعشرين تبني على المكتبة، وما عداها يبني عناصره يدويًا.

وهذا هو السبب الجذري لكل رقم آخر: العنصر المبني يدويًا يأتي قريبًا من المواصفة لا مطابقًا لها، فيسجَّل تطبيقًا جزئيًا. ولذلك تجدون في القياس تطبيقًا جزئيًا بين ٩٠٪ و١٠٠٪ في أغلب المكوّنات، وتطبيقًا كليًا عند ٠٪.

لماذا هذه أولًا: اعتماد المكتبة يجلب المكوّنات بقيمها وحالاتها المطابقة دفعة واحدة. فترتفع عشرات المعايير معًا بعمل واحد، بدل تصحيحها معيارًا معيارًا.

ما يجب تجنّبه: فصل المكوّن عن المكتبة (Detach) ثم تعديله. والمكوّن المفصول يبدو صحيحًا ولا تصله تحديثات النظام أبدًا. وتشبيه الهيئة دقيق: المكوّنات قطع ليغو، ابنوا بها ما شئتم ولا تعدّلوا القطعة.

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

الخطوة الثانية · الأساسات

بعد المكتبة، عالجوا القيم. وترتيبها بحسب ما يظهر في القياس:

الألوان · ٠٪ تطبيق كلي و٥٥٪ جزئي. وهي أدنى الأساسات، ومعالجتها استبدال القيم المكتوبة يدويًا بقيم اللوحة المعتمدة. وانتبهوا إلى نسبة التباين 4.5:1 وإلى قيم On-Color للنص على خلفية ملونة.

الخطوط · ٥٪ كلي و٥٨٪ جزئي. عالجوا الخط نفسه أولًا، ثم الأوزان الأربعة، ثم ارتفاع السطر.

المسافات · ٠٪ كلي و٦٣٪ جزئي. وابدأوا بـ padding الأزرار، إذ إن معالجته ترفع مساحة اللمس 44px معها.

الاستجابة · ٠٪ كلي و١٠٠٪ جزئي. أي أن كل منصة في العيّنة تستجيب جزئيًا ولا واحدة تطابق. عالجوا التجاوز الأفقي على الجوال ومنع التكبير أولًا.

الأيقونات · احذفوا المكتبات الخارجية، ولا تعدّلوا الحجم أو اللون بعد الاستدعاء، وتحققوا من أن الأيقونة تطابق معناها.

الخطوة الثالثة · المكوّنات

الآن، وقد صارت المكتبة والقيم في محلها، تصبح معالجة المكوّنات استبدالًا لا إعادة بناء.

ابدأوا بالأكثر ظهورًا في الصفحات: الأزرار والروابط وشريط التنقل العلوي والمدخلات، ثم البطاقة ومسار التصفح والقائمة المنسدلة.

وفي كل مكوّن، لا تكتفوا بالتصميم الأساسي. عالجوا الحالات التفاعلية من تمرير وضغط وتركيز وتعطيل، والحالات السياقية من اختيار وتحديد وتوسيع. وهي التي تسقط عادةً لأنها لا تظهر في لقطة شاشة.

الختم الرقمي معالجته أرخص ما في القائمة: عنصر واحد، موضعه أعلى الصفحة فوق شريط التنقل العلوي لا في التذييل. وقد بلغ التطبيق الكلي فيه ٤٢٪، وهو أعلى معيار في العيّنة كلها.

الخطوة الرابعة · القوالب

القوالب أخيرًا، لأن تصحيح بنية الصفحة على مكوّنات غير مطابقة يعيد العمل مرتين.

عالجوا الرئيسية ثم الخدمة ثم المشاركة الإلكترونية، وهي الثلاثة المؤكدة في ورش الهيئة، ثم البحث إن وُجد في المنصة. وتفصيلها في ما القوالب الإلزامية في كود المنصات.

الخطوة الخامسة · التجربة وما يحتاج بشرًا

يبقى بعد ذلك ما لا يعالجه استبدال مكوّن: خريطة الموقع، ثم المعايير الثمانية التي يحكمها بشر، من اتساق المصطلحات ووضوح اللغة وبديهية التنقل ونبرة المحتوى.

وهذه لا تُقاس آليًا، وسبيلها مراجعة المختص.

قياس الأثر بين خطوة وأخرى

بعد كل خطوة، أعيدوا القياس. فلكل فحص معرّف وتاريخ، وتتيح المقارنة بين فحصين رؤية ما تحرّك فعلًا بدل الاعتماد على الانطباع.

وتوقعوا أن يقفز الرقم قفزة كبيرة بعد الخطوة الأولى وحدها، إذ إن اعتماد المكتبة يحرّك المكوّنات كلها معًا.

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

المعايير التي تتناولها هذه المقالة

أين تقف منصتكم من كود المنصات؟

يقيس الفحص الآلي منصتكم خلال دقائق، ويعرض لكل ملاحظة قيمتها المرصودة والمتوقعة وموضعها في الصفحة.

افحصوا منصتكم

تقدير استرشادي · أداة مستقلة غير تابعة لهيئة الحكومة الرقمية

خطوات تطبيق كود المنصات: الترتيب الذي يوفر أكبر جهد | XFix