Download pdf - Quality Development with HTML5

QUALITY DEVELOPMENT

WITH HTML5

Shay HoweSeptember 2011www.shayhowe.com – @letscounthedays

http://www.shayhowe.com


Quality Development with HTML5 & CSS3

SHAY HOWEwww.shayhowe.com – @letscounthedays

@letscounthedays




HTML5Markup language to give

content structure and meaning.

@letscounthedays

CSS3Presentation language to

give content style and appearance.

Quality Development with HTML5 & CSS3 @letscounthedays


HTML5

@letscounthedays


HTML5 IS SIMPLE

@letscounthedays


DOCTYPEHTML<!DOCTYPE html PUBLIC "-‐//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML5<!DOCTYPE html>

@letscounthedays

http://www.w3.org/TR/html4/loose.dtd





LANGUAGEHTML<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

HTML5<html lang="en">

@letscounthedays

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

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


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

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

@letscounthedays


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

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

@letscounthedays


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

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

@letscounthedays


GETTING STARTED

@letscounthedays


GETTING STARTEDHTML5 Shiv<!-‐-‐[if IE]><script src="http://html5shiv.googlecode.com/

svn/trunk/html5.js"></script><![endif]-‐-‐>

CSSarticle, aside, footer, header, hgroup, nav, section {display: block;

}

@letscounthedays

http://html5shiv.googlecode.com

http://html5shiv.googlecode.com


HTML5 IS SEMANTIC

@letscounthedays


NEW ELEMENTS• article• aside• audio• canvas• command• datalist• details• embed• figcaption• figure

@letscounthedays

• footer• header• hgroup• keygen• mark• meter• nav• output• progress• rp

• rt• ruby• section• source• summary• time• video• wbr


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

@letscounthedays


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

</article><aside...</aside><footer>...</footer>

</body>

@letscounthedays


STRUCTURAL ELEMENTS

@letscounthedays


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

</hgroup></header>

@letscounthedays


HGROUP

@letscounthedays


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>

@letscounthedays


TIME

@letscounthedays


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>

@letscounthedays


FIGURE & FIGCAPTION

@letscounthedays


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

</a></li></ol>

@letscounthedays




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>

@letscounthedays


PROGRESSYou are <progress>50%</progress> complete.

<progress min="0" max="100" value="50">Hold tight, your getting there.</progress>

@letscounthedays


AUDIO

@letscounthedays


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

<audio src="song.mp3" autoplay controls loop preload="auto"></audio>

@letscounthedays


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>

@letscounthedays


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>

@letscounthedays


VIDEO

@letscounthedays


VIDEO<video src="movie.mp4" controls height="390" width="640"></video>

<video src="movie.mp4" controls height="390" width="640" poster="image.jpg"></video>

@letscounthedays


FORMS

@letscounthedays


NEW INPUTS• color• date• datetime• datetime-‐local• email• month• number

@letscounthedays

• range• search• tel• time• url• week


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

@letscounthedays


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

@letscounthedays


DATE & TIME

@letscounthedays


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

@letscounthedays


EMAIL

@letscounthedays


NUMBER<input id="cost" name="cost" type="number" min="10" max="100">

@letscounthedays


RANGE<input id="rating" name="rating" type="range" min="1" max="10">

@letscounthedays


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

@letscounthedays


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

@letscounthedays


TEL

@letscounthedays


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

@letscounthedays


URL

@letscounthedays


NEW ATTRIBUTES• autocomplete• autofocus• formaction• formenctype• formmethod• formnovalidate• formtarget• list• max

@letscounthedays

• min• multiple• novalidate• pattern• placeholder• readonly• required• spellcheck• step


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

<input id="destination" name="destination" type="text" autocomplete="off">

@letscounthedays


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

@letscounthedays


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>

@letscounthedays


MIN, MAX & STEP<input id="score" name="score" type="number" min="0" max="10" step="2">

@letscounthedays


PLACEHOLDER<input id="destination" name="destination" type="text" placeholder="Your destination">

@letscounthedays


PLACEHOLDER

@letscounthedays


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

@letscounthedays


REQUIRED

@letscounthedays


PATTERN<input id="phone" name="phone" type="tel" pattern="^[0-‐9]+[\-‐ ]*[0-‐9]+$">

@letscounthedays


PATTERN

@letscounthedays


CHANGED ELEMENTS

@letscounthedays


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

@letscounthedays






BOLDText rendered as bold.

NEWText stylistically offset without importance.

@letscounthedays


CITEOLDReference to another source.

NEWSpecifically a reference to a title of work.

@letscounthedays


HROLDRender a horizontal rule.

NEWA paragraph-level thematic break.

@letscounthedays


IOLDText rendered as italic.

NEWText in an alternative voice or tone.

@letscounthedays


MENUOLDA single column menu list.

NEWA group of controls, most commonly used within web applications.

@letscounthedays


SOLDText rendered with a line through it.

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

@letscounthedays


SMALLOLDText rendered as small.

NEWText within side comments or small print.

@letscounthedays


OBSOLETE ELEMENTS & ATTRIBUTES

@letscounthedays


OBSOLETE ELEMENTS• acronym• applet• basefont• big• center• dir• font

Deprecated from HTML 4.0

@letscounthedays

• frame• frameset• isindex• noframes• strike• tt• u


OBSOLETE ATTRIBUTES• align• alink• background• bgcolor• border• cellpadding• cellspacing• coords

@letscounthedays

• frame• frameborder• hspace• link• name• nohref• noshade• nowrap

• profile• scrolling• shape• size• target• text• type• valign


HOMEWORKMicroformatshAtom, hCalendar, hCard, hReview

WAI-ARIA Rolesbanner, complementary, contentinfo, main, navigation, search

@letscounthedays


QUESTIONS?Thank you!

@letscounthedays