معلومات عن مصطلح الانفوجرافيك وأنواعه ومزايا توظيفه في التعليم

1. ‫إعداد‬
‫حيي‬ ‫يوسف‬‫الفيفي‬
‫التعليم‬ ‫في‬‫افيك‬‫ر‬‫اإلنفوج‬
Infografic in Edu
‫الرقمية‬ ‫المناهج‬ ‫وتطوير‬ ‫تصميم‬1438‫هـ‬

2. ‫الرقم‬ ‫المناهج‬ ‫وتطوير‬ ‫تصميم‬‫ية‬
1438‫هـ‬
‫الجرافيك‬
‫البص‬ ‫والتعلم‬‫ري‬
‫البص‬ ‫التعلم‬‫ري‬
‫التفك‬ ‫مفهوم‬‫ير‬
‫البصري‬
‫مفهوم‬
‫التصميم‬
‫الجرافيكي‬
‫الإنفوجرافيك‬
‫التعليمي‬
، ‫تعريفه‬
،‫مميزاته‬
‫مراحل‬
‫تصميمه‬.
‫لماذا‬
‫اإلنفوجرافيك‬
‫تصميم‬
‫الإنفوجرافيك‬
‫تصمي‬ ‫معايير‬‫م‬
‫اإلنفوجرافيك‬
‫تصميم‬ ‫طرق‬
‫اإلنفوجرافيك‬
(‫تدريب‬
‫عملي‬)

3. ‫التعلم‬‫ي‬‫البصر‬
‫الرقمية‬ ‫المناهج‬ ‫وتطوير‬ ‫تصميم‬1438‫هـ‬
‫غيرها‬ ‫من‬ ‫أكثر‬ ‫البصر‬ ‫حاسة‬ ‫استخدام‬ ‫على‬ ‫يركز‬ ‫الذي‬ ‫التعلم‬ ‫ذلك‬ ‫هو‬.
‫للتعلم‬ ‫ق‬‫الطر‬‫أفضل‬‫من‬ ‫ي‬‫البصر‬ ‫التعلم‬ ‫أن‬‫على‬ ‫تتفق‬‫املعرفي‬ ‫النفس‬‫وعلم‬ ‫التعلم‬ ‫نظريات‬

4. ‫الرقمية‬ ‫المناهج‬ ‫وتطوير‬ ‫تصميم‬1438‫هـ‬
‫ي‬‫البصر‬‫التفكير‬
‫يعتبر‬‫التفكير‬‫ي‬‫البصر‬‫شكل‬‫من‬‫أشكال‬‫التفكير‬‫الذي‬‫ي‬‫عتمد‬‫على‬‫ما‬
‫اه‬‫ر‬‫ت‬‫العين‬‫لتكوين‬‫ر‬‫صو‬‫ذهنية‬‫يتخيلها‬‫الفرد‬‫وترجمة‬‫هذه‬‫ر‬‫الصو‬
‫الذهنية‬‫إلى‬‫ر‬‫صو‬‫سومات‬‫ر‬‫و‬‫تعبر‬‫عن‬‫هذا‬‫املفهوم‬.
‫ا‬ ‫من‬ ‫عدد‬ ‫في‬ ‫باإلبصار‬ ‫التفكير‬ ‫إلى‬ ‫الشريفة‬ ‫النبوية‬ ‫والسنة‬ ‫الكريم‬ ‫القرآن‬ ‫دعا‬، ‫لمواضع‬
‫اذكرها؟‬
‫ى‬‫ير‬‫بياجيه‬‫أن‬‫التفكير‬‫ي‬‫البصر‬‫هو‬‫ة‬‫ر‬‫قد‬‫عقلي‬‫ة‬
‫مرتبطة‬‫ة‬‫ر‬‫بصو‬‫مباشرة‬‫بالجوانب‬‫الحسية‬‫البص‬‫رية‬

5. ‫الرقمية‬ ‫المناهج‬ ‫وتطوير‬ ‫تصميم‬1438‫هـ‬

6. ‫التفكير‬‫ي‬‫البصر‬
‫الرقمية‬ ‫المناهج‬ ‫وتطوير‬ ‫تصميم‬1438‫هـ‬
‫التفكير‬
‫البصري‬
‫اإلبصار‬
Vision
‫التخيل‬
Imagery
‫على‬‫القائمين‬‫على‬‫تصميم‬‫افيك‬‫ر‬‫اإلنفوج‬‫استيعاب‬‫مكونات‬
‫وعمليات‬‫التفكير‬‫ي‬‫البصر‬‫لكي‬‫يقدم‬‫للمتلقين‬‫إ‬‫افيك‬‫ر‬‫نفوج‬
‫ناجح‬‫ومفهوم‬
‫ال‬‫ين‬‫ر‬‫أم‬ ‫من‬ ‫اإلبداع‬‫لتحقق‬ ‫بد‬:
-‫البحث‬‫وكثرة‬ ‫االطالع‬‫سعة‬
-‫التأمل‬‫ل‬‫وطو‬‫املالحظة‬‫دقة‬
(‫القرني‬ ‫أحمد‬)

7. ‫التصميم‬‫افيكي‬‫ر‬‫الج‬Graphic Design
‫الرقمية‬ ‫المناهج‬ ‫وتطوير‬ ‫تصميم‬1438‫هـ‬
‫فن‬‫سة‬‫ر‬‫مما‬‫التخطيط‬‫وعرض‬‫األفكار‬‫ات‬‫ر‬‫والخب‬
‫باستخدام‬‫األشكال‬‫املرئية‬‫والنصوص‬‫إليصال‬‫مع‬‫نى‬‫أو‬
‫معلومة‬‫أو‬‫فكرة‬‫ما‬.

8. ‫الرقمية‬ ‫المناهج‬ ‫وتطوير‬ ‫تصميم‬1438‫هـ‬
‫المعلومات‬ ‫أو‬ ‫البيانات‬ ‫لتقديم‬ ‫بصرية‬ ‫تمثيلات‬ ‫هي‬
،‫واضح‬ ‫وبشكل‬ ‫سريعة‬ ‫بطريقة‬ ‫المعقدة‬‫الإد‬ ‫وتحسين‬‫راك‬
‫المتعلم‬ ‫لدى‬.
‫تعريف‬‫التعليمي‬‫افيك‬‫ر‬‫اإلنفوج‬
‫على‬ ‫القائم‬ ‫التعليم‬ ‫تكنولوجيا‬ ‫أدوات‬ ‫أحدث‬ ‫من‬ ‫التعليمي‬ ‫اإلنفوجرافيك‬ ‫يعتبر‬‫الويب‬.

9. ‫ملاذا‬‫نستخدم‬‫التعلي‬‫في‬‫افيك‬‫ر‬‫اإلنفوج‬‫م؟‬
‫الرقمية‬ ‫المناهج‬ ‫وتطوير‬ ‫تصميم‬1438‫هـ‬

10. *‫ب‬ ‫اسرع‬ ‫المصورة‬ ‫المعلومات‬ ‫يعالج‬ ‫العقل‬60000
‫النصية‬ ‫المعلومات‬ ‫من‬ ‫مرة‬.
*90%‫معلو‬ ‫هي‬ ‫المخ‬ ‫إلى‬ ‫تنتقل‬ ‫التي‬ ‫المعلومات‬ ‫من‬‫مات‬
‫مصورة‬.
*40%‫للمعلومات‬ ‫أفضل‬ ‫يستجيبون‬ ‫األشخاص‬ ‫من‬
‫النصية‬ ‫بالمعلومات‬ ‫مقارنة‬ ‫المصورة‬.
‫الرقمية‬ ‫المناهج‬ ‫وتطوير‬ ‫تصميم‬1438‫هـ‬
‫ـ‬‫ل‬ ‫اسة‬‫ر‬‫د‬‫في‬(‫يش‬‫و‬‫الدخني،در‬،2015)‫أطفال‬ ‫لدى‬ ‫ي‬‫البصر‬ ‫التفكير‬ ‫ات‬‫ر‬‫مها‬ ‫تنمية‬ ‫في‬ ‫افيك‬‫ر‬‫اإلنفوج‬ ‫أثر‬ ‫عن‬
‫التوحد‬
‫ا‬‫ملوضوع‬‫ي‬‫البصر‬ ‫التفكير‬‫ات‬‫ر‬‫مها‬ ‫تنمية‬‫في‬ ‫الويب‬‫عبر‬ ‫افيك‬‫ر‬‫اإلنفوج‬ ‫تقديم‬ ‫نمط‬‫استخدام‬‫فاعلية‬‫إلى‬‫اسة‬‫ر‬‫الد‬ ‫خلصت‬‫اك‬‫ر‬‫إلد‬
‫لألشكال‬ ‫والتمييز‬.

11. ‫ات‬‫ز‬‫ممي‬‫افيك‬‫ر‬‫اإلنفوج‬‫التعليمي‬
‫الرقمية‬ ‫المناهج‬ ‫وتطوير‬ ‫تصميم‬1438‫هـ‬
‫لكل‬ ‫مناسب‬
‫المجاالت‬
‫والتخصصات‬.
‫يقدم‬
‫الحقائق‬
‫في‬ ‫العلمية‬
‫بصري‬ ‫صورة‬‫ة‬
‫يسهل‬
‫فهمها‬
‫واستيعابه‬‫ا‬.
‫مثالية‬ ‫أداة‬
‫لتوضيح‬
‫غي‬ ‫األشياء‬‫ر‬
‫المألوفة‬
‫للمتعلمين‬.
‫يعطي‬
‫المتعلم‬
‫على‬ ‫القدرة‬
‫المقارنة‬
‫وتحليل‬
‫المعلومات‬.
‫على‬ ‫القدرة‬
‫ثقافة‬ ‫إثراء‬
‫المتعلم‬.

12. ‫الرقمية‬ ‫المناهج‬ ‫وتطوير‬ ‫تصميم‬1438‫هـ‬
‫بعمل‬ ‫يقوم‬ ‫من‬
‫افيك؟‬‫ر‬‫اإلنفوج‬

13. ‫الرقمية‬ ‫المناهج‬ ‫وتطوير‬ ‫تصميم‬1438‫هـ‬
‫العرض‬‫طريقة‬‫حسب‬‫اإلنفوجرافيك‬‫أنواع‬
‫ثابت‬
‫متحرك‬
‫فيديو‬
‫جرافيك‬ ‫موشن‬
‫تفاعلي‬
‫الشكل‬‫حسب‬‫اإلنفوجرافيك‬‫أنواع‬
‫جدوال‬
‫رسوم‬‫توضيحي‬‫ة‬
‫مخططات‬‫بيانية‬
‫خرائط‬
‫عالقات‬
‫اإلنفوجرافيك‬ ‫أنواع‬

14. ‫الثابت‬ ‫افيك‬‫ر‬‫اإلنفوج‬‫من‬ ‫نماذج‬
‫الرقمية‬ ‫المناهج‬ ‫وتطوير‬ ‫تصميم‬1438‫هـ‬

15. ‫الرقمية‬ ‫المناهج‬ ‫وتطوير‬ ‫تصميم‬1438‫هـ‬

16. ‫مبادئ‬‫ومعايير‬‫تصميم‬‫افيك‬‫ر‬‫اإلنفوج‬
‫التعليمي‬
‫الرقمية‬ ‫المناهج‬ ‫وتطوير‬ ‫تصميم‬1438‫هـ‬
‫إلى‬ ‫لتحويله‬ ً‫مناسبا‬ ‫الموضوع‬ ‫يكون‬ ‫أن‬‫انفوجرافيك‬.
‫وحداثت‬ ،‫المعلومات‬ ‫صحة‬ ‫من‬ ‫والتأكد‬ ‫الموضوع‬ ‫محتوى‬ ‫تحليل‬‫ها‬.
‫ثوثيق‬‫المعلومات‬ ‫مصادر‬.

17. ‫الرقمية‬ ‫المناهج‬ ‫وتطوير‬ ‫تصميم‬1438‫هـ‬
‫وتتابعها‬ ‫المعلومات‬ ‫تسلسل‬ ‫مراعاة‬.
‫والهد‬ ‫الفكرة‬ ‫مع‬ ‫ومتناسبة‬ ‫جذابة‬ ‫ألوان‬ ‫اختيار‬‫ف‬.
‫التعقيد‬ ‫وعدم‬ ‫البساطة‬
‫والنحوية‬ ‫اإلمالئية‬ ‫األخطاء‬ ‫مراجعة‬.

18. ‫الرقمية‬ ‫المناهج‬ ‫وتطوير‬ ‫تصميم‬1438‫هـ‬
‫ق‬‫طر‬‫تصميم‬‫افيك‬‫ر‬‫اإلنفوج‬
• Adobe Illustrator
• Adobe Photoshop
• Adobe After Effects
• Adobe animate
• Motion
‫برمجيات‬
• easel.ly
• piktochart.com
• canva.com
• visual.ly
• powtoon.com
• goanimate.com
‫مواقع‬

19. ‫موقع‬‫على‬‫العملي‬‫يب‬‫ر‬‫التد‬easel.ly
‫يب‬‫ر‬‫التد‬ ‫متطلبات‬
.1‫موقع‬ ‫على‬ ‫الدخول‬easel.ly
.2‫الرمزي‬ ‫الصور‬ ‫بعض‬ ‫تحميل‬‫ة‬
‫الت‬ ‫المواقع‬ ‫من‬ ‫واأليقونات‬‫ي‬
‫مثل‬ ‫توفرها‬:iconarchive

20. ‫واجهة‬‫املوقع‬
‫الرقمية‬ ‫المناهج‬ ‫وتطوير‬ ‫تصميم‬1438‫هـ‬

21. ‫يوفر‬‫البرنامج‬‫العديد‬‫من‬‫النماذج‬‫جاهزة‬‫يمكنك‬‫استخدام‬‫احدها‬‫والتعديل‬‫حسب‬‫االحتياج‬
‫نختار‬ ‫سوف‬
‫أولي‬ ‫نموذج‬
‫الرقمية‬ ‫المناهج‬ ‫وتطوير‬ ‫تصميم‬1438‫هـ‬

22. ‫أو‬ ‫خطأ‬ ‫من‬ ‫فيه‬ ‫كان‬‫ما‬ ‫و‬ ‫وحده‬ ‫هللا‬ ‫فمن‬ ‫صواب‬ ‫من‬ ‫فيه‬ ‫كان‬‫فما‬ ‫جهدان‬ ‫هو‬ ‫هذا‬
‫ذلك‬ ‫عن‬ ‫تعاىل‬ ‫هللا‬ ‫نستغفر‬ ‫و‬ ‫الشيطان‬ ‫و‬ ‫أنفسنا‬ ‫فمن‬ ‫نسيان‬ ‫أو‬ ‫تقصري‬
‫تفاعلكم‬ ‫لكم‬ ً‫ا‬‫ر‬‫شاك‬
‫أن‬ ‫دعواان‬ ‫وآخر‬
‫العاملني‬ ‫رب‬ ‫هلل‬ ‫احلمد‬

23. ‫اجع‬‫ر‬‫امل‬
‫الرقمية‬ ‫المناهج‬ ‫وتطوير‬ ‫تصميم‬1438‫هـ‬
• http://uaeinfographics.blogspot.com/p/what-is-infographics.html
• http://arinfographic.net/?p=636
• http://www.creativebloq.com/infographic/tools-2131971
• http://www.infographicsguide.com/index.php/2015-01-02-19-09-58/97-visual-thinking
• https://docs.google.com/document/d/1D0f4LwhTjW1sokjSS7YwARBulRZZKL1Y1nM4q44nHp8/edit?
usp=sharing
• http://www.id4arab.com/2014/09/blog-post_27.html
• http://www.teachthought.com/pedagogy/how-to-use-infographics-as-multimodal-learning-tools/
• http://emag.mans.edu.eg/index.php?page=news&task=show&id=494&sessionID=39
•‫شلتوت‬.‫شوقي‬ ‫محمد‬(2016.)‫اإلنتاج‬ ‫إلى‬ ‫التخطيط‬ ‫من‬ ‫اإلنفوجرافيك‬.‫الرياض‬:‫الوطنية‬ ‫فهد‬ ‫مكتبة‬
•‫العربي‬.‫رمزي‬(2008.)‫التصميم‬‫الجرافيكي‬.‫عمان‬
•‫العين‬.‫بشيرة‬(2015.)‫والتطبيق‬ ‫الفكرة‬ ‫بين‬ ‫الذهنية‬ ‫الخرائط‬.‫عمان‬:‫أمجد‬ ‫دار‬
•‫القرني‬.‫علي‬ ‫أحمد‬(1428.)‫االبداع‬‫العلمي‬.‫الرياض‬:‫الوطنية‬ ‫فهد‬ ‫الملك‬ ‫مكتبة‬
•‫دريوش‬‫عمرو؛‬ ،‫والدخني‬‫أماني‬ ،( .2015)‫اإلنفوجرافيك‬ ‫تقديم‬ ‫نمط‬(‫الثابت‬/‫والمتحرك‬)‫وأثرهما‬ ‫الويب‬ ‫عبر‬
‫نحوه‬ ‫واتجاهاتهم‬ ‫التوحد‬ ‫أطفال‬ ‫لدى‬ ‫البصري‬ ‫التفكير‬ ‫مهارات‬ ‫تنمية‬ ‫في‬.‫التعليم‬ ‫تكنولوجيا‬.‫مصر‬