HTML5 e CSS3 by Gabriele Gigliotti -- Read -- Imperial Library of Trantor

Index

Prefazione Ringraziamenti HTML: How Tough and Marvellous this Language is! (version n. 5)

Modernizr vs soluzioni fai da te

Come ti scopro il browser! Identificazione diretta della funzionalità

Farsi un’idea delle funzionalità supportate Librerie JavaScript Sicurezza e trattamento dei dati personali Riferimenti alle risorse citate e altri link utili Conclusioni

Semantica

Elementi di struttura Chi ben incomincia...

Perché tanta enfasi sulla codifica dei caratteri? Elemento <header> Elemento <nav> Elemento <footer> Elemento <section> Elemento <article> Elemento <aside> L’articolo e i suoi fogli di stile

Nuovi elementi

Elementi <figure> e <figcaption> Elemento <hgroup> Elemento <time> Elementi <ruby>, <rt>, <rp> Elementi <progress> e <meter> Elemento <mark>

Vecchi non più vecchi...

Elemento <a> Elemento <address> Elemento <b> Elemento <cite> Elemento <hr> Elemento <i> Elemento <label> Elemento <menu> Elemento <small> Elemento <strong>

Elementi e attributi obsoleti

Deprecato vs obsoleto

Riferimenti alle risorse citate e altri link utili Conclusioni

Web Forms 2.0 (prima parte)

Campi input

Migliore accessibilità Minore sforzo cognitivo

Mailbox temporanee Lo stile nella validazione: lavori in corso Le difficoltà di validazione di un indirizzo email La tastiera QWERTY Attributi booleani in HTML

url tel number range

Strategia alternativa Riferimenti alle risorse citate e altri link utili Conclusioni

Web Forms 2.0 (seconda parte)

Controlli di calendario

date time datetime e datetime-local month week

Color picker Il nuovo elemento datalist Nuovi attributi

autocomplete autofocus

“Closure” JavaScript library: la grande assente Autofocus, una strategia alternativa

form pattern placeholder required

Altri marcatori

Alcuni consigli Riferimenti alle risorse citate e altri link utili Conclusioni

Video & audio: la lingua franca del Web diventa multimediale

L’elemento <video>

Attributo poster Attributo preload Attributi autoplay e loop Attributi width e height Elemento <source>

Popcorn.js mette il turbo al tuo video L’elemento <audio> Le API JavaScript: il tuo telecomando!

Testare il supporto con Modernizr

Riferimenti alle risorse citate e altri link utili Conclusioni

Canvas

<canvas>, primi passi Un esempio pratico Gradienti lineari e radianti Immagini

drawImage(image, dx, dy); drawImage(image, dx, dy, dw, dh); drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

Testo Brevi considerazioni su SVG Riferimenti alle risorse citate e altri link utili Conclusioni

Microdata: la rivoluzione silenziosa

Microdata: la sintassi

Alcuni casi speciali

Caso 1: proprietà diverse hanno uno stesso valore Caso 2: stessa proprietà, valori diversi Caso 3: elementi innestati Caso 4: proprietà dichiarate al di fuori dall’elemento

Elementi tipizzati

Google Rich Snippet: le informazioni al servizio dei risultati di ricerca

Persone Recensioni

Recensioni singole Recensioni aggregate

Riferimenti alle risorse citate e altri link utili Conclusioni

Applicazioni web offline

Supporto Creare un’applicazione offline: il file manifest

Scenario 1: prima visita di scrivo.html Scenario 2: visite successive alla pagina web scrivo.html. Nessuna modifica al file manifest Scenario 3: visite successive alla pagina web scrivo.html. Il file manifest risulta modificato Scenario 4: una o più risorse tra quelle segnalate nel file manifest non sono disponibili

Riferimenti alle risorse citate e altri link utili Conclusioni

Oltre i cookie: più spazio per i tuoi dati!

Introduzione essenziale ai cookie Supporto Le due facce del Web Storage Interfaccia di programmazione Come accorgersi di modifiche dei dati salvati in locale Tutela dei dati personali Riferimenti alle risorse citate e altri link utili Conclusioni

Geolocalizzazione

Fratello, dove sei?

Cenni sulla sicurezza e sul trattamento dei dati personali Geolocalizzazione e Open Data

Supporto alla geolocalizzazione Il codice e la Geolocation API

Rilevamento “one-shot” delle coordinate geografiche con getCurrentPosition() Tracciamento di un percorso. watchPosition() e clearWatch()

Reverse geocoding Disabilitare la geolocalizzazione

Firefox Opera Chrome

Geotiquette Riferimenti alle risorse citate e altri link utili Conclusioni

CSS: Customizing pages So Strongly (version n. 3)

Nuovi selettori e pseudo-classi

Selettori di attributo

elem[attr*=”val”] elem[attr$=”val”]

Pseudo-classi di struttura

elem:root elem:empty elem:only-child elem:only-of-type elem:nth-child(n) elem:nth-last-child(n) elem:nth-of-type(n) elem:nth-last-of-type(n) elem:last-child elem:first-of-type elem:last-of-type

Altre pseudo-classi

elem:target elem:enabled, elem:disabled, elem:checked elem:not(selettore-di-esclusione) E ~ F

Riferimenti alle risorse citate e altri link utili Conclusioni

Web Fonts ed effetti tipografici

Web Fonts Effetti tipografici

Testo ombreggiato Ombreggiature multiple Word Wrap (come spezzare una parola) text-overflow

Impaginazione del testo in colonne Riferimenti alle risorse citate e altri link utili Conclusioni

Bordi e sfondi

Bordi

Ombreggiatura applicata ai blocchi: box-shadow Immagini applicate ai bordi: border-image

Sfondi

Sfondi multipli Sfondi: controllo delle dimensioni

background-origin e background-clip

Opacità

Riferimenti alle risorse citate e altri link utili Conclusioni

Trasformazioni

Funzioni di trasformazione

rotate() scale(), scalex() e scaley() skew(), skewx() e skewy() translate(), translateX() e translateY() transform-origin Trasformazioni multiple

Riferimenti alle risorse citate e altri link utili Conclusioni

Transizioni e animazioni

Transizioni

Transizioni multiple Modalità di transizione

Animazioni

animation-name animation-duration animation-iteration-count animation-direction animation-delay animation

Riferimenti alle risorse citate e altri link utili Conclusioni HTML5: tabella di supporto CSS3: tabella di supporto

← Prev
Back
Next →

← Prev
Back
Next →