2. Jens Grochtdreis
‣ Frontendentwickler
‣ 10 Jahre Agenturerfahrung
‣ 12 Jahre Arbeit im und fürs Web
‣ Gründer der Webkrauts
‣ Blogger
‣ Autor für: PHPMagazin, PHPUser, T3N,
Webstandards-Magazin
‣ Fachliche Buchbetreuung bei Galileo, O'Reilly, MuT
12. ‣ Texte formatieren
‣ Farben für Vorder- und Hintergründe
‣ Positionierungen
‣ Floats
‣ Bilder werden für viele Lösungen benötigt
‣ Manchmal wird Extra-Markup für Bilder-
Lösungen benötigt
‣ Transparenz mit Nebenwirkungen
18. Neue semantische Elemente
‣ Nehmen an vielen Stellen den Platz des DIV
ein.
‣ Orientieren sich an der gelebten Praxis im
Web.
‣ Keine besonderen Funktionen im Browser.
Einfach neue Elemente.
‣ WAI-ARIA inklusive!
19. Neue Semantik
‣ Feinstrukturierung des Inhalts
‣ Browser übernimmt Überschriftenhierarchie.
Auf komplexen Seiten ist das klasse!
Outline-Algorithmus
24. ‣ Jeder Inhalt innerhalb des <body>-Elements ist
Teil einer "section" (eines Abschnitts). Sections
können in HTML5 verschachtelt werden.
‣ Das <body>-Element ist die Haupt-Section.
Weitere Sections werden implizit (h1 - h6)
oder explizit definiert.
‣ Explizit definieren folgende Elemente eine
Section:
‣ <body>, <section>, <article>, <aside>,
<footer>, <header>, <nav>
25. Jede Section hat eine eigene
Überschriftenhierarchie
https://developer.mozilla.org/en/Sections_and_Outlines_of_an_HTML5_document
26. Die Outline - Unsicherheit
Aus MDN-Artikel Online-Outliner-Tool
http://gsnedders.html5.org/outliner/process.py
29. ‣ HTML5-Seiten funktionieren in alten Browsern
nur mittels Javascript. Das betrifft im
Wesentlichen IE bis einschließlich Version 8.
http://code.google.com/p/html5shim/ http://www.modernizr.com/
38. Und wenn ein Browser die
neuen Elemente nicht kennt?
39. Dann werden die neuen Input-
Elemente zu
<input type=“text“>
und Attribute ignoriert
40. Eingebaute Validierung
Opera 11.5 Mac
Firefox 5 Mac
Chrome 15
dev Mac
Chrome kommt mit skalierten Seiten nicht zurecht!
41. Und wenn der Browser die
Validierung nicht kennt?
‣ Ignorieren ( = Progressive enhancement)
‣ JS-Alternativen bei Bedarf nachladen, bspw. mit
Modernizr (http://modernizr.com)
‣ Polyfills verwenden
‣ https://github.com/Modernizr/Modernizr/
wiki/HTML5-Cross-Browser-Polyfills
45. Transparenz
mit rgba() runde Ecken
Verläufe (gradient)
Transitions
media-queries
calc() mehrere Spalten
46. Die Vorteile
‣ Weniger Schmuckbilder werden benötigt.
‣ Weniger Javascript wird benötigt.
‣ Animationen und Transitionen sind mittels CSS
schneller, als mittels Javascript.
‣ Es wird seltener Code nur für Optik benötigt,
der Quellcode schmaler und lesbarer.
51. ‣ Können ältere IE (bis einschließlich Version 8)
nicht.
‣ Ihnen kann mittels Javascript geholfen werden.
‣ Wenn es sich um keine „lebensnotwendigen“
Operationen handelt, ist eine Nachhilfe via
Javascript okay.
75. Progressive Enhancement
‣ Fokus ist auf den Content, denn um den geht
es am Ende (fast) immer
http://www.alistapart.com/articles/understandingprogressiveenhancement/
76. Graceful Degredation
‣ Fokus ist auf den modernsten Browsern
‣ ältere Browser bekommen eine abgespeckte
Version
http://stuffandnonsense.co.uk/
77. Brutal Degredation
bis einschließlich IE8 moderne Browser
http://www.fillerati.com/
81. ‣ Microsoft hat im Wesentlichen erst ab dem IE9
beschlossen, an der technischen
Weiterentwicklung des Internets zu
partizipieren.
‣ Für viele Techniken ist es also egal, ob wir vom
IE6 oder IE8 reden.
‣ Manches kann man mit Javascript simulieren.
‣ Manches kann man ansatzweise mit IE-Filtern
realisieren.
‣ Ansonsten:
graceful degredation / progressive enhancement
99. Jens Grochtdreis
http://grochtdreis.de
http://twitter.com/Flocke
http://webkrauts.de
http://slideshare.net/Flocke669
Diese Präsentation steht unter
der Creative Commons Lizenz
„Attribution-ShareAlike 2.0“
http://creativecommons.org/licenses/by-sa/2.0/de/