Barrierefreiheit im
 Netz der Daten

  Chris2an Heilmann, Best of Accessibility, Duesseldorf, September 2009
Webentwickler habens 
schwer.
Barrierefreiheit ist 
eigentlich einfach.
Ein Problem ist das das 
“Problem Barrierefreiheit” 
auf uns abgeschoben wird.
Und wenn wir dann etwas 
fast barrierefrei erstellt 
haben meckern 
hauptsächlich andere 
Entwickler...
Die Hauptursache fuer 
dieses Dilemma ist das wir 
das Web falsch anpacken.
Web Technologie ist nicht 
so schlecht wie wir sie 
immer darstellen...
160x200 Aufloesung
16 Farben
4 Farben in jedem 8x8 Block
Web Technologien sind gut 
genug ‐ wenn man sie 
rich2g anwendet.
hVp://uk.tv.yahoo.com
hVp://uk.tv.yahoo.com
hVp://finance.yahoo.com/currency‐converter?
        u#from=USD;to=EUR;amt=1
Screenshot of a currency converter with
and without JavaScript. With JavaScript you
          get autosuggestions.
hVp://developer.yahoo.net/blog/archives/2009/01/
            accessible_converter.html
Das Web ist nicht die Seite
Das Web ist nicht der code
Das Web besteht aus 
leckeren Daten!
Zugang zu diesen Daten zu 
erlauben bedeutet 
Barrierefreiheit.
Um Daten einfach zu 
verwalten, macht es Sinn 
sie im Netz zu verteilen.
CMS
CMS


Tags, Comments, Connections, Embeds
Indem wir die Daten und 
die Darstellung 
voneinander trennen, 
können wir aufzeigen, wie 
barrierefreie Lösungen 
aussehe...
Easy Flickr screenshot
           showing donkeys



hVp://icant.co.uk/easy‐flickr/index.php?s=donkeys
hVp://icant.co.uk/easy‐youtube/?hVp://
www.youtube.com/watch?v=vkdZmi85gxk
Einfache Bedienungen
Suchfunk2on
Copy+Paste URL zum weiterleiten
Verschiedene Videogrössen
Einfache Lautstärkenregelung
Pl...
hVp://www.youtube.com/watch?v=CwsDKaalgq8
hVp://www.youtube.com/watch?v=QiuT0y0KR6I
hVp://www.slideshare.net/hi.antonia/rich‐media‐and‐
   web‐apps‐for‐people‐with‐learning‐disabili2es
hVp://video.yahoo.com
Trick #1 mit Flash:
Abspielknöpfe ausserhalb 
des Filmes ablegen!
hVp://www.schillmania.com/projects/soundmanager2/
hVp://dt.in.th/2008‐05‐18.javascript‐karaoke‐lyric‐scroller.html
Screenshot of the JW Video Player




hVp://www.jeroenwijering.com/?item=JW_FLV_Player
hVp://icant.co.uk/sandbox/youtube‐cap2oning.html
hVp://www.youtube.com/watch?v=_vJlADxbv4U&
DE
                                       AD
hVp://www.nihilogic.dk/labs/youtubeannota2ons/
DE
                              AD
hVp://www.tubecap2on.com/watch?
     v=jpCPvHJ6p90&vcId=137
Das Internet zu ändern ist 
schwierig.
Redesigns von Webseiten 
gehen meistens in die Hose.
Menschen lernen am 
besten indem sie mit 
etwas spielen.
Auch ihr könnt mit dem 
Web spielen und etwas 
Neues erstellen.  
Eines meiner 
Lieblingsspielzeuge.
Picture of
     Artur Ortega



hVp://www.flickr.com/photos/redux/2474124685/
hVp://icanhaz.com/twiVerwithlang
hVp://www.wait‐2ll‐i.com/2008/11/23/show‐the‐world‐your‐
        twiVer‐type‐using‐php‐and‐google‐charts/
hVp://www.nicosteiner.de/archives/118‐YQL,‐YUI‐und‐
                Yahoo!‐Pipes.html
hVp://pipes.yahoo.com
YQL       hVp://developer.yahoo.com/yql/console/
YQL       hVp://developer.yahoo.com/yql/console/




          select {was} from {wo}
            where {kondi2onen}
hVp://isithackday.com/hacks/frankfurt
Kobayashi Maru
select * from html
where
url="http://faz.de" and
xpath="//h2 "
select * from
google.translate where q in (
 select a from html where
 url="http://faz.de"
 and xpath="//h2"
) and target=...
select title from
twitter.user.timeline where
title like "%http%" and
id="codepo8" or id="ydn"
Vorteile von YQL
           ๏ APIs einfach mischen
           ๏ Resultate ausfiltern
           ๏ Einfache API Anmeldung
  ...
HTML als Datenquelle?




 hVp://www.dcs.gla.ac.uk/~joy/fun/jokes/TV.html
hVp://isithackday.com/hacks/scraping‐with‐yql/
Zeigt her eure Daten...




hVp://developer.yahoo.com/yql/guide/yql‐opentables‐chapter.html
INSERT INTO bitly.shorten (login, apiKey, longUrl) VALUES ('USERNAME', 'API_KEY', 'hVp://
  yahoo.com')




hVp://develope...
http://github.com/spullara/yql-tables/tree/master
Und was hily uns beim 
Webseiten erstellen?
Libraries.




             (...)
ARIA
hVp://www.paciellogroup.com/blog/?cat=23
hVp://paciellogroup.com/blog/misc/ARIA/atmedia2008/
ARIA
hVp://yuiblog.com/blog/category/accessibility/
hVp://code.google.com/p/google‐axsjax/
hVp://code.google.com/p/majx‐js/
Zeigt, was in euch steckt...
Und hely Leuten wie mir 
das web weiter zu 
entwickeln und dabei nicht 
Barrieren zu erstellen.
     HTML5? Canvas? 
     ...
Man braucht nicht alles 
alleine zu machen. Wir alle 
wollen das gleiche ‐ ein 
Web, das funk2oniert.
 Chris2an Heilmann
 hVp://wait‐2ll‐i.com 
                                  Danke!
 hVp://developer‐evangelism.com
 hVp://...
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Barrierefreiheit Im Datennetz
Upcoming SlideShare
Loading in...5
×

Barrierefreiheit Im Datennetz

3,349

Published on

Mein Vortrag fuer die "Best of Accessibility" Konferenz 2009 in Duesseldorf ueber Mashups, das Netz der Daten und die Moeglichkeiten die beide Ideen fuer die Barrierefreiheit bringen.

Published in: Design, Technology

Barrierefreiheit Im Datennetz

  1. 1. Barrierefreiheit im Netz der Daten Chris2an Heilmann, Best of Accessibility, Duesseldorf, September 2009
  2. 2. Webentwickler habens  schwer.
  3. 3. Barrierefreiheit ist  eigentlich einfach.
  4. 4. Ein Problem ist das das  “Problem Barrierefreiheit”  auf uns abgeschoben wird.
  5. 5. Und wenn wir dann etwas  fast barrierefrei erstellt  haben meckern  hauptsächlich andere  Entwickler...
  6. 6. Die Hauptursache fuer  dieses Dilemma ist das wir  das Web falsch anpacken.
  7. 7. Web Technologie ist nicht  so schlecht wie wir sie  immer darstellen...
  8. 8. 160x200 Aufloesung 16 Farben 4 Farben in jedem 8x8 Block
  9. 9. Web Technologien sind gut  genug ‐ wenn man sie  rich2g anwendet.
  10. 10. hVp://uk.tv.yahoo.com
  11. 11. hVp://uk.tv.yahoo.com
  12. 12. hVp://finance.yahoo.com/currency‐converter? u#from=USD;to=EUR;amt=1
  13. 13. Screenshot of a currency converter with and without JavaScript. With JavaScript you get autosuggestions.
  14. 14. hVp://developer.yahoo.net/blog/archives/2009/01/ accessible_converter.html
  15. 15. Das Web ist nicht die Seite
  16. 16. Das Web ist nicht der code
  17. 17. Das Web besteht aus  leckeren Daten!
  18. 18. Zugang zu diesen Daten zu  erlauben bedeutet  Barrierefreiheit.
  19. 19. Um Daten einfach zu  verwalten, macht es Sinn  sie im Netz zu verteilen.
  20. 20. CMS
  21. 21. CMS Tags, Comments, Connections, Embeds
  22. 22. Indem wir die Daten und  die Darstellung  voneinander trennen,  können wir aufzeigen, wie  barrierefreie Lösungen  aussehen.
  23. 23. Easy Flickr screenshot showing donkeys hVp://icant.co.uk/easy‐flickr/index.php?s=donkeys
  24. 24. hVp://icant.co.uk/easy‐youtube/?hVp:// www.youtube.com/watch?v=vkdZmi85gxk
  25. 25. Einfache Bedienungen Suchfunk2on Copy+Paste URL zum weiterleiten Verschiedene Videogrössen Einfache Lautstärkenregelung Playlist miVels Del.icio.us YouTube Suche Open Source
  26. 26. hVp://www.youtube.com/watch?v=CwsDKaalgq8 hVp://www.youtube.com/watch?v=QiuT0y0KR6I
  27. 27. hVp://www.slideshare.net/hi.antonia/rich‐media‐and‐ web‐apps‐for‐people‐with‐learning‐disabili2es
  28. 28. hVp://video.yahoo.com
  29. 29. Trick #1 mit Flash: Abspielknöpfe ausserhalb  des Filmes ablegen!
  30. 30. hVp://www.schillmania.com/projects/soundmanager2/
  31. 31. hVp://dt.in.th/2008‐05‐18.javascript‐karaoke‐lyric‐scroller.html
  32. 32. Screenshot of the JW Video Player hVp://www.jeroenwijering.com/?item=JW_FLV_Player
  33. 33. hVp://icant.co.uk/sandbox/youtube‐cap2oning.html
  34. 34. hVp://www.youtube.com/watch?v=_vJlADxbv4U&
  35. 35. DE AD hVp://www.nihilogic.dk/labs/youtubeannota2ons/
  36. 36. DE AD hVp://www.tubecap2on.com/watch? v=jpCPvHJ6p90&vcId=137
  37. 37. Das Internet zu ändern ist  schwierig.
  38. 38. Redesigns von Webseiten  gehen meistens in die Hose.
  39. 39. Menschen lernen am  besten indem sie mit  etwas spielen.
  40. 40. Auch ihr könnt mit dem  Web spielen und etwas  Neues erstellen.  
  41. 41. Eines meiner  Lieblingsspielzeuge.
  42. 42. Picture of Artur Ortega hVp://www.flickr.com/photos/redux/2474124685/
  43. 43. hVp://icanhaz.com/twiVerwithlang
  44. 44. hVp://www.wait‐2ll‐i.com/2008/11/23/show‐the‐world‐your‐ twiVer‐type‐using‐php‐and‐google‐charts/
  45. 45. hVp://www.nicosteiner.de/archives/118‐YQL,‐YUI‐und‐ Yahoo!‐Pipes.html
  46. 46. hVp://pipes.yahoo.com
  47. 47. YQL     hVp://developer.yahoo.com/yql/console/
  48. 48. YQL     hVp://developer.yahoo.com/yql/console/ select {was} from {wo}  where {kondi2onen}
  49. 49. hVp://isithackday.com/hacks/frankfurt
  50. 50. Kobayashi Maru
  51. 51. select * from html where url="http://faz.de" and xpath="//h2 "
  52. 52. select * from google.translate where q in ( select a from html where url="http://faz.de" and xpath="//h2" ) and target="en"
  53. 53. select title from twitter.user.timeline where title like "%http%" and id="codepo8" or id="ydn"
  54. 54. Vorteile von YQL ๏ APIs einfach mischen ๏ Resultate ausfiltern ๏ Einfache API Anmeldung ๏ Als Konsole oder Code ๏ Dokumenta2on inklusive ๏ Yahoos server als proxy  und Zugang.
  55. 55. HTML als Datenquelle? hVp://www.dcs.gla.ac.uk/~joy/fun/jokes/TV.html
  56. 56. hVp://isithackday.com/hacks/scraping‐with‐yql/
  57. 57. Zeigt her eure Daten... hVp://developer.yahoo.com/yql/guide/yql‐opentables‐chapter.html
  58. 58. INSERT INTO bitly.shorten (login, apiKey, longUrl) VALUES ('USERNAME', 'API_KEY', 'hVp:// yahoo.com') hVp://developer.yahoo.com/yql/guide/yql‐iud‐statements.html
  59. 59. http://github.com/spullara/yql-tables/tree/master
  60. 60. Und was hily uns beim  Webseiten erstellen?
  61. 61. Libraries. (...)
  62. 62. ARIA
  63. 63. hVp://www.paciellogroup.com/blog/?cat=23 hVp://paciellogroup.com/blog/misc/ARIA/atmedia2008/
  64. 64. ARIA
  65. 65. hVp://yuiblog.com/blog/category/accessibility/
  66. 66. hVp://code.google.com/p/google‐axsjax/
  67. 67. hVp://code.google.com/p/majx‐js/
  68. 68. Zeigt, was in euch steckt...
  69. 69. Und hely Leuten wie mir  das web weiter zu  entwickeln und dabei nicht  Barrieren zu erstellen. HTML5? Canvas?  Chrome Frame?
  70. 70. Man braucht nicht alles  alleine zu machen. Wir alle  wollen das gleiche ‐ ein  Web, das funk2oniert.
  71. 71.  Chris2an Heilmann  hVp://wait‐2ll‐i.com  Danke!  hVp://developer‐evangelism.com  hVp://twiVer.com/codepo8   
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×