More Related Content Similar to WHAT IS HTML5? (at CSS Nite Osaka) (20) More from 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)
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
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"
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>
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
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>
75. canvas IE
XDM
Video/Audio IE
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;
