رود ماب تطوير الويب

هنتكلم النهاردة عن اعظم مجال ممكن تتعلمه المجال الي حرفيا مفيش فكرة مشروع او نشاط او حاجة هتختر علي بالك الا وهتحتاج فيها المجال ده, المجال الي مش بس هتتعلم بيه كل ال Fundamentals of Programming لا وكمان هتنمي عندك الجانب الابداعي وهيخليك تتعود علي الدقة في كل شي وهيدربك انك تكتب اكواد ضخمة توصل ل 5 او 6 تلاف سطر وتربط وتستخدم كذا لغة مع بعض, المجال ده هو ال Web Development.
وطبعا قبل منبدأ نتكلم عن الويب لازم نبقي عارفين ايه هو الانترنت اصلا ونعرف حكايته

----------------------------------------------------
# تاريخ الانترنت
حكاية الإنترنت يا سيدي تبدأ من زمان جدًا و احنا في الخمسينات، الدنيا كانت داخلة في عصر التكنولوجيا، بس كله كان بدائي جدًا، والحسابات المعقدة كانت بتتعمل على أجهزة ضخمة قد أوضتك كده، وكانت الحكومات بس هي اللي عندها القدرة على تشغيلها.
### الخمسينات: بداية الفكرة
في الفترة دي، أمريكا والاتحاد السوفيتي كانوا في منافسة شرسة بسبب الحرب الباردة، وكل واحد فيهم عايز يبقى الأقوى في التكنولوجيا. هنا بقى، الجيش الأمريكي قرر إنه محتاج نظام اتصال ما يتقطعش حتى لو حصلت حرب نووية. وهنا ظهرت فكرة "شبكة لا مركزية"
### أول شبكة في العالم
هنا دخلت وكالة اسمها ARPA وبدأت تشتغل على حاجة اسمها ARPANET، وهي أول شبكة اتصلت فيها أجهزة كمبيوتر ببعضها عبر الإنترنت. تخيل كده، أول رسالة إلكترونية تبعتت بين جهازين كانت في 1969 والرسالة كانت المفروض تكون login لكن الكوميديا إن النظام وقع بعد أول حرفين بس من الكلمة و اللي اتبعت كان lo
### السبعينات: الإنترنت بيبدأ يكبر
في السبعينات، العلماء بدأوا يطوروا حاجة اسمها بروتوكولات TCP/IP، ودي كانت الاساس اللي خلت الإنترنت يبقى بالشكل اللي نعرفه النهاردة. بقت الأجهزة تقدر تتكلم مع بعضها بطريقة موحدة بدل ما كل شبكة يكون ليها نظامها الخاص.
طبعا هتسأل نفسك سؤال يعني ايه اصلا بروتوكولات IP/TCP, ده بكل بساطة هي القواعد الي هتحدد اذاي نبعت ونستقبل البيانات.
IP بيحدد العناوين ويتأكد من توصيل البيانات لمكانها الصح.
TCP بيضمن نقل البيانات بأمان وبالترتيب الصحيح.
### الثمانينات: الويب بيبدأ يتشكل
في أوائل الثمانينات، الإنترنت كان موجود لكنه كان مقتصر على العلماء والباحثين في الجامعات والمؤسسات الحكومية. و ما كانش فيه حاجة اسمها "تصفح مواقع" أو "بحث في جوجل" لأن ببساطة الويب ماكنش لسة ظهر, الإنترنت كان مجرد وسيلة لتبادل البيانات بين أجهزة الكمبيوتر من خلال سطر أوامر ممل جدًا، يعني لازم تكتب أكواد مخصوصة عشان تبعت ملف أو تستقبل معلومة.
في 1983، تم اعتماد بروتوكول TCP/IP كنظام موحد لكل الأجهزة، وده كان خطوة كبيرة لأن الإنترنت بقى عنده لغة مشتركة تخلي أي جهاز يقدر يتواصل مع أي جهاز تاني. لكن كان لسه ناقص حاجة مهمة جدًا... إزاي نخلي الناس العادية تقدر تستخدمه بسهولة ؟
### 1989: ظهور الويب
هنا بقى ييجي بطل قصتنا، العالم البريطاني تيم بيرنرز لي، اللي كان بيشتغل في منظمة اسمها CERN في سويسرا. الراجل لاحظ إن العلماء عندهم صعوبة في مشاركة المعلومات، وكل واحد فيهم بيستخدم نظام مختلف. ففكر ليه ما نعملش نظام موحد يربط كل المعلومات دي في شبكة واحدة، ويسهل الوصول ليها من أي مكان؟
وهنا اخترع الـ (World Wide Web (WWW

تخيل كده؟ قبل كده لو كنت عايز توصل لمعلومة على الإنترنت، كان لازم تعرف مكانها بالظبط على السيرفر، لكن بعد اختراع الـ URL، بقيت تقدر تكتب عنوان بسيط زي [www.google.com](http://www.google.com) وتوصل لأي موقع بسهولة
وفي 1990، بيرنرز لي عمل أول موقع ويب في التاريخ وكان موجود على سيرفر CERN، وكان بيشرح فيه إزاي الويب بيشتغل. وده كان أول خطوة حقيقية نحو الإنترنت اللي بنستخدمه دلوقتي!
### التسعينات: الإنترنت بيبقى شعبي
مع بداية التسعينات، ظهرت أول متصفحات للإنترنت، زي Mosaic في 1993، وبعدها بسنة ظهر Netscape Navigator اللي خلّى تصفح الإنترنت أسهل بكتير، والناس بدأت تسمع عن "الإنترنت" لأول مرة.
الشركات الكبيرة بدأت تاخد بالها من الموضوع، وظهرت مواقع زي Yahoo وAmazon وبعدها Google اللي غيّرت مفهوم البحث تمامًا. الناس ماكنتش محتاجة تحفظ عناوين مواقع كتير، كل اللي عليهم يكتبوا كلمة في محرك البحث، وهو يجيب لهم كل حاجة.
في النهاية، التسعينات كانت المرحلة اللي خرج فيها الإنترنت من المعامل والجامعات، وبقى في كل بيت تقريبًا، وبدأ عصر جديد للبشرية!

----------------------------------------------------
# ايه الفرق مبين الإنترنت والويب
الإنترنت والويب دايما بيتلخبط بينهم الناس، بس في فرق واضح بينهم. خليني أديك تشبيه:
الإنترنت زي شبكة مواصلات عملاقة طرق و كباري و محطات. أي حد يقدر يستخدمها عشان يوصل لأي مكان. الشبكة دي بتنقل بيانات، سواء كانت مواقع، إيميلات، مكالمات فيديو، ألعاب أونلاين، أو حتى رسائل واتساب
اما بقي الويب هو مجرد طريق أو جزء من الإنترنت، اكنه الطريق اللي بنمشي فيه عشان نوصل للمواقع اللي بتظهر على المتصفح زي Google و YouTube و Facebook. بمعنى تاني، الويب هو الخدمة اللي بتخليك تتصفح المواقع باستخدام المتصفحات زي Chrome أو Firefox.
## طيب، الإنترنت بيشمل إيه تاني غير الويب؟
الإنترنت مش بس الويب، فيه حاجات كتير تانية بتشتغل عليه، زي:  
-  البريد الإلكتروني – زي Gmail و Outlook  
-  مكالمات الفيديو – زي Skype و Zoom  
-  الألعاب الأونلاين
-  تطبيقات المراسلة – زي WhatsApp و Telegram  

---------------------------------
# اصدارات الويب
الويب عموما كان في اصدارات والي هم Web 1.0 و Web 2.0 و Web 3.0
طب خلينا نبدأ بال web 1.0
ده يعتبر زي النسخة الأولى من الإنترنت، وكان محتواه ثابتًا (Static) يعني متقدرش تتفاعل مع الموقع ولا تكتب كومنتات ولا ايه حاجة تخش تتفرج وخلاص
وكان المواقع وقتها كانت مبنية بس بال html
ال web 2.0
ده بقي الويب التفاعلي والي هو اقرب مثال ليه هو السوشيال ميديا وهنا بقي يسيدي تقدر تعيش حياتك تخش تعمل اكونتات وتتفاعل مع الموقع وتحط ريأكتات وكومنتات وهكذا
ال Web 3.0 "الويب اللامركزي"
ده بقي هو الجيل الجديد من الويب اللي بيحاول يكون لا مركزي، يعني بدل ما كل حاجة تبقى تحت سيطرة شركات كبيرة زي جوجل وفيسبوك، لا المستخدمين نفسهم يكون ليهم تحكم أكتر في بياناتهم ومحتواهم.
والاصدار ده بقي بيعتمد علي تقنية اسمها Blockchain وده بحيث يخلي مفيش جهة واحدة تتحكم في الإنترنت، وكل واحد يكون عنده سيطرة على بياناته.
و هو لسه في مراحله الأولى، ولسه في مشاكل زي البطء والتكلفة العالية، بس مع التطوير، ممكن نشوف تغيير كبير في طريقة استخدامنا للإنترنت في المستقبل.
من الامثلة بقي ال web 3 بقي ال Bitcoin وده أول وأشهر عملة رقمية لا مركزية، مفيش بنك أو حكومة تتحكم فيها.

---------------------------------
# الرود ماب
الويب عموما بينقسم لقسمين الي هو front-end و back-end ايه الفرق ؟
فكر معايا كده في عمارة بتتكون من ايه ؟
بتتكون من عواميد وحيطان, بالظبط كده ده الويبسات العواميد هي back-end و الحيطان هي front-end
طيب نقول مثال تاني علشان نوضح الفكرة اكتر
عندك مثلا فيسبوك اول متفتحه هتلاقي ظهرلك صفحة login الصفحة ده تقدر تتفاعل معاها بمعني انت شايف الكلام المكتوب وشايف الالوان وتقدر تضغط علي اي زرار وتقدر تكتب جوه اي input موجود, اهو هو ده جزء ال front-end
طب مجرد مدخلت وكتبت ال email بتاعك و password ايه الي بيحصل الي بيحصل ان السيرفر بيدور جوة الداتا بيز علي ال email ولو لقاه بيشوف هل ال password الي انت كاتبه هو هو الي متسجل عنده في الداتا بيز ولا لو هو يبقي خلاص هيدخلك جوة الصفحة بتاعتك علي الفيس, كل ده انت مشوفتهوش بس حصل ده بقي ال back-end
طب دلوقتي انت المفروض بتتعلم ده او ده ولو عايز ممكن تتعلم الاثنين عادي وفي وقتها يبقي اسمك full-stack
طيب حلو اوي اي بقي الرود ماب الي المفروض تمشي عليها
هنبدأ الاول بال front end
هتبدأ اول حاجة تتعلمها وهي HTML هتقولي ايه ده هقولك ان ده زي الهيكل الاساسي الي تبدأ بيه فمثلا لو هندي مثال علي الانسان فده الهيكل العظمي
وبعد كده هتتعلم ال CSS وده بقي الجزي الامتع في التراك كله ده الجزي الي هتبدأ تحط فيه الوان وتعمل في animation وهكذا ولو هنرجع علي نفس المثلا فده يعتبر الهدوم
في بقي حاجتين مشهورين في css الأولى bootstrap والثانية tailwind ودول عبارة زي اكواد جاهزة تستعملها علشان تسهل على نفسك وتسرع من كتابة الكود, الحاليا الي منتشر اكتر هو tailwind
طيب بمناسبة بقي ان ال html اسمها Hyper text Markup Language لازم نتكلم عن نقطة مهمة وهي ان لغات البرمجة انواع
النوع الاول وهو programming languages
ده بقي يعتبر الطبيعي يعني وده بيستخدم في برمجة التطبيقات والانظمة
ومن امثلتها C, C++ , java, Rust, Python
النوع الثاني وهو Scripting Languages
ده بقي  بتستخدم علشان تنفذ مهام محددة داخل بيئة معينة زي JavaScript, Python, Bash, PHP
هتقولي ثواني ال Python متقررة في الاثنين هقولك ان فعلا البايثون تعتبر النوعين دول ليه ؟
لان البايثون اصلا تقدر تستخدمها في كل حاجة تقريبا بفضل كمية المكتابة الجاهزة الي فيها فتقدر تعمل بيها برامج كاملة ان تكتب بس سكربتات علشان تنفذ مهام بشكل اتوماتيك
النوع الثالث وهو Markup Languages
ده بقي لغات التوصيف، وظيفتها هيكلة البيانات وتنظيمها، مش تنفذ الأوامر برمجية وده بقي من امثلتها
ال html و xml و markdown
وبعد كدا هتتعلم ال JavaScript وده بقي يعتبر أول لغة برمجة هتتعلمها ده بقي من خلالها تقدر تعمل مثلا اما اليوزر يضغط على زرار معين يعمل اكشن معين وهكذا
وده بقي بيندرج تحته كذا حاجة زي DOM و BOM و JSON و AJAX و Jest وغيره ومتقلقش سيبها لوقتها
دلوقتي بقي هتسألني سؤال مهم والي هو انت ليه قولت علي JS انها اول لغة برمجة اومال HTML و CSS دول ايه ؟
هقولك ببساطة احنا بنقول علي ده انها لغة برمجة لو لقينا فيها امكانيات زي انك تعمل مثلا loops و if conditions او functions وغيره وده بقي الي مش موجود في ولا ال HTML ولا CSS.
وهنا بقي نستكمل الرود ماب بتاعنا و اوعا تكون زهقت صدقني الرحلة ممتعة
هتتعلم بقي حاجة اسمها Pug وده بقي الي هي HTML بس بميزات لغات البرمجة طب هتقولي ليه اتعلم html من البدايا مدام كده, هقولك لان انت متقدرش تتعامل مع pug الا وانت بتعرف تتعامل مع html غير كده انت بعد متخلص كتابة بال pug ال compiler بيحول ال pug ل html علشان البراوزير مش بيعرف يقرأ غير html و css و js بس.
وبعد كدا هتتعلم حاجة اسمها sass زي مانت توقعت نفس الكلام css يس بميزات لغات البرمجة
وبعد كده بقي هتتعلم gulp هتقولي ايه ده بقي هقولك
ده زي الاسيستانت بتاعك اصل بص تخيل انت عليك انك تحول pug ل html و sass ل css ومحتاج تضغط الكود كله في سطر واحد علشان المساحة تقل والموقع يبقى اسرع وفي كذا حاجة هتلاقي مع الوقت هتحتاجها كل ده ال gulp هيعملهولك
طيب بعد كده محتاج تتعلم ايه هتتعلم framework هتقولي ايه ده بقي ده زي مجموعة اكواد جاهزة تساعدك وانت بتشتغل أشهر ثلاثة هم react و vue و angular في الغالب الي بيطلب اكتر كشغل هو react
في بقى شوية حاجات في النص كده ممكن تتعلمها علشان تبقى اجمد اكتر زي مثلا three.js علشان تعمل بيها جرافيك وغيره بس مش موضوعنا نخلص الي فوق الاول
هتقولي بقي لا انا عايز ابقي back end
بص بقي مبدئيا هتتعلم برده Html و Css و JavaScript بس مش بتعمق اوي يكفي انك تكون فاهم ال syntax بس
وبعد كده بقى عندك اختيارات كتير ممكن تختار من بينهم فبص لو انت ناوي تكون full stack وفعلا خلصت كل اللي فوق فانا ارجح لك انك تاخد framework اسمه Node.js هتقولي ليه علشان ده مبني علي js الي انت المفروض تكون متمكن منها اول بعد ما تخلص جزئ الـ Front , وهتتعلم معاها كمان حاجة اسمها Express.js وده framework مبني علي node علشان يسهل الدنيا شوية من ناحية الكتابة يعني
طيب والمفروض ان الباك اند عموما شغلته انه يربط بين الفرونت و database عشان يخزن عليها البيانات فعشان كده لازم تكون فاهم حاجة اسمها api والداتا بيز نفسها وفي الغالب يستخدم mongoDB مع النود
طيب لو مش حابب الطريق ده ممكن تاخد طريق PHP ووقتها ال framework الي تتعلمه اسمه Laravel او ممكن تتعلم python مع Django او ممكن تتعلم #C مع net.
خلصنا كده يسيدي لا في نقطة صغيرة اوي محتاج تتعلمها وهي git
هتقولي ايه ال git ده بقي بص
في الغالب اي موقع بيتعمل بيكون تيم الي بيعمله فعلشان التيم يعرف يتواصل مع بعضه فلازم يبقي متعلم ال git.
وبس كده