wien.at Relaunch 2010 Webkongress Erlangen 7. Oktober 2010 Thomas Jöchler
Wien - gestern und heute Wienbilder - Collage http://de.wikipedia.org/wiki/Wien und wien.at ...
wien.at - 15 Jahre in 1 Minute <ul><li>online 1995 unter „ www.magwien.gv.at“ </li></ul><ul><li>wenig später unter wien.at...
1997
1998
2000
2001
2005
2010
 
Status 2009 (Projektstart) wien.at ist eine der größten Plattformen Österreichs über 40.000 Seiten 850.000 unique clients ...
Ausgangslage und Ziele Gelebte Barrierefreiheit Multimediale Inhalte Viel Feedback und Erfahrungen Ansprechende Optik Layo...
Frühe Entscheidungen <ul><li>Das Erbe, der IE 6 & die Validierung </li></ul>http://www.flickr.com/photos/openistic/3663162...
Das Erbe <ul><li>Bestehendes CMS bleibt </li></ul><ul><li>Alten HTML Code übernehmen </li></ul><ul><li>Klassische Projektk...
Der IE 6: R.I.P. <ul><li>Projektstart: frühes Nein zu IE 6 Feintuning </li></ul><ul><li>Grundlegende Unterstützung, keine ...
Der IE 6 - R.I.P. (2) <ul><li>Layout grundsätzlich ok </li></ul><ul><li>Einige Feinheiten fehlen, z.B.: </li></ul><ul><ul>...
Die Validierung <ul><li>WAI-ARIA bringt Fehler im W3C Validator </li></ul><ul><li>Erschwert Kommunikation </li></ul><ul><l...
Visualisierungen # &quot;so soll es aussehen&quot; (*) # &quot;so soll es funktionieren&quot; # Prototyping statt Pflichte...
Mockups Infoarchitektur
Visuelle Hierarchie Startseite Channel Ressort Designs Grafikagentur  Sternwerk
Prototyping html/css <ul><li>Klickbarer Prototyp </li></ul><ul><li>laufend getestet </li></ul><ul><li>Grundlage für Progra...
Klasses CSS <ul><li>Basis: YAML-Framework </li></ul><ul><li>Erspart Arbeit, ermöglicht Detailarbeit </li></ul><ul><li>Mögl...
Teaser Startseite <ul><li><div class=&quot; vie-teaser &quot;> <img ... class=&quot; vie-img-flexible &quot;> < h2 >Wien-W...
Teaser Karussell <ul><li><div class=&quot; vie-teaser &quot;> <img ... class=&quot; vie-img-flexible &quot;> < h3 >Wien-Wa...
Teaser in der 3. Spalte <ul><li><div  class=&quot;vie-teaser&quot; > <img ... class=&quot; vie-img-flexible &quot;> <div c...
Zusammenbringen BenutzerInnen und Inhalt  & Inhalte miteinander
Inhalte vorschlagen <ul><li>Top-Themen über Karussell am Seitenende </li></ul><ul><li>Promotion über Marginalspalte </li><...
RSSifizierung <ul><li>Mehr als händische Verlinkung: Verstreute Inhalte (automatisiert) zueinanderbringen </li></ul><ul><l...
Wege zum Inhalt http://www.flickr.com/photos/lachlanhardy/3588354009/sizes/l/ oder: Barrierefreiheit anschaulich
Vorleseservice &quot;Wiener Stimme&quot; z.B.:  http://www.wien.gv.at/freizeit/bildungjugend/bildung/buechereien/virtuelle...
Leicht Lesen
Videos in ÖGS - Österreichische Gebärdensprache http://www.wien.gv.at/multimedia/oegs/
Mobil <ul><li>optimierte Mobilversion unter m.wien.at </li></ul><ul><li>next step: mobile Apps (vs. native Apps) </li></ul>
Multimedia http://www.flickr.com/photos/dogfrog/2889837759/
Videoplayer <ul><li>Tastatursteuerung </li></ul><ul><li>Mitschrift und Untertitel </li></ul><ul><li>Basiert auf JW-Player ...
Videoplayer eingebettet <ul><li>Einbetten in wien.at-Artikeln via JS </li></ul><ul><li>Klasse steuert Breite (z.B. 50% ode...
Stadtplan <ul><li>www.wien.at/stadtplan </li></ul>
Danke für die Aufmerksamkeit! www.wien.at/neu Thomas Jöchler [email_address] Twitter:  @highlyoverrated
Nächste SlideShare
Wird geladen in …5
×

wien.at Relaunch 2010

1.291 Aufrufe

Veröffentlicht am

Vortrag beim Webkongress Erlangen am 7. Oktober 2010

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

wien.at Relaunch 2010

  1. 1. wien.at Relaunch 2010 Webkongress Erlangen 7. Oktober 2010 Thomas Jöchler
  2. 2. Wien - gestern und heute Wienbilder - Collage http://de.wikipedia.org/wiki/Wien und wien.at ...
  3. 3. wien.at - 15 Jahre in 1 Minute <ul><li>online 1995 unter „ www.magwien.gv.at“ </li></ul><ul><li>wenig später unter wien.at (bzw. wien.gv.at) </li></ul>http://www.wien.gv.at/medien/wienat-medien/online/geschichte/ Rathausinformation 1995
  4. 4. 1997
  5. 5. 1998
  6. 6. 2000
  7. 7. 2001
  8. 8. 2005
  9. 9. 2010
  10. 11. Status 2009 (Projektstart) wien.at ist eine der größten Plattformen Österreichs über 40.000 Seiten 850.000 unique clients / 1,9 Mill. Visits pro Monat (ÖWA - IVW-Methode) 250 Formulare, Online-Datenbanken und elektronische Services Über 100 Abteilungen produzieren Inhalte auf wien.at „ Wiens eGovernment Top Ten weltweit“ Studie: Rutgers University Newark 2009 Mehrstufiger Redaktionsworkflow Vielfältige Use Cases: News - Wissen - Tasks
  11. 12. Ausgangslage und Ziele Gelebte Barrierefreiheit Multimediale Inhalte Viel Feedback und Erfahrungen Ansprechende Optik Layout aus 2005 Orientierung durch Kontext Navigation ohne Kontext Inhalte verknüpfen Lange Klickpfade Benutzerinnen zum Inhalt führen Contentexplosion
  12. 13. Frühe Entscheidungen <ul><li>Das Erbe, der IE 6 & die Validierung </li></ul>http://www.flickr.com/photos/openistic/3663162953/sizes/o/
  13. 14. Das Erbe <ul><li>Bestehendes CMS bleibt </li></ul><ul><li>Alten HTML Code übernehmen </li></ul><ul><li>Klassische Projektkultur (Wasserfall) </li></ul>http://www.imaginevienna.at/
  14. 15. Der IE 6: R.I.P. <ul><li>Projektstart: frühes Nein zu IE 6 Feintuning </li></ul><ul><li>Grundlegende Unterstützung, keine Goodies (progressive enhancement) </li></ul><ul><li>IE 6 war 2009 noch Standardbrowser im Magistrat Wien (ab Jänner 2010 IE 7) </li></ul>
  15. 16. Der IE 6 - R.I.P. (2) <ul><li>Layout grundsätzlich ok </li></ul><ul><li>Einige Feinheiten fehlen, z.B.: </li></ul><ul><ul><li>Schlagschatten </li></ul></ul><ul><ul><li>Flexibles Layout (1024 bis 1280) </li></ul></ul><ul><ul><li>Überblendeffekte </li></ul></ul><ul><ul><li>images via data URI scheme </li></ul></ul>moderne Browser IE 6
  16. 17. Die Validierung <ul><li>WAI-ARIA bringt Fehler im W3C Validator </li></ul><ul><li>Erschwert Kommunikation </li></ul><ul><li>Beurteilung nötig </li></ul><ul><li>Fehler nicht gleich Fehler </li></ul><ul><li>Lösung: </li></ul><ul><li>Erklärung von WAI-ARIA via internem Blog + Styleguide </li></ul><ul><li>Warten auf Validator Update </li></ul>
  17. 18. Visualisierungen # &quot;so soll es aussehen&quot; (*) # &quot;so soll es funktionieren&quot; # Prototyping statt Pflichtenheft (*) in etwa
  18. 19. Mockups Infoarchitektur
  19. 20. Visuelle Hierarchie Startseite Channel Ressort Designs Grafikagentur Sternwerk
  20. 21. Prototyping html/css <ul><li>Klickbarer Prototyp </li></ul><ul><li>laufend getestet </li></ul><ul><li>Grundlage für Programmierung </li></ul><ul><li>real world Spezifikation </li></ul>Beispiel: Baukasten Formulare Prototyp Tomas Caspers
  21. 22. Klasses CSS <ul><li>Basis: YAML-Framework </li></ul><ul><li>Erspart Arbeit, ermöglicht Detailarbeit </li></ul><ul><li>Möglichst modularer Aufbau: </li></ul><ul><li>Objektorientiertes CSS </li></ul><ul><li>html-Bausteine </li></ul><ul><li>Unterstützt das CMS-Setting (html Code nur für Admins, Klassen für AutorInnen) </li></ul>
  22. 23. Teaser Startseite <ul><li><div class=&quot; vie-teaser &quot;> <img ... class=&quot; vie-img-flexible &quot;> < h2 >Wien-Wahl 2010</ h2 > <p>Sämtliche Informationen... <a ... class=&quot; bl-bigger &quot;>mehr</a></p> </li></ul><ul><li></div> </li></ul>
  23. 24. Teaser Karussell <ul><li><div class=&quot; vie-teaser &quot;> <img ... class=&quot; vie-img-flexible &quot;> < h3 >Wien-Wahl 2010</ h3 > <p>Sämtliche Informationen... <a ... class=&quot; bl-bigger &quot;>mehr</a></p> </li></ul><ul><li></div> </li></ul>
  24. 25. Teaser in der 3. Spalte <ul><li><div class=&quot;vie-teaser&quot; > <img ... class=&quot; vie-img-flexible &quot;> <div class=&quot; vie-teaser-text &quot;> <h2 class=&quot; vie-run-in &quot;>Rasch und einfach</h2> <p class=&quot; vie-run-in &quot;>Gewerbeanmeldungen... <a ... >mehr</a></p> </div> </div> </li></ul>
  25. 26. Zusammenbringen BenutzerInnen und Inhalt & Inhalte miteinander
  26. 27. Inhalte vorschlagen <ul><li>Top-Themen über Karussell am Seitenende </li></ul><ul><li>Promotion über Marginalspalte </li></ul><ul><li>Behutsamer Umgang, keine Überfrachtung </li></ul>
  27. 28. RSSifizierung <ul><li>Mehr als händische Verlinkung: Verstreute Inhalte (automatisiert) zueinanderbringen </li></ul><ul><li>RSS als Standard für neue Applikationen, bestehende nachrüsten </li></ul><ul><li>Externe Quellen </li></ul><ul><li>Verarbeitung über Contentpool (vgl. Yahoo! pipes) </li></ul><ul><li>Bereitstellung von eigenen Daten </li></ul>
  28. 29. Wege zum Inhalt http://www.flickr.com/photos/lachlanhardy/3588354009/sizes/l/ oder: Barrierefreiheit anschaulich
  29. 30. Vorleseservice &quot;Wiener Stimme&quot; z.B.: http://www.wien.gv.at/freizeit/bildungjugend/bildung/buechereien/virtuelle-buecherei.html
  30. 31. Leicht Lesen
  31. 32. Videos in ÖGS - Österreichische Gebärdensprache http://www.wien.gv.at/multimedia/oegs/
  32. 33. Mobil <ul><li>optimierte Mobilversion unter m.wien.at </li></ul><ul><li>next step: mobile Apps (vs. native Apps) </li></ul>
  33. 34. Multimedia http://www.flickr.com/photos/dogfrog/2889837759/
  34. 35. Videoplayer <ul><li>Tastatursteuerung </li></ul><ul><li>Mitschrift und Untertitel </li></ul><ul><li>Basiert auf JW-Player </li></ul>mehr beim A-Tag 5.11.2010 http://atag.accessiblemedia.at/2010/
  35. 36. Videoplayer eingebettet <ul><li>Einbetten in wien.at-Artikeln via JS </li></ul><ul><li>Klasse steuert Breite (z.B. 50% oder 100%) </li></ul><ul><li><p class=&quot;bde-stx-wrapper vie-video-50l &quot;><a href=&quot;...&quot;>Video zum Thema</a></p> </li></ul>
  36. 37. Stadtplan <ul><li>www.wien.at/stadtplan </li></ul>
  37. 38. Danke für die Aufmerksamkeit! www.wien.at/neu Thomas Jöchler [email_address] Twitter: @highlyoverrated

×