More Related Content Similar to Concentrated HTML5 & Attractive HTML5 (20) Concentrated HTML5 & Attractive HTML51. ぎゅ∼っと濃縮、HTML5
&
Attractive HTML5
マークアップからAPI、その魅力まで
@shoito
HTML5-FIT
8. ITシステムの変遷
高
C/S RIA
ユーザビリティ
1990年代初頭∼ 2003年後半∼
メインフレーム Web
1990年代中頃∼
/ダム端末
∼1980年代頃
低 コストパフォーマンス 高
参考文献:RIAシステム構築ガイド Essential 2007 p005
27. WHATWG W3C
Web Applications 1.0
HTML5 HTML5
Microdata HTML5 Microdata
canvas 2D Context HTML5 2D Context
Cross-document messaging
HTML5 Communications
Channel messaging
device HTML Device
Web workers Web workers
Web storage Web storage
Server-sent events Server-sent events
Web sockets Web sockets
28. HTML5と関連仕様
Indexed
Web workers
Database API
Web Storage Geolocation API
HTML5
WebSocket File API
Web SQL
...etc
Database
33. Webの技術 - これから
JavaScript
CSS HTML
各種APIの拡張により
見栄えを表現 データ構造を表現
機能を実現
34. Webの技術 - これから
JavaScript
CSS HTML
各種APIの拡張により
見栄えを表現 データ構造を表現
機能を実現
35. Webの技術 - これから
JavaScript
CSS HTML
各種APIの拡張により
見栄えを表現 データ構造を表現
機能を実現
38. セクショニングする新たなタグ
<article> <footer>
ブログやニュース記事における セクションのフッタを表現
記事本体を表現 <header>
<section> セクションのヘッダを指定
文書などにおける一般的な <nav>
セクションを表現 ページ内のリンクなど
<aside> ナビゲーション情報を保持
ページ内容の主題と関連が ...etc
あまりない内容を指定
39. ...etc
<mark> <datalist>
マーキングされたテキストを表現 inputタグのlist要素と組み合わせて
<progress> 入力候補を指定
ダウンロードや実行中のタスクの <embed>
進捗を表現 プラグインを利用するコンテンツに
<command> 利用
ユーザーが実行するコマンドを表現 <meter>
<time> ディスク容量などの測定値を表現
日付や時刻などを表現 ...etc
43. canvasタグ
名前を指定してcanvas領域を置く
<canvas id= sky width= 320 height= 240 />
canvasに描画するにはJavaScriptを使う
<script>
var canvas = document.getElementById( sky );
var context = canvas.getContext( 2d );
context.fillStyle = rgb(255, 0, 0) ;
context.fillRect(0, 0, 100, 100);
</script>
46. videoタグ
src属性に動画ファイルのパスを指定する
<video src= me.mov controls= true />
ブラウザ毎にサポートフォーマットが違う
複数フォーマットを指定しておくのが有効
<video controls= true >
<source src= me.mov type= video/quicktime />
<source src= me.ogg type= video/ogg; codecs= theora, vorbis />
</video>
demo
49. <!DOCTYPE html PUBLIC -//W3C/DTD
XHTML 1.0 Strict//EN http://www.w3.org/TR
/xhtml1/DTD/xhtml1-strict.dtd >
DOCTYPEを変更するだけ
<!DOCTYPE html>
52. Webの技術 - これから
JavaScript
CSS HTML
各種APIの拡張により
見栄えを表現 データ構造を表現
機能を実現
53. 関連API
• Application Cache API
• Communication API
• Geolocation API
• Web Storage
• Web SQL Database
• Web Workers
• Web Socket
• File API
• ...etc
57. Cross Document Messaging
ウィンドウ間でメッセージの送受信を行うAPI
メッセージの受信
window.addEventListener( message , function() {
...
}, false);
メッセージの送信
postMessage( hogehoge , http://example.com/ );
60. Web Storage
セッション・ストレージ
ローカル・ストレージ
KEY : VALUE
KEY : VALUE
KEY : VALUE
73. デザイナ 1
ー
3
JavaScript
CSS HTML
各種APIの拡張により
見栄えを表現 データ構造を表現
機能を実現
1
ー 開発者
3
標準技術
HTML, CSS, JavaScript
85. <header>
<section>
<header>
<nav> <aside>
<article>
<footer>
<footer>
Webがよりセマンティックに
header, nav, section, article, footer, aside
86. HTML5 is Simple!
doctype, meta, script, link 省略...
<!doctype html>
<meta charset= utf-8 >
<script src= xxx.js ></script>
<link rel= stylesheet href= xxx.css ></link>
88. N
ew
!
常に最新のソフトウェアを使える
Webアプリケーションの特性
91. デザイナ 1
ー
3
JavaScript
CSS HTML
各種APIの拡張により
見栄えを表現 データ構造を表現
機能を実現
1
ー 開発者
3
標準技術
HTML, CSS, JavaScript
100. HTML5 / Flash 比較
HTML5 Flash
公平性 ○ (標準技術) (Adobe独占)
互換性 (ブラウザ依存) ○
(Flash Playerのみ)
PC普及率 (IE未サポート) ○ (ほぼ100%)
モバイル普及率 △ △
開発者数 ○(HTML, JavaScript) △ (ActionScript)
開発ツール ○ ○
111. Thanks!
shoito
sho.ito@air-life.net
http://twitter.com/shoito
HTML5-FIT