Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2009: eine Tastatur-Odyssee

2,462 views

Published on

Präsentation am Wiener A-Tag `09 - Analyse der Tastaturbedienbarkeit des österreichischen Web 2.0 Startup yasssu.com.

Download ist möglich, aber die PDF-Datei ist nicht barrierefrei und natürlich ohne Screencasts. Präsentation mit Screencasts auf sprungmarker.de (http://url.ie/2tpc)

Published in: Design, Technology
  • Überprüfen Sie die Quelle ⇒ www.WritersHilfe.com ⇐ . Diese Seite hat mir geholfen, eine Diplomarbeit zu schreiben.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/qURD } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/qURD } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download doc Ebook here { https://soo.gd/qURD } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

2009: eine Tastatur-Odyssee

  1. 1. Also sprach Zarathustra: ein Web für Alle oder Keinen 00:00 Der A-TAG ´09 präsentiert
  2. 2. Am Anfang war die Tastatur und der Walzer 03:30
  3. 3. eine sprungmarker Produktion 03:48
  4. 4. am Beispiel von yasssu.com 03:99 2009: Eine Tastatur-Odyssee
  5. 5. yasssu.com – media for you 04:10
  6. 6. Podcast, Video, Personalisierung, Upload, Mobile 04:15 <ul><li>Podcastservice (Audio, </li></ul><ul><li>Video) </li></ul><ul><li>Prinzip Select-Drag-Drop </li></ul><ul><li>my yasssu </li></ul><ul><li>abrufbar via Web, Mobile </li></ul><ul><li>und Telefon (kein Scherz ;)) </li></ul><ul><li>Upload-Funktion </li></ul><ul><li>Premium-Möglichkeit </li></ul>
  7. 7. gut, wir könnten auch nur tabben 17:52 Teil I: Die Werkzeuge
  8. 8. Bookmarklet von Dirk Ginader – zeigt den aktuellen Fokus an 18:15 LogFocus
  9. 9. 18:25 LogFocus Bookmarklet – Konsole Firebug – schnelles Debuggen
  10. 10. 18:35 LogFocus Dirk Ginader http://url.ie/2mg3 <ul><li>Vorteile </li></ul><ul><li>einfache Handhabung </li></ul><ul><li>Historie </li></ul><ul><li>browserunabhängig (konsolen-abhängig) </li></ul><ul><li>Nachteile </li></ul><ul><li>nur für fokussierbare Elemente wie Links, Formulare </li></ul><ul><li>Fokus auf der Webseite ändert sich nicht </li></ul>
  11. 11. Teil der Firefox Accessibility Extension – Add-on für Firefox 18:45 Focus Inspector
  12. 12. 18:55 Teil der Firefox Accessibility Extension – Add-on für Firefox Focus Inspector
  13. 13. 19:05 Focus Inspector Beim Tabben wird das aktuell fokussierte Element hervorgehoben
  14. 14. 19:15 Focus Inspector http://addons.mozilla.org/en-US/firefox/addon/5809 <ul><li>Vorteile </li></ul><ul><li>einfache Handhabung </li></ul><ul><li>effektiv und gut sichtbarer Fokus </li></ul><ul><li>Farbprüfung, Linkcodierung einsehbar </li></ul><ul><li>Nachteile </li></ul><ul><li>etwas ladeintensiv </li></ul><ul><li>Probleme mit absoluten Positionierungen (Fokus verlässt sichtbaren Bereich) </li></ul>
  15. 15. Add-on für Firefox – zählt mit IDs fokussierbare Elemente durch 19:20 Mouseless Browsing
  16. 16. 19:25 Mouseless Browsing Add-on für Firefox - Einstellungen IDs
  17. 17. 19:30 Mouseless Browsing Add-on für Firefox - Einstellungen – Fokussierbare Elemente
  18. 18. 19:35 Mouseless Browsing Add-on für Firefox - Einstellungen – Tastaturkürzel
  19. 19. 19:40 Mouseless Browsing Add-on für Firefox - ID-Ansicht der fokussierbaren Elemente
  20. 20. 19:45 Mouseless Browsing http://addons.mozilla.org/en-US/firefox/addon/879 <ul><li>Vorteile </li></ul><ul><li>einfache Handhabung </li></ul><ul><li>macht fast alle fokussierbaren Elemente ansteuerbar </li></ul><ul><li>auch Flash, DIV </li></ul><ul><li>umfangreiche Konfiguration </li></ul><ul><li>Nachteile </li></ul><ul><li>festen Fokus belegen Formulare und Flash (mit CTRL + ID verlassbar) </li></ul><ul><li>Fokus auf der Webseite oft nicht besser, Layout wird beeinflusst </li></ul><ul><li>nicht alle Elemente werden erfasst (Leere Links, Bilder mit onclick) </li></ul>
  21. 21. Ganz viel an der schönen blauen Donau und Johann Strauss 19:50 Teil II: Tabo Magnetischer Alltag (TMA)
  22. 22. und viel zu viele weiße Flecken 31:10 Erreichbarkeit
  23. 23. Flash mit Weiterleitung 31:20 Startseite und Vorauswahl
  24. 24. 0%: Navigation, Flash 48:10
  25. 25. Startseite mit Weiterleitung auf die Übersichtsseite 47:00
  26. 26. Fast zu 100% arbeitet yasssu mit diesen DIV-Konstrukten 48:30 Nicht erreichbare DIVs <ul><li>Aufklappmenü auf onclick </li></ul><ul><li>aber : nicht mit der Tastatur erreichbar </li></ul>
  27. 27. 150% Code-Krampf  führt zu Minus -Erreichbarkeit 48:35 Nicht erreichbare DIVs
  28. 28. http://docs.jquery.com/Effects/toggle 48:40 Lösung <ul><li>Semantik </li></ul><ul><ul><li>standardkonforme Hauptnavigation (Listen) </li></ul></ul><ul><ul><li>echte Links einsetzen </li></ul></ul><ul><li>Add-on: Aufklappmechanismus barrierefrei </li></ul><ul><ul><li>1. Ebene muss erreichbar sein </li></ul></ul><ul><ul><li>nicht das Rad neu erfinden </li></ul></ul><ul><ul><li>auf ein Standard-Javascript-Framework zurückgreifen </li></ul></ul><ul><ul><li>Beispiel: jQuery – Basiseffekt toggle( ) ist tastaturbedienbar </li></ul></ul>
  29. 29. Player, Auswahl für my yasssu – Hier spielt sich alles ab 48:50 Detailseite Podcast
  30. 30. 0%: Navigation, Player, Tabs, Sendungswechsel, Optionen 48:50
  31. 31. Podcast-Detailseite mit Player und Auswahl der Sendungen 49:00
  32. 32. Screencast: Tastaturbedienung Detailseite 49:30
  33. 33. Der Kern von yasssu: Audio- und Videos in diesem Player 49:45 Nicht erreichbarer Player <ul><li>nicht mal im Internet </li></ul><ul><li>Explorer erreichbar wmode = transparent </li></ul><ul><li>min. Möglichkeiten </li></ul><ul><li>Autostart </li></ul><ul><li>Nur Play + Pause </li></ul><ul><li>keine Untertitelung </li></ul><ul><li>Video: keine Audio- Beschreibung </li></ul>
  34. 34. Barrierefreiheit nun mit 2 Plugins + stark in Entwicklung 49:55 Lösung I – JW Player <ul><li>Standards nutzen! </li></ul><ul><li>viele Optionen </li></ul><ul><li>per Tastatur zugänglich </li></ul><ul><li>Untertitelung CC </li></ul><ul><li>(Timed Text) </li></ul><ul><li>AD: Audio- </li></ul><ul><li>description </li></ul><ul><li>Playlist </li></ul>Screenshot: http://www.longtailvideo.com/support/jw-player-setup-wizard
  35. 35. Untertitelung CC als Plugin, nicht immer tastaturbedienbar 50:00 Lösung II – Flowplayer <ul><li>viele Optionen </li></ul><ul><li>per Tastatur bedingt zugänglich </li></ul><ul><li>Untertitelung CC (Timed Text, SubRib, </li></ul><ul><li>FLV cuepoints) </li></ul><ul><li>Audiobeschreibung via Audio Plugin </li></ul><ul><li>Playlist </li></ul>Screenshot: http://flowplayer.org/plugins/flash/captions.html A more accessible Flowplayer: setzt auf dem Plugin Controlbar auf
  36. 36. Quelle: MALT Wiki Techshare 2009 - Slideshare 50:00 Lösung – JW Player
  37. 37. Podcast Karussell, Uploads, Sortierung yasssuCALL 50:10 my yasssu
  38. 38. my yasssu 50:25
  39. 39. my yasssu – hier wird es interaktiv 50:30
  40. 40. Screencast: Tastaturbedienung my yasssu 50:40
  41. 41. Selbst Mouseless Browsing muss da passen ... 50:45 Flash-Karussell ! wmode = transparent ! <ul><li>! Grafiken auf onclick ! </li></ul><ul><li>Semantik! </li></ul><ul><li>richtige Buttons </li></ul>
  42. 42. my yasssu – Upload-Layer 58:28
  43. 43. my yasssu – Upload-Layer 58:30
  44. 44. Viele Interaktionen werden mit Hilfe von Layern realisiert 58:45 <ul><li>Layer erhalten nicht den Fokus </li></ul><ul><li>Alles wieder und wieder </li></ul><ul><li>durchtabben </li></ul><ul><li>Layer schließt sich ungewollt </li></ul><ul><li>Standards nutzen </li></ul><ul><li>Beispiel Layerskripte von jQuery </li></ul><ul><li>auf Tastaturbedienbarkeit testen </li></ul>Lost Layers
  45. 45. Fokus immer im ersten fokussierbaren Element 1:08:53 jmpopups – tastaturbedienbar ... aber Screenshot: http://otavioavila.com/jmpopups-example/
  46. 46. Screencast: jmpopups 1:09:20
  47. 47. also weitersuchen   <ul><li>Nicht mit einem Screenreader lesbar weil: display: none; </li></ul><ul><li>Aber es funktioniert mit: </li></ul><ul><ul><li>visibility: hidden </li></ul></ul><ul><ul><li>aus dem sichtbaren Bereich schieben </li></ul></ul>1:09:45
  48. 48. tastaturbedienbar und mit Screenreader nutzbar YUI – Dialog Quickstart Example Screenshot: http://developer.yahoo.com/yui/examples/container/dialog-quickstart_clean.html 1:19:53
  49. 49. Screencast: YUI – Dialog Quickstart Example 1:20:10
  50. 50. yasssu Maxime: Select – Drag - Drop Auswahlseite: Drag & Drop 1:51:00
  51. 51. 1:52 Screencast: Drag & Drop yasssu.com
  52. 52. Opera: Accessible drag and drop using WAI-ARIA Drag & Drop tastaturbedienbar 1:51:00
  53. 53. Screencast: http://devfiles.myopera.com/articles/735/example.html <ul><li>arbeitet mit WAI-ARIA </li></ul><ul><ul><li>aria-grabbed </li></ul></ul><ul><ul><li>aria-dropeffect </li></ul></ul><ul><li>Javascript </li></ul><ul><li>Tabben, Leertaste und </li></ul><ul><li>Pfeiltasten zur Auswahl </li></ul>1:52:10
  54. 54. Die Tastatur und über die Tastatur hinaus ... Teil III: Mission Tabbius beendet 1:52:10
  55. 55. Jetzt könnten noch viele andere Vorträge beginnen ... 2:03:34
  56. 56. Ein wenig psychedelisch muss es schon werden ... 2:04:10
  57. 57. ... am Schluss – macht Kubrick ja auch nicht anders 2:11:20
  58. 58. für mehr Barrierefreiheit 2:20:28
  59. 59. und nun die blaue Donau von Johann Strauss 2:25:00 Sylvia Egger von s prungmarker.de Senior Webproducerin Brainbits GmbH in Köln yasssu.com Stanley Kubrick für seinen Film 2001: Odyssee im Weltraum Dank an Patrick Lauke für seinen Vortrag Keyboard accessibility Mit Dank an
  60. 60. folgen Sie mir doch auf twitter: @sprungmarkers 2:28:51 Credits FreePixels.com (Tastaturbilder) Johann und Richard Strauss Györgi Ligeti MALT Wiki Techshare 2009 – Nick Freerar http://www.slideshare.net/nfreear/malt-wiki-techshare2009 A more accessible Flowplayer http://www.regione.emilia-romagna.it/sin_info/LineeGuida/examples/flowplayer/ Screencasts erstellt mit ScreenFlow Soundtrack zur Präsentation bei lastfm: http://www.lastfm.de/music/Soundtrack/2001+-+A+Space+Odyssey

×