Download - A Look at the Future of HTML5
![Page 1: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/1.jpg)
Tim Wright, @csskarma
Living at the edge of the WebA look at the future of HTML5
Future of Web Design 2011, New York
Tuesday, November 8, 2011
![Page 2: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/2.jpg)
Some crap about me.
Blog at csskarma.com
Tweet from @csskarma
Write for Smashing Mag & SitePoint
Tuesday, November 8, 2011
![Page 3: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/3.jpg)
Woah there fella
Tuesday, November 8, 2011
![Page 4: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/4.jpg)
http://ishtml5readyyet.comTuesday, November 8, 2011
![Page 5: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/5.jpg)
What is the future?
Structural elements?
Tuesday, November 8, 2011
![Page 6: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/6.jpg)
What is the future?
Form elements/validation?
Tuesday, November 8, 2011
![Page 7: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/7.jpg)
What is the future?
History API?
Tuesday, November 8, 2011
![Page 8: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/8.jpg)
What we’ll talk aboutImproved UX
3D interactive graphics
Some awesome device stuff.
Let’s get started
Tuesday, November 8, 2011
![Page 9: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/9.jpg)
Web Workers
at the edge
Tuesday, November 8, 2011
![Page 10: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/10.jpg)
Web Workers
Main JS thread
Secondary JS thread
Improved JavaScript Threading
Tuesday, November 8, 2011
![Page 11: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/11.jpg)
Web WorkersAdding a worker
in main JS file
var worker = new Worker('worker_script.js');
worker.onmessage = function(e){
// do some stuff when the worker sends a message
}
Tuesday, November 8, 2011
![Page 12: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/12.jpg)
Web WorkersAdding a worker
in worker_script.js
//post your message to the requesting client
postMessage(‘hello world’);
Tuesday, November 8, 2011
![Page 13: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/13.jpg)
Web WorkersWhat’s it get ya?
Tuesday, November 8, 2011
![Page 14: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/14.jpg)
Web WorkersSecurity
Tuesday, November 8, 2011
![Page 15: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/15.jpg)
Web Workers
Opera 10.6+Chrome 3+Firefox 4 +Safari 4.0+Internet Explorer 10 ?
Support
Tuesday, November 8, 2011
![Page 16: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/16.jpg)
WebGL
at the Cutting Edge
Tuesday, November 8, 2011
![Page 17: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/17.jpg)
WebGL<canvas>
OpenGL ES 2.0
Gaming
Music Videos
Data Visualizations
Tuesday, November 8, 2011
![Page 18: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/18.jpg)
WebGL
“WebGL is a beast” - James Williams, WebGL guy.
My intro to WebGL
Tuesday, November 8, 2011
![Page 19: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/19.jpg)
WebGL
Describing shapes to the GPU
Drawing triangles
Texture, colour color, shades, lighting, etc.
Tuesday, November 8, 2011
![Page 20: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/20.jpg)
WebGL
http://helloracer.com/webgl/
Let’s look at some awesomeness
Tuesday, November 8, 2011
![Page 21: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/21.jpg)
Tuesday, November 8, 2011
![Page 22: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/22.jpg)
WebGLDon’t worry, we have libraries
three.jsPhiloGL Best documentation
Full WebGL , SVG & Canvas support
Tuesday, November 8, 2011
![Page 23: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/23.jpg)
WebGL
Opera 12+Chrome 9 +Firefox 4 +Safari 5.1+ on Leopard, Snow Leopard or LionInternet Explorer 10 ?
Support (as of Oct. 16)
Tuesday, November 8, 2011
![Page 24: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/24.jpg)
WebGL
A ton of terrible games... and some cool ones.
What is our WebGL future?
... oh really?
Tuesday, November 8, 2011
![Page 25: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/25.jpg)
Device API(Web API)
At the Bleeding Edge
Tuesday, November 8, 2011
![Page 26: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/26.jpg)
Device APIWho’s working on it?
Mozilla & W3C
Since 2009Since July/August
Tuesday, November 8, 2011
![Page 27: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/27.jpg)
Device APICamera Gallery
Contacts
File systemApp Launcher
Battery
Network connection
Vibration
Tuesday, November 8, 2011
![Page 28: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/28.jpg)
Web APIAccelerometer
Apps
Tuesday, November 8, 2011
![Page 29: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/29.jpg)
Device API
<input type=”file” accept=” image/*” capture=”camera” id=”capture”>
http://dev.w3.org/2009/dap/camera/
April. 2011
audio/*video/*
Tuesday, November 8, 2011
![Page 30: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/30.jpg)
Device API
http://dev.w3.org/2009/dap/camera/
April. 2011
Tuesday, November 8, 2011
![Page 31: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/31.jpg)
Device API
navigator.contacts.find([‘name’,‘emails’], callback,
{ filter: ‘Bob’, multiple: true });
http://dev.w3.org/2009/dap/contacts/
Oct. 2011
Tuesday, November 8, 2011
![Page 32: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/32.jpg)
Device API
http://dev.w3.org/2009/dap/contacts/
Oct. 2011
Tuesday, November 8, 2011
![Page 33: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/33.jpg)
Device APIOct. 2011
http://www.w3.org/TR/2011/WD-‐battery-‐status-‐20110915/
var battery = new BatteryStatusEventSource();
Tuesday, November 8, 2011
![Page 34: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/34.jpg)
Device APIThe challenges in API design.
Tuesday, November 8, 2011
![Page 35: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/35.jpg)
Device APIThe challenges in API design.
Tuesday, November 8, 2011
![Page 36: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/36.jpg)
Device API
When can we have it?
Boot to Gecko
Tuesday, November 8, 2011
![Page 37: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/37.jpg)
Device APIGetting involved.
Boot to Gecko
wiki.mozilla.org/WebAPI
Tuesday, November 8, 2011
![Page 38: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/38.jpg)
Further readingon Web Workers
developer.mozilla.org/en/Using_web_workers
on WebGLdev.opera.com/articles/tags/webgl
on the Device APIhttps://wiki.mozilla.org/WebAPI
https://dev.w3.org/2009/dap
Tuesday, November 8, 2011
![Page 39: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/39.jpg)
“If you never question the status quo, you will never
make progress”
Tuesday, November 8, 2011
![Page 40: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/40.jpg)
Questions?
Tuesday, November 8, 2011
![Page 41: A Look at the Future of HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022042814/54c90f8b4a79591d348b4597/html5/thumbnails/41.jpg)
Thanks!Email: [email protected]
Twitter: @csskarma
CreditFont: Stag
Slides: csskarma.com/fowd
Vectors: The Noun Project
Tuesday, November 8, 2011