20110319 OSC 2011 Oita で使用したスライド http://www.ospn.jp/osc2011-oita/ 後半は当日使用しなかった参考資料

1. "HTML5" & Browsers
Slides @ OSC 2011 Oita
by Tomoya ASAI (dynamis)

6. Agenda

10. Key point HTML5
What "HTML5" is?

13. This specification evolves HTML
and its related APIs to ease the
authoring of Web-based applications.

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

22. Tim Berners-Lee : http://dig.csail.mit.edu/breadcrumbs/node/166

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

25. Drag & Drop API
IE6 Safari
Firefox
Ian Hickson http://twitter.com/Hixie/status/4075253361

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

29. 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
WHATWG
Microdata CSS3 Transitions
Canvas HTML5
XPath ECMAScript 5th

30. Web ( "HTML5")
Web Applications 1.0 (CSS)
Next Generation of HTML
WHATWG - HTML5 CSS Images (Gradients ...)
CSS 2D Transforms
Microdata ( ) CSS Media Queries
Events & Messaging ( ) Web Fonts
Web ...
SVG SMIL
device , ping ... MathML WebGL
Web Workers
Web Storage Indexed Database API
Web Sockets Audio Data API

36. 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
WHATWG W3C HTML5

39. IE8 IE9

41. Web Browsers
Browsers Evolution...

47. Firefox Input : http://heatmap.mozillalabs.com/

52. Firefox

53. Firefox

56. ...

60. JavaScript (Kraken)
JavaScript (SunSpider)
JavaScript (V8)
jQuery 1.5 next()
Map Zooming
Transform (HWACCEL)
FishIE Tank (500fish)
DOM (absolute div )
Firefox 3.6 Firefox Beta 10 Win7 MBA-late2010

61. IE8 ( ) IE9pp7 Fx3.6 Safari5 WebKit Chrome 9b Chrome canary Fx4 b10
(crankshaft)
2/6 Kraken Benchmark IE8 Win7 MBA-late2010

66. ( )

67. ...

70. PC ...

72. "Firefox"

80. Web Technologies
HTML5 and more...

81. Styling
More CSS...

82. IE9 ...

83. http://hacks.mozilla.org/2010/06/css3-calc/

85. http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/

86. http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/

87. http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/

88. http://hacks.mozilla.org/2010/08/mozelement/

89. http://webkit.org/blog/176/css-canvas-drawing/

90. http://webkit.org/blog/176/css-canvas-drawing/

91. JS mozSetImageElement()

93. http://hacks.mozilla.org/2010/08/mozelement/

94. http://hacks.mozilla.org/2010/08/mozelement/

95. Typography
Font Control...

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

97. http://decomoji.jp/
http://fontsquirrel.com/fontface/
generator
http://decomoji.jp/

98. Firefox3.5~ http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/

99. : http://people.mozilla.org/~jdaggett/webfontsfuture.pdf

100. http://hacks.mozilla.org/2009/10/font-control-for-designers/

101. http://hacks.mozilla.org/2009/10/font-control-for-designers/

102. Animation
Canvas, SMIL...

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

104. http://hacks.mozilla.org/2010/07/firefox4-beta2/

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

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

108. Multimedia
Audio, Video...

109. http://www.w3.org/2005/Incubator/audio/

110. http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/

111. http://twitter.com/cherenkov/status/21614170698

112. Firefox <video>
VLC Web Browser Plugin: http://www.videolan.org/vlc/download-macosx.html

113. autobuffer preload

114.
http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/

115. 3D Graphics
WebGL with GPU...

116. http://www.khronos.org/webgl/

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

118. Device Sensor
Hardware Sensors...

120.
http://hacks.mozilla.org/2009/10/multi-touch/

121. Other
More and More...

123. http://d.hatena.ne.jp/javascripter/20100404/

125. http://hacks.mozilla.org/2010/08/firefox-4-http-strict-transport-security-force-https/

127. https://developer.mozilla.org/ja/
http://r.dynamis.jp/fx4
http://r.dynamis.jp/fx3.6

128. http://r.dynamis.jp/mozhacks

132. Styling
More CSS...

133. Firefox3.5~ http://hacks.mozilla.org/2009/06/text-shadow-spotlight/

134. http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html

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

136. http://dynamis.jp/demo/css-gradients/

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

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

139. Device Sensor
Hardware Sensors...

140. Firefox3.5~ https://developer.mozilla.org/ja/Using_geolocation

141. http://r.dynamis.jp/geolocationdemo

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

145. Multi Device
Android, iPhone, iPad...

150. http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px)
and (max-device-width : 1024px) { /* Styles
*/ }
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* Styles
*/ }
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* Styles */ }
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) { /* Styles */ }
/* Large screens ----------- */
@media only screen and (min-width : 1824px) { /* Styles */ }
/* iPhone 4 and high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }
cm

153. Interaction
for GUI Applications...

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

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

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

158. Drag & Drop API
IE6 Safari
Firefox
Ian Hickson http://twitter.com/Hixie/status/4075253361

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

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

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

164. One Point Q&A

166. Theora Firefox 3.5~, WebM Firefox4~

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

168. http://shaver.off.net/diary/2010/08/27/free-as-in-smokescreen/
OSS

179. References
for more information...

180. http://hacks.mozilla.org/
https://dev.mozilla.jp/hacksmozillaorg/
https://developer.mozilla.org/ja/Firefox_4_for_developers
https://developer.mozilla.org/ja/Firefox_3.6_for_developers
http://www.whatwg.org/html5
http://developers.whatwg.org/
http://w3g.jp/blog/studies/html5report

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

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

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

184. http://html5gallery.com/
http://www.scribd.com/doc/30964170/Scribd-in-HTML5
http://280slides.com/
http://www.youtube.com/html5

185. https://gaming.mozillalabs.com/
http://www.canvasdemos.com/type/games/
http://benfirshman.com/projects/jsnes/
http://www.dextrose.com/en/projects/aves-engine
http://www.kesiev.com/akihabara/
Web

186. 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://code.google.com/p/cakejs/

187. ë
http://raphaeljs.com/
http://g.raphaeljs.com/
http://graph.tk/
http://senchalabs.github.com/philogl/
http://d.hatena.ne.jp/uupaa/searchdiary?word=*[uupaa.js]
IE Canvas

188. Cappuccino: http://objective-j.org/
Sproutcore: http://www.sproutcore.com/
JavaScriptMVC: http://javascriptmvc.com/
Ample SDK: http://www.amplesdk.com/
jQuery Mobile: http://jquerymobile.com/
Sencha Touch: http://www.sencha.com/products/touch/
jQTouch: http://www.jqtouch.com/
Gianduia

189. http://www.appcelerator.com/products/titanium-mobile-
application-development/
http://phonegap.com/

190. http://hacks.mozilla.org/category/performance/
https://developers.facebook.com/blog/post/460
http://dt.deviantart.com/blog/38471599/
http://mozilla.jp/blog/entry/5927/

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

192. http://www.khronos.org/webgl/
http://www.khronos.org/webgl/wiki/Demo_Repository
https://developer.mozilla.org/en/WebGL
http://www.gatk.net/webgl/
http://webos-goodies.jp/archives/
getting_started_with_webgl.html
http://learningwebgl.com/cookbook/

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

194. http://www.w3.org/Style/CSS/current-work
https://cvs.khronos.org/svn/repos/registry/trunk/public/
webgl/doc/spec/WebGL-spec.html
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?