ميزات قابلية الوصول في التطبيق | الوحدة الرابعة | الدرس الثالث

ميزات قابلية الوصول في التطبيق هو عنوان الدرس الثالث من الوحدة الرابعة التي تحمل اسم “قابلية الوصول إلى البرمجيات والتضمين الرقمي” من مقرر “هندسة البرمجيات”.

ستتعرف في هذا الموضوع على ملاءمة التطبيق للأشخاص ذوي الاحتياجات الخاصة، والقيام بتعديل النموذج الأوَّلي لتحسين قابليّة الوصول للتطبيق، بالإضافة لتحسين واجهة المُستخدِم بميزات قابليّة الوصول.

لذا قم بقراءة أهداف التعلُّم بعناية، ثم أعد قراءتها وتأكَّد من تحصيل كافة محتوياتها بعد انتهائك من دراسة الموضوع.

أهداف التعلُّم

• معرفة ملاءمة التطبيق للأشخاص ذوي الاحتياجات الخاصة.
• القيام بتعديل النموذج الأوَّلي لتحسين قابليّة الوصول للتطبيق.
• تحسين واجهة المُستخدِم بميزات قابليّة الوصول.

هيا لنبدأ!

ملاءمة التطبيق للأشخاص ذوي الاحتياجات الخاصة (The Suitability of the Application for People with Special Needs)

لا يمتلك كافة المستخدمين الاحتياجات نفسها ولهذا السبب يجب أن تأخذ التطبيقات هذه الاختلافات بالاعتبار، ويجب تعديل واجهة المستخدم ووظائفها بناء على ذلك.

سنعمل على تحسين التطبيق الذي أنشأناه في الوحدة السابقة لمساعدة كبار السن على التنقل من خلال شاشة التطبيق وذلك ليتمكنوا من قراءة المعلومات حول المواقع السياحية المختلفة التي يمكنهم زيارتها في المملكة العربية السعودية.

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

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

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

• وظيفة التكبير والتصغير Zoom In and Out Function

يمكنك إضافة خاصية التكبير(Zoom In) وخاصية التصغير(Zoom Out) بحيث يمكن للمستخدم ضبط حجم النص حسب احتياجاته.

• واجهة ملونة Colored Interface

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

• تحويل النص إلى كلام Text-To-Speech

من المهم أن يدعم التطبيق أكبر قدر ممكن من التفاعل مع حواس الإنسان، لكي يتمكن المستخدمون من فهم المعلومات الموجودة في الوسائط المختلفة واستيعابها مثل: الصوت، والصور، والفيديو، والرسوم المتحركة، والعروض التقديمية.

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

لمعرفة المزيد من المعلومات عن واجهة المُستخدِم، قم بالاطّلاع على الرابط التالي:

تصميم واجهة المستخدم – ويكيبيديا

تعديل النموذج الأوَّلي لتحسين قابليّة الوصول للتطبيق (Adjusting the Prototype to Improve the Accessibility of the App)

قبل البدء بإجراء التغييرات المناسبة على تطبيق الهاتف المحمول في مخترع التطبيقات (App Inventor)، يجب إجراء التغييرات على النموذج الأولي الذي أنشأته باستخدام بنسل بروجكت (Pencil Project).

افتح بنسل بروجكت (Pencil Project) لإعادة تصميم الشاشة الأخيرة من التطبيق.

سنُضيف أربعة صور كما تعلمنا سابقًا، وسنُنشئ الشاشة التي تعرض معلم المصمك كما هو موضح أدناه:

بإمكانك مراجعة محتوى موضوع “ميزات قابلية الوصول في التطبيق” من بدايته وحتى هذه النقطة، من خلال الرابط التالي:

تحسين واجهة المُستخدِم بميزات قابليّة الوصول (Enhancing the UI with Accessibility Features)

سنعمل الآن على تحسين شاشة معلم Al Masmak (المصمك) بميزات قابلية الوصول، حيث سنُضيف زرين لتكبير حجم النص أو تصغيره، وزرًا لتغيير نسق (Theme) لون الشاشة، وزرًا لإضافة وظيفة تحويل النص إلى كلام على الشاشة.

سنُضيف أولاً المكونات إلى قسم Designer (المصمم)، ثم نُبرمج وظائفها من قسم  Blocks (اللبنات البرمجية).

إضافة زر التكبير للتطبيق Adding a Zoom In Button to the Application

سنُضيف الآن زرًا لتكبير حجم الخط لجميع مكونات النص في كل مرة نضغط عليه.

لإضافة زرّ التكبير:

1. من مجموعة User Interface (واجهة المُستخدِم)، أضف مكوِّن Button (زرّ) إلى Screen1 (شاشة 1).
2. أعد تسميته إلى zoomin_button (زرّ_التكبير).
3. من المُكوِّن zoomin_button (زرّ_التكبير)، اضبط خاصية BackgroundColor (لون الخلفية) إلى None (بدون).
4. ثم امسح خاصية Text (النصّ).
5. اضبط خاصية Image (الصورة) إلى أيقونة علامة زائد.

برمجة زر التكبير Programming the Zoom In Button

سيقوم هذا الزر بزيادة القيمة الحالية لخاصية Font Size (حجم الخط)   لكافة مكونات النص بمقدار نقطة واحدة يتم الضغط عليها فيها كل مرة.

لبرمجة زرّ التكبير:

1. حدِّد حدث Click (الضغط) لمُكوِّن zoomin_button (زرّ_التكبير).
2. حدِّد الأمر Set FontSize (ضبط حجم الخط) للمُكوِّن discover_label (اكتشف_التسمية).
3. حدِّد لبنة Addition (الجمع) من مجموعة أوامر Math (الحساب).
4. أضف القيمة 1 إلى خاصية FontSize (حجم الخط) الموجودة لمُكوِّن discover_label (اكتشف_التسمية).
5. كرِّر العملية نفسها لمُكوِّنات النصّ المتبقية على الشاشة.

إضافة زر التصغير للتطبيق Adding a Zoom Out Button to the Application

سنُضيف الآن زرًا لتصغير حجم الخط لجميع مكونات النص في كل مرة يتم الضغط عليه.

لإضافة زرّ التصغير:

1. من مجموعة User Interface (واجهة المُستخدِم)، أضف مكوِّن Button (زرّ) إلى Screen1 (شاشة 1).
2. أعد تسميته إلى Zoomout_button (زرّ_التصغير).
3. من المُكوِّن Zoomout_button (زرّ_التصغير)، اضبط خاصية BackgroundColor (لون الخلفية) إلى None (بدون).
4. ثم امسح خاصية Text (النصّ).
5. اضبط خاصية Image (صورة) إلى أيقونة علامة ناقص.

برمجة زر التصغير Programming the Zoom Out Button

سيؤدي هذا الزر إلى تقليل القيمة الحالية لخاصية FontSize (حجم الخط) لكافة مكونات النص بمقدار نقطة واحدة في كل مرة يتم الضغط عليه.

لبرمجة زرّ التصغير:

1. حدِّد حدث Click (الضغط) لمُكوِّن zoomout_button (زرّ_التصغير).
2. كرِّر نفس العملية السابقة لمُكوِّن zoomin_button (زرّ_التكبير)، وغيِّر العملية الحسابية فقط من addition(الجمع) إلى subtraction (الطرح).

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

إضافة زر تحويل النص إلى الكلام للتطبيق Adding a Text-To-Speech Button to the Application

سنُضيف الآن زرًا يقوم بتنشيط مكون  Text-To-Speech(تحويل النص إلى كلام) الذي يستخدم نظام صوت جهاز الهاتف المحمول لقراءة نص محدد بصوت عالٍ.

لإضافة زر تحويل النصّ إلى كلام:

1. من مجموعة User Interface (واجهة المُستخدِم)، أضف مكوِّن Button (زرّ) إلى Screen1 (شاشة 1).
2. أعد تسميته إلى text_to_speech_button (زرّ_تحويل النصّ_إلى_كلام).
3. من مكوِّن text_to_speech_button (زرّ_تحويل النصّ_إلى_كلام)، اضبط خاصية BackgroundColor (لون الخلفية) إلى None (بدون).
4. امسح خاصية Text (النصّ).
5. اضبط خاصية Image (الصورة) إلى أيقونة مكبر صوت.

لإضافة مكوِّن TextSpeech (تحويل النصّ إلى كلام):

1. من مجموعة Media (الوسائط)، أضف مكوِّن TextToSpeech (تحويل النصّ إلى كلام) إلى الشاشة.
2. أعد تسميته إلى text_to-speech (تحويل النصّ_إلى_كلام).
3. في مكوِّن text_to-speech (تحويل النصّ_إلى_كلام)، اضبط خاصية Language (اللغة) إلى en(الإنجليزية).
4. ثم اضبط خاصية SpeechRate (مُعدَل الكلام) إلى 0.5.

برمجة زر تحويل الكلام إلى نص Programming the Text-To-Speech Button

سيُنشئ هذا الزر نصًا من محتويات جميع مكونات النص على الشاشة والتي سيتم توفيرها لمكون Text-To-Speech(تحويل النص إلى كلام) لإنتاج الرسالة المنطوقة.

لبرمجة زرّ تحويل النصّ إلى كلام:

1. حدِّد حدث Click (الضغط) لمُكوِّن text_to_speech_button (زرّ_تحويل النصّ_إلى_كلام).
2. حدِّد الأمر Speak message (رسالة صوتية) لمُكوِّن text_to_speech (تحويل النص_إلى_كلام).
3. حدِّد الأمر Join (ربط) من مجموعة Text (النصّ) لربط النصوص معًا.
4. أضف خاصية Text (النصّ) لمُكوِّن discover_label (اكتشف_التسمية) إلى المُدخَل الأول لأمر Join(الربط).
5. كرِّر العملية المذكورة أعلاه للمُكوِّنات النصيّة الأخرى.

بإمكانك مراجعة محتوى موضوع “ميزات قابلية الوصول في التطبيق” بدايةً من عنوان “إضافة زر تحويل النص إلى كلام في التطبيق” وحتى هذه النقطة، من خلال الرابط التالي:

إضافة زر لتبديل النسق اللوني للتطبيق Adding a Button to Change the Color Theme of the Application

سنُضيف الآن زرًا يُغير نسق الشاشة بين نسقٍ فاتح وآخر أخضر.

لإضافة زرّ نَسَق اللون:

1. من مجموعة User Interface (واجهة المُستخدِم)، أضف مكوِّن Button (زرّ) إلى Screen1 (شاشة 1).
2. أعد تسميته إلى color_button (زرّ_اللون).
3. في مكوِّن color_button (زرّ_اللون)، اضبط خاصية BackgroundColor (لون الخلفية) إلى None(بدون).
4. امسح خاصية Text (النصّ).
5. اضبط خاصية Image (صورة) إلى أيقونة نصف دائرة.

برمجة زرّ نَسَق اللون Programming the Color Theme Button

عند ضغط هذا الزر سيصبح خلفية الشاشة بيضاء ويصبح لون النص أسود وعند ضغطه لمدة طويلة. ستصبح خلفية الشاشة خضراء داكنة وسيُصبح لون النص أبيض.

لبرمجة زرّ نَسَق اللون:

1. حدِّد حدث Click (الضغط) لمُكوِّن color_button (زرّ_اللون).
2. اضبط خاصية BackgroundColor (لون الخلفية) لمُكوِّن VerticalArrangement1 (الترتيب العمودي1) إلى White (أبيض).
3. اضبط خاصية BackgroundColor (لون الخلفية) لمُكوِّن discover_label (اكتشف_التسمية) إلى Light Gray (رمادي فاتح).
4. اضبط خاصية TextColor (لون النصّ) لمُكوِّن discover_label (اكتشف_التسمية) إلى Black (أسود).
5. كرِّر العملية المذكورة أعلاه لمُكوِّنات النصّ المتبقية.
6. حدِّد حدث Long Click (ضغطة طويلة) لمُكوِّن color_button (زرّ_اللون).
7. اضبط الألوان المناسبة للمُكوِّنات كما في العملية أعلاه.

أصبح البرنامج جاهزًا وعليك اختباره الآن، شغّل التطبيق باستخدام محاكي الأندرويد (Android Emulator) أو امسح رمز الاستجابة السريعة باستخدام جهاز الأندرويد لمعاينته.

توضح الصور أدناه كيفية ظهور ميزات قابلية الوصول على جهاز الهاتف المحمول.

بإمكانك مراجعة محتوى موضوع “ميزات قابلية الوصول في التطبيق” بدايةً من عنوان “إضافة زر لتبديل النسق اللوني للتطبيق” وحتى نهاية الموضوع، من خلال الرابط التالي:

اختبر تحصيلك لمحتوى الموضوع من خلال الرابط التالي:

الواجب الإلكتروني

إلى هنا يكون قد انتهى موضوع “ميزات قابلية الوصول في التطبيق”، لا تنسوا مراجعة أهداف التعلُّم أعلى المقال، وانتظرونا في الموضوع القادم!

روابط هامة

مقررات الفصل الدراسي الأول