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

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

طرق تصميم موقع إلكتروني

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

  • التصميم بدون فريم وورك Framework: أي تصميم موقع من الصفر دون الاستعانة بأي تقنيات تصميم ويكون ذلك بالاعتماد على HTML لبناء عناصر الصفحة وCSS لإضافة ستايل للصفحة Style ثم القيام ببعض البرمجة البسيطة باستخدام لغة JavaScript.
  • التصميم باستخدام فريم وورك: وهنا يتم تصميم الموقع بالاستعانة بتقنيات التصميم وخاصة الحديثة منها، وتكون الخيارات الأكثر شهرة هي: React – Angular – Vue.

لنتحدث عن ذلك بشكل تفصيلي.

تصميم موقع إلكتروني بدون فريم وورك Framework

ما هي React js

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

ما هي Angular

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

ما هي Vue.js

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

تصميم موقع إلكتروني بدون فريم وورك

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

ما هي Bootstrap

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

ماذا عليك أن تفعل بعد بناء التصميم

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

المراجع

  • 1 ، What is React?، من موقع: www.w3schools.com، اطّلع عليه بتاريخ 22-4-2019
  • 2 ، What is Angular?، من موقع: angular.io، اطّلع عليه بتاريخ 22-4-2019
  • 3 ، What is Vue.js?، من موقع: vuejs.org، اطّلع عليه بتاريخ 22-4-2019