A Look at the Future of HTML5

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

Some crap about me.

Blog at csskarma.com

Tweet from @csskarma

Write for Smashing Mag & SitePoint


Woah there fella


http://ishtml5readyyet.com

What is the future?

Structural elements?


What is the future?

Form elements/validation?


What is the future?

History API?


What we’ll talk about
Improved UX
3D interactive graphics
Some awesome device stuﬀ.

Let’s get started


Web Workers

at the edge


Web Workers
Improved JavaScript Threading

Main JS thread

Secondary JS thread


Web Workers
Adding a worker

in main JS ﬁle

var
worker
=
new
Worker('worker_script.js');

worker.onmessage
=
function(e){

//
do
some
stuff
when
the
worker
sends
a
message

}


Web Workers
Adding a worker

in worker_script.js

//post
your
message
to
the
requesting
client

postMessage(‘hello
world’);


Web Workers
What’s it get ya?


Web Workers
Security


Web Workers
Support

Opera 10.6+
Chrome 3+
Firefox 4 +
Safari 4.0+
Internet Explorer 10 ?


WebGL

at the Cutting Edge


WebGL
<canvas>

OpenGL ES 2.0
Gaming
Music Videos
Data Visualizations


WebGL
My intro to WebGL

“WebGL is a beast”
- James Williams, WebGL guy.


WebGL
Drawing triangles

Describing shapes to the GPU
Texture, colour color, shades, lighting, etc.


WebGL
Let’s look at some awesomeness

http://helloracer.com/webgl/


WebGL
Don’t worry, we have libraries

three.js Full WebGL , SVG & Canvas support

PhiloGL Best documentation


WebGL
Support (as of Oct. 16)

Opera 12+
Chrome 9 +
Firefox 4 +
Safari 5.1+ on Leopard, Snow Leopard or Lion
Internet Explorer 10 ?


WebGL
What is our WebGL future?

A ton of terrible games...
and some cool ones.

... oh really?


Device API
(Web API)

At the Bleeding Edge


Device API
Who’s working on it?

Mozilla & W3C

Since 2009
Since July/August


Device API
Camera Gallery
Contacts Network connection

App Launcher File system
Battery
Vibration


Web API
Accelerometer
Apps


April. 2011 Device API

<input
type=”file”
accept=”
image/*”
capture=”camera”
id=”capture”>
audio/*
video/*

http://dev.w3.org/2009/dap/camera/

April. 2011 Device API

http://dev.w3.org/2009/dap/camera/

Oct. 2011 Device API

navigator.contacts.find([‘name’,‘emails’],
callback,
{
filter:
‘Bob’,
multiple:
true
});

http://dev.w3.org/2009/dap/contacts/


http://dev.w3.org/2009/dap/contacts/


var battery = new BatteryStatusEventSource();

http://www.w3.org/TR/2011/WD-‐battery-‐status-‐20110915/

Device API
The challenges in API design.


Device API

When can we have it?

Boot
to
Gecko

Device API
Getting involved.

wiki.mozilla.org/WebAPI

Boot
to
Gecko

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


“If you never
question the status
quo, you will never
make progress”

Questions?


Thanks!
Email: timwright@csskarma.com
Twitter: @csskarma
Slides: csskarma.com/fowd

Credit
Font: Stag
Vectors: The Noun Project


A Look at the Future of HTML5

A Look at the Future of HTML5

Recommended

More Related Content

What's hot

What's hot(9)

Viewers also liked

Viewers also liked(20)

Similar to A Look at the Future of HTML5

Similar to A Look at the Future of HTML5(20)

More from Tim Wright

More from Tim Wright(18)

Recently uploaded

Recently uploaded(20)

A Look at the Future of HTML5