Your SlideShare is downloading. ×
WHAT IS HTML5? (at CSS Nite Osaka)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

WHAT IS HTML5? (at CSS Nite Osaka)

3,132
views

Published on

Published in: Technology

1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,132
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
124
Comments
1
Likes
3
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. HTML5 & API • 2D & 3D • • Web • • • • • OS
    • 39. HTML5 & API • 2D & 3D o HTML5 <canvas> element and API, SVG • o HTML5 <video>/<audio> element and API • Web o HTML5 <html manifest=attribute> and ApplicationCache • o HTML5 Cross Document Messaging, XHR Level2 • o Web Storage, Web SQL Database, Indexed Database API • o Web Workers • Server-Sent Events, Web Sockets o • OS o File API, Drag & Drop API
    • 40. 2D & 3D HTML5 <canvas> element and API,SVG
    • 41. HTML5 <canvas> element and API • <canvas> var canvas = document.getElementsById("c1"); var context = canvas.getContext("2d"); context.drawImage(...) • 2 o Canvas 2D Context 2 W3C ( ID "2d" o WebGL 3 Khronos ID "webgl"
    • 42. SVG SVG Scalable Vector Graphics XML SVG W3C Wikipedia • IE9 SVG HTML SVG
    • 43. SVG • IE9 SVG HTML SVG <!DOCTYPE html> <html> <svg> <path d="M 20 20 L 60 20 L 40 60 z" fill="green" stroke="red" stroke-width="3" /> </svg> </html>
    • 44. HTML5 <video>/<audio> element and API
    • 45. HTML5 <video>/<audio> element and API • <video> <audio> • src <source> URL <video src="sample.ogv"></video> <video>   <source src="sample.ogv"> </video> • JavaScript API DOM CSS OK
    • 46. Web HTML5 <html manifest=attribute> and ApplicationCache
    • 47. Web • Web • HTML/CSS/JavaScript/ Web
    • 48. Web • html manifest hello.manifest CACHE MANIFEST hello.html hello.js hello.html <!DOCTYPE html> <html manifest="hello.manifest"> ... </html>
    • 49. HTML5 Cross Document Messaging, XHR Level2
    • 50. IE9 Ready! • iframe • onmessage postMessage()
    • 51. XMLHttpRequest Level2 IE9 Ready! • IE8 o • form
    • 52. Web Storage, Web SQL Database, Indexed Database API
    • 53. Web Storage IE9 Ready! • o o • JavaScript •
    • 54. Web SQL Database • • • Safari Chrome
    • 55. Indexed Database API • • Web Storage o •
    • 56. Web Workers
    • 57. Web Workers • JavaScript API • JavaScript
    • 58. Server-Sent Events, Web Sockets
    • 59. Server-Sent Events • Comet o API o • DOM •
    • 60. Web Sockets • o API W3C o IETF • • (^^;
    • 61. OS File API, Drag & Drop API
    • 62. File API • JavaScript API • •
    • 63. 100%
    • 64. HTML5
    • 65. canvas IE XDM Video/Audio IE Web SQL Database Safari, Chrome Web Workers IE, Opera ...
    • 66. HTTP://A.DEVERIA.COM/CANIUSE/
    • 67. HTML5
    • 68. Blowing apart fragments of Video • HTML5 o Video o Canvas 1.video canvas 2 2. video canvas 3. canvas
    • 69. Movement Tracker • HTML5 o Video o Canvas o Web Workers 1. video canvas 2. 3.
    • 70. QuakeⅡ GWT Port • HTML5 o WebGL o Video/Audio o WebSockets o LocalStorage
    • 71. JAPANESE RESOURCES HTML5.jp HTML5 html5 Google API Expert ! HTML 5 API html5 API HTML5 html5
    • 72. JAPANESE COMMUNITY HTML5-developers-jp HTML5 html5 developers HTML5 Japanese Interest Group HTML5 W3C html5 japanese
    • 73. CONTACT mailto: shumpei.shiraishi at gmail.com twitter: @shumpei blog: http://d.hatena.ne.jp/Syunpei/ mixi: id=3989166