Your SlideShare is downloading. ×
0
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
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
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
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
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
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
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
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
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
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
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
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Echte Lösungen, keine Tricks

2,203

Published on

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

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

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,203
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
1
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×