إضافة أزرار في برنامج Pencil - كتاب هندسة البرمجيات - الصف 12 - الفصل 1 - المملكة العربية السعودية

الكتاب: كتاب هندسة البرمجيات - الصف 12 - الفصل 1 | المادة: هندسة البرمجيات | المرحلة: الصف 12 | الفصل الدراسي: 1

الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم

الدرس: لإضافة زر

📚 معلومات الصفحة

الكتاب: كتاب هندسة البرمجيات - الصف 12 - الفصل 1 | المادة: هندسة البرمجيات | المرحلة: الصف 12 | الفصل الدراسي: 1

الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم

نوع المحتوى: درس تعليمي

مستوى الصعوبة: مبتدئ

📝 ملخص الصفحة

تشرح هذه الصفحة خطوات إضافة أزرار إلى واجهة مستخدم تطبيق محمول باستخدام برنامج Pencil لنمذجة الواجهات. تبدأ العملية بسحب زر مركز من قسم Mobile - Android ICS وإفلاته في منتصف الشاشة، ثم تسميته باللغة الإنجليزية مثل 'Discover'. بعد ذلك، تُكرر الخطوات نفسها لإضافة زر ثاني مكتوب باللغة العربية، مما يوضح كيفية تصميم واجهات متعددة اللغات.

يتم عرض العملية من خلال لقطات شاشة توضح واجهة برنامج Pencil، حيث تُظهر اللوحة الجانبية عناصر واجهة المستخدم مثل Mobile - Android ICS وزر Focused Button. تُبرز اللقطات كيفية سحب العنصر ووضعه على الشاشة الرئيسية التي تمثل هاتفًا محمولًا بخلفية خضراء وشعار العلم السعودي.

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

📄 النص الكامل للصفحة

--- SECTION: لإضافة زر --- لإضافة زر من قسم Mobile - Android ICS (الهاتف المحمول - أندرويد ICS)، اسحب شكل Focused Button (زر مركز) وأفلته في منتصف الشاشة. 1 اضغط ضغطًا مزدوجًا وسم الزر Discover (اكتشف). 2 شكل 2.25: إضافة زر باللغة الإنجليزية. كرر الخطوات التي اتبعتها عند إضافة الزر لإضافة زر ثاني عنوانه مكتوب باللغة العربية. شكل 2.26: إضافة زر باللغة العربية وزارة التعليم Ministry of Education 2025 - 1447 102 --- VISUAL CONTEXT --- **FIGURE**: شكل 2.25: إضافة زر باللغة الإنجليزية. Description: A screenshot of the Pencil UI prototyping tool. The left panel shows a 'Search for shapes' bar and a list of UI elements, including 'Mobile - Android ICS' components. The main canvas displays a mobile phone screen with a green background and the Saudi Arabian flag emblem. A button labeled 'Discover' is visible on the phone screen, highlighted by the number 2. The number 1 points to the 'Focused Button' element in the 'Mobile - Android ICS' section of the left panel, indicating it's being dragged or selected. Key Values: Pencil UI tool, Mobile - Android ICS, Focused Button, Discover button Context: Illustrates the initial step of adding an English-labeled button to a mobile user interface using the Pencil software. **FIGURE**: شكل 2.26: إضافة زر باللغة العربية Description: Another screenshot of the Pencil UI prototyping tool, similar to the previous one. The left panel again shows the UI elements. The mobile phone screen on the canvas now displays two buttons: 'Discover' (English) and a second button below it labeled 'اكتشف' (Arabic for Discover). This demonstrates the result of repeating the button-adding steps to include a button with an Arabic label. Key Values: Pencil UI tool, Discover button (English), اكتشف button (Arabic) Context: Illustrates the process of adding a second button with an Arabic label to the mobile user interface, building upon the previous steps.

🎴 بطاقات تعليمية للمراجعة

عدد البطاقات: 5 بطاقة لهذه الصفحة

ما هي الخطوات المطلوبة لإضافة زر إلى واجهة مستخدم في أداة Pencil UI؟

الإجابة: 1. من قسم Mobile - Android ICS، اسحب شكل Focused Button وأفلته في منتصف الشاشة. 2. اضغط ضغطًا مزدوجًا على الزر وسمه بالاسم المطلوب (مثل Discover).

الشرح: هذه الخطوات توضح عملية تصميم واجهة المستخدم باستخدام أداة النمذجة Pencil UI، حيث يتم سحب العناصر وإفلاتها ثم تخصيصها.

تلميح: تذكر أن العملية تبدأ باختيار العنصر من القسم المناسب ثم وضعه على الشاشة.

التصنيف: صيغة/خطوات | المستوى: سهل

ما هو قسم Mobile - Android ICS في أداة Pencil UI؟

الإجابة: هو قسم في أداة Pencil UI يحتوي على عناصر واجهة المستخدم الخاصة بتطبيقات الهواتف المحمولة بنظام أندرويد ICS.

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

تلميح: فكر في القسم الذي يحتوي على عناصر تصميم واجهات الهواتف.

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

ما هو شكل Focused Button في أداة Pencil UI؟

الإجابة: هو عنصر واجهة مستخدم (زر) جاهز في أداة Pencil UI، يمكن سحبه وإفلاته في التصميم، وعادة ما يكون له مظهر مرئي مميز عند التركيز عليه.

الشرح: يستخدم هذا العنصر لتمثيل الأزرار التفاعلية في نماذج واجهات المستخدم الأولية التي يتم تصميمها.

تلميح: تذكر أن هذا العنصر موجود ضمن مكتبة عناصر واجهة المستخدم.

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

كيف يمكن تسمية زر بعد إضافته في أداة Pencil UI؟

الإجابة: بالضغط عليه ضغطًا مزدوجًا ثم كتابة النص المطلوب (مثل Discover أو اكتشف).

الشرح: تسمية العناصر خطوة أساسية في تصميم الواجهات لتعريف وظيفة كل عنصر للمستخدم والمطور.

تلميح: تذكر الإجراء التفاعلي المباشر مع العنصر بعد وضعه على الشاشة.

التصنيف: صيغة/خطوات | المستوى: سهل

ما المفهوم الجوهري الذي توضحه عملية إضافة زر باللغتين الإنجليزية والعربية في نفس الواجهة؟

الإجابة: توضح عملية تصميم واجهات مستخدم متعددة اللغات أو تدعم الترجمة، وهو أمر مهم في تطوير تطبيقات للأسواق العالمية أو متعددة الثقافات.

الشرح: يعد دعم التعددية اللغوية سمة أساسية في هندسة البرمجيات الحديثة لضمان شمولية التطبيق وسهولة استخدامه.

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

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