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

HTML5 for all

Sep 11, 2014

Download

Technology

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
!
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: HTML5 for all

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

Page 2: HTML5 for all
Page 3: HTML5 for all

<!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>

Page 4: HTML5 for all
Page 5: HTML5 for all
Page 6: HTML5 for all
Page 7: HTML5 for all
Page 8: HTML5 for all

<!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>

Page 9: HTML5 for all

<!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>

Page 10: HTML5 for all

<section> <nav> <article>

<aside> <hgroup>

<header> <footer> <time>

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

Page 11: HTML5 for all
Page 12: HTML5 for all

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

Page 13: HTML5 for all

<canvas></canvas>

Page 14: HTML5 for all

And that’s it!

Page 15: HTML5 for all
Page 16: HTML5 for all

http://www.20thingsilearned.com/

Page 17: HTML5 for all

http://wheelsofsteel.net

http://wheelsofsteel.net

Page 18: HTML5 for all

Using capacities...

Page 19: HTML5 for all

http://folding.stanford.edu/

http://folding.stanford.edu/

Page 20: HTML5 for all
Page 21: HTML5 for all
Page 22: HTML5 for all
Page 23: HTML5 for all

10.2bnAndroid Devices

Page 24: HTML5 for all

42.3bn

iPhones

Page 25: HTML5 for all

2

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

Page 26: HTML5 for all
Page 27: HTML5 for all

Building the future web...

Page 28: HTML5 for all
Page 29: HTML5 for all
Page 30: HTML5 for all
Page 31: HTML5 for all
Page 32: HTML5 for all

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

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

Page 33: HTML5 for all

Old and good principles.

Page 34: HTML5 for all
Page 35: HTML5 for all
Page 36: HTML5 for all
Page 37: HTML5 for all

CMD+U(CTRL+U)

Page 38: HTML5 for all

Company support

Page 39: HTML5 for all
Page 41: HTML5 for all
Page 43: HTML5 for all

Screencast of Nikebetterworld

http://nikebetterworld.com/

Page 45: HTML5 for all
Page 46: HTML5 for all

Adapting to change...

Page 47: HTML5 for all

Markup

Stuff for Browser/Parser developers

HTML(5)

JavaScript APIsgeneral WTF

Page 48: HTML5 for all
Page 49: HTML5 for all
Page 50: HTML5 for all
Page 51: HTML5 for all

Let’s check the toy box!

Page 52: HTML5 for all

http://c64.superdefault.com/

Page 54: HTML5 for all
Page 57: HTML5 for all

SVG

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

Page 58: HTML5 for all

http://highcharts.com

Page 59: HTML5 for all

Local Storage

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

Page 60: HTML5 for all

Offline

Page 61: HTML5 for all

CSS3

Page 62: HTML5 for all

Geolocation

Page 63: HTML5 for all

Web Sockets

Page 64: HTML5 for all
Page 65: HTML5 for all

in

3D

Page 66: HTML5 for all
Page 70: HTML5 for all

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

Page 71: HTML5 for all

http://animatable.com

Page 72: HTML5 for all

http://animatable.com

Page 73: HTML5 for all
Page 75: HTML5 for all

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

Page 76: HTML5 for all
Page 77: HTML5 for all
Page 78: HTML5 for all

Help is available!

Page 79: HTML5 for all
Page 80: HTML5 for all
Page 81: HTML5 for all

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

Page 82: HTML5 for all

http://html5boilerplate.com/

Page 83: HTML5 for all

http://www.modernizr.com/

Page 84: HTML5 for all

http://diveintohtml5.org/

Page 85: HTML5 for all

http://html5doctor.com/

Page 86: HTML5 for all

http://www.htmlfivewow.com/

Page 87: HTML5 for all

https://build.phonegap.com/

Page 88: HTML5 for all

http://webowonder.org

Page 89: HTML5 for all
Page 90: HTML5 for all
Page 91: HTML5 for all
Page 92: HTML5 for all
Page 93: HTML5 for all
Page 94: HTML5 for all
Page 95: HTML5 for all
Page 96: HTML5 for all

Thank you!

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