Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML
Webdesign

نصيحة سريعة: لا تنس استخدام عناصر "noscript"

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Strange and Unusual HTML.
HTML5 Form Validation With the “pattern” Attribute

Arabic (العربية/عربي) translation by Ameer Elsherif (you can also view the original English article)

لغة جافا سكربت هي لغة هامة نظراً لقوتها في إعطاء صفحات المواقع الطابع التفاعلي الحي, ولكن هذا ينتهي وبدون سابق إنذارفي اللحظة التي تكون فيها جافا سكربت معطلة في متصفح المستخدم للموقع. في هذه النصيحة السريعة سوف نعرض كيفية وضع بدائل للتعامل مع هذا الموقف باستخدام عنصر <noscript>..

جافا سكربت لا تعمل

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

لنستعرض معاً بعض اﻷمثلة.

تنبيه: خلال هذه المقالة سيتم استخدام إضافة Quick JavaScript Switcher وهي إضافة مفيدة لمتصفح Chrome تسمح بتسغيل وإيقاف جافاسكربت بنقرة واحدة.

موقع WordPress.com

يعتمد محرر النصوص الجديد المستخدم في موقع Wordpress.com بشكل كبير على جافا سكربت. كما تلاحظ في الصورة التالية, في حالة إيقاف جافا سكربت فإنه لن يتم عرض أي شيء سوى حرف "W" الممثل لشعار Wordpress. بافتراض أن أغلبية مستخدمي WordPress قد لا يكونو على وعي كامل بالتقنية فإنهم على اﻷرجح لن يستطيعو معرفة ما يجري.

محرر منشورات WordPress.com (١١ ديسمبر, ٢٠١٥)

موقع Trello

Trello هو تطبيق ويب لإدارة المشاريع وهو يعتمد بشكل كبير على جافا سكربت. ولكن على عكس WordPress.com يقوم Trello مشكوراً بإظهار تحذير بسيط:

واجهة Trello (١١ ديسمبر, ٢٠١٥)

موقع Facebook

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

موقع Facebook (١١ ديسمبر, ٢٠١٥)

موقع جريدة NewYorkTimes

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

يعتبر هذا حل بسيط وغير مؤثر (حتى أن بعض المستخدمين قد لا يلاحظو الفرق) ويظهر أهمية توفير أفضل نتيجة ممكنة للمستخدم حتى في حالة عدم توفر جافا سكربت.

استخدام عنصر "noscript"

تعتمد طريقة توفير البدائل بشكل كبير على كيفية استخدام جافاسكربت في الموقع في اﻷساس ولكن استخدام عنصر noscript سيكون مفيداً في العديد من الحالات. كما يظهر من الاسم فإنه يمكننا استخدام عنصر noscript لعرض محتوى بديل. أي شيء داخل وسمي <noscript></noscript> سيتم التعامل معه فقط في حالة تعطيل جافا سكربت.

للتوضيح بمثال تم عمل هذه الصفحة. تستعرض هذه الصفحة تأثيراً لتحميل الصورة بشكل مموه كما في Medium. يتم عرض كلاً من الصورة وكذلك عمل التأثير باستخدام جافا سكربت, وبالتالي توقع ماذا سوف يحدث عند إيقاف جافا سكربت عن العمل؟

لن يتم عرض الصورة.

لعرض هذه الصور نستطيع وضعها داخل وسوم noscript وكذلك وضع أكواد التنسيق الخاصة بها لتظهر في مكانها المناسب.

يمكننا أيضاً استخدام عنصر noscript لتنبيه المستخدم إلى توقف جافا سكربت كما هو الحالي في Facebook و Trello. كما يمكن أيضاً إضافة رابط يساعد المستخدم ليقوم بتفعيل جافا سكربت بنفسه.

الخلاصة

استخدام عناصر noscript لتوفير البدائل تعتبر طريقة جيدة لتنبيه المستخدم أنه بدون جافا سكربت قد لا تعمل كل خواص الموقع بنسبة ١٠٠٪. ولكن يجب أن لا ننسى أن اﻷولوية القصوى هي التأكد من أن عدم وجود جافا سكربت (أو شبكة توفير المحتوى CDN أو أي عنصر من العناصر التي يعتمد عليها الموقع) لا يؤثرعلى تجربة المستخدم في استخدام الموقع. شكراً لـChristian Heilmann لتوضيح هذا المعنى والتأكد من وصول الرسالة.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.