html 5: the future of the web
Post on 18-Oct-2014
5.605 views
DESCRIPTION
Presentation from 2010 Higher Education Web Symposium at UPenn (July 21, 2010)TRANSCRIPT
HTML 5: The Future of the Web
Tim Wright | csskarma.com | @csskarma
1Friday, July 23, 2010
A Brief Introduction• University of Southern California Web Services
• CSSKarma
• Smashing Magazine & SitePoint
csskarma.com/presentations/penn
2Friday, July 23, 2010
The Goal.
3Friday, July 23, 2010
What we’ll cover• What is it?
• Living in the past
• Debunking some rumors
• New Attributes & Elements
• Audio & Video APIs
4Friday, July 23, 2010
What else we’ll cover• Forms
• Accessibility
• Geolocation
• HTML 5 Storage & sockets
• Browser & Device Support
• Current Events
5Friday, July 23, 2010
HTML 5 = Markup + JS APIs
6Friday, July 23, 2010
Quick History1991 - Informal HTML
1994 - HTML 2
1996 - CSS 1 & JavaScript
1997 - HTML 4
1998 - CSS 2
2000 - XHTML 1
2002 - Tableless designs
2005 - Ajax
2009 - HTML 5
7Friday, July 23, 2010
Is HTML 5 Ready?
via ishtml5readyyet.com
8Friday, July 23, 2010
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
9Friday, July 23, 2010
Browser-based usage
10Friday, July 23, 2010
Let’s dig around...
11Friday, July 23, 2010
What has changed...everything is lighter
12Friday, July 23, 2010
<!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
13Friday, July 23, 2010
<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
14Friday, July 23, 2010
Script & StyleBefore:<script type=”text/javascript”></script>
<style type=”text/css”></style>
After:<script></script>
<style></style>
15Friday, July 23, 2010
Link relations• <link rel=”icon”
• <link rel=”prefetch”
• <link rel=”pingback”
• <a rel=”external”
• <a rel=”tag”
16Friday, July 23, 2010
Notable changesBlock-level anchors
Presentational elements like <i>, <b>, <cite> & <small> redefined
17Friday, July 23, 2010
What was removedAnnoying elements: <font>, <big> (but not small), <center>, <frame>, <acronym>
Weird attributes we don’t use: bgcolor, axis, border, summary
via adactio.com
18Friday, July 23, 2010
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
19Friday, July 23, 2010
New Attributes...building robust applications
20Friday, July 23, 2010
Editing content
<div contentEditable=”true”></div>
21Friday, July 23, 2010
Spellcheck
<div spellcheck=”true”></div>
22Friday, July 23, 2010
Hiding elements
<div hidden></div>
23Friday, July 23, 2010
Easy drag and drop<div draggable=”true”></div>
document.addEventListener('dragstart', function(event) { alert(‘drag started’);}, false);
24Friday, July 23, 2010
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>
25Friday, July 23, 2010
Embedding data-*<section data-latitude=”38.254” data-longitude=”85.72”>
[ content ]</section>
Data for the application to consume
26Friday, July 23, 2010
Structural Elements...some new semantics
27Friday, July 23, 2010
Sectioning content<header<footer<nav<aside<section<article<hgroup
28Friday, July 23, 2010
<header> & <footer><header><h1>Awesome web site</h1>
</header>
<footer><p>some site information</p>
</footer>
29Friday, July 23, 2010
<nav><nav><ul> <li><a href=”/”>Home</li> <li><a href=”/about”>About</li> <li><a href=”/contact”>Contact</li></ul></nav>
30Friday, July 23, 2010
<aside><aside><p>This is content related to the main content, maybe related links of a pull-quote?</p>
</aside>
31Friday, July 23, 2010
<section> vs. <div><section><p>Contributes to the overall outline of the page & related content</p>
</section>
32Friday, July 23, 2010
<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>
33Friday, July 23, 2010
Text-level semantics<figure<figcaption<mark<time<progress
34Friday, July 23, 2010
<figure> & <figcaption><figure><img src=”fungi.png” alt=”shower mold”><figcaption><p>This is mold in my shower, it’s gross</p>
</figcaption></figure>
35Friday, July 23, 2010
<time> & <mark><time datetime=”13:15”>1:15pm EDT</time>
This is a <mark>search term</mark> highlighter
36Friday, July 23, 2010
<progress>Your file is <progress>50%</progress> uploaded
37Friday, July 23, 2010
Audio & Video APIs...filetype matters, apparently
38Friday, July 23, 2010
Audio<audio src=”hey_jude.ogg”>
39Friday, July 23, 2010
Audio<audio src=”hey_jude.ogg” controls autoplay preload>
40Friday, July 23, 2010
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/
41Friday, July 23, 2010
Video<video controls autoplay poster=”titlescreen.jpg”> <src=”monkey.ogv”> <src=”monkey.mp4”> Your browser still stinks</video>
42Friday, July 23, 2010
Fallbacks<video controls autoplay> <src=”monkey.ogv”> <src=”monkey.mp4”> [ flash fallback ] [ text fallback ]</video>
Mobile solution?
43Friday, July 23, 2010
A/V Controls (play)<p id=”play”>Play</p>
44Friday, July 23, 2010
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’); }});
45Friday, July 23, 2010
A/V ControlsLet’s see one:http://www.broken-links.com/tests/video/
46Friday, July 23, 2010
HTML 5 Forms...inputs & validation
47Friday, July 23, 2010
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”>
48Friday, July 23, 2010
More attr & validation<input type=”search”>
<input type=”text” autofocus required> document.getElementById(“q”).focus();
49Friday, July 23, 2010
Custom inputs<input type=”zip” pattern=”regex pattern”
required name=”zip”>
50Friday, July 23, 2010
Let’s see onehttp://www.csskarma.com/lab/demomachine/
51Friday, July 23, 2010
Degradation & BenefitsDegrades to a text box
Increased usability & conversion rates
Easier styling with attribute selectors
Easy validation & less spam
52Friday, July 23, 2010
AccessibilityBuilt-in vs. Bolt-on
53Friday, July 23, 2010
Built-in accessibility
header, footer, nav, article, aside
54Friday, July 23, 2010
Bolt-on accessibility<header role=”banner”><ul role=”menu”><li role=”menuitem”><article role=”main”><aside role=”complementary”><footer role=”contentinfo”>
55Friday, July 23, 2010
Bolt-on accessibility<section aria-atomic=”true” aria-live=”polite”>
<input aria-required=”true”>
*HTML5 valid*
http://reader.usc.edu/dev/
56Friday, July 23, 2010
I wanna use it now!...me too
57Friday, July 23, 2010
Class names<div class=”header”></div>
<div class=”article”></div>
<div class=”aside”></div>
<div class=”footer”></div>
58Friday, July 23, 2010
Stylesarticle, aside, details, figure, footer, header, hgroup, nav, section { display: block;}
59Friday, July 23, 2010
CreateElement<script> document.createElement(‘header’); document.createElement(‘nav’); document.createElement(‘section’); document.createElement(‘article’); document.createElement(‘footer’);</script>
60Friday, July 23, 2010
HTML Shiv<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
http://html5shiv.googlecode.com/svn/trunk/html5.js
by: Remy Sharp
61Friday, July 23, 2010
Server-side JavaScript• Jaxer
• Creating element in the DOM
62Friday, July 23, 2010
Moving forwardOptions for moving forward
• doctype & aria roles
• doctype -> class names -> aria roles
• doctype -> new elements -> aria roles
• Client-side JS
• Server-side JS
63Friday, July 23, 2010
The New Web...the kids will love it
64Friday, July 23, 2010
<!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>
Old <head>
65Friday, July 23, 2010
<!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>
New <head>
66Friday, July 23, 2010
<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>
Old <body>
67Friday, July 23, 2010
<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>
New <body>
68Friday, July 23, 2010
<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>
Old <form>
69Friday, July 23, 2010
<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>
New <form>
70Friday, July 23, 2010
<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>
Old <video> (?)
71Friday, July 23, 2010
<video src=”video.mp4” controls preload>
New <video>
72Friday, July 23, 2010
What does clean mean?• Reduced page weight
• Speed & Responsiveness
• Higher conversions
• Better usability
• Happy users
• Device development
73Friday, July 23, 2010
New JavaScript...and Ninja-like qualities
74Friday, July 23, 2010
New JavaScriptFinding 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>
75Friday, July 23, 2010
classList APIvar element = $(‘div’);
element.classList.add(‘class-name’);element.classList.remove(‘class-name’);element.classList.toggle(‘class-name’);
via davidwalsh.name
76Friday, July 23, 2010
GeolocationNot actually HTML5, but still way cool
77Friday, July 23, 2010
Data Sources• GPS• Cellular Network• IP
78Friday, July 23, 2010
Information• Latitude• Longitude • Accuracy • Altitude• Altitude Accuracy• Heading• Timestamp• Speed
79Friday, July 23, 2010
Privacy
80Friday, July 23, 2010
Getting the datafunction 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};
}
81Friday, July 23, 2010
Error Handlingfunction 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>'); }}
82Friday, July 23, 2010
Usageif(navigator.geolocation){
navigator.geolocation.getCurrentPosition(youAreHere, geoErrors,
{enableHighAccuracy: true, // increases load timemaximumAge:60000, // 10 minstimeout:0 // check the cache first});
}
83Friday, July 23, 2010
Let’s see onehttp://www.csskarma.com/lab/html5/geo/
84Friday, July 23, 2010
Great examples
85Friday, July 23, 2010
Storage & Sockets..set it and forget it
86Friday, July 23, 2010
Local Storage• Persistent to the browser• Super cookies
87Friday, July 23, 2010
Local Storage (setting)var edit = document.getElementById('edit');!$(edit).blur(function() {! localStorage.setItem('todoData', this.innerHTML);});
88Friday, July 23, 2010
Local Storage (getting)if ( localStorage.getItem('todoData') ) {
edit.innerHTML = localStorage.getItem('todoData');
}
89Friday, July 23, 2010
Local Storage (forgetting)<p><a href=”#clear” id=”clear”>Clear storage</a></p>
$('#clear').click(function(){! ! localStorage.clear();! ! location.reload(true);! ! return false;! });
90Friday, July 23, 2010
Local Storage (demo)http://www.csskarma.com/lab/html5/localstorage/
Using: contentEditable=”true”localStorage.setItem()localStorage.getItem()localStorage.clear()
91Friday, July 23, 2010
Web SocketsBi-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/
92Friday, July 23, 2010
Support
93Friday, July 23, 2010
Active browsers
94Friday, July 23, 2010
Browser supportCanIUse.com
HTML5test.com
95Friday, July 23, 2010
Modern mobile devices
96Friday, July 23, 2010
Effects on mobile
97Friday, July 23, 2010
Current Events
98Friday, July 23, 2010
WebM video formatHigh-quality open video format
YouTube for compression over ogg (.ogv)
IE9, Chrome, Firefox & Opera support
WebM converter -> mirovideoconverter.com
99Friday, July 23, 2010
New <track> Element
100Friday, July 23, 2010
Resources
101Friday, July 23, 2010
Resources• webmproject.org
• HTML5Doctor.com
• HTML5gallery.com
• data-vocabulary.org
• WHATWG.org
• HTML5 for Designers
102Friday, July 23, 2010
What we covered• What is it?
• Living in the past
• Debunking some rumors
• New Attributes & Elements
• Audio & Video APIs
103Friday, July 23, 2010
What we covered (cont.)• Forms
• Accessibility
• Geolocation
• HTML 5 Storage & sockets
• Browser & Device Support
• Current Events
104Friday, July 23, 2010
Steal my work
csskarma.com/presentations/penn/
105Friday, July 23, 2010
“Never memorize something you that can
look up”- Albert Einstein
106Friday, July 23, 2010
Questions?
107Friday, July 23, 2010
Find me onlinee-mail: [email protected]: http://www.csskarma.comtwitter: @csskarma
</presentation>
108Friday, July 23, 2010