معلومات مقرر دراسي

المقرر الثاني يحتوي على ماهية مواقع الويب ، أنواعها و كيفية تصميمها .

جــــامعــــــــة حسيـبــــــة بــــن بـــــوعــلـــــي الشــــلــــــــــــف

UNIVERSITE DE HASSIBA BEN BOUALI CHLEF

كلــيـــــة العلوم الإنسانية و العلوم الاجتماعية

DEPARTEMENT de SCIENCES HUMAINES ET  SOCIALES

 

 

برنامج دروس النظرية و التطبيقية للسداسي الثاني

للسنة أولى ليسانس علوم إنسانية

للفترة الممتدة من 11 أفريل 2021 إلى غاية 9 ماي 2021

 

SPECIALITE : علوم إنسانية

ماهية مواقع الويب و كيفية تصميمها

 

من إعداد أستاذ الإعلام الآلي :

                          بغــــداوي محفـــــوظ

 

 

 

 

 

 

 

 

 

 

 

محتوى البرنامج:

1.   ماهية مواقع الويب

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

3.   أنواع مواقع الويب

4.   الخطوات السبع المتبعة لتصميم موقع ويب

5.   برامج التصميم و لغات التطوير

6.   ماهية الأنترنت و الإنترانت

7.   متصفح الويب

8.   محركات البحث

9.   إيواء موقع ويب

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1.    مواقع الويب (site Web)

         تعريف : الموقع الإلكتروني بالإنجليزية (WEB Site) هو عبارة عن موقع مركزي يضم عددا من صفحات الويب المرتبطة ببعضها البعض، و التي عادة ما يمكن الوصول إليها من خلال الصفحة الرئيسية (Home page) ، أما صفحة الويب فهي عبارة عن ملف مكتوب بلغة ترميز النص الفائق (HTML)، ويمكن أن يتضمن نصوصا و صورا بالإضافة إلى وصلات لصفحات أخرى .

           يمكن الوصول إلى صفحة الويب بواسطة متصفح الويب (Web Browser) عن طريق كتابة عنوانها فيه.

           تم بناء أول موقع إلكتروني عام 1991 في مختبر سيرن (CERN) على يد مخترع لغة الترميز النص الفائق تيم بيرنيرز لي (Tim Bernres-Lee) و يمكن الوصول إلى هذا الموقع حاليا من خلال الرابط (http://info.cern.ch) بشكل عام.

يتم إنشاء المواقع الإلكترونية الموجودة على شبكة الإنترنيت عادة من قبل الشركات أو الحكومات أو حتى الأفراد.

صورة 01

-صورة رقم (01) مخترع أول موقع cern –

 

                اخترع العالم البريطاني تيم بيرنرز لي شبكة الويب العالمية (WWW) في عام 1989 أثناء عمله في CERN. تم تصميم الويب وتطويره في الأصل لتلبية الطلب على تبادل المعلومات الآلي بين العلماء في الجامعات والمعاهد حول العالم.

مثال على الولوج في أول موقع ويب

-صورة رقم (02) كيفية الولوج إلى أول موقع –

الصفحة الموالية :

صورة رقم (03) تابع كيفية الولوج إلى بقية الصفحات –

أول شاشة للمتصفح www  وورد وايد ويب (World wide web)

صورة رقم (04) المتصفح وورد وايد ويب –

 

 

2.أنواع المواقع الالكترونية

1.2  من حيث البنية (البرمجة) : المـــواقــــع الثــــــابتــــــة

يمكن أن نقسم أنواع مواقع الإنترنت من حيث البنية (التصميم) إلى نوعين وهي كالتالي

المواقــــع الثـــابتـــة:

المواقع الثابتة هي مواقع يتم كتابتها عادة بـ HTML + CSS  وتتميز بكونها بسيطة وصغيرة من حيث كم المحتوى والبيانات المعروضة عليها، هذا النوع من المواقع كان الأكثر استهلاكا قديما لكونه يعتمد بالأساس على صفحات ثابتة (ساكنة)

المواقع المبنية على الصفحات الثابتة:

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

- صورة رقم (05) الفرق بين الموقع الثابت و الموقع الديناميكي –

 

 

2.2 المواقع الديناميكية 

              المواقع الديناميكية أو بما يسميها البعض المواقع التفاعلية هي مواقع مبنية أساسا بلغة برمجة كـ PHP، ASP، Ruby، Python، ويتم جلب المحتوى من خلال قاعدة بيانات أو ملفات أخرى، وهذا النوع من المواقع هو الأكثر استخداما في وقتنا الحالي، كما يمكن القول بأن أغلب المواقع على الإنترنت هي مواقع ديناميكية (تفاعلية).

المواقع المبنية على الصفحات الديناميكية:

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

3.2 امثلة على انواع المواقع الالكترونية

إليك انواع اهم المواقع الالكترونية من حيث نوع المحتوى الذي تقدمه :

المواقع الشخصية 

المواقع الشخصية غالبا ما تعبر عن المواقع الصغيرة الخاصة بالأشخاص التي يتم نشر أخبار أو صور أو مواد صوتية/مرئية عنهم، كمثال نذكر موقع الشيخ سعد الغامدي.

المدونات 

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

المنتديات 

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

المواقع الإخبارية

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

مواقع الوسائط المتعددة:

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

المواقع الاجتماعية

المواقع الاجتماعية هي الأكثر استخداما و التي تحظى بالنصيب الأكبر من عدد زيارات مستخدمي المواقع الالكترونية، نذكر كمثال فيسبوك وموقع واتساب

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

مواقع التجارية الالكترونية بشكل عام تهتم ببيع المنتجات كالملابس، الأجهزة الإلكترونية، المأكولات .. وغالبا تتم المعاملات المالية داخل الموقع نفسه، كمثال نذكر موقع eBay وموقع Gearbest.

المواقع الخدمية

المواقع الخدمية أو كما يسميها البعض مواقع الخدمات، تتميز هذه المواقع بكونها تلعب دور الوساطة بين البائع والمشتري أو تكون هي المسؤولة عن الخدمات التي تقدمها ، كمثال نذكر موقع خمسات وموقع مستقل.

مواقع الشركات

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

مواقع محركات البحث

مواقع محركات البحث ربما تكون هي المواقع التي تحتوي على أكبر قاعدة معلومات وبيانات مقارنة بأنواع المواقع الأخرى، كمثال نذكر Google و  Bing.

 

3.    عنوان الموقع الإلكتروني :

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

          يتمّ استخدام عنواين لتمثيل المواقع الإلكترونيّة الموجودة على شبكة الإنترنت،ويتكوَّن عنوان صفحة الويب عادةً من 5 مقاطع، يمكن تحديدها كالآتي:

1.    البروتوكول المُستَخدَم:

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

  اسم النطاق الفرعي (Subdomain):

          وفي هذا المقطع، يمكن وضع اسم نطاق فرعي للموقع نفسه، كما يمكن استبدال ذلك وكتابة عبارة (www)،التي تعني الشبكة العنكبوتيّة العالميّة، وهي غير مهمّة فيمكن تجاهلها وعدم وضعها ضمن العنوان.

 3- اسم النطاق ( Domain ):

الأوّل هو اسم الموقع كامِلاً، أمّا الأخير فهو صيغة نهاية اسم النطاق، فمثلاً: يُمثِّل (mokaay.com) اسم النطاق لموقع ” موقعي “،وتُمثِّل صيغة (com.) نطاق المستوى الأعلى له.

 4- اسم المُجلَّدات (بالإنجليزيّة: Directories):

على خادم الويب التي تحتوي صفحة الويب التي تتمّ زيارتها، ويتم الفصل بين مُجلَّد وآخر عن طريق شرطة أماميّة.

 5- اسم ملفّ الصفحة التي تتمّ زيارتها:

وينتهي اسم الملفّ بصيغة معيّنة تُمثِّل نوعه؛ فقد ينتهي الاسم بصيغة (php.)، أو (htm.)، أو (jpg.)، أو (jvs.) غير ذلك.

 

مثال على ذلك: نعطي مثال على عنوان موقع

 ما هو عنوان الـ URL؟ هو اختصار للكلمة الإنجليزيّة Uniform Resource Locator ومعناها باللغةِ العربيّة عنوان الإنترنت؛ فالشريط الموجود على المتصفّح للذهاب أو الدخول على موقع معيّن يضم //:http، فعلى سبيل المثال عنوان موقع موضوع http://www.mawdoo3.com فهو يضم التالي: البروتوكول: وهو بروتوكول الإنترنت ://http، ويكون بوابةِ الدخول (Port) رقمها 80.

 اسم الناطق Domain Name: وهو عنوان الصفحة أو الموقع. نوع امتداد الموقع: وهذه امتدادات تختلف من موقع إلى آخر، وأشهر الامتدادت هي (.com, .net, .edu, .gov, .org, .info)، وغيرها من الامتدادات، وهناك أيضاً امتدادات لكلّ دولةٍ في العالم تتكوّن من حرفين فقط. فبالتالي الـ URL هو عبارة عن ثلاثةِ أجزاء: البروتوكول، واسم الناطق، ونوع امتداد الموقع؛ فعندَ الدخولِ إلى المتصفّح مثل google chrome أو Mozilla Firefox يقوم بترجمةِ العنوان الـ Url وتغييرهِ إلى عنوان الـ IP الخاص بالموقع باستخدام البروتوكول الخاص في هذه العمليّة هو DNS، وإحضار جميع الملفّات من الـ Server وترجمةِ هذه الصفحات وقراءتها باللغةِ المتعارف عليها هي (HTML: Hyper Text Transfer Protocol)، وهذه هي اللغة المتعارف عليها عندَ إرسال صفحات الإنترنت.

 

 

4.   الخطوات 7 الرئيسية المتبعة في تصميم موقع ويب

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

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

 الأول.

لكن،كيف يجب أن تبدأ؟

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

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

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

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

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

ولكن كيف يمكن تجميع عناصر الموقع الالكتروني بشكل متناغم؟  

تتطلب عملية تصميم الموقع الالكتروني 7 مراحل كما يلي:

1.   التحليل: وهو الالتقاء مع العميل حول الأهداف التي يحتاج الموقع الى تحقيقها ، أي : ما هو الغرض الأساسي؟

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

·         لمن هو الموقع؟

·         ماذا يتوقع ان يقدم الموقع؟

·         هل الهدف الرئيسي من هذا الموقع هو الاعلام ، البيع ، الترفيه وغيرها؟

·         هل يحتاج هذا الموقع ان ينقل الرسالة الاساسية للعلامة التجارية ، أو جزء من استراتيجيات العلامة التجاريّة؟

·         ما هي مواقع المنافسين إن وجدت، وكيف يجب أن يكون هذا الموقع مختلف عن هؤلاء المنافسين؟

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

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

·         الجمهور.

·         موجز ابداعي.

·         تحليلات حول المنافسين.

·         سمة العلامات التجارية.

2.   تعريف النطاق – scope identification : بمجرد معرفة أهداف الموقع ، يمكنك معرفة نطاق المشروع. بمعنى ما هي الصفحات والمميزات التي يتطلبها الموقع لتحقيق الهدف والجدول الزمني لبناء ذلك.

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

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

3.    إنشاء مخطط للصفحات وعمل خريطة الموقع – Sitemap and wireframe creation: مع تحديد النطاق جيدا ، يمكننا البدء في تأسيس خريطة للموقع وتحديد كيفية ارتباط المحتوى والصفحات التي حددناها في تعريف النطاق.

 

 

 

 

نموذج تخطيطي لموقع ويب:

 

 

 

الهيكل التنظيمي  (Arborescence  ):

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

تعد عملية إنشاء موقع بدون خريطة بمثابة انشاء منزل من دون مخطط ، ومن النادر الشعور بذلك.

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

4.    إنشاء المحتوى – content creation : بعد أن بدت صورة الموقع واضحة بشكل أكبر ، يمكنك البدء في إنشاء محتوى الصفحات الفردية مع التركيز على تحسين محركات البحث والحفاظ على تركيز الصفحات لموضوع واحد، لذا لا بد من أن يكون لديك محتوى حقيقي للتعامل معه.

بعد وضع الإطار الرئيسي لموقعك على الانترنت ، يمكنك البدء بأكثر الجوانب أهمية وهو المحتوى المكتوب، ان الغرض الرئيسي من المحتوى ينقسم الى مسارين:

·         يعمل المحتوى على زيادة التفاعل والعمل:

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

·         تحسين محركات البحث SEO:

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

عليك ترتيب الكلمات المفتاحية الرئيسية التي تريد وضعها في علامة العنوان وان تكون أقرب للبداية، فالكلمات الرئيسية يجب أن تظهر في H1 ضمن لغة البرمجة HTML.

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

 

 

5.    العناصر المرئية – Visual elements : مع بنية الموقع والمحتوى الخاص به، يمكنك البدء في العمل على المحتوى المرئي

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

تعمل الصور في جعل الموقع اقل تعقيدا وايسر فهما وتعزز الرسالة في النص بحيث تصل الفكرة للعميل من دون حاجته لقراءة المحتوى.

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

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

6.              الاختبار – Testing: الآن لديك كل صفحات الموقع وأصبحت تعلم كيف يمكن أن تعرض لزوار الموقع ، لذا حان الوقت من التأكد أن كل شيء يعمل، والتأكد من عدم وجود مشكلات تعيق المستخدم.

يشمل إختبار الموقع ما يلي:

ü   الإختبار في المنتج ( Testing in Production )

ü   إختبار الواجهة (Interface Testing )

ü   إختبار قاعدة البيانات  ( Database Testing )

ü   إختبار الآداء ( Performance Testing )

ü   إختبار الأمان ( Security Testing )

ü   إختبار التوافق ( Compatibility Testing )

ü   إختبار قابلية الاستخدام ( Usability Testing )

ü   إختبار الوظيفة ( Functionality Testing ).

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

الق نظرة أيضا على العناوين والعناوين الفرعية للصفحات ، وعليك الانتباه على ترتيب الكلمات فهو يؤثر أيضا على أداء الصفحة في محرك البحث .

7.    انطلق! –  !Launch: (mise en ligne)بمجرد عمل كل شيء وبشكل جميل وجذّاب فقد حان وقت لتخطيط وتنفيذ عملية إطلاق موقعك، وضبط عملية الأتصال – أي متى ستنطلق وكيف ستخبر العالم بذلك؟

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

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

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

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

يعتبر مشروع تصميم المواقع الالكترونية من اكثر المشاريع متعة واثارة فهو قابل للتغيير والتعديل باستمرار ، ويعتمد هذا المشروع على الذوق الرفيع في التصميم .

 

 

 

 

 

 

 

 

 

 

 

 

5.               برامج التصميم و لغات التطوير(Programmes de conception et langages de développement)

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

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

أفضل برامج تصميم مواقع الويب في 2021

1.   برنامج ويبلي Weebly

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

الميزات:

 

·       يتضمن Weebly المئات من القوالب الرائعة المنظمة وفقًا للأنواع

·           أدلة مدمجة سهلة الإستخدام لتحسين محركات البحث

·           تتيح لك الأداة تغيير القالب بمجرد نشر الموقع.

·           هو يدعم خيارات السحب والإفلات لمواقع التجارة الإلكترونية.

 

2.   برنامج  Adobe Dreamweaver

Dreamweaver هو أحد برامج تصميم مواقع الويب.  WYSIWYG  يساعدك في إنشاء المواقع ونشرها وإدارتها. يمكن تحميل موقع ويب تم إنشاؤه باستخدام Dreamweaver إلى أي خادم ويب.

الميزات:

·       يمكن تطوير مواقع الويب الديناميكية بسرعة باستخدام Dreamweaver.

·       يوفر تخطيطات جاهزة لإنشاء موقع ويب.

·       يمكنك إنشاء موقع ويب يناسب أي حجم شاشة.

·       تساعدك هذه الأداة على تخصيص مساحة العمل بالطريقة التي تريدها.

·       يحتوي على مدقق HTML مدمج للتحقق من صحة التعليمات البرمجية الخاصة بك.

 

 

 

3.   وورد براس ( WordPress)

WordPress ، نظام إدارة محتوى، مفتوح المصدر ومجاني  مكتوب بلغة PHP. يمكّنك من إنشاء موقع ويب أو تطبيق أو مدونة. يتيح لك هذا التطبيق معاينة السمات دون تنشيط.

الميـزات:

·         توفر الأداة تصميم موقع يمكن تخصيصه بسهولة.

·         يساعدك على جعل بنية موقع الويب مناسبة لمحركات البحث.

·         يمكّنك نظام إدارة المحتوى هذا من تصميم مواقع يمكن عرضها على الهاتف المحمول.

·         تحتوي الأداة على أكثر من 55000 مكون إضافي.

·         WordPress قيد التطوير النشط ، ويتم إصدار تحديثاته بانتظام.

·         يحتوي على واجهة تثبيت بسيطة وعملية تثبيت سريعة.

ما يلي الواجهة الرئيسية لبرنامج تصميم مواقع الويب وورد يراس بعد تثبيته على جهاز الحاسوب

واجهة وورد براس ( WordPress ) أثناء عملية إعداد موقع ويب جديد

4.   سيتب بويلدار ( Sitebuilder ):

هو أداة أو برامج تصميم  مواقع الويب بسيط وسهل. يتيح لك إنشاء موقع ويب خاص بشركة صغيرة أو مدونة أو حتى موقع ويب للتجارة الإلكترونية. تحتوي الأداة على AI يمكّنك من تطوير موقع ويب دون كتابة رمز.

الميزات:

 

·    يمكّنك من تخصيص الخطوط والألوان والتخطيطات.

·    توفر الأداة أكثر من 1 مليون صورة مجانية.

·    يوفر أداة إنشاء مواقع ويب سهلة السحب والإفلات.

·    تم تحسين جميع قوالب أدوات SiteBuilder للأجهزة المحمولة والأجهزة اللوحية وأجهزة الكمبيوتر المكتبية.

 

 

·       يوفر الدردشة الحية والدعم عبر الهاتف للحصول على المساعدة الفنية ، حتى تتمكن من البدء بسرعة.

الواجهة الرئيسية لبرنامج سيتبويلدار ( Sitebuilder )

5.   Google Web Designer

Google Web Designer هي أداة تمكنك من إنشاء تصميم HTML-5 جذاب وتفاعلي. يوفر تكاملاً سلسًا مع منتجات Google مثل Google Drive والإعلانات.

الميزات:

·       يمكّنك من سحب المحتوى وإفلاته في مشروعك.

·       تدعم الأداة مجموعة من تنسيقات العرض والفيديو.

·       يمكنك تحرير HTML و CSS وجافا سكريبت بسهولة.

·       يسمح لك بالتبديل بين عرض التصميم وعرض الكود.

 

ما يلي الواجهة الرئيسية لبرنامج غوغل ويب ديزاينر لتصميم مواقع الويب

برامج أخرى لتصميم مواقع الويب

·       برنامج كانفا ( Canva )

·       برنامج ديفي ( Divi )

·       برنامج فوتوشوب (Adobe Photoshop )

·       برنامج ويكس ( Wix )

·       برنامج غاتور بويلدار (Gator Builder )

·       برنامج بريسطاشوب ( Prestashop )

·       برنامج بوتستراب (Bootstrap )

 

 

مثال تطبيقي على إعداد موقع ويب بلغة الترميز الفائق HTML5 .

عند تطبيق الكود السابق يظهر الشكل التالي :

 

 

 

 

 

 

الفرق بين الأنترنت و الإنترنت:

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

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

رسم توضيحي للفرق بين الأنترنت الإنترانت

 

محتويات الصفحة :

محتوى الويب بالإنجليزية: (((web content)‏ هو كل محتوى مرئي أو مسموع على أي موقع ويب و يشمل هذا الصور و الفيديو و النصوص و الملفات الصوتية.

وعليه ينحصر محتوى الصفحة أو الموقع في :

ü   نصوص مقروءة مرئية

ü   صور لتوضيح مفهوم المحتوى

ü   ملفات للتحميل و الإستعمال كملفات وورد أو بي دي آف

ü   فيديوهات للمشاهدة و التحميل

ü   روابط صفحات مرتبطة بذات الموضوع أو مواضيع أخرى

ü   عناوين مواقع أخرى

ü   تطبيقات للتحميل

ما يجب توفره للولوج إلى الأنترنت:

1.   وسائل تقنية: (Hard)

·         قواعد البيانات

·         محطات التخزين لقواعد المعطيات

·         المحول

·         السيرفيرات

·         خطوط الربط سواء سلكية أو لا سلكية

·         الحواسيب أو التواتف

2.   برامج حاسوبية: (Soft)

·       أنظمة التشغيل سواء للحواسيب أو الهواتف

·       متصفح الأنترنت

·       محركات البحث

 

ماهو متصفح الأنترنت:

المتصفح أو المستعرض أو المبحر بالإنجليزية:( Web browser)‏ هو تطبيق برمجي لاسترجاع المعلومات عبر الإنترنت وعرضها على المستخدم. كما يعرف أنه برمجية تطبيقية لاسترجاع مصادر المعلومات على الشبكة العالمية العنكبوتية. مصادر المعلومات يحددها معرف الموارد الموحد ومن الممكن أن تحتوي صفحة الوب على الفيديو والصور أو أي محتوى آخر. الروابط التشعبية الموجودة في المصادر تمكن المستخدم من التنقل بسهولة بين المصادر ذات الصلة.

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

·        مايكروسوفت إيدج (Microsoft Edge)،

·       وموزيلا فيرفكس (Mozilla Firefox)،

·       وجوجل كروم (Google Chrome)،

·       وأبل سفاري (Apple Safari)،

·        وأوبرا (Opera Browser).

·       فيفالدي (Vivaldi browser)

·       كروميوم (Crumium browser).

·       أنترنت إكسبلورار (internet explorer)

 

 

 

محركات البحث :

محرك البحث بالإنجليزية:( web search engine)‏ أو الباحوث هو برنامج حاسوبي مصمم للمساعدة في العثور على مستندات مخزنة على شبكات معلوماتيةالشبكة العنكبوتية العالمية (بالإنجليزية: World Wide Web)‏) أو على حاسوب شخصي، وتقدم نتائج البحث عادةً على شكل قائمة من النتائج يشار إليها عادةً بـ "صفحات نتائج محرك البحث"، مختصر إنجليزي: (SERPs)، قد تكون المعلومات المقدمة مزيجًا من صفحات ويب وصور وأي نوع آخر من الملفات، تنقب بعض المحركات عن البيانات المتوفرة في قواعد البيانات أو أدلة مواقع الويب، وعلى عكس أدلة المواقع التي يحافظ عليها من خلال محررين بشريين فقط، فإن محركات البحث تحافظ على المعلومات في الزمن الحقيقي من خلال تشغيل خوارزمية على زاحف الشبكة. بنيت محركات البحث الأولى اعتمادا على التقنيات المستعملة في إدارة المكتبات الكلاسيكية. حيث يتم بناء فهارس للمستندات تشكل قاعدة للبيانات تفيد في البحث عن أي معلومة.

محركات البحث الأكثر استخداما ونسبة السيطرة على محركات البحث في اوخر 2010:

·       قوقل (google)

·       ياهو (yahoo)

·       بينغ (bing)

·       بايدو (baydoo).

الإيواء : (l’ébergement)

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

 

المراجع :

1.    https://esofttag.com/wiki/7-steps-to-create-a-web-design-project/

2.    https://computergii.com/best-web-design-software//

3.    https://www.digitom.fr/comment-gerer-son-site-web-avec-wordpress/

4.    https://mawdoo3.com/

5.    https://ar.fondoperlaterra.org/comdifference-between-internet-and-intranet-35