Kategorie-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

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

Bundestagswahl 2013 – Wie wir unsere Online-Formate umsetzen

Vor und nach der Bundestagswahl 2013 hat die Berliner Morgenpost einige reine Online-Formate veröffentlicht. Wir haben dabei wieder mit Tools und Web-Techniken experimentiert. Wir wollen das, was wir dabei gelernt haben, teilen – und veröffentlichten daher an dieser Stelle Werkstattberichte und Tutorials.

23.09.2013: Berlinwahlkarte 2013 – Alle Ergebnisse der 1709 Berliner Wahllokale

Nach unserer interaktiven Karte zur Berliner Abgeordnetenhauswahl 2011 haben wir (André Pätzold und Julius Tröger) zur Bundestagswahl 2013 eine Neuauflage unter berlinwahlkarte2013.morgenpost.de erstellt. Wir haben aus unserer ersten Berlinwahlkarte gelernt und unsere 2013-Version rundumerneuert. Das wurde unter anderem möglich, weil Web-Entwickler Moritz Klack unser kleines Team verstärkte und maßgeblich am Erfolg der Karte beteiligt war.

Gewinner, Verlierer, Statistiken: Unsere Karte mit allen Wahllokal-Ergebnissen

Gewinner, Verlierer, Statistiken: Unsere Karte mit allen Wahllokal-Ergebnissen

Zwei Tage nach der Wahl dürfen wir uns über mehr als 14.000 Facebook-Likes, unzählige Tweets und überwältigende Zugriffe freuen. Vor allem die immer noch vorhandene Teilung Berlins beim Wahlverhalten war für viele neu und ein großes Thema in Tweets aus den unterschiedlichsten Ländern.

Die neue Karte zeigt wieder jede in den Berliner Wahllokalen abgegebenen Erst- und Zweitstimme. Und das in der im deutschen Wahlrecht kleinstmöglichen und somit detailliertesten Einheit, der Stimmbezirksebene. Sie zeigt tatsächlich nur, wie in den 1709  Berliner Wahllokalen am Sonntag abgestimmt wurde. Die Daten dazu kamen gegen 3 Uhr in der Wahlnacht. Vor allem bei der Wahlbeteiligung ergeben sich so sehr niedrige Werte. Wir haben uns für diese Darstellung entschieden, da wir so die Ergebnisse sehr detailliert auf Kiezebene zeigen können. Briefwahlbezirke (568) sind deutlich gröber gefasst, die Briefwahlstimmen lassen sich nicht einfach auf die Wahllokale verteilen. Wir arbeiten jedoch an einer Darstellung, bei der die Briefwähler zum endgültigen Ergebnis zusätzlich berücksichtigt werden. (Werden wir in dieser Wahlkarte doch nicht mehr umsetzen.)

Responsiv-Konzept: Nur das nötigste

Responsiv-Konzept: Nur das nötigste

Darüber hinaus zeigen wir die Hochburgen der Parteien und statistische Auswertungen aus eigenen Abfragen („Wo die Wechselwähler leben“) und Wahlstrukturdaten („Wo die ältesten leben“).
Außerdem ermöglichen wir mit Deep-Links jeden Zustand der Karte zu teilen und somit etwa in den Texten unserer Wahl-Nachberichterstattung direkt auf einzelne Aspekte der Karte einzugehen.
Des Weiteren ist die Karte diesmal nicht in unser Standard-Layout gepresst, sondern für eine Vollbild-Ansicht optimiert. Sie passt sich responsiv an alle Bildschirmgrößen an. So kann sie sowohl auf Tablets optimal betrachtet werden, als auch auf großen Monitoren, wo die Karte voll zur Geltung kommt.

Weniger Google – mehr QGIS und GDAL

Die 2011er-Version haben wir noch vorwiegend mit Google-Tools wie Fusion Tables und Charts umgesetzt. Das lag vor allem am mangelnden Programmier-Verständnis. Dieses Jahr nutzen wir zwar noch die Google-Karte und den –Geocoder (der kostenlos ist, aber nur für Google-Karten). Fusion Tables setzen wir aber nur noch an einer Stelle ein: Mit der SQL-Api und der Methode ST_INTERSECTS kann man nämlich herausfinden, ob ein Punkt in einem Polygon liegt. So steuern wir etwa die Stimmbezirk-Zuordnung, nachdem Nutzer ihre Adresse eingeben.

Shape-Umwandlung mit QGIS

Shape-Umwandlung mit QGIS

Im Gegensatz zu 2011 konnten wir dieses Jahr unter ganz anderen Voraussetzungen arbeiten. Nicht nur war Web-Entwickler Moritz Klack an Bord. Die Berliner Landeswahlleiterin stellte uns diesmal auch ein Shapefile bereit, das Polygone für jeden der 1709 Stimmbezirke enthält – 2011 mussten wir die Wahlkreise noch von Hand nachzeichnen. Das Shapefile enthält neben den Stimmbezirken auch die Wahlbezirke. Um diese daraus zu extrahieren, haben wir die hervorragende Software Quantum GIS (QGIS) eingesetzt. QGIS ist gerade in der Version 2.0 erschienen.

Shape-Vereinfachung: Hinten: Original. Vorne: Punkte halbiert

Shape-Vereinfachung: Hinten: Original. Vorne: Punkte halbiert

Die von uns gewählte, detaillierte Darstellung bereitete uns aber auch Probleme, da das Original-Shapefile aus beinahe 100.000 Geo-Koordinaten besteht. Zwar waren die Stimmbezirke so auf den Meter genau, die Performance der Karte litt aber deutlich. Deshalb mussten wir die Polygone vereinfachen. Um Geoformate umzuwandeln kann GDAL (für Mac am besten GDAL_Complete bei KyngChaos downloaden) etwa mit dem ogr2ogr-Befehl im Terminal eingesetzt werden. In unserem Fall nutzten wir den Befehl „ogr2ogr output.shp input.shp -simplify 7“. So konnten wir die Punkte in unserem Shapefile nach einigem hin- und herprobieren ohne wirklich sichtbare Qualitätseinbußen mehr als halbieren und die Geschwindigkeit der Karte deutlich steigern. (Siehe Update weiter unten!)

Probleme hatten wir auch mit Apple-Produkten: Kurz vor der Veröffentlichung der Karte launchte Apple iOS 7. Nach ersten Tests unserer Karte mit dem neuen Betriebssystem wurde schnell klar, dass die neuste Safari Version offensichtlich starke Probleme mit intensiven Javascript-Applikationen hat. Die Erstellung der 1709 Polygone der Stimmbezirke brachte den neuen Browser zum abstürzen. Auf alten iOS-Versionen funktioniert das hingegen problemlos. Der neue Safari hat tatsächlich noch einige Bugs, die das Nutzen vieler aktueller Technologien unmöglich machen. Wir mussten für iOS-7-Nutzer also eine Fallback-Variante erstellen, die die Nutzung etwas einschränkt.

Tools für die Arbeit mit (Geo-)Daten

Neben QGIS und GDAL kamen für die Berlinwahlkarte weitere Tools wie Shape Escape (Import von Shapefiles zu Fusion Tables), CartoDB (Export in verschiedene Datenformate), GeoJSON.io (Einfache Bearbeitung von Geodaten) sowie Mr. Data Converter und Open Refine (Umwandlung von Tabellen in JSON-Format) zum Einsatz. Viele Daten, etwa die jeweiligen Partei-Hochburgen, haben wir direkt in den Quellcode geschrieben werden in kleinen Datenhappen nachgeladen um Ladezeiten zu vermeiden. Kartentools wie LeafletMapboxTilemillStamen und TopoJSON kamen diesmal nicht zum Einsatz, wollen wir uns aber für künftige Projekte genauer ansehen.

Excel zu JSON: Tool: Mr. Data Converter

Excel zu JSON: Tool: Mr. Data Converter

Weil wir viel mit Geodaten hantierten, bekamen wir auch ein Grundverständnis von Karten-Projektionen. Geodaten bestehen grundsätzlich aus einer Menge von Koordinatenpaaren. Da die Erde eine Kugel ist, wir aber mit flachen Karten arbeiten, muss jeder Punkt auf der Erde daher umgerechnet werden. Dafür gibt es etliche Bezugssysteme. Der Quasi-Standard, den etwa Open Street Maps oder Google nutzen, ist die Web-Mercator-Projektion (EPSG: 3857, WGS84). Wenn man also ein Shapefile bekommt, sollte als erstes die richtige Projektion sichergestellt werden. Hatten wir Fragen, wurde uns immer unter gis.stackexchange.com sehr schnell weitergeholfen.

Mischung aus Abstrakt- und Detaildarstellung

Beispiel SVG-Karte ohne Details

Beispiel SVG-Karte ohne Details

Immer wieder wird darüber debattiert, ob man detaillierte Karten mit Straßenverläufen, Flüssen etc. oder eher abstrakte Darstellungen wie etwa lediglich mit Umrissen der Ortsgrenzen (z.B. SVG-Darstellung bei ) verwenden soll. Wir sind der Meinung, und das hat sich nach zahlreichen Tests unserer Berlinwahlkarte bestätigt, dass sich Nutzer sehr wohl an Straßen, Flüssen, Parks orientieren, um ihr Haus zu finden. Aber nur in einer nahen Zoomstufe. Als Übersicht sind Straße und Co. tatsächlich eher störend. Wir haben uns also entschieden, den Kartenstil je nach Zoomstufe anzupassen. Allgemein haben wir in Sachen Usability immer die Heuristiken von Molich und Nielsen im Blick gehabt, und versucht, möglichst viel davon umzusetzen (Konsistenz, sofortiges Feedback auf Nutzereingaben, „Less is more“) .

Update/Ergänzung 16.10.2013:

Wir haben ein Update der Karte eingespielt. Einerseits haben wir nun die endgültigen Wahlergebnisse eingepflegt und kleine Bugs behoben (z.B. „.“ statt „,“ bei manchen Dezimalzahlen). Andererseits haben wir aber die Hinweise von Jeremy Stucki und Ralph Straumann aufgegriffen und die Polygone der Stimmbezirke neu umgerechnet und hochgeladen.

Fehlerhafte Topologie nach GDAL Simplify

Fehlerhafte Topologie nach GDAL Simplify

Wie im Blogpost oben beschrieben, mussten wir die 1709 Polygone der Stimmbezirke vereinfachen, da es bei den vielen Tausend Punkten zu Performance-Problemen kam. Wir haben die Anzahl der Punkte also mit einem GDAL-Befehl halbiert. Das funktionierte soweit auch super. Allerdings wurde so die Topologie zerstört, in großen Zoomstufen konnte man Lücken oder Überlappungen zwischen den Stimmbezirken erkennen. Für uns war das ein notwendiges Übel und beschlossen daher, das so umzusetzen.

Die beiden Geo-Experten Jeremy Stucki und Ralph Straumann hatten uns allerdings direkt nach der Veröffentlichung des Blogbeitrags darauf hingewiesen, dass das viel besser geht. Vielen Dank an dieser Stelle noch einmal für die Hilfe – das zeigt einmal mehr, wie sich die Datenjournalismus-Community gegenseitig hilft. Nach Rücksprache möchte ich natürlich auch hier teilen, was Jeremy per Mail schrieb:

Da du ja GDAL schon installiert hast, ist das einzige, was du noch brauchst Node.js. Am einfachsten installierst du TopoJSON dann übers Terminal:

npm install -g topojson

Und dann wandelst du ein Shapefile so um:

topojson -p –simplify 2e-9 — in.shp > out-topo.json

Der -p Parameter stellt sicher, dass die Attribute (Name, Nummer etc.) mitkopiert werden, –simplify gibt an wie stark du vereinfachen willst, d.h. die Flächengenauigkeit in Steradianten. 2e-9 ist der Wert, den ich für die Schweiz verwende, das kannst du also eher ein bisschen grösser wählen, da musst du etwas experimentieren. Als Alternative kannst du auch –simplify-proportion angeben, damit bestimmst du einfach, wie viele Punkte du schliesslich haben willst. 50% der Ausgangspunkte ist also –simplify-proportion 0.5.

Es gibt noch viel mehr Optionen, nachzulesen unter https://github.com/mbostock/topojson/wiki/Command-Line-Reference

Um dann wieder ein GeoJSON zu kriegen:

geojson –precision 3 -o out-verzeichnis — in-topo.json

Beispiel mit precision 3: Für Berlin-Details zu gering

Beispiel mit precision 3: Für Berlin-Details zu gering

in-topo.json ist dabei die TopoJSON-Datei, die du vorher erstellt hast. –precision gibt dabei an, wie viele Nachkommastellen du in deinen GeoJSON-Koordinaten haben willst. Je weniger, desto ungenauer, aber kleiner die Datei. -o gibt das Verzeichnis an, wo das GeoJSON erstellt wird (oder werden, weil eine TopoJSON-Datei auch mehrere Layer beinhalten kann).“

Nach einigem hin- und herprobieren rechneten wir die 1709 Stimmbezirks-Polygone als TopoJSON mit simplify-proportion 0.5 und als GeoJSON wiederum mit precision 4 heraus. Vor allem bei letzterem sind drei Koordinaten-Nachkommastellen für die detaillierten, kleinen Polygone zu grob. Das Endergebnis kann sich nun wirklich sehen lassen. Für eine GeoJSON-Datei, die gerade einmal 644KB groß ist, ist der Detailgrad immer noch ausreichend hoch und die Topologie bleibt erhalten.

13.09.2013: Scrollbare Infografik – die Berliner Parteien in Zahlen

In der Printausgabe der Berliner Morgenpost haben wir (Christian Schlippes, Karin Sturm, Joachim Fahrun und Julius Tröger) zwischen dem 9. und 14. September sechs ganzseitige Infografiken veröffentlicht. Sie zeigen für Berlin relevante Zahlen der sechs Parteien, die derzeit im Deutschen Bundestag oder im Berliner Abgeordnetenhaus sitzen, CDU, Linke, SPD, Grüne, Piraten und FDP. Welche Partei verliert am meisten Mitglieder – welche gewinnt wie viele hinzu? Wer wählt die Parteien? Wie viel steht zu den wichtigen Berliner Themen in den Wahlprogrammen? Wie hoch sind die Wahlkampfbudgets? Die Grafiken geben Antworten auf diese und weitere Fragen.

Scroll-Infografik - Die Berliner Parteien in Zahlen

Scroll-Infografik – Die Berliner Parteien in Zahlen

Am letzten Tag der Serie veröffentlichten wir diese Grafiken auch online. Allerdings nicht 1:1. Wir stellen sie in einer aufwendigen, scrollbaren, animierten Infografik dar. Wir entschieden uns dafür, weil die komplexe Datenvisualisierung dadurch in kleinere Aufmerksamkeits-Abschnitte unterteilt werden kann. Im Gegensatz zur Zeitungsversion ist es dabei auch möglich, die Parteien untereinander zu verglichen.

Technisch kamen dabei keine Scroll-Bibliotheken wie SkrollrSupercrollorama oder Stellar.js zum Einsatz. Deren Schnittstellen waren für unseren speziellen Fall nicht ausreichend. Interaction-Designer und Programmierer Markus Kison ließ sich per Javascript einfach die Stelle ausgeben, bis zu der der Nutzer jeweils scrollte. Aufgrund dieses Wertes wurden dann zwischen bestimmten Fixpunkten Animationen abgespielt. Da die Grafiken bereits in Form von Illustrator-Dateien vorlagen, wurden sie auch nicht komplett in SVG-Vektorgrafiken umgebaut, sondern teils als fertig GIF-Datei in den Hintergrund gelegt. An sinnvollen Stellen wurden dann SVG-Animationen mit Hilfe von D3 eingesetzt.

Einen Großteil der Zeit verbrachten wir am Ende mit dem Finetuning des Grafik-Verlaufs. Es stellte sich als größte Herausforderung heraus, einerseits den Spannungsbogen aufrecht zu erhalten, die Aufmerksamkeit immer auf das wichtigste Element zu lenken und allgemein einen stimmigen Scroll-Ablauf zu schaffen. Man sollte sich bei dieser Art von Infografik frühstmöglich ein Storyboard zurechtlegen.

Interessante Scroll-Grafiken kommen auch immer wieder vom Interactive-Team des Guardian US. Besonders eindrucksvoll ist ihr Jahresrückblick „2012 in America“, durch den man sich nur mit dem Mausrad/Touchpad bewegen kann.

02.09.2013: Interaktiver Stimmzettel – Welche 150 Kandidaten in Berlin zur Wahl stehen

Bei der Bundestagswahl 2013 stehen 150 Direktkandidaten in zwölf Berliner Wahlkreisen zur Wahl. Dabei können alle Berliner zwar denselben 17 Parteien ihre Zweitstimme geben. Die Kandidaten für die Erststimmen sind aber in jedem Wahlkreis unterschiedlich.

Vorab-Stimmzettel für Berlin

Vorab-Stimmzettel für Berlin

Jede Wahl, ob per Brief oder an der Wahlurne, wird mit zwei Kreuzen auf einem vorgegebenen Stimmzettel durchgeführt. Wir (André Pätzold, Anett Seidler, Moritz Klack und Julius Tröger) haben unseren Berliner Nutzern jeweils ihre persönlichen Zettel vorab originalgetreu nachgebaut und mit Zusatzinformationen (Fotos, Kontaktdaten, Themencheck) zu den Kandidaten und Parteien versehen.

Dabei erläutern wir auch Hintergründe wie etwa die Partei-Reihenfolge auf dem Stimmzettel. Die Linke steht nämlich nur deshalb vor der SPD, weil sie bei der Bundestagswahl 2009 exakt 579 Zweitstimmen mehr hatte. Darüber hinaus zeigen wir weitere Details wie die Vorjahresergebnisse in den jeweiligen Wahlkreisen und soziodemographische Daten der Kandidaten. Interessant ist dabei zum Beispiel, dass im Wahlkreis 76 (Pankow) keine einzige Frau als Direktkandidatin antritt. Da es bei der Wahl schließlich nicht nur um die Personen, sondern vor allem auch um Themen geht, haben wir den Kandidaten-Check von Abgeordnetenwatch integriert.

Die Kandidaten-Fotos erhielten wir auf Anfrage direkt bei den Pressestellen der Parteien. Der Stimmzettel wurde mit HTML, Javascript und CSS umgesetzt. Die Navigationskarte wurde als SVG integriert, die Karte mit den Kandidaten-Geburtsorten per Google-Maps-API. Der Stimmzettel ist auf der Startseite der Berliner Morgenpost prominent platziert. Der Artikel-Teaser soll dort bis 18 Uhr am Wahlabend stehen bleiben. Alle Stimmzettel sind per Deeplink teilbar. Eine Auswahl:

30.08.2013: Animated Gifs – die Gesten der Kanzlerkandidaten analysiert

Den Auftakt zu unseren Online-Only-Wahl-Geschichten machte die Analyse zu den Gesten von Angela Merkel und Peer Steinbrück im Vorfeld des TV-Duells. In Form von animierten Gifs haben wir je fünf Gesten der beiden Politiker gegenübergestellt und von Peter Ditko, dem Chef der Deutschen Rednerschule, analysieren lassen. Kollege Max Boenke und ich haben uns sehr über die überaus positive Resonanz gefreut.

Die Gesten von Angela Merkel und Peer Steinbrück - als animierte GIFs

Die Gesten von Angela Merkel und Peer Steinbrück – als animierte Gifs

Das Rohmaterial der Reden von Merkel und Steinbrück haben wir aus der Mediathek des Parlamentsfernsehens des Deutschen Bundestages heruntergeladen. Es darf mit Quellenverweis genutzt werden.

Die jeweils rund 20 bis 30 Minuten lange Reden haben wir in Final Cut Pro X auf entsprechende Gesten gesichtet, geschnitten und als MP4-Dateien exportiert. Diese kurzen Clips haben wir dann mit Gif Brewery (z.B. 4,49 Euro im Apple App Store) in animierte Gifs umgewandelt. Mit einem kleinen HTML– und CSS-Grundgerüst haben wir die Gifs und Texte dann in unser CMS integriert.

Im ersten Schritt werden Start- und Endpunkt des Clips ausgewählt (das Zuschneiden vorab erleichtert diesen Schritt – zudem überfordert man Gif Brewery nicht mit einer zu großen Ausgangsdatei). Unter „Properties“ wird der „frame count“, also die Bilder pro Sekunde, und der „frame delay“ eingestellt. Damit die Gifs flüssig abspielen, haben wir uns für die vollen 25 Frames pro Sekunde entschieden. Viele animierten Gifs im Netz laufen aber auch schon mit rund 15 fps halbwegs flüssig. Den „frame delay“ haben wir mit 100 ms festgelegt.

Gifs erstellen mit Gif Brewery

Gifs erstellen mit Gif Brewery

Für die weitere Bildbearbeitung sind zwei Schritte nötig: croppen (beschneiden) und re-sizen (Größe anpassen). Zuerst wird ein Bildausschnitt gewählt und gecropt, dann wird das Bild durch eine manuelle Eingabe von Höhe und Breite in Pixel heruntergerechnet. In unserem Fall sind so Gifs mit einer Breite von 210 Pixeln und einer Größe von etwa 500 Kilobyte entstanden.

Genau darin liegt aber auch das Problem von Animated Gifs. Sie werden zwar in jedem Browser ohne Plugin nativ dargestellt (im Gegensatz etwa zu Flash-Videos). Sind benötigen aber viel zu viel Speicherplatz. Das so genannte Graphics Interchange Format ist nämlich lediglich ein Bildformat mit verlustfreier Kompression. Die Dateien sind also viel größer als etwa JPEG-Bild-Dateien oder H.264-Video-Dateien, die mit verlustbehafteter Kompression arbeiten.

Die New York Times etwa hat auch schon einige Male mit kurzen, geloopten Videosequenzen in Artikeln experimentiert. Sie zeigen statt Animated Gifs aber einfach normale Videos, die sie per HTML5-Videotag mit autoplay und abgeschalteten controls abspielen. Diese Videos sind deutlich kleiner und laden schneller. Allerdings müssen HTML5-Videos in mehreren Dateiformaten exportiert werden, da nicht alle Browser alle Videoformate abspielen. Dieser Aufwand war uns zu groß, da wir nur drei Tage Zeit hatten. Außerdem hält sich die Größe bei den rund zweisekündigen Clips noch in Grenzen. Wir haben uns daher für „richtige“ animierte Gifs entschieden.

 

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:

Digitaler Werkzeugkasten für Journalisten

Stöbert man in deutschen Nachrichtenportalen, so findet man hier und da journalistische Darstellungsformen, die mit freien Web-Tools realisiert wurden. Auch Blogs und nicht-kommerzielle Angebote nutzen digitale Hilfsmittel, um Geschichten zu erzählen und zu verbreiten.

Web-Tools erweitern die oft unflexiblen Redaktionssysteme um multimediale Funktionen, mit denen sich die Darstellung von Text, Bild, Audio und Video kombinieren lässt.

Auch können die im Folgenden vorgestellten, kostenlosen Tools dabei helfen, redaktionelle Arbeitsabläufe zu erleichtern und die vielfältigen Kommunikationskanäle plattformübergreifend im Netz zu bedienen.

Das Netz bietet eine unüberschaubare Anzahl an solchen Tools. In diesem Blogbeitrag sollen die derzeit am häufigsten genutzten und interessantesten digitalen Werkzeuge mit gelungenen Beispielen, Tutorials und Beiträgen von Experten kurz vorgestellt werden.

Hinweis: Die Liste besteht aus einer subjektiven Auswahl von Web-Tools. Sie soll lediglich einen Überblick verschaffen und Startpunkt für eine vertiefende Beschäftigung mit den Werkzeugen sein. Für eine detaillierte und übersichtliche Darstellung wurde ein Wiki aufgesetzt, das sich zurzeit noch in Arbeit befindet. (Aufgrund von Spam vorerst geschlossen) Hinweise zu weiteren Tools, Praxisbeispielen oder ergänzende Beschreibungen werden gerne entgegengenommen.

Grundausstattung

Grundsätzlich ist es ratsam, Zugänge zu Facebook, Twitter und Google anzulegen. Um manche Tools zu nutzen, werden Zugangsdaten von sozialen Netzwerken benötigt.

VLC-Player

Mit dem Multimedia-Player von Videolan lassen sich so gut wie alle Audio- und Videodateien abspielen. Das Programm installiert zusätzlich eine Menge aktueller Codecs, die standardmäßig nicht auf allen Rechnern vorhanden sind.

Beispiel VLC Player

Beispiel VLC Player

Konkrete Anwendung im Newsroom: Ist der VLC-Player installiert, lassen sich beinahe alle Video- und Audiodateien abspielen. Videomaterial von Flip-Kameras etwa wird erst problemlos dargestellt, wenn der passende Codec auch installiert ist.
So funktioniert das Tool:
Nach dem Download und der Installation steht ein neuer Videoplayer zur Verfügung. Auch werden die bereits installierten Player um neue Codecs erweitert. Detailliertere Erklärungen gibt es im VLC-Wiki

  • Hier gibt es das Tool: http://bit.ly/tools_vlc
  • Tool läuft auf diesen Endgeräten: Windows, Mac, App für iPad, iPhone, Android

Filezilla

Über das File Transfer Protocol (FTP) werden Daten auf (Web-)Server übertragen. Filezilla ist ein FTP-Client, über den Dateien von einem Rechner auf einen solchen Server übertragen werden können.

Beispiel Filezilla

Beispiel Filezilla

Konkrete Anwendung im Newsroom:Vor allem Videomaterial wird oft nur per FTP transferiert. Anbieter oder Kunden nennen dann IP-Adresse, Login-Namen und Passwort. Dateien können mit Filezilla heruntergeladen und auch hochgeladen werden. Ein gemeinsamer FTP-Server für die Redaktion ist sinnvoll.
So funktioniert das Tool:
Nach der Installation müssen die Serverdaten unter „Neuer Server“ -> „Verbindungen“ eingetragen werden. Aufgrund von Proxy- oder Firewall-Einstellungen funktioniert das nicht immer auf Anhieb. Der Technik-Kollege hilft dabei bestimmt. Filezilla bietet auf seienr Webseite einen Schnelleinstieg.

Dropbox

Dropbox ist ein Tool, um Dateien unabhängig vom Rechner in der „Cloud“ zu speichern, von überall darauf zugreifen zu können und mit anderen zu teilen. Im Netz existieren zwar Tools wie Yousendit – Dropbox ist aber meist schneller und besser handhabbar.

Beispiel Dropbox

Beispiel Dropbox

Konkrete Anwendung im Newsroom:Oft kommt es vor, dass große Dateien versendet werden müssen (Audio und Video), die per E-Mail zu groß sind und der Gegenüber keine Möglichkeit eines FTP-Transfers (s.o.) hat. Der große Vorteil gegenüber FTP: Um Dateien von Dropbox herunterzuladen braucht der Gegenüber selbst das Tool nicht. Sinnvoll ist ein redaktionsinterner Dropboxfolder für gemeinsame Dateien, die von überall schnell abrufbar sein sollen.
So funktioniert das Tool:
Nach der Installation und der Anmeldung bei Dropbox können Dateien in die „Cloud“ geladen und per Direktlink an andere Leute verschickt werden. Detaillierte Erklärungen gibt es im Dropbox-Wiki.

  • Nachteile des Tools: Das Tool ist nur bis zu einem Datenvolumen von zwei Gigabyte kostenlos. Zwar kann das durchaus ausreichen – wer es aber sehr häufig nutzt, muss etwas zahlen.
  • Hier gibt es das Tool: http://bit.ly/tools_dropbox
  • Tool läuft auf diesen Endgeräten: Windows, Mac OSX, App für iPad, iPhone, Android

Multimedia-Produktion – Audio

Audiodateien können prinzipiell einfach mit einem HTML-Tag in einen Text implementiert werden. Dafür müssen die Audiodateien aber erst codiert und auf einen Server hochgeladen werden. Es gibt Tools, die vereinfachen diese Arbeitsschritte:

Audacity

Audacity ist ein Tool, um Audiodateien zu bearbeiten. In seinem Funktionsumfang steht es professioneller, kostenpflichtiger Software kaum nach und lässt sich mit zusätzlichen Plugins erweitern.

Beispiel Audacity

Beispiel Audacity

Konkrete Anwendung im Newsroom: Mit Audacity können alle Arten von Audiodateien geschnitten und auf mehreren Spuren nachbearbeitet werden. Das Tool verfügt über eine Vielzahl von Filtern, wie Kompressoren oder Rauschfilter, mit denen die Audiodateien überarbeitet werden können. Die fertigen Dateien lassen sich in eine Vielzahl gängiger Audioformate exportieren.
So funktioniert das Tool:
Um nach dem Schnitt MP3s zu exportieren, muss der Lame Encoder installiert sein. Eine Anleitung gibt es im offiziellen Handbuch oder in diesem Youtube-Tutorial.

Soundcloud

Souncloud ist ein Tool, um Audiodateien auf eine Plattform zu laden und diese zu verwalten und embedden zu können. Soundcloud schließt eine Lücke. Es ist so etwas wie das YouTube für Audio. Vorgestellt von Marcus Bösch // Deutsche Welle

Beispiel Soundcloud

Beispiel Soundcloud

Konkrete Anwendung im Newsroom:Soundcloud eignet sich sehr gut als Audioplayer bei einfachen multimedialen Darstellungen wie zum Beispiel Text und Audio bzw. Bild und Audio. Dabei nutzt Soundcloud das Embed-Prinzip.
So funktioniert das Tool:
Nach der Anmeldung können Audiodateien per Browser oder Mobilgerät hochgeladen werden. Soundcloud bietet Forum, FAQ und Gebrauchsanweisung. Außerdem ist es sinnvoll, Daniel Noel bei Tumblr zu folgen. Er nennt sich „Soundcloud´s Community Evangelist“.
Nachteile des Tools:
Soundcloud kostet Geld. Zumindest wenn man es regelmäßig nutzen möchte. Der embeddbare Player gefällt trotz der beschränkten Möglichkeit zur inidividuellen Anpassung lange nicht allen. Außerdem ist eine Bearbeitung der Audios nicht möglich.

Aviary

Aviary ist eine Sammlung von Online-Tools, die komplett im Browser benutzt werden können. Die Sammlung beinhaltet ein Tool zur Bildbearbeitung, ein Vektoren-Tool sowie einen Audio-Editor und ein Tool, um eigene Musik zu erstellen.

Beispiel Aviary

Beispiel Aviary

Konkrete Anwendung im Newsroom:Mit einem der Tools aus der Sammlung, dem „Roc Music Creator“, lassen sich mit vorgegebenen Sounds kleine Melodien oder Loops erstellen, die etwa als Hintergrundmusik für ein Video eingesetzt werden können. Wer gerade keine passende Gemafreie oder Musik unter CC-Lizenz, bzw. freie Sounds zur Verfügung hat, für den könnte der Roc Music Creator eine Alternative darstellen.
So funktioniert das Tool:
Nach der Anmeldung können alle Aviary-Dienste genutzt werden und die Ergebnisse in eine Vielzahl von Formaten direkt auf den Rechner exportiert werden.

Multimedia-Produktion – Video

Auch Videodateien lassen sich etwa per HTML-5-Tag direkt in einen Text einfügen. Aber auch hier geht dem ein langwieriger Prozess voraus. Und dabei existieren zahlreiche Tools, die diese Arbeit abnehmen.

Für Mac-Nutzer seien grundsätzlich die beiden Tools Flip4Mac, einem Tool, das Quicktime um Windows Media Komponenten erweitert und Perian, einem weiteren Tool, das Quicktime um zusätzliche Videokomponenten erweitert:

MPEG Streamclip

Im Netz existiert eine Unmenge von Tools, um Audio- und Videoformate zu konvertieren. Das wohl meistgenutzte mit der einer der simpelsten Oberfläche und großem Funktionsumfang stellt das Freeware-Tool MPEG Streamclip dar.

Beispiel MPEG Streamclip

Beispiel MPEG Streamclip

Konkrete Anwendung im Newsroom: Audio- und Video-Dateien müssen häufig entweder in ihrer Größe reduziert oder in ein vorgegebenes Format umgewandelt werden. Für beide Fälle ist MPEG Streamclip geeignet und kann sowohl Einzelfiles als auch mehrere Files in einer Stapelverarbeitung mit entsprechenden Presets umwandeln. Außerdem können Videos gekürzt werden, wenn auf die Schnelle kein Videoschnittprogramm zur Verfügung steht.
So funktioniert das Tool:
Nach der Installation müssen lediglich die gewünschten Export-Einstellungen eingetragen und werden. Dabei können einzelne Files (Ablage -> Exportieren) oder mehrere Files (Listen -> Aufgabenliste) gleichzeitig konvertiert werden. Voreinstellungen lasse sich mit Presets festlegen und bei Bedarf immer wieder aufrufen.

Mediainfo

Mediainfo liefert zusätzliche Informationen über Video- und Audiodateien. Mit dem Tool lassen sich technische Merkmale wie Auflösung, Codec oder Framerate auslesen.

Beispiel Mediainfo

Beispiel Mediainfo

Konkrete Anwendung im Newsroom:Manchmal fordern Schnittprogramme oder Dienste wie Youtube genaue Spezifikationen von Multimedia-Dateien. Sind diese bei einer vorliegenden Datei nicht bekannt, können diese Informationen mit Mediainfo ausgelesen werden und später ggf. passend umgewandelt (s.o.) werden.
So funktioniert das Tool:
Nach der Installation muss einfach die Videodatei in das Mediainfo-Fenster gezogen werden. Um an die umfassende Informatino zu gelangen, sollte die Darstellung Text (View -> Text) angewählt werden. Unklarheiten können im Mediainfo-Hilfeforum geklärt werden.

Youtube

Youtube kennt jeder. Nur wird die Video-Plattform von Verlagen meist unterschätzt. Ab einer gewissen Zahl an Abrufen lässt sich als „Youtube-Partner“ sogar Geld mit den eigenen Videos verdienen. Vorgestellt von Edward Black // Videojournalist und Berater

Beispiel Youtube

Beispiel Youtube

Konkrete Anwendung im Newsroom: Youtube ist nicht unbedingt ein Tool i.e.S., ist für Journalisten aber in diesem Zusammenhang neben der Eigenschaft als Video-Plattform vor allem als große Suchmaschine und Community interessant. Und wer dort mit eigenen Inhalten vertreten ist, erreicht Menschen, die sonst vielleicht nie die hauseigene Plattform besuchen würden. Inhalte dürfen nicht also versteckt werden, sondern müssen raus in die Welt verbreitet werden. Aber: Immer mit „Call to Action“ (z.B. Hier gibt es weitere Informationen), also Direktlinks zu weiterführenden Artikeln auf der eigenen Plattform prominent in der Kommentarbox eingefügen. Die Erfahrung zeigt, dass rund 40 Prozent der Nutzer in Youtube bei Interesse verlinkte vertiefende Informationen auf der eigenen Plattform außerhalb von Youtube nutzen.
Außerdem bietet Youtube die Möglichkeit, Videos direkt von mobilen Geräten hochzuladen und direkt in das eigene Angebot zu integrieren. Das ist vor allem für den Lokaljournalismus interessant.Youtube sollte als imagebildende Plattform gesehen werden, mit der neue Zielgruppen erreicht und sogar Geld verdient werden kann. Youtube lädt bei konstant hohen Besucherzahlen ins Youtube-Partner-Programm ein. Dann erhält man anteilige Werbeerlöse und kann Video in beliebiger Länge und Größe hochladen. Außerdem werden Youtube-Videos auf prinzipiell allen Endgeräten dargestellt, wo viele Videos außerhalb von Youtube nur im Flashplayer verfügbar sind.
Nicht zu unterschätzen ist auch der Video-Editor, der vor allem durch seinen gut funktionierenden Bildstabilisator glänzt.
So funktioniert das Tool:
Nach der Anmeldung mit einem Google-Account können direkt Videos hochgeladen, mit einer Überschrift, einer kurzen Zusammenfassung und Keywords versehen und auch direkt per Embed-Code in variabler Größe in die Angebote eingebunden werden. Dabei ist wichtig, die Funktion von Youtube als eine der größten Suchmaschinen in den Augen zu behalten, und die Videos ausreichend mit den passenden Stichwörtern zu umschreiben. Für Direktlinks auf die eigene Plattform kann der URL-Shortener bit.ly eingesetzt werden. Nur im Youtube-Partnerprogramm kann man zusätzlich eigene Thumbnails hochladen und Videos in unbegrenzter Größe und Länge eingestellt werden. Prinzipiell nimmt Youtube jedes Format und jeden Videocodec an. Zu empfehlen ist, die Videos in Full-HD (1080P) hochzuladen, da Youtube zunehmend auch am Fernseher genutzt wird.

  • Nachteile des Tools: Youtube ist sehr eingeschränkt nutzbar bei Standard-Accounts. Das Tool entwickelt sich erst im Partner-Programm. Dabei muss man warten, bis Youtube in dieses Partner-Programm einlädt. Acht geben muss man auch im Hinblick auf Rechte. Es dürften keine Videos hochgeladen werden mit Agenturmaterial oder gemapflichtiger Musik. Bei einer gewissen Anzahl an Abonennten wird es auch schwierig, die Kommentare zu pflegen. Daher sollten sie entweder zuerst moderiert werden oder täglich überprüft. Das ist zeitaufwändig. Werden Videos direkt von einem HD-Videohandy, wie dem iPhone 4 auf Youtube geladen, wird das Video sehr stark komprimiert und die Qualität leidet. Dem kann man mit einer App entgegenwirken. Den Upload ohne Kompression erlaubt die App 720Tube für iPhone4.
  • Hier gibt es das Tool: http://bit.ly/tools_youtube (Anmeldung mit Google-Account)
  • Beispiele des Tools aus der Praxis: Kanal von Spiegel TV, Kanal von US-Youtube-Star Mystery Guitar Man, auf eigener Plattform eingebundenes Youtube-Video im Interaktiven Marathon-Special der LA-Times, schnell veröffentlichtes Handyvideo als Ergänzung für Lokalberichterstattung.
  • Tool läuft auf diesen Endgeräten : Browserbasiert, App für iPad, iPhone, Android sowie zusätzlicher Apps in Settop-Boxen, Google TV

Pixelpipe

Mit Pixelpipe können Multimediadateien und Texte mit einem Klick auf eine Vielzahl von Social-Media-Plattformen verbreitet werden.

Beispiel Pixelpipe

Beispiel Pixelpipe

Konkrete Anwendung im Newsroom: Wenn man sich in alle sozialen Netzwerke und Tools manuell einloggen muss, kostet das viel Zeit. Pixelpipe bietet die Möglichkeit, Text oder Multimedia-Dateien in einer voreingestellten Auswahl von Netzwerken zu veröffentlichen. So können beispielsweise Fotos oder Videos per App gleichzeitig direkt auf Youtube, Facebook und Twitter veröffentlicht werden.
So funktioniert das Tool:
Nach der Anmeldung werden die entsprechenen Dienste, auf denen die Inhalte veröffentlicht werden sollen festgelegt. Das geschieht durch das Hinzufügen von Pipes. Man kann aus der riesigen Liste aus Social-Media-Kanälern wählen. Die Macher schreiben mehr dazu im Pixelpipe-Blog.

  • Nachteile des Tools: Die einmalige Einrichtung erfordert Zeit und eine grobe Strategie, da es keinen Sinn ergibt, Inhalte ohne zusätzliche Informationen zu veröffentlichten.
  • Hier gibt es das Tool: http://bit.ly/tools_pixelpipe (Anmeldung, auch mit Twitter-Account)
  • Tool läuft auf diesen Endgeräten: Browserbasiert, App für iPhone und Android

Moviemasher

Videojournalisten arbeiten vorwiegend mit Final Cut oder Adobe Premiere. Die Programme kosten mehrere Hundert Euro. Das hat aber auch seinen Grund. Für die professionelle Arbeit mit Video ist Schnittsoftware unabdingbar. Dennoch ist das Open-Source-Tool Moviemasher auf eine gewisse Art und Weise interessant. Es lässt sich in das eigene Online-Angebot integrieren.

Beispiel Moviemasher

Beispiel Moviemasher

Konkrete Anwendung im Newsroom: Der Einsatz von Moviemasher in Redaktionen ist denkbar, um eine Plattform zu schaffen, um die Nutzer zu integrieren. Die könnten dann etwa Mash-ups aus vorgegebenem Material erstellen.
So funktioniert das Tool:
Moviemasher muss heruntergeladen und auf einem Server installiert werden. Nach der Installation kann Moviemasher in das eigene Webangebot eingebunden und individualisert werden. Weitere Informationen liefert die Moviemasher-Dokumentation.

  • Nachteile des Tools: Die Installation und Einrichtung von Moviemasher ist bei weitem nicht trivial und sollte Technikern überlassen werden.
  • Hier gibt es das Tool: http://bit.ly/tools_moviemasher
  • Beispiele des Tools aus der Praxis: Das Museum of the Moving Image ruft unter The Living Room Canidate dazu auf, aus historischem Material, eigene Wahlwerbung zu schneiden.
  • Tool läuft auf diesen Endgeräten: Browserbasiert

Multimedia-Produktion – Foto

Pixlr

Um Bilder zu bearbeiten, benötigt man nicht unbedingt immer gleich Photoshop. Das browserbasierte Online-Tool Pixlr bietet viele Möglichkeiten der Bildbearbeitung.

Beispiel Pixlr

Beispiel Pixlr

Konkrete Anwendung im Newsroom: Häufig muss man Fotos nur kurz zurechtschneiden oder ein wenig bearbeiten. Dafür ist Pixlr vollkommen ausreichend. Darüber hinaus bietet das Tool auch professionelle Bildbearbeitungsmöglichkeiten wie Gradiationskurven.
So funktioniert das Tool:
Einfach im Browser die Seite aufrufen. Bilder können direkt eingeladen oder von Webseiten direkt per URLs eingelesen und danach lokal abgespeichert werden. Außerdem können Bilder direkt aus Facebook oder Flickr geladen werden. Weitere Informationen bieten die Pixlr-FAQ.

  • Nachteile des Tools: Pixlr unterstützt nur den RGB-Farbraum. Arbeiten für Printerzeugnisse sind daher nicht möglich.
  • Hier gibt es das Tool: http://bit.ly/tools_pixlr
  • Tool läuft auf diesen Endgeräten: Browserbasiert

Gimp

Gimp ist ein Open-SourceTool für Bildbearbeitung. Im Gegensatz zu Pixlr ist Gimp ein eigenständiges Programm, das erst auf dem Rechner installiert werden muss. Es umfasst mehr Funktionen und ist per Plugins erweiterbar.

Beispiel Gimp

Beispiel Gimp

Konkrete Anwendung im Newsroom: Gimp steht Photoshop in wenigen Punkten nach und kann umfassend für Bildbearbeitung eingesetzt werden. Funktionen, die in der Basisversion nicht vorhanden sind (z.B. CMYK-Umwandlung) können mit Plugins nachgerüstet werden.
So funktioniert das Tool:
Gimp lässt sich leicht installieren und wer Photoshop in Grundzügen kennt, findet sich auch gleich in Gimp zurecht. Die Macher bieten ein offizielles Benutzerhandbuch. Auf Youtube finden sich zahlreiche Tutorials.

  • Nachteile des Tools: Die Installation von Plugins ist nicht ganz einfach
  • Hier gibt es das Tool: http://bit.ly/tools_gimp
  • Tool läuft auf diesen Endgeräten: Windows, Mac

Thinglink

Thinglink erlaubt es, Fotos an bestimmten Stellen zu taggen und mit Links zu versehen. Stellt man es so ein, können auch User aktiv werden und die Bilder mit Tags versehen. Außerdem können verlinkte Audiodateien aus Soundcloud direkt aus dem Bild abgespielt werden.

Beispiel Thinglink

Beispiel Thinglink

Konkrete Anwendung im Newsroom: Bilder lassen sich mit zusätzliche Informationen versehen und entsprechende Stellen taggen und verlinken. Aus Bildern heraus kann man etwa auf weiterführende Artikel, die zum Inhalt des Bildes passen oder Twitter-Accounts, verlinken. Und man kann z.B. auf Details oder Personen auf Bildern hinweisen.
So funktioniert das Tool:
Nach der Anmeldung kann man einzelne Bild-URLs angeben und dann direkt taggen, verlinken oder Soundcloud-Dateien angeben. Wichtig ist, dass man einstellen kann, ob man nur selbst, oder alle User das Bild taggen dürfen. Thinglink hat auf Youtube ein Erklär-Video bereitsgestellt.

  • Nachteile des Tools: Über Thinglink lassen sich keine Bilder hochladen. Das Bild muss sich bereits im Netz befinden. Außerdem gibt es ab und zu Probleme mit den Tags – sie werden nicht immer angezeigt.
  • Hier gibt es das Tool: http://bit.ly/tools_thinglink (Anmeldung auch mit Facebook-Account)
  • Beispiele des Tools aus der Praxis: Details zum Situation Room der Berliner Morgenpost
  • Tool läuft auf diesen Endgeräten: Browserbasiert

Flickr

Flickr ist eine Art Youtube für Fotos. Das Tool gilt als eine der größten Foto-Communitys und bietet zahlreiche Möglichkeiten, Bilder darzustellen.

Beispiel Flickr

Beispiel Flickr

Dabei hilft das Tool im Newsroom: Ähnlich wie Youtube oder Soundcloud bietet Flickr einen weiteren Kanal, um Medieninhalte einem großen Publikum außerhalb der eigenen Plattform zugänglich zu machen. Die New York Times etwa veröffentlicht dort ausgewählte Fotos ihrer Hausfotografen in verschiedenen Kategorien und verweist dort mit einem Link auf die komplette Slideshow oder den passenden Artikel auf der eigenen Plattform nytimes.com. Außerdem kann man Bilder taggen, wie in diesem Beispiel.
So funktioniert das Tool: Nach der Anmeldung kann man direkt Fotos (und auch Videos) hochladen, taggen und in der Community verbreiten. Es existieren zahlreiche Zusatz-Tools wie Imageloop, oder Pictobrowser. Es existieren große Gruppen wie Story in 5 Frames, in der Leute versuchen, Geschichten nur anhand von fünf Bildern zu erzählen und später darüber diskutieren. Da könnte man sich als Redaktion einklinken. Hilfe zu allen Themen rund um Flickr bietet das Flickr-Hilfeforum.

  • Nachteile des Tools: Flickr ist kostenlos. Aber ab einer bestimmten Datenmenge und Anzahl an Dateien muss man auf einen Pro-Account umstellen.
  • Hier gibt es das Tool: http://bit.ly/tools_flickr (Anmeldung auch mit Facebook oder Google-Account)
  • Beispiele des Tools aus der Praxis: Die New York Times hat ihren eigenen Fotostream. Auch Barack Obama veröffentlicht regelmäßig Fotos.
  • Tool läuft auf diesen Endgeräten: Browserbasiert, Apps für iPhone, iPad und Android

Twitpic

Twitpic ist ein Tool, um Fotos über Twitter zu verbreiten. Sie lassen sich besser auf Twitter darstellen als herkömmliche Bilderlinks und erlauben das Taggen von anderen Personen. Außerdem ist das Tool für mobile Zwecke zu empfehlen.

Beispiel Twitpic

Beispiel Twitpic

Konkrete Anwendung im Newsroom: Wenn Bilder schnell über Twitter verbreitet werden müssen, ist Twitpic das richtige Tool. Twitpic-Bilder werden in Twitter häufig direkt angezeigt im Gegensatz zu Direktlinks auf Fotos auf der eigenen Plattform. Andere Twitter-Nutzer können im Bild getagt werden.
So funktioniert das Tool:
Nach der Anmeldung können Bilder bei Twitpic einfach hochgeladen werden, mit Text und Hashtags ergänzt und dann über Twitter verbreiten werden.

Multimedia-Produktion – Medienübergreifend

Vuvox

Vuvox kann man am besten als „lineare Multimedia-Collage“ definieren. Das heißt, es vereint alle medialen Spielarten (Text, Bild, Video, Ton) zu einer kreativen Collage. Zugleich zwingt die Vuvox zu keinem festen zeitlichen Ablauf; der User scrollt selbst so weit und schnell er möchte. Vuvox erlaubt also mehr „spielen“ und mehr Kreativität als klassische Multimedia-Formate – ist dabei aber aufgrund der Linearität wesentlich fester gerahmt als zum Beispiel eine Flash-Animation. Vorgestellt von Marc Röhlig // Soukmagazine.de

Beispiel Vuvox

Beispiel Vuvox

Konkrete Anwendung im Newsroom: Temporale und Lokale Erklärstücke gehen gut. Einfühlsame Reportagen gehen schlecht. Gerade große Videostücke lassen sich nur schwer dem User vermitteln. Vuvox sollte sie nur als „Häppchen“ präsentieren und sich dafür mehr auf das Zusammenspiel von Text und Foto konzentrieren. Vuvox kann gut in Funktion mit einer geschriebenen Reportage funktionieren. Fiktives Beispiel: Ein Text über ein Mehrgenerationenhaus und seine Bewohner, additiv eine Ortsbegehung per Vuvox. Die Bewohner aber nur durch die Vuvox zu präsentieren würde ihnen nicht genug Raum geben. Wichtig ist also die Planung im Voraus.
So funktioniert das Tool: Nach der Anmeldung kann man direkt eine neue Collage anlegen. Als Arbeitsgrundlage empfiehlt sich, erst die Fotos in grober Reihenfolge aufzulegen und dann im Feinschnitt anzupassen. Man kann sowohl Einzelelemente als auch gruppierte Elemente leicht verschieben. Es geht also nicht viel schief. Ärgerlich ist nur noch: Vuvox muss online auf dem Server von Vuvox gebastelt werden. Es gibt kein Programm zum Download.Vuvox lebt hauptsächlich von Fotos; eine umfangreiche Auswahl an Bildern ist daher Voraussetzung. Einige Fotografen hassen Vuvox, zwingt sie doch, für spannende Scrollerlebnisse, die eigenen Bilder zu zerschneiden. Andere mögen gerade diesen Aspekt, um eine kreative Collage zu zaubern. In jedem Fall muss man schon zuvor wissen, dass man beim Fotografieren für eine Vuvox ähnlich wie bei einem Videodreh verschiedene Perspektiven (Totale, Halbnah, CloseUp, OverShoulder) aufnehmen muss und weniger die großen Fotos schießt, die man sich an die Wand hängen würde – sondern tatsächlich viele kleine und große Alltagsszenen, die sich vermischen lassen. An den Bildrändern braucht man meist gut geeignete Übergangselemente; Wandkanten, Vorhänge, Straßenschilder.

  • Nachteile des Tools: Nicht jede Erzählstruktur eignet sich für die Vuvox. Dadurch, dass man in einem Fenster immerwährend nach rechts scrollt, werden Personenportraits oder Reportagen mit mehreren Erzählebenen sehr schwierig in der Umsetzung. Beim Programmieren hat Vuvox zudem keinen guten Audioplayer bedacht. Wer Hörstücke einbauen will, muss sie als Video in den Player einfügen. Was meist dumm aussieht. Notlösung: Tonspur mit einem Standbild, zum Beispiel ein Play-Button, kombinieren und als Video abspeichern.
  • Hier gibt es das Tool: http://bit.ly/tools_vuvox
  • Beispiele des Tools aus der Praxis: Vuvox ist vor allem ein Element, mit dem man komplexe Sachverhalte in kleinen „Infohäppchen“ erklären kann, zum Beispiel die Leichtathletik-WM, oder temporale Abläufe dokumentieren, wie eine Zugreise, oder aber Ortsbegehungen umsetzen, wie im Feldlager von Kunduz. Ein nettes, privates Beispiel gibt es hier von einem Taubenzüchterverein: Es macht ganz gut deutlich, dass Geschichten am Menschen und zu viele Videos eher wenig elegant daherkommen. Es hat seinen Charme; aber wäre in einer Flash-Übersicht wahrscheinlich besser aufgehoben. Empfehlen kann ich die Tutorial-Seite von Vuvox selbst; oder eben Learning by Doing.
  • Tool läuft auf diesen Endgeräten: Browserbasiert. Da Flash nicht auf iPhone/iPad und Co.

Dipity

Mit dem Tool Dipity lassen sich interaktive Timelines erstellen. Dabei können neben Text auch Multimedia-Elemente und Feeds eingebunden werden.

Beispiel Dipity

Beispiel Dipity

Konkrete Anwendunge im Newsroom: Timelines eignen sich vor allem dafür, Lebensläufe, Nachrufe oder zeitliche/geschichtliche Gegebenheiten zu visualisieren. Die Elemente lassen sich auch als Liste oder in einer Karte darstellen.
So funktioniert das Tool:
Nach der Anmeldung lässt sich direkt eine Timeline erstellen. Dann kann man die eigenen Elemente mit Inhalten aus sozialen Netzwerken und Feeds kombinieren.

  • Nachteile des Tools: Die Bedienung des Tools ist hakelig, die Implementierung von Feeds funktioniert selten
  • Hier gibt es das Tool: http://bit.ly/tools_dipity (Anmeldung, auch mit Facebook-Account)
  • Beispiele des Tools aus der Praxis: Die Wirtschaftswoche hat mit Dipity eine Chronik der Finanzkrise erstellt. Die Seattle Times visualisiert mit dem Tool eine Serie von Polizistenmorden.
  • Tool läuft auf diesen Endgeräten: Browserbasiert

Projeqt

Projeqt ist ein Tool im Beta-Stadium, das statische Slides, wie bei einer Präsentation mit interaktiven Elementen wie Videos, Twitterupdates, Links oder Feeds ergänzt.

Beispiel Projeqt

Beispiel Projeqt

Konkrete Anwendung im Newsroom: Projeqt sieht besonders auf Tablets gut aus. Zwischen den Slides kann man am iPad sogar durch Wischen hin- und herscrollen. Das Tool eignet sich vor allem für die Präsentation starker Bilder und Videos, die zwischendurch mit textlichen Informationen und weiterführenden Links ergänzt werden können.
So funktioniert das Tool:
In neu erstellen Projekten werden nach der Anmeldung einzeln Slides erstellt. Dabei muss entschieden werden, ob es ein Text-, ein Foto-, ein Video-, oder ein Feed-Slide werden soll. Die Slides können komplett individualisert werden.Dann wird deren Reihenfolge festgelegt und das Projeqt-Projekt kann per Embed-Code oder Link veröffentlicht werden. Projeqt stellt das Tool in einem Erklär-Video vor

  • Nachteile des Tools: Videos lassen sich nur aus Youtube oder Vimeo einbauen. Andere Quellen wie Brightcove etwa sind nicht erlaubt.
  • Hier gibt es das Tool: http://bit.ly/tools_projeqt
  • Beispiele des Tools aus der Praxis: Brainpickings, Ubuntu
  • Tool läuft auf diesen Endgeräten: Browserbasiert

Issuu

Mit Issuu können Dokumente hochgeladen und geshared/embedded werden. So können entweder ganze Zeitungen, Magazine oder Bücher order nur einzelne Seite online veröffentlicht und eingebunden werden.

Beispiel Issuu

Beispiel Issuu

Konkrete Anwendung im Newsroom: Mit Issuu veröffentlichte Dokumente können in einem Art Dokumenten-Player dargestellt werden. Denkbar ist, mit Issuu Print-PDFs zu veröffentlichen oder Quellen wie für die Recherche wichtigen Dokumente o.ä. auf die referenziert werden kann.
So funktioniert das Tool:
Dokumente werden einfach per Upload-Formular auf Issuu geladen. Dabei kann zusätzliche Link zu einer MP3-Datei gewählt werden (kein Upload), die beim Lesen abgespielt werden soll. Dabei können die PDFs öffentlich oder privat zugängig gemacht werden. Offene Fragen beantwortet der Issuu Help Center.

  • Nachteile des Tools: Teilweise mit Werbung. Für die Darstellung ohne Werbung wird ein Pro-Account benötigt.
  • Hier gibt es das Tool: http://bit.ly/tools_issuu (Anmeldung auch mit Facebook-Account)
  • Beispiele des Tools aus der Praxis: Das Online-Angebot der Süddeutschen Zeitung hat Teile der Doktorarbeit Karl-Theodor zu Guttenbergs mit dem Tool veröffentlicht. Das Medienmagazin Visdp veröffentlicht seine komplette Ausgabe online mit Issuu.
  • Tool läuft auf diesen Endgeräten: Browserbasiert, unter m.issuu.com Android-Support. iPhone geplant

Multimedia-Produktion – Social Media

Storify

Storify ist ein Tool, mit dem Inhalte aus sozialen Netzwerken kuratiert werden können. Inhalte aus Twitter, Facebook, Youtube, Audioboo und Flickr können mit eigenen Texten, RSS-Feeds und Links kombiniert werden.

Beispiel Storify

Beispiel Storify

Konkrete Anwendung im Newsroom: Mit Storify können Diskussionen im Netz abgebildet, durch zusätzliche Informationen in eine Form gebracht und im eigenen Web-Angebot eingebunden werden. Ganz im Gegenteil zu Twitterwalls etwa (s.u.), die alle Inhalte zu einem bestimmten Suchwort/Hashtag darstellen, werden bei Storify geziehlt Inhalte ausgesucht und in Kontext eingebettet. Aus der Erfahrung hat sich gezeigt, dass sich Storify-Geschichten über Twitter schnell verbreiten. Sie können für sich alleine stehen oder in einen Artikel per Embed-Code mit eingefügt werden.
So funktioniert das Tool:
Nachdem man sich mit seinem Twitter-Account angemeldet hat, erstellt man eine neue „Story“, zieht dort per Drag&Drop Tweets, Youtube-Videos sowie Audioboos, Facebooknachrichten, RSS-Feeds o.ä. in ein Feld. Diese Elemente werden dann durch eigenen Text verbunden/ergänzt und veröffentlicht. Im letzten Schritt können die Zitierten direkt benachrichtigt werden. Die Erfahrung hat gezeigt, dass sich niemand beschwert, dass seine Tweets genutzt werden. Sie werden schließlich richtig zitiert. Im Gegenteil: Viele bedanken sich und verbreiten die Geschichte weiter. Ein Tipp für das Erkennen der Authentizität von Twitter-Accounts. Entweder es sind verifizierte Accounts. Oder bei wahl.de nach den Politikern suchen. Dort sind alle Twitter-Accounts eingepflegt. Der Youtube-Kanal StorifyVideo bietet zahlreiche Erklärvideos.

  • Nachteile des Tools: Das Tool befindet sich noch in der Beta-Phase. Das merkt man hier und da. Manche Elemente werden komisch dargestellt. Auch ist Storify nicht immer stabil
  • Hier gibt es das Tool: http://bit.ly/tools_storify (Anmeldung mit Twitter-Account)
  • Beispiele des Tools aus der Praxis: Stromausfall im Bundestag und Guttbye-Demo der Berliner Morgenpost
  • Tool läuft auf diesen Endgeräten: Browserbasiert

Storyful

Storyful wurde kurz nach Storify veröffentlicht und ist ebenso ein Tool, um Geschichten aus dem Netz zu kuratieren.

Beispiel Storyful

Beispiel Storyful

Konkrete Anwendung im Newsroom: Bei kann aus weniger Quellen kuratiert werden. Facebook und Audioboo etwa werden gar nicht unterstützt. Dafür lassen sich Links oder embeddbare Inhalte, z.B. Vimeo-Videos besser einbinden. Außerdem gibt es bei Storyful die Möglichkeit, Inhalte in einzelne Abschnitte zu gliedern, was bei langen Geschichten für mehr Übersichtlichkeit sorgt.
So funktioniert das Tool:
Ähnlich wie bei Storify werden bei Storyful Inhalte gesucht und per Drag&Drop zusammengestellt. Im hauseigenen Blog gibt es Hintergrundinfos zum Tool.

  • Nachteile des Tools: Viele soziale Netzwerke werden nicht unterstützt. Wie bei Storify lassen sich etwa einzelne Kommentare auf Facebook nicht einbinden.
  • Hier gibt es das Tool: http://bit.ly/tools_storyful
  • Beispiele des Tools aus der Praxis: Proteste in Syrien
  • Tool läuft auf diesen Endgeräten: Browserbasiert

Intersect

Mit Intersect können Geschichten in örtlichen und zeitlichen Kontext gesetzt werden. Dabei überlappen sie sich mit anderen – das bietet eine neue Form der Darstellung und Einordnung von Geschichten.

Beispiel Intersect

Beispiel Intersect

Konkrete Anwendung im Newsroom: Mit dem Tool können Geschichten mit Datum und Ort markiert und so mit anderen verknüpft werden. In einer Timeline und einer Karte finden sich so die verschiedenen Geschichten. Intersect ist somit vor allem im Lokaljournalismus interessant, da die „Chronistenpflicht“ an ganz neues Gesicht bekommen kann.
So funktioniert das Tool:
Nach der Anmeldung werden Story und Überschrift eingetragen und mit Datum und Ort ergänzt. Fotos und Videos aus den gängigen Portalen können eingefügt werden. Intersect hat auf Youtube eine Einführungsvideo veröffentlicht.

  • Nachteile des Tools: Im europäischen Raum wird Intersect bisher noch kaum eingesetzt. Und das Tool funktioniert nur, wenn sich viele daran beteiligen. Die Nutzung zeichnet sich bisher vor allem dadurch aus, das Reisende etwa Geschichten über Intersect austauschen.
  • Hier gibt es das Tool: http://bit.ly/tools_intersect (Anmeldung auf mit Facebook- oder Twitter-Account)
  • Beispiele des Tools aus der Praxis: Intersect-Storys aus Berlin
  • Tool läuft auf diesen Endgeräten: Browserbasiert

Tweetwally

Es existieren zahlreiche Tools, um schnell eine Twitterwall zu erstellen. Ein sehr leichtes und intuitiv zu bedienendes ist Tweetwally.

Beispiel Tweetwally

Beispiel Tweetwally

Konkrete Anwendung im Newsroom: Im Gegensatz zu ausgewählten, kuratierten Inhalten wie bei Storify oder Storyful (s.o.) laufen bei diesem Twitterwall-Tool lediglich im Vorfeld eingegrenzte Inhalte (Stichwort, Hashtag, …) automatisch ein. Das Tool lässt sich leicht auf der eigenen Seite implementieren. Dabei rauschen bei Tweetwally die Nachrichten nicht durch – sondern kommen Paketweise, das man Zeit hat zu lesen. Eine Twitterwall ergibt vor allem dann Sinn, wenn sie zu einem bestimmten Artikeln zu aktuellen Ereignissen dazu gestellt wird.
So funktioniert das Tool:
Nach dem Login muss angegeben werden, ob Tweets eines bestimmten Twitter-Users, eines Hashtags oder mit bestimmten Keywords auf der Twitterwall dargestellt werden sollen. Dann können noch optische Einstellungen vorgenommen werden. Dann kann die Twitterwall per Link oder per Embed eingebunden werden. Auf Youtube haben die Macher von Tweetwally ein Erklärvideo veröffentlicht.

  • Nachteile des Tools: Hat man sich als Nutzer angemeldet, kann man immer nur eine Twitterwall nutzen. Wird eine neue aufgesetzt, wird die zuvor erstellte überschrieben.
  • Hier gibt es das Tool: http://bit.ly/tools_tweetwally
  • Beispiele des Tools aus der Praxis: Twitterwall für alle Tweets mit dem re:publica-Hashtag #rp11
  • Tool läuft auf diesen Endgeräten: Browserbasiert


Multimedia-Produktion – Datenvisualisierung

Google-Tools

Google bietet jede Menge Tools, um Orte auf Karten darzustellen (Google Maps, Earth, Streetview) oder um Daten zu visualisieren (Google Public Data, Fusion Tables, Motion Tools, …) oder eben beides in Kombination.

Beispiel Google Tools

Beispiel Google Tools

Konkrete Anwendung im Newsroom: Google-Karten lassen sich, verfügt man über einen Google-Account, leicht bearbeiten. Orte, Routen und Flächen können markiert und verlinkt werden. Außerdem können mit den Google-Datentools und entsprechenden Vorlagen schnell Dinge auf Karten oder in interaktiven Diagrammen visualisiert werden.
So funktioniert das Tool:
Kartenmaterial aus Google Earth, Google Streetview oder Google Maps kann ganz leicht bearbeitet werden und der entsprechende Ausschnitt per Embed-Code in Artikel eingebunden werden. Es existieren Communities, die die ohnehin schon vielfältigen Funktionen der Google-Tools erweitern.
Verfügt man über Datensätze, so können diese mit Tools wie Google Fusion Tables, Google Public Data oder Motion Chart interaktiv visualisert und eingebettet werden. Diese Daten sollten bereits in maschinenlesbarem Format (z.B. csv) vorhanden sind und sie nur noch in ein Spreadsheet eingefügt und angepasst werden müssen. Andernfalls müssen die Daten aus PDFs oder dem Netz abgetippt oder gescraped werden. Viele lesenswerte Tutorials bietet Lorenz Matzat auf seinem Datenjournalist-Blog.

Many Eyes

Many Eyes bietet zahlreiche Möglichkeiten, um Daten zu visualisieren. Außerdem können über die Plattform öffentliche Daten genutzt und über andere Visualisierungen diskutiert werden.

Beispiel Manyeyes

Beispiel Manyeyes

Konkrete Anwendung im Newsroom: Daten können unterschiedlichst mit Many Eyes visualisiert werden. Dafür werden zahlreiche Herangehensweisen angeboten.
So funktioniert das Tool:
Nach der Anmeldung lädt man seine Daten hoch oder wählt ein vorhandenes Datenset aus. Dann wird die Art der Visualisierung ausgesucht, angepasst und unter „Share this“ per Embed-Code veröffentlicht. Ein interessantes Tutorial zu „Visualisierung rechter Straftaten“ (Datenjournalist). Many Eyes bietet eine Quick-Start-Tour durch ihr Angebot.

  • Nachteile des Tools: Die Visualisierungen werden prinzipiell als Java-Applet eingebunden, was nicht so komfortabel ist.
  • Hier gibt es das Tool: http://bit.ly/tools_manyeyes
  • Beispiele des Tools aus der Praxis: Straftaten (Datenjournalist), Schuldnerquote in Berlin
  • Tool läuft auf diesen Endgeräten: Browserbasiert

Wordle

Wordle zählt Wörter in einem vorzugebendem Text und gewichtet diese dann anhand ihrer Größe. Somit lassen sich die Wortvorkommen in Wortwolken anschaulich visualisieren.

Beispiel Wordle

Beispiel Wordle

Konkrete Anwendung im Newsroom: Das Tool eignet sich vor allem für die Visualisierung von Reden im Wortlaut.
So funktioniert das Tool:
Ohne Anmeldung kann einfach ein Text oder eine ganze Website-URL in ein vorgegebenes Feld kopiert werden, das Design (Typo, Anordnung) ausgewählt und die Wordcloud so erstellt werden. Screenshots und Embeds der Wortwolken dürfen mit Angabe der Quelle wordle.net offenbar enutzt werden. Außerdem kann die Sprache eingestellt werden, wodurch dann etwa automatisch alle Stoppwörter (der, die, das etc.) herausgefiltert werden.

Tagxedo

Tagxedo ist ein ebenso wie Wordle (s.o.) ein Tool, um Tags oder eben Texte zu visualisieren. Tagxedo ist umfangreicher als Wordle.

Beispiel Tagxedo

Beispiel Tagxedo

Konkrete Anwendung im Newsroom: Auch dieses Tool eignet sich vor allem für die Visualisierung von Reden im Wortlaut.

So funktioniert das Tool: Im Gegensatz zu Wordle, kann man bei Tagxedo die Wortwolken wie Bilder gestalten. Außerdem bietet das Tool die Möglichkeit, neben Texten auch Twitter-Streams RSS-Feeds oder delicious-Bookmarks zu visualisieren. Außerdem kann eingestellt werden, ob bestimmte Wörter oder Zahlen oder Sonderzeichen beachtet oder unbeachtet bleiben sollen. Auf Youtube gibt es ein Tutorial. Weitere Beispiele und Hintergründe zu dem Tool gibt es auf dem Tagxedo-Blog zu lesen.

  • Nachteile des Tools: Das Tool benötigt 32-Bit-Silverlight
  • Hier gibt es das Tool: http://bit.ly/tools_tagxedo
  • Beispiele des Tools aus der Praxis: Tagxedo-Galerie
  • Tool läuft auf diesen Endgeräten: Browerbasiert

Open Heat Map

Open-Source Nischentool zur schnellen und simplen Darstellung von ortsbezogener Daten als Heatmap. Vorgestellt von Margit Beutler // Designmeetsdata

Beispiel Open Heat Map

Beispiel Open Heat Map

Konkrete Anwendung im Newsroom: Daten v.a. mit Zeitbezug können auf schnellem Weg visualisiert werden.
So funktioniert das Tool: Ohne Anmeldung können Daten per Google Spreadsheet oder Docs hochgeladen und die Ansicht angepasst werden. Open Heat Map stellt Beispieldatensätze, eine umfangreiche Anleitung und ein Video zur Verfügung.
Nachteile des Tools: Lädt manchmal langsam. Ähnliches können auch vieleandere Tools, z.B. die von Google.
Hier gibt es das Tool: http://bit.ly/tools_openheatmap
Beispiele des Tools aus der Praxis: Radioaktivität in Japan im Zeitverlauf
Tool läuft auf diesen Endgeräten: Browserbasiert (Flashbasiert)

Processing

Processing ist eine auf die Einsatzbereiche Grafik, Simulation und Animation spezialisierte Programmiersprache, die regen Anklang bei Programmieranfängern (in der Designwelt) findet. Vorgestellt von Margit Beutler // Designmeetsdata

Beispiel Processing

Beispiel Processing

Konkrete Anwendnung im Newsroom: Processing macht aus lernbereiten, designaffinen Journalisten Programmierer, die ihre Ideen frei von den technischen Begrenzungen einer stehenden Software umsetzen können. Ben Fry, der das Projekt ins Rollen gebracht hat, erklärt in diesem eineinhalbminütigen Beitrag den Nutzen – zwischen den Zeilen. Wer sich diese Sprache zu eigen macht, kommt darüber in Kontakt mit einer lebhaften, kreativen Community.
Mit den richtigen Voraussetzungen, Talent, Fleiß, Unterstützung durch Vorgesetzte oder Kunden, die sich auf diesen Lernprozess einlassen, kann man einen ganz eignen Stil entwickeln. Für Medienunternehmen bedeutet dies, dass sie sich so, über die Handschrift ihrer “Visualisierer” und deren Fähigkeit Geschichten immer wieder neu und nuanciert zu erzählen, langfristig von ihren Konkurrenten differenzieren können.
So funktioniert das Tool: Man muss zunächst die Sprache lernen. Das Blog Generative Gestaltung bietet Beispielcodes und weiterführende Links. Außerdem existiert eine Vielzahl an Tutorials.
Nachteile des Tools: Erfordert eine lange Einarbeitungszeit
Hier gibt es das Tool: http://bit.ly/tools_processing
Beispiele des Tools aus der Praxis: Ein Gefühl für die Bandbreite der möglichen Einsatzbereiche dieser Progammiersprache, vermittelt das Showreel von Generative Gestaltung. Ein Studiengang der HDM Stuttgart hat sich auch mit Processing beschäftigt.
Tool läuft auf diesen Endgeräten: Windows, Mac

Multimedia-Produktion – Web-Entwicklung

Journalisten, die alle Möglichkeiten im Netz voll ausnutzen möchten, sollten zumindest Grundkenntnisse in Webtechnologien, Auszeichnungssprachen und deren Tools kennen. Vorgestellt von Jörg Pfeiffer // Videojournalist und Crossmedia-Entwickler

Aptana

Wer (Web)-Anwendungen entwickelt oder diese modifiziert, benötigt ziemlich schnell ein ganzes Set an Werkzeugen, welche die Arbeit erleichtern. Einfache HTML-Editoren reichen da nicht immer aus. Der Einsatz einer Versionsverwaltung (git) darüberhinaus ist ebenso sinnvoll.

Beispiel Aptana

Beispiel Aptana

Konkrete Anwendnung im Newsroom: Um (außerhalb des Redaktions-CMS) Inhalte fürs Web zu erstellen bietet Aptana einen Editor mit Syntax-Erkennung, Werkzeuge zum Beheben von Fehlern, FTP, Versionskontrolle. Diese Werkzeuge werden in einer IDE (engl. integrated development environment) zusammengefasst. Aptana basiert auf dem Open-Source-Programm Eclipse.
So funktioniert das Tool: Nach der Installation kann ein neues Projekt in der gewünschten Umgebung (z.B. Web) angelegt und bearbeitet werden. Sinnvoll ist, direkt auf dem Webserver (per FTP) zu arbeiten, um Ergebnisse gleich kontrollieren und ggf. anpassen zu können. Aptana bietet ein Online-Handbuch.
Nachteile des Tools: Ein sehr umfangreiches Tool, das Kenntnisse in Webtechnologien und Auszeichnungssprachen voraussetzt.
Hier gibt es das Tool: http://bit.ly/tools_aptana
Tool läuft auf diesen Endgeräten: Windows, Mac

Firebug

Eine unverzichtbare Erweiterung für den Mozilla Webbrowser Firefox sind die Entwickler-Werkzeuge von ‚Firebug‘. Firebug ist der Pionier unter den im Browser integrierten Entwickler-Werkzeugen.

Beispiel Firebug

Beispiel Firebug

Konkrete Anwendnung im Newsroom: Um bereits bestehende Inhalte anzupassen, einzelne Elemente hinzufügen oder löschen oder nach Fehlern zu suchen, kann man mit Firebug „live“ durch einen eingebauten Editor im Browser CSS-Werte wie Farbe und Schriftart verändern und er kann Javascipt per Konsole aufrufen. Darüber hinaus hilft es bei Sicherheitstests und zeigt den Ladevorgang der Seite an, der dadurch optimiert werden kann.
So funktioniert das Tool: Unter Extras->Add-ons kann Firebug direkt installiert werden. Dann wird es durch Klick auf das Firebug-Symbol rechts unten am Browser aktiviert. Dann können etwa mit dem Zeige-Werkzeug einzelne Elemente der Seite angeklickt und der passende Quellcode dazu betrachtet und ggf. verändert werden. Firebug bietet ein Einführungs-Video.
Nachteile des Tools: Beim fremdem Quellcode findet man nicht immer auf Anhieb die gewünschte Stelle (das ist meist auch so gewollt).
Hier gibt es das Tool: http://bit.ly/tools_firebug
Tool läuft auf diesen Endgeräten: Browserbasiert (Firefox)

Weiterführende Links: