07‏/02‏/2013

إنفوجرافيــك | التحدي بين القهوة والشاي

ريم الناصري

المصادر

Tea @ Wikipedia

Coffee @ Wikipedia

List of countries by coffee consumption per capita @ Wikipedia

Tea in the United Kingdom @ Wikipedia

The Truth About Caffeine

هذا العمل

Infographic | Bar Chart Vs Pie Chart ?

Bar Chart Vs Pie Chart

Infographic | Bar Chart Vs Pie Chart

علم " الانفوجرافيك " فاننا نتحدث عن حقائق و ارقام متواجدة من مصادر عدة عبر الانترنت , قد تتضمن دراسات و بحوث منشورة , قد تكون ايضا عن اجتهادات شخصية , انا لا اتحدث عن التصاميم وانما الارقامفي التصاميم , فاحد الاخطاء الشائعة التي لاحظتها اثناء تصميم الانفوجرافيك هو عدم منح البيانات صورة موضحة في التصميم ونكتفي بوضع النسبة المئوية !!

ان مصطلح " انفوجرافيك " او " انفوغراف " او " انفوجرافيكس " ويطلق باللغة الانجليزية " Infographics " و " Information Design " هو خليط من المواد البيانية و الرسوم المصورة /المرسومة .

العديد من المواقع و المدونات قد كتبت و شاركت بنقل محتويات المواد الانفوجرافكية ولكن هل معضمها صحيح , هل البيانات المقدمة في الرسوم المصورة صحيحة , اليوم في هذه المقالة سنتحدث عن احد اخطاءتصاميم الانفوجرافيكس يطلق عليها Data Aggregation وطريقة عرض البيانات سواء كانت دوائر بيانية او اعمدة بيانية وغيرها من الرسوم المبهره.

ما المقصود بـ Data Aggregation , هي مستخلصات البيانات وهي متواجدة في جميع الرسوم البيانية التي تستوضح فقط نسب مئوية وليس الرقم الفعلي , سنستوضح الفكرة اكثر بمثال حي لاحد تصاميم الانوجرافيك واخذ مثال حي لمعنى Data Aggregation .

الجدير بالذكر ان في التصاميم قد تلاحظ رسوم مبهرة وتصميم رائع بالوان منتقاه بعناية , ولكن السؤال هو ما مدى مصداقية البيانات ؟ هل كل ما تم رسمه هو صحيح ؟ هل البيانات المتواجدة صحيحه ؟ هل البيانات المستخدمة Aggregated أي مستخلصة من مجموعة بيانات ؟ جميع هذه الاسئلة مهمة في التصميم , ان اصعب مرحلة اثناء انشاء المواد التفاعلية بشتى انواعها سواء كانت " انفوجرافيك " أو " مواد تفاعلية " أو " موشن جرافيك " هي مرحلة البحث و البيانات( شاهد مراحل تصميم انفوجرافيك ) فقد تستغرق اشهر او حتى اسابيع لجمع البيانات , فهي ليست مجرد رسمة ونسبه مئوية .

لنستوضح مفهوم فكرة Data Aggregationt بشكل عملي اكثر باستخدام هذه البيانات والتي تشرح مدى تصنيف استخدام برمجية الـ HTML5 في المواقع الالكترونية .

في المثال رسم بياني يوضح النسب المئوية لاستخدام لغة الـ HTML5 حسب تصنيف المواقع . والسؤال الذي نطرحة هنا قد يستخدم الموقع اكثر من تصنيف فقد يشمل اخباري وترفيهي معاً , والاجابة عن هذا السؤال من خلال الرسم البياني قد لا نستطيع معرفته , لماذا ؟ لان البيانات المستخدمة هي مستخلصة وليست موضحة بالشكل الصحيح والطريقة الوحيدة لمعرفة هذا السؤال هو الاجابة عن التالي , كم من المواقع التي تستخدم بتصنيفها اخباري و اقتصادي معاً؟ والاجابه عن هذا السؤال كما هو مبين في الرسم شبه مستحيل, لماذا ؟ لان البيانات في الرسم مستخلصه أي Aggregated وقد تم سحب جميع البيانات الرئيسية منها.

اذا اردنا معرفة الاجابة فعلينا مراعاة المعايير التالية:-

1- ضع الرقم الاجمالي ( ان كان التصميم مقارنة بالنسب و يشرح تصنيفات معينة فافضل رسم بياني يستخدم هو Pie Chart وليس Bar Chart أقرأ هنا ).

2- قم باستخدام تقنية جدول الاجابة وهي صح أم خطاً على النحو التالي :

بهذه الطريقة نستطيع الاجابة عن الاسئلة التي طرحناها سابقاً. نلاحظ ان المواقع التي تستخدم تقنية الـ HTML5 حسب تصنيف اخباري و ترفيهي معاً هي 4 من اجمالي 5 مواقع , وتمثل 8 من اصل 25 اجابه , وايضاً هي الاكثر رواجاً من بين المواقع المصنفه. تستخدم تقنية الجدول صح ام خطاً في العديد من الدراسات و التجارب العلمية فهي تستخدم بكثره في المشاريع وابرزها تخصصات Software Testing وهو مجال متخصص في تطوير البيئة التقنية ودراسات التصميم البرمجي الهندسي ( اقرأ المقالة التالية باللغة الانجليزية عبر مدونتنا لشرح هذه التقنية باستخدام Nodes ).

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

وباجراء المقارنة من جدول الاستطلاع احتواء اكثر المواقع على لغة الـ HTML5 , يتبين لنا الآتي :-

فما هو رأيكم من الأفضل في شرح النسب المئوية الاعمدة البيانية أم الدوائر البيانية , لكم الاجابة !؟

Mohammad Al Far

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

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

مبادئ مهمة في التصميم الإنفوجرافيكي ؟
1- بساطة التصميم (عدم الحشو ), محاولة تجنب عمل صور أو تصاميم كثيرة في التصميم.
2- اتخاذ القرار بشأن الألوان , وعدم الأكثر من الألوان لونين او ثلاث لإبراز جدية التصميم.
3- البحث و الإطلاع على الأرقام ذات المصادر الموثوقة ( دراسات / بحوث ) معتمدة .
4- فَكر كمطلع نهائي , اول ما يتم ابرازه لدمج المشاهد أو الزائر في التصميم .
5- عمل سيناريو قبل البدء في التصميم .
6- ترتيب الأحداث و الأرقام باستخدام برنامج الـ " Excel " .
7- استخدام البرامج المتخصصة لتصميم الصور الجرافيكية كـ ( photoshope) .
8- وضع المصادر البحثية في نهاية التصميم , أما على يمين التصميم أو يسار التصميم .

مواقع مساهمة في التصاميم الإنفوجرافيكية ؟

1- الموقع [ Visual.ly ].

يوفر الموقع خاصية عمل تصاميم انفوجرافيكية وذلك بتحليل مواقع التواصل الإجتماعية كـ "تويتر" و " الفيس بوك " , يعتبر كأول مجتمع الكتروني تفاعلي عبر الشبكة العنكبوتية يهتم بالتصاميم الإنفوجرافيكية الهادفة , ينصح به.

2- الموقع [ Stat Planet ].

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

3- الموقع [ Inkscape ].

برنامج مفتوح يدعم خاصية الصور ذات الإمتداد SVG , تساعد النسخة الجديدة في عمل تصاميم جرافيكية والذي تمكنك بحفظها بامتدادات مختلفة أهما SVG .

4- الموقع [ Hohli ].

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

5- الموقع [ Many Eyes ].

موقع من تطوير شركة IBM يقدم الموقع خاصية متطورة في حفظ البيانات مع امكانية الرجوع إليها في وقت , يقدم الموقع خصائص جرافيكية تفاعلية ذات طابع احترافي يقوم الموقع باقتراح انسب التصاميم للبيانات المستخدمة من قبل المزود , يعتبر الموقع احد رواد التصاميم التفاعلية الإحترافية, ينصح باستخدامه.

6- الموقع [ Google Public Data ].

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

6- الموقع [ Tableau ].

برنامج متطور في عمل تصاميم تفاعلية , يوفر الموقع مجموعة من الفيديوهات التعليمية لعمل هذه التصاميم عبر موقعهم , يتوجب عليك التسجيل عبر الموقع لعمل التصاميم الجرافيكية / التفاعلية, ينصح باستخدامه .