HTML5: features with examples

HTML5
Human Computer Interaction 2013

Alfredo Torre
DIEEI

March 26, 2013

University of Catania
Electric, Electronics and Computer Engineering Department (DIEEI)

What we’ll see
The web markups

Brief history of HTML5
The improvements
Browser support
How to start

Alfredo Torre (DIEEI)

With this introduction we are going
to show you the new features of this
web markup language standardized
by W3C. Therefore the contents we
are going to present are not
suﬃcient to comprehend all the
features of HTML5.

HTML5

March 26, 2013

2 / 100

Part I
HTML 5


HTML5

March 26, 2013

3 / 100

TOC
1

Introduction
HTML 5: a story so far
Objectives

2

Markup language
Under the hood
The Document Model
How to write HTML5 document
Media

3

Web Applications
Client-Server Architecture
Towards desktop and web integration
Semantic description of web content


HTML5

March 26, 2013

4 / 100

Introduction


From HTML2 to HTML5
The beginning
HTML was first published as an Internet draft in 1993. During the ’90s
HTML grew up faster and faster and finally, in 1999, version 4.01 was
released. In the course of its development, the World Wide Web
Consortium (W3C) assumed control of the specification.
HTML vs XML
After the rapid delivery of these four versions though, HTML was widely
considered a dead-end; the focus of web standards shifted to XML and
XHTML, and HTML was put on the back burner. In the meantime,
HTML refused to die, and the majority of content on the web continued to
be served as HTML. To enable new web applications and address HTML’s
shortcomings, new features and specifications were needed for HTML.


HTML5

March 26, 2013

5 / 100

Introduction


HTML’s rebirth
HTML5 opens its eyes

Wanting to take the web platform to a new
level, a small group of people started the Web
Hypertext Application Working Group
(WHATWG) in 2004. They created the
HTML5 specification
New features specifically geared to web
applications saw the light.
The term Web 2.0 was coined
We are living this new golden age right now
The first working draft for HTML5 in 2008
The XHTML 2 working group stopped in 2009
The specification has not been completely
locked down

HTML5

March 26, 2013

6 / 100

Introduction


HTML5 and multi-platform
One ring to rule them all

HTML5 is an attempt to deﬁne a single markup
language that can be written in either HTML or
XHTML syntax.
It introduces markup and application programming
interfaces (APIs) for complex web applications.
For the same reasons, HTML5 is also a potential
candidate for cross-platform mobile applications.
Many features of HTML5 have been built with the
consideration of being able to run on low-powered
devices such as smartphones and tablets.


HTML5

March 26, 2013

7 / 100

Introduction

Objectives

A new vision
Compatibility
If HTML5 features are not supported, the behavior must degrade
gracefully
Backward compatibility - The old Internet must survive
Utility
Priority of Constituencies
User is King
This means, when in doubt, the speciﬁcation values users over
authors, over implementers (browsers), over speciﬁers (W3C), and
over theoretical purity.
HTML5 must be practical


HTML5

March 26, 2013

8 / 100

Introduction

Objectives

A new vision

Interoperability (Simple is better )
A new, simpliﬁed DOCTYPE
Native browser ability instead of complex JavaScript code
A new, simpliﬁed character set declaration
Universal access
Web Accessibility Initiative (WAI)
Accessible Rich Internet Applications (ARIA)


HTML5

March 26, 2013

9 / 100

Introduction

Objectives

Rules
Some rules for HTML5 were established

New features should be based on HTML, CSS, DOM, and JavaScript
Reduce the need for external plugins (like Flash)
Better error handling
More markup to replace scripting
HTML5 should be device independent
The development process should be visible to the public


HTML5

March 26, 2013

10 / 100

Markup language

Under the hood

The doctype

XHTML: the old one
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">

HTML5: simplicity
<!DOCTYPE html>


HTML5

March 26, 2013

11 / 100

Markup language

Under the hood

A simple example

<!DOCTYPE html>
<html>
<head>
<title>Sample page</title>
</head>
<body>
<h1>Sample page</h1>
<p>This is a
<a href="demo.html">simple</a> sample.</p>

</body>
</html>

It looks like the same as HTML4. But there is more...


HTML5

March 26, 2013

12 / 100

Markup language

Under the hood

Some new features

New content-speciﬁc elements, like
<article>, <footer>, <header>, <nav>, <section>

The <video> and <audio> elements for media playback
New form controls, like calendar, date, time, email, url,
search
Support for local storage
The <canvas> element for 2D drawing


HTML5

March 26, 2013

13 / 100

Markup language

Under the hood

Tags

Tags have to be nested such that elements are all completely within each
other, without overlapping:
Wrong
<p>This is <em>very <strong>wrong</em>!</strong></p>
Correct
<p>This <em>is <strong>correct</strong>.</em></p>


HTML5

March 26, 2013

14 / 100

Markup language

Under the hood

Attributes

Elements can have attributes, which control how the elements work. In the
example below, there is a hyperlink, formed using the a element and its
href attribute:
<a href="demo.html">simple</a>
Attributes are placed inside the start tag, and consist of a name and a
value, separated by an "=" character. The attribute value can remain
unquoted if it doesn’t contain space characters or any of " ’ = < or >.
Otherwise, it has to be quoted using either single or double quotes. The
value, along with the "=" character, can be omitted altogether if the value
is the empty string.


HTML5

March 26, 2013

15 / 100

Markup language

Under the hood

Attributes


<input name=address disabled>
<input name=address disabled="">

<input name=address maxlength=200>
<input name=address maxlength=’200’>
<input name="address" maxlength="200">


HTML5

March 26, 2013

16 / 100

Markup language

Under the hood

Charset
Short form - Supported by HTML5 and simplest
<meta charset=’utf-8’>

Long form - also supported
<meta http-equiv=’Content-Type’ content=’text/html; charset=utf-8’>

I never use funny characters. Do I still need to declare my character
encoding?
Yes! You should always specify a character encoding a on every HTML
page you serve. Not specifying an encoding can lead to security
vulnerabilities.
a

See also: Stack overﬂow: Meta charset discussion


HTML5

March 26, 2013

17 / 100

Markup language

Under the hood

Namespace and language
Keep it simple please!

XHTML root element
A valid XHTML has to specify the namespace with xmlns (that stands for
"XML namespace")
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en">

Long form - also supported
Now you can easily declare the HTML root element like below:
<html lang="en">

The namespace is setted for you placing the HTML elements in the
XHTML namespace.

HTML5

March 26, 2013

18 / 100

Markup language

Under the hood

HTML5 is not XML

It is not case sensitive
<div>, <DIV>, <dIV> 

You have not to close every tag
<BR>, <br>, <br /> 
<img>, <ImG>, <img /> 

However it is better to use the XHTML code style to maintain a
cleaner code
Now it is possible to nest elements inside the a tag


HTML5

March 26, 2013

19 / 100

Markup language

The Document Model

The DOM
Document Object Model

A DOM tree is an in-memory
representation of a document.

DOM trees contain several kinds of
nodes, in particular

HTML user agents (e.g. Web browsers)
parse the HTML markup, turning it into
a DOM (Document Object Model) tree.

A DocumentType node
Element nodes
Text nodes
Comment nodes
ProcessingInstruction nodes
(in some cases)


HTML5

March 26, 2013

20 / 100

Markup language

The Document Model

The DOM

A W3C standard
Describes how the document object can be
traversed and modiﬁed
Represented as tree structure
Can add new elements to the page
Can change attributes of existing elements
Client-side languages can work on it (like JS)


HTML5

March 26, 2013

21 / 100

Markup language

The Document Model

DOM schematic

Figure: The Document Object Model

HTML5

March 26, 2013

22 / 100

Markup language

The Document Model

The DOM Tree

The root element of the DOM tree (document)
is htmla
It contains two elements, head and body
The head element contains:
title element, which itself contains a Text

node with the title of the webpage

The body element contains other HTMl entities
to describe the page partioning.
This DOM tree can be manipulated from
scripts in the page.
a


See slide 2

HTML5

March 26, 2013

23 / 100

Markup language

The Document Model

Example
For example, here is a form with a script that sets the value of the form’s
output element to say "Hello World":
<form name="main">
Result: <output name="result"></output>
<script>
document.forms.main.elements.result.value = ’Hello World’;
</script>
</form>

We are not going to use Javascript in its pure form. We will manipulate
our DOM elements via jQuery.


HTML5

March 26, 2013

24 / 100

Markup language

The Document Model

Example
Each element in the DOM tree is represented by an
object, and these objects have APIs so that they
can be manipulated.
For instance, a link (e.g. the a element in the tree
above) can have its "href" attribute changed in
several ways:
var a = document.links[0]; // obtain the first link in the document
a.href = ’sample.html’; // change the destination URL of the link
a.protocol = ’https’; // change just the scheme part of the URL
// change the content attribute directly
a.setAttribute(’href’, ’http://example.com/’);


HTML5

March 26, 2013

25 / 100

Markup language


<HEAD>
The head of the document

The ﬁrst child of the root element is usually <head>. <head> contains
metadata — information about the page, rather than the body of the page
itself. The body of the page is, unsurprisingly, contained in the <body>
element.
<head>
<meta charset=’utf-8’>
<title>My Weblog</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="alternate" type="application/atom+xml"
title="Atom␣feed"
href="/feed/" />
<link rel="search" type="application/opensearchdescription+xml"
title="Search"
href="opensearch.xml" />
<link rel="shortcut␣icon" href="/favicon.ico" />
</head>

HTML5

March 26, 2013

26 / 100

Markup language


Link relations
How to specify the kind of a link

The a tag simply give you the ability to link (with
an anchor) another page or another resource.
Thanks to HTML5 there is also the possibility to
express why a link points to a given resource with
the rel attribute.
Two categories of links can be created using the link
element:
links to external resources are links to
resources that are to be used to augment the
current document
hyperlink links are links to other documents


HTML5

March 26, 2013

27 / 100

Markup language


Link relations
The rel attribute

rel="stylesheet" links to a CSS stylesheet
rel="alternate" helps crawlers to ﬁnd an alternate source of information
(e.g. RSS, Atom, PDF)
rel="next" indicates the next page of a multi-page document
rel="prev" indicates the previous page of a multi-page document
rel="shortcut icon" the favicon (new in HTML5: the sizes attribute)


HTML5

March 26, 2013

28 / 100

Markup language


Link relations
The rel attribute

rel="canonical" deﬁnes a single page link to avoid duplicate contents
(microformats)
rel="nofollow" it was invented by Google and standardized within the
microformats community
rel="search" it should point to an OpenSearch document that describes
how a browser could construct a URL to search the current
site for a given keyword
rel="tag" for tagging (invented by Technorati)

Microformats.org - HTML5 link type extensions
HTML5 link types

HTML5

March 26, 2013

29 / 100

Markup language


New Semantic Elements
HTML5 introduces new elements that express the semantics associated to
speciﬁed portions of a webpage and the deriving contents.
Google and Opera analyzed millions of pages to discover the common ID
names for DIV tags and found a huge amount of repetition. For example,
since many people used div id="footer" to mark up footer
content, HTML5 provides a set of new sectioning elements
that you can use in modern browsers right now.
header: header content (for a page or a section of the
page)
footer: footer content (for a page or a section of the
page)
section: a section in a web page
article: independent article content
aside: related content or pull quotes
nav: navigational aids

HTML5

March 26, 2013

30 / 100

Markup language


HTML5 page structure

Figure: Schematic of HTML5 webpage structure

HTML5

March 26, 2013

31 / 100

Markup language


Semantic elements
<section>
Use section to group related contents. It typically has a heading.
Examples of sections would be chapters, the tabbed pages in a tabbed
dialog box, or the numbered sections of a thesis. A Web site’s home page
could be split into sections for an introduction, news items, contact
information.
<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. Not all groups of
links on a page need to be in a nav element — only sections that consist
of major navigation blocks are appropriate for the nav element.


HTML5

March 26, 2013

32 / 100

Markup language


Semantic elements
<article>
Like sections, but for self contained content. This could be a forum
post, a magazine or newspaper article, a Web log entry, a user-submitted
comment, an interactive widget or gadget, or any other independent item
of content.
The lists of articles on a blog it could be made of article elements. A
single page could contain a undeﬁned number of articles.
<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 that content. Such sections are
often represented as sidebars in printed typography.


HTML5

March 26, 2013

33 / 100

Markup language


Semantic elements

<hgroup>
The hgroup element represents the heading of a section. The element is
used to group a set of h1–h6 elements when the heading has multiple
levels, such as subheadings, alternative titles, or taglines.
<header>
The header element represents a group of introductory or navigational
aids. A header element is intended to usually contain the section’s
heading (an h1–h6 element or an hgroup element), but this is not
required. The header element can also be used to wrap a section’s table
of contents, a search form, or any relevant logos.


HTML5

March 26, 2013

34 / 100

Markup language


Semantic elements

<footer>
The footer element represents a footer for its nearest ancestor sectioning
content or sectioning root element. A footer typically contains information
about its section such as who wrote it, links to related documents,
copyright data, and the like. Footers don’t necessarily have to appear at
the end of a section, though they usually do. When the footer element
contains entire sections, they represent appendices, indexes, long
colophons, verbose license agreements, and other such content.


HTML5

March 26, 2013

35 / 100

Markup language


Semantic elements
<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 oﬀset.
<time datetime="2013-03-14">14 marzo 2013</time>

<time datetime="2012-12-21" pubdate>End of the World</time>

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


HTML5

March 26, 2013

36 / 100

Markup language


Figure element
Now caption goes with the image

Before:
<img src="path/to/image" alt="The␣sun" />
<p>Image of the Sun. </p>

After:
<figure>
<img src="path/to/image" alt="About␣image" />
<figcaption>
<p>This is a caption associated to an image. </p>
</figcaption>
</figure>

Now an image can have a semantic meaning and it is wrapped into figure
element.

HTML5

March 26, 2013

37 / 100

Markup language


Editable contents on a webpage
Towards a UI uniﬁcation

A new attribute can be applied to elements, called contenteditable. As the
name implies, this allows the user to edit any of the text contained within
the element, including its children.
<ul contenteditable="true">
<li> Wake up </li>
<li> Drink Coffee </li>
<li> Finally go so </li>
</ul>

It’s a step towards an interface more similar to a classic desktop GUI.


HTML5

March 26, 2013

38 / 100

Markup language

Media

How to insert a video on a web page
No more plugins

Anyone who has visited YouTube.com in the past years knows how to
embed video in a web page. But prior to HTML5, there was no
standards-based way to do this.
1 QuickTime
2 RealPlayer
3 or...

Now, think about those plugins, for example Flash,
and the internal policy of its producer (Adobe).
If you try to download Flash version 11.3 for
Linux amd64 you will reach the point, a sad point...


HTML5

March 26, 2013

39 / 100

Markup language

Media

Video/audio codecs
Video killed the Net stars?

There are many video containers that constitute an envelope of the
video/audio stream. As obvious it is impossible to redistribute lossless
video stream (and audio, unless you are viewiend a prior 1927 movie).
So there is the real need of a compression technique with two codec video
and audio streams and put them into a container.


HTML5

March 26, 2013

40 / 100

Markup language

Media

Video formats browser support


HTML5

March 26, 2013

41 / 100

Markup language

Media

Use several video codecs and containers

There is no single combination of containers and codecs that works in
all HTML5 browsers.
This is not likely to change in the near future.
To make your video watchable across all of these devices and
platforms, it is necessary to encode your video more than once.


HTML5

March 26, 2013

42 / 100

Markup language

Media

Codec compatibility
For maximum compatibility, here’s what your video workflow will look like:
1

Make one version that uses WebM (VP8 + Vorbis).

2

Make another version that uses H.264 baseline video and AAC "low
complexity" audio in an MP4 container.

3

Make another version that uses Theora video and Vorbis audio in an
Ogg container.

4

Make another version that uses Theora video and Vorbis audio in an
Ogg container. 1

5

Link to all three video files from a single <video> element, and fall
back to a Flash-based video player.

1
WebM and H.264 have sufficient support. So, unless you’re supporting
Firefox 3.5 or Opera 10.5, you can drop Theora.

HTML5

March 26, 2013

43 / 100

Markup language

Media

Video tag
The code
<video src="hci_video.webm"



width="640" height="480" preload controls></

But we have to put three video sources to guarantee the playback with
almost all browsers. How to do it?
<video width="640" height="480" controls>
<source src="hci_video.mp4" type="video/mp4;␣codecs=avc1.42E01E,mp4a
.40.2">
<source src="hci_video.webm" type="video/webm;␣codecs=vp8,vorbis">
<source src="hci_video.ogv" type="video/ogg;␣codecs=theora,vorbis">
</video>

HTML5

March 26, 2013

44 / 100

Markup language

Media

Video tag
The type of sources

The type attribute looks complicated — well, it is complicated. It is a
combination of three pieces of information:
1

the container format,

2

the video codec,

3

the audio codec.

<source src="hci_video.ogv" type="video/ogg;␣codecs=theora,vorbis">

iPads running iOS 3.x had a bug that prevented them from noticing
anything but the first video source listed. iOS 4 (a free upgrade for all
iPads) fixes this bug. If you want to deliver video to iPad owners who
haven’t yet upgraded to iOS 4, you will need to list your MP4 file first,
followed by the free video formats.
Further reading: HTML5 - the video element

HTML5

March 26, 2013

45 / 100

Markup language

Media

Canvas tag
How to draw in 2D

HTML5 deﬁnes the canvas element as "a
resolution-dependent bitmap canvas which can be
used for rendering graphs, game graphics, or other
visual images on the ﬂy." A canvas is a rectangle
in your page where you can use JavaScript to
draw anything you want.
<canvas width="640" height="480"></canvas>

Further reading: Mozilla Canvas Tutorial


HTML5

March 26, 2013

46 / 100

Markup language

Media

Canvas tag
The 2D grid

The canvas is a two-dimensional grid. The coordinate (0, 0) is at the
upper-left corner of the canvas. Along the X-axis, values increase towards
the right edge of the canvas. Along the Y-axis, values increase towards the
bottom edge of the canvas.


HTML5

March 26, 2013

47 / 100

Web Applications


Client/Server Model
Repetita iuvant

A web application normally uses the traditional Client/Server architecture:
The Client gathers information from the user and asks the server a
service
The Server receives a request for information from the client and
servs the requested information to it

Figure: Client/Server - 2-tier Architecture


HTML5

March 26, 2013

48 / 100

Web Applications


Three-tier Architecture
Not only static pages

Now we have often a 3-tier (or multi-tier) client/server system, which
consists of three distinct pieces:
Client tier or User Interface tier or Presentation Tier
Processing tier (or middle tier). It is composed by a web server:
Apache, nginx, Lighttpd, IIS...
Data storage tier, which stores data in a database and receives the
requests from the processing tier, answering to it (e.g. MySQL,
PostgreSQL).

HTML5

March 26, 2013

49 / 100

Web Applications


Multi-tier Architecture
JEE: what you will see in the future...

Figure: J2EE multi-tier architecture

HTML5

March 26, 2013

50 / 100

Web Applications


Web Technologies
How to distinguish server from client


HTML5

March 26, 2013

51 / 100

Web Applications


Server-side Technology
LAMPP: Linux Apache MySQL Python/PHP/Perl

If you want to install a LAMPP stack on your machine, you can try
XAMPP, an easy to install Apache distribution that contains PHP, Perl
and MySQL and is available for the most used operating systems. There is
also WAMP for Windows platforms.


HTML5

March 26, 2013

52 / 100

Web Applications


Local Storage For Web Application
A method to save information with a web browser

Client Application

Web Application

XML file
INI file
SQLite
DBMS
Specific application file
(binary or text)


Cookie
Nothing else? :/

HTML5

March 26, 2013

53 / 100

Web Applications


Using cookies for persistent data

Cookies are included with every HTTP request
Redundant transmission of the same information
Cookies are unencrypted (unless the entire web application is served
over SSL)
Limited to about 4 KB of data
They are not really useful for a web 2.0 application
What is really needed
A lot of storage space on the client that persists beyond a page refresh
and is not transmitted to the server.


HTML5

March 26, 2013

54 / 100

Web Applications


The ﬁrst attempts to persistent data
In the beginning, there was only Internet Explorer... (more or less)

Microsoft Internet Explorer: userData 64 KB (XML-based - without
any explicit permission)
2002 - Adobe Flash 6: the ﬂash cookies 100 KB
2006 - From Flash to JS: dojox.storage
2007 - Google Gears: browser plugin with an API to embed a SQLite
DB


HTML5

March 26, 2013

55 / 100

Web Applications


Web Storage (aka DOM Storage)
A mechanism for client-side persistent data storage

Session Storage
It is intended for short-lived data and shared only with pages from the
same domain opened in the same window/tab and does not persist after
the window/tab is closed. Every time a user opens a page in a new
window/tab, the browser creates a new session storage database.
Local Storage
This mechanism allows storing data for more than a single session.
Storage area is persistent and not limited to the lifetime of the
window/tab.
These ones are exposed through the sessionStorage and localStorage
global objects (attribute of the window object), respectively.

HTML5

March 26, 2013

56 / 100

Web Applications


Session Storage

Manipulating the Session Storage with client-side Javascript:
// Set and Get an attribute
sessionStorage.setItem(key, arbitrary value);
var item = sessionStorage.getItem(key);
// Removing and clearing data from the Session Storage
var item = sessionStorage.removeItem(key);
// Clear all items from the list
sessionStorage.clear();
// Find out of the number of key/value pairs in the storage
var no_of_items = sessionStorage.length;


HTML5

March 26, 2013

57 / 100

Web Applications


Web Storage facts
Local Storage etc.

The sessionStorage methods can be also applied to localStorage
An application can store up to 5 MB of data
All modern browsers support Web Storage
There is also jQuery.data() for sessionStorage based on DOM
elements
See also this webpage (diveintojavascript.com)
Further reading: Local Storage for Web Applications


HTML5

March 26, 2013

58 / 100

Web Applications


Geolocation
Detecting the user position during web navigation

Before HTML5, geolocation was already possible through the analysis of
data from:
IP address
Wireless network connection (LAN)
Mobile phone tracking through triangulation of hello messages from
Base Transceiver Stations
Tracking latitude and longitude (WGS84) via Global Positioning
System


HTML5

March 26, 2013

59 / 100

Web Applications


HTML5 Geolocation API

The geolocation API lets you share your location with
trusted web sites
Latitude and longitude are available to JavaScript on the page
"User Agents must not send location information to Web sites
without the express permission of the user"


HTML5

March 26, 2013

60 / 100

Web Applications


How to use Geolocation API

1

First of all check the browser support

2

Include the client-side Javascript request

3

Wait for user permission

4

If positive then do something with the location (maps, graphs, near
services, etc.)

function get_location() {
navigator.geolocation.getCurrentPosition(show_map);
}
/* Callback @position: coords and timestamps attributes */
function show_map(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// let’s show a map or do something interesting!
}

HTML5

March 26, 2013

61 / 100

Web Applications


The Geolocation interface

interface Geolocation {
void getCurrentPosition(PositionCallback successCallback,
optional PositionErrorCallback errorCallback,
optional PositionOptions options);
long watchPosition(PositionCallback successCallback,
optional PositionErrorCallback errorCallback,
optional PositionOptions options);
void clearWatch(long watchId);
};
callback PositionCallback = void (Position position);
callback PositionErrorCallback = void (PositionError positionError);


HTML5

March 26, 2013

62 / 100

Web Applications


Geolocation interface API
Explaining the interface

You can check if an error has occurred with getCurrentPosition()
You can set PositionOptions attributes for accuracy, timeout, and so
on
You can continously monitor user’s position through
watchPosition()
Reference: http://www.w3.org/TR/geolocation-API


HTML5

March 26, 2013

63 / 100

Web Applications


Geolocation PositionOptions
Property
enableHighAccuracy
timeout
maximumAge


Type
Boolean
long
long

Default
false
(no default)
0

HTML5

Notes
true might be slower
in milliseconds
in milliseconds

March 26, 2013

64 / 100

Web Applications


Offline Web Application

It sounds like a contradiction in terms
The home page of the offline web application points to a list of
resources, called a manifest file
The browser downloads all the resources in the manifest, then stores
them on a local cache, ad TA-DA
When you lose connection it’s your browser that serves the
information insteaf of the network
How it works? There is a flag on the DOM for discovering if you are
online or not

HTML5

March 26, 2013

65 / 100

Web Applications


The Manifest ﬁle declaration

<!DOCTYPE html>
<html manifest="/cache.manifest">
<body>
...
</body>
</html>

The cache manifest ﬁle can be located anywhere on your web server,
but it must be served with the content type
text/cache-manifest
Every page of the web application needs a manifest attribute that
points to the cache manifest for the entire application


HTML5

March 26, 2013

66 / 100

Web Applications


Manifest file

The manifest file is a file (filename.manifest) composed of three main
sections:
The CACHE section describing resources to be cached
The NETWORK section describing resources that can only be accessed
online.
The FALLBACK section contains only one line specifying what is the
resource to be displayed when the user in offline mode tries to access
a resource that has not been cached.
Further reading: http://marakana.com/bookshelf/html5_
tutorial/offline_applications.html.


HTML5

March 26, 2013

67 / 100

Web Applications


Manifest ﬁle example

CACHE MANIFEST
# Version 1.0
CACHE:
/cached.html
/style.css
/script.js
/image.jpg
NETWORK:
*
FALLBACK:
/fallback.html


HTML5

March 26, 2013

68 / 100

Web Applications


Have we missed anything?

And the webpage itself?
In the previous example we can assume that the name of the page is
index.html. But we have not declared it as cacheable...
There already is!
When you navigate to an HTML page with a manifest attribute, the page
itself is assumed to be part of the web application, so you don’t need to
list it in the manifest ﬁle itself.


HTML5

March 26, 2013

69 / 100

Web Applications


Oﬄine Application Event Flow


HTML5

March 26, 2013

70 / 100

Web Applications


window.applicationCache object
You can check the current state of the cache at any time by reading the
status attribute of the applicationCache object:
1

UNCACHED: There is nothing in the cache.

2

IDLE: The cache that is used is the latest one.

3

CHECKING: Currently checking for a new updated version of the
cache.

4

DOWNLOADING: Currently downloading the new cache.

5

UPDATEREADY: When a new version of the cache is available, has
been downloaded and ready to be used but not yet in use until the
end user refresh the browser or if the
window.applicationCache.swapCache() function is called.

6

OBSOLETE: The cache has been marked as obsolete.


HTML5

March 26, 2013

71 / 100

Web Applications


Try it yourself!

1

Try the HTML5 demos here: http://html5demos.com/

2

Clone the examples at git://github.com/remy/html5demos.git

3

Get HTML5 Boilerplate
Try to design and sketch this web application:

4

Get the geolocation and show in a map
A form to store citizens information
Store the information locally

HTML5

March 26, 2013

72 / 100

Web Applications


Web Forms
Sending data to server from a web page

<form action="form_handler.php" method="get">
<input name="message" autofocus>
<input type="email" name="email" placeholder=
"me@email.com">
<input type="url" name="website" placeholder=
"http://mywebsite.com">
<input name="nickname" placeholder="Insert␣
you␣nickname">
<input type="submit" value="Save">
</form>

Can you guess the diﬀerences with HTML4?


HTML5

March 26, 2013

73 / 100

Web Applications


Web Forms
Other New Features

Numbers as Spinboxes
Numbers as Sliders
Date Pickers
Search Boxes
Color Pickers
Automatic Form Validation!
GTK+3 applications in HTML5


HTML5

March 26, 2013

74 / 100

Web Applications


Microdata
Making order from chaos

Micro... data?
Microdata annotates the DOM with scoped name/value pairs from custom
vocabularies
Ordered information with vocabularies and taxonomies
All properties from a speciﬁc element of DOM are
taken from a certain vocabulary (scope)
A namespace is needed for each vocabulary (unique
identiﬁer)
Add even more semantics to HTML5
Declare your Microdata vocabulary by adding
itemtype attribute

HTML5

March 26, 2013

75 / 100

Web Applications


Microdata: Hot to describe of a Person
An item with the item type http: // data-vocabulary. org/ Person
represents a Person.
Property
Description
name (fn)
Name
nickname
Nickname
photo
An image link
title
Title. For example, Financial Manager
role
Role. For example, Accountant
url
Link to a web page
affiliation (org) Organization.
friend
Another person
contact
Social relationship between with another person
acquaintance
Social relationship with another person
address (adr)
Address (can have subprop)

HTML5

March 26, 2013

76 / 100

Web Applications


Microdata: a Person description example
<section itemscope itemtype="http://data-vocabulary.org/Person">
<img itemprop="photo" src="me.jpg" alt="[Alfredo␣Torre,␣circa␣2013]"
>
<h1>Contact Information</h1>
<dl>
<dt>Name</dt>
<dd itemprop="name">Alfredo Torre</dd>
<dt>Position</dt>
<dd><span itemprop="title">Software developer</span> for
<span itemprop="affiliation">A2PLAB</span></dd>
<dt>Mailing address</dt>
<dd itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">100 Main Street</span><br>
<span itemprop="locality">Anytown</span>,
<span itemprop="region">WX</span>
<span itemprop="postal-code">95199</span><br>
<span itemprop="country-name">Iceland</span>
</dd>

HTML5

March 26, 2013

77 / 100

Web Applications


Microdata: OOP notation
Person
Person.address
Person.address.street-address
Person.address.locality
Person.address.region
Person.address.postal-code
Person.address.country-name


HTML5

March 26, 2013

78 / 100

Web Applications


Show Geolocation information with Microdata
Add Semantics to your information

See slide 7 about Geolocation API.
<span itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"
>
<meta itemprop="latitude" content="37.4149" />
<meta itemprop="longitude" content="-122.078" />
</span>


HTML5

March 26, 2013

79 / 100

Web Applications


Microdata: Some Links

HTML5 microdata speciﬁcation
Google: Rich snippets
Live Microdata
About Microdata (Google)
About Microformats (Google)
About RDFa (Google)


HTML5

March 26, 2013

80 / 100

Web Applications


Microformats vs Microdata
In general, microformats use the class attribute in HTML tags (often
<span> or <div>) to assign brief and descriptive names to entities and
their properties.
<div class="vcard">
<img class="photo" src="www.example.com/bobsmith.jpg" />
<strong class="fn">Bob Smith</strong>
<span class="title">Senior editor</span> at <span class="org">ACME
Reviews</span>
<span class="adr">
<span class="street-address">200 Main St</span>
<span class="locality">Desertville</span>, <span class="region">AZ<
/span>
<span class="postal-code">12345</span>
</span>
</div>


HTML5

March 26, 2013

81 / 100

Part II
Use Cases and Resources


HTML5

March 26, 2013

82 / 100

Use cases

Jobs

Skillset required as Fron-End developer
A Real Example: Game Client Developer

Design and develop enterprise-grade HTML5 game clients
Assist with the conceptualization and design of games
Rapidly prototype proof-of-concept game ideas and interfaces for
usability evaluation prior to full implementation
Provide feedback on business requirements, particularly as they relate
to browser capabilities
Apply an iterative agile methodology to development to ensure
regular milestone deliverables and feedback to both technical and
business stakeholders
Create well-documented common game library components that can
be reused for future game designs
Ensure that best practices are applied to both design and
implementation

HTML5

March 26, 2013

83 / 100

Use cases

Jobs

Experience required as Fron-End developer
A Real Example: Game Client Developer

JavaScript and HTML5
Familiar with cutting-edge HTML5 speciﬁcations with particular
emphasis on 3D transforms, transitions, and animations
Experienced with cross-browser debugging and speciﬁc nuances
Experience with the SCRUM methodology
Read the entire job ad


HTML5

March 26, 2013

84 / 100

Use cases

Examples

Flash vs HTML5 browser game
http://flashvhtml.com/

Animation, Parallax, Responsive design, Scroll

HTML5

March 26, 2013

85 / 100

Use cases

Examples

Personal webpage
http://www.vanderson.com.br/

Figure: Swipe navigation, Full Screen, Flexible


HTML5

March 26, 2013

86 / 100

Use cases

Examples

Museum with 3D items gallery
http://www.museums-sheffield.org.uk/

Figure: Home Page with a piece of code from Firebug

The site uses a host of the new semantic elements provided by HTML5
and has a WebGL interface (with Flash fallback) for 3D exploration of
some of the collection items.

HTML5

March 26, 2013

87 / 100

Use cases

Examples

A website like an infographic
http://jamesanderson613.com/

Scalable Vector Graphics
Built with HTML5 with inline SVG being used for the graphic visualisation
and animation of the facts and ﬁgures, thus making the site perform like a
large interactive infographic.


HTML5

March 26, 2013

88 / 100

Use cases

Examples

Public Utility Mashup - What you could do
http://fixmystreet.com/

An inspiring application
FixMyStreet is an HTML5, responsive, Web 2.0 mash up of public data
and user-generated content that is an information system.


HTML5

March 26, 2013

89 / 100

Use cases

Examples

Online Image Editor Tool
http://www.picozu.com/editor

Like a desktop application
Picozu Editor is a drawing and photo re-touching application built with
JavaScript, HTML5 and CSS3. The app uses interesting aspects of
HTML5, notably canvas for applying image ﬁlters and the Drag and Drop
API, which allows users to add images from their desktop.

HTML5

March 26, 2013

90 / 100

Use cases

Examples

iPhone Oﬄine Application - How to not pay Apple Market
http://currency.io

Local Storage, Client-Side programming
An oﬄine-capable, html5 currency converter app for the iPhone. All the
code runs only on your phone.


HTML5

March 26, 2013

91 / 100

Use cases

Examples

How to show a place and its history
http://www.unionstationdenver.com/

Navigating Space and Time
First of all navigate the map of this place and its neighborhood, then look
at the History page to scroll through the infographics and matching
content.

HTML5

March 26, 2013

92 / 100

Use cases

Examples

Meanwhile in Catania...
http://www.albapiana.com

Figure: Multi-platform, Full-screen, Design and user interaction, Navigation


HTML5

March 26, 2013

93 / 100

Use cases

Frameworks

TideSDK
Write HTML5, CSS3, Javascript application then run it on desktop

http://www.tidesdk.org
Develop your desktop apps quickly using HTML5, CSS3 and
JavaScript
Extend the functionality of your app with
Python
PHP
Ruby

TideSDK Examples


HTML5

March 26, 2013

94 / 100

Use cases

Frameworks

PhoneGap
Open source solution for building cross-platform mobile apps with standards-based Web
technologies

http://phonegap.com
A PhoneGap application may only use HTML, CSS, and JavaScript
Getting Started with PhoneGap


HTML5

March 26, 2013

95 / 100

Use cases

Frameworks

Pantheon
A rapid web application development playground powered by Drupal

Eng. Giuseppe Mastroeni suggests Pantheon
This is a complete Drupal application playground. It is FREE and
it is simple. Embrace the power of the "best" CMS in 5 minutes!

https://www.getpantheon.com

HTML5

March 26, 2013

96 / 100

References

Useful stuﬀ

Make a sketch of your design

1
2

maqetta.org

4

Lumzy mockup builder

5

Balsamiq mockup

6

HTML5

HTML 5 Mockup and
Wireframing

3


wireframe.cc

mockingbird

March 26, 2013

97 / 100

References

Useful stuﬀ

Links

1

Web trends 2013

2

Parallax scrolling technique

3

Oﬄine (GDD)

4

HTML5 bleeding edge (GDD)

5

Creating modern Web Apps for Chrome (GDD)

6

http://www.shinydemos.com/ (Opera)

7

http://www.brandongenerator.com (Microsoft)


HTML5

March 26, 2013

98 / 100

References

Go deep to the heart

References

1

HTML5 - W3C Candidate Recommendation 17 December 2012

2

Mark Pilgrim, Dive Into HTML5

3

Pro HTML5 and CSS3 Design Patterns (Apress - Bowers, Synodinos,
Sumner)


HTML5

March 26, 2013

99 / 100

References

Go deep to the heart

Contact informations

1

Linkedin: http://www.linkedin.com/in/alfredotorre/en

2

Twitter: @skydiamond

3

Blog: http://blog.skydiamond.org


HTML5

March 26, 2013

100 / 100

HTML5: features with examples

Recommended

More Related Content

What's hot (20)

Viewers also liked (11)

Similar to HTML5: features with examples (20)

Recently uploaded (20)

HTML5: features with examples