Scribd
Upload
155 views63 pages

Html5: - A Primer

HTML5 WG is a working group of the w3c's web hypertext application technology working group. The group's plan is to charter a completely new html group. Some things are clearer with hindsight of several years.

Uploaded by

cgcardona
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
155 views63 pages

Html5: - A Primer

HTML5 WG is a working group of the w3c's web hypertext application technology working group. The group's plan is to charter a completely new html group. Some things are clearer with hindsight of several years.

Uploaded by

cgcardona
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 63

5>2

HTML5—A Primer
Carlos Cardona
HTML5 WG Member
WHATWG Contributor
School of Govsky Alumni
cardonadesigns.com
[email protected]

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="noreferrer"
rel="author" rel="pingback"
rel="external" rel="prefetch"
rel="first" rel="prev"
rel="icon sizes" rel="sidebar"
rel="last" rel="search"
rel="license" rel="tag"
rel="next" rel="up"
rel="nofollow"

Example
<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)
moveTo(x,y) var radians = (Math.PI/180)*degrees.
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 Examples
<input type="color">

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="time"
type="month" type="datetime"
type="week" 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
[email protected]

ALL examples available @ html5app.com/scwd

You might also like