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

من الأصول إلى مجلد الموقع

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

لماذا نحتاج لغة تضيف إلى لغة الترميز؟

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

خطأ مطبعي في الكتاب: سطر الشوكولاتة ناقص، فالاسم مختصر وقوس الإغلاق ساقط قبل القوس المعقوف.

• ⁦VBScript⁩ و⁦JavaScript⁩: لغتا ويب من جانب العميل، يُنفَّذ الكود فيهما باستخدام حاسوب المستخدم وليس خادم الويب، فتتحرر قوة المعالجة على الخادم.
• التفاعل: كلتاهما تنشئ تفاعلًا على موقع، من قبيل النماذج والبحث وحتى الألعاب، لكنهما مختلفتان ولهما استخدامات مختلفة.
• VBScript: إصدار مبسط من ⁦Visual Basic⁩ طورته ⁦Microsoft⁩ للتعامل مع الطبيعة الثابتة للمواقع.
• عيبها: مدعومة في ⁦Internet Explorer⁩ فقط، بينما تقدم ⁦JavaScript⁩ دعمًا عبر الأنظمة الأساسية لمعظم المتصفحات.

استخدامات لغة البرمجة النصية: تنبيه وتأكيد وتمرير

• الاستخدامات: تستخدم لغة البرمجة النصية مثل ⁦JavaScript⁩ في استخدامات عديدة.
• التنبيهات: تتضمن بعض النوافذ المنبثقة لتنبيه المستخدم إلى شيء ما.

• تأكيد الاختيارات: شكل من أشكال التحقق من الصحة، يمنح المستخدم الفرصة للتحقق مما إذا كان قد نقر على الخيار الصحيح.

• اكتشاف المتصفح: يُستخدَم لتحديد المتصفح الذي تستخدمه.

• عمليات التمرير: تضيف مزيدًا من التفاعل المرئي، ويمكن لصفحة الويب استخدام صور التمرير أو الأزرار في هذه الحالة.

• التحقق من صحة الإدخال: أسلوب يستخدم لمعرفة ما إذا كان المستخدم قد أدخل نصًا داخل مربع نص.

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

البنى: الحلقات والقرارات والوظائف

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

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

ما البنى المختلفة في لغات البرمجة النصية؟

الهيكل أولًا ثم التفاعل

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

أوراق الأنماط: ثلاث طرق للكتابة

• CSS: تسمح لك لغة أوراق الأنماط المتتالية بإنشاء تخطيط ونمط قياسيين يمكن استخدامهما بسهولة في كل صفحة ويب في الموقع.
• الصيانة: بسبب التوحيد القياسي يسهل تعديل الموقع وصيانته؛ فتغيير لون خط جميع العناوين إلى الأخضر يتطلب في ⁦HTML⁩ تغيير كل منها على حدة، وفي ⁦CSS⁩ تغيير قيمة واحدة فقط.
• الفئة: يمكن تجميع عدد من عناصر ⁦HTML⁩ بحسب سماتها في فئة، ولتحديدها تكتب (.) متبوعًا باسم الفئة، مثل ⁦(.top)⁩.
• المعرّف: فريد ولا ينتمي إلا إلى عنصر واحد فقط في الصفحة، ولتحديده تكتب (#) متبوعًا باسم المعرف، مثل (#⁦para1⁩).
• ثلاث طرق: يمكن كتابة ⁦CSS⁩ في ⁦HTML⁩ بثلاث طرق: عنصر داخلي، ورأس الصفحة، وعنصر خارجي.

ما طرق كتابة ⁦CSS⁩ في ⁦HTML⁩ الثلاث؟

• العنصر الداخلي: يتم تعريف ⁦CSS⁩ في منطقة الكود نفسها مثل تلك التي سيتم تطبيقها عليها.

• رأس الصفحة: يتم تعريف ⁦CSS⁩ في القسم الرئيس لكل صفحة ويب ويُطبق في الموقع بكامله.

• العنصر الخارجي: يتم تعريف ⁦CSS⁩ في ملف منفصل، يمكن لجميع صفحات الويب الرجوع إليه، وهو ملف.⁦css⁩ وليس ملف.⁦html⁩.
• الارتباط: يظهر السطر الذي يمكن وضعه في رأس صفحة ⁦HTML⁩ للارتباط بصفحات ⁦CSS⁩ الخارجية في الشكل 6.12.

العلامات الشائعة وصفحة أنماط بسيطة

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

• وقفة للتفكير: في ⁦myCSS.css⁩، غير الخط إلى ⁦Wingdings⁩، ثم غير اللون إلى اللون الأزرق والحجم إلى 100 نقطة.
• ثم: احفظ صورة من الإنترنت وادرجها في ملف ⁦css⁩ الخاص بك، وطوّر الموقع الإلكتروني بحيث يكون له محاذاة مختلفة للمحتوى.

نموذج الصندوق: محتوى ومساحة وحد وهامش

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

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

إعلان نوع المستند وإطار الأنماط

• إعلان ⁦DOCTYPE⁩: يجب أن يكون أول شيء في مستند ⁦HTML⁩ الخاص بك، قبل علامة <html>، وهو ليس من علامات ⁦HTML⁩.
• دوره: تعليمات لمتصفح الويب حول إصدار ⁦HTML⁩ الذي كُتبت به الصفحة، فيجب دائمًا إضافته إلى مستندات ⁦HTML⁩ ليعرف المتصفح نوع المستند المتوقع.
• RAD: عند استخدام حزمة تطبيقات سريعة مثل ⁦Adobe Dreamweaver⁩ يوفره لك تلقائيًا، وعند البرمجة بمحرر نصوص ستضعه يدويًا.

الكتاب يعد هنا بسطر مثال لنوع المستند، لكنه غير موجود في نص الكتاب.

تصميم متجاوب وأدوات سريعة

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

تحميل الموقع ليراه الجمهور

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

راجع موقعك بعد أن تنتهي

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

هل تحققت متطلبات العميل؟

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

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

حدد نقاط القوة والتحسينات

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

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

ما طرق تحسين الموقع ليعمل بكفاءة أكبر؟

اختبار حقيقي بنتائج حقيقية

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

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

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

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

تمرين: صمم موقعًا لبلدية وطوره

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

ماذا يقول مطور مبتدئ؟

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

اختبر نفسك على نتاج التعلم

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