Html5: - A Primer
Html5: - A Primer
HTML5—A Primer
Carlos Cardona
HTML5 WG Member
WHATWG Contributor
School of Govsky Alumni
cardonadesigns.com
[email protected]
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
“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
“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
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">
<meta charset="utf-8">
<link rel="style-sheet" href="style.
css" type="text/css" />
<link rel="style-sheet" href="style.
css" type="text/css" />
<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>
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>
Examples
<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
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">
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()
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]