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

*****

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

مواقع الإنترنت


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

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


ثانيا: أهمية مواقع الإنترنت

    ساعد النمو المتواصل خلال السنوات الماضية لمستخدمي الإنترنت خاصة في العالم العربي، بالإضافة الى زيادة الطلب على الخدمات المتزايدة التي تقدمها المواقع الإلكترونية، مع المنافسة الشديدة فيما بينها لتقديم كل ماهو جديد على صفحاتها، ساعد كل ما سبق وغيره إلى زيادة أهمية المواقع الإلكترونية وزيادة الحاجة الماسة إليها والذي يتلخص أهمها في الاّتي :
1- المواقع الإلكترونية مصدر هام للمعلومات والبيانات المختلفة سواء كانت هذه المعلومات بغرض البحث أو التعليم أوالتثقيف أو غيره .
2- ساعدت على توفير الكثير من وسائل التسلية والترفيه .
3- البحث عن وظائف سواء في شركات أو مؤسسات أو العمل على الإنترنت.
4- التواصل والتعارف وتبادل الثقافات كما في مواقع التواصل الإجتماعي وغيرها .
5-تلبية الكثير من رغبات مستخدمي الإنترنت في البحث عن كل ماهو جديد فيها لتطوير قدراتهم خاصة في مجال أعمالهم، بالإضافة إلى المجالات الأخرى الراغبين في تعلمها ، كل ذلك يتم ودون تكاليف تذكر .
6- المواقع الإلكترونية سوق كبير يستطيع مستخدمي الإنترنت شراء الكثير من إحتياجاتهم من خلاله وكذلك بيع مالديهم من سلع او خدمات.


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

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

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

وفيما يأتي سيتم استعراض الإعتبارات أو الأسس أو المعايير التي سيتم تصنيف المواقع على أساسها وأنواع المواقع التي تقع تحت كل معيار أو قسم كما يأتي:


1-انواع المواقع الإلكترونية وفقا للجهة التي تمتلكها

    تتنوع المواقع الإلكترونية وفقا للجهة التي تمتلك هذه المواقع وتصنف المواقع وفقا للجهة التي تمتلكها الى صنفين من المواقع، الأول هي المواقع التي يمتلكها افراد، أما الصنف الثاني فهو المواقع التي تمتلكها شركات أو مؤسسات او مجموعات من الأفراد وذلك كالاّتي:

1.1-مواقع يمتلكها افراد:

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

2.1-مواقع يمتلكها اكثر من فرد:

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


2-انواع المواقع الإلكترونية وفقا لنوعية محتواها

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

1.2-مواقع تقدم محتوى عيني:

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

2.2-مواقع تقدم محتوى غير عيني:

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


3-انواع المواقع الإلكترونية وفقا للغات البرمجة المستخدمة

    تختلف المواقع الإلكترونية عن بعضها البعض من حيث لغات البرمجة والتي أهمها HTML، CSS، PHP، JS المستخدمة في بنائها أو عملها ، ووفقا للغات البرمجة المستخدمة في بناء المواقع الإلكترونية فإنه يمكن تصنيف هذه المواقع الى نوعين أساسيين من المواقع هي المواقع الثابتة والمواقع الديناميكية كما يلي:

1.3-المواقع الثابتة (Static Websites):

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

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

2.3-المواقع الديناميكية(Dynamic Websites):

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


4-انواع المواقع الإلكترونية وفقا لنشاطها

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

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

أهم طرق إنشاء موقع إلكتروني

*****

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

أهم طرق إنشاء موقع إلكتروني


اولا: أهمية معرفة طرق انشاء موقع إلكتروني

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

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


ثانيا: طرق انشاء موقع الكتروني

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

وتختلف الطرق التي يتم الإعتماد عليها في إنشاء المواقع الإلكترونية فيما بينها في أسلوبها او الخطوات المتبعة فيها لإنشاء المواقع، إلا أنها تتفق في أنها تستخدم لغات البرمجة خاصة لغة (HTML) ولغة (CSS)، بالإضافة الى لغات البرمجة الأخرى التي تعطي الموقع الإلكتروني الديناميكية المطلوبة مثل لغات (PHP) ، الجافا سكريبت (Javascript) ، والجي كويري (jQuery) وغيرها .

وتتمثل اهم طرق إنشاء المواقع الإلكترونية في الاّتي :

الطريقة الأولى:

انشاء المواقع الإلكترونية من البداية اي من الصفر.

الطريقة الثانية:

إنشاء المواقع بالإعتماد على انظمة ادارة المحتوى .

الطريقة الثالثة:

إنشاء المواقع بالإعتماد على المواقع المشهورة المنشئة للمواقع .

الطريقة الرابعة:

انشاء المواقع الإلكترونية عبر منصات انشاء المواقع .

وفيما يلي سيتم القيام بشرح مبسط لكل طريقة على حدة وذلك كالاّتي:


1- انشاء موقع الكتروني من البداية

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

ويحتاج إستخدام هذه الطريقة لعمل موقع الكتروني الى معرفة جيدة ممن يقوم بتصميم هذا النوع من المواقع سواء كان صاحب الموقع أو من شركات متخصصة في تصميم المواقع بلغات البرمجة مثل ( HTML)، (CSS)، (JavaScript)، (PHP)، (Python)، (jQuery)... الخ .

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


2- إنشاء موقع إلكتروني بإستخدام نظام إدارة المحتوى (CMS)

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

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

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

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


3- إنشاء موقع إلكتروني بإستخدام المواقع المنشئة للويب

المواقع المنشئة للويب (Website Builder) هي مواقع كبيرة متخصصة في إنشاء المواقع الإلكترونية، وهي خيار جيد لأصحاب المواقع الصغيرة، ويمكن الإعتماد عليها في إنشاء موقع مجاني او مدفوع، وهي خيار مناسب لمن ليس له معرفة بلغات البرمجة ويريد إنشاء موقع .

وتوفر المواقع المنشئة للويب بشكل مجاني كل من دومين، وإستضافة، وقوالب، كما أنها توفر لوحة تحكم سهلة الإستخدام للمواقع التي يتم إنشائها عن طريقها، ومن أشهر المواقع المنشئة للويب هي مواقع (Weebly)، (Wix)، (Squarespace) ... الخ .

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


4- إنشاء مدونة مجانية

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

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

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

:المصادر
1- حسان مطر- إنشاء موقع إلكتروني-2021-
https://mawdoo3.com
2- جيري لو- الخطوات الأساسية لإنشاء موقع الويب الخاص بك – 2018- https://www.webhostingsecretrevealed.net
3- بهيج مسوح- تعلم إنشاء موقع الكتروني-2019-
https://blog.hotmart.com
4- Vijay Sharma- Different Ways to build any type of Website-2020- https://www.klientsolutech.com
5- Geoff Blake- Different Ways To Build A Website-2020-https://www.tentononline.com

___________
تم بحمد الله

ونسعد بتعليقاتكم




خطوات إنشاء موقع إلكتروني

*****

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

خطوات إنشاء موقع إلكتروني

 


أولا: تحديد مجال وأهداف الموقع الإلكتروني

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

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


ثانيا: التخطيط لإنشاء الموقع الإلكتروني

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

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


ثالثا: خطوات إنشاء موقع إلكتروني

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


1- الحصول على دومين وإستضافة للموقع الإلكتروني

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

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

* يمكن الحصول بشكل مجاني على اسم نطاق وإستضافة من منصة مثل بلوجر(Blogger) التابعة لجوجل، إلا أن اسم النطاق يكون غير مستقل، اي مضاف اليه اسم المنصة المزودة له (blogspot)، اي يكون رابط الموقع (URL) على الصورة التالية : (http://your domain.blogspot.com ).
* يمكن شراء اسم نطاق مع إستضافة مجانية علي منصة بلوجر، ويكون اسم النطاق مستقل، وفي هذه الحالة يكون الموقع مثل المواقع الأخرى المدفوعة.
* يمكن شراء اسم نطاق من احد مواقع بيع اسماء النطاقات، وشراء الإستضافة من موقع اّخر لبيع الإستضافات .
* يمكن شراء كل من اسم النطاق والإستضافة من احد المواقع المتخصصة في بيع كل من اسماء النطاقات والإستضافات، وبذلك يكون اسم النطاق بالإضافة الى الإستضافة موجودين على نفس الحساب، مما يسهل عملية إدارة الموقع .
وفيما يأتي سيتم تحديد كيفية الحصول على كل من النطاق والاستضافة بشيء من التفصيل .

1.1 إختيار اسم نطاق

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

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

ويأخذ اسم النطاق او دومين الموقع الصورة التالية (YourDomainName.com) وموقعه في رابط الموقع كما يأتي : (https:// YourDomainName.com) ويجب ان يراعى في اسم النطاق او الدومين الاّتي:
* ان يكون قصير، سهل الحفظ، وسهل الكتابة .
* ان يكون فريدا، وله صلة بمجال الموقع .

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

اولا: كيفية الحصول على اسم نطاق للموقع

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

الا ان الدومين المجاني هو دومين غير مستقل، اي يكون على هذا الشكل (https://YourDomainName.blogspot.com) ، اي الدومين يشمل اسم موقعك متبوعا بإسم المنصة التابع لها او المستضيفة للموقع، وفي هذه الحالة هي منصة بلوجر (blogspot).

اما الدومين المدفوع فهو دومين مستقل ويكون على الشكل (https://YourDomainName.com)، حيث يلاحظ ان المنصة او الموقع المضيف للموقع او المدونة غير موجود في الرابط، ويمكن الحصول على الدومين المدفوع او المستقل من عدة مواقع مثل bluehost وnamecheap و godaddy ... الخ .

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

ثانيا: الفرق بين اسم النطاق المدفوع والمجاني

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

كما ان الدومين المجاني غير مستقل اي انه تابع للمنصة او الموقع المستضيف له، الا انه يمكن ترقيته اي جعله دومين مدفوع في اي وقت، ليصبح دومين خاص ويتمتع بالإستقلالية مثل اي دومين مدفوع .

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

2.1 إختيار استضافة الموقع الإلكتروني

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

اولا: الإستضافة المدفوعة

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

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

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

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

وفيما يأتي سوف يتم إستعراض اهم أنواع إستضافات المواقع الإلكترونية المدفوعة، واهم الشركات او المواقع المقدمة لهذه الإستضافات .

1- اهم أنواع إستضافات المواقع الإلكترونية

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

* الإستضافة المشتركة (Shared web hosting): وفيها يشترك اكثر من موقع في نفس الإستضافه او نفس الحيز على خادم ذي مواصفات عالية، وهذا النوع من الإستضافات مناسب للمواقع الإلكترونيّة الصغيرة .

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

* الإستضافة المخصصة (Dedicated hosting): وهي عكس الإستضافة المشتركة، حيث يكون لكل موقع خادم خاص به يستفيد من كل موارده ، وهو مناسب للمواقع الكبيرة التي يدخلها عدد كبير من الزوار، وتتميز الإستضافة المخصصة بسرعة تحميل او إستجابة الموقع المستضاف عليها لطلبات الزوار، ويعيب عليها الإرتفاع الكبير في أسعارها .

* الإستضافة الافتراضيّة (Virtual hosting): وهو نوع من الإستضافات التي يتم فيها إستضافة مجموعة من المواقع على نفس الخادم، حيث يحتوي هذا الخادم على مجموعة من الخوادم الافتراضيّة او السحابية، والتي لكلّ خادم منها موارده الخاصّة.

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

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

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

2- اهم شركات الإستضافة

تتنوع شركات الإستضافة فهناك شركات ذات شهرة واسعة مثل شركة(Godaddy)، واخرى ذات مصداقية عالية وموصى بها مثل شركة (Bluehost)، وهناك شركات اخرى مثل(Hostgator) و (Siteground) و (Dreamhost) ... الخ .

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

ثانيا: الإستضافة المجانية

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

ثالثا: الفرق بين الإستضافة المجانية والمدفوعة

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


2- تصميم الموقع الإلكتروني وتخصيصه

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

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

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

1.2 تصميم المواقع الإلكترونية مع تخصيصها

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

ويفضل على من يريد تصميم الموقع أن يكون لديه بعض المعرفة بأساسيّات التصميم، ومعرفة اللغات المستخدمة في التصميم خاصة لغة (HTML)، ولغة (CSS) .

وبإستخدام البرمجة والتصميم يتم إنشاء الأجزاء المختلفة للموقع، مثل الهيدر (Header)، والقائمة او النافبار (Navbar)، والسيدبار(Sidebar)، والفوتر (Footer) وغيرها .

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

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

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

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


3- إضافة المحتوى للموقع

بعد تصميم الموقع الإلكتروني وتخصيصه نأتي الى المرحلة التالية وهي مرحلة هامة جدا وهي إضافة المحتوى اليه، وترجع أهمية هذه المرحلة الى ان موقع إلكتروني بدون محتوى ليس له قيمة، فكما يقال المحتوى هو الملك (The content is the king) .

ويتمثل المحتوى في المقالات او المشاركات، الصور، والفيديوهات التي يتم إضافتها للموقع ويشترط في المحتوى الاّتي :

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


4- معاينة وإختبار الموقع الإلكتروني

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

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

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

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


5- نشر الموقع الإلكتروني

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

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

وحتى يمكن رفع ملفات الموقع على الإستضافة فإنه يتم إستخدام إحدى الأدوات التي قد توفِرها الإستضافة نفسها، او بإستخدام احد البرامج المتخصصة مثل برنامج (File manager)، أو عن طريق البرنامج الشهير لرفع الملفات الى الإستضافة وهو برنامج (FileZilla) .


6- تسويق الموقع الإلكتروني

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

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

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

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

_________________

أطيب الأمنيات بالإستفادة للجميع

ودمتم في رعاية الله

الإنتقال إلى أعلى الصفحة

تصميم مواقع الإنترنت

*****


مفهوم تصميم مواقع الإنترنت

يعني تصميم موقع الإنترنت تحديد عدد الأقسام التي يتكون منها الموقع طبقا للهدف منه ، ومكان كل قسم في الموقع ، وتحديد مكونات كل قسم ، واللون المناسب لكل منها وأبعاده ... إلخ.

وعادة مايشمل الموقع على مجموعة من الأقسام الرئيسية وهي:

1-قائمة التسميات

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

2-الهيدر

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

3-جسم الموقع

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

4-الفوتر

: وهو الجزء السفلي والأخير من الموقع، ويوضع فيه عادة بعض الروابط الهامة للموقع.


أهمية التصميم الجيد لمواقع الإنترنت

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

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

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

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

عوامل إضافية للحصول على تصميم جيد لمواقع الإنترنت

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

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

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


أهم الشروط الواجب توافرها في تصميم الموقع الإلكتروني

1- تصميم كل قسم من أقسام او مكونات الموقع الإلكتروني، بحيث يكون مناسب للمجال او الهدف الذي تم إنشاء الموقع من أجله .

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

3- أن تكون ألوان الموقع من خلفيات وخطوط متوافقة مع النشاط المستهدف منه، فمثلا من غير اللائق أن تكون الألوان الخاصة بموقع إسلامي هي اللون الأحمر أو البمبي ،

4- من المفضل أن تكون ألوان مكونات الموقع متوافقة مع بعضها البعض، مع مراعاة عدم الإكثار من الألوان في الموقع .

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

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

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

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

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

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

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

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

____________________

ودمتم في رعاية الله



تصميم قائمة منسدلة بإستخدام CSS

*****

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

خطوات تصميم قائمة منسدلة

ويتطلب تصميم قائمة منسدلة مع كل من القائمة العادية والمحدبة نوعين من الأكواد كما تم ذكره سابقا ويمر بالخطوات الاّتية :
1-كتابة أكواد HTML الخاصة بالقائمة الأفقية (الرئيسية) كلاّتي :
<div id=menue>
<ul>
<li><a href="#">الرئيسية</a></li>
<li><a href="#">تصميم</a></li>
<li><a href=”#”برمجة</a></li>
<li><a href="#">سيو</a></li>
</ul>
</div> 

2- إضافة أكواد القائمة المنسدلة وهي عبارة عن وسم <ul>  موجود داخل وسم <li> للقسم المطلوب عمل قائمة منسدلة له ، وهي الأكواد ذات اللون الأحمر ، بالإضافة لكود الصورة ذو اللون الأخضر وهو عبارة عن صورة سهم للإشارة إلى أن رابط القسم الموجود بجواره يحتوي على قائمة منسدلة ، إلى أكواد القائمة الرئيسية بين وسمي البداية <li> والنهاية </li> للقسم أو الرابط الخاص به كالاّتي :

<div id=menue>

<ul>

<li><a href="#">الرئيسية</a></li>

<li><a href="#">تصميم</a></li>

<li><a href=”#”>

<img src="http://www10.0zz0.com/2016/05/08/20/117419207.png"/>برمجة</a>

<ul>

<li><a href="#">html</a></li>

<li><a href="#">css</a></li>

<li><a href="#">php</a></li>

</ul>

</li>

<li><a href="#">سيو</a></li>

</ul>

</div>


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

 


3- تنسيق القائمة الأفقية وذلك كالاّتي :

* تحـديد شكـل القائمـة مثل العـرض والإرتفـاع واللـون ... إلـخ وذلــــــك بإضافــــــة الأكــــــواد التاليــــــة بيــن وســــمي البدايــــــة
<
style type="text/css”> والنهاية </style> في الجزء الخاص بتنسيق القائمة ، وتم إستخدام الخاصية  position:relative وذلك للتحكم في مكان القائمة المنسدلة بالنسبة للقائمة الأفقية أي حتى نستطيع إعطاء الخاصية position: absloute للقائمة المنسدلة كما سيأتي لاحقا .


ولجعل القائمة تأخذ الشكل المحدب نضيف الأكواد التالية إلى المحدد menue .
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%,0% 100%,
from(#0272a7), to(#013953));
وبذلك تكون كل أكواد المحدد menue كالاّتي : 
#menue{
width:550px;
height:45px;
margin:10px auto 0px auto;
padding:0px 5px 0px 5px;
background: #014464;
border-radius: 10px;
position: relative;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%,
from(#0272a7), to(#013953));
}

*إضافة الأكواد الخاصة بتحديد شكل الأقسام أو التسميات كالاّتي : 
#menue ul li {
float: right;
list-style: none;
text-align: center;
position: relative;
padding: 4px 10px 4px 10px;
margin-right: 10px;
margin-top: 7px;
border: none;
background: #F4F4F4;
border-radius: 5px 5px 0px 0px;
}

* إضافة الأكواد الخاصة بالخط مثل نوع وحجم ولون الخط  كالاّتي :
#menue ul li a { font-family:Arial, Helvetica, sans-serif; font-size:18px; color: #014464; weight: bold; display:block; text-decoration:none; }

* لإخفاء القائمة المنسدلة نضيف الكود التالي : 

#menue ul ul {
display: none;
}
* لإظهار القائمة المنسدلة عند وضع مؤشر الماوس على القسم أوالتسمية المحتوية عليها نضيف الكود التالي:
#menue ul li:hover ul { display: block; }
* إضافة الأكواد الخاصة بالشكل واللون ...إلخ للقائمة المنسدلة وهي مشابهة لأكواد القائمة الأفقية ، ولكي نضمن أن تظهر القائمة المنسدلة أسفل القائمة الرئيسية فقد استعملنا الخاصية position: absolute ومعها الخاصيتين المرتبطتين بها وهما top: 100% ، left: 0% كالاّتي :
#menue ul ul{
background: #086A87;
border-radius: 0px;
padding: 7px;
position: absolute;
top: 100%;
left: 0%;
}
#menue ul ul li {
float: none;
margin: 5px 2px 5px 2px;
padding: 0px;
}
#menue ul ul li a {
padding: 3px;
color: #014464;
}
#menue ul ul li a:hover {
background: #014464;
color: white;
}
5- عند تجميع كل الأكواد السابقة سواء أكواد HTML أو أكواد CSS الخاصة بكل من القائمة الأفقية والمنسدلة نحصل على الاّتي:

<style type="text/css">

#menue{

width:950px;

margin:10px auto 0px auto;

height:45px;

padding:0px 5px 0px 5px;

background: #014464;

border-radius: 10px;

}

#menue ul li {

float: right;

list-style: none;

text-align: center;

position: relative;

padding: 4px 10px 4px 10px;

margin-right: 10px;

margin-top: 7px;

border: none;

background: #F4F4F4;

border-radius: 5px 5px 0px 0px;

}

#menue ul li a {

font-family:Arial, Helvetica, sans-serif;

font-size:18px;

color: #014464;

weight: bold;

display:block;

text-decoration:none;

}

#menue ul li a:hover {

color: white;

background: #014464;

}

#menue ul img {

height: 15px;

width: 15px;

position: absolute;

right: 80%;

top: 40%

}

 

#menue ul ul {

display: none;

}

#menue ul li:hover ul {

display: block;

}

#menue ul ul{

background: #086A87;

border-radius: 0px;

padding: 7px;

position: absolute;

top: 100%;

left: 0%;

}

#menue ul ul li {

float: none;

margin: 5px 2px 5px 2px;

padding: 0px;

}

#menue ul ul li a {

padding: 3px;

color: #014464;

}

#menue ul ul li a:hover {

background: #014464;

color: white;

}

 

</style>

 

<div id=menue>

<ul>

<li><a href="#">الرئيسية</a></li>

<li><a href="#">تصميم</a></li>

<li><a href="#">

<img src="http://www10.0zz0.com/2016/05/
08/20/117419207.png
"/>برمجة</a>

<ul>

<li><a href="#">html</a></li>

<li><a href="#">css</a></li>

<li><a href="#">php</a></li>

</ul>

</li>

<li><a href="#">سيو</a></li>

</ul>

</div>

وتكون النتيجة النهائية كالتالي:
إضغط على الصورة لتكبيرها
نأسف للإطالة
ودمتم في رعاية الله

قائمه افقيه تتلون اقسامها بالضغط عليها لمدونة بلوجر

*****

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

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

اضغط على الصوره للتكبير

قائمه افقيه تتلون اقسامها

يظهر في الصوره ان القسم المفتوح او المتاح للقراءه هو قسم التصميم.


خطوات عمل القائمه

اولا: نضع أكواد الأقسام او التسميات الخاصه بالقائمه الأفقيه في قالب المدونه مع وضع id لكل قسم حتى يمكن تنسيقه باللون المطلوب .

ثانيا: نقوم بتنسيق القائمه في قسم التنسيق بقالب المدونه بإستخدام اكواد ‏css

ثالثا: نضع الكود الشرطي والذي يجعل كل قسم يصبح لونه بني brown عند الضغط عليه ويمكنك تغيير اللون البني باللون الذي تريده كما في الصوره التايه:


اضغط على الصوره للتكبير

قائمه افقيه تتلون اقسامها

ودمتم في رعاية الله