تطوير مواقع الويب لتتوافق مع الجوالات

By admin | حملات اعلانية | 0 Comments

تطوير مواقع الويب لتتوافق مع الجوالات

إذا كنت قد شاركت في تطوير الويب في السنوات ال 5 الماضية، كنت قد سمعت الكلمات “تصميم استجابة” مرارا وتكرارا. قد يكون لديك حتى فهم جيد جدا لما تعنيه تلك
الكلمات ولماذا من المهم لتنفيذ تصاميم استجابة عند تطوير المواقع. ومع ذلك، أصبح من المهم بشكل متزايد النظر في الأجهزة النقالة أكثر تحديدا عند تطوير المواقع
تصميم موقع ويب مستجيب مع الجوالات

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

الاستجابة لا تعني الحل الأمثل لأداء الجوال !!. يتم تفسير css بواسطة متصفح الجهاز الذي يطلب ذلك. وهذا يعني أنه ليس لديه أي وسيلة للاتصال مباشرة مع الخادم، لذلك كل ما هو قادر على القيام به هو التأثير سمات البصرية للعناصر داخل الموقع.

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

إن إدارة المحتوى الذي يرسله الخادم على أساس شرطي عن طريق الكشف عن نوع الجهاز الذي يطلبه، جنبا إلى جنب مع استعلامات وسائط css التقليدية، سيؤدي إلى تحسين الأداء وإمكانية الوصول إلى موقع ويب على أجهزة الجوال

كشف الجهاز

يمكن الكشف عن الجهاز على مستوى الخادم من خلال قراءة معلومات هتب وسر إدجنت التي تم تمريرها إلى وحدة خدمة عند طلب موارد منها. ومن المستحيل نسبيا ضمان الكشف عن جميع أنواع الأجهزة المتنقلة من خلال هذا النهج؛ ومع ذلك، فإنه لا يزال من المهم جدا ومفيدة لاستخدام هذا النهج كلما كان ذلك ممكنا لتوفير وقت التحميل الثمين على الأجهزة النقالة.

باستخدام هذين النهجين معا سوف تبدو مثل ما يلي عند التعامل مع عنصر أو قسم من الموقع الذي كنت لا تريد أن تظهر على الأجهزة النقالة.

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

@media screen and (max-width: 768px) {
.hidden-element{ display: none}
}

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

?php

require_once ‘../Mobile_Detect.php’;

function is_Mobile(){

$detect = new Mobile_Detect;

$is_mobile = ($detect->isMobile() ? true : false);

return $is_mobile;

}

?>

يسمح رمز أعلاه لي الآن كتابة بيان الشرطي الذي يبدو شيئا من هذا القبيل.

استخدام هذه المفاهيم في المشروع الخاص بك المقبل لن يقرض فقط لأداء أفضل من التطبيقات الخاصة بك، ولكن الأهم من ذلك أنه سيتم إنشاء المستخدمين أكثر سعادة. دعونا نعطي العالم الخبرة التي يستحقونها والبدء في إنشاء مواقع أكثر قوة ويمكن الوصول إليها بشكل كامل