SlideShare ist ein Scribd-Unternehmen logo
1 von 59
Mojo,
  Twitter
und Konsorten


Philipp Naderer
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
Mojo,
  Twitter
und Konsorten


Philipp Naderer
Obligatorisches
                                   Selbstportrait mit der
                                   eigenen Kamera....




          Seit 2007 bei ORF.at
Barrierefreiheit & Frontend-Umsetzung
2,4 Mio Unique User

234 Mio Page Impressions

45,7 Prozent Reichweite



                        ÖWA Basic 9/10 & ÖWA Plus 2010-II
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)
}
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,
    ...
}
báå=_äáÅâ=òìêüÅâKKK
Maria Putzhuber hat einen WCAG 1.0 Check
durchgeführt am 26. September 2007.

http://goo.gl/Hp5so
„Zumindest ein
   Bekenntnis zur
Barrierefreiheit wäre
  schon irgendwie
    gefragt, [...]“

           http://www.mainweb.at/blog/2007/10/11/bewegliche-ziele/
g^>
t`^d=OKM=iÉîÉä=^^E^F
áëí=áããÉê=ìåëÉêG=wáÉäK

         G=fÅÜ=ëéêÉÅÜÉ=ÜáÉê=Ñüê=ÇáÉ=lRc=låäáåÉ=ìåÇ=qÉäÉíÉñí=dãÄe=C=`o=hd
Kritikpunkte
• Keine bzw. mangelhafte Alt-Attribute
• JavaScript zwingend notwendig
• Frames, Frames, Frames!
• Keine Struktur im HTML
• Farbkontraste
• Tastaturbedienbarkeit mangelhaft
• Schriftgröße in Pixeln
Schlichtung Ende 2007
eingeleitet. Partner: ORF &
Eva Papst / Martin
Ladstädter.

http://goo.gl/ILoxy
Dem Team war schon 2007
klar, dass technisch einiges
erneuert werden muss, aber:

Überbrückungslösungen sind
nie eine besonders gute Idee...
3-Stufen-Modell
    (hört man auf der Uni in viiiiieeelen Bachelor-VOs)




I      I       I     I              I               I


    mä~åìåÖ                              mä~åìåÖ


                     píê~íÉÖáÉ
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)
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ä~åìåÖ
fãéäÉãÉåíáÉêÉå




        Jetzt folgen 3 Beispiele von ORF.at!
        Fuzo, FM4 und News/Sport
Umsetzung:
Frühjahr bis November 2008




                         Das ist übrigens Tante Jutta, die
                         Foren-Gouvernante der ORF.at Fuzo.
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.
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!
réÇ~íÉMV
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.
NVVU
OMMN
Backend
• 60 Redakteure im System
• Schnelles Arbeiten unumgänglich
• Reibungsloser Workflow
  •   Redaktion News & Sport (inkl. Liveticker)

  •   Infodesign

  •   Community-Management

• > 65.000 Stories pro Jahr
== Ü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]]
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.
Styleguide
• 30 Seiten mit allen Details
• Wie zeichne ich meine Geschichte aus?
• 4 Seiten über Barrierefreiheit
• Manuelle Kontrolle notwendig
Bildupload
• Verpflichtende „Bildbeschreibung“
• Title-Attribut für Credits verwenden
• Guidelines erstellen                   Agenturen verlangen
                                         Credits im Title.




• Regelmäßiges Feedback
Gute Bildbeschreibungen helfen
enorm bei der Suche. Win-Win!
Frontend

• Web Performance Optimierungen
• jQuery als JavaScript-Library
• WCAG 2.0 Level AA
• WAI-ARIA Landmark Roles
• Schlankes, semantisches Markup
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
Q=pÉêîÉê




           Bisheriges Maximum:
           1.000 Requests pro Sekunde

           Maximale Auslastung bisher
           lag bei 5%...
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.
„^ÅÅÉëëáÄäÉ=dêáÇë“
                                              Problem: Fontrendering in Photoshop lässt sich
                                              besser kontrollieren, sieht besser aus.




                               Link tabindex=-1, dadurch nicht antabbar

                               <h1 tabindex=“0“>, somit mit Tab erreichbar


<div class="griditem col1 row0 version2q">
   <a href="/stories/2023644/" tabindex="-1">
       <h1 class="hidden offscreen" tabindex="0">Justizanordnung: Banken
müssen Grassers Geldflüsse offenlegen</h1>
       <img src="file.jpg"
            alt="Karl-Heinz Grasser" title="&copy; Reuters/Lisi Niesner"/>
   </a>
</div>
„^ÅÅÉëëáÄäÉ=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
Smartphones an die Macht!
ÜííéWLLlRcK~íLä
^ìÑâä~ééJqáÅâÉê


            WAI-ARIA:
            aria-expanded=“true“
^ìÑâä~ééJqáÅâÉê

            :focus richtig setzen
t^fJ^Rf^
         pÅÜåÉääÉê=ÖÉÜíÚë=åáÅÜí>

$("#story").attr("role","article");
$("#story .fact").attr("role","complementary");
$("#content").attr("role","main");
$("#navigation").attr("role","navigation");
$("#header").attr("role","banner");
role="banner"
                          role="navigation"




         role="article"



                            role="main"
t^fJ^Rf^=ïáêÇ=áå=
wìâìåÑí=å~íáî=áã=eqjiR=
~ìÑ=lRcK~í=~ìëÖÉäáÉÑÉêíK
tÉêÄìåÖ=C=^ÇpÉêîÉê
råÇ=ëÉáí=ÖÉëíÉêåKKK
Betaversion!
 Feedback?
Testen & QA
• Alle aktuellen Browser + IE6
• JAWS 10, 11 und 12 und NVDA

• Non-IE: 40 – 50 %
• IE7 und IE8: 30 – 50 %
• IE6: 5 – 12 %
IE6 ist ein Bürobrowser
 7-8 Uhr   12 Uhr
                    16 Uhr



                         18 Uhr




                      Feierabend
Mulţumesc!
  philipp.naderer@orf.at

    @botic auf twitter
  http://botic.antville.org
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

Weitere ähnliche Inhalte

Andere mochten auch

CS0022 - Automotive PBS Conveyor and Controls
CS0022 - Automotive PBS Conveyor and ControlsCS0022 - Automotive PBS Conveyor and Controls
CS0022 - Automotive PBS Conveyor and Controls
Nick Darrall
 
Carbrooke site Plan
Carbrooke site PlanCarbrooke site Plan
Carbrooke site Plan
Jon Boon
 

Andere mochten auch (14)

Interactive Storyboard mini example
Interactive Storyboard mini exampleInteractive Storyboard mini example
Interactive Storyboard mini example
 
Our top 5 Italian Easter Treats
Our top 5 Italian Easter TreatsOur top 5 Italian Easter Treats
Our top 5 Italian Easter Treats
 
Data Imagine Slideshare
Data Imagine   SlideshareData Imagine   Slideshare
Data Imagine Slideshare
 
CS0022 - Automotive PBS Conveyor and Controls
CS0022 - Automotive PBS Conveyor and ControlsCS0022 - Automotive PBS Conveyor and Controls
CS0022 - Automotive PBS Conveyor and Controls
 
01 de la cruz carmen enfoque de genero en la cooperacion al desarrollo
01 de la cruz carmen enfoque de genero en la cooperacion al desarrollo01 de la cruz carmen enfoque de genero en la cooperacion al desarrollo
01 de la cruz carmen enfoque de genero en la cooperacion al desarrollo
 
黃少偉lab.
黃少偉lab.黃少偉lab.
黃少偉lab.
 
吳宗泓作品集
吳宗泓作品集吳宗泓作品集
吳宗泓作品集
 
Ryerson 6th August
Ryerson 6th AugustRyerson 6th August
Ryerson 6th August
 
Carbrooke site Plan
Carbrooke site PlanCarbrooke site Plan
Carbrooke site Plan
 
Medical Missionary
Medical MissionaryMedical Missionary
Medical Missionary
 
ResumeAndresupdated
ResumeAndresupdatedResumeAndresupdated
ResumeAndresupdated
 
Book reference management
Book reference managementBook reference management
Book reference management
 
Innovation Growth Strategies for Small Business
Innovation Growth Strategies for Small BusinessInnovation Growth Strategies for Small Business
Innovation Growth Strategies for Small Business
 
Gsp investiture
Gsp investitureGsp investiture
Gsp investiture
 

Ähnlich wie Mojo, Twitter und Konsorten

10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
Sebastian Springer
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
Mayflower GmbH
 
AG Softwaretechnik
AG SoftwaretechnikAG Softwaretechnik
AG Softwaretechnik
Roland M
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
Ulrich Schmidt
 
CCD 2011: Rollout eines Confluence Intranets (Sascha Knöchel)
CCD 2011: Rollout eines Confluence Intranets (Sascha Knöchel)CCD 2011: Rollout eines Confluence Intranets (Sascha Knöchel)
CCD 2011: Rollout eines Confluence Intranets (Sascha Knöchel)
Communardo GmbH
 

Ähnlich wie Mojo, Twitter und Konsorten (20)

HTML5-Features
HTML5-FeaturesHTML5-Features
HTML5-Features
 
JavaScript Days 2015: Security
JavaScript Days 2015: SecurityJavaScript Days 2015: Security
JavaScript Days 2015: Security
 
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
 
2011 05-05 activiti
2011 05-05 activiti2011 05-05 activiti
2011 05-05 activiti
 
20110223 activiti
20110223 activiti20110223 activiti
20110223 activiti
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 
DNUG ak-anwendungsentwicklung.18042011
DNUG ak-anwendungsentwicklung.18042011DNUG ak-anwendungsentwicklung.18042011
DNUG ak-anwendungsentwicklung.18042011
 
AG Softwaretechnik
AG SoftwaretechnikAG Softwaretechnik
AG Softwaretechnik
 
20120207 prs ib_js_libraries_v02
20120207 prs ib_js_libraries_v0220120207 prs ib_js_libraries_v02
20120207 prs ib_js_libraries_v02
 
20110406 activiti mai
20110406 activiti mai20110406 activiti mai
20110406 activiti mai
 
OOP 2012 - Udo Pracht - DevOps Einführung und Überblick
OOP 2012 - Udo Pracht - DevOps Einführung und ÜberblickOOP 2012 - Udo Pracht - DevOps Einführung und Überblick
OOP 2012 - Udo Pracht - DevOps Einführung und Überblick
 
Frontend Best Practices
Frontend Best PracticesFrontend Best Practices
Frontend Best Practices
 
20110406 activiti april
20110406 activiti april20110406 activiti april
20110406 activiti april
 
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CKnockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
 
Erfolgreiche rewrites
Erfolgreiche rewritesErfolgreiche rewrites
Erfolgreiche rewrites
 
ConventionCamp Hannover
ConventionCamp HannoverConventionCamp Hannover
ConventionCamp Hannover
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
 
CCD 2011: Rollout eines Confluence Intranets (Sascha Knöchel)
CCD 2011: Rollout eines Confluence Intranets (Sascha Knöchel)CCD 2011: Rollout eines Confluence Intranets (Sascha Knöchel)
CCD 2011: Rollout eines Confluence Intranets (Sascha Knöchel)
 

Mojo, Twitter und Konsorten

  • 1. Mojo, Twitter und Konsorten Philipp Naderer
  • 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
  • 3. Mojo, Twitter und Konsorten Philipp Naderer
  • 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, ... }
  • 9.
  • 11. Maria Putzhuber hat einen WCAG 1.0 Check durchgeführt am 26. September 2007. http://goo.gl/Hp5so
  • 12. „Zumindest ein Bekenntnis zur Barrierefreiheit wäre schon irgendwie gefragt, [...]“ http://www.mainweb.at/blog/2007/10/11/bewegliche-ziele/
  • 13. g^> t`^d=OKM=iÉîÉä=^^E^F áëí=áããÉê=ìåëÉêG=wáÉäK G=fÅÜ=ëéêÉÅÜÉ=ÜáÉê=Ñüê=ÇáÉ=lRc=låäáåÉ=ìåÇ=qÉäÉíÉñí=dãÄe=C=`o=hd
  • 14. Kritikpunkte • Keine bzw. mangelhafte Alt-Attribute • JavaScript zwingend notwendig • Frames, Frames, Frames! • Keine Struktur im HTML • Farbkontraste • Tastaturbedienbarkeit mangelhaft • Schriftgröße in Pixeln
  • 15. Schlichtung Ende 2007 eingeleitet. Partner: ORF & Eva Papst / Martin Ladstädter. http://goo.gl/ILoxy
  • 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
  • 21. Umsetzung: Frühjahr bis November 2008 Das ist übrigens Tante Jutta, die Foren-Gouvernante der ORF.at Fuzo.
  • 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!
  • 24.
  • 25.
  • 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.
  • 28. NVVU
  • 29. OMMN
  • 30.
  • 31.
  • 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
  • 36. Bildupload • Verpflichtende „Bildbeschreibung“ • Title-Attribut für Credits verwenden • Guidelines erstellen Agenturen verlangen Credits im Title. • Regelmäßiges Feedback
  • 37. Gute Bildbeschreibungen helfen enorm bei der Suche. Win-Win!
  • 38.
  • 39.
  • 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.
  • 44. „^ÅÅÉëëáÄäÉ=dêáÇë“ Problem: Fontrendering in Photoshop lässt sich besser kontrollieren, sieht besser aus. Link tabindex=-1, dadurch nicht antabbar <h1 tabindex=“0“>, somit mit Tab erreichbar <div class="griditem col1 row0 version2q"> <a href="/stories/2023644/" tabindex="-1"> <h1 class="hidden offscreen" tabindex="0">Justizanordnung: Banken müssen Grassers Geldflüsse offenlegen</h1> <img src="file.jpg" alt="Karl-Heinz Grasser" title="&copy; Reuters/Lisi Niesner"/> </a> </div>
  • 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
  • 48. ^ìÑâä~ééJqáÅâÉê WAI-ARIA: aria-expanded=“true“
  • 49. ^ìÑâä~ééJqáÅâÉê :focus richtig setzen
  • 50. t^fJ^Rf^ pÅÜåÉääÉê=ÖÉÜíÚë=åáÅÜí> $("#story").attr("role","article"); $("#story .fact").attr("role","complementary"); $("#content").attr("role","main"); $("#navigation").attr("role","navigation"); $("#header").attr("role","banner");
  • 51. role="banner" role="navigation" role="article" role="main"
  • 56. Testen & QA • Alle aktuellen Browser + IE6 • JAWS 10, 11 und 12 und NVDA • Non-IE: 40 – 50 % • IE7 und IE8: 30 – 50 % • IE6: 5 – 12 %
  • 57. IE6 ist ein Bürobrowser 7-8 Uhr 12 Uhr 16 Uhr 18 Uhr Feierabend
  • 58. Mulţumesc! philipp.naderer@orf.at @botic auf twitter http://botic.antville.org
  • 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