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


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


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


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


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


Wo stehen wir?

• „Mitmach-Web“, vulgo: Web 2.0• Andere „arbeiten lassen“, selber kassieren• Offener Austausch

• Mashups

• APIs (Schnittstellen!)

• Professionalisierung

7


Wo stehen wir?

• Professionalisierung• Häufiger korrekte Nutzung der Standards • Immernoch hohe Ignoranz gegenüber

Standards

8


Wo gehen wir hin?

Das Internet • wird noch mobiler,• wird multimedialer,• wird mehr mit TV veschmelzen,• es wird noch mehr Anzeigeoptionen geben!

9


Was bedeutet Web 2.0?

• Das „Mitmach-Web“ läßt sich auf einen Nenner bringen:

Kontrollverlust

10


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


Kontrollverlust - formal

Wie können wir heute ins Internet gehen?• PC, Notebook

• viele Betriebssyteme, Browser, Monitore

• Handy, PDA• Spielkonsole• TV

12


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


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


Die Ebenen einer Webseite

Business-Logik

Inhalt

Struktur

Layout

Dynamik

PHP, ASP, JAVA

MySQL, XML

(X)HTML

CSS

Javascript, DOM

15


Die Realität?

• Viele Webseiten sind noch mit Layouttabellen aufgebaut. Layout und Struktur sind damit eins.

• Diese Seiten sind unflexibel, nicht zukunftssicher.

16


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


Nicht flexibel

Text!

Was soll das?

18


Flexibel

Besser!

19


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


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


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


Browsereigene Stylesheets

23


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


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


Die Realität?

• Sonderbehandlung dank Microsoft• Aber auch die anderen

Browser sind nichtfehlerfrei

• Mobile Browser unterstützen das media-Attribut nicht!

26


Standards?

ECMA-Script

SVG

CSSMathML

WCAG (Web Content Accessibility Guidelines)

WCAG

XML (X)HTML

SWF XMLHttpRequestinnerHTML

W3C

27


Reichen diese Standards?

NEIN

28


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


Mikroformate

• Auf Basis bestehender Standards werden neue Wege der Informationsvermittlung beschritten.

30


Alle müssen mitmachen

• Schnelle Standardisierungsverfahren • Schnelle Implementierung in Browser• Entwickler müssen lernen• Anwender müssen Updatezyklen

mitmachen

31


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



• Webseiten passen sich der Größe des Browsers an.

• Man kann die Schriftarten vergrößern und verändern.

• Man kann die Kontraste ändern.

33



• Man kann Bilder ausblenden• Webseiten können mit dem User

interagieren.

Versuchen Sie das mal mit einer Zeitung, einem Plakat, einem Buch!

34


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


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


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


Mitmachen!

Bauen Sie an einem modernen Web mit, nutzen Sie Webstandards mit Verstand!

http://webkrauts.de

38


Diese Präsentation steht unter der Creative Commons Lizenz „Attribution-ShareAlike 2.0“

http://creativecommons.org/licenses/by-sa/2.0/de/

Technology

Webstandards für ein modernes Web