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

محتويات المقال:

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

كيف تعمل المواقع الالكترونيه .

لغة تصميم مواقع الويب .

الادوات اللازمة لـ تصميم موقع الكتروني .

برامج تصميم المواقع الالكترونية.

لماذا تحتاج العلامات التجارية الى تصميم موقع الكتروني .

جوملا .

المصادر

—————————————–

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

يفضل في البداية وقبل عرض انواع مواقع الانترنت ان نقوم بالتعرف على معنى كلمة موقع انترنت او موقع الكتروني .

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

ويتم برمجة او كتابة هذه الـ مواقع من خلال العديد من لغات البرمجة المختلفة والتي سوف نتطرق اليها فيما بعد .

أما عن انواع المواقع الالكترونية فنجده تنقسم الى نوعان الاول مواقع ستاتيك والثاني مواقع ديناميك او كما يفضل البعض ان يطلق عليها مواقع تفاعلية .

اولا الـ مواقع استاتيك Static :

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

وغالبا ما يتم استخدام لغة HTML في برمجة هذا النوع من الـمواقع الالكترونية .

ثانيا الـ مواقع دايناميك Dynamic :

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

وعلى الاغلب يتم برمجة هذا النوع من مواقع الانترنت من خلال لغة البرمجة PHP With MY SQL DATABASES او لغة البرمجة ASP.NET WITH SQL SERVER DATABASES .

—————————————–

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

للتعرف على طريقة عمل مواقع الانترنت فهناك 3 كلمات رئيسة يجب ان نضعها في الحسبان الا وهي ( متصفح انترنت Web Browser ) ( Domain Name Service ) ( Hosted Web Server ) .

كيف يتم ذلك ؟

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

هذا التاكد يتم من خلال ما يسمى Domain Name Service فاذا كان الرابط صحيح وموجود هنا ياتي دور Hosted Web Server حيث يقوم باستيراد وعرض موقعك سواء صور او بيانات على متصفحك للتمكن من تصفح كامل صفحات الموقع بسهولة .

—————————————–

لغة تصميم مواقع الويب :

هناك العديد من لغات البرمجة التي تستخدم في برمجة الـ مواقع الالكترونية ولكن بشكل عام فإن الصورة النهائية التي يظهر بها موقع الويب لا يخرج عن لغتين اساسيتين هما لغة XHTML وكذلك لغة CSS .

لغة XHTML  اختصار لـ eXtensible HyperText Markup Language وهي تعتبر اللغة الاساسية في تصميم اي موقع حتى انه يمكن الاعتماد عليها بمفردها في تصميم موقع الانترنت بالكامل، وتستخدم هذه اللغة في اضافة العناصر الى الموقع

لغة CSS وهي اختصار لـ Cascading Style Sheets ويطلق عليها لغة صفحات الانماط الانسيابية ، وتستخدم بشكل اساسي في ظهور الشكل النهائي وتنسيقات الموقع الالكتروني من حيث اللون وحجم الخط وكذلك عرض الصور والرسومات، اي تتحكم هذه اللغة في طريقة عرض العناصر المضافة الى صفحات الـ مواقع الالكترونيه .

—————————————–

الادوات اللازمة لـ تصميم موقع الكتروني :

هناك العديد من الادوات اللازمة لـ تصميم المواقع الالكترونية مثل متصفح الويب وكذلك محرر النص … الخ

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

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

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

واليك عزيزي القارئ بعض من اشهر متصفحات الويب الشائعة الاستخدام :

• متصفح ويب جوجل كروم :

Google Chrome هو متصفح ويب مجاني تم اطلاقه من قِبل شركة جوجل في عام 2009 م كـ نسخة تجريبية ، ويتميز جوجل كروم بسرعته الفائقة في تحميل صفحات المواقع الالكترونية وعرضها.

اصبح متصفح جوجل كروم اليوم يحتل مكان في المراتب الثلاث الاولى لاكثر متصفحات الويب استخداما .

• متصفح ويب موزيلا فاير فوكس :

Mozella Firefox يعتبر فايرفوكس من اوائل متصفحات الويب المنافسة لمتصفح انترنت اكسبلور واهم ما يميز هذا المتصفح هو قابليته للتخصيص وفقا لانه مضاف اليه العديد من الخصائص التي تسهل عملية التصفح .

• انترنت اكسبلور:

اطلق هذا المتصفح شركة مايكروسوفت وقبل ظهور متصفح فايرفوكس وجوجل كروم كان لا يوجد منافس له حيث كان ياتي ملازما لنظام التشغيل ويندوز .

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

ثانيا محرر النص :

محرر النص هو البرنامج الذي سوف يقوم المصمم من خلاله بكتابة الاوامر والاكواد الخاصة بـ موقع الويب قبل ان يقوم بالاحتفاظ به كصفحة ويب .

وهناك العديد والكثير من برامج تحرير النص منها ما هو مجاني ومنها ما هو مدفوع الاجر، مثل محرر نص Notepad وهو محرر نص يدعم العديد من اللغات وبه ميزة هامة وهي (Syntax Highlighting) التي تمكن المصمم من تنسيق وتنظيم الاوامر مما يجعل عملية المراجعة امر سهل.

ثالثا العناصر والوسوم :

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

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

على سبيل المثال لا الحصر فإن اي عنوان رئيسي متواجد بـ صفحة الويب يكون الوسم الخاص به هو ( h1 ).

هذه الوسوم ثابتة لا تتغير تم اختيارها وتحديدها من خلال المبرمج الرئيسي الذ قام باختراع لغة XHTML، كما يجب ان يكون الوسم مكتوب بين علامتين اصغر من واكبر من بهذا الشكل <hi> .

والوسوم عادة ما يكون لها نوعان اما وسوم مفردة او وسوم منفردة، الوسوم المزدوجة تكون بها وسم البداية ووسم النهاية بهذا الشكل </p> ، اما الوسوم المنفردة فتكون ذاتية الاغلاق بهذا الشكل <p/>.

رابعا الخصائص :

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

وغالبا ما تاتي الخصائص ملازمة للوسوم المفردة ولناخذ المثال التالي للتوضيح :

<img src=”images/logo.png” title=”صورة شعار الموقع”/>

الخاصية الاولى في المثال السابق هي (src) تكون ملازمة لـ وسم (img) حيث ان هذا الوسم لا يمكن ان يعمل دون خاصية src هذا لانه يحدد طريقة عرض ومسار الصورة.

والان ننتقل الى الخاصية الثانية في المثال ذاته وهي خاصية (title) وهي الخاصية التي تقوم بوضع عنوان للصورة، ولكن نجد هنا اختلاف هام بين كل من الخاصية(src) والتي تعد اجبارية وبدونها لا يعمل الوسم (img) ويقوم بتادية الوظيفة المطلوبة منه ، والخاصية  (title) التي تعد اختيارية ويعمل الوسم بدونها ويؤدي وظيفته بالشكل الامثل .

وهنا يطرح سؤال هام الا وهو هل الخصائص الاختيارية لا هدف من وجودها ؟

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

خامسا التعليقات والملاحظات:

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

كما يمكن ايضا لـ مصمم المواقع الالكترونية أن يقوم بكتابة التعليقات والافكار التي تاتي الى ذهنه اثناء العمل حتى لا ينسى ذلك.

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

ولكي يتم كتابة تعليق او ملاحظة يتم كتابتها بالشكل التالي :

<!—هنا نقوم بكتابة التعليق ويمكن ان يكون مكون من سطر واحد او من عدة اسطر –>

سادسا العنوان :

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

وبشكل ما فان الوسم الذي يرمز الى العنوان هو وسم (h) وهذا الوسم له 6 درجات بيانها كالتالي :

العنوان الرئيسي للصفحة يتبع وسم (h1) ويكتب على الشكل التالي <h1> العنوان<h1> .

العنوان الفرعي الذي يضم عدة عناوين اخرى يتبع وسم (h2) او وسم (h3) ويكتب على الشكل التالي <h2> العنوان<h2> .

العناوين الفرعية الاخرى بالصفحة تتبع وسم (h4) او وسم (h5) او وسم (h6) ويكتب على الشكل التالي <h4> العنوان<h4> .

—————————————–

برامج تصميم المواقع الالكترونية :

هناك العديد من البرامج المختلفة التي يتم استخدامها في تصميم المواقع الالكترونيه مثل :

• برنامج ادوبي دريم ويفر Adobe Dreamweaver والذي يمكن تحميله من خلال الضغط هنا .
• برنامج ورد بريس WordPress والذي يمكن تحميله من خلال الضغط هنا .
• برنامج ويب فلو Webflow والذي يمكن تحميله من خلال الضغط هنا .
• برنامج ويب فلو Bootstrap والذي يمكن تحميله من خلال الضغط هنا .
• برنامج ادوبي فوتوشوب Adobe Photoshop والذي يمكن تحميله من خلال الضغط هنا .
• برنامج ادوبي اليستريتور Adobe Illustrator والذي يمكن تحميله من خلال الضغط هنا .
• برنامج ويب فيجما Figma والذي يمكن تحميله من خلال الضغط هنا .
• برنامج ادوبي اكس دي Adobe XD والذي يمكن تحميله من خلال الضغط هنا .
• برنامج سبليم تكست Sublime Text والذي يمكن تحميله من خلال الضغط هنا .
• برنامج ويكس Wix والذي يمكن تحميله من خلال الضغط هنا .

—————————————–

لماذا تحتاج العلامات التجارية الى تصميم موقع الكتروني :

مع التطور التكنولوجي الكبير والسريع وحالة التحول الرقمي التي اصبحت تسود العالم في الوقت الراهن اصبح وجود موقع الكتروني للـ علامة التجارية ضرورة حتمية وسبب رئيسي من اسباب تقدم ونجاح علامتك التجارية حيث :

• العالمية حيث يكون الـ موقع الويب الخاص بـ علامتك التجارية متاح للعرض على جمهور من جميع انحاء العالم بضغطة زر ومن ثَم يتيح للعملاء الفرصة لمشاهدة المنتجات والخدمات التي تقدمها على الموقع الالكترونى .
• تصميم موقع الكترونى قوي ومتطور وجذاب يعطي احساس بالثقة والمصداقية لدى العميل.
• تصميم موقع الكترونى مميز وقوي وسريع التحميل والتصفح يعطي للعميل تجربة تصفح خالية من الملل وتضييع الوقت هذه التجربة غالبا ما تنتهي بعملية شراء تامة بعكس المواقع بطيئة التحميل والعرض التي تصيب العميل او المتصفح بالملل والرتابة وغالبا ما تنتهي هذه التجربة باتخاذ قرار من العميل بالبحث عن علامة تجارية اخرى للشراء منها .
• امتلاك العلامة التجارية لموقع ويب قوي مع ترتيب ظهور قوي على محركات البحث العالمية مثل google جوجل (SEO) يحقق للعلامة التجارية تجربة تسويق الكتروني بمزايا قوية قد لا تتوفر للعلامات التجارية المنافسة ذات المواقع الالكترونية الضعيفة في التصميم او الـ SEO والتسويق الالكتروني .

—————————————–

جوملا  Goomla :

جوملا هو نظام ادارة محتوى CMS يمكن من خلال انشاء مواقع وتطبيقات ويب قوية  وهو مجاني ومتاح للجميع .

جوملا هو نظام يعمل بلغة PHP ويتكون من التالي :

• قاعدة بيانات Database : وهي التي تحتوي على كافة بيانات الموقع الالكتروني.
• الموديولات Modules : والتي يتم من خلالها تحديد مكان الظهور في موقع الويب من خلال ضبط الاعدادات .
• قالب الموقع Template : الشكل العام للموقع الذي يتم من خلاله تقسيم الموقع والتحكم في طريقة الظهور والالوان .

لوحة تحكم جوملا Goomla:

تعمل لوحة تحكم جوملا على ادارة الموقع الالكتروني بشكل كامل سواء من خلال الاضافة او الحذف لمحتوى موقع الويب او من خلال التحكم بالاعدادات العامة للموقع الالكتروني والشكل والتنسيق .

وعند فتح لوحة التحكم نجد عدة ايقونات رئيسية بيانها كالتالي :

اضافة مقال جديد : وتستخدم لاضافة محتوى جديد للموقع .

مدير المقالات : وتستخدم للتعديل على محتوى موجود بالفعل على الـ موقع الويب سواء بالاضافة او الحذف .

مدير المجموعات : وهو مسئول عن اقسام الموقع وادارتها.

مدير الوسائط : يتحكم بجميع الوسائط التي تم رفعها على الـ موقع الويب من صور وملفات صوت وفيديو .

مدير المستخدمين : لادارة  كل مستخدم لـ لوحة التحكم يقوم بالعمل على محتوى الموقع .

مدير اللغات : والذي يعمل على ادارة لغات الموقع .

الاعدادات العامة : مثل اتصال قاعدة البيانات – اسم الموقع – ايقاف او تشغيل الموقع – …. الخ .

مدير القوالب: والذي من خلاله يتم استخدام القالب الذي تم تحميله والتعديل فيه وفي تنسيقه .

اضافة مقال على جوملا Goomla :

لاضافة مقال جديد يتم الضغط على ايقونة ( اضافة مقال جديد ) ومن ثم يتم ادخال عنوان المقال المراد اضافته ثم اختيار اسم مختصر يتم عرضه في رابط الوصول الى المقاله .

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

مع الحرص على ان تكون المقالة التي تمت اضافتها الى الموقع الالكتروني الخاص بالعلامة التجارية متوافقة مع محركات البحث (SEO) وذلك حيث تضمن ان يتم ظهور موقعك الالكتروني في مرتبة متقدمة ضمن النتائج المجانية على محركات البحث العالمية واشهرها محرك البحث جوجل google .

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

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

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

—————————————–

المصادر: 

• محمد موافي: تصميم المواقع التفاعلية PHP .
• عمر الامين: تصميم مواقع انترنت XHTML & CSS ، الطبعة الاولى، 1434هـ ـــ 2012م، القمرية للنشر الحر.
• يوسف صالح الجرعي: تصميم المواقع الالكترونية ، الطبعة الاولى.