quality development with html5

QUALITY DEVELOPMENT

WITH HTML5

Shay HoweSeptember 2011www.shayhowe.com – @letscounthedays

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

@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

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

HTML5<html lang="en">

@letscounthedays

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

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>

@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<audio src="song.mp3"></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<video src="movie.mp4" controls height="390" width="640"></video>

@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

@letscounthedays

DATE & TIME

@letscounthedays

EMAIL<input id="email" name="email" type="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

URL<input id="website" name="website" type="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">

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

@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

quality development with html5

Technology

html5 mobile game development workshop - module 2 - html5...

html5: next generation web development

html5 game development

the why of html5 for games development

windows store application development using html5

introduction to windows 8 development html5 objectives

writing secure html5 applications for automotive...

html500: html5 and css3 web development · pdf filecourse...

html5 mobile development cheat sheet

html5 game development with canvas

web development with html5, css3 & javascript

html5 game development - game engines, frameworks & more

html5 game development introduction

android app development using html5 technology

intel® html5 development environment · agenda • why...

ready to play: javascript / html5 game development

html5 next - potential and opportunities in html5...

html5 web application development final

html5 or android for mobile development?

html5 hybrid-platform application development