HTML 5: The Future of the Web

HTML 5: The Future of the Web

Tim Wright | csskarma.com | @csskarma

1Friday, July 23, 2010

http://www.csskarma.com


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


Is HTML 5 Ready?

via ishtml5readyyet.com


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


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


<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


Script & StyleBefore:<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 changesBlock-level anchors

Presentational elements like <i>, <b>, <cite> & <small> redefined


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


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 Attributes...building robust applications


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>


http://www.data-vocabulary.org/Person/




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


<figure> & <figcaption><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/


http://media.io

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 ControlsLet’s see one:http://www.broken-links.com/tests/video/


http://www.broken-links.com/tests/video/

http://www.broken-links.com/tests/video/

HTML 5 Forms...inputs & validation


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 onehttp://www.csskarma.com/lab/demomachine/


http://www.csskarma.com/lab/demomachine/

http://www.csskarma.com/lab/demomachine/

Degradation & BenefitsDegrades to a text box

Increased usability & conversion rates

Easier styling with attribute selectors

Easy validation & less spam


AccessibilityBuilt-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 it now!...me too


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

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

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

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


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

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

by: Remy Sharp










Server-side JavaScript• Jaxer

• Creating element in the DOM


Moving forwardOptions for moving forward

• doctype & aria roles

• doctype -> class names -> aria roles

• doctype -> new elements -> aria roles

• Client-side JS

• Server-side JS


The New Web...the kids will love it


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


http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd




http://www.w3.org/1999/xhtml

http://www.w3.org/1999/xhtml

http://www.ncsu.edu/favicon.ico


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




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


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


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


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


<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> (?)


http://www.youtube.com/v/LsuH2Va_GjY&hl=en_US&fs=1




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

New <video>


What does clean mean?• Reduced page weight

• Speed & Responsiveness

• Higher conversions

• Better usability

• Happy users

• Device development


New JavaScript...and Ninja-like qualities


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>


classList APIvar element = $(‘div’);

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

via davidwalsh.name


GeolocationNot actually HTML5, but still way cool


Data Sources• GPS• Cellular Network• IP


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


Privacy


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

}


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


Usageif(navigator.geolocation){

navigator.geolocation.getCurrentPosition(youAreHere, geoErrors,

{enableHighAccuracy: true, // increases load timemaximumAge:60000, // 10 minstimeout:0 // check the cache first});

}


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


http://www.csskarma.com/lab/html5/geo/

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


http://www.csskarma.com/lab/html5/localstorage/

http://www.csskarma.com/lab/html5/localstorage/

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/




Support


Active browsers


Browser supportCanIUse.com

HTML5test.com


http://www.CanIUse.com

http://www.CanIUse.com

Modern mobile devices


Effects on mobile


Current Events


WebM video formatHigh-quality open video format

YouTube for compression over ogg (.ogv)

IE9, Chrome, Firefox & Opera support

WebM converter -> mirovideoconverter.com


http://www.mirovideoconverter.com

http://www.mirovideoconverter.com

New <track> Element


Resources


Resources• webmproject.org

• HTML5Doctor.com

• HTML5gallery.com

• data-vocabulary.org

• WHATWG.org

• HTML5 for Designers


http://www.data-vocabulary.org

http://www.data-vocabulary.org

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 onlinee-mail: [email protected]: http://www.csskarma.comtwitter: @csskarma

</presentation>


mailto:[email protected]

mailto:[email protected]

Date post:	18-Oct-2014
Category:	Technology
View:	5,604 times
Download:	2 times

HTML 5: The Future of the Web

Technology