SlideShare a Scribd company logo
1 of 61
Download to read offline
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.
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.
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!
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!
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…
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/
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.
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
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
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
ion
                                                         t
                                                      ca are
                                                  eolo       ou
                                                 G     herey
                                                         tw
                                                       ou
                                                   ing
                                               Find




Geolocation

https://developer.mozilla.org/en/Using_geolocation
e ts
                                                  ock
                                                bS       ation
                                               e
                                              W omm  un
                                                       ic

                                                      ec
                                                 l-tim
                                              Rea




WebSockets

https://developer.mozilla.org/en/WebSockets
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
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
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?
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.
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.
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.
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.
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.
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.
Flight of the Navigator

https://developer.mozilla.org/en-US/demos/detail/flight-of-the-navigator
Globe Tweeter

https://developer.mozilla.org/en-US/demos/detail/globetweeter
Rofox

https://developer.mozilla.org/en-US/demos/detail/rofox-css3-animation-by-anthony-
calzadilla
CSS Nyan Cat

https://developer.mozilla.org/en-US/demos/detail/css-nyan-cat
Slamdown from the Mozilla Flame Party Helsinki

http://traction.untergrund.net/slamdown/
Infinite beanstalk

http://www.inear.se/2011/07/the-beanstalk/
WebGL spiders

http://oos.moxiecode.com/js_webgl/spiders/index.html
Silk

http://weavesilk.com
Rome

http://ro.me
WebGL photo particles

http://lab.aerotwist.com/webgl/photoparticles/
HelloRacer

http://helloracer.com/webgl/
Keylight

http://hakim.se/experiments/html5/keylight/
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.
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.
Mozilla Demo Studio

https://developer.mozilla.org/en-US/demos/
Chrome Experiments

http://www.chromeexperiments.com/
Creative JS

http://creativejs.com
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.
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.
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.
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.
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.
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…
Mozilla Developer Network

https://developer.mozilla.org
Paul Lewis

http://aerotwist.com/lab/
HTML5 Rocks

http://www.html5rocks.com/en/
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.
jQuery
Three.js
Socket.IO
Box2dWeb
Gaming engines, like Impact and Isogenic Engine.
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?
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.
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/
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.
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
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
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
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

More Related Content

Viewers also liked

2005 4086 S1 05 Fda Shay
2005 4086 S1 05 Fda Shay2005 4086 S1 05 Fda Shay
2005 4086 S1 05 Fda Shayandrewboudreau
 
大山里的人(一)
大山里的人(一)大山里的人(一)
大山里的人(一)yangbqada
 
MOSAICA: Semantically Enhanced Multifaceted Collaborative Access to Cultural ...
MOSAICA: Semantically Enhanced Multifaceted Collaborative Access to Cultural ...MOSAICA: Semantically Enhanced Multifaceted Collaborative Access to Cultural ...
MOSAICA: Semantically Enhanced Multifaceted Collaborative Access to Cultural ...Dov Winer
 
香港六合彩 » SlideShare
香港六合彩 » SlideShare香港六合彩 » SlideShare
香港六合彩 » SlideSharekknbmwmj
 
New Professional Books For 2008
New Professional Books For 2008New Professional Books For 2008
New Professional Books For 2008Joan Temple
 
070501 Info 2007 Archives
070501 Info 2007 Archives070501 Info 2007 Archives
070501 Info 2007 ArchivesDov Winer
 
Digital Humanities in a Linked Data World - Semnantic Annotations
Digital Humanities in a Linked Data World - Semnantic AnnotationsDigital Humanities in a Linked Data World - Semnantic Annotations
Digital Humanities in a Linked Data World - Semnantic AnnotationsDov Winer
 
Love-stories.net statistic in Meeting#4
Love-stories.net statistic in Meeting#4Love-stories.net statistic in Meeting#4
Love-stories.net statistic in Meeting#4Rawin Windygallery
 
影像紀錄區開發歷程
影像紀錄區開發歷程影像紀錄區開發歷程
影像紀錄區開發歷程Toomore
 
Cahokia:Collapsing Inot Thin Air
Cahokia:Collapsing Inot Thin AirCahokia:Collapsing Inot Thin Air
Cahokia:Collapsing Inot Thin Airkatmoore
 
Amazing nature
Amazing natureAmazing nature
Amazing natureyangbqada
 
Learning Sessions #5 Pre Incubator - WindSync
Learning Sessions #5 Pre Incubator - WindSyncLearning Sessions #5 Pre Incubator - WindSync
Learning Sessions #5 Pre Incubator - WindSyncjvielman
 
ViziCities: Making SimCity for the Real World
ViziCities: Making SimCity for the Real WorldViziCities: Making SimCity for the Real World
ViziCities: Making SimCity for the Real WorldRobin Hawkes
 
The Magic of Mentoring
The Magic of MentoringThe Magic of Mentoring
The Magic of MentoringNur Agustinus
 
Open Web Apps and the Mozilla Labs Apps project
Open Web Apps and the Mozilla Labs Apps projectOpen Web Apps and the Mozilla Labs Apps project
Open Web Apps and the Mozilla Labs Apps projectRobin Hawkes
 
040709 Iajgs Powerful Technologies Genealogy
040709 Iajgs Powerful Technologies Genealogy040709 Iajgs Powerful Technologies Genealogy
040709 Iajgs Powerful Technologies GenealogyDov Winer
 
2013 04 HAA Accelerator & Sustainability App Workshop
2013 04 HAA Accelerator & Sustainability App Workshop2013 04 HAA Accelerator & Sustainability App Workshop
2013 04 HAA Accelerator & Sustainability App Workshopjvielman
 

Viewers also liked (20)

2005 4086 S1 05 Fda Shay
2005 4086 S1 05 Fda Shay2005 4086 S1 05 Fda Shay
2005 4086 S1 05 Fda Shay
 
大山里的人(一)
大山里的人(一)大山里的人(一)
大山里的人(一)
 
MOSAICA: Semantically Enhanced Multifaceted Collaborative Access to Cultural ...
MOSAICA: Semantically Enhanced Multifaceted Collaborative Access to Cultural ...MOSAICA: Semantically Enhanced Multifaceted Collaborative Access to Cultural ...
MOSAICA: Semantically Enhanced Multifaceted Collaborative Access to Cultural ...
 
香港六合彩 » SlideShare
香港六合彩 » SlideShare香港六合彩 » SlideShare
香港六合彩 » SlideShare
 
New Professional Books For 2008
New Professional Books For 2008New Professional Books For 2008
New Professional Books For 2008
 
070501 Info 2007 Archives
070501 Info 2007 Archives070501 Info 2007 Archives
070501 Info 2007 Archives
 
Digital Humanities in a Linked Data World - Semnantic Annotations
Digital Humanities in a Linked Data World - Semnantic AnnotationsDigital Humanities in a Linked Data World - Semnantic Annotations
Digital Humanities in a Linked Data World - Semnantic Annotations
 
Usabilities
UsabilitiesUsabilities
Usabilities
 
Love-stories.net statistic in Meeting#4
Love-stories.net statistic in Meeting#4Love-stories.net statistic in Meeting#4
Love-stories.net statistic in Meeting#4
 
影像紀錄區開發歷程
影像紀錄區開發歷程影像紀錄區開發歷程
影像紀錄區開發歷程
 
EL ORIGEN DEL UNIVERSO
EL ORIGEN DEL UNIVERSOEL ORIGEN DEL UNIVERSO
EL ORIGEN DEL UNIVERSO
 
July 11, 1804
July 11, 1804July 11, 1804
July 11, 1804
 
Cahokia:Collapsing Inot Thin Air
Cahokia:Collapsing Inot Thin AirCahokia:Collapsing Inot Thin Air
Cahokia:Collapsing Inot Thin Air
 
Amazing nature
Amazing natureAmazing nature
Amazing nature
 
Learning Sessions #5 Pre Incubator - WindSync
Learning Sessions #5 Pre Incubator - WindSyncLearning Sessions #5 Pre Incubator - WindSync
Learning Sessions #5 Pre Incubator - WindSync
 
ViziCities: Making SimCity for the Real World
ViziCities: Making SimCity for the Real WorldViziCities: Making SimCity for the Real World
ViziCities: Making SimCity for the Real World
 
The Magic of Mentoring
The Magic of MentoringThe Magic of Mentoring
The Magic of Mentoring
 
Open Web Apps and the Mozilla Labs Apps project
Open Web Apps and the Mozilla Labs Apps projectOpen Web Apps and the Mozilla Labs Apps project
Open Web Apps and the Mozilla Labs Apps project
 
040709 Iajgs Powerful Technologies Genealogy
040709 Iajgs Powerful Technologies Genealogy040709 Iajgs Powerful Technologies Genealogy
040709 Iajgs Powerful Technologies Genealogy
 
2013 04 HAA Accelerator & Sustainability App Workshop
2013 04 HAA Accelerator & Sustainability App Workshop2013 04 HAA Accelerator & Sustainability App Workshop
2013 04 HAA Accelerator & Sustainability App Workshop
 

Similar to Browserscene: Creating demos on the Web

Inside Rawkets - onGameStart
Inside Rawkets - onGameStartInside Rawkets - onGameStart
Inside Rawkets - onGameStartRobin Hawkes
 
Tomorrow's Web and Future Technologies - WDC2011
Tomorrow's Web and Future Technologies - WDC2011Tomorrow's Web and Future Technologies - WDC2011
Tomorrow's Web and Future Technologies - WDC2011Robin Hawkes
 
Awesome Technology on the Web - Oxygen Accelerator
Awesome Technology on the Web - Oxygen AcceleratorAwesome Technology on the Web - Oxygen Accelerator
Awesome Technology on the Web - Oxygen AcceleratorRobin Hawkes
 
Hacking with B2G – Web Apps and Customisation
Hacking with B2G – Web Apps and CustomisationHacking with B2G – Web Apps and Customisation
Hacking with B2G – Web Apps and CustomisationRobin Hawkes
 
Open Business @ DMY Berlin 2011 - MakerLab
Open Business @ DMY Berlin 2011 - MakerLabOpen Business @ DMY Berlin 2011 - MakerLab
Open Business @ DMY Berlin 2011 - MakerLabMassimo Menichinelli
 
Mozilla Firefox: Present and Future - Fluent JS
Mozilla Firefox: Present and Future - Fluent JSMozilla Firefox: Present and Future - Fluent JS
Mozilla Firefox: Present and Future - Fluent JSRobin Hawkes
 
Cloud Computing World Forum 2010
Cloud Computing World Forum 2010Cloud Computing World Forum 2010
Cloud Computing World Forum 2010guestb41600
 
MelbJS - Inside Rawkets
MelbJS - Inside RawketsMelbJS - Inside Rawkets
MelbJS - Inside RawketsRobin Hawkes
 
Panel - Beefing Up Blockchain How Blockchain Can Transform the Beef Supply Chain
Panel - Beefing Up Blockchain How Blockchain Can Transform the Beef Supply ChainPanel - Beefing Up Blockchain How Blockchain Can Transform the Beef Supply Chain
Panel - Beefing Up Blockchain How Blockchain Can Transform the Beef Supply ChainJohn Blue
 
HTML5 easy if you know how
HTML5 easy if you know howHTML5 easy if you know how
HTML5 easy if you know howJorge del Casar
 
Trends & Momentum in Events - 2013
Trends & Momentum in Events - 2013Trends & Momentum in Events - 2013
Trends & Momentum in Events - 2013Randle Stonier
 
WebSockets - Embracing the real-time Web
WebSockets - Embracing the real-time WebWebSockets - Embracing the real-time Web
WebSockets - Embracing the real-time WebRobin Hawkes
 
Social media time saving tips
Social media time saving tipsSocial media time saving tips
Social media time saving tipsMilena Regos
 
Ya Don't Have to be Orson Welles
Ya Don't Have to be Orson WellesYa Don't Have to be Orson Welles
Ya Don't Have to be Orson WellesDarren Kuropatwa
 
2008 I N F O R M A T I O N T E C H N O L O G Y O U T L O O K 2008
2008  I N F O R M A T I O N  T E C H N O L O G Y  O U T L O O K 20082008  I N F O R M A T I O N  T E C H N O L O G Y  O U T L O O K 2008
2008 I N F O R M A T I O N T E C H N O L O G Y O U T L O O K 2008Madrid Network
 

Similar to Browserscene: Creating demos on the Web (16)

Inside Rawkets - onGameStart
Inside Rawkets - onGameStartInside Rawkets - onGameStart
Inside Rawkets - onGameStart
 
Tomorrow's Web and Future Technologies - WDC2011
Tomorrow's Web and Future Technologies - WDC2011Tomorrow's Web and Future Technologies - WDC2011
Tomorrow's Web and Future Technologies - WDC2011
 
Awesome Technology on the Web - Oxygen Accelerator
Awesome Technology on the Web - Oxygen AcceleratorAwesome Technology on the Web - Oxygen Accelerator
Awesome Technology on the Web - Oxygen Accelerator
 
Hacking with B2G – Web Apps and Customisation
Hacking with B2G – Web Apps and CustomisationHacking with B2G – Web Apps and Customisation
Hacking with B2G – Web Apps and Customisation
 
Open Business @ DMY Berlin 2011 - MakerLab
Open Business @ DMY Berlin 2011 - MakerLabOpen Business @ DMY Berlin 2011 - MakerLab
Open Business @ DMY Berlin 2011 - MakerLab
 
Mozilla Firefox: Present and Future - Fluent JS
Mozilla Firefox: Present and Future - Fluent JSMozilla Firefox: Present and Future - Fluent JS
Mozilla Firefox: Present and Future - Fluent JS
 
Cloud Computing World Forum 2010
Cloud Computing World Forum 2010Cloud Computing World Forum 2010
Cloud Computing World Forum 2010
 
MelbJS - Inside Rawkets
MelbJS - Inside RawketsMelbJS - Inside Rawkets
MelbJS - Inside Rawkets
 
Panel - Beefing Up Blockchain How Blockchain Can Transform the Beef Supply Chain
Panel - Beefing Up Blockchain How Blockchain Can Transform the Beef Supply ChainPanel - Beefing Up Blockchain How Blockchain Can Transform the Beef Supply Chain
Panel - Beefing Up Blockchain How Blockchain Can Transform the Beef Supply Chain
 
HTML5 easy if you know how
HTML5 easy if you know howHTML5 easy if you know how
HTML5 easy if you know how
 
Cvs
CvsCvs
Cvs
 
Trends & Momentum in Events - 2013
Trends & Momentum in Events - 2013Trends & Momentum in Events - 2013
Trends & Momentum in Events - 2013
 
WebSockets - Embracing the real-time Web
WebSockets - Embracing the real-time WebWebSockets - Embracing the real-time Web
WebSockets - Embracing the real-time Web
 
Social media time saving tips
Social media time saving tipsSocial media time saving tips
Social media time saving tips
 
Ya Don't Have to be Orson Welles
Ya Don't Have to be Orson WellesYa Don't Have to be Orson Welles
Ya Don't Have to be Orson Welles
 
2008 I N F O R M A T I O N T E C H N O L O G Y O U T L O O K 2008
2008  I N F O R M A T I O N  T E C H N O L O G Y  O U T L O O K 20082008  I N F O R M A T I O N  T E C H N O L O G Y  O U T L O O K 2008
2008 I N F O R M A T I O N T E C H N O L O G Y O U T L O O K 2008
 

More from Robin Hawkes

ViziCities - Lessons Learnt Visualising Real-world Cities in 3D
ViziCities - Lessons Learnt Visualising Real-world Cities in 3DViziCities - Lessons Learnt Visualising Real-world Cities in 3D
ViziCities - Lessons Learnt Visualising Real-world Cities in 3DRobin Hawkes
 
Understanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationRobin Hawkes
 
Calculating building heights using a phone camera
Calculating building heights using a phone cameraCalculating building heights using a phone camera
Calculating building heights using a phone cameraRobin Hawkes
 
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big DataWebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big DataRobin Hawkes
 
Understanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationRobin Hawkes
 
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGLViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGLRobin Hawkes
 
Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3Robin Hawkes
 
The State of WebRTC
The State of WebRTCThe State of WebRTC
The State of WebRTCRobin Hawkes
 
Bringing Cities to Life Using Big Data & WebGL
Bringing Cities to Life Using Big Data & WebGLBringing Cities to Life Using Big Data & WebGL
Bringing Cities to Life Using Big Data & WebGLRobin Hawkes
 
Mobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & HelpersMobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & HelpersRobin Hawkes
 
The State of HTML5 Games - Fluent JS
The State of HTML5 Games - Fluent JSThe State of HTML5 Games - Fluent JS
The State of HTML5 Games - Fluent JSRobin Hawkes
 
HTML5 Technologies for Game Development - Web Directions Code
HTML5 Technologies for Game Development - Web Directions CodeHTML5 Technologies for Game Development - Web Directions Code
HTML5 Technologies for Game Development - Web Directions CodeRobin Hawkes
 
MDN Hackday London - Open Web Games with HTML5 & JavaScript
MDN Hackday London - Open Web Games with HTML5 & JavaScriptMDN Hackday London - Open Web Games with HTML5 & JavaScript
MDN Hackday London - Open Web Games with HTML5 & JavaScriptRobin Hawkes
 
HTML5 Games - Not Just for Gamers
HTML5 Games - Not Just for GamersHTML5 Games - Not Just for Gamers
HTML5 Games - Not Just for GamersRobin Hawkes
 
Open Web Games with HTML5 & JavaScript
Open Web Games with HTML5 & JavaScriptOpen Web Games with HTML5 & JavaScript
Open Web Games with HTML5 & JavaScriptRobin Hawkes
 
Open Web Games with HTML5 & JavaScript
Open Web Games with HTML5 & JavaScriptOpen Web Games with HTML5 & JavaScript
Open Web Games with HTML5 & JavaScriptRobin Hawkes
 
Open Web Games using HTML5 & JavaScript
Open Web Games using HTML5 & JavaScriptOpen Web Games using HTML5 & JavaScript
Open Web Games using HTML5 & JavaScriptRobin Hawkes
 

More from Robin Hawkes (17)

ViziCities - Lessons Learnt Visualising Real-world Cities in 3D
ViziCities - Lessons Learnt Visualising Real-world Cities in 3DViziCities - Lessons Learnt Visualising Real-world Cities in 3D
ViziCities - Lessons Learnt Visualising Real-world Cities in 3D
 
Understanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisation
 
Calculating building heights using a phone camera
Calculating building heights using a phone cameraCalculating building heights using a phone camera
Calculating building heights using a phone camera
 
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big DataWebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
 
Understanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisation
 
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGLViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
 
Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3
 
The State of WebRTC
The State of WebRTCThe State of WebRTC
The State of WebRTC
 
Bringing Cities to Life Using Big Data & WebGL
Bringing Cities to Life Using Big Data & WebGLBringing Cities to Life Using Big Data & WebGL
Bringing Cities to Life Using Big Data & WebGL
 
Mobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & HelpersMobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & Helpers
 
The State of HTML5 Games - Fluent JS
The State of HTML5 Games - Fluent JSThe State of HTML5 Games - Fluent JS
The State of HTML5 Games - Fluent JS
 
HTML5 Technologies for Game Development - Web Directions Code
HTML5 Technologies for Game Development - Web Directions CodeHTML5 Technologies for Game Development - Web Directions Code
HTML5 Technologies for Game Development - Web Directions Code
 
MDN Hackday London - Open Web Games with HTML5 & JavaScript
MDN Hackday London - Open Web Games with HTML5 & JavaScriptMDN Hackday London - Open Web Games with HTML5 & JavaScript
MDN Hackday London - Open Web Games with HTML5 & JavaScript
 
HTML5 Games - Not Just for Gamers
HTML5 Games - Not Just for GamersHTML5 Games - Not Just for Gamers
HTML5 Games - Not Just for Gamers
 
Open Web Games with HTML5 & JavaScript
Open Web Games with HTML5 & JavaScriptOpen Web Games with HTML5 & JavaScript
Open Web Games with HTML5 & JavaScript
 
Open Web Games with HTML5 & JavaScript
Open Web Games with HTML5 & JavaScriptOpen Web Games with HTML5 & JavaScript
Open Web Games with HTML5 & JavaScript
 
Open Web Games using HTML5 & JavaScript
Open Web Games using HTML5 & JavaScriptOpen Web Games using HTML5 & JavaScript
Open Web Games using HTML5 & JavaScript
 

Recently uploaded

So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Scott Andery
 
Visualising and forecasting stocks using Dash
Visualising and forecasting stocks using DashVisualising and forecasting stocks using Dash
Visualising and forecasting stocks using Dashnarutouzumaki53779
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 

Recently uploaded (20)

So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
 
Visualising and forecasting stocks using Dash
Visualising and forecasting stocks using DashVisualising and forecasting stocks using Dash
Visualising and forecasting stocks using Dash
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 

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
  • 26. Slamdown from the Mozilla Flame Party Helsinki http://traction.untergrund.net/slamdown/
  • 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.
  • 53. Gaming engines, like Impact and Isogenic Engine.
  • 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