Quality Development with HTML5

QUALITY DEVELOPMENT
WITH HTML5

Shay Howe
September 2011
www.shayhowe.com – @letscounthedays

SHAY HOWE
www.shayhowe.com – @letscounthedays

Quality Development with HTML5 & CSS3 @letscounthedays

HTML5 CSS3
Markup language to give Presentation language to
content structure and give content style and
meaning. appearance.


HTML5

HTML5 IS SIMPLE


DOCTYPE
HTML
<!DOCTYPE
html
PUBLIC
"-‐//W3C//DTD
HTML
4.01

Transitional//EN"
"http://www.w3.org/TR/
html4/loose.dtd">

HTML5
<!DOCTYPE
html>


LANGUAGE
HTML
<html
xmlns="http://www.w3.org/1999/xhtml"

lang="en"
xml:lang="en">

HTML5
<html
lang="en">


CHARACTER ENCODING
HTML
<meta
http-‐equiv="Content-‐Type"
content="text/
html;
charset=UTF-‐8">

HTML5
<meta
charset="UTF-‐8">


CSS
HTML
<link
rel="stylesheet"
type="text/css"

href="file.css">

HTML5
<link
rel="stylesheet"
href="file.css">


JAVASCRIPT
HTML
<script
type="text/javascript"
src="file.js"></
script>

HTML5
<script
src="file.js"></script>


GETTING STARTED


GETTING STARTED
HTML5 Shiv
<!-‐-‐[if
IE]>
<script
src="http://html5shiv.googlecode.com/
svn/trunk/html5.js"></script>
<![endif]-‐-‐>

CSS
article,
aside,
footer,
header,
hgroup,
nav,

section
{
display:
block;
}


HTML5 IS SEMANTIC


NEW ELEMENTS
• article • footer • rt
• aside • header • ruby
• audio • hgroup • section
• canvas • keygen • source
• command • mark • summary
• datalist • meter • time
• details • nav • video
• embed • output • wbr
• figcaption • progress
• figure • rp


STRUCTURAL ELEMENTS
• header
• nav
• article
• section
• aside
• footer


STRUCTURAL ELEMENTS
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>...</section>
</article>
<aside...</aside>
<footer>...</footer>
</body>


STRUCTURAL ELEMENTS


HGROUP
<header>
<hgroup>
<h1>Shay
Howe</h1>
<h2>Man,
Myth
or
Legend</h2>
</hgroup>
</header>


HGROUP


TIME
<time
datetime="15:00">3pm</time>

<time
datetime="2011-‐08-‐24">August
24th,
2011</
time>

<time
datetime="2011-‐08-‐24T15:00">August
24th,

2011
at
3pm</time>

<time
datetime="2011-‐08-‐24"
pubdate>August

24th,
2011</time>

<time>2011-‐08-‐24</time>


TIME


FIGURE & FIGCAPTION
<figure>
<img
src="shay.jpg"
alt="Shay
Howe">
<figcaption>Shay
Howe
the
Man</figcaption>
</figure>

<figure>
<img
src="june.jpg"
alt="June">
<img
src="july.jpg"
alt="July">
<img
src="august.jpg"
alt="August">
<figcaption>Summer
Months</figcaption>
</figure>


FIGURE & FIGCAPTION


MARK
<h1>Search
results
for
'chicago'</h1>
<ol>
<li><a
href="http://www.shayhowe.com/">
Shay
is
from
<mark>Chicago</mark>.
</a></li>
</ol>


METER
<meter>7
out
of
10
stars</meter>

<meter
max="10">7
stars</meter>

<meter
min="0"
max="105"
low="5"
high="65"

optimum="45"
value="47">The
car
is
moving
at

a
decent
average
mile
per
hour.</meter>


PROGRESS
You
are
<progress>50%</progress>
complete.

<progress
min="0"
max="100"
value="50">Hold

tight,
your
getting
there.</progress>


AUDIO


AUDIO
<audio
src="song.mp3"></audio>

<audio
src="song.mp3"
autoplay
controls
loop

preload="auto"></audio>


AUDIO CONTROLS
<audio
id="player"
src="song.mp3"></audio>
<div>
<button
onclick="document.getElementById('player').play()">
Play
</button>
<button
onclick="document.getElementById('player').pause()">
Pause
</button>
<button
onclick="document.getElementById('player').volume
+=
0.1">
Volume
Up
</button>
<button
onclick="document.getElementById('player').volume
-‐=
0.1">
Volume
Down
</button>
</div>


AUDIO FALLBACKS
<audio
controls>
<source
src="song.ogg"
type="audio/ogg">
<source
src="song.mp3"
type="audio/mpeg">
<object
type="application/x-‐shockwave-‐flash"

data="player.swf?soundFile=song.mp3">
<param
name="movie"
value="player.swf?soundFile=wild-‐
thing.mp3">
<a
href="song.mp3">Download
song</a>
</object>
</audio>


VIDEO


VIDEO
<video
src="movie.mp4"
controls
height="390"

width="640"></video>

<video
src="movie.mp4"
controls
height="390"

width="640"
poster="image.jpg"></video>


FORMS


NEW INPUTS
• color • range
• date • search
• datetime • tel
• datetime-‐local • time
• email • url
• month • week
• number


COLOR
<input
id="color"
name="color"
type="color">


DATE & TIME
• date:
2011-‐08-‐24
• datetime:
2011-‐08-‐24T12:00:00+01

• datetime-‐local:
2011-‐08-‐24T12:00:00
• month:
2011-‐08
• time:
12:00:00
• week:
2011-‐W34

<input
id="birthday"

name="birthday"

type="datetime-‐local">


DATE & TIME


EMAIL
<input
id="email"
name="email"
type="email">


EMAIL


NUMBER
<input
id="cost"
name="cost"
type="number"

min="10"
max="100">


RANGE
<input
id="rating"
name="rating"
type="range"

min="1"
max="10">


SEARCH
<input
id="query"
name="query"
type="search">


TEL
<input
id="phone"
name="phone"
type="tel">


TEL


URL
<input
id="website"
name="website"
type="url">


URL


NEW ATTRIBUTES
• autocomplete • min
• autofocus • multiple
• formaction • novalidate
• formenctype • pattern
• formmethod • placeholder
• formnovalidate • readonly
• formtarget • required
• list • spellcheck
• max • step


AUTOCOMPLETE
<form
action="#"
autocomplete="off">

<input
id="destination"
name="destination"

type="text"
autocomplete="off">


AUTOFOCUS
<input
id="name"
name="name"
type="text"

autofocus>


DATALIST
<input
id="city"
name="city"
type="city"

list="cities">
<datalist
id="cities">
<option
value="Chicago">
<option
value="Los
Angeles">
<option
value="New
York">
</datalist>


MIN, MAX & STEP
<input
id="score"
name="score"
type="number"

min="0"
max="10"
step="2">


PLACEHOLDER
<input
id="destination"
name="destination"

type="text"
placeholder="Your
destination">


PLACEHOLDER


REQUIRED
<input
id="name"
name="name"
type="text"

required>


REQUIRED


PATTERN
<input
id="phone"
name="phone"
type="tel"

pattern="^[0-‐9]+[-‐
]*[0-‐9]+$">


PATTERN


CHANGED ELEMENTS


A
OLD
<p><a
href="http://www.shayhowe.com/">Shay

Howe</a>
is
a
front-‐end
web
designer
and

developer.</p>

NEW
<a
href="http://www.shayhowe.com/">
<h1>Shay
Howe</h1>
<p>Front-‐end
web
designer
and
developer.</p>
</a>


B
OLD
Text rendered as bold.

NEW
Text stylistically offset without importance.


CITE
OLD
Reference to another source.

NEW
Specifically a reference to a title of work.


HR
OLD
Render a horizontal rule.

NEW
A paragraph-level thematic break.


I
OLD
Text rendered as italic.

NEW
Text in an alternative voice or tone.


MENU
OLD
A single column menu list.

NEW
A group of controls, most commonly used within web
applications.


S
OLD
Text rendered with a line through it.

NEW
Text struck from the content that is no longer accurate or
relevant.


SMALL
OLD
Text rendered as small.

NEW
Text within side comments or small print.


OBSOLETE ELEMENTS
& ATTRIBUTES


OBSOLETE ELEMENTS
• acronym • frame
• applet • frameset
• basefont • isindex
• big • noframes
• center • strike
• dir • tt
• font •u

Deprecated from HTML 4.0


OBSOLETE ATTRIBUTES
• align • frame • profile
• alink • frameborder • scrolling
• background • hspace • shape
• bgcolor • link • size
• border • name • target
• cellpadding • nohref • text
• cellspacing • noshade • type
• coords • nowrap • valign


HOMEWORK
Microformats
hAtom, hCalendar, hCard, hReview

WAI-ARIA Roles
banner, complementary, contentinfo, main, navigation,
search


QUESTIONS?
Thank you!


Quality Development with HTML5

More Related Content

Viewers also liked (20)

Similar to Quality Development with HTML5 (20)

More from Shay Howe (7)

Recently uploaded (20)

Quality Development with HTML5