الدرس الخامس: الموقع الإلكتروني التفاعلي (٢)

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

الفكرة الأساسية

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

الشرح

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

في ملف التنسيقات نستخدم استعلام الوسائط عند عرض أقصى يبلغ 700 بكسل لتحديد خصائص العرض، مثل تعيين القيمة النسبية لتحديد موضع القائمة، والقيمة المطلقة لتحديد الموضع الدقيق للأيقونة، وعرض عناصر القائمة في عمود.

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

مثال محلول خطوة بخطوة

المطلوب: كتابة مقطع برمجي بلغة جافا سكربت لتعديل خصائص الموقع بناء على عرض شاشة المستخدم لجعل القائمة تتفاعل عند الضغط. الخطوة الأولى: نكتب دالة جافا سكربت باسم الوظيفة المطلوبة. الخطوة الثانية: نستخدم التعليمة للبحث عن العنصر بالمعرف الخاص به وتخزينه في المتغير x، ونكتب: var x = document.getElementById("myMenu"); الخطوة الثالثة: نضع جملة الشرط لفحص اسم الفئة، ونكتب: if (x.className === "menu") الخطوة الرابعة: إذا تحقق الشرط وأصبحت النتيجة صحيحة، نضيف الفئة الاستجابية إلى اسم الفئة، ونكتب: x.className += "responsive"; الخطوة الخامسة: في حال لم يتحقق الشرط، نكتب في جزء الاستبدال: else { x.className = "menu"; }

أخطاء شائعة

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

سؤالان للتدريب مع الإجابة

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