HTML5 - What you need to know

52
Matt Fielding | Creative Director | Panoetic Ltd What you need to know HTML5 WEBSITE DESIGN & DEVELOPMENT ® PANOETIC

description

A talk I delivered on 18th Jan 2011

Transcript of HTML5 - What you need to know

Page 1: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

What you need to knowHTML5

WEBSITE DESIGN & DEVELOPMENT

®

PANOETIC

Page 2: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

The design of HTML5

A brief history of Markup

Semantics

Rich media

Using HTML5 today

Overviewu

v

w

x

y

Page 3: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

HTML was the brainchild of Sir Tim Berners-Lee

Tags already existed in the form of SGML

Never was such a thing as HTML 1

HTML 2 published by the Internet Engineering task Force (IETF)

A brief history of Markupgg

g

g

Page 4: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

HTML 2.0HTML 3.2HTML 4.0HTML 4.01

1995199719971999

HTML

Page 5: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

XHTML 1.0XHTML 1.1XHTML 2

20002001

XHTML

Page 6: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

Web Hypertext Applications Technology Working Group

Editor of the HTML5 Specification

WHATWG

Ian Hickson

Page 7: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

WHATWGW3C

20042007

HTML5

Page 8: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

HTML Design Principleshttp://w3.org/html-design-principles

The design of HTML5g

Page 9: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

Avoid needless complexity

Design Principles

Support existing content

Pave the cowpaths

Degrade gracefully

Priority of constituencies

Solve Real problems

u

v

x

y

zw

Page 10: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

Avoid needless complexity

Simple solutions are preferred to complex ones,when possible.

u

Page 11: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<!DOCTYPE html>

(X)HTML 1.0

HTML5

Page 12: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

<?xml version=”1.0” encoding=”UTF-8”?>

<meta http-equiv=”Content-Type”

content=”text/html; charset=utf-8” />

<meta charset=”utf-8”>

(X)HTML

HTML5

Page 13: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

<link rel=”stylesheet” type=”text/css” href=”file.css” />

<script src=”modernizr-1.5.js” type=”text/javascript” ></script>

<link rel=”stylesheet” href=”file.css”>

<script type=”text/javascript”></script>

(X)HTML

HTML5

Page 14: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

Support existing content

Existing content often relies upon expected user agent processing and behaviour to function as intended.

v

Page 15: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

<img src=”foo” alt=”bar” /><p class=”foo”>Hello world</p>

<img src=”foo” alt=”bar”><p class=”foo”>Hello world

<IMG SRC=”foo” ALT=”bar”><P CLASS=”foo”>Hello world</P>

<img src=foo alt=bar><p class=foo>Hello world</p>

Accepted coding styles

Page 16: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

Solve Real problems

Abstract architectures that don’t address an existing need are less favoured than pragmatic solutions to problems that web content faces today.

w

Page 17: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

<h2><a href=”/path/to/resource”>Headline text</a></h2>

<p><a href=”/path/to/resource”>Paragraph text.</a></p>

<a href=”/path/to/resource”>

<h2>Headline text</h2>

<p>Paragraph text.</p>

</a>

(X)HTML

HTML5

Page 18: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

Pave the cowpaths

Look where people are already coming up with solutions. Don’t re-invent the wheel.

x

Page 19: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

New elements

sectionarticleasidenav

headerfooterdetailsfigure

In 2005, Google surveyed over three billion web pages to find out what id and class attributes web designers most commonly use to name HTML elements.

g

Page 20: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

<body>

<header>...</header>

<nav>...</nav>

<div id=”main”>...</div>

<aside>...</aside>

<footer>...</footer>

</body>

HTML5

<body>

<div id=”header”>...</div>

<div id=”navigation”>...</div>

<div id=”main”>...</div>

<div id=”sidebar”>...</div>

<div id=”footer”>...</div>

</body>

(X)HTML

Swap out those divs with the new HTML5 elements

Page 21: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

<section class=”item”>

<header><h1>...</h1></header>

<footer class=”meta”>...</footer>

<div class=”content”>

...

</div>

<nav class=”links”>...</nav>

</section>

HTML5

<div class=”item”>

<h2>...</h2>

<div class=”meta”>...</div>

<div class=”content”>

...

</div>

<div class=”links”>...</div>

</div>

(X)HTML

Page 22: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

Degrade gracefully

HTML 5 document conformance requirements should be designed so that Web content can degrade gracefully in older or less capable user agents, even when making use of new elements, attributes, APIs and content models.

y

Page 23: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

input type=”number”

input type=”search”

input type=”range”

input type=”email”

input type=”date”

input type=”url”

Forms have been enhanced in HTML5 using the type attributes

Existing browsers that don’t understand this stuff, degrade gracefully

New form attributes including ‘placeholder’

g

g

g

Page 24: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

Priority of constituencies

In case of conflict, consider users over authors overimplementors over specifiers over theoretical purity.

z

Page 25: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

SemanticsElements used for presentation removed

New elements introduced

g

g

Page 26: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

RemovedPresentational (moved to CSS)

others

<font> <big> <center> & attributes - border, bgcolor etc

<frame> <frameset> <noframes> <acronym> <axis> <summary>

Page 27: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

Changed<a>

<b>

<i>

“…may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within.”

“…a span of text to be stylistically offset from the normal prose without conveying any extra importance.”

“…a span of text in an alternate voice or mood, or otherwise offset from the normal prose..”

Page 28: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

Changed<hr>

<small>

“…a paragraph-level thematic break.”

“…small print (for side comments and legal print).”

Page 29: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

New elements<mark>

<time>

<time datetime=”2009-09-02T09:30:00” pubdate> September 2nd, 9:30am</time>

“…a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.”

“This element is intended as a way to encode modern dates and times in a machine-readable way so that user agents can offer to add them to the user’s calendar”

Page 30: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

New elements<section>

<article>

<nav>

<aside>

<header>

<footer>

<hgroup>

<details>

<figure>

Page 31: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

<section id=”content-uk”> <h1>Stories from the UK</h1></section><section id=”content-usa”> <h1>Stories from the USA</h1></section><section id=”content-world”> <h1>Stories from around the world</h1></section>

<section>

<div class=”content”> <div class=”content-uk”>[…]</div> <div class=”content-usa”>[…]</div> <div class=”content-world”>[…]</div></div>

(X)HTML

Page 32: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

<section id=”content-uk”> <h1>Stories from the UK</h1> <article>[…]</article> <article>[…]</article></section>

<section id=”content-usa”> <h1>Stories from the USA</h1> <article>[…]</article> <article>[…]</article></section>

<section id=”content-world”> <h1>Stories from around the world</h1> <article>[…]</article> <article>[…]</article></section>

<article>

Page 33: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

<header> <h1>Punchy title</h1></header>

<header> <hgroup> <h1>Punchy title</h1> <h2>Very catchy strapline</h2> </hgroup></header>

<header>

<hgroup>

<article> <section id=”raymond-chandler”>[…]</section> <section id=”dashiell-hammett”>[…]</section> <section id=”mickey-spillane”>[…]</section></article>

Articles can have sections too!

Page 34: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

<article> <header> <h1>Punchy title</h1> </header> <section id=”raymond-chandler”> <header> <h1>Raymond Chandler</h1> </header> </section> <section id=”dashiell-hammett”> <header> <h1>Dashiell Hammett</h1> </header> </section> <section id=”mickey-spillane”> <header> <h1>Mickey Spillane</h1> </header> </section></article>

combining <section> <article> and <header>

Page 35: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

<footer> <h3>...</h3> <p>...</p></footer>

<section class=”item”> <header> <h1>...</h1> </header> <footer class=”meta”>...</footer> <div class=”content”> ... </div> <nav class=”links”>...</nav></section>

<footer>

“…typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.”

Page 36: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

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

<nav>

“...a section of a page that links to other pages or to parts within the page: a section with navigation links.”

Page 37: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

<article> <header> <h1>Mickey Spillane</h1> </header> <footer> <p>Published by Andy Clarke on November 20th, 2010</p> </footer> <p>Frank Morrison Spillane, better known as Mickey Spillane… </p> <aside> <h2>My Gun Is Quick</h2> <p>Mickey Spillane’s second novel featuring private investigator Mike Hammer.</p> </aside></article>

<aside>

“...represents a section of a page that consists of content that is tangentially related to the content around it, and which could be considered separate from that content.”

Page 38: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

<dl class=”figure”> <dt><img src=”jury.jpg” alt=”The Jury”></dt> <dd>The Jury by Mickey Spillane</dd></dl>

<figure> <img src=”jury.jpg” alt=”I, The Jury”> <img src=”gun.jpg” alt=”My Gun is Quick”> <img src=”vengeance.jpg” alt=”Vengeance”> <figcaption>Books by Mickey Spillane</figcaption></figure>

<figure> &<figcaption>

“...some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.”

Page 39: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

<details> <summary>Log in</summary> <form method=”post” action=”login”> <label for=”username”>Username</label> <input type=”text” name=”username” id=”username”> <label for=”password”>Password</label> <input type=”password” name=”password” id=”password”> </form></details>

<details>

“…a disclosure widget from which the user can obtain additional information or controls.”

Page 40: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

The <canvas> element

The <audio> element

The <video> element

Rich media

g

g

g

HTML is filling holes and doing away with the need to use proprietary technologies and plug-ins

Page 41: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

<canvas>

<canvas id=”my-first-canvas” width=”360” height=”240”>

<p>No canvas support? Have an old fashioned image

instead:</p>

<img src=”puppy.jpg” alt=”a cute puppy”>

</canvas>

Created by Apple

The element itself is very simple

g

g

Page 42: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

<canvas>

Should be used as an enhancement for existing content

The real power of canvas is that it’s content can be updated at any moment based on the actions of the user

Cont...

All the hard work is done in JavaScript

Current accessibility issues. No DOM = no access to screen readers. But being addressed.

g

g

g

g

Page 43: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

<audio>HTML5 is taking on the Flash plug-in

You can use JavaScript to interact with the audio API

Big problem with MP3 not being an open technology

g

g

g

<audio src=”audiotrack.mp3” autoplay loop controls>

</audio>

Page 44: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

<audio>Fall backs

Cont...

g

<audio controls>

<source src=”soundfile.ogg” type=”audio/ogg”>

<source src=”soundfile.mp3” type=”audio/mp3”>

<object type=”application/x-shockwave-flash”

data=”player.swf?soundFile=soundfile.mp3”>

<param name=”movie”

value=”player.swf?soundFile=soundfile.mp3”>

<a href=”soundfile.mp3”>Download the song</a>

</object>

</audio>

Page 45: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

<video>Works just like the audio element

Even bloodier battleground for competing video formats

MP4 is patent-encumbered also

g

g

g

<video src=”movie.mp4” controls width=”360” height=”240”

poster=”placeholder.jpg”>

</video>

Page 46: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

<video> Cont...

<video controls width=”360” height=”240”

poster=”placeholder.jpg”>

<source src=”movie.ogv” type=”video/ogg”>

<source src=”movie.mp4” type=”video/mp4”>

<object type=”application/x-shockwave-flash”

width=”360” height=”240” data=”player.swf?file=movie.

mp4”>

<param name=”movie”

value=”player.swf?file=movie.mp4”>

<a href=”movie.mp4”>Download this movie</a>

</object>

</video>

Page 47: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

<video>Pretty exciting to add video natively to web pages

No sandbox issues, so plays nice with CSS and JavaScript

Actually styleable as well as scriptable

g

g

g

Cont...

Page 48: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

Using HTML5 today

Using the new doctype, charset, input types and attributes should not cause any issues at all.

All the rich media elements have fallbacks so are safe to use also.

The new structural elements will need extra effort to work cross-browser

g

g

g

Page 49: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

Internet ExploerTo style the new elements with CSS

This tiny script creates elements in Internet Explorer’s DOM so we can style them using CSS.

<!--[if lt IE 9]>

<script src=”http://html5shiv.googlecode.com/svn/trunk/

html5.js”>

</script>

<![endif]-->

Page 50: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

Further Reading

Hard Boiled Web Designby Andy Clarkehttp://hardboiledwebdesign.com/

HTML5 for web designers by Jeremy Keithhttp://books.alistapart.com/

Page 51: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

Questions?

Page 52: HTML5 - What you need to know

Matt Fielding | Creative Director | Panoetic Ltd

WEBSITE DESIGN & DEVELOPMENT

®

PANOETIC

panoetic.com

mattfielding.net

twitter.com/panoetic

twitter.com/mattfielding

Matt Fielding