Html5 e css3 nuovi strumenti per un nuovo web

HTML5 e CSS3 nuovi
strumenti per un nuovo web

Massimo Bonanni
massimo.bonanni@domusdotnet.org
http://codetailor.blogspot.com
@massimobonanni

Agenda
• Cos’è HTML5 • Javascript
• HTML – Local storage
– Tag semantici – Geolocalizzazione
– ARIA e accessibilità
– Nuova veste per le form
– Il Canvas
– Audio & Video
– La rinascita dell’SVG
• CSS 3
– I selettori
– Supporto tipografico
– Varie amenità

2

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

5

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

6

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

7

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

8

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

9

<nav>
Permette di identificare una sezione deputata alla
navigazione (ad esempio un menù):

...
<nav>
<ul>
<li>...</li>
<li>...</li>
</ul>
</nav>
...
...

10

Tag Semantici e Browser

11

I Tag Semantici
DEMO

12

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.

13

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.

14

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

15

ARIA e Web Browser

16

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)

17

Web Form 2.0 – INPUT Types
E’ 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.

18

Web Form 2.0 e Web Browser

19

WebForm 2.0
DEMO

20

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

21

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;
}

22

Canvas
Il disegno sul canvas viene creato «pilotando» una penna
virtuale tramite opportuni comandi:

Stile della successiva
forma disegnata
ctx.strokeStyle = "black";
ctx.lineWidth = 2; Ampiezza della
successiva linea
ctx.beginPath(); disegnata
ctx.moveTo(20, 40);
ctx.lineTo(20, 240); Disegno della linea dal
punto (20,40) al punto
ctx.stroke();
(20,240)

23

Canvas e Web Browser

24

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>

26

Video - Codec
Il 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).

27

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>

28

Video e Javascript
Il tag video può essere gestito utilizzando Javascript.
<video src="./video/oceans-clip.mp4" id="video">
</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>
29

Video e CSS
Il 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">
</video>

30

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.

31

Video e Web Browser

32

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>

34

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.

35

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

36

Audio e Web Browser

37

La rinascita dell’SVG
SVG (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.

38

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.

39

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>

40

SVG
Per 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>

• All’interno della pagina utilizzando uno dei tag <img>, <embed>, <iframe>, or
<frame>:

<embed id="mySVG" src="lingrad01.svg“
type="image/svg+xml“ />

41

SVG – Le animazioni
Possiamo 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>

42

SVG e Web Browser

43

CSS3
Nuovi selettori
.td:nth-child(even) { background:red;}
.td:nth-child(odd) { background:black;}
h2:first-child {…}
div.text > div {…}
h1 + header {…}

Attributi
input[type="text"] {color:red;}

Negazioni
:not(.box) {color:white;}
:not(span) {display:block;}

45

CSS3 – OpenType Font

Supporto per i font in formato OpenType
(evoluzione dei TrueType Font).

@font-face {
font-family: MyFont;
src: url(‘MyFont.otf');
}

46

CSS3 – Troncamento del testo, opacità e bordi

CSS3 introduce il supporto a :
• Troncamento del testo:
text-overflow: ellipsis;

• Opacità:
opacity:0.7;

• Bordi arrotondati:
border-radius:50px;

47

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 Storage
Permette 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

Local Storage & Session Storage
DEMO

57

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

GeoLocalizzazione
DEMO

61

Riferimenti utili
• Specifiche W3C
http://www.w3.org/TR/html5/

• When can I use...
http://caniuse.com/#

• Modernizr
http://www.modernizr.com/

• Beauty Of The Web
http://www.beautyoftheweb.com

Html5 e css3 nuovi strumenti per un nuovo web

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Html5 e css3 nuovi strumenti per un nuovo web (20)

More from Massimo Bonanni (20)

Html5 e css3 nuovi strumenti per un nuovo web