[MUSIC] في
هذه الأيام في عالم تطوير الويب، غالباً ما نسمع الناس
يذكرون مصطلحات التصميم المتجاوب والنهج الأول للجوال.
دعونا نحاول فهم المقصود بهذه المصطلحات،
وكيف تؤثر على الطريقة التي تصمم بها مواقعك الإلكترونية وتطبيقات الويب الخاصة بك.
سؤالك الواضح سيكون لماذا تفكر في التصميم المتجاوب؟
لمساعدتنا على فهم هذا، دعونا ننظر في كيفية وصول الناس إلى المواقع في هذه الأيام؟
تقليديا، عندما تم تصميم مواقع الويب لأول مرة، يمكنك أن تفترض إلى حد كبير
أن الناس سوف تصفح مواقع الويب الخاصة بك من جهاز كمبيوتر. في
هذه الأيام، يمكن زيارة مواقع الويب الخاصة بك من هاتف ذكي أو جهاز لوحي أو
كمبيوتر ذي أحجام شاشة مختلفة ودقة شاشة.
كيف نعرض مواقعنا الإلكترونية باستمرار على أجهزة ذات أحجام مختلفة للشاشة؟
حجم واحد يناسب كل النهج أن
مصممي المواقع التقليدية قد اتخذت لم تعد فاتورة ثابتة.
نحن بحاجة إلى نهج أفضل، نهج من شأنها أن
تكيف تلقائيا موقع الويب الخاص بك مع حجم الشاشة التي يتم عرضها.
هذا هو المكان الذي يتعين علينا فيه اتباع نهج للتكيف مع منفذ عرض المستخدم.
يجب أن يكون هذا مضمنًا في تصميم موقع الويب الخاص بك
وتطويره بحيث يتكيف تلقائيًا مع إطار العرض الخاص بجهاز المستخدم.
لمساعدتك على تقدير الحاجة إلى
معالجة الأجهزة ذات أحجام الشاشة المختلفة بشكل أفضل.
أنا أخذ مساعدة من خيارات المطور التي قد
توفر متصفح سفاري التي تمكني من عرض الموقع مع شاشات من أحجام مختلفة.
لذلك نأمل أن يقنع لك لماذا جعلنا تصميم الويب استجابة.
حتى هنا ترى أن كورسيرا الموقع يجري
تقديمها على 1920 من قبل 1080 مواقع الشاشة.
سيكون هذا سطح مكتب كبير نموذجي أو شاشة كمبيوتر محمول عالية الدقة.
ثم دعونا ننظر في نفس موقع الويب الذي يتم عرضه باستخدام شاشة أصغر مثل.
لذلك ترى تلقائيًا أن تخطيط الشاشة الخاص بك
يتكيف قليلاً مع حجم إطار العرض الخاص بجهازك،
نفس الشيء عند 800 × 600.
لذلك دعونا نذهب إلى أسفل في أحجام الشاشة، وهذا هو وجهة نظر باد قريبة من نفس الموقع.
هذا هو حجم باد إير 2، وهذا هو حجم باد ميني 4،
لاحظ الانتقال من
حجم باد ميني 4 إلى اي فون 6S زائد في وضع عمودي.
ستلاحظ الآن أن Navigation Bot قد انهار الآن في زر هنا،
والذي عند النقر سيكشف عن الخيارات من Navigation Bash.
ودعونا ننظر إلى نفس الشيء في جهاز iPhone 6S الخاص بنا
في الوضع الأفقي، لاحظ كيف تتبنى الشاشة نفسها.
وبالمثل بالنسبة لجهاز iPhone 6S في الوضع الأفقي
وانتقل إلى iPhone SE، وترى كيف أن موقع الويب
قد تغير الطريقة التي يتم تقديمها.
لذا نأمل أن يوضح هذا المثال لك كيف
ولماذا نحتاج إلى تصميم ويب متجاوب.
المفهوم الثاني ذي الصلة الذي ستسمعه هو المحمول أولاً.
نهج المحمول الأول بدلا من ذلك ينظر في تصميم موقع ويب
لجهاز محمول أولا.
لذا فكر في كيفية تلبية قيود الشاشة لجهازك المحمول.
وبعد ذلك كلما توسع حجم الشاشة،
ستبدأ تلقائيًا تطبيقًا على موقعك على الويب إلى أحجام الشاشة الأكبر والأكبر.
ربما، كنت على استعداد أكثر وأكثر من المحتوى.
وذلك للاستفادة من العقارات الشاشة المتزايدة.
وبالتالي فإن نفس الموقع عند رؤية على جهاز محمول قد يكون فقط
أجزاء من المعلومات التي يتم الكشف عنها للمستخدم.
ولكن بعد ذلك عندما يتم تقديمها على سطح المكتب fledge الكامل
قد تظهر الكثير من التفاصيل نسخة من الموقع.
الآن هذا يجب تكييفها تلقائيا استنادا إلى المعلومات
التي تحصل عليها من الجهاز الذي يتم عرض موقع الويب الخاص بك.
إذن كيف نحصل على هذه المعلومات؟
لحسن الحظ، يتم دعم تصميم الويب المتجاوب من قبل
العديد من أطر واجهة المستخدم الأمامية الحديثة على الويب بما في ذلك Bootstrap.
لذلك عندما ننظر إلى تعريف Bootstrap على صفحة الويب انها تقول،
استجابة المحمول النهج الأول.
نعم، كيف نذهب من خلال القيام بتصميم ويب متجاوب؟
لذلك هناك العديد من المفاهيم التي تم إنشاؤها في
أطر واجهة المستخدم الخاصة بك وقت الإطار التي تأتي للمساعدة عندما تحتاج إلى القيام بتصميم ويب استجابة.
أولا وقبل كل شيء هو ما يسمى هو نظام الشبكة؟
سنلقي نظرة على نظام شبكة Bootstrap بمزيد من التفصيل في
المحاضرة القادمة.
حتى نتمكن من فهم بالضبط كيف يمكننا الاستفادة من ذلك لتكون قادرة على القيام
تصميم الويب استجابة.
الجانب الثاني هو الصور السائلة، بحيث الصور الخاصة بك التي تضمينها في
موقع الويب الخاص بك سوف تتكيف تلقائيا مع حجم الشاشة.
والجزء الثالث هو ما يسمى استعلامات وسائط CSS من رمز CSS الخاص بك.
يمكنك الاستعلام عن حجم الوسائط ثم ضبط فئات CSS بشكل مناسب
لتناسب حجم شاشة الجهاز.
الآن كيف تعمل استعلامات الوسائط؟
دعونا ننظر إلى ذلك بعد ذلك.
يتم دعم استعلامات الوسائط في CSS مثل هذا.
وبالتالي فإن التكنولوجيا تسمح لك للقيام الاستعلام وسائل الإعلام لتحديد الحد الأدنى لعرض
الشاشة التي هذه المجموعة معينة من فئات CSS سوف تكون نشطة.
لذلك سيتم تحديد هذا في ملف CSS الخاص بك كـ @media،
ثم داخل قوس، يمكنك تحديد على سبيل المثال، min-width.
هناك الكثير من الخيارات لاستعلامات الوسائط من ما أعرضه هنا.
هذا مثال واحد فقط لكيفية إنشاء استعلام وسائط في رمز CSS الخاص بك.
إلقاء نظرة على رمز CSS في Bootstrap نفسه،
دعنا نذهب ونرى كيف يتم استخدام استعلامات الوسائط بواسطة Bootstrap.
حتى هنا ترى مثالا لاستعلام وسائل الإعلام حيث يقول، @media و
min-width 576 بكسل.
ثم يحدد أن تلك حاوية استدعاء فئة CSS معينة،
والتي سوف نتعلم المزيد عنها في المحاضرة القادمة،
وأيضا في التمرين الذي يلي.
سنرى أن عرض الحاوية يتم تعيينه بناءً على عرض الشاشة.
وبالمثل، بالنسبة لشاشة عرض أعلى، يتم ضبط عرض الحاوية تلقائيًا.
لذلك هذا هو ما يمكّن إطار واجهة مستخدم الويب الخاص بك من
دعم تصميم الويب المتجاوب.
حتى القيام باستعلامات الوسائط، إطار واجهة المستخدم على الويب الخاص بك قادر على
تحديد أي نوع من الأجهزة كنت عرض موقع الويب الخاص بك على.
وبالمقابل ضبط فئات CSS
لتناسب حجم شاشة الأجهزة المعينة.
إذن من الواضح أن السؤال التالي الذي سيأتي في عقلك هو كيف
نفعل ذلك عملياً؟
لحسن الحظ، إذا بدأت
بإطار واجهة مستخدم ويب أمامي مصمم بشكل جيد مثل Bootstrap، تصبح الأمور واضحة للغاية.
سوف نتعلم المزيد عن هذا في المحاضرة التالية والتمرين التالي.
[ موسيقى]