لم يعد تعلم التصميم والبرمجة سواء لمواقع الويب أو التطبيقات أو برامج الحاسوب مجرد خبرة أو وظيفة , بل أصبح شئ طبيعي يكاد أن يتم البدء بإقراره كمنهج ومادة دراسية أساسية بدءًا من المراحل الإبتدائية ، ونظرًا لأهمية هذه المجالات سنقوم بتخصيص سلسلة من المقالات عن طريقة التعلم والبدء في أي مجال منها ، وما هي الأدوات اللازمة ، وما أهم المصادر للتعلم ، وكذلك كيف تصبح مصمم أو مطور حر Freelancer وتحصل على عملاء أو تعمل عن بعد أو حتى تكون مؤهل لأقصى درجة للعمل مع شركات عالمية.

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

فلنبدأ على بركة الله بأول مقال لنا في هذه السلسلة

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

هل ترغب أن يكون مجال عملك هو تصميمي بحت؟ بمعنى إنك ترغم برسم الشكل أو الإستايل الخاص بموقع الويب فقط بدون العمل بالكود نهائيًا؟

في هذه الحالة أنت ستكون مصمم واجهات UI/UX Designer ويمكنك العمل على برامج مثل: فوتوشوب - أليستريتور - فيجما - أدوب إكس دي

أما لو كنت ترغب بأن تجعل يداك متسخة بعض الشئ بالكود فيمكنك أن تصبح مصمم مواقع Web Designer/Frontend Developer ، وستكون مسئوليتك هي أن تقوم بتحويل ما قام برسمه مصمم الواجهات إلى موقع ويب يمكن أن يتم رفعه على سيرفرات وجعله مرئيًا أمام الجميع على الإنترنت , ولكنه في هذه الحالة سيظل موقع ثابت Static حتى لو كان به رسوم متحركة قمت بتصميمها بالكود.

ما معنى ثابت؟

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

حسناً حسناً ، لا تخاف , أعلم إني أسرعت قليلًا بالحديث , ولكن ذلك التمهيد كان لابد منه حتى عندما نتحدث بشكل مفصل لاحقًا تتذكر ما تحدثنا عنه الأن.

كيف تبدأ بيئة عملك كمصمم مواقع ويب؟

أنت تحتاج لبعض الأشياء وهي:

1 - جهاز كمبيوتر أو لابتوب.

2 - إتصال بالإنترنت.

3 - متصفح حديث (يفضل جوجل كروم).

4 - برنامج لكتابة الكود به (هناك الكثير من البرامج المجانية الأفضل منها هم: VS Code - Sublime - Atom - Brackets).

5 - إذا كان عملك معتمد على حصولك على إستايل الموقع كملفات PSD أو ملفات فيجما أو غيرها فعليك بتنصيب هذه البرامج أيضأ لتأخذها من المصمم وتقوم بتحويلها إلى كود ، أما لو كان عملك إبداعيًا فلن تحتاج برامج إضافية على الأقل في هذه المرحلة.

الأن وقد جهزت بيئة عملك .. 

ما هي اللغات التي تحتاج لتعلمها وأين يمكنك تعلمها؟

أهم لغتين على الإطلاق في عالم تصميم وتطوير مواقع الويب هم: HTML/CSS

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

يليها كلغة برمجة PHP والتي لها دور كبير في برمجة مواقع الويب وكذلك توصيلها بقواعد البيانات وإرسال وجلب البيانات بين الموقع وقاعدة بياناته.

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

لماذا جافاسكريبت هي الأقوى لتصميم مواقع الويب؟

يكفي أن نقول لك إنها نفس لغة متصفح كروم , لا يقلل ذلك من قدرات PHP والتي هي لغة البرمجة الأساسية لقوالب منصة ووردبريس وإضافاتها , ولكن جافاسكريبت مختلفة , ولكن كما ذكرنا سابقًا لو رغبت بمعرفة أيهما أسرع أو أكفأ في عمل ما فعليك بتحديد هذا العمل أولًا والبحث عن اللغة الأفضل لبرمجته أو حتى عمله باللغتين وتحليل مدى كفاءة وسرعة كليهما وأيهما يستخدم كود أقل ومختصر أكثر وأعلى توافقًا مع أغلب المتصفحات , فهناك العديد من العوامل تختلف بإختلاف المشروع المستخدم , فموقع ويب لمتجر إلكتروني من المؤكد أن الأفضل له PHP بعكس موقع ألعاب أونلاين سيكون الأفضل له JavaScript بكل تأكيد.

الأن وقد إتضحت لك الرؤية في بعض الأمور , هل تعلم إنك بإتقانك للغة PHP أو JavaCript ولقواعد البيانات تون بذلك مطور/مبرمج ويب؟

وإن كنت تتقن كلاهما مع ال HTML/CSS فقد أصبحت بذلك مطور كامل FullStack Developer حيث يمكنك أن تقوم بعمل المشروع وحدك بدون فريق من الألف للياء؟

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

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

بل إني سأفأجئك عزيزي القارئ وأقول لك إنه هناك أيضًا ما يسمى بالمكتبات وأطر العمل Framerworks التي تساعدك في عملك , فمثلًا لغة جافاسكريبت يوجد لها عدة أطر عمل مثل jQuery و VueJs وغيرهم .. وقد يرغب العميل أن تقوم ببرمجة موقعه بإستخدام أحدهم أو غيرهم , أو حتى أن يطلب منك إستخدام مكتبة Django الخاصة بلغة البرمجة بايثون أو يطلب منك لارافيل الخاصة ب PHP.

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

وأعذرني سيدئ على حماسي الذي جعلني أنسى أن أذكر لك أهم لغتين وفوائدهم

HTML: هي لغة تصميم هيكل موقع الويب , فمثلًا ستحتاج إلى إنشاء قائمة , وستحتاج إلى إنشاء روابط , وإضافة نصوص وصور وغيرهم .. كل ذلك يتم بإستخدام HTML.

ولكن بعد إنتهائك سيكون الشكل سيئًا للغاية ويحتاج إلى تنسيق وتعديل أماكن وأحجام وألوان , وهنا يأتي دور لغة CSS

فيكون بإمكانك إضافة الألوان وجعل موقعك (كشكل) متكامل وحتى متجاوب مع مختلف الشاشات ويتغير أماكن العناصر به طبقًا لحجم الشاشة وما إذا كانت شاشة موبايل أو شاشة حاسب أو حتى شاشة عملاقة!! فكل ذلك يتم من خلال CSS.

وهناك إطار عمل رائع ومشهور للغاية للغة CSS إسمه Bootstrap أنصحك بأن تتعلم عنه قليلًا بعد إنتهائك من CSS.

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

وكإختصار لم تم ذكرها:

أنت في حاجة لتعلم: HTML/CSS/JavaScript/PHP

وقد تحتاج لتعلم: BootStrap/jQuery/VueJs/Reat/NodeJs

ملحوظة: أغلب لغات البرمجة لها إصدارات أما بالنسبة للغة JavaScript فهي لها مقاييس بمعنى إنك تقوم بكتابتها بطريقة محددة , ولكن هناك طرق أمثل وأفضل Standard لذا فقد بزغ إلى الوجود إصدار ES المختصر ل EcmaScript وهو عبارة عن الطريقة الأحدث والأفضل لإستخدام جافاسكريبت ، وأشهر إصدار كان Es6 الذي صدر عام 2015 ,ومن بعده وحتى 2022 صدرت إصدارات كثيرة ولكنها متشابهة للغاية.

كذلك لغة HTML وصلت إلى الإصدار HTML5 ولغة CSS وصلت للإصدار CSS3

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

أطيب أمنياتنا للجميع بالتوفيق - روميسيا للخدمات الإلكترونية