Archiv der Kategorie: Tech Blog Martin Vollenweider

VR für das Web

«Virtual Reality» für das Web steckt im Moment noch in den Kinderschuhen, der Blog gibt einen kurzen Stand der Dinge.

vr_webVR bietet neuartige Möglichkeiten, Inhalte darzustellen. Viele Fragen in Bezug auf Usability und User Experience müssen noch erforscht werden.

In einem Artikel in der NZZ über AR/VR wird hingewiesen, Intel nenne die Kombination von Augmented und Virtual Reality neu Merged Reality.

Wie kann man VR für das Web erstellen?

Es gibt einige Möglichkeiten, um VR für das Web zu produzieren, die zwei wichtigsten Technologien sind:

  • Mit Hilfe der Javascript Bibliothek three.js
  • Mit Hilfe der experimentellen Javascript API WebVR, resp. Mozilla VR (MozVR)

Three.js

Die Javascript Bibliothek erlaubt, 3D-Welten und Animationen für den Browser zu erstellen. Three basiert im Hintergrund auf WebGL (Web Graphics Library), welches 3D-Grafiken hardwarebeschleunigt im Browser darstellen kann (Beispiel einer interaktiven Animation mit Three). Die Zusatzbibliothek StereoEffect.js erlaubt, einen stereoskopischen Effekt zu erzeugen. Die Ausgabe kann zum Beispiel auf einem Google Cardboard mit handelsüblichen Browsern erfolgen .

Beispiel

  • Das einfache Beispiel (nach Möglichkeit mit dem Google Cardboard anschauen). Das Beispiel basiert auf der Seite Chrome Experiments

Literatur

WebVR, resp. MozVR

WebVR erlaubt, in «nightly Versionen» von Firefox  (Windows, Mac, Linux, Android, Firefox OS) und Chrom (Windows, Android)  VR Inhalte mit Oculus Rift, Google Cardboard (mit Hilfe von WebVR Polyfill) oder Samsung Internet for Gear VR im Browser anzuschauen.

Das Erstellen von Oculus Rift Lösungen funktioniert nur Windows; Browserlösungen für Android und iOS können mit allen Plattformen erstellt werden. Mozilla stellt für das einfachere Programmieren das Open-Source Framework A-Frame zur Verfügung.

Hinweise

Schlussfolgerungen

Im Moment ist wahrscheinlich die Verwendung von Three die im Moment effizienteste Lösung. Es ist aber anzunehmen, dass WebVR rasant weiter entwickelt wird.

 

 

 

 

Advertisements

Layouten im Web

Das Gestalten anspruchsvoller Web-Layouts für Magazine, Zeitschriften, Webseiten etc. mit Hilfe der Cascading Style Sheets (CSS) ist herausfordernd und dauernden technologischen Änderungen unterworfen. Bei Web-Designern gilt das Umsetzen eines Layouts mit mehreren, gleich hohen Spalten als «Holy Grail». HolyGrail.svg

Ein wichtiger Punkt des «Holy Grail» Layouts ist, dass sich bei einer Vergrösserung der mittleren Inhalts-Spalte sowohl die linke als auch die rechte Spalte automatisch in der Höhe anpasst (Bild Quelle: Wikipedia).

Nebst dem Erstellen von gleich hohen Spalten ist das Platzieren von Inhalts-Elementen nebeneinander eine weitere Herausforderung. Standardmässig werden die HTML Block-Elemente (vergleichbar mit Absatzstilen in der Textverarbeitung) untereinander platziert. <div>, <h1> bis <h6>, <p>, <form> etc. sind typische Block-Elemente.

Im Laufe der Zeit entwickelten sich verschiedene Techniken, das Ziel mit Hilfe von HTML und CSS zu erreichen.

Frames

In den Urzeiten des Webs wurden Seiten mit Frames aufgebaut. Das Browserfenster bestand aus mehreren Teilbereichen, in welche unabhängige HTML-Seiten geladen wurden. Obwohl völlig veraltet, gibt es immer noch etliche Websites, welche mit Frames aufgebaut sind (exemplarisches Beispiel). Der Artikel «HTML Frames» erklärt den Aufbau. Das aktuelle HTML unterstützt die Frames (zum Glück) nicht mehr.

framesDer Aufbau von Websites mit Frames war kompliziert, die Bedienung benutzerunfreundlich und ungeeignet für die Suchmaschinen-Optimierung.

Tabellen

Für eine weitere, auch völlig veraltete Methode zum Aufbau eines Layouts wurden Tabellen verwendet. Tabellen machen Sinn, wenn Inhalte verglichen werden. Für Layouts sind sie wegen ihres komplizierten und unflexiblen Aufbaus ungeeignet (exemplarisches Beispiel).

tablesTabellen sind in der heutigen Zeit ungeeignet, um professionelle Layouts aufzubauen.

CSS Float

Der nächste Entwicklungsschritt war der Aufbau mit dem CSS Befehl Float. Zwei HTML Block-Elemente können mit Hilfe dieses Befehls nebeneinandergestellt werden. Der Befehl wird sehr häufig für das Layouten verwendet, allerdings ist es schwierig, gleich hohe Spalten zu erstellen (exemplarisches Beispiel)

floating-elemente-image-02

Der Float-Befehl erlaubt, zwei oder mehrere Elemente nebeneinander zu stellen (Quelle).

floafEs ist möglich, eine saubere HTML-Struktur mit Float zu visualisieren. Der Befehl ist allerdings recht eingeschränkt, die Reihenfolge der Inhalte kann nicht gross manipuliert werden und erlaubt keine anspruchsvollen Layouts.

CSS Flexboxes

Die Formatierung mit den Flexboxes wird von allen modernen Browser unterstützt und vereinfacht das Layouten deutlich.

flexbox_support

CSS Flexboxes werden zunehmend für die Gestaltung komplexerer Layouts verwendet (Quelle)

flexbox_intro

Flexboxes erlauben, die Inhalte entweder zeilen- oder spaltenweise darzustellen, in normaler oder umgekehrter Reihenfolge (Quelle).

flexbox-order

Es gibt auch die Möglichkeit, die Reihenfolge des Inhaltsflusses selber festzulegen (Quelle), was individuelles Layouten unabhängig der Reihenfolge in der HTML-Datei erlaubt.

Verschiedene Online-Tools ermöglichen, den Code der Flexboxes interaktiv zu erzeugen (Beispiel). Praktisch alle Forderungen von «Holy Grail» werden mit Hilfe der Flexboxes erfüllt (exemplarisches Beispiel).

Im exemplarischen Beispiel ist das HTML-Layout gleich aufgebaut wie beim Float-Befehl.

flexbox-css

Simples CSS für die Erstellung rudimentärer Flexboxes

CSS Grid Layout

Weit entfernt von einer sauberen Browser-Unterstützung ist das CSS Grid Layout, Chrom und Firefox unterstützen es nur durch das Setzen von Flags im Browser.

grid_support

Die breite Unterstützung von CSS Grid Layout ist noch nicht vorhanden (Stand August 2016, Quelle)

drawing-orderEin Vorteil des Grid Layouts ist, dass sich Objekte überlappen können (Quelle)

 

CSS Regions

Der Vorteil der CSS Regions ist, dass es einen Textfluss durch mehrere Container erlaubt, ganz analog zum Vorgehen in Layout-Programmen. Die Browser-Unterstützung ist mangelhaft (Stand August 2016), es ist unsicher, ob die Unterstützung im Chrom Browser jemals kommt.

css_regions_header

Mit CSS Regions kann der Textfluss durch verschiedene Rahmen gesteuert werden. Die fehlende Browser-Unterstützung erlaubt aber noch nicht, die Technologie zu verwenden (Quelle).

 

CSS Shapes

Chrome und Safari (nicht aber Edge und Firefox) unterstützen den Konturensatz um ein unregelmässiges Bild. Die Spezifikation ist seit März 2014 eine «Candidate Recommendation». Im Netz finden sich viele Tutorials, wie sich die unregelmässigen Formen umfliessen lassen (Beispiel), es sind zum Beispiel Kreise, Ellipsen oder Polygone unterstützt.

konturensatzChrom und Safari unterstützen den Konturensatz (exemplarisches Beispiel).

Ausblick

Dank den Flexboxes sind heute schon anspruchsvolle Layouts realisierbar, in naher Zukunft wird hoffentlich das Grid Layout auch von allen Browsern unterstützt. Dann lassen sich mit CSS auch komplexe und mit Hilfe der CSS Regions magazinähnliche Layouts erstellen.

Inverted Classroom Model

Der MMP Studiengang des IMP wird ab Herbst in drei Klassen in Chur und Bern geführt, was eine grosse Herausforderung in Bezug auf Lehre und Organisation erfordert. Die Interaktiven Medien, welche als Grundfach vom ersten bis zum fünften Semester vermittelt werden, setzen im ersten Semester neue Methoden ein, um die inhaltlichen und didaktischen Ziele zu erreichen. Das Konzept beinhaltet die drei Säulen «umgekehrtes Klassenzimmer», «Video Übertragung mit Feedback» und «intensive Übungen». Die Details des Konzepts waren ursprünglich publiziert auf der LATINA Seite (learning and teaching in a digital world), welche vom «Oslo and Akershus University College» ins Leben gerufen wurde.

The Inverted Classroom Model at the Bachelor Study Multimedia Production

The Chur—Bern Model

Summary

Starting fall of 2014 the Multimedia Production Bachelor study of the University of Applied Sciences in Chur (Switzerland) is run with three classes on two different locations. After defining the didactical models the decision to use the corresponding technologies has been made. The pillars of this model are the inverted classroom, the video stream and the intensive exercises. The students prepare the lessons at home with prerecorded video sessions. The class itself will take place alternately in Chur and Bern and is streamed to the other location. The two way stream allows feedback and discussion. The class is not a lecture but summarizes the content, explains the context, discusses key elements, solves problems and presents simple exercises. Finally the six exercise lessons deepen the skills of the students.

Prof. Martin Vollenweider
Lecturer for Interactive Media
Dipl. El. Ing. ETH
University of Applied Sciences HTW Chur
Institute for Multimedia Production (IMP)

Introduction to the topic

The University of Applied Sciences in Chur (Switzerland) offers a wide range of Bachelor and Master Studies. The program covers Bachelor Programs in Tourism, Civil Engineering, Business Administration, Information Science, Multimedia Production and System Technology as well as Master Programs in Business Administration (Tourism, New Business), Information Science and Engineering.

The Multimedia Production Bachelor study is aimed at students who are interested in producing and working with content (for example text, pictures, audio, video, augmented reality etc.) and use the media and programming techniques required for this purpose. The students move around safely in the tension fields between media, business, politics, society, law, applied computer science and journalism.

The key modules «Writing and speaking», «Visualization», «Convergent Producing» and «Interactive Media» last five semesters, the in the sixth and last semester the Bachelor Work is due. After successfully completing the course the students get the «Bachelor of Science FHO in Media Engineering».

mmp_uebersicht

Starting September 2014 Multimedia Production is run in three classes, two in Chur and one in Berne with a total of approximately 90 participants. The two cities are a two and a half hour train ride away from each other.

The Challenge

It is an enormous challenge to run tree classes simultaneously in two different cities. Beside the organisational and timetable related issues the question about didactical models to teach three classes also arouse. This question is also of high importance to the LATINA approach (blended mode, mix teaching & learning / teacher and learner, international orientation etc.). It has been decided to run a test in the first semester with the module Interactive Media within Multimedia Production. It is widely agreed that the learning performance is independent of the technology (Kerres, M.: Mediendidaktik 2013).

In our case the learning goals for the students are clearly defined. The have to understand how web based applications work, how they are build and are able to describe their strengths and weaknesses. Further they are able conceive, plan, develop and build working prototypes of such applications. Since the twenty to twenty-five years old students belong to the group of digital natives, the lecturer has to choose another approach than to just presenting topics and contents of the lesson.

The Lecturer as a Coach

Most of the students in the first semester are somehow familiar with technologies like HTML (Hypertext Markup Language), CSS (Cascading Style Sheets) and even programming languages (such as Javascript). In many cases they have a punctual understanding of the techniques only, the broader picture, the broad context is missing. Therefore it is sometimes hard for the students to understand the context between the technologies, how they work together and how they are integrated in a real life web based application. Another important issue is that the students have some knowledge, but the skills to easily plan, build and deploy an application are missing. Those are the reasons why the lecturer has to be seen more as a coach than as a teacher. The coach finds out the missing puzzle stones, the ignored contexts and the lack of the skills and pushes the students in those directions. This approach is widely known, has been done successfully by many lecturers and is completely independent from the technology. The LATINA approach goes one step further. The classical role between coach and students is transformed to the model lecturer and learner. Nowadays some students have a broad knowledge and high developed skills in many areas. If this familiarity is in the field of the course topic, the students also can act as coaches and provide the knowledge to the other students and the coach. In the field of interactive Media technology is changing rapidly. It is close to impossible that a coach is deeply familiar with all the existing and forthcoming technologies. On the other hand the Universities have to make sure that they offer a high knowledge transfer. With this approach (which we tested in the last semester with the fairly complex topic of SQL Injections) the flow of knowledge can be increased and everybody benefits.

The Inverted Classroom Model

Inspired by the experiences of other lecturers (Handke, J.: Patient Hochschullehre 2014) we decided to implement the Inverted Classroom Model in the first semester. It also solved for us the question how to teach three classes in two cities simultaneously.

As a brief summary the flipped teaching (or flipped classroom, inverted classroom) is a form of blended learning. The students usually at home learn the new content online by watching video lectures or reading internet articles. In class the coaches summarize the content, explain the context and offer personalized guidance and interaction with students, often in the form of homework. There is no lecturing during the lessons. To make sure that the students are well prepared for the class (in which homework and exercises are done and therefore the skills are improved) they have to pass an online test. The quiz is not graded but the students have to pass it with more than 60% correct answers.

Eric Mazur states that «Learning is a two-step process. First, you must have some transfer of information; second, you must make sense of that information by connecting it to your own experiences and organizing the information in your brain». (Campus Technology: 6 Expert Tips for Flipping the Classroom 2013).

VIM_e

The Chur and Bern Model

The Inverted Classroom Model as described above does not take the three classes in two locations into consideration. We developed a new model

VIM_e_2

In the first week of the semester the Inverted classroom is not implemented. A traditional lecture for the two classes in Chur and the class in Bern are held. The content of the class is (beside a brief introduction in the administrative matter) an overview of the topic in this and the next semesters as well as a sensitization for the Interactive Media. This happens in calendar week 2. At the end of the semester (in calendar week 2) the same model is performed to reflect the experiences made in the course.

In the calendar week 39, 44 and 48 the lecture is held for all classes in Bern. Since the students from Chur are not able or willing to travel two and a half hours to the other location, the content is video streamed to Chur. It is important to notice that it is not a one way communication. The students in Chur can chat and communicate with the coach (as well with the other students). They can ask questions, make comments or send feedback using the Adobe Connect software. The sessions are recorded as well. Remember that the class is not a lecture, but summarizes the content, explains the context, discusses key elements, solves problems and shows simple exercises to increase the skills. It is expected that the students have watched the video sequences with the actual course content before class.

In the weeks 41, 46 and 50 the procedure is repeated, this time the lecture is streamed from Chur to Bern.

The main focus of the module lies in the exercises. The students have to solve more complex and longer tasks. The exercises are done class wise with the help of student tutors. It means that the 30 students in class are supported by two coaches.

The three Pillars

The Chur and Bern Model of the Interactive Media consist of three pillars, the inverted classroom, the video stream with the two way communication and the intensive exercises. Implemented also is the model of exchangeable lecturer and learner. The main goals are more flexibility for the students when and how fast to gain knowledge, to therefore motivate the students, to increase their skills and to give students more elasticity in the whole learning process.

An ideal Classroom

It would be useful to have a specially designed audience room for the three classes. So far either Chur or Bern is always virtually connected; the students can chat to the coach and the other students with the help of Adobe Connect.

The ideal solution would integrate the other classroom much more. If a lecture was held in Chur for example the classroom in Bern should be recorded with a camera, broadcasted to Chur and projected there on the back wall of the classroom. The same happens vice versa in Chur.

In other words the students always see the other classroom in a projection and have the impression of one huge audience. This should give the feeling of a large student group and not different classes.

zimmer.fw

Mobile first? Content first? No! Device driven Content!

If you talk to Web Designers, the question «Mobile or Desktop first» is often discussed. This issue is actually of no relevance any more. We have so many output devices; besides the classical screen or smartphone we have watches, refrigerator panels, large TVs and intelligent house control screens.  We do not know if those devices are mobile or not, they just display content information. The size and mobility is not the key question. The important matter is: How do we present the content on those devices? The answer is: with the method of device driven content!

How do we present content in an intelligent way?

Thanks to Ethan Marcotte we know about Responsive Web Design (RWD). A website created with RWD will display a different interface depending on what device is used to access the site (definition TechTerms.com).  This solution is useful, but it solves only part of our problem. In my understanding, RWD has nothing to do with the content. We need a completely different content on the different devices! Not only the order of the content (e.g. headline, teaser, text, image, video etc.), but also the content itself has to be different. What does it mean?

  • We need different headlines and lead texts on different devices. On the large TV screen the headline can be longer than on the tiny internet watch on our wrist. The lead needs to be shortened and shortened more the point.
  • We also need a different structure in the main text for the different devices. I do not write an article in the same way if I have 3000 or just 1500 characters available. I cannot just shorten the text at the end. No way!
  • The same is true for images and captions. A photo may fill just a small part of an article on a large screen, but the whole screen on a smaller device. I have also to deliver a different content, different cropped parts of the image.

The bottle neck CMS

We all agree that the content has to come from on central place, presumably a database. Unfortunately the Content Management system is not the answer to our problem. The text editors of TYPO3 and WordPress are useful to hierarchically structure and format the text content. But they cannot be used to structure the content from an output point of view. Karen McGrane calls the current CMS «the era of ‚desktop publishing’». What we also need is a Content Markup Language (CML). HTML gives the structure of a document, the CML would control to which device the content outputs to (device style).

The HTML command <h1>Title simply gives the text the structure of a heading. But it does not say whether the heading should be used for a tablet PC or a smartphone.  We could use the data-* attributes of HTML5 which are supported in all major browsers:

<h1 data-content-type='tablet'>American unemployment rate decreases by 3%</h1>
<h1 data-content-type='smartphone'>Unemployment decreases by 3%</h1>
<h1 data-content-type='pc'>Good news: American Unemployment decreases by 3%</h1>

Preferably the data-content-types would be numbers and the CMS would control with the help of the User-Agent or WURFL how to output the content.

A possible solution

We need an intelligent CMS which offers to enter different headlines depending on the output device. We should also be able to choose different images and videos from. In the main text it should be possible, to select different sentences and add one or more device style.

mobile_first_balsamique

An improved User Agent should report back the pixels per inch and the actual width of the screen as well as the bandwidth.  Depending on those parameters we could deliver a custom tailored output to the customer. This is device driven content!

mobile_first_02mobile_first_01

Example from The Guardian with different Headlines

What does it mean for learning?

We need different content format in different learning environments. Let us imagine we are learning a completely new topic (for example chemistry, multimedia, economics etc.). We are working 90% part time and therefore have to optimize our learning.  We live in the suburbs, walk to the station, ride the train for half an hour and bicycle to work.

  • Walking: We listen to an audio podcast of our topic (on an iPod shuffle for example). The speaker explains what we could see on the pictures.
  • Riding the train: We continue the topic where we have left before during walking and continue to watch the lesson on a smartphone. The pictures we have not seen before are displayed now as a summary. Since the screen is small the lesson mainly consists of images and videos.
  • Bicycle: On the bike we hear only the most important points of the lesson as a summary.
  • Work: We have a powerful desktop PC and have now the multimedia presentation of the next topic. Have a look at the WDR example

We therefore should have the possibility to program different learning environments where different contents are presented.

Einige Programme für das Erstellen von Timelines

Ich stelle hier einige Werkzeuge für das Erstellen von interaktiven Zeitachsen zusammen. In künftigen Artikeln möchte ich die Möglichkeiten und Grenzen dieser Werkzeuge ausloten.

Werkzeuge für die Programmierung von Karten

Ich stelle hier einige Werkzeuge für das Erstellen von interaktiven Karten zusammen. In künftigen Artikeln möchte ich die Möglichkeiten und Grenzen dieser Werkzeuge ausloten.

OpenLayers

ist eine JavaScript-Bibliothek, die es ermöglicht Geodaten im Webbrowser anzuzeigen. Bei OpenLayers handelt es sich um eine Programmierschnittstelle, die eine clientseitige Entwicklung unabhängig vom Server zulässt. OpenLayers stellt keine Karten zur Verfügung sondern greift auf bestehende Kartenserver (z.B. Google Maps) zu.

Google Maps

stellt eine detaillierte API zur Verfügung. Die Google Chart API erlaubt die Verknüpfung von Daten mit Landkarten.

D3

Diese universelle Javascript Bibliothek für Visualisierungen erlaubt auch die Erstellung von interaktiven Karten

Leaflet

ist eine Opensource Javascript Bibliothek um interaktive Karten herzustellen. Es gibt auch die Möglichkeit, Leaflet und D3 miteinander zu verbinden.
Tutorial

Modest Maps

ist eine einfache Javascript Bibliothek für das Erstellen von interaktiven Landkarten.

OpenStreetMap

ist ein freies Projekt, das für jeden frei nutzbare Geodaten sammelt (Open Data). Mit Hilfe dieser Daten können Weltkarten errechnet oder Spezialkarten abgeleitet werden sowie Navigation betrieben werden. Auf der OpenStreetMap-Startseite ist eine solche Karte abrufbar. Die API ist detailliert beschrieben.
Infos: Make the switch to OpenStreetMap;
Infos: OpenStreetMap und SVG

Kartograph

ist ein einfaches Javascript Framework um auf Basis von Google Maps interaktive Karten zu erstellen.

Polymaps

erlaubt das Erstellen von interaktiven Karten auf Basis SVG.  Tutorial

Maps for Life, NAVTEQ oder Nokia Maps

Die Lösung von Nokia für das Generieren von Karten. Eine detaillierte API steht zur Verfügung

OGC – Open Geo Spatial

The OpenGIS Web Map Service Interface Standard (WMS) provides a simple HTTP interface for requesting geo-registered map images from one or more distributed geospatial databases.

The Open Source Geospatial Foundation…

OSGeo was created to support the collaborative development of open source geospatial software, and promote its widespread use.

Miso Dataset Project

Dataset is a JavaScript client-side data transformation and management library. Dataset makes managing client-side data easy by handling loading, parsing, sorting, querying & manipulating data from all sorts of sources.

Stepmap

Landkarten online erstellen und gestalten

Visual Eyes

MapScholar

Interessante Beispiele

Datenvisualisierung – einige Werkzeuge

Einleitung

Im täglichen Leben werden wir permanent mit Daten konfrontiert. Es gibt regelmässig neue Zahlen über Arbeitslosigkeit, Ausgaben, Import, Export etc. Wie können wir die Daten so darstellen, dass diese verständlich und interpretierbar sind? Der Weg ist einfach: Die Daten liefern uns Informationen, diese verdichten sich zu Wissen und dann hoffentlich zu Erkenntnis (oder Klugheit) über die Zusammenhänge der Daten. Am Schluss sollten wir in der Lage sein, Entscheidungen zu treffen.

Die Kunst ist nun, die Daten zu suchen, filtern, visualisieren und daraus eine spannende Geschichte zu erzählen.

Sieben Schritte sind zum Ziel notwendig

1. Schritt: Fragestellung

Im ersten Schritt muss ich wissen, was ich überhaupt wissen oder untersuchen möchte. Das heisst, ich muss eine aussagekräftige Fragestellung finden. Anschliessend ist es notwendig, die Fragestellung zu erweitern und herauszufinden, auf welche Aspekte ich mich konzentrieren möchte:

  • Was will ich herausfinden?
  • Was will ich zeigen?
  • Welche Zahlen will ich vergleichen?

2. Schritt: Daten suchen und finden

Zum Glück stehen im Internet viele Datenquellen zur Verfügung. Schlussendlich liegt es aber in meiner Verantwortung zu verifizieren, ob die Daten auch stimmen können.  Hier einige Links:

3. Schritt: Daten bereinigen und filtern

Meist liegen die Daten nicht in der gewünschten Form vor, die Inhalte müssen editiert und gefiltert werden. Auch für diese Aufgaben gibt es Werkzeuge:

  • Das Firefox Plug-In Outwit Hub erlaubt, von einer Webpage (z.B. Wikipedia) Daten in Tabellenform zu extrahieren und als Excel Datei zu speichern
  • Mit Google Refine lassen sich die Daten bereinigen und allfällige Inkonsistenzen eliminieren.

4. Schritt: Daten visualisieren

Für das Visualisieren gibt es verschiedene Werkzeuge. Ich kann Microsoft Excel oder Adobe Illustrator verwenden. Mit Google Drive, dem Tool IBM Many Eyes, Google Chart Editor oder den Google Fusion Tables gibt es mehr Möglichkeiten und Optonen die Zahlen darzustellen.

Mit der Google Visualization API oder D3 lassen sich Charts mit Javascript oder bei JP Graph mit PHP programmieren.

5. Schritt: Daten gestalten

Für das Gestalten gibt es eine Menge von Hinweisen im Netz, angefangen von Hichert bis über die Klassiker der Chartformatierung:

  • Stephen Few: Communicate with numbers (PDF)
  • Stephen Few: Show me the numbers (PDF)
  • Colin Ware: Visual thinking for Design
  • Bücher von Edward Tufte
  • Artikel Data Visualization – Mach die Daten schön
  • Show me the Data, Vorträge

6. Schritt: Interaktivität einbauen

Die Daten müssen verglichen, sortiert, gefiltert und angeordnet werden können. Diese Interaktivität muss in der Regel ausprogrammiert werden. Das Beispiel des GED zeigt dies wunderbar:

Warenhandel einiger europäischer Länder

7. Schritt: Geschichte erzählen

Die Literatur zu diesem Thema ist gross, ich empfehle das Buch  «Texten fürs Web: planen, schreiben, multimedial erzählen» von Stefan Heijnk.