Más contenido relacionado La actualidad más candente (20) Similar a WHAT IS HTML5?(20100510) (20) Más de Shumpei Shiraishi (20) 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
...
Notas del editor
&#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;
