• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html5 e css3 nuovi strumenti per un nuovo web
 

Html5 e css3 nuovi strumenti per un nuovo web

on

  • 1,229 views

Sessione omonima dell'evento "WWW - We Want Web" di DomusDotNet

Sessione omonima dell'evento "WWW - We Want Web" di DomusDotNet

Statistics

Views

Total Views
1,229
Views on SlideShare
1,228
Embed Views
1

Actions

Likes
0
Downloads
18
Comments
0

1 Embed 1

http://nodeslide.herokuapp.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html5 e css3 nuovi strumenti per un nuovo web Html5 e css3 nuovi strumenti per un nuovo web Presentation Transcript

    • HTML5 e CSS3 nuovistrumenti 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
    • HTML History 3
    • 4
    • HTML5=HTML+CSS+JavascriptHTML5 è la sinergia tra nuovi tag HTML, evoluzionedel 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 dellevento</figcaption> </figure> </section> 9
    • <nav>Permette di identificare una sezione deputata allanavigazione (ad esempio un menù): ... <nav> <ul> <li>...</li> <li>...</li> </ul> </nav> ... ... 10
    • Tag Semantici e Browser 11
    • I Tag SemanticiDEMO 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 - RequiredSi 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 TypesE’ possibile definire la tipologia di input che si intendeaccettare 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.0DEMO 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
    • CanvasPer poter «disegnare» al di sopra del Canvas è necessariorecuperare 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
    • CanvasIl disegno sul canvas viene creato «pilotando» una pennavirtuale tramite opportuni comandi: Stile della successiva forma disegnatactx.strokeStyle = "black";ctx.lineWidth = 2; Ampiezza della successiva lineactx.beginPath(); disegnatactx.moveTo(20, 40);ctx.lineTo(20, 240); Disegno della linea dal punto (20,40) al puntoctx.stroke(); (20,240) 23
    • Canvas e Web Browser 24
    • CanvasDEMO 25
    • VideoIl tag <video> permette di riprodurre unfilmato in una pagina HTML senza l’ausilio diplug-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 - CodecIl tag <source> permette la definizione di differenti sorgentivideo (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 QueriesE’ possibile utilizzare le media queries di CSS3per 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 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> 29
    • 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> 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
    • VideoDEMO 33
    • AudioIl tag <audio> permette di riprodurreun file audio in una pagina HTML senzal’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 deliziaAnche 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’SVGSVG (Scalable Vector Graphics) è un linguaggio di graficavettoriale bidimesionale basato su XML sviluppato dalconsorzio 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ì lutilizzo di SVG in ambito Web; • Vettoriale: è possibile scalare e zoommare a piacimento limmagine SVG senza avere una perdita di qualità dellimmagine 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 limmagine SVG interattiva tramite Javascript; • Dinamico: è possibile creare delle animazioni attraverso luso del linguaggio di animazione SMIL (Synchronized Multimedia Integration Language) anchesso 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
    • 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>• 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 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> 42
    • SVG e Web Browser 43
    • SVGDEMO 44
    • CSS3Nuovi 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 FontSupporto 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 bordiCSS3 introduce il supporto a :• Troncamento del testo: text-overflow: ellipsis;• Opacità: opacity:0.7;• Bordi arrotondati: border-radius:50px; 47
    • CSS3DEMO 48
    • 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 uninterfaccia standard, che i produttori di browser stanno piano piano adottando• Memorizza informazioni in formato stringa
    • DOM Storage – Session StoragePermette di memorizzare informazioni che possonoessere recuperate per tutte le pagine di una stessasessione 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 dellutente• 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 Storagewindow.localStorage[chiave] = valore;window.localStorage.setItem(chiave, valore);window.localStorage.chiave = valore; Expando Property
    • DOM StorageAttenzione!!!I dati contenuti nel DOM Storage sono“più” pubblici dei cookie non potendoessere “limitati” ad un particolarepercorso del dominio e, soprattutto,perché le chiavi di accesso possono essereenumerate
    • Local Storage & Session StorageDEMO 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).
    • GeoLocalizzazioneDEMO 61
    • Un grazie agli sponsor...
    • Q&A
    • 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