اختبار الأجهزة التي تتم محاكاتها - كتاب التقنية الرقمية - الصف 11 - الفصل 1 - المملكة العربية السعودية

📚 اختبار الأجهزة التي تتم محاكاتها

المفاهيم الأساسية

محاكاة الأجهزة (Emulated Devices): قائمة بالأجهزة (مثل الهواتف والأجهزة اللوحية) يمكن اختيارها من خلال أدوات المطور في المتصفح لاختبار كيفية ظهور وتصرف الموقع الإلكتروني عليها.

خريطة المفاهيم

```markmap

تصميم الموقع الإلكتروني

أنواع CSS

صفحات الأنماط المضمنة (Inline style)

صفحات الأنماط الداخلية (Internal style sheets)

صفحات الأنماط الخارجية (External style sheets)

تنظيم HTML

استخدام وسم

ودالة class

محددات CSS

محدد Class (.)

#### استخدام النقطة (.) قبل اسم class

#### مثال: تنسيق قسم menu class

خصائص نموذج الصندوق (Box-Model)

الإطار (Border)

#### حدود تفصل بين حافة كل صندوق عن الآخر

الهامش (Margin)

#### المساحة خارج حدود الإطار

الفراغ (Padding)

#### المسافة ما بين الإطار والمحتوى

الموقع الإلكتروني المستجيب

تعريف

#### أسلوب تصميم يستجيب لخصائص الجهاز والمستخدم

مزايا

#### تحسين تجربة المستخدم

##### يتكيف مع حجم الشاشة المختلفة

##### يوفر تجربة تصفح سهلة وممتعة

#### سهولة التحديث

##### تحديث موقع واحد فقط بدلاً من مواقع متعددة

#### توفير المال

##### إنشاء موقع واحد يناسب جميع المستخدمين بدلاً من مواقع منفصلة

التصميم المستجيب

#### الأدوات

##### شبكة تخطيطية (Schematic Grid)

##### النسب المئوية للصورة

##### إطار العرض ميتا (Meta Viewport)

##### استعلامات الوسائط (Media Queries)

#### إطار العرض (Viewport)

##### التنفيذ القياسي

###### ``

###### العرض يضبط وفقًا لعرض الجهاز

###### مستوى التكبير الأولي هو 100%

###### النتيجة: صفحة مستجيبة سهلة القراءة على الهاتف (كما في الشكل 1)

##### بدون وسم إطار العرض

###### تعرض الصفحات بعرض قياسي لشاشة الحاسب

###### يتم تصغيرها لتلائم شاشة الهاتف

###### يحتاج المستخدم إلى تكبير الصفحة للتصفح

###### النتيجة: صفحة غير مستجيبة، نص وصور صغيرة جدًا (كما في الشكل 2)

اختبار التصميم المستجيب

محاكاة الأجهزة في مايكروسوفت إيدج

#### الغرض

##### اختبار مظهر الموقع على أجهزة مختلفة (هواتف ذكية، أجهزة لوحية)

#### خطوات فتح الأداة

##### 1. اضغط على أيقونة ... Settings and more (الإعدادات والمزيد)

##### 2. اضغط على More tools (المزيد من الأدوات)

##### 3. اضغط على Developer tools (أدوات المطور)

##### 4. اضغط على أيقونة Toggle Device Emulation (تبديل محاكاة الجهاز)

مثال تطبيقي: صفحة "Football Fan Page"

#### هيكل الصفحة

##### شريط التنقل (Navigation Bar)

###### الصفحة الرئيسية

###### المعرض

###### التاريخ

###### نبذة

###### اتصل بنا

##### المحتوى الرئيسي

###### عنوان: "نعمل كرة القدم على جمع الناس معًا"

###### هدف الجمهور: تشجيع اللاعبين أثناء المباراة

###### قسم "التاريخ"

####### نشأت كرة القدم بشكلها الحالي في إنجلترا منتصف القرن التاسع عشر.

####### ظهرت أندية غير منظمة في القرن الخامس عشر.

####### تأسست أندية رسمية في أواخر القرن التاسع عشر.

####### استمرت الأندية في المناطق الأكثر ثراءً حيث كان الناس لا يعملون يوم السبت.

###### قسم "المعرض"

####### صورة لفريق كرة قدم يرتدي زي أخضر وأبيض.

#### اختبار الصفحة

##### استخدام أدوات المطور (Developer Tools) في المتصفح.

##### شريط أدوات المطور يحتوي على:

###### محاكاة الأبعاد (Dimensions): Responsive, 1513 x 1300.

###### علامات تبويب: Console, Elements, Sources, Network, إلخ.

أدوات القياس

مساطر الصفحة (Rulers)

#### الوظيفة

##### قياس المسافات في الصفحة الإلكترونية بالبكسل (Pixel)

#### أنواعها

##### مسطرة العرض (Width)

##### مسطرة الارتفاع (Height)

#### طريقة الإظهار

##### 1. اضغط على أيقونة "More options" (المزيد من الخيارات).

##### 2. اضغط على Show rulers (إظهار المساطر).

اختيار جهاز محدد للمحاكاة

خطوات تحديد جهاز محدد

#### 1. اضغط على القائمة المنسدلة (البعد: الاستجابة)

#### 2. اضغط على Edit (تحرير)

#### 3. من القائمة المعروضة Emulated Devices (الأجهزة التي تتم محاكاتها) حدد الجهاز

أمثلة على أجهزة يمكن محاكاتها

#### Blackberry 230

#### Galaxy S5

#### Nexus 5

#### iPhone 4

#### Pixel 4

#### (وغيرها من القائمة الطويلة)

ملاحظة أثناء الاختبار

#### يمكن تغيير حجم نافذة العرض يدوياً وملاحظة كيف تتغير طريقة عرض محتوى الشاشة.

```

نقاط مهمة

• يمكن تحديد جهاز محدد (مثل هاتف معين) من قائمة Emulated Devices لأغراض الاختبار الدقيق.
• خطوات تحديد الجهاز هي: (1) القائمة المنسدلة، (2) Edit، (3) اختيار الجهاز من القائمة.
• أثناء الاختبار، يمكن تغيير حجم النافذة يدوياً لملاحظة استجابة التصميم.

اختبار الأجهزة التي تتم محاكاتها

يمكنك تحديد جهاز محدد من القائمة.

لتحديد جهاز محدد من القائمة:

اضغط على القائمة المنسدلة (البعد: الاستجابة)

اضغط على Edit (تحرير).

من القائمة المعروضة Emulated Devices (الأجهزة التي تتم محاكاتها) حدد الجهاز.

تعمل كرة القدم على جمع الناس معاً الهدف من حضور الجمهور في هذه اللعبة هو تشجيع اللاعبين في أثناء المباراة.

المعرض

حيث كان الناس لا يعملون بعد شهر يوم السبت وتلقوا قادين على تحمل نفقات حجز المباريات.

يمكنك تغيير حجم العرض النافذة يدوياً مع ملاحظة كيف تتغير طريقة عرض محتوى الشاشة.

وزارة التعليم Ministry of Education 2025 - 1447

260

--- SECTION: اختبار الأجهزة التي تتم محاكاتها --- اختبار الأجهزة التي تتم محاكاتها يمكنك تحديد جهاز محدد من القائمة. --- SECTION: لتحديد جهاز محدد من القائمة: --- لتحديد جهاز محدد من القائمة: اضغط على القائمة المنسدلة (البعد: الاستجابة) اضغط على Edit (تحرير). من القائمة المعروضة Emulated Devices (الأجهزة التي تتم محاكاتها) حدد الجهاز. تعمل كرة القدم على جمع الناس معاً الهدف من حضور الجمهور في هذه اللعبة هو تشجيع اللاعبين في أثناء المباراة. --- SECTION: المعرض --- المعرض حيث كان الناس لا يعملون بعد شهر يوم السبت وتلقوا قادين على تحمل نفقات حجز المباريات. يمكنك تغيير حجم العرض النافذة يدوياً مع ملاحظة كيف تتغير طريقة عرض محتوى الشاشة. وزارة التعليم Ministry of Education 2025 - 1447 260 --- VISUAL CONTEXT --- **GRAPH**: Untitled Description: A web browser window displaying a football-related webpage with developer tools open. Context: Illustrates the process of emulating devices for web development testing. **GRAPH**: Untitled Description: A web browser window displaying a football-related webpage with developer tools open, specifically showing the 'Edit' option. Context: Illustrates the process of emulating devices for web development testing, focusing on the 'Edit' option. **GRAPH**: Untitled Description: A settings panel within a browser's developer tools, showing a list of emulated devices. Context: Shows the list of available emulated devices that can be selected for testing. **IMAGE**: Untitled Description: A grid of four images related to football. Top-left: A football team posing. Top-right: The FIFA World Cup trophy. Bottom-left: The Saudi Arabian national team logo. Bottom-right: A football stadium at night. Context: Visual representation of football, likely used as a theme for the webpage being emulated.