The document discusses various HTML5 features and whether the Dojo JavaScript library is compatible with them. It examines Dojo's support for semantic elements, forms, Canvas/SVG graphics, WebGL, and web workers. While Dojo addresses many HTML5 features through its own APIs, its support for some newer specs like WebGL is still limited compared to other libraries.

1. Dojo &
HTML5
By Mike Wilcox
September, 2011

2. Mike W ilcox

3. Mike W ilcox

4. Mike W ilcox
AJAX CSS3 AIR
AS3 HTML5
PHP
MySQL
DojoFlash Video

5. Mike W ilcox Co m mitter!
AJAX CSS3 AIR
AS3 HTML5
PHP
MySQL
DojoFlash Video

6. Mike W ilcox Co m mitter!
AJAX CSS3 AIR
AS3 HTML5
PHP
MySQL
DojoFlash Video
Works there as
Director of
Technology.

7. Mike W ilcox Co m mitter!
Natch!
AJAX CSS3 AIR
AS3 HTML5
PHP
MySQL
DojoFlash Video
Works there as
Director of
Technology.

8. Mike W ilcox Co m mitter!
Natch!
@clubajax
AJAX CSS3 AIR
AS3 HTML5
PHP
MySQL
DojoFlash Video ITweet!
Works there as
Director of
Technology.

9. Is Dojo HTML5 Ready?

10. Is Dojo HTML5 Ready?

11. Is Dojo HTML5 Ready?

12. Is Dojo HTML5 Ready?
HTML5 makes a developer’s job
easier by specifying uniform APIs
across browsers and suggest new
and more powerful features

13. Is Dojo HTML5 Ready?
HTML5 makes a developer’s job
easier by specifying uniform APIs
across browsers and suggest new
and more powerful features
library

14. Is Dojo HTML5 Ready?
HTML5 makes a developer’s job
easier by specifying uniform APIs
across browsers and suggest new
and more powerful features
library

15. Is Dojo HTML5 Ready?
HTML5 makes a developer’s job
easier by specifying uniform APIs
across browsers and suggest new
and more powerful features
Pre-written JavaScript
designed to make coding
library easier for devs

16. Is Dojo HTML5 Ready?
HTML5 makes a developer’s job
easier by specifying uniform APIs
across browsers and suggest new
and more powerful features
Pre-written JavaScript
designed to make coding
library easier for devs

17. Is Dojo HTML5 Ready?
HTML5 makes a developer’s job
easier by specifying uniform APIs
across browsers and suggest new
and more powerful features
Pre-written JavaScript
designed to make coding
library easier for devs

18. Is Dojo HTML5 Ready?
HTML5 makes a developer’s job
easier by specifying uniform APIs
across browsers and suggest new
and more powerful features
Pre-written JavaScript
designed to make coding
library easier for devs
Pete is the president.

19. The Top HTML5 Features

20. The Top HTML5 Features
1. Semantic Elements
2.Forms
3.Canvas / SVG
4.WebGL / Canvas 3D
5.Web Workers
6.Geolocation
7.Storage / Offline
8.WebSockets
9.Web Audio API
10.CSS3 / WOFF
11.Audio
12.Video

21. The Top HTML5 Features
1. Semantic Elements
2.Forms
3.Canvas / SVG
4.WebGL / Canvas 3D
5.Web Workers
6.Geolocation
7.Storage / Offline
8.WebSockets
9.Web Audio API
10.CSS3 / WOFF
11.Audio
12.Video

22. Semantic Elements

23. Semantic Elements
Don’t be anti-
semantic!

24. Semantic Elements

25. Semantic Elements

26. Semantic Elements
Fun new tag names, like: section, header,
footer, menu, etc.

27. Semantic Elements
Fun new tag names, like: section, header,
footer, menu, etc.
Allows for nested hgroups, multiple h1 tags
in a page

28. Semantic Elements
Fun new tag names, like: section, header,
footer, menu, etc.
Allows for nested hgroups, multiple h1 tags
in a page
Crawlers have less trouble determining
your markup intent

29. Semantic Elements
Fun new tag names, like: section, header,
footer, menu, etc.
Allows for nested hgroups, multiple h1 tags
in a page
Crawlers have less trouble determining
your markup intent
Pretty much the first thing people think
of... since it’s actually HTML

30. Semantic Elements
Fun new tag names, like: section, header,
footer, menu, etc.
Allows for nested hgroups, multiple h1 tags
in a page
Crawlers have less trouble determining
your markup intent
Pretty much the first thing people think
of... since it’s actually HTML

31. Semantic Elements
Fun new tag names, like: section, header,
footer, menu, etc.
Allows for nested hgroups, multiple h1 tags
in a page
Crawlers have less trouble determining
your markup intent
Pretty much the first thing people think
of... since it’s actually HTML
Surprisingly not very well adopted
considering XForms was introduced in
2003.

32. Semantic Elements

33. Semantic Elements
Experiment: Dijit BorderContainer, in markup with
HTML5 tags

34. Semantic Elements

35. Semantic Elements

36. Semantic Elements
Works in
Firefox! Yay!

37. Semantic Elements
Works in
Firefox! Yay!
IE8...
Not so much.

38. Semantic Elements
Works in
Firefox! Yay!
IE8...
Not so much.

39. Semantic Elements

40. Semantic Elements
Experiment: Simple custom widget. Minimal HTML5 tags.

41. Semantic Elements
Experiment: Simple custom widget. Minimal HTML5 tags.
Keepin’ it
simple!

42. Semantic Elements
Experiment: Simple custom widget. Minimal HTML5 tags.
Keepin’ it
simple!

43. Semantic Elements
Experiment: Simple custom widget. Minimal HTML5 tags.
Keepin’ it
simple!

44. Semantic Elements

45. D -
Semantic Elements

46. D -
Semantic Elements
Pros:

47. D -
Semantic Elements
Pros:
Parser handles some parent tags in the page body

48. D -
Semantic Elements
Pros:
Parser handles some parent tags in the page body
There *is* a ticket for this in Trac.

49. D -
Semantic Elements
Pros:
Parser handles some parent tags in the page body
There *is* a ticket for this in Trac.
Cons:

50. D -
Semantic Elements
Pros:
Parser handles some parent tags in the page body
There *is* a ticket for this in Trac.
Cons:
Right now, it blows up.

51. Forms

52. Forms

53. Forms

54. Forms

55. Forms
Placeholder text, validation, input widgets,
uploaders, etc.

56. Forms
Placeholder text, validation, input widgets,
uploaders, etc.
The second thing people think of for
HTML5!

57. Forms
Placeholder text, validation, input widgets,
uploaders, etc.
The second thing people think of for
HTML5!

58. Forms
Placeholder text, validation, input widgets,
uploaders, etc.
The second thing people think of for
HTML5!
Surprisingly not very well adopted
considering XForms was introduced in
2003.

59. Forms
The following screenshots are an example of an HTML5
forms sub-set.
http://www.miketaylr.com/code/html5-forms-ui-support.html

60. Forms
Note the difference between Mac
and Windows... on the same browser.

61. Forms Toggle th
ese two
sli des bac
Note the difference between Mac k an d forth!
and Windows... on the same browser.

62. Forms
Well, Firefox always seems to lag a little behind...

63. Forms
The mighty Chrome! Hasn’t done a lot here...

64. Forms
Nor Safari....

65. Forms
Hey! I thought IE9 was 99% HTML5 compliant! They said
they were.

66. Dijit Forms
Dijit Forms Theme Tester in IE8 on Windows

67. Dijit Forms
Dijit Forms Theme Tester in Firefox on Mac OSX 10

68. Dijit Forms
Dijit Forms Theme Tester in Firefox on Mac OSX 10
Toggle th
ese two
sli des bac
k an d for
th!

69. DojoX Uploader

70. DojoX Uploader

71. DojoX Uploader

72. DojoX Uploader
The Uploader successfully handles custom
uploading cross browser with a standard,
HTML5-friendly API.

73. DojoX Uploader
The Uploader successfully handles custom
uploading cross browser with a standard,
HTML5-friendly API.
I wrote it!
E ven supp orts Drag
a n d Dro p!

74. DojoX Uploader
The Uploader successfully handles custom
uploading cross browser with a standard,
HTML5-friendly API.
I wrote it!
E ven supp orts Drag
a n d Dro p!

75. DojoX Uploader
The Uploader successfully handles custom
uploading cross browser with a standard,
HTML5-friendly API.
I wrote it!
Too complicated. Dev users are asking the
same questions over and over. Advanced is
default.
E ven supp orts Drag
a n d Dro p!

76. Forms

77. A
Forms

78. Pros:
A
Forms

79. Pros:
A Forms
Pretty much has has the HTML5 Forms spec
covered for years

80. Pros:
A Forms
Pretty much has has the HTML5 Forms spec
covered for years
Consistent look cross browser (better than HTML5!)

81. Pros:
A Forms
Pretty much has has the HTML5 Forms spec
covered for years
Consistent look cross browser (better than HTML5!)
dataset & data-* attributes: data-dojo-type

82. Pros:
A Forms
Pretty much has has the HTML5 Forms spec
covered for years
Consistent look cross browser (better than HTML5!)
dataset & data-* attributes: data-dojo-type
Cons:

83. Pros:
A Forms
Pretty much has has the HTML5 Forms spec
covered for years
Consistent look cross browser (better than HTML5!)
dataset & data-* attributes: data-dojo-type
Cons:
Compliance may not be quite 100%

84. Pros:
A Forms
Pretty much has has the HTML5 Forms spec
covered for years
Consistent look cross browser (better than HTML5!)
dataset & data-* attributes: data-dojo-type
Cons:
Compliance may not be quite 100%
No Getters and Setters - custom API

85. Canvas / SVG

86. Canvas / SVG

87. Canvas / SVG

88. Canvas / SVG

89. Canvas / SVG
Canvas / Raster: Grid of pixels

90. Canvas / SVG
Canvas / Raster: Grid of pixels
SVG / Vector: Mathematical representation of a shape

91. Canvas / SVG
Canvas / Raster: Grid of pixels
SVG / Vector: Mathematical representation of a shape

92. Canvas / SVG
Canvas / Raster: Grid of pixels
SVG / Vector: Mathematical representation of a shape
Not in old-ass™ IE!

93. Canvas / SVG
Canvas / Raster: Grid of pixels
SVG / Vector: Mathematical representation of a shape
Not in old-ass™ IE!
Fun security restriction
surprises!

94. DojoX GFX

95. DojoX GFX
meow!

96. DojoX GFX
dojox.gfx (GFX) is a cross-platform vector graphics API
that loosely follows SVG as the underlying model. It
detects the best graphics engine implementation for
your browser and uses that to render the graphics.
meow!

97. DojoX GFX
dojox.gfx (GFX) is a cross-platform vector graphics API
that loosely follows SVG as the underlying model. It
detects the best graphics engine implementation for
your browser and uses that to render the graphics.
meow!
dojox.gfx
Normalized API
SVG VML
Render
Canvas
Silverlight

98. Canvas / SVG

99. A
+
Canvas / SVG

100. A
Pros:
+
Canvas / SVG

101. A
Pros:
+
Canvas / SVG
API works with Canvas, SVG, Silverlight and VML

102. A
Pros:
+
Canvas / SVG
API works with Canvas, SVG, Silverlight and VML
Cons:

103. A
Pros:
+
Canvas / SVG
API works with Canvas, SVG, Silverlight and VML
Cons:
Close, but API is non-standard

104. WebGL / Canvas 3D

105. WebGL / Canvas 3D

106. WebGL / Canvas 3D

107. WebGL / Canvas 3D
WebGL is a cross-platform API used to create 3D
graphics in a browser. Because it runs in the HTML5
Canvas element, WebGL has full integration with all
Document Object Model (DOM) interfaces.

108. WebGL / Canvas 3D
WebGL is a cross-platform API used to create 3D
graphics in a browser. Because it runs in the HTML5
Canvas element, WebGL has full integration with all
Document Object Model (DOM) interfaces.
Ma de by
the se guys!

109. WebGL / Canvas 3D
WebGL is a cross-platform API used to create 3D
graphics in a browser. Because it runs in the HTML5
Canvas element, WebGL has full integration with all
Document Object Model (DOM) interfaces.
Because you can
make stuff like
this!
Ma de by
the se guys!

112. Because the
code looks like
that!

113. function init()
{
// Initialize
var gl = initWebGL("example", "vshader", "fshader",
[ "vNormal", "vColor", "vPosition"], [ 0, 0, 0, 1 ], 10000);
// Set some uniform variables for the shaders
gl.uniform3f(gl.getUniformLocation(gl.program, "lightDir"), 0, 0, 1);
gl.uniform1i(gl.getUniformLocation(gl.program, "sampler2d"), 0);
Because the
// Create a box. On return 'gl' contains a 'box' property with
// the BufferObjects containing the arrays for vertices,
// normals, texture coords, and indices.
gl.box = makeBox(gl); code looks like
that!
// Load an image to use. Returns a WebGLTexture object
spiritTexture = loadImageTexture(gl, "resources/spirit.jpg");
// Create some matrices to use later and save their locations in the shaders
gl.mvMatrix = new CanvasMatrix4();
gl.u_normalMatrixLoc = gl.getUniformLocation(gl.program, "u_normalMatrix");
gl.normalMatrix = new CanvasMatrix4();
gl.u_modelViewProjMatrixLoc = gl.getUniformLocation(gl.program, "u_modelViewProjMatrix");
gl.mvpMatrix = new CanvasMatrix4();
// Enable all of the vertex attribute arrays.
gl.enableVertexAttribArray(0);
gl.enableVertexAttribArray(1);
gl.enableVertexAttribArray(2);
// Set up all the vertex attributes for vertices, normals and texCoords
gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.vertexObject);
gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.normalObject);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.texCoordObject);
gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);
// Bind the index array
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.box.indexObject);
return gl;
}

114. WebGL / Canvas 3D

115. Pa ss
WebGL / Canvas 3D

116. Pa ss
WebGL / Canvas 3D
Pros:

117. Pa ss
WebGL / Canvas 3D
Pros:
Existing libraries: C3DL, CopperLicht , EnergizeGL,
GammaJS, GLGE, GTW, O3D, OSG.JS, SceneJS,
SpiderGL, TDL, Three.js and X3DOM

118. Pa ss
WebGL / Canvas 3D
Pros:
Existing libraries: C3DL, CopperLicht , EnergizeGL,
GammaJS, GLGE, GTW, O3D, OSG.JS, SceneJS,
SpiderGL, TDL, Three.js and X3DOM
Cons:

119. Pa ss
WebGL / Canvas 3D
Pros:
Existing libraries: C3DL, CopperLicht , EnergizeGL,
GammaJS, GLGE, GTW, O3D, OSG.JS, SceneJS,
SpiderGL, TDL, Three.js and X3DOM
Cons:
There is a DojoX 3Dgfx, but it’s not WebGL.

120. Web Workers

121. Web Workers

122. Web Workers

123. Web Workers

124. Web Workers
Multithreaded JavaScript?? What’s not cool
about that!

125. Web Workers
Multithreaded JavaScript?? What’s not cool
about that!

126. Web Workers
Multithreaded JavaScript?? What’s not cool
about that!
Damn you old-ass™ IE!!
Workers can’t access the DOM.
Can you picture some devs trying to use
threads? Yikes!

127. Web Workers
http://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-subworkers

128. Web Workers
Possibilities:
http://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-subworkers

129. Web Workers
Possibilities:
Prefetching and/or caching data for
later use
Code syntax highlighting or other
real-time text formatting
http://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-subworkers

130. Web Workers
Possibilities:
Prefetching and/or caching data for
later use
Code syntax highlighting or other
real-time text formatting
Spell checker
http://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-subworkers

131. Web Workers
Possibilities:
Prefetching and/or caching data for
later use
Code syntax highlighting or other
real-time text formatting
Spell checker
Analyzing video or audio data
http://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-subworkers

132. Web Workers
Possibilities:
Prefetching and/or caching data for
later use
Code syntax highlighting or other
real-time text formatting
Spell checker
Analyzing video or audio data
Background I/O or polling of webservices
http://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-subworkers

133. Web Workers
Possibilities:
Prefetching and/or caching data for
later use
Code syntax highlighting or other
real-time text formatting
Spell checker
Analyzing video or audio data
Background I/O or polling of webservices
Processing large arrays or humungous JSON responses
http://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-subworkers

134. Web Workers
Possibilities:
Prefetching and/or caching data for
later use
Code syntax highlighting or other
real-time text formatting
Spell checker
Analyzing video or audio data
Background I/O or polling of webservices
Processing large arrays or humungous JSON responses
Image filtering in <canvas>
http://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-subworkers

135. Web Workers
Possibilities:
Prefetching and/or caching data for
later use
Code syntax highlighting or other
real-time text formatting
Spell checker
Analyzing video or audio data
Background I/O or polling of webservices
Processing large arrays or humungous JSON responses
Image filtering in <canvas>
Updating many rows of a local web database
http://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-subworkers

136. Web Workers

137. Web Workers
pros:

138. Web Workers
pros:
Could be used with gfx3d, Data Stores, Charts, THE GRID, and
crypto (which does utilize Gears Workers)

139. Web Workers
pros:
Could be used with gfx3d, Data Stores, Charts, THE GRID, and
crypto (which does utilize Gears Workers)
IE10 will use messaging between workers - interesting
possibilities

140. Web Workers
pros:
Could be used with gfx3d, Data Stores, Charts, THE GRID, and
crypto (which does utilize Gears Workers)
IE10 will use messaging between workers - interesting
possibilities
Safari has child Workers

141. Web Workers
pros:
Could be used with gfx3d, Data Stores, Charts, THE GRID, and
crypto (which does utilize Gears Workers)
IE10 will use messaging between workers - interesting
possibilities
Safari has child Workers
cons:

142. Web Workers
pros:
Could be used with gfx3d, Data Stores, Charts, THE GRID, and
crypto (which does utilize Gears Workers)
IE10 will use messaging between workers - interesting
possibilities
Safari has child Workers
cons:
Modern JavaScript performance has minimized the need for
Workers

143. Web Workers
pros:
Could be used with gfx3d, Data Stores, Charts, THE GRID, and
crypto (which does utilize Gears Workers)
IE10 will use messaging between workers - interesting
possibilities
Safari has child Workers
cons:
Modern JavaScript performance has minimized the need for
Workers
JS calc is rarely the bottleneck

144. Web Workers
pros:
Could be used with gfx3d, Data Stores, Charts, THE GRID, and
crypto (which does utilize Gears Workers)
IE10 will use messaging between workers - interesting
possibilities
Safari has child Workers
cons:
Modern JavaScript performance has minimized the need for
Workers
JS calc is rarely the bottleneck
Most devs who understand the need for Workers wouldn't
necessarily need a DojoX class to help them

145. Web Workers
pros:
Could be used with gfx3d, Data Stores, Charts, THE GRID, and
crypto (which does utilize Gears Workers)
IE10 will use messaging between workers - interesting
possibilities
Safari has child Workers
cons:
Modern JavaScript performance has minimized the need for
Workers
JS calc is rarely the bottleneck
Most devs who understand the need for Workers wouldn't
necessarily need a DojoX class to help them
IE9 and older would use timeouts - not very effective
deprecation. Most likely you would want to disable the
feature.

146. Web Workers
pros:
Could be used with gfx3d, Data Stores, Charts, THE GRID, and
crypto (which does utilize Gears Workers)
IE10 will use messaging between workers - interesting
possibilities
Safari has child Workers
cons:
Modern JavaScript performance has minimized the need for
Workers
JS calc is rarely the bottleneck
Most devs who understand the need for Workers wouldn't
necessarily need a DojoX class to help them
IE9 and older would use timeouts - not very effective
deprecation. Most likely you would want to disable the
feature.
The API isn’t hard! You don’t need Dojo!

147. Web Workers

148. Pa ss
Web Workers

149. Geolocation

150. Geolocation

151. Geolocation

152. Geolocation

153. Geolocation
It tells you where you are.

154. Geolocation
It tells you where you are.
The API is:
navigator.geolocation.getCurrentPosition

155. Geolocation
It tells you where you are.
The API is:
navigator.geolocation.getCurrentPosition

156. Geolocation
It tells you where you are.
The API is:
navigator.geolocation.getCurrentPosition
It has to ask your permission to tell you
where you are.
Sometimes it works.
It returns a longitude and latitude.

157. Geolocation
It tells you where you are.
The API is:
navigator.geolocation.getCurrentPosition
It has to ask your permission to tell you
where you are.
Sometimes it works.
It returns a longitude and latitude.
This is where we
are!
38 ° 53.9249' Who o ho o!
-77 ° 2.2610'

158. Geolocation

159. Geolocation
Pros:

160. Geolocation
Pros:
Could be used with dojox.geo

161. Geolocation
Pros:
Could be used with dojox.geo
Cons:

162. Geolocation
Pros:
Could be used with dojox.geo
Cons:
So simple, Dojo is not needed.

163. Geolocation
Pros:
Could be used with dojox.geo
Cons:
So simple, Dojo is not needed.
Third party workarounds may have license issues.

164. Pa ss
Geolocation
Pros:
Could be used with dojox.geo
Cons:
So simple, Dojo is not needed.
Third party workarounds may have license issues.

165. Storage
&
Offline

166. Storage
&
Offline

167. Offline

168. Offline
You can download all the necessary files for
a web app and use it when you’re not
connected.

169. Offline
You can download all the necessary files for
a web app and use it when you’re not
connected.
Most people are always
connected, and most
devs assume their
audience is always
connected. Building an
app so that someone can
use it on an airplane is a
niche case

170. Offline
You can download all the necessary files for
a web app and use it when you’re not
connected.
I do!
Most people are always
connected, and most
devs assume their
audience is always
connected. Building an
app so that someone can
use it on an airplane is a
niche case

171. Storage

172. Storage
Some apps simply need more storage space
than a 4k cookie

173. Storage
Some apps simply need more storage space
than a 4k cookie
Doesn’t get sent with, and overload, server
requests, like cookies

174. Storage
Some apps simply need more storage space
than a 4k cookie
Doesn’t get sent with, and overload, server
requests, like cookies
It’s just a big cookie - with odd security

175. Storage / Offline
http://diveintohtml5.org

176. Storage / Offline
Pros:
http://diveintohtml5.org

177. Storage / Offline
Pros:
DojoX RPC includes offline capabilities
http://diveintohtml5.org

178. Storage / Offline
Pros:
DojoX RPC includes offline capabilities
DojoX Storage gets kudos in Mark Pilgrim’s Dive
Into HTML5, which handles the very complex
disparity between APIs.
http://diveintohtml5.org

179. Storage / Offline
Pros:
DojoX RPC includes offline capabilities
DojoX Storage gets kudos in Mark Pilgrim’s Dive
Into HTML5, which handles the very complex
disparity between APIs.
Cons:
http://diveintohtml5.org

180. Storage / Offline
Pros:
DojoX RPC includes offline capabilities
DojoX Storage gets kudos in Mark Pilgrim’s Dive
Into HTML5, which handles the very complex
disparity between APIs.
Cons:
Flash solutions are not ready until well after page
load.
http://diveintohtml5.org

181. Storage / Offline
Pros:
DojoX RPC includes offline capabilities
DojoX Storage gets kudos in Mark Pilgrim’s Dive
Into HTML5, which handles the very complex
disparity between APIs.
Cons:
Flash solutions are not ready until well after page
load.
IE9 doesn't have Application Cache (offline).
http://diveintohtml5.org

182. Storage / Offline

183. A-
Storage / Offline

184. Web Sockets

185. Web Sockets

186. Web Sockets

187. Web Sockets
The HTML 5 WebSocket specification defines
a single-socket full-duplex (or bi-directional)
connection for pushing and pulling
information between the browser and server.

188. Web Sockets
The HTML 5 WebSocket specification defines
a single-socket full-duplex (or bi-directional)
connection for pushing and pulling
information between the browser and server.
Stop! You’re
turning me on!

189. Web Sockets

190. Web Sockets
WebSockets are not in HTML5 due to
security disagreements.

191. Web Sockets
WebSockets are not in HTML5 due to
security disagreements.

192. Web Sockets

193. A
Web Sockets

194. A
Web Sockets
Pros:

195. A
Web Sockets
Pros:
CometD has been around for years and WebSockets
didn't even make the HTML5 final cut. Nuff said!

196. A
Web Sockets
Pros:
CometD has been around for years and WebSockets
didn't even make the HTML5 final cut. Nuff said!
Cons:

197. A
Web Sockets
Pros:
CometD has been around for years and WebSockets
didn't even make the HTML5 final cut. Nuff said!
Cons:
None! It rocks!

198. Web Audio API

199. Web Audio API

200. Web Audio API

201. Web Audio API
Generate sound effects and tones, even voice
simulations. Modify sound files.

202. Web Audio API
Generate sound effects and tones, even voice
simulations. Modify sound files.
Chrome and Firefox have the only
implementations.

203. Web Audio API
Generate sound effects and tones, even voice
simulations. Modify sound files.
Chrome and Firefox have the only
implementations.
Chrome and Firefox have different APIs.

204. Web Audio API

205. I
(Inco mplete)
Web Audio API

206. I
(Inco mplete)
Web Audio API
Pros:

207. I
(Inco
Web Audio API
mplete)
Pros:
Flash has the capability, but it’s API is even more
raw than the W3C Audio Incubator Group spec.

208. I
(Inco
Web Audio API
mplete)
Pros:
Flash has the capability, but it’s API is even more
raw than the W3C Audio Incubator Group spec.
Cons:

209. I
(Inco
Web Audio API
mplete)
Pros:
Flash has the capability, but it’s API is even more
raw than the W3C Audio Incubator Group spec.
Cons:
Would be a difficult implementation with few real
uses outside of gaming.

210. CSS3

211. CSS3

212. CSS3

213. CSS3
Who doesn’t know what CSS3 is? DUH!! It’s
HAWT

214. CSS3
Who doesn’t know what CSS3 is? DUH!! It’s
HAWT
Browser vendors moving WAY too slow on
some of this.

215. CSS3
Who doesn’t know what CSS3 is? DUH!! It’s
HAWT
Browser vendors moving WAY too slow on
some of this.
How long do you need to agree on how to
draw a gradient?

216. CSS3
Who doesn’t know what CSS3 is? DUH!! It’s
HAWT
Browser vendors moving WAY too slow on
some of this.
How long do you need to agree on how to
draw a gradient?
All those -moz, -webkit, etc prefixes are
really bulking up and polluting my style
sheets

217. CSS3

218. CSS3
Pros:

219. CSS3
Pros:
Less CSS helps with some problems

220. CSS3
Pros:
Less CSS helps with some problems
dojox.css3 transforms rock (Nicola Rizzo)

221. CSS3
Pros:
Less CSS helps with some problems
dojox.css3 transforms rock (Nicola Rizzo)
has() can theoretically help with prefix trouble

222. CSS3
Pros:
Less CSS helps with some problems
dojox.css3 transforms rock (Nicola Rizzo)
has() can theoretically help with prefix trouble
Cons:

223. CSS3
Pros:
Less CSS helps with some problems
dojox.css3 transforms rock (Nicola Rizzo)
has() can theoretically help with prefix trouble
Cons:
has() not helping with prefix trouble (where is it?)

224. CSS3
Pros:
Less CSS helps with some problems
dojox.css3 transforms rock (Nicola Rizzo)
has() can theoretically help with prefix trouble
Cons:
has() not helping with prefix trouble (where is it?)
Old-ass IE™ probably impeded proper CSS3
progress

225. CSS3

226. C+
CSS3

227. Audio Tag

228. Audio Tag

229. Audio Tag

230. Audio Tag
Generate sound effects and tones, even voice
simulations. Modify sound files.

231. Audio Tag
Generate sound effects and tones, even voice
simulations. Modify sound files.
Audio is so 90s! Everyone wants VIDEO now!

232. Audio Tag
Generate sound effects and tones, even voice
simulations. Modify sound files.
Audio is so 90s! Everyone wants VIDEO now!
Firefox doesn’t even support MP3 (but they
support WAV files... WTF??)

233. Audio Tag

234. Audio Tag
Pros:

235. Audio Tag
Pros:
dojox.av.FLAudio plays MP3 files

236. Audio Tag
Pros:
dojox.av.FLAudio plays MP3 files
Cons:

237. Audio Tag
Pros:
dojox.av.FLAudio plays MP3 files
Cons:
...but it’s no where near HTML5 compliant!

238. F
Audio Tag
With the
possibility of
raising the gr
if implemente
1.8!
a de
d in
Pros:
dojox.av.FLAudio plays MP3 files
Cons:
...but it’s no where near HTML5 compliant!

239. Video Tag

240. Video Tag

241. Video Tag

242. Video Tag
Video is so hot, it’s insane.

243. Video Tag
Video is so hot, it’s insane.
Remember ? I
work here

244. Video Tag
Video is so hot, it’s insane.
Open source (free) players are in large
demand.
Remember ? I
work here

245. Video Tag
Video is so hot, it’s insane.
Open source (free) players are in large
demand.
Firefox doesn’t play MP4 files.
Remember ? I
work here

246. Video Tag
Video is so hot, it’s insane.
Open source (free) players are in large
demand.
Firefox doesn’t play MP4 files.
Who loves OGG? Halla!
Remember ? I
work here

247. Video Tag
Video is so hot, it’s insane.
Open source (free) players are in large
demand.
Firefox doesn’t play MP4 files.
Who loves OGG? Halla!
Mozilla jacked with the fullscreen API
crying “SECURITY!”
Remember ? I
work here

248. Video

249. Video

250. Video
In progress!

251. Video
In progress!
A “super” video player that should
handle most formats in most
browsers

252. Video
In progress!
A “super” video player that should
handle most formats in most
browsers
dojox.av.Video
Normalized API
HTML5 Silverlight
Render
Quicktime
Flash

253. Video Tag

254. Video Tag
Pros:

255. Video Tag
Pros:
I’m working on it, so it will be AWESOME!

256. Video Tag
Pros:
I’m working on it, so it will be AWESOME!
Cons:

257. Video Tag
Pros:
I’m working on it, so it will be AWESOME!
Cons:
(to be filled out when I think of something)

258. N GVideo Tag
Pros:
I’m working on it, so it will be AWESOME!
Cons:
(to be filled out when I think of something)

259. N GVideo Tag
“No gra de”,
not “no go o d.”
Pros:
I’m working on it, so it will be AWESOME!
Cons:
(to be filled out when I think of something)

260. Final Grade

261. Final Grade
B +

262. Final Word
Our most precious commodity is...
developer brain cells.
- Kris Zyp