Tavola dei Contenuti (TOC)

Che cos' HTML5?..........................................................................Error: Reference source not found La sua storia e il suo futuro.......................................................Error: Reference source not found Caratteristiche principali .................................................................Error: Reference source not found 1. Se antica per le nostre pa!ine e un ar"up pi# facile .......Error: Reference source not found

$. %ffline e stora!e....................................................................Error: Reference source not found &. '() di accesso ai de*ice........................................................Error: Reference source not found +. ,e- Soc"ets..........................................................................Error: Reference source not found 5. Multi edia............................................................................Error: Reference source not found .. /rafica0 dise!no ed effetti &1...............................................Error: Reference source not found 2. ,e- ,or"ers.........................................................................Error: Reference source not found E CSS& ?...................................................................................Error: Reference source not found (ro-le i....................................................................................Error: Reference source not found Ricapitolia o............................................................................Error: Reference source not found

HTML5 per chi *uol fare sul serio..................................................Error: Reference source not found Se antica..................................................................................Error: Reference source not found Connetti*it3................................................................Error: Reference source not found %ffline 4 Me ori55a5ione................................Error: Reference source not found Multi edia.........................................................Error: Reference source not found /rafica 4 Effetti &1..........................................Error: Reference source not found (resta5ioni 4 inte!ra5ione.................................Error: Reference source not found 'ccesso ai 1ispositi*i........................................Error: Reference source not found Stile....................................................................Error: Reference source not found 6i-lio!rafia .....................................................................................Error: Reference source not found Sito!rafia..........................................................................................Error: Reference source not found Licen5a d'uso....................................................................................Error: Reference source not found

Error: Reference source not found

HTML5 la nuo*a oda del o ento0 inne!a-il ente. Contraria ente a 7uanto a**iene spesso per *oca-oli di oda e di ar"etin!0 per80 HTML5 da**ero una realt3 ri*olu5ionaria che ca -ier3 sensi-il ente il nostro odo di *i*ere e fruire il 9e- : e dun7ue un ele ento sicura ente presente0 pro-a-il ente i portante della nostra *ita. Ma che cosa HTML5? )n 7uesto li-retto pro*ere o a dare una spie!a5ione se plice a co pleta di 7uesto ter ine e di tutte le tecnolo!ie che ne fanno parte per fornire una -ase teorica su cui fondare tutti i nostri fantastici e inno*ati*i pro!etti di s*iluppo. %ccorre prestare atten5ione ad alcuni articoli in cui si parla di HTML5 co e insie e di tecnolo!ie includendo sostan5ial ente tutte le pi# recenti no*it3 relati*e allo s*iluppo 9e- e alla crea5ione di web a lications. La defini5ione pi# corretta la se!uente:

l!HTML5 un lin"ua""io di #ar$u

er la struttura%ione delle a"ine web&

La sua storia e il suo futuro

Lo s*iluppo *enne a**iato dal !ruppo di la*oro Web Hypertext Application Technology Working Group ;,H'T,/< ;fondato nel $==+ da s*iluppatori appartenenti ad 'pple0 Mo5illa >oundation e %pera Soft9are< che si pose co e o-ietti*o 7uello di pro!ettare specifiche per lo s*iluppo di applica5ioni 9e-0 focali55andosi su i!liora enti e a!!iunte ad HTML e alle tecnolo!ie correlate. )ni5ial ente in contrasto con il ,orld ,ide ,e- Consortiu per le lun!a!!ini nel processo di e*olu5ione dello standard ht l e per la decisione del ,&C di orientare la standardi55a5ione *erso l'?HTML $ che non !aranti*a retro co pati-ilit30 lo stesso ,&C ha poi riconosciuto *alide tali oti*a5ioni0 annunciando di creare un apposito !ruppo per la standardi55a5ione dell'HTML5 e a--andonare l'?HTML $.=. 1al $==2 il ,H'T,/ ha colla-orato con il ,&C in tale processo di standardi55a5ione0 per poi decidere nel $=1$ di separarsi dal processo di standardi55a5ione del ,&C0 creando di fatto due *ersioni dell'HTML5: la *ersione del ,H'T,/ *iene definita co e @HTML Li*in! Standard@ e 7uindi in continua e*olu5ione0 entre 7uella del ,&C sar3 una unica *ersione corrispondente ad uno @snapshot@ del Li*in! Standard. )l ,orld ,ide ,e- Consortiu ha annunciato che la pri a *ersione dello standard sar3 pronta per fine $=1+ e l'ht l5.1 per il $=1.A la pri a Candidate Reco endation stata pu--licata dal ,&C il 12 1ice -re $=1$. Le no*it3 introdotte dall'HTML5 rispetto all'HTML + sono finali55ate soprattutto a

i!liorare il disaccoppia ento tra struttura0 definita dal ar"up0 caratteristiche di resa ;tipo di carattere0 colori0 eccetera<0 definite dalle diretti*e di stile0 e contenuti di una pa!ina 9e-0 definiti dal testo *ero e proprio. )noltre l'HTML5 pre*ede il supporto per la e ori55a5ione locale di !rosse 7uantit3 di dati scaricati dal 9e- -ro9ser0 per consentire l'utili55o di applica5ioni -asate su 9e;co e per ese pio le caselle di posta di /oo!le o altri ser*i5i analo!hi< anche in assen5a di colle!a ento a )nternet. )n particolare:

*en!ono rese pi# strin!enti le re!ole per la struttura5ione del testo in capitoli0 para!rafi e se5ioniA *en!ono introdotti ele enti di controllo per i *en!ono enu di na*i!a5ioneA oduli elettroniciA ulti ediali ;ta! B*ideoC e

i!liorati ed estesi !li ele enti di controllo per i

*en!ono introdotti ele enti specifici per il controllo di contenuti BaudioC<A

*en!ono deprecati o eli inati alcuni ele enti che hanno di ostrato scarso o nessun utili55o effetti*oA *en!ono estesi a tutti i ta! una serie di attri-uti0 special ente 7uelli finali55ati all'accessi-ilit30 finora pre*isti solo per alcuni ta!A *iene supportato Can*as che per ette di utili55are Da*aScript per creare ani a5ioni e !rafica -it apA introdu5ione della !eolocali55a5ione0 do*uta ad una forte espansione di siste i operati*i ;7uali 'ndroid e i%S0 tra i pi# diffusi<A o-ili

siste a alternati*o ai nor ali coo"ie0 chia ato ,e- Stora!e0 pi# efficiente0 il 7uale consente un note*ole rispar io di -andaA standardi55a5ione di pro!ra alcuni siti offlineA i Da*aScript0 chia ati ,e- ,or"ers e possi-ilit3 di utili55are

sostitu5ione del lun!o e co plesso doctEpe0 con un se plice BF1%CTG(E ht lC.

Caratteristiche rinci ali

1. Semantica per le nostre pagine e un markup pi facile

1opo s*ariati studi ;di %pera e di /oo!le< ci si accorti0 7ualche anno fa0 che i 9edesi!ners utili55a*ano con pi# fre7uen5a alcuni no i di classi 7uali @header@0 @footer@0 @na*@0 @article@ per identificare pi# o eno se pre !li stessi Bdi*C delle proprie pa!ine ;al5i la ano chi non ha usato @header@ o @footer@ co e classi del proprio di* di intesta5ione o di chiusura della pa!ina<. Si dun7ue pensato che sare--e stato utile introdurre dei nuo*i ta! per identificare 7uesti ele enti co uni e ricorrenti0 dando cosH anche un *alore se antico a 7ueste parti di una pa!ina. Ecco co e sono nati i nuo*i ele enti HTML5 BheaderC0 Bna*C0 BfooterC0 BasideC e tutti !li altri che potete scoprire le!!endo i nostri articoli su HTML5 e 9e- se antico0 do*e tro*erete articoli anche su icrofor ats0 icrodata e R1>0 altre tecnolo!ie le!ate a HTML5 e al se antic 9e-. )n a -ito accessi-ilit3 inoltre interessante l'inte!ra5ione con 'R)'0 un siste a di ar"up per i!liorare note*ol ente l'accessi-ilit3 delle nostre pa!ine 9e-. (er rendere pi# facile la frui5ione e la crea5ione di ar"up0 poi0 stata di !ran lun!a se plificata la parte di @*alida5ione@0 in particolare rispetto a docu enti ?ML 7uali ?HTML. sufficiente ricordare che il doctEpe0 una *olta una pappardella infinita0 adesso un se plice: '()OCT*+E ht#l, 6asta 7uesto per indicare che il nostro docu ento una pa!ina HTML5.

2. Offline e storage
HTML5 l'insie e di tecnolo!ie che *uole trasfor are )nternet da un se plice catalo!o di pa!ine di testo in un i enso archi*io di a lica%ioni web0 o**ero stru enti con fun5ionalit3 a*an5ate e interfaccia user:friendlE per @fare cose@0 non solo per consultare docu enti. )n 7uesto senso0 le due tecnolo!ie che rendono possi-ile la @ a!ia@ di una *era e propria applica5ione scritta in HTML5 sono: 'pp Cache: per dire al -ro9ser 7uali file ;HTML0 i a!ini0 CSS0 Da*aScript< sal*are in locale cosH da consentire una na*i!a5ione e un utili55o dell'applica5ione anche 7uando si offline Local Stora!e: un'e*olu5ione dei coo"ies0 olto pi# facile da !estire e soprattutto con 5 e!a ;al eno< di spa5io a disposi5ione per sal*are dati diretta ente dal -ro9ser0 sen5a passare da un data-ase centrali55ato ;e 7uindi ra!!iun!i-ile solo 7uando connessi<

3. API di accesso ai device

HTML5 *uole essere la tecnolo!ia di s*iluppo del futuro. E il futuro non solo pi# il nostro caro des"top o note-oo": i(hone0 'ndroid0 i(ad0 altri ta-let : 7uesti sono !li stru enti con cui o!!i e soprattutto do ani si utili55er3 il 9e-. (er sfruttare al assi o le fun5ionalit3 di tutti 7uesti de*ice HTML5 pre*ede l'utili55o di una serie di '() ;o**ero di @interfacce di pro!ra a5ione@< per accedere a caratteristiche e dati specifici dei *ari ter inali: attual ente !i3 i ple entata e fun5ionante sulla a!!ior parte dei -ro9ser0 telefonini e ta-let la !eolocali55a5ione ;il de*ice co unica al -ro9ser la posi5ione dell'utente e dun7ue il nostro Da*aScript pu8 a!ire di conse!uen5a< a sono !i3 in fase a*an5ata di pro!etta5ione altre '() per utili55are ad ese pio la fotoca era0 la lista dei contatti o i dispositi*i audio.

4.

e! Sockets

Ino dei pro-le i pi# ardui che o!ni de*eloper affronta nella sua carriera far co unicare il il -ro9ser con il ser*er sen5a do*er o!ni *olta ricaricare la pa!ina0 aprendo cio una connessione diretta e a!!iorna-ile a prescindere dal resto della pa!ina. ,e- Soc"ets risol*e proprio 7uesto pro-le a: 7uesta tecnolo!ia ;non ancora del tutto diffusa e i ple entata per pro-le i le!ati alla sicure55a a co un7ue !i3 a--astan5a @ atura@ e fun5ionante0 ad ese pio0 su i(hone< consente di creare un canale di co unica5ione full:dupleJ tra il -ro9ser e il ser*er0 dando cosH la possi-ilit3 di @dialo!are@ in aniera se plice e user:friendlE per creare0 ad ese pio0 applica5ioni di chat in realti e o altre applica5ioni che richiedono uno sca -io costante di infor a5ioni fra client e ser*er ;o fra *ari client0 passando dal ser*er<.

". #ultimedia
Che direi del supporto nati*o nei -ro9ser di audio e *ideo all'interno del -ro9ser? HTML5 ha introdotto i due ta! BaudioC e B*ideoC per inserire in aniera facile0 *eloce e sen5a l'utili55o di plu!in esterni ;tipo >lash o Sil*erLi!ht< dei file audio o dei file *ideo. La cosa fantastica di tutto ci8 che0 contraria ente a 7uanto a**iene ad ese pio con >lash0 7uesti ele enti sono parte del 1%M e dun7ue possono essere li-era ente odificati e !estiti da Da*aScript : ad ese pio in co -ina5ione con altri o!!etti HTML5 tipo il can*as per anipolare in te po reale un *ideo ;7uesto fantastico0 da !uardare con >irefoJ<. (ro*ate a farlo con >lashF

$. %rafica& disegno ed effetti 3'

'--ia o citato can*as0 ricordia o anche SK/: due stru enti per dise!nare ;il pri o in

@-it ap@0 il secondo *ettoriale< diretta ente sulla nostra pa!ina 9e- utili55ando se plice ente un ta!
<canvas>

e un po' di Da*aScript. )l risultato? 6eh0 sare--e troppo lun!a la lista di ese pi e possi-ilit3 di utili55o di can*as e SK/0 a date un 'occhiata a 7uesto !ioco stile 1oo : tutto in Da*aScriptF

(.

e!

orkers

Co e a--ia o *isto0 Da*aScript sta di*entando un lin!ua!!io se pre pi# co plesso e potente0 richiedendo in alcuni casi una 7uantit3 di risorse non indifferente. (urtroppo0 7uesto *uol dire spesso rallentare tutto il -ro9ser0 rendendo la na*i!a5ione nel resto della pa!ina o l'utili55o di altre finestre 7uasi i possi-ile. (er risol*ere 7uesto pro-le a stata in*entata la tecnolo!ia ,e- ,or"ers0 o**ero un siste a per @sle!are@ un'atti*it3 intensi*a dal resto dell'interfaccia utente: in sostan5a0 si decide che una fun5ione de*e essere ese!uita sen5a che 7uesta -locchi l'utili55o del sito e dun7ue0 entre si attendono i risultati ;ad ese pio di un calcolo co plesso o di una 7uerE su un altro ser*er< possi-ile co un7ue utili5are le altre fun5ionalit3 della 9e- app e na*i!are sulla pa!ina co e se nulla stesse i pe!nando in aniera intensi*a il processore e il -ro9ser.

) *SS3 +
CSS& ri!uarda la presenta5ione di un docu ento e dun7ue una cosa sle!ata da HTML5 che in*ece ri!uarda il contenuto0 i dati. Ricordia o solo che0 contestual ente alle no*it3 che a--ia o indicato0 nato per l'appunto CSS&0 o**ero un nuo*o standard CSS con un sacco di nuo*e ed esaltanti caratteristiche per rendere a dir poco stra-ilianti dal punto di *ista !rafico le nostre pa!ine 9e-.

Pro!lemi
Tutto -ello0 tutto fantastico? Luasi... ) pro-le i principali di HTML5 sono due: 1< non ancora una standard definito a ancora0 e per un -el po'0 una specifica in fase defini5ione. Tutte le tecnolo!ie che *i a--ia o indicato in 7uesto tutorial sono a--astan5a @chiuse@ e dun7ue possono essere utili55ate con tran7uillit3 a -ene ricordare che lo standard finale0 a 7uanto pare0 non sar3 finito entro il $=$$ ;o 7ualcosa del !enere...< $< il pro-le a principale che il supporto di 7ueste fun5ionalit3 non ancora total fra i *ari -ro9ser e ;soprattutto in a -ito CSS&< sussistono ancora delle solu5ioni @proprietarie@ ad ese pio per alcuni ta! e classi. M -ene dun7ue utili55are se pre sia delle li-rerie tipo Moderni5r che ci a**ertono su 7uali fun5ionalit3 sono supportate dal -ro9ser che sta *isuali55ando le nostre pa!ine e soprattutto pro!ettare la nostra 9e- app per a*ere delle solu5ioni di fall-ac" ;pensia o ad ese pio ad una solu5ione >lash per i -ro9ser che non accettano il ta! B*ideoC<

,icapitoliamo.
Le nuo*e tecnolo!ie HTML5 sono: Se antica e ar"up pi# facile %ffline e stora!e '() di accesso ai de*ice ,e- Soc"ets Multi edia /rafica0 dise!no ed effetti &1 ,e- ,or"ers

%ra: dite i *oi se0 co -inando 7ueste tecnolo!ie insie e ;o**ia ente 7uesto il -elloF< non si pu8 fare 7ualcosa di assoluta ente fantastico e i pensa-ile pri a di HTML5. Ina applica5ione 9e- che fun5iona anche 7uando il nostro ter inale ;laptop o telefonino< non connesso e0 tro*ando la nostra !eolocation0 dise!na in te po reale e sen5a -loccarci il -ro9ser su una appa delle nu*olette con sfu ature e di ensioni di*erse a seconda dei t9eet che *en!ono prodotti nelle nostre *icinan5e? Si pu8F Lualun7ue altra cosa *i *en!a in ente? Si pu8FFF :<

HTML5 er chi vuol fare sul serio

(er reali55are le pa!ine 9e- con 7uesto nuo*o e se pre pi# diffuso standard occorre approfondire l'ar!o ento con un anuale pi# co pleto. In -uon riferi ento !ratuito online in italiano stato reali55ato dalla Mo5illa 1e*eloper Net9or" e si tro*a alla pa!ina 9e-: de*eloper. o5illa.or! Lui sotto tro*ate un riassunto dei contenuti:

Semantica
Se5ioni e struttura in HTML5O Uno sguardo ai nuovi elementi di sezionamento e contorno in HTML5: BsectionCO , BarticleCO , Bna*CO , BheaderCO , BfooterCO , BasideCO e Bh!roupCO. )nte!rare audio e *ideo in HTML5O Gli elementi BaudioCO e B*ideoCO permettono l'integrazione e la manipolazione di nuovi contenuti multimediali. >or s in HTML5O Uno sguardo ai miglioramenti dei form in HTML5: le A ! di convalida dei campi, parecc"i nuovi attri#uti, nuovi valori per l'attri#uto tEpeO degli BinputCO, e il nuovo elemento BoutputCO. $uovi elementi semantici Accanto a sezioni, multimedia e le novit dei forms, ci sono numerosi nuovi elementi come B ar"CO, Bfi!ureCO, Bfi!captionCO, BdataCO, Bti eCO, BoutputCO, Bpro!ressCO, o B eterCO, c"e accrescono la %uantit di ele enti *alidi di HTML5O. Miglioramenti degli Bifra eCO Utilizzando sand-oJO, sea lessO, e gli attri#uti srcdocO, gli autori possono ora precisare il livello di sicurezza e il rendering desiderato di un elemento Bifra eCO. MathMLO ermette di incorporare direttamente formule matematic"e. )ntrodu5ione a HTML5O &uesto articolo introduce al pro#lema di come indicare al #ro'ser c"e stai utilizzando HTML5 nel tuo progetto o applicazione 'e#. (arser di HTML5:co pati-ileO !l parser, c"e converte i #(te di un documento HTML nel )*M, stato esteso ed ora riconosce con precisione il comportamento da adottare in tutti i casi, anc"e %uando incontra HTML non valido. +i conduce ad una maggiore prevedi#ilit e interopera#ilit tra i #ro'ser compati#ili con HTML5.

*onnettivit,e- Soc"etsO ermette di creare una connessione permanente tra la pagina ed il server e di scam#iare dati, non HTML, attraverso %uesto mezzo. Ser*er:e*ent in*iatiO ermetta a un server di sottoporre eventi al client, contrariamente al classico paradigma per cui il server invia dati solo in risposta alla ric"iesta del client. ,e-RTCO &uesta tecnologia, in cui ,T+ sta per ,eal Time +ommunication, permette di connettersi ad altre persone e controllare direttamente la videoconferenza nel #ro'ser, senza #isogno di plugin o applicazioni esterne.

Offline . #emori//a/ione
Risorse %ffline: la cache dell'applica5ioneO -irefo. supporta a pieno le specific"e offline di HTML5. La maggior parte degli altri #ro'ser "anno un %ualc"e livello di supporto per le risorse offline. E*enti online e offlineO -irefo. / supporta eventi 0HAT0G online e offline, c"e lasciano rilevare alle applicazioni ed estensioni se c' o no una connessione internet attiva, nonc" %uando la connessione cam#ia stato. Sessione ,H'T,/ lato client e e ori55a5ione persistente ;alias Me ori55a5ione 1%M<O La memorizzazione lato client, persistente e di sessione, permette alle applicazioni 'e# di immagazzinare strutture dati lato client. )ndeJed16O 1' uno standard 'e# per la memorizzazione nel #ro'ser di significative %uantit di dati strutturati e per ricerc"e indicizzate ad elevate prestazioni su tali dati. Itili55are file da applica5ioni 9e-O !l supporto per le nuove A ! per i file in HTML5 stato aggiunto a Gec2o, rendendo possi#ile l'accesso a file locali selezionati dall'utente. +i include il supporto per la selezione multipla di file utilizzando il nuovo attri#uto ultipleO con tEpeO file dell'elemento BinputCO. +' anc"e >ileReaderO.

#ultimedia
Itili55are audio e *ideo in HTML5O Gli elementi BaudioCO e B*ideoCO incorporano e permetto la manipolazione di nuovi contenuti multimediali. ,e-RTCO &uesta tecnologia, in cui ,T+ sta per ,eal Time +ommunication, permette di

connettersi ad altre persone e controlla direttamente la videoconferenza nel #ro'ser, senza #isogno di plugin o applicazioni esterne. Itili55o della '() Ca eraO ermette di usare, manipolare e memorizzare un'immagine dalla fotocamera del computer. Trac2 e 0e#3TT L'elemento Btrac"CO consente capitoli e sottotitoli. ,e-KTTO un formato di traccia testuale.

%rafica . )ffetti 3'

Tutorial sui Can*asO Apprendi il nuovo elemento Bcan*asCO e come disegnare grafica ed altri oggetti in -irefo. '() di testo per !li ele enti Bcan*asC di HTML5O Le A ! di testo di HTML5 sono ora supportate agli elementi Bcan*asCO. ,e-/LO 0e#GL porta la grafica /) sul 0e# introducendo una A ! strettamente conforme a *penGL 14 5.6 utilizzata negli elementi Bcan*asCO di HTML5. SK/O Un formato di immagine vettoriale #asato su 7ML c"e pu essere direttamente incorporato nel documento HTML.

Presta/ioni . integra/ione
,e- ,or"ersO ermette di delegare l'esecuzione 8ava4cript a t"read in #ac2ground, impedendo a %ueste attivit di rallentare gli eventi interattivi. ?MLHttpRe7uestO Livello 5 ermette di ottenere asincronamente %ualc"e parte della pagina e di visualizzarne dinamicamente il contenuto, variandolo nel tempo e in #ase alle azioni dell'utente. &uesta la tecnologia dietro 'PaJO. 8!T9motori 8ava4cript compilati La nuova generazione di motori 8ava4cript sono molto pi potenti, e garantiscono maggiori prestazioni. HistorE '()O ermette la manipolazione della cronologia del #ro'ser. +i particolarmente utile per le pagine c"e caricano nuove informazioni interattivamente.

L'attri-uto contentEdita-le: trasfor a il tuo sito 9e- in un 9i"iFO HTML5 "a standardizzato l'attri#uto content1dita#le. 1ra! 4 dropO Le A ! per il drag : drop in HTML5 supportano il trascinamento e rilascio di voci all'interno del sito e tra siti 'e#. -ornisce anc"e una A ! pi semplice per l'uso da parte di estensioni e applicazioni #asate su Mozilla. /estione del focus in HTMLO 4ono supportati i nuovi attri#utiHTML5 active1lement e "as-ocus. /estori di protocollo -asato sul ,e-O 1' ora possi#ile registrare applicazioni 'e# come gestori di protocollo utilizzando il metodo navigator.register rotocolHandler;<. re7uest'ni ation>ra eO ermette di controllare il rendering delle animazioni per ottenere prestazioni ottimali. >ullscreen '()O +ontrolla l'utilizzo a pieno sc"ermo da parte di pagine 'e# e applicazioni, senza la visualizzazione della U! del #ro'ser. (ointer Loc" '()O ermette di #loccare il puntatore al contenuto, cos gioc"i e applicazioni simili non perdono il focus %uando il puntatore ne oltrepassa il margine. E*enti online ed offlineO Al fine di costruire una #uona applicazione 'e# capace di lavorare offline, "ai #isogno di sapere %uando l'applicazione offline. Hai anc"e #isogno di sapere %uando l'applicazione torna nello stato online.

Accesso ai 'ispositivi
Itili55are le '() Ca eraO ermette di utilizzare, manipolare e immagazzinare immagini dalla fotocamera del computer. E*enti TouchO Gestori c"e reagiscono ad eventi creati dalla pressione sullo sc"ermo da parte dell'utente. Itili55are la !eolocali55a5ioneO ermetti al #ro'ser di localizzare la posizione dell'utente grazie alla geolocalizzazione. Rile*a5ione orienta ento del dispositi*oO Lascia c"e il #ro'ser sia informato del cam#io di orientamento del

dispositivo. u essere utilizzato come metodo di input ;per esempio per realizzare gioc"i c"e reagiscono alla posizione del dispositivo< o per adattare l'impaginazione all'orientamento dello sc"ermo ;potrait o landscape<. (ointer Loc" '()O ermette di #loccare il puntatore al contenuto, cos gioc"i e applicazioni simili non perdono il focus %uando il puntatore ne oltrepassa il margine.

Stile
CSSO stato esteso consentendo elementi di stile pi complessi. 1' spesso identificato come CSS&O, se##ene +44 non sia comun%ue una specifica monolitica e i differenti moduli non siano tutti di livello /: alcuni sono di livello =, ed altri di livello >, con tutti i livelli intermedi. $uove caratteristic"e di stile per lo sfondo 1' ora possi#ile aggiungere un'om#ra a un #o., utilizzando-oJ:shado9O ed impostare sfondi ultipliO. ?ordi pi fantasiosi $on solo possi#ile utilizzare le immagini come stile dei #ordi, utilizzando -order:i a!eO e le propriet associate, ma sono supportati i #ordi arrotondati per mezzo della propriet -order:radiusO. Anima il tuo stile Utilizzando le Transi5ioni CSSO per animare il passaggio tra stati, o utilizzando le 'ni a5ioni CSSO per animare parti della pagina senza un evento scatenante, puoi controllare gli elementi mo#ili sulla pagina. Miglioramenti tipografici Gli autori "anno un miglior controllo per ottenere un migliore aspetto tipografico. ossono controllare il teJt:o*erflo9O e la silla-a5ioneO, ma possono anc"e applicare un'o -raO o controllare pi precisamente la decora5ioneO. +aratteri tipografici personalizzati possono essere scaricati e applicati grazie alla nuova regola Qfont:faceO. $uove impaginazioni per la presentazione Al fine di migliorare la flessi#ilit di progettazione, sono stati aggiunti due nuovi la(out: ) pa!ina5ione CSS a colonna ultiplaO, e l'i pa!ina5ione CSS a -oJ flessi-ileO.

-iblio"rafia
Jeffrey Zeldman; Ethan Marcotte !"iluppare #iti con gli #tandard $eb Milano Apogeo %&'&( )!*+ ,-./..0&1%,23,( Mark 4ilgrim HTM506 Guida operati"a Milano Hop# Tecniche nuo"e %&'&( )!*+ ,-./ ..3.'%0&3.( Gabriele Gigliotti HTM506 !"iluppare oggi il Web di domani Milano Apogeo %&'%( )!*+ ,-./..0&11''2'(

.ito"rafia
Luesto -re*e e-oo" stato li-era ente tratto dalle se!uenti pa!ine 9e-: a< articolo HTML5 da 9i"ipedia.it0 l'enciclopedia li-era it.9i"ipedia.or!R9i"iRHTML5 -< articolo Che cos! HTML5 da HTM5 0 Today ;il primo blog italiano dedicato interamente alle nuo"e tecnologie $eb HTM50 e 7!!1<: 999.ht l5todaE.itRtutorialRche:cos:ht l5 c< la se5ione HTML5 della Mo8illa 9e"eloper +et$ork https:RRde*eloper. o5illa.or!RitRdocsRHTMLRHTML5 che consi!lio *i*a ente per approfondi enti

Licen%a d!uso
:ue#to ebook pu; e##ere riutili88ato a piacere e modificato per #copi non commerciali come #tabilito dalla licen8a 7reati"e 7ommon# This 9or" is licensed under a Creati*e Co ons 'ttri-ution:NonCo ercial:Share'li"e &.= Inported License