What is HTML5

1,465 views

Published on

Published in: Technology, Design
  • Be the first to comment

What is HTML5

  1. 1. What is HTML5 2011/11/02 Kyohei morimoto  NTT Resonant Inc.
  2. 2. Kyohei Morimoto•• HTML,CSS,JavaScript,wp,AS,Flash,C,objective-C,php
  3. 3. Agenda• HTML5• HTML• HTML5•
  4. 4. Why HTML5
  5. 5. Web
  6. 6. Web HTML Native FLASH
  7. 7. Web Native HTML5 FLASH
  8. 8. • PC••• TV(Sony TV Opera )•
  9. 9. HTML
  10. 10. • HTML Hyper Text Markup Language• Web• HTML W3C
  11. 11. HTML5 CSS (X)html html.body{<html> padding:0; margin:0;<head> }<title> </title></head><body>Hello JavaScript</body></html> function hello(){ alert(“Hello”); }
  12. 12. HTML5 HTMLWeb Applications 1.0 WHATWG HTML5 CSS3 Form Animation Web Font Slection … Canvas D&D Offline Web Application SVG MathML Xpath … … Web Web Storage Web Workers File API Geolocation
  13. 13. HTML5 HTMLWeb Applications 1.0 WHATWG HTML5 CSS3 Form Animation Web Font Slection … Canvas D&D Offline Web Application SVG MathML Xpath … … Web Web Storage Web Workers File API Geolocation
  14. 14. HTML5 HTMLWeb Applications 1.0 WHATWG HTML5 CSS3 Form Animation Web Font Slection … Canvas D&D Offline Web Application SVG MathML Xpath … … Web Web Storage Web Workers File API Geolocation
  15. 15. HTML5 http://caniuse.com/
  16. 16. HTML5 http://gs.statcounter.com/
  17. 17. W3C• Working Draft• Last Call Working Draft• Candidate Recommendation• Proposed Recommendation• Recommendation 2014
  18. 18. What is HTML5 Web
  19. 19. ••• Web
  20. 20. Significance of HTML5• Semantics• Compatibility• Rich Internet Applications
  21. 21. Semantics
  22. 22. Semantics More Readable for EveryoneNot only Humans
  23. 23. <div class=”header”>  <h1>Site Title</h1>  <div class=”site-nav”>    <ul><li>Home</li><li>Profile</li><li>Settings</li></ul>  </div></div><div class=”content”>  <div class=”article”>Main Content    <div class=”date”>2011/11/2 </div>    <div class=”address”>       <a href=”mailto:a@a.jp”> </a></div>  </div></div><div class=”footer”>  <div class=”copyright”>Copyright ..</div></div>
  24. 24. <header>   <h1>Site Title</h1>   <nav>     <ul><li>Home</li><li>Profile</li><li>Settings</li></ ul>   </nav> </header> <div class=”content”> <article>Main Content     <time datetime=”2011-11-02”>2011/11/02 </time>     <div> <address>      <a href=” mailto:a@a.jp”> </a></address></div>  </article> </div> <footer>  <small class=”copyright”>Copyright ..</small> </footer>
  25. 25. div div div div div div div div div div div div div div divdiv div div div div div div div div div div div div div divdiv div div div div div div div div div div div div div divdiv div div div div div div div div div div div div div divdiv div div div div div div div div div div div div div divdiv div div div div div div div div div div div div div divdiv div div div div div div div div div div div div div divdiv div div div div div div div div div div div div div divdiv div div div div div div div div div div div div div divdiv div div div div div div div div div div div div div divdiv div div div div div div div div div div div div div divdiv div div div div div div div div div div div div div divdiv div div div div div div div div div div div div div divdiv div div div div div div div div div div div div div div
  26. 26. Compatibility
  27. 27. Compatibility• Web
  28. 28. Compatibility• Web•
  29. 29. “Pave the Cowpaths”
  30. 30. MS“As part of our commitment to enablingdevelopers to use the Same Markup – thesame HTML, CSS, and script – on the web” IEBlog
  31. 31. MS
  32. 32. MS
  33. 33. "Write once, run any browser"
  34. 34. Rich Internet Applications
  35. 35. • Multimedia• Graphics• Offline Web Application• web workers• Network• Device
  36. 36. MultimediaDemo:Nike Better World
  37. 37. Graphic 2D 3DDemo:http://9elements.com/io/projects/html5/canvas/
  38. 38. Offline Web Application Web
  39. 39. Web WorkersUI JavaScriptDemo:Before After
  40. 40. NetworkWebSocketXMLHttpRequest2
  41. 41. Device•Contacts API•Calendar API•Media Capture•Messaging API SMS/MMS/E-mail•Battery Status API•Network Information API •Gallery API•Geolocation API•DeviceOrientation Events
  42. 42. More Demo
  43. 43. Blowing apart fragments of Video
  44. 44. Flight of the navigator
  45. 45. QuakeⅡ GWT Port
  46. 46. Live Coding
  47. 47. HTML5 OPERA Mobile

×