Using HTML5 sensibly
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Using HTML5 sensibly

on

  • 17,279 views

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

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.

Statistics

Views

Total Views
17,279
Views on SlideShare
17,005
Embed Views
274

Actions

Likes
23
Downloads
196
Comments
0

14 Embeds 274

http://it-republik.de 105
http://entwickler.com 69
http://www.wien.gv.at 40
http://entwickler.de 23
http://paper.li 13
http://wrttn.me 10
http://phpmagazin.de 5
http://entwickler-magazin.de 3
http://icant.co.uk 1
http://twitter.com 1
http://localhost 1
http://elearning.collin.edu 1
http://www.linkedin.com 1
http://pmomale-ld1 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Using HTML5 sensibly Presentation Transcript

  • 1. Using HTML5 sensiblyChristian Heilmann, London Ajax User Meetup, February 2011
  • 2. This will be a change frommy normal talks.Instead of giving you thefacts, it is my turn to asksome questions.
  • 3. But first, let me tell you astory. As stories areimportant!
  • 4. Back in 1939......Antarctica needed exploring
  • 5. The Antarctic Explorer
  • 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. HTML5 is the new hotness!
  • 8. http://studio.html5rocks.com/
  • 9. http://www.apple.com/html5/
  • 10. http://html5advent.com/
  • 11. Everything is HTML5 -including browser specifictricks.
  • 12. To a degree this isunderstandable.There is a lot of confusionabout the players and thespecs.
  • 13. HTML(5)Markup general WTFJavaScript APIsStuff for Browser/Parser developers
  • 14. This gives people lots ofspace for interpretationand focus - and theopportunity to rant.
  • 15. The main premise ofHTML5 is pragmatism -making things simpler forall of us.
  • 16. Another big topic is thatXML was just not for theweb - end users should notsuffer for the errors of theauthors.
  • 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. <!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. HTML5 also includes newsemantic elements (basedon class names in use) thatstructure our documentsmuch better than before.
  • 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. HTML5 definesand expectsbrowsers to fixomissions forus - anddoesn’t mindcase or quotes.
  • 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. The reason is that browsersdo that anyways - justcheck the generated codeof a document like that.
  • 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. <!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. <!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. Browsers fix a lot of stufffor us, this has always beenthe case.
  • 28. ?Can innovation be based on“people never did thiscorrectly anyways”?
  • 29. ?Is it HTML or BML?
  • 30. ?Should HTML be there onlyfor browsers?What about conversionServices? Search bots?Content scrapers?
  • 31. Internet Explorer 6
  • 32. Internet Explorer doesn’tallow styling for elements itdoesn’t understand as partof HTML.
  • 33. HTML is the thing we baseeverything on - so if weexclusively use the newHTML5 elements, we giveIE unstyled documents.
  • 34. Time to applysome fixes!
  • 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. Remy Sharp packaged thatup nicely in HTML5shiv. http://code.google.com/p/html5shiv/
  • 37. Cue the purists of the web.“HTML should work withoutJavaScript!”
  • 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. Purist solution:add DIVs around the newelements..header,header,.footer,footer,.aside,aside,.section,section{ display:block;}
  • 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. Bloody Internet Explorer!We always have to dothings extra for it!
  • 42. All browsers fail in one wayor another and needpatches. Our job is to knowthem.Luckily, there is help.
  • 43. http://www.modernizr.com/
  • 44. http://html5boilerplate.com/
  • 45. And as if by magic - themuch shorter andpragmatic markup becamemore complex again.
  • 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. <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. <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. One solution to use HTML5APIs with legacy browsersis using polyfills.
  • 50. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  • 51. ?Should we shoe-horn newtechnology into legacybrowsers?
  • 52. ?Do patches add complexityas we need to test theirperformance?
  • 53. ?How about moving IE<9fixes to the server side?Padding with DIVs withclasses and no JS for IE?
  • 54. Making video and audiosimpler.
  • 55. Embedding audio and videois easy in HTML5<video src="interview.ogv" controls> <a href="interview.ogv">Download the video</a></video>
  • 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. Where there is a need,there is an opportunity for abusiness.
  • 58. However, there is a realproblem for businesses.
  • 59. http://www.webkitchen.be/2011/01/26/stealing-content-was-never-easier-than-with-html5/
  • 60. ?Can we expect contentcreators to create video inmany formats to supportan open technology?
  • 61. ?Can a service like vid.ly betrusted for content creationand storage?
  • 62. ?Is HTML5 not applicable forpremium content?
  • 63. It is time for all of us totake initiative and makethis work.
  • 64. Question authority and callout wrong messaging.
  • 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. http://www.whatwg.org/mailing-list
  • 67. https://developer.mozilla.org/
  • 68. Thanks!Chris Heilmann@codepo8http://icant.co.uk