Echte Lösungen,  keine Tricks!
Jens Grochtdreis‣ Frontendentwickler‣ 10 Jahre Agenturerfahrung‣ 12 Jahre Arbeit im und fürs Web‣ Gründer der Webkrauts‣ B...
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öt...
HTML5-Schlaglichter
One Doctype   to rule them all<!DOCTYPE html>
Links um Blockelemente
Neue semantische Elemente
Neue HTML5-Elementehttp://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...
Neue Semantik‣ Feinstrukturierung des Inhalts‣ Browser übernimmt Überschriftenhierarchie.  Auf komplexen Seiten ist das kl...
http://html5doctor.com/
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 versc...
Jede Section hat eine eigene       Überschriftenhierarchiehttps://developer.mozilla.org/en/Sections_and_Outlines_of_an_HTM...
Die Outline - Unsicherheit                 Aus MDN-Artikel                 Online-Outliner-Toolhttp://gsnedders.html5.org/...
Droht uns das?https://github.com/cboone/hypsometric-css/blob/master/html5/html5-defaults.css#L426
An die Konsequenzen       denken!
‣ HTML5-Seiten funktionieren in alten Browsern                    nur mittels Javascript. Das betrifft im                 ...
Mit Javascript
Ohne Javascript
HTML5-Formularelemente
HTML5-Formularelemente
Passende Bildschirmtastatur
http://wufoo.com/html5/
Date             Chrome 15 dev   Firefox 5Opera 11.5
Das placeholder-Attributhttp://wufoo.com/html5/attributes/01-placeholder.html
Und wenn ein Browser dieneuen Elemente nicht kennt?
Dann werden die neuen Input-        Elemente zu    <input type=“text“>   und Attribute ignoriert
Eingebaute Validierung                                         Opera 11.5 Mac                                           Fi...
Und wenn der Browser die Validierung nicht kennt? ‣ Ignorieren ( = Progressive enhancement) ‣ JS-Alternativen bei Bedarf n...
Welche Lücke füllt CSS3?
neue Layoutmodellemehr Möglichkeiten mit Rahmen und Hintergründen       Verringerung des        Grafikeinsatzes            ...
Transparenz     mit rgba()                   runde Ecken                         Verläufe (gradient)Transitions           ...
Die Vorteile‣ Weniger Schmuckbilder werden benötigt.‣ Weniger Javascript wird benötigt.‣ Animationen und Transitionen sind...
http://maddesigns.de/teaserboxen-komplett-ohne-bilder-css3-adventskalender-tag-9-489.html
Die NachteileEs 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...
http://jsfiddle.net/Flocke/VCSEB/
Kann ich CSS3 und HTML5   schon heute nutzen?
JEIN
Manche neuen Eigenschaftensind in keinem Browser implementiert.
Funktioniert das                                                    auch im IE?http://www.sts.tu-harburg.de/projects/WEL/0...
http://www.findmebyip.com/litmus/
http://www.findmebyip.com/litmus/
http://www.findmebyip.com/litmus/
Der Fortschritt richtet sich nach dem Langsamstenwegen dessen Verbreitung.
Alte IE-Versionen ...http://blogs.sitepointstatic.com/images/tech/121-ie6-mod-orange.jpg
Wir sind gefangen zwischen    Modernität und IE!
Das Web ist per se flexibel
„Responsive Design“ ist also    keine Neuerfindung
Der Konsument kannInformationen aus dem Internet   nutzen, wie er es möchte.
http://mediaqueri.es/
http://www.webdesignshock.com/responsive-design-problems/
wichtige Erkenntnis:Es kann nicht DIE EINEDarstellungsform geben!
http://shouldwebsiteslookthesameinallbrowsers.com/
Unser Layout ist nur eine      Empfehlung!
Frühzeitig aufEntwicklungsstrategie      einigen
IE ≠ modernhttp://css3generator.com/
Progressive Enhancement               ‣ Fokus ist auf den Content, denn um den geht                    es am Ende (fast) i...
Graceful Degredation                ‣ Fokus ist auf den modernsten Browsern                ‣ ältere Browser bekommen eine ...
Brutal Degredation          bis einschließlich IE8      moderne Browserhttp://www.fillerati.com/
http://workdiary.de/
Umgang mit dem IE
Fallbacklösungen
‣ Microsoft hat im Wesentlichen erst ab dem IE9  beschlossen, an der technischen  Weiterentwicklung des Internets zu  part...
Auch mit modernenTechniken kann man Unfug         machen
CSS3 ≠ immer sinnvollhttp://codepo8.github.com/CSS3-Rainbow-Dividers/
http://csszengarden.com/?cssfile=http://www.brucelawson.co.uk/zen/sample.css
Frameworks/Tools
http://html5boilerplate.com/
http://www.modernizr.com/
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
http://www.css3.me/
http://www.css3maker.com/
http://css3.mikeplate.com/
http://css3buttongenerator.com/
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 PracticesNachdenken             Recherchieren            Experimentieren http://goo....
Twitter: @FlockeSlideshare: Flocke669
Jens Grochtdreis                                                     http://grochtdreis.de                                ...
Echte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
Próxima SlideShare
Cargando en…5
×

Echte Lösungen, keine Tricks

3.312 visualizaciones

Publicado el

Deutschsprachige Version eines Vortrags bei der SAE Alumni Convention 2011 über moderne Webentwicklung im Fokus von HTML5 und CSS3

Publicado en: Tecnología
1 comentario
2 recomendaciones
Estadísticas
Notas
Sin descargas
Visualizaciones
Visualizaciones totales
3.312
En SlideShare
0
De insertados
0
Número de insertados
432
Acciones
Compartido
0
Descargas
18
Comentarios
1
Recomendaciones
2
Insertados 0
No insertados

No hay notas en la diapositiva.

Echte Lösungen, keine Tricks

  1. 1. Echte Lösungen, keine Tricks!
  2. 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, OReilly, MuT
  3. 3. http://www.wait-till-i.com/2011/03/14/html5-moving-from-hacks-to-solutions-my-talk-at-confoo-in-montreal/
  4. 4. Immer weniger Dokumente, immer mehr Applikationen
  5. 5. Fehlende Bedienelemente
  6. 6. Was konnten wir bisher mit CSS machen?
  7. 7. ‣ 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
  8. 8. HTML5-Schlaglichter
  9. 9. One Doctype to rule them all<!DOCTYPE html>
  10. 10. Links um Blockelemente
  11. 11. Neue semantische Elemente
  12. 12. Neue HTML5-Elementehttp://html5doctor.com/designing-a-blog-with-html5/#comment-17535
  13. 13. 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!
  14. 14. Neue Semantik‣ Feinstrukturierung des Inhalts‣ Browser übernimmt Überschriftenhierarchie. Auf komplexen Seiten ist das klasse! Outline-Algorithmus
  15. 15. http://html5doctor.com/
  16. 16. Der Outline-Algorithmus
  17. 17. Überschriften‣ HTML4/XHTML: 6 Überschriften‣ HTML5: unendlich viele Überschriften
  18. 18. ‣ 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>
  19. 19. Jede Section hat eine eigene Überschriftenhierarchiehttps://developer.mozilla.org/en/Sections_and_Outlines_of_an_HTML5_document
  20. 20. Die Outline - Unsicherheit Aus MDN-Artikel Online-Outliner-Toolhttp://gsnedders.html5.org/outliner/process.py
  21. 21. Droht uns das?https://github.com/cboone/hypsometric-css/blob/master/html5/html5-defaults.css#L426
  22. 22. An die Konsequenzen denken!
  23. 23. ‣ 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/
  24. 24. Mit Javascript
  25. 25. Ohne Javascript
  26. 26. HTML5-Formularelemente
  27. 27. HTML5-Formularelemente
  28. 28. Passende Bildschirmtastatur
  29. 29. http://wufoo.com/html5/
  30. 30. Date Chrome 15 dev Firefox 5Opera 11.5
  31. 31. Das placeholder-Attributhttp://wufoo.com/html5/attributes/01-placeholder.html
  32. 32. Und wenn ein Browser dieneuen Elemente nicht kennt?
  33. 33. Dann werden die neuen Input- Elemente zu <input type=“text“> und Attribute ignoriert
  34. 34. Eingebaute Validierung Opera 11.5 Mac Firefox 5 Mac Chrome 15 dev MacChrome kommt mit skalierten Seiten nicht zurecht!
  35. 35. 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
  36. 36. Welche Lücke füllt CSS3?
  37. 37. neue Layoutmodellemehr Möglichkeiten mit Rahmen und Hintergründen Verringerung des Grafikeinsatzes Animationen neue Selektoren
  38. 38. Transparenz mit rgba() runde Ecken Verläufe (gradient)Transitions media-queries calc() mehrere Spalten
  39. 39. 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.
  40. 40. http://maddesigns.de/teaserboxen-komplett-ohne-bilder-css3-adventskalender-tag-9-489.html
  41. 41. Die NachteileEs gibt keine!
  42. 42. Oder doch einen kleinen
  43. 43. moderne Selektoren
  44. 44. ‣ 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.
  45. 45. http://jsfiddle.net/Flocke/VCSEB/
  46. 46. Kann ich CSS3 und HTML5 schon heute nutzen?
  47. 47. JEIN
  48. 48. Manche neuen Eigenschaftensind in keinem Browser implementiert.
  49. 49. Funktioniert das auch im IE?http://www.sts.tu-harburg.de/projects/WEL/0911/images/Der%20Schrei.jpg
  50. 50. http://www.findmebyip.com/litmus/
  51. 51. http://www.findmebyip.com/litmus/
  52. 52. http://www.findmebyip.com/litmus/
  53. 53. Der Fortschritt richtet sich nach dem Langsamstenwegen dessen Verbreitung.
  54. 54. Alte IE-Versionen ...http://blogs.sitepointstatic.com/images/tech/121-ie6-mod-orange.jpg
  55. 55. Wir sind gefangen zwischen Modernität und IE!
  56. 56. Das Web ist per se flexibel
  57. 57. „Responsive Design“ ist also keine Neuerfindung
  58. 58. Der Konsument kannInformationen aus dem Internet nutzen, wie er es möchte.
  59. 59. http://mediaqueri.es/
  60. 60. http://www.webdesignshock.com/responsive-design-problems/
  61. 61. wichtige Erkenntnis:Es kann nicht DIE EINEDarstellungsform geben!
  62. 62. http://shouldwebsiteslookthesameinallbrowsers.com/
  63. 63. Unser Layout ist nur eine Empfehlung!
  64. 64. Frühzeitig aufEntwicklungsstrategie einigen
  65. 65. IE ≠ modernhttp://css3generator.com/
  66. 66. Progressive Enhancement ‣ Fokus ist auf den Content, denn um den geht es am Ende (fast) immerhttp://www.alistapart.com/articles/understandingprogressiveenhancement/
  67. 67. Graceful Degredation ‣ Fokus ist auf den modernsten Browsern ‣ ältere Browser bekommen eine abgespeckte Versionhttp://stuffandnonsense.co.uk/
  68. 68. Brutal Degredation bis einschließlich IE8 moderne Browserhttp://www.fillerati.com/
  69. 69. http://workdiary.de/
  70. 70. Umgang mit dem IE
  71. 71. Fallbacklösungen
  72. 72. ‣ 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
  73. 73. Auch mit modernenTechniken kann man Unfug machen
  74. 74. CSS3 ≠ immer sinnvollhttp://codepo8.github.com/CSS3-Rainbow-Dividers/
  75. 75. http://csszengarden.com/?cssfile=http://www.brucelawson.co.uk/zen/sample.css
  76. 76. Frameworks/Tools
  77. 77. http://html5boilerplate.com/
  78. 78. http://www.modernizr.com/
  79. 79. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  80. 80. http://www.css3.me/
  81. 81. http://www.css3maker.com/
  82. 82. http://css3.mikeplate.com/
  83. 83. http://css3buttongenerator.com/
  84. 84. http://www.sciweavers.org/i2style
  85. 85. http://www.colorzilla.com/gradient-editor/
  86. 86. http://www.display-inline.fr/projects/css-gradient/
  87. 87. http://leaverou.me/demos/nth.html
  88. 88. Die drei wichtigsten Best PracticesNachdenken Recherchieren Experimentieren http://goo.gl/NYGeI http://goo.gl/HbFx0 http://goo.gl/LohPq
  89. 89. Twitter: @FlockeSlideshare: Flocke669
  90. 90. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke http://webkrauts.de http://slideshare.net/Flocke669Diese Präsentation steht unterder Creative Commons Lizenz„Attribution-ShareAlike 2.0“http://creativecommons.org/licenses/by-sa/2.0/de/

×