HTML5 and the future of the web (Dr. Seuss style)

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

This talk isbeing givenover andover again.

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.

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

we <3 abstractions! http://www.ﬂickr.com/photos/pa1nt/2395397976/We seem to be obsessed with abstractions. Instead of using ideaslike for example vendor preﬁxes in browsers we write a library to nothave to care about them. This leads to a lot of problems withexperimental implementations becoming necessary features and newdevelopers learning abstractions instead of the core technologies.

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 forothers to code. We don’t even follow up any longer if they are used ornot, the concept of having built them makes us already feel great.

“This photo was taken by photographer Jack Bradley and depicts the exact moment this boy, Harold Whittles,hears for the very ﬁrst 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 andlearning and are too focused on building what brings change. Wehave two ears but one mouth and most of the time our speakingto listening ratio does not reﬂect that.

At Mozilla we have a lot of programs to turn people into webmakers and it isamazing to see how excited kids are doing their ﬁrst few web things usingMozilla Thimble.

Unless someone like you cares a whole awful lot, nothing is going to get better. Its not.On the ﬂight over here I watched the Lorax based on the book byDr. 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. Thatway all of you in the audience who have kids can read to them andlearn about the future of the web at the same time.

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

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

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

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

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

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

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

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

http://www.ﬂickr.com/photos/ikkoskinen/4046500800/Things that are fun, should be shiny and cool,thats why the new standardsbring many a new tool.

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

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.

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

http://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/To play nice with batteries,use requestAnimationFrame(),dont let it stop youthat it has such a long name.

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

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

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

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

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

Srsly?Rhymes sometimes dont come easy,as you just became aware.So lets just move ahead quickly,this was just too much to bear.

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

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

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

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

Magic and stuff!By design HTML5 is forgiving,its parser is great.It didnt want to break the web,so lets not break it in its stead.

Course you can write weird things,and they will work - theres no doubt.But will they be readable by others?This is what its about.

http://www.ﬂickr.com/photos/crimsonninjagirl/241166239/You dont create for yourself,or your friends who are the same.You develop for the next guy,so make sure youre not to blame.

You dont jump in a river,if you dont know its depth.On the web using Modernizr,should be your ﬁrst step.

Give new stuﬀ to new players,and use it to enhance.Dont support when its not neededIE6 only walks - it cant dance!

With a vendor preﬁx browsers tell you"this is not ready".So by all means, give them a go,but dont expect to go steady.

And those preﬁxes vanish,you mustnt forget!End with a preﬁxless version,Its your very best bet.

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.

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

http://blog.mozilla.org/blog/2012/07/02/ﬁrefox-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.

http://coding.smashingmagazine.com/2011/09/07/help-the-community-report-browser-bugs/Last but not least,if you ﬁnd somethings wrongplease ﬁle a bug and tell us,this is how things get done.

http://www.ﬂickr.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.

Thanks! Christian Heilmann @codepo8 Crystal Beasley @skinnySo well done for reading and listening,and going great lengths,thats all we got time for,so good-bye and thanks!

http://christianheilmann.com	3767
http://hacks.mozilla.org	600
http://feeds.feedburner.com	78
http://drbeat.li	42
https://twitter.com	19
https://twimg0-a.akamaihd.net	19
https://hacks.mozilla.org	16
https://si0.twimg.com	16
http://www.newsblur.com	10
http://htmlfive.collected.info	8
http://mozilla.org.uk	8
http://thewebdesign.collected.info	7
http://www.twylah.com	6
http://translate.googleusercontent.com	6
http://pinterest.com	4
http://webdesigning.collected.info	4
http://127.0.0.1	4
http://newsblur.com	4
http://us-w1.rockmelt.com	3
http://1kpl.us	3
http://www.jesco.org.uk	3
http://kmt5.blogspot.in	2
http://core.traackr.com	2
http://webcache.googleusercontent.com	2
http://localhost	2
http://www.hanrss.com	2
http://www.caucapino4u.com	2
http://t.co	1
http://131.253.14.250	1
http://www.mozilla.org.uk	1
http://amplifize.com	1
http://kmt5.blogspot.com	1
http://blackboard.cpsb.org	1
http://www.linkedin.com	1

HTML5 and the future of the web (Dr. Seuss style)

by Christian Heilmann on Jul 06, 2012

Accessibility

Categories

Upload Details

Usage Rights

34 Embeds 4,646

Statistics

HTML5 and the future of the web (Dr. Seuss style) Presentation Transcript