Post on 22-May-2015
description
QUALITY DEVELOPMENT
WITH HTML5
Shay HoweSeptember 2011www.shayhowe.com – @letscounthedays
Quality Development with HTML5 & CSS3
SHAY HOWEwww.shayhowe.com – @letscounthedays
@letscounthedays
Quality Development with HTML5 & CSS3
HTML5Markup language to give
content structure and meaning.
@letscounthedays
CSS3Presentation language to
give content style and appearance.
Quality Development with HTML5 & CSS3 @letscounthedays
Quality Development with HTML5 & CSS3
HTML5
@letscounthedays
Quality Development with HTML5 & CSS3
HTML5 IS SIMPLE
@letscounthedays
Quality Development with HTML5 & CSS3
DOCTYPEHTML<!DOCTYPE html PUBLIC "-‐//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML5<!DOCTYPE html>
@letscounthedays
Quality Development with HTML5 & CSS3
LANGUAGEHTML<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
HTML5<html lang="en">
@letscounthedays
Quality Development with HTML5 & CSS3
CHARACTER ENCODINGHTML<meta http-‐equiv="Content-‐Type" content="text/html; charset=UTF-‐8">
HTML5<meta charset="UTF-‐8">
@letscounthedays
Quality Development with HTML5 & CSS3
CSSHTML<link rel="stylesheet" type="text/css" href="file.css">
HTML5<link rel="stylesheet" href="file.css">
@letscounthedays
Quality Development with HTML5 & CSS3
JAVASCRIPTHTML<script type="text/javascript" src="file.js"></script>
HTML5<script src="file.js"></script>
@letscounthedays
Quality Development with HTML5 & CSS3
GETTING STARTED
@letscounthedays
Quality Development with HTML5 & CSS3
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
Quality Development with HTML5 & CSS3
HTML5 IS SEMANTIC
@letscounthedays
Quality Development with HTML5 & CSS3
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
Quality Development with HTML5 & CSS3
STRUCTURAL ELEMENTS• header• nav• article• section• aside• footer
@letscounthedays
Quality Development with HTML5 & CSS3
STRUCTURAL ELEMENTS<body><header>...</header><nav>...</nav><article><section>...</section>
</article><aside...</aside><footer>...</footer>
</body>
@letscounthedays
Quality Development with HTML5 & CSS3
STRUCTURAL ELEMENTS
@letscounthedays
Quality Development with HTML5 & CSS3
HGROUP<header><hgroup><h1>Shay Howe</h1><h2>Man, Myth or Legend</h2>
</hgroup></header>
@letscounthedays
Quality Development with HTML5 & CSS3
HGROUP
@letscounthedays
Quality Development with HTML5 & CSS3
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
Quality Development with HTML5 & CSS3
TIME
@letscounthedays
Quality Development with HTML5 & CSS3
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
Quality Development with HTML5 & CSS3
FIGURE & FIGCAPTION
@letscounthedays
Quality Development with HTML5 & CSS3
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
Quality Development with HTML5 & CSS3
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
Quality Development with HTML5 & CSS3
PROGRESSYou are <progress>50%</progress> complete.
<progress min="0" max="100" value="50">Hold tight, your getting there.</progress>
@letscounthedays
Quality Development with HTML5 & CSS3
AUDIO
@letscounthedays
Quality Development with HTML5 & CSS3
AUDIO<audio src="song.mp3"></audio>
<audio src="song.mp3" autoplay controls loop preload="auto"></audio>
@letscounthedays
Quality Development with HTML5 & CSS3
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
Quality Development with HTML5 & CSS3
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
Quality Development with HTML5 & CSS3
VIDEO
@letscounthedays
Quality Development with HTML5 & CSS3
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
Quality Development with HTML5 & CSS3
FORMS
@letscounthedays
Quality Development with HTML5 & CSS3
NEW INPUTS• color• date• datetime• datetime-‐local• email• month• number
@letscounthedays
• range• search• tel• time• url• week
Quality Development with HTML5 & CSS3
COLOR<input id="color" name="color" type="color">
@letscounthedays
Quality Development with HTML5 & CSS3
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
Quality Development with HTML5 & CSS3
DATE & TIME
@letscounthedays
Quality Development with HTML5 & CSS3
EMAIL<input id="email" name="email" type="email">
@letscounthedays
Quality Development with HTML5 & CSS3
@letscounthedays
Quality Development with HTML5 & CSS3
NUMBER<input id="cost" name="cost" type="number" min="10" max="100">
@letscounthedays
Quality Development with HTML5 & CSS3
RANGE<input id="rating" name="rating" type="range" min="1" max="10">
@letscounthedays
Quality Development with HTML5 & CSS3
SEARCH<input id="query" name="query" type="search">
@letscounthedays
Quality Development with HTML5 & CSS3
TEL<input id="phone" name="phone" type="tel">
@letscounthedays
Quality Development with HTML5 & CSS3
TEL
@letscounthedays
Quality Development with HTML5 & CSS3
URL<input id="website" name="website" type="url">
@letscounthedays
Quality Development with HTML5 & CSS3
URL
@letscounthedays
Quality Development with HTML5 & CSS3
NEW ATTRIBUTES• autocomplete• autofocus• formaction• formenctype• formmethod• formnovalidate• formtarget• list• max
@letscounthedays
• min• multiple• novalidate• pattern• placeholder• readonly• required• spellcheck• step
Quality Development with HTML5 & CSS3
AUTOCOMPLETE<form action="#" autocomplete="off">
<input id="destination" name="destination" type="text" autocomplete="off">
@letscounthedays
Quality Development with HTML5 & CSS3
AUTOFOCUS<input id="name" name="name" type="text" autofocus>
@letscounthedays
Quality Development with HTML5 & CSS3
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
Quality Development with HTML5 & CSS3
MIN, MAX & STEP<input id="score" name="score" type="number" min="0" max="10" step="2">
@letscounthedays
Quality Development with HTML5 & CSS3
PLACEHOLDER<input id="destination" name="destination" type="text" placeholder="Your destination">
@letscounthedays
Quality Development with HTML5 & CSS3
PLACEHOLDER
@letscounthedays
Quality Development with HTML5 & CSS3
REQUIRED<input id="name" name="name" type="text" required>
@letscounthedays
Quality Development with HTML5 & CSS3
REQUIRED
@letscounthedays
Quality Development with HTML5 & CSS3
PATTERN<input id="phone" name="phone" type="tel" pattern="^[0-‐9]+[\-‐ ]*[0-‐9]+$">
@letscounthedays
Quality Development with HTML5 & CSS3
PATTERN
@letscounthedays
Quality Development with HTML5 & CSS3
CHANGED ELEMENTS
@letscounthedays
Quality Development with HTML5 & CSS3
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
Quality Development with HTML5 & CSS3
BOLDText rendered as bold.
NEWText stylistically offset without importance.
@letscounthedays
Quality Development with HTML5 & CSS3
CITEOLDReference to another source.
NEWSpecifically a reference to a title of work.
@letscounthedays
Quality Development with HTML5 & CSS3
HROLDRender a horizontal rule.
NEWA paragraph-level thematic break.
@letscounthedays
Quality Development with HTML5 & CSS3
IOLDText rendered as italic.
NEWText in an alternative voice or tone.
@letscounthedays
Quality Development with HTML5 & CSS3
MENUOLDA single column menu list.
NEWA group of controls, most commonly used within web applications.
@letscounthedays
Quality Development with HTML5 & CSS3
SOLDText rendered with a line through it.
NEWText struck from the content that is no longer accurate or relevant.
@letscounthedays
Quality Development with HTML5 & CSS3
SMALLOLDText rendered as small.
NEWText within side comments or small print.
@letscounthedays
Quality Development with HTML5 & CSS3
OBSOLETE ELEMENTS & ATTRIBUTES
@letscounthedays
Quality Development with HTML5 & CSS3
OBSOLETE ELEMENTS• acronym• applet• basefont• big• center• dir• font
Deprecated from HTML 4.0
@letscounthedays
• frame• frameset• isindex• noframes• strike• tt• u
Quality Development with HTML5 & CSS3
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
Quality Development with HTML5 & CSS3
HOMEWORKMicroformatshAtom, hCalendar, hCard, hReview
WAI-ARIA Rolesbanner, complementary, contentinfo, main, navigation, search
@letscounthedays
Quality Development with HTML5 & CSS3
QUESTIONS?Thank you!
@letscounthedays