The document provides an overview of HTML5, highlighting its historical development from earlier HTML versions, the involvement of the W3C, and its significance in creating modern web applications. It discusses features such as new semantic elements, simplified doctype, enhanced multimedia support, and the importance of backward compatibility and user-centric design. The presentation aims to educate on how to effectively write HTML5 documents and utilize new elements for better web content structure.

1. HTML5
Human Computer Interaction 2013
Alfredo Torre
DIEEI
March 26, 2013
University of Catania
Electric, Electronics and Computer Engineering Department (DIEEI)

2. 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
sufficient to comprehend all the
features of HTML5.
HTML5
March 26, 2013
2 / 100

3. Part I
HTML 5
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
3 / 100

4. 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
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
4 / 100

5. Introduction
HTML 5: a story so far
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.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
5 / 100

6. Introduction
HTML 5: a story so far
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
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
6 / 100

7. Introduction
HTML 5: a story so far
HTML5 and multi-platform
One ring to rule them all
HTML5 is an attempt to define 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.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
7 / 100

8. 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 specification values users over
authors, over implementers (browsers), over specifiers (W3C), and
over theoretical purity.
HTML5 must be practical
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
8 / 100

9. Introduction
Objectives
A new vision
Interoperability (Simple is better )
A new, simplified DOCTYPE
Native browser ability instead of complex JavaScript code
A new, simplified character set declaration
Universal access
Web Accessibility Initiative (WAI)
Accessible Rich Internet Applications (ARIA)
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
9 / 100

10. 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
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
10 / 100

11. 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>
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
11 / 100

12. 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>
<!-- this is a comment -->
</body>
</html>
It looks like the same as HTML4. But there is more...
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
12 / 100

13. Markup language
Under the hood
Some new features
New content-specific 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
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
13 / 100

14. 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>
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
14 / 100

15. 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.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
15 / 100

16. Markup language
Under the hood
Attributes
<!-- empty attributes -->
<input name=address disabled>
<input name=address disabled="">
<!-- attributes with value -->
<input name=address maxlength=200>
<input name=address maxlength=’200’>
<input name="address" maxlength="200">
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
16 / 100

17. 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 overflow: Meta charset discussion
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
17 / 100

18. 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.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
18 / 100

19. Markup language
Under the hood
HTML5 is not XML
It is not case sensitive
<div>, <DIV>, <dIV> <!-- all valid -->
You have not to close every tag
<BR>, <br>, <br /> <!-- all valid -->
<img>, <ImG>, <img /> <!-- all valid -->
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
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
19 / 100

20. 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)
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
20 / 100

21. Markup language
The Document Model
The DOM
A W3C standard
Describes how the document object can be
traversed and modified
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)
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
21 / 100

22. Markup language
The Document Model
DOM schematic
Figure: The Document Object Model
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
22 / 100

23. 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
Alfredo Torre (DIEEI)
See slide 2
HTML5
March 26, 2013
23 / 100

24. 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.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
24 / 100

25. 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/’);
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
25 / 100

26. Markup language
How to write HTML5 document
<HEAD>
The head of the document
The first 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>
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
26 / 100

27. Markup language
How to write HTML5 document
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
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
27 / 100

28. Markup language
How to write HTML5 document
Link relations
The rel attribute
rel="stylesheet" links to a CSS stylesheet
rel="alternate" helps crawlers to find 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)
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
28 / 100

29. Markup language
How to write HTML5 document
Link relations
The rel attribute
rel="canonical" defines 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
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
29 / 100

30. Markup language
How to write HTML5 document
New Semantic Elements
HTML5 introduces new elements that express the semantics associated to
specified 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
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
30 / 100

31. Markup language
How to write HTML5 document
HTML5 page structure
Figure: Schematic of HTML5 webpage structure
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
31 / 100

32. Markup language
How to write HTML5 document
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.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
32 / 100

33. Markup language
How to write HTML5 document
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 undefined 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.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
33 / 100

34. Markup language
How to write HTML5 document
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.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
34 / 100

35. Markup language
How to write HTML5 document
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.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
35 / 100

36. Markup language
How to write HTML5 document
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 offset.
<time datetime="2013-03-14">14 marzo 2013</time>
<!-- nested in articles and pages - the publication date: -->
<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.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
36 / 100

37. Markup language
How to write HTML5 document
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.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
37 / 100

38. Markup language
How to write HTML5 document
Editable contents on a webpage
Towards a UI unification
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.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
38 / 100

39. 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...
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
39 / 100

40. 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.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
40 / 100

41. Markup language
Media
Video formats browser support
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
41 / 100

42. 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.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
42 / 100

43. 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.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
43 / 100

44. Markup language
Media
Video tag
The code
<video src="hci_video.webm"
<!-- with controls -->
<video src="hci_video.webm"
<!-- autoplay -->
<video src="hci_video.webm"
<!-- preloading video - not
<video src="hci_video.webm"
video>
width="640" height="480"></video>
width="640" height="480" controls></video>
width="640" height="480" autoplay></video>
autoplay -->
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>
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
44 / 100

45. 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
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
45 / 100

46. Markup language
Media
Canvas tag
How to draw in 2D
HTML5 defines the canvas element as "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
in your page where you can use JavaScript to
draw anything you want.
<canvas width="640" height="480"></canvas>
Further reading: Mozilla Canvas Tutorial
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
46 / 100

47. 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.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
47 / 100

48. Web Applications
Client-Server Architecture
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
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
48 / 100

49. Web Applications
Client-Server Architecture
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).
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
49 / 100

50. Web Applications
Client-Server Architecture
Multi-tier Architecture
JEE: what you will see in the future...
Figure: J2EE multi-tier architecture
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
50 / 100

51. Web Applications
Client-Server Architecture
Web Technologies
How to distinguish server from client
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
51 / 100

52. Web Applications
Client-Server Architecture
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.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
52 / 100

53. Web Applications
Towards desktop and web integration
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)
Alfredo Torre (DIEEI)
Cookie
Nothing else? :/
HTML5
March 26, 2013
53 / 100

54. Web Applications
Towards desktop and web integration
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.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
54 / 100

55. Web Applications
Towards desktop and web integration
The first 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 flash cookies 100 KB
2006 - From Flash to JS: dojox.storage
2007 - Google Gears: browser plugin with an API to embed a SQLite
DB
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
55 / 100

56. Web Applications
Towards desktop and web integration
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.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
56 / 100

57. Web Applications
Towards desktop and web integration
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;
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
57 / 100

58. Web Applications
Towards desktop and web integration
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
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
58 / 100

59. Web Applications
Towards desktop and web integration
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
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
59 / 100

60. Web Applications
Towards desktop and web integration
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"
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
60 / 100

61. Web Applications
Towards desktop and web integration
HTML5 Geolocation API
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!
}
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
61 / 100

62. Web Applications
Towards desktop and web integration
HTML5 Geolocation API
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);
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
62 / 100

63. Web Applications
Towards desktop and web integration
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
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
63 / 100

64. Web Applications
Towards desktop and web integration
Geolocation PositionOptions
Property
enableHighAccuracy
timeout
maximumAge
Alfredo Torre (DIEEI)
Type
Boolean
long
long
Default
false
(no default)
0
HTML5
Notes
true might be slower
in milliseconds
in milliseconds
March 26, 2013
64 / 100

65. Web Applications
Towards desktop and web integration
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
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
65 / 100

66. Web Applications
Towards desktop and web integration
Offline Web Application
The Manifest file declaration
<!DOCTYPE html>
<html manifest="/cache.manifest">
<body>
...
</body>
</html>
The cache manifest file 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
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
66 / 100

67. Web Applications
Towards desktop and web integration
Offline Web Application
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.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
67 / 100

68. Web Applications
Towards desktop and web integration
Offline Web Application
Manifest file example
CACHE MANIFEST
# Version 1.0
CACHE:
/cached.html
/style.css
/script.js
/image.jpg
NETWORK:
*
FALLBACK:
/fallback.html
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
68 / 100

69. Web Applications
Towards desktop and web integration
Offline Web Application
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 file itself.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
69 / 100

70. Web Applications
Towards desktop and web integration
Offline Application Event Flow
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
70 / 100

71. Web Applications
Towards desktop and web integration
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.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
71 / 100

72. Web Applications
Towards desktop and web integration
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
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
72 / 100

73. Web Applications
Towards desktop and web integration
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 differences with HTML4?
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
73 / 100

74. Web Applications
Towards desktop and web integration
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
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
74 / 100

75. Web Applications
Semantic description of web content
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 specific element of DOM are
taken from a certain vocabulary (scope)
A namespace is needed for each vocabulary (unique
identifier)
Add even more semantics to HTML5
Declare your Microdata vocabulary by adding
itemtype attribute
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
75 / 100

76. Web Applications
Semantic description of web content
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)
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
76 / 100

77. Web Applications
Semantic description of web content
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>
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
77 / 100

78. Web Applications
Semantic description of web content
Microdata: OOP notation
Person
Person.address
Person.address.street-address
Person.address.locality
Person.address.region
Person.address.postal-code
Person.address.country-name
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
78 / 100

79. Web Applications
Semantic description of web content
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>
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
79 / 100

80. Web Applications
Semantic description of web content
Microdata: Some Links
HTML5 microdata specification
Google: Rich snippets
Live Microdata
About Microdata (Google)
About Microformats (Google)
About RDFa (Google)
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
80 / 100

81. Web Applications
Semantic description of web content
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>
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
81 / 100

82. Part II
Use Cases and Resources
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
82 / 100

83. 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
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
83 / 100

84. Use cases
Jobs
Experience required as Fron-End developer
A Real Example: Game Client Developer
JavaScript and HTML5
Familiar with cutting-edge HTML5 specifications with particular
emphasis on 3D transforms, transitions, and animations
Experienced with cross-browser debugging and specific nuances
Experience with the SCRUM methodology
Read the entire job ad
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
84 / 100

85. Use cases
Examples
Flash vs HTML5 browser game
http://flashvhtml.com/
Animation, Parallax, Responsive design, Scroll
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
85 / 100

86. Use cases
Examples
Personal webpage
http://www.vanderson.com.br/
Figure: Swipe navigation, Full Screen, Flexible
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
86 / 100

87. 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.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
87 / 100

88. 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 figures, thus making the site perform like a
large interactive infographic.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
88 / 100

89. 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.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
89 / 100

90. 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 filters and the Drag and Drop
API, which allows users to add images from their desktop.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
90 / 100

91. Use cases
Examples
iPhone Offline Application - How to not pay Apple Market
http://currency.io
Local Storage, Client-Side programming
An offline-capable, html5 currency converter app for the iPhone. All the
code runs only on your phone.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
91 / 100

92. 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.
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
92 / 100

93. Use cases
Examples
Meanwhile in Catania...
http://www.albapiana.com
Figure: Multi-platform, Full-screen, Design and user interaction, Navigation
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
93 / 100

94. 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
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
94 / 100

95. 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
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
95 / 100

96. 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
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
96 / 100

97. References
Useful stuff
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
Alfredo Torre (DIEEI)
wireframe.cc
mockingbird
March 26, 2013
97 / 100

98. References
Useful stuff
Links
1
Web trends 2013
2
Parallax scrolling technique
3
Offline (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)
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
98 / 100

99. 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)
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
99 / 100

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
Alfredo Torre (DIEEI)
HTML5
March 26, 2013
100 / 100