WHAT IS HTML5?(20100510)

  • 3,641 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • if ii is in english..it may be usefull
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
3,641
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
142
Comments
1
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide



































  • こういう方向性により、既存ベンダの実装努力を無為にせず、それらのAPIに依存したプログラムに「標準」のお墨付きを与えられる


  • Backward Compatibilityについては、非推奨の要素もブラウザがサポートすべきだし、
  • progress要素はtextContentもパースする。
    HTML4ブラウザで見ると、要素の内側のみが表示される。





















Transcript

  • 1. WHAT IS HTML5? SHUMPEI SHIRAISHI HTML5-DEVELOPERS-JP/GOOGLE API EXPERT(HTML5)
  • 2. WELCOME!
  • 3. WHO IS THIS?
  • 4. SHUMPEI SHIRAISHI
  • 5. OPEN WEB TECHNOLOGY HTML5
  • 6. MY ACTIVITY FOR HTML5
  • 7. GOOGLE API EXPERT(HTML5) HTML5-DEVELOPERS-JP SOME ARTICLES @ @ 11 HTML5 @ HP ...
  • 8. HTML5&API 2940 BP
  • 9. HTML5 HTML
  • 10. HTML5 HTML
  • 11. HTML5 API ( )
  • 12. HTML5 IS API
  • 13. HTML5 IS API DOM “DOM5 HTML” HTML/XHTML JavaScript API
  • 14. HTML5 IS API HTML/XHTML
  • 15. “HTML5” IS AMBIGUOUS WORD “HTML5” API API API Web Workers/Web SQL Database/Web Storage/etc/etc/etc....
  • 16. “HTML5” IS AMBIGUOUS WORD “Open Web Platform” HTML+CSS+JavaScript (+SVG) “ HTML5”
  • 17. HTML5 IS VERY, VERY, VERY BIG
  • 18. HTML5 ( HTML5 )
  • 19. HTML5 IS VERY, VERY, VERY BIG
  • 20. HTML5 IS VERY, VERY, VERY BIG
  • 21. HTML5
  • 22. SEMANTICS, ACCESSIBILITY PAVE THE COWPATHS HTML5 RICH INTERNET APPLICATIONS
  • 23. ARE YOU READY?
  • 24. HTML5 & ” PAVE THE COWPATHS”
  • 25. ,
  • 26. SEMANTICS, ACCESSIBILITY More Readable for Everyone
  • 27. SEMANTICS, ACCESSIBILITY More Readable for Everyone
  • 28. SEMANTICS, ACCESSIBILITY (section/article/nav/aside/...) (header/footer/time/command...) hidden (strong/small/b/i/address/menu...)
  • 29. SEMANTICS, ACCESSIBILITY <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”>2009/11/23 </div> <div class=”address”> <a href=”mailto:a@a.jp”> </a></div> </div> </div> <div class=”footer”> <div class=”copyright”>Copyright ...</div> </div>
  • 30. SEMANTICS, ACCESSIBILITY <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=”2009-11-23”>2009/11/23 </time> <div> <address><a href=”mailto:a@a.jp”> </a></address></div> </article> </div> <footer> <small class=”copyright”>Copyright ...</small> </div>
  • 31. “PAVE THE COWPATH”
  • 32. Image by Noel Sarah Dietrich via Flickr
  • 33. EXAMPLES OF “PAVE THE COWPATH” HTML contentEditable/designMode/document.execCommand() innerHTML Drag & Drop API ...
  • 34. EXAMPLES OF “PAVE THE COWPATH” API IE6 Safari Firefox - Ian Hickson(HTML5 hito
  • 35. HTML5 HTML5 HTML4 HTML5 HTML5
  • 36. EXAMPLE OF COMPATIBILITY <progress> <progress value=75 max=100> ...[75 / 100]</progress> ...[75 / 100]
  • 37. “This specification evolves HTML and its related APIs to ease the authoring of Web-based applications.” HTML5 Draft Standard - 13 Nov 2009 (Ian Hickson)
  • 38. “ ” -Shumpei Shiraishi
  • 39. HTML5 & API 2D & 3D Web ....
  • 40. HTML5 & API 2D & 3D Graphics - HTML5 <canvas> element and API Video & Audio - HTML5 <video>/<audio> element and API Offline Web Applications - HTML5 <html manifest=attribute> and ApplicationCache Cross Domain Communication - HTML5 Cross Document Messaging, XHR Level2 Client Side Storage - Web Storage, Web SQL Database, Indexed Database API Background Processing - Web Workers Server Push / Bidirectional Communication - Server-Sent Events, Web Sockets ....
  • 41. 100%
  • 42. HTML5
  • 43. canvas IE XDM Video/Audio IE,Opera Web Storage Opera Web SQL Database Safari, Chrome Web Workers IE, Opera ...
  • 44. HTTP://A.DEVERIA.COM/CANIUSE/
  • 45. HTML5
  • 46. Blowing apart fragments of Video • HTML5 o Video o Canvas 1.video canvas 2 2. video canvas 3. canvas
  • 47. Movement Tracker • HTML5 o Video o Canvas o Web Workers 1. video canvas 2. 3.
  • 48. QuakeⅡ GWT Port • HTML5 o WebGL o Video/Audio o WebSockets o LocalStorage
  • 49. JAPANESE RESOURCES HTML5.jp HTML5 html5 Google API Expert ! HTML 5 API html5 API HTML5 html5
  • 50. JAPANESE COMMUNITY HTML5-developers-jp HTML5 html5 developers HTML5 Japanese Interest Group HTML5 W3C html5 japanese
  • 51. CONTACT mailto: shumpei.shiraishi at gmail.com twitter: @shumpei blog: http://d.hatena.ne.jp/Syunpei/ mixi: id=3989166