الدرس 01 من 30 · 20:21
الدرس 1: كيف يعمل الويب
الفيديو والشرح بالعربية
عن هذا الدرس
تشرح هذا الدرس ما يحدث عند فتح موقع، من طلب المتصفح إلى استجابة الخادم، وعلاقة ذلك بتحسين محركات البحث. تتناول موازن الأحمال وشبكات توصيل المحتوى وقواعد البيانات، مع رسومات وتجربة في المتصفح. تساعدك الملاحظات على متابعة التسلسل وإعادة فحص الطلبات في لوحة Network.
عرض وصف الدرس كاملاًطي وصف الدرس+
01:12 العميل والخادم
العميل هو الجهاز الذي تزور الموقع من خلاله، مثل الهاتف أو الحاسوب. يرسل المتصفح طلباً إلى الخادم الذي يستضيف الموقع، ثم يتلقى الاستجابة. يناقش الدرس أهمية اتصال الخادم وتوفر الكهرباء واستمرارية الخدمة؛ فعند تعطل الخادم قد يتعذر الوصول إلى الموقع. افصل بين دور الجهاز الذي يطلب الصفحة والخادم الذي يعالج الطلب أثناء متابعة الرسوم.
03:00 رحلة الطلب من المتصفح إلى الموقع
يرسل إدخال العنوان أو النقر على رابط طلباً جديداً. يوضح الدرس علاقة اسم النطاق بعنوان IP ودور DNS في الوصول إلى الخادم. في المثال البسيط، يستقبل خادم واحد الطلب ويعيد HTML يستخدمه المتصفح لعرض الصفحة. التنقل بين المقالات يكرر الطلب والاستجابة. افحص المستند الرئيسي أولاً، ثم انتقل إلى الموارد الإضافية التي تحتاجها الصفحة.
05:45 كيف تولّد الزيارات حملاً على الخادم
قد يستخدم الموقع أشخاص كثيرون بالتزامن، ولكل منهم طلبات متكررة. يعتمد الحمل على عدد الطلبات والعمل المطلوب لكل منها. الأرقام في الشرح توضيحية وليست سعة ثابتة لكل موقع. يوزع موازن الأحمال الطلبات على عدة خوادم لتقليل تركز العمل على جهاز واحد، مع بقاء الحاجة إلى تجهيز استجابة لكل زائر.
10:29 فصل HTML عن الموارد المساندة
قد تحتاج الصفحة إلى صور وCSS وJavaScript وخطوط إلى جانب المستند. يستقبل المتصفح HTML ويكتشف المراجع ثم يطلب الملفات. يوضح المثال تقديم HTML من خادم التطبيق والموارد من CDN، مما قد يقلل طلبات الموارد على الخادم الأصلي. وقد تأتي الملفات كلها من الخادم نفسه في موقع آخر؛ لذلك يعتمد تحليل سرعة الموقع على الطلبات الفعلية.
10:45 إعادة تجربة لوحة Network
افتح الصفحة ثم Inspect وأداة Network، وأعد التحميل لتسجيل الطلبات. حدد طلب مستند HTML، ثم راجع الصور وCSS وJavaScript والخطوط ومصادرها وأحجامها واستجاباتها. قارن استجابة المستند باستجابة كل ملف. تربط التجربة الرسم بتحميل صفحة حقيقية، وتوفر بداية عملية لـتدقيق تحسين محركات البحث التقني.
15:29 فحص رموز الاستجابة
تشير 200 إلى نجاح الطلب، و404 إلى مورد غير موجود، بينما تشير 5xx إلى أخطاء في جهة الخادم. في المثال، يعيد المستند 404 بينما تعيد ملفات CSS وJavaScript استجابات ناجحة. نجاح بعض الملفات لا يثبت نجاح الصفحة المطلوبة. يعرض الدرس الفكرة تمهيداً لدرس مستقل عن استجابات HTTP.
18:54 الشيفرة الخلفية وقاعدة البيانات
يستخدم الشرح WordPress وPHP لتوضيح تجهيز HTML. تعمل PHP على الخادم وتطلب البيانات من قاعدة البيانات، ثم تستخدم النتيجة لبناء الاستجابة المرسلة للمتصفح. قد توجد القاعدة على الخادم نفسه أو على خادم آخر. راجع الرسوم لتحديد علاقة العميل والخادم وموازن الأحمال والموارد والبيانات قبل الانتقال إلى بقية الدروس.