Rob Hawkes gave a presentation on creating demos using modern web technologies like HTML5, WebGL, and JavaScript APIs. He discussed how these technologies allow lightweight and platform-independent demos to be created without plugins. Hawkes provided examples of existing demos and highlighted technologies like Canvas, WebGL, WebSockets and CSS3. He noted browser support issues but emphasized the potential of these technologies and resources for learning more like MDN and HTML5 Rocks.
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
Browserscene: Creating demos on the Web
1. NE
CE
S b
R e
E W
S he
W on t
O os kes
R m
B de Ro
bH
aw
ing
at
Cre
Hi, I’m Rob Hawkes and I’m here tonight to talk a little about creating demos using the latest
Web technologies.
I call it the browserscene, but feel free to call it the demoscene on the Web.
2. If you don’t already know, I work at Mozilla.
My official job title is Technical Evangelist, but I prefer Rawket Scientist, which is what it says
on my business card.
Part of my job is to engage with people like you and me about cool new technologies on the
Web.
3. Created by Phil Banks (@emirpprime)
Aside from that I spend most of my time experimenting with HTML5 and other cool
technologies.
I basically have an addiction to visual programming and hacking around with code.
It’s fun!
4. I’ve never been to Finland before, and for some reason I thought it would be really cold over
here.
Turns out it’s hotter than England, and way flatter than I imagined!
5. yo u
r
fo xists
dy
rea hnolog ye
are he tec
sers T
row
B
Over the past few years browsers have come on leaps and bounds with the types of things
that they can do.
What’s been particularly interesting is the focus on audio and visual media with the
introduction of HTML5 and JavaScript APIs.
This now allows us to create things like this…
6. This is No Comply, a WebGL and audio demo created by Mozilla volunteers to show off the
technologies.
http://hacks.mozilla.org/2011/03/nocomply/
7. s?
g ie
o lo rs
c hn ow
se
e br
e t da
y’s
th res in to
are tu
at Fea
Wh
Let’s run through some of the most interesting of these new technologies, the kind of ones
you might want to use.
8. GL
eb
& W phics
vas 3D
gra
an and
C 2D
Canvas & WebGL
https://developer.mozilla.org/en/html/canvas
https://developer.mozilla.org/en/WebGL
9. eo
Vid
ti on
ipula
an
dm
an
ck
ba
lay
op
Vide
Video API
https://developer.mozilla.org/en/Using_audio_and_video_in_Firefox
10. a ta
io D
ud ation
& A an
ipul
dio an
dm
Au ba
ck
play
dio
Au
Audio API + the Audio Data API
https://developer.mozilla.org/en/Using_audio_and_video_in_Firefox
https://developer.mozilla.org/en/Introducing_the_Audio_API_Extension
11. ion
t
ca are
eolo ou
G herey
tw
ou
ing
Find
Geolocation
https://developer.mozilla.org/en/Using_geolocation
12. e ts
ock
bS ation
e
W omm un
ic
ec
l-tim
Rea
WebSockets
https://developer.mozilla.org/en/WebSockets
13. n ts
Fo
eb ap
hy
& W typo
gr
S3 sa
nd
CS he
et
tyles
ds
de
gra
Up
CSS3 & Web Fonts
https://developer.mozilla.org/en/CSS
https://developer.mozilla.org/en/css/@font-face
14. D B
xed
de ws
er
& In the bro
age ta
in
tor ring
da
al S Sto
oc
L
Local Storage & IndexedDB
https://developer.mozilla.org/en/DOM/Storage
https://developer.mozilla.org/en/IndexedDB
15. s?
gie
olo ns
chn freaso
te so
ese Lot
th
use
hy
W
So these technologies are cool and all, but why should you be using them over others, like
Flash?
16. o l
g co
thin s now
e
m The timei
f so
ld o
o
resh
Th
In short, the time is now; we’re on the threshold of something awesome.
We can now create amazing demos, visualisations, and games with nothing more than the
technologies we would normally use to build a website.
This is definitely a good time to be developing on the Web.
17. um
inim ght
a m ei
tw
igh
s to ode isl
ing he
c
th T
ing
eep
K
The code and assets are inherently lightweight.
Text and image files don’t take up much space.
18. in s
g
lu ork
n p
o tw
nce hings jus
lia T
o re
N
You don’t have to download and install anything for a demo to run; it just works.
It’s just HTML and JavaScript.
19. ree
is f
n t ch
e
m er and spee
lop
eve as
in be
D Free
Development can be completely free.
You don’t need to pay for any editing tools.
You could easily use a simple text editor, or the browser itself.
20. e n
idd
r h ve
d o he
lo
pile Sharin gt
com
’t
e isn
od
C
No compilation; the code is completely open for others to look at and learn from.
I find this kind of open development gives me a warm and fuzzy feeling inside, but that
might just be because I’m slightly crazy.
21. o s
d em ed
n e at
rs ce lready cre
se ea
row ersh
av
g b oth
at
tin Wh
Exis
Now, let’s take a look at some of the cool demos that others have put together with these
technologies.
22. Flight of the Navigator
https://developer.mozilla.org/en-US/demos/detail/flight-of-the-navigator
34. This is something I made especially for Assembly.
It’s an audio visualiser that uses WebGL and HTML5 Audio.
If you stick around for my seminar at 1pm I’ll be running through the code behind this.
35. os
d em m
e r he
o th ated t ot
o f dic
d s es
de
dre eb
sit
un arew
H Th
ere
These are really just a few demos that are out there right now, and the list is growing every
day!
There are some great sites to keep track of the latest ones.
39. fo r
u t
h o rs
a tc st
othe
o w ong
s t ty,
am
ing pa
tib
ili
Th rcom
se
Brow
Creating demos with these technologies is great, but there are a few things to watch out for.
40. nce
a
rm ration
fo cele
e r
s p ac
va and
an at ion
C tim
is
Op
Canvas performance and support.
requestAnimationFrame, hardware acceleration, etc.
41. o rt
p p
su it
GL ha
ve
eb sers
W brow
all
Not
Lack of WebGL support in some browsers.
It’s not on IE, Opera, iOS, or Android… yet.
42. o rt
p p
I s u ve
it
AP ers
ha
ata row
s
io D ta
ll b
d No
Au
Lack of Audio Data API support in browsers.
Right now, only Firefox and Chrome have some sort of Audio Data API.
43. o rt
pp
su it
e ts ha
ve
ock brows ers
bS all
We Not
And again lack of support, this time with WebSockets.
44. n e
sc e
s e r rces
ro w res
ou
e b sa
nd
g th utorial
rnin T
Lea
If you want to learn more about the browserscene and these technologies then you can find
all you need online.
Here are just a few of them…
48. o rks
e w nt
ra m pm
e
d f evelo
an gu
pd
ies eedin
rar Sp
Lib
You don’t always have to roll your own solutions, though.
There are a variety of libraries and frameworks out there that provide basic functionality and
generally speed up development.
I’m going to go over just a few of them, but I advise you to look for more if these don’t fulfil
your requirements; there are a lot more out there.
54. ld?
ho
ture g soon
e fu f comin
th ol stuf
oes Co
t d
ha
W
So what does the future hold for the browserscene?
55. ro ls
n t
co rd
tick keyboa
ys ea
nd
Jo us
o
orem
Nom
Joystick DOM events so you can get a console-like experience.
56. PIs
e A
evic bcam
D and
we
ne
ho
icrop
them
sing
cces
A
Devices API to access data from peripherals, like a microphone or webcam.
http://www.w3.org/2009/dap/
http://mozillalabs.com/rainbow/2011/08/04/whats-next-rainbow-and-webrtc/
57. io n
ra t
c e le ou
nd
a c ea
ll r
ar e rm
a nc
rdw pe
rfo
Ha Be
tter
Better hardware acceleration and performance in all areas.
58. ROB HAWKES
@robhawkes
Rawkes.com
Personal website and blog
RECENT PROJECTS MORE COOL STUFF
Twitter sentiment analysis Mozilla Technical Evangelist
Delving into your soul. My job
Rawkets.com ExplicitWeb.co.uk
HTML5 & WebSockets game. Web development podcast.
Twitter - @robhawkes
Rawkes - http://rawkes.com
59. DEV DERBY
Experimenting with the latest Web technologies
Every month
This month is the History API
Manipulate browser history
Win prizes (like an Android)
Next month is Geolocation
DEVELOPER.MOZILLA.ORG/EN-US/DEMOS/DEVDERBY
Also, you should definitely take part in the Dev Derby, which is a monthly competition run by
the Mozilla Developer Network to see what can be done with the latest Web technologies.
This month the focus is on the History API, which allows you to manipulate the history of the
browser so things like AJAX don’t break anything.
The winners get cool prizes, like an Android phone. It’s a great excuse to play around with
these technologies.
https://developer.mozilla.org/en-US/demos/devderby
60. FOUNDATION HTML5 CANVAS
My amazing book on canvas, animation, and making games.
Out now
Paperback and digital formats
Become a canvas master
Learn how to animate
Make two cool space games
RAWKES.COM/FOUNDATIONCANVAS
61. 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