5>2

HTML5—A Primer

Carlos Cardona
HTML5 WG Member WHATWG Contributor School of Govsky Alumni
cardonadesigns.com cgcardona@gmail.com ALL examples available @ html5app.com/scwd

What's that they say about history?

Content-Type: text/html

Content-Type: text/html <P>look mom<b><i>!</B></i>

Content-Type: text/html <P>look mom<b><i>!</B></i>
XHTML + application/xhtml+xml <p>look mom<strong><em>!</em></strong></p>

Content-Type: text/html <P>look mom<b><i>!</B></i>
XHTML + application/xhtml+xml <p>look mom<strong><em>!</em></strong></p>

Draconian Error Handling

Content-Type: text/html <P>look mom<b><i>!</B></i>
XHTML + application/xhtml+xml <p>look mom<strong><em>!</em></strong></p>

Draconian Error Handling Appendix C
"summarizes design guidelines for authors who wish their XHTML documents to render on existing HTML user agents." Example

Content-Type: text/html <P>look mom<b><i>!</B></i>
XHTML + application/xhtml+xml <p>look mom<strong><em>!</em></strong></p>

Draconian Error Handling Appendix C
"summarizes design guidelines for authors who wish their XHTML documents to render on existing HTML user agents." Example

XHTML 1.1

June 2004
"Should the W3C develop declarative extension to HTML and CSS and imperative extensions to DOM"

June 2004
"Should the W3C develop declarative extension to HTML and CSS and imperative extensions to DOM"

“At present, W3C does not intend to put any resources into the third straw-poll topic: extensions to HTML and CSS for Web Applications, other than technologies being developed under the charter of current W3C Working Groups.” (XHTML 2)

June 2004
"Should the W3C develop declarative extension to HTML and CSS and imperative extensions to DOM"

“At present, W3C does not intend to put any resources into the third straw-poll topic: extensions to HTML and CSS for Web Applications, other than technologies being developed under the charter of current W3C Working Groups.” (XHTML 2)

WHATWG Web Hypertext Application Technology Working Group

October 2006
"Some things are clearer with hindsight of several years... The plan is to charter a completely new HTML group. "

October 2006
"Some things are clearer with hindsight of several years... The plan is to charter a completely new HTML group. "

Dec 31 2009
"While we recognize the value of the XHTML 2 Working Group’s contributions over the years, after discussion with the participants, W3C management has decided to allow the Working Group’s charter to expire at the end of 2009 and not to renew it."

New Elements

<doctype>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http: //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<doctype>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http: //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!doctype html>
Standards mode in all browsers

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

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

<html lang="en"> All HTML5 is in the XHTML namespace application/xhtml+html

<head>
<meta http-equiv="Content-Type" content="text/html ; charset=utf-8"

<head>
<meta http-equiv="Content-Type" content="text/html ; charset=utf-8"

<meta charset="utf-8">

<link rel="style-sheet" href="style. css" type="text/css" />

<link rel="style-sheet" href="style. css" type="text/css" />

<link rel="stylesheet" href="style.css" />

<script href="script.js" type=" text/javascript" /> </script>

<script href="script.js" type=" text/javascript" /> </script>
<script href="script.js"></script>
<script> document.createElement ('header'); document.createElement ('footer'); document.createElement ('section'); document.createElement ('aside'); document.createElement('nav'); document.createElement('article'); </script>

<header>
The <header> element represents a group of introductory or navigational aids

<header>
The <header> element represents a group of introductory or navigational aids

<hgroup>
The hgroup element represents the heading of a section

<nav>
The <nav> element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

<nav>
The <nav> element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

<section>
The <section> element represents a generic document of application section. A section, in this context, is a thematic grouping of content, typically with a heading

<aside>
The <aside> element represents a section of a page that consists of content that is tangentially related to the content around the <aside> element, and which could be considered separate from the content. Such sections are often represented as sidebars in printed typography

<aside>
The <aside> element represents a section of a page that consists of content that is tangentially related to the content around the <aside> element, and which could be considered separate from the content. Such sections are often represented as sidebars in printed typography

<time>
The <time> element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset.

<mark>
The <mark> element represents a run of text in one document marked or highlighted for reference purposes, due to it's relevance in another context.

<mark>
The <mark> element represents a run of text in one document marked or highlighted for reference purposes.

<footer>
The <footer> element represents a footer for it's nearest ancestor sectioning content or sectioning root element. A footer typically contains information about it's section such as who wrote it, links to related documents, copyright data, and the like.

rel=""
rel="archives" rel="author" rel="external" rel="first" rel="icon sizes" rel="last" rel="license" rel="next" rel="nofollow" Example rel="noreferrer" rel="pingback" rel="prefetch" rel="prev" rel="sidebar" rel="search" rel="tag" rel="up"

<canvas>
"a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly." A canvas is a rectangle on your page where you can use Javascript to draw anything you want.

<canvas>
<canvas id="demo" width="300" height="300"> </canvas>

var canvas = document.getElementById('demo') var ctx = canvas.getContext('2d') "A future version of this specification will probably define a 3d context

<canvas>
fillRect(x,y,width,height) strokeRect(x,y,width,height) clearRect(x,y,width,height) beginPath() rect(x,y,width,height) arc(x,y,radius,startingAngle,endingAngle,boolean) var radians = (Math.PI/180)*degrees. moveTo(x,y) lineTo(x,y) stroke() fill() quadraticCurveTo(cp1x,cp1y,x,y) bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) closePath()

<canvas> Images
var img = new Image(); // Create Image Object img.src = 'image.png'; // Set source path img.onload() { ctx.drawImage(image,x,y); }

<canvas> Images
Scaling
drawImage(image,x,y,width,height)

Slicing
drawImage(image,sx,sw,swidth,sheight, dx,dy,dwidth,dheight)

<canvas> Colors
fillStyle = color strokeStyle= color

Transparency
globalAlpha = transparency value

Line Styles
lineWidth = value lineCap = butt, round, square lineJoin = round, bevel, miter miterLimit = value

<canvas> Colors
Gradients
createLinearGradient(x1,y1,x2,y2) createRadialGradient(x1,y1,r1,x2,y2,r2) addColorStop(position, color)

Patterns
createPattern(image,type) Examples

<video>
<video src="movie.ogv" width="300" height="300" controls autoplay preload></video>

<video>
<video width="300" height="300" controls autoplay preload> <source scr="movie.ogv" type='video/ogg; codecs="theora, vorbis"'> <source scr="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> </video>
AddType video/ogg .ogv AddType video/mp4 .mp4 Examples

<audio>
<audio scr="music.mp3" controls> </audio>

<audio>
<audio controls> <source src="music.mp3"> <source src="music.wav"> </audio>

Example

GeoLocation
navigator.geolocation
getCurrentPosition() watchPosition() clearWatch() Global Positioning System (GPS) Network Signals IP Address RFID WiFi and Bluetooth MAC addresses GSM/CDMA cell ID's User Input

GeoLocation
This is not Big Brother
protect the user's privacy and ensure that no location information is made available without the users express permission only request location information when necessary dispose of information once task is complete if stored, users should be allowed to update and delete data

GeoLocation
Position Object
coords.latitude coords.longitude coords.altitude coords.accuracy coords.altitudeaccuracy coords.heading coords.speed timestamp

GeoLocation
Position Error Object
code message The code property will be one of: PERMISSION_DENIED (1) if the user denies access POSITION_UNAVAILABLE (2) if the network is down or satellites can't be contacted TIMEOUT (3) if it takes to long to calculate the users location UNKNOWN_ERROR (0) if anything else goes wrong

GeoLocation
Position Options Object
enableHighAccuracy timeout maximumAge Example

Offline Storage
3 ways to give your website/app offline functionality
1. Offline Cache 2. Browser Database 3. Local/Session Storage

Offline Cache
A list of resources you would like available if the user looses network connect
<html manifest="cache.manifest"> Add to .htaccess file: AddType text/cache-manifest .manifest

Offline Cache
CACHE MANIFEST
# v.1 comment CACHE # Stuff you want available if no network connection NETWORK # Stuff you would like to never have cache FALLBACK # If there is a network connection fetch this stuff from the web and if not then use these files

Offline Cache
The Flow of Events
When your browser visits a page that points to a cache manifest, it fires off a series of events on the window. applicationCache object.
checking (if there is no previous cache) downloading progress //what has been downloaded and what is left cached (if there is a previous cache and there are no changes) noupdate (if there is a previous cache and there is a change) downloading progress updateready window.applicationCache.swapCache()

Offline Cache
Things to know....
HTTP Headers Expires & Cache-Control If you change a file that the manifest points to then you must make sure to change at least one character so that the browser fires the downloading, progress, and update ready events instead of the noupdate event. ex: CACHE MANIFEST # v.01

Example

Offline Storage
Local/Session
Lists of key/value pairs stored in the browser 4 methods: setItem(key,value) getItem(key) removeItem(key) clear() Session Storage is tied to the life of the session. (Until you close the browser) Local Storage is indefinite.

Offline Storage
Local/Session
var key = $('#key').val(); var value = $('#value').val(); sessionStorage.setItem(key, value); var value = sessionStorage.getItem(key); $('div').html(value); sessionStorage.removeItem(key); sessionStorage.clear();

Example

HTML5 Forms
Over 12 new input types
Placeholder text <input type="text" placeholder="text you want in the box"> Auto focus <input type="text" autofocus> Email <input type="email"> Web Addresses <input type='url'> Search <input type="search">

HTML5 Forms
Color Pickers <input type="color">

Examples

Numbers <input type="number" min="1" max="10" step="2" value="5"> input.stepUp() input.stepDown() input.valueAsNumber() Range Slider <input type="number" min="1" max="10" step="2" value="5"> Date Pickers type="date" type="month" type="week"

type="time" type="datetime" type="datetime-local"

Microdata
A way of embedding Machine Readable Information in your website. It's a way of instructing a machine to extract data that already exists on your page. Why? Mark up a date and have the browser add it to a visitors calendar Mark up your contact information so a browser can add it to a visitors address book Mark up a blog post so that feed readers can look at your HTML and automatically extract a feed. Mark up your resume so that sites like LinkedIn can automatically extract any information it needs

Microdata
How? 2 simple attributes: itemscope A binary attribute. It doesn't accept a value. It indicates that an element is a Microdata Container which means that it contains some data inside of it that is related in some way. itemprop Inside of a Microdata container, you have various bits of information that you want to make machine readable. You indicate these pieces of data using the itemprop attribute.

Microdata
And 3 to grow on itemtype Tells the computer what the type of data for the whole itemscope. Can be on any element that has an itemscope attribute. itemid So you can be extremely clear about what type of data you are referring to. itemref Used to refer to pieces of data that are associated with the itemscope Microdata Container but aren't included inside of it.

Example

Carlos Cardona
HTML5 WG Member WHATWG Contributor School of Govsky Alumni
cardonadesigns.com cgcardona@gmail.com ALL examples available @ html5app.com/scwd

Sign up to vote on this title
UsefulNot useful