View
19.319
Download
2
Category
Preview:
DESCRIPTION
Work on HTML5 began in 2004 to improve the existing markup language which has been in place for the past decade. In this decade the web has grown and evolved quite a bit, leaving web designers and developers much to ask for. HTML5 responds to those request and helps pave the way for a new frontier in front-end development. HTML5 introduces new elements, a more semantic structure, improved form functionality, better media control and more for the growing web.
Citation preview
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
Recommended