HTML 5: The Future of the Web

HTML 5: The Future of the Web
HTML 5: The Future of the Web Tim Wright | csskarma.com | @csskarma Friday, July 23, 2010 1
A Brief Introduction • University of Southern California Web Services • CSSKarma • Smashing Magazine & SitePoint csskarma.com/presentations/penn Friday, July 23, 2010 2
The Goal. Friday, July 23, 2010 3
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
What else we’ll cover • Forms • Accessibility • Geolocation • HTML 5 Storage & sockets • Browser & Device Support • Current Events Friday, July 23, 2010 5
HTML 5 = Markup + JS APIs Friday, July 23, 2010 6
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
Is HTML 5 Ready? via ishtml5readyyet.com Friday, July 23, 2010 8
The real scoop • Last call for a working draft: Oct. 2009 • Candidate recommendation: 2012 • finished spec • Proposed recommendation: 2022 • 2 browsers with full implementation via adactio.com Friday, July 23, 2010 9
Browser-based usage Friday, July 23, 2010 10
Let’s dig around... Friday, July 23, 2010 11
What has changed ...everything is lighter Friday, July 23, 2010 12
<!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
<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
Script & Style Before: <script type=”text/javascript”></script> <style type=”text/css”></style> After: <script></script> <style></style> Friday, July 23, 2010 15
Link relations • <link rel=”icon” • <link rel=”prefetch” • <link rel=”pingback” • <a rel=”external” • <a rel=”tag” Friday, July 23, 2010 16
Notable changes Block-level anchors Presentational elements like <i>, <b>, <cite> & <small> redefined Friday, July 23, 2010 17
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
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
New...building robust applications Attributes Friday, July 23, 2010 20
Editing content <div contentEditable=”true”></div> Friday, July 23, 2010 21
Spellcheck <div spellcheck=”true”></div> Friday, July 23, 2010 22
Hiding elements <div hidden></div> Friday, July 23, 2010 23
Easy drag and drop <div draggable=”true”></div> document.addEventListener('dragstart', function(event) { alert(‘drag started’); }, false); Friday, July 23, 2010 24
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
Embedding data-* <section data-latitude=”38.254” data- longitude=”85.72”> [ content ] </section> Data for the application to consume Friday, July 23, 2010 26
Structural Elements ...some new semantics Friday, July 23, 2010 27
Sectioning content <header <footer <nav <aside <section <article <hgroup Friday, July 23, 2010 28
<header> & <footer> <header> <h1>Awesome web site</h1> </header> <footer> <p>some site information</p> </footer> Friday, July 23, 2010 29
<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
<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
<section> vs. <div> <section> <p>Contributes to the overall outline of the page & related content</p> </section> Friday, July 23, 2010 32
<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
Text-level semantics <figure <figcaption <mark <time <progress Friday, July 23, 2010 34
<figure> & <figcaption> <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
<time> & <mark> <time datetime=”13:15”>1:15pm EDT</time> This is a <mark>search term</mark> highlighter Friday, July 23, 2010 36
<progress> Your file is <progress>50%</progress> uploaded Friday, July 23, 2010 37
Audio & Video APIs ...filetype matters, apparently Friday, July 23, 2010 38
Audio <audio src=”hey_jude.ogg”> Friday, July 23, 2010 39
Audio <audio src=”hey_jude.ogg” controls autoplay preload> Friday, July 23, 2010 40
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
Video <video controls autoplay poster=”titlescreen.jpg”> <src=”monkey.ogv”> <src=”monkey.mp4”> Your browser still stinks </video> Friday, July 23, 2010 42
Fallbacks <video controls autoplay> <src=”monkey.ogv”> <src=”monkey.mp4”> [ flash fallback ] [ text fallback ] </video> Mobile solution? Friday, July 23, 2010 43
A/V Controls (play) <p id=”play”>Play</p> Friday, July 23, 2010 44
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
A/V Controls Let’s see one: http://www.broken-links.com/tests/video/ Friday, July 23, 2010 46
HTML...inputs & validation 5 Forms Friday, July 23, 2010 47
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
More attr & validation <input type=”search”> <input type=”text” autofocus required> document.getElementById(“q”).focus(); Friday, July 23, 2010 49
Custom inputs <input type=”zip” pattern=”regex pattern” required name=”zip”> Friday, July 23, 2010 50
Let’s see one http://www.csskarma.com/lab/demomachine/ Friday, July 23, 2010 51
Degradation & Benefits Degrades to a text box Increased usability & conversion rates Easier styling with attribute selectors Easy validation & less spam Friday, July 23, 2010 52
Accessibility Built-in vs. Bolt-on Friday, July 23, 2010 53
Built-in accessibility header, footer, nav, article, aside Friday, July 23, 2010 54
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
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
I wanna use...menow! it too Friday, July 23, 2010 57
Class names <div class=”header”></div> <div class=”article”></div> <div class=”aside”></div> <div class=”footer”></div> Friday, July 23, 2010 58
Styles article, aside, details, figure, footer, header, hgroup, nav, section { display: block; } Friday, July 23, 2010 59
CreateElement <script> document.createElement(‘header’); document.createElement(‘nav’); document.createElement(‘section’); document.createElement(‘article’); document.createElement(‘footer’); </script> Friday, July 23, 2010 60
HTML Shiv by: Remy Sharp  http://html5shiv.googlecode.com/svn/trunk/html5.js Friday, July 23, 2010 61
Server-side JavaScript • Jaxer • Creating element in the DOM Friday, July 23, 2010 62
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
The New kids will love it ...the Web Friday, July 23, 2010 64
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
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
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
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
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
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
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
New <video> <video src=”video.mp4” controls preload> Friday, July 23, 2010 72
What does clean mean? • Reduced page weight • Speed & Responsiveness • Higher conversions • Better usability • Happy users • Device development Friday, July 23, 2010 73
New JavaScript ...and Ninja-like qualities Friday, July 23, 2010 74
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
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
Geolocationbut still way cool Not actually HTML5, Friday, July 23, 2010 77
Data Sources • GPS • Cellular Network • IP Friday, July 23, 2010 78
Information • Latitude • Longitude • Accuracy • Altitude • Altitude Accuracy • Heading • Timestamp • Speed Friday, July 23, 2010 79
Privacy Friday, July 23, 2010 80
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
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
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
Let’s see one http://www.csskarma.com/lab/html5/geo/ Friday, July 23, 2010 84
Great examples Friday, July 23, 2010 85
Storage & Sockets ..set it and forget it Friday, July 23, 2010 86
Local Storage • Persistent to the browser • Super cookies Friday, July 23, 2010 87
Local Storage (setting) var edit = document.getElementById('edit'); ! $(edit).blur(function() { ! localStorage.setItem('todoData', this.innerHTML); }); Friday, July 23, 2010 88
Local Storage (getting) if ( localStorage.getItem('todoData') ) { edit.innerHTML = localStorage.getItem ('todoData'); } Friday, July 23, 2010 89
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
Local Storage (demo) http://www.csskarma.com/lab/html5/localstorage/ Using: contentEditable=”true” localStorage.setItem() localStorage.getItem() localStorage.clear() Friday, July 23, 2010 91
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
Support Friday, July 23, 2010 93
Active browsers Friday, July 23, 2010 94
Browser support CanIUse.com HTML5test.com Friday, July 23, 2010 95
Modern mobile devices Friday, July 23, 2010 96
Effects on mobile Friday, July 23, 2010 97
Current Events Friday, July 23, 2010 98
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
New <track> Element Friday, July 23, 2010 100
Resources Friday, July 23, 2010 101
Resources • webmproject.org • HTML5Doctor.com • HTML5gallery.com • data-vocabulary.org • WHATWG.org • HTML5 for Designers Friday, July 23, 2010 102
What we covered • What is it? • Living in the past • Debunking some rumors • New Attributes & Elements • Audio & Video APIs Friday, July 23, 2010 103
What we covered (cont.) • Forms • Accessibility • Geolocation • HTML 5 Storage & sockets • Browser & Device Support • Current Events Friday, July 23, 2010 104
Steal my work csskarma.com/presentations/penn/ Friday, July 23, 2010 105
“Never memorize something you that can look up” - Albert Einstein Friday, July 23, 2010 106
Questions? Friday, July 23, 2010 107
Find me online e-mail: timwright@csskarma.com web: http://www.csskarma.com twitter: @csskarma </presentation> Friday, July 23, 2010 108

Check these out next

HTML 5: The Future of the Web

Recommended

More Related Content

Slideshows for you(12)

Viewers also liked(20)

Similar to HTML 5: The Future of the Web(20)

More from Tim Wright(17)

Recently uploaded(20)

HTML 5: The Future of the Web