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

--- SECTION: تحسين واجهة المستخدم بميزات قابلية الوصول --- Enhancing the UI with Accessibility Features ستعمل الآن على تحسين شاشة معلم Al Masmak (المصمك) بميزات قابلية الوصول، حيث ستضيف زرين لتكبير حجم النص أو تصغيره، وزراً لتغيير نسق (Theme) لون الشاشة، وزراً لإضافة وظيفة تحويل النص إلى كلام على الشاشة. ستضيف أولاً المكونات إلى قسم Designer (المصمم)، ثم تبرمج وظائفها من قسم Blocks (اللبنات البرمجية). --- SECTION: إضافة زر التكبير للتطبيق --- Adding a Zoom In Button to the Application ستضيف الآن زراً لتكبير حجم الخط لجميع مكونات النص في كل مرة تضغط عليه. --- SECTION: لإضافة زر التكبير --- ١ من مجموعة User Interface (واجهة المستخدم)، أضف مكون Button (زر) إلى Screen1 (شاشة 1)، وأعد تسميته إلى zoomin_button (زر_التكبير). ٣ من المكون zoomin_button (زر_التكبير)، اضبط خاصية BackgroundColor (لون الخلفية) إلى None (بدون). ٤ ثم امسح خاصية Text (النص)، واضبط خاصية Image (الصورة) إلى أيقونة علامة زائد. شكل ٤.٦: إضافة زر التكبير وزارة التعليم 205 Ministry of Education 2025 - 1447 --- VISUAL CONTEXT --- **FIGURE**: شكل ٤.٦: إضافة زر التكبير Description: A composite screenshot of the MIT App Inventor development environment, illustrating the process of adding and configuring a 'Zoom In' button for a mobile application. The interface shows the Palette, Viewer (mobile phone emulator), and Components/Properties panels. The top bar includes 'MIT APP INVENTOR' and navigation options like 'Projects', 'Connect', 'Build', 'Settings', 'Help', 'My Projects', 'View Trash', 'Guide', 'Report an issue', 'English', 'qkhaled.sa@gmail.com', 'Designer', and 'Blocks'. - **Label 1 (Palette):** Points to the 'Button' component within the 'User Interface' section of the Palette on the left side. - **Label 2 (Viewer & Components):** Points to the 'zoomin_button' component in the hierarchical 'Components' list on the right, and also visually highlights the corresponding button (with a plus sign icon) on the mobile phone emulator in the 'Viewer' panel. - **Label 3 (Properties):** Points to the 'BackgroundColor' property of the 'zoomin_button' in the 'Properties' panel, showing it set to 'None'. - **Label 4 (Properties):** Points to the 'Text' property of the 'zoomin_button' in the 'Properties' panel, showing it as empty. - **Label 5 (Properties):** Points to the 'Image' property of the 'zoomin_button' in the 'Properties' panel, which is set to an icon resembling a 'zoom_in_icon.png' (a plus sign). Key Values: MIT APP INVENTOR, Projects, Connect, Build, Settings, Help, My Projects, View Trash, Guide, Report an issue, English, qkhaled.sa@gmail.com, Designer, Blocks, Visit_SA_App, Palette, Search Components, User Interface, Button, CheckBox, DatePicker, Image, Label, ListView, Notifier, PasswordTextBox, Slider, Spinner, Switch, TextBox, TimePicker, WebViewer, Layout, Media, Drawing and Animation, Viewer, Display hidden components in Viewer, Phone size (505,320), Discover Saudi Arabia, Al Masmak, Text for Label1, Components, AlMasmak, discover_label, VerticalArrangement1, title_label, image, description_label, HorizontalArrangement, zoomin_button, map_button, Map1, Properties, BackgroundColor, None, Enabled, FontBold, FontItalic, FontSize, 14.0, FontTypeface, default, Height, Automatic, Width, Automatic, Image, zoom_in_icon.png, Shape, ShowFeedback, Text, TextAlignment, Rename, Delete, Jeddah.png, Riyadh.png, al_masmak.jpg Context: This visual element provides a step-by-step guide to implementing an accessibility feature (zoom-in button) in a mobile application using MIT App Inventor. It visually reinforces the textual instructions by showing the exact locations and settings within the development environment, aiding in practical understanding and application of the concepts.