MY
Uploaded byMasataka Yakura
10,121 views
HTML5 & The Web Platform
HTML5と関連する仕様について、その目的や中身について簡単に紹介しています。2010年2月19日に開催されたDevelopers Summit 2010で講演したときのスライドです。
Recommended
More Related Content
What's hot
Viewers also liked
Similar to HTML5 & The Web Platform
HTML5 & The Web Platform
- 1.HTML5 & TheWebPlatformmasataka yakura
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.1. なぜ HTML5なのか2. 新しい機能3. プラットフォームの安定化4. いまとこれから
- 8.
- 9.
- 11.
- 14.
- 15.
- 16.
- 17.XHTML 2.0, XForms,etc...
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.1. もともと HTML5だった (Web Sockets, Web Workers, etc.)
- 26.2. HTML5 に近いAPI 仕様 (File API, Geolocation, etc.)
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.<canvas> <audio> <video><header><footer> <section> <article> <nav><aside> <hgroup> <figure> <details><datalist> <meter> <progress><time> <mark> <ruby> etc...
- 34.
- 35.<div id=“header”>→ <header><divclass=“section”>→ <section>
- 36.
- 37.<!DOCTYPE html PUBLIC"-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.<inputtype=text ...><input type=password ...><input type=checkbox ...><input type=radio ...>...
- 46.<inputtype=email ...><input type=range ...><input type=color ...><input type=date ...><input type=tel ...><input type=url ...>...
- 47.
- 48.
- 49.
- 50.
- 51.<input type=text ...autofocus>
- 52.
- 53.
- 54.
- 55.名 前 (必須)：メール(必須)：
- 56.<input type=text ...required><input type=email ... required>
- 57.郵便番号:<input type=text ...pattern=“¥d{3}-?¥d{4}”>
- 58.
- 59.<canvas> + 2DContext
- 60.
- 61.<canvas id=canvas ...><!-- fallback --></canvas>
- 62.
- 63.// コンテキストの取得var elm= document.querySelector(‘#canvas’);var ctx = elm.getContext(‘2d’);// 四角形を描画ctx.fillStyle = ‘rgba(0, 128, 0, 0.7)’;ctx.fillRect(50, 50, 160, 200);
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 72.
- 73.
- 75.
- 76.
- 77.<video src=“intro_html5.vid” controls> <a ...> ダウンロード </a></video>
- 78.
- 80.
- 81.YouTube (TestTube)http://www.youtube.com/html5
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.// 値をセットlocalStorage.setItem(‘key’, ‘value’);//値を取得var val = localStorage.key;
- 89.※ データベースは別の APIが。(Web SQL Database, Indexed Database API)
- 90.
- 91.
- 92.
- 94.
- 95.// ワーカーの作成var worker= new Worker(‘worker.js’);// メッセージをワーカーに渡すworker.postMessage(message);// ワーカーからのメッセージworker.onmessage = function (e) { doSomething(e.data);}
- 96.// worker.jsonmessage =function (e) { workOnSomething(); // 本体に返す postMessage(e.data);}
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.if (navigator.onLine) {// 状態を通知 ...}window.ononline = function () { sendData();}window.onoffline = function () { saveData();}
- 105.
- 106.
- 107.
- 108.var ws =new WebSocket(‘ws://example/serv’);// 通信開始時の処理ws.onopen = function () { ws.send(message);}// メッセージを受け取ったときws.onmessage = function (e) { ... }
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.API だけでなく要素･属性も DOMのもと定義。
- 125.
- 126.1. 構文解析2. ツリー構築3.エラー処理
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135.
- 136.HTML5 は、巨大。(4MB 超のHTML ファイル)
- 137.
- 138.
- 139.1. <canvas>, <video>2.Web Storage3. HTML5 parser (Firefox)4. Web Sockets (Chrome)
- 141.
- 142.
- 144.
- 145.
- 146.
- 148.
- 150.
- 151.
- 152.
- 153.