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.221 Aufrufe

Veröffentlicht am

Vortrag beim Webkongress Erlangen am 7. Oktober 2010

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.221
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
12
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • Das imperiale Erbe ist im Stadtbild und in der Wahrnehmung der Stadt sehr präsent. Ergänzt wird es durch die Ausrichtung an den Erfordernissen einer modernen Stadt im 21. Jahrhundert.
  • Die Webseite 1997 verweist auf mehrere große Themenauftritte. Heute haben einige davon, z.B. der Tourismusverband mit wien.info, aufgrund der anderen Zielgruppe völlig eigenständige Webauftritte.
  • Eine Unterseite aus dem Jahr 1998 zeigt die baumartige Gliederung in der Art eines Webkatalogs.
  • Im Jahr 2000 ist die Fülle der Webseite offensichtlich.
  • 2001 bringt eine neue Farbgebung und mit der Einführung von Teasern eine stärkere Betonung des redaktionellen Zugangs durch Auswahl und Gewichtung.
  • 2005 bringt eine Zurücknahme der Hintergrundfarben und einen weiteren Ausbau der redaktionellen Gewichtung. Ursprünglich mit vier horizontalen Teasern gestaltet, wird aufgrund des Drucks zur Präsenz auf der Startseite eine fünfte Teaserspalte rechts eingeführt (wie in der Folie zu sehen).
  • Das neue Layout, wie es sich mit dem Relaunch im Mai 2010 präsentiert. Größere Bilder bei den Teasern erlauben eine starke Bildsprache. Die horizontale Navigation ermöglicht den Direkteinstig zu fünf „Welten“: redaktionelle Inhalte unter THEMEN, Erledigungen und Amtswege unter VIRTUELLES AMT, verortete Informationen im STADTPLAN, multimedialer Zugang über TV und lokaler Bezug zum „Grätzl“ über MEIN BEZIRK.
  • Ein Screenshot einer Unterseite von wien.at. Eine vertikale Bereichsnavigation erschließt auf der linken Seite verwandte Inhalte.
  • Einige Zahlen und Fakten zum Status von wien.at. Traditionell hoher Stand bei e-Government, viele Amtswege online abwickelbar (z.B. Pass beantragen, Wahlkartenantrag, Trauungstermin am Standesamt,….).
  • Wichtige Information zum „alten“ HTML Code: stammt vom Relaunch 2005 und ist semantisch korrekt.
  • Entscheidung fiel vor den akuten Sicherheitsbedenken im Jänner 2010.
  • Know your errors: Validierung mit Hürden
  • Der Prototyp entstand in der Zusammenarbeit mit Tomas Caspers und lieferte fertige html/css Vorlagen für die Entwicklung.
  • Zum Thema Überschriften-Hierarchie: bis zum Einsatz von HTML 5 mit Überschriftengruppen erfolgt eine einigermassen nachvollziehbare und logische Vergabe der Überschriften. Bei diesem Beispiel vom Karussell gegen Ende der Seite gelangt anstelle einer h2 wie bei den anderen Teaser-Beispielen eine h3 zum Einsatz.
  • Bei der Bewerbung von weiteren Inhalten auf wien.at wird auf möglichst hohe Relevanz geachtet. Die grundsätzliche Werbefreiheit von wien.at soll nicht durch Eigenpromotion konterkariert werden.
  • Durch die im Zuge des Relaunch entwickelte Applikation „Contentpool“ wird dem CMS für die Syndizierung von Inhalten „auf die Sprünge geholfen“. Der Contentpool folgt dem Prinzip: Content ==&gt; Mixen &amp; Filtern ==&gt; Aufbereiten ==&gt; Einbinden/publizieren.
  • Das Vorleseservice auf wien.at („Wiener Stimme“) entstand aus einem interdisziplinären Forschungsprojektes von der Wiener Forschungseinrichtung ftw und stellt die erste synthetisierte Stimme mit österreichischem Idiom dar. Dieses Service ist nicht primär für sehbehinderte Personen gedacht, da diese in der Regel über entsprechende Sprachausgaben auf ihrem eigenen Rechner verfügen. Das Service richtet sich an alle Personen, die entweder Mühe haben, einen geschriebenen Text sinnerfassend zu lesen, oder die eine akustische Ausgabe aus anderen Gründen (Stichwort „Bildschirmpause“) bevorzugen. Ein Download als mp3 ist möglich.
  • Leicht lesen - verbesserte Verständlichkeit. Bei einigen Artikeln auf wien.at findet sich nun das Zeichen &amp;quot;LL&amp;quot;. &amp;quot;LL&amp;quot; bedeutet &amp;quot;Leicht Lesen&amp;quot;. Wenn dieses Zeichen angeklickt wird, kommt man auf Seiten, die so geschrieben worden sind, dass sie möglichst viele Menschen leicht verstehen können. Das gilt zum Beispiel für Menschen mit Lernschwierigkeiten. Das gilt aber auch für Menschen, die schlecht lesen können oder auch für Menschen aus anderen Ländern, die nicht gut Deutsch sprechen. &amp;quot;Leicht Lesen&amp;quot; bedeutet nicht, dass die Inhalte verkürzt oder zusammengefasst werden. Es bedeutet nur, dass zum Beispiel möglichst wenige Fremdwörter verwendet werden, dass die Sätze möglichst einfach geschrieben werden oder dass man keine unverständlichen Abkürzungen benutzt. Wenn die Informationen für viele Menschen leicht verständlich sind, ist das auch eine Entlastung für die Kundinnen und Kunden und auch für die Beamtinnen und Beamten. Noch vor dem Behördenweg kann man sich über das Internet vorinformieren oder man bringt das Anliegen gleich online ein. Unter anderem werden sowohl das Virtuelle Amt (http://www.wien.gv.at/leichtlesen/amtshelfer/) der Stadt Wien, als auch die Informationen zur Barrierefreien Stadt (http://www.wien.gv.at/leichtlesen/barrierefreiestadt/index.html) mit diesem Angebot ausgestattet.
  • Tetxtbasierte Informationen sind für Gehörlose nicht oder nur erschwert zugänglich und stellen mitunter enorme Barrieren dar: da sie die Lautsprache nie erfahren haben, finden gehörlose Menschen nur einen sehr abstrakten Zugang zum Sprachsystem, das auf Lauten und Silben beruht. Die natürliche Sprache der Gehörlosen ist die Gebärdensprache. Wien.at hat daher ca. 30 ausgewählte Seiten textbasierten Online-Content in Österreichische Gebärdensprache (ÖGS) übersetzen lassen. Das Angebot wird laufend um aktuelle Informationen erweitert, wie etwa Informationen zu Wahlen.
  • Um auch die Inhalte der bewegten Bilder auf wien.at Menschen mit Behinderungen zugänglich zu machen, gibt es auf wien.at-TV Videos in Österreichischer Gebärdensprache, Transkriptionen und Beiträge mit Untertiteln. Damit ist gewährleistet, dass möglichst viele User innen und User die Filmbeiträge abrufen können.
  • Inhalte aus der Verwaltung, Infrastruktur, Verkehr, etc. Ein möglichst barrierefreier Zugang ist über Tastatursteuerung und die erweiterte Suche, mit der die Inhalte über textbasierte Formulare abgerufen werden können, realisiert.
  • Wien ist anders - jenseits von Grantlerei
  • 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

    ×