HTML - UNISAcaprera.dia.unisa.it/TSW/MATERIALE/HTML5.pdf · Le API geolocation consentono di...

Tecnologie di Sviluppo per il WEB 1

HTML 5Mark Pilgrim

diveintohtml5.ep.io on-line

O'Reilly cartaceo


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


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)


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


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


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.


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

http://localhost/Html5/Modernizr/Modernizr.html


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.


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)


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


Geolocation:Proprietà dell'oggetto position

1. coords:– coords.latitude– coords.longitude– coords.altitude– coords.accuracy– coords.altitudeAccuracy– coords.heading– coords.speed

2. timestamp


Geolocation: Esempio

Esempio

http://localhost/Html5/geolocation/geolocation.html


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


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


Local Storage: storage detection

usiamo Modernizrif (Modernizr.localstorage) {

// window.localstorage è disponibile} else { // non c'è supporto nativo}

È una proprietà dell'oggetto window


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


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...


Nota

La funzione associata all'evento storage avrà un solo parametro che sarà inizializzato di default con un oggetto StorageEvent


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


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ì


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


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


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


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


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


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


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


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


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>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd


Abbreviare i tag (2) HTML 4: <html xmlns=”http://www.w3.org/1999/xhtml”

lang=”en”

xml:lang=”en”>

HTML 5: <html lang=”en”>


Abbreviare i tag (3) HTML 4: <meta http-equiv=”Content-Type” content=”text/html”;

charset=”utf-8” />

HTML 5: <meta charset=”utf-8”>


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”


...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


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


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


Tag Semantici: esempio (1)


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>


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...


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>


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


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


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>


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.


Section: Esempio

...

<section>

<h1>WWF</h1>

<p>The World Wildlife Foundation was born in 1961...</p>

</section>

...


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


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>

…


TAG DI INTERATTIVITÀ CANVAS COMMAND DETAILS

BACK


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”);

...


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


Canvas: Esempio…

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

//Quadrato

ctx.fillStyle='#FF0000';

ctx.fillRect(20,30,100,100);

...

Esempio

http://localhost/Html5/canvas/Canvas.php


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

http://localhost/Html5/command/command.php


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


TAG DI MULTIMEDIALITÀ NATIVA

VIDEO AUDIO EMBED


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


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


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


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)

Video: Esempio<video controls="true" height="350" width="350" poster="asd.jpg">

<source src="auto.mp4" type="video/mp4">



</source><source src="auto.webm" type="video/webm">



</source><source src="auto.ogg" type="video/ogg">

Il tuo browser non supporta il tag video. Aggiornalo!

</video>

Esempio

http://localhost/Html5/video/video.php


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

http://localhost/Html5/audio/Audio.php


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

http://localhost/Html5/embed/embed.php


TAG DI TEMPO E UNITÀ DI MISURA

MATTER PROGRESS TIME


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

http://localhost/Html5/meter/meter.php


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

http://localhost/Html5/progress/progress.php


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

http://localhost/Html5/time/time.php


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

http://localhost/Html5/attributi/placeholder.php


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

http://localhost/Html5/attributi/autofocus.php


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

http://localhost/Html5/attributi/email.php


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

http://localhost/Html5/attributi/url.php


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

http://localhost/Html5/attributi/number.php


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

http://localhost/Html5/attributi/range.php


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

http://localhost/Html5/attributi/date.php


Moduli: (7/12) Calendario per scelta data

– Esempio di validazione non andata a buon fine


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

http://localhost/Html5/attributi/search.php


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


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

http://html5test.com/

HTML - UNISAcaprera.dia.unisa.it/TSW/MATERIALE/HTML5.pdf · Le API geolocation consentono di...

Documents

Transcript of HTML - UNISAcaprera.dia.unisa.it/TSW/MATERIALE/HTML5.pdf · Le API geolocation consentono di...