Online-Workshop mit Julius Tröger, Teil 4

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

• http://mediaelementjs.com
• http://html5doctor.com/video-canvas-magic
• http://t3n.de/news/sponsored-post-audio-video-html5-398726
• http://www.currybet.net/cbet_blog/2010/08/html5-for-journalists.php
• http://heinz.typepad.com/lostandfound/2010/08/was-m%C3%BCssen-journalisten-und-prleute-%C3%BCber-html5-wissen.html
• http://www.innovation-series.com/2012/06/05/html5-video-and-next-gen-journalism
• http://html5video.org

Praxisbeispiele:

• http://www.open-hypervideo.org/prototype.html

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.

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 Autoren dieses Textes, Julius Tröger, eingesetzt. In seinem Beitrag Webinhalte in Webvideos darstellen – Popcorn.js für Journalisten 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:

• http://www.digitalerwandel.de/2011/12/30/webinhalte-in-webvideos-popcornjs-fuer-journalisten
• http://popcornjs.org/documentation
• http://net.tutsplus.com/articles/news/a-look-at-popcorn

Praxisbeispiele:

• http://www.morgenpost.de/fluesterwitze
• http://www.popcornjs.org/demos
• http://livingdocs.github.com/greencorps

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.

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:

• http://yoyodyne.cc/radiolab
• http://yoyodyne.cc/hyperdisk
• https://github.com/maboa/hyperaudiopad

Praxisbeispiele:

• http://hyper-audio.org/r
• http://yoyodyne.cc/h
• http://johntynan.com/presentations/popcorn/bernardconstant
• http://happyworm.com/clientarea/hyperaudio/htdemo

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.

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:

• http://scenari.utc.fr/c2m/res/DocEng2011.pdf
• http://wam.inrialpes.fr/timesheets/docs

Praxisbeispiele:

• http://wam.inrialpes.fr/timesheets/public/webRadio
• http://wam.inrialpes.fr/timesheets/annotations/audio.html

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.

Weiterführende Links:

• http://www.interactivenarratives.org
• http://www.hackshackers.com
• http://help.hackshackers.com/questions/semi-comprehensive-list-of-newsrooms-doing-news-applications
• http://blog.zdf.de/hyperland/2012/02/hackshackers-wenn-aus-schreiberlingen-programmierer-werden
• http://www.mediabistro.com/10000words/why-journalists-should-learn-to-code_b319
• http://www.codinghorror.com/blog/2012/05/please-dont-learn-to-code.html
• http://stdout.be/2012/05/04/fungible
• http://johnkeefe.net
• http://blogs.journalism.co.uk/2011/11/08/mozfest-six-lessons-for-journalists-from-the-mozilla-festival
• http://www.chryswu.com/blog/2012/02/22/tools-slides-and-links-from-nicar12

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