خطوات البدء بتعلم تصميم المواقع

مرحباً @امل سليمان هارون

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

• backend: و هو الجزء الذي ينفذ على السيرفر و يتصل بقاعدة البيانات.
• frontend: و هو الجزء الذي ينفذ على المتصفح الخاص بالمستخدم (فايرفوكس - كروم ..) و يضم الواجهات التي نتفاعل معها.

بما أن سؤالك موجه لتصميم المواقع فقد حددنا هنا الجزء الثاني وهو الـ frontend لتصميم وبرمجة الواجهات.

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

• أولا تعلم HTML اختصارا لـ: hypertext markup language و هي لغة وصفية (ليست برمجية) مهمتها وصف هيكلية صفحة الويب التي نقوم بتصميمها، (مثل البناء الذي تم تعميره للتو دون أي إكساء للمظهر الخارجي). أي في هذا الجزء من الصفحة لدي نص و في الجزء الآخر لدي صورة و في الجزء الذي يليه لدي حقل ادخال نصي ثم زر وهكذا.. . 
• ثانياً تعلم CSS اختصاراً لـ: Cascading Style Sheets وهي المسؤولة عن تخصيص المظهر الخارجي أي تخصيص: الألوان - التموضع - الازاحة - الانحياز - الابعاد .. وغيرها من خصائص مظاهر الخارجي.
• ثالثاً تعلم لغة JavaScript و هي لغة برمجية تنفذ ضمن المتصفح بعد طلب و تحميل الصفحة، تمكننا من القيام بالعديد من المهام و الوظائف لعل أبرزها:
  • الوصول إلى عناصر الصفحة التي بنيناها سابقا باستخدام HTML و تغييرها و التلاعب بها
  •  تغيير خصائص مظهرها الخارجي كتغيير قيم CSS
  • بالإضافة للقيام بالاتصال بقسم الـ backend من الموقع الاكتروني و إحضار البيانات منه و عرضها ضمن الصفحة دون الحاجة لإعادة تحميل الصفحة (عمل refresh).

ثم بعد الانتهاء من الأساسيات السابقة يمكنك الانتقال إلى تعلم المكاتب و أطر العمل كالتالي:

• مكاتب frontend-design مثل bootstrap لتسهيل و تسريع عملية بناء و تصميم الواجهات بشكل جذاب و متوافق مع أغلب المتصفحات و الأجهزة.
• مكتبة JQuery المبنية من لغة JavaScript أيضاً بديل لتسهيل و تسريع استخدام لغة JavaScript.
• أطر عمل frameworks لبرمجة الـ frontend مثل: (Angular - React - VueJs) 

أيضاً أريد التنويه إلى أنه بالإمكان استخدام أنظمة ادارة المحتوى content management system مثل Wordpress و هي مكونة بشكل أساسي من themes مبرمجة و جاهز للأستخدام و يمكن التعديل عليها بسهولة عبر إضافة plugins أيضاً تقوم بتسريع عملية بناء الموقع بدلاً من بنائه من الصفر.

بالتوفيق

السلام عليكم 

لقد عملت على تصميم تطبيقات سطح المكتب باستخدام الjava swing و ال javafx و كذلك عملت على تصميم المواقع باستخدام الbootstrap .

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

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

بعدها يمكنك محاكاة تصاميم جاهزة لعمل تغذية بصرية حتى تكون تصاميمك عصرية ومتماشية مع التوجهات الحالية للمصممين.

قد يخطر ببالك سؤال من أين سأبدأ تعلم الlayout؟

أنا دائماً افضل الdocumentation وفي حال كنت من الذين يحبون الفيديوهات فأنصحك بالcrash courses لأنها تختصر المعلومات وفي البداية قد يصاب الانسان بالملل او الرهبه من كثرة المعلومات.

تصميم مواقع الويب أو ال front end هو  بناء مواقع على شبكة الإنترنت بإستخدام تقنيات ال front end.  يمكن أن يكون موقع ويب ثابت يحتوي على نص عادي وصور وروابط بدون تغيير dynamic في محتويات الموقع أو أن تكون تطبيقات ويب معقدة وأنظمة إدارة المحتوى وواجهات برمجة التطبيقات (API) وخدمات الشبكات الاجتماعية.

يقوم مصممو الويب ببناء أجزاء  الموقع التي تراها وتتفاعل معها، وعادةً ما تسمى الواجهة الأمامية أو ال front end . فهم يتحملون المسؤولية عن المظهر والتصميم مثل الألوان والخطوط والصور والتنقل والنسخ كلها جزء من عمل مصمم الويب.   

تعلم المهارات الأساسية: 

عندما تبدأ للتو، حاول تعلم بعض المهارات الأساسية لتطوير الويب مثل المفهوم العام لل front end و back end و البروتوكولات الإستضافة .

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

دعنا نلقي نظرة على المهارات الأساسية التي ستحتاج إلى إتقانها لتصبح مصمم ويب.

الأساسيات: HTML ،CSS ،JavaScript

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

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

HTML هي لغة الترميز المستخدمة لوصف المحتوى على صفحة الويب وكيفية هيكلته — فكر في العناوين والنقاط واالروابط.

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

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

وأخيراً وليس آخراً، يجب أن يتعرف  مصممي الواجهة الأمامية  على أنظمة التحكم في النسخ (version control systems). تتيح لك أنظمة التحكم في النسخ تتبع التغييرات في الكود، وتمكين عدة أشخاص من العمل على الكود في نفس الوقت دون خوف من إحداث تغييرات في عمل أي شخص آخر.

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

مهارات تصميم واجهات المواقع: تصميم متجاوب، أطر العمل، مكتبات

إن امتلاك القدرة على فهم HTML و CSS و JavaScript كافية للبدء في مجال تصميم الويب.

أحد المفاهيم التي ستعرفها جيدًا هو التصميم المتجاوب، أي التخطيطات الديناميكية التي تتكيف لتبدو رائعة على أي حجم شاشة، من أجهزة التلفزيون ذات الشاشة الكبيرة إلى الهواتف الذكية. تستخدم المواقع استعلامات الوسائط media queries للتحكم في “نقاط التوقف” “breakpoints” – دقة الشاشة المختلفة التي يجب أن يتحول فيها متصفح المستخدم إلى تصميم مختلف ومجموعة من الأنماط. نظراً لأن الأجهزة المحمولة تمثل ما يقرب من نصف عدد زيارات الويب في عام 2019، يعد التصميم المتجاوب مهارة أساسية لأي مصمم ويب.

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

تأتي الأُطُر الأمامية الأمامية مثل Bootstrap معبأة مسبقاً بأنماط وأمثلة من الرموز لعناصر التصميم شائعة الاستخدام مثل أشرطة التنقل وجداول التسعير. نظراً لأن الكود تم اختباره جيداً وتوثيقه، يمكن أن تجعل الأطر إنشاء تصاميم جديدة أسرع بكثير.

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

نظراً لأن متصفحات الويب لا تفهم شفرة SCSS مباشرةً، مع ذلك، تحتاج إلى تحليلها إلى vanilla CSS باستخدام أداة إنشاء مثل Grunt أو webpack. إن أدوات الإنشاء سهلة الاستخدام أيضاَ لدمج عدة ملفات CSS في ملف واحد (مما يساعد في الحفاظ على تنظيم الكود الخاص بك)، وضغط (أو تصغير) الكود لتحسين سرعات التنزيل، وحتى نشر الكود تلقائيًا على خادم ويب بعيد.

أخيراً، ستتعلم أطر عمل JavaScript ومكتباتك. أطر عمل JavaScript هي هياكل عمل لرمز JavaScript يمكنك تضمينها في موقعك لتسريع عملية التطوير. تشمل أطر عمل JavaScript الشائعة في 2020: Vue.js ،React، و Angular.