Html5 For Jjugccc2009fall

html5-developers-jp Google

Web

Google API Expert HTML5

2007 Gears

Gears

HTML5

HTML5 - HTML XHTML API

Open Web Platform API

Open Web Web

×4 and,

HTML5 (1)

HTML

API

8/25

10

2022 w

HTML5 (2)

Web
API

HTML5 - A vocabulary and associated APIs for
HTML and XHTML
Web Storage, Web Database, Web Workers...
Gears API

HTML5 - A vocabulary and associated APIs for HTML and
XHTML

HTML5

HTML5

Canvas

API

HTML5 - HTML5

.html .htm

Content-Type text/html

DOCTYPE
<!DOCTYPE html>
<html>
<body>
...
</body>
</html>

HTML5 - HTML5

article, aside, footer, header, hgroup, nav, section

ﬁgure, source, video, audio, canvas, embed
Web

keygen, output, input type

progress, meter, command, details

mark, ruby, rt, rp, time

HTML5

section HTML
CSS section div

article
<atom:entry> aside

aside

nav

body, td HTML5

h1-h6

hgroup

header,footer

<!DOCTYPE html>
<html>
<head><meta charset=”UTF-8”></head>
<body>
<header>
<nav><li>a</li><li>b</li></nav>
</header>
<section id=”main”>
<h1> </h1>
<article>
<h1> </h1>
</article>
</section>
<footer>Copyright(c)...</footer>
</body>
</html>

-

h1-h6

h1-h6

section/article/nav/aside

-

<body>
<h1>body </h1>
<p> 1 </p>
<h2>h2 </h2>
<p> 2 </p>
</body>

<body>
<h1>body </h1>
<p> 1 </p>
<section>
<h2>section </h2>
<p> 2 </p>
</section>
</body>

Canvas

Canvas <canvas>

Canvas canvas
(canvas.getContext(“2d”))

<canvas id=”canvas1” width=”200” height=”100”>

var canvas1 = document.getElementById(“canvas1”);
var ctx = canvas1.getContext(“2d”);

ctx.drawImage(image, 0, 0);
...
3d

O3D (Google), Canvas3D (Mozilla), Opera 3D

Web GL OpenGL ES2.0 JavaScript

<video>

<audio>

<source>

<video><audio>

JavaScript

Google On2 Technology

<video id=”video1” width=”300” src=”video.ogv”>

</video>

// JavaScript
var video1 = document.getElementById(“video1”);
video1.play();
video1.stop();
video1.addEventListener(
“onloadstart”, function(){}, false);

WebForms2.0

input type

tel

search

url URL

email

datetime, datetime-local

date

( )

input type

month

week

time

number

range

color

Opera

required

pattern

type email, url

form submit

form.checkValidity()

placeholder

API

& API

draggable

dragstart DataTransfer

dropover event.preventDefault()

drop DataTransfer
event.stopPropagation()

API

<div id=”dragSrc” draggable> </div>
<div id=”dragDest”> </div>

dragSrc.addEventListener(“dragStart”, function(e) {
var dt = e.dataTransfer;
dt.setData(“text/plain”, “Hello”);
return true;
});

dragDest.addEventListener(“dragOver”, function(e) {
e.preventDefault();
return false;
});

dragDest.addEventListener(“drop”, function(e) {
var text = e.dataTransfer.getData(“text/plain”);
e.stopPropagation();
...
return false;
});

DOM API

Element.classList className

Document.getElementByClassName()

designMode execCommand() WYSIWYG

Microdata

role, aria-, contextmenu, hidden, data-*, contentEditable.....

... more and more

Open Web Platform API

Web Workers

Web Storage

Web Database

Web Sockets

Web

Content-Type: text/
cache-manifest

Web html manifest
URL : <html manifest=”hello.manifest”>

JavaScript

-

UTF-8

1

CACHE MANIFEST

# version: 200909241054

hello.html
hello.js

document

window.postMessage(message, targetOrigin)

onmessage

:
var iframe = ...
iframe.contentWindow.postMessage(“Hello”, “http://destdomain.com”);

:
onmessage = function(event) {
if (event.origin == “http://srcdomain.com”) {
var message = event.data;
...
}
}

Web Workers

UI

: new Worker(scriptUrl)

: worker.postMessage(message);

: worker.onmessage(event);

postMessage onmessage

SharedWorker
ui.js worker.js
worker.onmessage = onmessage = function(msg) {
function(msg) { ...
... postMessage(...)
} }
function a {
worker.postMessage(...)

Web Database

SQL

API API

API

API

var db = openDatabase(...)
db.transaction(function(tx) {
tx.executeSql(
“INSERT INTO Customer (NAME, AGE) “ +
“VALUES(?,?)”, [“Shiraishi”, 31],
function onSuccess(tx, rs) {
... ...
},
function onError(tx, error) {

Web Storage

LocalStorage

SessionStorage

localStorage.setItem(“key”, “value”);

var val = localStorage.getItem(“key”);
//
localStorage.key =“value”;

var val = localStorage.key;

Web Sockets

HTTP API

80(ws), 443(wss) HTTP/HTTPS

new WebSocket(url) postMessage() onmessage()

var ws = new WebSocket(“ws://example.com”);
ws.onmessage = function(message) {
...
}

ws.postMessage(“Hello”);

HTML Web

HTML5 API

Web

Canvas SVG UI

...

Let’s HTML5!

Html5 For Jjugccc2009fall

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Html5 For Jjugccc2009fall

Similar to Html5 For Jjugccc2009fall (20)

More from Shumpei Shiraishi

More from Shumpei Shiraishi (20)

Recently uploaded

Recently uploaded (20)

Html5 For Jjugccc2009fall