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

--- SECTION: المخطط الشبكي --- المخطط الشبكي Wireframe Diagram المخطط الشبكي هو تمثيل مرئي لتصميم موقع ويب أو تطبيق عبر الإنترنت. يفتقر هذا المخطط عادة إلى الرسومات والنصوص وذلك لتركيزه على بنية المحتوى ووظائفه. ويستخدم هذا المخطط على نطاق واسع في تطوير المواقع والتطبيقات. --- SECTION: شكل 2.4: المخطط الشبكي --- شكل 2.4: المخطط الشبكي --- SECTION: مخطط حالة الاستخدام --- مخطط حالة الاستخدام Use Case Diagram مخطط حالة الاستخدام هو نوع من المخططات التي تمثل الطرائق المختلفة التي قد يتفاعل بها المستخدم مع النظام. تعد مخططات حالة الاستخدام قيمة للغاية في تمثيل المتطلبات المجمعة للنظام أثناء مرحلة التحليل في دورة حياة تطوير البرمجيات. --- SECTION: شكل 2.5: مخطط حالة الاستخدام --- شكل 2.5: مخطط حالة الاستخدام وزارة التعليم Ministry of Education 2025 - 1447 70 --- VISUAL CONTEXT --- **DIAGRAM**: شكل 2.4: المخطط الشبكي Description: A wireframe diagram illustrating the layout and structure of a website or application interface. It shows placeholders for content, navigation elements, and interactive components without detailed visual design. Table Structure: Headers: N/A Data: The diagram includes a top navigation bar with 'Home', 'Products', 'Download', 'Buy Now', 'Support', 'About Us', and a 'Search' bar. The main content area has an 'Image' placeholder. A left column features 'Top Story Headline', 'Text description' (with multiple lines), and another 'Image' placeholder, followed by 'Download' and 'Purchase' buttons. The right column contains a 'Social' media section (with a play icon), 'Share & Links', and a 'Navigate' section with four 'Item Name' bullet points. Below the main content, there's a banner for 'A monthly newsletter brought to you by (Company Name)'. The bottom section displays four smaller 'Image' placeholders, each labeled 'Vol. 1, Issue 1', 'Image Title', 'Image Category', and a 'User Reviews' section with lines. Key Values: Home, Products, Download, Buy Now, Support, About Us, Search, Image, Top Story Headline, Text description, Social, Share & Links, Navigate, Item Name, Download, Purchase, A monthly newsletter brought to you by (Company Name), Vol. 1, Issue 1, Image Title, Image Category, User Reviews Context: This diagram serves as an example of a wireframe, a low-fidelity visual representation used in web and application design to focus on content structure and functionality rather than aesthetics. It demonstrates how different elements are arranged on a page. **DIAGRAM**: شكل 2.5: مخطط حالة الاستخدام Description: A use case diagram for a 'Student Management Use Case' system, illustrating the interactions between various actors and the system's functionalities (use cases). Table Structure: Headers: N/A Data: The diagram centers around a 'User' actor, who interacts with several use cases. Other actors include 'Teaching Affairs Administrator' and 'System Administrator'. The use cases, represented by ovals, are: 'Login System', 'Basic Data Management', 'Student Management', 'Score Management', 'Query Statistics', 'Score Preview Table', 'Score Distribution Diagram', 'Class Management', 'Courses Management', and 'Term Management'. Lines connect actors to the use cases they interact with, and also show relationships between different use cases. Key Values: Student Management Use Case, Login System, Basic Data Management, Student Management, Score Management, Query Statistics, Score Preview Table, Score Distribution Diagram, Class Management, Courses Management, Term Management, Teaching Affairs Administrator, User, System Administrator Context: This diagram exemplifies a use case diagram, a tool in software engineering to represent the different ways users (actors) interact with a system. It is valuable for capturing and representing system requirements during the analysis phase of the software development lifecycle.