HTML5 for all

Post on 11-Sep-2014

12 views 0 download

Tags:

description

Keynote at the Converge SE about HTML5 and how to use it/support the cause. Amazing intro picture by Marina Lawson as a father's day present to her Dad Bruce !

Transcript of HTML5 for all

Christian Heilmann, Mozilla, Converge SE, Columbia, SC, June 2011Picture of win by Marina Lawson, who rocks!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>HTML - c'est moi!</title> <link rel="stylesheet" type="text/css" href="styles.css"> <script type="text/javascript" src="magic.js"> </script></head><body> <h1>Heading! Everybody duck!</h1> <p>I am content, hear me roar!</p> <p class="footer">By me!</p></body></html>

<!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8"> <title>HTML5, c'est moi, ou HTML...</title> <link rel="stylesheet" href="styles.css"> <script src="magic.js"></script></head><body> <h1>Heading! Everybody duck!</h1> <p>I am content, hear me roar!</p> <p class="footer">By me!</p></body></html>

<!DOCTYPE html> <html lang="en"><head> <title>HTML5, c'est moi, ou HTML...</title> <link rel="stylesheet" href="styles.css"> <script src="magic.js"></script></head><body> <header><h1>Heading! Everybody duck!</h1></header> <section> <p>I am content, hear me roar!</p> </section> <footer><p>By me!</p></footer></body></html>

<section> <nav> <article>

<aside> <hgroup>

<header> <footer> <time>

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

<video src="interview.ogv" controls> <a href="interview.ogv">Download video</a></video>

<canvas></canvas>

And that’s it!

http://www.20thingsilearned.com/

http://wheelsofsteel.net

http://wheelsofsteel.net

Using capacities...

http://folding.stanford.edu/

http://folding.stanford.edu/

10.2bnAndroid Devices

42.3bn

iPhones

2

numbers I made up and showed in a keynote style fashion!

Building the future web...

NIHhttp://en.wikipedia.org/wiki/Not_Invented_Herehttp://www.flickr.com/photos/tillwe/1526490488/

http://www.flickr.com/photos/london/51301816/

Old and good principles.

CMD+U(CTRL+U)

Company support

Screencast of Nikebetterworld

http://nikebetterworld.com/

Adapting to change...

Markup

Stuff for Browser/Parser developers

HTML(5)

JavaScript APIsgeneral WTF

Let’s check the toy box!

http://c64.superdefault.com/

SVG

http://mbostock.github.com/d3/

http://highcharts.com

Local Storage

http://www.flickr.com/photos/blude/2665906010/

Offline

CSS3

Geolocation

Web Sockets

in

3D

https://demos.mozilla.org/en-US/#holo-mobile

http://animatable.com

http://animatable.com

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

Help is available!

http://butterapp.org | http://popcorn.js

http://html5boilerplate.com/

http://www.modernizr.com/

http://diveintohtml5.org/

http://html5doctor.com/

http://www.htmlfivewow.com/

https://build.phonegap.com/

http://webowonder.org

Thank you!

Chris Heilmann@codepo8http://wait-till-i.com