WHAT IS HTML5? (at CSS Nite Osaka)

WHAT IS HTML5?
SHUMPEI SHIRAISHI
HTML5-DEVELOPERS-JP/GOOGLE API EXPERT(HTML5)

GOOGLE API EXPERT(HTML5)
HTML5-DEVELOPERS-JP
SOME ARTICLES

@

@ 11

HTML5 @ HP

...

HTML5 IS API
DOM “DOM5 HTML”
HTML/XHTML
JavaScript API

“HTML5” IS AMBIGUOUS WORD

“HTML5”
API

API

API Web Workers/Web SQL Database/Web Storage/etc/etc/etc....

“HTML5” IS AMBIGUOUS WORD

“Open Web Platform”
HTML+CSS+JavaScript (+SVG)
“ HTML5”

HTML5 IS VERY, VERY, VERY BIG

SEMANTICS,
ACCESSIBILITY
PAVE THE
COWPATHS

HTML5
RICH INTERNET APPLICATIONS

HTML5

&

” PAVE THE COWPATHS”

SEMANTICS, ACCESSIBILITY

More Readable for

Everyone

(section/article/nav/aside/...)

(header/footer/time/command...)

hidden

(strong/small/b/i/address/menu...)

<div class=”header”>
<h1>Site Title</h1>
<div class=”site-nav”>
<ul><li>Home</li><li>Proﬁle</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>

<header>
<h1>Site Title</h1>
<nav>
<ul><li>Home</li><li>Proﬁle</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>

Image by Noel Sarah Dietrich via Flickr

EXAMPLES OF
“PAVE THE COWPATH”
HTML

contentEditable/designMode/document.execCommand()

innerHTML

Drag & Drop API

...

EXAMPLES OF
“PAVE THE COWPATH”

API IE6
Safari Firefox
- Ian Hickson(HTML5
hito

HTML5
HTML5 HTML4

HTML5
HTML5

EXAMPLE OF
COMPATIBILITY
<progress>

<progress value=75 max=100>
...[75 / 100]</progress>

...[75 / 100]

“This speciﬁcation evolves HTML and
its related APIs to ease the authoring of
Web-based applications.”

HTML5 Draft Standard - 13 Nov 2009 (Ian Hickson)

HTML5 & API
• 2D & 3D

•

• Web

•

•

•

•

• OS

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

2D & 3D

HTML5 <canvas> element and API,SVG

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"

SVG

SVG Scalable Vector Graphics XML
SVG
W3C
Wikipedia

• IE9 SVG HTML SVG

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>

HTML5 <video>/<audio> element and API

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

Web

HTML5 <html manifest=attribute> and ApplicationCache

Web

• Web
• HTML/CSS/JavaScript/ Web

Web

•
html manifest

hello.manifest
CACHE MANIFEST

hello.html
hello.js

hello.html
<!DOCTYPE html>
<html manifest="hello.manifest">
...
</html>

HTML5 Cross Document Messaging, XHR Level2

IE9 Ready!

• iframe

•

onmessage
postMessage()

XMLHttpRequest Level2
IE9 Ready!

• IE8
o

• form

Web Storage, Web SQL Database, Indexed Database API

Web Storage
IE9 Ready!

•
o
o

• JavaScript

•

Web SQL Database

•
•
• Safari Chrome

Indexed Database API

•
• Web Storage
o

•

Web Workers

• JavaScript
API
• JavaScript

Server-Sent Events, Web Sockets

Server-Sent Events

• Comet
o API
o

• DOM
•

Web Sockets

•

o API W3C
o IETF
•
• (^^;

OS

File API, Drag & Drop API

File API

• JavaScript API
•

•

canvas IE

XDM

Video/Audio IE

Web SQL Database Safari, Chrome

Web Workers IE, Opera

...

Blowing apart fragments of Video

• HTML5
o Video
o Canvas
1.video canvas 2

2. video
canvas
3.
canvas

Movement Tracker

• HTML5
o Video
o Canvas
o Web Workers
1. video
canvas
2.

3.

QuakeⅡ GWT Port

• HTML5
o WebGL
o Video/Audio
o WebSockets
o LocalStorage

JAPANESE RESOURCES

HTML5.jp
HTML5 html5

Google API Expert

! HTML 5 API
html5
API

HTML5

html5

JAPANESE COMMUNITY

HTML5-developers-jp
HTML5
html5 developers

HTML5 Japanese Interest Group
HTML5
W3C html5 japanese

CONTACT

mailto: shumpei.shiraishi at gmail.com

twitter: @shumpei

blog: http://d.hatena.ne.jp/Syunpei/

mixi: id=3989166

WHAT IS HTML5? (at CSS Nite Osaka)

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a WHAT IS HTML5? (at CSS Nite Osaka)

Semelhante a WHAT IS HTML5? (at CSS Nite Osaka) (20)

Mais de Shumpei Shiraishi

Mais de Shumpei Shiraishi (20)

Último

Último (20)

WHAT IS HTML5? (at CSS Nite Osaka)

Notas do Editor