Schlagwort-Archiv: Multimedia

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

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+

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: