3D Solar System Interactive تفاعلي ثلاثي الابعاد نظام المجموعة الشمسية

الإنفوجرافيكس: تفاعلي المجموعة الشمسية باستخدام تقنية HTML/CSS/JAVASCRIPT للنمط ثلاثي الأبعاد وإتاحة خاصية نمط ثنائي الأبعاد للتصفح.
المتصفحات الداعمة:[يدعم حاليا متصفحات Firefox, Safari,Chrome]

صور عامة عن المشروع التفاعلي النهائي
– الصفحة الرئيسية لواجهة التصميم التفاعلي

– الصفحة باللغة العربية

– الصفحة باللغة الانجليزية

ويكيميديات عن المجموعة الشمسية

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

عن التصميم التفاعلي
بما ان الصور المتاحة عن المجموعة الشمسية عبر الانترنت قد لاتوضح الصورة الحقيقية لمقاييس ابعاد الكواكب عن بعضها البعض , ففي هذا المشروع ارتأينا تطوير تصميم تفاعلي يتيح للمستخدم التصفح التفاعلي والتحكم واجراء مقارنة عن ابعاد الكواكب عن بعضها البعض باضافة لوحة تحكم تمكن المتصفح باجراء مقارنات ثلاث بين الكواكب هي : المسافة, السرعة , الحجم , واتاحة امكانية تغيير نمط الرؤية من ثنائي الابعاد الى ثلاثي الابعاد والعكس , تم تعديل بعض الاضافات في لغة الـ CSS و اضافة بعض التحسيانات على لغة Javascript .

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

مصادر اخرى ومواد متعلقة بالمشروع This Project Inspired By  
1- 3D CSS Solar System ( المطور Dev. Julian Garnier ).
2- Our Solar System an experiment using CSS ( المطور Dev. Alex Girón ).
3- OMG Space
4- Visual.ly Host for best practices
5- ويكيبيديا ( المجموعة الشمسية ) .

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

Mapping Wikipedia [INTERACTIVE] خريطة ويكيبيديا التفاعلية

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

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