Post on 11-Sep-2014
description
HTML5 - Battles still to be won!
Christian Heilmann, Mozilla, Open Web Camp 3, July 2011
Excitement.
http://www.youtube.com/watch?v=p92QfWOw88I
http://wheelsofsteel.net
http://wheelsofsteel.net
Misnomer.
<!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>
Markup
Stuff for Browser/Parser developers
HTML(5)
JavaScript APIsgeneral WTF
New Tech!
WebGL
http://bodybrowser.googlelabs.com
http://www.nissanusa.com/leaf-electric-car/index
Screencast of Nikebetterworld
http://nikebetterworld.com/
http://www.schillmania.com/content/entries/2011/wheels-of-steel/
http://wheelsofsteel.net
http://www.flickr.com/photos/anvancy/2578351562/
NIHhttp://en.wikipedia.org/wiki/Not_Invented_Herehttp://www.flickr.com/photos/tillwe/1526490488/
http://www.flickr.com/photos/london/51301816/
http://folding.stanford.edu/
http://folding.stanford.edu/
HTML5 = Using the capabilities of the
technology we have instead of limiting ourselves to the lowest common denominator.
Adaptation
Separation of concerns.
In the old days...
Behaviour
Presentation
Structure
HTM
L
DHTML days (1)
Behaviour
Presentation
Structure
HTM
L
JSJS
DHTML days (2)
Behaviour
Presentation
Structure
JSCSS
HTM
L
The gospel (according to Zeldman)
Behaviour
Presentation
Structure
JS
CSS
HTM
L
The now...Behaviour
Presentation
Structure
JSCSS
HTM
L
The challenge:
Applying best practices of the past without sounding like grumpy old people.
The solution:
Following the spirit of best practices and pointing out their benefits instead of harping on about them.
Agnosticism
http://www.flickr.com/photos/amulligan/270191276/
Causes tofight for.
Learn JavaScript!
Keep the web OS-independent
CMD+U(CTRL+U)
Things to applaud:
Sane progressiveenhancement.
http://animatable.com
What about old infrastructure?
Danger.
Support means you to test with it.Don’t support if you can’t ensure a good experience.Don’t waste testing time on the undead.
Check this out!
http://jasonweaver.name
Mediaqueries
http://thisshell.com
HTML5 Video + Canvas
http://github.com
History pushstate
Local Storage
http://www.flickr.com/photos/blude/2665906010/
Offline
http://www.flickr.com/photos/spentrails/3245564940
CSS3
Geolocation
https://demos.mozilla.org/en-US/#holo-mobile
Web Development has been a long and arduous journey...
It is time we have some fun!
Cheers!Chris Heilmann
@codepo8#mozilla
#html5/freenet