18-mal heruntergeladen
Hochgeladen vonJens Grochtdreis
Echte Lösungen, keine Tricks
Das Dokument behandelt die Entwicklungen in HTML5 und CSS3, besonders im Hinblick auf neue semantische Elemente und Verbesserungen in der Webgestaltung. Es thematisiert die Herausforderungen der Kompatibilität mit älteren Browsern und die Methoden des 'progressive enhancement'. Abschließend werden Best Practices für Webentwickler hervorgehoben, wie Nachdenken, Recherchieren und Experimentieren.
Weitere ähnliche Inhalte
Ähnlich wie Echte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
- 1. Echte Lösungen, keine Tricks!
- 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
- 5.
- 6. Immer weniger Dokumente, immer mehr Applikationen
- 9.
- 11. Was konnten wirbisher mit CSS machen?
- 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
- 13.
- 14. One Doctype to rule them all <!DOCTYPE html>
- 15.
- 16.
- 17.
- 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 ‣ Feinstrukturierungdes Inhalts ‣ Browser übernimmt Überschriftenhierarchie. Auf komplexen Seiten ist das klasse! Outline-Algorithmus
- 20.
- 21.
- 22. Überschriften ‣ HTML4/XHTML: 6Überschriften ‣ HTML5: unendlich viele Überschriften
- 24. ‣ Jeder Inhaltinnerhalb 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 hateine 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
- 27.
- 28. An die Konsequenzen denken!
- 29. ‣ HTML5-Seiten funktionierenin 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/
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36. Date Chrome 15 dev Firefox 5 Opera 11.5
- 37.
- 38. Und wenn einBrowser die neuen Elemente nicht kennt?
- 39. Dann werden dieneuen 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 derBrowser 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
- 43. Welche Lücke fülltCSS3?
- 44. neue Layoutmodelle mehr Möglichkeitenmit Rahmen und Hintergründen Verringerung des Grafikeinsatzes Animationen neue Selektoren
- 45. Transparenz mit rgba() runde Ecken Verläufe (gradient) Transitions media-queries calc() mehrere Spalten
- 46. Die Vorteile ‣ WenigerSchmuckbilder 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.
- 47.
- 48. Die Nachteile Es gibtkeine!
- 49. Oder doch einenkleinen
- 50.
- 51. ‣ Können ältereIE (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.
- 53.
- 54. Kann ich CSS3und HTML5 schon heute nutzen?
- 55.
- 56. Manche neuen Eigenschaften sindin keinem Browser implementiert.
- 57. Funktioniert das auch im IE? http://www.sts.tu-harburg.de/projects/WEL/0911/images/Der%20Schrei.jpg
- 58.
- 59.
- 60.
- 61. Der Fortschritt richtetsich nach dem Langsamsten wegen dessen Verbreitung.
- 62.
- 63. Wir sind gefangenzwischen Modernität und IE!
- 64. Das Web istper se flexibel
- 65. „Responsive Design“ istalso keine Neuerfindung
- 67. Der Konsument kann Informationenaus dem Internet nutzen, wie er es möchte.
- 68.
- 69.
- 70. wichtige Erkenntnis: Es kannnicht DIE EINE Darstellungsform geben!
- 71.
- 72. Unser Layout istnur eine Empfehlung!
- 73.
- 74.
- 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/
- 78.
- 79.
- 80.
- 81. ‣ Microsoft hatim 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
- 82. Auch mit modernen Technikenkann man Unfug machen
- 83. CSS3 ≠ immersinnvoll http://codepo8.github.com/CSS3-Rainbow-Dividers/
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97. Die drei wichtigsten Best Practices Nachdenken Recherchieren Experimentieren http://goo.gl/NYGeI http://goo.gl/HbFx0 http://goo.gl/LohPq
- 98.
- 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/