Downloaded 31 times
Uploaded byRobin Hawkes
Awesome Technology on the Web - Oxygen Accelerator
Rob Hawkes gives a presentation on HTML5 and JavaScript technologies. He discusses how these technologies are open, free, plugin-less, cross-platform, and supported by major browsers. He highlights several features including the canvas element for 2D graphics, WebGL for 3D graphics, HTML5 video and audio, WebSockets for real-time communication, and Node.js for server-side JavaScript. Hawkes provides examples of impressive projects built with these technologies and discusses emerging APIs. He encourages the audience that now is a good time to develop with these technologies.
More Related Content
Similar to Awesome Technology on the Web - Oxygen Accelerator
Awesome Technology on the Web - Oxygen Accelerator
- 1. IP T CR AS b J V A the We 5 on & ML logy bH aw kes HT echno Ro e T om wes A Hi, I’m Rob Hawkes and I’m here to talk a little about HTML5 & JavaScript to show you some of the awesome things that you can do with them.
- 2. If you don’talready know, I work at Mozilla. My official job title is Technical Evangelist, but I prefer Rawket Scientist, which is what it says on my business card. Part of my job is to engage with developers and related communities about cool new technologies on the Web. And for those of you with no idea of what Rawket means, 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 quite addictive! http://rawkets.com
- 3. Created by PhilBanks (@emirpprime) Now it’s no secret that I spend most of my time experimenting with HTML5 and other cool technologies. If you’ve met me before then you probably already know about my slight addiction to HTML5 canvas and visual programming.
- 4. Also, please don’thesitate 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 them again or want to check out the notes.
- 5. It’s worth mentioningthat 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 gaming conference a couple days later. I only got back from there this past Saturday evening to find myself jumping on a train from Bournemouth at 6am today to come see you guys. It’s a lot of travelling and it can be massively confusing, especially when you sleep through the 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?
- 6. ipt Scr Java about? 5 & fuss L M at is all the HT h W I mentioned that this talk is all about HTML5 & JavaScript, but why are they important? What’s all the fuss about?
- 7. 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. Just a few days 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.
- 8. 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.
- 9. 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.
- 10. 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 on any platform that has support.
- 11. 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 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
- 12. 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.
- 13. 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.
- 14. Silk is astunning example of what can be achieved by combining the simple drawing tools available in canvas. http://weavesilk.com
- 15. Close Pixelate isa canvas app that lets you manipulate images on–the-fly to create a pixelated effect. http://desandro.com/resources/close-pixelate/
- 16. You can evenuse 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/
- 17. Google Plus hasa 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
- 18. 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.
- 19. HelloRacer is alittle 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/
- 20. Rome is amusic video created with WebGL. It’s an amazing example of what the technology can achieve in a real-world situation given a large team. http://ro.me
- 21. Tinkercad is probablythe 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 get them printed and sent to your doorstep in just a few simple clicks. It’s seriously awesome. https://tinkercad.com
- 22. This is arather 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
- 23. 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.
- 24. SublimeVideo is aservice 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
- 25. Popcorn.js is quitesimply 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
- 26. 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.
- 27. This is somethingI 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/
- 28. 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.
- 29. Rawkets is thegame 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
- 30. Pusher is aservice 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
- 31. 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
- 32. 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 CSS3, HTML5 Forms, Web Fonts, File APIs, Web Apps 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
- 33. tu re e fu ng Th gin ni be tthe nlya areo We As well as the current technologies that exist in HTML5 & JavaScript there are also some important 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.
- 34. o l g co thin s now e m The timei f so ld o o resh Th So 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 the technologies normally use to build a website. This is definitely a good time to be developing on the Web and I hope I’ve managed to peak your interest in the platform.
- 35. 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 Twitter - @robhawkes Rawkes - http://rawkes.com
- 36. 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
- 37. Ask MDN One hour every fortnight Web development topics ASKMDN 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
- 38. 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 [email protected]