Kategorie-Archiv: Journalismus

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:

Making Of: Datenvisualisierung zur Berlin-Wahl

Berlin hat ein neues Abgeordnetenhaus gewählt. 1.486.616 1.487.487 (endgültiges Ergebnis) Millionen Menschen haben in 1736 Wahllokalen und per Briefwahl ihre Stimme in 78 Wahlkreisen der Hauptstadt abgegeben. 22 Parteien waren zur Wahl zugelassen.

Gegen 1 Uhr in der Nacht nach der Wahl veröffentlichte die Landeswahlleiterin von Berlin das vorläufige amtliche Endergebnis. Rund eine Stunde später wurde auf wahlen-berlin.de eine rund fünf Megabyte große Excel-Tabelle mit allen abgegebenen Stimmen zum Download angeboten. Einige Nachtschichtstunden später veröffentlichten wir gegen 8 Uhr am Tag nach der Wahl unsere interaktive Berlin-Wahlkarte, auf der alle zur Abgeordnetenhauswahl abgegebenen Stimmen dargestellt werden können.

Berlinwahlkarte der Berliner Morgenpost

Berlinwahlkarte 2011

Bereits lange im Vorfeld der Wahl am 18. September hatten wir uns überlegt, welche Darstellungsformen wir online einsetzen wollen, um den erwarteten Zahlenberg darzustellen. Wir hatten uns dafür entschieden, eine Karte mit allen Bezirken, Wahlkreisen und Wahllokalen zu bauen, auf der alle abgegebenen Stimmen bis auf Kiez- bzw. Straßenebene zurückverfolgt werden können. Diese sollte mit nicht-proprietären Online-Tools abseits von Flash umgesetzt werden und auf möglichst allen Endgeräten darstellbar sein.

Zum Einsatz kamen ausschließlich Tools von Google. Die Wahlkarte wurde mit Google Fusion Tables, Google Maps, Google Chart Tools und Google Spreadsheet sowie den jeweiligen APIs umgesetzt. Geschrieben ist die Webseite in XHTML, Javascript und CSS. Außerdem haben wir mit dem Tabellenverarbeitungsprogramm Microsoft Excel und den freien HTML-Editoren Komodo Edit, Aptana Studio und Smultron gearbeitet.

Da wir, André Pätzold und Julius Tröger, beide gelernte Journalisten und keine Programmierer sind, haben uns die Dokumentationen und Beispiele der APIs sehr geholfen. Ein fundiertes Grundlagenwissen der o.g. Techniken brachten wir beide allerdings bereits mit. Bei detaillierten Fragen wurden wir immer in den entsprechenden Foren unterstützt.

Entstehung der Wahlkarte in fünf Schritten:

  1. Daten besorgen, in Excel-Tabellen speichern, bereinigen und aufeinander abstimmen
  2. Excel-Tabellen in Google Fusion Tables importieren und verbinden
  3. Geodaten visualisieren, Polygone zeichnen und Infofenster bearbeiten
  4. Layout und Steuerung um die Google-Karte erstellen

1. Daten besorgen, in Excel-Tabellen speichern, bereinigen und aufeinander abstimmen

Die Daten zur Berlin-Wahl wurden von der Landeswahlleiterin bereitgestellt. Neben den detaillierten Wahlergebnissen konnten im Vorfeld zudem Wählerstrukturdaten wie z.B. Migrationshintergrund der Wahlberechtigten in den Wahlkreisen heruntergeladen werden.
Darüberhinaus stellte die Landeswahlleiterin die Adressen der 1736 Berliner Wahllokale und die Beschreibung der 78 Wahlkreise zur Verfügung.

Excel - Tabellenbereinigung

Excel - Tabellenbereinigung

Im nächsten Schritt mussten die benötigten Daten in einzelnen Tabellen so aufgearbeitet werden, dass sie ausschließlich die benötigten Daten in einer sinnvollen Reihenfolge und möglichst keine Umlaute mehr enthalten. Dafür kam vorwiegend Microsoft Excel und vor allem die entsprechenden Formel-Befehle „Verketten“ und „MAX“ sowie eine ausgiebige Zellenformatierung zum Einsatz.

Für Fusion Tables ist es außerdem wichtig, dass die Excel-Tabelle nicht größer als ein Megabyte sind. Das wurde bei den Wahllokal-Stimmen teilweise sehr knapp.
Außerdem mussten die unterschiedlichen Tabellen aufeinander abgestimmt werden. Dafür wurden eindeutige IDs für die zwölf Bezirke, 78 Wahlkreise und 1736 Wahllokale vergeben. Diese atomare Datenhaltung ermöglichte später eine beliebige Kombination aller Tabellen und Daten,

2. Excel-Tabellen in Google Fusion Tables importieren und verbinden

Fusion Tables - Datenhaltung

Fusion Tables - Datenhaltung

Um die Tabellen ins Netz zu bringen, wurde das Datenmanagement-Tool Google Fusion Tables eingesetzt. Die Besonderheit bei Fusion Tables ist, dass Geodaten in den Tabellen (Adressen oder KML-Polygone) dynamisch auf einer Google Map dargestellt werden.
Nachdem ein Google-Account erstellt wurde, konnten die vorbereiteten Excel-Tabellen mit einem Klick in Fusion Tables importiert werden. Im nächsten Schritt wurde bestimmt, welche Spalten Geodaten für die Visualisierung, wo Texte und wo Zahlen stehen. Dann mussten die Tabellen nur noch sinnvoll (z.B. Wahllokal-Adressen-Tabelle und Stimmen-in-den-einzelnen-Wahllokalen-Tabelle) miteinander verknüpft (merge) und unter neuem Namen abgespeichert werden und die Sichtbarkeit von „private“ auf „unlisted“ bzw. „public“ gestellt werden.

3. Geodaten visualisieren, Polygone zeichnen und Infofenster bearbeiten

Fusion Tables erstellt automatisch für jede Adresse einen Punkt auf einer Google-Karte. Die Symbole dafür können aus einer kleinen Liste gewählt werden oder dynamisch anhand von Werten einer Tabelle (z.B. über 50 Prozent = rote Punkte, unter 50 Prozent = grüne Punkte) dargestellt werden.

KML-Polygone - Wahlkreise

KML-Polygone - Wahlkreise

Für die Wahlkarte sollten darüberhinaus aber auch die Berliner Bezirke und Wahlkreise mit ihrem exakten Grenzverlauf auf der Karte zu sehen sein, und die Bereiche dynamisch anhand von Tabellenwerten eingefärbt werden. Da diese Geodaten – im Gegensatz zu den 96 Berliner Ortsteilen – nirgends als KML-Daten zur Verfügung standen, mussten sie manuell eingezeichnet werden.
Die Bezirke und Wahlkreise wurden mit einem freien Tool Punkt für Punkt eingezeichnet und die Daten aus dem Polygon-Tag im KML kopiert und in die entsprechende Fusion Table als „Location“ eingefügt.
Fusion Tables bietet umfangreiche Tools zur Erstellung so genannter Heatmaps, also Karten auf denen bestimmte Teile anhand von Tabellenwetten mit Farbverläufen (z.B. viele Arbeitslose = dunkel, wenig Arbeitslose = hell) dargestellt werden können.

Chart Tools - Diagramme

Chart Tools - Diagramme

Ein weiterer grundlegender Bestandteil der Wahldaten-Visualisierung war die Darstellung aller abgegebenen Stimmen auf Wahllokal, Wahlkreis und Bezirksebene in detaillierten Infofenstern. Fusion Tables bietet hierfür die Möglichkeit, Tabellendaten in diesen Infofenstern dynamisch und per HTML und CSS anzuzeigen.
Um das dynamische Kuchendiagramm in den Infofenstern darzustellen, wurden zusätzlich die Google Image Chart Tools eingesetzt. Damit konnten dynamisch Kuchen- und Balkendigramme mit entsprechenden Wahlergebnissen angezeigt werden. Die Ergebnisse in Rohform wurden per einfachem HTML in die Infofenster eingebunden.

4. Layout und Steuerung um die Google-Karte erstellen

Der mit Abstand aufwendigste Part war die Präsentation und der Aufbau einer dynamischen Steuerung der Wahlkarte.

FT-Builder - Grundgerüst

FT-Builder - Grundgerüst

In einem ersten Schritt kam das sehr hilfreiche Tool Fusion Tables Builder zum Einsatz. Damit lassen sich die initialen Layer (z.B. Alle Wahllokale) aus einer Tabelle auf einer Google-Karte darstellen. Zudem können dort Größe, Style, Startpunkt etc. Festgelegt werden. Der daraus entstandene Quellcode diente als Ausgangspunkt für die Wahlkarte.

Das Gerüst der Karte wurde komplett mit CSS verwirklicht. Die Karte wurde mit DIV-Elementen in vier Teile gegliedert: Den Karten-Hauptbereich, den Karten-Steuerungsbereich oben, die Wahllokal-Parteien-Steuerung links sowie die Bezirke-/Wahlkreis-Steuerung im unteren Bereich.
Das Styling der Karte wurde vorwiegend mit dem Google Styling Wizard vorgenommen. Dieser erlaubt es, beinahe alle Karten-Elemente farblich anzupassen bzw. ein- und auszublenden.

Wie die weiteren Features entstanden soll im Folgenden kurz dargestellt werden:

Die Adressuche wurde mithilfe der Google-Maps-Geocoding-API realisiert. Vorteilhaft dabei: Die Google-Suche ist sehr stark und kennt eigentlich alle Orte in Berlin.

Für die Abfrage der 100 Wahllokale, in denen die jeweiligen Parteien gepunktet haben, kam die Fusion Tables SQL API zum Einsatz. Bei Klick auf die gewünschte Partei wird per Javascript ein String als Parameter übergeben. Anhand des Werts dieses Parameters (z.B. „SPD“) wird die Abfrage gestartet, die die Spalte „SPD“ in der entsprechenden Tabelle mit den höchten Werten absteigend ausliest und dabei nur die ersten 100 Werte ausgibt -also „SELECT Location FROM Wahllokale ORDER BY ‚SPD‘ DESC LIMIT 100“.

API-Dokumentation - Hilfe

API-Dokumentation - Hilfe

Die Rangliste aller Ergebnisse in Tabellenform wurde – ähnlich der Diagramme in den Infofenstern – mit den Google Chart Tools umgesetzt. Die Daten dafür kommen aus einer Tabelle, die in Google Spreadsheet abgelegt wurde. Auch das Diagramm mit den Ergebnisse der Berlin-Wahlen seit 1950 wurden damit erstellt.

Die Legenden auf der Karte wurden mit HTML und Javascript nach einem von Google bereit gestellten Beispiel erstellt.

Die gesamte Berlin-Wahlkarte wurde dann im letzten Schritt als Iframe in das Content Management System der Berliner Morgenpost eingebunden.

Auch wenn der Arbeitsaufwand für die Erstellung der Karte hoch war und viel Zeit und Nerven gekostet hat, waren wir immer wieder erstaunt darüber, wie wir als Nicht-Programmierer alle Skripting-Probleme irgendwie gelöst bekommen haben und Dank einer einwandfreien API-Dokumentation seitens Google und Hilfe in verschiedenen Foren immer zum Ziel gekommen sind.

Wer sich in die Grundlagen der Programmierung einlesen möchte, dem seien die W3Schools Tutorials, die Codeacademy und diese Linkliste ans Herz gelegt.

Update (22.09.11):
Diese Fusion Tables kommen in der Berlinwahlkarte zum Einsatz:

Update 2 (26.09.11):
Hier wird unsere Karte erwähnt:

Update 3 (30.09.11)

Update 4 (15.03.12)

Update 5 (26.03.12)

Weiterführende Links und Inspirationsquellen: