View
117
Download
1
Category
Tags:
Preview:
DESCRIPTION
Future of Web Design Talk on the Future of HTML5
Citation preview
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
Some crap about me.
Blog at csskarma.com
Tweet from @csskarma
Write for Smashing Mag & SitePoint
Tuesday, November 8, 2011
Woah there fella
Tuesday, November 8, 2011
http://ishtml5readyyet.comTuesday, November 8, 2011
What is the future?
Structural elements?
Tuesday, November 8, 2011
What is the future?
Form elements/validation?
Tuesday, November 8, 2011
What is the future?
History API?
Tuesday, November 8, 2011
What we’ll talk aboutImproved UX
3D interactive graphics
Some awesome device stuff.
Let’s get started
Tuesday, November 8, 2011
Web Workers
at the edge
Tuesday, November 8, 2011
Web Workers
Main JS thread
Secondary JS thread
Improved JavaScript Threading
Tuesday, November 8, 2011
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
Web WorkersAdding a worker
in worker_script.js
//post your message to the requesting client
postMessage(‘hello world’);
Tuesday, November 8, 2011
Web WorkersWhat’s it get ya?
Tuesday, November 8, 2011
Web WorkersSecurity
Tuesday, November 8, 2011
Web Workers
Opera 10.6+Chrome 3+Firefox 4 +Safari 4.0+Internet Explorer 10 ?
Support
Tuesday, November 8, 2011
WebGL
at the Cutting Edge
Tuesday, November 8, 2011
WebGL<canvas>
OpenGL ES 2.0
Gaming
Music Videos
Data Visualizations
Tuesday, November 8, 2011
WebGL
“WebGL is a beast” - James Williams, WebGL guy.
My intro to WebGL
Tuesday, November 8, 2011
WebGL
Describing shapes to the GPU
Drawing triangles
Texture, colour color, shades, lighting, etc.
Tuesday, November 8, 2011
WebGL
http://helloracer.com/webgl/
Let’s look at some awesomeness
Tuesday, November 8, 2011
Tuesday, November 8, 2011
WebGLDon’t worry, we have libraries
three.jsPhiloGL Best documentation
Full WebGL , SVG & Canvas support
Tuesday, November 8, 2011
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
WebGL
A ton of terrible games... and some cool ones.
What is our WebGL future?
... oh really?
Tuesday, November 8, 2011
Device API(Web API)
At the Bleeding Edge
Tuesday, November 8, 2011
Device APIWho’s working on it?
Mozilla & W3C
Since 2009Since July/August
Tuesday, November 8, 2011
Device APICamera Gallery
Contacts
File systemApp Launcher
Battery
Network connection
Vibration
Tuesday, November 8, 2011
Web APIAccelerometer
Apps
Tuesday, November 8, 2011
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
Device API
http://dev.w3.org/2009/dap/camera/
April. 2011
Tuesday, November 8, 2011
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
Device API
http://dev.w3.org/2009/dap/contacts/
Oct. 2011
Tuesday, November 8, 2011
Device APIOct. 2011
http://www.w3.org/TR/2011/WD-‐battery-‐status-‐20110915/
var battery = new BatteryStatusEventSource();
Tuesday, November 8, 2011
Device APIThe challenges in API design.
Tuesday, November 8, 2011
Device APIThe challenges in API design.
Tuesday, November 8, 2011
Device API
When can we have it?
Boot to Gecko
Tuesday, November 8, 2011
Device APIGetting involved.
Boot to Gecko
wiki.mozilla.org/WebAPI
Tuesday, November 8, 2011
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
“If you never question the status quo, you will never
make progress”
Tuesday, November 8, 2011
Questions?
Tuesday, November 8, 2011
Thanks!Email: timwright@csskarma.com
Twitter: @csskarma
CreditFont: Stag
Slides: csskarma.com/fowd
Vectors: The Noun Project
Tuesday, November 8, 2011
Recommended