WHAT IS HTML5? (at CSS Nite Osaka)
•Download as KEY, PDF•
3 likes•1,967 views
This document discusses HTML5 and provides an overview of its key features. It explains that HTML5 is not just the HTML language, but also includes related APIs that allow richer functionality. Some of the major areas covered include semantics and accessibility, rich internet applications using new APIs, and specific technologies like canvas, video/audio, web storage, and web workers. The document emphasizes that HTML5 is still evolving and aims to unify web development across browsers.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to WHAT IS HTML5? (at CSS Nite Osaka)
Similar to WHAT IS HTML5? (at CSS Nite Osaka) (20)
More from Shumpei Shiraishi
More from Shumpei Shiraishi (20)
Recently uploaded
Recently uploaded (20)
WHAT IS HTML5? (at CSS Nite Osaka)
- 1. WHAT IS HTML5? SHUMPEI SHIRAISHI HTML5-DEVELOPERS-JP/GOOGLE API EXPERT(HTML5)
- 2. WELCOME!
- 3. WHO IS THIS?
- 5. OPEN WEB TECHNOLOGY HTML5
- 6. MY ACTIVITY FOR HTML5
- 7. GOOGLE API EXPERT(HTML5) HTML5-DEVELOPERS-JP SOME ARTICLES @ @ 11 HTML5 @ HP ...
- 9. HTML5&API 2940 BP
- 11. HTML5 HTML
- 12. HTML5 HTML
- 14. HTML5 API ( )
- 15. HTML5 IS API
- 16. HTML5 IS API DOM “DOM5 HTML” HTML/XHTML JavaScript API
- 19. “HTML5” IS AMBIGUOUS WORD “HTML5” API API API Web Workers/Web SQL Database/Web Storage/etc/etc/etc....
- 20. “HTML5” IS AMBIGUOUS WORD “Open Web Platform” HTML+CSS+JavaScript (+SVG) “ HTML5”
- 21. HTML5 IS VERY, VERY, VERY BIG
- 22. HTML5 ( HTML5 )
- 23. HTML5 IS VERY, VERY, VERY BIG
- 24. HTML5 IS VERY, VERY, VERY BIG
- 27. HTML5
- 28. SEMANTICS, ACCESSIBILITY PAVE THE COWPATHS HTML5 RICH INTERNET APPLICATIONS
- 29. ARE YOU READY?
- 30. HTML5 & ” PAVE THE COWPATHS”
- 31. ,
- 32. SEMANTICS, ACCESSIBILITY More Readable for Everyone
- 33. SEMANTICS, ACCESSIBILITY More Readable for Everyone
- 34. SEMANTICS, ACCESSIBILITY (section/article/nav/aside/...) (header/footer/time/command...) hidden (strong/small/b/i/address/menu...)
- 35. 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>
- 36. 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>
- 38. Image by Noel Sarah Dietrich via Flickr
- 39. EXAMPLES OF “PAVE THE COWPATH” HTML contentEditable/designMode/document.execCommand() innerHTML Drag & Drop API ...
- 40. EXAMPLES OF “PAVE THE COWPATH” API IE6 Safari Firefox - Ian Hickson(HTML5 hito
- 41. HTML5 HTML5 HTML4 HTML5 HTML5
- 42. EXAMPLE OF COMPATIBILITY <progress> <progress value=75 max=100> ...[75 / 100]</progress> ...[75 / 100]
- 44. “This specification evolves HTML and its related APIs to ease the authoring of Web-based applications.” HTML5 Draft Standard - 13 Nov 2009 (Ian Hickson)
- 45. HTML5 & API • 2D & 3D • • Web • • • • • OS
- 46. 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
- 47. 2D & 3D HTML5 <canvas> element and API,SVG
- 48. 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"
- 49. SVG SVG Scalable Vector Graphics XML SVG W3C Wikipedia • IE9 SVG HTML SVG
- 50. 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>
- 51. HTML5 <video>/<audio> element and API
- 52. 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
- 53. Web HTML5 <html manifest=attribute> and ApplicationCache
- 54. Web • Web • HTML/CSS/JavaScript/ Web
- 55. Web • html manifest hello.manifest CACHE MANIFEST hello.html hello.js hello.html <!DOCTYPE html> <html manifest="hello.manifest"> ... </html>
- 56. HTML5 Cross Document Messaging, XHR Level2
- 57. IE9 Ready! • iframe • onmessage postMessage()
- 58. XMLHttpRequest Level2 IE9 Ready! • IE8 o • form
- 59. Web Storage, Web SQL Database, Indexed Database API
- 60. Web Storage IE9 Ready! • o o • JavaScript •
- 61. Web SQL Database • • • Safari Chrome
- 62. Indexed Database API • • Web Storage o •
- 63. Web Workers
- 64. Web Workers • JavaScript API • JavaScript
- 65. Server-Sent Events, Web Sockets
- 66. Server-Sent Events • Comet o API o • DOM •
- 67. Web Sockets • o API W3C o IETF • • (^^;
- 68. OS File API, Drag & Drop API
- 69. File API • JavaScript API • •
- 71. 100%
- 72. HTML5
- 75. canvas IE XDM Video/Audio IE Web SQL Database Safari, Chrome Web Workers IE, Opera ...
- 77. HTML5
- 78. Blowing apart fragments of Video • HTML5 o Video o Canvas 1.video canvas 2 2. video canvas 3. canvas
- 79. Movement Tracker • HTML5 o Video o Canvas o Web Workers 1. video canvas 2. 3.
- 80. QuakeⅡ GWT Port • HTML5 o WebGL o Video/Audio o WebSockets o LocalStorage
- 83. JAPANESE RESOURCES HTML5.jp HTML5 html5 Google API Expert ! HTML 5 API html5 API HTML5 html5
- 84. JAPANESE COMMUNITY HTML5-developers-jp HTML5 html5 developers HTML5 Japanese Interest Group HTML5 W3C html5 japanese
- 85. CONTACT mailto: shumpei.shiraishi at gmail.com twitter: @shumpei blog: http://d.hatena.ne.jp/Syunpei/ mixi: id=3989166
Editor's Notes
- &#x3053;&#x3046;&#x3044;&#x3046;&#x65B9;&#x5411;&#x6027;&#x306B;&#x3088;&#x308A;&#x3001;&#x65E2;&#x5B58;&#x30D9;&#x30F3;&#x30C0;&#x306E;&#x5B9F;&#x88C5;&#x52AA;&#x529B;&#x3092;&#x7121;&#x70BA;&#x306B;&#x305B;&#x305A;&#x3001;&#x305D;&#x308C;&#x3089;&#x306E;API&#x306B;&#x4F9D;&#x5B58;&#x3057;&#x305F;&#x30D7;&#x30ED;&#x30B0;&#x30E9;&#x30E0;&#x306B;&#x300C;&#x6A19;&#x6E96;&#x300D;&#x306E;&#x304A;&#x58A8;&#x4ED8;&#x304D;&#x3092;&#x4E0E;&#x3048;&#x3089;&#x308C;&#x308B;
- Backward Compatibility&#x306B;&#x3064;&#x3044;&#x3066;&#x306F;&#x3001;&#x975E;&#x63A8;&#x5968;&#x306E;&#x8981;&#x7D20;&#x3082;&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x304C;&#x30B5;&#x30DD;&#x30FC;&#x30C8;&#x3059;&#x3079;&#x304D;&#x3060;&#x3057;&#x3001;
- progress&#x8981;&#x7D20;&#x306F;textContent&#x3082;&#x30D1;&#x30FC;&#x30B9;&#x3059;&#x308B;&#x3002; HTML4&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x3067;&#x898B;&#x308B;&#x3068;&#x3001;&#x8981;&#x7D20;&#x306E;&#x5185;&#x5074;&#x306E;&#x307F;&#x304C;&#x8868;&#x793A;&#x3055;&#x308C;&#x308B;&#x3002;