نتاج التعلم ب: تصميم موقع إلكتروني يلبي متطلبات العميل

خطط قبل أن تبني

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

• خطوات التصميم: تتضمن عملية تصميم موقع إلكتروني عددًا من الخطوات التي، إذا تم تخطيها، قد تسبب مشكلات كبيرة عند بدء تشغيل موقع إلكتروني.
• قول مأثور: "إذا فشلت في التخطيط، فأنت تخطط للفشل"، وينطبق كثيرًا على تطوير المواقع الإلكترونية وعلى أي مشروع تصميم وتطوير.

بيان المشكلة: اجمع كل ما يريده العميل

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

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

• الملخص الكامل للمشكلة: سيحتاج مطور الموقع إلى فهم المشكلة بكامل أبعادها حتى يتسنى له حلها، وسيتطلب ذلك التواصل بين المطور والعميل.
• SQIRO: طريقة شائعة الاستخدام لجمع المتطلبات، وهي تجميعة للأحرف الأولى من الكلمات الإنجليزية.
• معناها: ⁦sampling (⁩أخذ العينات)، و⁦questionnaires (⁩الاستبيانات)، و⁦interviews (⁩المقابلات)، و⁦research (⁩الأبحاث)، و⁦observations (⁩الملاحظات).
• الهدف: يستخدم المطور هذه التقنيات مع العميل لجمع أكبر قدر ممكن من المعلومات لفهم المشكلة التي يهدف إنشاء الموقع إلى حلها تمامًا.

ما التقنيات الخمس في طريقة ⁦SQIRO⁩؟

قيود الموقع وفوائده ودرجة تفاعله

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

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

• التجارة الإلكترونية: يحتاج مصمم الويب أيضًا إلى تحديد كيفية إجراء المعاملات عبر الإنترنت، وهذه المسألة على شقين.
• تصفح الكتالوج: كيف ستُدرج العناصر في الكتالوج؟ تصنف أمازون عناصرها هرميًا، ويمكنك تصفية تفضيلاتك مثل الصلة وتاريخ الإضافة والسعر وآراء العملاء.
• الشراء: يسجل الموقع تفاصيل المستخدم ومعلومات بطاقة الائتمان/الخصم، وتُشفَّر هذه المعلومات بطريقة تسمى أمان طبقة النقل ⁦(TLS)⁩.
• باي-بال ⁦(PayPal)⁩: تستخدم هذه الطريقة لأنها تخزن جميع معلوماتك المالية، فلا تحتاج إلى إعطائها للموقع الذي تشتري منه.
• مستوى التعقيد: قد لا تتطابق متطلبات العميل بشكل واقعي مع ما يحتاجه بالفعل، وقد لا يعرف الممكن وغير الممكن فيعتمد على إرشادات الخبراء.
• الأثر: كلما كان الموقع أكثر تعقيدًا، زادت تكلفة التصميم والتطوير على الأرجح.

خمس صفات لمتطلبات جيدة

• متطلبات الغرض: الاشتراطات المحددة في موجز العميل بشأن الموقع التفاعلي الذي يريده، وتُنشأ المتطلبات بعد جمع المعلومات المتاحة.
• معيار سمارت ⁦(SMART)⁩: من المهم أن تلبي جميع المتطلبات هذا المعيار.

• محددة ⁦(Specific)⁩: يستهدف كل مطلب مجالًا معينًا من التحسين.
• قابلة للقياس ⁦(Measurable)⁩: من الممكن قياس ما إذا كان أحد المتطلبات قد اكتمل أم لا، وتجنب أي متطلبات لا يمكن التحقق من اكتمالها.
• قابلة للتحقيق ⁦(Achievable)⁩: يجب أن يكون المطلب قابلًا للتحقيق.
• واقعية ⁦(Realistic)⁩: يمكن تحقيق المطلب بشكل واقعي باستخدام الموارد المتاحة.
• مقيدة بالوقت ⁦(Time-constrained)⁩: يمكن تحقيق المطلب ضمن الإطار الزمني المخصص.

ما الصفات الخمس التي تصف متطلبات سمارت؟

النموذج الأولي: اعرض الفكرة قبل البناء

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

لوحات الإلهام والعمل والمخططات الشبكية

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

• لوحات العمل: عامل أساسي لهيكلة الموقع بوضوح، وطريقة للتعبير عن تصميم التنقل داخل الموقع (الشكل 6.4).
• استخداماتها: غير محصورة في تصميم المواقع؛ بل تُستخدم في تصميم مقاطع الصور المتحركة مثل الرسوم المتحركة أو الأفلام.

• المخططات الشبكية: لتصور شكل الصفحات قبل إنشائها، ينشئ المصممون تصميمات شاشة أو مخططات شبكية (الشكل 6.5).
• ما هي: نماذج من الصفحات الفعلية تركز على التخطيط بدلًا من المحتوى، وتتضمن عادةً بعض السمات الأساسية للصفحات.
• خريطة الموقع: قائمة بصفحات الموقع التي يمكن الوصول إليها من قبل متتبع الارتباطات أو المستخدمين.
• شكلها: مستند بأي صيغة يُستخدم أيضًا كأداة تخطيط، أو صفحة ويب تسرد الصفحات، وتعرض أيضًا العلاقة بين الصفحات.

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

صمم موقعك ليزوره الناس

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

بدائل التصميم والتوافق مع الأجهزة

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

الكود الزائف والمخططات الانسيابية

• من جانب العميل: يُنفَّذ البرنامج النصي بواسطة متصفح الويب الخاص بالمستخدم بدلًا من الخادم.
• جافا-سكريبت: مثال على لغة برمجة تتيح البرمجة النصية من جانب العميل ويمكن استخدامها لإنشاء تفاعل داخل صفحات الويب.
• قبل الترميز: يجب إنشاء التصميم المناسب لإبلاغ المطور بالوظيفة التي سيؤديها الموقع.
• الكود الزائف ⁦(Pseudocode)⁩: يساعد المبرمجين على تطوير الخوارزميات بخطوة وسيطة بين الشرح باللغة الإنجليزية (أو لغة طبيعية أخرى) ولغة الترميز.
• فائدته: يخطط المصمم ما ستفعله الشفرة دون القلق بشأن استخدام الكلمات وبُنى الجملة الصحيحة.

• مثال الكود الزائف: العمر = إدخال من المستخدم.
• شرط: إذا كان العمر >= 18، فعندئذ اطبع على الشاشة جملة "⁦Hello World⁩".
• وإلا ⁦(Else)⁩: اطبع على الشاشة جملة "⁦I am x years old⁩".
• المخططات الانسيابية: مخططات يستخدمها مطورو البرامج لتمثيل حل لمشكلة معينة.
• مكوناتها: مربعات من أنواع مختلفة لتمثيل أشياء مختلفة، وأسهم توضح كيفية ارتباط المربعات ببعضها (الشكل 6.8).

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

ماذا يمثل الشكل الماسي في المخطط الانسيابي؟

أصول الموقع: من أين تأتي؟

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

التعليقات: اسأل قبل أن تبني

• جمع التعليقات: عند الانتهاء من تصميمات موقعك، من المهم جمعها من الآخرين (بما في ذلك العميل والمستخدمين المحتملين).
• الغرض: المساعدة على تحسين أفكار التصميم البديلة أو النماذج الأولية واتخاذ القرارات المناسبة.
• لماذا قبل التنفيذ: إذا وُجدت مشكلات بعد أن يبدأ المطور إنشاء الموقع، فمن المحتمل حدوث تأخيرات وتقديم تنازلات بسبب قيود الوقت والتكلفة.
• القيود: مرحلة تلقي التعقيبات فرصة لتحديد أي قيود تقنية وتصميمية والتوصل إلى حلول بديلة قبل فوات الأوان.
• التكرار: عملية التطوير متكررة، فيمكنك العودة وتكييف التصميمات لمراعاة تعقيبات الآخرين حتى يصبح التصميم صحيحًا، مع مراعاة قيود الوقت والتكلفة.

• الاستبيانات: يمكن استخدامها لجمع التعليقات وتحديد مجالات القوة والمجالات التي تحتاج إلى تحسين، وتستخدم نوعين رئيسيين من الأسئلة: الكمية والنوعية.

• أمثلة كمية: على مقياس من 1 إلى 10، كيف تقيم الجماليات العامة للموقع؟
• أيضًا: هل يمكنك التنقل عبر الموقع بشكل فعال؟ (أدرج خيارات الإجابة مثل "نعم، بسهولة"، "نعم"، "نعم بصعوبة"، "لا"، "لا، كان التنقل غاية في الصعوبة").
• أمثلة نوعية: ما أكثر شيء استمتعت به في الموقع؟ كيف يمكننا تحسين تجربتك على الموقع الإلكتروني؟

خطة الاختبار: كيف تتأكد أن الموقع يعمل؟

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

ما العناصر التي تحدث داخل خطة الاختبار؟

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

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

القيود: ما الذي يحد من موقعك؟

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

• الاعتبارات القانونية والأخلاقية: هناك قوانين تحمي الملكية الفكرية للفرد، وأخرى تضمن عدم نشر البيانات الشخصية للفرد.
• حقوق النشر: لا توجد قوانين حقوق نشر دولية تسري على كل البلدان، رغم أن بعض الدول وقعت على الاتفاقية العالمية لحقوق الطبع والنشر ⁦(UCC)⁩.
• حماية البيانات: وضعت الدول الأوروبية قواعد حماية البيانات والخصوصية بموجب فحص الخصوصية السحابية ⁦(CPC)⁩.
• لذا: يجب أن تكون على دراية بالقوانين التي ستؤثر فيك.

لغة الترميز التي تبني كل صفحة

• الأدوات والتقنيات: بعد الموافقة على التصميمات، يجب استكشاف أدوات وتقنيات مختلفة للتطوير لتلبية متطلبات العميل.
• ⁦HTML (⁩لغة ترميز النص التشعبي): هي لغة الترميز الأكثر استخدامًا، وتشكل الأساس لجميع صفحات الويب العالمية، حتى لو استُخدمت لغات أخرى لأجزاء منها.
• العلامات: تستخدم ⁦HTML⁩ نظام العلامات (المشار إليه بأقواس الزاوية) التي تحتوي على التعليمات.
• أزواج العلامات: تأتي جميع التعليمات تقريبًا في زوج من العلامات المفتوحة والمغلقة التي تحتوي على المحتوى الذي سيتأثر.
• مثال: على سبيل المثال <font color="red">Some text</font> سينتج '⁦Some text'⁩.
• الإعلان: يجب أن تبدأ صفحات ⁦HTML⁩ بعلامات <html> وتنتهي بعلامات </html> للإعلان عن اللغة المستخدمة.

• المعيار الحالي: يجب أن يعمل مطورو المواقع دائمًا وفقًا للمعيار الحالي، فعند تطوير صفحات الويب يجب عليك البرمجة باستخدام ⁦HTML5⁩.
• الأنماط: لم تعد علامات تغيير الخط مطلوبة في ⁦HTML5⁩؛ بدلًا من ذلك يجب استخدام أوراق الأنماط المتتالية ⁦(CSS)⁩.
• المستقبل: من المحتمل أن تكون هناك تحديثات لاحقة تؤدي إلى ⁦HTML6⁩، والتي ستصبح المعيار الجديد.
• الميزة: يحتوي معيار ⁦HTML5⁩ على مجموعة أكبر من التقنيات التي تسمح بتفاعل أكثر تنوعًا وبتوفير مواقع وتطبيقات أفضل.

• الجداول: تبدأ بعلامة <table>، ويجب عدم استخدامها لهيكلة المواقع الإلكترونية (وهو ما كان يتم في الماضي) لأنها تسبب مشكلات في إمكانية الوصول وعرض المتصفح.
• الاستخدام الصحيح: ينبغي استخدام العلامة <table> لتقديم جدول على صفحة ويب فقط، كأوقات عمل المتجر.

النماذج: كيف يدخل المستخدم بياناته؟

• النماذج: تُستخدم في تطوير المواقع لجمع مدخلات المستخدم، وثمة طرق مختلفة لذلك.
• حقل النص: يحدد حقل سطر واحد لإدخال النص.

• منطقة النص: تتيح لك الحصول على المزيد من مدخلات المستخدم.

• زر الإرسال: يحدد زرًا لإرسال نموذج إلى معالج النماذج.

• أزرار الاختيار: تسمح للمستخدم بتحديد أحد الخيارات المحدودة.

• مربعات الاختيار: على عكس أزرار الاختيار، تسمح لك بتحديد أكثر من خيار واحد.

القوائم والروابط والنوافذ المنبثقة

• التنقل: طريقة للارتحال عبر صفحة الويب للعثور على ما تحتاج إليه.
• في البداية: اقتصرت شبكة الويب على الارتباطات التشعبية فقط، ثم طُوّرت طرق جديدة لتصفح الموقع.
• القوائم: يمكن أن تظهر في أي مكان، لكن معظم المطورين يضعونها في أعلى صفحة الويب، وهي أكثر جاذبية من الناحية الجمالية من الارتباطات التقليدية.
• القائمة الفرعية: أحيانًا عند تمرير الفأرة فوق قائمة، ستظهر قائمة فرعية (الشكل 6.9).

• الارتباطات التشعبية: روابط تنقلك إلى جزء معين من الموقع (رابط داخلي) أو موقع آخر (رابط خارجي) عند النقر عليها، وقد تكون نصًا أو صورًا أو أزرارًا.
• الإشارات المرجعية: تُستخدم لإعادة توجيه الزائر إلى جزء معين من صفحة الويب، كروابط أقسام مستند طويل في بداية الصفحة.

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

• الأزرار: تنضغط كأي زر تقليدي، ولها أغراض مختلفة منها نقلك إلى صفحة ويب أخرى.
• القوائم: تقدم خيارات أكثر تقدمًا من المكونات الأخرى مثل الأزرار، وتوفر للمستخدم خيارات التنقل.
• صور التمرير: صورة ثانوية تُحمّل في صفحتك لتُعرض عندما يمرر المستخدم الماوس فوق صورة معينة، فيصبح الموقع أكثر تفاعلية، كمنظر آخر لقطعة الملابس.

الألوان والقوالب وأوراق الأنماط

• القوالب: يستخدم تصميم الويب الحديث، ضمن ⁦HTML5⁩، قوالب ذات أنظمة ألوان وأنماط مدمجة، بعضها مجاني وبعضها بمقابل.
• أوراق الأنماط المتتالية ⁦(CSS)⁩: تقنية تُنشأ بها هذه القوالب.
• الموضوع: غالبًا ما يحدد نظام الألوان والأنماط التي يستخدمها موقعك الإلكتروني موضوعه.
• أمثلة: إذا كنت تنشئ موقعًا لحضانة أطفال، فمن المنطقي استخدام خط مرح ومجموعة متنوعة من الألوان الزاهية، وللموقع الاحترافي لشركة مظهر أكثر بساطة بلوحة ألوان صغيرة وخلفيات متباينة.

• مناقشة: تقصّ تركيبات الألوان المختلفة التي يمكنك استخدامها لمواقع إلكتروني قائم على التعليم، وفكّر في مسائل تيسير الوصول مثل عمى الألوان، وناقش تركيبات الألوان الأنسب واشرح أسبابك.

• التناسق: من الممارسات الجيدة استخدام التخطيط والتصميم نفسيهما في الموقع بكامله، وتُستخدم لغة ⁦CSS⁩ لضمان التنسيق القياسي، كلون الخلفية والصور وتنسيق النص والحدود.
• أيضًا: تنطبق القاعدة نفسها على أنماط العناوين وموضع العناصر والمساحة المتروكة (المسافة داخل الحدود بين الصورة أو الخلية).
• متتالية: عندما تغير في مكان واحد، ينتقل التغيير إلى جميع الصفحات التي تستخدم النمط، فيسهل تغيير التصميم والحفاظ عليه.
• مثال: في ⁦HTML⁩ كان تغيير لون الخط لجميع العناوين إلى الأحمر يتطلب تغيير كل منها على حدة، وبـ ⁦HTML5⁩ و⁦CSS⁩ يكفي تغيير قيمة واحدة فقط.
• ميزات أخرى: يمكن استخدام ⁦CSS⁩ لتغيير تخطيط وتنسيق أي صفحة ويب، ومئات الخصائص يمكن تغييرها بالطريقة الخارجية.

• تغيير لون الخلفية:

• تغيير صورة الخلفية:

• تنسيق النص:

• طريقة العنوان: تستخدم هذه الخصائص طريقة العنوان لتطبيق ⁦CSS⁩.
• وضع الحدود:

• وضع المسافات البادئة:

موقع يصله الجميع على كل منصة

• العلامات البديلة ⁦(alt tag)⁩: نص بديل لصورة أو كائن على صفحتك، فإذا تعذر عرض الصورة تُقرأ العلامة في مكانها (الشكل 6.11).
• لضعاف البصر: تُقرأ بواسطة برامج قراءة الشاشة وقارنات المواقع الأخرى كبديل للصورة، فيصف قارئ الشاشة الصورة بصوت عالٍ.
• المعنى: يجب أن تكون العلامات البديلة ذات معنى، أي تذكر ما يظهر في الصورة في سياق النص على الصفحة.

• التصغير/التكبير: تحتوي متصفحات الويب على ميزة تسمح للمستخدم بالتكبير أو التصغير بحسب تفضيلاته، وهذا مفيد خاصة لضعاف الرؤية.
• تحويل النص إلى كلام ⁦(TTS)⁩: مفيد جدًا لضعاف البصر؛ نوع من تطبيقات تركيب الكلام يُستخدم لإنشاء نسخة صوتية منطوقة من نص صفحة الويب.
• اتحاد ⁦W3C⁩: هيئة تعزز توحيد تصميم الويب، وخاصة ⁦HTML⁩.
• التأسيس: تم تأسيسه في عام 1994 من قبل الإنجليزي السير تيم بيرنرز-لي، وهو أيضًا مخترع شبكة الويب العالمية، ويهدف إلى ضمان إمكانية الوصول الشامل للويب.
• الإرشادات: ينتج ⁦W3C⁩ إرشادات وأدوات لتوحيد المواقع تُسهم في زيادة إمكانية الوصول، ويروّج لعرض المواقع على متصفحات ودقات متنوعة.
• التوافق مع ⁦HTML⁩: استخدام تقنيات أو اصطلاحات ترميز ⁦HTML⁩ قديمة يمنع الوصول إلى الموقع بشكل كامل.

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

ما فئات المنصات الثلاث التي يجب اختبار الموقع عبرها؟

الضغط والصور والصوت والفيديو

• الفائدة: باستخدام أنواع الملفات الأصغر حجمًا يستغرق الموقع وقت تنزيل أسرع، فيصبح أكثر سهولة في الاستخدام.
• التوازن: على مطور الموقع إصدار حكم لتحقيق التوازن بين الجودة وحجم الملف، لأنه كلما زادت الجودة زاد حجم الملف.
• نوعا ملفات الصور: الصورة النقطية والمتجه.
• gif: يحتوي على لوحة ألوان بحد أقصى 256 لونًا، ويُستخدم عندما لا تكون جودة الصور عالية جدًا وللصور التي لا تحتوي درجات ألوان كثيرة.
• jpeg: يحتوي على لوحة ألوان أكبر، فهو أفضل للصور الملونة عالية الجودة التي تتضمن الكثير من التظليل.

• الصوت الرقمي: تؤخذ عينات من الموجات الصوتية على فترات منتظمة بفجوات صغيرة جدًا لا تكتشفها الأذن البشرية.
• التحويل: الحاسوب يفهم 0 و1 فقط، فتُحوَّل قيمة كل جزء من الموجة إلى قيمة ثنائية، على سبيل المثال 0000، 0001، 0010، 0011.
• wav: معدل عينة مرتفع، فجودة الصوت الأقرب لما تنتجه الآلات الفعلية، لكن حجم الملف كبير نسبيًا.
• mp3: يميل إلى معدل عينة أقل فينتج حجم ملف أصغر، لكن هناك فقدان للجودة مقارنة بـ ⁦wav⁩، اعتمادًا على معدل الضغط المختار.
• معدل الضغط: كلما ارتفع قل حجم الملف، ولكن على حساب بعض الدقة.
• الفيديو والرسوم المتحركة: تؤثر بشكل خطير في سرعة تحميل الموقع، ويجب استخدامها باعتدال، وقد تنتج ملفات ذات أحجام كبيرة جدًا.