Dojo &                  HTML5By Mike WilcoxSeptember, 2011
Mike W ilcox
Mike W ilcox
Mike W ilcox      AJAX CSS3     AIR   AS3   HTML5             PHP     MySQL             DojoFlash Video
Mike W ilcox       Co m mitter!      AJAX CSS3       AIR   AS3   HTML5             PHP     MySQL             DojoFlash Video
Mike W ilcox       Co m mitter!      AJAX CSS3       AIR   AS3   HTML5             PHP     MySQL             DojoFlash Vid...
Mike W ilcox       Co m mitter!                            Natch!      AJAX CSS3       AIR   AS3   HTML5             PHP  ...
Mike W ilcox       Co m mitter!                            Natch!                                      @clubajax      AJAX...
Is Dojo HTML5 Ready?
Is Dojo HTML5 Ready?
Is Dojo HTML5 Ready?
Is Dojo HTML5 Ready?            HTML5 makes a developer’s job            easier by specifying uniform APIs            acro...
Is Dojo HTML5 Ready?            HTML5 makes a developer’s job            easier by specifying uniform APIs            acro...
Is Dojo HTML5 Ready?            HTML5 makes a developer’s job            easier by specifying uniform APIs            acro...
Is Dojo HTML5 Ready?            HTML5 makes a developer’s job            easier by specifying uniform APIs            acro...
Is Dojo HTML5 Ready?            HTML5 makes a developer’s job            easier by specifying uniform APIs            acro...
Is Dojo HTML5 Ready?            HTML5 makes a developer’s job            easier by specifying uniform APIs            acro...
Is Dojo HTML5 Ready?            HTML5 makes a developer’s job            easier by specifying uniform APIs            acro...
The Top HTML5 Features
The Top HTML5 Features1. Semantic Elements2.Forms3.Canvas / SVG4.WebGL / Canvas 3D5.Web Workers6.Geolocation7.Storage / Of...
The Top HTML5 Features1. Semantic Elements2.Forms3.Canvas / SVG4.WebGL / Canvas 3D5.Web Workers6.Geolocation7.Storage / Of...
Semantic Elements
Semantic Elements          Don’t be anti-            semantic!
Semantic Elements
Semantic Elements
Semantic Elements       Fun new tag names, like: section, header,       footer, menu, etc.
Semantic Elements       Fun new tag names, like: section, header,       footer, menu, etc.       Allows for nested hgroups...
Semantic Elements       Fun new tag names, like: section, header,       footer, menu, etc.       Allows for nested hgroups...
Semantic Elements       Fun new tag names, like: section, header,       footer, menu, etc.       Allows for nested hgroups...
Semantic Elements       Fun new tag names, like: section, header,       footer, menu, etc.       Allows for nested hgroups...
Semantic Elements       Fun new tag names, like: section, header,       footer, menu, etc.       Allows for nested hgroups...
Semantic Elements
Semantic Elements Experiment: Dijit BorderContainer, in markup with HTML5 tags
Semantic Elements
Semantic Elements
Semantic Elements                 Works in               Firefox! Yay!
Semantic Elements                      Works in                    Firefox! Yay!        IE8...     Not so much.
Semantic Elements                      Works in                    Firefox! Yay!        IE8...     Not so much.
Semantic Elements
Semantic Elements Experiment: Simple custom widget. Minimal HTML5 tags.
Semantic Elements Experiment: Simple custom widget. Minimal HTML5 tags.Keepin’ it simple!
Semantic Elements Experiment: Simple custom widget. Minimal HTML5 tags.Keepin’ it simple!
Semantic Elements Experiment: Simple custom widget. Minimal HTML5 tags.Keepin’ it simple!
Semantic Elements
D -Semantic Elements
D -        Semantic ElementsPros:
D -        Semantic ElementsPros:  Parser handles some parent tags in the page body
D -        Semantic ElementsPros:  Parser handles some parent tags in the page body  There *is* a ticket for this in Trac.
D -        Semantic ElementsPros:  Parser handles some parent tags in the page body  There *is* a ticket for this in Trac....
D -        Semantic ElementsPros:  Parser handles some parent tags in the page body  There *is* a ticket for this in Trac....
Forms
Forms
Forms
Forms
Forms        Placeholder text, validation, input widgets,        uploaders, etc.
Forms        Placeholder text, validation, input widgets,        uploaders, etc.        The second thing people think of f...
Forms        Placeholder text, validation, input widgets,        uploaders, etc.        The second thing people think of f...
Forms        Placeholder text, validation, input widgets,        uploaders, etc.        The second thing people think of f...
FormsThe following screenshots are an example of an HTML5forms sub-set.                http://www.miketaylr.com/code/html5...
FormsNote the difference between Macand Windows... on the same browser.
Forms                                     Toggle th                                                   ese    two          ...
FormsWell, Firefox always seems to lag a little behind...
FormsThe mighty Chrome! Hasn’t done a lot here...
FormsNor Safari....
FormsHey! I thought IE9 was 99% HTML5 compliant! They saidthey were.
Dijit FormsDijit Forms Theme Tester in IE8 on Windows
Dijit FormsDijit Forms Theme Tester in Firefox on Mac OSX 10
Dijit FormsDijit Forms Theme Tester in Firefox on Mac OSX 10                                        Toggle th             ...
DojoX Uploader
DojoX Uploader
DojoX Uploader
DojoX Uploader      The Uploader successfully handles custom      uploading cross browser with a standard,      HTML5-frie...
DojoX Uploader      The Uploader successfully handles custom      uploading cross browser with a standard,      HTML5-frie...
DojoX Uploader      The Uploader successfully handles custom      uploading cross browser with a standard,      HTML5-frie...
DojoX Uploader      The Uploader successfully handles custom      uploading cross browser with a standard,      HTML5-frie...
Forms
AForms
Pros:        A        Forms
Pros:              A  Forms  Pretty much has has the HTML5 Forms spec  covered for years
Pros:               A  Forms  Pretty much has has the HTML5 Forms spec  covered for years  Consistent look cross browser (...
Pros:               A  Forms  Pretty much has has the HTML5 Forms spec  covered for years  Consistent look cross browser (...
Pros:               A  Forms  Pretty much has has the HTML5 Forms spec  covered for years  Consistent look cross browser (...
Pros:               A  Forms  Pretty much has has the HTML5 Forms spec  covered for years  Consistent look cross browser (...
Pros:               A  Forms  Pretty much has has the HTML5 Forms spec  covered for years  Consistent look cross browser (...
Canvas / SVG
Canvas / SVG
Canvas / SVG
Canvas / SVG
Canvas / SVG Canvas / Raster: Grid of pixels
Canvas / SVG Canvas / Raster: Grid of pixels SVG / Vector: Mathematical representation of a shape
Canvas / SVG Canvas / Raster: Grid of pixels SVG / Vector: Mathematical representation of a shape
Canvas / SVG Canvas / Raster: Grid of pixels SVG / Vector: Mathematical representation of a shape                         ...
Canvas / SVG Canvas / Raster: Grid of pixels SVG / Vector: Mathematical representation of a shape                         ...
DojoX GFX
DojoX GFX            meow!
DojoX GFXdojox.gfx (GFX) is a cross-platform vector graphics APIthat loosely follows SVG as the underlying model. Itdetect...
DojoX GFXdojox.gfx (GFX) is a cross-platform vector graphics APIthat loosely follows SVG as the underlying model. Itdetect...
Canvas / SVG
A +Canvas / SVG
APros:         +        Canvas / SVG
APros:              +           Canvas / SVG  API works with Canvas, SVG, Silverlight and VML
APros:              +           Canvas / SVG  API works with Canvas, SVG, Silverlight and VMLCons:
APros:              +           Canvas / SVG  API works with Canvas, SVG, Silverlight and VMLCons:  Close, but API is non-...
WebGL / Canvas 3D
WebGL / Canvas 3D
WebGL / Canvas 3D
WebGL / Canvas 3D  WebGL is a cross-platform API used to create 3D  graphics in a browser. Because it runs in the HTML5  C...
WebGL / Canvas 3D  WebGL is a cross-platform API used to create 3D  graphics in a browser. Because it runs in the HTML5  C...
WebGL / Canvas 3D  WebGL is a cross-platform API used to create 3D  graphics in a browser. Because it runs in the HTML5  C...
Because thecode looks likethat!
function init(){    // Initialize    var gl = initWebGL("example", "vshader", "fshader",            [ "vNormal", "vColor",...
WebGL / Canvas 3D
Pa ssWebGL / Canvas 3D
Pa ss        WebGL / Canvas 3DPros:
Pa ss        WebGL / Canvas 3DPros:  Existing libraries: C3DL, CopperLicht , EnergizeGL,  GammaJS, GLGE, GTW, O3D, OSG.JS,...
Pa ss        WebGL / Canvas 3DPros:  Existing libraries: C3DL, CopperLicht , EnergizeGL,  GammaJS, GLGE, GTW, O3D, OSG.JS,...
Pa ss        WebGL / Canvas 3DPros:  Existing libraries: C3DL, CopperLicht , EnergizeGL,  GammaJS, GLGE, GTW, O3D, OSG.JS,...
Web Workers
Web Workers
Web Workers
Web Workers
Web Workers     Multithreaded JavaScript?? What’s not cool     about that!
Web Workers     Multithreaded JavaScript?? What’s not cool     about that!
Web Workers     Multithreaded JavaScript?? What’s not cool     about that!       Damn you old-ass™ IE!!       Workers can’...
Web Workershttp://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-subworkers
Web WorkersPossibilities:http://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-subworkers
Web WorkersPossibilities:  Prefetching and/or caching data for  later use  Code syntax highlighting or other  real-time te...
Web WorkersPossibilities:  Prefetching and/or caching data for  later use  Code syntax highlighting or other  real-time te...
Web WorkersPossibilities:  Prefetching and/or caching data for  later use  Code syntax highlighting or other  real-time te...
Web WorkersPossibilities:  Prefetching and/or caching data for  later use  Code syntax highlighting or other  real-time te...
Web WorkersPossibilities:  Prefetching and/or caching data for  later use  Code syntax highlighting or other  real-time te...
Web WorkersPossibilities:  Prefetching and/or caching data for  later use  Code syntax highlighting or other  real-time te...
Web WorkersPossibilities:  Prefetching and/or caching data for  later use  Code syntax highlighting or other  real-time te...
Web Workers
Web Workers pros:
Web Workers pros:    Could be used with gfx3d, Data Stores, Charts, THE GRID, and    crypto (which does utilize Gears Work...
Web Workers pros:    Could be used with gfx3d, Data Stores, Charts, THE GRID, and    crypto (which does utilize Gears Work...
Web Workers pros:    Could be used with gfx3d, Data Stores, Charts, THE GRID, and    crypto (which does utilize Gears Work...
Web Workers pros:    Could be used with gfx3d, Data Stores, Charts, THE GRID, and    crypto (which does utilize Gears Work...
Web Workers pros:    Could be used with gfx3d, Data Stores, Charts, THE GRID, and    crypto (which does utilize Gears Work...
Web Workers pros:    Could be used with gfx3d, Data Stores, Charts, THE GRID, and    crypto (which does utilize Gears Work...
Web Workers pros:    Could be used with gfx3d, Data Stores, Charts, THE GRID, and    crypto (which does utilize Gears Work...
Web Workers pros:    Could be used with gfx3d, Data Stores, Charts, THE GRID, and    crypto (which does utilize Gears Work...
Web Workers pros:    Could be used with gfx3d, Data Stores, Charts, THE GRID, and    crypto (which does utilize Gears Work...
Web Workers
Pa ssWeb Workers
Geolocation
Geolocation
Geolocation
Geolocation
Geolocation      It tells you where you are.
Geolocation      It tells you where you are.      The API is:      navigator.geolocation.getCurrentPosition
Geolocation      It tells you where you are.      The API is:      navigator.geolocation.getCurrentPosition
Geolocation      It tells you where you are.      The API is:      navigator.geolocation.getCurrentPosition        It has ...
Geolocation         It tells you where you are.         The API is:         navigator.geolocation.getCurrentPosition      ...
Geolocation
GeolocationPros:
GeolocationPros:  Could be used with dojox.geo
GeolocationPros:  Could be used with dojox.geoCons:
GeolocationPros:  Could be used with dojox.geoCons:  So simple, Dojo is not needed.
GeolocationPros:  Could be used with dojox.geoCons:  So simple, Dojo is not needed.  Third party workarounds may have lice...
Pa ss             GeolocationPros:  Could be used with dojox.geoCons:  So simple, Dojo is not needed.  Third party workaro...
Storage   & Offline
Storage   & Offline
Offline
Offline          You can download all the necessary files for          a web app and use it when you’re not          connec...
Offline          You can download all the necessary files for          a web app and use it when you’re not          connec...
Offline          You can download all the necessary files for          a web app and use it when you’re not          connec...
Storage
Storage      Some apps simply need more storage space      than a 4k cookie
Storage      Some apps simply need more storage space      than a 4k cookie      Doesn’t get sent with, and overload, serv...
Storage      Some apps simply need more storage space      than a 4k cookie      Doesn’t get sent with, and overload, serv...
Storage / Offline    http://diveintohtml5.org
Storage / OfflinePros:            http://diveintohtml5.org
Storage / OfflinePros:  DojoX RPC includes offline capabilities                 http://diveintohtml5.org
Storage / OfflinePros:  DojoX RPC includes offline capabilities  DojoX Storage gets kudos in Mark Pilgrim’s Dive  Into HTML...
Storage / OfflinePros:  DojoX RPC includes offline capabilities  DojoX Storage gets kudos in Mark Pilgrim’s Dive  Into HTML...
Storage / OfflinePros:  DojoX RPC includes offline capabilities  DojoX Storage gets kudos in Mark Pilgrim’s Dive  Into HTML...
Storage / OfflinePros:  DojoX RPC includes offline capabilities  DojoX Storage gets kudos in Mark Pilgrim’s Dive  Into HTML...
Storage / Offline
A-Storage / Offline
Web Sockets
Web Sockets
Web Sockets
Web Sockets      The HTML 5 WebSocket specification defines      a single-socket full-duplex (or bi-directional)      connec...
Web Sockets      The HTML 5 WebSocket specification defines      a single-socket full-duplex (or bi-directional)      connec...
Web Sockets
Web Sockets      WebSockets are not in HTML5 due to      security disagreements.
Web Sockets      WebSockets are not in HTML5 due to      security disagreements.
Web Sockets
AWeb Sockets
A        Web SocketsPros:
A           Web SocketsPros:  CometD has been around for years and WebSockets  didnt even make the HTML5 final cut. Nuff sa...
A           Web SocketsPros:  CometD has been around for years and WebSockets  didnt even make the HTML5 final cut. Nuff sa...
A             Web SocketsPros:  CometD has been around for years and WebSockets  didnt even make the HTML5 final cut. Nuff ...
Web Audio API
Web Audio API
Web Audio API
Web Audio API      Generate sound effects and tones, even voice      simulations. Modify sound files.
Web Audio API      Generate sound effects and tones, even voice      simulations. Modify sound files.     Chrome and Firefo...
Web Audio API      Generate sound effects and tones, even voice      simulations. Modify sound files.     Chrome and Firefo...
Web Audio API
I    (Inco mplete)Web Audio API
I            (Inco mplete)        Web Audio APIPros:
I                    (Inco          Web Audio API                          mplete)Pros:  Flash has the capability, but it’...
I                    (Inco          Web Audio API                          mplete)Pros:  Flash has the capability, but it’...
I                    (Inco          Web Audio API                          mplete)Pros:  Flash has the capability, but it’...
CSS3
CSS3
CSS3
CSS3       Who doesn’t know what CSS3 is? DUH!! It’s       HAWT
CSS3       Who doesn’t know what CSS3 is? DUH!! It’s       HAWT       Browser vendors moving WAY too slow on       some of...
CSS3       Who doesn’t know what CSS3 is? DUH!! It’s       HAWT       Browser vendors moving WAY too slow on       some of...
CSS3       Who doesn’t know what CSS3 is? DUH!! It’s       HAWT       Browser vendors moving WAY too slow on       some of...
CSS3
CSS3 Pros:
CSS3 Pros:   Less CSS helps with some problems
CSS3 Pros:   Less CSS helps with some problems   dojox.css3 transforms rock (Nicola Rizzo)
CSS3 Pros:   Less CSS helps with some problems   dojox.css3 transforms rock (Nicola Rizzo)   has() can theoretically help ...
CSS3 Pros:   Less CSS helps with some problems   dojox.css3 transforms rock (Nicola Rizzo)   has() can theoretically help ...
CSS3 Pros:   Less CSS helps with some problems   dojox.css3 transforms rock (Nicola Rizzo)   has() can theoretically help ...
CSS3 Pros:   Less CSS helps with some problems   dojox.css3 transforms rock (Nicola Rizzo)   has() can theoretically help ...
CSS3
C+CSS3
Audio Tag
Audio Tag
Audio Tag
Audio Tag      Generate sound effects and tones, even voice      simulations. Modify sound files.
Audio Tag      Generate sound effects and tones, even voice      simulations. Modify sound files.     Audio is so 90s! Ever...
Audio Tag      Generate sound effects and tones, even voice      simulations. Modify sound files.     Audio is so 90s! Ever...
Audio Tag
Audio TagPros:
Audio TagPros:  dojox.av.FLAudio plays MP3 files
Audio TagPros:  dojox.av.FLAudio plays MP3 filesCons:
Audio TagPros:  dojox.av.FLAudio plays MP3 filesCons:  ...but it’s no where near HTML5 compliant!
F               Audio Tag                                            With the                                          pos...
Video Tag
Video Tag
Video Tag
Video Tag      Video is so hot, it’s insane.
Video Tag      Video is so hot, it’s insane.                       Remember ? I                        work here
Video Tag      Video is so hot, it’s insane.      Open source (free) players are in large      demand.                    ...
Video Tag      Video is so hot, it’s insane.      Open source (free) players are in large      demand.     Firefox doesn’t...
Video Tag      Video is so hot, it’s insane.      Open source (free) players are in large      demand.     Firefox doesn’t...
Video Tag      Video is so hot, it’s insane.      Open source (free) players are in large      demand.     Firefox doesn’t...
Video
Video
VideoIn progress!
VideoIn progress! A “super” video player that should handle most formats in most browsers
VideoIn progress! A “super” video player that should handle most formats in most browsers   dojox.av.Video                ...
Video Tag
Video TagPros:
Video TagPros:  I’m working on it, so it will be AWESOME!
Video TagPros:  I’m working on it, so it will be AWESOME!Cons:
Video TagPros:  I’m working on it, so it will be AWESOME!Cons:  (to be filled out when I think of something)
N GVideo TagPros:  I’m working on it, so it will be AWESOME!Cons:  (to be filled out when I think of something)
N GVideo Tag                                                  “No gra de”,                                                ...
Final Grade
Final Grade         B +
Final WordOur most precious commodity is...developer brain cells.                                    - Kris Zyp
Dojo & HTML5
Dojo & HTML5
Dojo & HTML5
Dojo & HTML5
Dojo & HTML5
Upcoming SlideShare
Loading in...5
×

Dojo & HTML5

8,880

Published on

Dojo has Video and Audio and GFX, so it must be HTML5 compliant, no? Not so fast! We'll look over some core pieces and grade Dojo on how well it holds up!

Published in: Technology, Design
1 Comment
1 Like
Statistics
Notes
  • can't download?why?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
8,880
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
141
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Dojo & HTML5

    1. 1. Dojo & HTML5By Mike WilcoxSeptember, 2011
    2. 2. Mike W ilcox
    3. 3. Mike W ilcox
    4. 4. Mike W ilcox AJAX CSS3 AIR AS3 HTML5 PHP MySQL DojoFlash Video
    5. 5. Mike W ilcox Co m mitter! AJAX CSS3 AIR AS3 HTML5 PHP MySQL DojoFlash Video
    6. 6. Mike W ilcox Co m mitter! AJAX CSS3 AIR AS3 HTML5 PHP MySQL DojoFlash Video Works there as Director of Technology.
    7. 7. Mike W ilcox Co m mitter! Natch! AJAX CSS3 AIR AS3 HTML5 PHP MySQL DojoFlash Video Works there as Director of Technology.
    8. 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. 9. Is Dojo HTML5 Ready?
    10. 10. Is Dojo HTML5 Ready?
    11. 11. Is Dojo HTML5 Ready?
    12. 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. 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. 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. 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. 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. 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. 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. 19. The Top HTML5 Features
    20. 20. The Top HTML5 Features1. Semantic Elements2.Forms3.Canvas / SVG4.WebGL / Canvas 3D5.Web Workers6.Geolocation7.Storage / Offline8.WebSockets9.Web Audio API10.CSS3 / WOFF11.Audio12.Video
    21. 21. The Top HTML5 Features1. Semantic Elements2.Forms3.Canvas / SVG4.WebGL / Canvas 3D5.Web Workers6.Geolocation7.Storage / Offline8.WebSockets9.Web Audio API10.CSS3 / WOFF11.Audio12.Video
    22. 22. Semantic Elements
    23. 23. Semantic Elements Don’t be anti- semantic!
    24. 24. Semantic Elements
    25. 25. Semantic Elements
    26. 26. Semantic Elements Fun new tag names, like: section, header, footer, menu, etc.
    27. 27. Semantic Elements Fun new tag names, like: section, header, footer, menu, etc. Allows for nested hgroups, multiple h1 tags in a page
    28. 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. 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. 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. 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. 32. Semantic Elements
    33. 33. Semantic Elements Experiment: Dijit BorderContainer, in markup with HTML5 tags
    34. 34. Semantic Elements
    35. 35. Semantic Elements
    36. 36. Semantic Elements Works in Firefox! Yay!
    37. 37. Semantic Elements Works in Firefox! Yay! IE8... Not so much.
    38. 38. Semantic Elements Works in Firefox! Yay! IE8... Not so much.
    39. 39. Semantic Elements
    40. 40. Semantic Elements Experiment: Simple custom widget. Minimal HTML5 tags.
    41. 41. Semantic Elements Experiment: Simple custom widget. Minimal HTML5 tags.Keepin’ it simple!
    42. 42. Semantic Elements Experiment: Simple custom widget. Minimal HTML5 tags.Keepin’ it simple!
    43. 43. Semantic Elements Experiment: Simple custom widget. Minimal HTML5 tags.Keepin’ it simple!
    44. 44. Semantic Elements
    45. 45. D -Semantic Elements
    46. 46. D - Semantic ElementsPros:
    47. 47. D - Semantic ElementsPros: Parser handles some parent tags in the page body
    48. 48. D - Semantic ElementsPros: Parser handles some parent tags in the page body There *is* a ticket for this in Trac.
    49. 49. D - Semantic ElementsPros: Parser handles some parent tags in the page body There *is* a ticket for this in Trac.Cons:
    50. 50. D - Semantic ElementsPros: Parser handles some parent tags in the page body There *is* a ticket for this in Trac.Cons: Right now, it blows up.
    51. 51. Forms
    52. 52. Forms
    53. 53. Forms
    54. 54. Forms
    55. 55. Forms Placeholder text, validation, input widgets, uploaders, etc.
    56. 56. Forms Placeholder text, validation, input widgets, uploaders, etc. The second thing people think of for HTML5!
    57. 57. Forms Placeholder text, validation, input widgets, uploaders, etc. The second thing people think of for HTML5!
    58. 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. 59. FormsThe following screenshots are an example of an HTML5forms sub-set. http://www.miketaylr.com/code/html5-forms-ui-support.html
    60. 60. FormsNote the difference between Macand Windows... on the same browser.
    61. 61. Forms Toggle th ese two sli des bacNote the difference between Mac k an d forth!and Windows... on the same browser.
    62. 62. FormsWell, Firefox always seems to lag a little behind...
    63. 63. FormsThe mighty Chrome! Hasn’t done a lot here...
    64. 64. FormsNor Safari....
    65. 65. FormsHey! I thought IE9 was 99% HTML5 compliant! They saidthey were.
    66. 66. Dijit FormsDijit Forms Theme Tester in IE8 on Windows
    67. 67. Dijit FormsDijit Forms Theme Tester in Firefox on Mac OSX 10
    68. 68. Dijit FormsDijit Forms Theme Tester in Firefox on Mac OSX 10 Toggle th ese two sli des bac k an d for th!
    69. 69. DojoX Uploader
    70. 70. DojoX Uploader
    71. 71. DojoX Uploader
    72. 72. DojoX Uploader The Uploader successfully handles custom uploading cross browser with a standard, HTML5-friendly API.
    73. 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. 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. 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. 76. Forms
    77. 77. AForms
    78. 78. Pros: A Forms
    79. 79. Pros: A Forms Pretty much has has the HTML5 Forms spec covered for years
    80. 80. Pros: A Forms Pretty much has has the HTML5 Forms spec covered for years Consistent look cross browser (better than HTML5!)
    81. 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. 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-typeCons:
    83. 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-typeCons: Compliance may not be quite 100%
    84. 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-typeCons: Compliance may not be quite 100% No Getters and Setters - custom API
    85. 85. Canvas / SVG
    86. 86. Canvas / SVG
    87. 87. Canvas / SVG
    88. 88. Canvas / SVG
    89. 89. Canvas / SVG Canvas / Raster: Grid of pixels
    90. 90. Canvas / SVG Canvas / Raster: Grid of pixels SVG / Vector: Mathematical representation of a shape
    91. 91. Canvas / SVG Canvas / Raster: Grid of pixels SVG / Vector: Mathematical representation of a shape
    92. 92. Canvas / SVG Canvas / Raster: Grid of pixels SVG / Vector: Mathematical representation of a shape Not in old-ass™ IE!
    93. 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. 94. DojoX GFX
    95. 95. DojoX GFX meow!
    96. 96. DojoX GFXdojox.gfx (GFX) is a cross-platform vector graphics APIthat loosely follows SVG as the underlying model. Itdetects the best graphics engine implementation foryour browser and uses that to render the graphics. meow!
    97. 97. DojoX GFXdojox.gfx (GFX) is a cross-platform vector graphics APIthat loosely follows SVG as the underlying model. Itdetects the best graphics engine implementation foryour browser and uses that to render the graphics. meow!dojox.gfx Normalized API SVG VML Render Canvas Silverlight
    98. 98. Canvas / SVG
    99. 99. A +Canvas / SVG
    100. 100. APros: + Canvas / SVG
    101. 101. APros: + Canvas / SVG API works with Canvas, SVG, Silverlight and VML
    102. 102. APros: + Canvas / SVG API works with Canvas, SVG, Silverlight and VMLCons:
    103. 103. APros: + Canvas / SVG API works with Canvas, SVG, Silverlight and VMLCons: Close, but API is non-standard
    104. 104. WebGL / Canvas 3D
    105. 105. WebGL / Canvas 3D
    106. 106. WebGL / Canvas 3D
    107. 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. 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. 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!
    110. 110. Because thecode looks likethat!
    111. 111. 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;}
    112. 112. WebGL / Canvas 3D
    113. 113. Pa ssWebGL / Canvas 3D
    114. 114. Pa ss WebGL / Canvas 3DPros:
    115. 115. Pa ss WebGL / Canvas 3DPros: Existing libraries: C3DL, CopperLicht , EnergizeGL, GammaJS, GLGE, GTW, O3D, OSG.JS, SceneJS, SpiderGL, TDL, Three.js and X3DOM
    116. 116. Pa ss WebGL / Canvas 3DPros: Existing libraries: C3DL, CopperLicht , EnergizeGL, GammaJS, GLGE, GTW, O3D, OSG.JS, SceneJS, SpiderGL, TDL, Three.js and X3DOMCons:
    117. 117. Pa ss WebGL / Canvas 3DPros: Existing libraries: C3DL, CopperLicht , EnergizeGL, GammaJS, GLGE, GTW, O3D, OSG.JS, SceneJS, SpiderGL, TDL, Three.js and X3DOMCons: There is a DojoX 3Dgfx, but it’s not WebGL.
    118. 118. Web Workers
    119. 119. Web Workers
    120. 120. Web Workers
    121. 121. Web Workers
    122. 122. Web Workers Multithreaded JavaScript?? What’s not cool about that!
    123. 123. Web Workers Multithreaded JavaScript?? What’s not cool about that!
    124. 124. 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!
    125. 125. Web Workershttp://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-subworkers
    126. 126. Web WorkersPossibilities:http://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-subworkers
    127. 127. Web WorkersPossibilities: Prefetching and/or caching data for later use Code syntax highlighting or other real-time text formattinghttp://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-subworkers
    128. 128. Web WorkersPossibilities: Prefetching and/or caching data for later use Code syntax highlighting or other real-time text formatting Spell checkerhttp://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-subworkers
    129. 129. Web WorkersPossibilities: Prefetching and/or caching data for later use Code syntax highlighting or other real-time text formatting Spell checker Analyzing video or audio datahttp://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-subworkers
    130. 130. Web WorkersPossibilities: 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 webserviceshttp://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-subworkers
    131. 131. Web WorkersPossibilities: 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 responseshttp://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-subworkers
    132. 132. Web WorkersPossibilities: 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
    133. 133. Web WorkersPossibilities: 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 databasehttp://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-subworkers
    134. 134. Web Workers
    135. 135. Web Workers pros:
    136. 136. Web Workers pros: Could be used with gfx3d, Data Stores, Charts, THE GRID, and crypto (which does utilize Gears Workers)
    137. 137. 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
    138. 138. 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
    139. 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 Safari has child Workers cons:
    140. 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 cons: Modern JavaScript performance has minimized the need for Workers
    141. 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: Modern JavaScript performance has minimized the need for Workers JS calc is rarely the bottleneck
    142. 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 JS calc is rarely the bottleneck Most devs who understand the need for Workers wouldnt necessarily need a DojoX class to help them
    143. 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 Most devs who understand the need for Workers wouldnt 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.
    144. 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 wouldnt 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!
    145. 145. Web Workers
    146. 146. Pa ssWeb Workers
    147. 147. Geolocation
    148. 148. Geolocation
    149. 149. Geolocation
    150. 150. Geolocation
    151. 151. Geolocation It tells you where you are.
    152. 152. Geolocation It tells you where you are. The API is: navigator.geolocation.getCurrentPosition
    153. 153. Geolocation It tells you where you are. The API is: navigator.geolocation.getCurrentPosition
    154. 154. 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.
    155. 155. 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
    156. 156. Geolocation
    157. 157. GeolocationPros:
    158. 158. GeolocationPros: Could be used with dojox.geo
    159. 159. GeolocationPros: Could be used with dojox.geoCons:
    160. 160. GeolocationPros: Could be used with dojox.geoCons: So simple, Dojo is not needed.
    161. 161. GeolocationPros: Could be used with dojox.geoCons: So simple, Dojo is not needed. Third party workarounds may have license issues.
    162. 162. Pa ss GeolocationPros: Could be used with dojox.geoCons: So simple, Dojo is not needed. Third party workarounds may have license issues.
    163. 163. Storage & Offline
    164. 164. Storage & Offline
    165. 165. Offline
    166. 166. Offline You can download all the necessary files for a web app and use it when you’re not connected.
    167. 167. 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
    168. 168. 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
    169. 169. Storage
    170. 170. Storage Some apps simply need more storage space than a 4k cookie
    171. 171. Storage Some apps simply need more storage space than a 4k cookie Doesn’t get sent with, and overload, server requests, like cookies
    172. 172. 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
    173. 173. Storage / Offline http://diveintohtml5.org
    174. 174. Storage / OfflinePros: http://diveintohtml5.org
    175. 175. Storage / OfflinePros: DojoX RPC includes offline capabilities http://diveintohtml5.org
    176. 176. Storage / OfflinePros: 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
    177. 177. Storage / OfflinePros: 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
    178. 178. Storage / OfflinePros: 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
    179. 179. Storage / OfflinePros: 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 doesnt have Application Cache (offline). http://diveintohtml5.org
    180. 180. Storage / Offline
    181. 181. A-Storage / Offline
    182. 182. Web Sockets
    183. 183. Web Sockets
    184. 184. Web Sockets
    185. 185. 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.
    186. 186. 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!
    187. 187. Web Sockets
    188. 188. Web Sockets WebSockets are not in HTML5 due to security disagreements.
    189. 189. Web Sockets WebSockets are not in HTML5 due to security disagreements.
    190. 190. Web Sockets
    191. 191. AWeb Sockets
    192. 192. A Web SocketsPros:
    193. 193. A Web SocketsPros: CometD has been around for years and WebSockets didnt even make the HTML5 final cut. Nuff said!
    194. 194. A Web SocketsPros: CometD has been around for years and WebSockets didnt even make the HTML5 final cut. Nuff said!Cons:
    195. 195. A Web SocketsPros: CometD has been around for years and WebSockets didnt even make the HTML5 final cut. Nuff said!Cons: None! It rocks!
    196. 196. Web Audio API
    197. 197. Web Audio API
    198. 198. Web Audio API
    199. 199. Web Audio API Generate sound effects and tones, even voice simulations. Modify sound files.
    200. 200. Web Audio API Generate sound effects and tones, even voice simulations. Modify sound files. Chrome and Firefox have the only implementations.
    201. 201. 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.
    202. 202. Web Audio API
    203. 203. I (Inco mplete)Web Audio API
    204. 204. I (Inco mplete) Web Audio APIPros:
    205. 205. 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.
    206. 206. 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:
    207. 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.Cons: Would be a difficult implementation with few real uses outside of gaming.
    208. 208. CSS3
    209. 209. CSS3
    210. 210. CSS3
    211. 211. CSS3 Who doesn’t know what CSS3 is? DUH!! It’s HAWT
    212. 212. CSS3 Who doesn’t know what CSS3 is? DUH!! It’s HAWT Browser vendors moving WAY too slow on some of this.
    213. 213. 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?
    214. 214. 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
    215. 215. CSS3
    216. 216. CSS3 Pros:
    217. 217. CSS3 Pros: Less CSS helps with some problems
    218. 218. CSS3 Pros: Less CSS helps with some problems dojox.css3 transforms rock (Nicola Rizzo)
    219. 219. CSS3 Pros: Less CSS helps with some problems dojox.css3 transforms rock (Nicola Rizzo) has() can theoretically help with prefix trouble
    220. 220. CSS3 Pros: Less CSS helps with some problems dojox.css3 transforms rock (Nicola Rizzo) has() can theoretically help with prefix trouble Cons:
    221. 221. 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?)
    222. 222. 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
    223. 223. CSS3
    224. 224. C+CSS3
    225. 225. Audio Tag
    226. 226. Audio Tag
    227. 227. Audio Tag
    228. 228. Audio Tag Generate sound effects and tones, even voice simulations. Modify sound files.
    229. 229. Audio Tag Generate sound effects and tones, even voice simulations. Modify sound files. Audio is so 90s! Everyone wants VIDEO now!
    230. 230. 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??)
    231. 231. Audio Tag
    232. 232. Audio TagPros:
    233. 233. Audio TagPros: dojox.av.FLAudio plays MP3 files
    234. 234. Audio TagPros: dojox.av.FLAudio plays MP3 filesCons:
    235. 235. Audio TagPros: dojox.av.FLAudio plays MP3 filesCons: ...but it’s no where near HTML5 compliant!
    236. 236. F Audio Tag With the possibility of raising the gr if implemente 1.8! a de d inPros: dojox.av.FLAudio plays MP3 filesCons: ...but it’s no where near HTML5 compliant!
    237. 237. Video Tag
    238. 238. Video Tag
    239. 239. Video Tag
    240. 240. Video Tag Video is so hot, it’s insane.
    241. 241. Video Tag Video is so hot, it’s insane. Remember ? I work here
    242. 242. Video Tag Video is so hot, it’s insane. Open source (free) players are in large demand. Remember ? I work here
    243. 243. 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
    244. 244. 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
    245. 245. 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
    246. 246. Video
    247. 247. Video
    248. 248. VideoIn progress!
    249. 249. VideoIn progress! A “super” video player that should handle most formats in most browsers
    250. 250. VideoIn progress! A “super” video player that should handle most formats in most browsers dojox.av.Video Normalized API HTML5 Silverlight Render Quicktime Flash
    251. 251. Video Tag
    252. 252. Video TagPros:
    253. 253. Video TagPros: I’m working on it, so it will be AWESOME!
    254. 254. Video TagPros: I’m working on it, so it will be AWESOME!Cons:
    255. 255. Video TagPros: I’m working on it, so it will be AWESOME!Cons: (to be filled out when I think of something)
    256. 256. N GVideo TagPros: I’m working on it, so it will be AWESOME!Cons: (to be filled out when I think of something)
    257. 257. 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)
    258. 258. Final Grade
    259. 259. Final Grade B +
    260. 260. Final WordOur most precious commodity is...developer brain cells. - Kris Zyp
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×