echte lösungen, keine tricks
DESCRIPTION
Deutschsprachige Version eines Vortrags bei der SAE Alumni Convention 2011 über moderne Webentwicklung im Fokus von HTML5 und CSS3TRANSCRIPT
Echte Lösungen, keine Tricks!
‣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
Jens Grochtdreis
http://www.wait-till-i.com/2011/03/14/html5-moving-from-hacks-to-solutions-my-talk-at-confoo-in-montreal/
Immer weniger Dokumente, immer mehr Applikationen
Fehlende Bedienelemente
Was konnten wir bisher mit CSS machen?
‣ 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
HTML5-Schlaglichter
One Doctype to rule them all
<!DOCTYPE html>
Links um Blockelemente
Neue semantische Elemente
Neue HTML5-Elemente
http://html5doctor.com/designing-a-blog-with-html5/#comment-17535
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!
Neue Semantik
‣ Feinstrukturierung des Inhalts
‣ Browser übernimmt Überschriftenhierarchie. Auf komplexen Seiten ist das klasse! Outline-Algorithmus
Der Outline-Algorithmus
Überschriften
‣ HTML4/XHTML: 6 Überschriften
‣ HTML5: unendlich viele Überschriften
‣ 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>
https://developer.mozilla.org/en/Sections_and_Outlines_of_an_HTML5_document
Jede Section hat eine eigene Überschriftenhierarchie
Die Outline - Unsicherheit
Aus MDN-Artikel
http://gsnedders.html5.org/outliner/process.py
Online-Outliner-Tool
Droht uns das?
https://github.com/cboone/hypsometric-css/blob/master/html5/html5-defaults.css#L426
An die Konsequenzen denken!
http://code.google.com/p/html5shim/
‣ HTML5-Seiten funktionieren in alten Browsern nur mittels Javascript. Das betrifft im Wesentlichen IE bis einschließlich Version 8.
http://www.modernizr.com/
Mit Javascript
Ohne Javascript
HTML5-Formularelemente
HTML5-Formularelemente
Passende Bildschirmtastatur
Date
Opera 11.5
Chrome 15 dev Firefox 5
http://wufoo.com/html5/attributes/01-placeholder.html
Das placeholder-Attribut
Und wenn ein Browser die neuen Elemente nicht kennt?
Dann werden die neuen Input-Elemente zu
<input type=“text“> und Attribute ignoriert
Eingebaute Validierung
Firefox 5 Mac
Opera 11.5 Mac
Chrome 15 dev Mac
Chrome kommt mit skalierten Seiten nicht zurecht!
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
Welche Lücke füllt CSS3?
Animationen
Verringerung des Grafikeinsatzes
neue Layoutmodelle
mehr Möglichkeiten mit Rahmen und Hintergründen
neue Selektoren
runde Ecken
Verläufe (gradient)
Transitions
mehrere Spaltencalc()
Transparenz mit rgba()
media-queries
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.
http://maddesigns.de/teaserboxen-komplett-ohne-bilder-css3-adventskalender-tag-9-489.html
Die Nachteile
Es gibt keine!
Oder doch einen kleinen
moderne Selektoren
‣ 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.
http://jsfiddle.net/Flocke/VCSEB/
Kann ich CSS3 und HTML5 schon heute nutzen?
JEIN
Manche neuen Eigenschaften sind in keinem Browser implementiert.
Funktioniert das auch im IE?
http://www.sts.tu-harburg.de/projects/WEL/0911/images/Der%20Schrei.jpg
http://www.findmebyip.com/litmus/
http://www.findmebyip.com/litmus/
http://www.findmebyip.com/litmus/
Der Fortschritt richtet sich nach dem Langsamsten
wegen dessen Verbreitung.
http://blogs.sitepointstatic.com/images/tech/121-ie6-mod-orange.jpg
Alte IE-Versionen ...
Wir sind gefangen zwischen Modernität und IE!
Das Web ist per se flexibel
„Responsive Design“ ist also keine Neuerfindung
Der Konsument kann Informationen aus dem Internet
nutzen, wie er es möchte.
http://www.webdesignshock.com/responsive-design-problems/
wichtige Erkenntnis: Es kann nicht DIE EINE Darstellungsform geben!
http://shouldwebsiteslookthesameinallbrowsers.com/
Unser Layout ist nur eine Empfehlung!
Frühzeitig auf Entwicklungsstrategie
einigen
Progressive Enhancement
http://www.alistapart.com/articles/understandingprogressiveenhancement/
‣ Fokus ist auf den Content, denn um den geht es am Ende (fast) immer
Graceful Degredation
‣ Fokus ist auf den modernsten Browsern
‣ ältere Browser bekommen eine abgespeckte Version
http://stuffandnonsense.co.uk/
Brutal Degredation
bis einschließlich IE8 moderne Browser
http://www.fillerati.com/
Umgang mit dem IE
Fallbacklösungen
‣ 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
Auch mit modernen Techniken kann man Unfug
machen
CSS3 ≠ immer sinnvoll
http://codepo8.github.com/CSS3-Rainbow-Dividers/
http://csszengarden.com/?cssfile=http://www.brucelawson.co.uk/zen/sample.css
Frameworks/Tools
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
http://www.sciweavers.org/i2style
http://www.colorzilla.com/gradient-editor/
http://www.display-inline.fr/projects/css-gradient/
http://leaverou.me/demos/nth.html
Die drei wichtigsten Best Practices
Nachdenken Recherchieren
http://goo.gl/HbFx0http://goo.gl/NYGeI
Experimentieren
http://goo.gl/LohPq
Twitter: @Flocke
Slideshare: Flocke669
Jens Grochtdreishttp://grochtdreis.de
http://twitter.com/Flockehttp://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/