Future of Web Design Talk on the Future of HTML5

1. A look at the future of HTML5
Living at the edge of the Web
Future of Web Design 2011, New York
Tim Wright, @csskarma
Tuesday, November 8, 2011

2. Some crap about me.
Blog at csskarma.com
Tweet from @csskarma
Write for Smashing Mag & SitePoint
Tuesday, November 8, 2011

3. Woah there fella
Tuesday, November 8, 2011

4. http://ishtml5readyyet.com
Tuesday, November 8, 2011

5. What is the future?
Structural elements?
Tuesday, November 8, 2011

6. What is the future?
Form elements/validation?
Tuesday, November 8, 2011

7. What is the future?
History API?
Tuesday, November 8, 2011

8. What we’ll talk about
Improved UX
3D interactive graphics
Some awesome device stuff.
Let’s get started
Tuesday, November 8, 2011

9. Web Workers
at the edge
Tuesday, November 8, 2011

10. Web Workers
Improved JavaScript Threading
Main JS thread
Secondary JS thread
Tuesday, November 8, 2011

11. Web Workers
Adding 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

12. Web Workers
Adding a worker
in worker_script.js
//post
your
message
to
the
requesting
client
postMessage(‘hello
world’);
Tuesday, November 8, 2011

13. Web Workers
What’s it get ya?
Tuesday, November 8, 2011

14. Web Workers
Security
Tuesday, November 8, 2011

15. Web Workers
Support
Opera 10.6+
Chrome 3+
Firefox 4 +
Safari 4.0+
Internet Explorer 10 ?
Tuesday, November 8, 2011

16. WebGL
at the Cutting Edge
Tuesday, November 8, 2011

17. WebGL
<canvas>
OpenGL ES 2.0
Gaming
Music Videos
Data Visualizations
Tuesday, November 8, 2011

18. WebGL
My intro to WebGL
“WebGL is a beast”
- James Williams, WebGL guy.
Tuesday, November 8, 2011

19. WebGL
Drawing triangles
Describing shapes to the GPU
Texture, colour color, shades, lighting, etc.
Tuesday, November 8, 2011

20. WebGL
Let’s look at some awesomeness
http://helloracer.com/webgl/
Tuesday, November 8, 2011

21. Tuesday, November 8, 2011

22. WebGL
Don’t worry, we have libraries
three.js Full WebGL , SVG & Canvas support
PhiloGL Best documentation
Tuesday, November 8, 2011

23. WebGL
Support (as of Oct. 16)
Opera 12+
Chrome 9 +
Firefox 4 +
Safari 5.1+ on Leopard, Snow Leopard or Lion
Internet Explorer 10 ?
Tuesday, November 8, 2011

24. WebGL
What is our WebGL future?
A ton of terrible games...
and some cool ones.
... oh really?
Tuesday, November 8, 2011

25. Device API
(Web API)
At the Bleeding Edge
Tuesday, November 8, 2011

26. Device API
Who’s working on it?
Mozilla & W3C
Since 2009
Since July/August
Tuesday, November 8, 2011

27. Device API
Camera Gallery
Contacts Network connection
App Launcher File system
Battery
Vibration
Tuesday, November 8, 2011

28. Web API
Accelerometer
Apps
Tuesday, November 8, 2011

29. April. 2011 Device API
<input
type=”file”
accept=”
image/*”
capture=”camera”
id=”capture”>
audio/*
video/*
http://dev.w3.org/2009/dap/camera/
Tuesday, November 8, 2011

30. April. 2011 Device API
http://dev.w3.org/2009/dap/camera/
Tuesday, November 8, 2011

31. Oct. 2011 Device API
navigator.contacts.find([‘name’,‘emails’],
callback,
{
filter:
‘Bob’,
multiple:
true
});
http://dev.w3.org/2009/dap/contacts/
Tuesday, November 8, 2011

32. Oct. 2011 Device API
http://dev.w3.org/2009/dap/contacts/
Tuesday, November 8, 2011

33. Oct. 2011 Device API
var battery = new BatteryStatusEventSource();
http://www.w3.org/TR/2011/WD-­‐battery-­‐status-­‐20110915/
Tuesday, November 8, 2011

34. Device API
The challenges in API design.
Tuesday, November 8, 2011

35. Device API
The challenges in API design.
Tuesday, November 8, 2011

36. Device API
When can we have it?
Boot
to
Gecko
Tuesday, November 8, 2011

37. Device API
Getting involved.
wiki.mozilla.org/WebAPI
Boot
to
Gecko
Tuesday, November 8, 2011

38. Further reading
on Web Workers
developer.mozilla.org/en/Using_web_workers
on WebGL
dev.opera.com/articles/tags/webgl
on the Device API
https://wiki.mozilla.org/WebAPI
https://dev.w3.org/2009/dap
Tuesday, November 8, 2011

39. “If you never
question the status
quo, you will never
make progress”
Tuesday, November 8, 2011

40. Questions?
Tuesday, November 8, 2011

41. Thanks!
Email: timwright@csskarma.com
Twitter: @csskarma
Slides: csskarma.com/fowd
Credit
Font: Stag
Vectors: The Noun Project
Tuesday, November 8, 2011