HTML5 - What you need to know
-
Upload
matt-fielding -
Category
Technology
-
view
515 -
download
0
description
Transcript of HTML5 - What you need to know
Matt Fielding | Creative Director | Panoetic Ltd
What you need to knowHTML5
WEBSITE DESIGN & DEVELOPMENT
®
PANOETIC
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
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
Matt Fielding | Creative Director | Panoetic Ltd
HTML 2.0HTML 3.2HTML 4.0HTML 4.01
1995199719971999
HTML
Matt Fielding | Creative Director | Panoetic Ltd
XHTML 1.0XHTML 1.1XHTML 2
20002001
XHTML
Matt Fielding | Creative Director | Panoetic Ltd
Web Hypertext Applications Technology Working Group
Editor of the HTML5 Specification
WHATWG
Ian Hickson
Matt Fielding | Creative Director | Panoetic Ltd
WHATWGW3C
20042007
HTML5
Matt Fielding | Creative Director | Panoetic Ltd
HTML Design Principleshttp://w3.org/html-design-principles
The design of HTML5g
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
Matt Fielding | Creative Director | Panoetic Ltd
Avoid needless complexity
Simple solutions are preferred to complex ones,when possible.
u
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
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
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
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
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
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
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
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
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
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
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
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
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
Matt Fielding | Creative Director | Panoetic Ltd
Priority of constituencies
In case of conflict, consider users over authors overimplementors over specifiers over theoretical purity.
z
Matt Fielding | Creative Director | Panoetic Ltd
SemanticsElements used for presentation removed
New elements introduced
g
g
Matt Fielding | Creative Director | Panoetic Ltd
RemovedPresentational (moved to CSS)
others
<font> <big> <center> & attributes - border, bgcolor etc
<frame> <frameset> <noframes> <acronym> <axis> <summary>
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..”
Matt Fielding | Creative Director | Panoetic Ltd
Changed<hr>
<small>
“…a paragraph-level thematic break.”
“…small print (for side comments and legal print).”
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”
Matt Fielding | Creative Director | Panoetic Ltd
New elements<section>
<article>
<nav>
<aside>
<header>
<footer>
<hgroup>
<details>
<figure>
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
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>
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!
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>
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.”
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.”
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.”
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.”
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.”
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
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
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
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>
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>
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>
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>
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...
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
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]-->
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/
Matt Fielding | Creative Director | Panoetic Ltd
Questions?
Matt Fielding | Creative Director | Panoetic Ltd
WEBSITE DESIGN & DEVELOPMENT
®
PANOETIC
panoetic.com
mattfielding.net
twitter.com/panoetic
twitter.com/mattfielding
Matt Fielding