Download as PDF, PPTX
Uploaded byChristian Heilmann
Building a better web with free, open technologies
Norville Barnes gets a chance to shine when he is promoted to CEO of his company despite only being able to poorly pitch his idea for a children's toy. His invention, the hula hoop, becomes wildly popular not through marketing but by other children seeing one child enjoying it. The speaker argues that new web technologies are like the hula hoop - they don't need marketing and will succeed if developers embrace them to build fun and engaging experiences that others will want to use. Developers should use HTML5, CSS, JavaScript and other open technologies to make the web better for all.
More Related Content
Similar to Building a better web with free, open technologies
Building a better web with free, open technologies
- 1. Building a betterweb with open, new technologies. Chris Heilmann - Login, Lithuania , March 2011 Today I will talk about exciting new open technologies and how you can use them to change the web for better and make a name for yourself at the same time.
- 2. Hello there... Chris Heilmann @codepo8 hacks.mozilla.org wait-till-i.com #html5 I am Chris Heilmann, I work as the principal evangelist for Mozilla and I concentrate on HTML5 and the open web. I am a developer evangelist and if you don't know what that is check out developer- evangelism.com to learn all about it.
- 3. I am afilm buff - I don't watch TV, I watch movies instead. And I love quirky movies. One of them I devoured lately was “The Hudsucker Proxy” by the Coen brothers.
- 4. Norville Barnes, Entrepreneur ...stuck in a bad place... In this movie we get introduced to Norville Barnes, an business school graduate going to New York to find fame and fortune as an entrepreneur - only to end up as a lowly clerk in the mail room of a company.
- 5. Main pitch: “You know,for kids!” Norville, however, has ideas and a complete and utter lack of skill telling people about them. His pitch for his great idea is showing people a piece of paper with a ring on it saying "You know, for kids".
- 6. Change in management Norville getsa chance when the Boss of the company retires - by jumping out of the window. The other stakeholders find his will and realise that they are to make the company stock public which entices them to make sure the stock plummets beforehand. To make that happen they want to hire a complete idiot as CEO - and that is Norville.
- 7. A chance toshine. Norville gets the chance to build his invention which turns out to be the hula hoop.
- 8. A chance toshine. The company spends a lot of time with an advertising campaign and it fails immensely - nobody wants to buy a hula hoop.
- 9. When a shopowner throws them out in the street and a kid starts using it in front of a school everything changes.
- 10. The hula hoopbecomes a massive success.
- 11. So what doesthat have to do with this conference? The hula hoop is a great example of a product that should not need any marketing but works by seeing other people use it and needs one person to show how much fun it is to use it.
- 12. Using new andcool things should not need any marketing... And this is what modern web technologies are. It is a total no-brainer to upgrade the technologies that drive the web. But instead of just giving them to the people who care about them we wait for big players to do it for us.
- 13. There is nopoint in thinking about amazing technologies and waiting for magic to happen. A lot of the things we thought about are not really clever if you look at them closely.
- 14. Just jump inand join the ride! Well, I am here today to tell you that you can and should use all the new tech you can get your hands on - for the sake of the web and for the sake of your companies.
- 15. Aim for thelong goal... Supporting new technology based on standards means that you are in it for the long term. You want to build something cool and new but you also want to make it maintainable in the future.
- 16. HTML CSS JavaScript The technologies are not hard to learn - CSS, JavaScript and HTML have been around for ever. The great news nowadays is that today we can build amazing things with them.
- 17. Use the wholestack As entrepreneurs and new developers I think it is our duty to embrace new technologies and bring them to the main market. Old and settled companies do not have that chance. So take a stand and step into the circle and start moving.
- 18. Semantic HTML andForms HTML5 provides us with much richer forms than ever before. We have Autocomplete controls, colour pickers, URL, phone and email fields that tap into the contacts DB of our smartphones and date pickers. Each of these also come with browser validation built-in which makes it much easier to build a great experience.
- 19. Geolocation Finding a visitor’slocation is as simple as 3 lines of JavaScript - and using free databases like Yahoo’s GeoPlanet you can turn this for example into an address and pre-fill a form for the user with a “find me” button. Wouldn’t that be useful?
- 20. Local and offlinestorage With local and offline storage I can make my application work even when the visitor is on the go. Being without connectivity shouldn’t be the end of your application - simple tell the user you are offline and store the data locally until you can sync again. Local storage can also be used to cache information for the user that doesn’t have to be loaded from your server over and over again.
- 21. SVG and Canvas http://mbostock.github.com/d3/ Using SVG and Canvas we can paint on the web. We can build immensely rich interactive graphs and we can create games that until now where only available in Flash or Silverlight. D3 is a great library to turn any data in the document into an interactive graph.
- 22. CSS3 CSS3 allows stylingto go beyond adding colours, dimensions and fonts. You can build interfaces that resize according to the available screen, do transformations and create shadows and gradients.
- 23. HTML5 Video andAudio http://isithackday.com/spirit-of-indiana/ Using native video and audio you can interact with the document in a very simple manner. You can overlay videos and react to the time of the current video. In this example I’ve built the Indiana Jones maps by overlaying a video over an animated map.
- 24. https://github.com/codepo8/Syncing-Video You can usethis technology to simply build interactive video tutorials.
- 25. http://isithackday.com/mit/transforming-video.html You can easilybuild your own video players that have functionality that non of them had before - here for example I wrote a video player that allows you to zoom and rotate videos.
- 26. http://people.mozilla.com/~prouget/demos/ DynamicContentInjection/play.xhtml Using Canvas and SVG together with video you can dynamically analyse the video data and react with it. In this demo we find the white parts of a video and use it as anchor points for injecting content.
- 27. By using touchgestures and device orientation you can make your products much easier to use for humans - the games industry blossomed the last few years exactly because of that.
- 28. http://bodybrowser.googlelabs.com WebGL allows youto use real 3D models natively in the browser.
- 29. Messaging and Workers UsingWebsockets for messaging between your site and the computers you can build real-time applications that scale up to thousands of users. Worker threads means that you can calculate intensely with JavaScript without slowing down the interface.
- 30. Be greedy andaim for the best experience. Whilst in the past a HTML version of a certain system was a fallback for a Flash site when it comes to beautiful and rich experiences right now we don't need to hide any longer. It is time to take the new technologies and build beautiful experiences with them.
- 31. http://www.beautyoftheweb.com Microsoft’s Beauty ofthe Web showcases cool new web sites.
- 32. http://www.20thingsilearned.com/ 20 things Ilearned about Browsers and the Web is a great HTML5 example of how you could show a book online.
- 33. http://www.nissanusa.com/leaf-electric-car/index Take the NissanLeaf site for example - it is a 3D showcase for a car using only CSS, HTML and JavaScript.
- 34. http://nikebetterworld.com/ Screencast of Nikebetterworld Nike’s Better World is a web site that looks beautiful and works differently to common web sites but uses no Flash.
- 35. http://webowonder.org Mozilla’s Web-O-Wonder pushesthe envelope with some very cool demos.
- 36. rough the lookingglass... The great thing about using open web technologies is that you are fully in the open. Everybody can see what you are doing. This sounds scary but in the tech world is actually a big bonus.
- 37. Debugging is simple... Debugginga product is much easier when there is no compilation necessary.
- 38. Attracting talent... As anextra bonus open systems also ensure that you attract talent. If your product features newest and coolest technology you will find it a much less arduous job to hire developers. Geeks love to be part of something cool and new. If you open up your source code - even better.
- 39. Give your techpeople a voice The next big step to being open is to trust your techies. Instead of hiding your technology skills have a blog with your achievements where you talk about your people and how they work. This shows that you care about your tech as much as your money.
- 40. Of course thereare problems! Nothing works immediately without any issues. There is no point pretending that this is the case.
- 41. Not everything willt. Not everything you use will fit. There are browser differences and support issues with the technologies we have right now.
- 42. Embedding audio andvideo should be easy in HTML5: <video src="interview.ogv" controls> <a href="interview.ogv">Download the video</a> </video> It should be as simple as pointing to a video to add it to a document.
- 43. To make allcapable browsers play the video we need... <video controls> <source src="interview.mp4" type="video/mp4"> </source> <source src="interview.webm" type="video/webm"> </source> <source src="interview.ogv" type="video/ogg"> </source> <p>Download the <a href="interview.mp4">video in MP4 format</a>. </p> </video> Copyright and licensing differences across different browsers makes it necessary to have the video in 3 different formats though.
- 44. You can’t expecteverybody to have the newest browsers. IE6 is still around and a thorn in the side of any developer. However, it is dwindling and Microsoft is actively fighting the issue.
- 45. Use things tohelp you out
- 46. http://www.whatwg.org/mailing-list The work onthe specifications is totally open and anyone can take part.
- 47. You can seeHTML5 as a debate club right now, and you are invited to state your case.
- 48. http://html5doctor.com There is lotsof free up-to date documentation available on the web for you.
- 49. http://diveintohtml5.org/ Even a fullbook with Dive into HTML5 by Mark Pilgrim.
- 50. http://www.modernizr.com/ Modernizr is aJavaScript to embed in your products that tests for the support of all the new technology. It adds classes on the HTML element for you to read out and react to.
- 51. http://html5boilerplate.com/ HTML boilerplate isa copy and paste start to use HTML5 in your projects - it includes Modernizr and resets the CSS and gives you the correct server settings.
- 52. Where there isa need, there is an opportunity for a business. http://vid.ly - invite code HNY2011 Vid.ly is a service by encoding.com that converts video into all the necessary formats and creates a single URL to point your video elements to.
- 53. And vid.ly doesn’tonly create them for browsers - it also supports every handheld device and games console. It even creates videos that are smaller or larger in file size according to the end user’s connection speed.
- 54. http://appmator.appspot.com Appmator packs anHTML5 web site into a Google Application with one click.
- 55. https://build.phonegap.com/ Build.phonegap.com converts HTML5applications to native code for all kind of devices in the cloud for you.
- 56. Be part ofthe evolution HTML5 and new technologies should not only be for geeks and people who write all of their products by hand. We should strive for building products that allows us to build with new tech and move things to the browser that until now are still very much desktop jobs. There are some great examples about this already out there.
- 57. http://butterapp.org | http://popcorn.js Popcornand Butter allows you to sync video content with web content and send it as a presentation format to contacts.
- 58. http://butterapp.org | http://popcorn.js http://www.aviary.com/html5editor Aviary is an online HTML5 image editor.
- 59. http://scribd.com Scribd scrapes PDFsand Flash documents and makes them readable in HTML for iPads.
- 60. http://diagramo.com/ Diagramo is anHTML5 editor for flowcharts and diagrams.
- 61. http://slideshare.net Slideshare uses websocketsfor chats and webcasting.
- 62. Don’t pretend newtech doesn’t involve you.
- 63. Let’s work togetheron this!
- 64. Ready? Let’s rock’n’roll. Youknow - for a better web!
- 65. anks! Chris Heilmann @codepo8 #mozilla #html5/freenet