HTML 5: The Future of the Web
Upcoming SlideShare
Loading in...5
×
 

HTML 5: The Future of the Web

on

  • 5,521 views

Presentation from 2010 Higher Education Web Symposium at UPenn (July 21, 2010)

Presentation from 2010 Higher Education Web Symposium at UPenn (July 21, 2010)

Statistics

Views

Total Views
5,521
Slideshare-icon Views on SlideShare
4,865
Embed Views
656

Actions

Likes
2
Downloads
91
Comments
1

7 Embeds 656

http://webservices.usc.edu 543
http://research.wou.edu 70
http://www.pasholank-pebe.blogspot.com 23
http://pasholank-pebe.blogspot.com 14
http://demo.libguides.com 3
http://www.coderwall.com 2
http://webcache.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Just remember, the same as a spectacular Vogue magazine, remember that no matter how close you follow the jumps: Continued on page whatever. No matter how careful you are, there's going to be the sense you missed something, the collapsed feeling under your skin that you didn't experience it all. There's that fallen heart feeling that you rushed right through the moments where you should've been paying attention. Well, get used to that feeling. That's how your whole life will feel some day. This is all practice. None of this matters. We're just warming up.Cheapest Auto Insurance In Florida
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML 5: The Future of the Web HTML 5: The Future of the Web Presentation Transcript

    • 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 <!--[if IE]> <script src="http://html5shiv.googlecode.com/ svn/trunk/html5.js"> </script> <![endif]--> 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