تصميم واجهة تطبيق جوال - كتاب هندسة البرمجيات - الصف 12 - الفصل 1 - المملكة العربية السعودية

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

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

الدرس: إعداد الشاشة الثانية وإضافة صور المدن

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

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

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

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

الفصل: 2

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

📝 ملخص الصفحة

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

يتم عرض شكلين توضيحيين: الشكل 2.29 يوضح إعداد الشاشة الثانية في Pencil، حيث تظهر واجهة الأداة مع شريط جانبي يحتوي على مكونات واجهة المستخدم والأشكال الهندسية، ولوحة رئيسية تعرض نموذجين لهواتف محمولة بخلفية خضراء تحمل العلم السعودي وأزرار تفاعلية.

الشكل 2.30 يبين خطوة متقدمة بإضافة صور المدن، حيث يظهر نموذج هاتف جديد بعنوان 'Discover Saudi Arabia' وصور لمدينتي الرياض وجدة، مما يوضح كيفية تطوير التصميم بإضافة محتوى مرئي. الصفحة تنتهي بمعلومات وزارة التعليم والتاريخ، مؤكدة على السياق التعليمي الرسمي.

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

كرر الخطوات التي اتبعتها عند إضافة الصورة وترويسة الشاشة لجعل الشاشة تبدو كما تظهر على اليمين. --- SECTION: شكل 2.29: إعداد الشاشة الثانية --- شكل 2.29: إعداد الشاشة الثانية عليك إضافة صورتين لمدينتي الرياض وجدة كما هو موضح. --- SECTION: شكل 2.30: إضافة صور المدن --- شكل 2.30: إضافة صور المدن 104 وزارة التعليم Ministry of Education 2025 - 1447 --- VISUAL CONTEXT --- **FIGURE**: شكل 2.29: إعداد الشاشة الثانية Description: A screenshot of the 'Pencil' UI prototyping tool interface. The top bar of the Pencil tool shows 'Untitled document - Pencil'. The left sidebar contains a 'Search for shapes' input field. Below it are sections: 'Mobile - Android ICS' with 'Elements' and various UI components like 'Button', 'Text Field', 'Pressed Button', 'Pushed Text Field', 'Activated Text Field', 'Check Box', 'Activated Check Box', 'Pushed Check Box'. Another section is 'Common Shapes' with 'Collection of general purpose shapes' and basic geometric shapes like 'Rectangle', 'Triangle', 'Line', 'Arrow', 'Circle', 'Ellipse', 'Polygon', 'Star', 'Pentagon', 'Hexagon', 'Octagon', 'Trapezoid', 'Parallelogram', 'Rhombus', 'Diamond', 'Cross', 'Plus', 'Minus', 'Multiply', 'Divide', 'Equal', 'Not Equal', 'Greater Than', 'Less Than', 'Greater Than or Equal', 'Less Than or Equal', 'Square Root', 'Cube Root', 'Integral', 'Summation', 'Pi', 'Infinity', 'Degree', 'At', 'Hash', 'Dollar', 'Euro', 'Yen', 'Pound', 'Cent', 'Copyright', 'Registered', 'Trademark', 'Service Mark', 'Ampersand', 'Asterisk', 'At Sign', 'Backslash', 'Bar', 'Brace Left', 'Brace Right', 'Bracket Left', 'Bracket Right', 'Caret', 'Colon', 'Comma', 'Dash', 'Dot', 'Double Quote', 'Exclamation', 'Forward Slash', 'Grave Accent', 'Hyphen', 'Parenthesis Left', 'Parenthesis Right', 'Percent', 'Period', 'Pipe', 'Plus Sign', 'Question Mark', 'Semicolon', 'Single Quote', 'Tilde', 'Underscore', 'Vertical Bar'. The main canvas shows two identical mobile phone mockups. Each mockup displays a green background with the Saudi flag (Shahada and sword) and two buttons below it: a blue 'Discover' button and a green 'أضف' (Add) button. The status bar of the phone mockups shows a Wi-Fi signal, battery icon, and '12:00'. Context: This figure illustrates the initial setup of a mobile application screen within the Pencil UI design tool, showing the placement of the Saudi flag and basic interactive buttons on two identical mockups. **FIGURE**: شكل 2.30: إضافة صور المدن Description: A screenshot of the 'Pencil' UI prototyping tool interface, similar to Figure 2.29. The left sidebar shows the same UI components and shapes. The main canvas displays two mobile phone mockups. The left mockup is identical to those in Figure 2.29, showing a green background with the Saudi flag, 'Discover' button, and 'أضف' (Add) button. The right mockup shows a different screen. Its status bar displays a Wi-Fi signal, battery icon, and '12:00'. The screen has a header 'Discover Saudi Arabia' and a sub-header 'Cities'. Below these, two images are displayed: an upper image showing the skyline of Riyadh and a lower image showing the waterfront of Jeddah. Context: This figure demonstrates the next step in mobile app design, where specific content (images of Riyadh and Jeddah) is added to a new screen, building upon the initial screen setup shown in Figure 2.29.