السلام عليكم، سنرى في هذا الدرس Responsive Web Design.
منذ بداية العقد الماضي، أصبحت طلبات البحت في الإنترنت بالأجهزة غير الحاسوب تضاهي شأنها في الحاسوب، مما جعل محركات البحث و على رأسها جوجل Google تحت بضرورة تواجد نسخات من صفحات الويب متجاوبة مع الأجهزة الأخرى غير الحاسوب، حيث أضحى هذا الأمر ضروريا لـ SEO، و هذا ما يعرف بـ Responsive Web Design، أي أنها تقنية تُستعمل لجعل صفحات الويب متجاوبة مع جميع أحجام الشاشات سواء كانت شاشات حواسيب مكتبية أو شاشات حواسيب نقالة أو شاشات هواتف ذكية أو شاشات أجهزة الطابليط أو غيرها.. لذا لجأ المطورون إلى إنشاء إما تطبيقات لمواقعهم الإلكترونية، أو نسخ الهواتف و الطابليط لمواقعهم بشتى طرق كاستخدام Meta Viewport و Media Query استناداً بـ Grid System و Frameworks.
Meta Viewport
ما هو Meta Viewport ؟
Meta Viewport هو عبارة عن نوع من عنصر 'META'، و عناصر الميتا كما درسنا في الدروس السابقة هي عناصر تُستعمل لتحديد البيانات الوصفية لمستند HTML، و البيانات الوصفية هي معلومات لا تظهر في متصفحات الانترنت، لكن تساعدها في إظهار الصفحة، و تساعد الروبوتات أيضاً في فهم الصفحة، أذكر من بين أكثر السمات استعمالاً في عنصر الميتا :
* السمة 'CHARSET' : تساعد متصفحات الإنترنت في إظهار الصفحة بالترميز المناسب.
* السمة 'HTTP-EQUIV' : تعدل على سلوكيات متصفحات الإنترنت.
* السمة 'NAME' : تدلي بنوع البيانات الوصفية، و من بين قيمها هناك القيمة 'VIEWPORT' التي تهمنا في هذا الدرس.
* السمة 'CONTENT' : تدلي بمحتوى البيانات الوصفية، و تكون مرافقة للسمة 'NAME' عموماً، و و خصوصاً في Meta Viewport تعطي لمتصفحات الإنترنت الإرشادات اللازمة لظهور صفحات الويب.
قبل الشروع في فهم ما تفعله Meta Viewport، يجب معرفة أن Viewport هي مساحة صفحة الويب الظاهرة في شاشة المستخدم، و بما أن عرض صفحات الويب يختلف عن عرض شاشات الحواسيب و الهواتف و الطابليط.. فهذا يعتبر مشكل، و بالتالي فأغلب الأجهزة تستعمل Viewport أكبر من حجم شاشاتها بسلم معين من أجل عدم جعل المستخدم يعمل Zooming لصفحات الويب أثناء تصفحها، بمعنى تحسين ما يعرف في SEO بـ User Experience، و المشكل الأكبر هو أن ليس كل الأجهزة تستعمل نفس Viewport، و لهذا السبب تتواجد Meta Viewport حيث تمكّن من التعديل على Viewport بهدف جعل صفحة الويب تظهر بأبعاد مطابقة للشاشات.
كيفية إقحام Meta Viewport
تقحم جميع أكواد الميطا في عنصر 'HEAD' لملف HTML، و يستند Meta Viewport على قيمتين أساسيتين في السمة 'CONTENT' علماً أن قيم السمات تقحم في HTML مفروقة بعلامة Comma (,) و ما يفرّق القيم بـ Parameter لديها هي علامة التساوي (=) و هما :
• 'INITIAL-SCALE' : تمثل هذه القيمة التحجيم التلقائي الذي تظهر به صفحة الويب بعد إعادة تدوير المتصفح، و يقحم في Parameter لديها عدد من 0 إلى 10 علماً أن 1.0 يمثل الحجم التلقائي، 2.0 يمثل ضعف الحجم التلقائي، و هكذا...
• 'WIDTH' : تمثل هذه القيمة عرض Viewport، حيث يمكن إقحام في Parameter عدد يمثل العرض بالبكسل (px)، أو يمكن إقحام الكلمة المفتاحية 'DEVICE-WIDTH' حيث تعطي تطابق Viewport مح حجم الشاشة بـ Css Pixel في السلم 100%، و Css Pixel هو بكسل غير حقيقي يتوافق مع المساحة المستعملة للشاشة، و بالتالي فـ Css Pixel الواحد لا يساوي دائما البكسل العادي حيث هذا الأخير هو الذي يحدّد ما يعرف بدقة الشاشة (Resolution)، فمثلا في الشاشات العالية الجودة يكون البكسل الحقيقي أضعاف CSS Pixel بأربع أضعاف أو أكثر.
يمكن إقحام قيم ثانوية في السمة 'CONTENT' للـ Meta Viewport تحسّن من تجربة المستخدم أذكر منها :
• 'USER-SCALABLE' : تخوّل هذه السمة للمستخدم عمل Zooming، و هذا في حال تواجد 'YES' في Parameter لديها، أما 'NO' فتعطّل الميزة.
• 'MINIMUM-SCALE' و 'MAXIMUM-SCALE' : قيمتين تكونتا مرفوقتين بالقيمة 'USER-SCALABLE'، و تحدّدتا مستوى ZOOM-IN و ZOOM-OUT حيث يقحم في Parameter لديهما عدد من 0 إلى 10، 'MINIMUM-SCALE' مخصصة لـ ZOOM-OUT، و 'MAXIMUM-SCALE' لـ ZOOM-IN.
من بين أساسيات Responsive Web Design هو إقحام القيم النسبية عوض القيم المطلقة، لأن الأطوال النسبية تتغير بتغير الأطوال المحتوية، على عكس الأطوال المطلقة تبقى ثابتة، و توجد بين الوحدات النسبية وحدتين لهما علاقة بـ Viewport و هما :
- 'VW' : نسبة إلى Viewport Width أي عرض Viewport، حيث أن 1vw يساوي 1% من عرض Viewport.
- 'VH' : نسبة إلى Viewport Height أي ارتفاع Viewport، حيث أن 1vh يساوي 1% من ارتفاع Viewport.
Media Query
ما هي Media Query ؟
تعتبر Media Query أقوى قواعد Responsive Web Design، حيث تخول إنشاء مظهر لصفحة الويب حسب عرض الشاشة التي تظهر بها، و ذلك حسب اختيار المطور، فيمكن لهذا الأخير إما أن يختار عروض الشاشات بنفسه حسب ما يحتاجه موقعه، أو يختار العروض الموحّدة عالمياً و التي هي :
- يطلق على الشاشات الأصغر عرضاً من 576px إسم Extra Small، و هي مخصصة للوضع العمودي (Portrait) للهواتف الذكية.
- يطلق على الشاشات التي تحتوي على عرض من 576px إلى 768px إسم Small، و هي مخصصة للوضع الأفقي (Landscape) للهواتف الذكية و للوضع العمودي (Portrait) لأجهزة الطابليط.
- يطلق على الشاشات التي تحتوي على عرض من 768px إلى 992px إسم Medium، و هي مخصصة للوضع الأفقي (Landscape) لأجهزة الطابليط.
- يطلق على الشاشات التي تحتوي على عرض من 992px إلى 1200px إسم Large، و هي مخصصة للشاشات العادية للحواسيب المكتبية و النقالة (17inch مثلاً).
- يطلق على الشاشات الأكبر عرضاً من 1200px إسم Extra Large، و هي مخصصة للشاشات العريضة للحواسيب المكتبية و النقالة (19inch مثلاً).
طريقة إقحام Media Query
أولاً يجب التوفر على دقة الملاحظة في كشف مناطق التجربة السيئة للمستخدم في الموقع، و ذلك عبر النقر على أيقونة Toggle Device Toolbal المتواجدة بآداة Inspect Element، ثم معاينة الموقع في جميع العروض التي توفرها الآداة، و بالتالي اختيار الأمكنة المراد تغيير فيها المظهر عن طريق Media Query، و يطلق على هذه الأمكنة بـ Break-points، أي نقاط الكسر.
تقحم Media Query في CSS، و طريقة إقحامها شبيهة إلى حد كبير بـ Keyframes التي رأيناها في درس Animation، حيث تكتب بهذا التنسيق '{} () media screen and@' و من أجل دعم المتصفحات القديمة تكتب بهذا التنسيق '{} () media only screen and@'؛ و ما بين القوسين يحدد طبيعة المجال العرضي هل هو مجال مفتوح أو مغلق، فالمجال المفتوح يعتمد على نقطة كسر واحدة تحدد إما أدنى عرض و ما فوق حيث يقتصر على الخاصية 'MIN-WIDTH' و في قيمتها أدنى عرض بالبكسل، و إما يحدد أقصى عرض و ما تحت حيث يقتصر على الخاصية 'MAX-WIDTH' و في قيمتها أقصى عرض بالبكسل؛ أما المجال المغلق فيعتمد على نقطتي كسر حيث ينحصر المجال بين أدنى عرض و أقصى عرض، أي بين 'MIN-WIDTH' و 'MAX-WIDTH'، و ليس بضرورة أن تكونا الخاصيتين 'MIN-WIDTH' و 'MAX-WIDTH' هما المسؤولتين في تحديد نقاط الكسر، فيمكن أن تكون الخاصيتين 'MIN-DEVICE-WIDTH' و 'MAX-DEVICE-WIDTH' اللتين تحددا نقاط الكسر حسب عروض الأجهزة و ليس عروض المتصفحات، أو تكون الخاصية 'ORIENTATION' و في قيمتها إما 'PORTRAIT' أو 'LANDSCAPE' حيث تحدد نقاط الكسر حسب أوضاع الأجهزة و ما إلى ذلك، لكن الخاصيتين 'MIN-WIDTH' و 'MAX-WIDTH' هما الأكثر تداولاً و انسيابيتهما تجعل منهما ذوات فاعلية احترافية؛ ثم تقحم داخل المعقوفتين ({}) جميع أكواد العناصر المراد تغيير مظهرها في المجال حيث تقحم سوى خواص التغيير.
و يجب عدم تجاهل قاعدة أولوية تطبيق أكواد CSS بحيث أن :
+ عند إقحام Media Querries ذوات المجال المفتوح الذي يعتمد على نقطة كسر واحدة تحدّد أدنى عرض و ما فوق، يتوجب الإقحام من أصغر عرض إلى الأكبر، و العكس صحيح عند إقحام Media Querries ذوات المجال المغلق.
+ عند إقحام Media Querries ذوات المجال المفتوح الذي يعتمد على نقطة كسر واحدة تحدّد أقصى عرض و ما تحت، يتوجب الإقحام من أكبر عرض إلى الأصغر، و العكس صحيح عند إقحام Media Querries ذوات المجال المغلق.
الفيديو التوضيحي للدرس
Grid System
ما هو Grid System ؟
Grid System هو نظام يخلق أعمدة عمودية أو أفقية أو معاً وهمية تستند عليها عناصر صفحات الويب في التمركز، و يجب على هذه الأعمدة أن تكون متساوية و بعدد قابل للقسمة كالعدد 12 أو 16، و كلما كان عدد الأعمدة كثيراً كلما كان أحسن، و يسمى منظور صفحة الويب المعتمدة عناصرها على نظام Grid System بـ Grid View.طريقة إنشاء Grid View
يُنشأ Grid View في CSS عن طريق أكواد محدّداتها عبارة عن محددات Class و تحتوي على خواص حسب نوع الأعمدة :
* الأعمدة العمودية
- الخاصية 'WIDTH' لجعل جميع الأعمدة بعروض متساوية، و قيمتها عبارة عن نسبة مئوية يتم التحصل عليها عن طريق هذه القاعدة
( 100 \ عدد الأعمدة ) * ترتيب العمود
- الخاصية 'FLOAT' لجعل جميع الأعمدة تطفو في اتجاه معين، و قيمها إما 'RIGHT' لجعلالأعمدة تطفو في اتجاه اليمين، و إما 'LEFT' لجعل الأعمدة تطفو في اتجاه اليسار.
* الأعمدة الأفقية
- الخاصية 'HEIGHT' لجعل جميع الأعمدة بارتفاعات متساوية، و قيمتها عبارة عن نسبة مئوية يتم التحصل عليها عن طريق هذه القاعدة
( 100 \ عدد الأعمدة ) * ترتيب العمود
- الخاصية 'DISPLAY' و قيمتها 'BLOCK' لجعل كل عمود تحت الآخر.
و بالتالي يمكن استغلال محددات الكلاس للـ Grid System و تحويلها إلى قيم كلاسات مقحمة في عناصر HTML مراد جعلها متمركزة بالـ Grid System و ناتجة نموذجاً متجاوباً.
إنشاء Grid View عن طريق Framework
ما هو Framework ؟
Framework هو عبارة عن أكواد جاهزة يستغلها مطورو الويب في بناء مواقعهم الإلكترونية سواء من ناحية المظهر أو الفعالية، و لجعله فعال في الموقع الإلكتروني يجب إما تثبيت ملفات أكواد اللغات التي يدعمها Framework في المخدم الخاص للموقع الإلكتروني، و إما استدعاء الملفات من مصدر Framework عن طريق وضع روابطه و سكريبتاته في ملف HTML للموقع الإلكتروني، ثم الإستفادة من خدماته.
يوضح المجال الزمني [ من 01:10:15 إلى 01:28:47 ] للفيديو التوضيحي للدرس مثال حول كيفية الإستناد بـ Bootstrap Framwork في إنشاء نموذج متجاوب مع جميع أنواع الشاشات.
الأكواد المستعملة في الدرس
أتمنى أن تستفيدوا من الدرس