A presentation on new web technologies written in a Dr. Seuss rhyme style. Learn about new stuff and be able to read to your kids at the same time.

1. HTML5
and the future of the web.
Chris Heilmann and Crystal Beasley, Mozilla, Webvisions Barcelona 2012

2. This talk is
being given
over and
over again.

3. The normal flow is this:
★ I show you incredible stuff! (in a special browser build with all kind of flags turned on)
★ You try it out later.
★ It doesn’t work for you.
★ You are behind in fixing that layout glitch in IE8 your boss
so wants you to fix.
★ I am awesome, you are frustrated.

4. Something is broken...
There seems to be a disconnect between the “web development and
design scene” and both the market we are working for and the
companies building the tools we use.

5. we <3 abstractions!
http://www.flickr.com/photos/pa1nt/2395397976/
We seem to be obsessed with abstractions. Instead of using ideas
like for example vendor prefixes in browsers we write a library to not
have to care about them. This leads to a lot of problems with
experimental implementations becoming necessary features and new
developers learning abstractions instead of the core technologies.

6. Everybody is a creator:
Last year: 37 new
microlibraries and 10 new
“innovative CSS work
frameworks”
We all want to be creators and build a thing that makes it easier for
others to code. We don’t even follow up any longer if they are used or
not, the concept of having built them makes us already feel great.

7. “This photo was taken by photographer Jack Bradley and depicts the exact moment this boy, Harold Whittles,
hears for the very first time ever.The doctor treating him has just placed an earpiece in his left ear.
Date unknown. “
I think we have forgotten a bit about the wonder of hearing and
learning and are too focused on building what brings change. We
have two ears but one mouth and most of the time our speaking
to listening ratio does not reflect that.

8. At Mozilla we have a lot of programs to turn people into webmakers and it is
amazing to see how excited kids are doing their first few web things using
Mozilla Thimble.

9. Unless someone like you
cares a whole awful lot,
nothing is going to get better.
It's not.
On the flight over here I watched the Lorax based on the book by
Dr. Seuss and I loved it - especially this quote. I actually got so inspired,
that I wrote the rest of this presentation in the style of Dr. Seuss. That
way all of you in the audience who have kids can read to them and
learn about the future of the web at the same time.

10. http://codepo8.github.com/seussweb/
I uploaded the whole “poem” to github, where you can find it and use it -
be my guest. There are a lot of links in there for you to follow and read
at your own leisure.

11. http://www.chrisharrison.net/index.php/Visualizations/InternetMap
There's a big web out there,
it's huge - I tell you,
it spans the whole world,
but it was boring and blue…

12. Then change came about,
in the shape of a fox,
it was cunning and open,
and it broke all the locks.

13. Others showed up,
and joined the good fight,
a singer, an adventurer,
and a shiny new knight.

14. These all played together,
and spoke the same tongue,
which brought back old players,
to join them in song.

15. A standard was set,
and it changed a few things,
a richer web for apps,
was the promise it brings.

16. Bah, standards! Who needs them?
Some flashy ones said,
till a phone that was smart,
kicked them out of its bed.

17. https://github.com/SirPepe/SpecGraph#html5-spezifikations-%C3%9Cbersicht--
We moved past one standard,
as web work is richer,
so "HTML5 and friends",
paints a much better <picture>.

18. http://www.flickr.com/photos/ikkoskinen/4046500800/
Things that are fun,
should be shiny and cool,
that's why the new standards
bring many a new tool.

19. Watching and hearing,
are what people like to do.
Using <audio> and <video> is simple,
and you can do it , too.

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

21. If beats and frequencies are
what you need to play,
check the Web Audio API -
it gives you just that - even today.

22. http://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/
To play nice with batteries,
use requestAnimationFrame(),
don't let it stop you
that it has such a long name.

23. http://alteredqualia.com/
3D graphics are thrilling,
as gamers will tell,
we now have that on the web
and it is called WebGL.

24. Water goes everywhere you pour it,
just ask Chris about his Macbook Air :(
MediaQueries allow you be as fluid
and respond instead of despair.

25. Natural movements are smooth,
just open your eyes.
With CSS animation, transforms and transition,
you can mimic this - nice!

26. "The web means you need to be online",
I hear smartypants gloat,
well, we have offline storage,
so there - take your coat.

27. Got a cam and some friends,
and do you want to chat?
WebRTC is what you need,
even to show off your cat.

28. Srsly?
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.

29. An artist needs a <canvas>,
and HTML5 gave us that.
Read, write and convert pixels,
All in the client, it's mad!

30. http://mozilla.github.com/x-tag/demo.html
"We don't have rich elements!"
many people complain,
Use Web Components with X-Tag
and create them - easy to maintain.

31. god?
password?
password123?
letmein?
ihatethis?
Passwords are tough,
it is easy to see,
so allow login with emails,
using BrowserID.

32. The web is a mess,
with third party buttons abound.
Web Intents make them pointless,
let's not have them around.

33. Magic and stuff!
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.

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

35. http://www.flickr.com/photos/crimsonninjagirl/241166239/
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.

36. You don't jump in a river,
if you don't know its depth.
On the web using Modernizr,
should be your first step.

37. Give new stuff to new players,
and use it to enhance.
Don't support when it's not needed
IE6 only walks - it can't dance!

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

39. And those prefixes vanish,
you mustn't forget!
End with a prefixless version,
It's your very best bet.

40. http://movethewebforward.org/
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.

41. http://movethewebforward.org/
The web is on phones,
tablets, computers, TVs.
We have to move it forward.
or else our existence will cease.

42. http://blog.mozilla.org/blog/2012/07/02/firefox-mobile-os/
Hardware that is locked up,
is not what we are about,
so check out Firefox OS,
if you like the web - you’ll like it -
no doubt.

43. http://coding.smashingmagazine.com/2011/09/07/help-the-community-report-browser-bugs/
Last but not least,
if you find something's wrong
please file a bug and tell us,
this is how things get done.

44. http://www.flickr.com/photos/wilderdom/64733125/
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.

45. Thanks!
Christian Heilmann
@codepo8
Crystal Beasley
@skinny
So well done for reading and listening,
and going great lengths,
that's all we got time for,
so good-bye and thanks!