مرحبًا بكم لقد عدنا مجددًا. سنتحدث في هذه المحاضرة عن إمكانية التنقل عبر الإنترنت. أعلم أن هذه الدورة التدريبية في الغالب
تدور حول CSS، لكني أريد دائمًا أن أذكرك بالأشياء المختلفة التي التفكير فيها. فيما يتعلق بتصميم صفحاتك. إن التنقل عبر الإنترنت هو حقًا من أهم جوانب إمكانية الوصول للمحتوى. إذا لم يتمكن الأشخاص من التنقل عبر صفحتك
والوصول إلى المحتوى الذي يريدون الوصول إليه، فأنت بذلك تضيع وقتهم وبعض وقتك. لذا فإن المستخدمين الذين تم الإشارة إليهم
لديهم العديد من الأشياء المثيرة والحقيقية التي يبحثون عنها في صفحة ما. إنهم يعرفون ما هو مربع البحث. يعرفون أين يكون الشعار دائمًا. ويعرفون مكان التنقل الرئيسي عبر الإنترنت. وليس من المفاجأة أن المحتوى الرئيسي دائمًا، وهو ما نسميه المحتوى حسنًا، أن يكون مختبئًا أسفل الصفحة. ونحن نعلم هذا لأننا لا يمكننا رؤيته بمجرد فتح المتصفح. ولكن بالنسبة للمستخدمين المكفوفين وضعاف البصر، فهم بحاجة حقيقية إلى إلى الاعتماد على ترميز مناسب للصفحة
حتى يمكنهم الحصول إلى ما يريدون الحصول عليه. ولا يتعلق الأمر فقط بالترميز المناسب، ولكن هناك العديد من الإشكاليات الأسلوبية
التي ينبغي التفكير فيها عندما تقوم بذلك. ماذا إن لم تكن تستطع الرؤية؟ أول مكان تخصل منه على المعلومات هو عنوان الصفحة. عليك التأكد من أن العنوان قصير، ولكن يتيح أيضًا للمستخدم معرفة كيف تختلف هذه الصفحة عن صفحات أخرى في موقعك. ثم بعد ذلك، يتم وضع العنوان المناسب، واتباع التسلسل المطلوب، يسمح لمستخدمي الشاشة بتخطي روابط التنقل المختلفة، والوصول مباشرة إلى ما يبحثون عنه. أعتقد أنك ذهبت لمواقع وشعرت بأنك تريد الذهاب لمواقع أخرى وحينها تابعت مواقع أخرى. وقد يكون هذا أمرًا مزعجًا ومقلقًا حقًا. خاصة إذا كان لابد أن تكون الفأرة في المكان الصحيح تمامًا. لذا لابد أن نتأكد من أننا نسمح لقراء الشاشة وباقي المستخدمين بالتخطي مباشرة للمكان الذي يريدون الذهاب إليه. نريد أيضًا أن نفكر في روابطك. فحيث يكون لديك روابط لمواقع مختلفة في صفحتك، هذا ما يجعل الناس تذهب إليها. لذا لا تستخدم "انقر هنا"، قم بمتابعتي هنا". عليك أن تقوم بتقديم معلومات جيدة في وصف هذه الروابط. ثم نريد بعد ذلك التحدث عن التسلسل لصحيح للعناوين، حسنًا؟ ينبغي أن تكون العناوين مترابطة حتى تبدو لها بنية متماسكة حقًا، لذا لذا فيجب ألا يكون لديك عناوين H3 قبل أن تقوم بتصميم عناوين H2. وينبغي أن يكون لديك عنوان H1 واحد فقط. فلا يمكنك القفز من H2 حتى H4. ومع ذلك، ينبغي عليك أن تتبع نوعًا معينًا من الترتيب، لكي يمكن للأشخاص إدراك أن هناك مغزى من وراء صفحتك. وها هو مثال هنا. لدى عنوان h1 واحد، كما أن في هذه الصفحة، يمكنني تخيل أن لدى ثلاثة أقسام. يحتوى كل قسم من هذه الأقسام على عنوان h2 بداخله. وفي القسم الأول، قد يكون لدى بعض النقاط الصغيرة المحددة أو غيرها من النقاط التي أطرحها
والتي تكون هامة بما يكفي لتقريري عرضها، سأستخدم h3 للإشارة إلى أن
هذا هو قسم فرعي اّخر في القسم الخاص بي. حيثما يقع الناس في المشكلات وما تراه طوال الوقت،
هو أن يقرر الناس أنهم يفضلون حقًا شكل خط Hh2. أو أن يكون فقط حجم الخط كبيرًا. يعجبني نوع الخط الذي يستخدمونه، لذا سأضع أكبر عدد من الأشياء باستخدام خط h2،
لأنني احب الشكل الذي يبدو به. وهم لا يفكرون في دلالات ذلك. ويحدث نفس الشئ مع خط h3. ستذهب إلى صفحة شخص ما،
ولن جد خط h2 على الإطلاق. ومع ذلك، نجد ان كلها عناصر h3، فهم يفعلون ذلك فقط لأنهم يحبون شكل هذه العلامة المحددة. والاّن، هذا هو مكان التصميم، ولهذا سأتحدث عنه في فصل التصميم. هل تعلم ان الاّن، غن كنت تحب حقًا شكل العنوان h3، يمكنك أن تقوم بتصميم علامات
أخرى للحصول على هذا المظهر بدلاً من استخدام العلامة هذه. اكتشف نوع الخط الذي يستخدمونه. اكتشف حجم الخط. فقط كرر هذا. لا تستخدم العلامات لمجرد أنك تحب شكلها. الشيء الاّخر الذي يمكنك التفكير فيه
والذي يساعدك في التنقل عبر الإنترنت، هو فكرة العناوين التي تكون خارج الصفحة. ومن المهم أن تفعل ذك عندما تريد أن تعطي
مستخدم قارئ الشاشة بعض المسعدات الخاصة بالتنقل عبر الإنترنت لكنك لا تريد وضعه داخل الصفحة و وتجعل المستخدمين المبصرين يستخدمونها طوال الوقت. لذا، دعوني أقدم لكم مثالاً على هذا. سنستخدم أوراق التصميم لوضع شئ ما بشكل أساسي خارج الصفحة، وأطلقنا عليه offpage، وذكرنا، أهلاً، أريد أن أضع هذا في أقصى اليسار بمقدار 100 بكسل. لذا ستدرك أن هذا أمر صعب للغاية. هنا لدى صفحة الموارد البشرية الخاصة بجامعة ميتشيغان. وإذا قمت بالنظر بالقرب من الجزء العلوي، لن تجد هناك حقًاأى شئ، هناك في الزاوية العليا. ولكن ما سأفعله، هو أنني سأمضي قدمًا،
وأقوم بالضغط على علامة التبويب. وما تقوم به علامة التبويب،
هو أنها تجعل العنصر التالي محل تركيز. لذا، امضِ قدمًا، وقم بالتبويب هناك. ويمكنك أن ترى، وأن هناك شئ جديد يقول لك تخطى للمحتوى الرئيسي. إن نقرت عليه، سأنزل إلى الأسفل، ولاستطعت أن تخطي الكثير من هذه المعلومات الإضافية
التي ليسوا بحاجة حقًا إلى رؤيتها. لقد كان الأمر مجرد تسويقًا وأِياء أخرى من هذا القبيل. لذا، تعد روابط التنقل المختلفة الموجودة خارج الشاشة،
مفيدة للغاية حيث أنها تسمح للناس بالقفز فورًا إلى المكان الذي يريدون الذهاب إليه. ولكن، باستخدام التصميم، قمنا بإزالته من الصفحة التي نستخدمها فقط إذا أردت حقًا ذلك. وأحد الأشياء التي أردت ذكرها هى
أنك إذا قمت بتصميم عناوين خارج الصفحة، فلا تقوم باستخدام (عرض: لا) أو (إظهار: لا). فهذا يعد ي حقيقة الأمر نوعًا من أنواع العشوائية
التي تضعف البرمجة، وتجعل من الصعب جدًا على قارئ الشاشة أو على أى شخص اّخر،
النظر إلى برمجتك ورؤية ما يحدث. ذكرت في بداية المحاضرة أن نص الرابط ذو المغزى يكون في غاية الأهمية من أجل إمكانية الوصول إلى المحتوى،
لأن برامج قراءة الشاشة يمكنها إيجاد وسرد كافة الروابط. والاّن، ما لا يمكنك إدراكه
هو أن طريقة عرض هذه الروابط ربما لا تكون هى الطريقة التي تتوقعها. لذا، فقط تكون خارج السياق. قد تتمكن فقط من الوصول إليها من خلال الجدولة أو قد يتم عرضها في قائمة ما. لذا، فتجنب في الحقيقة استخدام بعض الأشياء
مثل انقر هنا، اقرأ هذا وأشياء أخرى. والسبب هو، هو أن هذا ربما يكون السياق الوحيد
الذي يكون لدى بعض الناس للذهاب إلى الروابط. كما يرجي عدم استخدام عنوان URL كوصف للرابط. من الشائع جدًا الذهاب إلى الموقع ويمكنك رؤية "انقر هنا" و وستجد عنوان URL بالكامل www.umich.edu/etc. فالأمر قد يبدو وصفيًا للغاية، ولكن ينبغي عليك أن تنصلت للوصف، فالأمر قد يكون مربكًا للغاية. مع ذلك، لإن لم يمكن لديك عنوان URL قصير جدًا، امضِ قدمًا و استخدم بعض أنواع الوصف النصي. لذا، قم فقط بالمراجعة، والتدبر فيما تعلمناه اليوم. وعندما تنتهي من تصميم صفحتك، لا يكفي فقط أن تبدو جيدة. بل تحتاج في التفكير في كيفية جعل التنقل فيها سهلاً. فلتفكر فيما قد يحدث إن لم تتواجد الألوان، أو إذا استطاع شخص ما الانتقال إلى صفحتك باستخدام الفأرة. لذا أريد أن أريكم في عجالة ما أتحدث عنه هنا. ها هى صفحة قديمة لي، وفي أسفل الصفحة، جامعة ميشيغان. أريد فقط أن أريكم ماذا يحدث عند حذف التصميم. الاّن، لم يعد يمكنك حتى رؤية النص بالصفحة. هذه هى أشياء صغيرة قد لا تلاحظها أبدًا ما لم تقوم بفحص صفحتك باستخدام التصميم أو بدونه. لذا، عندما تقوم بالتخطيط لتصميم صفحتك،
تأكد من أن ما تفعله مناسبًا للجميع. استغل العنوان بشكل جيد. استغل نص الرابط بشكل جيد. وتأكد من أنك تعطي الناس الأدوات
التي يحتاجونها للتنقل في صفحتك بنجاح. شكرًا.