Webstandards für ein modernes Web

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/