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

Transcript

1. mÜáäáéé=k~ÇÉêÉê
   philipp.naderer@orf.at – ORF Online & Teletext GmbH & Co KG
   _êáÇÖáåÖ
   íÜÉ=d~é
   

   View Slide

2. botic
   Philipp Naderer, BSc
   Web Developer – Frontend
   Seit 2007 bei ORF.at
   Freier Fotojournalist
   Diplomarbeit TU Wien
   

   View Slide

3. ORF Online und Teletext GmbH & Co KG {
   news,
   sport,
   oesterreich: {steiermark, wien, noe, ooe, ...}
   wetter,
   debatte,
   science,
   iptv,
   help,
   tv,
   fm4,
   oe3,
   ...
   }
   

   View Slide

4. View Slide

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
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. Ticket #1 – Farbwahl
   Wehrpflicht Berufsheer
   

   View Slide

10. Ticket #2 – Neutrale Farbe für 50:50?
    Wehrpflicht Berufsheer
    CSS3 Gradients
    

    View Slide

11. View Slide

12. CSS3 Gradients
    

    View Slide

13. Ticket #3 – Farbskalen für Heatmaps
    Wehrpflicht Berufsheer Wahlbeteiligung
    

    View Slide

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
    

    View Slide

15. View Slide

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
    

    View Slide

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“
    

    View Slide

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?
    

    View Slide

19. Ticket #6: Perzentile der SPÖ
    - SPÖ legte mehr zu als erwartet
    - Spannweite Hochburgen vs. Schwache Gemeinden
    

    View Slide

20. Ticket #7: Balken vs. Labels
    Balken lang genug
    Stimmen im Balken
    Alle anderen Parteien zu schwach,
    Stimmen neben Balken
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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!“
    

    View Slide

26. Testen, testen, testen, testen, ...
    4
    2.1 2.2 2.3
    

    View Slide

27. Testen, testen, testen, testen, ...
    

    View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

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
    

    View Slide

36. Touch-Gesten teilweise tricky umzusetzen. Testen!
    

    View Slide

37. Ticket #9 – Android und SVG
    - Basierend auf SVG / D3
    - SVG erst ab Android 3
    - Implementierung mangelhaft
    - Fallback mit PNG-Grafik
    

    View Slide

38. Ticket #9 – Android und SVG
    

    View Slide

39. Tipp:
    Unterstützt nur Android 4
    

    View Slide

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
    

    View Slide

41. View Slide

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
    

    View Slide

43. jìäțìãÉëÅ>
    ÜííéWLLÇÉîKlRcK~í
    ]ÇÉîlRc~í
    

    View Slide