Last week around 2500 developers, designers, entrepreneurs and managers came to Vilnius, Lithuania to attend the fifth Login conference. Speakers included people from Nokia, Wired, Flattr.com (run by the founder of the Pirate Bay), Tate Modern and Amnesty international and the conference covered everything from viral video over web security and privacy up to bleeding edge web development practices.

My job for Mozilla was to deliver the final keynote to remind people what they heard in the two days and to get them excited to play with the new toys we talked about. Here are the slides and the extensive notes of the talk. A video will be available soon and we will publish it here when it is out.

Slides of the closing keynote “Building a better web with open, new technologies”

You can also see and download an annotated version on Slideshare.

Talk Notes

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.

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.

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. 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. 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”. 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.

Norville gets the chance to build his invention which turns out to be the hula hoop. The company spends a lot of time with an advertising campaign and it fails immensely – nobody wants to buy a hula hoop. When a shop owner throws them out in the street and a kid starts using it in front of a school everything changes. The hula hoop becomes a massive success.

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.

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.

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.

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.

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. 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.

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.

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.

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?

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.

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. Libraries like d3.js can help you there a lot.

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.

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. You can use this technology to simply build interactive video tutorials.

You can easily build your own video players that have functionality that none of them had before – here for example I wrote a video player that allows you to zoom and rotate videos.

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.

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.

WebGL allows you to use real 3D models natively in the browser. Check out the amazing Body Browser example by Google.

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.

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.

• Microsoft’s Beauty of the Web showcases cool new web sites.
• 20 things I learned about Browsers and the Web is a great HTML5 example of how you could show a book online.
• The Nissan Leaf site is a 3D showcase for a car using only CSS, HTML and JavaScript.
• Nike’s Better World is a web site that looks beautiful and works differently to common web sites but uses no Flash.
• Mozilla’s Web-O-Wonder pushes the envelope with some very cool demos.

Through 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. Debugging a product is much easier when there is no compilation necessary. 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.

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.

Of course there are problems!

Nothing works immediately without any issues. There is no point pretending that this is the case. Not everything you use will fit. There are browser differences and support issues with the technologies we have right now. Embedding audio and video should be easy in HTML5 – it should be as simple as pointing to a video to add it to a document. Copyright and licensing differences across different browsers makes it necessary to have the video in 3 different formats though.

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.

Use things to help you out

The work on the specifications is totally open and anyone can take part. You can see HTML5 as a debate club right now, and you are invited to state your case. There is lots of free up-to date documentation available on the web for you – for example on HTML5 Doctor or even a full book Dive into HTML5 by Mark Pilgrim.

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. 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.

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. 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.

Appmator packs an HTML5 web site into a Google Application with one click.

Build.phonegap.com converts HTML5 applications to native code for all kind of devices in the cloud for you.

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.

• Popcorn and Butter allows you to sync video content with web content and send it as a presentation format to contacts.
• Aviary is an online HTML5 image editor.
• Scribd scrapes PDFs and Flash documents and makes them readable in HTML for iPads.
• Diagramo is an HTML5 editor for flowcharts and diagrams.
• Slideshare uses websockets for chats and webcasting.

Don’t pretend new tech doesn’t involve you – let’s work together on this – you know – for a better web!