HTML5 / CSS3

8,947 views
8,855 views

Published on

Mit HTML5 in die Zukunft
Mit CSS3 alles schöner

Published in: Technology
2 Comments
8 Likes
Statistics
Notes
  • Danke fürs sharen.
    Auch diese Präsi zeigt wieder eindeutig das HTML5 für den Produktiveinsatz im Prinzip uninteressant ist, dank des IE
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Folien des Vortrags zu HTML5 und CSS3 beim #Webtreff #Konstanz von gestern abend sind online.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
8,947
On SlideShare
0
From Embeds
0
Number of Embeds
111
Actions
Shares
0
Downloads
177
Comments
2
Likes
8
Embeds 0
No embeds

No notes for slide

HTML5 / CSS3

  1. 1. HTML5 / CSS3 19.10.2009 - Webtreff - Konstanz Lars Messmer - COMSOLIT GmbH HTML5/CCS3 Version: Seite / 68
  2. 2. COMSOLIT GmbH Fullservice Agentur die erfolgreich professionelle Gesamtlösungen umsetzt. Zu den Kernkompetenzen zählen: • Web / Design Visuelles Erscheinungsbild für Web und Druck • Business Lösungen Optimale Geschäftslösungen um die Produktivität zu steigern • Software Entwicklungen Innovative und komplexe Lösungen mit neusten Technologien • E-Marketing Zielorientiert Umsatz steigern, Image und Marke stärken • Unterhalt / Betrieb / Hosting Hohe Performance, modernste Technik und Anbindung HTML5/CCS3 Version: Seite / 68
  3. 3. HTML5/CCS3 Version: Seite 3 / 68
  4. 4. doctype HTML5/CCS3 Version: Seite / 68
  5. 5. doctype HTML5/CCS3 Version: Seite 5 / 68
  6. 6. doctype HTML5/CCS3 Version: Seite 6 / 68
  7. 7. HTML5/CCS3 Version: Seite / 68
  8. 8. Neue Anforde- rungen HTML5/CCS3 Version: Seite 8 / 68
  9. 9. Neue Herausforderungen • Grafik • Geschwindigkeit • Speicher / Caching • Livecontent • Applications / JS Performance • Geolocation HTML5/CCS3 Version: Seite / 68
  10. 10. HTML5/CCS3 Version: Seite 0 / 68
  11. 11. mit HTML5 in die Zukunft HTML5/CCS3 Version: Seite / 68
  12. 12. HTML 5 • Struktur Elemente / Attribute • DOM (document object model) • Canvas (2d, reflection, diagramme etc.) • neue input Elemente zur Validierung (date, number, email etc.) • Multimedia Unterstützung • API‘s, editing, dragdrop • Offline Unterstützung HTML5/CCS3 Version: Seite / 68
  13. 13. HTML5/CCS3 Version: Seite 3 / 68
  14. 14. the old way html4 HTML5/CCS3 Version: Seite / 68
  15. 15. HTML5 - Elemente ID / Class Webdesigner benutzen derzeit .class und #id um Styling und Logik abzubilden. HTML5/CCS3 Version: Seite 5 / 68
  16. 16. HTML5/CCS3 Version: Seite 6 / 68
  17. 17. HTML5/CCS3 Version: Seite / 68
  18. 18. the new way html5 HTML5/CCS3 Version: Seite 8 / 68
  19. 19. HTML5/CCS3 Version: Seite / 68
  20. 20. HTML5/CCS3 Version: Seite 0 / 68
  21. 21. DOM html5 HTML5/CCS3 Version: Seite / 68
  22. 22. HTML5 - DOM 5 getElementsByClassName var mydoc = document.getElementsByClassName (‚item child‘); HTML5/CCS3 Version: Seite / 68
  23. 23. HTML5 - Elemente em = verschachtelbar b = hervorheben i = markieren noscript acronym = abbr HTML5/CCS3 Version: Seite 3 / 68
  24. 24. HTML5/CCS3 Version: Seite / 68
  25. 25. API HTML5/CCS3 Version: Seite 5 / 68
  26. 26. HTML5 - APIs • Geolocation • Application Cache • drag drop • Canvas • Editing • Database Storage • Video Audio HTML5/CCS3 Version: Seite 6 / 68
  27. 27. HTML5 APIs - Video - the old way OBJECT WIDTH=“425“ HEIGHT=“344“PARAM NAME=“MOVIE“ VALUE=“HTTP://WWW.YOUTUBE.COM/V/ 4GUKSQAG5XIHL=ENFS=1“/PARAMPARAM NAME=“ALLOWFULLSCREEN“ VALUE=“TRUE“/ PARAMPARAM NAME=“ALLOWSCRIPTACCESS“ VALUE=“ALWAYS“/ PARAMEMBED SRC=“HTTP://WWW.YOUTUBE.COM/V/4GUKSQAG5XIHL=E NFS=1“ TYPE=“APPLICATION/X-SHOCKWAVE-FLASH“ ALLOWSCRIPTACCESS=“ALWAYS“ ALLOWFULLSCREEN=“TRUE“ WIDTH=“425“ HEIGHT=“344“/EMBED/OBJECT HTML5/CCS3 Version: Seite / 68
  28. 28. HTML5 APIs - Video - the new way VIDEO SRC=“HTML5TEST.OGG“ WIDTH=“320“ HEIGHT=“240“ CONTROLS POSTER=“HTML5TESTVIDEOPOSTER.JPG“ A HREF=“HTML5TESTVIDEO.OGG“DOWNLOAD MOVIE/A /VIDEO HTML5/CCS3 Version: Seite 8 / 68
  29. 29. HTML5 API‘s - drag drop ol ondragstart=“dragStartHandler(event)“ li draggable data-value=“item1“item1/li ... ol class=“dropzone“ ondragenter=“dragEnterHandler(event)“ ondragover=“dragOverHandler(event)“ ondrop=“dropHandler(event)“ HTML5/CCS3 Version: Seite / 68
  30. 30. HTML5 API‘s - Application Cache body manifest=“cache.manifest“ /body CACHE MANIFEST images/dc203.jpg Das Bild wird im Offline Cache gespeichert HTML5/CCS3 Version: Seite 30 / 68
  31. 31. HTML5 - Live Beispiele • Wordpress Turbo http://wordpress.org/ local storage mit Gears • Youtube http://www.youtube.com/ Video API • Flickr http://www.flickr.com/ Canvas API HTML5/CCS3 Version: Seite 3 / 68
  32. 32. HTML5/CCS3 Version: Seite 3 / 68
  33. 33. ? XHML2 ? HTML5/CCS3 Version: Seite 33 / 68
  34. 34. XHTML • Radikale Änderungen • schlechte Rückwärtskompatiblität • keine Unterstützung der Browserhersteller • Projekt wird auf Ende 2009 eingestellt (W3C) HTML5/CCS3 Version: Seite 3 / 68
  35. 35. HTML5/CCS3 Version: Seite 35 / 68
  36. 36. mit CSS3 alles schöner HTML5/CCS3 Version: Seite 36 / 68
  37. 37. CSS3 • Transparenz • runde Ecken • TTF Schrift Unterstützung • Animationen und Verlauf • verbessertes Box Model • Grid model (column) HTML5/CCS3 Version: Seite 3 / 68
  38. 38. CSS3 • Regular Expressions • neue Selectoren • neue pseudo Klassen • berechnen mit calc() • Erweiterungen in Text styling • Accessibility (@media reader) HTML5/CCS3 Version: Seite 38 / 68
  39. 39. CSS3 @font-face ttf, oft, eot (IE), svg @font-face { font-family: Gentium; src: url(http://site/fonts/Gentium.ttf); } p { font-family: Gentium, serif; } HTML5/CCS3 Version: Seite 3 / 68
  40. 40. CSS3 Attribute Selector p[item^=“act“] {background: #f00;} item muss mit „act“ anfangen HTML5/CCS3 Version: Seite 0 / 68
  41. 41. CSS3 Regular Expressions p[item^=“act“] p[item$=“act“] p[item*=“act“] Analog CSS2 Attribute Selectors p[item=“act“] HTML5/CCS3 Version: Seite / 68
  42. 42. CSS3 Pseudo Klassen :checked, :empty, :only-child :nth-of-type(odd), :nth-of-type(even) ... #listli:nth-of-type(odd) { background: #ddd; } HTML5/CCS3 Version: Seite / 68
  43. 43. CSS3 HTML5/CCS3 Version: Seite 3 / 68
  44. 44. CSS3 CSS3 styling HTML5/CCS3 Version: Seite / 68
  45. 45. CSS3 Styling rounded courners, multiple backgrounds box-shadow, text-shadow... border-bottom-image: url(border.png); box-shadow: 10px 10px #888; border-radius: 5px; HTML5/CCS3 Version: Seite 5 / 68
  46. 46. HTML5/CCS3 Version: Seite 6 / 68
  47. 47. CSS3 intelligentes BOX model HTML5/CCS3 Version: Seite / 68
  48. 48. CSS3 Box Model und calc() verbessertes Box Model neue Eigenschaft calc() box-sizing : border-box; width : calc(100%/3 – 3*1px); border-box ermöglicht box inkl. border zu definieren HTML5/CCS3 Version: Seite 8 / 68
  49. 49. HTML5/CCS3 Version: Seite / 68
  50. 50. CSS3 Grid model HTML5/CCS3 Version: Seite 50 / 68
  51. 51. CSS3 Grid multi column #page-container { columns: 3 auto;} h1 { column-span: all; } HTML5/CCS3 Version: Seite 5 / 68
  52. 52. CSS3 Animation div { animation-name: ‚diagonal-slide‘; animation-duration: 5s; animation-iteration-count: 10; } @keyframes ‚diagonal-slide‘ { from { left: 0; top: 0; } to { left: 100px; top: 100px; } } HTML5/CCS3 Version: Seite 5 / 68
  53. 53. HTML5/CCS3 Version: Seite 53 / 68
  54. 54. Browser HTML5/CCS3 Version: Seite 5 / 68
  55. 55. Browser Unterstützung • Firefox 3.5 • Safari 4 • Internet Explorer 8 • Opera 10 HTML5/CCS3 Version: Seite 55 / 68
  56. 56. Microsoft bis 04/2014 IE6 Support HTML5/CCS3 Version: Seite 56 / 68
  57. 57. HTML5 last call 10/2009 recom. 10/2010 def. 2011/2012? HTML5/CCS3 Version: Seite 5 / 68
  58. 58. Fazit HTML5/CCS3 Version: Seite 58 / 68
  59. 59. HTML5/CCS3 Version: Seite 5 / 68
  60. 60. HTML5 - negativ • Strukturierte Elemente sind zu statisch „eigene Elemente definieren können“ • Generell zu unflexibel „immer noch fixe Strukturen, zwar ist XML möglich“ • abwärtskompatibel ist ein Bremsklotz HTML5/CCS3 Version: Seite 60 / 68
  61. 61. CSS3 - negativ • keine neue Logik • Browserunterstützung • Handling von Variablen (programmierbar) • Abhängigkeit vom DOM HTML5/CCS3 Version: Seite 6 / 68
  62. 62. HTML5/CCS3 Version: Seite 6 / 68
  63. 63. HTML5 - positiv • neue Elemente / Attribute • bessere Formulare • APIs • Performance • bessere JS Einbindung HTML5/CCS3 Version: Seite 63 / 68
  64. 64. CSS3 - positiv • neue Selectoren • besseres Box Model • Berechnung möglich • Effekte (transparency, round, background) HTML5/CCS3 Version: Seite 6 / 68
  65. 65. Links HTML5 http://dev.w3.org/html5/spec/Overview.html http://www.whatwg.org/specs/web-apps/current-work/multipage/ http://www.w3.org/TR/html5-diff/ http://meiert.com/de/publications/indices/html-elements/ CSS3 http://www.w3.org/Style/CSS/current-work http://www.css3.info/ http://meiert.com/en/indices/css-properties/ Tipps Blog über HTML5 http://html5doctor.com/ IE6 Fixes http://base24.eu/ie6 JS Bibliothek um HTML5/CSS mit if-statments einzubinden http://www.modernizr.com/ HTML5/CCS3 Version: Seite 65 / 68
  66. 66. HTML5/CCS3 Version: Seite 66 / 68
  67. 67. Danke HTML5/CCS3 Version: Seite 6 / 68
  68. 68. Bildquellen http://www.flickr.com/photos/kb35/2289942750/ http://www.flickr.com/photos/theboybg/3755457966/in/photostream http://www.flickr.com/photos/ml_kap/3157139362/ http://www.flickr.com/photos/counterxattack/2827812861/ http://www.flickr.com/photos/docteurvinz/3102576692/ http://www.flickr.com/photos/ricardo_ferreira/352832519/ http://www.flickr.com/photos/jasoncross/2435136048/in/photostream http://www.flickr.com/photos/21232564@N06/2234726613/ http://www.flickr.com/photos/distantpeak/517876040/ http://www.flickr.com/photos/thetruthabout/2675881026/ http://www.flickr.com/photos/mrhappy8/389494768/ http://www.flickr.com/photos/thetruthabout/2675908946/ http://www.flickr.com/photos/manneke/1621725843/ HTML5/CCS3 Version: Seite 68 / 68

×