This document discusses upcoming features in HTML5 and browsers. It provides an overview of new HTML5 specifications being developed by the WHATWG including forms, canvas, video, audio and APIs for offline applications, geolocation, drag and drop. It also covers progress on implementing these features in browsers like Firefox, Safari, Chrome and IE. Links are provided to specifications and resources for further information.

1. "HTML5" & Browsers
Slides @ OSC 2010 Fukuoka
by Tomoya ASAI (aka. dynamis)
Fractal Firefox Background Image: http://r.dynamis.jp/fractalfx

7. Agenda

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

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

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

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

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

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

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

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

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

36. ref. http://whatwg.org/html5 - 1.1 Is this HTML5?

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

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

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

40. WHATWG - HTML5 Web Storage
Forms Indexed Database API
The WebSockets API
Canvas 2D Graphics Context
Server-Sent Events
Microdata
Microdata vocabularies XMLHttpRequest Level 2
Cross-document messaging Geolocation API
Channel messaging
Audio Data API
<device> ping="" Device Orientation Event
timed track HTML→Atom CSS3 XPath
Next Generation of HTML
SVG MathML
Web Workers
The WebSocket protocol Touch Events
: WHATWG Spec W3C Spec Non Standard

41. 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 HTML5 W3C

43. "HTML5" by Bruce Lawson
http://www.brucelawson.co.uk/2010/meet-newt-new-exciting-web-technologies/

60. 11 VMWare ( )

62. ( )

63. ...

68. PC ...

77. "Firefox"

78. Nokia Maemo

81. IE8 on Atom PC Kraken Bench Firefox

84. http://hacks.mozilla.org/2010/12/websockets-disabled-in-firefox-4/

85. http://www.adambarth.com/experimental/websocket.pdf

86. http://www.adambarth.com/experimental/websocket.pdf

87. 1 ( )

88. Web Design
CSS, Image, Fonts...

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

90. http://decomoji.jp/

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

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

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

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

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

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

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

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

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

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

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

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

106. JS mozSetImageElement()

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

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

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

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

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

113. Native Multimedia
Video, Audio, 3D ...

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

115. autobuffer preload

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

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

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

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

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

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

122.
http://webos-goodies.jp/archives/getting_started_with_webgl.html

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

124. Application Platform
JS APIs for Web Apps...

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

127. http://host/path?query#fragment

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

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

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

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

135. One Point Q&A

137. Theora Firefox 3.5~, WebM Firefox4~

138. 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/

145. References
for more information...

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

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

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

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

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

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

152. 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/

153. http://d.hatena.ne.jp/uupaa/searchdiary?word=*[uupaa.js]
http://raphaeljs.com/
http://g.raphaeljs.com/
Cappuccino: http://objective-j.org/
Sproutcore: http://www.sproutcore.com/
JavaScriptMVC: http://javascriptmvc.com/
Ample SDK: http://www.amplesdk.com/
Gianduia

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

155. 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/

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

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