Jan Petzold │Deutsche Welle, Neue Medien

Web-Documentaries Multimediales Storytelling im Netz

Web-Documentaries

Was ist das?

Jan Petzold │Deutsche Welle, Neue Medien

Web-Documentaries

Versuch einer Definition

- Multimediale Online-Dokumentation

- Durch Kombination von Audio, Video & Bild klarer Mehrwert im Vergleich zu “singulären” Medien

- Nichtlinearer Handlungsablauf

Jan Petzold │Deutsche Welle, Neue Medien

Video O-Töne

Fotos Atmo

Text

InteraktionAnimationen

Web-Documentaries

*Demo*

Jan Petzold │Deutsche Welle, Neue Medien

Jan Petzold │Deutsche Welle, Neue Medien

Web-Documentaries

DW - was bisher geschah…

?August 2010 November 2010 Februar 2011

Juni 2011* Juli 2011*

Web-Documentaries

Warum?

Jan Petzold │Deutsche Welle, Neue Medien

Web-Documentaries

Anforderung & Ziele Web-Documentary

- Zwingend: Eine gute Idee (Story / Thema)

- Sehr journalistisches und potenziell tiefgründiges Format (unabhängig von Sendezeiten, langfristig verfügbar)

- Ansprechen von Zielgruppen, die sich mit dem Thema sonst nicht befassen würden

- DW = trimediales Medienhaus, Know-How und Technik vorhanden

- Statistik - durchschnittliche Verweildauer:

- 1. WebDoc (Papua): 5-6 Minuten

- 2. WebDoc (Guyana): 9-10 Minuten

Jan Petzold │Deutsche Welle, Neue Medien

CC Lisa Padilla

Web-Documentaries

Da war doch mal was…

Jan Petzold │Deutsche Welle, Neue Medien

Web-Documentaries

Adobe Director, Toolbook & Co

- Multimedia-CDs & interaktive Filme mit schlechtem Ruf

- Spiele und Edutainment-Software der 90er Jahre mit hohem Videoanteil

- Heute: Professionellere Produktionsmöglichkeiten

- Heute: Wesentlich bessere technische Rahmenbedingungen (Internet-Bandbreite = Videoqualität)

- Heute: Einbindung sozialer Medien

- Heute: Online 24h verfügbar, benötigt wird nur ein Browser

- Interaktive Filme sind durchaus noch aktuell > Heavy Rain für PS3

Jan Petzold │Deutsche Welle, Neue Medien

© www.collect-antiques.net

Web-Documentaries

Wie lief das Projekt ab?

Jan Petzold │Deutsche Welle, Neue Medien

Web-Documentaries

Pilotprojekt „Waldschutz in Papua-Neuguinea“

- pragmatische Umsetzung, kleines Team

- 12 Videos, 97 Bilder, 33 Audios

- Vier Sprachen: Deutsch, Englisch, Portugiesisch, Indonesisch

- Vier Buttons: Vollbild, Videoqualität, Karte, Notizbuch, Social Media-Funktionen

- Gesamtdauer Planung, Konzeption & Umsetzung: ca. zwei Monate

- Förderung durch Bundesministerien

Jan Petzold │Deutsche Welle, Neue Medien

Medien

Design Programmierung

Idee & Inhalt

Web-Documentaries

Grundlage > Flowchart

- Arbeitsgrundlage für Redaktion und Programmierer

Jan Petzold │Deutsche Welle, Neue Medien

Web-Documentaries

Wohin damit?

Jan Petzold │Deutsche Welle, Neue Medien

Web-Documentaries

Ausspielung Website

Jan Petzold │Deutsche Welle, Neue Medien

Web-Documentaries

Social Media, Crosspromo

Jan Petzold │Deutsche Welle, Neue Medien

Web-Documentaries

Waldschutz in Papua-Neuguinea – Reaktionen

Jan Petzold │Deutsche Welle, Neue Medien

Web-Documentaries

…und selbst?

Jan Petzold │Deutsche Welle, Neue Medien

Web-Documentaries

Was gibt es?

- Vollständige WebDoc-Software > mir nicht bekannt

- Einsteigertool für lineare Foto-Dokumentationen: SoundSlides, http://soundslides.com

- Video: Youtube Annotations

- Grundsatzfrage: Eher ein linearer Handlungsablauf oder möglichst verzweigt?

Jan Petzold │Deutsche Welle, Neue Medien

http://www.youtube.com/watch?v=4ba1BqJ4S2M http://www.youtube.com/watch?v=NCBGeeGHrP8

Web-Documentaries

Jan Petzold │Deutsche Welle, Neue Medien

Was tut sich sonst?

- Preisgekrönte Web-Documentaries bereits von ARTE, Reuters, Le Monde,… > z.B. http://prisonvalley.arte.tv, http://wechoosethemoon.org/

- Lineare Foto-Dokumentationen: mediastorm, http://mediastorm.com/)

- Studie “Documentary and new digital platforms”: http://www.obsdoc.ca/res/pdf/Observ_20110203_Study.pdf

http://www.webdocumentario.com.br/http://www.interactivedocumentary.net/ http://i-docs.org/

Web-Documentaries

Was steckt dahinter?

Jan Petzold │Deutsche Welle, Neue Medien

Web-Documentaries

Waldschutz in Papua-Neuguinea – Technik

Webserver(PHPext auf SOI)

A/V-Server(Limelight-CDN)

Verknüpfung Text/Medien

Encodierung

Bildverarbeitung

Jan Petzold │Deutsche Welle, Neue Medien

Web-Documentaries

Technik

- Inhalte & Handlungssind in globaler XML-Datei konfiguriert

- Jede Sprache = 1 XML

- Austausch aller Mediensehr einfach möglich(Bildkorrektur / anderesVideo / falsches Audio)

- Einfach zu erweitern

- Wenn das Layout unverändertbleibt sind neue Web-Docs leicht umzusetzen > keine Programmierung nötig

Jan Petzold │Deutsche Welle, Neue Medien

Web-Documentaries

Technik

- Dezentrales Ausspielen der A/V-Medien über Limelight-CDN

- Ausspielen der Bilder ebenfalls über CDN (wie die gesamte DW-WORLD-Seite)

- XML sowie HTML, CSS und JS über eigene PHP-Zone (Apache, GZip, Caching) mit Build & Deployment-Infrastruktur (Hudson)

Jan Petzold │Deutsche Welle, Neue Medien

Limelight Internet Health Monitor

Web-Documentaries

Flash!

Jan Petzold │Deutsche Welle, Neue Medien

© Spreadshirt

Web-Documentaries

Warum?

Jan Petzold │Deutsche Welle, Neue Medien

Web-Documentaries

Gründe für den Einsatz von Flash

- Verbreitung (90-95% der PC- und Mac-Browser), siehehttp://riastats.com

- WebDocumentaries sind (noch) nicht für mobile Geräte gedacht

- ausgereifte Entwicklungsumgebung (für HTML5 noch nicht verfügbar, evtl. GWT?)

- Programmier-Erfahrung vorhanden, gute Integration in bestehende Entwicklungsprozesse (Eclipse, SVN)

Jan Petzold │Deutsche Welle, Neue Medien

Web-Documentaries

Browserstatistiken für DW-WORLD.DE

* geschätzt

Jan Petzold │Deutsche Welle, Neue Medien

Web-Documentaries

„Echter“ Vollbildmodus in HTML5?

- WebKit:

- Firefox: Über rechte Maustaste (http://www.mozilla.com/en-US/firefox/video)

- Internet Explorer: nur über Kiosk Mode (früher vorhanden, aber aus Sicherheitsgründen entfernt)

Jan Petzold │Deutsche Welle, Neue Medien

<script type=‘text/javascript‘>video.webkitEnterFullScreen();

</script>

Web-Documentaries

Wenn der Kick-Off in ein paar Monaten wäre…

- Videoencodierung in MPEG-4 & WebM, automatischer Fallback

- HTML5 Boilerplate: http://html5boilerplate.com/

- Browserneutrales Basis-Template für die Entwicklung zeitgemäßer Web-Applikationen

- Was ist drin?

- z.B. CSS Reset, Graceful degradation (IE6), integrierte QUnit-Test-Suite, sauberer Doctype, JQuery & Modernizr bereits eingebaut, Mimifizierung, 404-Default, ANT-Build-Skript, .htaccess-Optimierung (Cross-Domain AJAX, aktuelle MIME-Types, UTF-8, GZip-Kompression, Expires-Header, Rewrite-Rules, …)

Jan Petzold │Deutsche Welle, Neue Medien

Web-Documentaries

The wilderness downtown

- Interaktiver Film zu einem Musikstück von “Arcade Fire” in HTML5, http://www.thewildernessdowntown.com/

Jan Petzold │Deutsche Welle, Neue Medien

Web-Documentaries

,,Herausforderungen”

Jan Petzold │Deutsche Welle, Neue Medien

Web-Documentaries

Aktuelle Überlegungen & Probleme

- Arabische Version > RTL-Text erst ab Flash 10 vernünftig möglich, Ziel bisher: Flash 9

- Chinesische Version: Erhöht Ladezeit um 1 MB (mehr als 18.000 Glyphen)

- Betonung auf spielerischem Aspekt (Bonusziele, Belohnungen)

- Einbau von Panoramen

- Bessere Navigation: Klicken auf Objekte in der WebDoc

- Zurück-Button sollte auch im Browser funktionieren

Jan Petzold │Deutsche Welle, Neue Medien

CC macwagen

Dankeschön!

Jan PetzoldDeutsche Welle

Mail: Jan.Petzold@dw-world.de

Begleitender Artikel: http://bit.ly/dMlmxe

Jan Petzold │Deutsche Welle, Neue Medien