Update: there are now videos (screencasts) and audio of the talk available on the Mozilla blog.

I am currently at the Webvisions Event in Barcelona, Spain and tomorrow I will give a talk about “HTML5 and the future of the web”. To spice things up a bit, as I enjoyed watching The Lorax on the plane and seeing that a lot of people at the conference are parents, I thought it would be a good plan to write my whole slide deck in Dr.Seuss rhymes. This may go down immensely well, or fail horribly, but you got to take chances.

The talk (with a few extra slides) is available on Slideshare, as a PDF on Dropbox and as a styled HTML version on GitHub. Also thanks to Eric Shepherd for some rhyming help.

Enough of this – here we go:

1. There’s a big web out there, 
   it’s huge – I tell you, 
   it spans the whole world, 
   but it was boring and blue…
   
2. Then change came about, 
   in the shape of a fox, 
   it was cunning and open, 
   and it broke all the locks.
   
3. Others showed up,
   and joined the good fight, 
   a singer, an adventurer, 
   and a shiny new knight.
   
4. These all played together, 
   and spoke the same tongue, 
   which brought back old players,
   to join them in song. 
   
5. A standard was set, 
   and it changed a few things,
   a richer web for apps, 
   was the promise it brings.
   
6. Bah, standards! Who needs them?
   Some flashy ones said, 
   till a phone that was smart,
   kicked them out of its bed.
   
7. We moved past one standard, 
   as web work is richer,
   so “HTML5 and friends“,
   paints a much better .
   
8. Things that are fun, 
   should be shiny and cool,
   that’s why the new standards
   bring many a new tool.
   
9. Watching and hearing,
   are what people like to do.
   Using and is simple,
   and you can do it, too.
   
10. Both of them are web-native,
    which is a reason to clap.
    They can interact with other content,
    and Mozilla Popcorn makes that a snap.
11. If beats and frequencies are
    what you need to play,
    check the Web Audio API -
    it gives you just that – even today.
    
12. To play nice with batteries,
    use requestAnimationFrame(),
    don’t let it stop you
    that it has such a long name.
    
13. 3D graphics are thrilling,
    as gamers will tell,
    we now have that on the web
    and it is called WebGL.
    
14. Water goes everywhere you pour it,
    just ask Chris about his Macbook Air :(
    MediaQueries allow you be as fluid
    and respond instead of despair.
    
15. Natural movements are smooth,
    just open your eyes.
    With CSS animation, transforms and transition,
    you can mimic this – nice!
    
16. “The web means you need to be online”,
    I hear smartypants gloat,
    well, we have offline storage,
    so there – take your coat.
    
17. Got a cam and some friends,
    and do you want to chat?
    WebRTC is what you need,
    even to show off your cat.
    
18. Rhymes sometimes don’t come easy,
    as you just became aware.
    So let’s just move ahead quickly,
    this was just too much to bear.
    
19. An artist needs a ,
    and HTML5 gave us that.
    Read, write and convert pixels,
    All in the client, it’s mad!
    
20. “We don’t have rich elements!”
    many people complain,
    Use Web Components with X-Tag
    and create them – easy to maintain.
    
21. Passwords are tough, 
    it is easy to see, 
    so allow login with emails,
    using BrowserID.
    
22. The web is a mess,
    with third party buttons abound.
    Web Intents make them pointless,
    let’s not have them around.
    
23. By design HTML5 is forgiving,
    its parser is great.
    It didn’t want to break the web,
    so let’s not break it in its stead.
    
24. Course you can write weird things,
    and they will work – there’s no doubt.
    But will they be readable by others?
    This is what it’s about.
    
25. You don’t create for yourself,
    or your friends who are the same.
    You develop for the next guy,
    so make sure you’re not to blame.
    
26. You don’t jump in a river,
    if you don’t know its depth.
    On the web using Modernizr,
    should be your first step.
    
27. Give new stuff to new players,
    and use it to enhance.
    Don’t support when it’s not needed
    IE6 walks – it can’t dance!
    
28. With a vendor prefix browsers tell you
    “this is not ready”.
    So by all means, give them a go,
    but don’t expect to go steady. 
    
29. And those prefixes vanish,
    you mustn’t forget!
    End with a prefixless version,
    It’s your very best bet.
    
30. So we ask you to help us,
    build a web that will last.
    Be future friendly and look forward,
    and stop building for the past.
    
31. The web is on phones,
    tablets, computers, TVs.
    We have to move it forward.
    or else our existence will cease.
    
32. Hardware that is locked up,
    is not what we are about,
    so check out Firefox OS,
    if you like the web – you will like it – no doubt.
    
33. Last but not least,
    if you find something’s wrong
    please file a bug and tell us,
    this is how things get done.
    
34. So there you have a lot to play with,
    check out and share.
    We really want you to do that,
    come on, show us you care.
35. Unless someone like you
    cares a whole awful lot,
    nothing is going to get better.
    It’s not.
    
36. So well done for reading and listening,
    and going great lengths,
    that’s all we got time for today,
    so good-bye and thanks!

Yesterday we went to New Work City for the MDN hack day and I kicked off the day with a talk about HTML5, the opportunities it brings for developers and what people can play with during the day.

The slides are available and I recorded a screencast of me presenting them. The screencast is available on YouTube or in various HTML5 compatible formats at vid.ly (embedded below):

If you want an audio only version, you can find that one on archive.org or here:

Here are the things I am covering in the talk:

• World connection density map
• Mozilla Hackasaurus
• 18 days in Egypt documentary
• Mozilla popcorn
• HTML5 beanie maker
• Undoing the double sun in Star Wars
• HTML5 context menus
• Image cropping in the browser
• Building a game from HTML5
• BrowserID and a simple implementation example
• Mozilla Web APIs
• Boot to Gecko

Time to board my plane, more details on the MDN work week and the hackday on the Mozilla blog soon.

Last week I was in Krakow, Poland to attend the Frontrow conference delivered a presentation on attitude towards new technology and inspiration in the tech community.

Frontrow was interesting as it was a mixture of Barcamp and conference. On each day you had a few talks, followed by lunch and 2 hours of “open sessions” with breakout rooms where people were asked to discuss hot topics and share their experiences. Think of it as longer Q&A after the presentations with a moderator.

As you can see in the conference schedule there was a lot to be learned and a lot of great speakers (local and a lot of UK folk) shared their info and ideas with the audience.

My presentation revolved around the issue of getting inspired at conferences and then frustrated when you can’t use what you learned in your job. A lot of that frustration is home made and what really is needed is having the stamina and drive to simply use and explain what you found out about to your company. Without people using what speakers talk about conferences become a stage play, and a bad one at that.

You can read the slides as a simple document available online or embedded below (cursor keys to navigate, press N to show and hide notes and cursor down to proceed on slides with bullet points):

I am currently at the Mozilla all Hands in San Jose, California and decided to give a talk explaining a lot of open technologies to my colleagues so they can go out to conferences and get people excited about them. We have a lot of people and volunteers, and everybody should feel empowered to speak in public. A lot of times what is missing is a simple way to tell people about the things you want to cover.

To this end I put together not yet another slide deck on SlideShare, but a way to see a presentation and then pick and mix what you want to show yourself.

You can see and present the presentation here (use cursor keys to navigate the slides and press ‘N’ to show ):

The audio recording of the talk (raw, unedited) is available on archive.org.

The slides and screencasts are available on GitHub and we are also keeping a repository of the explanations and screencasts on the Mozilla Wiki.

The idea is that when you want to do a quick show and tell of new technologies you can go to the slides, uncheck the ones you don’t want to have in your presentation, hit the “start presentation” button and go for it.

Enjoy!

I just got back from Heart and Sole in Portsmouth where I was asked to give an inspiring talk about HTML5. I thought it is high time to make an audience like the one at Heart and Sole (students and small business owners) aware that HTML5 is not only a plaything of large companies and “web development rockstars” but that everybody can be part of the cause and that we really need people’s input and real life implementations to make the new open tech revolution a reality. The feedback was very positive. Here are the slides and notes with links. The conference was filmed so keep your eyes open for the recording of the talk.

The Video

Slides

The slides are available on Slideshare:

Notes

Open tech rocks

I am a big fan of open web technologies. Right now we are working on some great things that will make the web more responsive, allow for more creativity and extend the text based web to richer media like video, audio and 3D without resorting to closed development environments or having to pay licenses.

HTML5 showcases

There are a lot of great showcase sites that feature all the beautiful things we can do: HTML5 rocks by Google, Apple’s HTML5 showcase and there was even an advent calendar with daily HTML5 goodies throughout December.

Making HTML5 impact our work

This is all great, but I really think it is time to take HTML5 out of the labs and into our day to day jobs. We should start now to make HTML5 part of our deliveries and get clients excited about the new opportunities there are. Instead of celebrating HTML5 rockstars we should celebrate the opportunity to make our work more predictable, open to everybody and easy to use.

Help promote HTML5

This change needs promotion – by you. If you work on the web you should help make new open technologies succeed by using them in real products.

Why should you care about this?

Well, first of all we have to make our work professional and be more accountable for what we do.

There should not be any magic in web development.

You should not have to use some technology you cut and paste and have no clue what it really does. “It works, just use it” is not a sustainable environment.

When things go bad, you should be able to trace the reason and fix it. Right now I get the feeling that a lot of web development is putting together random building blocks to build an interface that looks like a design we got handed down to us. That is the wrong way around. If we build from blocks we understand the interface can mutate and change to our needs and likes. If we start with a fixed idea any change later on will mean we need to replace everything. We’re not re-using enough.

Take pride in the invisible

Clients still don’t care much about our code and markup but we should. When I interview people I take a look at the source of the things they send me. The markup and CSS and JS code you leave behind is the message you give to the next developer. If it is unreadable or hard to maintain you come across as not caring. It is like a blog post with a very important message that gets lost because of abysmal grammar.

Avoid repeating mistakes from the past

I’ve been complaining about the quality of the underlying markup of HTML5 demos before and I think it is very ironic that we say view-source is the future but show bad code when you, well, view source.

In the past we wrote browser specific code and omitted elements as the browser fixed it for us. Just because browsers are forgiving it shouldn’t mean it is OK to rely on them to do fix things. No other programming language allows you to write code like that. If we want to be taken seriously, we should take pride in our work. Not one browser will ever rule supreme, so if you rely on one for your product to work you add to the problem of people not upgrading their browsers. This is not innovation.

HTML5 is not perfect

There are a few things we should worry about. As with every change, we will have to face a lot of people who are against it.

Adversity to change

A lot of propaganda is being thrown around right now about HTML5 not being ready for prime time and open technologies being dangerous as you have no control over them and there is nobody to back them up. This has been a long-standing problem with any open source technology.

No one size fits all

The fact is that HTML5 and open technologies will not fit every problem out there. HTML5 is not there to replace Flash or Silverlight – it is there to offer an alternative.

Open media can be downloaded

A few days ago Serge Jespers of Adobe released an article about the problem of HTML5 that there is no DRM solution. The article had a good point, but the title “Stealing content was never easier than with HTML5” was very misleading. I have complained about this as it just heated the debate unnecessarily. Fact is that right now there is no file level protection of video in HTML5. If you want a protected stream that people can’t download, then you need to use Flash or Silverlight. The real question though is that if you want to protect something, why allow it to be in the open in the first place?

New attack vectors

With HTML5’s API allowing for deep access into the browser and the system it runs on we will also have new attack vectors for malicious code to deal with.

Open means you can fix without asking for permission

The great thing about any HTML5 issue like the ones above is though that the technology is open and everything can be analysed and fixed – if we can make it a priority. A closed system is a pain to patch and upgrade. Open systems are easier to fix and with the attack research being available we have the chance to patch problems before they get implemented in browsers. Security through obscurity was never a clever idea. If you commit a crime and plead in court that you didn’t know that what you did was illegal you won’t get away with it either.

Welcome to the sweet spot

The other great news about HTML5 is that you are in the sweet spot.

Take part in the process

First of all, it is not a secret club and you are invited to take part. The WHATWG Mailing List is where things happen and all you need to do is sign up.

Free and open documentation

How about learning HTML5? You don’t need fancy trainings or buy books (but there are some awesome ones out there). HTML5 Doctor is a great independent blog talking about everything HTML5. Mark Pilgrim’s book Dive into HTML5 is freely available on the web and if you want to meet a lot of enthusiasts of HTML5, just pop by on the IRC channel #html5 on freenet.

Tools to make your life easier

One of the main stumbling blocks for people to use for example HTML5 video instead of Flash is that you need to create the video in different formats. There are some services though that make it easy for you. I have listed a lot of them in my notes of my HTML5 multimedia talk at MIT but here is a reminder about two great services.

Archive.org for video hosting

Archive.org does not only store video for you when you release it under Creative Commons but also automatically creates an MP4 and OGG video from your movies for you.

Vid.ly for online conversion and dynamic redirection

A very new service by Encoding.com is Vid.ly which creates not only all the formats needed for different browsers for you, but also special versions for different mobile devices and HTTP streaming optimised versions for iOS devices. Furthermore, it creates one simple URL that redirects automatically to the right format. You can try it out yourself with the invite code HNY2011.

Modernizr to test for support

If you want to safely use all the new HTML5 features, there is Modernizr for you, a script that tests what the browser does support and ads classes to the HTML element that you can use in your CSS selectors and in your JavaScripts.

Polyfills to support legacy browsers

If you want to use the new features and make old browsers get the same functionality via other technologies, you can pick and choose from the selection of legacy browser polyfills available based on the same research.

Large web sites using new features

If you want to convince people that this is not only a toy for geeks, point out some of the big sites that are already using HTML5 to deliver high fidelity content like Nike’s better world, Oprah’s web site (using HTML5 video for rollovers) or the latest Apple redesign.

Help us and join the ride

We need you to make this work – you have the tools, your input is valuable and please drop by and say hello. Also, check out the Mozilla Developer network as we’ll be releasing some cool things you can be part of very soon!