Search

HTML5 / CSS3

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

2 comments

Comments 1 - 2 of 2 previous next Post a comment

  • + guest4cdcfc Felix Nagel 1 month ago
    Danke fürs sharen.
    Auch diese Präsi zeigt wieder eindeutig das HTML5 für den Produktiveinsatz im Prinzip uninteressant ist, dank des IE
  • + guestb03ba6 Ute Hauth 1 month ago
    Folien des Vortrags zu HTML5 und CSS3 beim #Webtreff #Konstanz von gestern abend sind online.
Post a comment
Embed Video
Edit your comment Cancel

Notes on slide 1

1 Favorite

HTML5 / CSS3 - Presentation Transcript

  1. HTML5 / CSS3 19.10.2009 - Webtreff - Konstanz Lars Messmer - COMSOLIT GmbH HTML5/CCS3 Version:  Seite  / 68
  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. HTML5/CCS3 Version:  Seite 3 / 68
  4. doctype HTML5/CCS3 Version:  Seite  / 68
  5. doctype HTML5/CCS3 Version:  Seite 5 / 68
  6. doctype HTML5/CCS3 Version:  Seite 6 / 68
  7. HTML5/CCS3 Version:  Seite  / 68
  8. Neue Anforde- rungen HTML5/CCS3 Version:  Seite 8 / 68
  9. Neue Herausforderungen • Grafik • Geschwindigkeit • Speicher / Caching • Livecontent • Applications / JS Performance • Geolocation HTML5/CCS3 Version:  Seite  / 68
  10. HTML5/CCS3 Version:  Seite 0 / 68
  11. mit HTML5 in die Zukunft HTML5/CCS3 Version:  Seite  / 68
  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, drag&drop • Offline Unterstützung HTML5/CCS3 Version:  Seite  / 68
  13. HTML5/CCS3 Version:  Seite 3 / 68
  14. the old way <html4> HTML5/CCS3 Version:  Seite  / 68
  15. HTML5 - Elemente ID / Class Webdesigner benutzen derzeit .class und #id um Styling und Logik abzubilden. HTML5/CCS3 Version:  Seite 5 / 68
  16. HTML5/CCS3 Version:  Seite 6 / 68
  17. HTML5/CCS3 Version:  Seite  / 68
  18. the new way <html5> HTML5/CCS3 Version:  Seite 8 / 68
  19. HTML5/CCS3 Version:  Seite  / 68
  20. HTML5/CCS3 Version:  Seite 0 / 68
  21. DOM <html5> HTML5/CCS3 Version:  Seite  / 68
  22. HTML5 - DOM 5 getElementsByClassName var mydoc = document.getElementsByClassName (‚item child‘); HTML5/CCS3 Version:  Seite  / 68
  23. HTML5 - Elemente em = verschachtelbar b = hervorheben i = markieren noscript acronym = abbr HTML5/CCS3 Version:  Seite 3 / 68
  24. HTML5/CCS3 Version:  Seite  / 68
  25. API HTML5/CCS3 Version:  Seite 5 / 68
  26. HTML5 - APIs • Geolocation • Application Cache • drag & drop • Canvas • Editing • Database Storage • Video & Audio HTML5/CCS3 Version:  Seite 6 / 68
  27. HTML5 APIs - Video - the old way <OBJECT WIDTH=“425“ HEIGHT=“344“><PARAM NAME=“MOVIE“ VALUE=“HTTP://WWW.YOUTUBE.COM/V/ 4GUKSQAG5XI&HL=EN&FS=1“></PARAM><PARAM NAME=“ALLOWFULLSCREEN“ VALUE=“TRUE“></ PARAM><PARAM NAME=“ALLOWSCRIPTACCESS“ VALUE=“ALWAYS“></ PARAM><EMBED SRC=“HTTP://WWW.YOUTUBE.COM/V/4GUKSQAG5XI&HL=E N&FS=1“ TYPE=“APPLICATION/X-SHOCKWAVE-FLASH“ ALLOWSCRIPTACCESS=“ALWAYS“ ALLOWFULLSCREEN=“TRUE“ WIDTH=“425“ HEIGHT=“344“></EMBED></OBJECT> HTML5/CCS3 Version:  Seite  / 68
  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. 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. 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. 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. HTML5/CCS3 Version:  Seite 3 / 68
  33. ? XHML2 ? HTML5/CCS3 Version:  Seite 33 / 68
  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. HTML5/CCS3 Version:  Seite 35 / 68
  36. mit CSS3 alles schöner HTML5/CCS3 Version:  Seite 36 / 68
  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. 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. 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. CSS3 Attribute Selector p[item^=“act“] {background: #f00;} item muss mit „act“ anfangen HTML5/CCS3 Version:  Seite 0 / 68
  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. CSS3 Pseudo Klassen :checked, :empty, :only-child :nth-of-type(odd), :nth-of-type(even) ... #list>li:nth-of-type(odd) { background: #ddd; } HTML5/CCS3 Version:  Seite  / 68
  43. CSS3 HTML5/CCS3 Version:  Seite 3 / 68
  44. CSS3 CSS3 styling HTML5/CCS3 Version:  Seite  / 68
  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. HTML5/CCS3 Version:  Seite 6 / 68
  47. CSS3 intelligentes BOX model HTML5/CCS3 Version:  Seite  / 68
  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. HTML5/CCS3 Version:  Seite  / 68
  50. CSS3 Grid model HTML5/CCS3 Version:  Seite 50 / 68
  51. CSS3 Grid multi column #page-container { columns: 3 auto;} h1 { column-span: all; } HTML5/CCS3 Version:  Seite 5 / 68
  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. HTML5/CCS3 Version:  Seite 53 / 68
  54. Browser HTML5/CCS3 Version:  Seite 5 / 68
  55. Browser Unterstützung • Firefox 3.5 • Safari 4 • Internet Explorer 8 • Opera 10 HTML5/CCS3 Version:  Seite 55 / 68
  56. Microsoft bis 04/2014 IE6 Support HTML5/CCS3 Version:  Seite 56 / 68
  57. HTML5 last call 10/2009 recom. 10/2010 def. 2011/2012? HTML5/CCS3 Version:  Seite 5 / 68
  58. Fazit HTML5/CCS3 Version:  Seite 58 / 68
  59. HTML5/CCS3 Version:  Seite 5 / 68
  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. CSS3 - negativ • keine neue Logik • Browserunterstützung • Handling von Variablen (programmierbar) • Abhängigkeit vom DOM HTML5/CCS3 Version:  Seite 6 / 68
  62. HTML5/CCS3 Version:  Seite 6 / 68
  63. HTML5 - positiv • neue Elemente / Attribute • bessere Formulare • APIs • Performance • bessere JS Einbindung HTML5/CCS3 Version:  Seite 63 / 68
  64. CSS3 - positiv • neue Selectoren • besseres Box Model • Berechnung möglich • Effekte (transparency, round, background) HTML5/CCS3 Version:  Seite 6 / 68
  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. HTML5/CCS3 Version:  Seite 66 / 68
  67. Danke HTML5/CCS3 Version:  Seite 6 / 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

+ Lars MessmerLars Messmer, 1 month ago

custom

949 views, 1 favs, 0 embeds more stats

Mit HTML5 in die Zukunft
Mit CSS3 alles schöner

More info about this document

© All Rights Reserved

Go to text version

  • Total Views 949
    • 949 on SlideShare
    • 0 from embeds
  • Comments 2
  • Favorites 1
  • Downloads 10
Most viewed embeds

more

All embeds

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories

Tags

-->
Search
RSS Feed
What's new?

© 2009 SlideShare Inc. All Rights Reserved