AGC Academy

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

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

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

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

البوست ده علشان المتدربين اللي بيزعلوا اننا مش بنسمح لهم الانتقال من مستوي الي مستوي الا بعد تسليم المشروع وشرحه فيديو

تحليل وعرض صفحات الويب في المتصفح: فهم آلية عمل DOM و CSSOM و Render Tree :

طبعا في الكورس هنلاقي الشرح ده بشكل تفصيلي

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

الخطوة 1: المتصفح بيبدأ التحميل:

1. إدخال عنوان URL: المستخدم بيكتب عنوان الموقع (URL) في شريط المتصفح، زي www.agcacademy.net.

2. إرسال طلب HTTP: المتصفح بيبعت طلب HTTP إلى الخادم اللي بيستضيف الموقع للحصول على الملفات (HTML، CSS، JavaScript).

3. استجابة الخادم: الخادم بيرد على الطلب ويرسل ملفات الموقع إلى المتصفح.

الخطوة 2: تحليل ملف HTML (HTML Parsing):

1. تحميل ملف HTML: المتصفح يستلم ملف الـ HTML ويبدأ في قراءة الكود من البداية للنهاية.

2. بناء شجرة DOM:

المتصفح بيحول كود الـ HTML إلى شجرة DOM، يعني كل عنصر HTML (زي أو ) بيتحول لعقدة (Node).

شجرة الـ DOM بتتكون بالتوازي مع تحميل المتصفح لباقي الموارد زي الصور وملفات CSS.

مثال عملي:




مرحباً بكم!
هذا موقع تجريبي.



شجرة DOM الناتجة:

Document
└── html
└── body
├── h1: "مرحباً بكم!"
└── p: "هذا موقع تجريبي"

الخطوة 3: تحميل ملفات CSS وبناء CSSOM:

1. تحميل ملفات CSS: المتصفح بيحمّل أي ملفات CSS خارجية أو أكواد CSS مضمنة في الصفحة.

2. تحليل ملف CSS (CSS Parsing):

المتصفح بيحوّل أكواد الـ CSS إلى شجرة CSSOM (CSS Object Model).

شجرة الـ CSSOM بتحدد الأنماط اللي هتتطبق على عناصر الـ DOM.

مثال على CSS:

body {
background-color: ;
}
h1 {
color: blue;
font-size: 24px;
}

شجرة CSSOM الناتجة:

Stylesheet
├── body { background-color: ; }
└── h1 { color: blue; font-size: 24px; }

الخطوة 4: بناء Render Tree (شجرة العرض):

1. دمج DOM و CSSOM: المتصفح بياخد شجرة الـ DOM وشجرة الـ CSSOM ويدمجهم علشان يكوّن Render Tree.

2. استبعاد العناصر المخفية:

أي عنصر عليه display: none مش بيتضمن في الـ Render Tree.

3. إنتاج شجرة العرض النهائية: الـ Render Tree بتحتوي على العناصر المرئية فقط مع الأنماط المحسوبة.

مثال عملي:


أهلاً بيكم!
النص ده مخفي
رابط


Render Tree الناتجة:

Render Tree
└── body
├── h1: "أهلاً بيكم!" (color: blue, font-size: 24px)
└── a (href=" #"): "رابط"

الخطوة 5: Layout (التخطيط):

1. حساب التخطيط:

المتصفح بيحدد المواقع والأحجام لكل عنصر في الصفحة بناءً على الـ Render Tree.

بيتم حساب التخطيط لكل عنصر بناءً على المساحة المتاحة في الشاشة.

2. معالجة التداخل (Reflow):

لو حصل تعديل على الصفحة باستخدام JavaScript، المتصفح بيضطر يعيد حساب التخطيط (Reflow).

الخطوة 6: Painting (الرسم):

1. رسم العناصر:

المتصفح بيبدأ في رسم (Painting) العناصر على الشاشة بناءً على الأنماط المحسوبة.

بيرسم الخلفيات، الحدود، النصوص، الصور، إلخ.

2. الترتيب:

العناصر بتترسم من الخلف للأمام، يعني الخلفيات الأول، وبعدين النصوص والحدود فوقها.

الخطوة 7: Compositing (التجميع النهائي):

1. تجميع الطبقات:

المتصفح بيجمع كل الطبقات اللي رسمها في خطوة الـ Painting وبيظهرها على الشاشة كصفحة نهائية.

2. تحديث مستمر:

لو حصل تغيير ديناميكي على الصفحة (زي تحريك عنصر)، المتصفح بيعيد خطوة الـ Compositing بس من غير ما يعيد كل المراحل اللي فاتت.