Philipp Naderer (ORF.at): Bridging the Gap: Datenjournalistische Anwendungen für Mobile und Desktop

Vortrag am Symposium: Infografik und Datenjournalismus
2.-3.12.2013, #dataviz13
Department Medien und Design, FH JOANNEUM Graz
http://datablog.fh-joanneum.at/symposium

1. mÜáäáéé=k~ÇÉêÉê philipp.naderer@orf.at – ORF Online & Teletext GmbH & Co KG _êáÇÖáåÖ íÜÉ=d~é
2. botic Philipp Naderer, BSc Web Developer – Frontend Seit 2007 bei ORF.at Freier Fotojournalist Diplomarbeit TU Wien
3. ORF Online und Teletext GmbH & Co KG { news, sport, oesterreich: {steiermark, wien, noe, ooe, ...} wetter, debatte, science, iptv, help, tv, fm4, oe3, ... }
5. Wahlen 2013 01-20 – Volksbefragung Wehrpflicht 03-03 – Landtagswahl Kärnten 03-03 – Landtagswahl Niederösterreich 04-28 – Landtagswahl Tirol 05-05 – Landtagswahl Salzburg 09-29 – Nationalratswahl
9. Ticket #1 – Farbwahl Wehrpflicht Berufsheer
10. Ticket #2 – Neutrale Farbe für 50:50? Wehrpflicht Berufsheer CSS3 Gradients
12. CSS3 Gradients
13. Ticket #3 – Farbskalen für Heatmaps Wehrpflicht Berufsheer Wahlbeteiligung
14. Ticket #4 – Sortierung der Gemeinden Umlaute + Sankt vs. St. Verschiedene Normen & Möglichkeiten: - DIN 31628 - DIN 5007 - ÖNORM EN 13710:2011 05 15 (nicht einsehbar) - „Österreichische Ordnung“ - Nach GKZ (Gemeindekennziffer) Entscheidung: ö = oe, Sankt = St. Aber: Unicode vs. Windows 1252 vs. ISO 8859-15
16. Nicht lustig: 2 Wahlen parallel - 2 Landeswahlbehörden - 2 Anlieferungskanäle - 2 Redaktionen in Ländern + news.ORF.at - 19 Listen (nicht nur Ja oder Nein) - BZÖ vs. FPK in Kärnten – Vergleichswerte? - 29 Bezirke und 6 Statutarstädte - 25 Listenreihungen für Bezirke - Gleiches Kernteam wie bei Volkbefragung
17. Kleine Randnotiz: Das Team Stronach ... TS – „Team Stronach für Kärnten“ FRANK – „Team Frank Stronach“ STRONACH – „Team Stronach für Tirol“ TEAM – „Team Stronach für Salzburg“ FRANK – „Team Frank Stronach“
18. Ticket #5: Mandatsschieber „+/- 0“ Platzproblem bei wenigen Mandaten Testfall nicht vergessen! 50% muss genau bei der Hälfte liegen Reihung nach Sitzplan? Reihung nach bisheriger Stärke? Reihung nach neuer Stärke?
19. Ticket #6: Perzentile der SPÖ - SPÖ legte mehr zu als erwartet - Spannweite Hochburgen vs. Schwache Gemeinden
20. Ticket #7: Balken vs. Labels Balken lang genug Stimmen im Balken Alle anderen Parteien zu schwach, Stimmen neben Balken
21. Tirol & Salzburg - 2 Monate Verschnaufpause - Neuer Entwickler für mobile Anwendungen - Gleiches Schema wie andere Landtagswahlen - Testballon für die Nationalratswahl > Mobile Ansicht dank Responsive Webdesign
22. Kleine Randnotiz: Piratenpartei in Salzburg ... PIRAT Salzburger Piraten - Bürgerbeteiligung, Transparenz und 340 Millionen mehr Gründe dieses Mal die Piratenpartei zu wählen
23. Was bedeutet Responsive Webdesign? Webseite kann reagieren auf: * Breite und Höhe vom Browserfenster * Breite und Höhe vom Gerät * Orientierung des Geräts * Auflösung des Geräts * Farbkomponenten des Display (Farbe vs. Mono) - Eine Webseite für Mobil und Desktop
24. Mobil != Smartphone != Unterwegs - Smartphone am Sofa parallel zur TV-Sendung - Tablet im Zug mit WESTlan bzw. ÖBB-Wifi - Tablet oder Phone im Uni-Hörsaal mit 100 MBit - Tablet mit externer Tastatur > Mobil = einen mobilen Kontext haben > Mobil != iPhone 5S / High-End Android
25. Strategie für mobile News-Anwendungen - Design für unterschiedliche Nutzungskontexte - Touch ist unpräziser als Maus / Tastatur - High-End-Hardware haben nicht alle - Bandbreite sparen, Caching intelligent machen - Retina Grafiken für Tablet vorsehen - EDGE-Verbindung ist eine gute Testumgebung „Optimize Everything!“
26. Testen, testen, testen, testen, ... 4 2.1 2.2 2.3
27. Testen, testen, testen, testen, ...
35. Ticket #8 – Blurbs Die Grafik zeigt den Verlauf der Stimmenanteile der im Nationalrat vertretenen Parteien seit 1945. Am unteren Rand der Grafik sind die Regierungskoalitionen für den jeweiligen Zeitraum dargestellt. Für 1949 und 1953 zeigt die FPÖ-Kurve die Ergebnisse der Vorgängerpartei Verband der Unabhängigen (VdU). Die Verlaufskurve für die Grünen zeigt die Ergebnisse für die jeweils im Nationalrat vertretenen Vorläuferparteien. 1986: Die Grüne Alternative - Liste Freda Meissner-Blau; 1990: Die Grüne Alternative/Grüne im Parlament; ab 1994: Die Grünen - Die Grüne Alternative (Grüne). Quelle: Innenministerium
36. Touch-Gesten teilweise tricky umzusetzen. Testen!
37. Ticket #9 – Android und SVG - Basierend auf SVG / D3 - SVG erst ab Android 3 - Implementierung mangelhaft - Fallback mit PNG-Grafik
38. Ticket #9 – Android und SVG
39. Tipp: Unterstützt nur Android 4
40. Touch-Events != Click-Events WebKit-Browser (Android & iOS) versuchen Touch-Events in Click-Events umzuwandeln - So funktionieren alle Webseiten weiterhin - 300 ms Verzögerung - Ursache: Double Tap for Zoom erkennnen - Oft aber schnellere Reaktion erwünscht - Lösung: „touchstart“ statt „click“ verwenden
42. Fazit - Responsive = Mobil und Desktop auf einmal - Gute Performance ist enorm wichtig - Gesten sind kompliziert, genau überlegen - Daten komprimieren, Bandbreite sparen - Layouts kompakt halten - Detailinfos / Blurbs über Sub-Ebene anzeigen - Testen! - Auf User-Feedback hören! - App ersetzt keine Mobilansicht im Browser
43. jìäțìãÉëÅ> ÜííéWLLÇÉîKlRcK~í ]ÇÉîlRc~í