نتاج التعلم أ: فهم مبادئ تطوير المواقع الإلكترونية

من أفكار العلماء إلى أسلوب حياة

لقد تغيرت المواقع الإلكترونية بشكل كبير على مر السنين.

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

المستخدم يشارك ولا يقرأ فقط

• في ما مضى: كانت المواقع تُستخدم لتوفير المعلومات.
• Web 2.0: تقنية قائمة على المحتوى طُوّرت لتمكين المستخدمين من التفاعل وإضافة محتواهم ومعارفهم وآرائهم.

• من يدون: يمكن لأي شخص أن يصبح مدونًا وينشئ مدونة، ومعظمها عامة (على الرغم من وجود بعض المدونات الخاصة).

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

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

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

أنواع الخدمات التي يقدمها الويب

خمسة متطلبات أساسية لكل موقع

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

ما المتطلبات الأساسية لجميع المواقع الإلكترونية؟

لماذا نلتزم بمبادئ التصميم؟

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

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

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

تسعة مبادئ لموقع واضح وسهل

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

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

ما أنواع مجموعات الخطوط الرئيسة؟

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

ما فرق خط ⁦serif⁩ عن ⁦sans serif⁩؟

• اتحاد الويب: يلتزم اتحاد شبكة الويب العالمية بضمان تيسير الوصول إلى الويب للجميع، بصرف النظر عن إعاقتهم ⁦(www.w3.org)⁩.

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

وسائط تجذب الانتباه بشروط

• الوظيفة: تُستخدم داخل المواقع لجذب المستخدمين وحثهم على التفاعل.
• الوسائط: مقاطع الفيديو والصوت والمحتوى التفاعلي.
• الكائنات: التطبيقات المصغرة وملفات بي دي إف ⁦(PDF)⁩ وفلاش ⁦(Flash)⁩ في صفحات الويب.

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

كن مبدعًا من دون أن تخرق القواعد

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

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

النسبة الذهبية: قاعدة رياضية للجمال

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

• القيمة: تنتج النسبة الذهبية من معادلة رياضية بسيطة تنتج رقمًا خاصًا يساوي 1.618 (أو 1.62 مقربًا إلى رقمين معنويين).
• القسمة: يتم العثور على هذا الرقم بتقسيم خط إلى قسمين بحيث يكون القسم الأطول مقسومًا على القسم الأصغر مساويًا للطول الكامل مقسومًا على الجزء الأطول: $a/b = (a+b)/a$.
• على سبيل المثال: $31/24 = (31+24)/31$.
• في تصميم الويب: يُطبَّق الرقم 1.62 لتعيين عرض المحتوى الرئيس وأعمدة الشريط الجانبي.
• الرمز: تُرمز لها غالبًا بالحرف ⁦(Φ)⁩، نسبةً إلى الحرف الحادي والعشرين من الأبجدية اليونانية.

كيف يظهر موقعك أول النتائج؟

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

لماذا يهم تحسين محركات البحث الشركات؟

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

• العلامات الوصفية: تُضمَّن في ترميز الصفحة، في قسم <head>، لتزويد محركات البحث بمعلومات عن الموقع.
• لا تُعرض: لا يُعرض نصها في الصفحة، بل يخبر محركات البحث بمعلومات محددة عنها.
• العناوين: من المنطقي أن تكون هي نفسها عناوين صفحات الويب المسماة بطريقة معقولة، لتخبر الناس بغرض موقعك.

• <head>: علامة ⁦HTML⁩ تُستخدم لتوفير بيانات حول مستند ⁦HTML (⁩صفحة ويب).

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

لماذا يبطئ موقع أو ينهار؟

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

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

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

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

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

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

ما العوامل التي تؤثر في الأداء من جانب العميل؟

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

تمرين: قارن موقعين وقيّمهما