خارطة الطريق لبرمجة المواقع

1. مقدمة

 

1.1. ماذا سأستفيد من هذا المقال

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

1.2. كيف تعمل المواقع

الموقع يتكون بشكل أساسي من مجموعة من الملفات والصفحات المترابطة مع بعضها، هذه الملفات تُخزّنُ على خادم (Server) وهو جهاز كمبيوتر تكون بالغالب مواصفاته قوية جدا ويعمل على مدار 24 ساعة دون انقطاع، فعند كتابتك في المتصفح لرابط أي موقع يقوم المتصفح بطلب ملفات الموقع من الخادم لعرضها للمستخدم كما توضح الصورة التالية:

 

 

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

 

2. البداية

2.1. ما هي المتطلبات السابقة لتعلم تطوير المواقع

المتطلبات السابقة موجودة في النقاط أدناه وهي ملونة بحسب التصنيف التالي:

الأحمر: مهم وقد تواجه بعض الصعوبة إن تجاوزته.

الأخضر: تفضيل شخصي من وجهة نظري.

 

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

 

2.2. أقسام تطوير وتصميم المواقع

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

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

 

1. البرمجة من جهة العميل ( Client Side - Frontend):

 

وضحنا سابقا أن الموقع يعمل عن طريق إرسال طلب من المتصفح إلى السيرفر، ثم يرسل السيرفر الاستجابة، والاستجابة تحتوي على عدد من الملفات، من الملفات المهمة هي ملفات لغة جافاسكربت (Javascript) فبما أن السيرفر يقوم بإرسال كود جافاسكربت إلى العميل، فإن هذا يعني أن كود جافاسكربت لن يتم تنفيذه على السيرفر، إنما يتم إرساله إلى العميل ثم يُنفذ على جهاز العميل، والفائدة من هذه العملية هو تنفيذ مهام أو عمليات معينة داخل الموقع بالتعامل مع عناصر الموقع ( كالأزرار والنصوص وغيرها ) وتُنفذ العملية بشكل مباشر أمام المستخدم، لأن الكود ينفذ على جهازه وليس على السيرفر، فعند تنفيذ عملية معينة باستخدام جافاسكربت، لا داعي لإرسال طلب إلى السيرفر ليقوم بدوره بالاستجابة، فالكود موجود على جهازك أنت وسينفذ في جهازك مباشرة، وهناك العديد من الأمثلة على ذلك، فعند كتابتك لسؤال مثلا في عالم البرمجة، ستلاحظ وجود مكان لكتابة الكلمات الدلالية للسؤال، وعند ضغط زر Enter بعد كتابة الكلمة، تجد أن لون خلفية الكلمة قد تغير إضافة إلى ظهور زر لحذفها، وتلاحظ أيضا أن العملية تمت مباشرة وتحصل هذه العملية حتى إن فصلت اتصال الانترنت عن جهازك، لأن هذه العملية تم تنفيذها على جهازك وليس على السيرفر لذلك لم تحصل عملية طلب واستجابة ( Request - Response ) فلم يؤثر انقطاع اتصال الانترنت على هذه العملية.

 

2. البرمجة من جهة الخادم (Server side - Backend):

 

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

 

2.3. كيف يعرض المتصفح صفحات الموقع

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

لكن كيف تنتقل هذه العناصر من السيرفر ويفهمها المتصفح ثم يعرضها؟

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

في السابق كان بإمكان تحديد الألوان وبعض الخصائص الشكلية للعناصر عن طريق HTML، لكن بعد الاصدار الخامس منها أصبح هذا الأمر غير مفضلا، فهناك بالفعل لغة أخرى متخصصة في أمور التصميم والألوان وغيرها من الخصائص المتعلقة بالشكل، لذلك حُذِفت هذه الخصائص من الاصدار الخامس لتوحيد طريقة التصميم (Styling). فأصبح كل ما يتعلق بالتصميم يتم عن طريق لغة CSS ( وهي أيضا ليست لغة برمجة ).

 

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

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

 

3.1. لغة html

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

<div>
    <h1> عنوان المقالة </h1>
    <p> محتوى المقالة </p>
</div>

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

 

وهذه بعض المصادر لتعلم Html ( اختر واحدا فقط ):

ًW3Schools

Tutorials Point

 

3.2. لغة CSS

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

p {
    background-color: red;
}

هنا قمنا "بإمساك" وسم p الخاص بـ html ( وهي المقالة بحسب المثال السابق ) وقمنا بإضافة خاصية لون الخلفية مثلا وهو في المثال باللون الأحمر.

مصادر للتعلم:

W3Schools

Tutorials Point

 

3.3. أين أتوقف!

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

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

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

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

 

3.4. خذ استراحة

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

 

4. البرمجة من جهة العميل ClientSide Development

4.1. البداية

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

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

 

4.2. خذ استراحة

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

 

4.3. ما هي Jquery وهل تلزمني؟

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

 

4.4. خذ استراحة ثانية!

بعد تعلم Jquery، قم بإنشاء مشروع آخر باستخدام ما تعلمته سابقا، ويمكنك أيضا استخدام وتعلم إطار عمل لـ Css (مجموعة كبيرة من الكلاسات الجاهزة) لتسهيل عملك في المشروع ولإنشاء موقع متوافق مع الشاشات الصغيرة بسهولة، مثل Bootstrap، فخلال هذا المشروع بإمكانك تطوير نفسك في كل من جافاسكربت و Css.

 

5. البرمجة من جهة السيرفر Server Side

5.1. البداية

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

لكنك ربما قد لاحظت أنك بحاجة إلى تخزين بيانات لها علاقة بمحتوى الموقع، كبيانات المستخدمين، أو بيانات السِلَعْ المعروضة للبيع، وغيرها من البيانات، كما أنك قد تحتاج إلى تخزين بعض الصور على سيرفر، او ربما بعض الملفات الأخرى.

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

في البرمجة من جهة العميل كان لدينا خيار واحد وهو Javascript، أما هنا فبما ان الكود سيتم تنفيذه على السيرفر فلدينا العديد من الخيارات، أي لغة قد تُستخدم للبرمجة من جهة السيرفر، ومنها:

• Python
• Java
• Javascript ( باستخدام NodeJs)
• PHP
• Ruby
• GoLang
• Kotlin

والعديد من اللغات الأخرى التي يمكن استخدامها ولا مجال لحصرها هنا.

 

5.2. أي لغة أختار

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

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

ولا تنسى أن عليك أيضا تعلم قواعد البيانات حتى تتمكن من تخزين البيانات التي تريدها.

 

5.3. استراحة طويلة

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

 

---

 

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

 

Roadmap to becoming a web developer in 2018

وهذه ترجمة باللغة العربية لخارطة الطريق السابقة

 

https://3alam.pro/alhoqbani/articles/developer-roadmap

 

---

حقوق صورة المقال الرئيسية

كلمات دليلية: javascript web برمجة مواقع