28. It is necessary to evolve HTML
incrementally. The attempt to
get the world to switch to
XML, ... all at once didn't work.
Tim Berners-Lee の言葉: http://dig.csail.mit.edu/breadcrumbs/node/166
31. The drag-and-drop API is horrible,
but it has one thing going for it: IE6
implements it, as do Safari and Firefox.
Ian Hickson の言葉 http://twitter.com/Hixie/status/4075253361
32. Drag & Drop API は酷いけど、採用する理由
がひとつある。つまり、IE6 だけでなく Safari
や Firefox でも実装されているということだ。
Ian Hickson の言葉 http://twitter.com/Hixie/status/4075253361
37. どこまで HTML5?
Web Workers
Web Storage
The WebSockets API
Server-Sent Events
Geolocation API
XMLHttpRequest Level 2
Canvas 2D
Forms
File API
SVG
Drag & Drop API
Indexed Database API
Microdata
Cross-document Messaging
WebGL
WebFonts
Event Listener
Microformats
CSS3 Transitions
ECMAScript 5th
Offline Events
HTML5 Markup
WebM (VP8) Codec
XPath
38. どこまで HTML5?
Web Workers
Web Storage
The WebSockets API
Server-Sent Events
Geolocation API
XMLHttpRequest Level 2
Canvas 2D
Forms
File API
SVG
Drag & Drop API
Indexed Database API
Microdata
Cross-document Messaging
WebGL
WebFonts
Event Listener
Microformats
CSS3 Transitions
ECMAScript 5th
Offline Events
HTML5 Markup
WebM (VP8) Codec
XPath
WHATWG 仕様書の定義による
Canvas はタグの定義だけが HTML5
39. 次世代 Web 標準技術 (バズワードとしての "HTML5")
Web Applications 1.0
Next Generation of HTML
WHATWG - HTML5
要素とタグの定義
デザイン機能 (CSS)
Microdata (メタデータ)
Events & Messaging (通信)
Web ブラウザ向け機能 ...
device 要素, ping 属性 ...
高度なアプリケーション機能Web Workers
Web Sockets
Indexed Database API
レイアウトと装飾
Web Fonts
CSS Images (Gradients ...)
CSS 2D Transforms
CSS Media Queries
Web Storage
Audio Data API
SVG SMIL
MathML WebGL
40. Web Workers
The WebSocket protocol
Web Storage
The WebSockets API
Server-Sent Events
注目されている関連仕様の一部を標準化団体別に色分け
Geolocation API
XMLHttpRequest Level 2
Next Generation of HTML
WHATWG - HTML5
Canvas 2D Graphics Context
Microdata
Microdata vocabularies
Cross-document messaging
Channel messaging
Forms
<device>
SVG MathML
Indexed Database API
ping=""
timed track HTML→Atom
Audio Data API
Touch Events
WHATWG Spec W3C Spec Non Standard凡例:
CSS3 XPath
Device Orientation Event
41. 仕様書で HTML5 として定義されている範囲のはこれだけ
WHATWG - HTML5
Canvas 2D Graphics Context
Microdata
Microdata vocabularies
Cross-document messaging
Channel messaging
HTML5 Parser
W3C - HTML5
HTML5 Parser
HTML5 Web Messaging
HTML5 Microdata
HTML Canvas 2D Context
Drag & Drop API
Offline Events
Event model & APIs
HTML5 Forms
Multimedia Elements
Drag & Drop API
Offline Events
Event model & APIs
HTML5 Forms
Multimedia Elements
Semantic Elements Semantic Elements
42. HTML & "HTML5"
HTML5 は仕様書の定義
"HTML5" は次世代技術の総称
"HTML5" = HTML5 & ALL
バズワードのご利用は程々に...
43. HTML5 時代の Web 技術
HTML5 が使える時代
HTML5 が注目される時代
誤りではないぼかした表現
48. Font Control Features
CSS3 font-variant
フォントの詳細な機能を制御
分数、桁揃え、合字、旧字体...
仕様のエディタ自身による実装
実装者本人の解説: http://people.mozilla.org/~jdaggett/webfontsfuture.pdf
71. Audio Data API
Video は Canvas に取得可能
Audio も取得や生成可能に
W3C にて標準化予定
試験実装 API について:
https://wiki.mozilla.org/
Audio_Data_API
http://www.w3.org/2005/Incubator/audio/
72. Audio Data の読み取り
http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/
<audio id="input" src="test-tone.ogg" controls></audio>
<div id="display"></div>
<script type="text/javascript">
var $ = function($) { return document.getElementById($); }
var input = $('input');
var display = $('display');
// Add an event listener to the audio input object
input.addEventListener('MozAudioAvailable',
function(e){
// フレームバッファの最初のサンプリングをしてみる
display.innerHTML += e.frameBuffer[0] + ', ';
}, false );
</script>
73. Audio Data API の用途
Fourier 変換して周波数分解
フィルタ、ミキサ、イコライザ
そして勿論 DSP や音声合成...
http://twitter.com/cherenkov/status/21614170698
74. WebGL
<Canvas> の 3D コンテキスト
OpenGL ES2.0 相当の API
携帯用 GPU が広くサポート
http://www.khronos.org/webgl/
113. ref. - web fonts
CSS Fonts Module Level 3
http://www.w3.org/TR/css3-fonts/
Google の Web Font サービス
http://code.google.com/webfonts
Web Fonts のライセンス販売 (無償フォント含む)
http://typekit.com/
http://decomoji.jp/
Web Fonts Generator - eot や WOFF フォントに変換
http://www.fontsquirrel.com/fontface/generator
114. ref. - webgl
The Khronos Group - WebGL
http://www.khronos.org/webgl/
http://www.khronos.org/webgl/wiki/Demo_Repository
WebGL セクション@MDC
https://developer.mozilla.org/en/WebGL
The WebGL の解説
http://www.gatk.net/webgl/
http://webos-goodies.jp/archives/
getting_started_with_webgl.html
http://learningwebgl.com/cookbook/
115. ref. - other spec.
File API
http://www.w3.org/TR/FileAPI/
http://www.w3.org/TR/file-writer-api/
Geolocation API
http://www.w3.org/TR/geolocation-API/
Audio Data API
https://wiki.mozilla.org/Audio_Data_API
window.onmozorientation
https://developer.mozilla.org/en/DOM/
window.onmozorientation
116. ref. - other spec.
CSS Current Work
http://www.w3.org/Style/CSS/current-work
WebGL Spec.
https://cvs.khronos.org/svn/repos/registry/trunk/public/
webgl/doc/spec/WebGL-spec.html
Typed Arrays
https://cvs.khronos.org/svn/repos/registry/trunk/public/
webgl/doc/spec/TypedArray-spec.html
HTML5 の定義解説から関連仕様へのリンク色々
http://www.whatwg.org/specs/web-apps/current-work/
multipage/introduction.html#is-this-html5?