HTML 5: The Future of the Web

1. HTML 5: The Future of the Web Tim Wright | csskarma.com | @csskarma Friday, July 23, 2010 1

2. A Brief Introduction • University of Southern California Web Services • CSSKarma • Smashing Magazine & SitePoint csskarma.com/presentations/penn Friday, July 23, 2010 2

3. The Goal. Friday, July 23, 2010 3

4. What we’ll cover • What is it? • Living in the past • Debunking some rumors • New Attributes & Elements • Audio & Video APIs Friday, July 23, 2010 4

5. What else we’ll cover • Forms • Accessibility • Geolocation • HTML 5 Storage & sockets • Browser & Device Support • Current Events Friday, July 23, 2010 5

6. HTML 5 = Markup + JS APIs Friday, July 23, 2010 6

7. Quick History 1991 - Informal HTML 1998 - CSS 2 1994 - HTML 2 2000 - XHTML 1 1996 - CSS 1 & JavaScript 2002 - Tableless designs 1997 - HTML 4 2005 - Ajax 2009 - HTML 5 Friday, July 23, 2010 7

8. Is HTML 5 Ready? via ishtml5readyyet.com Friday, July 23, 2010 8

9. The real scoop • Last call for a working draft: Oct. 2009 • Candidate recommendation: 2012 • ﬁnished spec • Proposed recommendation: 2022 • 2 browsers with full implementation via adactio.com Friday, July 23, 2010 9

10. Browser-based usage Friday, July 23, 2010 10

11. Let’s dig around... Friday, July 23, 2010 11

12. What has changed ...everything is lighter Friday, July 23, 2010 12

13. <!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd"> • Why not html5? • Technically optional Friday, July 23, 2010 13

14. <meta charset=”utf-8”> HTML 4.01 <meta http-equiv=”Content-Type” content=”text/ html; charset=utf-8”> XHTML 1.0 <meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> via adactio.com Friday, July 23, 2010 14

15. Script & Style Before: <script type=”text/javascript”></script> <style type=”text/css”></style> After: <script></script> <style></style> Friday, July 23, 2010 15

16. Link relations • <link rel=”icon” • <link rel=”prefetch” • <link rel=”pingback” • <a rel=”external” • <a rel=”tag” Friday, July 23, 2010 16

17. Notable changes Block-level anchors Presentational elements like <i>, <b>, <cite> & <small> redeﬁned Friday, July 23, 2010 17

18. What was removed Annoying elements: <font>, <big> (but not small), <center>, <frame>, <acronym> Weird attributes we don’t use: bgcolor, axis, border, summary via adactio.com Friday, July 23, 2010 18

19. Markup freedom <li class="foo">Hello world</li> <img src="barf.jpg" alt="picture of vomit" /> <li class=foo>Hello world <img src=barf.jpg alt=picture of vomit> <LI CLASS="foo">Hello world</LI> <IMG SRC="barf.jpg" ALT="picture of vomit"> <li class=foo>Hello world</li> <img src=foo alt=bar> via adactio.com Friday, July 23, 2010 19

20. New...building robust applications Attributes Friday, July 23, 2010 20

21. Editing content <div contentEditable=”true”></div> Friday, July 23, 2010 21

22. Spellcheck <div spellcheck=”true”></div> Friday, July 23, 2010 22

23. Hiding elements <div hidden></div> Friday, July 23, 2010 23

24. Easy drag and drop <div draggable=”true”></div> document.addEventListener('dragstart', function(event) { alert(‘drag started’); }, false); Friday, July 23, 2010 24

25. Microdata <section class="vcard" id="hCard-Ricardo- Montalban" itemscope="itemscope" itemtype="http://www.data-vocabulary.org/ Person"> <p itemprop=”name” class=”fn”>Ricardo Montalban</p> <p itemprop=”nickname” class=”nickname”>Ricky</ p> </section> Friday, July 23, 2010 25

26. Embedding data-* <section data-latitude=”38.254” data- longitude=”85.72”> [ content ] </section> Data for the application to consume Friday, July 23, 2010 26

27. Structural Elements ...some new semantics Friday, July 23, 2010 27

28. Sectioning content <header <footer <nav <aside <section <article <hgroup Friday, July 23, 2010 28

29. <header> & <footer> <header> <h1>Awesome web site</h1> </header> <footer> <p>some site information</p> </footer> Friday, July 23, 2010 29

30. <nav> <nav> <ul> <li><a href=”/”>Home</li> <li><a href=”/about”>About</li> <li><a href=”/contact”>Contact</li> </ul> </nav> Friday, July 23, 2010 30

31. <aside> <aside> <p>This is content related to the main content, maybe related links of a pull-quote?</p> </aside> Friday, July 23, 2010 31

32. <section> vs. <div> <section> <p>Contributes to the overall outline of the page & related content</p> </section> Friday, July 23, 2010 32

33. <article> & <hgroup> <article> <hgroup> <h1>How to skin a cat</h1> <h2>By Jimmy Rollins</h2> </hgroup> <h3>Buy a knife</h3> <p>The article here</p> </article> Friday, July 23, 2010 33

34. Text-level semantics <figure <figcaption <mark <time <progress Friday, July 23, 2010 34

35. <ﬁgure> & <ﬁgcaption> <figure> <img src=”fungi.png” alt=”shower mold”> <figcaption> <p>This is mold in my shower, it’s gross</p> </figcaption> </figure> Friday, July 23, 2010 35

36. <time> & <mark> <time datetime=”13:15”>1:15pm EDT</time> This is a <mark>search term</mark> highlighter Friday, July 23, 2010 36

37. <progress> Your file is <progress>50%</progress> uploaded Friday, July 23, 2010 37

38. Audio & Video APIs ...filetype matters, apparently Friday, July 23, 2010 38

39. Audio <audio src=”hey_jude.ogg”> Friday, July 23, 2010 39

40. Audio <audio src=”hey_jude.ogg” controls autoplay preload> Friday, July 23, 2010 40

41. Audio <audio controls autoplay loop preload=”off”> <src=”hey_jude.mp3”> /* webkit */ <src=”hey_jude.ogg”> /* gecko */ Your browser stinks /* jerks */ </audio> http://media.io/ Friday, July 23, 2010 41

42. Video <video controls autoplay poster=”titlescreen.jpg”> <src=”monkey.ogv”> <src=”monkey.mp4”> Your browser still stinks </video> Friday, July 23, 2010 42

43. Fallbacks <video controls autoplay> <src=”monkey.ogv”> <src=”monkey.mp4”> [ flash fallback ] [ text fallback ] </video> Mobile solution? Friday, July 23, 2010 43

44. A/V Controls (play) <p id=”play”>Play</p> Friday, July 23, 2010 44

45. A/V Controls (play) var video = $('#video'); var play = $('#play'); play.click(function(){ if (video.paused == false) { video.pause(); $(this).text(‘play’); } else { video.play(); $(this).text(‘pause’); } }); Friday, July 23, 2010 45

46. A/V Controls Let’s see one: http://www.broken-links.com/tests/video/ Friday, July 23, 2010 46

47. HTML...inputs & validation 5 Forms Friday, July 23, 2010 47

48. Labeling attributes <input type=”email”> <input type=”url” placeholder=”http://”> <input type=”number” step=”2” min=”10” max=”50”> <input type=”color”> <input type=”range”> <input type=”date”> <input type=”search” autocomplete=”off”> Friday, July 23, 2010 48

49. More attr & validation <input type=”search”> <input type=”text” autofocus required> document.getElementById(“q”).focus(); Friday, July 23, 2010 49

50. Custom inputs <input type=”zip” pattern=”regex pattern” required name=”zip”> Friday, July 23, 2010 50

51. Let’s see one http://www.csskarma.com/lab/demomachine/ Friday, July 23, 2010 51

52. Degradation & Beneﬁts Degrades to a text box Increased usability & conversion rates Easier styling with attribute selectors Easy validation & less spam Friday, July 23, 2010 52

53. Accessibility Built-in vs. Bolt-on Friday, July 23, 2010 53

54. Built-in accessibility header, footer, nav, article, aside Friday, July 23, 2010 54

55. Bolt-on accessibility <header role=”banner”> <ul role=”menu”> <li role=”menuitem”> <article role=”main”> <aside role=”complementary”> <footer role=”contentinfo”> Friday, July 23, 2010 55

56. Bolt-on accessibility <section aria-atomic=”true” aria-live=”polite”> <input aria-required=”true”> *HTML5 valid* http://reader.usc.edu/dev/ Friday, July 23, 2010 56

57. I wanna use...menow! it too Friday, July 23, 2010 57

58. Class names <div class=”header”></div> <div class=”article”></div> <div class=”aside”></div> <div class=”footer”></div> Friday, July 23, 2010 58

59. Styles article, aside, details, figure, footer, header, hgroup, nav, section { display: block; } Friday, July 23, 2010 59

60. CreateElement <script> document.createElement(‘header’); document.createElement(‘nav’); document.createElement(‘section’); document.createElement(‘article’); document.createElement(‘footer’); </script> Friday, July 23, 2010 60

61. HTML Shiv by: Remy Sharp  http://html5shiv.googlecode.com/svn/trunk/html5.js Friday, July 23, 2010 61

62. Server-side JavaScript • Jaxer • Creating element in the DOM Friday, July 23, 2010 62

63. Moving forward Options for moving forward • doctype & aria roles • doctype -> class names -> aria roles • doctype -> new elements -> aria roles • Client-side JS • Server-side JS Friday, July 23, 2010 63

64. The New kids will love it ...the Web Friday, July 23, 2010 64

65. Old <head> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="html 5 demo" /> <meta name="keywords" content="example, web site, html5" /> <title>Title</title> <link rel="icon" href="favicon.ico" type="image/x-icon" /> <link href="website.css" rel="stylesheet" type="text/css" media="all" /> <script type=”text/javascript” src=”website.js”></script> </head> Friday, July 23, 2010 65

66. New <head> <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8”> <meta name=”description” content=”html 5 demo”> <meta name=”keywords” content=”example, website, html5”> <title>Title</title> <link rel=”icon” href=”favicon.ico”> <link rel=”preftech” href=”nextpage.html”> <link href=”website.css” rel=”stylesheet” media=”all”> <script src=”website.js”></script> </head> Friday, July 23, 2010 66

67. Old <body> <body> <div id=”header”><h1><a href=”/”>Site Title</a></ h1></div> <div id=”nav”> <ul> <li><a href=”/about”>About</a></li> </ul> </div> <div id=”content”></div> <div id=”sidebar”></div> <div id=”footer”></div> </body> Friday, July 23, 2010 67

68. New <body> <body> <header role=”banner”><h1><a href=”/”>Site Title</a></ h1></header> <nav> <ul role=”menu”> <li role=”menuitem”><a href=”#”>About</a></li> </ul> </nav> <article role=”main”></article> <aside role=”complimentary”></aside> <footer role=”contentinfo”></footer> </body> Friday, July 23, 2010 68

69. Old <form> <form action=”” method=”post”> <label for=”name”>Name</label> <input type=”text” name=”name” id=”name”/> <label for=”email”>E-mail</label> <input type=”text” name=”email” id=”email”/> <label for=”url”>URL</label> <input type=”text” name=”url” id=”url”/> <button type=”submit”>Submit</button> </form> Friday, July 23, 2010 69

70. New <form> <form action=”” method=”post”> <label for=”name”>Name</label> <input type=”text” name=”name” id=”name” required autofocus> <label for=”email”>E-mail</label> <input type=”email” name=”email” id=”email” required> <label for=”url”>URL</label> <input type=”url” name=”url” id=”url” placeholder=”http://” required> <button type=”submit”>Submit</button> </form> Friday, July 23, 2010 70

71. Old <video> (?) <object width="640" height="385"><param name="movie" value="video.swf"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></ param><embed src="video.swf" type="application/x- shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></ embed></object> Friday, July 23, 2010 71

72. New <video> <video src=”video.mp4” controls preload> Friday, July 23, 2010 72

73. What does clean mean? • Reduced page weight • Speed & Responsiveness • Higher conversions • Better usability • Happy users • Device development Friday, July 23, 2010 73

74. New JavaScript ...and Ninja-like qualities Friday, July 23, 2010 74

75. New JavaScript Finding elements by class (DOM API) document.getElementbyClassname(“skipmenu”); Finding elements by CSS syntax (selectors API) document.querySelectorAll(“#nav ul > li”); document.querySelector(“:hover”); <li class=foo>Hello world</li> <img src=foo alt=bar> Friday, July 23, 2010 75

76. classList API var element = $(‘div’); element.classList.add(‘class-name’); element.classList.remove(‘class-name’); element.classList.toggle(‘class-name’); via davidwalsh.name Friday, July 23, 2010 76

77. Geolocationbut still way cool Not actually HTML5, Friday, July 23, 2010 77

78. Data Sources • GPS • Cellular Network • IP Friday, July 23, 2010 78

79. Information • Latitude • Longitude • Accuracy • Altitude • Altitude Accuracy • Heading • Timestamp • Speed Friday, July 23, 2010 79

80. Privacy Friday, July 23, 2010 80

81. Getting the data function youAreHere(position){ var youAreHere = { latitude : position.coords.latitude, longitude : position.coords.longitude, accuracy : position.coords.accuracy, // meters speed : position.coords.speed, // mps altitude : position.coords.altitude, altitudeAccuracy : position.coords.altitudeAccuracy, heading : position.coords.heading, // degrees timestamp : position.timestamp }; } Friday, July 23, 2010 81

82. Error Handling function geoErrors(error){ if(error.code === 1){ $('ul').html('<li>Data not shared by user</li>'); } else if(error.code === 2){ $('ul').html('<li>Data not available for some reason</li>'); } else if(error.code === 3){ $('ul').html('<li>Connection timed out</li>'); } else if(error.code === 0){ $('ul').html('<li>Something else happened</li>'); } } Friday, July 23, 2010 82

83. Usage if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(youAreHere, geoErrors, { enableHighAccuracy: true, // increases load time maximumAge:60000, // 10 mins timeout:0 // check the cache first }); } Friday, July 23, 2010 83

84. Let’s see one http://www.csskarma.com/lab/html5/geo/ Friday, July 23, 2010 84

85. Great examples Friday, July 23, 2010 85

86. Storage & Sockets ..set it and forget it Friday, July 23, 2010 86

87. Local Storage • Persistent to the browser • Super cookies Friday, July 23, 2010 87

88. Local Storage (setting) var edit = document.getElementById('edit'); ! $(edit).blur(function() { ! localStorage.setItem('todoData', this.innerHTML); }); Friday, July 23, 2010 88

89. Local Storage (getting) if ( localStorage.getItem('todoData') ) { edit.innerHTML = localStorage.getItem ('todoData'); } Friday, July 23, 2010 89

90. Local Storage (forgetting) <p><a href=”#clear” id=”clear”>Clear storage</a></p> $('#clear').click(function(){ ! ! localStorage.clear(); ! ! location.reload(true); ! ! return false; ! }); Friday, July 23, 2010 90

91. Local Storage (demo) http://www.csskarma.com/lab/html5/localstorage/ Using: contentEditable=”true” localStorage.setItem() localStorage.getItem() localStorage.clear() Friday, July 23, 2010 91

92. Web Sockets Bi-directional, full-duplex communications channels, over a single TCP socket, designed to be implemented in Web browsers and Web servers. http://dev.w3.org/html5/websockets/ Friday, July 23, 2010 92

93. Support Friday, July 23, 2010 93

94. Active browsers Friday, July 23, 2010 94

95. Browser support CanIUse.com HTML5test.com Friday, July 23, 2010 95

96. Modern mobile devices Friday, July 23, 2010 96

97. Effects on mobile Friday, July 23, 2010 97

98. Current Events Friday, July 23, 2010 98

99. WebM video format High-quality open video format YouTube for compression over ogg (.ogv) IE9, Chrome, Firefox & Opera support WebM converter -> mirovideoconverter.com Friday, July 23, 2010 99

100. New <track> Element Friday, July 23, 2010 100

101. Resources Friday, July 23, 2010 101

102. Resources • webmproject.org • HTML5Doctor.com • HTML5gallery.com • data-vocabulary.org • WHATWG.org • HTML5 for Designers Friday, July 23, 2010 102

103. What we covered • What is it? • Living in the past • Debunking some rumors • New Attributes & Elements • Audio & Video APIs Friday, July 23, 2010 103

104. What we covered (cont.) • Forms • Accessibility • Geolocation • HTML 5 Storage & sockets • Browser & Device Support • Current Events Friday, July 23, 2010 104

105. Steal my work csskarma.com/presentations/penn/ Friday, July 23, 2010 105

106. “Never memorize something you that can look up” - Albert Einstein Friday, July 23, 2010 106

107. Questions? Friday, July 23, 2010 107

108. Find me online e-mail: timwright@csskarma.com web: http://www.csskarma.com twitter: @csskarma </presentation> Friday, July 23, 2010 108