O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

East of Toronto .NET Usergroup - Put the 5 in HTML

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
Mobile app with sencha touch
Mobile app with sencha touch
Carregando em…3
×

Confira estes a seguir

1 de 45 Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (17)

Anúncio

Semelhante a East of Toronto .NET Usergroup - Put the 5 in HTML (20)

Mais de Frédéric Harper (20)

Anúncio

Mais recentes (20)

East of Toronto .NET Usergroup - Put the 5 in HTML

  1. 1. East of Toronto .NET User Group 2011-10-27 Frédéric Harper – Microsoft Canada
  2. 2. • It will be all about HTML5!
  3. 3. A. You know HTML5 and use it now B. You know what is HTML5 and don’t use it C. You don’t know what I am talking about
  4. 4. + + HTML5 HTML5 CSS3 JavaScript
  5. 5. Performance Semantics Styling Multimedia 3D Effects Offline& Storage Connectivity Device Access
  6. 6. First draft Working draft Last call Recommendation candidate Recommendation
  7. 7.  Video  Drag-and-drop  Document editing  Canvas  Offline storage  Cross-document  CSS3 Media messaging Queries  Audio  Microdata  Browser history  WOFF management  Web Sockets  Semantics elements  Web Workers  AND MUCH MORE!
  8. 8.  Video  Drag-and-drop  Document editing  Canvas  Offline storage  Cross-document  CSS3 Media messaging Queries  Audio  Microdata  Browser history  WOFF management  Web Sockets  Semantics elements  Web Workers  AND MUCH MORE!
  9. 9. <div id=“header”> <div id=“nav”> “sidebar”> <div id=“section”> <div id= <div id=“article”> <div id=“article”> <div id=“media”> <div id=“footer”>
  10. 10. <header> <nav> <section> <aside> <article> <article> <figure> <footer>
  11. 11. <video src="video.mp4" id="videoTag"> <source src="video.webm" /> <a href="http://videolink.com/"> Sorry, your browser doesn’t support HTML5 video tag </a> <!– Flash/Silverlight video here --> </video>
  12. 12. Web Open Font Format
  13. 13. <link href="mobile.css" rel="stylesheet" media="screen and (max-width:480px)“ type="text/css" /> <link href="netbook.css" rel="stylesheet“ media="screen and (min-width:481px) and (max-width: 1024px)“ type="text/css" /> <link href="laptop.css" rel="stylesheet" media="screen and (min-width:1025px)“ type="text/css" />
  14. 14. X X X X X Lowest Common X X X Dominator X X Only use features natively X X X available in all target X X browsers
  15. 15. X X X X X Polyfill Enriched X X X X X X X Only use features either natively available OR X X X available via JavaScript polyfill X X
  16. 16. polyfill (n) poly • fill: JavaScript that implants HTML5 functionality in a browser that does not offer native support
  17. 17. X X X X X Alternate X X X X X Experiences X X X X X X X X X X Only use features available in target X X browsers AND design alternate experience for other browsers
  18. 18.  http://caniuse.com/  http://www.modernizr.com/
  19. 19. iOS Android Windows Phone Geolocation      Offline    Local Storage    Video/Audio    Canvas   SVG    WebSQL   Gradients*    CSS3 Animations*    Text Shadows   CSS3 Transforms 
  20. 20. And more…
  21. 21. 1. You already know HTML
  22. 22. 1. You already know HTML 2. You already know the tools
  23. 23. 1. You already know HTML 2. You already know the tools 3. Cross browsers / platforms / devices
  24. 24. 1. You already know HTML 2. You already know the tools 3. Cross browsers / platforms / devices 4. One of the future technology
  25. 25. Try it
  26. 26. Read on it
  27. 27. Do cool project
  28. 28. Have fun!
  29. 29. http://www.w3.org/TR/html5/ http://caniuse.com http://www.modernizr.com/ http://makeawesomeweb.com http://html5gallery.com http://diveintohtml5.org/ http://www.html5tutorial.info/ http://www.beautyoftheweb.com http://html5labs.interoperabilitybridges.com/
  30. 30. Frederic Harper Developer Evangelist @ Microsoft fredh@microsoft.com http://webnotwar.ca http://outofcomfortzone.net

×