تقنية رقمية 3 [02-02-إنشاء المخطط] [16-36].pdf

‫الدرس الثاني‪َّ ُ :‬‬ ‫إنشاء المخطط‬ ‫ُّ‬ ‫ُّ ُ َّ‬ ‫مهما ألنه ِّ‬ ‫يعد ً‬ ‫خطط أداة ّ‬ ‫يبسط‬ ‫قيمة للمؤسسات لتمثيل سلسلة من الخطوات أو المهام التي تشكل عملية بشكل مرئي‪ ،‬كما‬ ‫يعد الم‬ ‫ُ َّ‬ ‫خطط يمكن تحديد أوجه القصور ونقاط الضعف‪.‬‬ ‫العمليات المعقدة إلى خطوات يسهل فهمها بشكل واضح‪ ،‬ومن خالل...

‫الدرس الثاني‪َّ ُ :‬‬ ‫إنشاء المخطط‬ ‫ُّ‬ ‫ُّ ُ َّ‬ ‫مهما ألنه ِّ‬ ‫يعد ً‬ ‫خطط أداة ّ‬ ‫يبسط‬ ‫قيمة للمؤسسات لتمثيل سلسلة من الخطوات أو المهام التي تشكل عملية بشكل مرئي‪ ،‬كما‬ ‫يعد الم‬ ‫ُ َّ‬ ‫خطط يمكن تحديد أوجه القصور ونقاط الضعف‪.‬‬ ‫العمليات المعقدة إلى خطوات يسهل فهمها بشكل واضح‪ ،‬ومن خالل تحليل الم‬ ‫ُ َّ‬ ‫المخططات (‪)Diagrams‬‬ ‫َّ‬ ‫ُ َّ‬ ‫المخططات هي أدوات مفيدة للغاية يمكن أن تساعدك في مرحلة التحليل‪ ،‬وخاصة ُمخططات سير العمل‪ .‬قبل البدء في إعداد‬ ‫ُ َّ‬ ‫ُ َّ‬ ‫بالمخطط‪ .‬إنه تمثيل مرئي للمعلومات باستخدام األشكال واألسهم لعرض‬ ‫المخططات الخاصة بسير العمل تحتاج إلى معرفة المقصود‬ ‫الترتيبات والعالقات والعالقات المختلفة بينها‪.‬‬ ‫ُ َّ‬ ‫المخطط االنسيابي؟‬ ‫تستخدم‬ ‫لماذا‬ ‫ِ‬ ‫ّ‬ ‫ُ َّ‬ ‫المخطط االنسيابي شرح البيانات اإلحصائية ووظائف النظام وتمثيل العديد من العمليات بشكل أفضل‪ ،‬حيث يعد‬ ‫يمكنك من خالل‬ ‫ُ َّ‬ ‫ُ َّ‬ ‫المخطط تجعل من‬ ‫المخططات أكثر فعالية‪ .‬إن عملية توظيف األشكال واأللوان المختلفة في‬ ‫التمثيل المرئي للمعلومات باستخدام‬ ‫ُ َّ‬ ‫خططات‪ :‬عرض الهيكل التنظيمي لشركة أو َّ‬ ‫َ‬ ‫مؤسسة‪،‬‬ ‫المخرجات‪ ،‬ومن أمثلة استخدام الم‬ ‫السهل على القارئ مقارنة البيانات وتمييز‬ ‫َّ‬ ‫ُ‬ ‫والتمثيل الرسومي لمجموعة من الخطوات المتتابعة‪ ،‬وعرض مخطط شبكات الحاسب وتوصيالتها وغير ذلك‪.‬‬ ‫‪69‬‬ ‫ُ َّ‬ ‫المخططات‬ ‫أمثلة على أنواع‬ ‫ُ َّ‬ ‫خططات التي يمكنك استخدامها خالل المراحل المختلفة لدورة حياة النظام ومنها‪:‬‬ ‫هناك أنواع مختلفة من الم‬ ‫َّ‬ ‫ُمخطط سير العمل‬ ‫(‪)Workflow Diagram‬‬ ‫ُ َّ‬ ‫َّ‬ ‫المخطط االنسيابي‬ ‫يشبه ُمخطط سير العمل‬ ‫ً‬ ‫الذي تعلمت تصميمه سابقا لوصف خوارزمية‬ ‫ُ َّ‬ ‫المخطط من مجموعة من‬ ‫البرنامج‪ ،‬ويتكون هذا‬ ‫الرموز التي تمثل اإلجراءات والعمليات المتصلة‬ ‫بواسطة األسهم التي تشير إلى التدفق من رمز‬ ‫ُ َّ‬ ‫إلى آخر‪ُ ،‬‬ ‫المخطط سير العمل‬ ‫ويستخدم هذا‬ ‫إلظهار تدفق المهام خالل كل مرحلة من مراحل‬ ‫دورة حياة النظام‪.‬‬ ‫َّ‬ ‫ُمخطط حالة االستخدام‬ ‫(‪)Use Case Diagram‬‬ ‫ِّ‬ ‫هو نوع من المخططات تمثل الطرق المختلفة‬ ‫ّ‬ ‫المستخدم مع النظام‪ ،‬ويعد‬ ‫التي قد يتفاعل بها‬ ‫ِ‬ ‫ً ً‬ ‫َّ‬ ‫استخدام ُمخططات حالة االستخدام مفيدا جدا‬ ‫لتمثيل جميع المتطلبات لنظام ما أثناء مرحلة‬ ‫تحليل دورة حياة النظام‪.‬‬ ‫يمكنك استخدام أداة فري بالين‬ ‫(‪ )Freeplane‬ليس فقط إلنشاء‬ ‫ً‬ ‫خرائط ذهنية‪ ،‬ولكن أيضا إلنشاء‬ ‫ُ َّ‬ ‫خططات‪.‬‬ ‫أنواع مختلفة من الم‬ ‫‪70‬‬ ‫َّ‬ ‫ُمخطط الشجرة (‪)Tree Diagram‬‬ ‫ِّ‬ ‫َّ‬ ‫يمثل ُمخطط الشجرة التسلسل الهرمي مثل‬ ‫ً‬ ‫الهيكل التنظيمي لمؤسسة ما‪ ،‬وعادة ما يكون‬ ‫َ‬ ‫الجذر في األعلى‪ ،‬وعناصر الشجرة التي تسمى‬ ‫ُ َّ‬ ‫ُ‬ ‫المخطط على‬ ‫العقد في األسفل‪ ،‬ويستخدم هذا‬ ‫نطاق واسع في إدارة المشاري ــع لتقسيم المهام‬ ‫وتوضيح تفاصيلها الفرعية‪.‬‬ ‫ُ َّ‬ ‫المخطط الهيكلي‬ ‫(‪)Wireframe Diagram‬‬ ‫ُ َّ‬ ‫المخطط الهيكلي هو تمثيل مرئي إلطار‬ ‫ّ‬ ‫موقع إلكتروني أو تطبيق ذكي‪ ،‬ويعد الغرض‬ ‫ُ َّ‬ ‫المخطط هو التركيز على ُبنية‬ ‫األساسي لهذا‬ ‫المحتوى ووظائف العناصر التي يحتوي‬ ‫عليها‪ ،‬ولذا فهو يشتمل على عدد محدود من‬ ‫النصوص والرسومات‪ُ ،‬‬ ‫ويستخدم هذا النوع من‬ ‫ُ َّ‬ ‫المخططات على نطاق واسع في تطوير المواقع‬ ‫والتطبيقات‪.‬‬ ‫‪71‬‬ ‫ُ َّ‬ ‫لمخطط سير العمل‬ ‫األشكال األساسية‬ ‫َّ‬ ‫توجد العديد من الرموز التي يمكنك استخدامها لتمثيل جميع عناصر ُمخطط سير العمل‪ .‬فعلى سبيل المثال‪ ،‬يتم تمثيل العملية‬ ‫َّ‬ ‫في ُمخطط على شكل مستطيل‪ ،‬بينما يتم استخدام شكل المعين لتمثيل اتخاذ القرار‪ .‬يعرض الجدول اآلتي بعض األشكال األساسية‬ ‫ً‬ ‫َ‬ ‫َّ‬ ‫المستخدمة عادة في ُمخطط سير العمل‪:‬‬ ‫َ‬ ‫ُ َّ‬ ‫خطط سير العمل‪:‬‬ ‫األشكال األساسية المستخدمة في م‬ ‫الرمز‬ ‫‪72‬‬ ‫االسم‬ ‫الوصف‬ ‫البداية أو نهاية‬ ‫ِّ‬ ‫يمثل نقطة بداية أو نهاية سير العمل‪.‬‬ ‫العملية‬ ‫ِّ‬ ‫يمثل عملية أو وظيفة‪.‬‬ ‫القرار‬ ‫يمثل قر ًارا يلزم اتخاذه ويؤدي إلى‬ ‫عملية أو قرار آخر‪.‬‬ ‫َ‬ ‫المستند‬ ‫ِّ‬ ‫يمثل مستند ناتج عن عملية أو وظيفة‬ ‫ما‪ ،‬مثل تقارير الخطأ وغيرها‪.‬‬ ‫اإلدخال أو اإلخراج‬ ‫ِّ‬ ‫يمثل عملية إدخال أو عملية إخراج‪.‬‬ ‫اتجاه التدفق‬ ‫يوضح العالقة بين العمليات واتجاه‬ ‫تدفقها‪.‬‬ ‫َّ‬ ‫استخدام تطبيق دياجرام لتصميم ُمخطط سير العمل‬ ‫مستخدم رسومية (‪)Graphical User Interface - GUI‬‬ ‫يحتوي تطبيق دياجرام ‪ )draw.io diagram( draw.io‬على واجهة‬ ‫ِ‬ ‫ُ َّ‬ ‫مجانية ومفتوحة المصدر‪ ،‬ويمكنك استخدامه لرسم النماذج األولية الخاصة بالمخططات باستخدام األدوات المدمجة‪ ،‬ويحتوي على‬ ‫ُ ِّ‬ ‫ُ َّ‬ ‫ً‬ ‫تقريبا‪.‬‬ ‫المخططات‬ ‫مجموعة من األشكال تمكنك من إنشاء جميع أنواع‬ ‫لوحة الرسم‪.‬‬ ‫محرر الخط‪.‬‬ ‫لوحة األشكال‪.‬‬ ‫‪73‬‬ ‫َّ‬ ‫إنشاء ُمخطط جديد‬ ‫ً‬ ‫في هذا الدرس‪ ،‬ستستخدم تطبيق دياجرام ‪ draw.io‬إلنشاء سير عمل صيانة تطبيق ستقوم بإنشائه الحقا‪ .‬سيسمح لكبار السن الذين‬ ‫يعانون من مشكالت بصرية أو الرعاش بالحصول على معلومات حول األماكن السياحية‪.‬‬ ‫دياجرام دوت نت (‪)Diagrams.net‬‬ ‫هي أداة عبر اإلنترنت ولكن يمكنك‬ ‫ً‬ ‫أيضا تنزيل تطبيق دياجرام‬ ‫(‪ )draw.io diagram‬من الموقع‬ ‫واستخدامه دون اتصال باإلنترنت‪.‬‬ ‫‪74‬‬ ‫لتبدأ في إنشاء مخططات باستخدام تطبيق دياجرام ‪ draw.io‬لسطح المكتب‪ .‬إذا لم يكن‬ ‫ً‬ ‫مثبتا على جهازك الحاسب‪ ،‬فيمكنك تنزيله من الموقع‪:‬‬ ‫تطبيق دياجرام ‪draw.io‬‬ ‫‪https://github.com/jgraph/drawio-desktop/releases/tag/v21.2.8‬‬ ‫إلنشاء مخطط سير عمل جديد‪:‬‬ ‫>افتح تطبيق درو دوت أي أو (‪ 1 ،)draw.io‬ثم اضغط‬ ‫على إنشاء رسم جديد (‪2 .)Create a New diagram‬‬ ‫ِّ‬ ‫َّ‬ ‫>حدد ُمخطط فارغ (‪ 3 ،)Blank diagram‬ثم اضغط‬ ‫على إنشاء (‪4 .)Create‬‬ ‫َّ‬ ‫> لقد تم إنشاء ُمخطط جديد‪5 .‬‬ ‫‪2‬‬ ‫‪1‬‬ ‫‪75‬‬ ‫‪3‬‬ ‫يحفظ تطبيق دياجرام‬ ‫‪ draw.io‬المخططات بشكل‬ ‫افتراضي كملف ‪.XML‬‬ ‫‪4‬‬ ‫‪5‬‬ ‫‪76‬‬ ‫إضافة شكل للمخطط‬ ‫إلضافة شكل‪:‬‬ ‫يمكنك ضبط تكبير‬ ‫ُ َّ‬ ‫المخطط من خالل‬ ‫وتصغير‬ ‫َّزري التكبير والتصغير‪.‬‬ ‫>من لوحة األشكال (‪ ،)Shapes‬اختر مستطيل مستدير الزوايا‬ ‫(‪1 .)Rounded Rectangle‬‬ ‫> تمت إضافة المستطيل‪.‬‬ ‫‪2‬‬ ‫‪1‬‬ ‫يمكنك استخدام مؤشرات‬ ‫األشكال لتغيير الحجم‪ ،‬وسحبها‬ ‫وإفالتها في لوحة الرسم‪.‬‬ ‫‪2‬‬ ‫‪77‬‬ ‫حفظ المخطط‬ ‫لحفظ الملف‪:‬‬ ‫>اضغط على الرسالة تغييرات غير محفوظة‪ .‬اضغط هنا للحفظ‬ ‫(‪1 .)Unsaved changes. Click here to save‬‬ ‫ِّ‬ ‫> حدد مجلد المستندات (‪2 .)Documents‬‬ ‫> اضغط على حفظ (‪.)Save‬‬ ‫‪3‬‬ ‫‪1‬‬ ‫‪2‬‬ ‫‪3‬‬ ‫‪78‬‬ ‫تنسيق المخطط‬ ‫لتغيير اللون‪:‬‬ ‫>اضغط على مستطيل مستدير الزوايا (‪.)Rounded Rectangle‬‬ ‫> من عالمة تبويب نمط (‪،)Style‬‬ ‫> تم تغيير لون المستطيل‪.‬‬ ‫‪2‬‬ ‫‪1‬‬ ‫اضغط على اللون األخضر (‪.)Green‬‬ ‫‪3‬‬ ‫‪4‬‬ ‫‪2‬‬ ‫‪3‬‬ ‫‪1‬‬ ‫‪4‬‬ ‫َّ‬ ‫تذكر الضغط على هذا‬ ‫اإلشعار بانتظام ليتمكن‬ ‫البرنامج من حفظ الملف‪.‬‬ ‫‪79‬‬ ‫لتعديل النص و الخط‪:‬‬ ‫> اضغط على مربــع النص‪.‬‬ ‫‪1‬‬ ‫> اضغط على النص‪.‬‬ ‫> ِّ‬ ‫غير الخط من ‪ Helvetica‬إلى ‪.Tahoma‬‬ ‫‪2‬‬ ‫‪3‬‬ ‫> ِّ‬ ‫غير الحجم من ‪ 12‬نقطة (‪ )12pt‬إلى ‪24‬‬ ‫نقطة (‪4 .)24pt‬‬ ‫> اضغط على غامق (‪.)Bold‬‬ ‫‪1‬‬ ‫‪5‬‬ ‫‪4‬‬ ‫‪2‬‬ ‫‪3‬‬ ‫‪80‬‬ ‫‪5‬‬ ‫ُ َّ‬ ‫المخطط‬ ‫إضافة أشكال جديدة إلى‬ ‫ِّ‬ ‫ُ َّ‬ ‫خطط سير العمل‪.‬‬ ‫يمكنك إضافة أشكال جديدة تمثل القرارات‪ ،‬أو العمليات‪ ،‬أو المستندات‪ ،‬أو أي معلومات أخرى تريد إضافتها إلى م‬ ‫ُ َّ‬ ‫خطط‪:‬‬ ‫إلضافة أشكال جديدة إلى الم‬ ‫>من لوحة األشكال (‪ ،)Shapes‬اختر المعين (‪ )Diamond‬ثم‬ ‫اسحب وأفلت شكل القرار (‪ )Decision‬إلى لوحة الرسم‪1 .‬‬ ‫ُ َّ‬ ‫المخطط‪2 .‬‬ ‫> أضف الشكل إلى‬ ‫> اضغط داخل األشكال واكتب النص‪.‬‬ ‫‪3‬‬ ‫‪2‬‬ ‫‪1‬‬ ‫‪3‬‬ ‫يمكنك نسخ أي شكل أو حقل نصي‪ ،‬وذلك باختيار‬ ‫الشكل ثم الضغط بزر الفأرة األيمن واختيار نسخ‪.‬‬ ‫يمكنك بنفس الطريقة إضافة عملية‬ ‫َ‬ ‫ُ َّ‬ ‫خطط‪.‬‬ ‫أو مستند إلى الم‬ ‫‪81‬‬ ‫إضافة رابط‬ ‫ُ َّ‬ ‫المخططات‪ .‬الموصالت توضح كيفية ارتباط األشكال والكيانات‬ ‫في هذه المرحلة‪ ،‬يجب عليك استخدام الموصالت لتوصيل أشكال‬ ‫ُ َّ‬ ‫خططات‪.‬‬ ‫المختلفة في الم‬ ‫لربط شكلين‪:‬‬ ‫>اضغط على موصل االتجاه (‪.)Directional Connector‬‬ ‫َّ‬ ‫بالمعين األول‪2 .‬‬ ‫> ِصل بداية السهم‬ ‫َّ‬ ‫> صل نهاية السهم بالمعين الثاني‪3 .‬‬ ‫ِ‬ ‫‪1‬‬ ‫‪1‬‬ ‫هناك أنواع أخرى من الخطوط التي يمكنك استخدامها مثل‪:‬‬ ‫ّ‬ ‫السهم ثنائي االتجاه (‪ )Bidirectional Connector‬والخط‬ ‫َّ‬ ‫المنقط (‪ )Dotted Line‬وغيرها‪.‬‬ ‫‪82‬‬ 2 3 83 ‫َّ‬ ‫إضافة المزيد من األشكال إلنشاء ُمخطط سير العمل النهائي‪ ،‬يجعلك بحاجة إلى إضافة الموصالت لتمثيل االتصال والعالقات بين‬ ‫ُ َّ‬ ‫ُ َّ‬ ‫خطط أدناه‪.‬‬ ‫المخطط المختلفة كما في الم‬ ‫أشكال‬ ‫ِصل جميع أشكال المخطط‬ ‫باستخدام الروابط المناسبة‪.‬‬ ‫‪84‬‬ ‫إضافة النصوص‬ ‫ُ َّ‬ ‫من الضروري إضافة نص عند الحاجة لشرح أو تحليل ُ‬ ‫الم َ‬ ‫خطط‪.‬‬ ‫خرجات المختلفة لقرار أو عملية أو أي شكل آخر متصل داخل الم‬ ‫إلضافة نص إلى المخطط‪:‬‬ ‫>من لوحة األشكال (‪ ،)Shapes‬اختر مربــع النص (‪.)Textbox‬‬ ‫‪1‬‬ ‫> ضع حقل النص في الموضع المطلوب‪ ،‬واكتب النص الذي تريده‪.‬‬ ‫>من لوحة األشكال (‪ ،)Shapes‬اختر أيقونة النص (‪.)Text‬‬ ‫َّ‬ ‫المعين الخاص بالقرار‪.‬‬ ‫> اكتب "نعم" و "ال" وضعهما بجانب شكل‬ ‫‪2‬‬ ‫‪3‬‬ ‫‪4‬‬ ‫‪2‬‬ ‫‪4‬‬ ‫‪1‬‬ ‫‪3‬‬ ‫‪85‬‬ ‫ُ َّ‬ ‫المخططات‬ ‫حفظ وتصدير‬ ‫ُ َّ‬ ‫ً‬ ‫جاهزا في شكله النهائي‪ ،‬يمكنك تصدير الملف بتنسيقات متعددة مثل‪ ،PNG :‬أو ‪ ،PDF‬أو صفحة إلكترونية‪.‬‬ ‫المخطط‬ ‫عندما يكون‬ ‫لتصديركملف ‪:PDF‬‬ ‫> من قاثمة ملف (‪،)File‬‬ ‫(‪3 .)PDF‬‬ ‫ِّ‬ ‫>حدد الخيار تضمين نسخة من المخطط (‪،)Include a copy of my diagram‬‬ ‫ثم اضغط على تصدير (‪5 .)Export‬‬ ‫‪1‬‬ ‫اختر تصديركـ (‪،)Export As‬‬ ‫> اختر مجلد المستندات (‪،)Documents‬‬ ‫‪6‬‬ ‫‪2‬‬ ‫ثم اضغط على بي دي إف‬ ‫ثم اضغط على حفظ (‪.)Save‬‬ ‫‪4‬‬ ‫‪7‬‬ ‫‪1‬‬ ‫‪2‬‬ ‫‪3‬‬ ‫‪86‬‬ 4 5 6 7 87 ‫لنطبق ً‬ ‫معا‬ ‫تدريب ‪1‬‬ ‫ُ َّ‬ ‫ً‬ ‫خططات اآلتية‪:‬‬ ‫استخداما لكل من الم‬ ‫‪ .‬اذكر‬ ‫ُ َّ‬ ‫خطط الهيكلي‪:‬‬ ‫الم‬ ‫ُ َّ‬ ‫خطط استخدام الحالة‪:‬‬ ‫م‬ ‫ُ َّ‬ ‫خطط سير العمل‪:‬‬ ‫م‬ ‫ُ َّ‬ ‫خطط الشجرة‪:‬‬ ‫م‬ ‫تدريب ‪2‬‬ ‫ً‬ ‫ِّ‬ ‫ُ َّ‬ ‫خطط‪.‬‬ ‫فكر في مشروع ستكون مسؤواًل عنه‪ ،‬ثم استخدم تطبيق دياجرام ‪ draw.io‬إلنشاء م‬ ‫َّ‬ ‫>افترض أنك تريد عرض اإلنتاج الزراعي في بلدك باستخدام ُمخطط سير العمل‪ .‬افتح تطبيق دياجرام‬ ‫وأنشئ مخطط سير العمل باستخدام األشكال المناسبة‪.‬‬ ‫‪ِ draw.io‬‬ ‫‪88‬‬ ‫تدريب ‪3‬‬ ‫ُ َّ‬ ‫خطط المناسب لكل من األشكال اآلتية‪:‬‬ ‫اختر اسم الم‬ ‫َّ‬ ‫ُمخطط سير العمل‬ ‫(‪)Workflow Diagram‬‬ ‫ُ َّ‬ ‫المخطط الهيكلي‬ ‫(‪)Wireframe Diagram‬‬ ‫‪.1‬‬ ‫َّ‬ ‫ُمخطط الشجرة‬ ‫(‪)Tree Diagram‬‬ ‫ُ َّ‬ ‫المخطط الهيكلي‬ ‫(‪)Wireframe Diagram‬‬ ‫َّ‬ ‫ُمخطط سير العمل‬ ‫(‪)Workflow Diagram‬‬ ‫‪.2‬‬ ‫َّ‬ ‫ُمخطط الشجرة (‪)Tree Diagram‬‬ ‫ُ َّ‬ ‫المخطط الهيكلي‬ ‫(‪)Wireframe Diagram‬‬ ‫َّ‬ ‫ُمخطط حالة االستخدام‬ ‫(‪)Use Case Diagram‬‬ ‫‪.3‬‬ ‫َّ‬ ‫ُمخطط الشجرة (‪)Tree Diagram‬‬ ‫َّ‬ ‫ُمخطط الشجرة (‪)Tree Diagram‬‬ ‫ُ َّ‬ ‫المخطط الهيكلي‬ ‫(‪)Wireframe Diagram‬‬ ‫‪.4‬‬ ‫َّ‬ ‫ُمخطط سير العمل‬ ‫(‪)Workflow Diagram‬‬ ‫‪89‬‬