Webseiten sind keine Gemälde
-
Upload
jens-grochtdreis -
Category
Technology
-
view
1.647 -
download
0
description
Transcript of Webseiten sind keine Gemälde
![Page 1: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/1.jpg)
Jens Grochtdreis – Webseiten sind keine Gemälde
Die Flexibilität des Internet im Spiegel des Frontend
Webseiten sind keine Gemälde
![Page 2: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/2.jpg)
2
Jens Grochtdreis
_ Frontendentwickler
_ 10 Jahre Agenturerfahrung
_ Gründer der Webkrauts
_ Blogger
_ Autor des PHPMagazins, Webstandards-Magazins, T3N
_ Fachliche Buchbetreuung bei Galileo, O'Reilly, MuT
![Page 3: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/3.jpg)
33http://failblog.files.wordpress.com/2009/10/epic-fail-quality-hotel-fail.jpg
![Page 4: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/4.jpg)
44http://failblog.files.wordpress.com/2009/09/epic-fail-power-line-fail.jpg
![Page 5: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/5.jpg)
5
Das sollten wir nicht vergessen!
_ Das Internet ist ein neues Medium!
_ junges Medium
_ rasante Entwicklung
_ spannend
_ atemberaubend
_ umwälzend
_ in ständigem Wandel begriffen
![Page 6: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/6.jpg)
6
Das sollten wir nicht vergessen!
_ Das Internet bietet viele unterschiedliche Zugänge zu Informationen
_ Am Monitor lesen
_ Ausdrucken
_ Vorlesen lassen
_ Formate sind anpassbar
_ Inhalte lassen sich leicht rudimentär übersetzen
_ Wir wissen nichts Definitives über das Zielsystem
![Page 7: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/7.jpg)
77
Kontrollverlust - formal
_ Wie können wir heute ins Internet gehen?
_ PC, Notebook
_ viele Betriebssysteme, Browser, Monitore
_ Handy, PDA
_ Spielkonsole
_ TV
_ Assistive Technologien
![Page 8: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/8.jpg)
88
Unsicherheiten
_ Betriebssysteme
_ Browser
_ Browserversionen
_ Individuelle Einrichtungen des Browsers
_ Monitorauflösungen
_ Umgebungslicht
_ Mobiler Zugriff
_ Zugriffsgeschwindigkeit
_ Plugins
_ Javascript
![Page 9: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/9.jpg)
99
Flexibilität ist Stärke
Die Flexibilität des Internet ist seine Stärke.Akzeptiert es! Macht Euch locker!
Bild: http://snipurl.com/2c1yl
![Page 10: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/10.jpg)
1010
Flexibilität ist wichtig
_ Wir können nicht mehr sicher vorhersagen, wie jemand unsere Seite sieht/liest.
_ Deshalb: einen für möglichst viele gangbaren Weg beschreiten
_ Erst der Inhalt, dann das Layout!
_ Der Inhalt ist das Wichtigste!
![Page 11: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/11.jpg)
1111
Screenshot von einem EeePC, 800x480px
![Page 12: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/12.jpg)
1212
Wir stehen am Anfang
_ Wir stehen noch immer am Anfang.
_ HTML in der jetzigen Form genügt nicht!
_ Webseiten sind immer seltener Dokumente.
_ HTML5 ist ein wichtiger und erster Schritt.
![Page 13: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/13.jpg)
1313
![Page 14: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/14.jpg)
1414
![Page 15: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/15.jpg)
1515
![Page 16: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/16.jpg)
1616
![Page 17: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/17.jpg)
1717
Problemfeld: Browser
_ Der IE in allen Versionen kann einfach weniger als alle anderen Browser
_ Der IE6 ist nicht tot zu kriegen
_ Fortschritt richtet sich nach dem Langsamsten (IE) wegen der Verbreitung
_ Nur Entwickler interessieren sich für Browser
![Page 18: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/18.jpg)
1818
http://www.flickr.com/photos/fmg2001/679774853/sizes/o/
![Page 19: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/19.jpg)
1919
Graded Browser Support
http://developer.yahoo.com/yui/articles/gbs/
![Page 21: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/21.jpg)
2121
„Schweizer Messer“ für den IE6
_ position: relative
_ zoom: 1
_ height: 1%
_ bei Floats: display: inline
![Page 23: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/23.jpg)
2323
Problemfeld: Entwickler
_ Die Opera-MAMA-Studie hat erschreckende Codedefizite zu Tage gefördert:
_ 58,5% Webseiten ohne Überschriften-Elemente
_ 7,9% mit mehreren <h1>
_ 16,1% beginnen Überschriften-Struktur mit <h2>, <h3>
_ 7,1% mit Überschriften ohne logische Reihenfolge
_ 24,9% mit Bildern ohne alt-Attribute
_ 4,13% der Testseiten validierten
Quelle: http://www.einfach-fuer-alle.de/blog/id/2505/
![Page 24: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/24.jpg)
2424
Das Internet ist komplex
_ Wir nutzen sehr viele verschiedene Standards und Technologien, um eine Website zu betreiben.
_ (X)HTML, CSS, Javascript, DOM 1-3
_ Flash, Flex, SWF
_ PHP, ASP, Perl, Java
_ MySQL, PostgreSQL
_ XML, XSLT
_ ...
![Page 25: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/25.jpg)
25
Kommunikation ist alles!
_ Unterschiedliche Erwartungen und Wissensstände führen immer wieder zu Kommunikationsproblemen.
_ Kunde, Kundenberater, Designer, Konzepter, Entwickler sollten möglichst die gleiche Sprache sprechen. Zumindest sollten sie einander verstehen.
_ Immer den Endnutzer im Blick haben, wenn es der Kunde schon nicht macht.
![Page 26: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/26.jpg)
26
Der Projektalltag
![Page 27: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/27.jpg)
27
Der Projektalltag
![Page 28: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/28.jpg)
28
Der Projektalltag
![Page 29: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/29.jpg)
29
Der Projektalltag
http://www.projectcartoon.com/cartoon/27
![Page 30: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/30.jpg)
30
Agenturalltag
http://vikiworks.com/2007/08/27/flat-panel-monitor-icon/
![Page 31: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/31.jpg)
3131
Selber denken macht schlau!
![Page 32: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/32.jpg)
3232
Der Frontendentwickler ist ein Übersetzer!
![Page 33: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/33.jpg)
3333
Frontendentwickler als Übersetzer
_ Das Frontend ist das Einzige, das der Nutzer sieht.
_ Ein CMS oder die weitere Technik hinter der Seite interessiert den Nutzer nicht.
_ Entscheidungen aller anderen „Gewerke“ fliessen in das Frontend ein. Also sollte der Frontendentwickler mitsprechen.
_ Verständigung zwischen Grafik, Beratung und Backend herstellen, denn der Frontendentwickler sollte sie alle verstehen!
![Page 35: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/35.jpg)
3535
http://dev.opera.com/articles/wsc/
![Page 36: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/36.jpg)
3636
http://webkrauts.de
![Page 37: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/37.jpg)
3737
http://jendryschik.de/wsdev/einfuehrung/
![Page 38: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/38.jpg)
3838
http://little-boxes.de/little-boxes-teil1-online.html
![Page 39: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/39.jpg)
3939
http://ajaxian.com/
![Page 40: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/40.jpg)
4040
http://developer.yahoo.com/yui/
![Page 41: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/41.jpg)
4141
http://developer.yahoo.com/yui/theater/
![Page 42: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/42.jpg)
4242
http://yuiblog.com/
![Page 43: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/43.jpg)
4343
http://developer.yahoo.com/ypatterns/
![Page 44: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/44.jpg)
4444
http://icant.co.uk/
![Page 45: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/45.jpg)
4545
http://www.webkrauts.de/krautcosmos/
![Page 46: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/46.jpg)
4646
http://www.einfach-fuer-alle.de/
![Page 47: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/47.jpg)
4747
http://planet.jquery.com/
![Page 48: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/48.jpg)
4848
http://net.tutsplus.com/
![Page 49: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/49.jpg)
4949
http://www.smashingmagazine.com/
![Page 50: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/50.jpg)
5050
http://sixrevisions.com/
![Page 51: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/51.jpg)
5151
Gute Bücher
![Page 52: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/52.jpg)
5252
![Page 53: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/53.jpg)
5353
![Page 54: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/54.jpg)
5454
![Page 55: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/55.jpg)
5555
Beliebte Problemfälle
![Page 56: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/56.jpg)
5656
Gleich hohe Boxen
![Page 57: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/57.jpg)
5757
Gleich hohe Boxen
http://www.yaml.de/de/dokumentation/anwendung/subtemplates.html
![Page 58: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/58.jpg)
5858
Gleich hohe Boxen
http://www.positioniseverything.net/articles/onetruelayout/equalheight
moderne Browser
IE6 und 7
![Page 59: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/59.jpg)
5959
Reiter
![Page 60: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/60.jpg)
6060
Reiter
http://github.com/ginader/Accessible-Tabs
![Page 61: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/61.jpg)
6161
Runde Ecken
![Page 62: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/62.jpg)
6262
Runde Ecken
http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
![Page 63: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/63.jpg)
6363
Runde Ecken - The ThrashBox
http://www.vertexwerks.com/tests/sidebox/
![Page 64: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/64.jpg)
6464
Runde Ecken für moderne Browser
![Page 65: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/65.jpg)
6565
Runde Ecken für moderne Browser
![Page 67: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/67.jpg)
6767
Massenweise Requests
![Page 68: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/68.jpg)
6868
Massenweise Requests - CSS-Sprites
http://www.alistapart.com/articles/sprites/
![Page 69: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/69.jpg)
6969
Massenweise Requests - CSS-Sprites
![Page 70: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/70.jpg)
7070
Performance
http://developer.yahoo.com/performance/rules.html
![Page 71: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/71.jpg)
7171
Performance
![Page 74: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/74.jpg)
7474
Semantik
_ Mit der Bedeutung der Inhalte beschäftigen
_ Die Struktur erfassen und aufschreiben
_ Eine Überschrift wird mit beispielsweise <h2>Überschrift</h2> ausgezeichnet, nicht mit <div class="headline">Überschrift</div>
_ Eine semantisch ausgezeichnete Seite zeigt, daß man sich Gedanken über seine Arbeit gemacht hat.
![Page 75: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/75.jpg)
7575
Semantik
_ Webseiten sind heute mehr als nur Dokumente.
_ Die Dokumentenanalogie ist alt
_ Es sollten wissenschaftliche Texte erfaßt werden
_ HTML5 ist der Versuch, der Realität gerecht zu werden
_ Es gibt immer mehr Applikationen
_ Viele notwendige Seitenelemente gibt es nicht in HTML, diese müssen wir per CSS und Javascript simulieren
![Page 76: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/76.jpg)
7676
Überschriften
_ Webseiten sind immer seltener Dokumente
_ Kann ein Dokument mehrere h1 vertragen?
_ Nur eine h1? Warum?
_ Wir vermeiden sonst Analogien zur Printwelt. Warum nicht auch hier?
_ Struktur für Sehende und Blinde anders?
_ Reichen sechs Überschriften?
_ Was machen Browser mit Sektionsüberschriften in HTML5 und machen sie das einheitlich?
![Page 77: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/77.jpg)
77
Überschriften
_ Überschriften sind eine Navigationsmöglichkeit für Screenreader.
_ Wikis generieren aus den Textüberschriften eine seiteninterne Navigation, ein Inhaltsverzeichnis.
![Page 78: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/78.jpg)
7878
Kenne Dein (X)HTML
_ Wie sehen ungeordnete Listen aus?
_ Wie sehen geordnete Listen aus?
_ Wie sieht eine Überschrift zweiter Ordnung aus?
![Page 79: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/79.jpg)
7979
![Page 80: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/80.jpg)
8080
![Page 81: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/81.jpg)
8181
Simples Browser-Reset
![Page 82: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/82.jpg)
8282
Safari4 (Mac) Firefox 3.5 (Mac)
![Page 83: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/83.jpg)
8383
Safari4 (Mac) Firefox 3.5 (Mac)
![Page 84: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/84.jpg)
8484
Eingebaute und individuelle Stylesheets
_ HTML sieht nicht aus, sondern transportiert Bedeutung!
_ Auch Browser nutzen Stylesheets, um HTML anzuzeigen.
_ Jeder Browser hat sein eigenes Stylesheet.
_ Nutzerstylesheets sind möglich.
_ Letztendliche Sicherheit über die Darstellung einer Seite gibt es nicht. Man kann aber dafür sorgen, daß ein Layout nicht allzu schnell "zerstört" wird.
_ Für ein Userstylesheet ist die Notation !important wichtig, damit alle vorherigen Definitionen überschrieben werden. Also bspw.: p { color: black !important;}
![Page 85: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/85.jpg)
8585
Reset-Stylesheet von Yahoo!
![Page 86: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/86.jpg)
8686
Reset-CSS von Eric Meyer
![Page 87: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/87.jpg)
8787
Keine Tabellen? Doch!
_ Tabellen sind für tabellarische Daten da! Für Layoutzwecke gibt es CSS!
_ ABER: eine Tabelle ist auch im Code eine komplexe Sache. Es gibt mehr als nur <table>, <tr> und <td>.
_ Man unterschiedliche Bereiche in Head, Foot und Body
unterteilen:
<thead>...</thead>, <tfoot>...</tfoot>,
<tbody>...</tbody>
Man kann Spalten zu Komplexen zusammenfassen:
<colgroup>...</colgroup>, <col />
![Page 88: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/88.jpg)
8888
http://www.flickr.com/photos/webseeings/239301576
![Page 90: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/90.jpg)
9090
Barrierefreiheit laut Gesetz
„Barrierefrei sind [..,] technische Gebrauchsgegenstände, Systeme der Informationsverarbeitung, akustische und visuelle Informationsquellen und Kommunikationseinrichtungen [...], wenn sie für behinderte Menschen in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe zugänglich und nutzbar sind.“
![Page 91: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/91.jpg)
9191
![Page 92: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/92.jpg)
9292
Für wen?
_ Körperbehinderung
_ Motorische Behinderungen
_ Contergan
_ Sinnesbehinderungen
_ Farbfehlsichtigkeit
_ Blindheit
_ Gehörlosigkeit
_ Taubblindheit
_ Lernbehinderung
_ Legasthenie
_ Dyslexie
_ Geistige Behinderung
_ Down-Syndrom
![Page 93: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/93.jpg)
9393
Für wen?
![Page 94: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/94.jpg)
9494
Zielgruppen
![Page 96: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/96.jpg)
9696
Kampfbegriff?
_ Der Begriff „Barrierefreiheit“ beinhaltet ein sehr weitgehendes Versprechen.
_ Im Englischen: Accessibility (= Zugänglichkeit)
_ In der deutschen Diskussion einseitig auf Behinderte und vor allem auf Blinde konzentriert.
_ Bei Barrierefreiheit geht es um Anwender, für die eine Seite nur eingeschränkt nutzbar ist.
![Page 97: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/97.jpg)
9797
http://snurl.com/t58gj
![Page 98: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/98.jpg)
9898
Was Barrierefreiheit NICHT ist
![Page 99: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/99.jpg)
9999
Barrierefreie Seiten müssen nicht hässlich sein!
![Page 100: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/100.jpg)
100
![Page 101: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/101.jpg)
101
101
![Page 102: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/102.jpg)
102
102
http://www.ble.de/
![Page 103: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/103.jpg)
103
103
http://www.hauptbahnhof-wien.at/
![Page 104: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/104.jpg)
104
104
http://www.darmkrebs.at/
![Page 105: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/105.jpg)
105
105
4 Grundprinzipien der WCAG2.0
_ POUR
_ Inhalte müssen wahrnehmbar sein (Perceivable)
_ Benutzerschnittstellen im Inhalt müssen bedienbar sein (Operable)
_ Inhalte und Bedienelemente müssen verständlich sein (Understandable)
_ Inhalte sollten robust genug sein, um mit aktuellen und zukünftigen Benutzeragenten zu arbeiten (inklusive assistiver Hilfsmittel) (Robust)
![Page 106: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/106.jpg)
106
106
Grundregeln
_ Valides und semantisch korrektes (X)HTML und valides CSS
_ Inhalte müssen textlich transportiert werden. Kein Verstecken von Texten in Grafiken.
_ Ausreichende Farbkontraste
_ Abkürzungen, Akronyme und Sprachwechsel müssen markiert/erklärt werden.
_ Für Medien müssen Alternativen vorliegen.
_ Bilder bekommen ein Alt-Attribut, es sei denn, sie sind rein dekorativ
![Page 107: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/107.jpg)
107
107
Barrierefreiheit leben
_ Barrierefreiheit ist weniger ein technisches Problem, als das einer vernünftigen Planung. Zudem endet Barrierefreiheit nicht mit dem Launch. Sie muss täglich gelebt werden.
_ Ein technisches Produkt wie ein CMS kann Barrierefreiheit nur unterstützen, wichtiger sind allerdings die Redakteure, die sich an Regeln halten müssen.
![Page 108: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/108.jpg)
108
108
Automatisierte Tests
_ Eine fehlerfreies Abschneiden in einem automatisierten Test sagt aber nur, daß die Seite dieses Tool „übersteht“. Mehr nicht!
_ Barrierefreiheit ist für Menschen da, deshalb sollten auch Menschen sie testen.
![Page 109: Webseiten sind keine Gemälde](https://reader038.fdocuments.net/reader038/viewer/2022102518/555e2457d8b42a384f8b4d9a/html5/thumbnails/109.jpg)
109
109
Am Ende
Jens Grochtdreis
http://blog.grochtdreis.de
http://webkrauts.de
Diese Präsentation steht unter der Creative Commons Lizenz „Attribution-ShareAlike 2.0“ http://creativecommons.org/licenses/by-sa/2.0/de/