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.
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.
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.
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
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!
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
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!
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
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!
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;
}
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.
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!
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
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!
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'
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
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
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
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!
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.
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.
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
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
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??)
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!
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
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