تاريخ المقال طول المقال يتطلب قرائته
2784 كلمة 18 دقيقة

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

تصميم مواقع الإنترنت أو تطوير المنصات أو مطور الويب وحتى التطوير للهواتف الذكية بالتقنيات الهجينة أصبحت تقع في مجال واحد، إلا أن التخصص يختلف فيما إذا كنت تركّز على التصميم من أجل واجهة المستخدم (Front End) وهو ما يراه ويتعامل معه المستخدم النهائي لموقع الإنترنت أو التطوير في الخلفية (Back End) وهي البرمجة التي تقوم عليها هذه الواجهة لطلب البيانات ومعالجتها والتي لا يراها المستخدم النهائي.

لكلّ من الــ (Front End) و (Back End) تقنيات مختلفة ومتنوعة ولكنني سأذكر ما يحقق المعايير التالية:


  •  الأسهل في التعلم والعمل

  •  الأسرع في التنفيذ والتطوير

  •  الأكثر انتشارا واستخداما

  •  الأقوى في الحماية والأداء

  •  مفتوحة المصدر ومجانية

  •  يتوفر لها الكثير من مصادر التعلم المجانية

من المهم أن تعلم بأنه ليس عليك أن تصبح محترفا في كلا القسمين، ففي العادة هناك من هو متخصص في الـ (Back End) وآخر متخصص في الـ (Front End) ولكن لا يمكن عمل موقع احترافي ويعمل بشكل كامل بدون تواجد القسمين.

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


القسم الأول) التقنيات التي عليك تعلمها من أجل (Front End)

هي ما تسمى تقنيات الويب أو قد يطلق عليها أيضا (Web 2.0) وهو ما تراه على الشاشة عند فتح أي موقع وتتفاعل معه


أولا (HTML)

وهي ترتكز على (HTML) وهي لغة توصيف \ تنسيق وليست لغة برمجة، ففيها تقوم بتوصيف كيف تظهر النصوص والصور وباقي الوسائط على الشاشة وتستخدم فيها ما يسمى الوسوم المختلفة ليترجمها المتصفح إلى التنسيق المطلوب، مثلا الوسم (<b>) يعني أن النص هنا سيكون سميكا وكل وسم يبدأ وينتهي ويتداخل مع وسوم أخرى لكي تظهر النتيجة المطلوبة.

مثال

(<b>Bold Text</b>)

ويمكنك مشاهدة تنسيقات أي موقع عند زيارته والضغط على الشاشة بزر الفأرة الأيمن واختيار عرض الكود.

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

https://www.w3schools.com/html


ثانيا (CSS)

وهي لغة تنسيق مساندة ومعززة لـ (HTML) حيث تزيد من خيارات الوسوم الافتراضية بخيارات إضافية.

إلحاقا بالمثال السابق

(<b style='color:red'>Bold Red Text</b>)

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

لكي تقوم بإخراج صفحات موقعك بشكل أفضل عليك أن تتعلم CSS وأفضل وأسهل الطرق هو عبر هذه الوصلة:

https://www.w3schools.com/css


ثالثا (JavaScript)

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

هذا المثال للذهاب إلى الصفحة السابقة عند الضغط على الوصلة

<a href=' #' onclick='window.history.back();' >Cancel</a>

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

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

https://www.w3schools.com/js

هذه التقنيات الثلاثة (HTM, CSS, JavaScript) هي أهم وأكثر ما تحتاجه من أجل العمل على (Front end)، إلا أن هناك أطر عمل يمكنك استخدامها والتي سوف تسهل حياتك بشكل كامل للتعامل مع هذه التقنيات الثلاث.

تنبيه: نوصي وبشدة أن تمر على هذه التقنيات الثلاث وتتعلم أساسياتها على أقل تقدير قبل أن تتعلم أطر العمل التي سوف تسهل حياتك أو حتى قبل أن تبدأ في التطوير للويب من ناحية (Back End) فعدم تعلمها سوف يعيقك جدا كلما تقدمت لأنك ستبقى لا تفقه لماذا تقوم بهذا أو تستخدم ذلك.


رابعا) إطار عمل (Bootstrap)

هذا الإطار وصل حتى وقت كتابة هذه المقالة إلى الإصدار (4) وهو الإطار الأشهر والأكثر استخداما وسهولة والذي سوف يسهل حياتك في بناء مواقع إنترنت جميلة وتفاعلية؛ وهو عبارة ملفات تنسيق (CSS) معدّة سابقا بتعريفات خاصة ومعيارية لتغطية كل ما تحتاج بناءه على الشاشة، كما أن هذا الإطار يستخدم مكتبة تطوير اسمها (jQuery) وهي تعتبر كإطار مخصص للغة (JavaScript) وتحوي مئات الأكواد الجاهزة من (JavaScript) للقيام بكل ما تريده بدلا من كتابة ذلك الكود من جديد.

بواسطة (HTML) و (Bootstrap) تستطيع عمل كل ما تتمناه أو ما تراه موجودا في مواقع أخرى.

لكي تتعلم إطار العمل هذا عليك زيارة هذه الوصلة والتي تقوم بتسهيل الشرح عليك:

https://www.w3schools.com/bootstrap

وبعد ذلك عليك أن تداوم على زيارة الوصلة التالية لكي تكون هي مرجعك الأول لاحتراف إطار العمل هذا:

https://getbootstrap.com

تنويه: استخدام bootstrap قد يغنيك عن CSS بنسبة 90% أو أكثر في مجمل الحالات ولكن لا مناص من تعلم أساسيات ومداخل CSS لكي تستطيع تطويع bootstrap أكثر وجعله يخدمك ولا يقيدك.


خامسا) مكتبة (jQuery)

هي مكتبة متكاملة من أكواد (JavaScript) المصممة خصيصا للقيام بكل ما تريده داخل موقعك حيث إنها جمعت خلال سنوات تطويرها وحتى الآن كل الخيارات التي تود أن تقوم بها على موقعك، وتختصر عليك مئات الأسطر البرمجية والساعات من التطوير.

لتعَلّم المكتبة واحترافها عليك فهمُ هيكلية التعامل معها وإليك هذه الوصلة:

https://www.w3schools.com/jquery

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

https://www.codecademy.com/learn/learn-jquery

تنويه: تعلم JavaScript مهم جدا حتى لو أتقنت jQuery وذلك لبناء الأكواد الخاصة بمعالجة عملياتك المنطقية حيث إن (jQuery) تساعدك أكثر في التنسيق والعرض والتحقق ولكن لبناء كود منطقي خاص بخوارزمية خاصة بك فعليك أن تستخدم JavaScript.


سادسا) فهم التصميم للشاشات الصغيرة responsive-design

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

هنا في هذه الوصلة دورة على الإنترنت تساعدك في فهم هذه الهيكلية:

https://www.codecademy.com/learn/learn-responsive-design

نستطيع أن نقول هنا بأنك قد انتهيت من جزئية الـ (Front End) ولكنك بحاجة إلى مصمم جرافيك من أجل الصور المستخدمة، مع العلم أنك تستطيع بناء موقع كامل بدون أي صورة وبالطبع أفضل البرامج في هذا المجال هي (PhotoShop) وليس عليك أن تكون مصمما حتى تتقن تقنيات الويب ولكن المعرفة في هذا البرنامج سوف تساعدك.


معلومة مفرحة

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

للتعرف على أفضل منصات التطوير الهجينة لتطبيقات الهواتف الذكية قم بزيارة الوصلة التالية:

https://ionicframework.com

معلومة مفيدة جدا

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

استخدم الرابط التالي للوصول السريع إليها:

https://goo.gl/DgTneH


التقنيات التي عليك تعلمها من أجل (Back End)

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

باختصار لو أصبحت مطورا لـ (Back Endفقط فستكون بحاجة دائما إلى شخص مساند، بالإضافة إلى أنك ستقوم بكتابة مكتبات برمجية لكي يتمكن غيرك من استخدامها مما يفقدك متعة رؤية ما تقوم بعمله على أرض الواقع.


أولا) لغة البرمجة

هناك عشرات لغات البرمجة المعدة للتطوير للـ (Back End) والكثير منها مناسب للتطوير ولكن سوف أختار (PHP) لأنها تتناسب مع المعايير التي وضعتها لهذه المقالة (الأسهل، الأسرع، الأقوى، الأكثر انتشارا، الأكثر استخداما، مفتوحة المصدر ومجانية) وأضيف على ذلك بأن تتوفر لها عدة أطر عمل جاهزة وتقنيات الويب والتي سوف تساعدك في استخدامها مباشرة وتوفير الكثير الكثير من الوقت عليك، كما أنه من الممكن توفيرها على كل نظم التشغيل لكي تستطيع التطوير بواسطتها مثلا (ويندوز، ماك، لينوكس بكل التوزيعات).

معلومة: أي مطور بأي لغة برمجية سيكون من السهل عليه جدا الانتقال إلى (PHP).

لتعلّم التطوير بواسطة (PHP) عليك البداية من هنا:

https://www.w3schools.com/php


ثانيا) قواعد البيانات

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

يوجد الكثير من قواعد البيانات ولكننا أيضا سنختار ما هو مناسب لمعايير مقالنا وسيقع الاختيار على (MySQL) ولكن الجميل في الموضوع أن كل قواعد البيانات تتشارك في لغة التعامل معها وذلك عبر لغة استعلامات هيكلية تسمى (SQL) وهي فعلا كل ما يهمك للتعامل مع أي قاعدة بيانات عبر تمرير هذه الاستعلامات عن طريق لغات البرمجة لها.

لتعلّم لغة الاستعلامات الهيكلية عليك بزيارة هذه الوصلة:

https://www.w3schools.com/sql


ثالثا) إطار عمل التطوير (Laravel)

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

تتميز Laravel بأنها متوافقة أساسا مع أطر عمل الويب الأساسية (Bootstrap, jQuery) وتعمل بمنهجية (MVC) موفرة بذلك طبقات للتعامل بشكل سريع مع قواعد البيانات بمعرفة أساسيات لغة (SQL) وبالطبع كل هذا بواسطة اللغة الأجمل (PHP).

وهنا تجد أفضل الدروس التعليمية لتعلمها:

https://laracasts.com/series/laravel-from-scratch-2017


هل هذا كل شيء؟

بالتأكيد لا، فهذا العالم كبير جدا ومتشعب ولكن إن اتبعت الخطوات السابقة فستكون قد قطعت 90% من الطريق وعرفت الخطة التي تحتاجها في طريقك للاحتراف فيه.

هل استفدت؟


اُدعوا لي ولوالدي وعائلتي ولجميع المسلمين بالرحمة والمغفرة والرزق