الموقع الإلكتروني التفاعلي | الوحدة الثالثة | الدرس الثاني
الموقع الإلكتروني التفاعلي هو عنوان الدرس الثاني من الوحدة الثالثة التي تحمل اسم “البرمجة المتقدمة باستخدام لغة ترميز النص التشعبي” في الفصل الدراسي الثاني من مقرر “تقنية رقمية 2”.
ستتعرف في هذا الموضوع على كيفية إنشاء موقع إلكتروني تفاعلي باستخدام لغة برمجة جافا سكريبت (JavaScript) مع مقطع برمجي HTML، بالإضافة إلى التعرُّف على تقنيات تحسين محركات البحث (Search Engine Optimization – SEO) وكيفية استخدامها.
لذا قم بقراءة نواتج التعلُّم بعناية، ثم أعد قراءتها والتأكُّد من تحصيل محتواها بعد انتهائك من دراسة الموضوع.
نواتج التعلُّم
- معرفة ماهية لغة جافا سكريبت واستخداماتها.
- معرفة كيفية كتابة المقطع البرمجي في جافا سكريبت.
- معرفة كيفية عرض رسالة باستخدام جافا سكريبت.
- معرفة كيفية إنشاء زر باستخدام جافا سكريبت.
- إنشاء ملف جافا سكريبت خارجي واستخدامه في عدة صفحات من الموقع الإلكتروني.
- عرض أيقونة قائمة همبرغر باستخدام ملف جافا سكريبت.
- إضافة المقاطع البرمجية إلى ملف خارجي CSS وحفظه.
- تحسين الوصول إلى الموقع الإلكتروني في محركات البحث.
هيا لنبدأ!
مقدمة – الموقع الإلكتروني التفاعلي
يقبل الموقع الإلكتروني التفاعلي (Interactive website) مدخَلات المُستخدِم ويمكنه تغيير محتواه وفقًا لذلك.
تستخدِم المواقع الإلكترونية التفاعلية جافا سكريبت لتطويرها، وإضافة عناصر تفاعلية تجذب المُستخدِمين.
بينما يتم استخدام لغات HTML وCSS لإعطاء بنية ونمط للصفحات الإلكترونية.
يمكِنك استخدام جافا سكريبت على الموقع الإلكتروني الخاص بك من أجل:
- عرض التاريخ والوقت.
- عرض النوافذ المنبثقة ومربعات الحوار.
- التحقُّق من صحة مدخَلات المُستخدِم.
- القوائم المنسدلة الديناميكية، إلخ.
لاحظ أن
بدون جافا سكريبت، ستكون 90% من الصفحات الإلكترونية ثابتة على الإنترنت.
لغة جافا سكريبت
جافا سكريبت (JavaScript – JS) هي لغة برمجية عالية المستوى يتم استخدامها لجعل صفحات لغة ترميز النص التشعبي (HTML) أكثر ديناميكية وتفاعلية، والتي لا يمكِن إجراؤها باستخدام برمجة HTML العادية وصفحات التنسيق النمطية (CSS).
باستخدام لغة جافا سكريبت يمكِنك:
- تعديل محتوى الصفحة التي تم إنشاؤها باستخدام HTML.
- تغيير خصائص المقطع البرمجي HTML المُستخدَم في الصفحة الإلكترونية.
- تغيير المقطع البرمجي CSS المُستخدَم في الصفحة الإلكترونية.
لمعرفة المزيد من المعلومات عن جافا سكريبت، قم بالاطّلاع على الرابط التالي:
المقطع البرمجي في جافا سكريبت
يتم كتابة المقطع البرمجي في جافا سكريبت بين الوسمين script>/< <script>. ويحتوي الوسم <script> على مقطع برمجي جافا سكريبت، أو يمكِن أن يشير إلى ملف جافا سكريبت خارجي من خلال الخاصية src.
يمكِنك كتابة مقطع برمجي جافا سكريبت في:
- قسمي <head> و<body> في صفحة HTML.
- ملف خارجي.
عرض رسالة باستخدام لغة جافا سكريبت
هناك العديد من الطرق المختلفة التي يمكِنك استخدامها لعرض المُخرَج باستخدام لغة جافا سكريبت، منها:
- استخدام دالة الكتابة في مستند (write ()) في المقطع البرمجي HTML الخاص بك، حيث تعرِض هذه الدالة النص المُحدَّد في الصفحة الإلكترونية.
- استخدام دالة نافذة التنبيه (alert ()) لإنشاء مربع تنبيه يحتوي على رسالة.
- استخدام دالة الحصول على عنصر من المُعرِّف في مستند (getElementByld ())، حيث تُحدِّد هذه الدالة العنصر النصي من خلال المُعرِّف وتغييره إلى عنصر آخر.
دالة الكتابة في مستند (document.write ())
يتم استخدام دالة الكتابة في مستند (document.write ()) لعرض نص محدَّد في الصفحة الإلكترونية.
في المثال التالي، ستستخدِم الدالة document.write () لإضافة مُخرَج إلى مستند HTML.
دالة نافذة التنبيه (window.alert ())
يتم استخدام دالة نافذة التنبيه (window.alert ()) لعرض مربع تنبيه يحتوي على رسالة نصية، ويتعيَّن على المُستخدِم الضغط على زر “موافق” لإغلاق هذا المربع، ويتم استخدامها أيضًا للتأكَّد من أن المعلومات خاصة بالمُستخدِم.
دالة الحصول على عنصر من المُعرِّف في مستند (document.getElementByld ())
يتم استخدام دالة الحصول على عنصر من المُعرِّف في مستند (document.getElementByld ()) لتحديد عنصر نصي محدَّد في HTML باستخدام المُعرِّف (id) وتغييره إلى عنصر آخر.
في المثال التالي، تأخذ الدالة مُعرِّف الوسم <p> الذي يحتوي على النص “مرحبًا” وتقوم بتغييره إلى النص المُحدَّد “صباح الخير”.
إنشاء زر باستخدام جافا سكريبت
يمكِنك استخدام لغة HTML لإنشاء زر يمكِن الضغط عليه، حيث يتم استخدام وسم <button> في لغة HTML لإنشاء الزر، ومن خلال الضغط عليه، يمكِنك تشغيل وظيفة محدَّدة.
يمكِنك إنشاء الدالة بين وسوم البرنامج النصي، ويتم الإعلان عن الدالة داخل الأقواس المتعرجة لجافا سكريبت.
من خلال الضغط على الزر، سيتم تشغيل دالة الحصول على عنصر من المُعرِّف في مستند (document.getElementByld ()) وستتغيَّر رسالة “مرحبًا” إلى “صباح الخير”.
بإمكانك مراجعة محتوى موضوع “الموقع الإلكتروني التفاعلي” من باديته وحتى نهاية هذا القسم، من خلال الرابط التالي:
ملف جافا سكريبت الخارجي
يمكِنك إنشاء برنامج نصي (Script) في ملف مختلف وحفظه بامتداد “.js”، ثم يمكِنك الرجوع إليه باستخدام الخاصية src في وسم <script>.
ويمكِن استخدام ملف جافا سكريبت الخارجي في عدة صفحات من الموقع الإلكتروني، بدلًا من كتابة نفس البرنامج النصي عدة مرات.
ستقوم بإنشاء مقطعًا برمجيًّا في جافا سكريبت يعرض رسالة ترحيب تتغيَّر وفقًا للوقت الذي يزور فيه المُستخدِم الموقع.
ستقوم بإنشاء ملفًا خارجيًّا يحتوي على مقطع برمجي جافا سكريبت بنفس الطريقة التي أنشأت بها ملف HTML وملف CSS، ولكن يتم حفظه بالامتداد “.js”.
الآن بعد أن أنشأت البرنامج النصي، ستربطه بصفحة معجبي كرة القدم لجعل الصفحة أكثر جاذبية للمُستخدِمين.
قائمة همبرغر
قائمة همبرغر (Hamburger) عبارة عن أيقونة من 3 أسطر أعلى الزاوية اليسرى أو اليمنى من الموقع الإلكتروني.
عند الضغط عليها، يمكِنك فتح قائمة بها مجموعة من الخيارات الإضافية. (تتكوَّن من 3 خطوط متوازية حيث تشبه البرجر التقليدي).
باستخدام ملف جافا سكريبت، سيتم عرض أيقونة قائمة همبرغر عندما يكون عرض الشاشة صغيرًا نسبيًا.
وفي نفس الوقت، سيتم عرض عناصر القائمة في عمود فقط إذا ضغط المُستخدِم على الأيقونة.
خطوات إنشاء قائمة همبرغر:
- حمِّل مكتبة الأيقونات (Icons Library) إلى ملف HTML الخاص بك، واربطها بعنوان URL الخاص بها، إلى القسم الرئيس للملف.
- أضف في ملف HTML، داخل أو أعلى قسم div في القائمة، قسم div منفصل يحتوي على:
- فئة الأيقونة (Button class): التي عند الضغط عليها تؤدي إلى تشغيل المقطع البرمجي لجافا سكريبت.
- فئة الرمز (Icon class) (بين وسم <i>).
- أنشئ مقطعًا برمجيًّا لجافا سكريبت يجعل القائمة تبدِّل بين إضافة وإزالة الفئة المستجيبة عندما يضغط المُستخدِم على الرمز.
- أضف النمط المناسب إلى قسم القائمة والقائمة المستجيبة.
تحميل مكتبة الأيقونات
تحتاج أولًا إلى إضافة مكتبة الأيقونات (Icons Library) للحصول على أيقونة القائمة التي ستستخدمها، ولإضافتها إلى ملف html الخاص بك، عليك إضافة الرابط التالي إلى المقطع البرمجي الخاص بك:
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
يؤدي هذا الرابط إلى ملف CSS يحتوي على الأيقونة التي تحتاج إلى استخدامها لقائمة همبرغر.
إنشاء قسم div جديد
أيقونة القائمة (Menu Icon) هو زر يتم استخدامه لفتح وإغلاق القائمة في الشاشات الصغيرة، وللقيام بذلك تحتاج إلى إنشاء قسم div للزر مثل الفئة (class) وتعيينه أولًا في نفس القسم مع القائمة.
يمكِنك استخدام الوسم <i> لإدراج الأيقونة، حيث يتم استخدامه لإضافة الأيقونات في ملف HTML. ويجب عليك أيضًا إضافة اسم إلى فئة الأيقونة (Icon class).
أيضًا اربط الملف الخارجي داخل وسوم <script>.
لاحظ أن
يمكِنك إنشاء مجلد يسمى “Scripts” واستخدامه لحفظ برامج جافا سكريبت النصية الخاصة بك.
إنشاء مقطع برمجي جافا سكريبت
أنت الآن بصدد إنشاء ملف جافا سكريبت الذي يجعل القائمة تُبدل بين إضافة وإزالة فئة الاستجابة (responsive).
يتيح برنامج جافا سكريبت عرض الأيقونة عندما يكون عرض الشاشة صغيرًا نسبيًّا. في هذا المثال، عندما يكون العرض أقل من 700 بكسل، فإن عناصر القائمة تختفي وتظهر الأيقونة.
عندما يضغط المُستخدِم على الأيقونة، يتم عرض عناصر القائمة في عمود. ويتم استخدام هذه الوظيفة في متصفِّح الهواتف الذكية، حيث تكون الشاشة صغيرة.
يكون ملف جافا سكريبت بامتداد “.js” وهو خارجي ومرتبط بملف HTML.
لكي يعمل الموقع الإلكتروني بشكل صحيح ويستجيب لشاشات الأجهزة المختلفة، يجب عليك إضافة المقطع البرمجي التالي إلى ملف CSS الخارجي ثم حفظ الملف.
بإمكانك مراجعة محتوى موضوع “الموقع الإلكتروني التفاعلي” بدايةً من عنوان “ملف جافا سكريبت خارجي” وحتى نهاية هذا القسم، من خلال الرابط التالي:
تحسين محركات البحث
يقصد بمصطلح تحسين محركات البحث (Search Engine Optimization – SEO) جميع الإجراءات التي تحتاجها في هيكلية وترتيب محتوى الموقع الإلكتروني، وذلك لرفع تصنيف (Ranking) الموقع وزيادة عدد الزائرين له، من خلال الوصول إلى الموقع عن طريق نتائج البحث باستخدام الكلمات المفتاحية المتعلقة بمحتواه وليس عن طريق الإعلانات المدفوعة.
تقنيات تحسين محركات البحث
توجد العديد من التقنيات التي يسهُل تنفيذها وعادةً ما تأتي بنتائج جيدة لزيادة معدل الحركة على الموقع (Website Traffic).
ونظرًا لأن تقنيات تحسين محركات البحث تتغيَّر باستمرار، فإليك بعضًا منها:
- تحسين العناوين الرئيسة: حيث إن وسم العنوان <title> له وزنه الخاص في محرك البحث. ويجب أن تكون الكلمة المفتاحية المهمة في البداية، مع إضافة الكلمات المفتاحية المناسبة إلى رأس الصفحة (Header) قدر الإمكان.
- اختيار صور بأحجام مناسبة: حيث تتطلَّب الصور مساحة تخزينية أكبر على الخادم؛ مما يعني أنها ستتطلَّب مساحة تخزينية أكبر على جهاز المُستخدِم ووقتًا أطول لتحميلها. إن الصور التي تستغرق وقتًا طويلًا لتحميلها تؤثر بشكل سلبي على تصنيف الموقع.
- تشغيل أدوات تتبُّع معدل الحركة على الموقع: حيث يعدُّ التتبُّع مصطلحًا مهمًا للغاية في تحسين محركات البحث لتتبُّع نتائج المواقع غير المدفوعة، ويخبرك بمدى التقدُّم في جذب المزيد من الزائرين للموقع.
كيفية عمل محركات البحث؟
تعمل محركات البحث من خلال 3 وظائف أساسية:
- الزحف (Crawling)
الزحف هو عملية الاكتشاف التي ترسل فيها محركات البحث فريقًا من الروبوتات (المعروفة باسم برامج الزحف أو العناكب) للعثور على محتوى جديد وحديث.
يمكِن أن يختلف المحتوى فقد يكون صفحة إلكترونية، أو صورة، أو مقطع فيديو، أو ملف PDF، وما إلى ذلك، ولكن بغض النظر عن المحتوى، يتم اكتشاف المحتوى عن طريق الروابط.
فمثلًا، يبدأ جوجل بوت (Google bot) بجلب بعض الصفحات الإلكترونية، ثم يتبع الروابط الموجودة على هذه الصفحات للعثور على عناوين URL جديدة.
من خلال التنقُّل على طول مسار الروابط هذا، يكون الزاحف قادرًا على العثور على محتوى جديد وإضافته إلى فهرس محرك البحث جوجل.
- الفهرسة (Indexing)
الفهرسة هي عملية تخزين وتنظيم المحتوى الموجود أثناء عملية الزحف.
الفهرس هو قاعدة بيانات ضخمة لعناوين URL المكتشفة، والتي سيتم استردادها لاحقًا عندما يبحث المُستخدِم عن معلومات.
بمجرد إدراج الصفحة في الفهرس، سيتم عرضها كنتيجة للاستعلامات ذات الصلة.
- الترتيب (Ranking)
الترتيب هو عملية ترتيب نتائج البحث حسب الصلة بالاستعلامات، من الأكثر صلة إلى الأقل صلة بالموضوع.
بشكل عام، يمكِنك افتراض أنه كلما تم تصنيف موقع إلكتروني بأعلى صلة، كلما كان محرك البحث يعتقد أن الموقع مرتبط بالاستعلام.
عرض صفحة إلكترونية
العرض هو العملية التي يجب أن يمر بها الهاتف أو جهاز الحاسب أو الجهاز اللوحي أو متصفِّح جهاز آخر من أجل جلب صفحة إلكترونية للمُستخدِم.
في معظم الأحيان، يتطلَّب هذا أن يحصل جهاز الحاسب على عدة موارد مختلفة (جافا سكريبت، CSS، HTML) لجعل الصفحة تعمل بالطريقة التي تريدها.
يمكِن أن تستغرق عملية العرض وقتًا طويلًا، اعتمادًا على حجم وكمية تلك الموارد المختلفة التي يجب على متصفحك الذهاب إليها وجلبها.
العرض من جانب العميل: الخيار الأقل ملاءمة لتحسين محركات البحث
يُقصد بالعرض من جانب العميل (Client Side Rendering – CSR) أن العميل (جهاز المُستخدِم الذي يقوم بالبحث) يعرض محتوى الصفحة الإلكترونية.
بدلًا من تجميع الصفحة على الخادم ثم إرسالها إلى متصفحك، يتم إرسال الصفحة إلى المستعرض الخاص بك مفككة، تاركًا المتصفِّح يعمل على تحميل وجمع كل المحتوى.
هذا يعني أنه يتم استرداد البيانات من الخادم، ومعالجتها في المتصفِّح لعرضها على المُستخدِم.
العرض من جانب الخادم: الخيار المفضل لكبار المسؤولين الاقتصاديين لتحسين محركات البحث
العرض من جانب الخادم (Server Side Rendering – SSR) هو في الأساس الأسلوب الذي يتم فيه عرض الصفحة بأكملها بواسطة الخادم.
سيطلُب العميل المعلومات من الخادم، وسيسلِّم الخادم الصفحة المحمَّلة بالكامل إلى العميل.
مزايا وعيوب الطريقتين
يعدُّ العرض من جانب الخادم مفيدًا لكبار المسؤولين الاقتصاديين؛ لأن المحتوى موجود على الخادم قبل أن يحصل عليه العميل، لذلك يمكِن لمحركات البحث الزحف إليه وفهرسته؛ مما يؤدي إلى ترتيب أفضل وحركة مرور أكبر على الصفحة الإلكترونية.
ولكن بأداء أقل عند عرض الخادم صفحة جديدة بالكامل في كل مرة، وليس المحتوى الجديد فقط.
من ناحية أخرى، يكتسب العرض من جانب العميل مزيدًا من القوة في الوقت الحاضر، حيث تحتوي المواقع الإلكترونية الحديثة على مئات الأسطر من التعليمات البرمجية والعديد منها يشبه التطبيقات؛ نظرًا لأنه يتجنَّب الطلبات المتكرِّرة إلى الخادم.
الخادم مسؤول عن تحميل جزء من صفحة إلكترونية HTML فقط ويتم التعامل مع كل شيء آخر بواسطة مكتبات جافا سكريبت من جانب العميل، ومقطع جافا سكريبت البرمجي مخصَّص لربط ملفات HTML به. ومع ذلك، فإن العرض من جانب العميل له عيوب أيضًا.
تحسين محركات البحث (SEO) للمواقع الإلكترونية ستتأثر سلبًا، حيث لا يُعرض المحتوى حتى يتم تحميل الصفحة على المتصفِّح، ولن يتمكَّن الموقع من التحميل حتى يتم تنزيل جافا سكريبت بالكامل على المتصفِّح، حيث إنه يحتوي على جميع المحتوى الذي ستحتاج إليه؛ مما قد يجعل وقت التحميل الأوَّلي طويلًا بعض الشيء.
بإمكانك مراجعة محتوى “الموقع الإلكتروني التفاعلي” بدايةً من عنوان “تحسين محركات البحث” وحتى نهاية الموضوع، من خلال الرابط التالي:
إلى هنا يكون قد انتهى موضوع “الموقع الإلكتروني التفاعلي”، لا تنسوا مراجعة نواتج التعلُّم أعلى المقال، وانتظرونا في الموضوع القادم!