مقدمة

كيف تصبح مصمم ومطور مواقع إلكترونية؟ أصبح أحد الاسئلة الأكثر شيوعاً بين المبتدئين في مجال تصميم وتطوير المواقع الإلكترونية. لما قد تقدمه هذه المجالات للشخص من فرص عمل سواء في شركات أو عمل حر Freelancing وانتشرت صفحات وجروبات على مواقع التواصل الإجتماعي لتبادل الخبرات في كل من هذه المجالات، أنا شخصياً لم أنتبه إليها في الوقت المناسب ومما لا شك فيه أن هذه المواقع ستوفر عليك الكثير من العناء الذي مررت به لكي أدرك حقيقة الموضوع ويصبح لدي رؤية عامة للمسار الذي يجب أن يسلكه الشخص لكي يصل إلى مستوى مُرضِِ في هذه المجالات، مما دفعني لكي أكتب هذه التدوينة.

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

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

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

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

بدأت أبحث عن الكيفية وعلمت أنه لكي أستطيع بناء موقع يجب أن أتعلم لغة HTML فقمت بتنزيل كتاب باللغة الإنجليزية كان عدد صفحاته تقريباً 600 إلى 700 صفحة ووقتها لم يكن لدي انترنت يسمح بمتاعبة الفيديو، وبدأت القراءة والتطبيق إلى أن انتهيت من الكتاب وقد أخذ مني كثيراً في الحقيقة، ولكن استطعت بناء مجموعة من الصفحات ولكن عانيت كثيراً في التنسيقات الخاصة بالصفحات، وبعد البحث اكتشفت أنه لا يمكن الإعتماد على HTML فقط، ويجب أن أدعمها بـ CSS وهي اللغة المسئولة عن التنسيقات والتي ستوفر علي مشاكل كثيرة تعرضت لها في HTML فقمت بتنزيل كتاب آخر عدد صفحاته تقريباًَ يساوي كتاب HTML وشرعت في التطبيق إلى أن انهيت الكتاب، فأصبح لدي موقع منسق يحتوي على تقريباً أربع صفحات وكان هذا في عام 2012م وما زلت أحتفظ به، وهو كما يظهر أمامكم.

وبالرغم من هذه البساطة إلا أنه أخذ مني الكثير حتى يظهر بهذا الشكل المتواضع وإلى هنا شعرت بأنه الآن أستطيع بناء موقع أكبر ولا تتخيل كم السعادة التي شعرت بها آن ذاك.

ماذا بعد ؟

هذا هو السؤال الذي انتقل بي إلى مرحلة أخرى تختلف بالكامل عن ما ذكرت سابقاً.

كانت إجابة السؤال هو أنه علي الآن تجربة مربع البحث، ومن سذاجتي اخترت كلمة من النص الظاهر أمامكم في الصفحة الرئيسية وادخلته في مربع البحث ثم نقرت على GO، ولكن أوووه   لماذا لا يعمل؟؟؟؟ وشعرت بالضيق وذهبت لأحد أصدقائي رحمه الله والذي كان يسبقني في المجال وسألته لماذا مربع البحث لايعمل، ولكنه لم يكن بذات الخبرة التي تمكنه من الرد على سؤالي لأنه ببساطة كان يستخدم أحد أنظمة إدارة المحتوى CMS المعروفة وهو (( ووردبريس ))، لكنه قال لي يا محمد إذا كان هدفك أن تمتلك موقع فقط فلا حاجة لك بكل هذا ويمكنك عمل موقع مثلي عن طريق ووردبريس.

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

الآن يمكنني الربح من الإنترنت لكن كيف ؟

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

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

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

لغة برمجة قاعدة بيانات لغة للتعامل مع قواعد البيانات

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

وبعد أن علمت أن لغة البرمجة المبني بها ووردبريس هي لغة PHP، شرعت مباشرة في دراستها بنفس الطريقة التي درست بها HTML-CSS وإلى جانبها لغة SQL حتى استطيع التعامل مع ووردبريس.

وبالفعل بعد الإنتهاء من أساسيات SQL-PHP بدأت دراسة برمجة ووردبريس نفسها وكيف قام هؤلاء المبرمجين ببناء الوظائف الموجودة في الموقع، وكنت أكتب كل شيء وأدون ملاحظاتي، ولكن ما زلت أواجه صعوبة في المنطق المتبع في بناء هذه الوظائف أو بمعنى أدق أعرف أساسيات اللغة لكن ليس عندي أسلوب تفكير، فتوقفت وبحثت عن دورة لأتعلم كيف أبني موقع كامل بلغة PHP+SQL حتى أعرف كيف أفكر وبالفعل وجدت دورة في وجهة نظري جيدة للمبتدئين ولكن باللغة الإنجليزية ويمكنك متابعتها من هذا الرابط.

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

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

وبعد هذا السرد الطويل الذي ربما استهلك وقتك ولكن أتمنى أن يكون قد ألهمك ولو بالقليل عن خطوتك التالية. أستطيع الآن أن أوجز لك القصة بأكملها فيما يلي:

أقسام بناء المواقع الإلكترونية القسم المرئي

وهو الجزء الذي يظهر للمستخدم، أي واجهة الموقع ولا يقوم بأي وظيفة ( هل تذكر مربع البحث الذي تحدثت عنه سابقاً؟) وبناء هذا الجزء المرئي يُسمى بتصميم الموقع ( أو البرنامج إذا كنت تريد عمل برامج ) ويتم بناء هذا الجزء عن طريق CSS-HTML وأنت الآن تعرف ما هم وهناك إمتدادات أخرى لها مثل CSS3-HTML5 ويجب أن تعرف أنه لا توجد CSS2 أو (2-3-4) HTML.

القسم المخفي

وهو الجزء البرمجي الخاص بالموقع والذي سيجعل الموقع ديناميكي والآن سيعمل محرك البحث الذي تحدثت عنه، وهذا الجزء تحديداً هو الجزء الأصعب والأعقد، لأنك تحتاج تعلم لغة برمجة ولغة للتعامل مع قواعد البيانات.

وبالنسبة للغة قواعد البيانات فإن SQL هي اللغة الأكثر انتشاراً ويمكنك الاعتماد عليها في الكثير من البرمجيات.

أما لغة البرمجة فهذا الأمر حير الكثير من المبتدئين وتبدأ الأسئلة تأخذا هذا الشكل

ما هي اللغة المناسبة؟ ما هي اللغة الأسهل؟ ما هي اللغة الأفضل؟

وفي الحقيقة لن تجد إجابة واضحة صريحة لهذه الأسئلة لأن كل من  يعرف لغة ما سينصح بها، ولكن ما أنصحك به هو الآتي:

لا تبحث عن الأسهل: البرمجة عامة شيء معقد وسيحتاج منك لإعمال عقلك كثيراً. ابحث عن اللغة الأكثر انتشاراً: كلما كان نطاق اللغة أكثر اتساعاً في المجال الذي تريده كلما زادت فرص عملك وأيضاً دعم أكبر عند ظهور المشاكل. لغات البرمجة جميعها تعتمد على نفس المبدأ: قم بإلقاء نظرة سريعة على عناوين أساسيات لغات البرمجة، وليكن (PHP-C#-PYTHON) ستجد أن جميع العناوين متشابهة وهذا يعني أن البرمجة ليست لغة وأنها منطق ومبدأ. فالرجل العربي عندما يكون جائعاً يقول ( أريد أن آكل ) والرجل الإنجليزي يقول ( I want to eat)، وهنا اختلف النص لكن المضمون واحد وهذا ما يحدث في لغات البرمجة المتعددة، فجميعها مضمونها واحد ولكن اختلف أسلوب التعبير. وأستطيع أن اسرد لك اساسيات جميع لغات البرمجة قبل أن تفحصها بنفسك كيف تكتب اللغة Language Syntax أنواع البيانات Data Types المتغيرات Variables المصفوفات Arrays المعاملات الحسابية (جمع – طرح – قسمة …… إلخ) المعاملات المنطقية (أكبر من – أصغر من …… إلخ) الدوال (منها ما هو مدمج في اللغة – ومنها ما ستقوم ببناءه بنفسك) ثم بعد ذلك ستنتقل لمبدأ البرمجة الكائنية OOP أو Object Oriented Programming وهو عبارة عن أسلوب برمجي موجود في جميع لغات البرمجة. لا لنسخ ولصق الأكواد : عندما تقوم بتطبيق وظيفة ما لا تبحث عن الكود فقط ثم نسخه للحصول على ما تريد، وإنما بعد حصولك على الكود لا تتركه قبل أن تفهم كيف يعمل. إياك والإستسهال: لا تسأل مباشرة بمجرد ظهور المشكلة، لكن أعصر عقلك وابحث باللغتين العربية والإنجليزية إلى أن يغلب أمرك ثم ابدأ بطرح السؤال. قم بتدوين كل شيء حتى يكون لديك مرجعك الخاص.

هناك أيضاً لغة برمجة لكن يتم تطبيقها في التصميم وهي لغة جافا سيكربت.

لغة برمجة ولكن تستخدم في التصميم؟

نعم هناك نوعان من البرمجة:

برمجة تتم ناحية الخادم Server وهي ما نعنيها ببرمجة الموقع الإلكتروني، وتسمى Server Side Scripting Language مثل (PHP – Python – ASP.net) برمجة تتم ناحية العميل، أي على جهاز الشخص الذي يتصفح الموقع وتسمى Client Side Scripting Language ومن هذه اللغات، لغة جافا سكريبت.

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

وفي الحقيقة هناك أمر يجب توضيحه، حيث أن جافا سيكربت هي لغة برمجة عادية جداً لها نفس مبادئ جميع لغات البرمجة التي ذكرناها سابقاً، ولكن هذه اللغة تتمكن من الوصول لمحتويات الصفحة عن طريق ما يسمى بـ DOM أو DOCUMENT OBJECT MODEL حيث أن المتصفح يتعامل مع محتويات الصفحات على أنها كائنات ( تجاهل المسمى إن كان يسبب لك تشتيتاً ) فإذا أردت التعديل على خصائص كائن معين تقوم بتطبيق لغة الجافاسكريبت عليه فيفهم المتصفح ذلك ويقوم بتطبيق التعديل لذلك عليك أولاً دراسة لغة جافا سيكربت أولاً ثم بعد ذلك الـ DOM.

المكتبات وإطارات العمل

بعد أن تنتهي من كل ما سبق يجب أن تعرف أن هناك ما يسمى بالمكتبات وإطارات العمل.

المكتبات

هي عبارة عن أكواد جاهزة يمكنك تطبيقها مباشرة في موقعك دون الحاجة لعمل الوظائف بنفسك. ومن هذه المكتبات، مكتبة BOOTSTRAP  وهي عبارة عن تنسيقات جاهزة لجميع محتويات الموقع الإلكتروني من قوائم ونماذج وتقسيمات وكل ما عليك هو النسخ واللصق. ولكن لا تقم باستخدامها مباشرة قبل أن تفهم HTML+CSS

وأيضاً من المكتبات المشهورة جداً، هي مكتبات JQUERY وهي مكتبة خاصة بالجافاسكريبت فبدلاً من كتابة مجموعة أسطر برمجية لعمل تأثير معين على نص ما، فعليك فقط استدعاء كود بسيط سيقوم بعمل ذلك.

إطارات العمل

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

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

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

بالنسبة لتصميم المواقع الإلكترونية

HTML CSS CSS3 HTML5 JAVA SCRIPT.

بم بعد ذلك المكتبات

Bootstrap: خاصة بـ HTML-CSS. Jquery: خاصة بـ JavaScript.

بالنسبة لبرمجة المواقع الإلكترونية

اختيار لغة البرمجة المناسبة لك ولسوق العمل وأعتقد أن اللغات الأكثر استخداما على الأقل في مجتمعنا العربي هي جافا (هناك فرق كبير بين جافا وجافاسكريبت) سي شارب #C ASP.net بايثون Python بي إتش بي PHP (تعمدت أن أضعها في الآخر حتى لا تعتقد أني أشجعك عليها) تعلم كيفية التعامل مع قواعد البيانات عن طريق SQL

ثم بعد ذلك إنتقل إلى إطارات العمل وفي الحقيقة لا أعرف ما هي إطارات العمل في اللغات الأخرى وإنما أعرف ما هو أكثر إنتشاراً في PHP وهي

laravel CodeIgniter CakePHP YII

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

وفقنا الله وإياكم  🙂