Building a better web with free, open technologies

Building a better web withopen, 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.

Hello there... Chris Heilmann @codepo8 hacks.mozilla.org wait-till-i.com #html5I am Chris Heilmann, I work as the principal evangelist for Mozilla and I concentrate on HTML5 andthe open web. I am a developer evangelist and if you dont know what that is check out developer-evangelism.com to learn all about it.

I am a ﬁlm buff - I dont watch TV, I watch movies instead. And I love quirky movies. One of them Idevoured lately was “The Hudsucker Proxy” by the Coen brothers.

Norville Barnes, Entrepreneur...stuck in a badplace...In this movie we get introduced to Norville Barnes, an business school graduate going to New Yorkto ﬁnd fame and fortune as an entrepreneur - only to end up as a lowly clerk in the mail room of acompany.

Main pitch:“You know, for kids!”Norville, however, has ideas and a complete and utter lack of skill telling people about them. Hispitch for his great idea is showing people a piece of paper with a ring on it saying "You know, forkids".

Change inmanagementNorville gets a chance when the Boss of the company retires - by jumping out of the window. Theother stakeholders ﬁnd his will and realise that they are to make the company stock public whichentices them to make sure the stock plummets beforehand. To make that happen they want to hirea complete idiot as CEO - and that is Norville.

A chance to shine.Norville gets the chance to build his invention which turns out to be the hula hoop.

A chance to shine.The company spends a lot of time with an advertising campaign and it fails immensely - nobodywants 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 schooleverything changes.

The hula hoop becomes a massive success.

So what does that have to do with thisconference?The hula hoop is a great example of a product that should not need any marketing but works byseeing other people use it and needs one person to show how much fun it is to use it.

Using new and cool things should notneed any marketing...And this is what modern web technologies are. It is a total no-brainer to upgrade the technologiesthat drive the web. But instead of just giving them to the people who care about them we wait forbig players to do it for us.

There is no point in thinking about amazing technologies and waiting for magic to happen. A lot ofthe 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 handson - 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 wantto build something cool and new but you also want to make it maintainable in the future.

HTML CSS JavaScriptThe technologies are not hard to learn - CSS, JavaScript and HTML have been around for ever. Thegreat news nowadays is that today we can build amazing things with them.

Use the whole stackAs entrepreneurs and new developers I think it is our duty to embrace new technologies and bringthem to the main market. Old and settled companies do not have that chance. So take a stand andstep into the circle and start moving.

Semantic HTML and FormsHTML5 provides us with much richer forms than ever before. We have Autocomplete controls,colour pickers, URL, phone and email ﬁelds that tap into the contacts DB of our smartphones anddate pickers. Each of these also come with browser validation built-in which makes it much easierto build a great experience.

GeolocationFinding a visitor’s location is as simple as 3 lines of JavaScript - and using free databases likeYahoo’s GeoPlanet you can turn this for example into an address and pre-ﬁll a form for the userwith a “ﬁnd me” button. Wouldn’t that be useful?

Local and oﬄine storageWith 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 areoffline and store the data locally until you can sync again. Local storage can also be used to cacheinformation for the user that doesn’t have to be loaded from your server over and over again.

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 andwe can create games that until now where only available in Flash or Silverlight. D3 is a great libraryto turn any data in the document into an interactive graph.

CSS3CSS3 allows styling to go beyond adding colours, dimensions and fonts. You can build interfacesthat resize according to the available screen, do transformations and create shadows and gradients.

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 canoverlay videos and react to the time of the current video. In this example I’ve built the Indiana Jonesmaps by overlaying a video over an animated map.

https://github.com/codepo8/Syncing-VideoYou can use this technology to simply build interactive video tutorials.

http://isithackday.com/mit/transforming-video.htmlYou 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.

http://people.mozilla.com/~prouget/demos/ DynamicContentInjection/play.xhtmlUsing Canvas and SVG together with video you can dynamically analyse the video data and reactwith it. In this demo we ﬁnd the white parts of a video and use it as anchor points for injectingcontent.

By using touch gestures and device orientation you can make your products much easier to use forhumans - the games industry blossomed the last few years exactly because of that.

http://bodybrowser.googlelabs.comWebGL allows you to use real 3D models natively in the browser.

Messaging and WorkersUsing Websockets for messaging between your site and the computers you can build real-timeapplications that scale up to thousands of users. Worker threads means that you can calculateintensely with JavaScript without slowing down the interface.

Be greedy and aim for the bestexperience.Whilst in the past a HTML version of a certain system was a fallback for a Flash site when it comes tobeautiful and rich experiences right now we dont need to hide any longer. It is time to take the newtechnologies and build beautiful experiences with them.

http://www.beautyoftheweb.comMicrosoft’s Beauty of the Web showcases cool new web sites.

http://www.20thingsilearned.com/20 things I learned about Browsers and the Web is a great HTML5 example of how you could show abook online.

http://www.nissanusa.com/leaf-electric-car/indexTake the Nissan Leaf site for example - it is a 3D showcase for a car using only CSS, HTML andJavaScript.

http://nikebetterworld.com/ Screencast of NikebetterworldNike’s Better World is a web site that looks beautiful and works differently to common web sites butuses no Flash.

http://webowonder.orgMozilla’s Web-O-Wonder pushes the envelope with some very cool demos.

rough the looking glass...The great thing about using open web technologies is that you are fully in the open. Everybody cansee what you are doing. This sounds scary but in the tech world is actually a big bonus.

Debugging is simple...Debugging a product is much easier when there is no compilation necessary.

Attracting talent...As an extra bonus open systems also ensure that you attract talent. If your product features newestand coolest technology you will ﬁnd it a much less arduous job to hire developers. Geeks love to bepart of something cool and new. If you open up your source code - even better.

Give your tech people a voiceThe next big step to being open is to trust your techies. Instead of hiding your technology skillshave a blog with your achievements where you talk about your people and how they work. Thisshows 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 will t.Not everything you use will ﬁt. There are browser differences and support issues with thetechnologies we have right now.

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.

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 videoin 3 different formats though.

You can’t expect everybody to have thenewest browsers.IE6 is still around and a thorn in the side of any developer. However, it is dwindling and Microsoft isactively ﬁghting the issue.

Use things to help you out

http://www.whatwg.org/mailing-listThe work on the speciﬁcations 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.

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

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

http://www.modernizr.com/Modernizr is a JavaScript to embed in your products that tests for the support of all the newtechnology. It adds classes on the HTML element for you to read out and react to.

http://html5boilerplate.com/HTML boilerplate is a copy and paste start to use HTML5 in your projects - it includes Modernizrand resets the CSS and gives you the correct server settings.

Where there is a need, there is anopportunity for a business. http://vid.ly - invite code HNY2011Vid.ly is a service by encoding.com that converts video into all the necessary formats and creates asingle URL to point your video elements to.

And vid.ly doesn’t only create them for browsers - it also supports every handheld device andgames console. It even creates videos that are smaller or larger in ﬁle size according to the enduser’s connection speed.

http://appmator.appspot.comAppmator packs an HTML5 web site into a Google Application with one click.

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

Be part of the evolutionHTML5 and new technologies should not only be for geeks and people who write all of theirproducts by hand. We should strive for building products that allows us to build with new tech andmove things to the browser that until now are still very much desktop jobs. There are some greatexamples about this already out there.

http://butterapp.org | http://popcorn.jsPopcorn and Butter allows you to sync video content with web content and send it as a presentationformat to contacts.

http://butterapp.org | http://popcorn.js http://www.aviary.com/html5editorAviary is an online HTML5 image editor.

http://scribd.comScribd scrapes PDFs and Flash documents and makes them readable in HTML for iPads.

http://diagramo.com/Diagramo is an HTML5 editor for ﬂowcharts and diagrams.

http://slideshare.netSlideshare uses websockets for chats and webcasting.

Don’t pretend new tech doesn’t involveyou.

Let’s work together on this!

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

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

http://powiuke.wordpress.com	277
http://twitter.com	2
http://paper.li	2

Building a better web with free, open technologies

by Christian Heilmann on Mar 18, 2011

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 281

Statistics

Building a better web with free, open technologies Presentation Transcript