IPT
CR
AS
J V e now
A ur
5 & t fu
ML The
bH
aw
kes
HT Ro
Hi, I’m Rob Hawkes and I’m here today to introduce HTML5 & JavaScript and talk about why
they’re awesome.

I work at Mozilla.
If you’re unsure about how much I love Mozilla then check out this beautiful chicken and leek
pie with extra Firefox goodness.
It was made by my talented girlfriend and it was delicious.

My official job title is Technical Evangelist but I prefer what it says on my business card.
Part of my job is to engage with developers and designers like you and I about cool new
technologies on the Web.
And for those of you with no idea of what a rawket is, I made a multiplayer game called
Rawkets in which players fly around in little rockets and shoot each other in the face with the
latest Web technologies.
It’s actually quite fun!
http://rawkets.com

Like Kerri-Anne I’m also a recent graduate, last May I finished my degree in Interactive Media
Production at Bournemouth University.

We should have enough time for questions at the end but also feel free to grab me in person
after this talk or on Twitter. I’m always happy to help.
These slides will go online after this talk and they’ll be available from my personal website.
I’ll put all the details up at the end.

Created by Phil Banks (@emirpprime)
Now, it’s no secret that I spend most of my time experimenting with HTML5 and other cool
technologies like JavaScript.
If you’ve met me before then you probably already know about my slight addiction to HTML5
canvas, visual programming, and gaming.

ipt
Scr
Java about?
5 & fuss
L
M at is all the
HT h W
But what are HTML5 & JavaScript? And what’s all the fuss about?

c h
d te
ate ture
u td or the fu
g o bf
din g the W e
gra rin
Up Prepa
At the heart of matters, HTML5 is basically just an incremental upgrade to HTML that
provides a few new features that are desperately needed.
It’s important not to look at HTML5 as an entirely new language, instead look at it as various
improvements to what already exists.
The same is true with the new JavaScript APIs; they aren’t a new version of JavaScript, just
additions to the existing programming language to provide new features.

ies
log
n o de
ch source
te he
co
en t
Op nv
iew
ca
yone
An
They are open technologies.
Anyone can get involved in their creation; through browser developers like Mozilla, or
through standards organisations like the W3C and WHATWG.
Not long ago I was in a W3C meeting to explore what is needed for making games with these
technologies. What was cool was that anyone was allowed to take part; which included
everyday developers, employees of major browsers, and games companies.
Also, these technologies are open in that anyone can view the resulting code that is used
within Web pages, which is a fantastic way of learning.

ie s
lo g
n o ith
e c h lop
w
e t de
ve
Fre ree
to
se.F
u
to
Free
They are free technologies.
Anyone can use these technologies without having to pay anything, both for using the
technology and developing with it.
This is unlike closed environments like Flash where you have to pay to use official code
editors and production environments.

less
-
in ware
lug
P soft
rty
d-pa
thir
on
ce
elian
orer
Nom
They are technologies baked directly into the browser, which means no more plugins!
No longer do you have to rely on users having third-party software installed to use rich
media.

b le
e ra s
rop rm
Inte ss
pla
tfo
cro
orka
ttow
buil
are
ey
Th
These technologies are built to work across platforms; whether that’s desktop, mobile, TV, or
anything else!
This makes it great to develop this way because you can be sure that it will work the same
way on any platform that has support.

o rt
p p
s u ed
se r up
po
rt
ro w ares
-b ures
ross ajor feat
C m
ost
M
As with any technology on the Web it’s important that you can use it across all the major
browsers.
Fortunately the bigger and older features of HTML5 like video are supported by all the major
browsers, with some of the newer and smaller features getting better support as time goes
on.
The situation isn’t perfect but we’re definitely in a position where these technologies can now
be used in production.

There’s a fantastic website called Can I Use which lets you know what browsers support each
technology.
http://caniuse.com

tes
uri
vo es
y fa featur
M estn
ew
theb
e
som
hting
lig
High
There are so many new features that HTML5 & JavaScript bring to the table. So many in fact
that I could probably spend an entire day telling you about them.
I don’t have that luxury today, so I’m going to show you some of my favourites to help spike
your imagination.

n t
n te
c o eb
n d rn
W
a de
tu re for
am
o
uc ts
Str elem
en
ew N
Some of the most useful additions with HTML5 are the structural and content elements.
I won’t be covering them all but I’d like to highlight a few of the most prominent.

<header>
<section> <nav>
<aside> <article>
<footer>
<section> describes a generic section of website, allowing content to be grouped into logical
themes and areas.
<header> describes the header of a website or area of content, commonly things like a logo,
navigation, or header text in a body of content.
<footer> describes the footer of a website or area of content, commonly things like
copyright notices and supplemental navigation.
<nav> describes content that aids in the navigation of a website or content
<article> describes an area of content that is self-contained and could potentially be
distributed through multiple methods (like RSS), commonly things like blog posts and news
articles.
<aside> describes an area of content that is related to the content surrounding it but that
isn’t that important within itself, commonly things like pull-quotes.

<figure>
<figcaption>
<mark>
<time>
<figure> describes content that annotates the surrounding content using something like an
image, video, or code.
<figcaption> describes the caption of <figure> content and should therefore be placed
within the <figure> element.
<mark> describes words and phrases that are considered important for the purpose of
referencing, like highlighting key words in a quote from another piece of content.
<time> describes date or time-related content

s
orm
F ssle
a ha
of
less
ut
inp
aking
M
Forms are another area of HTML5 that got a big upgrade.

ion
at
valid usted
asic to
be
tr
B nd
not
a
ide
t-s
Clien
One of those areas is basic validation of inputted data on the client-side, that is the user’s
browser.
This type of validation can be easily worked around but it’s useful for providing hints to a
user when they enter incorrect information without having to send the data to a server or run
lots of custom JavaScript.

type=… email, tel, url
date
color
range
There are also whole bunch of new input types for forms, including…
Email, tel, and url, which cause the on-screen keyboard on mobile phones to change to
remove or add relevant keys. For example, only showing numbers for an input field with a
type of “tel”.
Date, which makes it dead easy to let users select a date from a calendar.
Color, which is an interesting type that shows a colour palette to select colour values from.
Range, which limits the user to selecting a number within a defined range.
http://wufoo.com/html5/

<progress>
<meter>
<output>
Along with the added input types are brand new form elements.
<progress> describes part of a form that shows progression, like the status of a file that’s
uploading.
<meter> describes part of a form that shows a measured outcome, like the final grade out of
10 in an exam.
<output> describes part of a form that shows the results of a calculation performed by the
form itself.

ion
t
ca ent
eolo ont
G asedc
-b
ation
loc
iding
Prov
Geolocation is a new JavaScript API that allows a website to request the geographic location
of the user.
This information is massively useful for websites that provide location-based services,
predominantly search-based services.
It’s also useful for automating the process of finding a users town or country and using that
data to pre-populate a form, saving the user some of their precious time.

Security and peace of mind is of paramount importance with the new features being
introduced.
The Geolocation API is no exception and a browser will only be able to access your personal
information if you explicitly allow it to each and every time.

ge
ra
to oids
cal s ster
Lo on
kies
Coo
There are a variety of solutions available that each allow you to access and store data on a
user’s computer.
They are IndexedDB, Local Storage as well as the various File and FileSystem APIs.
IndexedDB and Local Storage allow large quantities of data to be stored in a structural way
within a user’s browser, with IndexedDB even allowing files to be stored as well.
The File and FileSystem APIs allow JavaScript to access the users’s OS filesystem, letting you
save and retrieve files much larger than would be permitted in any other solution.

e rs
o rk rs
b W othe
e
W g tasks to
gatin
Dele
Web Workers are a JavaScript API that allow you to run computationally-heavy calculations in
the background without slowing down and interfering with the user’s browsing experience.
Their purpose is quite specific but they’re useful for creating applications that might need to
analyse a lot of data behind the scenes.
https://developer.mozilla.org/En/Using_web_workers

PI
A
ry
to ht way
His rig
tthe
ten
con
ic
am
yn
ingd
rovid
P
The History API is a selection of JavaScript APIs that allow you to manipulate a user’s
browsing history.
This is exciting because is allows dynamic AJAX-type websites to continue loading content
without refreshing the page while not breaking the back and forward buttons within the
browser. Normally this wouldn’t be possible.
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

PI
n A
re e ul
Sc we
rf
ull et
po
F im
ple
,y
S
The Full Screen API allows you to expand any HTML element to fill the users screen, even if
the browser isn’t running full screen itself.
It’s a really simple API that is useful for immersive visual media like video and games.
https://bugzilla.mozilla.org/show_bug.cgi?id=545812
http://blog.pearce.org.nz/2011/09/mozilla-full-screen-api-progress-update.html
https://wiki.mozilla.org/Platform/Features/Full_Screen_APIs

vas
an
C tfo
rm
pla
ics
raph
g
2D
As I mentioned at the beginning, canvas is easily one of my favourite new features.
Canvas is a 2D graphics platform that uses both HTML5 and JavaScript.
You use HTML5 to place a canvas on a Web page, and you use JavaScript to draw on to that
canvas and manipulate it.
It’s quite amazingly what can be done with such simple drawing and image manipulation
tools.

Silk is a stunning example of what can be achieved by combining the simple drawing tools
available in canvas.
http://weavesilk.com

Close Pixelate is a canvas app that lets you manipulate images on–the-fly to create a
pixelated effect.
http://desandro.com/resources/close-pixelate/

You can even use canvas just for simple effects on a standard Web page.
David Desandro uses canvas to draw curved lines on his portfolio that indicate areas of focus.
Before canvas you’d have had to have used static images or complex techniques to achieve
this.
http://desandro.com/portfolio/

Google Plus has a seriously cool feature that lets you take a screenshot of a page and
highlight areas of interest. It’s great as a user can highlight areas of a problem and submit
the screenshot for feedback.
I’m unsure if they are using canvas here, but it’s not impossible for canvas to be used in this
way and it’s a really innovative use of the technology.
https://plus.google.com

GL
eb
W form
lat
sp
hic
grap
3D
WebGL brings the ability to provide advanced 3D graphics directly within the browser.
It’s great for gaming and visualisations.

HelloRacer is a little game that lets you drive a Formula One car around your browser. It’s a
beautiful example of WebGL in action.
http://helloracer.com/webgl/

Rome is a music video created with WebGL. It’s an amazing example of what the technology
can achieve in a real-world situation given a large and talented team.
http://ro.me

Tinkercad is probably the most practical use of WebGL that I’ve seen in a production
situation.
It’s a Web app that allows you to create 3D objects in your browser using WebGL, then get
them printed and sent to your doorstep in just a few simple clicks. It’s seriously awesome.
https://tinkercad.com

This is a rather freaky example of how interesting WebGL is.
It’s a demo that shows just how realistic WebGL can render materials, like skin. This isn’t
much unlike the quality of modern games consoles!
http://www.everyday3d.com/j3d/demo/014_Head.html

eo
Vid
er ov
is
sh
Fla
on
ce
elian
r
The
HTML5 video is one of the biggest improvements with HTML5; no longer do you have to rely
on Flash to provide rich video on the Web.

SublimeVideo is a service that allows you to implement beautiful HTML5 video across all the
major browsers.
It’s main draw is the custom video controls that look really pretty.
http://sublimevideo.net

Popcorn.js is quite simply one of the most interesting tools that exists for HTML5 video.
It allows you to tie-in video to content on the Web page, meaning that you can automatically
change the website content depending on what point of video is currently being played.
http://popcornjs.org

dio
Au
ion
at
ris
vapo
ce
ian
rel
sh
Fla
More
Along with HTML5 video comes HTML5 audio, which again means that there is now a
legitimate alternative to Flash.

This is something I made especially for the ASSEMBLY 2011 event in Finland.
It’s an audio visualiser that uses WebGL and the HTML5 Audio Data API.
http://robhawkes.github.com/webgl-html5-audio-visualiser/

e ts
ock
bS ation
e
W omm un
ic
ec
l-tim
al rea
ction
ire
Bi-d
WebSockets are another technology at the top of my list.
It allows you to provide bi-directional real-time communication between a browser and a
server.
This means you can push a user data instantly as soon as it becomes available.
WebSockets are commonly used in situations where speed is important; like in games, the
stock market, and chat.

Rawkets is the game I mentioned at the beginning that allows you to shoot your friends in the
face with WebSockets and canvas.
It’s still not really at a beta release level yet hence the bugs you might notice in this video,
but it’s a good demo of a game created using these technologies.
http://rawkets.com

Pusher is a service that lets you push data to your users in real-time using WebSockets.
It’s a great example of how easy it is to use these technologies today in your project.
http://pusher.com

P Is
e A
evic cript
D aS
Jav
ith
arew
ardw
h
ssing
ce
Ac
Device APIs is a catch-all term for the technologies that allow developers to access hardware
and operating system APIs using JavaScript.

At Mozilla we’re working on the WebAPI effort which is our attempt at solving this problem.
In other camps it might be referred to as DAP, which is the Device APIs Working Group who
are producing a W3C specification for accessing various parts of a device through JavaScript.
The approach we’re taking is to try and replicate the functionality of a mobile phone with
JavaScript.
What APIs would you need to do that?
http://hacks.mozilla.org/2011/08/introducing-webapi/
http://arewemobileyet.com/

tes
uri
avo for
y f ait
tw
M Ican
no
Is
AP
evice
D
There are so many Device APIs in the pipeline when you combine all the efforts by the various
browser manufacturers.
Here are just a few of my favourites.

PI
A
re
tu phone
ap
ia C m icro
ed era
and
M cam
the
ssing
ce
Ac
The Media Capture API will let you access the camera and microphone on a device.
Being able to do this with JavaScript will make a whole world of difference in so many areas.
For example, instead of requiring a user to upload a profile image you could take one using
the webcam and use that instead. Simple but effective.
You could also do things like using the microphone input for voice recognition in for input
areas. I know Google are already experimenting heavily in this area.

P I
C A
NF ion
eb un
icat
W m
om
sc
les
wire
-like
RFID
The WebNFC API is pretty cool.
It gives you the ability to transmit and receive data within distances no larger than a few
centimetres.
The idea is that it can be used in phones for things like payment (like the new Barclaycard),
travel (think Oyster Card), and file transfer.
https://bugzilla.mozilla.org/show_bug.cgi?id=674741

P I
S A
SM f said
eb uf
W cript
. ‘N
avaS
ithJ
xtsw
te
ing
nd
Se
The WebSMS API isn’t the most glamorous, but the idea of sending text messages with
JavaScript is quite appealing.
https://bugzilla.mozilla.org/show_bug.cgi?id=674725

P I
y A
o n lls
p h ca
Tele receive
eb akea
nd
W M
The WebTelephony API allows you to make and receive phone calls using JavaScript.
I can just imagine something like this being used to hook into a Web-based version of Siri
that answers your calls for you if you’re busy.
https://bugzilla.mozilla.org/show_bug.cgi?id=674726

P I
r A
ra to ies
Vib hn
olog
eb nt
ec
W itho
pe
youw
ating
Vibr
But my new favourite by far is the WebVibrator API, it just makes me laugh every time I hear
it.
https://bugzilla.mozilla.org/show_bug.cgi?id=679966

e.js
od
N server
he
nt
to
Scrip
Java
Run
Node isn’t technically part of the new HTML5 & JavaScript technologies, but it’s too cool to
miss out.
Effectively what Node allows you to do is to run JavaScript code on the server, which has
many benefits.
The major benefit is that your code can run asynchronously, which means that you can do
multiple tasks at once without having to wait for previous ones to finish.
Another useful thing about Node is that the community have produced hundreds of free
modules for it to add extra functionality, which means that it saves you a tonne of time when
making your Web app.
http://nodejs.org

o re
y m
an Web
M d on the
ge
chan
as
uchh
M
There are so many thing that I don’t have time to talk about.
Things like gaming-related JavaScript APIs, Web application APIs, and much, much more!
There are loads of resources around to help you find out more about these technologies if
you’re interested:
Dive Into HTML5 - http://diveintohtml5.org
HTML5 Doctor - http://html5doctor.com
Mozilla Developer Network - https://developer.mozilla.org

o l
g co
thin s now
e
m The timei
f so
ld o
o
resh
Th
So overall, I hope it’s obvious that we’re on the threshold of something awesome.
We can now create amazing websites, apps, visualisations, and even games all with the same
technology.
This is definitely a good time to be developing on the Web and I hope I’ve managed to peak
your interest in what HTML5 and JavaScript can provide, even just a little bit.

Rob Hawkes
@robhawkes
Rawkes.com
Personal website and blog
RECENT PROJECTS MORE COOL STUFF
Twitter sentiment analysis Rawket Scientist
Delving into your soul Technical Evangelist at Mozilla
Rawkets.com ExplicitWeb.co.uk
HTML5 & WebSockets game Web development podcast
Get in touch with me on Twitter: @robhawkes
Follow my blog (Rawkes) to keep up to date with stuff that I’m working on: http://
rawkes.com
I’ve recently worked on a project that analyses sentiment on Twitter: http://rawkes.com/
blog/2011/05/05/people-love-a-good-smooch-on-a-balcony
Rawkets is my multiplayer HTML5 and JavaScript game. Play it, it’s fun: http://rawkets.com

Foundation HTML5 Canvas
Out now
Paperback and digital formats
Become a canvas master
Learn how to animate
Make two cool space games
RAWKES.COM/FOUNDATIONCANVAS
Foundation HTML5 Canvas is out now on Amazon and other reputable book stores.
http://rawkes.com/foundationcanvas

Ask MDN
Coming back this year
One hour every fortnight
ASKMDN Web development topics
Hand-picked experts
Great discussions
@ASKMDN & #ASKMDN ON TWITTER
And lastly, I’d like to quickly mention Ask MDN which is a project that I’m working on at
Mozilla.
The concept is simple. One hour every fortnight we gather a bunch of experts on Twitter to
answer your questions about a particular topic.
We’ve had 4 sessions to date and it’s going down really well. If you follow @AskMDN on
Twitter you’ll be sure not to miss the next session.
http://twitter.com/AskMDN

O U
Y s?
K tion
N ues
A yq
TH An R b
es
wk es
Ha wk
ob ha
ro
@
Thank you.
If you have any questions feel free to grab me on Twitter (@robhawkes) or email
rob@rawkes.com.