Html5 e css3 nuovi strumenti per un nuovo web

HTML5 e CSS3 nuovi strumenti per un nuovo web

Massimo [email protected]

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

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

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

Html5 e css3 nuovi strumenti per un nuovo web

Technology

Transcript of Html5 e css3 nuovi strumenti per un nuovo web