Kategorie-Archiv: HTML5

Werkstattbericht: Wie unsere Web-Reportage zum Mauerfall-Jubiläum entstanden ist

Vor einem Monat haben wir mit „Die Narbe der Stadt“ unter mauerweg.morgenpost.de eine umfangreiche Web-Reportage veröffentlicht. Hier wollen wir nun kurz beschreiben, wie wir die Geschichte umgesetzt haben.

Web-Reportage "Die Narbe der Stadt"

Screenshot der Web-Reportage „Die Narbe der Stadt“

Die Web-Reportage besteht aus zwei Abschnitten. Zuerst können unsere Leser erstmals Luftbilder vom April 1989, kurz vor dem Fall der Mauer, interaktiv erkunden. So kann sich der Betrachter ganz nah ins geteilte Berlin zoomen und bewegen, ähnlich wie bei „Google Maps“. Dem Nutzer zeigt sich eine nie dagewesene Perspektive auf die Stadt kurz vor dem Fall der Mauer.Dann beschreibt Reporterin Uta Keseling, was sie auf ihrer zehntätigen Radwanderung auf dem rund 160 Kilometer langen Mauerweg erlebt hat.

Was ist von der Mauer geblieben? Sind die Folgen der Teilung noch spürbar? Wie geht es den Menschen an der „Narbe der Stadt“? Das sind die Fragen, die die Reportage beantwortet. Etwa drei Wochen lang haben wir die rund 11.000 Wörter umfassende Geschichte fürs Web umgesetzt – aufbereitet in Text, Fotos, Karten und Videos.

Das Feedback auf die zehnteilige Reportage war überaus positiv. Sie wurde häufig geteilt und war mehrere Tage der meistabgerufene Artikel auf morgenpost.de. Gerade wurden wir damit für den Deutschen Reporterpreis nominiert.

Im Fokus: Text und Navigation

Von Anfang an haben wir den Fokus auf den Text gelegt. Er sollte von allen Elementen absolut im Zentrum stehen und maximal gut lesbar sein – auf Smartphones, Tablets, Laptops und Desktop-Rechnern. Dafür haben wir das Photoshop-Design von David Wendler per CSS im Code umgesetzt. Ein kleiner Trick: Um den Text auf manchen Browsern feiner darzustellen, haben wir die CSS-Regel -webkit-font-smoothing: antialiased; genutzt.

Flowtype sorgt für eine optimale Text-Darstellung

Flowtype sorgt für eine optimale Text-Darstellung

Um auf allen Bildschirmgrößen eine gut zu lesende Schriftgröße anzubieten, haben wir das Plugin „Flowtype.js“ benutzt. Damit werden immer zwischen 45 und 75 Zeichen pro Zeile – laut webtypography.net die ideale Anzahl von Zeichen – und die Schriftgröße responsive angepasst.

Da es sich um eine sehr lange Reportage handelt, geben wir dem Leser eine mit Leaflet umgesetzte Navigations-Karte und einen „Kilometerstand“ an die Hand. Die Berlinkarte zeigt dem Leser beim Scrollen immer genau an, von welcher Stelle die Reporterin gerade berichtet – und wie viele Kilometer noch vor ihr liegen. Jeder Abschnitt kann als Lesezeichen gespeichert und geteilt werden.

Begleitelemente: Fotos und Videos

Die Reporterin brachte jede Menge Instagram-Fotos von ihrer Reise mit. Da die Geschichte in der Ich-Perspektive geschrieben ist und viele persönliche Eindrücke und Anekdoten enthält, wollten wir unsere Fotoredaktion nicht zum Nachfotografieren schicken. Die Handy-Fotos waren authentisch und unterstrichen unserer Meinung nach die sehr persönliche Reportage. Um zu sehen, wie es an den jeweiligen Orten früher aussah, haben den Fotos der Reporterin Archivaufnahmen an die Seite gestellt. Video-Reporter Max Boenke steuerte Stills und Interviews bei. Letzte zeigten etwa die emotionalen Reaktionen von Zeitzeugen.

Technisch gesehen war es wichtig, dass nicht alle Elemente auf einmal laden, wenn der Nutzer die Seite aufruft. Vor allem mobil muss die Größe von Geschichten beschränkt werden. Alle Multimedia-Elemente sollten also dynamisch nachgeladen werden, sobald sie im Blickfeld des Nutzers erscheinen. Das Konzept nennt sich Lazy-Loading und es gibt etliche Plugins für Javascript, die sich darum kümmern. Wir haben uns für Lazy Load XT“ entschieden.

Interaktive Karte aus Luftbildern

Von Anfang an war uns klar: Wir brauchen einen außergewöhnlichen Einstieg in das Thema. Bei der Recherche entdeckten wir im Berliner Geodaten-Verzeichnis „FIS-Broker“ Luftbilder vom Mauerstreifen, die der West-Berliner Senat im April 1989 aus einem Flugzeug aufnehmen ließ. Seit etwa einem Jahr stehen Geodaten in Berlin als Open Data zur Verfügung. Die Daten (insgesamt 90 GB, mehr als 700 hochauflösendem TIFF-Dateien) haben wir persönlich mit einer Festplatte bei der Berliner Senatsverwaltung für Stadtentwicklung abgeholt.

Luftbilder gab's per Festplatte von der Berliner Behörde

Luftbilder gab’s per Festplatte von der Berliner Behörde

Mit dem Image Composite Editor von Microsoft (Danke für den Tipp, Achim Tack und Patrick Stotz von mappable.info) haben wir die vielen Luftaufnahmen zu einem großen Bild zusammengestitcht. Das dauerte beinahe 48 Stunden. Um aus diesem Bild eine interaktive Karte zu erstellen, musste es erst georeferenziert, also bestimmten Pixeln Koordinaten (in unserem Fall 50 willkürlich gewählte Punkte innerhalb West-Berlins) zugewiesen werden. Das wiederum haben wir mit der Open-Source-Software QGIS gemacht.

Auch dieser Rechenvorgang dauerte mehr als einen Tag. Als Ergebnis erhielten wir eine zwölf Gigabyte große GeoTIFF-Datei. Aus dieser wiederum mussten wir einzelne Kacheln, sogenannte Tiles, für verschiedene Zoomstufen erstellen, da ja nicht immer die gesamte Datei geladen werden kann. Dafür nutzten wir die Software Tilemill.

Dem zusammengefügten Luftbild werden Koordinaten mitgegeben

Dem Luftbild werden Koordinaten mitgegeben

Die Schwierigkeit dabei: Bei Tilemill dürfen lediglich 4GB große Dateien hochgeladen werden. Wir mussten unser GeoTIFF also vierteilen. Dafür nutzten wir das Command-Line-Tool GDAL. Bsp.: gdal_translate -srcwin 0 0 40933.5 16531.67 luftbild-original.tif luftbild-1.tif .

In Tilemill setzten wir diese vier Daten wieder zusammen und exportierten sie im .mbtiles-Format nach Mapbox. Von dort kommen auch die aktuellen Satellitenbilder, mit denen die Luftbilder verglichen werden können. Eingebaut in die Anwendung haben wir die Karte dann mit Leaflet.

Über Kritik, Hinweise, Anregungen, Fragen zu den einzelnen Arbeitsschritten freuen wir uns hier in den Kommentaren, per Mail, bei Twitter oder Facebook

Ein Beitrag von Julius Tröger und Moritz Klack

Halbautomatischer Feinstaub-Artikel: Wenn der Roboter mitschreibt

Berlin zählt zu den deutschen Städten, in denen die höchsten Feinstaub-Konzentrationen gemessen werden. Eine Messstation hat bereits jetzt den Jahres-Grenzwert von 35 Überschreitungen, die laut EU-Richtlinie erlaubt sind, erreicht.

Horizon Chart der Feinstaub-Messwerte

Täglich aktuelle Messwerte

Statt nun jeden Tag nachzuschauen, wann die Vorgabe aus Brüssel tatsächlich gerissen wird, haben wir eine Software programmiert, die Zeile, Anlauf und Textbausteine teilweise selbst schreibt. Wenn die EU-Vorgaben in Berlin dann überschritten werden – und das steht etwa an einer Messstation in Neukölln unmittelbar bevor – wird die entsprechende Meldung bereits kurz danach auf morgenpost.de/feinstaub veröffentlicht und passt seinen Inhalt und einen entsprechender Teaser automatisch an – ohne Zutun eines Redakteurs.

Bei der Anwendung handelt es sich um eine einfache Form des Roboterjournalismus auf Basis von Sensor-Daten. Mit dieser Art des Datenjournalismus hatten wir noch keinerlei Erfahrung. Es handelt sich um ein Experiment, aus dem wir lernen wollen. Und so sind wir vorgegangen:

Sensordaten von elf Messstationen

Es gibt elf Stationen in Berlin, die Feinstaub-Werte messen. Die jeweiligen Daten werden einerseits vom Umweltbundesamt veröffentlicht, wo sie als csv oder json per Api (Schnittstelle) abgerufen werden können. Die Daten gibt es aber auch bei der Berliner Senatsumweltbehörde, die die Vortags-Daten täglich auf einer Webseite veröffentlicht – zwar lediglich in einer HTML-Tabelle, dafür rückwirkend bis 2008. Daher entschieden wir uns für letztere Quelle.

Original-Daten aus Berlin

Original-Daten aus Berlin

Die Daten ließen sich relativ leicht scrapen, da jeder Tag in der URL abgebildet ist (z.B. Endung …20140706.html für die Werte des 6. Juli 2014). Um die Daten täglich in unsere eigene Datenbank einzulesen, haben wir einen sogenannten Cronjob eingerichtet, einen Automatismus, der zu einem bestimmten Zeitpunkt ein Skript ausführt. In unserem Fall werden täglich gegen 14 Uhr die Messdaten in unsere eigene Datenbank geschrieben. Das gibt uns nun auch die Möglichkeit, in unserer eigenen Datenbank zu recherchieren. So zeigte sich, dass es bereits sehr häufig zu Grenzwertüberschreitungen gekommen war. Außerdem fielen uns zahlreiche sehr hohe Werte auf, die im Text dann erklärt werden.

Um die Berlin-Werte deutschlandweit einordnen zu können, werten wir zusätzlich die Messdaten der zehn am meisten belasteten Gegenden Deutschlands aus. Die Daten dafür kommen von der Schnittstelle des Umweltbundesamts. Ein Europa- oder weltweiter Vergleich war nicht möglich, da es (noch) keine vergleichbare Schnittstelle gibt.

Artikelinhalte teilweise automatisieren

Bei Roboterjournalismus handelt es sich laut Datenjournalist Lorenz Matzat „um Software, die in Teilbereichen des Journalismus selbstständig Artikel und Berichte erstellt.“ Umfangreichere Experimente gibt es etwa bei AP: Dort wird etwa damit experimentiert, ganze Meldungen zu Geschäftsberichten zu automatisieren. Auch Spielberichte können teilweise automatisiert erstellt werden. So wird Journalisten automatisierbare Arbeit abgenommen und sie können sich so mehr auf Analysen und Hintergründe konzentrieren.

Ein Skript, das Sätze baut

Ein Skript, das Sätze baut

In unserem Fall haben wir ein Skript programmiert, das bestimmte Sätze ausgibt und anpasst, sobald bestimmte Werte gemessen werden. Allerdings wurde der Großteil des Textes noch selbst geschrieben. So werden signifikante Werte (z.B. Häufigste Überschreitungen) erklärt. Für das Verständnis der nackten Zahlen halfen zahlreiche Gespräche mit dem Umweltbundesamt, der Berliner Senatsumweltbehörde und die Auswertung von Parlamentsanfragen – eine Aufgabe die von keinem Roboter übernommen werden kann. Wir haben versucht, eine gute Mischung aus beiden Herangehensweisen zu finden.

Neben den Feinstaub-Werten haben wir auch Ozon- oder Stickstoffdioxid-Daten in unserer Datenbank und überlegen derzeit weitere Schritte, die Berliner Luft zu überwachen.

Wir freuen uns über Anregungen und Kritik zu unserem Experiment!

+++ Update, 04.10.2014 +++

Zeitungsartikel basierend auf dem Feinstaub-Monitor

Zeitungsartikel basierend auf dem Feinstaub-Monitor

Am 2. Oktober haben die Station Silbersteinstraße und wenige Tage später weitere Messstationen die EU-Grenze in Berlin gerissen. Besser hätten wir die Funktionalität unseres halbautomatischen Artikels nicht testen können, die Redaktion war nämlich beinahe unbesetzt wegen des Tags der Deutschen Einheit.

So konnten wir die Nachricht auf der Webseite ohne zutun eines Redakteurs auf der Webseite vermelden. Und am Tag darauf entstand ein kleiner Artikel für die Zeitung (siehe Foto). Nun gilt es, die automatisierten Auswertungen noch zu verfeinern.

Sprechende Datenvisualisierung: Wie unser „Talkie“ entstanden ist

Vor ziemlich genau einem Jahr haben wir den Flugrouten-Radar (tägliche Updates zurzeit vorübergehend deaktiviert) für Berlin und Brandenburg veröffentlicht. Eine interaktive Anwendung, die Flüge und deren Lärm für jeden individuellen Standort visualisiert und eine Langzeitauswertung des Flugverkehrs ermöglicht. Wie bereits angekündigt, handelt es sich dabei nicht um ein abgeschlossenes Projekt, sondern vielmehr um eine fortlaufende Beobachtung. Und wie immer teilen wir auch mit  diesem Werkstattbericht unsere Erfahrungen.

Screenshot des Flugrouten-Talkies

Screenshot des Talkies

Nach einer Story über die steigende Zahl von Flügen nach Mitternacht am Flughafen Tegel Ende März, haben wir Anfang April auch noch eine weitere Geschichte auf Basis der Flugrouten-Radar-Daten veröffentlicht. Dabei handelt es sich um ein so genanntes „Talkie“, ein interaktives Format, durch das ein/e Sprecher/in führt.

Die Web-Entwickler von Kiln haben das Format durch das jüngste Projekt für den Guardian „See the planes in the sky right now“ geprägt, von dem wir uns auch haben inspirieren lassen. Kiln selbst bezeichnet ein „Talkie“ als ein Format, „that combine[s] the accessibility and story-telling strength of a video with the depth and explorability of a data-rich interactive visualisation.“

Aufwendige Datenrecherche

Dass Flugrouten in Berlin nicht immer eingehalten werden und Flugzeuge ab einer bestimmten Höhe von festgelegten Strecken abweichen dürfen, hatten wir bereits berichtet. Dass diese Höhe aber nicht selten – vorwiegend wegen schlechten Wetters – teils deutlich unterschritten wird und damit für Verwirrung bei Anwohnern von Gebieten sorgt, wo es solche Tiefflüge eigentlich gar nicht geben sollte, ist neu.

Auf diese Erkenntnisse stießen wir durch aufwendige Recherchen in unserer eigenen Datenbank. Vereinfacht gesagt überprüften wir jeden der rund 20 Millionen Flugkoordinaten von startenden Maschinen, ob der jeweils nächste Punkt mindestens 25 Grad nach links oder rechts abweicht. Lag ein solcher Punkt unterhalb von 3000 Fuß (rund 900 Meter, Propellermaschinen) bzw. 5000 Fuß (etwa 1500 Meter, Strahlflugzeuge), konnten wir die Abweichung feststellen.

Laut der Flugsicherung komme es zu diesen Flügen vor allem aus Sicherheitsgründen, etwa wenn Piloten Gewitterzellen umfliegen müssten. Auch Rettungsflüge, eilige Organ-Transporte oder auch durchstartende Maschinen dürften von der DFS-internen Vorgabe abweichen.

Die Daten wurden mittels einer internen Schnittstelle (API) als JSON ausgegeben, in CSV umgewandelt, in QGIS importiert und dort händisch nachkontrolliert.

Keine Karte von der Stange

Die Ergebnisse werden auf einer interaktiven Karte präsentiert, die individuell nur für diese eine Anwendung zugeschnitten wurde. Es handelt sich also nicht um eine gewöhnliche Karte, wie man sie so oft etwa von Google Maps (was wir früher häufig verwendeten) sieht. Der Vorteil: Wir zeigen nur Elemente, die für die jeweilige Visualisierung von Bedeutung sind. Die Karte wirkt dadurch nicht überladen. Auch Nachrichtenseiten wie Zeit Online setzen auf eine ähnliche Lösung.

Mit Tilemill kann man Karten stylen

Karten stylen mit Tilemill

Um Karten nutzen zu können, die nur die wichtigen Informationen abbilden und zum Stil der Anwendung passen, nutzen wir die auf Open Street Map basierende Kartensoftware Mapbox und deren Tool Tilemill. Dafür müssen als erstes Open Street Map Daten heruntergeladen und in eine eigene PostgreSQL-Datenbank geladen werden. Ein guter Ausgangspunkt dafür ist OSM Bright. Dort wird Schritt für Schritt erklärt, wie man ein solches Tilemill Projekt einrichtet. Dann können einzelne Elemente wie Gebäude, Straßen, etc. per CartoCSS einzeln zu- und abgeschaltet und mit einem individuellen Stil versehen werden. CartoCSS basiert auf gewöhnlichen Cascading Style Sheets (CSS). Zum Schluss muss das Tilemill-Projekt dann im Format MBTiles abgespeichert und bei Mapbox hochgeladen werden, um es im Web verwenden zu können.

Den Browser sprechen lassen

Zentrales Element des Talkies ist eine Sprecherin, die durch die Daten-Anwendung führt. Die Audio-Spur direkt im Browser abzuspielen und darin interaktiv und präzise an jede Stelle springen können ist aufwendig. Einerseits wird Audio von jedem Browser etwas anders gehandhabt und andererseits hat die native HTML5 Audio API eher begrenzte Funktionen. Daher haben wir uns mit Howler.js für eine Javascript-Bibliothek entschieden, die die Arbeit mit Audio im Browser sehr vereinfacht.

Audio-Schnitt in Final Cut

Audio-Schnitt in Final Cut

Zunächst hatten wir den Text selbst eingesprochen, bis wir den Feinschliff im Ablauf der Anwendung hatten. Für die finale Version engagierten wir Sprecherin Ulrike Kapfer. Die Audio-Datei wurde dann in Final Cut geschnitten, mit Hintergrundmusik (von Justin Falcone unter der Creative-Commons-Lizenz bereitgestellt, gehört beim ProPublica-/PBS-Interactive „Hazardous Hospitals“) und Sound-Effekten gemischt.

Die fertige Datei haben wir dann komprimiert und mit dem Tool Miro Converter als MP3 und als OGG umgewandelt.

Flugrouten auf den Bildschirm zeichnen

Da wir zu jedem einzelnen Flugpunkt auch über Datum und Uhrzeit, also zeitbasierte Daten verfügen, haben wir uns entschieden, die Flugrouten zu animieren. Die Darstellung wird so deutlich realistischer. Für das Zeichnen der Routen wurde die native HTML5 Canvas API genutzt, mit der sich beliebige Formen im Browserfenster zeichnen lassen. Dafür werden die jeweiligen Flugkoordinaten (z.B. 52.583547, 13.478403) in Pixelpositionen (z.B. top: 251px / left: 688px) des entsprechenden Bildschirms umgerechnet. Dank requestAnimationFrame können die Flüge dann auch sauber animiert werden.

Mobile Version mit Animated Gifs

Die Anwendung funktioniert mit allen modernen Browsern und auf Tablets. Dabei passt sich die Visualisierung der jeweiligen Bildschirmgröße an (Responsive).

Eigentlich verbotene Abkürzungen in Berlin

Darstellung auf Smartphones

Zwar funktioniert das Talkie auch auf Smartphones. Allerdings war die auf den kleinen Bildschirmen viel zu kleinteilig und kaum bedienbar. Aus diesem Grund haben wir uns für diese Geräte für eine andere, stark vereinfachte Darstellung entschieden.

Da Apple Autostart von Audio und Video verbietet, haben wir animierte Gifs (siehe Tutorial hier) von den wichtigsten Szenen der Anwendung erstellt und zeigen die zusammen mit dem Text, der in der interaktiven Version gesprochen wird.

Alle Geschichten aus der Datenbank des Flugrouten-Radars können auf der entsprechenden Themenseite nachgelesen werden.

Ein Beitrag von Julius Tröger und Moritz Klack

Wir bauen uns eine Nachrichtenquelle – Werkstattbericht zum Flugrouten-Radar

Wenn wir Informationen zu Nachtflügen, Flugrouten oder Fluglärm brauchen, müssen wir jetzt nicht mehr immer tagelang auf Antworten von Behördensprechern warten. Wir interviewen einfach unsere eigene Datenbank. Mit dem Flugrouten-Radar haben wir uns also eine eigene, täglich aktualisierte Nachrichtenquelle geschaffen.

Mehr als eine halbe Million Flüge und viele Millionen Flugspuren befinden sich hinter unserer neuen News App. Mit den richtigen Datenbank-Queries kommen wir dadurch an Zahlen, die in keiner anderen Statistik auftauchen. Und obwohl das Thema von Redaktionen in Berlin wie kaum ein anderes bearbeitet wird, finden wir so neue Geschichten, wie etwa die über Hunderte Leerflüge zwischen den Berliner Flughäfen.

Flugrouten, Fluglärm, Nachtflüge

Nach der mehrfach geplatzten Eröffnung des Hauptstadtflughafens BER ist es in Berlin zu einer besonderen Situation gekommen: Über den Flughafen Tegel, der eigentlich bereits seit Juni 2012 geschlossen sein sollte, müssen die eigentlich für den BER geplanten Flüge zusätzlich abgewickelt werden. 

3-D-Ansicht der Flüge über Berlin und Brandenburg

3-D-Ansicht der Flüge über Berlin und Brandenburg

Statt leiser wurde es für die Anwohner in den Einflugschneisen also lauter. Beschwerden über steigenden Fluglärm, Routenabweichungen und Nachtflüge nehmen zu. Debatten über diese Themen waren dabei häufig von Vermutungen geprägt. Genaue Zahlen zu Randzeit- und Nachtflügen sind schwer zu bekommen. Offiziell heißt es etwa: „Nachfragen nach belastenden Störungen [bei Flügen nach 23 Uhr] sind bei der Luftfahrtbehörde grundsätzlich möglich, erfordern dort aber einen erheblichen Recherche-Aufwand.“

Mit dem Flugrouten-Radar wollen wir Betroffenen und Interessierten in der emotional aufgeladenen Debatte ihre ganz persönliche Faktenbasis bieten – täglich aktualisiert und mit automatisierter Analysefunktion. Und wir wollen Daten so verständlich, transparent und personalisiert wie möglich darstellen.

Statistik-Ansicht: Nachtflüge, Airlines, Ortsteile

Statistik-Ansicht: Nachtflüge, Airlines, Ortsteile

Einerseits zeigt die interaktive Anwendung erstmals Flughöhen, -zeiten und Flugzeugtypen mit Lärmberechnungen für alle Flüge über einem individuellen Standort in einer dreidimensionalen Ansicht. Andererseits gibt es exklusive Statistiken auf Basis von mehr als einer halben Million Flügen seit Januar 2011, wie sich die Fluglast auf die einzelnen Ortsteile bzw. Gemeinden der Hauptstadtregion über die Zeit verteilt.

Von der ersten Idee bis zur Veröffentlichung des Flugrouten-Radars verging ungefähr ein halbes Jahr. Die Redaktion der Berliner Morgenpost hat dabei mit dem Deutschen Fluglärmdienst (DFLD), dem Datenjournalismus-Team der US-Investigativredaktion ProPublica und der Agentur Kreuzwerker GmbH zusammengearbeitet.

Recherche der Daten

Einen Großteil der Zeit benötigten wir, Julius Tröger und André Pätzold, für die Recherche der Flugspur-Rohdaten. Die gibt es in Deutschland nämlich nicht öffentlich – im Gegensatz zu den USA und Kanada etwa. Dort werden Radardaten aller Flüge per Feed angeboten. Die Deutsche Flugsicherung (DFS) gibt ihre Rohdaten dagegen nicht frei. Entsprechende Anfragen unsererseits wurden abgelehnt. Die DFS veröffentlicht die Daten zwar in ihrer Online-Anwendung „Stanly-Track“ – allerdings nur 14 Tage rückwirkend. Zu wenig für uns, da wir für Vergleiche die Zahlen aus den entsprechenden Vorjahreszeiträumen benötigten.

Unser Testgerät: AirNav RadarBox 3D

Unser Testgerät: AirNav RadarBox 3D

Ein anderer Weg an Flugspur-Daten zu gelangen sind so genannte ADS-B-Transponder in Flugzeugen. Die kann man in Deutschland legal mit entsprechenden Receivern wie Mode-S Beast, Transponder-Mouse oder Airnav Radarbox (ab rund 200 Euro bei eBay) empfangen. Live-Flugkarten wie Flightradar24 oder Metafly nutzen diese Technik. Nach einigen Tests entschieden wir uns allerdings gegen diese Variante. Es sind erst rund 70 Prozent der Flugzeuge mit ADS-B-Transpondern ausgestattet. Für detaillierte Analysen wäre das zu wenig.

Auch konnten wir die gewünschten Daten nicht über kostenpflichtige APIs wie Flightstats oder Flightaware bekommen.

Kooperation mit Deutschem Fluglärmdienst

Der DFLD archiviert Flugspuren in der Nähe großer Flughäfen in Deutschland. Diese können auf deren Webseite zudem mehrere Jahre rückwirkend angezeigt werden – mit einer Erfassung von mehr als 96 Prozent. Routen können auf einer statischen Karte oder auf Google Maps bzw. Earth angesehen werden. Die Daten kann man dort auch im Keyhole Markup Language (KML)-Format herunterladen.

Daten eines Air-Berlin-Flugs

Lat, Lng, dB(A): Flugspur-Daten eines Air-Berlin-Flugs

Nach mehreren E-Mails, Telefonaten und Teamviewer-Sitzungen mit Technik und Vorstand des Vereins einigten wir uns auf eine Zusammenarbeit. Wir bekamen die Flugspur-Daten mit Lärmberechnungen nach dem offiziellen AzB-Standard kostenlos im deutlich schlankeren CSV-Format geliefert – rückwirkend und täglich aktuell. Im Gegenzug verweisen wir in unserer Anwendung an mehreren Stellen auf das entsprechende Angebot des DFLD.

Die Datenqualität war von Anfang an sehr hoch. Sie wurde uns auch in Gesprächen mit Experten des Deutschen Luft- und Raumfahrtzentrums sowie Piloten und Flughafen- bzw. DFS-Angestellten, Abgleichen mit offiziellen Daten, ungezählten Stichproben und statistischen Auswertungen bestätigt. Hilfreich hierbei war auch der Data-Bulletproofing-Guide von ProPublica.

Umsetzung mit ProPublica-Datenjournalisten

Nun mussten wir einen Weg finden, eine Datenbank aufzubauen, die Daten visuell umzusetzen und Geschichten aus den Zahlen zu  gewinnen. Dafür bewarb ich mich in dem Datenjournalismus-Team von ProPublica in New York für das von der Knight Foundation unterstützte P5-Stipendium. In mehreren Telefonkonferenzen präsentierte ich das Projekt. Scott Klein und seine Kollegen fanden es spannend. Und einen Monat später, im November 2012, saß ich schon im Flieger nach New York.

Hier entstand der Flugroutenradar

Hier entstand der Prototyp des Flugrouten-Radars

Dort baute ich gemeinsam mit Jeff Larson und Al Shaw ein Grundgerüst mit dem Framework Ruby on Rails. Weil wir uns mit den Flugspuren im dreidimensionalen Raum befanden, wählten wir als Datenbank PostGIS, eine Erweiterung von PostgreSQL, die mit komplizierten Geoberechnungen umgehen kann. Damit kann etwa ganz leicht festgestellt werden, ob eine Polyline (Flugspur) in einem Polygon (Ortsteil) liegt.

Nach zwei Wochen hatten wir eine Anwendung programmiert, die genau das tat, was wir ursprünglich wollten: Überflüge über Ortsteilen und Gemeinden automatisch zählen sowie Ranglisten erstellen. Außerdem konnten Nutzer nach der Adresseingabe Flüge in einem gewissen Radius über ihrem Standort sehen. Erst noch in 2-D von oben.

3-D-Visualisierung im Browser ohne Plugins

Jeff experimentierte aber an einer 3-D-Darstellung der Flugrouten, da diese so auch bei größerem Flugaufkommen durch die horizontale Fächerung übersichtlicher und realistischer dargestellt werden können.

Programmiert von Jeff Larsson

Erster Prototyp der 3-D-Karte von Jeff Larson

Zwar gibt es 3-D-Karten wie etwa die von Nokia Maps, wie die von Apple oder Google auf Smartphones, Experimente auf Basis von Open Street Maps und natürlich Google Earth. Allerdings benötigt man für viele von ihnen Plugins wie etwa WebGL (Web Graphics Library), die nicht von allen Endgeräten unterstützt werden.

Da wir eine plattformübergreifende Anwendung veröffentlichten wollten, bedienten wir uns einer eigenen Lösung, einer Mischung aus CSS-3-D-Transforms, SVG-Vektoren und statischen Karten. Dabei wird der entsprechende Kartenausschnitt per CSS geneigt und die Flugspuren mit raphael.js als Vektoren auf Basis der Flughöhe projiziert.

Mapbox, Leaflet und Yahoo statt Google

Google stellt mit seinen Maps– und Geocoding-Diensten mitunter die besten auf dem Markt. Bei der Berliner Morgenpost kamen die Tools häufig zum Einsatz. Diesmal haben wir uns aber dagegen entschieden. Das hat zwei Gründe: Google verlangt viel Geld bei kommerzieller Nutzung über ein gewisses Kontingent (z.B. bei mehr als 2500 Geocoder-Abfragen) hinaus. Außerdem verbietet Google in seinen AGB die 3-D-Darstellung seiner Karten.

Google, OSM, Mapbox, Nokia hier vergleichen: http://bit.ly/16liEFI

Google, OSM, Mapbox, Nokia hier vergleichen: http://bit.ly/16liEFI

Nach einigen Tests und Vergleichen entschieden wir uns für die Karten von Mapbox. Die basieren auf den Daten der offenen Kartensoftware Open Street Maps. Die Straßen der Hauptstadtregion (Berlin und angrenzende Brandenburg-Gemeinden) sind dort nahezu 100% exakt erfasst. Mapbox bietet darüber hinaus eine Static-API für statische Tiles, die wir für die 3D-Darstellung benötigen. Außerdem lassen sich die Karten mit dem Tool Tilemill sehr einfach stylen. Mapbox bietet in der Bezahlvariante sogar mehr oder weniger brauchbare Satelliten-Bilder. Die 2-D-Karten wurden mit dem Framework Leaflet umgesetzt.

In der Anwendung kam ursprünglich Nominatim, der kostenlose (Reverse-)Geocoder von Open Street Maps, zum Einsatz. Der Dienst funktioniert zwar relativ gut und schnell, allerdings sind vor allem in Brandenburg und Berliner Randbezirken nicht alle Hausnummern indexiert. Da unsere Anwendung aber auf dem Geocoder als zentrales Element basiert, waren uns exakte Treffer bis auf Hausnummern wichtig. Wir entschieden uns also für den kostenpflichtigen Placefinder von Yahoo. In seiner Treffergenauigkeit kommt er dem Google-Geocoder schon sehr nahe.

D3, Responsive, Permalinks

„If it doesn’t work on mobile, it doesn’t work!“ Wir haben die Anwendung nicht nur mobiloptimiert, da immer mehr Nutzer die Berliner Morgenpost per  Smartphones und Tablets besuchen. Mit der Standortsuche bieten wir auch ein Feature, das den Flugverkehr direkt über dem aktuellen Standort zeigt. Ohne Adresseingabe, sondern mit der HTML5 Geolocation API. Die Ansicht passt sich aufgrund des Responsive Designs der Größe des Gerätes automatisch an.

Responsive Design passt sich an Endgeräte an

Responsive Design passt sich an Endgeräte an

Dieses Vorhaben stellte sich als sehr kompliziert heraus, weil die Hauptseite der Berliner Morgenpost nicht responsive ist. Wir wollten die Anwendung aber nahtlos in unser Angebot integrieren. Außerdem konnten wir den Flugrouten-Radar nicht wie unsere bisherigen interaktiven Anwendungen bei der Berliner Morgenpost einfach als iframe einbinden. Ein Nachteil unserer früheren interaktiven Anwendungen war nämlich, dass sie eine URL haben, die einen bestimmten Anfangszustand zeigt. Wir wollten aber jeden Zustand und damit Einzelerkenntnisse der Anwendung bookmarkbar und teilbar machen. Die Adresse passt sich also jedem Zustand an und kann dann etwa bei Twitter, Facebook und Google+ geteilt werden. Die Lösung war eine hauseigene API, mit der Seitenteile dynamisch zugeschaltet werden können.

Für die Darstellung der Balkendiagramme kam DC.js, eine Erweiterung von Crossfilter basierend auf D3 (Data-Driven Documents) zum Einsatz. Für Balken- und Liniendiagrammen in unseren Artikeln nutzen wir Datawrapper.

Ausbau, weitere Ideen, Lehren

Wir wollen die historischen und täglich aktuellen Daten mit weiteren Daten verknüpfen. Auch wollen wir noch mehr den Fokus auf Prognosen für die künftigen BER-Routen mit dem Hintergrund der Einzelfreigaben-Praxis legen. Außerdem planen wir Twitter-Accounts, die automatisiert entsprechende Daten twittern. Darüber hinaus denken wir auch über eine Foursquare-Lösung nach, wie sie etwa ProPublica für eine Datengeschichte umgesetzt hat. Auch wollen wir Ideen in Richtung Crowdsourcing umsetzen.

Das Benutzerinterface entsteht

Das Benutzerinterface entsteht

Als besonders trickreich hat sich die 3-D-Karte als zentrales Element der Anwendung herausgestellt. Sie basiert auf nicht standardisierten Features und ist daher sehr experimentell. Besonders Chrome und iOS hatten Probleme, dass wir auf diesen Systemen die Anzahl der angezeigten Flugspuren begrenzen mussten. Auch funktioniert die 3-D-Karte nicht mit dem Internet Explorer, der das dafür nötige „preserve-3d“ nicht unterstützt.

Außerdem hatten wir viele Erkenntnisse erst während der Arbeit mit den Daten und der Anwendung. Da es uns aber aufgrund unserer knappen Deadline nicht möglich war, den Flugrouten-Radar und dessen Logik dahinter immer wieder umzuwerfen, fehlen einige Features, die wir zum Start eigentlich gerne noch gehabt hätten.

Da wir den Flugrouten-Radar aber nicht als für immer abgeschlossene Anwendung, sondern eher als Prozess sehen, wollen wir die Funktionalität weiter verbessern und immer den aktuellen Möglichkeiten des Web anpassen. Währenddessen wird die Datenbank ein täglich umfangreicheres Recherchetool, das die Redaktion mit dem Tool pgAdmin befragen kann.

Der Flugrouten-Radar ist unsere LP. Es wird davon noch viele Single-Auskopplungen geben. Und bis zur BER-Eröffnung sind ja vermutlich noch ein paar Jahre Zeit für neue Features und Geschichten.

Über Kritik, Hinweise, Anregungen freue ich mich hier in den Kommentaren, bei Twitter, Facebook und Google+

+++ Protokoll einer Nerd-Hospitanz +++

Ich finde ja, man sollte nie aufhören zu lernen. Deshalb gehe ich für einen Monat nach New York. Dort werde ich jeweils zwei Wochen bei Propublica und dem Guardian arbeiten.

Sonnenuntergang mit Blick aus dem Propublica-Büro. Foto: Dan Nguyen (CC)

Sonnenuntergang mit Blick aus dem Propublica-Büro. Foto: Dan Nguyen (CC)

Bei Propublica nehme ich an dem P5 (Propublica Pair Programming Project) teil. Dabei werde ich mit Scott Klein und seinem Team, bestehend aus Journalisten und Programmierern, an einem Datenprojekt, einer News App arbeiten. Eine News App „is a web-based interactive database that tells a journalistic story using software instead of words and pictures.“

Danach geht es vom Financial District ein paar Straßen nördlich in SoHo bei der US-Ausgabe des Guardian weiter. Dort unterstütze ich das Open-Team um Amanda Michel bei einem Interaktiv-Projekt.

Am 9. November geht’s los. Ich freue mich schon jetzt auf das intensive Datenjournalismus-Bootcamp.

Warum ich das hier schreibe? In der Vorbereitungszeit und während meines Aufenthalts werde ich über das, was ich lerne, auch hier auf digitalerwandel.de bloggen.

Ich freue mich über Anregungen und Kritik zu dem Beitrag aber auch jeden New-York-Tipp in den Kommentaren, bei Facebook, Twitter und Google+.

+++ Donnerstag, 13. Dezember, Berlin +++

Seit Donnerstag bin ich wieder zuhause in Berlin. Es war ein intensiver Monat, in dem ich einerseits sehr viel gelernt habe und andererseits viele tolle Menschen kennenlernen durfte. Vielen Dank vor allem an Scott Klein, Al Shaw, Jeff Larsson, Lena Groeger, Mark Schoofs, Gabriel Dance, Amanda Michel, Julian Burgess und Feilding Cage.

Mein Gastgeschenk an die Kollegen

Mein Gastgeschenk an die Kollegen

Neben Ruby on Rails und Datenbanken waren da auch die Thanksgiving-Party bei Mark von ProPublica oder mein Abschiedsumtrunk mit Guardian-Kollegen in einer Manhattener Eckkneipe.

Außerdem habe ich mich sehr darüber gefreut, auf welches Interesse meine Hospitanz hier gestoßen ist. So wurde ich von Bülend Ürük von Newsroom.de und Christian Jakubetz vom Universalcode dazu interviewt.

Gerne hätte ich noch mehr gebloggt, aber leider ist mir da eine ziemlich spannende Stadt dazwischen gekommen. Als nächstes werde ich die Hunderten Bookmarks aufarbeiten und an meinem P5-Projekt weiterarbeiten. Darüber werde ich dann auch wieder hier bloggen.

+++ Donnerstag, 6. Dezember, Datenbanken für Jedermann +++

Ich arbeite derzeit an der Analyse eines riesigen Datensatzes. Es handelt sich dabei um eine CSV-Datei mit mehreren Millionen Zeilen. Mit Excel kann man maximal eine Million Zeilen verarbeiten. Auch Google Spreadsheets ist auf 400.000 Datensätze limitiert. Diese Grenzen erreicht man schneller als man denkt.

Also arbeite ich mit Datenbanken. Das ist zwar nichts Neues, allerdings war mit nicht klar, wie einfach es ist, das alles lokal auf seinem Rechner einzurichten. Es gibt etwa den sehr einfachen Weg, mit nur einem Klick eine MySQL-Datenbank zu installieren. Das Guardian Interactive-Team arbeitet unter anderem mit dem kostenlosen Programm MAMP. Nach der Installation klickt man auf „Server starten“ und schon kann man seine Datensätze importieren und mit dem integrierten Tool PHPMyadmin abfragen starten und darin recherchieren.

Noch besser ist es, seine Daten mit einem Tool wie Sequel Pro zu durchforsten, neu anzuordnen und etwa die wichtigsten Daten für sich oder seine Geschichte zu extrahieren. SQL-Abfragen sind nicht schwer, das Prinzip versteht man schnell. Es gibt viele Tutorials dafür. Immer beachten sollte man im Vorfeld, wie man seine Daten in verschiedene Tabellen aufteilt, atomar hält und die Relationen untereinander festlegt.

Es gibt noch viele weitere Arten von Datenbanken. Die Kollegen von Propublica arbeiten etwa vorwiegend mit PostgreSQL. Einer der Vorteile davon ist die Erweiterung PostGIS, die mit geographischen Objekten umgehen kann, also etwa mit einer einfachen Abfrage den Abstand von einem zu einem anderen Latitude/Longitude-Punkt berechnen und ausgeben kann.

Spricht man von Big Data, also Datensätzen weit über der Millionengrenze, helfen auch diese Tools nicht mehr unbedingt aus. Interessant, um enorm große Datensätze greifbar zu machen ist etwa das Programm Jigsaw. Viele nützliche Tools wie dieses sind allerdings nur im englischsprachigen Raum einsetzbar. Die Arbeitsgruppe Pandaprojekt will das ändern und solche Tools für den deutschsprachigen Raum anpassen. Ich bin dort auch dabei.

+++ Freitag, 30. November, The Guardian +++

Nach etwas mehr als zwei Wochen habe ich am Dienstag meine Hospitanz als P5-Fellow bei Propublica beendet. Ich habe unglaublich viel gelernt bei Scott Klein, Jeff Larrson, Al Shaw und Lena Groeger – über News-Apps-Development und über die Arbeitsweise der Investigativ-Onlinepublikation insgesamt. Bis zum Schluss haben mich die Kollegen bei meinem Projekt unterstützt. So bald wie möglich werde ich darüber mehr berichten.

Das Büro des Guardian US am späten Abend

Das Büro des Guardian US am späten Abend

Seit Mittwoch bin ich nun beim Guardian. Dort arbeite ich im Interactive-Team von Gabriel Dance, Feilding Cage, Julian Burgess und Greg Chen an einem Projekt für Amanda Michel, die das Open-Journalism-Team leitet.

Beim ersten gemeinsamen Mittagessen haben wir uns unter anderm über Wahldaten unterhalten. Zwar waren die Kollegen in den USA außerordentlich kreativ in der Präsentation ihrer interaktiven Anwendungen. Doch hatten alle mit Live-Daten der AP genau die gleiche Quelle. Das könnte sich zur nächsten Wahl ändern, vor allem Google will mitspielen. In diesem Zusammenhang ist vor allem auch das Projekt “Open Elections” zu nennen: “Our goal is to create the first free, comprehensive, standardized, linked set of election data for the United States, including federal and statewide offices.” Sicher ist: Die Online-Berichterstattung kann nur noch besser werden, wenn sich wirklich alle daran beteiligen können, die sich nicht unbedingt die teuren Daten kaufen können.

Auch in Deutschland bereiten sich die Redaktionen langsam aber sicher auf die Bundestagswahl im kommendem Jahr vor. Es könnte ein wichtiger Schritt für den Datenjournalismus werden. Die Wahlkreise gibt es zumindest schon einmal als Shapefiles.

Nicht unerwähnt bleiben sollte eine der außergewöhnlichsten interaktiven Wahlberichterstattungen des Guardian-Interactive-Teams. Das Comic über den Werdegang Mitt Romneys, “America: Elect!“, wurde unter anderem mit dem Tool Skrollr umgesetzt. Entwickler Julian hat ein kleines Making Of dazu auf dem übrigens sehr empfehlenswerten Developer-Blog des Guardian verfasst.

+++ Samstag, 24. November, Alltags-Werkzeug Scraping +++

Propublica setzt sehr stark auf Scraping als wichtiges Recherchetool. Beinahe täglich wird die Frage gestellt: „Can we scrape that?“ Wie selbstverständlich gehen die Reporter dann an ihren Rechnern durch die so gewonnenen Datensätze  und suchen nach Geschichten. Informationsbeschaffung auf diesem Weg gehört zum Arbeitsalltag.

Coden in der New York Public Library

Coden in der New York Public Library

Auch wenn ich selbst bereits den ein oder anderen Datensatz gescrapt hatte, habe ich doch im Propublica-Nerdcube sehr viel Neues gelernt. Außerdem lese ich gerade das Buch „Scraping for Journalists“ von Paul Bradshaw. Ich will hier kein Scraping-Tutorial aufschreiben – davon gibt es bereits genügend. Ich will nur kurz ein, zwei Dinge festhalten, die mir selbst neu waren.

Wenn man etwa schnell Hunderte Dateien automatisiert herunterladen will, genügt (zumindest bei Linux und OSX) der Command-Line-Befehl curl –o

curl -o download#1.html http://www.berlin.de/sen/bildung/schulverzeichnis_und_portraets/anwendung/Schulportrait.aspx?IDSchulzweig=[10303-10309]

Will man aber nur bestimmte Teile einer Datei, muss diese geparst werden. Bei Propublica nutzen die Kollegen neben dem bekannten Nokogiri das mir bis dahin unbekannte Rubygem Crack.

In diesem Zuge musste ich mein rudimentäres Vorwissen über Regular Expressions und die Commandline/das Terminal schnell auffrischen. Denn beides sollte man blind beherrschen, wenn man schnell Informationen extrahieren und für die eigenen Zwecke aufbereiten will.

Nicht neu war mit das Tool Wireshark. Aber zum ersten Mal habe ich live gesehen, wie man damit den Netzwerkverkehr abhören kann. So lässt sich etwa analysieren, welche Informationen zwischen Server und Browser hin- und hergeschickt werden. Das wiederum kann dann mit Tools wie dem bereits oben erwähnten Curl (in OSX und Linux integriert) imitiert werden.

+++ Sonntag, 18. November, Open Data +++

Wenn man in Deutschland mit Geodaten arbeiten will, so bleibt einem häufig nur Openstreetmaps. Berlin bietet seine Ortsteil-Geometrien zwar im KML-Format an, schon bei Brandenburg wird es da schwieriger. Man wird zu einem kostenpflichtigen Angebot verwiesen. In einem Projekt zur Wahl in Berlin mussten wir einzelne Wahlkreise nachzeichnen, weil sie nur als PDF(!) angeboten wurden.

In den USA gibt es eigentlich nichts, was nicht als Shapefile angeboten wird

In den USA gibt es eigentlich nichts, was nicht als Shapefile angeboten wird

Diesbezüglich sieht es in den USA deutlich besser aus. Hier bietet das United States Census Bureau alle nur erdenklichen Daten an. Auch veröffentlichen sie selbst interessante Visualisierungen.

Außerdem gibt es bei der Behörde Federal Communications Commission (FCC) eine API zu Geodaten auf die Granularität einzelner Blocks. Die FCC ist sogar auf Github.

Die MTA, die das New Yorker Nahverkehrsnetze betreibt, bietet Live-Verkehrsdaten über eine offene Schnittstelle an. So entstehen wirklich hilfreiche Apps, wie Bustime, die fast live auf einer Karte anzeigt, wo sich der entsprechende Bus gerade befindet. In Berlin habe ich so etwas ähnliches bisher nur auf der Ifa vom Fraunhofer-Institut gesehen. Der VBB hat nun aber erste Datensätze bereitgestellt, die ersten interessanten Anwendungen sollen auf dem entsprechenden Entwicklertag „Apps and the City“ entstehen.

Überhaupt gewährt New York Zugriff auf einen riesigen Datenschatz, wie etwa den Stromverbrauch nach Postleitzahlenbereich.

+++ Donnerstag, 15. November, Nerd-Fellow +++

Meine ersten Arbeitstage bei Propublica waren grandios. Ich wurde herzlich in Empfang genommen. Dann ging es gleich zur Sache.

Ich, arbeitend im Propublica-Nerdcube. Foto: Scott Klein

Ich, arbeitend im Propublica-Nerdcube. Foto: Scott Klein

Die Kollegen arbeiten fast ausschließlich mit Ruby on Rails. Die theoretischen Grundlagen von Rails kannte ich zwar, auch habe ich schon mal einen kleinen Scraper in Ruby geschrieben, aber eigentlich habe ich bisher nur clientseitig mit Javascript gecodet.

Ich musste mich also schnell auf Stand bringen. Dafür haben mich Scott Klein, Jeff Larson, Al Shaw und Lena Groeger schnell mit Screencasts und Tutorials versorgt. Denn keiner von ihnen ist gelernter Programmierer, sie sind alle Quereinsteiger und Autodidakten.

Auch wenn ich mich immer flotter zwischen Command Line, Git und PostGIS bewege, bin ich noch weit entfernt davon, eine News App wie die heute veröffentlichte über Pipelines in den USA selbst in Ruby on Rails zu entwickeln. Aber dafür bin ich hier. Jetzt gehe ich wieder üben.

 

 

+++ Sonntag, 11. November, New York +++

Ich bin da. Nach der langen Planung und Vorbereitung habe ich am Freitag dann tatsächlich die erste Nacht in meiner neuen, einmonatigen Wahlheimat, dem New Yorker Stadtteil Williamsburg, verbracht.

Daten säubern am Flughafen. Im Hintergrund meine A380 nach New York.

Daten säubern am Flughafen. Im Hintergrund mein A380 nach New York.

Die letzte Woche habe ich mein P5-Projekt intensiv vorbereitet, mit den Kollegen von Propublica darüber per Telefonkonferenz diskutiert, mit Fachleuten über das Thema gesprochen, über Datensätze verhandelt, diese gesäubert und erste Visualisierungen und Mockups gebaut – letzteres auch noch während meiner Reise.

Um was es bei meinem Projekt genau geht, möchte ich an dieser Stelle noch nicht verraten, da ich auch für den Propublica-Nerd-Blog  darüber bloggen werde.

Hier werde ich aber so oft es geht über Programme, Tools, Workflows und Best-Practice-Beispiele im Umfeld von Programmierung und Journalismus schreiben. Morgen geht’s los. Dann werde ich hier auch regelmäßiger updaten.

+++ Montag, 22. Oktober, künftige Kollegen +++

Das Datenjournalismus-Team von Propublica bloggt unter „The Propublica Nerd Blog“. Dort gibt es viele Tutorials und Tools. Besonders empfehlenswert sind die Beiträge zu Timelines, Adaptive Design und Scraping (1,2). Das Team leitet Scott Klein, durch den der Begriff News Apps geprägt wurde.

Der Guardian hat sich dem „offenen Journalismus“ verschrieben. Was es damit auf sich hat, erklären sie mit ihrem „Three little pigs“-Video. Für die US-Ausgabe des Guardian betreut Amanda Michel Projekte, bei denen Leser vor allem mittels Crowdsourcing und Social Media mit in den journalistischen Prozess eingebunden werden.

Im selben Büro sitzt auch das Guardian US interactive team um Gabriel Dance, den ich bereits 2010 in New York kennenlernte. Damals arbeitete er noch bei der New York Times und führte mich durch den Newsroom in der 8th Avenue. Von ihm stammen unter anderem isbarackobamathepresident.com und „Gay rights in the US“.

Programmier-Crashkurs für Journalisten

Online-Journalismus ist so viel mehr als nur Text, Bild, Foto, Audio oder Video. Erst wenn Medien kombiniert werden, ergeben sich Geschichten, wie sie nur im Web gezeigt und nicht in der Zeitung, im Fernsehen oder im Radio dargestellt werden können. Mit Content Management Systemen und Tools, die in Redaktionen eingesetzt werden, stößt man allerdings schnell an seine Grenzen, wenn man einzigartige, auf bestimmte Geschichten zugeschnittene Darstellungsformen haben will.

Journalisten müssen nicht zwingend selbst programmieren können. Allerdings sollten vor allem Online-Journalisten die Arbeit eines Programmierers so gut kennen wie der Fernsehredakteur die Arbeit eines Cutters kennt: Kurze Nachrichtenstücke können Fernsehredakteure selbst schneiden. Bei großen Reportagen sollte lieber der Cutter ans Werk.
Sprich: Bei größeren Datenjournalismus- und Multimedia-Projekten sollte man nicht auf Programmierer verzichten. Es ist aber hilfreich, schnell einen Datensatz selbst zu scrapen, eine API auszulesen oder eine interaktive Karte erstellen zu können. Oder zumindest zu wissen, was technisch möglich ist, um den Aufwand für eigene Format-Ideen realistisch einschätzen zu können.

Dieser Beitrag erklärt erst die Grundlagen und die Grundausstattung der Web-Entwicklung und bietet dann einen Überblick über aktuelle Web-Techniken und Frameworks, die man als Journalist zumindest einmal gehört haben sollte.

Grundlagen

Als erstes benötigt man Grundkenntnisse in der Auszeichnungssprache HTML, der Layoutsprache CSS und der clientseitigen Skriptsprache Javascript. Ob Datenvisualisierung, Multimedia-Reportage oder webbasierte Smartphone-App: Grundsätzlich basiert fast alles auf diesen drei Web-Techniken.

HTML(5)

HTML5-Logo

HTML5-Logo

Die Auszeichnungssprache Hypertext Markup Language (HTML) ist die Grundlage prinzipiell aller Webseiten im Netz. Man erstellt eine .html-Datei, schreibt etwas Code, lädt die Datei per FTP auf einen Webserver hoch und kann sie dann von dort von jedem Browser aus aufrufen.

Zwar kann man HTML einfach in jedem x-beliebigen Text-Editor schreiben. Komfortabler ist aber eine Entwicklungsumgebung. Zu empfehlen sind die einfachen, kostenlosen HTML-Editoren wie Phase oder Smultron (kostenlos). Häufig genutzt werden auch Sublime TextCoda und Espresso. Größere IDE (Integrierte Entwicklungsumgebungen) wie Komodo Edit oder Aptana (kostenlos) helfen unter anderem bei der Kontrolle und dem schnelleren Schreiben der Syntax, also der „Code-Grammatik“. Zusätzlich sollte man sich Tools wie Firebug oder Chrome Developer Tools und Code-Hosting-Dienste wie Github einrichten. Als eigene CMS können Drupal oder WordPress eingesetzt und individuell angepasst werden.

Erst 2014 will das World Wide Web Consortium (W3C), das sich für einheitliche Standards im Web einsetzt, HTML5 offiziell empfehlen. Faktisch kann man es aber schon jetzt benutzen. Ältere Browser haben aber Probleme damit. Für die muss man dann eigene Versionen oder abgespeckte Fallback-Varianten erstellen. Oder man fordert den Nutzer gleich zu Beginn auf, die neueste Version eines bestimmten Browsers zu installieren.

In HTML werden nur die Inhalte mit ihrer entsprechenden Auszeichnung geschrieben. Mit Tags wie <h1>, <p> oder <div> gibt man an, welcher Abschnitt Überschrift, welcher Fließtext und welcher eine Box sein soll. Das Layout wird später mit Cascading Stylesheets (CSS) festgelegt. Inhalt und Layout sollten immer voneinander unabhängig erstellt werden.

Einstieg und Tutorials:

CSS

CSS-Beispiel

CSS-Beispiel

Mit der Formatierungssprache Cascading Stylesheets (CSS) werden Layouts von HTML-Seiten unabhängig von der Funktionalität festgelegt. Derzeit wird CSS in der Version 2.1 vom W3C empfohlen. CSS3 kann aber noch einiges mehr – befindet sich aber derzeit noch in der Entwicklung. Teile der neuen Spezifikation werden aber schon von aktuellen Browsern unterstützt.

Die größten Neuerungen von CSS3 sind Elemente wie Animationen und Übergänge. Damit können Effekte mit Texten und anderen Objekten im Browser dargestellt werden, wie sie bisher nur etwa mit Flash möglich waren. Ein weiterer wichtiger Aspekt dabei ist Responsive Webdesign, einer Technik, Webseiten so zu gestalten, dass sie sich verschiedenen Endgeräten und deren Bildschirmgrößen anpassen.

Will man also einem HTML-Element wie einer <div id=“box“>-Box nun eine Layout-Eigenschaft wie einen roten Hintergrund zuweisen, so kann man das mittels Name-Wert-Zuweisung in einer eigenen .css-Datei, direkt an dem entsprechenden HTML-Element oder im HTML-Vorspann definieren. Also konkret: #box {  background-color: #cc0000; }

Einstieg und Tutorials:

Javascript

Javascript-Beispielcode

Javascript-Beispielcode

HTML-Seiten sind statisch. Um aber dynamische Webseiten zu erstellen – z.B. wenn sich ein Inhalt bei Klick auf einen Button ändern soll, benötigt man eine Skriptsprache. Es gibt serverseitige Skriptsprachen wie PHP, Python oder Ruby und clientseitige Skriptsprachen wie Javascript (Javascript wiederum ist auch serverseitig einsetzbar).

Javascript hat den Vorteil, dass es direkt vom Browser gelesen und ausgegeben werden kann. Auch ist Javascript recht einfach und es existieren dafür unzählige Javascript-Bibliotheken, also bereits programmierte Module, die im eigenen Code geladen und eingesetzt werden können. Diese bindet man im <head>- oder <body>-Bereich des HTML etwa so ein: <script src="processing-1.3.6.min.js"></script>.
Außerdem gibt es  Javascript-Frameworks wie jQueryPrototype, Backbone, Underscore oder Angular, die Programmierarbeit abnehmen. Nicht nur deswegen hat die Popularität und Relevanz von Javascript in letzter Zeit enorm zugenommen, da auch aufwendigste Anwendungen damit umgesetzt werden können.

Einstieg und Tutorials:

Text und Daten

Weltweit öffnen Unternehmen und Verwaltungen nach und nach ihre Datenbanken für die Öffentlichkeit. Dadurch entstehen immer größere Datenmengen, die in unterschiedlichen Formen zugänglich gemacht werden.

Im schlechtesten Fall werden die Daten im geschlossenen Portable Document Format (PDF) bereitgestellt. Beispiel: Fahrradunfälle in Berlin nach Straßen. Diese Dateien müssen umständlich mit entsprechender Software wie dem kostenpflichtigen Abby Finereader oder dem kostenlosen Tool Documentcloud umgewandelt werden. Besser ist es, wenn die Daten im Sinne des Open Data in maschinenlesbarer Form als Comma-Separated Values (CSV), Extensible Markup Language (XML), Javascript Object Notation (JSON), als Ressource Description Framework (RDF) oder zumindest als Excel-Tabelle zum Download bereitgestellt werden. Im besten Fall werden die Daten per Schnittstelle (API) veröffentlicht.

Web APIs

Ein Weg, dynamisch und in Echtzeit an Daten zu gelangen, ist der über eine Schnittstelle, einem Application Programming Interface (API). Über sie können Daten von Maschine zu Maschine ausgelesen und dann weiterverarbeitet werden. Es existieren mehrere Tausend solcher Web APIs im Netz. Es gibt APIs von sozialen Netzwerken wie Twitter oder Facebook über APIs von Städten wie Leipzig mit Verwaltungsdaten oder Verkehrsdaten von Verkehrsbetrieben wie dem VBB bis hin zu Nachrichten APIs, die so ihre Artikel nach außen hin öffnen wie die New York Times oder der Guardian.

JSON-Ausgabe der API-Anfrage https://api.twitter.com/1/followers/ids.json?cursor=-1&screen_name=digitalerwandel

JSON-Ausgabe der API-Anfrage aller Follower-IDs von @digitalerwandel http://bit.ly/JaZhR8

Prinzipiell funktionieren Web-APIs so, dass man durch die bestimmte Eingabe einer URL ein entsprechendes Ergebnis geliefert bekommt. Ein Beispiel: Die Eingabe der URL http://search.twitter.com/search.json?q=Stromausfall gibt sämtliche Tweets aus, die den Suchbegriff „Stromausfall“ enthalten (Update 08.10.2013: Twitter hat auf eine neue API-Version umgestellt. Ein ähnliches Beispiel wäre die API von Wikipedia). Die Ausgabe erfolgt in diesem (und in den meisten Fällen) als eine lange Zeichenkette im Format JSON. Diese müssen dann im Programmcode verarbeitet werden.

Diese Tweets können auch automatisiert in eine Datenbank geschrieben werden. So können sich Journalisten eigene Recherchedatenbanken zu verschiedenen Themen aufbauen. Für Mashups können verschiedene APIs miteinander kombiniert werden, was zu völlig neuen Erkenntnissen führen kann. Auch ist es für Journalisten sinnvoll, APIs zu eigenen Projekten anzubieten – etwa unter einer nichtkommerziellen Creative-Commons-Lizenz. So können Nutzer selbst eigene oder neue Erkenntnisse aus den Datensätzen ziehen.

Einstieg und Tutorials:

Web Scraping

Werden im Netz verfügbare Daten nicht in einem der oben genannten Formate oder eine API bereitgestellt, bleibt neben der händischen Auswertung nur, die Informationen auf Webseiten mit einem Programm auszulesen und – unter Beachtung der rechtlichen Hintergründe – weiterzuverarbeiten beziehungsweise in einer eigenen Datenbank abzuspeichern. Außerdem sind große Teile des Web überhaupt nicht indexiert, weil die Inhalte etwa hinter dynamischen Formularen oder Anmeldeschranken versteckt sind. Auch diese Daten können automatisiert ausgelesen und gespeichert werden. Dieser Vorgang wird als Web Scraping bezeichnet.

Mit einem Ruby-Skript wurden in diesem Beispiel alle Daten der abgehenden Flüge am 25. April um 9:45 vom Flughafen Schönefeld gescraped und in eine CSV-Datei gespeichert.

Mit einem Ruby-Skript wurden in diesem Beispiel Flugdaten gescrapt und in eine CSV-Datei gespeichert.

Es gibt viele Möglichkeiten, mithilfe freier Web-Technologien so an Daten von Webseiten zu gelangen. Grundsätzlich wird eine serverseitigen Skriptsprache wie PHP, Python, Perl oder Ruby benötigt, um einen eigenen Parser zu schreiben, der diese Arbeit entweder manuell oder per Cronjob in bestimmten Zeitfenstern verrichtet. Allerdings kann man auch clientseitig mit der Unterstützung von Node.js scrapen. Frameworks hierfür wären etwa Scrapy oder Node.io.

Die einfachste Vorgehensweise ist, die Inhalte der entsprechenden HTML- beziehungsweise XML- oder auch CSS beziehungsweise X-Path-Markup auszulesen. Dafür gibt es zahlreiche Bibliotheken für die oben genannten Skriptsprachen wie Nokogiri für Ruby. Sollen Daten hinter Formularen oder Suchfeldern gescrapt werden, so muss etwa die Ruby-Bibliothek Mechanize zusätzlich eingesetzt werden.

Die Aufbereitung der Daten – das so genannte Data Wrangling – erfolgt dann meist über Tools wie Data Wrangler, Google Refine oder Mr. Data Converter.

Einstieg und Tutorials:

Datenbanken

Da mit lokal abgespeicherten Daten wie im oberen Beispiel nicht viel angefangen werden kann, müssen sie online in Datenbanken gespeichert werden.

Die phpMyAdmin-Ansicht der MySQL-Datenbank dieses Blogs

Die phpMyAdmin-Ansicht der MySQL-Datenbank dieses Blogs

Dafür kommen zurzeit häufig proprietäre Tools wie etwa Spreadsheets oder Fusion Tables von Google zum Einsatz. Zugriff auf die Tabellen in Form einer relationalen Datenbank erhält man bei ersterem entweder über die eigene API oder zusätzliche Javascript-Bilbiotheken wie Tabletop.js.

Allerdings gibt es auch eine große Anzahl an Open-Source-Datenbanken. Die seit längerer Zeit am meisten genutzten sind die relationalen Datenbanken MySQL und Postgres. Der Grundaufbau bei der SQL-Datenbankabfragesprache SQL-Syntax. ist: SELECT spalte FROM tabelle WHERE bedingung. Ähnlich funktioniert das auch bei Google Fusion Tables.
Derzeit setzen sich auch vermehrt nicht-relationale Datenbanken durch. Der Grund: Im Gegensatz zu relationalen Datenbanken verfügen „NoSQL“ (Not only SQL)-Datenbanken über eine schemafreie Struktur, sind horizontal skalierbar und damit besser für große Datenmengen wie etwa in sozialen Netzwerken einsetzbar. Es existieren mehr als hundert solcher Datenbanken. Zu den bekanntesten Vertretern zählen MongoDB und CouchDB.

Einstieg und Tutorials:

Grafik und Animation

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.

Die New York Times visualisiert mit d3.js Daten

SVG-Dateien bekommt man an vielen Stellen im Netz, 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:

Praxisbeispiele:

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 Frameworks wie Paper.js, die die Arbeit sehr vereinfachen. Hervorgehoben soll hier aber Processing.js.

Visualisierung mit Processing.js

Visualisierung mit 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:

Praxisbeispiele:

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.

Die Web-Doku „One Millionth Tower“ wurde auch mit WebGL umgesetzt

WebGL erweitert das Canvas-Element um die Möglichkeit, 3D-Grafiken direkt im Browser darzustellen. Eine weitere Besonderheit an WebGL ist, dass es hardwareunterstützt,  also direkt von deiner Grafikkarte läuft. 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 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:

Praxisbeispiele:

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.

Interaktive Karten mit Kartograph.js erstellen

Interaktive Karten mit Kartograph.js erstellen

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:

Praxisbeispiele:

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.

LA Times nutzt Timesetter

Die LA Times nutzt das Tool Timeline Setter

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:

Praxisbeispiele:

Audio und Video

Das World Wide Web als Teil des Internet ist ein interaktives System, in dem Dokumente untereinander per Hyperlink verbunden sind. Es verändert sich derzeit vor allem dahingehend, dass Multimedia-Elemente wie Animation, Video oder Audio nativ eingebunden und vollständig in das Web integriert werden können – Stichwort: Hypervideo, Hyperaudio. Was früher nur etwa mit Plugins ging, kann heute direkt im HTML/Javascript-Code gemacht werden.

HTML5 Video- und Audio-Tag

Viele Nachrichtenseiten veröffentlichen auch 2012 noch multimediale Anwendungen mit Flash-, Silverlight- oder Java-Plugins beziehungsweise verzichten gänzlich auf den Einsatz von HTML5. Dabei bieten neben dem bereits beschriebenen <canvas>-Tag auch der <video>- und der <audio>-Tag großes Potenzial für multimediale Darstellungsformen.

Die nativen Kontrollbalken

Die nativen Kontrollbalken

Die native Einbindung von Medienelementen wie Audios und Videos bringt vor allem den Vorteil, dass sie mit HTML5-Befehlen per Javascript interaktiv gesteuert werden können. Es werden kontinuierlich Events geworfen, wie etwa „progress“ – bzw. der Eventhandler „onprogress“, das einen Wert für den Ladezustand ausgibt, oder „seeked“ – und der entsprechende Eventhandler „onseeked“, das ausgibt, wie oft im Video gespult wurde. Außerdem können noch Properties wie „currentTime“, das die aktuelle Zeit aus dem Audio oder Video ausgibt oder etwa „volume“ der das den Wert für die Lautstärkeeinstellung bereitstellt, genutzt werden. Das ermöglicht etwa direkte Verlinkungen in stetigen Multimedia-Elementen und die Interaktion mit anderen Medien.
Auch bieten Player wie Youtube oder Vimeo auf ihren Developers-Seiten eine solche Interaktions- und Individualisierungsmöglichkeit, wenn auch eingeschränkt, an.

Einstieg und Tutorials:

Praxisbeispiele:

Popcorn.js

Popcorn.js ist eine Javascript-Bibliothek, die Audio- und Videodateien zeitgesteuert mit Kontext aus dem Web anreichern kann. Sie bietet die Möglichkeit, Webinhalte vom reinen Text über Links bis hin zu Karten, Twitter-Feeds oder Text zeitgesteuert in und um Audio- oder Videoelemente herum darzustellen. So können sich Nutzer etwa durch die Zusatzinformationen tiefer mit dem Thema im Video befassen zu können. Popcorn.js „befreit“ also Multimedia-Elemente im Web – weg von etwa im Video durch die Schnittsoftware unwiederbringbar “eingebrannten” Elementen wie statische Bauchbinden.

Spart viel Programmcode: der Popcorn Maker

Spart viel Programmcode: der Popcorn Maker

Es stehen zahlreiche vorgefertigte Plugins zur Verfügung, die auch kombiniert werden können. Die Web-Technik wurde etwa bei dem Multimedia-Feature DDR-Flüsterwitze – Protest hinter vorgehaltener Hand vom Autor dieses Blogs, Julius Tröger, eingesetzt. In dem Beitrag Webinhalte in Webvideos darstellen – Popcorn.js für Journalisten auf diesem Blog gibt es dazu einen praxisnahen Erfahrungsbericht. Mit dem Popcorn Maker wird ein Tool angeboten, das wie ein Online-Schnittprogramm funktioniert und zum Video passenden Quellcode ausgibt.

Einstieg und Tutorials:

Praxisbeispiele:

Hyperaudio

Audio kann besser dargestellt werden, als in einem Embed-Player. Mit Hyperaudio wird Audio Teil des Netzes und im Sinne des Hypermedia vollständig ins Web integriert.

Hyperaudio - Ton mit interaktivem Transkript

Hyperaudio – Ton mit interaktivem Transkript

Es existieren bereits Projekte, bei denen etwa durch die Synchronisation von Audio und Transkripten Interviews völlig neu dargestellt werden. Dabei läuft neben dem Audio live ein Transkript mit, das auf Wunsch sogar angeklickt und an die entsprechende Stelle gesprungen werden kann. Weitere interessante Beispiele sind der Einsatz des Audiodienstes Soundcloud für Flash-freie Audio-Slideshows oder eine interaktive Radiosendung. Umgesetzt wird das unter anderem auch mit dem Framework Popcorn.js beziehungsweise dem offenen Player jPlayer. So können etwa in Kombination mit APIs wie der des Audiodienstes Soundcloud völlig neue Web-Formate erstellt werden.

Einstieg und Tutorials:

Praxisbeispiele:

SMIL Timesheet.js

Neben HTML5 – in der Kombination mit Frameworks wie Popcorn.js – gibt es eine weitere Möglichkeit, Multimedia-Elemente interaktiv, aufeinander abgestimmt, zeitbasiert und direkt im Web integriert darzustellen.

Timesheet.js

Mit HTML5, CSS3 und SMIL wurde eine klassische Radiosendung als Web-Audio-Dokumentation umgesetzt.

Die Synchronized Multimedia Integration Language gibt es bereits seit 1998. SMIL ist ein Web-Standard für die zeitsynchrone Einbindung, Steuerung und Integration multimedialer Inhalte. Allerdings wird es von keinem gängigen Browser unterstützt. Es gibts aber die Möglichkeit, SMIL-Elemente mit Javascript-Bibliotheken wie Timesheet.jsin HTML einzusetzen und wird daher auch für den journalistischen Einsatz interessant.

Denn: Nachrichten bauen sich eigentlich immer aus aus mehreren Medienelementen zusammen. Eigenen oder fremden. Mit Techniken wie SMIL können Roh-Audio- und Videomaterial, Grafiken, Animationen und Text sowie weitere Medienelemente wie Tweets oder Youtube-Videos im Quellcode zu einem Beitrag geschnitten werden. Durch die Beibehaltung der Original-Medien im Gegensatz zum in sich geschlossenen Multimedia-Element kann eine völlig neue journalistische Transparenz, Nutzerintegration, Wiederverwendbarkeit und Medienkombination geschaffen werden.

Einstieg und Tutorials:

Praxisbeispiele:

Fazit:

Web-Techniken ersetzen nicht das klassische journalistische Handwerk, sie ergänzen es.

„Wir brauchen mehr Entwickler im Newsroom und mehr Journalisten, die programmieren können.“ Die Interaktiv-Chefin der AP, Shazna Nessa, geht sogar noch einen Schritt weiter und sagt, man trenne ja auch nicht zwischen Journalismus und der Fähigkeit auf Computern schreiben zu können. Andere sind der Meinung, dass Programmieren Programmierern überlassen werden sollte.

Fest steht: Es sind interessante Zeiten, in denen viel experimentiert werden kann. Deutsche Verlage betreiben kaum Forschungseinrichtungen, wie sie etwa aus der Industrie bekannt sind. Experimente müssen also aus der Redaktion kommen. Mit einem konkreten, kleinen Projekt im Kopf sollte man einfach loslegen und dabei seine Fähigkeiten erweitern. Wer an seine Grenzen stößt, der kann sich für kleine Programmieraufgaben über Freelancer-Portale Spezialisten suchen.
Bei größeren Projekten sollte die Arbeit Programmierern überlassen werden. Die in diesem Beitrag gezeigten Web-Techniken und Frameworks sind nur ein subjektiver Ausschnitt von dem, was bei der Web-Entwicklung möglich ist. Einen tieferen Einblick in „Journo-Hacking“ findet man vor allem im Datadesk-Blog der LA Times, dem Entwickler-Blog der New York Times, dem News-Apps-Teams der Chicago Tribune und den  Propublica-Nerds.

Über Hinweise, Links, Korrekturen, Praxisbeispiele und Kritik würde ich mich in den Kommentaren, auf Facebook, Google Plus und Twitter sehr freuen.

Update (2. August 2012)

Die Drehscheibe, Fachmagazin für Lokaljournalismus, hat mich zu diesem Blogbeitrag interviewt. Ich habe ihnen den Beitrag als Online-Workshop zur Verfügung gestellt.

Weiterführende Links:

Webinhalte in Webvideos – Popcorn.js für Journalisten

Inspiriert von dem „Newscontest -Unlocking Video“ der Mozilla Foundation ist das Multimedia-Feature „DDR-Flüsterwitze – Protest hinter vorgehaltener Hand“ von Annika Bunse und mir, Julius Tröger, für die Berliner Morgenpost entstanden.

Multimedia-Feature - DDR-Flüsterwitze

Bei der Recherche merkten wir schnell, dass es so viele interessante Aspekte, Zeitzeugen und Wissenschaftler zu dem Thema gibt. Eigentlich war bis zum Schluss nicht klar, wie wir die Fülle an Informationen am besten aufbereiten. Wir haben uns dann dafür entschieden, zu experimentieren und ausschließlich neue multimediale Darstellungsformen einzusetzen.

Die redaktionellen Experimente mit Online-Tools und Web-Techniken wie jQuery und Popcorn.js – abseits von Flash und Redaktions-CMS – stellten sich als große Herausforderung heraus, da es aus keinem dieser Bereiche Erfahrungswerte von Kollegen gab, im Netz wenig zu konkreten Fragestellungen zu finden war. Eine fertige Vorlage für die Inhalte lieferte lediglich das Timeline-Tool „Tiki Toki“. Alle anderen Ansätze wurden mithilfe der APIs von Soundcloud, Youtube und Google Fusion Tables individuell erstellt.

Zentrales Element bei dem Multimedia-Feature „DDR-Flüsterwitze – Protest hinter vorgehaltener Hand“ ist das Video auf der ersten Seite, in dem Zeitzeugen und Flüsterwitz-Forscher erzählen.
Es wurde erst ganz gewöhnlich mit einer Canon EOS 5D Mark II und einer 50mm/f1.4-Festbrennweite von Canon gedreht, mit Final Cut Pro 7 geschnitten und auf Youtube hochgeladen.
Dann haben wir darüber hinaus aber eine neue Technik eingesetzt, die es ermöglicht, zusätzliche Informationen in oder neben Webvideos – außerhalb des gerenderten/codierten Bereichs – darzustellen.

Dabei handelt es sich um das HTML-5-Multimediaframework Popcorn.js. Die Javascript-Bibliothek bietet die Möglichkeit, Webinhalte vom reinen Text über Links bis hin zu Karten oder Twitter-Feeds zeitgesteuert um das Video herum darzustellen. Diese Inhalte können dann nach Bedarf vom Nutzer betrachtet und sogar beeinflusst werden, um sich etwa durch die Zusatzinformationen tiefer mit dem Thema im Video befassen zu können.

Popcorn.js löst etwa das Problem, dass Texte, die bisher in Videos „eingebrannt“ waren, nun zusätzlich anderweitig verwendet werden können. So können etwa Links im Video dargestellt und vom Nutzer kopiert oder Text nun auch von Google indiziert werden. Darum haben wir Bauchbinden und Untertitel „befreit“. Bauchbinden sind zum Beispiel mit Links versehen und anklickbar.

Des Weiteren wollten wir möglichst große Teile unseres Recherchematerials und weiterführende Links darstellen (in dem Flüsterwitz-Projekt nicht ganz einfach, da die meisten Quellen lediglich offline verfügbar waren), die zu den passenden Zeitpunkten im Video erscheinen.
Recherchematerial und Informationen, die es nicht in das journalistische Endprodukt geschafft haben, verschwinden meist in irgendeiner (digitalen) Schublade. Dabei sind diese PDFs, Links oder Artikel anderer Medien für den User ggf. auch interessant und können sogar einen Mehrwert schaffen.

Popcorn sollte aber auch kritisch betrachtet werden: Wenn sich neben dem Hauptinhalt noch andere Dinge abspielen, besteht schnell die Gefahr eines so genannten Split Attention Effekts . Da wir nicht wollten, dass die Nutzer von den zusätzlichen Inhalten abgelenkt werden, haben wir sie in einem separaten Teil unter dem Video platziert und außerdem äußerst dezent eingesetzt. Das Video funktioniert auch ohne diese Zusatzelemente.

Zwar ist mit Flash diese Art der zeitgesteuerten Darstellung grundsätzlich auch möglich. Allerdings werden proprietäre Plugins benötigt. Anwendungen auf der Basis von HTML, CSS und Javascript lassen sich hingegen auf allen Endgeräten und Browsern darstellen.

So nutzt Arte Popcorn.js

So nutzt Arte Popcorn.js - http://bit.ly/g31SUq

Das Open-Source-Projekt Popcorn hat im November mit der Version 1.0 das Beta-Stadium verlassen – seither findet man im Netz zahlreiche interessante Projekte, die häufig experimetellen Charakter haben.
Ein sehenswertes Beispiel ist die Web-Doku One Millionth Tower. Popcorn selbst zeigt auf seiner Seite viele Beispiele. Hervorzuheben ist ein Experiment von Arte, die für die Web-Doku „Notre Poison Quotidien“ Popcorn dezent eingesetzt haben. Programmierer entwickeln auf der Basis von Popcorn.js und unterschiedlichen APIs immer neue Anwendungen. In diesem Beispiel etwa wird Video mit WebGL und Google Maps kombiniert.
Wie es nicht aussehen darf, zeigt eine völlig überladenee Popcorn-Demo der Version 0.1 (Mittlerweile wird die Google Translate und die Google News API nicht mehr unterstützt).

Wie man Popcorn.js auf deutlich höherem technischen Niveau journalistisch einsetzen kann, zeigt etwa die interaktive Radiosendung des Radiolab. Auch der Ansatz von Happyworm, ein Audio-Interview mit seinem Transkript zu verknüpfen, ist sehr spannend.

Die Idee, unterschiedliche Medienarten zeitgesteuert und interaktiv zu kombinieren, ist nicht neu. Mit der auf XML basierten Auszeichnungssprache SMIL können Text, Bild, Audio und Video über die von HTML bekannte Art und Weise, Medien darzustellen hinaus, parallel bzw. untereinander durch Events verknüpft im Browser dargestellt werden.
Allerdings ist SMIL nie in alle Browser implementiert worden. Zum Abspielen werden etwa eigene Player benötigt. Popcorn.js benötigt lediglich einen halbwegs aktuellen, HTML5-fähigen Browser.

Kritiker führen neben dem Split Attention Effekt auch an, dass Popcorn.js nur dafür missbraucht werden könnte, leichter kontextbasierte Werbung zu platzieren und (interaktive) Anzeigen nur an der dazu passenden Stellen im Video anzuzeigen, was Webseiten nur noch unruhiger werden lassen könnte. Außerdem sehen viele in dieser Art von Kontextanreicherung lediglich bessere Youtube-Annotations. Darüberhinaus ist Popcorn sehr rechenaufwendig und läuft nicht auf jedem Netbook flüssig.

Popcorn.js How-To

Für die Popcorn-Syntax werden lediglich Grundkenntnisse in Web-Skript- und Auszeichnungssprachen (Javascript, HTML, CSS) benötigt. Wohingegen bei größeren Projekten, oder wenn etwa eigene Erweiterungen über die Popcorn-API geschrieben werden müssen, Programmierer hinzugezogen werden sollten. Popcorn selbst stellt einige Tutorialvideos bereit. Eine weitere ausführliche Erklärung gibt es von Nettuts.
Im Folgenden werden die Grundzüge von Popcorn.js erläutert. Da ich selbst gelernter Journalist und kein Programmierer bin, bitte ich um Nachsicht bei der vielleicht teils unscharfen Verwendung von Informatik-Begriffen.

Beispiel: Popcorn Code

Videos können entweder direkt mit dem HTML5-Tag „video“ auf entsprechend codierte Dateien (Theora/OGG für Firefox, WebM für Chrome, MP4/H.264 für Safari) oder als Youtube- bzw. Vimeo-Link vorliegen und von Popcorn angesprochen werden.

Dass die Videos in allen Browsern dargestellt werden können, müssen sie, nachdem sie fertig geschnitten wurden, in die drei oben genannten Formate umgerechnet werden. Das funktioniert gut mit den freien Tools Miro Video Converter, FireOGG und MPEG Streamclip.

Das Grundgerüst bildet immer ein Popcorn-Objekt, das auf ein DOM-Element, das das entsprechende Video „enthält“, zugreift. Methoden an Instanzen dieses Objekts können dann darauf zugreifen und Befehle annehmen oder Werte ausgeben.
Popcorn bietet mehr als 20 vorgefertigte Plugins, mit denen die unterschiedlichsten Dinge mit dem Video gemacht werden können. Der Grundaufbau sieht dann in etwa so aus:

var videoName = Popcorn("#video");
videoName.footnote({
start: 2,
end: 6,
text: "Hallo",
target: "divElement" });

In dem Beispiel wird das Plugin „Footnote“ eingesetzt und macht nichts anderes, als dass der Text Hallo von Sekunde 2 bis Sekunde 6 des abgespielten Videos in dem Kasten „divElement“ angezeigt wird. Ein weiteres Beispiel ist die Integration von Google Maps:

var videoName = Popcorn("#video");
videoName.googlemap({
start: 10,
end: 35,
type: "satellite",
target: "divElement",
location: "Berlin",
zoom: 9  });

Das Plugin „Googlemap“ in diesem Beispiel zeigt von Sekunde 10 bis 35 eine Google Map zentriert auf Berlin in der Zoomstufe 9 und der Satellitenfoto-Ansicht in dem Kasten „divElement“ an.

Von diesen Plugins gibt es etwa zwei Dutzend. Sie übernehmen die Kommunikation mit Online-Tools wie Google Maps oder Soundcloud, indem sie über die Schnittstelle (API) Daten übergeben und wieder zurück bekommen.

Popcorn Maker

Popcorn Maker

Was einem nicht erspart bleibt, wenn man etwa Untertitel auf diese Weise hinzufügt, ist die mühevolle Kleinarbeit, jedes einzelne Element im Code einzutragen. Dagegen haben die Popcorn-Entwickler etwas übernommen und die Anwendungen Popcorn Maker veröffentlicht. Damit wird der Einsatz von Popcorn.js auch für diejenigen erleichtert, die überhaupt nichts mit Code zu tun haben wollen. Ähnlich wie bei Schnittprogrammen wird dort die Anordnung von Video, Text, Bilder, Googlemaps etc. über Ebenen in einer Timeline organisiert. Allerdings befindet sich der Popcorn Maker derzeit noch im Alpha-Stadium und stürzt häufig ab, bzw. unterstützt nicht alle Plugins.

Fazit: Spielerei oder ernstzunehmende Webvideo-Evolution: Fest steht, dass das „Entkoppeln“ von Videos im Web – weg von im Video unwiederbringbar „eingebrannten“ Elementen – spannende Möglichkeiten des Storytellings bietet – und das weit über dem sehr dezenten Einsatz in umserem Projekt. Techniken wie Popcorn.js oder WebGL stehen für Journalisten und/oder Filmemacher erst am Anfang. Und durch die ständigen Erweiterungen und Hacks könnten schnell weitere interessante Elemente für neue Darstellungsformen hinzukommen, die sowohl im schnellen Nachrichtenalltag als auch im Filmbereich sinnvoll eingesetzt werden können.

Ich freue mich über Kritik zu dem Multimedia-Experiment. Hier in den Kommentaren, per Mail, Twitter als Facebook-Kommentar oder Google-Plus-Post. Wir planen ein Update auf Basis von Nutzermeinungen.

Update 3. Januar 2012

Update 11. Mai 2012

  • Wir haben mit unserem Multimedia-Feature den 1. Platz in der Kategorie Internet beim Axel-Springer-Preis 2012 belegt. In der Jury saßen Rüdiger Dietz (Spiegel Online), Dirk von Gehlen (jetzt.de), Dr. Mercedes Bunz (The Guardian), Dr. Dr. Alexander Görlach (The European), Lars Abromeit (geo.de), Franziska Bluhm (Wirtschaftswoche Online), Rowan Barnett (Twitter) und Michael Hauri (2470 Media)

Weiterführende Links: