HTML5 Refresher

HTML5 Refresher
Ivano Malavolta
ivano.malavolta@univaq.it
http://www.di.univaq.it/malavolta

Roadmap
• Intro
• New Structural Tags and Attributes
• Forms
• Audio & Video
• Offline Data
• Geolocalization
• Web Sockets
• Server-Sent Events
• Canvas & SVG
• Web Workers

Intro
HTML5 is potentially the first true cross-platform
cross-
app technology

Intro
HTML5 will be the new standard for HTML

HTML5 is still a work in progress
W3C final recomendation: 2020

Top browsers support many (not all) of the new HTML5
elements

http://mobilehtml5.org
http://caniuse.com

What is HTML5?
It is an extension of HTML/XHTML 4

• with new more semantically rich elements
– <article>, <footer>, <header>, <nav>, <section>
• deprecating tags & attributes
– <center>, <font>, <frame>, height, width
• introducing new attributes
– placeholder, form
• additional APIs
– geolocalization, video, audio

The HTML5 creation rules
• New features should be based on HTML, CSS, and JS

• Reduce the need for external plugins (like Flash)

• Better error handling
– ignore unknown stuff and move on

• More markup to replace scripting

• Avoid device-specific profiling
device-

• Make the process open

The minimal HTML5 page

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
…
</body>
</html>

The HTML5 Doctype
It must be the first thing in your HTML5 document,
before the <html> tag

It is an instruction to the web browser about
what version of HTML the page is written in

HTML 4 Doctype declarations required a reference
to a DTD, because HTML 4 was based on SGML
(Standard Generalized Markup Language)

HTML5 VS XHTML 4

• HTML5 will allow both quick-closing of empty tags
but you can use those elements just as well without
quick-closing them
<input type=“text”>
<input type=“text” />

• quotes for attributes are optional
<a href=http://www.google.com>

HTML5 VS XHTML 4

• you can use upper-case letters for your element names
<DIV>hello</DIV>

• No need to specify the type of script elements if it is
Javascript
<script src=“test.js”>

• No need to specify the type of style elements if it is
CSS
<link rel="stylesheet" href="style.css“>

New Structural Tags
Main Goal: separate presentation from content

• Poor accessibility
• Unnecessary complexity
• Larger document size

Most of the presentational features from earlier
versions of HTML are no longer supported

New Structural Tags
<header> header region of a page or section

<footer> footer region of a page or section

<nav> navigation region of a page or section

<section> logical region of a page

<article> a complete piece of content

<aside> secondary or related content

New Structural Tags

http://bit.ly/JCnuQJ

Other Structural Tags
<command> a command button that a user can invoke
<details> additional details that the user can view or
hide
<summary> a visible heading for a <details> element
<meter> an amount within a range
<progress> shows real-time progress towards a goal
<figure> self-contained content, like illustrations,
diagrams, photos, code listings, etc.
<figcaption> caption of a figure
<mark> marked/highlighted text
<time> a date/time
<wbr>Defines a possible line-break

Custom Data Attributes

Can be used to add metadata about any element within
an HTML5 page

They are ignored by the validator for HTML5 documents

They all start with the data- pattern

They can be read by any browser using Javascript via
the getAttribute() method

In-place Editing
This feature is provided by defining the contenteditable
attribute

Any elements with the contenteditable attribute set will have
a grey outline as you hover

Performed changes can be saved via Javascript

<section id="editable“ contenteditable="true"> hello
</section>

var editable = document.getElementById('editable');
editable.innerHtml

Sandbox attribute for iframes
Method of running external site pages with reduced privileges
in iframes

<iframe src=“other.htm" sandbox=""></iframe>

Forms

Main Goal: reduce the Javascript for validation
and format management
Example:

Form Input Types
<input type="search"> for search boxes
<input type="number"> for spinboxes
<input type="range"> for sliders
<input type="color"> for color pickers
<input type="tel"> for telephone numbers
<input type="url"> for web addresses
<input type="email"> for email addresses
<input type="date"> for calendar date pickers
<input type="month"> for months
<input type="week"> for weeks
<input type="time"> for timestamps
<input type="datetime"> for precise timestamps
<input type="datetime-local"> for local dates and times

Form Input Types

Form input types degrade gracefully
Unknown input types are treated as text-type

http://bit.ly/I65jai

Form Field Attributes

Autofocus
– Support for placing the focus on a specific form
element
<input type="text“ autofocus>

Placeholder
– Support for placing placeholder text inside a form
field
<input type="text“ placeholder=“your name”>

Required
– Method of setting required fields and field types without
requiring JavaScript

Your Name: <input type="text" name="name" required>

Pattern
– Validate form field data to match the specified regular
expression pattern

<input type="text" pattern=“[1-9]+”>

Currently they are supported by few mobile browsers

New form elements
<datalist> a list of pre-defined options for input
controls

<keygen> a key-pair generator field (for forms)
When the form is submitted, two keys are generated, one
private and one public
The private key is stored locally, and the public key is
sent to the server

<output> the result of a calculation
a label that can be filled by a Javascript function

Audio
<audio> : a standard way to embed an audio file on
a web page

<audio controls>
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Not Supported
</audio>

Multiple sources the browser will use the first
recognized format

Audio Javascript API

HTML5 provides a set of Javascript APIs for
interacting with an audio element

For example:
play() pause() load() currentTime
ended volume…

http://www.w3.org/wiki/HTML/Elements/audio

Video
<video> : a standard way to embed a video file on a
web page

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Not Supported
</video>

Multiple sources the browser will use the first
recognized format

Video Javascript API

HTML5 provides a set of Javascript APIs for
interacting with a video element

For example:
play() pause() load() currentTime
ended volume…

http://www.w3.org/wiki/HTML/Elements/video

A note on YouTube videos
<video> works only if you have a direct link to the
MP4 file of the YouTube video

If you have just a link to the YouTube page of your
video, simply embed it in your page

<iframe width="560" height="315"
src="http://www.youtube.com/embed/Wp20Sc8qPeo"
frameborder="0" allowfullscreen></iframe>

A note on YouTube videos

These are the PhoneGap options you have to set

MediaPlaybackRequiresUserAction: NO
AllowInlineMediaPlayback: YES
OpenAllWhitelistURLsInWebView: YES
ExternalHosts
*.youtube.com
*.ytimg.com

Offline Data
LocalStorage
stores data in key/value pairs
it is tied to a specific domain/app
persists across browser sessions

SessionStorage
stores data in key/value pairs
it is tied to a specific domain/app
data is erased when a browser session ends

Offline Data
WebSQL Database
relational DB
support for tables creation, insert, update, …
transactional
tied to a specific domain/app
persists across browser sessions

Its evolution is called IndexedDB but it is actually
IndexedDB,
not supported by most mobile browsers

Mobile browsers compatibility matrix

We will have a dedicated lecture to
offline data storage on mobile devices

Application Cache

web applications can be cached, and accessible
without an internet connection

<!DOCTYPE HTML>
<html manifest=“home.appcache“>
<body>
contents
</body>
</html>

Application Cache

Every page with the manifest attribute specified will
be cached

If the manifest attribute is not specified, the page
will not be cached (unless the page is specified
directly in the manifest file)

App cache is supported by all browsers, except IE

The Manifest File
The manifest file has three sections:

• CACHE MANIFEST
– Files listed under this header will be cached after they
are downloaded for the first time

• NETWORK
– Files listed under this header require a connection to the
server, and will never be cached

• FALLBACK
– Files listed under this header specifies fallback pages if a
page is inaccessible

Manifest File - Example
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK: The first URI is the
/html5/ /offline.html resource, the second is
the fallback.

http://bit.ly/I6gmAc

Geolocalization

Gets Latitude and Longitude from the user’s browser

There is also a watchPosition method wich calls a JS
function every time the user moves

We will have a dedicated
lecture to geolocalization on
mobile devices

Example

function getLocation() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
console.log(‘no geolocalization’);
}
}

function showPosition(position) {
console.log(position.coords.latitude);
console.log(position.coords.longitude);
}

Roadmap
• Intro
• New Structural Tags and Attributes
• Forms
• Audio & Video
• Offline Data
• Geolocalization
• Web Sockets
• Server-Sent Events
• Canvas & SVG
• Web Workers
• Microdata

WebSockets
Bidirectional, full-duplex communication between
full-
devices and server

Specifically suited for
chat, videogames, drawings sharing, real-time info

Requires a Web Socket Server to handle the protocol
We will have a dedicated
lecture to WebSockets on
mobile devices

WebSockets - Overview
1. Client notifies websocket server (EventMachine) of an
event, giving ids of recipients
2. The server notifies all the active clients (subscribed to
that type of event)
3. Clients process event
when given recipient Id
matches the client’s one

http://bit.ly/Ixcupi

Alternative - Polling via AJAX

+ Near real-time updates (not purely real-time)
+ easy to implement
+ no new technologies needed

- they are requested from the client and cause
increased network traffic
- AJAX requests generally have a small payload and
relatively high amount of http headers (wasted
bandwith)

Server-Sent Events
It setups a persistent http connection
which has to be setup only once
We will have a
It is unidirectional:
unidirectional: dedicated
server client lecture to SSE
on mobile
devices
SSEs are sent over traditional HTTP
it can be easily implemented with standard server-
side technologies (eg PHP)

Server-Sent Events

Specifically suited for:
• financial info
• twitters updates
• friends' status updates
• news

If you need to send data to a server, you can still use
XMLHttpRequests via Javascript

SSE- Overview
1. Client sends a request to the server via HTTP
2. The server creates a process, which fetches latest state in
the DB and responds back
3. Client gets server response
4. In 3 seconds client automatically sends next request to the
server

http://bit.ly/Ixcupi

Canvas & SVG

Canvas & SVG allow you to create graphics
inside the browser

We will have a
dedicated lecture to
canvas & SVG on
mobile devices

http://bit.ly/Ie4HKu

Canvas & SVG

Canvas
draws 2D graphics, on the fly
you use Javascript to draw on the canvas
rendered pixel by pixel

SVG
describes 2D graphics in XML
every element is available within the SVG DOM
JavaScript event handlers for an element

Web Workers

Javascript is a single-threaded language
single-
If a tasks take a lot of time, users have to wait

Web Workers provide background processing
capabilities to web applications

They typically run on separate threads
apps can take advantage of multicore CPUs

Web Workers

Web Workers can be used to:
• prefetch data from the Web
• perform other ahead-of-time operations to provide
ahead-of-
a much more lively UI.

Web Workers are precious on mobile Web applications
because they usually need to load data over a
potentially slow network

Web Workers

Any JS file can be launched as a worker

Example of Web Worker declaration:
var worker = new Worker(“worker.js”);

In order to be independent from other workers, each
worker script cannot access the DOM

Web Workers

The main JS script can communicate with workers via
postMessage() calls:

$(‘#button’).click(function(event) {
$(‘#output’).html(“starting”);
worker.postMessage(“start”);
});

worker.onmessage = function(event) {
$(‘#output’).html(event.data);
}

Web Workers

The web worker script can post back messages to the
main script:

onmessage = function(event) {
if(event.data === “start”) {
var result;
// do something with result
postMessage(result);
}
}

References
http://www.w3schools.com/

HTML5 Refresher

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Destacado

Destacado (20)

Similar a HTML5 Refresher

Similar a HTML5 Refresher (20)

Más de Ivano Malavolta

Más de Ivano Malavolta (20)

Último

Último (20)

HTML5 Refresher