Your SlideShare is downloading. ×
0
HTML5, the new buzzwordNova Scotia Day of DotNetNuke - 2011-06-11              Frederic Harper
The bald guy in the frontFrederic HarperDeveloper Evangelist @ Microsoftfredh@microsoft.comhttp://blogs.msdn.com/b/cdndevs...
The rules#1 - Camp style presentation#2 - Law of Two Feet
The presentation1. What is HTML5?2. Do I have to care about it (HTML5, CSS3  and the lovely JavaScript)?
HTML5 and youQuizzA.   You use itB.   You will use itC.   You won’t use itD.   You don’t know what I am talking about
HTML5• Web Standard• Next version of HTML4 (I know, I’m so brilliant)• Draft• 9 new structure tags• 16 new HTML elements• ...
Demo
header, footer, nav,   aside, figure,  section, article
Traditionnal Website     <div id=“header”>  <div id=“nav”><div id=“section”> <div id=“article”>         <div              ...
HTML5 Website (semantic++)          <header>       <nav>     <section>      <article>                         <aside>     ...
svg
Demo
Code<svg width="400" height="200">   <rect fill="red" x="20" y="20" width="100"height="75" />   <rect fill="blue" x="50" y...
canvas
Demo
Code<canvas id=“myCanvas" width="200" height="200">   Sorry, your browser doesn’t support HTML5</canvas><script type="text...
video, audio
Demo
Code<video src="video.mp4" id="videoTag">   <source src="video.webm" />   <a href="http://videolink.com/">      Sorry, you...
Code<audio src="audio.mp3" id="audioTag"autoplay controls>  <!– Flash/Silverlight audio here --></audio>
Geolocalisation
Demo
Codefunction getLocation() {  if (navigator.geolocation != undefined) {   navigator.geolocation.getCurrentPosition(callBac...
Web Open FontFormat aka WOFF
Demo
Code<style type="text/css">   @font-face {     font-family: MyFont;     src: url(Font.woff);   }</style><div style="font: ...
CSS3 Media  Queries
Demo
Code<link href="mobile.css" rel="stylesheet"media="screen and (max-width:480px)“type="text/css" /><link href="netbook.css"...
Unleash the realpower of the Web
I am a .NET developersYou already use HTMLYou already (almost) have the tools  Visual Studio 2010 SP1  Visual studio 200...
So Is HTML5 ready yet?  YES and NO
Next steps     Try it   Read on itDo a cool project   Have fun!
Ressourceshttp://www.w3.org/TR/html5/http://caniuse.comhttp://makeawesomeweb.comhttp://html5gallery.comhttp://html5labs.in...
Questions? Comments?Frederic HarperDeveloper Evangelist @ Microsoftfredh@microsoft.comhttp://blogs.msdn.com/b/cdndevs/http...
Upcoming SlideShare
Loading in...5
×

HTML5, the new buzzword

647

Published on

Une présentation sur HTML5 que j'ai présenté au Day of DotNetNuke au NovaScotia

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
647
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5, the new buzzword"

  1. 1. HTML5, the new buzzwordNova Scotia Day of DotNetNuke - 2011-06-11 Frederic Harper
  2. 2. The bald guy in the frontFrederic HarperDeveloper Evangelist @ Microsoftfredh@microsoft.comhttp://blogs.msdn.com/b/cdndevs/http://alabase2.com (in french)http://linkedin.com/in/fredericharperhttp://twitter.com/fharperhttp://facebook.com/fharper
  3. 3. The rules#1 - Camp style presentation#2 - Law of Two Feet
  4. 4. The presentation1. What is HTML5?2. Do I have to care about it (HTML5, CSS3 and the lovely JavaScript)?
  5. 5. HTML5 and youQuizzA. You use itB. You will use itC. You won’t use itD. You don’t know what I am talking about
  6. 6. HTML5• Web Standard• Next version of HTML4 (I know, I’m so brilliant)• Draft• 9 new structure tags• 16 new HTML elements• 13 new input types
  7. 7. Demo
  8. 8. header, footer, nav, aside, figure, section, article
  9. 9. Traditionnal Website <div id=“header”> <div id=“nav”><div id=“section”> <div id=“article”> <div id=“sid <div id=“article”> ebar”> <div id=“media”> <div id=“footer”>
  10. 10. HTML5 Website (semantic++) <header> <nav> <section> <article> <aside> <article> <figure> <footer>
  11. 11. svg
  12. 12. Demo
  13. 13. Code<svg width="400" height="200"> <rect fill="red" x="20" y="20" width="100"height="75" /> <rect fill="blue" x="50" y="50" width="100"height="75" /></svg>
  14. 14. canvas
  15. 15. Demo
  16. 16. Code<canvas id=“myCanvas" width="200" height="200"> Sorry, your browser doesn’t support HTML5</canvas><script type="text/javascript"> var example = document.getElementById(“myCanvas"); var context = example.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50);</script>
  17. 17. video, audio
  18. 18. Demo
  19. 19. Code<video src="video.mp4" id="videoTag"> <source src="video.webm" /> <a href="http://videolink.com/"> Sorry, your browser doesn’t support HTML5 </a> <!– Flash/Silverlight video here --></video>
  20. 20. Code<audio src="audio.mp3" id="audioTag"autoplay controls> <!– Flash/Silverlight audio here --></audio>
  21. 21. Geolocalisation
  22. 22. Demo
  23. 23. Codefunction getLocation() { if (navigator.geolocation != undefined) { navigator.geolocation.getCurrentPosition(callBack); }}function callBack(position) { var accuracy = position.coords.accuracy; var latitude = position.coords.latitude; var longitude = position.coords.longitude;}
  24. 24. Web Open FontFormat aka WOFF
  25. 25. Demo
  26. 26. Code<style type="text/css"> @font-face { font-family: MyFont; src: url(Font.woff); }</style><div style="font: 24pt MyFont, sans-serif;"> I put my text here as usual.</div>
  27. 27. CSS3 Media Queries
  28. 28. Demo
  29. 29. Code<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" />
  30. 30. Unleash the realpower of the Web
  31. 31. I am a .NET developersYou already use HTMLYou already (almost) have the tools Visual Studio 2010 SP1 Visual studio 2008 + plugin http://j.mp/mDXyps You can have help from HTML developers
  32. 32. So Is HTML5 ready yet? YES and NO
  33. 33. Next steps Try it Read on itDo a cool project Have fun!
  34. 34. Ressourceshttp://www.w3.org/TR/html5/http://caniuse.comhttp://makeawesomeweb.comhttp://html5gallery.comhttp://html5labs.interoperabilitybridges.com/http://www.beautyoftheweb.com
  35. 35. Questions? Comments?Frederic HarperDeveloper Evangelist @ Microsoftfredh@microsoft.comhttp://blogs.msdn.com/b/cdndevs/http://alabase2.com (in french)http://linkedin.com/in/fredericharperhttp://twitter.com/fharperhttp://facebook.com/fharper
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×