Sandoz Omnitrope: صفحة للمرضى في الإمارات بالعربية والإنجليزية

التحدي

أرادت Sandoz الإمارات صفحة واحدة للمرضى الذين يستخدمون Omnitrope® مع قلم SurePal™. تسعة فيديوهات قصيرة عن القلم، وأسئلة شائعة مع ملف PDF للتحميل، بالعربية والإنجليزية. المرجع كان صفحة Sandoz للمرضى في بريطانيا، مع تعليق صوتي عربي ونصوص عربية على الفيديوهات.

وصل التصميم النهائي للديسكتوب والموبايل يوم 4 أكتوبر 2026، وكان التسليم يوم 7 أكتوبر.

ما بنيناه

صفحة ثابتة لكل لغة. الإنجليزية على الرابط الرئيسي والعربية تحت /ar/، وزر تغيير اللغة رابط عادي بينهما. النسختان تُبنيان من قالب واحد وملف محتوى واحد، فيبقى هيكلهما واحداً.

الواجهة

نسخة الديسكتوب تتبع تصميم 1280 بكسل. كل مقاس في CSS مكتوب بوحدة "بكسل التصميم"، فتصغر الصفحة بنفس النسب حتى 768 بكسل وتحتفظ بالأعمدة الثلاثة. شعارا Omnitrope® و SurePal™ يجلسان داخل العنوان كأنهما كلمتان.

تسعة فيديوهات

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

لكل لغة تسعة ملفات خاصة بها، وملف JSON يربط كل بطاقة بفيديو. استبدال الفيديوهات النهائية عالية الدقة إذن تعديل في ملف وليس في الكود، والبطاقة التي لم يصل فيديوها تعرض "متوفر قريباً" بدل مشغّل معطّل.

على الموبايل

تحت 768 بكسل يبدأ تصميم الموبايل. كل صف من ثلاثة فيديوهات يصبح شريطاً يُسحب بالإصبع، بطاقة واحدة في كل مرة، وتحته نقاط. النقاط تتبع السحب، ولمس أي نقطة ينقل إلى بطاقتها.

الأسئلة الشائعة وملف PDF

اثنا عشر سؤالاً في ثلاث مجموعات، مغلقة في البداية كما في التصميم. كل سؤال عنصر <details> أصلي في المتصفح، فيُفتح من لوحة المفاتيح وتعلن قارئات الشاشة حالته بدون أي سكربت إضافي.

زر "تحميل الأسئلة الشائعة" يعطي ملف PDF بنفس لغة الصفحة. نطبع هذا الملف من الصفحة نفسها عبر Chrome بدون واجهة، مع ملف أنماط للطباعة يفتح كل الإجابات، فلا يمكن أن يختلف الملف عن الصفحة.

التفاصيل التي تفرق

الصفحة العربية مبنية من اليمين لليسار فعلاً، وليست صورة معكوسة من الإنجليزية. الـ CSS يستخدم الخصائص المنطقية مثل inline-start و inline-end، فتنقلب المسافات وحدها. صور الواجهة تبقى بالترتيب الذي وضعه التصميم في اللغتين، وأسهم الأسئلة تدور في الاتجاه المعاكس. نقاط الشريط تسير من اليمين لليسار لتطابق اتجاه السحب. والكود يعرف البطاقة الظاهرة بقياس مواقع البطاقات، فنفس الأسطر تعمل في الاتجاهين.

أسماء العلامات اللاتينية داخل النص العربي تبقى مع علامتي ® و ™ في جزء مستقل من اليسار لليمين، فتظل العلامة بعد الاسم ولا تقفز إلى الجهة الأخرى. الخطوط Jost و Noto Sans Arabic. الطبقات العربية في ملف Figma كانت مضبوطة على Jost، وهو خط بلا حروف عربية، فكان Figma يرسمها بخط Noto Sans Arabic بدون أن يظهر ذلك. قارنّا أشكال الحروف بملف PDF العربي قبل أن نعتمده.

راجعنا النصوص سطراً بسطر مقابل طبقات النص في ملف Figma النهائي. النص التنظيمي في أسفل الصفحة يبقى بالإنجليزية في النسختين، كما في التصميم.

الصفحة تُسلَّم HTML و CSS وسكربت صغير، بدون أي إطار عمل، والعميل يستضيفها على سيرفره ونطاقه. التركيز من لوحة المفاتيح ظاهر، ولكل زر تشغيل ولكل نقطة وصف بلغة الصفحة، والحركة تتوقف لمن طلب تقليلها من إعدادات جهازه.