دليل أراجيك الشامل لتعلم تطوير الويب 2019

2

لتكون مطور ويب محترف عليك أن تسلك طريقًا طويلًا ممتعًا ولكن لا يخلو من المتاعب والعقبات، فقد تطورت أدوات تطوير الويب وأصبح من الصعب معرفة بداية الطريق وشكله، وعلى رأي المثل “جميع الطرق تؤدي إلى روما” فجميع تقنيات الويب تؤدي لتطوير موقع الويب، ولكن يا ترى أين تكمن الفروقات؟ لماذا يبني أحدهم موقعًا باستخدام ووردبريس بينما يستخدم آخر Node.js؟ ولماذا يفضل مبرمج استخدام Angular ويختار الآخر استخدام React؟

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

اقرأ المزيد: كيف ترفع سرعة موقعك من خلال تحسين كود CSS ؟

محطات الطريق

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

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

اقرأ أيضًا: أفضل تطبيقات الكتابة على الصور لهواتف أندرويد و iOS

بداية الرحلة – الأدوات الأساسية لتصميم الموقع

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

  1. المتصفح: يحتاج مطور الويب المختص بتصميم الموقع إلى المتصفح بشكل شبه دائم، حيث يستخدم لتجربة الموقع أثناء عملية التصميم ومن أهم وأشهر المتصفحات الجيدة للمصممين: Google ChromeFirefox، و يعتبر متصفح كروم الأكثر شيوعًا بينهما على الرغم من قوة متصفح فايرفوكس.
  2. المحرر: يتميز تطوير الويب بإمكانية استخدام أي محرر نصوص مهما كان لكتابة الأكواد البرمجية، وهو أداة يحتاجها مصمم الموقع والمبرمج المختص بالسيرفر، ويوجد بعض البرامج الأفضل والتي توفر العديد من الإضافات الخاصة بالبرمجة لتسهيل كتابة البرامج وفهمها ومن أشهر المحررات: VS Code AtomWebStorm وجميعها قوية وملائمة لتطوير الويب إلا أن الأكثر شيوعًا بينها هو VS Code.
  3. برنامج التصميم: يحتاج المطوير إلى بعض الصور بمقاسات معينة أو بألوان معينة أو إلى تصماميم خاصة بمكونات الموقع، لذا عليهم الاتكال على أنفسهم في هذه النقطة بعض الشيء واستخدام برامج تصميم، وبالرغم من الشهرة الكبيرة لبرنامج فوتوشوب وأنه يفي بالغرض، إلا أن شركة أدوبي أطلقت برنامجًا مختصًا بتصميم واجهات المواقع وتطبيقات الموبايل يدعى Adobe XD يفضل استخدامه.

المحطة الأولى – تصميم الموقع Front-end

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

الخطوة الأولى – أساسيات التصميم HTML/CSS

غالبًا يتعلم المبتدئين الأساسيات معًا، حيث يبني المطور عناصر الواجهة عن طريق HTML ثم يرتبها ويضيف لها بعض الجمالية عن طريق CSS، ولا يمكن المضي قدمًا في تطوير الويب دون أساس جيد لا بد منه.

وهنا لا بد من ذكر بعض النقاط الهامة الواجب اتقانها في هذه الخطوة:

  • دلالات عناصر HTML5.
  • أساسيات ترتيب العناصر باستخدام CSS3.
  • الشبكة ضمن صفحة الويب وخصائص Flexbox.
  • المتحولات في CSS.
  • استخدام أدوات التطوير ضمن المتصفح.

اقرأ المزيد: أفضل سبعة طرق للوصول إلى واي فاي الجيران بسهولة 🤭!!

الخطوة الثانية – بناء تصميم Responsive

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

  • تنظيم Viewport.
  • بناء العرض بطريقة مرنة Fluid لتتناسب مع أي جهاز.
  • تنظيم عناصر الميديا (صور وفيديو).
  • استخدام الوحدات النسبية مثل rem وقت اللزوم لتحسين ظهور الموقع في مختلف الأجهزة.
  • التصميم بما يتناسب مع الموبايل إلى جانب الحاسب.

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

الخطوة الثالثة – برمجة التصميم

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

  • أنواع البيانات والتوابع والشروط والحلقات والمعاملات.
  • فهم عملية التواصل بين JS و HTML وفهم جيد للـ DOM والأحداث.
  • معرفة طرق تشكيل البيانات بطريقة موحدة مثل JSON و XML.
  • آلية إرسال الطلبات عبر الإنترنت Requests.
  • مفاهم متقدمة في JS تشمل: التوابع ذات السهم، الـ Promise وأهم مفاهيم ES6 الشهيرة.

عند هذه المحطة يمكنك أن تقول أنك أصبحت ملمًّا بأساسيات تصميم المواقع.

دليل أراجيك الشامل لتعلم تطوير الويب 2019

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

اقرأ المزيد: أهم النصائح لاختيار مطور الويب المناسب لمشروعك

الخطوة الرابعة – استخدام إطار تصميم HTML/CSS

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

الخطوة الخامسة – معرفة أساسيات jQuery

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

اقرأ أيضًا: كيفية إجبار سوق بلاي Play Store على تحديث نفسه في هواتف الأندرويد

الخطوة السادسة – معرفة أساسيات Ajax

Ajax هي اختصار لـ (Asynchronous JavaScript and XML)، وهي تقنية ويب يمكنها تحديث صفحات الويب بشكل غير متزامن من خلال تبادل البيانات مع السيرفر دون الحاجة لتحديث الصفحة، وهي مرنة بحيث يمكن تغيير كامل محتوى صفحة الويب دون تحديثها وأشهر الأمثلة عليها اقتراحات غوغل التي تظهر في مربع البحث عندما نبدأ بالكتابة.

الخطوة السابعة – استخدام Sass

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

الخطوة الثامنة – استخدام بعض الأدوات والأوامر

بعد وصول أي مطور إلى هذه المرحلة سوف يحتاج استخدام بعض الأدوات والتعليمات في واجهة الأوامر Terminal/Command line، ولا داعي للقلق حولها فالأمر بسيط ينحصر بعدد قليل من التعليمات التي يتعلمها المطور عند الحاجة ومن الأدوات الهامة:

  • استخدام Git: أي مطور سيتعامل مع git عاجلًا أم آجلًا، حيث أن تعلم أساسيات git فقط ستكون كافية عند البدء بالعمل لصالح أي شركة، فهو الأداة التي تسهل التعامل مع النسخ المطورة من الموقع إلى جانب العمل الجماعي وإدارة المشروع البرمجي. استخدم git أثناء بناء المشاريع فسيضيف ذلك نقاطًا إيجابية إلى خبراتك المهنية.
  • استخدام npm أو yarn: في الحقيقية الأداتين تستخدمان لنفس الهدف تقريبًا وبنفس الطريقة إلا أنه يمكن اعتبار Yarn مجموعة ضمن npm، وهما أداتان ﻹدارة الحزم والمكتبات والإضافات الخارجية بشكل عام، سواء كانت تلك الإضافات بلغة js أو أي لغة أو تقنية أخرى، حيث يمكن إضافتها أو حذفها بتعليمة بسيطة.

اقرأ أيضًا: للمصممين ومبرمجي الويب .. أفضل 10 إطارات عمل للغة التصميم CSS

الخطوة التاسعة – استخدام إطار برمجي JS

لم يعد منتشرًا بناء مواقع قوية دون استخدام أطر عمل تناسب حاجة الموقع، ولاختيار الإطار المناسب للموقع على المطور معرفة الخيارات المتاحة، ولعل أشهر الأطر البرمجية هي:

  • إطار React: وهو إطار طرحته شركة فيسبوك، وهو الأكثر شعبية بين مختلف الأطر البرمجية، حيث يسهل إنشاء واجهات تفاعلية محببة بفضل اعتماده مبدأ المكونات، حيث يبني المطور مكوناته الخاصة ويستخدمها في أي صفحة يشاء، كما أن المواقع المعتمدة على الرياكت تكون سهلة التحديث والتطوير وتصحيح الأخطاء، وتعمل فيسبوك بشكل دائم على تطوير وتحسين هذا الإطار ليلبي كافة حاجات المطورين، وتعتبر النسخة 16.8 الأحدث حتى الآن من مكتبة React.
  • إطار Angular: وهو الإطار الذي طرحته شركة غوغل لتسهيل عمل المطورين، حيث يعتمد على HTML وعلى لغات Javascript/TypeScript، يجمع بين القوالب والمكونات المعتمدة على بعضها البعض ويتيح أفضل الطرق لبناء موقع قابل للصيانة والتطوير بما يتناسب مع التقنيات المتطورة، وهو خيار جيد وحديث يمكن الاعتماد عليه حيث كان الأكثر شيوعًا عام 2018، والنسخة الأحدث منه اليوم هي Angular 7، لذا يمكن التفكير في استخدامه بجدية.
  • إطار Vue: تعتبر مكتبة Vue من أسهل المكتبات من ناحية التعلم، وقد ازدهرت في الآونة الأخيرة بشكل كبير، وهي من الأطر الملائمة للمشاريع الصغيرة ومواقع الصفحة الواحدة، ويمكن بسرعة كبيرة تعلمها وتطبيقها والتمتع بنتائجها، وفي الواقع فإن الشركات الكبرى بدأت باستخدامها بشكل أكبر وازدادت الرغبة بتوظيف خبراء Vue.

اقرأ أيضًا: تعرّف على كيفية إستعادة رسائل WhatsApp المحذوفة حتى بدون نسخة إحتياطية

الخطوة العاشرة – أدوات إدارة الحالة

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

  • Redux: أداة لإدارة حالة البيانات يمكن استخدامها ضمن الموقع لتحسين عمليات التحكم بالحالة.
  • VueX: وهذه أداة أخرى شهيرة لتنظيم حالة البيانات.

 هنا أصبح بإمكانك أن تطلق على نفسك اسم Front-End Developer ويمكنك الحصول على عمل.

دليل أراجيك الشامل لتطوير الويب 2019

اقرأ أيضًا: بعد إيقاف خدمة الروابط المختصرة من جوجل … إليك أفضل مواقع اختصار الروابط

المحطة الثانية – برمجة الموقع Back-end

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

الخطوة الأولى – لغات برمجة السيرفر

العديد من اللغات التي يمكن للمطور اعتمادها عند التعامل مع السيرفر وأهمها:

  • PHP: إحدى أشهر وأهم اللغات المنتشرة عالميًا والمخصصة لبرمجة السيرفر، وأكثر من نصف المواقع والخدمات التي نجدها على الإنترنت مكتوبة بلغة PHP، لذا مهما تكاثرت الشائعات عنها إلا أنها الأهم تقريبًا بين كل اللغات.
  • Node.js: هنا يمكن برمجة السيرفر باستخدام لغة جافا سكريبت التي قمنا باستخدامها مسبقًا في تصميم الموقع، وهذه النقطة تجعل التطوير باستخدام Node.js من أكثر الطرق شهرة حاليًا، لذا إن كنت ترغب بعدم تعلم لغة جديدة في تطوير الموقع من جهة السيرفر عليك اختيار Node.js.
  • Python: يمكن استخدام لغة بايثون لبرمجة السيرفر  وهي إحدى اللغات الهامة والقوية في برمجة السيرفر حول العالم.
  • C#: لغة مايكروسوفت القوية والمتعددة الاستخدامات، حيث يفضل أغلب مطوري تطبيقات سطح المكتب ممن يرغب بالانتقال لتطوير الويب باستخدام لغتهم الأم ذاتها، وهو خيار متاح أقل شهرة في الآونة الأخيرة.

اقرأ المزيد: لماذا يجب أن تتعلم تطوير الويب ؟ 10 أسباب تشرح لك

الخطوة الثانية – استخدام الأطر البرمجية

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

  • إطار Django: هو الإطار الأكثر شهرة المخصص للغة بايثون، يساعد في تنظيم وترتيب الملفات البرمجية وتسهيل العمل، وهو إطار قوي ومستخدم بكثرة إضافة لكونه مكتوب بالكامل بلغة بايثون.
  • إطار Laravel: إطار العمل الأقوى للغة PHP وبالرغم من وجود خيارات أخرى مثل إطار Symfony إلا أن لارافيل هو الأشهر.
  • إطار Express: هو الإطار الأكثر استخدامًا مع Node.js، وإن قررت استخدامها عليك إلقاء نظرة عليه وتجربته.
  • إطار ASP.NET: هو الإطار المخصص للغة C# من مايكروسوفت، وهو الإطار الوحيد لهذه اللغة لذا لا خيار بديل عنه.

الخطوة الثالثة – قواعد البيانات

لا يتم المطور خبراته دون التطرق إلى قواعد البيانات وأنواعها وأساليب التعامل معها وهنا بعضها:

  • MySQL: وهي الأكثر استخدامًا لقواعد البيانات العلائقية، وهو النوع الكلاسيكي الأشهر بين أنواع قواعد البيانات ونضيف عليه PostgreSQL و MS SQL.
  • MongoDB: هو النوع الأشهر لقواعد البيانات غير المعتمدة على SQL أو ما يسمى NoSQL، حيث تعتبر أحد أهم الأنواع لقواعد البيانات المعتمدة على الملفات والتي تحفظ البيانات على شكل أزواج، ويعتبر JSON نسخة معدلة من هذا النوع من قواعد البيانات.

اقر أيضًا: كيف تنضم إلى شركة أوبر وما هي شروط التقديم؟

الخطوة الرابعة – نظم إدارة المحتوى

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

محطة أخيرة – أدوات ومفاهيم تهم المطورين

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

  • مفهوم MVC أو (Model-View-Controller) الذي يرافق أغلب الأطر البرمجية.
  • مفاهيم HTTP/HTTPS وكل ما يتعلق بأمن الإنترنت.
  • برامج ضمن السيرفر  Apache – xampp التي تجعل السيرفر قادر على تشغيل الملفات البرمجية.
  • توافق الموقع مع SEO أي محركات البحث، حيث يبنى الموقع ضمن بعض المعايير لتحسين ظهوره في نتائج البحث.
  • برمجيات التعامل مع الملفات ضمن السيرفر وآلية نقلها للسيرفر مثل: Filezilla – SolarWinds.

هنا يمكن للمطور أن يتقول أنك Full Stack Developer وتحصل على وظيفة أحلامك كمطور ويب محترف.

دليل أراجيك الشامل لتعلم تطوير الويب 2019

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

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

2

شاركنا رأيك حول "دليل أراجيك الشامل لتعلم تطوير الويب 2019"

  1. Ali AL-khalaileh

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

أضف تعليقًا