2. Hinweis für alle, die noch
auf der TU Wien studieren
qr=táÉå
- so wie ich. Man trifft
jedes Jahr ein paar TUler
am A-Tag :-)
383.510: Elektron. Hilfsmittel für behinderte Menschen (Zagler)
383.041: Kommunikationstechnik für behinderte und alte
Menschen (Zagler)
188.497: Web Accessibility (Anjomshoaa)
IGW - Elisabeth Ehrenstrasser
4. Obligatorisches
Selbstportrait mit der
eigenen Kamera....
Seit 2007 bei ORF.at
Barrierefreiheit & Frontend-Umsetzung
5.
6. 2,4 Mio Unique User
234 Mio Page Impressions
45,7 Prozent Reichweite
ÖWA Basic 9/10 & ÖWA Plus 2010-II
7. ORF Online und Teletext GmbH & Co KG {
news,
sport,
oesterreich: {wien, tirol, noe, ooe, ...}
debatte,
wetter,
science,
iptv,
help,
tv,
fm4,
oe3,
...
futurezone (vor dem 1. 10. 2010)
}
8. ORF Online und Teletext GmbH & Co KG {
news, Juli 2010
sport, Juli 2010
oesterreich: {wien, tirol, noe, ooe, ...}
debatte, Oktober 2010
wetter,
science, September 2009
iptv, April 2010
help, September 2010
tv,
fm4, Jänner 2009
oe3,
...
}
14. Kritikpunkte
• Keine bzw. mangelhafte Alt-Attribute
• JavaScript zwingend notwendig
• Frames, Frames, Frames!
• Keine Struktur im HTML
• Farbkontraste
• Tastaturbedienbarkeit mangelhaft
• Schriftgröße in Pixeln
16. Dem Team war schon 2007
klar, dass technisch einiges
erneuert werden muss, aber:
Überbrückungslösungen sind
nie eine besonders gute Idee...
17. 3-Stufen-Modell
(hört man auf der Uni in viiiiieeelen Bachelor-VOs)
I I I I I I
mä~åìåÖ mä~åìåÖ
píê~íÉÖáÉ
18. píê~íÉÖáÉ
„Richtlinien zur Erhöhung der Barrierefreihiet auf ORF.at - Final
Working Draft“
* Beschreibt, was einzuhalten ist, inkl. Links auf WCAG 2.0
Techniques. Für externe Partner und interne Projekte
* Überschriftenstruktur global festgelegt
* Regeln für Bildbeschreibung & Title-Attribut (Credits)
* Skiplinks und deren Reihenfolge
* ARIA-Roles verpflichtend! Er weiterter Einsatz wünschenswert
* Tastaturfokus muss erkennbar sein, keine Tastaturfallen
* Keine schnell blinkenden Werbebanner
* XHTML 1.0 Strict (wenn‘s sein muss) oder HTML5 (empfohlen)
19. Projektteams bilden sich, man schaut sich an, wo es
konkrete Probleme gibt. Meist zeichnen sich schon
nach den ersten grafischen Ent würfen Probleme ab.
Intensive Zusammenarbeit Design mit Web Design.
mä~åìåÖ
20. fãéäÉãÉåíáÉêÉå
Jetzt folgen 3 Beispiele von ORF.at!
Fuzo, FM4 und News/Sport
22. Bei der Futurezone wurde
Futurezone später noch ein zweites
Mal nachgebessert und
vieles vom Feedback
aufgenommen.
• WCAG 2.0 haben sich bewährt
• Manche Teile „überoptimiert“
• Viel Twitter-Feedback
• Kommentare waren enorm hilfreich
• Redaktionelle Abläufe sind manchmal
komplexer als angenommen
Vieles, was in den WCAG 1.0 drinnen steht, sind heute echte Basics und das war auch 2008 schon so. Mit
den WCAG 2.0 finden sich viel mehr Details, ARIA ist da nur ein Punkt. 2007 war ORF Online schon klar,
dass die Punkte aus den damaligen WCAG auch die Anforderungen an das CMS definieren --> In
Ent wicklung bzw. Planung war auch vor der Schlichtung bzw. vor 2008 schon einiges.
23. hoeflehner: Der Futurezone-Feed ist nach dem Relaunch
nichts mehr wert!
hoeflehner: orf.at hat wirklich sehr kompetente Leute!
Gerade eine Mail wegen meinem gestrigen Tweet zum FuZo-
Feed bekommen, gefixt ist er auch schon!
27. Wenn Browser kein Larger/Smaller mehr
NVVU brauchen, warum sollten wir es dann noch auf
unsere Webseiten tun? Offensichtlich sind
diese Features zu selten benutzt worden.
Die Zoom-Funktion wird immer mehr Usern
bekannt. Und die klicken dann nicht mehr auf
Buttons, sondern lassen den Browser die
Arbeit erledigen.
Das Grid mit den
Topmeldungen
Der Nachrichten-Ticker
mit weiteren Meldungen.
32. Backend
• 60 Redakteure im System
• Schnelles Arbeiten unumgänglich
• Reibungsloser Workflow
• Redaktion News & Sport (inkl. Liveticker)
• Infodesign
• Community-Management
• > 65.000 Stories pro Jahr
33. == Überschrift ==
Ich bin ein Absatz und lande zwischen <p>-
Tags. __Linktext(http://orf.at)__
Wikitext statt fixe Boxen.
**strong** //em// >>q<< Vorteile: Einfach zu Speichern, Diff möglich -
> Versionen, schnell zu schreiben, Textteile
können schnell kopiert werden
>>>
Nachteile: Am Anfang Umstellungsprobleme,
blockquote da viele noch nie Wikitext geschrieben
<<< haben.
Parser muss gewisse Fehlertoleranz
!!! besitzen.
Factbox
!!!
@@video:12345@@
[[12345 / Ich bin eine Bild-Caption]]
34. Warum steht hier eine Zeit
neben den Wörtern?
Im RedSys wurde früher in
„Sprechzeit“ gemessen.
Redakteure wissen genau, wie
lange in Sprechzeit ihre Story
sein soll.
35. Styleguide
• 30 Seiten mit allen Details
• Wie zeichne ich meine Geschichte aus?
• 4 Seiten über Barrierefreiheit
• Manuelle Kontrolle notwendig
40. Frontend
• Web Performance Optimierungen
• jQuery als JavaScript-Library
• WCAG 2.0 Level AA
• WAI-ARIA Landmark Roles
• Schlankes, semantisches Markup
41. Performance
• Cache für: Datenbank-Objekte, geparste
Wikitexte
• GZIP vom HTML – Caching Servlet
• Automatisierter YUI Compressor
98 von 100 Aufrufen
werden aus dem Cache
abgewickelt.
• Kein AJAX auf der Startseite
• AdServer-JS & Tracking am Seitenende
42. Q=pÉêîÉê
Bisheriges Maximum:
1.000 Requests pro Sekunde
Maximale Auslastung bisher
lag bei 5%...
43. Designziele
• Gewöhntes Layout beibehalten
• Grid muss barrierefrei gelöst werden
• Ticker soll ein Ticker bleiben
• Kontrastanforderungen beachten
• Lesbarkeit der Texte erhöhen
Intensive Zusammenarbeit zwischen Web Developer und
Designerin, von der beide Seiten extrem profitiert haben.
45. „^ÅÅÉëëáÄäÉ=dêáÇë“
H1 A380-Notlandung: "Wir hörten plötzlich einen Knall"
H1 Justizanordnung: Banken müssen Grassers Geldflüsse offenlegen
H1 sport.ORF.at: Rapid kämpft um Aufstiegschance
H1 Erneut Sprengsätze abgefangen: Kein Ende der Paketbombenserie in Athen
H1 oesterreich.ORF.at: Bub blieb in Korb stecken
H1 Die weibliche Pop-Art
59. Bildcredits
Attribution-NoDerivs 2.0 Generic:
Strategie - Some rights reserved by Tambako the Jaguar.
http://www.flickr.com/photos/tambako/4598642399
Attribution 2.0 Generic:
Planung - Walt Disney shows Disneyland plans to Orange County
officials, Dec. 1954 - Some rights reserved by Orange County Archives
http://www.flickr.com/photos/ocarchives/3952964087
Implementieren - Picture by Lewis Hine, Man-made - New York City -
Empire State Building worker, Some rights reserved by Trodel
http://www.flickr.com/photos/trodel/3598600991
