1. wien.at Relaunch 2010 Webkongress Erlangen 7. Oktober 2010 Thomas Jchler

2. Wien - gestern und heute Wienbilder - Collage http://de.wikipedia.org/wiki/Wien und wien.at ... 3. wien.at - 15 Jahre in 1 Minute

online 1995 unter www.magwien.gv.at

wenig spter unter wien.at (bzw. wien.gv.at)

http://www.wien.gv.at/medien/wienat-medien/online/geschichte/ Rathausinformation 1995 4. 1997 5. 1998 6. 2000 7. 2001 8. 2005 9. 2010 10. 11. Status 2009 (Projektstart) wien.at ist eine der grten 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 Vielfltige Use Cases:News - Wissen - Tasks 12. Ausgangslage und Ziele Gelebte Barrierefreiheit Multimediale Inhalte Viel Feedback und Erfahrungen Ansprechende Optik Layout aus 2005 Orientierung durch Kontext Navigation ohne Kontext Inhalte verknpfen Lange Klickpfade Benutzerinnen zum Inhalt fhren Contentexplosion 13. Frhe Entscheidungen

Das Erbe, der IE 6 & die Validierung

http://www.flickr.com/photos/openistic/3663162953/sizes/o/ 14. Das Erbe

Bestehendes CMS bleibt

Alten HTML Code bernehmen

Klassische Projektkultur (Wasserfall)

http://www.imaginevienna.at/ 15. Der IE 6: R.I.P.

Projektstart: frhes Nein zu IE 6 Feintuning

Grundlegende Untersttzung, keine Goodies (progressive enhancement)

IE 6 war 2009 noch Standardbrowser im Magistrat Wien (ab Jnner 2010 IE 7)

16. Der IE 6 - R.I.P. (2)

Layout grundstzlich ok

Einige Feinheiten fehlen, z.B.:

• Schlagschatten

• Flexibles Layout (1024 bis 1280)

• berblendeffekte

• images via data URI scheme

moderne Browser IE 6 17. Die Validierung

WAI-ARIA bringt Fehler im W3C Validator

Erschwert Kommunikation

Beurteilung ntig

Fehler nicht gleich Fehler

Lsung:

Erklrung von WAI-ARIA via internem Blog + Styleguide

Warten auf Validator Update

18. Visualisierungen # "so soll es aussehen" (*) # "so soll es funktionieren" # Prototyping statt Pflichtenheft (*) in etwa 19. Mockups Infoarchitektur 20. Visuelle Hierarchie Startseite Channel Ressort Designs GrafikagenturSternwerk 21. Prototyping html/css

Klickbarer Prototyp

laufend getestet

Grundlage fr Programmierung

real world Spezifikation

Beispiel: Baukasten FormularePrototypTomas Caspers 22. Klasses CSS

Basis: YAML-Framework

Erspart Arbeit, ermglicht Detailarbeit

Mglichst modularer Aufbau:

Objektorientiertes CSS

html-Bausteine

Untersttzt das CMS-Setting (html Code nur fr Admins, Klassen fr AutorInnen)

23. Teaser Startseite

< h2 >Wien-Wahl 2010 h2 >

Smtliche Informationen...mehr

24. Teaser Karussell

< h3 >Wien-Wahl 2010 h3 >

Smtliche Informationen...mehr

25. Teaser in der 3. Spalte

Rasch und einfach

Gewerbeanmeldungen... mehr

26. Zusammenbringen BenutzerInnen und Inhalt& Inhalte miteinander 27. Inhalte vorschlagen

Top-Themen ber Karussell am Seitenende

Promotion ber Marginalspalte

Behutsamer Umgang, keine berfrachtung

28. RSSifizierung

Mehr als hndische Verlinkung: Verstreute Inhalte (automatisiert) zueinanderbringen

RSS als Standard fr neue Applikationen, bestehende nachrsten

Externe Quellen

Verarbeitung ber Contentpool (vgl. Yahoo! pipes)

Bereitstellung von eigenen Daten

29. Wege zum Inhalt http://www.flickr.com/photos/lachlanhardy/3588354009/sizes/l/ oder: Barrierefreiheit anschaulich 30. Vorleseservice "Wiener Stimme" z.B.:http://www.wien.gv.at/freizeit/bildungjugend/bildung/buechereien/virtuelle-buecherei.html 31. Leicht Lesen 32. Videos in GS - sterreichische Gebrdensprache http://www.wien.gv.at/multimedia/oegs/ 33. Mobil

optimierte Mobilversion unter m.wien.at

next step: mobile Apps (vs. native Apps)

34. Multimedia http://www.flickr.com/photos/dogfrog/2889837759/ 35. Videoplayer

Tastatursteuerung

Mitschrift und Untertitel

Basiert auf JW-Player

mehr beim A-Tag 5.11.2010 http://atag.accessiblemedia.at/2010/ 36. Videoplayer eingebettet

Einbetten in wien.at-Artikeln via JS

Klasse steuert Breite (z.B. 50% oder 100%)

Video zum Thema

37. Stadtplan

www.wien.at/stadtplan

38. Danke fr die Aufmerksamkeit! www.wien.at/neu Thomas Jchler [email_address] Twitter:@highlyoverrated