تدريب 7 - كتاب التقنية الرقمية - الصف 11 - الفصل 1 - المملكة العربية السعودية

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

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

خطوات الحل:

1. **الشرح:** لنفهم هذا السؤال. المطلوب هو اختبار خاصية "الاستجابة" (Responsiveness) لعنصر الصورة في صفحة ويب. الفكرة هنا هي أن الصفحة يجب أن تعرض بشكل جيد على شاشات بأحجام مختلفة، مثل شاشات الهواتف الذكية والأجهزة اللوحية. لتنفيذ ذلك، نستخدم أداة "محاكاة الأجهزة" (Device Emulation) الموجودة في أدوات المطورين في متصفح مايكروسوفت إيدج. هذه الأداة تسمح لك بعرض الصفحة كما لو كنت تستخدم هاتفًا ذكيًا محددًا. نقوم باختيار عدة هواتف ذكية من القائمة (مثل iPhone و Samsung Galaxy) ونلاحظ كيف تبدو الصفحة على كل منها. نركز على الصورة التي أضفناها في التدريب السابق: هل تتغير أبعادها (العرض والارتفاع) تلقائيًا لتناسب حجم الشاشة الجديد؟ هذا هو اختبار "الاستجابة". ثم نقارن سلوك الصورة مع سلوك العناصر الأخرى في الصفحة، مثل العناوين والنصوص. عادةً، النصوص الجيدة تلف تلقائيًا (تنتقل إلى السطر التالي) عندما يضيق عرض الشاشة. من خلال هذه المقارنة، نستنتج إذا كانت الصورة "مرنة" (Responsive) مثل النصوص أم لا. إذا لم تكن مرنة، فقد تظهر مقطوعة أو كبيرة جدًا على شاشة صغيرة. إذن الاستنتاج هو: **يجب ضبط خصائص الصورة (مثل العرض بنسبة مئوية max-width: 100%) في كود CSS لجعلها مرنة وتتغير أبعادها تلقائيًا مع حجم الشاشة.**

سؤال تدريب 8: أضف فئتين (Classes) مختلفتين للعناوين الرئيسة وفئتين مختلفتين للنصوص، وذلك لإنشاء رسالة إخبارية بنمط مختلف وأكثر كفاءة، وذلك في ملف CSS الخارجي للرسالة الإخبارية لمشجعي فريق الصقور الخضر لكرة القدم. وقد تتضمن الفئات عائلة خطوط (Font-Family) مختلفة أو يكون حجم الخط (Font-Size) أو عرضه (Font-Weight) أو نمطه (Font-Style) مختلف. استخدم ما سبق لإعادة كتابة نفس الرسالة الإخبارية بنمط عنوان ونص مختلفين.

الإجابة: س8: تم إنشاء 4 فئات (للعناوين والنصوص) وتطبيقها، مما جعل الرسالة أكثر تنظيمًا ووضوحًا.

خطوات الحل:

1. **الشرح:** الفكرة في هذا السؤال هي تحسين تصميم صفحة الويب باستخدام CSS بطريقة منظمة. بدلاً من تطبيق الأنماط مباشرة على كل عنصر، نستخدم "الفئات" (Classes). نبدأ بإنشاء ملف CSS خارجي (مثل style.css) ونربطه بصفحة HTML للرسالة الإخبارية. ثم ننشئ أربع فئات: 1. فئتين للعناوين الرئيسية (مثل .main-title و .sub-title). 2. فئتين للنصوص (مثل .news-text و .caption-text). لكل فئة، نحدد خصائص نمط مختلفة. على سبيل المثال: - **عائلة الخطوط (Font-Family):** يمكن أن نستخدم خط Arial للعناوين وخط Times New Roman للنصوص. - **حجم الخط (Font-Size):** نجعل العناوين كبيرة (مثل 24px) والنصوص أصغر (مثل 16px). - **عرض الخط (Font-Weight):** نجعل العناوين عريضة (bold) والنصوص عادية (normal). - **نمط الخط (Font-Style):** يمكن جعل أحد عناوين الفرعية مائلًا (italic). بعد تعريف هذه الفئات في ملف CSS، نعود إلى ملف HTML للرسالة الإخبارية. نزيل الأنماط القديمة (إذا كانت موجودة) ونطبق الفئات الجديدة على العناصر المناسبة باستخدام السمة class=""، مثل <h1 class="main-title">. بهذه الطريقة، يصبح الكود أكثر نظافة وسهولة في الصيانة. إذا أردنا تغيير نمط جميع العناوين من نوع معين، نغير الخصائص مرة واحدة في فئتها في ملف CSS، وسيتم تطبيق التغيير على كل العناصر التي تستخدم تلك الفئة تلقائيًا. إذن النتيجة هي: **إنشاء صفحة ويب أكثر تنظيمًا وسهولة في التعديل، حيث يتم فصل المحتوى (HTML) عن التصميم (CSS)، مما يحسن الكفاءة والوضوح.**

عند مقارنة سلوك الصورة المستجيبة مع النصوص في صفحة ويب، ما الذي يحدث عادةً للنصوص عندما يضيق عرض الشاشة؟

• أ) تتقلص أحجام أحرف النصوص بنسبة ثابتة.
• ب) تختفي النصوص تمامًا لتحسين الأداء.
• ج) تلتف النصوص تلقائيًا (تنتقل إلى السطر التالي) لتناسب عرض الشاشة.
• د) تتحول النصوص إلى صور ثابتة.

الإجابة الصحيحة: c

الإجابة: تلتف النصوص تلقائيًا (تنتقل إلى السطر التالي) لتناسب عرض الشاشة.

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

تلميح: فكر في كيفية تكيف الفقرات النصية مع الشاشات الضيقة.

التصنيف: مفهوم جوهري | المستوى: سهل

ما الهدف الأساسي من استخدام خاصية 'محاكاة الأجهزة' (Device Emulation) في متصفح مايكروسوفت إيدج عند تطوير صفحات الويب؟

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

الإجابة الصحيحة: b

الإجابة: اختبار استجابة الصفحة (Responsiveness) وتصميمها على أحجام شاشات مختلفة مثل الهواتف الذكية.

الشرح: 1. تتيح خاصية محاكاة الأجهزة للمطورين عرض صفحة الويب كما لو كانت تعرض على جهاز محدد (مثل iPhone). 2. الهدف هو اختبار قدرة عناصر الصفحة (مثل الصور والنصوص) على التكيف مع أحجام الشاشات المختلفة. 3. هذا الاختبار يضمن أن التصميم يكون 'مستجيبًا' (Responsive) ويقدم تجربة مستخدم جيدة على جميع الأجهزة.

تلميح: تتعلق هذه الخاصية بكيفية ظهور المحتوى على أجهزة متعددة.

التصنيف: مفهوم جوهري | المستوى: متوسط

ما الفائدة الرئيسية من استخدام فئات (Classes) CSS خارجية لتنسيق عناصر صفحة ويب، كما في حالة تنسيق العناوين والنصوص في رسالة إخبارية؟

• أ) زيادة سرعة استجابة خادم الويب الذي يستضيف الصفحة.
• ب) منع المستخدمين من نسخ نص المحتوى من الصفحة.
• ج) فصل المحتوى (HTML) عن التصميم (CSS)، مما يجعل الكود أكثر تنظيماً وسهولة في الصيانة والتعديل.
• د) تشفير ألوان الصفحة وجعلها سرية.

الإجابة الصحيحة: c

الإجابة: فصل المحتوى (HTML) عن التصميم (CSS)، مما يجعل الكود أكثر تنظيماً وسهولة في الصيانة والتعديل.

الشرح: 1. الفصل بين HTML (الهيكل) وCSS (التصميم) يحسن تنظيم المشروع. 2. يمكن تعديل تصميم جميع العناصر التي تستخدم نفس الفئة من مكان واحد (ملف CSS). 3. يسهل إعادة استخدام أنماط التصميم على صفحات وعناصر مختلفة. 4. يجعل الكود أنظف وأسهل للقراءة والفهم من قبل المطورين الآخرين.

تلميح: تتعلق الفائدة بتنظيم العمل وإعادة الاستخدام.

التصنيف: مفهوم جوهري | المستوى: متوسط

أي من الخصائص التالية في CSS يمكن استخدامها داخل فئة (Class) لتحقيق نمط نصي مختلف، كما هو مذكور في نص التدريب؟

• أ) الهامش (Margin) والحشوة (Padding) والحدود (Border).
• ب) عائلة الخطوط (Font-Family) وحجم الخط (Font-Size) وعرض الخط (Font-Weight) ونمط الخط (Font-Style).
• ج) الموقع (Position) والتعويم (Float) والفلاتر (Filter).
• د) التحويلات (Transform) والانتقالات (Transition) والرسوم المتحركة (Animation).

الإجابة الصحيحة: b

الإجابة: عائلة الخطوط (Font-Family) وحجم الخط (Font-Size) وعرض الخط (Font-Weight) ونمط الخط (Font-Style).

الشرح: 1. تُستخدم خصائص CSS لتحديد مظهر النص. 2. Font-Family: تحدد نوع الخط (مثل Arial). 3. Font-Size: تحدد حجم الخط (مثل 16px). 4. Font-Weight: تحدد سماكة الخط (مثل bold). 5. Font-Style: تحدد نمط الخط (مثل italic). 6. هذه الخصائص مجتمعة تُستخدم لإنشاء أنماط نصية مميزة لفئات مختلفة.

تلميح: تتعلق الخصائص بمظهر النص وليس بموقعه.

التصنيف: تعريف | المستوى: سهل