HTML5 - An introduction

HTML 5
Eleonora Ciceri
ciceri@elet.polimi.it

Web Applications
An introduction

Web Application architecture
Client
Executes the requests;
receive the responses
Web Server
Delivers Web content that
can be accessed through
the Internet
Application Server
Executes efficiently
procedures (programs,
routines, scripts) for supporting
its applied applications
Database
Organized collection of
data, organized to model
relevant aspects of reality

Web Application Standards: HTTP
!  HTTP stands for HyperText Transfer Protocol
!  “Application-level networking protocol for the exchange of
multimedia documents”
!  HTTP is a request-response protocol in the client-server
computing model
!  HTTP defines the format of
!  Resources identification (URL)
!  Requests
!  Responses

Web Application Standards: HTML (1)
!  HTML stands for HyperText Markup Language
!  “A markup language used to describe the content and the
structure of an hypertext”
!  First publicly available document: 1991, Tim Berners Lee
!  Key components
!  Elements and attributes
!  Data types (character-based)
!  Character references and entity references

Web Application Standards: HTML (2)
<html>!
<head>!
!<title>The document title</title>!
</head>!
<body>!
!<h1>Main heading</h1>!
!<p>A paragraph</p>!
!<ul>!
<li>A list item.</li>!
<li>Another list item.</li>!
!</ul>!
!<a href="http://www.w3schools.com/">A link</a>!
</body>!
</html>

Web Browser
!  A web browser is an application able to:
!  Access Internet (using the HTTP protocol)
!  Request resources (identified by an URL) to Web servers
!  Interpret resources and send them back to the user
!  Receive input from the user, and send it to the server

Motivations
!  HTML in common use is a mixture of features introduced
by:
!  Various specifications
!  Software products (e.g., web browsers)
!  Common practice
!  Syntax errors in existing web documents

What is HTML5? (1)
!  HTML5 is a markup language for structuring and
presenting content for the Web
!  Fifth revision of the HTML standard
!  Aim: improve the language with support for the latest
multimedia, while keeping it:
!  Easily readable by humans
!  Consistently understood by computers and devices
!  Objectives
!  Introduce markup and APIs for complex web applications
!  Create cross-platform mobile applications

What is HTML5? (2)
!  HTML5 is more a movement than a unique, identifiable
technology
!  Standardization effort
!  New features
Semantics
New tags
Power
Browser as a programming
platform (new JavaScript APIs)

Advantages of HTML5
!  HTML5 tags have implicit semantics
!  Search engines know where to look
!  Advantages
!  Increased expressiveness
!  Machine readability
!  Increased cross-browser compatibility
!  More advanced features delegated to the browser
!  More power to the client
!  More engaging user experience

New semantics / Structural elements
DocType
Root element
Character encoding
Link relations
New Semantic
Elements in HTML5
<!DOCTYPE html>!
<html lang="en">!
<head>!
<meta charset="utf-8"/>!
<title>My HTML 5 Page</title>!
<link rel="stylesheet" type="text/css" href="style.css"/>!
<link rel="alternate" type="..." />!
</head> !
<body>!
<header>...</header> !
<article>...</article>!
...!
</body>!
</html>

DocType
!  There are several doctypes (>70 pages!) that instruct
browsers about the right rendering mode that has to be
activated
!  Quirks mode: technique used by some web browsers for the
sake of maintaining backward compatibility with web pages
designed for older browsers
!  Standards mode: technique used by some web browsers for
which they are strictly compliant with W3C and standards
HTML4 HTML5
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML
1.0 String//EN” http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd >!
<!DOCTYPE html>!

Root element
!  The root of an HTML page is always
<html>!
HTML4 HTML5
<html xmlns:”http://www.w3.org/1999/
xhtml” lang=“en” xml:lang=“en”>!
<html lang=“en”>!
•  No need for namespaces (all the elements
are always in the HTML5 namespace)
•  The lang attribute suffices to define the
language of the HTML5 page

Character encoding
!  Every piece of text in a computer is stored using a given
character encoding
!  The character encoding provides a mapping between what
the computer manages and what you see
HTML5
<meta charset=“utf-8”/>!

Link relations (1)
!  Link relations explain why a page points to another
resource
!  Typically specified by browsers and for browsers, blogging
platforms, search engines etc.
!  Types of link
!  Link to a file containing CSS rules for the page
!  <link rel=“stylesheet” href=“file.css” type=“text/css”/>!
!  Link to the same content available in other formats
!  <link rel=“alternate” href=“/feed/” type=“application/atom
+xml” title=“My Weblog feed”/>!

Link relations (2)
Link Meaning
rel = “author”! Link information about the author of the page; it
can be a mailto: address
rel = “icon”! Link to associate a small icon with the page
rel = “license”! License term for the page’s content
rel = “nofollow”! The link is not endorsed by the original author or
publisher of the page
rel = “pingback”! Link to specify the address of a pingback server;
this is useful for authors to understand who is
linking to (or referring) their articles
rel = “search”! The referenced document provides an
interface for searching the document and its
related resources

New semantic elements in HTML5 (1)
!  Goal: enrich HTML with semantics
!  Advantages
!  Ease automatic analysis
!  Factorize best practices into a standard
HTML4 HTML5
<div id=“header”/>!
<div id=“footer”/>!
<div id=“navigation”/>!
One element for each semantic structure in the
page

New semantic elements in HTML5 (2)

Headers
!  A header is a semantic element that defines
!  The header of a content: <header>
!  A wrapper for two or more related heading elements:
<hgroup>
<header>!
<hgroup>!
<h1><a href=“#”>home</a></h1>!
<h2><a href=“#”>blog</a></h1>!
</hgroup>!
</header>!

Nav
!  The nav is a section of a page that links to other pages or
to parts within the page
!  Important for people with disabilities (accessible websites)
<nav>!
!<ul>!
<li><a href=“#”>home</li>!
<li><a href=“#”>blog</li>!
<li><a href=“#”>gallery</li>!
</ul>!
</nav>!

Article
!  The article is a self-contained composition in a
document, page or application, independently
distributable or reusable
<article>!
!<header>!
<p class=“post-date”>October,22</p>!
<h1><href=“#” rel=“bookmark” title=“link
to the post”>Travel day</a></h1>!
</header>!
Blah blah blah!
</article>!

Section
!  The section element represents a generic document or
the application section
!  Examples A blob of content that you could store as an
individual record in the database, a thematic grouping of
content (chapters / sections in a page)
!  Typically used to group similar information

Aside
!  The aside tag is used for the content that is tangentially
related to the page content and that is surrounding it
!  Examples related reading links, glossaries, etc
!  It can be used also to hold secondary content (when not
nested within an article element)
<aside>!
!<h1>Glossary</h1>!
!...!
</aside>!

Footer
!  The footer element represents a footer for its nearest ancestor
sectioning content or sectioning root element
!  It contains information about the section
!  When footer elements contains sections, they represent appendixes,
license agreements etc.
!  It may also contain navigation elements
<footer>!
!<nav>!
<h1>Navigation>!
<ul>...</ul>!
</nav>!
<section>!
...!
</section>!
</footer>!

Schematic structure of a blog post
<article>
Article text

Transcription in HTML5
<article>!
<header>!
<h2>Memoirs of a Parisian lion-tamer</h2>!
<time datetime=2010-01-24>January 24th, 2010</
time>!
</header>!
<p>Claude Bottom’s poignant autobiography is this
summer’s must-read.</p>!
<footer>!
Posted in <a href=“/?cat=3”>Books category</a>.!
<a href=“/?p=34#respond”>No comments</a>!
</footer>!
</article>!

The <time> element
!  The time element is used for unambiguously encoding dates
and times for machines, while still displaying them in a
human-readable way
!  This element represents either a time on a 24-hour clock, or a
precise date in the Gregorian calendar, optionally with a
time and a time-zone offset
!  Parts
!  A machine-readable timestamp
!  Human-readable text content
!  An optional pubdate attribute
!  If the time element is an article: timestamp of the article
!  Otherwise: timestamp of the entire document

The <address> element
!  The address element is for contact details of the author
!  This is not a generic element for postal addresses
!  You can have multiple addresses in a document, one inside
each <article>!
!  Each blog post has its address
!  Each comment to that post has its address
Code
<address>!
<img src="QRcode.png">!
<a href="#">Eleonora Ciceri</a>!
</address>

The <figure> element
!  The figure element wraps:
!  An image (or a video, or block of code, or a supporting
quotation)
!  Its caption
Code
<figure>!
<img src="Welcome.jpg" width="100px">!
<figcaption>Welcome</figcaption>!
</figure>

The <details> element
!  The details element introduces native support for a
common behavior: an expanding/collapsing area
!  It removes the need for custom JavaScript
Code
<details>!
<summary>Photograph details</summary>!
<p>Photograph taken on!
<time datetime=2012-12-25>Xmas day 12</time>!
</p>!
<p><small>Copyright Eleonora Ciceri, !
<address>ciceri@elet.polimi.it</address>!
</small></p>!
</details>

The <mark> element
!  The mark element allows you to do the markup
equivalent of using a highlighter pen to bring out some
words on a printed page
!  This is not the same as emphasis (for this, you use <em>)
Code
This is a <mark>marked</mark> text.

The <progress> element
!  The progress element is used to represent a progress
meter, to indicate the completion of a task
!  The meter element works in the same way
Code
<progress value="5" max="20"></progress>

Redefined element (1)
!  <cite>: user for mark up a work or the name of a
speaker
!  <dl>: an association list consisting of zero or more name-
value groups; name-value groups may be terms and
definitions, metadata topics and values, or any other
!  <em>: it marks up emphasis of the kind that subtly
changes the meaning of a sentence
!  <i>: it represents a span of text in an alternate voice or
mood

Redefined element (2)
!  <small>: it represents “small print” rather than “a generic
text with smaller font”; this characterizes disclaimers,
legal restrictions, copyrights
!  <strong>: it represents strong importance for its contents,
but, unlike <em>, it does not change the meaning of the
sentence

Removed elements
!  Completely obsolete elements:
!  <applet>!
!  <big>!
!  <blink>!
!  <center>!
!  <font>!
!  <marquee>!

New input types (1)
!  The new form fields were the genesis of the spec that
became HTML5
!  New values to the type attribute of the input element are
added
!  New browsers understand them and render them in a proper
way
!  Old browsers degrade these new types in the default type:
!  <input type=“text”>!
!  New types: email, url, time, datetime (i.e., date + time),
search, tel (i.e., telephone number)

New input types (2)
!  Other fancy types
range
color
date

!  The list attribute creates a list in the input box
!  Note: inserting a <select> tag is required for guaranteeing
compatibility with older browsers; HTML5 does not require it
New attributes: list!
Code
<datalist id="sources">!
<select name="source” ! !
!<option value="Value1">Value1</option>!
!<option value="Value2">Value2</option>!
</select>!
If other, specify:!
</datalist>!
<input id="source" name="source" list="sources">

!  This attribute provides a declarative way to focus a form
control when a page is loaded
!  Previously written in JavaScript by web developers (at hand)
!  There should be only one autofocused input box in a page
New attributes: autofocus!
Code
<input id=”input" name=”default" autofocus>

!  This attribute places text in an input field as a hint for the
user:
!  Removing the text when the user focuses on the field
!  Restoring it when focus leaves the field
!  Previously written in JavaScript by web developers (at
hand)
New attributes: placeholder!
Code
<input name="q" placeholder="Search Bookmarks"/>

Other attributes (1)
!  required: on textarea and most input fields; it reports
an error if the user does not compile it
!  multiple: user when the type is equal to file; it allows
to user to upload multiple files
!  pattern: allows you to specify a custom regular
expression that the input must match
!  autocomplete: controls the autocomplete behavior that
some browsers apply to the input text

Other attributes (2)
!  min and max: applied to a number field, it gives the
range of values that can be entered in an input
!  step: controls the level of granularity of input; e.g., if the
step is 5, the spinner increments in steps of 5
spinner

Usefulness of new types (1)
!  HTML5 does not mandate any specific UI for new input
types, but for instance:
!  Advantages: automatic input validation

Usefulness of new types (2)
!  The automatic input validation was usually performed
!  Server-side
!  Client-side with JavaScript
!  Disadvantages
!  Cost of additional scripts
!  JavaScript may be disabled in the user browser
!  HTML5 offloads the functionality for standard types to the
browser
!  Advantage: no additional scripts

The <canvas> element
!  The canvas is a resolution-dependent bitmap canvas
that can be used for rendering graphs, game graphics or
other visual images on the fly
!  Empty rectangle in a page in which one can use JavaScript
to draw everything
!  It has no content and no border of its own
<canvas id=“myCanvas” width=“300” height=“225”/><canvas>!
!  The canvas can accessed by JavaScript:
var myCanvas = document.getElementById(“myCanvas”);!

Draw shapes
!  How to draw a shape
!  Get a reference to the element
!  Get a reference to the canvas drawing context (2D or 3D)
!  Draw
Code
var myCanvas = document.getElementById(“myCanvas”);!
var myCanvasContext = myCanvas.getContext(“2d”);!
myCanvasContext.<DRAWING_PRIMITIVE>;

Canvas coordinates
!  The canvas is a two-dimensional grid, with origin (0,0) in
the upper-left corner

Drawing script (1)
function drawOnCanvas() {!
!var c = document.getElementById("myCanvas");!
!var context = c.getContext("2d");!
! ! ! !!
!drawGrid(context);!
!drawArrows(context);!
!drawLabels(context);!
};
Retrieve the canvas and its
2D context

Drawing script (2)
function drawGrid(context) {!
try {!
for (var x=0.5; x<500;x+=10) {!
context.moveTo(x, 0);!
context.lineTo(x, 375);!
}!
for (var y=0.5; y < 375; y+=10) {!
context.moveTo(0, y);!
context.lineTo(500, y);!
}!
context.strokeStyle = "#eee";!
context.stroke();!
}!
catch (err) {}!
}
Draw the required lines on the canvas
Starting point
Ending point

Drawing script (3)
function drawLabels(context) {!
try {!
context.font = "bold 12px sans-serif";!
context.fillText("x", 248, 43);!
context.fillText("y", 58, 165);!
}!
catch (err) {}!
! ! ! !!
try {!
context.textBaseline = "top";!
context.fillText("(0,0)",8,5);!
}!
catch (err) {}!
! ! ! !!
try {!
context.textAlign = "right";!
context.textBaseline = "bottom";!
context.fillText("(500,375)", 492, 370);!
}!
catch (err) {}!
}
Write a text on the canvas
at the specified position
Vertical alignment (wrt the
position specified in fillText)
Horizontal alignment (wrt the
position specified in fillText)

Drawing script (4)
function drawArrows(context) {!
try {!
context.beginPath();!
context.moveTo(0, 40); context.lineTo(240,40);!
context.moveTo(260, 40); context.lineTo(500, 40);!
context.lineTo(495, 45);!
! ! ! ! !!
context.moveTo(60, 0); context.lineTo(60,150);!
context.lineTo(65, 365);!
! ! ! ! !!
context.strokeStyle = "#000";!
context.stroke();!
}!
catch (err) {}!
}
Draw an arrow
Start drawing a line

Other features
!  A gradient is a smooth transition between two or more
colors
!  createLinearGradient paints along a line
!  createRadialGradient paints along a cone between two
circles
!  The canvas drawing context allows the drawing of an
image in the canvas
!  drawImage takes an image, clips it to the specified
rectangle, scales it to the specified dimensions and draws it
at specified coordinates

The <video> element
<video width=“320” height=“240” controls autoplay preload poster=“star.png”>
<source src=“v1.mp4” type=‘video/mp4; codecs=“mp4a.40.2”’>
</video>
Video size
Show video control
commands Play the video as
the page loads
Start downloading
as the page loads
Image to be shown
while video loading
Define video source
Codec/Container IE FF Safari Chrome Opera iPhone Android
Theora/Vorbis/
Ogg
3.5+ (extra
plugin)
5.0 10.5+
H264+AAC+MP4 3.0+ 5.0
(to drop)
3.0+ 2.0+
WebM (extra
plugin)
6.0 10.6+

Video and HTML/JavaScript
!  The video is not treated as an embedded foreign object
!  Focus is on the player
!  Native JavaScript interaction
!  Interaction with other HTML5 primitives
!  Interactions with JavaScript
!  Event binding: video.addEventListener!
!  Control through API: onclick play, onclick load, onclick
pause, onclick

Video and CSS
!  The <video> tag can be styled using traditional CSS
!  Border
!  Opacity
!  …
!  Other properties are from the newer CSS3: reflections,
masks, gradients, transforms, transitions, animations

Video and canvas
!  <video> and <canvas> were designed to work together
!  <canvas> has a drawImage method which lets you
import images from three different sources
!  Image elements
!  Another canvas element
!  A video element: every time the method is invoked, the
current frame in the video is imported and rendered into the
canvas
!  A nice example
!  http://html5doctor.com/video-canvas-magic/!

What is an API?
!  An Application Programming Interface is a collection of
programming instructions and standards for accessing a
software application
!  The HTML5 movement wants to standardize several
functionalities that have been introduced over the years
!  Interaction with local device
!  Multi-threading
!  Storage
!  Media interaction

Geo-location API
!  Geo-location: finding the geographical location of a
user. This is done by analyzing:
!  IP address
!  GPS coordinates
!  Wi-Fi hotspot coordinates
!  Why geo-location?
!  Customized services
!  Social networks
!  Advertising

Geo-location API: Features (1)
!  Geo-location option has two methods
!  getCurrentPosition: returns the current position of the
user
!  watchPosition: called every time the user’s location
changes
!  There is no need to actively poll the devices’ position
!  The device will determine the optimal polling interval and
it will call the callback function whenever it determines
that the user’s position has changed

!  The position object provides the position of the device,
which is defined by latitude and longitude
!  The timestamp is retrieved too
!  Altitude, accuracy and altitude accuracy may be retrieved
too, although they are optional
!  The heading and the speed may be retrieved, since they
can be computed by the device

!  Quality constraints can be defined for the position
!  enableHighAccuracy specifies if the location has to be
precise, i.e., collected by the GPS
!  timeout specifies the number of ms the application will wait
in order to get the postion
!  maximumAge allows the device to answer immediately with a
cached position

Geo-location API: Privacy concerns
!  Problem: Privacy concerns
!  User agents must not send location information to Web sites
without the express permission of the user
!  Sharing your location must be optional

HTML5 storage: Previous solutions (1)
!  Desktop applications are able to manage and persist
their state locally
!  Where? Registry, INI files, plist files, XML files, database…
!  The only storage system available for Web clients were
cookies
!  Included in every HTTP session
!  Problems: security, performance
!  Limited to 4Kb of data
!  Possibly unavailable if cookies are disabled

HTML5 storage: Previous solutions (2)
!  Internet explorer
!  User data: 64KB per domain in a XML-based structure
!  Flash
!  Local Shared Objects: 100Kb of data per domain (but it
allows users to increase storage size)
!  Google Gears plugin
!  Local Relations storage based on SQLlite: unlimited data,
SQL statement

HTML5 storage
!  A standard way for Web pages to store key/value pairs
window.localStorage!
!  Data persists page navigation, user sessions and browser
session
!  Limit of 5Mb for each origin
!  No additional space

HTML5 storage: Usage
!  Data are stored as associative arrays based on named
key
!  Keys: strings
!  Data: any data type that is supported by JavaScript (strings,
booleans, integers, floats), but they are stored as strings
!  Retrieving values require parsing to restore their original
type
!  Objects are stored serializing them to JSON

HTML5 storage: Additional events
!  With HTML5 storage one can track changes to the data
storage
!  storage is triggered when something changes
!  The StorageEvent object will contain the following
properties
!  key: string; the named key that was added, removed or
modified
!  oldValue: any; the previous value, now overwritten, or null if a
new item was added
!  url: string; the page which called a method that triggered this
change

Offline Web Applications: Motivations
!  Why do we need an offline Web application?
!  Nomadic usage
!  Network usage
!  Network cost
!  What do we need when offline?
!  HTML pages, CSS, JavaScripts
!  Images / videos
!  Local data

Offline Web Applications: Principles
!  Offline is enabled by
!  Caching resources
!  Switching from cache to “live” resources (and viceversa)
when needed
!  How does it work?
!  A flag in the DOM tells the application whether you are
online or offline
!  A dedicated event fires when the status changes
!  The browser switches between online and offline when the
status is changed

Offline Web Applications in HTML5 (1)
!  HTML4
!  Browsers typically implement an HTTP cache, which caches
HTTP responses based on HTTP methods and metadata
!  For an application to run offline, all needed resources must
be reliably cached
!  HTML5
!  It works in the same way as the traditional browser caching
policy
!  It adds some additional explicit policies

!  The home page of the offline Web application points to
the manifest file for the resources to cache
!  There is only one manifest file
!  All application pages must point to it
!  An HTML5 compliant browser will:
!  Read the manifest file
!  Download the resources
!  Cache them locally
!  Automatically update changes

!  A manifest is divided in
!  Cache: resources which are explicitly downloaded, cached
locally and used when online
!  Fallback: substitution for online resources that will not be
cached
!  Network: an online list of resources that are never cached
and are not available offline
!  If the manifest has no header, all the resources are
implicitly in the cache section

!  If the manifest file is new, a downloading event is fired and
the browser starts downloading resource
!  The browser periodically notifies about the download progress
!  When all the resources are downloaded, the browser sends an
event of type cached!
!  If the manifest file changed from a previous version, a new
downloading event is fired and the browser starts
downloading resource
!  When the download is finished, the browser triggers an
updateready event
!  The new cached resources won’t be used unless the user
refreshes the page

WebSocket: Motivations
!  HTTP is a request-response protocol
!  Problem: many applications need bi-directional
communication
!  Chat
!  Multiplayer online games
!  Realtime updating of social streams
!  Solution: COMET is an hack that provides server push
using standard browser functionality
!  Inefficient

WebSocket (1)
!  “WebSocket is a new proposal to provide full-duplex, bi-
directional client-server interaction over a single TCP
connection”
!  Special socket connections between a Web browser and
the server are established
!  An open connection between the client and the server can
start sending data at any time
!  Messages can be sent to a server so as to receive event-
driven responses without having to poll the server for a reply

WebSocket (2)
!  Goals
!  Enabling near real-time push communications
!  Increasing web server connection scalability
!  Simplifying the coding task
!  Protocol: ws:// and wss://
!  Its own protocol, handshake and headers
!  Support for several browsers (Firefox 6+, Chrome 14+,
Opera 11+, Safari 5+, IE 10+)
!  Problem: security issues

References (1)
!  http://www.w3schools.com/html/html5_intro.asp
!  Introducing HTML 5, Second edition, Bruce Lawson, Remy Sharp
!  W3C HTML5 Introduction:
http://www.w3.org/TR/html5/introduction.html
!  HTML 5 Up and Running – Mark Pilgrim, O’Reilly Google Press – or
http://diveintohtml5.org/
!  HTML5 boilerplate - http://html5boilerplate.com/ - “collection of
some tricks to get your project off the ground quickly and right-
footed”
!  HTML5 Demos - http://html5demos.com/

References (2)
!  HTML5 Rocks - http://www.html5rocks.com/
!  http://slides.html5rocks.com/
!  HTML5 Video -
http://dev.opera.com/articles/view/everything-you-need-
to-know-about-html5-video-and-audio/
!  HTML5 Foundamentals -
https://www.ibm.com/developerworks/mydeveloperworks/
blogs/social-media-marketing/entry/html5_fundamentals?
lang=en
!  HTML5 Tag Reference - http://www.w3schools.com/html5/
html5_reference.asp

HTML5 - An introduction

Recommended

More Related Content

What's hot (20)

Similar to HTML5 - An introduction (20)

More from Eleonora Ciceri (16)

Recently uploaded (20)

HTML5 - An introduction