الدرس الرابع: التصميم المستجيب للمواقع الإلكترونية (١)
انظر إلى أساليب كتابة الأنماط في لغة التنسيق. الأنماط المضمنة تضع التنسيق مباشرة داخل السطر البرمجي للوسم باستخدام الخاصية style، مثل تلوين النص الأخضر في وسم الفقرة. أما الأنماط الداخلية فتُكتب داخل قسم الرأس باستخدام الوسم style، حيث تحدد اسم العنصر مثل الفقرة p وتغير لونه وسمكه ولون خلفيته عبر قيم ألوان نظام rgb. أما الأنماط الخارجية فتستدعي ملف تنسيق خارجي منفصل لاحقاً برابط عبر الوسم link داخل الرأس ليطبق التصميم على الموقع كله دون تكرار الأوامر.
يقوم التصميم المستجيب للمواقع الإلكترونية على جعل صفحة الويب تتكيف تلقائياً مع حجم الشاشة واتجاه الجهاز المستخدم، سواء كان حاسوباً أو هاتفا ذكيا أو جهازاً لوحيا. يعتمد ذلك على استخدام إطار العرض ووسم ميثا مع خاصية العرض لتحديد مقاسات الصفحة بدقة لتناسب شاشة الجهاز دون الحاجة لتكبيرها يدويا. من أهم مزاياه تحسين تجربة المستخدم وسهولة التحديث وتوفير المال عبر إدارة موقع واحد للجميع بدلاً من تصميم مواقع متعددة.
الفكرة الأساسية
التصميم المستجيب هو أسلوب في تصميم وتطوير المواقع بحيث يتفاعل الموقع مع سلوك المستخدم وخصائص جهازه مثل حجم الشاشة ونظام التشغيل واتجاه الجهاز باستخدام مخططات وصرة مرنة لتحسين تجربة المستخدم.
الشرح
عند تصميم الصفحات المستجيبة، تستخدم إحداثيات X و Y على شبكة تخطيطية، وتستعمل النسب المئوية للصور بدلا من متغيرات العرض الثابتة، مما يمنح الصفحة مرونة لتناسب حجم جهاز العرض. لإنشاء مخطط ديناميكي أو مستجيب، توضع خطوة إطار العرض مع استعلامات الوسائط داخل مقطع HTML. إن إطار العرض هو المنطقة المرئية للمستخدم من الصفحة الإلكترونية، ويتم التحكم فيه بواسطة الوسم <meta>. لتحقيق الاستجابة، يكون تنفيذ العرض في الصفحة الإلكترونية المعروضة يُضبط وفقا لعرض الجهاز، في حين أن مستوى التكبير للصفحة التي يتم تحميلها أولا بواسطة المتصفح هو مئة بالمئة. بدون هذا الوسم، تعرض متصفحات الهواتف الذكية الصفحات بعرض قياسي لشاشة الحاسوب المكتبي ثم تصغرها لتلائم شاشة الهاتف الذكي، مما يتطلب من المستخدم تكبير الصفحة ليتمكن من تصفحها.
مثال محلول خطوة بخطوة
لضبط صفحة الويب لتكون مستجيبة، أضف السطر البرمجي التالي داخل قسم الرأس في صفحة HTML:
هذا السطر يضبط عرض الصفحة ليطابق مع عرض جهاز المستخدم أيا كان حجم الشاشة، ويضبط مستوى التكبير الأولي عند تحميل الصفحة لأول مرة.أخطاء شائعة
نسيان إضافة وسْم إطار العرض في قسم الرأس، مما يؤدي إلى ظهور صفحة الحاسوب مصغرة على شاشة الهاتف الذكي بدلا من أن تتكيف تلقائيا.
سؤالان للتدريب مع الإجابة
السؤال الأول: ما الوظيفة الأساسية لإطار العرض في التصميم المستجيب؟ الإجابة: تحديد المنطقة المرئية للمستخدم وضبط عرض الصفحة ومستوى التكبير الأولي ليتطابق مع حجم شاشة الجهاز المستخدم. السؤال الثاني: ما فائدة استخدام النسب المئوية للصور بدلا من العرض الثابت؟ الإجابة: تمنح الصفحة مرونة لتغيير حجمها بما يناسب جهاز العرض.