HTML5 battles still to be won
90
HTML5 - Battles still to be won! Christian Heilmann, Mozilla, Open Web Camp 3, July 2011
-
date post
11-Sep-2014 -
Category
Education
-
view
19 -
download
0
description
HTML5 is here to stay. It is time to re-think some of the best practices we defined in the last years. This keynote of the open web camp in stanford, california describes what we should consider.
Transcript of HTML5 battles still to be won
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
![[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ......2.1.55 [HTML5] Section 4.9.5 The tbody element ..... 55 2.1.56 [HTML5] Section 4.9.8 The tr element..... 55 2.1.57 [HTML5]](https://static.fdocuments.in/doc/165x107/5fb29d840f1bb936bf5a22fb/ms-html5-microsoft-edge-internet-explorer-html5-2155-html5-section.jpg)