Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
Jens Grochtdreis, SinnerSchrader
2
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Kurze Vorstellung (1)
• Ich bin Senior Frontend Engineer bei SinnerSchrader in Frankfurt
• SinnerSchrader betreut das E-Business großer Marken und internationaler Unternehmen seit 1996
• Kunden: Otto, Dow Jones, Deutsche Bank, Tchibo, comdirect, simyo, Arena ...
3
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Kurze Vorstellung (2)
• Die Initiative „Webkrauts“ gründete sich auf Grund eines Eintrages in meinem Blog im August 2005
• Wir unterstützen Webdesigner und -entwickler dabei, Standards einzusetzen und so ihre Arbeit zu verbessern.
4
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Was haben wir hinter uns?
• Das WWW existiert seit Anfang der 90er• Für wissenschaftliche Kommunikation• Sehr schnell kommerzielle Nutzung• Layout und Effekte vor Inhalten• Tunnelseiten, Preloader, „optimiert für“• Eingleisiges Lese-Medium
5
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Wo stehen wir?
• Browser sind besser geworden• Browser sind noch immer nicht gut• Browser sind nur noch EIN Gerät fürs WWW• Das WWW wird mobil• Barrierefreiheit hat Gesetzesstatus • Javascript „wird gut“
6
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Wo stehen wir?
• „Mitmach-Web“, vulgo: Web 2.0• Andere „arbeiten lassen“, selber kassieren• Offener Austausch
• Mashups
• APIs (Schnittstellen!)
• Professionalisierung
7
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Wo stehen wir?
• Professionalisierung• Häufiger korrekte Nutzung der Standards • Immernoch hohe Ignoranz gegenüber
Standards
8
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Wo gehen wir hin?
Das Internet • wird noch mobiler,• wird multimedialer,• wird mehr mit TV veschmelzen,• es wird noch mehr Anzeigeoptionen geben!
9
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Was bedeutet Web 2.0?
• Das „Mitmach-Web“ läßt sich auf einen Nenner bringen:
Kontrollverlust
10
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Kontrollverlust - inhaltlich
• Webseiten werden zu Applikationen, der User kann selber agieren, schafft Inhalte.
• Der Anbieter stellt nur noch eine Plattform zur Verfügung, die der Anwender nutzt.
• Inhalte können nur bedingt kontrolliert werden.
11
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Kontrollverlust - formal
Wie können wir heute ins Internet gehen?• PC, Notebook
• viele Betriebssyteme, Browser, Monitore
• Handy, PDA• Spielkonsole• TV
12
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
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!
13
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Trennung von Inhalt und Layout
• Der Inhalt soll in den unterschiedlichsten Anzeigeformen wiedergegeben werden können.
• Das geht nur einfach und gut, wenn man Inhalt und Layout trennt.
14
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Die Ebenen einer Webseite
Business-Logik
Inhalt
Struktur
Layout
Dynamik
PHP, ASP, JAVA
MySQL, XML
(X)HTML
CSS
Javascript, DOM
15
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Die Realität?
• Viele Webseiten sind noch mit Layouttabellen aufgebaut. Layout und Struktur sind damit eins.
• Diese Seiten sind unflexibel, nicht zukunftssicher.
16
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Der Ausweg?
• Nutzt die Standards so, wie sie gedacht waren.
• Geht defensiv vor: möglichst wenig Hindernisse für die Zugänglichkeit des Inhalts
17
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Nicht flexibel
Text!
Was soll das?
18
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Flexibel
Besser!
19
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Keine Tabellen? Doch!
• Tabellen sind für tabellarische Daten da!• Für Layoutzwecke gibt es CSS!• Die Unterstützung durch moderne Browser
ist gut.• Selbst der IE5 kann mit CSS umgehen.
20
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Semantik
• Inhalte werden danach ausgezeichnet was sie sind, nicht wie sie aussehen sollen.
• Überschrift:<h1> bis <h6> • Liste: <ul> oder <ol> und <li>, nicht
einfach Absätze untereinander • Das Aussehen kommt erst durch CSS.
21
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Semantik und Layout
• Erst bestimmen, was es ist, dann das Aussehen bestimmen.
• Wenn die Überschrift die gleiche Schriftgröße wie der Absatz hat, kann man trotzdem nicht auf die Überschrift verzichten
22
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Browsereigene Stylesheets
23
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Webstandards sind nichts Neues!• Es gibt sie, seitdem es das Web gibt. Wir
nannten sie nur nicht so.• Grundverständnis: eine Internetseite ist
ein Dokument, das sinnvoll strukturiert und ausgezeichnet werden muss. Erst in einem zweiten Schritt kommt das Layout.
24
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Was sollen Standards?
• Alle Browser haben eine gemeinsame Basis, die sie interpretieren und die ich kenne.
• Keine Sonderbehandlung notwendig.• Es wird eine Seite entwickelt, nicht
verschiedene Varianten.• Qualitätssicherung
25
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Die Realität?
• Sonderbehandlung dank Microsoft• Aber auch die anderen
Browser sind nichtfehlerfrei
• Mobile Browser unterstützen das media-Attribut nicht!
26
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Standards?
ECMA-Script
SVG
CSSMathML
WCAG (Web Content Accessibility Guidelines)
WCAG
XML (X)HTML
SWF XMLHttpRequestinnerHTML
W3C
27
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Reichen diese Standards?
NEIN
28
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Weiterentwicklung
• Neue Ideen können neue Standards benötigen
• Wir benötigen viele kleine Würfe• Das W3C will immer den großen Wurf• Die Browserhersteller werden wichtiger• Mikroformate als Beispiel
29
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Mikroformate
• Auf Basis bestehender Standards werden neue Wege der Informationsvermittlung beschritten.
30
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Alle müssen mitmachen
• Schnelle Standardisierungsverfahren • Schnelle Implementierung in Browser• Entwickler müssen lernen• Anwender müssen Updatezyklen
mitmachen
31
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Webseiten sind nicht aus Papier
• Webseiten unterliegen ganz anderen Gesetzen als Printprodukte. Das vergessen viele Designer und Kunden.
• Warum also sollten wir Webseiten wie Printprodukte gestalten?
32
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Webseiten sind nicht aus Papier
• Webseiten passen sich der Größe des Browsers an.
• Man kann die Schriftarten vergrößern und verändern.
• Man kann die Kontraste ändern.
33
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Webseiten sind nicht aus Papier
• Man kann Bilder ausblenden• Webseiten können mit dem User
interagieren.
Versuchen Sie das mal mit einer Zeitung, einem Plakat, einem Buch!
34
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Eine andere Sicht der Dinge
• Webstandards, das Design mit CSS erfordern eine andere Sicht der Dinge, als sie traditionell „normal“ ist.
• Traditionelles Webdesign denkt in Spalten und setzt diese mit einer Layouttabelle um. Mehr oder minder tief verschachtelt.
35
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Anderes Medium – andere Denkweise• Ein anderes Medium erfordert ein anderes
Vorgehen, eine andere Denkweise.• Die Idee des pixelgenauen Layouts, das auf
allen Browsern gleich aussieht, ist nicht nur falsch, sondern auch schädlich.
36
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Anderes Medium – andere Denkweise• Layout und Inhalt sind getrennt. Diese
Trennung hat ihre Vorteile, denn so kann man den Inhalt auf vielen Plattformen erreichen.
• Die Inhalte werden in der Nutzung flexibel
37
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Mitmachen!
Bauen Sie an einem modernen Web mit, nutzen Sie Webstandards mit Verstand!
http://webkrauts.de
38
Webstandards – die Basis für ein modernes WebJens Grochtdreis - SinnerSchrader
Diese Präsentation steht unter der Creative Commons Lizenz „Attribution-ShareAlike 2.0“
http://creativecommons.org/licenses/by-sa/2.0/de/