تصميم صفحات الانترنت

صفحات الإنترنت

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

مبادئ تصميم صفحات الإنترنت

يتّبع المصممون المحترفون عدداً من المبادئ والمعايير التي تجعل صفحة الإنترنت منسقة بشكل واضح، بحيث يسهل التعامل معها وتصفحها، ومصممة بشكل جميل حيث تجذب عدداً أكبر من المتصفحين، وهذه المبادئ هي:[٢]

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

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

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

طريقة إنشاء صفحات الإنترنت

تتطلّب عمليّة إنشاء صفحة إنترنت معرفة بلغة برمجة HTML، وعندها يمكن اتباع بعض الخطوات الآتية لعمل صفحة الإنترنت:[٣]

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

لغة البرمجة HTML

يستخدم المبرمجون لتصميم صفحات الإنترنت لغة البرمجة التي تسمّى لغة ترميز النصّ التشعبيّ (بالإنجليزيّة: Hypertext Markup Language) أو باختصارها الشهير HTML، وهي لغة تمّ تطويرها في التسعينات من القرن الماضي على يد (تيم بيرنرز)، وقد كان الهدف منها هو توفير وسيلة يتمّ عن طريقها تبادل المعلومات بين الباحثين. خضعت لغة HTML للكثير من التغييرات والتحسينات، بحيث أصبحت قابلة لتنسيق النصوص وإضافة الصور وغيرها، وهي الآن أهم لغة ترميز ثابتة أو ديناميكيّة لعرض محتوى صفحات الإنترنت.[٢]

عناصر صفحة الإنترنت

تختلف صفحات الإنترنت في تصاميمها ولكنّها تتشابه في العناصر الأساسيّة المكوّنة لها، حيث إنّ كلّ صفحات الإنترنت تمتلك هيكلاً يحتوي على:[٤]

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

المراجع

1. ↑ "Web Page Definition", www.techterms.com, Retrieved 24-6-2018. Edited.
2. ^ أ ب Lance Douglas Jackson (2009), Introduction to the Internet and Web Page Design, USA: Southern Utah University, Page 9،10،16،19،20،21،23،24. Edited.
3. ↑ "Create and View a Web Page on Your Computer", www.codecademy.com, Retrieved 24-6-2018. Edited.
4. ↑ Patrick J. Lynch,Sarah Horton، "Page Structure and Site Design"، www.webstyleguide.com, Retrieved 24-6-2018. Edited.