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.

1. Building a better web 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 a film 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 gets a 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 to shine.
Norville gets the chance to build his invention which turns out to be the hula hoop.

8. A chance to shine.
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 shop owner throws them out in the street and a kid starts using it in front of a school
everything changes.

10. The hula hoop becomes a massive success.

11. So what does that 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 and cool 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 no point 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 in and 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 the long 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 whole stack
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 and Forms
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’s location 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 offline storage
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 styling to 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 and Audio
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 use this technology to simply build interactive video tutorials.

25. http://isithackday.com/mit/transforming-video.html
You can easily build 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 touch gestures 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 you to use real 3D models natively in the browser.

29. Messaging and Workers
Using Websockets 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 and aim 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 of the Web showcases cool new web sites.

32. http://www.20thingsilearned.com/
20 things I learned 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 Nissan Leaf 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 pushes the envelope with some very cool demos.

36. rough the looking glass...
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...
Debugging a product is much easier when there is no compilation necessary.

38. Attracting talent...
As an extra 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 tech people 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 there are problems!
Nothing works immediately without any issues. There is no point pretending that this is the case.

41. Not everything will t.
Not everything you use will fit. There are browser differences and support issues with the
technologies we have right now.

42. Embedding audio and video 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 all capable 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 expect everybody 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 to help you out

46. http://www.whatwg.org/mailing-list
The work on the specifications is totally open and anyone can take part.

47. You can see HTML5 as a debate club right now, and you are invited to state your case.

48. http://html5doctor.com
There is lots of free up-to date documentation available on the web for you.

49. http://diveintohtml5.org/
Even a full book with Dive into HTML5 by Mark Pilgrim.

50. http://www.modernizr.com/
Modernizr is a JavaScript 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 is a 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 is a 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’t only 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 an HTML5 web site into a Google Application with one click.

55. https://build.phonegap.com/
Build.phonegap.com converts HTML5 applications to native code for all kind of devices in the cloud
for you.

56. Be part of the 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
Popcorn and 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 PDFs and Flash documents and makes them readable in HTML for iPads.

60. http://diagramo.com/
Diagramo is an HTML5 editor for flowcharts and diagrams.

61. http://slideshare.net
Slideshare uses websockets for chats and webcasting.

62. Don’t pretend new tech doesn’t involve
you.

63. Let’s work together on this!

64. Ready? Let’s rock’n’roll.
You know - for a better web!

65. anks!
Chris Heilmann
@codepo8
#mozilla
#html5/freenet