What Is Infographic [#Infographic] انفوجرافيك ابداعي مبسط لفهم طبيعة تصاميم انفوجرافيك

Designed by Hot Butter Studio
A Simple & Flow Poster Design With Lego Cubes Design by Hot Butter Studio.
Advertisements

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 , يتبين لنا الآتي :-
فما هو رأيكم من الأفضل في شرح النسب المئوية الاعمدة البيانية أم الدوائر البيانية , لكم الاجابة !؟

Create Animated Pie Chart with Wijmo شرح تطوير دائرة بيانية متحركة باستخدام تقنية ويجمو

تطوير دائرة بيانية تفاعلية باستخدام مولدات WIJMO التفاعلية.

الهدف: تطوير دائرة بيانية متحركة .
متطلبات فهم الدرس : فهم طبيعة لغة الـ Html , JavaScript.
مستوى الدرس : 3 
نظرة شاملة
مكتبة Wijmo تحتوي على تقنيات عديدة ومتطورة مواكبة لمتصفحات الويب , تحتوي حاليا المكتبة على اكثر من 40 ملف مفتوح مجاني قابل للتحميل و التجربة , الجدير بالذكر بأن المولدات المستخدمة مواكبة للغات البرمجية الجديدة HTML5 و JQuery , مع القدرة على ربط هذه الرسومات البيانية بقواعد البيانات بهدف اعطاء نظرة شاملة عن اداء النظام .

الملفات المستخدمة في تطوير الدائرة البيانية المتحركة

يحتوي المشروع على العديد من المولدات لتطوير الدائرة البيانية , جميع الملفات المستخدمة في المشروع بامكانكم تحميلها في نهاية الدرس , المشروع يتضمن على تقنيتين مستخدمة بشكل جوهري الا وهي ملفات تقنية الـ Js  و ملفات التصميم الخاصة بمظهر الدائرة البيانية الـ CSS .

طريقة الاستخدام:
1- قم بتحميل الملف من هنا .
2- قم بفك الضغط من الملف. ( ستلاحظ تواجد فولدرين و صفحة ويب , بامكانكم الضغط على ملف Index ستلاحظ المشروع المراد التعديل عليه ).
3- قم بالنقر على الزر الايمن للفأره لصفحة الـ Index , اختيار Open With , من ثم اختيار Note Pad .
4- من لوحة الكيبورد الخاصة بك , قم بالضغط على مفتاحي Ctrl+F للبحث .
5- ضع الكلمة التالية في حقل البحث :text واضغط Finde Text .
ستلاحظ وجود البرمجية التالية :
header: {
                    text: “مبيعات اجهزة آبل لعام 2011”

                },
6- قم بتغيير ( مبيعات اجهزة ابل لعام 2011 ) إلى عنوان الرسم البياني المراد تصميمه , فقط قم بتغيير المسمى.
7- بعد التعديل اسفل البرمجية سترى الكود البرمجي التالي والذي يتضمن الارقام الاحصائية التي سيتم استخدامها في رسم الدائرة البيانية التفاعلية.
seriesList: [{
                    label: “ماك بوك برو”,
                    legendEntry: true,
                    data: 46.78,
                    offset: 0
                }, {
قم بتغيير ( ماك بوك برو ) إلى ما يتناسب مع الرقم الاحصائي المراد تشكيله , قم بتغيير الرقم الاحصائي 46.78 إلى ما يتوافق معك في الرسم البياني الخاص بك.
8- قم باجراء التعديل على المسميات الاخرى بنفس الاسلوب السابق.
9- اذا اردت اضافة بند جديد للرسم قم باتباع التالي :-
* اضغط من لوحة المفاتيح على Ctrl+F .
* ضع البرمجية التالية ,[ في حقل البحث ومن ثم Enter من لوحة المفاتيح .
* قم باضافة اللغة البرمجية التالية قبل ,[  كما يلي.
{
  label: “ماك ميني”,
  legendEntry: true,
  data: 3.44,
  offset: 0
 }
],
10- بعد الانتهاء من التعديل و تحديث البيانات , قم بالضغط من لوحة على زري Ctrl+S لحفظ التعديلات .

بعد اجراء التعليمات في الشرح , بامكانكم الذهاب إلى صفحة الـ Index بالنقر عليها ستلاحظ الشكل التالي , قم بتمرير زر الفأره على الرسم البياني ستلاحظ وجود النسبة المئوية المدخلة في كل بند قمت بالتغيير عليه في البرمجيات السابقة:-
نظرة اعمق
اليكم امثلة اكثر تعمقاً في تصميم لوحات تفاعلية ادائية باستخدام تقنية Wijmo .
– المبيعات 

– الهواتف المتحرك ( اداء المبيعات عبر اجهزة الجيل الرابع )
اخيراً وليس آخراً ملفات المشروع الخاصة بشرح اليوم , قم بالضغط على زر التحميل ادناه لتحميل الملف المضغوط , لاثراء المزيد من الشروح و الدروس المتخصصة في المجال التقني و التصاميم التفاعلية الذكية تابعونا على تويتر و الفيس بوك .