التصميم السريع الاستجابة

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

للاطّلاع على التفاصيل الكاملة حول الدورة التدريبية، يُرجى الانتقال إلى نظرة عامة على تطوير تطبيقات الويب التقدّمية.

مقدمة

يوضّح لك هذا المختبر كيفية تصميم محتوى موقعك الإلكتروني ليكون متجاوبًا.

أهداف الدورة التعليمية

  • كيفية تصميم تطبيقك ليعمل بشكل جيد على أشكال الأجهزة المختلفة
  • كيفية استخدام Flexbox لتنظيم المحتوى بسهولة في أعمدة
  • كيفية استخدام الاستعلامات عن الوسائط لإعادة تنظيم المحتوى استنادًا إلى حجم الشاشة

ما يتعين عليك معرفته

  • أساسيات HTML وCSS

المتطلبات

  • جهاز كمبيوتر يمكن الوصول إلى واجهة النظام أو المحطة الطرفية فيه
  • الاتصال بالإنترنت
  • محرِّر النصوص

نزِّل مستودع pwa-training-labs أو استنسِخه من GitHub وثبِّت إصدار LTS من Node.js، إذا لزم الأمر.

إذا لم يكن لديك خادم تطوير محلي مفضّل، ثبِّت حزمة Node.js http-server:

npm install http-server -g

انتقِل إلى دليل responsive-design-lab/app/ وابدأ الخادم:

cd responsive-design-lab/app
http-server -p 8080 -a localhost -c 0

يمكنك إيقاف الخادم في أي وقت باستخدام Ctrl-c.

افتح المتصفّح وانتقِل إلى localhost:8080/.

ملاحظة: ألغِ تسجيل أي مشغّلات خدمات وامحُ جميع ذاكرات التخزين المؤقت لمشغّلات الخدمات في localhost لكي لا تتداخل مع المختبر. في "أدوات مطوّري البرامج في Chrome"، يمكنك إجراء ذلك من خلال النقر على محو بيانات الموقع الإلكتروني من قسم محو مساحة التخزين في علامة التبويب التطبيق.

إذا كان لديك محرِّر نصوص يتيح لك فتح مشروع، افتح المجلد responsive-design-lab/app/. وهذا سيجعل من السهل بقائها منظمة. بخلاف ذلك، افتح المجلد في نظام الملفات على جهاز الكمبيوتر. المجلد app/ هو المكان الذي ستنشئ فيه المختبر.

يحتوي هذا المجلد على ما يلي:

  • ‫index.html هي صفحة HTML الرئيسية للموقع الإلكتروني/التطبيق النموذجي
  • ‫modernizr-custom.js هي أداة لرصد الميزات تعمل على تبسيط اختبار توافق Flexbox
  • ‫styles/main.css هي ورقة الأنماط المتتالية للموقع الإلكتروني النموذجي

ارجع إلى التطبيق في المتصفّح. جرِّب تقليل عرض النافذة إلى أقل من 500 بكسل ولاحظ أنّ المحتوى لا يستجيب بشكل جيد.

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

استبدِل TODO 3 في index.html بالعلامة التالية: 

<meta name="viewport" content="width=device-width, initial-scale=1">

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

ملاحظة: يمنحك محاكي الأجهزة تقريبًا دقيقًا للشكل الذي سيظهر به موقعك الإلكتروني على جهاز جوّال، ولكن للحصول على الصورة الكاملة، عليك دائمًا اختبار موقعك الإلكتروني على أجهزة حقيقية. يمكنك الاطّلاع على مزيد من المعلومات عن تصحيح أخطاء أجهزة Android على Chrome وFirefox.

الشرح

تقدّم علامة إطار العرض الوصفية إرشادات للمتصفّح حول كيفية التحكّم في أبعاد الصفحة وحجمها. تتحكّم السمة width في حجم إطار العرض. يمكن ضبطها على عدد محدّد من وحدات البكسل (على سبيل المثال، width=500) أو على القيمة الخاصة device-width, التي تمثّل عرض الشاشة بوحدات بكسل CSS بمقياس %100. (هناك قيمتان متطابقتان هما height وdevice-height، ويمكن أن تكونا مفيدتَين للصفحات التي تحتوي على عناصر يتغيّر حجمها أو موضعها استنادًا إلى ارتفاع إطار العرض).

تتحكّم السمة initial-scale في مستوى التكبير أو التصغير عند تحميل الصفحة لأول مرة. يؤدي ضبط المقياس الأوّلي إلى تحسين التجربة، ولكن يظل المحتوى يفيض عن حافة الشاشة. سنحلّ هذه المشكلة في الخطوة التالية.

لمزيد من المعلومات

استبدِل TODO 4 في styles/main.css بالرمز التالي:

@media screen and (max-width: 48rem) {
  .container .col {
    width: 95%;
  }
}

احفظ الملف. أوقِف وضع الجهاز في المتصفّح وأعِد تحميل الصفحة. جرِّب تصغير عرض النافذة. لاحظ أنّ المحتوى يتحوّل إلى تخطيط أحادي العمود عند العرض المحدّد. أعِد تفعيل وضع الجهاز ولاحظ أنّ المحتوى يستجيب ليتناسب مع عرض الجهاز.

الشرح

للتأكّد من أنّ النص قابل للقراءة، نستخدم طلب بحث وسائط عندما يصبح عرض المتصفّح 48rem (768 بكسل بحجم الخط التلقائي للمتصفّح أو 48 مرة حجم الخط التلقائي في متصفّح المستخدِم). راجِع مقالة متى يجب استخدام em مقابل rem للحصول على شرح جيد لسبب كون rem خيارًا جيدًا للوحدات النسبية. عندما يتم تشغيل طلب البحث عن الوسائط، نغيّر التنسيق من ثلاثة أعمدة إلى عمود واحد عن طريق تغيير width لكل من div الثلاثة لملء الصفحة.

وحدة تخطيط المربّع المرن (Flexbox) هي أداة مفيدة وسهلة الاستخدام تتيح لك جعل المحتوى متوافقًا مع مختلف الأجهزة. تتيح لنا Flexbox تحقيق النتيجة نفسها كما في الخطوات السابقة، ولكنّها تتولّى أي عمليات حسابية متعلّقة بالمسافات وتوفّر مجموعة من خصائص CSS الجاهزة للاستخدام من أجل تنظيم المحتوى.

تعطيل القواعد الحالية في CSS

أشِر إلى جميع القواعد في styles/main.css باعتبارها تعليقًا من خلال تضمينها بين /* و*/. سنعتمد هذه القواعد كقواعد احتياطية في حال عدم توفّر Flexbox في قسم Flexbox كتحسين تدريجي.

إضافة تصميم Flexbox

استبدِل TODO 5.2 في styles/main.css بالرمز التالي:

.container {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  background: #eee;  
  overflow: auto;
}

.container .col {
  flex: 1;
  padding: 1rem;
}

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

الشرح

تحدّد القاعدة الأولى container div كحاوية مرنة. يتيح ذلك سياقًا مرنًا لجميع العناصر الثانوية المباشرة. نحن نستخدم مزيجًا من بنية Flexbox القديمة والجديدة لتحقيق توافق أوسع (راجِع مزيد من المعلومات للحصول على التفاصيل).

تستخدم القاعدة الثانية الفئة .col لإنشاء عناصر مرنة متساوية العرض. يؤدي ضبط الوسيطة الأولى للسمة flex على 1 لجميع عناصر div التي تحمل الفئة col إلى تقسيم المساحة المتبقية بالتساوي بينها. وهذه الطريقة أكثر ملاءمة من احتساب العرض النسبي وضبطه بأنفسنا.

لمزيد من المعلومات

اختياري: ضبط عروض نسبية مختلفة

استخدِم فئة nth-child الزائفة لضبط العرض النسبي للعمودين الأول والثاني على 1 والثالث على 1.5. يجب استخدام السمة flex لضبط العرض النسبي لكل عمود. على سبيل المثال، سيبدو أداة الاختيار للعمود الأول على النحو التالي:

.container .col:nth-child(1)

استخدام طلبات البحث عن الوسائط مع Flexbox

استبدِل TODO 5.4 في styles/main.css بالرمز أدناه:

@media screen and (max-width: 48rem) {
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column;
  }
}

احفظ الرمز وأعِد تحميل index.html في متصفّحك. الآن، إذا قلّلت عرض المتصفّح، سيتم إعادة تنظيم المحتوى في عمود واحد.

الشرح

عندما يتم تفعيل طلب البحث عن الوسائط، نغيّر التنسيق من ثلاثة أعمدة إلى عمود واحد من خلال ضبط السمة flex-flow على column. يؤدي ذلك إلى تحقيق النتيجة نفسها التي حقّقها طلب البحث عن الوسائط الذي أضفناه في الخطوة 5. توفّر Flexbox العديد من الخصائص الأخرى، مثل flex-flow، التي تتيح لك تنظيم المحتوى وإعادة ترتيبه وتبريره بسهولة ليتجاوب بشكل جيد في أي سياق.

بما أنّ Flexbox هي تكنولوجيا جديدة نسبيًا، يجب تضمين بدائل في CSS.

إضافة Modernizr

Modernizr هي أداة لرصد الميزات تعمل على تبسيط اختبار توافق Flexbox.

استبدِل TODO 6.1 في index.html بالرمز لتضمين الإصدار المخصّص من Modernizr:

<script src="modernizr-custom.js"></script>

الشرح

نضمِّن إصدار Modernizr في أعلى index.html، وهو يختبر توافق Flexbox. يتم تشغيل الاختبار عند تحميل الصفحة وإضافة الفئة flexbox إلى العنصر <html> إذا كان المتصفح يتيح استخدام Flexbox. بخلاف ذلك، يضيف الفئة no-flexbox إلى العنصر <html>. في القسم التالي، سنضيف هذه الفئات إلى CSS.

ملاحظة: إذا كنا نستخدم السمة flex-wrap في Flexbox، سنحتاج إلى إضافة أداة رصد منفصلة في Modernizr لهذه الميزة فقط. تتيح الإصدارات القديمة من بعض المتصفّحات استخدام Flexbox جزئيًا، ولا تتضمّن هذه الميزة.

استخدام Flexbox بشكل تدريجي

لنستخدِم الفئتَين flexbox وno-flexbox في CSS لتوفير قواعد احتياطية عندما لا يكون Flexbox متاحًا.

الآن، في styles/main.css، أضِف .no-flexbox قبل كل قاعدة علّقنا عليها:

.no-flexbox .container {
  background: #eee;
  overflow: auto;
}

.no-flexbox .container .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
}

@media screen and (max-width: 48rem) {
  .no-flexbox .container .col {
    width: 95%;
  }
}

في الملف نفسه، أضِف .flexbox قبل بقية القواعد:

.flexbox .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #eee;
  overflow: auto;
}

.flexbox .container .col {
  flex: 1;
  padding: 1rem;
}

@media screen and (max-width: 48rem) {
    .flexbox .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-flow: column;
    }
}

تذكَّر إضافة .flexbox إلى قواعد الأعمدة الفردية إذا أكملت الخطوة الاختيارية 5.3.

احفظ الرمز وأعِد تحميل index.html في المتصفّح. يجب أن تبدو الصفحة كما كانت من قبل، ولكنّها ستعمل الآن بشكل جيد في أي متصفّح على أي جهاز. إذا كان لديك متصفّح لا يتوافق مع Flexbox، يمكنك اختبار قواعد الاحتياط من خلال فتح index.html في هذا المتصفّح.

لمزيد من المعلومات

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

المواضيع التي تناولناها

  • ضبط إطار العرض المرئي
  • Flexbox
  • طلبات الاستعلام عن الوسائط

الموارد

مزيد من المعلومات حول أساسيات التصميم المتجاوب

مزيد من المعلومات عن Flexbox كتحسين تدريجي

مزيد من المعلومات حول مكتبات CSS المتجاوبة

مزيد من المعلومات حول استخدام طلبات البحث عن الوسائط

للاطّلاع على جميع دروس البرمجة في دورة تدريب تطبيقات الويب التقدّمية، راجِع درس البرمجة الترحيبي للدورة التدريبية.