HTML5 - Moving from hacks to solutions

HTML5 - Moving from hacks to solutions

Chris Heilmann - Confoo, March 2011

Today, we'll talk about HTML5 - moving from hacks to solutions. This is a topic that I've covered a lot lately but funnily enough - I am not getting tired of it.

Hello there...

Chris Heilmann@codepo8

wait-till-i.com#html5

First of all, it is good to be back in Canada - I like Canada a lot, Wolverine is from here and all the people I met so far in our small world are amazingly crafty developers

We are the new media!

I've seen the worst of the web and I see HTML5 as a chance to make us move forward in our evolution of the internet as the media that works, is available for everyone and makes us more efficient rather than turning us into couch potatoes and forget our day to day worries in exchange to watching artificial people live the life we would love to have.

HTML5 is tech evolution in action.

So what is all that HTML5 stuff about? To me, it is about moving forward and letting go of ideas we consider to be the best solution but really only use because we are familiar with them. Better the devil you know, right?

A more !exible internet experience

I think as developers we owe it to the world to build a better internet experience. Computers are very versatile things and connectivity allows us to keep things up-to-date, react to change and access systems on-demand rather than having all of them hoarded somewhere.

When did we stop dreaming of awesome computers?

Minority Report

Iron Man 2

Iron Man 2

If you look at the movies of the last few decades you will find that we more and more moved away from computers of awesome that react to voice recognition and have unlimited potential to product placements of the currently newest smartphone or system.

e future is apps, not the web?

The same seems to happen to the web - a lot of people already see the web as boring interlinked texts and web sites that don't help you fulfil a task. Instead people see small apps for smartphones, tablets and other mobile systems as the future. I think the web as a concept is big and clever enough to allow for both.

“Nothing matters in this world more than apps. Write that on your forehead. Write that on the mirror on your bathroom wall. Write that on your car windshield. Whatever it will take so you remember it.

HP execs know this. Google’s execs know this. Everyone in Silicon Valley knows this.

Apps are the ONLY thing that matters now.”Robert Scoble

http://scobleizer.com/2011/02/11/dear-nokia-fans-youre-nuts/

“I come from the future and I know you don’t like to be dragged into it.”

Let’s chill a bit about this...

Upgrading is a good thing

Not many people complain when they get upgrades in real life. A better seat on the plane is a nice thing to have. A faster computer makes you work better as you don't have to wait for the bloody thing to load and finish the tasks you have to achieve using it.

Staying in the comfort zone

When it comes to web technology though, you find a lot of people who are unhappy about change and don't trust HTML5 and related technologies yet.

Change can be a scary thing - especially when you've been disappointed in the past.

It is tricky to trust browsers to do things right for us and it is very tempting to stick with what we know and say this is all we have - this is how good the web can be.

Waiting for the closed tech revolution

Over my career I've seen many attempts to make the web a better and richer experience. A lot of plugins came and went. Java applets, VRML, Real Player, Quicktime, iPix, Shockwave and many more promised to make a browser more interesting and a richer experience.

Flash and with it Air and Flex went furthest out with it and their success and adoption rate shows that we need a richer web. However, pure Flash solutions are still a rarity on the web. When it comes to complex forms, huge data systems and web based applications you are more likely to find hybrids or slow and annoying server-driven systems than slick Flash interfaces.

Flash, Silverlight, Flex, Air and others are great examples of what the web can be...

Starting the open tech revolution

Extending existing infrastructure

The great thing about HTML5 as an idea is that we don't ask people to buy software or understand and start to trust new technology - instead we innovate on already existing necessary infrastructure. You use a browser to surf the web - all we have to make people do is upgrade their browser.

http://www.whatwg.org/mailing-listAnd as everything is open there is no ambiguity as to where things are going in the future - instead of making people wait for upgrades their requests and needs drive them.

A few steps towards a better web

We have the technology and we have the ideas to make the web much, much better. What we need to do is think the right way.

1) Stop thinking in limits

If we want the web as it is now - easy to access, open for everyone and simple to upgrade - to survive we have to stop thinking in a limited way.

e web is not print - it is much more !exible than that.

Web sites do not have to be multiple columns of text or follow the same principles as print design does (plain psychology and aesthetics for humans are a barrier to this, but shift can happen).

Web sites can be applications that break the concept of a text document.

Screencast of Nikebetterworld

http://nikebetterworld.com/ Web sites can be independent of the size of the browser viewport - either by adapting and showing more or less according to how much space is available or by just telling the user they can move in any direction.

2) Use what the client offers

To the future - using what you have

It is time we thank the browser vendors for supporting new technologies by using them. We're right now in a Catch-22 situation were some people want browsers to support tech but the companies making browsers don't add them yet as there is no demand. Time to break this cycle.

e end of cookies

Go on then, use local storage to make your interfaces much simpler by storing some of the information.

Offline Storage

Take a look at offline storage - not only for mobile interfaces.

Geolocation

Play with geolocation to tell a user where they are or to prefill forms.

Screencast of Oprah’s web site

http://www.oprah.com/own Use native video and audio instead of yet another Flash movie.

http://mbostock.github.com/d3/Use Canvas and SVG for charting and a fallback image linking to a browser upgrade page.

Play with touch events and even with device orientation.

If..

...then...

A lot more than you think is already possible and can be used once you put it in a simple if statement.

http://webowonder.orgUse new technologies to build beautiful things. Check Mozilla’s Web-o-wonder web site for some great examples how we can move ahead.

3) Increase your vocabulary

Communication is about vocabulary. Sure, you can make sense with a few simple words and a set of simple instructions but to make a sentence engage and spark the theatre in the head of the reader or listener you need to be able to play with language and the more pieces you have the nicer the mosaic will get.

HTML 3.2 - HTML 4.01

On the web we right now grunt and point when it comes to speaking to browsers. The old HTML vocabulary has become an anachronism hailing back to the times where all we had to do is mark up academic papers.

Forms especially were too simple in what we needed to do with them to build enjoyable interfaces.

3) Increase your vocabulary

XHTML

In order to make the browsers do the things our apps natively should do we need more, intelligent HTML elements.

The HTML5 spec is a step in the right direction, and we should use these wonderful new constructs to tell a better story.

<section> <nav> <article>

<aside> <hgroup>

<header> <footer> <time>

<mark> <details> <figure> <figcaption> ...

Non-meaningful DIVs should be replaced with SECTION, ASIDE or ARTICLE...

form elements should not be a type of text but a phone number, a URL, a number or even an email.

Autofocus: <input autofocus name="name">Default content: <input placeholder="please enter your name" name="name">

Autocomplete: <input autocomplete name="name">Limits and steps: <input min="0" max="360" step="5" name="angle" type="number">Multiple: <input multiple type="email"><input multiple type="file">Related elements: <output> <meter> <progress>

All of these words are at our disposal, but we don't use them in day to day conversation yet which is why there is not much happening in terms of support.

Lost in Translation...

We should not be the translator for HTML to the browser - this can only lead to telephone-esque misunderstandings.

4) Allow technology to retire

This is a tricky topic right now. A lot of HTML5 is not being used as there are old and outdated browsers still in use and for reasons beyond our control are not being upgraded. Here's an idea: let's allow old and tired browsers to retire.

Let's give them a working version of our web site that is plain HTML with reloads and the content available and let's concentrate our efforts in supporting the web that is around the corner and needs us to become mainstream.

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-PolyfillsYes, we can simulate almost all of the new things in HTML5 for legacy browsers...

Adding extra code for legacy browers?

...but if we do that we also need to test on them to see that everything works smoothly.

Stop wasting 90% of your testing time on 10 year old technology!

We should not spend our time testing for old browsers when there is new stuff to be tested.

Stop wasting 90% of your testing time on 10 year old technology!

Progressive enhancement works!

There is nothing wrong with delivering an old school experience to old technology and increase the enjoyment when and if the environment allows for it.

5) Build systems that automate annoying tasks

Of course there are some annoyances in HTML5 - it is a young technology. The biggest issues however are not technical issues but licensing and IP related problems.

Encoding worries...

For example to embed a video as HTML5 you have to provide it in three different formats to cover all browsers. That's why we need to make it easy for people to make the switch.

http://vid.lyVid.ly for example is a service that converts videos in dozens of formats and redirects the client in use to the correct format automatically.

This is what we should thrive for - find issues and build systems to work around them - this is how money is made.

6) Build tools that help others build with new technology

http://www.flickr.com/photos/iain/369031227/sizes/l/in/photostream/We have specs for the technologies and examples how to use them. We can, however, not expect everybody to be as excited about the things we are getting high on right now.

We can also not expect everybody who builds things for the web or writes content for it to write everything by hand.

The editors we use right now do not create HTML5 - most actually create XHTML instead.

We now need to ask the companies who say HTML5 is the future to build systems that allow maintainers of the web to build it.

http://butterapp.org | http://popcorn.js One cool example of that is <a href="http://butterapp.org">Butter</a> which is a visual interface on top of the <a href="http://popcornjs.org/">Popcorn</a> JavaScript framework that allows you to build interactive presentations with HTML5 video. We need more of that.

http://butterapp.org | http://popcorn.js http://www.aviary.com/html5editor

http://www.aloha-editor.org

7) Be part of the discussion

Nobody likes mimes! Nobody!Last but not least we need you to take part in the conversation around HTML5. If you stay out of it, you can't complain about mistakes being made - all the processes are open and you can be part of the mailing list.

Popularity doesn’t mean quality...

It is not a popularity contents - sure, known people working in big companies are very likely to come up with good ideas, but anyone can have those and sometimes it is important not to look at an issue from a professional day-to-day perspective but see what people really need to have fixed.

Listen in and listen well...

We need you to listen to what people are saying and validate it from your point of view. The earlier mistakes can be spotted, the easier they are to avoid.

No more secrets...

As we are dealing with open technology, there are no secrets and there shouldn't be a reason for people not answering your questions.

Keep your eyes peeled...

It is also important to look out for upcoming problems that are not yet in the specifications. Right now for example this would be the device API which will allow you to use cameras and microphones as input devices.

We can and should supercharge the web - right now!

Still waiting for the closed technology revolution

Godspeed, my friends, let’s do this!

anks!

Chris Heilmann@codepo8

#mozilla#html5/freenet