شكل 2.31: تسمية الصورة الثانية - كتاب هندسة البرمجيات - الصف 12 - الفصل 1 - المملكة العربية السعودية

--- SECTION: Pencil Software Interface --- Unsaved document - Pencil PENCIL Grid Wheel Helvetica 22 B I U HTML code: #FFFFFF Opacity: 100% Add Untitled Document color palette: No colors defined Recently used colors: Search for shapes Common Shapes Basic Web Elements Mobile - Android ICS Wi-Fi version of the Android ICS UI elements Header Footer Text Button Pressed Button Focused Button Text Field Focused TextField Activated TextField Check Box Focused Checkbox Pressed Checkbox Radio Focused Radio 12:00 Discover اكتشف 12:00 Discover Saudi Arabia RIYADH JEDDAH TEXT Properties Discover Jeddah Color: #777777 Font: Helvetica 22 B I U Align: Restore Default Settings Unsaved document Untitled Page Filter Add Page --- SECTION: Instructional Note --- يمكنك أيضًا الضغط على علامة التبويب Properties (خصائص) لإجراء تغييرات على النص. --- SECTION: Figure Caption --- شكل 2.31: تسمية الصورة الثانية --- SECTION: Page Footer --- وزارة التعليم Ministry of Education 2025 - 1447 --- SECTION: Page Number --- 106 --- SECTION: Annotation --- 3 --- SECTION: Annotation --- 4 --- SECTION: Annotation --- 5 --- SECTION: Annotation --- 6 --- VISUAL CONTEXT --- **FIGURE**: Unsaved document - Pencil Description: A full screenshot of the Pencil prototyping software, showing its user interface. It includes a top menu bar, a left panel for shapes, a central canvas displaying two mobile phone mockups, a right panel for properties, and a bottom status bar. The screenshot is annotated with blue circles containing numbers 3, 4, 5, and 6, highlighting specific areas of the interface. Context: This figure illustrates the overall layout and functionality of the Pencil software, a tool for designing user interfaces, and serves as a visual guide for instructional content. **DIAGRAM**: Color Palette Description: A color selection interface within the Pencil software, highlighted by annotation '5'. It features a grid of various colors, an 'HTML code:' field displaying '#FFFFFF', an 'Opacity:' slider set to '100%', an 'Add' button, and sections for 'Untitled Document color palette:' (with 'No colors defined') and 'Recently used colors:'. Key Values: #FFFFFF, 100% Context: Demonstrates the color selection mechanism available in the Pencil software for customizing UI elements. **DIAGRAM**: Mobile - Android ICS UI elements Description: Two mobile phone screen mockups displayed on the central canvas. The left phone shows a green background with the Saudi flag emblem, a digital clock '12:00', and two buttons labeled 'Discover' and 'اكتشف'. The right phone, highlighted by annotation '6', shows a digital clock '12:00' and two distinct sections: an upper section with 'Discover Saudi Arabia' and 'RIYADH' text over a city skyline image, and a lower section with 'JEDDAH' text over a coastal landmark image. Key Values: 12:00, Discover, اكتشف, Discover Saudi Arabia, RIYADH, JEDDAH Context: These mockups serve as examples of user interface designs that can be created and edited using the Pencil software, showcasing different content and layout possibilities for mobile applications. **DIAGRAM**: TEXT Properties Description: A right-hand panel in the Pencil software interface, accessible via the 'Properties' tab (highlighted by annotation '4'). It displays various text formatting options, including a text field showing 'Discover Jeddah', 'Color:' with value '#777777', 'Font:' set to 'Helvetica' with size '22', and options for 'B' (bold), 'I' (italic), 'U' (underline). It also includes 'Align:' options (left, center, right, justify icons) and a 'Restore Default Settings' button. Annotation '3' points to the font style controls. Key Values: Discover Jeddah, #777777, Helvetica, 22 Context: Illustrates how users can modify the textual content and appearance of UI elements within the Pencil software, including font, color, size, and alignment.