html - unisacaprera.dia.unisa.it/tsw/materiale/html5.pdf · le api geolocation consentono di...
TRANSCRIPT
Tecnologie di Sviluppo per il WEB 1
HTML 5Mark Pilgrim
diveintohtml5.ep.io on-line
O'Reilly cartaceo
Tecnologie di Sviluppo per il WEB 2
Scopo di HTML 5Tra gli obiettivi che gli sviluppatori si sono proposti ci sono:
C o n t i n u a r e a m a n t e n e r e l e potenzialità delle versioni precedenti.Mark-up semantici per una migliore leggibilità del codice
– Per esseri umani (non-vedenti, etc...)
– Per spider e SEO
Ridur re uso d i plug-in nelle applicazioni web
Tecnologie di Sviluppo per il WEB 3
Sintassi HTML5 è compatibile con HTML4 e
XHTML1, ma non è compatibile con caratteristiche SGML esoteriche di HTML4, – processing instructions– shorthand markup
(Che noi non abbiamo neanche visto dato che non sono supportati dai browser)
I documenti che usano sintassi HTML sono “serviti” con il text/html media type (MIME TYPE)
Tecnologie di Sviluppo per il WEB 4
MIME Types Web-server spedisce vari header prima
di spedire la pagina di mark-up Tra i più importanti:
– Content-type: text/html
È detto MIME-type della pagina– Questo header è l 'UNICA cosa che
determina cosa è una particolare risorsa• E quindi come deve essere resa
Tecnologie di Sviluppo per il WEB 5
Rilevare HTML5
Il DOM costruito dal browser per una pagina è costituito da oggetti, che rappresentano gli elementi HTML della pagina:
– Ognuno ha delle proprietà
In HTML5, ci sono oggetti che hanno una proprietà “unica”– Li identifica quindi univocamente.
Ci sono 4 tecniche per il rilevamento
Tecnologie di Sviluppo per il WEB 6
Rilevare HTML5: Le 4 tecniche 1) Testare se una certa proprietà esiste
– Su un oggetto globale (ad esempio)
2) Creare un elemento e...goto 1 3) Creare un elemento, verificare se
esiste un metodo, chiamarlo e verificare il valore restituito
4)Creare un elemento, settare una proprietà ad un valore e verificare se la proprietà ha mantenuto quel valore.
Tecnologie di Sviluppo per il WEB 7
Rilevare HTML5: Modernizr Una facile alternativa è quella di usare la
libreria open-source Javascript (valida anche per CSS3)– Modernizr
<script src="modernizr.min.js"> </script>
if (Modernizr.canvas) { // let's draw some shapes!
} else { // no native canvas support available :(}
Esempio
Tecnologie di Sviluppo per il WEB 8
Geolocation Dove sei?
– Indirizzo IP, wireless, cellullare, gps
Le API geolocation consentono di condividere la propria posizione con siti ritenuti affidabili
Latitudine e longitudine sono rese disponibili a JS nella pagina web, che quindi le può mandare al server web.
Tecnologie di Sviluppo per il WEB 9
Proprietà geolocation È una nuova proprietà di navigator Esempio:
function getLocation() {if (Modernizr.geolocation) { navigator.geolocation.getCurrentPosition(showMap);} else { // non c'è supporto nativo}
} A questo punto il browser mostra una finestra pop-up (non
bloccante) chiedendo se l'applicazione può spedire i dati. showMap è una call-back function (definita dal
programmatore)
Tecnologie di Sviluppo per il WEB 10
Geolocation: funzione showMapfunction showMap(position) {
var latitude = position.coords.latitude;var longitude = position.coords.longitude; // qui qualcosa da mostrare: una mappa?
} La funzione callback è chiamata con un singolo parametro,
che è un oggetto con due proprietà:1. coords2. timestamp
Tecnologie di Sviluppo per il WEB 11
Geolocation:Proprietà dell'oggetto position
1. coords:– coords.latitude– coords.longitude– coords.altitude– coords.accuracy– coords.altitudeAccuracy– coords.heading– coords.speed
2. timestamp
Tecnologie di Sviluppo per il WEB 12
Geolocation: Esempio
Esempio
Tecnologie di Sviluppo per il WEB 13
Local Storage HTML5 ha introdotto il concetto di localStorage, ovvero un
sistema di memorizzazione e gestione delle informazioni sul computer dell'utente che ci consente di memorizzare fino a 5 mega di dati.
Ma esiste già? I cookie, ma:1. Inclusi in ogni request
a) rallenta il serverb) trasmessi in chiaro (ma se si usa https....)
2. Limitati a 4KB• Sufficienti a rallentare, ma non sufficienti per
memorizzare qualcosa di significativo
Tecnologie di Sviluppo per il WEB 14
Local storage: desiderata Più spazio... ...sul client che persista dopo un refresh... ...e che non sia trasmesso al server! è chiamato anche
– HTML5 storage– DOM storage
limite di 5MB
Tecnologie di Sviluppo per il WEB 15
Local Storage: storage detection
usiamo Modernizrif (Modernizr.localstorage) {
// window.localstorage è disponibile} else { // non c'è supporto nativo}
È una proprietà dell'oggetto window
Tecnologie di Sviluppo per il WEB 16
Local Storage: HTML5 storage È basato su coppie chiave/valore
- Att.ne: valori sono stringhe (...nel caso usare parseInteger/parseFloat)
Metodi dell'oggetto localStorage:var foo = localStorage.getItem(“bar”);
localStorage.setItem(“bar”, foo); Il codice sopra può essere riscritto con un array associativo:
var foo = localStorage[“bar”];
localStorage[“bar”] = foo; Altri metodi
removeItem(key); clear();
key(n) → per ottenere l' n-ma chiave
Tecnologie di Sviluppo per il WEB 17
Local Storage: tracciare modifiche Viene lanciato l'evento storage sull'oggetto window quando... setItem() removeItem() clear()
…effettivamente provocano un cambiamento dello stato della memoriase si setta una chiave al suo valore attuale o si cancella una memoria vuota, allora non viene lanciato l'eventoQualche problema con IE per la gestione degli eventi...
Tecnologie di Sviluppo per il WEB 18
Nota
La funzione associata all'evento storage avrà un solo parametro che sarà inizializzato di default con un oggetto StorageEvent
Tecnologie di Sviluppo per il WEB 19
Proprietà evento EventStorage key
– La chiave che è stata aggiunta, rimossa, o modificata
oldValue– Il valore precedente o null se l'item è nuovo
newValue– Il valore nuovo o null se l'item è stato
rimosso
url– La url che ha chiamato il metodo che ha
scatenato l'evento
Tecnologie di Sviluppo per il WEB 20
Lavorare offline Semplificando il tutto....
– È una lista di URL dirette a :• HTML, CSS e JS file con immagini e altre risorse
La home page punta al– manifest file
Il browser legge questa lista, scarica le risorse elencate, le mette in cache e le mantiene aggiornate da questo momento in poi.– Quando si tenta di accedere al Web senza
connessione, si viene rediretti lì
Tecnologie di Sviluppo per il WEB 21
Local Storage: lavorare offline Gran parte del lavoro spetta ora allo
sviluppatore. Come si stabilisce se si è off-line?
– c'è una variabile nel DOM indicante se si è off-line– ci sono eventi scatenati al passaggio di stato on/off
Tecnologie di Sviluppo per il WEB 22
Local Storage: Il file cache.manifest
Per iniziare il download ed il caching delle risorse:
<!DOCTYPE html><html manifest=”/cache.manifest”><body>...
Necessario il content-typetext/cache-manifest
Tecnologie di Sviluppo per il WEB 23
Configurazione di Apache In Apache nel file httpd.conf
# Apache mimetype configurationtext/cache-manifest manifest
Se non possiamo accedere al file httpd.conf, allora nel file .htaccess– AddType text/cache-manifest .manifest
• Accertarsi che l'estensione dei file sia .manifest
Tecnologie di Sviluppo per il WEB 24
Local Storage: Manifest file La prima linea del file è:
CACHE MANIFEST
Ha tre sezioni, marcate da header:– explicit CACHE– online whitelist NETWORK– fallback FALLBACK
Se non sono esplicitate, il default è la sezione explicit
Tecnologie di Sviluppo per il WEB 25
Local Storage: explicit
CACHE MANIFEST /clock.css /clock.js /clock-face.jpg
Non ha header, quindi questa è la sezione explicit
Queste risorse sono scaricate e messe in cache e rese disponibili se si va off-line
Tecnologie di Sviluppo per il WEB 26
Local Storage: online-whitelistCACHE MANIFEST NETWORK: /tracking.php CACHE: /clock.css /clock.js /clock-face.jpg
NETWORK è la online-whitelist– Non va mai in cache
CACHE è la explicit
Tecnologie di Sviluppo per il WEB 27
Local Storage: fallbackCACHE MANIFEST FALLBACK: / /offline.html NETWORK: ...
Risorse sostitutive di quelle online che per qualche motivo non sono andate in cache.
Lo slash indica qualsiasi pagina del nostro sito e se non c'è la risorsa disponibile in cache si usa /offline.html
Tecnologie di Sviluppo per il WEB 28
Warning: L'aggiornamento di un file incluso nel
manifest non comporta l'aggiornamento della versione in cache
Perché il browser, per verificare se ci sono stati aggiornamenti, controlla il contenuto del file manifest e... questo non è cambiato!
Ogni volta che viene modificato un file della cache è necessario cambiare anche il file manifest– Ad esempio cambiare un commento
Tecnologie di Sviluppo per il WEB 29
Abbreviare i tag (1) HTML 4: <!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
HTML 5: <!DOCTYPE html>
Tecnologie di Sviluppo per il WEB 30
Abbreviare i tag (2) HTML 4: <html xmlns=”http://www.w3.org/1999/xhtml”
lang=”en”
xml:lang=”en”>
HTML 5: <html lang=”en”>
Tecnologie di Sviluppo per il WEB 31
Abbreviare i tag (3) HTML 4: <meta http-equiv=”Content-Type” content=”text/html”;
charset=”utf-8” />
HTML 5: <meta charset=”utf-8”>
Tecnologie di Sviluppo per il WEB 32
Abbreviare i tag (4) Tag <link> con attributo rel
– Link a risorse esterne• Per arricchire il documento
– Link a risorse interne
Esempio:<link rel=stylesheet” href=”file.css” />– Piccola ottimizzazione:
• Eliminazione di type=”text/css”
Tecnologie di Sviluppo per il WEB 33
...non solo abbreviare Ma anche nuovi elementi semantici:
– article – aside– audio – bdo – canvas – command – datalist – details
– meter – nav – output, – progress– rp– rt – ruby– section
– embed – figcaption – figure – footer– header– hgroup– keygen– mark
– source– summary – time– video – wbr
Tecnologie di Sviluppo per il WEB 34
TAG SEMANTICI header nav section article aside footer
Ad esempio, header Sostituisce <div id=”header”...>– In maniera molto naturale
– utile per blind-people e motori-di-ricerca
Tecnologie di Sviluppo per il WEB 35
Tag Semantici: Terminologia
<section>Definisce un contenuto generico
<article>Rappresentare articoli indipendenti
<header>, <footer>Blocchi di contenuti topmost e bottommost
<nav>Crea un menu di navigazione
<aside> Contenitore di approfondimento
SKIP
Tecnologie di Sviluppo per il WEB 36
Tag Semantici: esempio (1)
Tecnologie di Sviluppo per il WEB 37
Article Il tag <article> rappresenta una sezione
autonoma in un documento, pagina, applicazione o sito(infatti è potenzialmente ridistribuibile o riutilizzabile, e quindi ripubblicabile in parte o interamente in diverse pagine).
In sostanza, anche se nelle specifiche non è espresso, l'elemento <article> rappresenta una forma particolare di <section>
Tecnologie di Sviluppo per il WEB 38
Navigation Il tag <nav> è definito per quella parte
della pagina che contiene i link di navigazione interni al sito.
Questo contenitore di link deve essere la barra di navigazione principale del sito e può essere un menu verticale, orizzontale, con sottomenu a comparsa ecc...
Tecnologie di Sviluppo per il WEB 39
Navigation: EsempioVECCHIO CODICE
<div id=”nav”>
<ul>
<li><a href=”#”>home</a></li>
<li><a href=”#”>blog</a></li>
<li><a href=”#”>gallery</a></li>
<li><a href=”#”>about</a></li>
</ul>
</div>
Tecnologie di Sviluppo per il WEB 40
Navigation: EsempioHTML5
<nav>
<ul>
<li><a href=”#”>home</a></li>
<li><a href=”#”>blog</a></li>
<li><a href=”#”>gallery</a></li>
<li><a href=”#”>about</a></li>
</ul>
</nav>
Cosa c'è di nuovo?
– Semanticamente si sta dicendo che è la lista di navigazione e non una semplice lista
Tecnologie di Sviluppo per il WEB 41
Footers Non si deve però intendere il tag footer
come piè di pagina ma come footer della section in cui è incluso (come con il tag header):
- Non necessariamente deve essere inserito solo alla fine di un documento
- All'interno di una pagina web possono essere presenti diversi <footer> anche più di uno per lo stesso elemento.
Semplifica di molto il mark-up delle pagine
Tecnologie di Sviluppo per il WEB 42
Footer: Esempio HTML4
<div id=”footer”>
<p> qui ci va tutto quello che normalmente va in un footer...
</p>
</div>
HTML5
<footer>
qui ci va tutto quello che normalmente va in un footer...
</footer>
Tecnologie di Sviluppo per il WEB 43
Section Il tag <section> è utile per definire
porzioni di pagina che indicano elementi differenti.
Questo elemento contiene, spesso, un <header> e un <footer>.
L’utilità non è solo pratica (nella divisione del codice), ma anche semantica per permettere di differenziare le sezioni del sito.
Tecnologie di Sviluppo per il WEB 44
Section: Esempio
...
<section>
<h1>WWF</h1>
<p>The World Wildlife Foundation was born in 1961...</p>
</section>
...
Tecnologie di Sviluppo per il WEB 45
Aside Rappresenta una sezione di una pagina
costituita da informazioni che sono marginalmente correlate al contenuto dell'elemento padre che la contiene, e che potrebbero essere considerate distinte da quest'ultimo.
Ѐ contenitore di approfondimento in cui possiamo inserire gruppi di link, pubblicità, bookmark e così via
Tecnologie di Sviluppo per il WEB 46
Aside: Esempio...
<p>La mia famiglia ha visitato il centro Epcot questa estate.</p>
<aside>
<h4>Epcot Center</h4>
Il Centro Epcot è un parco tematico a Disney World, in Florida.
</aside>
…
Tecnologie di Sviluppo per il WEB 47
TAG DI INTERATTIVITÀ CANVAS COMMAND DETAILS
BACK
Tecnologie di Sviluppo per il WEB 48
Canvas RFC: area (tela) bitmap, dipendente
dalla risoluzione per grafici, giochi, immagini visuali “al volo”.
Area rettangolare in cui usare JS per disegnarci.
Non ha un suo contenuto o un suo bordo...
<canvas id=”a” width=”300” height=”225”></canvas>
var aCanvas=document.getElementById(“a”);
...
Tecnologie di Sviluppo per il WEB 49
Canvas: Alcune funzioni getContext(“2d”)
– Il contesto: dove accade tutto fillRect(x,y,widht, height)
– Disegna un rettangolo riempito con lo stile definito da...
fillStyle, strokeStyle– Colore
strokeRect(x,y,width, height)– Disegna un rettangolo ma solo con i bordi
colorati con il colore indicato da strokeStyle ClearRect
– Cancella il rettangolo
Tecnologie di Sviluppo per il WEB 50
Canvas: Esempio…
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
//Quadrato
ctx.fillStyle='#FF0000';
ctx.fillRect(20,30,100,100);
...
Esempio
Tecnologie di Sviluppo per il WEB 51
Command Il tag <command> rappresenta un
comando che l'utente può invocare ed è solitamente utilizzabile all'interno di toolbar e nel tag menu.
...
<menu>
<command onclick="alert('Hello')">Click Me!</command>
</menu>
…
Esempio
Tecnologie di Sviluppo per il WEB 52
Details
Il tag details rappresenta un widget informativo da cui l'utente può ottenere informazioni supplementari o controlli. Utilizzato con summary …
<details>
<summary>Copyright 1999-2011.</summary>
<p>All pages and graphics on this web site are the property of
the company Refsnes Data.</p>
</details>
…
Funziona sotto Chrome
Tecnologie di Sviluppo per il WEB 53
TAG DI MULTIMEDIALITÀ NATIVA
VIDEO AUDIO EMBED
Tecnologie di Sviluppo per il WEB 54
Video Youtube: incanalati con plug-in
– Flash (altri con QuickTime, RealPlayer)
HTML5 ha uno standard per far girare i video in una pagina web con– <video>
È responsabilità nostra stabilire quale browser supporta quale container (avi,mp4, ogg, flash, etc.) e quale codec
Tecnologie di Sviluppo per il WEB 55
Video Il container in realtà stabilisce come
memorizzare i file, non cosa memorizzare– Analogamente a zip, tar, etc. che
comprimono qualsiasi tipo di file
Il codec è il formato vero e proprio
Tecnologie di Sviluppo per il WEB 56
Video: AttributiIl tag <video> propone alcuni attributi specifici, oltre a quelli generici di ogni tag:
poster: l’indirizzo di una immagine statica per rimpiazzare il video se il browser non è in grado di visualizzarlo
controls: indica se deve essere visualizzata una interfaccia per controllare la riproduzione , l’interfaccia può permettere le funzioni: play, pause, salto ad una posizione del video (seek), cambio del volume, …
loop: indica se la riproduzione deve riprendere dall’inizio automaticamente al momento che arriva alla fine del video
Tecnologie di Sviluppo per il WEB 57
Video: un semplice mark-up <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag.</video>
controls: saranno mostrati i controlli. Ci sono software per fare l'encoding nei diversi
container e codec (e.g.: firefogg)
Tecnologie di Sviluppo per il WEB 58
Video: Esempio<video controls="true" height="350" width="350" poster="asd.jpg">
<source src="auto.mp4" type="video/mp4">
<!--Chrome eFirefox -->
</source><source src="auto.webm" type="video/webm">
<!-- Firefox e Opera -->
</source><source src="auto.ogg" type="video/ogg">
Il tuo browser non supporta il tag video. Aggiornalo!
</video>
Esempio
Tecnologie di Sviluppo per il WEB 59
Audio Il tag <audio> rappresenta un suono o
uno stream audio....
<audio controls="controls">
<source src="horse.ogg" type="audio/ogg" />
Your browser does not support the audio element.
</audio>
…
Esempio
Tecnologie di Sviluppo per il WEB 60
Embed L'elemento <embed> è già utilizzato da
anni per inserire contenuti interattivi o multimediali.
Era stato deprecato in HTML 4, ora è stato reintrodotto
…
<body>
<embed src="helloworld.swf" />
</body
…
Embed
Tecnologie di Sviluppo per il WEB 61
TAG DI TEMPO E UNITÀ DI MISURA
MATTER PROGRESS TIME
Tecnologie di Sviluppo per il WEB 62
Meter
Il tag <meter> rappresenta una misura scalare all'interno di un intervallo noto, o un valore frazionario....
<body>
<meter value="2" min="0" max="10">2 out of 10</meter>
<br />
<meter value="0.6">60%</meter>
</body>
…
Esempio
Tecnologie di Sviluppo per il WEB 63
Progress
Il tag <progress> rappresenta lo stato di completamento di un compito e può essere di due tipi:- indeterminato
- determinato
...<body>
The object's downloading progress:
<progress value="22" max="100"></progress>
</body>
…
Esempio
Tecnologie di Sviluppo per il WEB 64
Times Questo elemento è inteso come un modo
moderno per codificare le date e gli orari in maniera leggibile anche per i computer
Non è supportato da nessun browser<article>
<header>
<time pubdate datetime=”2012-10-22”> October 22, 2012
</time>
…
</article>
Esempio
Tecnologie di Sviluppo per il WEB 65
Moduli: (1/12) Tutti i browser se non riconoscono un
tipo, lo rendono come “text” Placeholder
L’attributo placeholder di HTML5 consente di visualizzare un breve suggerimento all’interno delle caselle input di tipo testo e delle textarea che scompare quando si dà il focus.
<form> <input name=”q” placeholder=”mittente...”> <input type=”submit” value=”ricerca tra le email”></form>
Esempio
Tecnologie di Sviluppo per il WEB 66
Moduli: (2/12) Autofocus
<form>
<input name=q autofocus>
<script>
if (!(“autofocus” in document.createElement(“input”))){
document.getElementById(“q”).focus();
}
</script>
<input type=submit value=ricerca>
</form>
Esmepio
Tecnologie di Sviluppo per il WEB 67
Moduli: (3/12) Email
<form> <input type=”email”> <input type=”submit” value=”VAI”></form>
La resa è identica al tipo “text”, ma in alcuni casi, come per l'Iphone/HTC, cambia la tastiera offerta per comprendere tasti utili (@, …)
Esempio
Tecnologie di Sviluppo per il WEB 68
Moduli: (4/12) Indirizzi Web
<form> <input type=”url”> <input type=”submit” value=”VAI”></form>
La resa è identica al tipo “text”, ma in alcuni casi, come per l'Iphone/HTC, cambia la tastiera offerta per comprendere tasti utili (.com, …)
Esempio
Tecnologie di Sviluppo per il WEB 69
Moduli: (5/12) Numeri
<form> <input type=”number” min=”0” max=”10” step=”2” value=”6” <input type=”submit” value=”VAI”></form>
Alcune funzioni JS gratis a corredo– Input.stepUp(n), input.StepDown(n),
input.valueAsNumber Iphone/HTC: Tastierino numerico, operatori, ...
Esempio
Tecnologie di Sviluppo per il WEB 70
Moduli: (6/12) Numeri come slider
<form> <input type=”range” min=”0” max=”10” step=”2” value=”6” <input type=”submit” value=”VAI”></form>
ESEMPIO
Tecnologie di Sviluppo per il WEB 71
Moduli: (7/12) Calendario per scelta data
<form> <input type=”date”></form>…<script> var i=document.createElement(“input”); i.setAttribute(“type”, “date”); if (i.type == “text”) { //usa alternative... }</script>
ESEMPIO
Tecnologie di Sviluppo per il WEB 72
Moduli: (7/12) Calendario per scelta data
– Esempio di validazione non andata a buon fine
Tecnologie di Sviluppo per il WEB 73
Moduli: (8/12) Caselle di ricerca
<form> <input name=”q” type=”search”> <input type=”submit” value=”Find”></form>
In Safari la casella ha gli angoli arrotondati In Chrome e Safari
– Guardate a destra quando si inizia a scrivere...• Non è detto che funzioni.....
ESEMPIO
Tecnologie di Sviluppo per il WEB 74
Moduli: (9/12) Scelta di colori
<form> <input type=”color”></form>
Scelto un colore, restituisce la rappresentazione esadecimale– Supportato solo da Opera 11, per il momento
Tecnologie di Sviluppo per il WEB 75
Il browser supporta HTML 5?
Provate– http://html5test.com/
Fornisce un punteggio (max 500) che indica quanto il browser supporti HTML 5– Firefox 17.0 385– Safari 5.1.2 317– Chrome 23.0.1271.97 448