More Related Content Similar to WHAT IS HTML5?(20100510) Similar to WHAT IS HTML5?(20100510) (20) More from Shumpei Shiraishi More from Shumpei Shiraishi (20) WHAT IS HTML5?(20100510)1. WHAT IS HTML5?
SHUMPEI SHIRAISHI
HTML5-DEVELOPERS-JP/GOOGLE API EXPERT(HTML5)
19. “HTML5” IS AMBIGUOUS WORD
“HTML5”
API
API
API Web Workers/Web SQL Database/Web Storage/etc/etc/etc....
28. SEMANTICS,
ACCESSIBILITY
PAVE THE
COWPATHS
HTML5
RICH INTERNET APPLICATIONS
30. HTML5
&
” PAVE THE COWPATHS”
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>
39. EXAMPLES OF
“PAVE THE COWPATH”
HTML
contentEditable/designMode/document.execCommand()
innerHTML
Drag & Drop API
...
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. “ ”
-Shumpei Shiraishi
47. 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
....
53. canvas IE
XDM
Video/Audio IE,Opera
Web Storage Opera
Web SQL Database Safari, Chrome
Web Workers IE, Opera
...
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;