Awesome Technology on the Web - Oxygen Accelerator

IP T CR AS b J V A the We 5 on & ML logy bH aw kes HT echno Ro e T om wes AHi, I’m Rob Hawkes and I’m here to talk a little about HTML5 & JavaScript to show you someof the awesome things that you can do with them.

If you don’t already know, I work at Mozilla.My official job title is Technical Evangelist, but I prefer Rawket Scientist, which is what it sayson my business card.Part of my job is to engage with developers and related communities about cool newtechnologies on the Web.And for those of you with no idea of what Rawket means, 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 quite addictive!http://rawkets.com

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

Also, please don’t hesitate to ask a question as we go along.All I ask is that you raise your hand and I’ll get to you as soon as I can.It’s worth noting that these slides will be online on my blog very soon if you want to see themagain or want to check out the notes.

It’s worth mentioning that I’m in jet-lag and travel-confusion mode at the moment.I flew back from the US last week only to then travel to Poland for a HTML5 gamingconference a couple days later.I only got back from there this past Saturday evening to find myself jumping on a train fromBournemouth at 6am today to come see you guys.It’s a lot of travelling and it can be massively confusing, especially when you sleep throughthe entire flight to Poland and realise that you could be in any city in the world right now,although it did turn out to be Warsaw which *is* in Poland and luckily the right city.I am in England now, right?

ipt Scr Java about? 5 & fuss L M at is all the HT h WI mentioned that this talk is all about HTML5 & JavaScript, but why are they important? What’sall the fuss about?

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.Just a few days ago I was in a W3C meeting to explore what is needed for making games withthese technologies. 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 on anyplatform 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 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 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

tes uri vo es y fa featur M estn ew theb e som hting lig HighThere are so many new features that HTML5 & JavaScript bring to the table. So many in factthat 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 spikeyour imagination.

vas an C tfo rm pla ics raph g 2DAs 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 thatcanvas and manipulate it.It’s quite amazingly what can be done with such simple drawing and image manipulationtools.

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 team.http://ro.me

Tinkercad is probably the best 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 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

e.js od N server he nt to Scrip Java RunNode isn’t technically part of the new HTML5 & JavaScript technologies, but it’s too cool tomiss out.Effectively what Node allows you to do is to run JavaScript code on the server, which hasmany benefits.The major benefit is that your code can run asynchronously, which means that you can domultiple 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 freemodules for it to add extra functionality, which means that it saves you a tonne of time whenmaking your Web app.http://nodejs.org

o re y m an Web M d on the ge chan as uchh MThere are so many thing that I don’t have time to talk about.Things like CSS3, HTML5 Forms, Web Fonts, File APIs, Web Apps and much, much more!There are loads of resources around to help you ﬁnd out more about these technologies ifyou’re interested:Dive Into HTML5 - http://diveintohtml5.orgHTML5 Doctor - http://html5doctor.comMozilla Developer Network - https://developer.mozilla.org

tu re e fu ng Th gin ni be tthe nlya areo WeAs well as the current technologies that exist in HTML5 & JavaScript there are also someimportant one coming in the near-future.Things like Web APIs to provide a basic phone experience on the Web.Or WebRTC to provide real-time audio/visual communication, like Skype.And I’m sure there’s even more amazing stuff on the horizon.

o l g co thin s now e m The timei f so ld o o resh ThSo overall, the time is now; we’re on the threshold of something awesome.We can now create amazing apps, visualisations, and games with nothing more than thetechnologies normally use to build a website.This is deﬁnitely a good time to be developing on the Web and I hope I’ve managed to peakyour interest in the platform.

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 podcastTwitter - @robhawkesRawkes - http://rawkes.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/FOUNDATIONCANVASFoundation HTML5 Canvas is out now on Amazon and other reputable book stores.http://rawkes.com/foundationcanvas

Ask MDN One hour every fortnight Web development topics ASKMDN 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 emailrob@rawkes.com

http://paper.li	40
http://wiederspielwert.soup.io	1
http://wiederspielwert.parasoup.de	1

Awesome Technology on the Web - Oxygen Accelerator

by Rob Hawkes

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 42

Statistics

Awesome Technology on the Web - Oxygen Accelerator Document Transcript