Successfully reported this slideshow.
Your SlideShare is downloading. ×

Using HTML5 sensibly

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
[In Control 2010] HTML5
[In Control 2010] HTML5
Loading in …3
×

Check these out next

1 of 74 Ad

Using HTML5 sensibly

Download to read offline

HTML5 is hot right now and a lot is being said about it. It is time to take a look at what it means to apply it on the web and see how things work out. Turns out we still have a lot to fix and we need your help.

HTML5 is hot right now and a lot is being said about it. It is time to take a look at what it means to apply it on the web and see how things work out. Turns out we still have a lot to fix and we need your help.

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Similar to Using HTML5 sensibly (20)

Advertisement

More from Christian Heilmann (20)

Recently uploaded (20)

Advertisement

Using HTML5 sensibly

  1. 1. Using HTML5 sensibly Christian Heilmann, London Ajax User Meetup, February 2011
  2. 2. This will be a change from my normal talks. Instead of giving you the facts, it is my turn to ask some questions.
  3. 3. But first, let me tell you a story. As stories are important!
  4. 4. Back in 1939... ...Antarctica needed exploring
  5. 5. The Antarctic Explorer
  6. 6. So let’s see what went wrong there... ★ Purely engineering driven ★ Tested while on the road ★ Never tested in the real environment ★ Massive media excitement before it proved its worth
  7. 7. HTML5 is the new hotness!
  8. 8. http://studio.html5rocks.com/
  9. 9. http://www.apple.com/html5/
  10. 10. http://html5advent.com/
  11. 11. Everything is HTML5 - including browser specific tricks.
  12. 12. To a degree this is understandable. There is a lot of confusion about the players and the specs.
  13. 13. HTML(5) Markup general WTF JavaScript APIs Stuff for Browser/Parser developers
  14. 14. This gives people lots of space for interpretation and focus - and the opportunity to rant.
  15. 15. The main premise of HTML5 is pragmatism - making things simpler for all of us.
  16. 16. Another big topic is that XML was just not for the web - end users should not suffer for the errors of the authors.
  17. 17. <!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>
  18. 18. <!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>
  19. 19. HTML5 also includes new semantic elements (based on class names in use) that structure our documents much better than before.
  20. 20. <!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>
  21. 21. HTML5 defines and expects browsers to fix omissions for us - and doesn’t mind case or quotes.
  22. 22. <!DOCTYPE html> <html lang=en> <TITLE>HTML5, c'est moi, ou HTML...</title> <LINK rel=stylesheet href=styles.css> <script src=magic.js></SCRIPT> <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>
  23. 23. The reason is that browsers do that anyways - just check the generated code of a document like that.
  24. 24. <!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>
  25. 25. <!DOCTYPE html> <html lang=en> <TITLE>HTML5, c'est moi, ou HTML...</title> <LINK rel=stylesheet href=styles.css> <script src=magic.js></SCRIPT> <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>
  26. 26. <!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! <footer></footer> </p> <p>By me!</p> </section> </body></html>
  27. 27. Browsers fix a lot of stuff for us, this has always been the case.
  28. 28. ? Can innovation be based on “people never did this correctly anyways”?
  29. 29. ? Is it HTML or BML?
  30. 30. ? Should HTML be there only for browsers? What about conversion Services? Search bots? Content scrapers?
  31. 31. Internet Explorer 6
  32. 32. Internet Explorer doesn’t allow styling for elements it doesn’t understand as part of HTML.
  33. 33. HTML is the thing we base everything on - so if we exclusively use the new HTML5 elements, we give IE unstyled documents.
  34. 34. Time to apply some fixes!
  35. 35. First fix - elements created with JS can be styled in IE. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style>header{color:#fff;background:#369;}</style> <script>document.createElement('header');</script> </head> <body> <header><h1>Hello!</h1></header> </body> </html>
  36. 36. Remy Sharp packaged that up nicely in HTML5shiv. http://code.google.com/p/html5shiv/
  37. 37. Cue the purists of the web. “HTML should work without JavaScript!”
  38. 38. Next solution: Sending HTML5 as XML or giving it a namespace. http://www.ibm.com/developerworks/xml/library/x-think45/ http://www.debeterevormgever.nl/html5-ie-without-javascript/
  39. 39. Purist solution: add DIVs around the new elements. .header,header, .footer,footer, .aside,aside, .section,section{ display:block; }
  40. 40. <!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> <div class="header"><header> <h1>Heading! Everybody duck!</h1> </header></div> <div class="section"><section> <p>I am content, hear me roar!</p> </section></div> <div class="footer"><footer> <p>By me</p> </footer></div> </body> </html>
  41. 41. Bloody Internet Explorer! We always have to do things extra for it!
  42. 42. All browsers fail in one way or another and need patches. Our job is to know them. Luckily, there is help.
  43. 43. http://www.modernizr.com/
  44. 44. http://html5boilerplate.com/
  45. 45. And as if by magic - the much shorter and pragmatic markup became more complex again.
  46. 46. <!doctype html> <!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]--> <!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]--> <!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0">
  47. 47. <link rel="shortcut icon" href="/favicon.ico"> <link rel="apple-touch-icon" href="/apple-touch- icon.png"> <link rel="stylesheet" href="css/style.css?v=2"> <script src="js/libs/modernizr-1.6.min.js"></script> </head> <body> <div id="container"> <header> </header> <div id="main"> </div> <footer> </footer> </div> <!-- end of #container --> <script src="//ajax.googleapis.com/ajax/libs/jquery/ 1.4.2/jquery.js"> </script>
  48. 48. <script>!window.jQuery && document.write(unescape ('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script %3E'))</script> <!-- scripts concatenated and minified via ant build script--> <script src="js/plugins.js"></script> <script src="js/script.js"></script> <!-- end concatenated and minified scripts--> <!--[if lt IE 7 ]> <script src="js/libs/dd_belatedpng.js"></script> <script> DD_belatedPNG.fix('img, .png_bg'); </ script> <![endif]--> </body> </html>
  49. 49. One solution to use HTML5 APIs with legacy browsers is using polyfills.
  50. 50. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross- browser-Polyfills
  51. 51. ? Should we shoe-horn new technology into legacy browsers?
  52. 52. ? Do patches add complexity as we need to test their performance?
  53. 53. ? How about moving IE<9 fixes to the server side? Padding with DIVs with classes and no JS for IE?
  54. 54. Making video and audio simpler.
  55. 55. Embedding audio and video is easy in HTML5 <video src="interview.ogv" controls> <a href="interview.ogv">Download the video</a> </video>
  56. 56. To make all capable browsers play the video... <video controls> <source src="interview.mp4" type="video/mp4"> </source> <source src="interview.webm" type="video/webm"> </source> <source src="interview.ogv" type="video/ogg"> </source> <p>Download the <a href="interview.mp4">video in MP4 format</a>. </p> </video>
  57. 57. Where there is a need, there is an opportunity for a business.
  58. 58. However, there is a real problem for businesses.
  59. 59. http://www.webkitchen.be/2011/01/26/stealing- content-was-never-easier-than-with-html5/
  60. 60. ? Can we expect content creators to create video in many formats to support an open technology?
  61. 61. ? Can a service like vid.ly be trusted for content creation and storage?
  62. 62. ? Is HTML5 not applicable for premium content?
  63. 63. It is time for all of us to take initiative and make this work.
  64. 64. Question authority and call out wrong messaging.
  65. 65. Bad use of technology doesn’t only break end user experiences - it breaks the web! http://gawker.com/#!5754678/what-should-our-new- national-anthem-be
  66. 66. http://www.whatwg.org/mailing-list
  67. 67. https://developer.mozilla.org/
  68. 68. Thanks! Chris Heilmann @codepo8 http://icant.co.uk

×