Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Using HTML5 sensibly

18,446 views

Published on

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.

Published in: Technology
  • ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐ I love this site. It always finds me the best tutors in accordance with my needs. I have been using it since last year. The prices are not expensive compared to other sites. I am glad I discored this site:)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ♥♥♥ http://bit.ly/2F7hN3u ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ❤❤❤ http://bit.ly/2F7hN3u ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Using HTML5 sensibly

  1. 1. Using HTML5 sensiblyChristian Heilmann, London Ajax User Meetup, February 2011
  2. 2. This will be a change frommy normal talks.Instead of giving you thefacts, it is my turn to asksome questions.
  3. 3. But first, let me tell you astory. As stories areimportant!
  4. 4. Back in 1939......Antarctica needed exploring
  5. 5. The Antarctic Explorer
  6. 6. So let’s see what wentwrong 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 specifictricks.
  12. 12. To a degree this isunderstandable.There is a lot of confusionabout the players and thespecs.
  13. 13. HTML(5)Markup general WTFJavaScript APIsStuff for Browser/Parser developers
  14. 14. This gives people lots ofspace for interpretationand focus - and theopportunity to rant.
  15. 15. The main premise ofHTML5 is pragmatism -making things simpler forall of us.
  16. 16. Another big topic is thatXML was just not for theweb - end users should notsuffer for the errors of theauthors.
  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 - cest 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, cest 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 newsemantic elements (basedon class names in use) thatstructure our documentsmuch better than before.
  20. 20. <!DOCTYPE html><html lang="en"><head> <title>HTML5, cest moi, ou HTML...</title> <link rel="stylesheet" href="styles.css"> <script src="magic.js"></script></head><body> <header>Heading! Everybody duck!</header> <section> <p>I am content, hear me roar!</p> </section> <footer><p>By me!</p></footer></body></html>
  21. 21. HTML5 definesand expectsbrowsers to fixomissions forus - anddoesn’t mindcase or quotes.
  22. 22. <!DOCTYPE html><html lang=en> <TITLE>HTML5, cest moi, ou HTML...</title> <LINK rel=stylesheet href=styles.css> <script src=magic.js></SCRIPT><body> <HEADER>Heading! Everybody duck!</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 browsersdo that anyways - justcheck the generated codeof a document like that.
  24. 24. <!DOCTYPE html><html lang="en"><head> <title>HTML5, cest moi, ou HTML...</title> <link rel="stylesheet" href="styles.css"> <script src="magic.js"></script> </head><body> <header>Heading! Everybody duck!</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, cest moi, ou HTML...</title> <LINK rel=stylesheet href=styles.css> <script src=magic.js></SCRIPT><body> <HEADER>Heading! Everybody duck!</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, cest moi, ou HTML...</title> <link rel="stylesheet" href="styles.css"> <script src="magic.js"></script></head><body> <header>Heading! Everybody duck!</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 stufffor us, this has always beenthe case.
  28. 28. ?Can innovation be based on“people never did thiscorrectly anyways”?
  29. 29. ?Is it HTML or BML?
  30. 30. ?Should HTML be there onlyfor browsers?What about conversionServices? Search bots?Content scrapers?
  31. 31. Internet Explorer 6
  32. 32. Internet Explorer doesn’tallow styling for elements itdoesn’t understand as partof HTML.
  33. 33. HTML is the thing we baseeverything on - so if weexclusively use the newHTML5 elements, we giveIE unstyled documents.
  34. 34. Time to applysome fixes!
  35. 35. First fix - elements createdwith 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>Hello!</header></body></html>
  36. 36. Remy Sharp packaged thatup nicely in HTML5shiv. http://code.google.com/p/html5shiv/
  37. 37. Cue the purists of the web.“HTML should work withoutJavaScript!”
  38. 38. Next solution:Sending HTML5 as XML orgiving 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 newelements..header,header,.footer,footer,.aside,aside,.section,section{ display:block;}
  40. 40. <!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"> <title>HTML5, cest moi, ou HTML...</title> <link rel="stylesheet" href="styles.css"> <script src="magic.js"></script> </head> <body> <div class="header"><header> Heading! Everybody duck! </header></div> <div class="section"><section> <p>I am content, hear me roar!</p> </section></div> <div class="footer"><footer> <p>By me, bitches!</p> </footer></div></body></html>
  41. 41. Bloody Internet Explorer!We always have to dothings extra for it!
  42. 42. All browsers fail in one wayor another and needpatches. Our job is to knowthem.Luckily, there is help.
  43. 43. http://www.modernizr.com/
  44. 44. http://html5boilerplate.com/
  45. 45. And as if by magic - themuch shorter andpragmatic markup becamemore 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 buildscript--> <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 HTML5APIs with legacy browsersis using polyfills.
  50. 50. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  51. 51. ?Should we shoe-horn newtechnology into legacybrowsers?
  52. 52. ?Do patches add complexityas we need to test theirperformance?
  53. 53. ?How about moving IE<9fixes to the server side?Padding with DIVs withclasses and no JS for IE?
  54. 54. Making video and audiosimpler.
  55. 55. Embedding audio and videois easy in HTML5<video src="interview.ogv" controls> <a href="interview.ogv">Download the video</a></video>
  56. 56. To make all capablebrowsers 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 abusiness.
  58. 58. However, there is a realproblem for businesses.
  59. 59. http://www.webkitchen.be/2011/01/26/stealing-content-was-never-easier-than-with-html5/
  60. 60. ?Can we expect contentcreators to create video inmany formats to supportan open technology?
  61. 61. ?Can a service like vid.ly betrusted for content creationand storage?
  62. 62. ?Is HTML5 not applicable forpremium content?
  63. 63. It is time for all of us totake initiative and makethis work.
  64. 64. Question authority and callout wrong messaging.
  65. 65. Bad use of technologydoesn’t only break end userexperiences - it breaks theweb!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@codepo8http://icant.co.uk

×