شارك المقال 👈

Share on facebook
Share on twitter
Share on linkedin
Share on pocket

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

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

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

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

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

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

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

ما هي React js

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

ما هي Angular

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