1

جامعة امللك سعود كلية الرتبية

قسم تقنيات التعليم

(Canvaاالنفوجرافيك)

إشراف: د.عثمان الرتكي

روان الرتكي البة:إعداد الط

يف التعليماحلاسب االيل (506وسل رقم واسم املقرر: ) هـ1437

2

:مقدمة

ليهم للصحابة رضوان هللا عمن يتأمل سيرة الرسول صلى هللا عليه وسلم يجد مراعاته

ما))كما قال الرسول صلوات هللا وسالمه عليه عند تعليمهم من خالل ضرب األمثلة

واهر- (وتركها( راح ثم شجرة تحت استظل كراكب إال الدنيا في أنا ما وللدنيا؟ لي

اإلشارات كقوله صلوات هللا وسالمه عليه ))-األلباني وصححه الترمذي ناأ، أيضا

،-اريصحيح البخ-والوسطى(( السبابة بإصبعيه وقال هكذا الجنة في اليتيم وكافل

عن ابن مسعــود رضـي هللا عنه قــال: ) خطف استخدام الرسوم على األرضكذلك

اله قال ثم ) خط عن يمينه وشم (م قال: ) هذا سبيل هللا مستقيمارسول هللا خطا بيده ( ث

(، ثم قال: هذه السبل ليس منها سبيل إال عليه شيطان يدعــو إليه، ثم قرأ: }وأن هذا

.( 153:بكم عن سبيله { ) األنعام صراطي مستقيما فاتبعوه وال تتبعوا السبل فتفرق

لهم المعلومة وذلك يدل على حكمته صلى هللا عليه وسلم حيث كان الهدف هو تقريب

.وترسيخها في أذهانهم

تعريف الرسوم التعليمية:

، التي تم تصميمها من أجل المرسومة والرموز الخطية البصريةهي تلك المواد

ائل علمي والتي تستخدم كوسأسلوب عنها ب والتعبيرتلخيص المعلومات وتفسيرها

.يمية تخدم عملية التعليم والتعلمتعل

مه للرسم الرسول صلى هللا عليه وسلرسم مشاب(: 1شكل)

3

ة:يأنواع الرسوم التعليم

.، الدوائر البيانيةالرسوم البيانية مثل: األعمدة البيانية .1

.كيفية توصيل دائرة كهربائيةوضح لنا يالرسوم التوضيحية مثل: رسم .2

التي كالملصقات معين موضوع إلى يدعو أن إما وهو نوعان التعليمي الملصق .3

من يحذر أو النظافة، أو النظام على كالمحافظة محدد سلوك اتباع على تحث

.المخدرات أضرار عن وتنبه تحذر التي كالملصقات معين موضوع

.لنبات كامل النموكمصور يوضح الشكل الخارجي المصورات .4

الخرائط مثل: الخرائط الطبيعية، الخرائط االقتصادية. .5

حدث أنواع الرسوم التعليمية:أ

كاالنفوجرافيمن أحدث أنواع الرسوم التعليمية، ومصطلح االنفوجرافيكيعتبر

Infographicحين هو دمج للمصطلInformation ويعني المعلومات والحقائق

تصويري.ويعني graphicو

:االنفوجرافيكمسميات

Infographicsس االنفوجرافيك

Data Visualizationالتفاعلية -البيانات التصورية

Information Designلتصاميم المعلوماتية ا

االنفوجرافيك(: تشبيه لمصطلح 2شكل)

4

:االنفوجرافيكتعريف

والمعلومات والمفاهيم المعقدة إلى صور يانات بهو مصطلح يطلق على فن تحويل ال

ورسوم يمكن فهمها واستيعابها بوضوح وتشويق ويتميز بعرض المعلومات الصعبة

والمعقدة بطريقة سلسة وواضحة.

:االنفوجرافيككونات م

Wikipedia هما ذكربناء على الرئيسيةالمكونات أهم من موقع

سهم واألصر استخدام االلوان والرسومات البصري ويتضمن هذا العن العنصر-1

بالصور. البيانيةوالرسوم التلقائيةاالشكال

ةن تكون مختصرأالتي ينبغي و توبةـالمكالنصوص ملنصي ويشال المحتوى-2

السابق. ومرتبطة بالعنصر

ويجعله أكثر من كونه نص وصورة االنفوجرافيك يميزأهم ما وهي ةلمعرفا-3

صالهاـرفة المراد إيـهوم أو المعـمفـينة تمثل الـطريقة معـديم بـقـت ما طريقةـوإن

.وغيرهاالزمني أو التفرعات كالتسلسل

االنفوجرافيك(: توضيح لمفهوم 3شكل)

5

:االنفوجرافيك أنواع

شر نمحتوى ثابت يطبع أو يوزع أو يالثابت: وهو عبارة عن االنفوجرافيك .1

الثابت يشرح بعض المعلومات االنفوجرافيكعلى صفحات اإلنترنت ومحتوى

.االنفوجرافيكعن موضوع معين يختاره صاحب

وهو عبارة عن نوعين: المتحرك: االنفوجرافيك .2

تصوير فيديو عادي ويوضع عليه البيانات والتوضيحات بشكل جرافيك .1

يه ويطلق علمتحرك إلظهار بعض الحقائق والمفاهيم على الفيديو نفسه

.املنوع قليل بعض الشيء في االستخدولألسف هذا االتفاعلي االنفوجرافيك

cnn-info-http://arabic.cnn.com/middleeast/2015/09/21/hajj

عبارة عن تصميم البيانات والمعلومات والتوضيحات بشكل متحرك كامل .2

ساعد تويتطلب هذا النوع الكثير من االبداع واختيار الحركات المعبرة التي

عة وهذا النوع هو األكثر استخداما.في إخراجه بطريقة شيقة وممت

2Nchck0SVM-https://www.youtube.com/watch?v=

الثابت االنفوجرافيك(: نموذج من 4شكل)

6

:البشري المخ بفسيولوجيا االنفوجرافيك عالقة

فيها دمنستخ التي والطرق االبصار بفسيولوجيا المرتبطة الدماغ أبحاث قدمت

في االنفوجرافيك الستخدام مقنعة مبررات المعلومات لمعالجة العين

ماساتشوستس معهد في العلماء اكتشف حيث المتداخلة، اليومية االتصاالت

الرؤية أن Massachusetts Institute of Technologyللتكنولوجيا

قوة من تقريبا %50 حوالي وأن المخ، فسيولوجيا في األكبر الجزء هي تعتبر

.األبصار وظيفة نحو مباشر غير أو مباشر بشكل موجهة المخ

المصورة للمعلومات المخ معالجة بأن القائل اإلحساس النتائج هذه وتؤكد

.الخام للنصوص معالجته من تعقيدا أقل يكون( االنفوجرافيك)

:الحواس والتعليم بواسطة االنفوجرافيك

نتعلم: أننا الدراسات أثبتت ـ أ

الذوق. حاسة بواسطة 1%

اللمس. حاسة بواسطة 1.5%

الشم. حاسة بواسطة 3.5%

السمع. حاسة بواسطة 11%

.البصر حاسة بواسطة 83%

للمعلومات(: طريقة استقبال الدماغ ومعالجته 5شكل)

7

نتذكر: أننا الدراسات دلت كذلك ـ ب

نقرأه. مما 10%

نسمعه. مما 20%

نراه. مما 30%

نفعله. مما 50%

نقوله. مما 80%

واحد. آن في ونفعله نقوله مما 90%

:االنفوجرافيكمميزات

.عقدة والكبيرة وجعلها سهلة الفهمتبسيط المعلومات الم .1

.واالعتماد على المؤثرات البصرية في توصيل المعلومة .2

.والبيانات من ارقام وحروف مملة الى صور ورسوم شيقةتحويل المعلومات .3

.عبر الشبكات االجتماعية االنفوجرافيكسهولة نشر وانتشار .4

:االنفوجرافيكمجاالت

.المجال الديني

.المجال الصحي

.المجال التسويقي

.المجال التوعوي

.المجال الجغرافي

.المجال التعليمي

8

:االنفوجرافيكأشكال

توالـصادرا والوفيات والمواليد الـسـكان أعداد احصائيات مثل: االحصائيات

.وغيرها والهجرة، والواردات

الجـنين، وتـكوين الغذاء، وهـضم الدموية الـدورة إجـراءات: مثل: اإلجـراءات

.وغيرها اإلنتاج، وحركة الطبيعة، في المياه ودورة

تصاديةواالق السياسية واألفكار والتعميمات، والنظريات المفاهيم: مثل: األفكار

.وغيرها المجتمعات، في السائدة والغذائية والصحية واالجتماعية

الزمنية، والخرائط وترتيبها، األحداث، تاريخ مثل: التاريخي التسلسل

.وغيرها الزمنية، والجداول

الجغرافية، المناطق حـسب والقـياسات المواقع، مثل: الجغرافي الوصف

وغيرها

وغيرها والقوائم، والعناصر، المكونات، مثل: التشريح

وغيرها االحتياجات، وتحديد التنظيمي، الهيكل مثل: الهرمي التسلسل

األشخاص بين والعالقات والخارجية، الداخلية العالقات مثل: العالقات

وغيرها الخدمات،/ والمنتجات

المجاالت أحد في مؤثرة شخصية االنفوجرافيك يتناول كأن: الشخصيات

.اليومية للحياة المتنوعة

تطبيقات االنفوجرافيك في التربية والتعليم:

أكاديمية رفدhttp://refdacademy.com/ برنامج فطن https://instagram.com/ftnmoe/ مناهجالانفوجرافيك https://twitter.com/alhussein1436

9

:االنفوجرافيكخطوات تصميم

الفكرة-1

ما الهدف من وراءها؟ الجهة المستهدفة لعرض الفكرة؟فال بد من تحديد ما هي

.الفكرة

البحث-2

ها استخدام ة ومنفي بناء تلك الفكر ناحتاج إلى مواد تساعدنبعد التوصل إلى "الفكرة"

ما يتوجب مراعاته ، والمعلوماتعدد من البيانات أكبرللوصول إلى محركات البحث

.هو حداثة المراجع ومدى مصداقيتهاناء عملية البحث أث

البيانات-3

وره في دراسات أو كتب منشموجودة ي ببيانات االنفوجرافيكالتصميم يجب أن يوثق

مع مراعاة مدى مصداقية المرجع وحداثته لدعم الفكرة وإحصاءات بأرقاممسبقا

.بشكل موثق مدروسة

الفلترة-4

قم بفلترة البيانات والمعلومات المستخدمةبعد االنتهاء من توفر المواد البيانية

خدم است ،للفكرةي حشو أو طمس أال تشكل واالساس حتىواستخراج فقط المطلوب

كرة.الف اساس بناء واجعل منها والمنتج النهائيفقط البيانات المتعلقة بالمشروع

التنسيق-5

م باستخدام البرامج المجانية المتوفرة سواء عبر االنترنت أو في جهازك كبرنامج وقن

وغيرها من البرامج التي تساعد في بناء المحتوى بشكل وورد( بوربوينت، اكسل،)

.ومرتبمنسق

10

التخطيط-6

عبر االنترنت كموقع باستخدام برامج عديدة المشروع،قم بعمل تخطيط مبدئي عن

DIGRAME.LY أوMINDMAP، ان لم تستطع استخدام هذه البرامج قم باستخدام

كرة الف الرسم،التصور المراد عمله حتى وان كنت ضعيف في والقلم ورسمالورقة

.في مضمون سهل وعرض الفكرة والسليم إلبرازهي وضع التصور الصحيح

م باستخدام مواد فعلية في رسم التصور كاستخدام التصوير الضوئي لمبنى وقن أيضا

ل قالب واحد ليتم التعام يوالتصور فأو صور متوفرة عبر االنترنت لدمج األفكار

الحقا.مع المحتوى في اإلخراج الفني

األدوات-7

امج تخدام برفي هذه المرحلة سيتم تحديد االدوات المستخدمة في االخراج الفني واس

واختيار الوجهةناء اختيار األدوات يتوجب عليك دراسة المشروع ككل أثميم التص

" التخطيط " يجب تحديد ألي وجه ستقوم السابقةالنهاية وذلك يندرج في الخطوة

.سواء كان االنترنت أو مطبوع االنفوجرافيكالتصميم بإخراج

االخراج-8

ين في بداية األمر فأول ما يتم اخراجه هو التصور في هذه المرحلة يتم اخراج عنصر

عة يتم ايضا مراج مصور،ما قبل النهائي وقد يكون بعدة اشكال سواء كان تفاعلي أم

ومراجعة ما ان كان يحتوي على أي مدخالت خاطئة ليتم والبيانات المدخلةالتصميم

ي حالة كان أما ف وتجربته،يتم معاينة المنتج النهائي للتصميم النشر.تصحيحها قبل

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

اخراجه.جهوزية

فهو يؤثر على الحالة المزاجية الجرافيك،كما يعد اللون نقطة حيوية في التصميم

ويعطي ردود فعل عاطفية للجمهور من خالل التعبير عن طريقة االختيار المتقن

لأللوان.

11

نصائح هامة:

نقدم حتى مراعاتها يجب المعايير مثل تكون ان يجب هامة نصائح يوجد

.وواضح مميز انفوجرافيك

في المتضمنة المعلومات سالمة من التأكد خالل من وذلك: المعلومات سالمة

. وحدثتها صحتها وكذلك ونحويا، إمالئيا التصميم

وسريعة االستخدام، وسريعة سهلة جعلها ضرورة بحيث: التصميم بساطة

يف الرغبة مقاومة يتطلب وهذا تحتويها، التي المعلومات فهم وسهولة القراءة،

.واحد انفوجرافيك في المعلومات من كبيرة كمية وضع

منةالمتض والعمليات العالقات إبراز يتطلب وهذا: األساسية المكونات تماسك

لىع ييسر الذي األمر بعضها، مع وربطها المتقاربة المعلومات وتجميع في

.المعلومات من المختصر من الشكل هذا مع التواصل سهولة مستخدمها

ومات،والرس الصور من بالكثير تضمينها يتم بحيث: والرسومات الصور دمج

يريد ممه شيء وكأنها تبدو بحيث والجاذبية، الطرافة عليها يضفي الذي األمر

. الخاصة جراتهم في يعلقوه ان المتعلمين

ةالنصي للمعلومات المناسبة األلوان اختيار يتم بحيث: المناسبة األلوان

. الخلفيات وكذلك والمصورة

ستخداما يفضل وجذابة لطيفة انفوجرافيك إلنتاج: المناسبة البرامج استخدام

انفوجرافيك إنتاج أيضا يمكن أنه إال التصميم، في المتخصصة البرامج

ة إدار في ما حد إلى صعوبة المصمم سيجد أنه غير الورد، برنامج باستخدام

.الرسومات تلك مكونات

بياناتو االنفوجرافيك، مصمم اسم تسجيل يتم بحيث: المصمم بيانات تسجيل

.معه التواصل المستخدمين على ييسر حتى معه، التواصل

في إليها الرجوع تم التي المعلومات بمصادر قائمة ارفاق يجب: المراجع

.االنفوجرافيك تصميم

12

ماشىيت بك الخاص االنفوجرافيك أن من التأكد يتم بحيث: األنظمة مع مؤامتها

لىع للتدريب كنتيجة يستخدمها أن المتعلم من تريد التي األنظمة يساير أو

.ذلك في عليها االعتماد زيادة وعليك استخدامها،

يثح متعددة، تعليمية مواقف في استخدامها تكرار خالل من: استخدامها تعزيز

.والجهد الوقت من الكثير الواحدة االنفوجرافيك إنتاج يستغرق

:االنفوجرافيكبرامج تصميم

نذكر منها:توجد برامج ومواقع عدة

Illustrator Adobe إلستريترأدوبي .1

س عند المصممين، وذلك لمرونته االنفوجرافيكالبرنامج االول في تصميم نتائج جذابة. إلعطاءالشديدة وقابليته

Photoshop Adobe أدوبي فوتوشوب .2

س، رغم أنه لن يكوناالنفوجرافيكيمكنك استخدام فوتوشوب لتصميم بمرونة إلستريتر، حيث أنه برنامج تحرير صور في المقام االول، إال أنه

استغالله لعرض البيانات بطرق جميلة كذلك. يمكن

inkscape إنسكيپ .3

إذا كنت تفضل استخدام برنامج مجاني فإن إنكسيب هو برنامج بديل االلستريتر.

Tableau تابلوه .4

برنامج مجاني يعمل في نظام الويندوز فقط، يستخدم لوضع التصاميم هو الملونة والفريدة من نوعها.

13

5. Canva

والتي تعني Canvsهو مشتق من الكلمة الفرنسية Canvaمصطلح

.لوحه زيتيه على قماش غليظ

:Canva كانڤا بداية تأسيس

تدرس فيعندما كانت ميالني پيركنز ٢٠٠٧في بدأتكانڤا موقع الفكرة ل

رامج ببواسطة برامج مثل التصميم الجرافيكي بأسترالياويسترن جامعة

صعوبة في طالب يعانون وجدت و Photoshop و InDesignمثل

ف ع المؤسس المشارك كلياشتركت ميالني م لذلكاستخدامها ها وكيفية تعلم

يم على تصم ةوتعتبر أداة لكترونيإميالني وكليف كتب اطلقأاوبريشت،

وسرعان ما، االنترنت لتسهل على الطالب والمعلمين صنع ملخصاتهم

باإلمكان أن تتوسع على التي اخترعوها ة التكنولوجيةاأن األد أدركوا

كبر. نطاق أ

مع 2013عام في أواخر برنامج كانڤا أطلقوا واالطالع بعد البحث

ثالث عضو في 24الفريق حاليا لديه ،المؤسس المشترك كاميرون ادمز

وتقول ميالني پيركنز، : سيدني، مانيال وسان فرانسيسكوةمختلفدول

كانت رحلة ال تصدق حتى اآلن، لقد Canva: الرئيس التنفيذي لكانڤا

وانها مازالت في البداية.

:Canvaكانڤا مميزات

التسجيل مجاني. .1

.لكل الفئات االستخدامسهل .2

رسومات توضيحية وملصقات إعالنية وإنفوجرافيك وصور غالف يتيح إنشاء .3

الحساب على فيسبوك وتويتر، باإلضافة إلى العديد من الخيارات الرائعة األخرى.

14

لخاص ا االنفوجرافيكيتميز بخاصية السحب واإلفالت والتي تتيح تخصيص .4

بالمصمم.

والقصاصات الجاهزة.مكتبة ضخمة من الصور .5

.واستخدامهاالصور الخاصة للمستخدم من جهاز الكمبيوتر رفع .6

يوجد في الموقع ما يشبه المدرسة اإللكترونية، فهم يضعون نصائح لك على شكل .٧

مقاالت صغيرة مدعومة بصور توضيحية لتبسيط األمر، فالفئة المستهدفة لديهم

بالتصميم على اإلطالق، لكنه يريد هو المستخدم العادي الذي ليس لديه خبرة

.الحصول على تصميم جيد بوقت قصير وبدون تكلفة عالية غالبا

:Canvaكانڤا سلبيات

لكن تلك ليست بالعقبة الكبيرة، فإن المشكلة كلها ، للغة العربية وشكل واحد خط-1

أو حتى صورة pdfفي التصميم نفسه، فإذا ما أنهيت التصميم يمكنك تحميله بامتداد

هم تسلكذلك باإلمكان مراإلى حاسوبك وكتابة النص الذي تريد، jpgعادية بامتداد

ها أنهم ال يدعمون في ردهم، وعند وضع اقتراحي لهم جاء العربية غةليهتموا بدعم الل

في الوقت الحالي، لكنهم يخططون لهذا .قريبا

.gridيوجد شبكة للصورة ال-2

15

:العربية المراجع

.مصر.(. التصميم الجرافيكي. دار األبداع2005العربي.رمزي)

.الرياض الثقافي اإلبداع دار .التعليمية الرسوم تقنيات (.1995.محمد)لمشيقحا

وسائل وتكنولوجيا التعليم. مكتبة الرشد. الرياض. (.2010سالم.أحمد)

ي ف االنفوجرافيكالمرتكزات األساسية لتفعيل استخدام (. 2015عبدالباسط.حسين. )

.تاريخ االسترداد 15العدد . مجلة التعليم األلكتروني.والتعلم عمليتي التعليم

م.8/11/2015

http://emag.mans.edu.eg/index.php?page=news&task=sho

w&id=494&sessionID=39

المراجع األجنبية:

Smiciklas.Mark.(2012).The Power of Infographics Indiana.USA

Infographic.(2014).Retrieved Nofmber10, 2015,from Wikibidia

http://en.wikipedia.org/wiki/Infographic