كيفية التخطيط لعدم وجود جافا سكريبت
على الرغم من أن الطرق المستخدمة لجمع إحصاءات حركة المرور على الموقع الإلكتروني تشكك في صحة الإحصائيات نفسها ، إلا أن الحقيقة هي أن بعض زوار موقعك على الويب سيعطّلون جافا سكريبت .
يمكنك تقسيم مصادر الزيارات إلى أربع فئات رئيسية:
محركات البحث وزوار المحمول والزائرين الذين يستخدمون برامج قراءة الشاشة والزائرين الذين لديهم جافا سكريبت معطلة .
عند تخطيط هندسة وتصميم المعلومات الخاصة بك ، يجب عليك معرفة كيفية التعامل مع هذه المجموعات الخاصة.
لقد جمعت بعض سيناريوهات العالم الحقيقي في الآونة الأخيرة لإيجاد وضوح حول هذه القضية.
عندما تريد إخفاء محتوى طويل خلف scroller متحرك ، أو التدوير من خلال المنتجات أو الشهادات بالتسلسل ، أو تقديم محتوى على مستوى الصفحة يتم تصنيفه بشكل نظيف ، يمكنك استخدام الأكورديون أو الدوارات أو أي حل مبتكر آخر.
في حالة مواكبة أفضل ممارسات جافا سكريبت أو استخدام أي عدد لا يحصى من مكتبات جافا سكريبت ، فمن المحتمل أنك على دراية بجافا سكريبت غير مزعجة ، وهو أسلوب تقديم تفاعل جافا سكريبت فقط عند تمكين JavaScript.
يجب توسيع هذا المبدأ ليشمل العرض أيضًا: أنشئ ميزة (ميزات) ديناميكية وقم بتعيين قيم العرض وضوح الرؤية فقط بعد أن يكون المستند جاهزًا وفقط إذا كان لدى الزائر جافا سكريبت مُمكّن ، بدلاً من تعيين الخصائص في شفرة HTML أو تعريفها لهم من جانب الخادم.
مثل العديد من برامج قراءة الشاشة ، يميل برنامج زاحف Google إلى تجاهل المحتوى الملتف حول عنصر معين display: none ، بينما يتم الزحف إلى أي محتوى معين display: visible .
لذا فإن مهمتك كمصمم هي تخطيط المساحة والتخطيط حول ميزاتك الديناميكية ، وكذلك للتحضير لحالات لا تكون فيها "الديناميكية" خيارًا.
إذا كان المحتوى الموجود على إحدى صفحاتك سيكون مرئيًا دائمًا في متصفحات بعض المستخدمين ، فكيف يتم عرضه؟ هل يجب إخفاء المحتوى المخفي حتى إذا تم تعطيل جافا سكريبت؟ هل يجب إتاحة كل المحتوى لشاشات القارئ ومحركات البحث؟ إذا أصبح جزء من المحتوى مرئيًا بعد استدعاء AJAX ، فكيف تملأ هذه المساحة بشكل كافٍ عند تعطيل جافا سكريبت؟
الأكورديون
الأكورديون هو هيكل يتكون عادة من نمط أزواج من العنوان والمحتوى. تتوسع كتل المحتوى بمعدل واحد في كل مرة ، استجابةً لأحد الأحداث التي يتم تشغيلها في العنوان.
الأكورديون هولو
لقد ساعدت أحد العملاء مؤخرًا في التغلب على مشكلة وجود صفحات طويلة جدًا. كان لدى هذا العميل كتالوج على الإنترنت من الدورات التدريبية ونص على أن جميع المعلومات الخاصة ببرنامج معين يجب أن تكون متاحة في البداية: لا تخطي صفحة أو نوافذ منبثقة لتوصيف الدورة التدريبية الأساسية أو تعريفات البرنامج.
يجب أن تكون جميع معلومات البرنامج متاحة للزائر على نفس الصفحة ، دون الحاجة إلى التنقل ذهابًا وإيابًا في كتالوج الدورة التدريبية.
كان الحل الصحيح هنا هو الأكورديون ، مما أدى إلى انهيار أوصاف الدورة تحت العناوين لكل مجال من مجالات الدراسة (الرياضيات أو التاريخ ، على سبيل المثال). كان من شأن التنفيذ الضعيف ضبط رؤية أوصاف الدورة المسرّعة هذه قبل عرض شفرة HTML على الشاشة.
إذا كان المحتوى مخفيًا قبل العرض ، فسيفقد بعض الزوار ومحركات البحث الكثير من المحتوى المهم.
باستخدام jQuery ، استهدفت محتوى الانهيار وقمت ببدء تشغيل الأكورديون بعد تحميل الصفحة وكان المستند جاهزًا. لهذا العميل ، أصبح إتاحة المحتوى لجميع الجماهير أمرًا في غاية الأهمية. يمكن تشغيل بعض المحتوى لفترة طويلة ، ولذلك كان من الضروري الحصول على تصميم يمكنه استيعاب التوسع الرأسي المتطرف.
كاروسيل
ستشاهد الدارات المتحركة كثيرًا في الحافظات وأضواء المنتج.
عادةً في الدوارات ، سيتم تمرير المحتوى استجابة إلى فترة انتهاء مهلة أو بعض تفاعل المستخدم (راجع "Your Recent History" على Amazon). أنا أحب الدوارات لمرونتها ولأنها تسمح لك بإصلاح بُعد واحد على الأقل للحاوية.
دائري الأمازون
استفسر عميل آخر مؤخرًا عن منطقة "الأخبار والميزات" في صفحته الرئيسية. مثل العديد من كتل المحتوى الأخرى من هذا النوع ، ظهرت هذه الإضافات الثمانية الأخيرة على صفحاتها الإخبارية (رغم أن هذا العدد قد يختلف).
يحتوي المحفّزات في هذه المجموعة على ملخص للمقالة وصورة. يمكن أن تكون الصور كبيرة والمحتوى طويلاً ، لذا كان الحل الدائري الذي تم تدويره بين الحلقات هو الحل الصحيح هنا.
مرة أخرى باستخدام jQuery ، استهدفت غلاف DIV الخاص بالعنصر الدائري ، وبعد تحميل الصفحة وكان المستند جاهزًا ، قم بتطبيق المكتبة وحدد انتقالي. مع تمكين JavaScript ، تقدم الصفحة الرئيسية بشكل جيد: كل 15 ثانية ، تحولت الدائرية إلى دعابة تالية. بشكل افتراضي ، كانت جميع الإعلانات التشويقية مرئية ، ولكنني أخفيت كل شيء باستثناء الأول عندما أنشأت المكتبة الدوّارة.
بالنسبة لهذا العميل ، اخترنا مرة أخرى عرض كل المحتوى المخفي إذا تم تعطيل جافا سكريبت . في هذه الحالة ، ستتوسع الصفحة الرئيسية عموديًا لاستيعاب المحتوى الإضافي.
كان لدينا بدائل ، على الرغم من. وبالنظر إلى فئات المستخدمين الأربعة التي حددناها في بداية هذه المقالة ، كانت أولوية هذا المحتوى هي إمكانية الوصول ، حيث احتل محرك البحث المرتبة الثانية. كان من الممكن أن نشعر بالرضا عن هاتين المجموعتين من خلال ترك كل المحفزات مرئية ولكن إصلاح أبعاد الحاوية DIV والإعداد overflow إلى scroll ، auto أو hidden .
أي من هذه الخيارات يمكن أن يحافظ على أبعاد التخطيط. كما أن برامج قراءة الشاشة ومحركات البحث قد التقطت المحتوى أيضًا ، لأن المحتوى لن يكون مخفيًا مع display أو visibility خاصية.
المحتوى Swapper
تشبه هذه التقنية الدوارة في ذلك المحتوى في كتلة يتم تدويرها باستخدام بعض الرسوم المتحركة.
والفرق الرئيسي هو أن الرسوم المتحركة المتجنبة لا تستخدم ؛ بدلاً من ذلك ، يتلاشى جزء واحد من المحتوى بينما يتلاشى جزء آخر (أو قد يكون هناك انتقال صعب بدون تلاشي). إن swapper مشابه بما فيه الكفاية ل carousel أن حلول no-JavaScript البديلة المذكورة أعلاه صحيحة.
جاءني عميل آخر مع مهمة إظهار عدد غير محدد من الشهادات على موقعهم على الإنترنت. لقد اخترنا استخدام swapper للمحتوى في هذه الحالة لأننا لم نكن بحاجة إلى ترقيم الصفحات الموجود عادة في دوارات (لا يحتاج المستخدم إلى التمرير مرة أخرى إلى شهادة واحدة أو تخطي إلى النهاية).
بالنسبة للزائرين الذين تم تعطيل جافا سكريبت ، احترمنا التصميم. بعد دراسة متأنية ، قرر العميل عن حق أن الشهادات سيكون لها تأثير ضئيل على الزائرين الذين يحددون display إلى none لن تكون ضارة.
منحني هذا القرار مزيدًا من الحرية في التخطيط للعمود الأيمن من موقع الويب ، حيث ستظهر الشهادات.
الفرز
أي شخص قام بتعديل قائمة الانتظار الخاصة بهولو شهد فارز السحب والإفلات. هذا الجزء من JavaScript يسمح للمستخدمين بسحب وإفلات الصفوف (صفوف الجدول ، عناصر القائمة ، DIVs المستقلة ، إلخ) في ترتيب مختلف.
فارز Netflix
خذ أحد زبائنك الأخير كمثال ، وكان لديه مجموعة من الإجراءات القياسية التي يجب على جميع الموظفين اتباعها.
يتكون كل إجراء من أي عدد من المهام. يمكن للمسؤول إضافة أو إزالة المهام ويمكن تغيير ترتيب المهام.
كان هذا مثالًا كتابيًا للفرز ، وهو تنفيذ لعملية إعادة السحب والإفلات .
بفضل Scriptaculous و Prototype.js ، كان من السهل إنشاء قائمة قابلة للفرز. عندما تمت كتابة الكود و كانت الصفحة حية ، كان لدينا عرض قابل للتشغيل بشكل مثالي من شركات التصميم. ثم أدركنا أنه بدون جافا سكريبت ، كان لدينا فقط ما يعادل HTML من وزن الورق. لم يكن هناك السحب والإفلات أو إعادة الترتيب.
أعطانا بعض التفكير السريع والتعديل الطفيف للتصميم نفس مجموعة الصفوف التي كان لدينا من قبل ولكن مع إضافة مربعات إدخال النص التي يمكن أن تستوعب إدخال ترتيب الصف (ملاحظة ، على الرغم من أنه بدون JavaScript ، أجبرنا على إضافة بعض التحقق من صحة جانب الخادم الهامة لصناديق الإدخال هذه). لقد خسرنا إعادة الترتيب ، لكننا استعدنا على الأقل وظيفة الفرز.
ثم عدنا إلى المستعرضات التي تدعم JavaScript ، وقمنا بإخفاء مربعات النص المذكورة أعلاه ؛ بعد كل شيء ، كان لدينا وظيفة السحب والإفلات لهذه المجموعة. في هذه المرحلة ، كان لدينا عرضًا قابلاً للتشغيل تمامًا لبرامج التصميم التي كانت أيضًا صالحة للزوار الذين تم تعطيل جافا سكريبت. في المرة القادمة ، سأعرف للتخطيط لهذا الشرط.
استنتاج
سيستمر تطور الويب ، ويجب على زوار مواقعنا الإلكترونية الاستمرار في الاستمتاع بالذوق الديناميكي.
استمر في التخطيط للاستجابات التفاعلية مع مراهنات الرسوم المتحركة: التلاشي ، التلاشي ، الانهيار ، التوسع ، تحريك الأشياء. بالنظر إلى كل هذه الرسوم المتحركة ، فكر في كيفية ظهور موقعك على الويب للزائرين الذين لا يمكنهم مشاهدة الرسوم المتحركة بسبب قيود جافا سكريبت. سيكون عملاؤك أكثر سعادة ، وستكون مصممًا أفضل له.
http://www.thecounter.com/stats/2008/January/javas.php
http://www.w3schools.com/browsers/browsers_stats.asp
جيسون كورنس هو مطور ويب مستقل ومطور لواجهة برمجة التطبيقات (GUI) بدوام كامل لشركة Systems Alliance، Inc. ، وهو متخصص في إمكانية الاستخدام لجميع الجماهير.
كيف تخطط لغياب JavaScript؟ يرجى مشاركة نصائحك معنا ...