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)

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie WHAT IS HTML5? (at CSS Nite Osaka)

Ähnlich wie WHAT IS HTML5? (at CSS Nite Osaka) (20)

Mehr von Shumpei Shiraishi

Mehr von Shumpei Shiraishi (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

WHAT IS HTML5? (at CSS Nite Osaka)

Hinweis der Redaktion