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 • ﬁnished 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

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> redeﬁned 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

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

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

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

http://webservices.usc.edu	441
http://www.pasholank-pebe.blogspot.com	16
http://research.wou.edu	13
http://pasholank-pebe.blogspot.com	11
http://www.coderwall.com	2
http://demo.libguides.com	2
http://webcache.googleusercontent.com	1

HTML 5: The Future of the Web

by Tim Wright on Jul 23, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 486

Statistics

HTML 5: The Future of the Web — Presentation Transcript