HTML5
brevi note
conoscendo già:
• html
• css
• javascript
Vittorio Maniezzo – Università di Bologna
1
HTML5 (wikipedia)
HTML5 è un linguaggio di markup per la strutturazione delle pagine web.
Lo sviluppo venne avviato dal gruppo di lavoro Web Hypertext
Application Technology Working Group (WHATWG) (fondato nel 2004 da
sviluppatori Apple, Mozilla Foundation e Opera Software) con obiettivo
progettare specifiche per lo sviluppo di applicazioni web, migliorando
HTML e tecnologie correlate.
Dal 2007 il WHATWG ha collaborato con il W3C in tale processo di
standardizzazione, per poi decidere nel 2012 di separarsi dal processo di
standardizzazione del W3C, creando di fatto due versioni dell'HTML5: la
versione del WHATWG ("HTML Living Standard") in continua evoluzione,
e quella del W3C che sarà una unica versione corrispondente ad uno
"snapshot" del Living Standard.
Il W3C ha annunciato che la prima versione dello standard sarà pronta
per fine 2014 e l'html5.1 per il 2016; la prima Candidate
Recommendation è stata pubblicata dal W3C il 17 Dicembre 2012.
Vittorio Maniezzo – Università di Bologna
2
1
HTML5: novità
Le novità introdotte dall'HTML5 rispetto all'HTML 4 vogliono
migliorare il disaccoppiamento tra:
• struttura, definita dal markup,
• caratteristiche di resa (tipo di carattere, colori, eccetera), definite
dalle direttive di stile,
• contenuti di una pagina web, definiti dal testo vero e proprio.
Inoltre l'HTML5 prevede il supporto per la memorizzazione locale di
grosse quantità di dati scaricati dal web browser e per consentire
l'utilizzo di applicazioni basate su web (come per esempio le caselle di
posta di Google o altri servizi analoghi) anche in assenza di
collegamento a Internet.
Vittorio Maniezzo – Università di Bologna
3
HTML5: novità
In particolare:
• regole più stringenti per la strutturazione del testo in capitoli, paragrafi e
sezioni;
• nuovi elementi di controllo per i menu di navigazione;
• migliorati ed estesi gli elementi di controllo per i moduli elettronici;
• introdotti elementi specifici per il controllo di contenuti multimediali;
• deprecati o eliminati elementi che hanno dimostrato scarso utilizzo effettivo;
• estesi a tutti i tag una serie di attributi, specialmente quelli finalizzati
all'accessibilità, finora previsti solo per alcuni tag;
• supportato Canvas che permette di utilizzare JavaScript per creare animazioni e
grafica;
• introduzione della geolocalizzazione;
• sistema alternativo ai normali cookie, chiamato Web Storage, più efficiente, il
quale consente un notevole risparmio di banda;
• standardizzazione di programmi JavaScript, chiamati Web Workers e possibilità
di utilizzare alcuni siti offline;
• sostituzione del lungo e complesso doctype, con un semplice <!DOCTYPE html>.
Vittorio Maniezzo – Università di Bologna
4
2
Nuovi elementi
Elementi introdotti in questa nota:
• markup semantico,
• canvas, per disegno e animazione,
• supporto audio e video,
• geolocalizzazione,
• web storage,
• web workers,
• web socket,
• applicazioni offline,
• multidevice,
• uso di HTML5 con browser vecchi.
Vittorio Maniezzo – Università di Bologna
5
Markup semantico
Gli elementi semantici indicano già col loro nome il loro
significato al browser e agli sviluppatori. Sono alternativi al
tag <div>, che definisce una divisione (una sezione) nel
documento HTML, ma non ne dice nulla sul contenuto.
Gli sviluppatori normalmente associano ID e classi ai <div>. I
loro nomi sono significativi per gli sviluppatori, es. <div
id="header">, ma non per i browser.
Il W3C ha analizzato milioni di pagine web esistenti per
scoprire gli ID e i nomi di classe più usati dagli sviluppatori. Il
risultato è una lista di elementi descrittivi già molto in uso,
che è stata resa standard.
Vittorio Maniezzo – Università di Bologna
6
3
Nuovi elementi semantici
Esempio pagina con div o con tag semantici.
HTML 4
Vittorio Maniezzo – Università di Bologna
HTML 5
7
Markup semantico
Alcuni nuovi elementi semantici in HTML5:
• article
• aside
• figcaption
• figure
• footer
• header
• hgroup
• mark
• nav
• section
• time
Vittorio Maniezzo – Università di Bologna
8
4
Markup semantico e layout di pagina
• header e footer indicano intestazione e piè di pagina
• nav crea una barra di navigazione o di menu.
• section e article raggruppano i contenuti effettivi.
• aside è usato per contenuti secondari, ad es. per una
barra laterale di link a elementi correlati.
Vittorio Maniezzo – Università di Bologna
9
Markup semantico: esempio codice
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titolo</title>
<link rel="stylesheet"
href="http://astarte.csr.unibo.it/html5/stylesheet.css"
type="text/css"></head>
<body>
<header>
<hgroup>
<h1>Header, stile h1</h1>
<h2>Subheader, stile h2</h2>
</hgroup>
</header>
<nav>
<p>Nav menu</p>
<ul>
<li><a href="#">Menu, Opzione 1</a></li>
<li><a href="#">Menu, Opzione 2</a></li>
</ul>
</nav>
<section>
<article>
<header>
<h1>Article 1</h1>
</header>
<section>
<p>Qui primo article. Qui <mark>evidenziato</mark>.</p>
</section>
</article>
Vittorio Maniezzo – Università di Bologna
<article>
<header>
<h1>Article 2</h1>
</header>
<section>
<p>Qui secondo article.</p>
</section>
</article>
</section>
<aside>
<section>
<h3>Link</h3>
<ul>
<li><a
href="http://www3.csr.unibo.it/~maniezzo/">Mio
sito</a></li>
<li><a href="http://astarte.csr.unibo.it/">Astarte</a></li>
</ul>
</section>
<figure>
<img width="120" height="90"
src="http://www3.csr.unibo.it/~maniezzo/io.jpg"
alt="Vittorio Maniezzo" />
<figcaption>Vittorio Maniezzo</figcaption>
</figure>
</aside>
<footer>Questo e' il footer</footer>
</body>
</html>
10
5
Commenti al codice
• Il tag <hgroup> permette di raggruppare elementi, qui
gli header h1 e h2.
• Il tag <mark> permette di evidenziare del testo
importante.
• I tag <figure> e <figcaption> permettono di
inserire una figura (immagine, diagramma, foto, ecc.) e
associarne una didascalia.
• L'aspetto effettivo viene poi determinato dal CSS
associato alla pagina.
Vittorio Maniezzo – Università di Bologna
11
Form
HTML5 ha introdotto vari tag e
attributi specifici per le form:
• input: tipi e attributi
• email
• url
• number
• date time
• search
• range
• color
• controlli
• datalist
• keygen
• output
Vittorio Maniezzo – Università di Bologna
• attributi
• spellcheck
• autofocus
• list
• required
• placeholder
• min and max
• multiple
• eventi
• orientationchange
• resize
• online
• offline
12
6
Form: codice
number:
<form onsubmit="return false" oninput="res.value = numero.valueAsNumber">
Numero <input name="numero" type="number"/><output name="res">0</output>
</form>
submit: <input type="submit" value="Submit">
button:
<input type="button" onclick="alert('Ahi ahi!')" value="provami">
email:
<input type="email" multiple required autofocus placeholder="[email protected]" />
date time: <input type="date"/>
<input type="time"/>
range:
<form onsubmit="return false" oninput="level.value = livello.valueAsNumber">
<label for="Numero">Scegliere il livello</label>
<input name="livello" id="Numero" type="range" min="0" max="100" value="0">
<output for="Numero" name="level">0</output>/100
</form>
Vittorio Maniezzo – Università di Bologna
13
Form: codice
color:
<input type="color"/>
datalist:
<input type="text" id="nomi" list="fullList" />
<datalist id="fullList">
<option value="Nome1">
<option value="Nome2">
</datalist>
spellcheck:
<input type="text" spellcheck="false" placeholder="No Spellcheck">
<input type="text" spellcheck="true" placeholder="Con Spellcheck">
Vittorio Maniezzo – Università di Bologna
14
7
VisualStudio: intellisense HTML5
Per avere attivo l'intellisense in VisulStudio anche per la sintassi
HTML5:
VisualStudio: da Tools, Options. poi nel pane espandere Text Editor,
scegliere HTML e clickare Validation.
Poi, dal dropdown Target, scegliere HTML5.
Vittorio Maniezzo – Università di Bologna
15
Drag and drop
In HTML5 il drag and drop è parte dello standard, qualunque
elemento può essere reso draggable e spostato in posti predefiniti.
Attributi, metodi ed eventi correlati sono:
• draggable
• ondragstart
• setData
• getData
• ondragover
• ondrop
Vittorio Maniezzo – Università di Bologna
16
8
Drag and drop: codice
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Drag&drop</title>
<style type="text/css">
div.dragDropBin
{color:red;border:2px;width:100px;height:100px}
div.HTML5LogoSmall
{color:black;width:100px;height:100px}
</style>
<script>function allowDropDragOver(e)
{ e.preventDefault();
}
function dragStart(e)
{ e.dataTransfer.setData("dragItemID",
e.target.id);
}
function dropIt(e)
{ e.preventDefault();
var dataId =
e.dataTransfer.getData("dragItemID");
e.target.appendChild(
document.getElementById(dataId));
}
</script>
</head>
Vittorio Maniezzo – Università di Bologna
<h2>Spostare il logo fra i quadretti</h2>
<table border=2px>
<tr>
<td>
<div id="bin1" ondrop="dropIt(event)"
ondragover="allowDropDragOver(event)"
class="HTML5LogoSmall">
<img id="dragImage"
src="Images/HTML5LogoSmall.png"
draggable="true" ondragstart="dragStart(event)"
class="dragImage">
</div>
</td>
<td><div id="bin2" ondrop="dropIt(event)"
ondragover="allowDropDragOver(event)"
class="dragDropBin"></div></td>
</tr>
<tr>
<td><div id="bin3" ondrop="dropIt(event)"
ondragover="allowDropDragOver(event)"
class="dragDropBin"></div></td>
<td><div id="bin4" ondrop="dropIt(event)"
ondragover="allowDropDragOver(event)"
class="dragDropBin"></div></td>
</tr>
</table>
</body>
</html>
17
Canvas
Uno degli elementi più innovativi di HTML5 è il tag <canvas>.
Identifica una superficie vuota su cui disegnare.
Il disegno e le azioni sul canvas devono essere fatte in JavaScript.
Di solito si associa al canvas un attributo id per referenziarlo dal
codice JavaScript (o, usando jQuery e avendo solo un canvas nella
pagina, si può usare solo $(‘canvas’)).
Si possono anche specificare (opzionali) una height e una width per
il canvas.
Fra i tag <canvas> e </canvas> si può inserire del test che verrà
visualizzato nei browser che son supportano il canvas.
Vittorio Maniezzo – Università di Bologna
18
9
Codice canvas
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="300" height="200">Il browser non supporta il canvas.</canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var canvcont = canvas.getContext('2d');
// Bandiera italiana
canvcont.fillStyle = '#00FF00';
canvcont.fillRect(0, 0, 100, 200);
canvcont.fillStyle = '#FF0000';
canvcont.fillRect(200, 0, 300, 200);
// Disegna una X blu
canvcont.beginPath();
canvcont.lineWidth = "15";
canvcont.strokeStyle = "blue";
canvcont.moveTo(0, 0);
canvcont.lineTo(300, 200);
canvcont.moveTo(300, 0);
canvcont.lineTo(0, 200);
canvcont.stroke();
</script>
</body>
</html>
Vittorio Maniezzo – Università di Bologna
19
Commento codice canvas
Primo, si dichiara il canvas con Id “myCanvas”, width="300" e
height="200". I browser vecchi visualizzano “Il browser non supporta il
canvas” invece del disegno.
Segue lo script che disgna. Si prende la reference tramite l'Id
“myCanvas” e si dichiara il context del canvas, che permette di
accedere a metodi e proprietà per disegnare. Qui context “2d”, che al
momento è l'unico che esiste.
Quindi si disegnano i rettangoli. Tramite fillStyle si specificano i
colori e tramite fillRect si disegnano i rettangoli, specificando
dimensione e posizione. Ad es., la chiamata fillRect(0, 0, 100, 200)
parte da (0, 0) —angolo alto sinistra — e disegna un rettangolo con
width=100 e height=200 pixel.
Infine, X blu sulla bandiera. Prima beginPath che inizializza un path,
disegnato con linea con lineWidth di 15 pixel e strokeStyle
“blue”. Quindi si diesegna tramite moveTo, che muove il cursore
senza disegnare, e lineTo, che lo muove disegnando. Alla fine la
chiamata a stroke renderizza la linea.
Vittorio Maniezzo – Università di Bologna
20
10
Audio and Video
Altra caratteristica centrale in HTML5: possibilità di supportare la
riproduzione audio e video. Prima servivano dei plug-in specifici, come
Silverlight o Flash.
In HTML5, si può inserire audio e video usando i tag <audio> e
<video>.
Sono tag molto semplici da usare e sono già supportati in tutti i
maggior browser (Internet Explorer, Firefox, Chrome, Opera, Safari).
Un problema nasce perché per riprodurre audio o video, servono dei
codec specifici, e browser diversi supportano codec diversi.
Vittorio Maniezzo – Università di Bologna
21
Audio and Video
Fortunatamente, il supporto audio e video è molto flessibile. Il
browser può provare formati diversi prima di fallire.
Quando di pubblica un contenuto, conviene sempre presentarlo in più
formati, in modo da averne uno valido per ogni tipo di browser.
Al momento i formati più supportati per HTML5 sono:
Audio: MP3, Wav, Ogg
Video: MP4, WebM, Ogg
Vittorio Maniezzo – Università di Bologna
22
11
Audio
<audio controls="controls">
<source src="carica.mp3" type="audio/mp3" />
<source src="carica.ogg" type="audio/ogg" />
Il tuo browser non supporta gli audio.
</audio>
Qui, il browser cercherà di riprodurre il file carica.mp3. Se non ne ha il
codec, prova il successivo carica.ogg.
Se non viene riconosciuto il tag <audio> verrà visualizzato "Il tuo
browser non supporta gli audio.".
Attualmente non è predefinito nessun supporto digital rights
management (DRM). Se interessa, bisogna svilupparselo da soli.
Vittorio Maniezzo – Università di Bologna
23
Audio: controlli
Notare l'attributo controls. Serve a visualizzare un controllo di
riproduzione audio, con un bottone play/pause, il tempo, un bottone
mute buttone il volume.
Internet Explorer lo visualizza così:
Altri browser lo visualizzano diversamente. Ecco in Chrome. Il volume
è un drop-down che compare quando si passa col mouse sull'iconcina
a destra.
Vittorio Maniezzo – Università di Bologna
24
12
Controlli audio, manuale (TFM)
Attributo
Valori
Descrizione
Starts the audio playing as soon as it’s
ready
Displays audio playback controls on the
page
autoplay
autoplay
controls
controls
loop
loop
Causes audio to repeat and play again
every time it finishes
preload
auto, metadata, none
Determines whether to load the audio
when the page is loaded. The
value auto will load the audio, metadata will
load only metadata associated with the
audio file, and none will not preload audio.
(This attribute will be ignored if autoplay is
specified.)
src
(some URL)
Specifies the URL of the audio file to play
Vittorio Maniezzo – Università di Bologna
25
Audio: esempio controlli
Ad esempio, questo codice visualizza il controllo di gestione audio e
riproduce subito il file, ripetendolo indefinitamente in un loop.
<audio controls="controls" autoplay="autoplay"
loop="loop">
<source src="carica.mp3" type="audio/mp3" />
<source src="carica.ogg" type="audio/ogg" />
Il tuo browser non supporta gli audio.
</audio>
Vittorio Maniezzo – Università di Bologna
26
13
Audio: codice
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>audio</title>
<script type="text/javascript">
function CMute(controlId)
{ document.getElementById('sampleAudio').muted =true;
}
function CUnMute(controlId)
{ document.getElementById('sampleAudio').mute d=false;
}
function CPause(controlId)
{ if (!(document.getElementById('sampleAudio').paused))
document.getElementById('sampleAudio').pause();
}
function CPlay(controlId)
{ document.getElementById('sampleAudio').play();
}
function CFullScreen(controlId)
{ // Per ora solo su Chrome .
$(controlId)[0].webkitRequestFullScreen();
}
</script>
</head>
<body>
<p style="font-family:verdana">Audio</p>
<audio id="sampleAudio" controls>
<source src="files/impollinazione.mp3"
type="audio/mp3">
<source src="files/impollinazione.wav"
type="audio/wav">
<source src="files/impollinazione.ogg"
type="audio/ogg">
Il tuo browser non supporta gli audio.
</audio><br>
<input type="button" value="Mute"
onclick="CMute(sampleAudio);"/>
<input type="button" value="Unmute"
onclick="CUnMute(sampleAudio);"/>
<input type="button" value="Pause"
onclick="CPause(sampleAudio);"/>
<input type="button" value="Play"
onclick="CPlay(sampleAudio);"/>
</body>
</html>
Vittorio Maniezzo – Università di Bologna
27
Video
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Il tuo browser non supporta i video.
</video>
Analogamente al caso audio, il tag video supporta sorgenti multiple, che
verranno provate nell'ordine fornito finchè non se ne trova una per la
quale si ha il codec.
Vittorio Maniezzo – Università di Bologna
28
14
Video: controlli (TFM)
Attributi
audio
Valori
muted
Descrizione
Sets the default state of the audio (currently, “muted” only option)
autoplay autoplay
Starts the video playing as soon as it’s ready
controls
controls
Displays video playback controls on the page
height
(value in
pixels)
Sets the height of the video player
loop
loop
Causes video to repeat and play again every time it finishes
poster
(some URL)
Specifies the URL of an image to represent the video when no video
data is available
preload
auto,
metadata,
none
Determines whether to load the video when the page is loaded. The
value auto will load the video, metadata will load only metadata
associated with the video file, and none will not preload video. (This
attribute will be ignored if autoplay is specified.)
src
(some URL) Specifies the URL of the video file to play
width
(value in px) Sets the width of the video player
Vittorio Maniezzo – Università di Bologna
29
Video: codice
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>video</title>
</head>
<body>
<p style="font-family:verdana">Video</p>
<figure>
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264" data-setup='{"example_option":true}'>
<source src="http://html5multimedia.com/media/elephants-dream-medium.mp4"
type="video/mp4">
<source src="http://html5multimedia.com/media/elephants-dream-medium.webm"
type="video/webm">
<track src="files/elephants-dream-subtitles-en.vtt" label="Sottotitoli" srclang="en"
default>
Il tuo browser non supporta i video.
</video>
<figcaption>© copyright 2006, Blender Foundation / Netherlands Media Art Institute /<br/><a
href="http://www.elephantsdream.org">www.elephantsdream.org</a></figcaption>
</figure><br>
</body>
</html>
Vittorio Maniezzo – Università di Bologna
30
15
Geolocalizzazione
La geolocalizzazione serve per individuare la posizione geografica
dell'utente, tramite le coordinate di latitudine e longitudine. Questi
sono dati personali dell'utente, che ne possono compromettere la
privacy.
E' quindi necessario un permesso esplicito dell'utente per localizzarne
la posizione.
Per utilizzare la geolocalizzazione, si sfrutta
l'oggetto navigator.geolocation.
Vittorio Maniezzo – Università di Bologna
31
navigator.geolocation
Parametri
• position
• coords (Coordinate): localizzazione dell'utente
•
•
•
•
•
•
•
latitude
longitude
altitude
accuracy
altitudeAccuracy
speed
heading
Metodi
• getCurrentPosition: rilava la posizione (una volta)
• watchPosition: rileva continuativamente la posizione
• clearWatch: smette di rilevare la posizione
• timestamp (DOMTimeStamp): tempo in cui si è ottenuta la posizione
• PositionError: error callback object
• UNKNOWN_ERROR = 0
• PERMISSION_DENIED = 1
• POSITION_UNAVAILABLE = 2
• TIMEOUT = 3
• code
• message
• PositionOptions: opzioni di georeferenziazione
• enableHighAccuracy
• timeout
• maximumAge
Vittorio Maniezzo – Università di Bologna
32
16
Georef: codice latlong
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>LatLong</title>
</head>
<body>
<div align="center" style="padding:30px;">
<p id="demo">Click per avere le coordinate</p>
<button onclick="getLocation()">getLocation</button>
</div>
<script type="text/javascript">
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitudine: " + position.coords.latitude +
"<br>Longitudine: " + position.coords.longitude;
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="Permesso negato."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="position unavailable."
break;
case error.TIMEOUT:
x.innerHTML="Richiesta in timeout."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="Errore sconosciuto."
break;
}
}
</script>
</body>
</html>
Vittorio Maniezzo – Università di Bologna
33
Georef: codice google maps
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>geoLoc Google Maps</title>
</head>
<body>
<div align="center" style="padding:30px;">
<p id="demo">Click per avere la mappa</p>
<button onclick="showMap()">showMap</button>
</div>
<center><div id="mapView"
style="width:500px;height:380px;" ></div></center>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></scri
pt>
<script type="text/javascript">
var x=document.getElementById("demo");
function showMap()
{ if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showMapLocation,
showError);
}
}
function showError(error)
{ switch(error.code)
{ …
}
}
Vittorio Maniezzo – Università di Bologna
function showMapLocation(position)
{ var latlng = new
google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var myOptions =
{ zoom: 16,
center: latlng,
mapTypeControl: false,
navigationControlOptions: { style:
google.maps.NavigationControlStyle.SMALL },
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("mapView"),
myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
draggable:true,
title: "Tu sei qui! (Accuratezza: " +
position.coords.accuracy + " metri)"
});
x.innerHTML="Latitudine: " + position.coords.latitude +
" Longitudine: " + position.coords.longitude;
google.maps.event.addDomListener(window, 'load',
initialize);
}
</script>
</body>
</html>
34
17
Web storage
HTML5 permette di memorizzare dati in locale al browser client.
Alternativa ai cookies, che sono lenti, in chiaro, limitati a 4KB e da
includere in ogni richiesta HTTP.
Web Storage è più sicuro e veloce. Spazio disponibile sul client ~5MB,
persistente e trasmesso solo quando richiesto.
Due tipi di memorizzazione:
localStorage: dati senza scadenza
• dati tipo Key/Value pair
• condivisi fra window/tab di uno stesso dominio
• disponibili finché cancellati esplicitamente dall'utente
sessionStorage: dati memorizzati solo per la sessione
• dati tipo Key/Value pair
• Specifici a una particolare window/tab
Vittorio Maniezzo – Università di Bologna
35
Web storage: controlli
Web Storage usa un'interfaccia che espone API per creare, leggere,
aggiornare o cancellare (CRUD) dati sul client:
• getItem(DOMString key): restituisce il valore di un elemento
data la chiave
• setItem(DOMString key, any data): crea o modifica il
valore di un elemento
• removeItem(DOMString key): cancella un elemento data la
chiave
• clear() : Cancella tutti gli elementi
• length : Numero degli elementi memorizzati
• key(unsigned long index): restituisce la chiave di un
elemento identificato da un indice (base 0)
Vittorio Maniezzo – Università di Bologna
36
18
Web storage: codice
<head>
<script type="text/javascript">
function SaveToSessionStorage()
{ window.sessionStorage.mySessionKeyX = 'Chiave X';
window.sessionStorage.setItem("mySessionKeyX" ,"Dato salvato in sessione, chiave X");
alert("Session: dato memorizzato");
}
function SaveToLocalStorage()
{ window.localStorage.myLocalKeyA = 'Chiave A';
window.localStorage.setItem("myLocalKeyA", "Dato salvato in localStorage, chiave X");
alert("Local: dato memorizzato");
}
function GetFromSessionStorage()
{ alert("Value X: " + window.sessionStorage.getItem("mySessionKeyX"));
}
function GetFromLocalStorage()
{ alert("Value A: " + window.localStorage.getItem("myLocalKeyA"));
}
function RemoveFromSessionStorage()
{ window.sessionStorage.removeItem("mySessionKeyX");
}
function RemoveFromLocalStorage()
{ window.localStorage.removeItem("myLocalKeyA");
}
<body>
function clearAll()
<div align="center" style="padding:5px;background-color:#EFCAA8;">
{ localStorage.clear();
<p id="session">Click per memorizzare dati in sessione</p>
sessionStorage.clear();
<button onclick="SaveToSessionStorage()">SaveToSessionStorage</button>
}
<button onclick="GetFromSessionStorage()">GetFromSessionStorage</button>
</script>
<button onclick="RemoveFromSessionStorage()">RemoveFromSessionStorage</button>
</head>
</div>
…
37
Vittorio Maniezzo – Università di Bologna
</body>
Web workers
Web Workers in HTML5 è uno script JavaScript che viene eseguito in
background dopo essere lanciati da una pagina. Funziona
indipendentemente dagli altri script e non influenza la performance
della pagina.
Normalmente, lanciando script in una pagina HTML, la pagina non
risponde più finché gli script non terminano. Web Workers permette
di lanciare processi in background, in parallelo al processo browser
(main). Quindi la pagina resta responsive anche se il worker è in
esecuzione.
Web workers sono processi esterni al main, quindi non possono
accedere a oggetti JavaScript quali:
• window object
• document object
• parent object
Vittorio Maniezzo – Università di Bologna
38
19
Web workers: codice
<head>
<meta charset="utf-8" />
var i=0;
<title>webworkers</title>
function timedCount()
<script type="text/javascript">
{ i=i+1;
var w;
postMessage(i);
function startWorker()
setTimeout("timedCount()",500);
{ if(typeof(Worker)!=="undefined")
}
{ if(typeof(w)=="undefined")
timedCount();
{ w=new Worker("demo_workers.js");
}
w.onmessage = function (event)
{ document.getElementById("result").innerHTML=event.data;
};
}
else
{ document.getElementById("result").innerHTML="Il tuo browser non supporta i Web Workers...";
}
}
function stopWorker()
{ w.terminate();
document.getElementById("result").innerHTML="Fine";
}
</script>
</head>
<body>
<p>[Gira su un server vero] Conta: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br>
</body>
Vittorio Maniezzo – Università di Bologna
39
Web socket
Una Web Socket in HTML5 realizza un canale di comunicazione
bidirezionale su una connessione TCP (cioè una socket). Le API
WebSocket sono definite dal W3C (World Wide Web Consortium) e il
protocollo WebSocket è stato standardizzato dall'IETF (Internet
Engineering Task Force).
Sono stati definiti due nuovi protocolli - ws: e wss:
Semplifica le comunicazioni client-server. Per stabilire una
connessione fra un client e un server, viene inviata una richiesta di
upgrade della connessione HTTP. Ottenuto l'upgrade e fatto un
handshake, il client e il server possono scambiarsi dei frame. Il server
notifica anche al client nuovi messaggi.
Schema di utilizzo:
1. crea un web socket
2. dichiara un event listener
3. invia messaggi
Vittorio Maniezzo – Università di Bologna
40
20
Web socket: metodi e eventi
Attributi, metodi e eventi websocket sono:
• readyState
• bufferedAmount
• onopen
• onmessage
• onclose
• onerror
• send()
• close()
Vittorio Maniezzo – Università di Bologna
41
Web socket: codice
<script type="text/javascript">
function WebSocketTest() {
if ("WebSocket" in window)
{ // Open a Web Socket
var ws = new WebSocket("ws://echo.websocket.org/");
ws.onopen = function ()
{ // Send data
ws.send("Dati inviati");
alert("Messaggio inviato!");
};
ws.onmessage = function (evt)
{ //Recieve data
var receivedmsg = evt.data;
alert("Messaggio ricevuto dal server: "+ receivedmsg);
};
ws.onclose = function ()
{ // Close a Websocket
alert("Chiusa la connessione");
};
ws.onerror = function (evt)
{ // Log Error
<body>
alert("ERRORE " + evt.message);
<p>test web socket</p>
};
<button onclick="WebSocketTest()">WebSocketTest</button>
}
<br>
}
</body>
</script>
Vittorio Maniezzo – Università di Bologna
42
21
Applicazioni offline
HTML5 Offline permette di usa una applicazione web anche quando
non c'è una rete cui connettersi.
La web application referenzia un manifest che specifica quali file
devono essere mantenuti in cache e quali no, oltre a regole (fallback
rules) su come gestire I file non in cache.
Le copie locali in cache non hanno una data di scadenza. Se
l'applicazione trova delle variazioni nel manifest quando va online,
aggiorna i file locali, altrimenti li usa come sono.
In mancanza di rete (viene detto da un flag "onLine" presente nel
DOM), le pagine web e i dati correlati vengono caricati dalle copie in
cache.
Vittorio Maniezzo – Università di Bologna
43
Multidevice
HTML5 permette di supportare device diversi, è
fondamentale per l'accesso mobile.
Viewport Meta Tag
• controlla il modo in cui i browser visualizzano la pagina,
specificando come il contenuto va disposto nello schermo
del device.
• informa il browser che il sito è ottimizzato per dispositivi
mobili.
Esempio:
<meta name="viewport" content="width=device-width,
height=device-height, initial-scale=1.0, user-scalable=yes"/>
Vittorio Maniezzo – Università di Bologna
44
22
Multidevice: media queries
CSS Media Query – sono stylesheet che permettono di personalizzare
la presentazione del contenuto per uno specifico insieme di dispositivi
senza dover cambiare il contenuto stesso. Tre modi di definirle:
• Foglio di stile esterno:
<link rel="stylesheet" media="handheld, only screen and (maxdevice-width: 320px)" href="phone.css">
<link rel="stylesheet" media="only screen and (min-width: 641px)
and (max-width: 800px)" href="tablet.css">
• Dentro la sezione <style> (o in un file css), media rule:
@media only screen and (max-width: 480px)
{/* le regole definite qui si applicano solo a browser che
supportano le CSS media queries e con una finestra di 480px o
meno*/
}
• Stylesheet importato in una sezione <style> :
@import "smallscreen.css" only screen and (max-width: 480px);
Vittorio Maniezzo – Università di Bologna
45
Compatibilità
I browser supportano HTML5 in realtà ne supportano parti diverse, e
alcune funzionalità possono essere realizzate in modo diverso.
Il modo per permettere a tutti di usare il sito sono i polyfill.
Un polyfill è una piccola libreria che accetta le API non supportate,
garantendo il fallback a browser vecchi.
Un modo per aggiungere i polyfill è ad es. linkare la libreria JavaScript
Modernizr (ma ce ne sono molte). Modernizr aggiunge capacità di
feature detection che permettono di scoprire cosa non è supportato
dal browser e di fornire una opzione di backup se serve.
Vittorio Maniezzo – Università di Bologna
46
23
Modernizr
Per aggiungere la reference a Modernizr (senza dover cambiare niente nel
codice) bisogna scaricarlo da http://www.modernizr.com/download/
aggiungere nella <head> della pagina:
<head>
<meta charset="utf-8" />
<title>Title</title>
<link href="css/html5reset.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<script src="script/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="script/modernizr-2.0.6.js" type="text/javascript"></script>
</head>
Vittorio Maniezzo – Università di Bologna
47
24
Scarica
