Successfully reported this slideshow.
Your SlideShare is downloading. ×

Browserscene: Creating demos on the Web

Advertisement

More Related Content

Advertisement
Advertisement

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Browserscene: Creating demos on the Web

  1. 1. NE CE S b R e E W S he W on t O os kes R m B de Ro bH aw ing at Cre Hi, I’m Rob Hawkes and I’m here tonight to talk a little about creating demos using the latest Web technologies. I call it the browserscene, but feel free to call it the demoscene on the Web.
  2. 2. If you don’t already know, I work at Mozilla. My official job title is Technical Evangelist, but I prefer Rawket Scientist, which is what it says on my business card. Part of my job is to engage with people like you and me about cool new technologies on the Web.
  3. 3. Created by Phil Banks (@emirpprime) Aside from that I spend most of my time experimenting with HTML5 and other cool technologies. I basically have an addiction to visual programming and hacking around with code. It’s fun!
  4. 4. I’ve never been to Finland before, and for some reason I thought it would be really cold over here. Turns out it’s hotter than England, and way flatter than I imagined!
  5. 5. yo u r fo xists dy rea hnolog ye are he tec sers T row B Over the past few years browsers have come on leaps and bounds with the types of things that they can do. What’s been particularly interesting is the focus on audio and visual media with the introduction of HTML5 and JavaScript APIs. This now allows us to create things like this…
  6. 6. This is No Comply, a WebGL and audio demo created by Mozilla volunteers to show off the technologies. http://hacks.mozilla.org/2011/03/nocomply/
  7. 7. s? g ie o lo rs c hn ow se e br e t da y’s th res in to are tu at Fea Wh Let’s run through some of the most interesting of these new technologies, the kind of ones you might want to use.
  8. 8. GL eb & W phics vas 3D gra an and C 2D Canvas & WebGL https://developer.mozilla.org/en/html/canvas https://developer.mozilla.org/en/WebGL
  9. 9. eo Vid ti on ipula an dm an ck ba lay op Vide Video API https://developer.mozilla.org/en/Using_audio_and_video_in_Firefox
  10. 10. a ta io D ud ation & A an ipul dio an dm Au ba ck play dio Au Audio API + the Audio Data API https://developer.mozilla.org/en/Using_audio_and_video_in_Firefox https://developer.mozilla.org/en/Introducing_the_Audio_API_Extension
  11. 11. ion t ca are eolo ou G herey tw ou ing Find Geolocation https://developer.mozilla.org/en/Using_geolocation
  12. 12. e ts ock bS ation e W omm un ic ec l-tim Rea WebSockets https://developer.mozilla.org/en/WebSockets
  13. 13. n ts Fo eb ap hy & W typo gr S3 sa nd CS he et tyles ds de gra Up CSS3 & Web Fonts https://developer.mozilla.org/en/CSS https://developer.mozilla.org/en/css/@font-face
  14. 14. D B xed de ws er & In the bro age ta in tor ring da al S Sto oc L Local Storage & IndexedDB https://developer.mozilla.org/en/DOM/Storage https://developer.mozilla.org/en/IndexedDB
  15. 15. s? gie olo ns chn freaso te so ese Lot th use hy W So these technologies are cool and all, but why should you be using them over others, like Flash?
  16. 16. o l g co thin s now e m The timei f so ld o o resh Th In short, the time is now; we’re on the threshold of something awesome. We can now create amazing demos, visualisations, and games with nothing more than the technologies we would normally use to build a website. This is definitely a good time to be developing on the Web.
  17. 17. um inim ght a m ei tw igh s to ode isl ing he c th T ing eep K The code and assets are inherently lightweight. Text and image files don’t take up much space.
  18. 18. in s g lu ork n p o tw nce hings jus lia T o re N You don’t have to download and install anything for a demo to run; it just works. It’s just HTML and JavaScript.
  19. 19. ree is f n t ch e m er and spee lop eve as in be D Free Development can be completely free. You don’t need to pay for any editing tools. You could easily use a simple text editor, or the browser itself.
  20. 20. e n idd r h ve d o he lo pile Sharin gt com ’t e isn od C No compilation; the code is completely open for others to look at and learn from. I find this kind of open development gives me a warm and fuzzy feeling inside, but that might just be because I’m slightly crazy.
  21. 21. o s d em ed n e at rs ce lready cre se ea row ersh av g b oth at tin Wh Exis Now, let’s take a look at some of the cool demos that others have put together with these technologies.
  22. 22. Flight of the Navigator https://developer.mozilla.org/en-US/demos/detail/flight-of-the-navigator
  23. 23. Globe Tweeter https://developer.mozilla.org/en-US/demos/detail/globetweeter
  24. 24. Rofox https://developer.mozilla.org/en-US/demos/detail/rofox-css3-animation-by-anthony- calzadilla
  25. 25. CSS Nyan Cat https://developer.mozilla.org/en-US/demos/detail/css-nyan-cat
  26. 26. Slamdown from the Mozilla Flame Party Helsinki http://traction.untergrund.net/slamdown/
  27. 27. Infinite beanstalk http://www.inear.se/2011/07/the-beanstalk/
  28. 28. WebGL spiders http://oos.moxiecode.com/js_webgl/spiders/index.html
  29. 29. Silk http://weavesilk.com
  30. 30. Rome http://ro.me
  31. 31. WebGL photo particles http://lab.aerotwist.com/webgl/photoparticles/
  32. 32. HelloRacer http://helloracer.com/webgl/
  33. 33. Keylight http://hakim.se/experiments/html5/keylight/
  34. 34. This is something I made especially for Assembly. It’s an audio visualiser that uses WebGL and HTML5 Audio. If you stick around for my seminar at 1pm I’ll be running through the code behind this.
  35. 35. os d em m e r he o th ated t ot o f dic d s es de dre eb sit un arew H Th ere These are really just a few demos that are out there right now, and the list is growing every day! There are some great sites to keep track of the latest ones.
  36. 36. Mozilla Demo Studio https://developer.mozilla.org/en-US/demos/
  37. 37. Chrome Experiments http://www.chromeexperiments.com/
  38. 38. Creative JS http://creativejs.com
  39. 39. fo r u t h o rs a tc st othe o w ong s t ty, am ing pa tib ili Th rcom se Brow Creating demos with these technologies is great, but there are a few things to watch out for.
  40. 40. nce a rm ration fo cele e r s p ac va and an at ion C tim is Op Canvas performance and support. requestAnimationFrame, hardware acceleration, etc.
  41. 41. o rt p p su it GL ha ve eb sers W brow all Not Lack of WebGL support in some browsers. It’s not on IE, Opera, iOS, or Android… yet.
  42. 42. o rt p p I s u ve it AP ers ha ata row s io D ta ll b d No Au Lack of Audio Data API support in browsers. Right now, only Firefox and Chrome have some sort of Audio Data API.
  43. 43. o rt pp su it e ts ha ve ock brows ers bS all We Not And again lack of support, this time with WebSockets.
  44. 44. n e sc e s e r rces ro w res ou e b sa nd g th utorial rnin T Lea If you want to learn more about the browserscene and these technologies then you can find all you need online. Here are just a few of them…
  45. 45. Mozilla Developer Network https://developer.mozilla.org
  46. 46. Paul Lewis http://aerotwist.com/lab/
  47. 47. HTML5 Rocks http://www.html5rocks.com/en/
  48. 48. o rks e w nt ra m pm e d f evelo an gu pd ies eedin rar Sp Lib You don’t always have to roll your own solutions, though. There are a variety of libraries and frameworks out there that provide basic functionality and generally speed up development. I’m going to go over just a few of them, but I advise you to look for more if these don’t fulfil your requirements; there are a lot more out there.
  49. 49. jQuery
  50. 50. Three.js
  51. 51. Socket.IO
  52. 52. Box2dWeb
  53. 53. Gaming engines, like Impact and Isogenic Engine.
  54. 54. ld? ho ture g soon e fu f comin th ol stuf oes Co t d ha W So what does the future hold for the browserscene?
  55. 55. ro ls n t co rd tick keyboa ys ea nd Jo us o orem Nom Joystick DOM events so you can get a console-like experience.
  56. 56. PIs e A evic bcam D and we ne ho icrop them sing cces A Devices API to access data from peripherals, like a microphone or webcam. http://www.w3.org/2009/dap/ http://mozillalabs.com/rainbow/2011/08/04/whats-next-rainbow-and-webrtc/
  57. 57. io n ra t c e le ou nd a c ea ll r ar e rm a nc rdw pe rfo Ha Be tter Better hardware acceleration and performance in all areas.
  58. 58. ROB HAWKES @robhawkes Rawkes.com Personal website and blog RECENT PROJECTS MORE COOL STUFF Twitter sentiment analysis Mozilla Technical Evangelist Delving into your soul. My job Rawkets.com ExplicitWeb.co.uk HTML5 & WebSockets game. Web development podcast. Twitter - @robhawkes Rawkes - http://rawkes.com
  59. 59. DEV DERBY Experimenting with the latest Web technologies Every month This month is the History API Manipulate browser history Win prizes (like an Android) Next month is Geolocation DEVELOPER.MOZILLA.ORG/EN-US/DEMOS/DEVDERBY Also, you should definitely take part in the Dev Derby, which is a monthly competition run by the Mozilla Developer Network to see what can be done with the latest Web technologies. This month the focus is on the History API, which allows you to manipulate the history of the browser so things like AJAX don’t break anything. The winners get cool prizes, like an Android phone. It’s a great excuse to play around with these technologies. https://developer.mozilla.org/en-US/demos/devderby
  60. 60. FOUNDATION HTML5 CANVAS My amazing book on canvas, animation, and making games. Out now Paperback and digital formats Become a canvas master Learn how to animate Make two cool space games RAWKES.COM/FOUNDATIONCANVAS
  61. 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

×