Webstandards –
die Basis für ein modernes Web
                Jens Grochtdreis, SinnerSchrader




Jens Grochtdreis - Sinn...
2



Kurze Vorstellung (1)
• Ich bin Senior Frontend Engineer bei
  SinnerSchrader in Frankfurt
• SinnerSchrader betreut d...
3



Kurze Vorstellung (2)
• Die Initiative „Webkrauts“ gründete sich
  auf Grund eines Eintrages in meinem Blog
  im Augu...
4



Was haben wir hinter uns?
•   Das WWW existiert seit Anfang der 90er
•   Für wissenschaftliche Kommunikation
•   Sehr...
5



Wo stehen wir?
•   Browser sind besser geworden
•   Browser sind noch immer nicht gut
•   Browser sind nur noch EIN G...
6



Wo stehen wir?
• „Mitmach-Web“, vulgo: Web 2.0
• Andere „arbeiten lassen“, selber kassieren
• Offener Austausch
   • ...
7



Wo stehen wir?
• Professionalisierung
• Häufiger korrekte Nutzung der Standards
• Immernoch hohe Ignoranz gegenüber
 ...
8



Wo gehen wir hin?
Das Internet
• wird noch mobiler,
• wird multimedialer,
• wird mehr mit TV veschmelzen,
• es wird n...
9



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

   Kontrollverlust


Jens Grochtdrei...
10



Kontrollverlust - inhaltlich
• Webseiten werden zu Applikationen, der
  User kann selber agieren, schafft Inhalte.
•...
11



Kontrollverlust - formal
Wie können wir heute ins Internet gehen?
• PC, Notebook
   • viele Betriebssyteme, Browser,...
12



Flexibilität ist wichtig
• Wir können nicht mehr sicher vorhersagen,
  wie jemand unsere Seite sieht/liest.
• Deshal...
13



Trennung von Inhalt und Layout
• Der Inhalt soll in den unterschiedlichsten
  Anzeigeformen wiedergegeben werden
  k...
14



Die Ebenen einer Webseite
            Dynamik                       Javascript, DOM


             Layout           ...
15



Die Realität?
• Viele Webseiten sind noch mit
  Layouttabellen aufgebaut. Layout und
  Struktur sind damit eins.
• D...
16



Der Ausweg?
• Nutzt die Standards so, wie sie gedacht
  waren.
• Geht defensiv vor: möglichst wenig
  Hindernisse fü...
17



Nicht flexibel
Was soll das?
                                                Text!




Jens Grochtdreis - SinnerSchr...
18



Flexibel
Besser!




Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
19



Keine Tabellen? Doch!
• Tabellen sind für tabellarische Daten da!
• Für Layoutzwecke gibt es CSS!
• Die Unterstützun...
20



Semantik
• Inhalte werden danach ausgezeichnet was
  sie sind, nicht wie sie aussehen sollen.
• Überschrift:<h1> bis...
21



Semantik und Layout
• Erst bestimmen, was es ist, dann das
  Aussehen bestimmen.
• Wenn die Überschrift die gleiche
...
22



Browsereigene Stylesheets




Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
23

Webstandards sind nichts
Neues!
• Es gibt sie, seitdem es das Web gibt. Wir
  nannten sie nur nicht so.
• Grundverstän...
24



Was sollen Standards?
• Alle Browser haben eine gemeinsame
  Basis, die sie interpretieren und die ich
  kenne.
• Ke...
25



Die Realität?
• Sonderbehandlung dank Microsoft
• Aber auch die anderen
  Browser sind nicht
  fehlerfrei
• Mobile B...
26



Standards?
                                                            W3C
                       XML              (...
27



Reichen diese Standards?




                       NEIN
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis ...
28



Weiterentwicklung
• Neue Ideen können neue Standards
  benötigen
• Wir benötigen viele kleine Würfe
• Das W3C will i...
29



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




Jen...
30



Alle müssen mitmachen
•   Schnelle Standardisierungsverfahren
•   Schnelle Implementierung in Browser
•   Entwickler...
31



Webseiten sind nicht aus Papier
• Webseiten unterliegen ganz anderen
  Gesetzen als Printprodukte. Das vergessen
  v...
32



Webseiten sind nicht aus Papier
• Webseiten passen sich der Größe des
  Browsers an.
• Man kann die Schriftarten ver...
33



Webseiten sind nicht aus Papier
• Man kann Bilder ausblenden
• Webseiten können mit dem User
  interagieren.

Versuc...
34



Eine andere Sicht der Dinge
• Webstandards, das Design mit CSS
  erfordern eine andere Sicht der Dinge, als
  sie tr...
35

Anderes Medium – andere
Denkweise
• Ein anderes Medium erfordert ein anderes
  Vorgehen, eine andere Denkweise.
• Die ...
36

Anderes Medium – andere
Denkweise
• Layout und Inhalt sind getrennt. Diese
  Trennung hat ihre Vorteile, denn so kann
...
37



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




                http://w...
38




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

 http://creativecommons....
Nächste SlideShare
Wird geladen in …5
×

Webstandards für ein modernes Web

1.574 Aufrufe

Veröffentlicht am

Vortrag auf der Webinale 2007 über Webstandards und ein modernes Web.

Veröffentlicht in: Technologie
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.574
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
14
Aktionen
Geteilt
0
Downloads
11
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Webstandards für ein modernes Web

  1. 1. Webstandards – die Basis für ein modernes Web Jens Grochtdreis, SinnerSchrader Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  2. 2. 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 ... Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  3. 3. 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. Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  4. 4. 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 Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  5. 5. 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“ Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  6. 6. 6 Wo stehen wir? • „Mitmach-Web“, vulgo: Web 2.0 • Andere „arbeiten lassen“, selber kassieren • Offener Austausch • Mashups • APIs (Schnittstellen!) • Professionalisierung Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  7. 7. 7 Wo stehen wir? • Professionalisierung • Häufiger korrekte Nutzung der Standards • Immernoch hohe Ignoranz gegenüber Standards Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  8. 8. 8 Wo gehen wir hin? Das Internet • wird noch mobiler, • wird multimedialer, • wird mehr mit TV veschmelzen, • es wird noch mehr Anzeigeoptionen geben! Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  9. 9. 9 Was bedeutet Web 2.0? • Das „Mitmach-Web“ läßt sich auf einen Nenner bringen: Kontrollverlust Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  10. 10. 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. Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  11. 11. 11 Kontrollverlust - formal Wie können wir heute ins Internet gehen? • PC, Notebook • viele Betriebssyteme, Browser, Monitore • Handy, PDA • Spielkonsole • TV Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  12. 12. 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! Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  13. 13. 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. Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  14. 14. 14 Die Ebenen einer Webseite Dynamik Javascript, DOM Layout CSS Struktur (X)HTML Inhalt MySQL, XML Business-Logik PHP, ASP, JAVA Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  15. 15. 15 Die Realität? • Viele Webseiten sind noch mit Layouttabellen aufgebaut. Layout und Struktur sind damit eins. • Diese Seiten sind unflexibel, nicht zukunftssicher. Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  16. 16. 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 Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  17. 17. 17 Nicht flexibel Was soll das? Text! Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  18. 18. 18 Flexibel Besser! Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  19. 19. 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. Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  20. 20. 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. Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  21. 21. 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 Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  22. 22. 22 Browsereigene Stylesheets Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  23. 23. 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. Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  24. 24. 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 Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  25. 25. 25 Die Realität? • Sonderbehandlung dank Microsoft • Aber auch die anderen Browser sind nicht fehlerfrei • Mobile Browser unterstützen das media-Attribut nicht! Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  26. 26. 26 Standards? W3C XML (X)HTML SVG CSS WCAG MathML WCAG (Web Content Accessibility Guidelines) XMLHttpRequest SWF ECMA-Script innerHTML Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  27. 27. 27 Reichen diese Standards? NEIN Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  28. 28. 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 Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  29. 29. 29 Mikroformate • Auf Basis bestehender Standards werden neue Wege der Informationsvermittlung beschritten. Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  30. 30. 30 Alle müssen mitmachen • Schnelle Standardisierungsverfahren • Schnelle Implementierung in Browser • Entwickler müssen lernen • Anwender müssen Updatezyklen mitmachen Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  31. 31. 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? Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  32. 32. 32 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. Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  33. 33. 33 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! Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  34. 34. 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. Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  35. 35. 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. Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  36. 36. 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 Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  37. 37. 37 Mitmachen! Bauen Sie an einem modernen Web mit, nutzen Sie Webstandards mit Verstand! http://webkrauts.de Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  38. 38. 38 Diese Präsentation steht unter der Creative Commons Lizenz „Attribution-ShareAlike 2.0“ http://creativecommons.org/licenses/by-sa/2.0/de/ Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web

×