SlideShare a Scribd company logo
1 of 61
Download to read offline
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.

More Related Content

What's hot

Python in education
Python in education Python in education
Python in education pyconfi
 
Geek Meet - Boot to Gecko: The Future of Mobile?
Geek Meet - Boot to Gecko: The Future of Mobile?Geek Meet - Boot to Gecko: The Future of Mobile?
Geek Meet - Boot to Gecko: The Future of Mobile?Robin Hawkes
 
MDN Hackday London - Boot to Gecko: The Future of Mobile
MDN Hackday London - Boot to Gecko: The Future of MobileMDN Hackday London - Boot to Gecko: The Future of Mobile
MDN Hackday London - Boot to Gecko: The Future of MobileRobin Hawkes
 
PHP Doesn't Suck - Notes
PHP Doesn't Suck - NotesPHP Doesn't Suck - Notes
PHP Doesn't Suck - NotesJohn Hobbs
 
Browserscene: Creating demos on the Web
Browserscene: Creating demos on the WebBrowserscene: Creating demos on the Web
Browserscene: Creating demos on the WebRobin 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
 

What's hot (6)

Python in education
Python in education Python in education
Python in education
 
Geek Meet - Boot to Gecko: The Future of Mobile?
Geek Meet - Boot to Gecko: The Future of Mobile?Geek Meet - Boot to Gecko: The Future of Mobile?
Geek Meet - Boot to Gecko: The Future of Mobile?
 
MDN Hackday London - Boot to Gecko: The Future of Mobile
MDN Hackday London - Boot to Gecko: The Future of MobileMDN Hackday London - Boot to Gecko: The Future of Mobile
MDN Hackday London - Boot to Gecko: The Future of Mobile
 
PHP Doesn't Suck - Notes
PHP Doesn't Suck - NotesPHP Doesn't Suck - Notes
PHP Doesn't Suck - Notes
 
Browserscene: Creating demos on the Web
Browserscene: Creating demos on the WebBrowserscene: Creating demos on the Web
Browserscene: Creating demos on the Web
 
Open Business @ DMY Berlin 2011 - MakerLab
Open Business @ DMY Berlin 2011 - MakerLabOpen Business @ DMY Berlin 2011 - MakerLab
Open Business @ DMY Berlin 2011 - MakerLab
 

Viewers also liked

Cahokia:Collapsing Inot Thin Air
Cahokia:Collapsing Inot Thin AirCahokia:Collapsing Inot Thin Air
Cahokia:Collapsing Inot Thin Airkatmoore
 
Music In Education
Music In EducationMusic In Education
Music In Educations.jdisbell
 
Angitha
AngithaAngitha
Angitharoyroy
 
040330 Firenze 04 International Cooperation C
040330 Firenze 04 International Cooperation C040330 Firenze 04 International Cooperation C
040330 Firenze 04 International Cooperation CDov Winer
 
งานนำเสนอ1
งานนำเสนอ1งานนำเสนอ1
งานนำเสนอ1wannis
 
Print Media - School Sport Design Portfolio
Print Media - School Sport Design PortfolioPrint Media - School Sport Design Portfolio
Print Media - School Sport Design Portfolioguesta0a1d1
 
66条禅语,茶具欣赏feeling dhyana words and tea
66条禅语,茶具欣赏feeling dhyana words and tea66条禅语,茶具欣赏feeling dhyana words and tea
66条禅语,茶具欣赏feeling dhyana words and teayangbqada
 
YP-T8 Samsung Handbuch
YP-T8 Samsung HandbuchYP-T8 Samsung Handbuch
YP-T8 Samsung Handbuchjulia135
 
Dr Anil Khandelwal ss infotour
Dr Anil Khandelwal ss infotourDr Anil Khandelwal ss infotour
Dr Anil Khandelwal ss infotourguestfc8a87
 
2012.06.28 Learning Sessions 2 - ArtBridge
2012.06.28 Learning Sessions 2 - ArtBridge2012.06.28 Learning Sessions 2 - ArtBridge
2012.06.28 Learning Sessions 2 - ArtBridgejvielman
 
040709 Iajgs Powerful Technologies Genealogy
040709 Iajgs Powerful Technologies Genealogy040709 Iajgs Powerful Technologies Genealogy
040709 Iajgs Powerful Technologies GenealogyDov Winer
 
Amazing nature
Amazing natureAmazing nature
Amazing natureyangbqada
 
2012.09.27 Learning Sessions 3 - Aurora Picture Show
2012.09.27 Learning Sessions 3 - Aurora Picture Show2012.09.27 Learning Sessions 3 - Aurora Picture Show
2012.09.27 Learning Sessions 3 - Aurora Picture Showjvielman
 

Viewers also liked (20)

Cahokia:Collapsing Inot Thin Air
Cahokia:Collapsing Inot Thin AirCahokia:Collapsing Inot Thin Air
Cahokia:Collapsing Inot Thin Air
 
Music In Education
Music In EducationMusic In Education
Music In Education
 
Pakej Perkhidmatan INSPIRASI BAKAT
Pakej Perkhidmatan INSPIRASI BAKATPakej Perkhidmatan INSPIRASI BAKAT
Pakej Perkhidmatan INSPIRASI BAKAT
 
Yahoo pipes
Yahoo pipesYahoo pipes
Yahoo pipes
 
Aneka BETEBEDI
Aneka BETEBEDI Aneka BETEBEDI
Aneka BETEBEDI
 
GLOSARIO
GLOSARIOGLOSARIO
GLOSARIO
 
Angitha
AngithaAngitha
Angitha
 
040330 Firenze 04 International Cooperation C
040330 Firenze 04 International Cooperation C040330 Firenze 04 International Cooperation C
040330 Firenze 04 International Cooperation C
 
May 28 2010
May 28 2010May 28 2010
May 28 2010
 
งานนำเสนอ1
งานนำเสนอ1งานนำเสนอ1
งานนำเสนอ1
 
Print Media - School Sport Design Portfolio
Print Media - School Sport Design PortfolioPrint Media - School Sport Design Portfolio
Print Media - School Sport Design Portfolio
 
66条禅语,茶具欣赏feeling dhyana words and tea
66条禅语,茶具欣赏feeling dhyana words and tea66条禅语,茶具欣赏feeling dhyana words and tea
66条禅语,茶具欣赏feeling dhyana words and tea
 
Talent Revolution Workshop
Talent Revolution WorkshopTalent Revolution Workshop
Talent Revolution Workshop
 
YP-T8 Samsung Handbuch
YP-T8 Samsung HandbuchYP-T8 Samsung Handbuch
YP-T8 Samsung Handbuch
 
Dr Anil Khandelwal ss infotour
Dr Anil Khandelwal ss infotourDr Anil Khandelwal ss infotour
Dr Anil Khandelwal ss infotour
 
2012.06.28 Learning Sessions 2 - ArtBridge
2012.06.28 Learning Sessions 2 - ArtBridge2012.06.28 Learning Sessions 2 - ArtBridge
2012.06.28 Learning Sessions 2 - ArtBridge
 
Mars
MarsMars
Mars
 
040709 Iajgs Powerful Technologies Genealogy
040709 Iajgs Powerful Technologies Genealogy040709 Iajgs Powerful Technologies Genealogy
040709 Iajgs Powerful Technologies Genealogy
 
Amazing nature
Amazing natureAmazing nature
Amazing nature
 
2012.09.27 Learning Sessions 3 - Aurora Picture Show
2012.09.27 Learning Sessions 3 - Aurora Picture Show2012.09.27 Learning Sessions 3 - Aurora Picture Show
2012.09.27 Learning Sessions 3 - Aurora Picture Show
 

Similar to HTML5 & JavaScript: The Future Now

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
 
Boot to Gecko – The Web as a Platform
Boot to Gecko – The Web as a PlatformBoot to Gecko – The Web as a Platform
Boot to Gecko – The Web as a PlatformRobin Hawkes
 
Firefox OS / B2G and the future of the web
Firefox OS / B2G and the future of the webFirefox OS / B2G and the future of the web
Firefox OS / B2G and the future of the webChristian Heilmann
 
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
 
Open Web Games using HTML5 & JavaScript
Open Web Games using HTML5 & JavaScriptOpen Web Games using HTML5 & JavaScript
Open Web Games using HTML5 & JavaScriptRobin Hawkes
 
Extracurricular Swift
Extracurricular SwiftExtracurricular Swift
Extracurricular SwiftSally Shepard
 
On Open Business @ EDUfashion conference - Ljubljana 02/06/2011
On Open Business @ EDUfashion conference - Ljubljana 02/06/2011On Open Business @ EDUfashion conference - Ljubljana 02/06/2011
On Open Business @ EDUfashion conference - Ljubljana 02/06/2011Massimo Menichinelli
 
Java based Cross-Platform Mobile Development
Java based Cross-Platform Mobile DevelopmentJava based Cross-Platform Mobile Development
Java based Cross-Platform Mobile DevelopmentPeter Friese
 
The Avalon Media System: A Next Generation Hydra Head for Audio and Video Del...
The Avalon Media System: A Next Generation Hydra Head for Audio and Video Del...The Avalon Media System: A Next Generation Hydra Head for Audio and Video Del...
The Avalon Media System: A Next Generation Hydra Head for Audio and Video Del...Avalon Media System
 
WebSockets - Embracing the real-time Web
WebSockets - Embracing the real-time WebWebSockets - Embracing the real-time Web
WebSockets - Embracing the real-time WebRobin 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
 
The Future of TV
The Future of TV The Future of TV
The Future of TV Distilled
 

Similar to HTML5 & JavaScript: The Future Now (13)

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
 
Boot to Gecko – The Web as a Platform
Boot to Gecko – The Web as a PlatformBoot to Gecko – The Web as a Platform
Boot to Gecko – The Web as a Platform
 
Firefox OS / B2G and the future of the web
Firefox OS / B2G and the future of the webFirefox OS / B2G and the future of the web
Firefox OS / B2G and the future of the web
 
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
 
Open Web Games using HTML5 & JavaScript
Open Web Games using HTML5 & JavaScriptOpen Web Games using HTML5 & JavaScript
Open Web Games using HTML5 & JavaScript
 
Extracurricular Swift
Extracurricular SwiftExtracurricular Swift
Extracurricular Swift
 
On Open Business @ EDUfashion conference - Ljubljana 02/06/2011
On Open Business @ EDUfashion conference - Ljubljana 02/06/2011On Open Business @ EDUfashion conference - Ljubljana 02/06/2011
On Open Business @ EDUfashion conference - Ljubljana 02/06/2011
 
Java based Cross-Platform Mobile Development
Java based Cross-Platform Mobile DevelopmentJava based Cross-Platform Mobile Development
Java based Cross-Platform Mobile Development
 
The Avalon Media System: A Next Generation Hydra Head for Audio and Video Del...
The Avalon Media System: A Next Generation Hydra Head for Audio and Video Del...The Avalon Media System: A Next Generation Hydra Head for Audio and Video Del...
The Avalon Media System: A Next Generation Hydra Head for Audio and Video Del...
 
WebSockets - Embracing the real-time Web
WebSockets - Embracing the real-time WebWebSockets - Embracing the real-time Web
WebSockets - Embracing the real-time Web
 
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
 
The Future of TV
The Future of TV The Future of TV
The Future of TV
 
Flutter
FlutterFlutter
Flutter
 

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
 
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 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
 
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
 
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
 
HTML5 Games - Not Just for Gamers
HTML5 Games - Not Just for GamersHTML5 Games - Not Just for Gamers
HTML5 Games - Not Just for GamersRobin Hawkes
 

More from Robin Hawkes (15)

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
 
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 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
 
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
 
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
 
HTML5 Games - Not Just for Gamers
HTML5 Games - Not Just for GamersHTML5 Games - Not Just for Gamers
HTML5 Games - Not Just for Gamers
 

Recently uploaded

Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
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
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructureitnewsafrica
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.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
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
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
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationKnoldus Inc.
 
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
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 

Recently uploaded (20)

Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
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
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.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
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
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
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog Presentation
 
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
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 

HTML5 & JavaScript: The Future Now

  • 1. 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.
  • 2. 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.
  • 3. 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
  • 4. Like Kerri-Anne I’m also a recent graduate, last May I finished my degree in Interactive Media Production at Bournemouth University.
  • 5. 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.
  • 6. 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.
  • 7. 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?
  • 8. 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.
  • 9. 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.
  • 10. 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.
  • 11. 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.
  • 12. 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.
  • 13. 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.
  • 14. There’s a fantastic website called Can I Use which lets you know what browsers support each technology. http://caniuse.com
  • 15. 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.
  • 16. 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.
  • 17. <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.
  • 18. <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
  • 19. s orm F ssle a ha of less ut inp aking M Forms are another area of HTML5 that got a big upgrade.
  • 20. 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.
  • 21. 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/
  • 22. <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.
  • 23. 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.
  • 24. 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.
  • 25. 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.
  • 26. 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
  • 27. 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
  • 28. 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
  • 29. 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.
  • 30. Silk is a stunning example of what can be achieved by combining the simple drawing tools available in canvas. http://weavesilk.com
  • 31. 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/
  • 32. 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/
  • 33. 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
  • 34. 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.
  • 35. 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/
  • 36. 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
  • 37. 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
  • 38. 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
  • 39. 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.
  • 40. 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
  • 41. 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
  • 42. 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.
  • 43. 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/
  • 44. 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.
  • 45. 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
  • 46. 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
  • 47. 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.
  • 48. 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/
  • 49. 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.
  • 50. 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.
  • 51. 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
  • 52. 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
  • 53. 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
  • 54. 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
  • 55. 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
  • 56. 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
  • 57. 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.
  • 58. 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
  • 59. 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
  • 60. 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
  • 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.