دليل تصميم المواقع

تصميم المواقع

تم بواسطة: Technotag

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

25 فبراير، 2022

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

أي انه يفتح أمام المتعلم أبواب معرفة أخرى ومجالات غير منتهية للتطوير

سنتكلم عن مسار تطوير الويب (Web Development)  والمسارات الفرعية فيه

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

بداية لابد من دراسة قواعد التصميم واختيار الألوان ومعرفة عائلات الخطوط.

سواءً كنت مصمم او مبرمج او مطور ويب تحتاج لتعلم أساسيات لغات الواجهة الأمامية:            HTML – CSS – JS

لأنها اللغات الوحيدة التي يفهمها متصفح الويب, ويتم ترجمة جميع اللغات الأخرى اليها.

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

 

أهم الاختصاصات الموجودة داخل مجال:

تصميم وتطوير المواقع

 

تصميم-المواقع

تصميم مواقع الويب

 

تستطيع تصفح العناوين من خلال جدول محتويات المقال

تطوير الواجهة الأمامية

يقوم مطور الواجهة الأمامية بتصميم المواقع وإدارة أجزاء مواقع الويب التي تراها وتتفاعل معها،

وعادةً ما تسمى (جانب العميل). فهم يتحملون المسؤولية عن المظهر والتصميم وغالباً ما يكون المحتوى المعروض على الموقع – مثل الألوان والخطوط والصور والتنقل كلها جزء من عمل مطور الواجهة الأمامية (مصمم الويب).

ومثال عليه:

العرض المسرحي المرئي على منصة المسرح (من حركات الممثلين والاصوات والمشاهد المسرحية)

ويتكون من قسمين وكل منهما يشكل اختصاص مستقل بذاته:

تصميم تجربة المستخدم UI/UX:

تخطيط وتصميم الموقع باستخدام برامج الغرافيك مثل مجموعة أدوبي فوتوشوب والستريتر  و XD او احد البرامج المشابهة

تصميم وترميز(تكويد) المواقع:

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

HTML – CSS – JS

وبعض المكتبات والفريم وورك المساعدة مثل:

BootstrapJQuery

سنتكلم بشكل تعريفي بسيط عن كل لغة منهم:

HTML:

هي لغة ترميزية تقوم بوصف الموقع وتحديد كيفية بناء الصفحات, وتعمل بمبدأ الـ Block والـ Inline,

ونستطيع تشبيهها بهيكل المنزل الخارجي وتحديد كم غرفة (مجرد بناء على العظم)

ولتعلمها تستطيع في البداية الاكتفاء بتعلم الوسوم الأساسية وخواصها الأساسية, ثم التعلم والتطوير حسب الطلب والحاجة

CSS:

هي لغة تسيق الأنماط وجماليات الموقع

وتفيد في توزيع وتموضع العناصر عموديا وأفقيا
العرض بطريقة الـ Animation

جعل الموقع متجاوب مع جميع الشاشات

جعل الموقع متوافق مع جميع المتصفحات

ونستطيع تشبيه عملها بتحديد أبعاد الغرف وتوزيعها وتدهين المنزل وفرشه وتجميله

اهم مكتباتها ال Bootstrap & Foundation ويعطي قوالب ومحتويات وعناصر جاهزة

Java Script:

تجعل الموقع تفاعلي وتعتبر المعيار الأساسي لقوة مطور الواجهات وهي ضرورية لكل موقع

ونستطيع تشبيه عملها بتمديد الكهرباء للمنزل وربطها بزر تشغيل الانارة, وتمديد المياه ..

وصدر منها الإصدار JS 2015 _CS6 ECMAScript 6

وهو عبارة عن معايير أصدرتها منظمة عالمية للغة جافا سكريبت لتجعلها متناسبة مع لغات البرمجة الأخرى

والتي لا يمكن الاستغناء عنها لأنها سهلت بعض الاكواد وأضافت ميزات جديدة

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

أهم اطر العمل react.js و vue.js و anguler.js

 

تطوير الواجهة الخلفية

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

يقوم الـ Back-end بالتواصل مع واجهة الموقع فيقوم بإرسال واستقبال المعلومات ثم يعرضها في الموقع. كلما ملأت استمارة اتصال

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

ومثال عليه:

ما يحدث خلف الكواليس من تحديد أدوار الممثلين في المسرح وصناعة الأصوات والمؤثرات والاضاءة

ويتكون من قسمين:

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

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

وهناك الكثير من قواعد البيانات التي يمكنك العمل عليها مثل:

  • MySQL
  • SQLServer
  • Oracle
  • MongoDB

لغات البرمجة:

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

وهي صلة الوصل بين الإنسان والحاسب، حيث يتم تحويل تلك الأوامر الى لغة يفهمها الحاسوب، ويتم تقسيمها  الى مستويين أساسيين:

لغات برمجة منخفضة المستوى
لغات برمجة عالية المستوى

أمثلة عن بعض لغات البرمجة:

  • لغة PHP مع ( YII, Laravel, Symphony )
  • لغة Python مع ( Django, Flask, Web )
  • لغة Java مع ( Spring )
  • لغة Ruby مع ( ROR )
  • لغة C# مع ( .NET )
  • بيئة Nodejs مع ( Express )

يجب تعلم لغة برمجة واحدة فقط مع نوع من أنواع أنظمة إدارة قواعد البيانات مثل:

SQL SERVER – MYSQL 

تطوير الويب الشامل

هو عبارة عن دمج بين تطوير الواجهة الأمامية وبين تطوير الواجهة الخلفية معاً

 

أنظمة إدارة المحتوى

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

أمثلة عن بعض أنظمة إدارة المحتوى الشهيرة:

  • ووردبريس WordPress
  • جملة Joomla
  • دروبال Drupal
  • ويكس Wix

يعد ووردبريس أبرز أنظمة إدارة المحتوى فهو نظام مفتوح المصدر ومجاني مبني بلغة PHP

يوجد ثلاثة مستويات أساسية للعمل في مجال تصميم المواقع باستخدام الووردبريس

  1. استخدام منصة ووردبريس وانشاء مواقع عن طريق تركيب ثيمات جاهزة – مدفوعة او مجانية – بدون تعلم أي لغات برمجة إضافية.
  2. تعلم لغات الواجهة الأمامية الأساسية HTML & CSS & JS إضافة الى منصة الووردبريس حيث يمكن التعديل على القوالب او انشاء ثيمات جديدة من الصفر.
  3. تعلم PHP & MYSQL إضافة الى لغات الواجهة الامامية الأساسية والووردبريس حيث يمكن عمل موقع كامل من الصفر بدءا بإنشاء قالب جديد الى التعديل على لوحة تحكم الووردبريس او انشاء إضافات (بلاجين) تناسب موقعنا من الصفر بدلا من استخدام البلاجين الجاهزة.

 

web-design

متطلبات العمل في مجال تصميم المواقع

تحديد الهدف:

قبل البدء بالتعلم لابد من تحديد الهدف والذي يتعلق بالطريقة التي ترغب بالعمل بها

عمل حر: مع عملاء من خلال موقعك الخاص او من خلال منصات الانترنت

عمل مهني: شركة اون لاين او دوام نظامي

.مشروع شخصي: للتعلم او عمل موقع يخدم عملك المهني خارج البرمجة وتصميم المواقع

الأدوات المطلوبة:

حاسوب بمواصفات بسيطة متوسطة: بالحد الأدنى 4 رام – معالج من الجيل السادس بالنسبة للكور أي 3  أو من الجيل الرابع بالنسبة لل كور أي 5

محرر نصوص: الأفضل والاشهر حاليا هو فيجوال استوديو كود أو أي مشابه له, ويمكن استخدام برنامج المفكرة الأساسي في الكمبيوتر لكن لا ينصح به

متصفح ويب: لعرض الموقع ويعد جووجل كروم الأفضل والاشهر من بينهم

يمكن العمل بالمتصفح الأساسي للنظام ولكن لا ينصح به

برامج الجرافيك: فوتوشوب – اليستريتر –  Adobe XDاو أي برنامج مشابه

المهارات المطلوبة:

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

لست بحاجة للتعمق في تعلمها الا بحال اردت الاختصاص في مجال UI/UX

برنامج Photoshop: في البداية تحتاج فقط لمعرفة التعامل مع البرنامج بشكل عام وتعلم بعض الأمور  المتعلقة بـ تصميم المواقع:
      • معالجة و وتعديل ودمج الصور
      • حفظ الصور بصيغة تجعل حجمها صغير ومناسب للعرض على الويب

وكل ما تعمقت اكثر كلما وفرت وقت اكبر وخرجت بنتيجة افضل

برنامج illustrator: نحتاج فقط لأساسياته ونلاحظ تشابه كبير بينه وبين الفوتوشوب الا انهما يكملان بعضهما.
      • تعلم طريقة عمل أداة pen tool لرسم بعض الأشكال المساعدة في الموقع, إضافة الى اخذ كود الشكل المتجه ووضعه في الموقع.
      • حفظ التصميم بصيغة مناسبة للعرض على الويب
برنامج Adobe XD: هو برنامج لتصميم وتخطيط الموقع واختباره قبل تكويده

وهو مهم لتصميم تجربة مستخدم مثالية UI/UX

يمكن استخدام أي برنامج مشابه مثل Wireframe

ويمكن الاستغناء عنه والبدء بالتكويد مباشرة, لكن لا ينصح بذلك خصوصاً في البداية

مشاركة الموقع ورفعه على شبكة الإنترنت

بعد الانتهاء من الموقع يجب مشاركة الموقع على الانترنت ليتم الوصول اليه من قبل الجميع

ولعمل ذلك يجب الحصول على دومين (اسم مجال خاص بالموقع) وهوست (استضافة الموقع)

وسنقوم بشرحهم بشكل بسيط

النطاق Domain Name: 

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

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

الاستضافة Hosting: 

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

ونستطيع تمثيلها بالمنزل:

مثلا شخص يملك فرش لمنزله ويحتاج لاستئجار منزل ليضع الفرش الخاص يه

حيث يمثل المنزل الاستضافة, ويمثل الفرش شكل الموقع ومحتوياته:

وللدخول الى المنزل لابد من تواجد المفتاح, والذي يمثل الدومين في هذا المثال

الأمان Safety: 

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

      • تأمين الحاسوب الخاص بك:
      • اختيار استضافة قوية من ناحية الحماية والأمان
      • تركيب شهادة SSL للموقع
      • عمل ملفات حماية لمنع الوصول الى موقعك مثل htaccess

والكثير من الإجراءات التي لا مجال لحصرها هنا

 

 

ربما ترغب أيضاً بقراءة …

Divi Theme

Divi Theme

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

قراءة المزيد

0 تعليق

إرسال تعليق

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

error: المحتوى محمي !!