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

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

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

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

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

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

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

1. يستحيل أن تعمل بمفردك في مجال تكنولوجيا المعلومات. إذ تُنشأ معظم المواقع الإلكترونية من قبل فرق، يُكلّف فيها أشخاص مختلفون بعناصر مختلفة من التصميم والتطوير.
2. على سبيل المثال، قد يكون لديك مصمم جرافيك يعمل على الصور، ومختبر برامج، ومبرمج مواقع إلكترونية، ومصمم، وما إلى ذلك.
3. ومع وجود الكثير من الأشخاص يعملون في المشروع نفسه، يصير من الأهمية بمكان أن يتعلموا العمل كفريق وأن يدعم بعضهم بعضًا.
4. وإن كنت لا تجيد العمل ضمن فريق ولا تتواصلون جيدًا مع بعضكم بعضًا، فمن المحتمل عدم تلبية الموقع الإلكتروني الذي تعدونه متطلبات العميل أو عدم تسليمه في الوقت المحدد.

سيحتاج العميل إلى فهم الموقع الإلكتروني، فالقيود هي الحدود التي يمكن أن يفرضها موقع إلكتروني. وغالبًا ما تتضمن القيود النموذجية للمواقع الإلكترونية:

• المال
• الجداول الزمنية
• تدريب الموظفين
• مستويات الأمان
• عقود الدعم والصيانة.

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

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

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

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

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

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

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

قبل البدء في التصميم، فكر في بعض المواقع الإلكترونية التي أُنشئت بشكل احترافي لمعرفة مواطن جودتها. كيف طبقت مبادئ تصميم الموقع الإلكتروني؟ تذكر أن تصميم الموقع الإلكتروني لا يتعلق فقط بمظهر الموقع الإلكتروني.

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

لنقل مفهوم الموقع الإلكتروني، يمكنك استخدام واحدة أو أكثر من الأدوات الآتية:

1. الهدف من لوحة الإلهام هو إنتاج شيء بالسمات نفسها مثل الموقع الإلكتروني (انظر الشكل 6.3). وهي طريقة مفيدة لتركيز التصميم وإظهار الأفكار الأولية للعميل.
2. فكر في لوحة الإلهام على أنها كراسة رسم حيث يمكنك تجميع مختلف المخططات والخطوط والأعمال الفنية والأعمال الفنية ونماذج التخطيطات وما إلى ذلك.
3. ويمكن عرض لوحة الإلهام على العميل والذي يستطيع حينئذ تحديد العناصر التي يحبها والتي لا يحبها فيها.
4. ويمكن أن تساعد ملاحظاتهم وتعديلاتهم على لوحة الإلهام بعد ذلك في تركيز مطور الموقع الإلكتروني على الشكل والمظهر الذي يجب أن يبدو عليه الموقع الإلكتروني.

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

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

• عشرة من متطلبات SMART
• عشرة متطلبات لا تندرج ضمن SMART.

تلميح: تعاون مع زميل وقارنا متطلباتكما واعملا معًا لمعرفة مدى صوابها. توسيع الأفق: ما رأيك في الآثار المترتبة على تصميم وتطوير الموقع الإلكتروني إذا لم تحكمه متطلبات SMART؟

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

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

وتمثل كيفية ربطها معًا.

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

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

فكر في مشهد من الفيلم السينما أو فيلم الرسوم المتحركة المفضل لديك. وأنشئ لوحة عمل لإظهار ما يحدث. استخدم ما لا يقل عن عشرة مربعات وبحد أقصى 20 مربعًا. أضف أي ملاحظات أسفل كل مربع لشرح ما يحدث.

تلميح: تُرسم معظم لوحات العمل على الورق. ويمكنك استخدام حزم مايكروسوفت أوفيس (Microsoft Office) مثل وورد (Word) وبوربوينت (PowerPoint) لتطوير لوحات العمل باستخدام شريط "إدراج ميزة". توسيع الأفق: أضف لونًا إلى لوحة العمل الخاصة بك لإظهار التباين ولإعطاء لوحة العمل الخاصة بك تمثيلاً أكثر واقعية.

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

1. باستخدام حاسوب مكتبي، انتقل إلى موقع بيرسون آسيا Pearson Asia على الويب (www.pearson.com/asia) للتوافق مع لقطات الشاشة وملاحظة التصميم (انظر الشكل 6.6).
2. الآن، باستخدام هاتفك الذكي أو جهازك اللوحي، انتقل إلى موقع Pearson Asia مرة أخرى وقارنه بموقعك (انظر الشكل 6.7).
3. هل يمكنك رؤية الفرق؟ لاحظ كيف يبدو الموقعان مختلفين على الرغم من كونهما متماثلين على الرغم من أجل راحة المستخدم والتوافق.
4. ناقش في فصلك، أوجه اختلاف هذا التصميم وأسبابها.

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

1. يساعد الكود الزائف (Pseudocode) المبرمجين على تطوير الخوارزميات من خلال تشكيل خطوة وسيطة بين الشرح باللغة الإنجليزية (أو لغة طبيعية أخرى) ولغة الترميز.
2. وباستخدام الكود الزائف، يمكن للمصمم تخطيط ما ستفعله الشفرة، دون الحاجة إلى القلق بشأن استخدام الكلمات وبُنى الجملة الصحيحة.

الجدول 6.2 نموذج لكود زائف ومكافئه بلغة جافا-سكريبت

1. المخططات الانسيابية هي مخططات يستخدمها مطورو البرامج لتمثيل حل لمشكلة معينة.
2. تتضمن المخططات الانسيابية مربعات من أنواع مختلفة، تُستخدم لتمثيل أشياء مختلفة، وأسهم توضح كيفية ارتباط المربعات ببعضها البعض (انظر الجدول 6.3 والشكل 6.8).

الجدول 6.3 رموز المخطط الانسيابي لجمعية الحاسوب البريطانية (BCS) مع الأوصاف

القرارات هي في الأساس عبارات شرطية. لذلك، سيكون هناك دائمًا ما لا يقل عن سهمين قادمين من قرار (ماسة)، كل منهما يمثل قرارًا، مثل (نعم) أو (لا).

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

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

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

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

1. تعد مرحلة تلقي التعقيبات أيضًا فرصة لتحديد أي قيود تقنية وتصميمية. إذ بتحديدها في هذه المرحلة، ستتمكن من التوصل إلى حلول بديلة للتغلب على أي قيود، قبل فوات الأوان لفعل أي شيء حيالها.
2. بالإضافة إلى ذلك، فإن عملية تطوير الموقع الإلكتروني تتطلب المضي قدمًا في التطوير، ليس مرة واحدة فقط ولكن بشكل متكرر حتى يصبح التصميم صحيحًا (مع مراعاة قيود الوقت والتكلفة بالطبع).

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

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

• ما أكثر شيء استمتعت به في الموقع؟
• كيف يمكننا تحسين تجربتك على الموقع الإلكتروني؟
• هل لديك أي تعقيبات حول الموقع الإلكتروني تعتقد أننا يجب أن نكون على علم بها؟

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

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

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

العناصر التي تحدث داخل الاختبار هي:

• رقم الاختبار
• الغرض من الاختبار
• بيانات إضافية عن الاختبار، على سبيل المثال صفحة الويب
• بيانات الاختبار
• النتائج المتوقعة

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

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

اصنع سلسلة من عشرة اختبارات يمكن استخدامها لاختبار وظائف الأمامية للموقع الإلكتروني الذي تختاره.

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

القيود هي الحدود أو العوائق التي قد تزيد من صعوبة تصميم موقع إلكتروني وتطويره. وقد تحد أيضًا من نطاق أو تعقيد الموقع الإلكتروني الذي تصممه. تميل القيود إلى أن تندرج في فئتين: القيود التقنية والقيود التصميمية. بعض القيود المحتملة موضحة هنا. الوحدة 6 | تطوير المواقع الإلكترونية | نتاج التعلم (ب)

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

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

تطبيق النظرية

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

1. اكتب قائمة بالأهداف المعقولة التي يمكن منحها مواعيد نهائية محددة لعملية تصميم الموقع الإلكتروني وتطويره، أي المراحل الرئيسة في التصميم والتطوير.
2. بمجرد حصولك على قائمة المراحل الرئيسة هذه، خصص مددًا زمنية لإنجاز كل مرحلة من هذه المراحل.
3. ضع كل مرحلة في جدول زمني، باستخدام مقدار الوقت المخصص لكل مرحلة، لتحديد التواريخ التي يجب إنجازها فيها (باستخدام تاريخ انتهاء من اختيارك).
4. اكتب قائمة بالعوامل التي قد تؤثر في قدرتك على إنجاز المراحل في الوقت المحدد، مثل المرض.

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

بحث

تقصّ الاعتبارات القانونية والأخلاقية التي تؤثر في بلدك أو منطقتك من حيث الملكية الفكرية وحماية البيانات الشخصية.

الوحدة 6 | تطوير المواقع الإلكترونية | نتاج التعلم (ب)

وقفة للتفكير

فكر في موقع إلكتروني تعرفه، مثل الموقع الإلكتروني لمدرستك أو كليتك. كيف تؤثر القوانين المدرجة في محتوى الموقع وتشغيله؟

• تلميح: فكر في العمل مع أحد الزملاء في مجموعتك لتبادل الأفكار والتعاون فيها.
• توسيع الأفق: فكر في ما سيحدث إذا لم يلتزم موقع مدرستك أو كليتك بهذه القوانين. ماذا ستكون العواقب؟

بعد الموافقة على التصميمات المناسبة واستكمالها، يجب استكشاف أدوات وتقنيات مختلفة للتطوير من أجل تلبية متطلبات العميل.

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

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

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

تُستخدم النماذج في تطوير المواقع الإلكترونية لجمع مدخلات المستخدم. وثمة طرق مختلفة لجمع مدخلات المستخدم باستخدام النماذج.

• حقل النص - يحدد هذا حقل سطر واحد لإدخال النص.

``html <form> Please enter your first name:<br> <input type="text" name="firstname"> <br> Please enter your age:<br> <input type="text" name="age"> </form> ``

المهارات

المهارات المعرفية/العمليات والإستراتيجيات المعرفية:

• التحليل
• اتخاذ القرار
• التعلم التكيفي

موضوعات ذات صلة

للحصول على مقدمة لعناصر وعلامات HTML5، راجع قسم مقدمة HTML5 على موقع W3C (www.w3schools.com).

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

``html <form> <textarea name="textarea"> Please enter your text here</textarea> </form> ``

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

``html <form action="test_page.php"> Where were you born?:<br> <input type="text" name="birthplace"> <br> Where do you currently live?:<br> <input type="text" name="livingplace"> <input type="submit" value="submit"> </form> ``

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

``html <form> Are you sure? <input type="radio" name="validation" value="yes" checked>YES <br> <input type="radio" name="validation" value="no">NO </form> ``

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

``html <form> I own the following:<br> <input type="checkbox" name="games">Playstation<br> <input type="checkbox" name="games">XBox<br> </form> ``

التنقل هو طريقة للارتحال عبر صفحة الويب للعثور على ما تحتاج إليه. في البداية، اقتصرت شبكة الويب العالمية على استخدام الارتباطات التشعبية فقط. ومع ذلك، مع تقدم الوقت والتكنولوجيا، طُوّرت طرق جديدة لتصفح الموقع الإلكتروني.

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

• الارتباطات التشعبية - هي الروابط التي تنقلك إلى جزء معين من الموقع الإلكتروني (رابط داخلي) أو موقع إلكتروني آخر (رابط خارجي) عند النقر عليها. يمكن أن تكون الارتباطات التشعبية عبارة عن نص أو صور أو أزرار.

  الوحدة 6 | تطوير المواقع الإلكترونية | نتاج التعلم (ب)

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

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

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

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

ما المكونات المتضمنة في البرمجة النصية من جانب الخادم؟ ابحث وقارن بين "PHP" و "ASP". ما الذي تعتقد أنه الأنسب للمعالجة من جانب الخادم؟

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

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

مناقشة

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

1. من الممارسات الجيدة استخدام التخطيط والتصميم نفسيهما في الموقع الإلكتروني بكامله. تُستخدم لغة أوراق الأنماط المتتالية (CSS) لضمان التنسيق القياسي عبر الموقع الإلكتروني، على سبيل المثال لون الخلفية والصور وتنسيق النص والحدود.
2. وتنطبق القاعدة نفسها على أنماط العناوين وموضع العناصر والمساحة المتروكة (المسافة داخل الحدود بين الصورة أو الخلية). تسمح لك CSS بإنشاء تخطيط ونمط قياسيين يمكن تطبيقهما بسهولة عبر جميع صفحات الويب داخل موقع إلكتروني.
3. وهي متتالية من حيث أنه عندما تقوم بإجراء تغيير في مكان واحد داخل موقع إلكتروني، سيتم نقل هذا التغيير والحفاظ عليه أسهل بكثير.
4. على سبيل المثال، في HTML، كان تغيير لون الخط لجميع العناوين في الموقع الإلكتروني يتطلب تغيير كل منها على حدة. ولكن الآن، باستخدام HTML5 وCSS، يكفي تغيير قيمة واحدة فقط، وسيطبق التغيير على الفور في الموقع الإلكتروني بكامله لكل عنوان.

يمكن استخدام لغة CSS لتغيير تخطيط وتنسيق أي صفحة ويب. يرد في ما يأتي بعض الأمثلة لمئات الخصائص التي يمكن تغييرها باستخدام الطريقة الخارجية لتطبيق CSS:

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

``html Body { Background-color:yellow; } ``

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

``html Body { Background-image: url('picture.jpg'); } ``

• تنسيق النص:

``html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>How to format text using CSS</h1> </body> </html> ``

``html H1 { Font-family:serif; Font-style: italic; Font-weight: bold; Font-size: 50px; color:red; } ``

تستخدم هذه الخصائص طريقة العنوان لتطبيق CSS.

• وضع الحدود:

``html <!DOCTYPE html> <html> <head> <style> p.border1 { border-style: groove; border-width: 5px; } p.border2 { border-style: double solid; border-width: medium; } </style> </head> <body> <h1>How to apply borders</h1> <p class="border1">Example of Border1</p> <p class="border2">Example of Border2</p> </body> </html> ``

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

``html <!DOCTYPE html> <html> <head> <style> td { padding: 15px; } </style> </head> <body> <h1>Table Padding</h1> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Sex</th> </tr> <tr> <td>Michelle</td> <td>Rowden</td> <td>Female</td> </tr> <tr> <td>Michael</td> <td>Bean</td> <td>Male</td> </tr> <tr> <td>Kelvin</td> <td>Andrew</td> <td>Male</td> </tr> </table> </body> </html> ``

لمزيد من المعلومات حول كيفية تطبيق CSS على صفحات الويب، راجع قسم استخدام أوراق الأنماط المتتالية، صفحة 26.

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

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

اتحاد شبكة الويب العالمية (W3C) هو هيئة تعزز توحيد تصميم الويب، وخاصة HTML. تم تأسيسه في عام 1994 من قبل الإنجليزي السير تيم بيرنرز-لي، وهو أيضًا مخترع شبكة الويب العالمية. يهدف الاتحاد إلى ضمان إمكانية الوصول الشامل للويب. فعلى سبيل المثال، يروّج الاتحاد للحاجة إلى أن تُعرض جميع المواقع الإلكترونية على مجموعة متنوعة من المتصفحات والدقات بحيث تكون قابلة للاستخدام من قبل الأشخاص ذوي الاحتياجات الخاصة. ينتج W3C إرشادات وأدوات لتوحيد المواقع الإلكترونية التي تُسهم في زيادة إمكانية الوصول. ويلعب التوافق مع HTML عاملاً مهمًا في هذا لأنه إذا استخدمنا تقنيات أو اصطلاحات ترميز HTML قديمة، فهذا الأمر يمنع الموقع الإلكتروني من الوصول إليه بشكل كامل.

لمزيد من المعلومات بشأن اتحاد W3C ومبادرة تيسير الوصول إلى الويب الخاصة به، تفضل بزيارة موقعه الإلكتروني: www.w3.org

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

• متصفحات الويب
• أنظمة التشغيل
• الأجهزة المحمولة.

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

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