Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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.644 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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

×