View
1.645
Download
0
Category
Preview:
DESCRIPTION
Am 6. November durfte ich am Frankfurter SAE-Institut den Studenten etwas über die Praxis der Webentwicklung erzählen. Ich habe einen großen Bogen gespannt, von der grundsätzlichen Natur des Internet über Detailprobleme bis zur Barrierefreiheit. Der Vortrag dauerte dreieinhalb Stunden.
Citation preview
Jens Grochtdreis – Webseiten sind keine Gemälde
Die Flexibilität des Internet im Spiegel des Frontend
Webseiten sind keine Gemälde
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
33http://failblog.files.wordpress.com/2009/10/epic-fail-quality-hotel-fail.jpg
44http://failblog.files.wordpress.com/2009/09/epic-fail-power-line-fail.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
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
77
Kontrollverlust - formal
_ Wie können wir heute ins Internet gehen?
_ PC, Notebook
_ viele Betriebssysteme, Browser, Monitore
_ Handy, PDA
_ Spielkonsole
_ TV
_ Assistive Technologien
88
Unsicherheiten
_ Betriebssysteme
_ Browser
_ Browserversionen
_ Individuelle Einrichtungen des Browsers
_ Monitorauflösungen
_ Umgebungslicht
_ Mobiler Zugriff
_ Zugriffsgeschwindigkeit
_ Plugins
_ Javascript
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
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!
1111
Screenshot von einem EeePC, 800x480px
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.
1313
1414
1515
1616
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
1818
http://www.flickr.com/photos/fmg2001/679774853/sizes/o/
1919
Graded Browser Support
http://developer.yahoo.com/yui/articles/gbs/
2121
„Schweizer Messer“ für den IE6
_ position: relative
_ zoom: 1
_ height: 1%
_ bei Floats: display: inline
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/
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
_ ...
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.
26
Der Projektalltag
27
Der Projektalltag
28
Der Projektalltag
29
Der Projektalltag
http://www.projectcartoon.com/cartoon/27
30
Agenturalltag
http://vikiworks.com/2007/08/27/flat-panel-monitor-icon/
3131
Selber denken macht schlau!
3232
Der Frontendentwickler ist ein Übersetzer!
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!
3535
http://dev.opera.com/articles/wsc/
3636
http://webkrauts.de
3737
http://jendryschik.de/wsdev/einfuehrung/
3838
http://little-boxes.de/little-boxes-teil1-online.html
3939
http://ajaxian.com/
4040
http://developer.yahoo.com/yui/
4141
http://developer.yahoo.com/yui/theater/
4242
http://yuiblog.com/
4343
http://developer.yahoo.com/ypatterns/
4444
http://icant.co.uk/
4545
http://www.webkrauts.de/krautcosmos/
4646
http://www.einfach-fuer-alle.de/
4747
http://planet.jquery.com/
4848
http://net.tutsplus.com/
4949
http://www.smashingmagazine.com/
5050
http://sixrevisions.com/
5151
Gute Bücher
5252
5353
5454
5555
Beliebte Problemfälle
5656
Gleich hohe Boxen
5757
Gleich hohe Boxen
http://www.yaml.de/de/dokumentation/anwendung/subtemplates.html
5858
Gleich hohe Boxen
http://www.positioniseverything.net/articles/onetruelayout/equalheight
moderne Browser
IE6 und 7
5959
Reiter
6060
Reiter
http://github.com/ginader/Accessible-Tabs
6161
Runde Ecken
6262
Runde Ecken
http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
6363
Runde Ecken - The ThrashBox
http://www.vertexwerks.com/tests/sidebox/
6464
Runde Ecken für moderne Browser
6565
Runde Ecken für moderne Browser
6767
Massenweise Requests
6868
Massenweise Requests - CSS-Sprites
http://www.alistapart.com/articles/sprites/
6969
Massenweise Requests - CSS-Sprites
7070
Performance
http://developer.yahoo.com/performance/rules.html
7171
Performance
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.
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
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?
77
Überschriften
_ Überschriften sind eine Navigationsmöglichkeit für Screenreader.
_ Wikis generieren aus den Textüberschriften eine seiteninterne Navigation, ein Inhaltsverzeichnis.
7878
Kenne Dein (X)HTML
_ Wie sehen ungeordnete Listen aus?
_ Wie sehen geordnete Listen aus?
_ Wie sieht eine Überschrift zweiter Ordnung aus?
7979
8080
8181
Simples Browser-Reset
8282
Safari4 (Mac) Firefox 3.5 (Mac)
8383
Safari4 (Mac) Firefox 3.5 (Mac)
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;}
8585
Reset-Stylesheet von Yahoo!
8686
Reset-CSS von Eric Meyer
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 />
8888
http://www.flickr.com/photos/webseeings/239301576
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.“
9191
9292
Für wen?
_ Körperbehinderung
_ Motorische Behinderungen
_ Contergan
_ Sinnesbehinderungen
_ Farbfehlsichtigkeit
_ Blindheit
_ Gehörlosigkeit
_ Taubblindheit
_ Lernbehinderung
_ Legasthenie
_ Dyslexie
_ Geistige Behinderung
_ Down-Syndrom
9393
Für wen?
9494
Zielgruppen
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.
9797
http://snurl.com/t58gj
9898
Was Barrierefreiheit NICHT ist
9999
Barrierefreie Seiten müssen nicht hässlich sein!
100
101
101
102
102
http://www.ble.de/
103
103
http://www.hauptbahnhof-wien.at/
104
104
http://www.darmkrebs.at/
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)
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
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.
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.
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/
Recommended