I work at Mozilla.If you’re unsure about how much I love Mozilla then check out this beautiful chicken and leekpie 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 newtechnologies on the Web.And for those of you with no idea of what a rawket is, I made a multiplayer game calledRawkets in which players ﬂy around in little rockets and shoot each other in the face with thelatest Web technologies.It’s actually quite fun!http://rawkets.com
Like Kerri-Anne I’m also a recent graduate, last May I ﬁnished my degree in Interactive MediaProduction at Bournemouth University.
We should have enough time for questions at the end but also feel free to grab me in personafter 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.
ies log n o de ch source te he co en t Op nv iew ca yone AnThey are open technologies.Anyone can get involved in their creation; through browser developers like Mozilla, orthrough 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 thesetechnologies. What was cool was that anyone was allowed to take part; which includedeveryday developers, employees of major browsers, and games companies.Also, these technologies are open in that anyone can view the resulting code that is usedwithin 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 FreeThey are free technologies.Anyone can use these technologies without having to pay anything, both for using thetechnology and developing with it.This is unlike closed environments like Flash where you have to pay to use official codeeditors and production environments.
less - in ware lug P soft rty d-pa thir on ce elian orer NomThey 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 richmedia.
b le e ra s rop rm Inte ss pla tfo cro orka ttow buil are ey ThThese technologies are built to work across platforms; whether that’s desktop, mobile, TV, oranything else!This makes it great to develop this way because you can be sure that it will work the sameway 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 MAs with any technology on the Web it’s important that you can use it across all the majorbrowsers.Fortunately the bigger and older features of HTML5 like video are supported by all the majorbrowsers, with some of the newer and smaller features getting better support as time goeson.The situation isn’t perfect but we’re deﬁnitely in a position where these technologies can nowbe used in production.
There’s a fantastic website called Can I Use which lets you know what browsers support eachtechnology.http://caniuse.com
n t n te c o eb n d rn W a de tu re for am o uc ts Str elem en ew NSome 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 logicalthemes 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 likecopyright 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 bedistributed through multiple methods (like RSS), commonly things like blog posts and newsarticles.<aside> describes an area of content that is related to the content surrounding it but thatisn’t that important within itself, commonly things like pull-quotes.
<figure> <figcaption> <mark> <time><ﬁgure> describes content that annotates the surrounding content using something like animage, video, or code.<ﬁgcaption> describes the caption of <ﬁgure> content and should therefore be placedwithin the <ﬁgure> element.<mark> describes words and phrases that are considered important for the purpose ofreferencing, 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 MForms are another area of HTML5 that got a big upgrade.
type=… email, tel, url date color rangeThere 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 toremove or add relevant keys. For example, only showing numbers for an input ﬁeld with atype 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 deﬁned 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 ﬁle that’suploading.<meter> describes part of a form that shows a measured outcome, like the ﬁnal grade out of10 in an exam.<output> describes part of a form that shows the results of a calculation performed by theform itself.
Security and peace of mind is of paramount importance with the new features beingintroduced.The Geolocation API is no exception and a browser will only be able to access your personalinformation if you explicitly allow it to each and every time.
PI n A re e ul Sc we rf ull et po F im ple ,y SThe Full Screen API allows you to expand any HTML element to ﬁll the users screen, even ifthe 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=545812http://blog.pearce.org.nz/2011/09/mozilla-full-screen-api-progress-update.htmlhttps://wiki.mozilla.org/Platform/Features/Full_Screen_APIs
Silk is a stunning example of what can be achieved by combining the simple drawing toolsavailable in canvas.http://weavesilk.com
Close Pixelate is a canvas app that lets you manipulate images on–the-ﬂy to create apixelated 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 achievethis.http://desandro.com/portfolio/
Google Plus has a seriously cool feature that lets you take a screenshot of a page andhighlight areas of interest. It’s great as a user can highlight areas of a problem and submitthe screenshot for feedback.I’m unsure if they are using canvas here, but it’s not impossible for canvas to be used in thisway and it’s a really innovative use of the technology.https://plus.google.com
GL eb W form lat sp hic grap 3DWebGL 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 abeautiful 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 technologycan 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 productionsituation.It’s a Web app that allows you to create 3D objects in your browser using WebGL, then getthem 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’tmuch 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 TheHTML5 video is one of the biggest improvements with HTML5; no longer do you have to relyon Flash to provide rich video on the Web.
SublimeVideo is a service that allows you to implement beautiful HTML5 video across all themajor 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 automaticallychange 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 MoreAlong with HTML5 video comes HTML5 audio, which again means that there is now alegitimate 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-dWebSockets are another technology at the top of my list.It allows you to provide bi-directional real-time communication between a browser and aserver.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, thestock market, and chat.
Rawkets is the game I mentioned at the beginning that allows you to shoot your friends in theface 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
tes uri avo for y f ait tw M Ican no Is AP evice DThere are so many Device APIs in the pipeline when you combine all the efforts by the variousbrowser manufacturers.Here are just a few of my favourites.
P I C A NF ion eb un icat W m om sc les wire -like RFIDThe WebNFC API is pretty cool.It gives you the ability to transmit and receive data within distances no larger than a fewcentimetres.The idea is that it can be used in phones for things like payment (like the new Barclaycard),travel (think Oyster Card), and ﬁle transfer.https://bugzilla.mozilla.org/show_bug.cgi?id=674741
P I r A ra to ies Vib hn olog eb nt ec W itho pe youw ating VibrBut my new favourite by far is the WebVibrator API, it just makes me laugh every time I hearit.https://bugzilla.mozilla.org/show_bug.cgi?id=679966
Foundation HTML5 Canvas Out now Paperback and digital formats Become a canvas master Learn how to animate Make two cool space games RAWKES.COM/FOUNDATIONCANVASFoundation 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 TWITTERAnd lastly, I’d like to quickly mention Ask MDN which is a project that I’m working on atMozilla.The concept is simple. One hour every fortnight we gather a bunch of experts on Twitter toanswer your questions about a particular topic.We’ve had 4 sessions to date and it’s going down really well. If you follow @AskMDN onTwitter 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 firstname.lastname@example.org.