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


The Goal.


What we’ll cover
• What is it?

• Living in the past

• Debunking some rumors

• New Attributes & Elements

• Audio & Video APIs


What else we’ll cover
• Forms

• Accessibility

• Geolocation

• HTML 5 Storage & sockets

• Browser & Device Support

• Current Events


HTML 5 = Markup + JS APIs


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


Is HTML 5 Ready?

via ishtml5readyyet.com


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

Browser-based usage


Let’s dig around...


What has changed
...everything is lighter


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


Script & Style
Before:
<script type=”text/javascript”></script>
<style type=”text/css”></style>

After:
<script></script>
<style></style>


Link relations
• <link rel=”icon”
• <link rel=”prefetch”
• <link rel=”pingback”
• <a rel=”external”
• <a rel=”tag”


Notable changes
Block-level anchors

Presentational elements like <i>, <b>,
<cite> & <small> redeﬁned


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

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

New...building robust applications
Attributes


Editing content

<div contentEditable=”true”></div>


Spellcheck

<div spellcheck=”true”></div>


Hiding elements
<div hidden></div>


Easy drag and drop
<div draggable=”true”></div>

document.addEventListener('dragstart',
function(event) {
alert(‘drag started’);
}, false);


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>


Embedding data-*
<section data-latitude=”38.254” data-
longitude=”85.72”>
[ content ]
</section>

Data for the application to consume


Structural Elements
...some new semantics


Sectioning content
<header
<footer
<nav
<aside
<section
<article
<hgroup


<header> & <footer>
<header>
<h1>Awesome web site</h1>
</header>

<footer>
<p>some site information</p>
</footer>


<nav>
<nav>
<ul>
<li><a href=”/”>Home</li>
<li><a href=”/about”>About</li>
<li><a href=”/contact”>Contact</li>
</ul>
</nav>


<aside>
<aside>
<p>This is content related to the
main content, maybe related links of
a pull-quote?</p>
</aside>


<section> vs. <div>
<section>
<p>Contributes to the overall outline
of the page & related content</p>
</section>


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


Text-level semantics
<figure
<figcaption
<mark
<time
<progress


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


<time> & <mark>
<time datetime=”13:15”>1:15pm EDT</time>

This is a <mark>search term</mark>
highlighter


<progress>
Your file is <progress>50%</progress>
uploaded


Audio & Video APIs
...filetype matters, apparently


Audio
<audio src=”hey_jude.ogg”>


Audio
<audio src=”hey_jude.ogg” controls autoplay
preload>


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/


Video
<video controls autoplay poster=”titlescreen.jpg”>
<src=”monkey.ogv”>
<src=”monkey.mp4”>
Your browser still stinks
</video>


Fallbacks
<video controls autoplay>
<src=”monkey.ogv”>
<src=”monkey.mp4”>
[ flash fallback ]
[ text fallback ]
</video>

Mobile solution?


A/V Controls (play)
<p id=”play”>Play</p>


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’);
}
});


A/V Controls
Let’s see one:
http://www.broken-links.com/tests/video/


HTML...inputs & validation
5 Forms


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


More attr & validation
<input type=”search”>

<input type=”text” autofocus required>
document.getElementById(“q”).focus();


Custom inputs
<input type=”zip” pattern=”regex pattern”
required name=”zip”>


Let’s see one
http://www.csskarma.com/lab/demomachine/


Degradation & Beneﬁts
Degrades to a text box

Increased usability & conversion rates

Easier styling with attribute selectors

Easy validation & less spam


Accessibility
Built-in vs. Bolt-on


Built-in accessibility
header, footer, nav, article, aside


Bolt-on accessibility
<header role=”banner”>
<ul role=”menu”>
<li role=”menuitem”>
<article role=”main”>
<aside role=”complementary”>
<footer role=”contentinfo”>


Bolt-on accessibility
<section aria-atomic=”true” aria-live=”polite”>

<input aria-required=”true”>

*HTML5 valid*

http://reader.usc.edu/dev/


I wanna use...menow!
it too


Class names
<div class=”header”></div>

<div class=”article”></div>

<div class=”aside”></div>

<div class=”footer”></div>


Styles
article, aside, details, figure,
footer, header, hgroup, nav, section {
display: block;
}


CreateElement
<script>
document.createElement(‘header’);
document.createElement(‘nav’);
document.createElement(‘section’);
document.createElement(‘article’);
document.createElement(‘footer’);
</script>


HTML Shiv by: Remy Sharp


http://html5shiv.googlecode.com/svn/trunk/html5.js

Server-side JavaScript
• Jaxer

• Creating element in the DOM


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


The New kids will love it
...the
Web


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>


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>


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>


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>


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>


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>


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>


New <video>
<video src=”video.mp4” controls preload>


What does clean mean?
• Reduced page weight

• Speed & Responsiveness

• Higher conversions

• Better usability

• Happy users

• Device development


New JavaScript
...and Ninja-like qualities


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>


classList API
var element = $(‘div’);

element.classList.add(‘class-name’);
element.classList.remove(‘class-name’);
element.classList.toggle(‘class-name’);

via davidwalsh.name

Geolocationbut still way cool
Not actually HTML5,


Data Sources
• GPS
• Cellular Network
• IP


Information
• Latitude
• Longitude
• Accuracy
• Altitude
• Altitude Accuracy
• Heading
• Timestamp
• Speed


Privacy


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
};
}


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>');
$('ul').html('<li>Connection timed out</li>');
$('ul').html('<li>Something else happened</li>');
}
}


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


Let’s see one
http://www.csskarma.com/lab/html5/geo/


Great examples


Storage & Sockets
..set it and forget it


Local Storage
• Persistent to the browser
• Super cookies


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


Local Storage (getting)
if ( localStorage.getItem('todoData') ) {
edit.innerHTML = localStorage.getItem
('todoData');
}


Local Storage (forgetting)
<p><a href=”#clear” id=”clear”>Clear storage</a></p>

$('#clear').click(function(){
! ! localStorage.clear();
! ! location.reload(true);
! ! return false;
! });


Local Storage (demo)
http://www.csskarma.com/lab/html5/localstorage/

Using:
contentEditable=”true”
localStorage.setItem()
localStorage.getItem()
localStorage.clear()


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/


Support


Active browsers


Browser support
CanIUse.com

HTML5test.com


Modern mobile devices


Effects on mobile


Current Events


WebM video format
High-quality open video format

YouTube for compression over ogg (.ogv)

IE9, Chrome, Firefox & Opera support

WebM converter -> mirovideoconverter.com


New <track> Element


Resources


Resources
• webmproject.org

• HTML5Doctor.com

• HTML5gallery.com

• data-vocabulary.org

• WHATWG.org

• HTML5 for Designers


What we covered
• What is it?

• Living in the past

• Debunking some rumors

• New Attributes & Elements

• Audio & Video APIs


What we covered (cont.)
• Forms

• Accessibility

• Geolocation

• HTML 5 Storage & sockets

• Browser & Device Support

• Current Events


Steal my work

csskarma.com/presentations/penn/


“Never memorize
something you that can
look up”
- Albert Einstein


Questions?


Find me online
e-mail: timwright@csskarma.com
web: http://www.csskarma.com
twitter: @csskarma

</presentation>


HTML 5: The Future of the Web

More Related Content

What's hot (12)

Viewers also liked (20)

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

More from Tim Wright (18)

Recently uploaded (20)

HTML 5: The Future of the Web