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

📚 اختبار مدى استجابة الرسالة الإخبارية

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

جهاز المحاكاة (Device Emulation): أداة ضمن أدوات المطور في متصفح مايكروسوفت إيدج تُستخدم لاختبار كيفية عرض وتكيف صفحة ويب (مثل الرسالة الإخبارية) مع أجهزة وأحجام شاشات مختلفة.

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

```markmap

الدرس السادس: الرسائل الإخبارية الرقمية

إنشاء ملف HTML ووضع المحتوى فيه، وضبط نمط الرسالة

أضف نمط التذييل إلى خلية الجدول الأخيرة

#### محتوى التذييل

• روابط خارجية
• بريد إلكتروني للمراسلة
• رابط إلغاء الاشتراك في الرسائل الإخبارية

#### مثال تطبيقي (CSS Code for .thefooter)

• `.thefooter`: النمط العام للقسم

- `overflow: auto;` (يضيف شريط تمرير عند الحاجة)

- `padding-top: 20px;`

- `padding-bottom: 20px;`

- `text-align: center;`

• `.thefooter p`: تنسيق الفقرات

- `color: #f5f5f5;` (ألوان الخطوط)

- `text-align: center;`

• `.thefooter ul` و `.thefooter li`: تنسيق القوائم والروابط

- `display: inline-block;`

- `text-decoration: none;`

- تأثير التمرير (`:hover`): `background-color: #d6d599;`

#### مثال مرئي (Newsletter Template)

• عنوان: "تتبع أخبار المسار الناجح لفريق الصقور الخضر"
• تذييل يحتوي على:

- روابط: UEFA.com, Fifa.com

- بريد: info@example.com

- نص: "لإلغاء الاشتراك في الرسائل الإخبارية اضغط هنا"

اختبار مدى استجابة الرسالة الإخبارية

استخدام جهاز المحاكاة (Device Emulation)

#### الوظيفة

• محاكاة عرض الصفحة على هواتف ذكية وأجهزة محددة.
• تكبير أو تصغير عرض الصفحة ليتناسب مع عرض إطار الجهاز المحدد.
• إمكانية التمرير العمودي للمستخدم.

#### أمثلة على الأجهزة القابلة للمحاكاة

• BlackBerry Z30
• Galaxy Note 3, Galaxy S8, Galaxy S9+
• Microsoft Lumia 550, Microsoft Lumia 950
• Nexus 5, Nexus 6
• Pixel 3

#### مثال تطبيقي مرئي

• صفحة "NEWSLETTER.html" معروضة في نافذة محاكاة.
• مستوى التكبير: 75%.
• محتوى: عنوان "SAUDI ARABIA NATIONAL TEAM" وصورة ملعب ونص إخباري عربي.

```

نقاط مهمة

• الغرض من الاختبار هو معرفة مدى استجابة الرسالة الإخبارية الرقمية على أجهزة مختلفة.
• عند اختيار جهاز محدد في أداة المحاكاة، يتم تعديل عرض الصفحة تلقائياً ليتناسب مع ذلك الجهاز.
• توفر الأداة قائمة طويلة من الأجهزة النموذجية لمحاكاة الاختبار عليها.
• يمكن في بيئة المحاكاة ضبط مستوى تكبير الصفحة (مثل 75%).
• تظهر أدوات المطور أيضاً لوحة حالة تبيّن إذا كانت هناك أخطاء أو تحذيرات متعلقة بالصفحة.

اختبار مدى استجابة الرسالة الإخبارية

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

اضغط لفتح جهاز المحاكاة (Device Emulation)

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

fo@example.com

لإلغاء الاشتراك في

اختبار مدى استجابة الرسالة الإخبارية يمكنك استخدام جهاز المحاكاة في أدوات المطور في مايكروسوفت إيدج وذلك لمعرفة مدى استجابة الرسالة الإخبارية الرقمية التي أنشأتها، وعند تحديد هواتف ذكية محددة، يمكنك ملاحظة أن عرض الصفحة يتم تكبيره أو تصغيره إلى عرض (Width) إطار العرض للجهاز المحدد، ويمكن للمستخدم التمرير عمودياً إذا لزم الأمر. اضغط لفتح جهاز المحاكاة (Device Emulation) عزيزي، مسرح كرة القدم، المملكة الـ... إذا كنت مشجعًا كبيرًا لـهـ... أسيا، لذلك إذا كنت مطلعًا بمواعيد المباريات وأوقات... بالـقـنـوات الـتـلـفـزيـونـيـة الـتـي تـعـرضـهـا حـدود... إطـارك الـغـرق وتـفـاصـيـل أخـرى... الإخـبـاريـة عـلـى جـمـيـع الـمـعـلـومـات الـتـي... وستـتـاح لـديـك مـن كـل شـهـر فـرصـة لـ... لـفـريـقـهـم الـمـفـضـل. fo@example.com لإلغاء الاشتراك في --- VISUAL CONTEXT --- **DIAGRAM**: Responsive Description: A dropdown menu showing a list of devices for emulation, including Blackberry Z30, Blackberry PlayBook, Galaxy Note 3, Galaxy Note II, Galaxy S III, Galaxy S8, Galaxy S9+, Galaxy Tab S4, Kindle Fire HDX, LG Optimus L70, Microsoft Lumia 550, Microsoft Lumia 950, Moto G4, Nexus 10, Nexus 4, Nexus 5, Nexus 5X, Nexus 6, Nexus 6P, Nexus 7, Nokia Lumia 520, Nokia N9, Pixel 3. Table Structure: Headers: N/A Rows: Row 1: BlackBerry Z30 Row 2: BlackBerry PlayBook Row 3: Galaxy Note 3 Row 4: Galaxy Note II Row 5: Galaxy S III Row 6: Galaxy S8 Row 7: Galaxy S9+ Row 8: Galaxy Tab S4 Row 9: Kindle Fire HDX Row 10: LG Optimus L70 Row 11: Microsoft Lumia 550 Row 12: Microsoft Lumia 950 Row 13: Moto G4 Row 14: Nexus 10 Row 15: Nexus 4 Row 16: Nexus 5 Row 17: Nexus 5X Row 18: Nexus 6 Row 19: Nexus 6P Row 20: Nexus 7 Row 21: Nokia Lumia 520 Row 22: Nokia N9 Row 23: Pixel 3 Context: Illustrates the device emulation feature in developer tools, allowing testing of responsive design across various screen sizes and devices. **DIAGRAM**: NEWSLETTER.html Description: A web browser window displaying a newsletter. The URL bar shows 'NEWSLETTER.html'. The zoom level is set to 75%. There is a 'No throttling' option selected. The content area shows a header with 'SAUDI ARABIA NATIONAL TEAM' and a stadium image, followed by Arabic text that appears to be a news article. Context: Represents a web page being viewed in a simulated device environment, demonstrating how the newsletter would render. **DIAGRAM**: Untitled Description: A panel within the browser's developer tools showing status messages. It indicates 'No messages', 'No user messages', 'No errors', 'No warnings', and 'No info'. It also shows 'No verbose'. Context: Shows the status panel in developer tools, indicating no active messages or errors related to the current web page.