Online-Workshop mit Julius Tröger, Teil 3

Während Elemente wie interaktive Grafiken und Animationen im Web lange Zeit vorwiegend mit Adobe Flash umgesetzt wurden, können gleichwertige Multimedia-Applikationen heute direkt im Browser mit freien Web-Technologien, Tools und Frameworks auf Basis von HTML5 umgesetzt werden. Sie sind so auf prinzipiell allen Endgeräten – auch iPhone und iPad – darstellbar.


Dabei haben sich zwei grundsätzliche Herangehensweisen durchgesetzt. Einerseits die Arbeit mit dem Grafikformat Scalable Vector Graphics (SVG) und andererseits mit dem HTML5-Canvas-Element. 
Für beide Herangehensweisen existieren zahlreiche Bibliotheken und Frameworks, die einfach in den HTML-Code eingebunden werden und von dort aus angesteuert werden können. Eine für Journalisten relevante Auswahl wird im Folgenden vorgestellt.

SVG / D3.js und Raphael.js

SVG ist kein neues Grafikformat. Da es aber erst seit kurzer Zeit von beinahe allen gängigen Browsern unterstützt wird, kommt es immer häufiger zum Einsatz. Mit SVG lassen sich zweidimensionale Vektorgrafiken direkt im Browser darstellen. Es wird also keine Grafik-Datei wie Portable Network Graphics (PNG) lediglich statisch eingebettet, sondern man schreibt SVG direkt in den Quellcode. Dieses DOM kann dann direkt per Javascript – etwa mit Event Handlern – manipuliert, also dynamisiert werden.

SVG-Dateien bekommt man überall, wie etwa die Wahlkreise von Berlin auf einer Karte. Man kann die Elemente aber auch mit kostenlosen Tools wie Inkscape und SVG Edit selbst zeichnen und den Code davon direkt in den Programmcode übertragen. Um aus diesen reinen Vektorgrafiken interaktive Infografiken zu erstellen, gibt es dann Frameworks wie d3.js oder Raphael.js.

D3 ist das Kürzel von Data-Driven Documents und ist ein Framework für Datenvisualisierung. Es bietet spezielle Funktionen für die Manipulation von DOM-Objekten auf Basis von Daten. D3 stammt von Protovis ab.
Raphael.js erleichtert vor allem das Zeichnen und Animieren von Vektorgrafiken. Mit gRaphael gibt es auch ein Framework speziell für die Erstellung von Diagrammen.

Einstieg und Tutorials:

• http://alignedleft.com/tutorials/d3
• http://www.schockwellenreiter.de/blog/2012/02/10/data-driven-documents-d3
• http://bost.ocks.org/mike
• http://vis4.net/blog/
• http://selection.datavisualization.ch
• http://raphaeljs.com/reference.html
• http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library
• http://www.html5rocks.com/en/tutorials/raphael/intro
• http://misoproject.com/dataset

Praxisbeispiele:

• http://www.uefa.com/uefaeuro/season=2012/matches/
• http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html
• http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html
• http://static.apps.morgenpost.de/redaktion/svg/svg.html

HTML5-Canvas / Processing.js

Das Canvas-Element in HTML5 erlaubt es, direkt im Code dynamisch zweidimensionale Bitmap-Grafiken zu erzeugen und diese pixelgenau zu manipulieren. Es ist nicht besonders komfortabel zu nutzen. Daher gibt es auch hierfür ein Framework, das die Arbeit sehr vereinfacht. Es heißt Processing.js.

Processing.js stammt von Processing, einer Open-Source-Programmiersprache und -entwicklungsumgebung für Visualisierungen und Animationen, ab. Die Javascript-Bibliothek erweitert das Canvas-Element um weitere Funktionen, wie die Möglichkeit, Formen und Animationen zu erstellen – und das direkt im HTML/Javascript-Code ohne den Einsatz von Plugins wie Flash oder Java. Auch kann hier mit SVG gearbeitet werden.

Einstieg und Tutorials:

• http://www.aosabook.org/en/pjs.html
• http://lethain.com/getting-started-with-processing-js
• http://processingjs.org/learning
• http://blog.blprnt.com/blog/blprnt/tutorial-processing-javascript-and-data-visualization
• http://joeycadle.com/blog/article/1/2012/22/01/html5-canvas-and-processing-js
• https://github.com/processing-js/processing-js

Praxisbeispiele:

• http://dl.dropbox.com/u/466610/nevada_map/index.html
• http://mattmckeon.com/facebook-privacy

Web GL

Die Spezifikation Web Graphics Library (WebGL) ist kein offizieller Teil von HTML5, wird aber dennoch von den meisten aktuellen Browsern unterstützt. Der Internet Explorer unterstützt den Standard allerdings derzeit ebenso wenig wie das mobile Betriebssystem iOS. Allerdings soll die Unterstützung weiter ausgebaut werden.

WebGL erweitert das Canvas-Element um die Möglichkeit, 3D-Grafiken direkt im Browser darzustellen. Das ermöglicht etwa 3D-Spiele oder menschliche Modelle. Und etwas journalistischer ist die Darstellung von Achsen auf einer dreidimensionalen Weltkugel. 
Infografiken kann so etwa eine dritte Achse beziehungsweise Datenvisualisierungen hinzugefügt werden. So lassen sich aber auch Graphen und ihre Verbindungen in einem dreidimensionalen Raum darstellen. Realisiert wurde dieses Beispiel mit der Javascript-Bibliothek three.js. (Zweidimensionale Graphen lassen sich mit der Javascript-Bibliothek sigma.js darstellen.) Auch die Library C3DL bietet zusätzliche Funktionen für die Entwicklung mit WebGL.

Tutorials:

• http://www.aerotwist.com/tutorials/getting-started-with-three-js
• http://learningwebgl.com/blog/?p=28

Praxisbeispiele:

• http://highrise.nfb.ca/tag/one-millionth-tower

Interaktive Karten

Karten lassen sich sehr leicht mit Tools wie Google Maps oder Google Fusion Tables erstellen. Dabei ist allerdings problematisch, dass, wie bei allen externen Tools, eigene Daten fremden Unternehmen übergeben werden. Wer diese aber bei sich behalten will, muss eine eigene Kartenlösung aufsetzen.

Das lässt sich etwa mit Openlayers, Modest Maps oder Mapstraction umsetzen. Dazu benötigt man noch einen Tilecache-Server und einen Map-Server wie Mapnik, Geoserver oder Mapserver. Außerdem müssen die Geodaten in Datenbanken abgespeichert werden. Dafür eignen sich besonders gut PostGIS zusammen mit PostgreSQL als Abfragesprache. Und dann benötigt man für seine Karte noch einen Straßenlayer. Den gibt es etwa bei Openstreetmap. Ein weiteres wichtiges Programm für die Verarbeitung von Daten auf Karten ist das Programm QGis.

Geodaten werden häufg als Keyhole Markup Language (KML) oder Shapefile bereitgestellt. So bietet das Land Nordrhein-Westfalen seine Wahlkreise als Shapefile an. Die Berliner Ortsteile werden als KML angeboten. Darüber hinaus existieren zahlreiche Frameworks wie Kartograph.js, mit denen interaktive Karten erstellt werden können, oder OSM Buildings, mit dem sich Gebäude auf einer Karte dreidimensional darstellen lassen.

Einstieg und Tutorials:

• http://www.alistapart.com/articles/takecontrolofyourmaps
• http://multimedia.journalism.berkeley.edu/tutorials/qgis-basics-journalists
• http://www.poynter.org/how-tos/digital-strategies/146263/introduction-to-open-source-gis-tools-for-journalists
• http://hub.qgis.org/projects/quantum-gis/wiki/How_do_I_do_that_in_QGIS

Praxisbeispiele:

• http://www.kartograph.org/showcase

Timelines

Es gibt im Netz viele interaktive Zeitleisten-Tools wie Tiki-Toki oder Dipity. Allerdings stößt man mit denen schnell an seine gestalterischen Grenzen. Es existieren Frameworks, mit denen man Timelines leicht selbst erstellen kann.

Ein solches offenes Framework ist der Timeline-Setter des NewsApps-Teams von Propublica. Damit lassen sich schlanke Zeitleisten auf HTML-Basis erstellen. Unter anderem kann die Quelle ein Spreadsheet sein.
Auch Timeline.js erleichtert die Implementierung von verschienen Quellen wie Twitter, Youtube oder Facebook in eigene Zeitleisten.
Sehr interessant ist auch Timeflow, das die Darstellung von großen Datenmengen in unterschiedlichen Formaten erlaubt.
Anstatt der üblichen horizontalen Zeitleisten bietet das Timeline-Framework von WNYC eine vertikale Anordnung. Es zieht sich die Daten aus einer Spreadsheet-Vorlage.

Einstieg und Tutorials:

• http://propublica.github.com/timeline-setter/doc/twitter-demo.html
• https://github.com/FlowingMedia/TimeFlow/wiki
• http://www.tobiaskut.de/2011/04/14/timelinesetter-tiki-toki-zeitleisten-tools-fur-entwickler-und-journalisten
• http://hint.fm/blog/2010/07/29/a-timeline-takes-its-first-steps

Praxisbeispiele:

• http://timelines.latimes.com/syria
• http://www.lemonde.fr/election-presidentielle-2012/visuel/2012/04/21/chronologie-une-si-longue-campagne-presidentielle_1681661_1471069.html
• http://www.wnyc.org/blogs/empire/2012/may/07/timeline-pedro-espadas-long-dance-law
• http://www.einsteins-magazin.de/?p=1800

Der Text stammt ursprünglich von der Seite www.digitalerwandel.de. Der Blog wird betrieben von Julius Tröger (Jahrgang 1983). Er befasst sich schwerpunktmäßig mit Multimedia- und Datenjournalismus. Im Jahr 1998 gründete ein regionales Online-Jugendmagazin. Seit 2008 arbeitet er als Redakteur bei der Berliner Morgenpost, wo er sich vor allem um den Ausbau multimedialer, mobiler bzw. datengetriebener Formate kümmert. Im Jahr 2012 wurde er mit dem ersten Platz beim Axel-Springer-Preis in der Kategorie Internet ausgezeichnet. Er wurde für den internationalen Datenjournalismus-Award nominiert und gewann den zweiten Preis beim bundesweiten Open-Data-Wettbewerb Apps für Deutschland. 2011 bekam er den Publikumspreis beim Deutschen Webvideopreis. Er bloggt er auf digitalerwandel.de. Dort schreibt er zum einen über Tools und Web-Techniken, die im (Online)-Redaktionsalltag hilfreich sein können. Zum anderen veröffentlicht er dort auch Tutorials zu seinen eigenen Projekten. Wir danken ihm recht herzlich für die Zusammenarbeit.