Post on 14-Jan-2015
description
HTML5 e CSS3 nuovi strumenti per un nuovo web
Massimo Bonannimassimo.bonanni@domusdotnet.org
http://codetailor.blogspot.com
@massimobonanni
2
Agenda
• Cos’è HTML5• HTML
– Tag semantici– ARIA e accessibilità– Nuova veste per le form– Il Canvas– Audio & Video– La rinascita dell’SVG
• CSS 3– I selettori– Supporto tipografico– Varie amenità
• Javascript– Local storage– Geolocalizzazione
3
HTML History
12 anni
4
5
HTML5=HTML+CSS+Javascript
HTML5 è la sinergia tra nuovi tag HTML, evoluzione del CSS (3.0) e nuove funzionalità Javascript:
– HTML usato per il markup e la semantica;
– CSS usato per lo stile e il layout;
– Javascript per l’interazione e la dinamicità.
6
I tag semantici
I nuovi tag semantici permettono di identificare in maniera semantica (cioè in base alla loro funzione di layout) le sezioni di un documento HTML:
Pre HTML5 HTML5
7
<section> e <article>• <section> definisce una sezione logicamente
distinta dalle altre.• <article> definisce un contenuto.
...<section>
<article> <header>
<h1>Intestazione contenuto</h1> </header> <section>Sottosezione</section>
</article>...<article>
... </article>
</section>...
8
<header> e <footer>
• <header> definisce una zona di intestazione (sia all’interno di una pagina che di una sezione);
• <footer> definisce un blocco di chiusura (sia all’interno di una pagina che di una sezione)
9
<figure> e <figcaption>• <figure> definisce una zona contenente
un’immagine, un grafico, una tabella, un esempio di codice, etc., etc.;
• <figcaption> definisce una didascalia per una <figure>.
<section> Contenuto articolo1 ........ <figure> <img src="./images/locandina.png"></img> <figcaption>La locandina dell'evento</figcaption> </figure></section>
10
<nav>
Permette di identificare una sezione deputata alla navigazione (ad esempio un menù):
...<nav>
<ul><li>...</li><li>...</li>
</ul></nav>...
...
11
Tag Semantici e Browser
12
DEMOI Tag Semantici
13
L’accessibilità:WAI-ARIA
HTML5 rivaluta completamente il concetto di accessibilità delle informazioni all’interno delle pagine web.
HTML5 affronta il problema utilizzando le specifiche WAI- ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications)
WAI-ARIA (o ARIA) è un’insieme di specifiche che permettono di definire stato, ruolo e proprietà di ogni parte della pagina in modo da rendere il tutto comprensibile agli Screen Reader.
14
Gli attributi ARIA
• TabIndex: l’attributo TabIndex è già presente in HTML4 per un numero limitato di tag e permette l’accesso da tastiera ai tag stessi. In HTML5 è stato completamente rivisto e, secondo le specifiche ARIA, esteso a tutti i tag.
• Role: l’attributo role permette di assegnare ad un tag (o ad un gruppo di tag) un ruolo semantico differente da quello che in realtà ha. Questo permette ad uno screen reader di dare il giusto «ruolo» al tag all’interno della pagina.
15
Stati e proprietà ARIA
Sono stati introdotti tutta una serie di attributi del tipo aria-* per rappresentare stati e proprietà ARIA da assegnare a tag HTML per permettere alle tecnologie di supporto le informazioni per gestire l’accessibilità:
aria-autocomplete aria-checked aria-disabled
aria-expanded aria-haspopup aria-hidden
aria-invalid aria-label aria-level
aria-multiline aria-multiselectable
aria-orientation
aria-pressed aria-readonly aria-required
aria-selected aria-sort aria-valuemax
aria-valuemin aria-valuenow aria-valuetext
16
ARIA e Web Browser
17
Web Form 2.0 - Required
Si può definire lo style per i tag <input> obbligatori:
<head> <style> input[type=text]:required:invalid
{background-color: red;} </style></head><body> <input type="text" required=""/> <input type="text" /></body>
Funziona con Firefox e Chrome, non con IE9 (si IE10)
18
Web Form 2.0 – INPUT TypesE’ possibile definire la tipologia di input che si intende accettare in un INPUT tag:
Email: <input type="email" name="email" required placeholder="Inserire una email valida" /><br/>URL: <input type="url" name="url" required placeholder="Inserire un url valido“
pattern="https?://.+" />
Possibili input sono: color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week;
Non tutti i browser supportano questa funzionalità;
La funzionalità è particolarmente utile nei siti per mobile.
19
Web Form 2.0 e Web Browser
20
DEMOWebForm 2.0
21
Canvas
• Il Canvas permette di disegnare «al volo» immagini bitmap come se si trattasse di una lavagna
• Per disegnare sul canvas, vengono utilizzati i «contesti»
• Le specifiche HTML5 prevedono sia il contesto 2D che quello 3D (anche se quest’ultimo non è implementato da nessun browser)
• E’ possibile disegnare sul contesto utilizzando le Canvas 2D o 3D API Javascript
22
Canvas
Per poter «disegnare» al di sopra del Canvas è necessario recuperare il contesto grafico:
function GetContext() { var canvas = document.getElementById("canvas"); if (canvas != null) { try { var ctx = canvas.getContext("2d"); return ctx; } catch (e) { return null; } } return null;}
23
Canvas
Il disegno sul canvas viene creato «pilotando» una penna virtuale tramite opportuni comandi:
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(20, 40);
ctx.lineTo(20, 240);
ctx.stroke();
Stile della successiva forma disegnata
Ampiezza della successiva linea
disegnata
Disegno della linea dal punto (20,40) al punto
(20,240)
24
Canvas e Web Browser
2D Context
Text API
3D Context
25
DEMOCanvas
26
Video
Il tag <video> permette di riprodurre un filmato in una pagina HTML senza l’ausilio di plug-in esterni (Flash, Silverlight, etc., etc.)
<video width="400" height="300" src="video.avi" poster="frame.png" autoplay controls loop> Il video non è supportato dal browser</video>
27
Video - CodecIl tag <source> permette la definizione di differenti sorgenti video (e relativi codecs)
<video width="400" height="300" poster="frame.png" controls > <source src="video.ogv"
type='video/ogg; codecs="theora,vorbis"'> <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E,mp4a.40.2"'></video>
I codec supportati, al momento, sono.• H.264 (avc1.*);• MPEG-4 (mp4v.*); • WebM (vp8);• Theora (theora);• Dirac (dirac).
28
Video – Media Queries
E’ possibile utilizzare le media queries di CSS3 per selezionare la sorgente video:
<video width="400" height="300" poster="frame.png" controls > <source src="video.ogv"
type='video/ogg; codecs="theora,vorbis"‘ media="screen AND (max-device-width: 600px)">
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E,mp4a.40.2"'></video>
29
Video e JavascriptIl tag video può essere gestito utilizzando Javascript.
<video src="./video/oceans-clip.mp4" id="video"> Il video non è supportato dal browser</video> ...<script type="text/javascript"> function videoControl() { var video = $("#video"); try { if (video[0].paused) video[0].play(); else video[0].pause(); } catch (e) { } }</script>
30
Video e CSSIl layout del tag <video>, come tutti i tag HTML, può essere modificato utilizzando uno style CSS<style type="text/css"> video { box-shadow: 20px 20px 5px #666; border-top-right-radius: 50px 50px; border-top-left-radius: 50px 50px; border: 10px solid blue; }</style>..<video src="./video/oceans-clip.mp4"> Il video non è supportato dal browser</video>
31
Video – Croce e delizia
Il tag <video> ha, ancora, alcune limitazioni:• Necessità dei codecs installati sulla macchina client e loro
eterogeneità;• Impossibilità di avere Live Streaming;• Impossibilità di scenari di Adaptive Streaming;• Non è possibile avere contenuti DRM (Digital Rights Management);• Non è prevista la possibilità di mandare in Full Screen il player
nativo.
Si ipotizza, in futuro, l’utilizzo del Dynamic Adaptive Streaming over HTTP (DASH), ancora in fase di definizione per sopperire alle problematiche relative allo streaming.
32
Video e Web Browser
32
33
DEMOVideo
34
Audio
Il tag <audio> permette di riprodurre un file audio in una pagina HTML senza l’ausilio di plug-in esterni
<audio src="IE9.mp3" controls> <br /> <p>Audio non supportato!!</p> <br /></audio>
35
Audio – Codec, Media Query e javascript
I ragionamenti fatti per il tag <video> possono essere applicati anche al tag <audio>:
• Si possono avere più sorgenti audio con differenti codecs;
• Si possono selezionare le sorgenti audio tramite le Media Queries;
• Il flusso audio può essere controllato da Javascript.
36
Audio – Croce e delizia
Anche il tag <audio>, come il suo «fratello» <video>, ha, ancora, alcune limitazioni:
• Necessità dei codecs installati sulla macchina client e loro eterogeneità;
• Impossibilità di avere Streaming;
• Non è possibile avere contenuti DRM (Digital Rights Management);
37
Audio e Web Browser
37
38
La rinascita dell’SVGSVG (Scalable Vector Graphics) è un linguaggio di grafica vettoriale bidimesionale basato su XML sviluppato dal consorzio W3C e diventato uno standard nel settembre 2001.
Le principali caratteristiche sono:• Testuale;• Vettoriale;• Open;• XML;• Interattivo;• Dinamico.
39
La rinascita dell’SVG• Testuale: è possibile creare e modificare un file SVG con un semplicissimo
editor di testo e si può comprimere un file testuale in maniera molto efficiente favorendo così l'utilizzo di SVG in ambito Web;
• Vettoriale: è possibile scalare e zoommare a piacimento l'immagine SVG senza avere una perdita di qualità dell'immagine stessa;
• Open: non è un formato proprietario, le specifiche ed i lavori del Working Group che si occupa di SVG sono liberamente consultabili sul sito del W3C;
• XML: questo permette di utilizzare, per lo sviluppo di applicazioni che manipolano file SVG, i numerosi strumenti di sviluppo già esistenti per XML;
• Interattivo: è possibile rendere l'immagine SVG interattiva tramite Javascript;
• Dinamico: è possibile creare delle animazioni attraverso l'uso del linguaggio di animazione SMIL (Synchronized Multimedia Integration Language) anch'esso sviluppato dal W3C.
40
SVG<?xml version="1.0" encoding="utf-8" standalone="no" ?><svg width="300" height="200« xmlns="http://www.w3.org/2000/svg"> <text x="10" y="30" font-family="Verdana" font-size="30" dx="2" dy="8" rotate="25" style="fill:blue"> DomusDotNet </text></svg>
41
SVGPer visualizzare un SVG si può procedere in uno di questi modi:
• All’interno della pagina utilizzando il tag HTML5 <svg> (inline);• Visualizzando direttamente il file SVG come fosse una pagina HTML (file con
estensione .svg);• Immagine SVG all’interno del CSS; • All’interno della pagina utilizzando il tag <object>:
<object data="rect2.svg" width="100%" height="400px“ type="image/svg+xml"></object>
<embed id="mySVG" src="lingrad01.svg“
type="image/svg+xml“ />
• All’interno della pagina utilizzando uno dei tag <img>, <embed>, <iframe>, or <frame>:
42
SVG – Le animazioniPossiamo animare un SVG utilizzando:• Javascript• SMIL (Synchronized Multimedia Integration
Language)
<circle cx="100px" cy="100px" r="20px"> <animate attributeName="r" attributeType="XML“
begin="1s" dur="2s" from="20px" to="50px"></circle>
43
SVG e Web Browser
43
Basic Support
SMIL Animation
44
DEMOSVG
45
CSS3
.td:nth-child(even) { background:red;}
.td:nth-child(odd) { background:black;}h2:first-child {…} div.text > div {…} h1 + header {…}
Nuovi selettori
Attributi
Negazioni
input[type="text"] {color:red;}
:not(.box) {color:white;} :not(span) {display:block;}
46
CSS3 – OpenType Font
@font-face { font-family: MyFont; src: url(‘MyFont.otf');}
Supporto per i font in formato OpenType (evoluzione dei TrueType Font).
47
CSS3 – Troncamento del testo, opacità e bordi
CSS3 introduce il supporto a :• Troncamento del testo:
• Opacità:
• Bordi arrotondati:
text-overflow: ellipsis;
opacity:0.7;
border-radius:50px;
48
DEMOCSS3
DOM Storage
• Permette di memorizzare informazioni utente lato client
• Può essere disabilitato dall’utente (attivo per default)
DOM Storage• Paragonabile al classico cookie avendo la capacità di
memorizzare informazioni relative all’utente lato client
• Permette di memorizzare più informazioni rispetto al cookie:– Cookie <= 4Kb (fino a 20 entità chiave/valore)– DOM Storage <= 10 Mb
• Differente storage per ogni istanza di IE aperta (a differenza del cookie che è condiviso da tutte le istanze) oppure comune a tutte le istanze
DOM Storage• Il DOM Storage non invia i dati al server ad ogni richiesta
(come accade per I cookie)
• I dati contenuti nel DOM Storage non scadono come accade per i cookie
• A differenza dei cookie, è facile accedere ai dati utilizzando un'interfaccia standard, che i produttori di browser stanno piano piano adottando
• Memorizza informazioni in formato stringa
DOM Storage – Session StoragePermette di memorizzare informazioni che possono essere recuperate per tutte le pagine di una stessa sessione
window.sessionStorage[chiave] = valore;
window.sessionStorage.setItem(chiave, valore);
window.sessionStorage.chiave = valore;
Expando Property
DOM Storage – Session Storage
• I valori memorizzabili sono di tipo chiave/valore con entrambi di tipo stringa
• I valori da memorizzare con tipo differente dalla stringa debbono essere convertiti (dallo sviluppatore) in stringa prima di essere inseriti nel SessionStorage
DOM Storage – Local Storage• Il Local Storage si estende su più finestre e persiste oltre la
sessione corrente del browser
• Consente alle applicazioni Web di memorizzare quasi 10 MB di dati dell'utente
• Fornisce aree di memoria persistente per i domini– ogni dominio e sotto-dominio hanno aree separate per la
memorizzazione dei dati– un dominio può accedere all’area di memoria del sotto-dominio– un sotto-dominio può accedere all’area dati del dominio
gerarchicamente superiore
DOM Storage – Local Storage
window.localStorage[chiave] = valore;
window.localStorage.setItem(chiave, valore);
window.localStorage.chiave = valore;
Expando Property
DOM Storage
Attenzione!!!I dati contenuti nel DOM Storage sono “più” pubblici dei cookie non potendo essere “limitati” ad un particolare percorso del dominio e, soprattutto, perché le chiavi di accesso possono essere enumerate
57
DEMOLocal Storage & Session Storage
GeoLocalizzazione• L’oggetto navigator.geolocation ci permette
di accedere alle funzionalità di GeoLocalizzazione.• Il metodo getCurrentPosition, ad esempio,
restituisce le coordinate geografiche del client (o meglio l’ultima posizione nota in cache):if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) {
var lat=position.coords.latitude;var long=position.coords.longitude;});
}else { alert("Il tuo browser non supporta le GeoAPI");}
GeoLocalizzazione• Il metodo getCurrentPosition è, ovviamente,
asincrono per non bloccare la UI e prevede una call-back a cui viene passato l’oggetto position:– coords : le coordinate della posizione;– timestamp: è un valore che fornisce il timestamp della rilevazione
geografica.
• Alcuni browser possono aggiungere anche informazioni accessorie (ad esempio la risoluzione dell’indirizzo).
GeoLocalizzazione• Se utilizziamo la geolocalizzazione nelle nostre
pagine, l’utente verrà comunque avvertito della cosa (per garantire la privacy).
61
DEMOGeoLocalizzazione
Un grazie agli sponsor...
Q&A
Riferimenti utili• Specifiche W3C
http://www.w3.org/TR/html5/
• When can I use...http://caniuse.com/#
• Modernizrhttp://www.modernizr.com/
• Beauty Of The Webhttp://www.beautyoftheweb.com