المواقع الإلكترونية

أول موقع على الشبكة: من أين بدأ كل شيء؟

فما هو الموقع الإلكتروني؟ وما هي أنواع هذه المواقع؟ وكيف يمكننا تصميم موقع إلكتروني بأسس وخطوات سليمة؟

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

الإنترنت: من يخدم ومن يتصفح؟

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

الموقع: صفحات ترتبط بروابط

• الصفحات: تمكّن الوصلات التشعبية المستخدم ⁦(Client)⁩ من تصفح المواقع وعرضها، وتحتوي ملفات نصية وصوتية وفيديو وصور.
• التخزين: تكون المواقع مخزنة على جهاز حاسوب يسمّى خادم الويب ⁦(Web Server)⁩.
• لغات الكتابة: تكون المواقع مكتوبة بلغة برمجة معينة مثل: ⁦Html⁩، ⁦PHP⁩، ⁦ASP.Net⁩.

اسم الموقع: حصري وله ملحق

• عنوان الموقع: اسم حصري وفريد، لا يمكن أن يكون مكرراً، ويتكوّن من مقطعين.
• المقطع الأول: يعبّر عن المجال (اسم الموقع)، ويتكوّن من حروف وأرقام فقط.
• المقطع الثاني (الملحق): يتكون من نوع الموقع واسم الدولة، وغالباً ما يدل على اسم الدولة.

• Com: للمواقع التجارية.
• Org: لمواقع المنظمات.
• Net: لمواقع الشبكات.
• Gov: للمواقع الحكومية.
• Edu: للمواقع التعليمية.

ماذا يحدث بعد كتابة العنوان؟

1. فتح أحد برامج تصفّح الإنترنت.
2. كتابة عنوان الموقع الإلكتروني في المكان المخصّص (شريط العنوان) في برنامج المتصفح، ثم الضغط على مفتاح الإدخال ⁦(Enter)⁩.
3. يقوم الجهاز بإرسال رسالة إلى خادم خاص يسمى ⁦(DNS)⁩، لتحديد رقم الخادم الذي يحتوي على ذلك الموقع، ويستخدم هذا الرقم لإيصال طلب إلى الخادم.
4. عندما يكون العنوان صحيحاً، يحدث اتصال بين جهاز المستخدم والخادم بواسطة بروتوكول الاتصال ⁦TCP/IP⁩.

5. عند حدوث الاتصال، يبدأ بروتوكول خاص يسمّى ⁦(HTTP)⁩ بنقل الصفحة الرئيسة للموقع بكل محتوياتها من الخادم إلى الزبون.
6. عندما تصل هذه المعلومات إلى جهاز المستخدم، تُخزّن في مجلد مؤقت على القرص الصلب، ثم يتم عرضها داخل المتصفح.
7. يستطيع المستخدم التنقل من الصفحة الرئيسة إلى صفحات أخرى على الموقع، باستخدام الوصلات التشعبية الموزعة داخل الصفحة.

• يقوم ⁦DNS⁩ بتحويل العنوان المدخل إلى عنوان رقمي، يمثل رقم الخادم المراد الاتصال به على الشبكة.
• HTTP: Hyper Text Transfer Protocol

ساكن أم تفاعلي؟ نوعا المواقع

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

• المواقع التفاعلية: لها نظام خاص بإدارة محتواها يسمى (نظام إدارة المحتوى) ⁦(Content Management System)⁩.

الموقع الجيد: ما الذي نراعيه؟

تمتاز المواقع الإلكترونية بالوضوح والفاعلية، ويكون مصمّمها على علم تام بمواصفات الموقع الإلكتروني الجيد، لتحقيق الأهداف التي من أجلها صمّم هذا الموقع.

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

تصميم موقع شخصي: طرق وخطوات

• لغات البرمجة: مثل: ⁦PHP⁩، ⁦ASP.Net⁩.
• مواقع متخصصة بالتصميم: مثل: ⁦ar.site123.com⁩، ⁦Websity.me⁩.
• البرمجيات: مثل: ⁦Web Page Maker⁩، ⁦FrontPage⁩، ⁦Dreamweaver⁩.

وما الخطوات المتسلسلة لتصميم الموقع بشكل صحيح؟

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

تحليل الموقع وتخطيطه قبل التصميم

• تنزيل برنامج ⁦Web Page Maker⁩ من الإنترنت وتشغيله.

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

التصميم العام: ترويسة وصفحات وأزرار

• المجلد: إنشاء مجلد على سطح المكتب وتسميته باسم معين، لتخزين محتويات الموقع فيه.
• موقع جديد: بعد تشغيل البرنامج، من خلال الأمر ⁦New Site⁩ في قائمة ملف ⁦(File)⁩.

• نسخ الصفحة: بالنقر على الأمر ⁦Clone Page⁩ من قائمة صفحة ⁦(Page)⁩، بعد تحديد الصفحة التي تم تصميمها بالنقر على اسمها ⁦(Index)⁩.

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

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

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

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

كيف ننتقل من صفحة إلى أخرى؟

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

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

إضافة المحتوى ثم النشر

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

• تحديد المطلوب ربطه، ثم النقر على ارتباط تشعبي ⁦Hyperlink⁩ أعلى الشاشة.
• الشكل الآتي يوضح جميع الخطوات:

• النشر: لنشر الموقع نتبع الخطوات الآتية.
• النقر على الأمر ⁦Publish⁩ من قائمة ⁦File⁩.
• الاطلاع على النافذة التي تظهر وما تتضمنه، ومن ثم تحديد مجلد الموقع للنشر فيه.

إدارة الموقع: نظام إدارة المحتوى

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

أسئلة الدرس: اختبر نفسك

ما الفرق بين جهاز الخادم وجهاز الزبون في هيكلية شبكة الإنترنت؟