20100807 OSC Nagoya での講演資料 # スライドのみで見やすいよう若干整理 P5〜 Agenda P17〜 "HTML5" って何？ P56〜 HTML5 の範囲は？ P67〜 ブラウザのサポートは？ P94〜 IE6 はどうするの？ P118〜 使用上の注意 P147〜 便利なツールは？ P152〜 One Point Q&A P186〜 追加資料

1. Key Points HTML5
Presentation @ OSC 2010 Nagoya
by Tomoya ASAI (aka. dynamis)
Fractal Firefox Background Image: http://r.dynamis.jp/fractalfx

5. Agenda

6. One Point Q&A

7. (References)

19. This specification evolves HTML
and its related APIs to ease the
authoring of Web-based applications.
http://whatwg.org/html5 - Abstract

20. http://whatwg.org/html5 - Abstract

21. http://whatwg.org/html5 - Abstract

31. http://whatwg.org/html5 - Abstract

57. ref. http://whatwg.org/html5

58. ref. http://whatwg.org/html5

59. ref. http://whatwg.org/html5

60. WHATWG - HTML5 W3C - HTML5
Elements, Events, APIs Elements, Events, APIs
Canvas 2D Graphics Context HTML Canvas 2D Context
Microdata HTML5 Microdata
Microdata vocabularies
Cross-document messaging HTML5 Web Messaging
Channel messaging
<device> ping="" Web Storage
timed track HTML→Atom Indexed Database API
Next Generation of HTML The WebSockets API
Web Workers Server-Sent Events
The WebSocket protocol Geolocation API
MathML SVG XMLHttpRequest Level 2
"HTML5" ...

61. WAHTWG - HTML5 W3C - HTML5
Elements, Events, APIs Elements, Events, APIs
Canvas 2D Graphics Context HTML Canvas 2D Context
Microdata HTML5 Microdata
Microdata vocabularies
Cross-document messaging HTML5 Web Messaging
Channel messaging
device element
ping attribute
timed track model
converting HTML to Atom
Next Generation of HTML
WHATWG HTML5 ...

62. WHATWG - HTML5 W3C - HTML5
Semantic Elements Semantic Elements
Multimedia Elements Multimedia Elements
HTML5 Forms HTML5 Forms
Event model & APIs Event model & APIs
Offline Events Offline Events
Drag & Drop API Drag & Drop API
HTML5 Parser HTML5 Parser
Canvas 2D Graphics Context HTML Canvas 2D Context
Microdata HTML5 Microdata
Microdata vocabularies
Cross-document messaging HTML5 Web Messaging
Channel messaging
HTML5

63. HTML5 Markup Forms
WebFonts The WebSockets API
Canvas 2D Cross-document Messaging
WebGL Server-Sent Events
SVG XMLHttpRequest Level 2
Event Listener Indexed Database API
Drag & Drop API Offline Events
File API Web Storage
Geolocation API Web Workers
Microformats WebM (VP8) Codec
Microdata CSS3 Transitions
XPath ECMAScript 5th

64. HTML5 Markup Forms
WebFonts The WebSockets API
Canvas 2D Cross-document Messaging
WebGL Server-Sent Events
SVG XMLHttpRequest Level 2
Event Listener Indexed Database API
Drag & Drop API Offline Events
File API Web Storage
Geolocation API Web Workers
Microformats WebM (VP8) Codec
Microdata WHATWG
CSS3 Transitions
Canvas HTML5
XPath ECMAScript 5th

68. WHATWG : http://whatwg.org/html5

69. WHATWG : http://whatwg.org/html5

70. WHATWG : http://whatwg.org/html5

71. WHATWG : http://whatwg.org/html5

75. http://caniuse.com/

76. http://caniuse.com/

77. http://caniuse.com/

78. http://caniuse.com/

79. http://acid3.acidtests.org/

80. http://acid3.acidtests.org/

81. http://acid3.acidtests.org/

82. http://acid3.acidtests.org/

83. http://acid3.acidtests.org/

84. Modernizr: http://www.modernizr.com/

85. Modernizr: http://www.modernizr.com/

86. Modernizr: http://www.modernizr.com/

87. Modernizr: http://www.modernizr.com/

96. IE6 : http://ie6funeral.com/

97. IE6 : http://ie6funeral.com/

98. IE6 : http://ie6funeral.com/

99. IE6 : http://ie6funeral.com/

100. StatCounter: http://gs.statcounter.com/
NetApplications: http://marketshare.hitslink.com/

101. StatCounter: http://gs.statcounter.com/
NetApplications: http://marketshare.hitslink.com/

102. StatCounter: http://gs.statcounter.com/
NetApplications: http://marketshare.hitslink.com/

103. http://weblogs.mozillazine.org/asa/archives/2010/05/firefox_and_chrome_u.html

104. http://weblogs.mozillazine.org/asa/archives/2010/05/firefox_and_chrome_u.html

112. http://d.hatena.ne.jp/uupaa/20100728/1280253779

113. http://d.hatena.ne.jp/uupaa/20100728/1280253779

114. http://d.hatena.ne.jp/uupaa/20100728/1280253779

115. http://d.hatena.ne.jp/uupaa/20100728/1280253779

123. HTML5 : http://w3g.jp/blog/studies/html5report

124. HTML5 : http://w3g.jp/blog/studies/html5report

125. HTML5 : http://w3g.jp/blog/studies/html5report

126. HTML5 : http://w3g.jp/blog/studies/html5report

150. ë

152. One Point Q&A

154. Theora Firefox 3.5~, WebM Firefox4~

155. Theora Firefox 3.5~, WebM Firefox4~

156. Theora Firefox 3.5~, WebM Firefox4~

157. Theora Firefox 3.5~, WebM Firefox4~

158. Theora Firefox 3.5~, WebM Firefox4~

159. Theora Firefox 3.5~, WebM Firefox4~

160. Xiph.Org On2 Tech. Google
VP3
Ogg
Theora VP4
Vorbis VP5
VP6 WebM
VP7 Matroska
VP8 VP8
Vorbis
Container
Video
Audio
WebM FAQ: http://www.webmproject.org/about/faq/

172. Wave : http://atnd.org/events/6995

173. Wave : http://atnd.org/events/6995

174. Wave : http://atnd.org/events/6995

175. Wave : http://atnd.org/events/6995

186. CSS, Image, Fonts...

187. Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
CSS : http://css-tricks.com/examples/ButtonMaker/

188. Firefox3.6~ http://dev.w3.org/csswg/css3-images/#gradients-

189. http://people.mozilla.org/~blizzard/2009-11-gradient-button/sample.html

190. Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

191. Firefox3.6~ https://developer.mozilla.org/ja/Using_gradients

192. http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

193. Firefox3.5~ http://www.alistapart.com/articles/cssatten

194. Japanese Web Fonts Service by Seesaa http://decomoji.jp/

195. Firefox3.5~ https://developer.mozilla.org/ja/CSS/@font-face

196. sample css style rules
Firefox3.5~ http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/

197. JS APIs for Web Apps...

198. photo by 5500 http://www.flickr.com/photos/5500/303849123/

199. https://dev.mozilla.jp/hacksmozillaorg/websockets-in-firefox/

200. Web Sockets API

201. photo by californiaAmy http://www.flickr.com/photos/amyandthomas/3865411819/

202. Firefox3.6~ https://developer.mozilla.org/en/Using_files_from_web_applications

203. https://developer.mozilla.org/en/Using_files_from_web_applications

204. Firefox3.6~ http://r.dynamis.jp/fontdropdemo

205. 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

206. Firefox3.5~ https://developer.mozilla.org/Ja/DragDrop/Drag_and_Drop

207. http://hacks.mozilla.org/2009/12/uploading-files-with-xmlhttprequest/

208. Firefox.3.6~ https://developer.mozilla.org/en/CSS/pointer-events

209. http://demos.hacks.mozilla.org/openweb/pointer-events/

210. http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html

211. https://dev.mozilla.jp/hacksmozillaorg/firefox-4-the-html5-parser-inline-svg-speed-and-more/

212. Video, Animation, 3D ...

213. Firefox.3.5~ http://hacks.mozilla.org/category/video/

214. http://hacks.mozilla.org/2009/12/autobuffering-video-in-firefox/

215. Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions

216. Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions

217. http://media.24ways.org/2009/14/5/index.html

219. SVG Test Suite : http://www.codedread.com/svg-support.php

220. http://people.mozilla.com/~dynamis/demo/smil/

221. Firefox 4~ http://www.khronos.org/webgl/wiki/Demo_Repository

222. Firefox 4~ https://developer.mozilla.org/en/WebGL

223. https://developer.mozilla.org/en/WebGL/Getting_started_with_WebGL

224. Future Web Platform

225. : http://vocamus.net/dave/?p=974

227. Firefox3.6~ http://r.dynamis.jp/oryzeademo

228.
Firefox3.6~ http://hacks.mozilla.org/2009/10/orientation-for-firefox/

229. https://developer.mozilla.org/en/Detecting_device_orientation

231.
https://wiki.mozilla.org/Firefox/Projects/Multitouch_Polish

232. http://www.mgalli.com/development/drawing/demoapp.html
https://wiki.mozilla.org/Firefox/Projects/Multitouch_Polish/DOM_Events/Examples

233. for more information...

234. http://hacks.mozilla.org/
https://dev.mozilla.jp/hacksmozillaorg/
https://developer.mozilla.org/en/
Upcoming_Firefox_features_for_developers
https://developer.mozilla.org/ja/Firefox_3.6_for_developers
http://www.whatwg.org/html5
http://w3g.jp/blog/studies/html5report

235. http://www.slideshare.net/myakura/presentations
http://www.slideshare.net/myakura/microdata-a-primer
http://people.mozilla.org/~jdaggett/webfontsfuture.pdf
http://www.slideshare.net/beltzner/firefox-
roadmap-2010-0510

236. http://www.whatwg.org/html5
http://caniuse.com/
http://caniuse.com/#cats=HTML5&statuses=rec,pr,cr,wd,ietf
http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers
http://www.codedread.com/svg-support.php

237. http://hacks.mozilla.org/
http://html5rocks.com/
http://developer.apple.com/safaridemos/
http://ie.microsoft.com/testdrive/
http://twitter.com/paulrouget/

238. http://tools.mozilla.com/
http://processingjs.org/
http://azarask.in/projects/algorithm-ink/
http://code.google.com/p/contextfree/source/browse/trunk/
contextfree.js
http://d.hatena.ne.jp/uupaa/searchdiary?word=*[uupaa.js]

239. http://raphaeljs.com/
Cappuccino: http://objective-j.org/
Sproutcore: http://www.sproutcore.com/
JavaScriptMVC: http://javascriptmvc.com/
Ample SDK: http://www.amplesdk.com/
Gianduia

240. http://www.w3.org/TR/css3-fonts/
http://code.google.com/webfonts
http://typekit.com/
http://decomoji.jp/
http://www.fontsquirrel.com/fontface/generator

241. https://cvs.khronos.org/svn/repos/registry/trunk/public/
webgl/doc/spec/WebGL-spec.html
https://developer.mozilla.org/en/WebGL
http://learningwebgl.com/cookbook/
http://www.khronos.org/webgl/
http://www.khronos.org/webgl/wiki/Demo_Repository

242. http://www.w3.org/TR/FileAPI/
http://www.w3.org/TR/file-writer-api/
http://www.w3.org/TR/geolocation-API/
https://wiki.mozilla.org/Audio_Data_API
https://developer.mozilla.org/en/DOM/
window.onmozorientation

243. http://www.w3.org/Style/CSS/current-work
https://cvs.khronos.org/svn/repos/registry/trunk/public/
webgl/doc/spec/TypedArray-spec.html
http://www.whatwg.org/specs/web-apps/current-work/
multipage/introduction.html#is-this-html5?