1. Web-Documentaries
Multimediales Storytelling im Netz
Jan Petzold │Deutsche Welle, Neue Medien

2. Web-Documentaries
Was ist das?
Jan Petzold │Deutsche Welle, Neue Medien

3. Web-Documentaries
Versuch einer Definition
- Multimediale Online-Dokumentation
Video Text O-Töne
Interaktion
Animationen
Fotos Atmo
- Durch Kombination von Audio, Video & Bild klarer Mehrwert im Vergleich zu
“singulären” Medien
- Nichtlinearer Handlungsablauf
Jan Petzold │Deutsche Welle, Neue Medien

4. Web-Documentaries
*Demo*
Jan Petzold │Deutsche Welle, Neue Medien

5. Web-Documentaries
DW - was bisher geschah…
August 2010 November 2010 Februar 2011
?
Juni 2011* Juli 2011*
Jan Petzold │Deutsche Welle, Neue Medien

6. Web-Documentaries
Warum?
Jan Petzold │Deutsche Welle, Neue Medien

7. 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
CC Lisa Padilla 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

8. Web-Documentaries
Da war doch mal
was…
Jan Petzold │Deutsche Welle, Neue Medien

9. 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
© www.collect-antiques.net
Jan Petzold │Deutsche Welle, Neue Medien

10. Web-Documentaries
Wie lief das Projekt
ab?
Jan Petzold │Deutsche Welle, Neue Medien

11. Web-Documentaries
Pilotprojekt „Waldschutz in Papua-Neuguinea“
Idee & Inhalt
- pragmatische Umsetzung, kleines Team
- 12 Videos, 97 Bilder, 33 Audios
Design Programmierung
- Vier Sprachen: Deutsch, Englisch,
Portugiesisch, Indonesisch
Medien
- 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

12. Web-Documentaries
Grundlage > Flowchart
- Arbeitsgrundlage für Redaktion und Programmierer
Jan Petzold │Deutsche Welle, Neue Medien

13. Web-Documentaries
Wohin damit?
Jan Petzold │Deutsche Welle, Neue Medien

14. Web-Documentaries
Ausspielung Website
Jan Petzold │Deutsche Welle, Neue Medien

15. Web-Documentaries
Social Media, Crosspromo
Jan Petzold │Deutsche Welle, Neue Medien

16. Web-Documentaries
Waldschutz in Papua-Neuguinea – Reaktionen
Jan Petzold │Deutsche Welle, Neue Medien

17. Web-Documentaries
…und selbst?
Jan Petzold │Deutsche Welle, Neue Medien

18. 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?
http://www.youtube.com/watch?v=4ba1BqJ4S2M http://www.youtube.com/watch?v=NCBGeeGHrP8
Jan Petzold │Deutsche Welle, Neue Medien

19. Web-Documentaries
Was tut sich sonst?
http://www.interactivedocumentary.net/ http://www.webdocumentario.com.br/ http://i-docs.org/
- 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
Jan Petzold │Deutsche Welle, Neue Medien

20. Web-Documentaries
Was steckt dahinter?
Jan Petzold │Deutsche Welle, Neue Medien

21. Web-Documentaries
Waldschutz in Papua-Neuguinea – Technik
Verknüpfung Text/Medien
Encodierung
A/V-Server Bildverarbeitung Webserver
(Limelight-CDN) (PHPext auf SOI)
Jan Petzold │Deutsche Welle, Neue Medien

22. Web-Documentaries
Technik
- Inhalte & Handlungs
sind in globaler XML-Datei
konfiguriert
- Jede Sprache = 1 XML
- Austausch aller Medien
sehr einfach möglich
(Bildkorrektur / anderes
Video / falsches Audio)
- Einfach zu erweitern
- Wenn das Layout unverändert
bleibt sind neue Web-Docs
leicht umzusetzen > keine
Programmierung nötig
Jan Petzold │Deutsche Welle, Neue Medien

23. 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)
Limelight Internet Health Monitor
Jan Petzold │Deutsche Welle, Neue Medien

24. Web-Documentaries
Flash!
Jan Petzold │Deutsche Welle, Neue Medien

25. Web-Documentaries
Warum?
© Spreadshirt
Jan Petzold │Deutsche Welle, Neue Medien

26. Web-Documentaries
Gründe für den Einsatz von Flash
- Verbreitung (90-95% der PC- und Mac-Browser), siehe
http://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

27. Web-Documentaries
Browserstatistiken für DW-WORLD.DE
* geschätzt
Jan Petzold │Deutsche Welle, Neue Medien

28. Web-Documentaries
„Echter“ Vollbildmodus in HTML5?
- WebKit:
<script type=‘text/javascript‘>
video.webkitEnterFullScreen();
</script>
- 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

30. 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

31. 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

32. Web-Documentaries
,,Herausforderungen”
Jan Petzold │Deutsche Welle, Neue Medien

33. 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
CC macwagen
Jan Petzold │Deutsche Welle, Neue Medien

34. Dankeschön!
Jan Petzold
Deutsche Welle
Mail: Jan.Petzold@dw-world.de
Begleitender Artikel: http://bit.ly/dMlmxe
Jan Petzold │Deutsche Welle, Neue Medien