HTML5 CSS3 JavaScript 8850331312, 9788850331314


414 41 6MB

Italian Pages [574] Year 2012

Report DMCA / Copyright

DOWNLOAD PDF FILE

Table of contents :
Introduzione
Organizzazione del libro
Convenzioni utilizzate
Codice sorgente e annotazioni finali
Capitolo 1 - Il layer strutturale: HTML5
Breve storia della nascita di HTML5
Elementi di base di una pagina web
Inserimento e formattazione di base del testo
Generazione di liste
Utilizzo delle tabelle
Navigazione tra i contenuti delle pagine web
Visualizzazione di immagini e creazione di mappe
Creazione di form e controlli utente
Elementi per la strutturazione di una pagina HTML
Elementi semantici per il testo
Miscellanea di elementi
Capitolo 2 - Il layer di presentazione: CSS3
Regole e selettori di base
Associazione di regole CSS
In pratica
Selettori avanzati
Selettori combinatori
Selettori di attributo
Pseudo-classi
Pseudo-classi dinamiche
Pseudo-classi per gli stati degli elementi di una UI
Pseudo-classi strutturali
Pseudo-classe basata sul fragment identifier
Pseudo-classe basata sulla codifica del linguaggio
Pseudo-classe di negazione
Pseudo-elementi
Organizzazione a cascata
Il concetto di specificità
Il concetto di importanza
L’iter di assegnazione delle proprietà CSS
L’ereditarietà
Valori e unità
Il box model
Proprietà dei font
La proprietà font-family
La proprietà font-weight
La proprietà font-size
La proprietà font-style
La proprietà font-variant
La proprietà font-stretch
La proprietà font-size-adjust
La proprietà font
La regola @font-face
Proprietà del testo
La proprietà text-indent
La proprietà text-align
La proprietà line-height
La proprietà vertical-align
La proprietà word-spacing
La proprietà letter-spacing
La proprietà text-transform
La proprietà text-decoration
La proprietà text-shadow
La proprietà white-space
Proprietà del colore e degli sfondi
La proprietà color
La proprietà background-color
La proprietà background-image
La proprietà background-repeat
La proprietà background-origin
La proprietà background-clip
La proprietà background-position
La proprietà background-size
La proprietà background-attachment
La proprietà background
Proprietà delle liste
La proprietà list-style-type
La proprietà list-style-image
La proprietà list-style-position
La proprietà list-style
Proprietà delle tabelle
La proprietà caption-side
La proprietà border-collapse
La proprietà border-spacing
La proprietà empty-cells
La proprietà table-layout
Proprietà del box model
La proprietà width
La proprietà height
Le proprietà min-width e min-height
Le proprietà max-width e max-height
La proprietà margin
La proprietà border-style
La proprietà border-width
La proprietà border-color
La proprietà border
La proprietà border-radius
La proprietà border-image-source
La proprietà border-image-slice
La proprietà border-image-width
La proprietà border-image-outset
La proprietà border-image-repeat
La proprietà border-image
La proprietà box-shadow
La proprietà padding
La proprietà float
La proprietà clear
La proprietà position
Le proprietà top, right, bottom e left
La proprietà z-index
La proprietà overflow
La proprietà clip
La proprietà visibility
La proprietà display
La proprietà opacity
Le media query
Le feature width e height
Le feature device-width e device-height
La feature orientation
La feature aspect-ratio
La feature device-aspect-ratio
La feature color
La feature color-index
La feature monochrome
La feature resolution
La feature scan
La feature grid
Il futuro prossimo di CSS3
Capitolo 3 - Il layer di interazione: JavaScript
Concetti propedeutici della OOP
Variabili, letterali e tipi
Variabili primitive
Variabili riferimento
Variabili globali, locali e scope
Letterali
Conversione tra tipi
Array
Array monodimensionali
Array bidimensionali
Operatori
Operatore di assegnamento
Operatori aritmetici
Operatori aritmetici di assegnamento
Operatori unari di incremento e decremento
Operatori relazionali e di uguaglianza
Operatori logici
Operatore ternario
Operatori a livello di bitwise
L’operatore in
L’operatore instanceof
L’operatore typeof
L’operatore delete
L’operatore void
L’operatore virgola (,)
Tabella di precedenza degli operatori
Strutture di controllo
Struttura di selezione if
Struttura di selezione if/else
Struttura di selezione switch/case
Struttura di iterazione while
Struttura di iterazione do/while
Struttura di iterazione for
Struttura di iterazione for/in
Istruzioni break, continue e label
Funzioni
Funzioni come dati
Closure
Oggetti
Proprietà di tipo getter e setter
Le proprietà in dettaglio
Serializzazione degli oggetti
Prototipi
Ereditarietà e polimorfismo
Privilegi di accesso per le proprietà
Modificare l’estensibilità di un oggetto
Errori software
Le eccezioni
La direttiva "use strict"
Capitolo 4 - Programmazione lato client
Il Browser Object Model (BOM)
L’oggetto window
I metodi setTimeout e setInterval
L’oggetto navigator
L’oggetto frames
L’oggetto location
L’oggetto history
L’oggetto document
L’oggetto screen
Il Document Object Model (DOM)
Selezione degli elementi di un documento
Altre tecniche di selezione degli elementi di un documento
Spostamento tra gli elementi di un documento
Modifica dell’albero dei nodi
Manipolazione degli attributi degli elementi
Gestione degli eventi
L’interfaccia EventTarget
L’interfaccia Event
L’interfaccia UIEvent
L’interfaccia FocusEvent
L’interfaccia MouseEvent
L’interfaccia WheelEvent
L’interfaccia TextEvent
L’interfaccia KeyboardEvent
L’interfaccia CompositionEvent
L’interfaccia MutationEvent
L’interfaccia MutationNameEvent
Eventi programmatici
Tabella di tutti i tipi di evento della specifica
Scripting dei CSS
Scripting mediante l’attributo style
Scripting mediante l’attributo class
Scripting degli elementi style e link
Ajax
L’oggetto XMLHttpRequest
L’oggetto XMLHttpRequest Level 2
jQuery: una potente libreria JavaScript
Concetti propedeutici
Getter e setter
Manipolazione del DOM
Gestione degli eventi
Ajax
Capitolo 5 - Applicazioni web
L’elemento canvas
Primitive di base per i disegni
Disegno di immagini
Disegno di testo
Disegno di pixel
Gradienti
Ombreggiature
Compositing
Pattern
Stili di linea
Trasformazioni
Gli elementi multimediali
L’elemento video
L’elemento audio
L’elemento source
L’interfaccia HTMLMediaElement
microPlayer: un riproduttore di video
Il drag and drop
L’interfaccia DataTransfer
microShoppingCart: un carrello della spesa
La geolocalizzazione
Terminologia di base
L’interfaccia Geolocation
microMapGeoPosition: un geolocalizzatore
Web Workers
L’interfaccia Worker
L’interfaccia WorkerGlobalScope
microImageProcessor: un image processor
Storage dei dati lato client
La Web Storage API
Cross-origin messaging
Applicazioni web offline
Il cache manifest
L’interfaccia ApplicationCache
microSlideshow: un riproduttore di immagini
Microdata
Vocabolari
Proprietà
Utilizzo dei microdata con gli elementi HTML
Utilizzo dei microdata con le API di JavaScript
Appendice - Tipologia degli elementi HTML5
Recommend Papers

HTML5 CSS3 JavaScript
 8850331312, 9788850331314

  • 0 0 0
  • Like this paper and download? You can publish your own PDF file online for free in a few minutes! Sign Up
File loading please wait...
Citation preview

HTML5 CSS3 JAVASCRIPT

© Apogeo s.r.l. - socio unico Giangiacomo Feltrinelli Editore s.r.l. ISBN edizione cartacea: 9788850331314

Il presente file può essere usato esclusivamente per finalità di carattere personale. Tutti i contenuti sono protetti dalla Legge sul diritto d'autore. Nomi e marchi citati nel testo sono generalmente depositati o registrati dalle rispettive case produttrici. L'edizione cartacea è in vendita nelle migliori librerie. ~ Seguici su Twitter @apogeonline

Introduzione Il World Wide Web, quel meraviglioso luogo in cui possiamo compiere qualsiasi cosa ci passi per la testa – dalla semplice navigazione di un sito di notizie all’utilizzo di una complessa applicazione di e-commerce – sta, come di consueto fanno tutte le tecnologie moderne, cambiando, e tale mutamento sta avvenendo a una velocità ancora più elevata del passato. Ciò è dovuto all’impulso e alla spinta, da un lato, da parte degli organismi che si occupano di standardizzare le tecnologie web attraverso la scrittura e definizione di documenti di specifiche (in primis il W3C di Timothy John Berners-Lee ma anche il WHATWG Group che sta dietro a HTML5), e dall’altro lato, da parte degli sviluppatori dei moderni browser che cercano in tutti i modi di aggiornare tali user agent in modo da poterli dotare delle nuove e potenti caratteristiche definite all’interno delle specifiche. Questa continua ricerca e innovazione è fondamentale e produttiva sia per il semplice utente che usa il browser come mero mezzo di navigazione, sia per noi sviluppatori che possiamo utilizzare i nuovi strumenti e le relative API per scrivere applicazioni web sofisticate prima impensabili (player multimediali, carrelli della spesa con funzionalità drag and drop, programmi per il disegno, videogame e così via), dotate quindi di tutte quelle moderne caratteristiche che si trovano nelle consuete applicazioni standalone che girano sul desktop dei vari sistemi operativi. Il browser è assurto da semplice strumento per la navigazione dei contenuti a una sorta di mini sistema operativo al cui interno eseguire le applicazioni web moderne. Tutto questo ha un prezzo da pagare che è quantificabile in un cambiamento di mentalità nell’approccio allo sviluppo di applicazioni e nel tempo che è necessario per imparare tutte le tecnologie principali che oggi ruotano attorno al Web. Per quanto concerne il cambiamento di mentalità, uno sviluppatore moderno dovrebbe applicare, laddove possibile, le seguenti regole.

Non legarsi più a implementazioni proprietarie delle tecnologie web ma guardare e utilizzare solo quelle standard che consentono di dotare le applicazioni di feature che nel momento in cui saranno implementate nei browser saranno tra di essi interoperabili. Strutturare il codice a layer, ossia separare nettamente la parte strutturale (HTML) dalla parte di presentazione (CSS) e dalla parte del codice (JavaScript). Ciò consente, infatti, di programmare le applicazioni in modo professionale e scalabile evitando, per esempio, di scrivere codice JavaScript o regole CSS direttamente nei tag HTML. Utilizzare le tecnologie lato server (PHP, Java EE, ASP.NET…) per il loro scopo primario (la gestione della sicurezza, dei dati e così via) e non per compiere operazioni comunemente effettuabili lato client come, per esempio, quelle inerenti la parte di interazione (quante applicazioni web ci sono ancora dove un menu a tendina viene popolato dopo un postback su un server?). Partendo da queste considerazioni, questo libro è stato strutturato in modo che l’apprendimento risulti essere graduale e sistematico: i concetti sono esposti in modo che, per esempio, nella parte su HTML5 non è presente alcun riferimento a CSS3 o JavaScript. Inoltre, non sono trattate API proprietarie ma solo quelle degli standard web che sono state implementate, nel momento in cui questo libro viene scritto, almeno da un browser. Una considerazione è d’obbligo: data la mutabilità degli standard che non hanno ancora raggiunto la versione definitiva, alcune delle proprietà, dei metodi, degli attributi di HTML5, CSS3 e JavaScript potrebbero subire cambiamenti a cui in queste pagine non è possibile dare seguito. In ogni caso ciò non deve spaventare perché è una conseguenza normale e ravvisabile in tutte quelle tecnologie, come quelle legate al Web, ad alta velocità di innovazione e cambiamento. ATTENZIONE I linguaggi HTML5 e CSS3 non sono in tutto e per tutto nuove tecnologie. Essi si rifanno alle specifiche che li hanno preceduti, ovvero HTML4.01 e CSS2. Non potrebbe del resto essere altrimenti: solo in questo modo è possibile sviluppare

nuovi e più potenti standard garantendo allo stesso tempo la retrocompatibilità con quanto fino a oggi in uso. Il lettore non deve quindi stupirsi di ritrovare nelle prossime pagine anche costrutti a lui già noti, documentati insieme ad altri in tutto e per tutto nuovi. Per esempio, l’elemento p è parte di HTML5 quanto canvas. Questo libro è stato concepito per offrire uno spaccato il più completo e pratico possibile di HTML5 e CSS3, evitando di limitarsi alle funzionalità più innovative. In queste pagine il lettore troverà quindi una trattazione che parte dalle basi e potrà approcciare lo studio di queste tecnologie anche senza conoscere HTML4.01 e CSS2.

Una nota finale è necessaria per quanto riguarda HTML5 e CSS3. Lo scopo di questo libro è quello di documentare tali standard a prescindere dall’ampiezza di supporto dei browser. Tranne dove diversamente indicato, gli esempi di codice riportati sono stati testati con il browser Mozilla Firefox perché è quello che, più degli altri, implementa con attenzione gli standard web. Questo non significa però che HTML5 e CSS3 non possano funzionare con browser diversi da Firefox. Per tenersi aggiornati sul supporto che i browser offrono a HTML5 e CSS3 si può fare riferimento a fonti come http://caniuse.com/ oppure http://www.quirksmode.org/dom/html5.html (per HTML5) e http://www.quirksmode.org/css/contents.html (per CSS3), senza dimenticare su Wikipedia http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5) e http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets).

Organizzazione del libro Il libro è organizzato nei capitoli elencati di seguito. Capitolo 1, “Il layer strutturale: l’HTML5 ”: introduciamo i concetti di base e gli elementi fondamentali per la strutturazione di una pagina web con HTML5. Trattiamo infatti del testo, delle liste, delle tabelle, degli URL, delle immagini e così via fino a esaminare nel dettaglio nuovi tipi di widget inseribili nei form e i nuovi elementi semantici. Capitolo 2, “Il layer di presentazione: CSS3”: mostriamo in modo approfondito come utilizzare i fogli di stile, elemento imprescindibile per la definizione di regole di visualizzazione degli elementi HTML. Illustriamo tutte le tipologie di selettori e pseudo-classi e spieghiamo gli importanti concetti di organizzazione a cascata, ereditarietà e box model. Infine, passiamo in rassegna tutte le proprietà utilizzabili come quelle per i font, per il testo, per le tabelle, per il box model e così via. Capitolo 3, “Il layer di interazione: JavaScript”: esaminiamo il versatile e potente linguaggio di programmazione JavaScript, “motore” delle moderne applicazioni web, trattando sia i costrutti principali come le variabili, gli array, gli operatori, le strutture di controllo e altro, sia quelli più complessi come le funzioni, le closure, gli oggetti, i prototipi, l’ereditarietà, il polimorfismo e così via. Infine, sottolineiamo che gli argomenti sono tutti aggiornati alle nuove caratteristiche dello standard di riferimento del linguaggio, ossia alla versione ECMAScript 5 del giugno 2011. Capitolo 4, “Programmazione lato client”: dopo aver studiato i “mattoni” fondamentali per la costruzione di un’applicazione web, entriamo nel vivo della programmazione lato client analizzando le API del BOM (Browser Object Model), del DOM (Document Object Model), della gestione degli eventi e dello scripting dei CSS e di Ajax. Chiudiamo il capitolo con un’introduzione a jQuery, una potente libreria JavaScript che è diventata lo standard de facto per la scrittura di applicazioni web moderne e potenti. Capitolo 5, “Applicazioni web”: impariamo a utilizzare degli elementi HTML e delle API straordinarie e innovative che consentono di

implementare applicazioni web che possono “mimare”, per caratteristiche e complessità, quelle scritte normalmente per gli ambienti desktop. Analizziamo infatti l’elemento canvas, gli elementi multimediali audio e video, il drag and drop, la geolocalizzazione, i Web Workers (i thread), il Web Storage, le applicazioni web offline e i microdata.

Convenzioni utilizzate Il libro è diviso in capitoli. Ogni capitolo è numerato in ordine progressivo e denominato significativamente nel suo obiettivo didattico (per esempio Capitolo 5, “Applicazioni web”). I capitoli sono poi suddivisi in paragrafi, all’interno dei quali possiamo avere dei blocchi di testo o di immagini, ausiliari alla teoria e denominati come segue. Listato NrCapitolo.NrProgressivo Descrizione per i listati del codice sorgente. Snippet NrCapitolo.NrProgressivo Descrizione per i frammenti di codice sorgente. Sintassi NrCapitolo.NrProgressivo Descrizione per la sintassi di un costrutto. Output NrCapitolo.NrProgressivo Descrizione per l’output di un frammento di codice. Figura NrCapitolo.NrProgressivo Descrizione per una figura in generale ma anche per l’output dei listati delle applicazioni web. Tabella NrCapitolo.NrProgressivo Descrizione per una tabella. Per esempio, il blocco denominato Listato 1.8, File ElementiStrutturali.html indica il listato di codice numero 8 del Capitolo 1 avente come descrizione il file ElementiStrutturali.html. Infine, per quanto attiene ai listati, i punti di sospensione (…) indicano che, in quel passaggio, alcune parti del listato sono state omesse. Le medesime parti sono presenti nei relativi file allegati al libro.

Codice sorgente e annotazioni finali All’indirizzo http://www.apogeonline.com/libri/9788850331314/scheda è possibile scaricare un archivio ZIP contenente i listati di ogni capitolo e tutte le relative risorse (immagini, video e così via). ATTENZIONE La maggior parte dei listati e degli snippet di codice sono stati testati con il browser Firefox della Mozilla Organization perché è quello che, più degli altri, ha implementato e implementa con certosina attenzione gli standard delle tecnologie web. In altri casi si è invece fatto riferimento ad altro browser (come Chrome e Opera) per evidenziare come l’applicazione di una particolare proprietà, elemento o script, vengano da essi gestite e interpretate. Il browser utilizzato è di norma specificato nella didascalia di riferimento.

Capitolo 1

Il layer strutturale: HTML5 Il World Wide Web è diventato oggi, più che in passato, uno spazio virtuale dove le persone vogliono fare qualsiasi cosa: shopping sicuro, leggere libri, socializzare con altre persone, guardare video e ascoltare musica, giocare con videogame di una certa complessità, editare documenti e così via, un lungo elenco che potrebbe estendersi fino a dove arriva l’immaginazione. Chiaramente, questa crescente e progressiva domanda di nuove feature, impone che sia i progettisti degli standard web sia gli sviluppatori delle piattaforme hardware/software che devono, poi, implementarle, siano al passo con i tempi rendendo utilizzabile e pratico ciò che è scritto in “freddi” documenti di specifiche tecniche. Nel mare magnum delle tecnologie web esistenti o proposte, allo stato attuale il linguaggio di markup denominato HTML5 rappresenta quella emersa con maggior prepotenza e forza, entrando nelle vite, sia di semplici utenti che navigano in Internet sia di sviluppatori che progettano le pagine web, diventando, di fatto, lo strumento fondamentale attraverso il quale creare siti complessi e altamente interattivi. Nel momento in cui scriviamo, tuttavia, HTML5, visto sia come mero linguaggio strutturale per la creazione delle pagine web sia come piattaforma che fornisce delle moderne API per lo sviluppo, si trova in una fase definita Draft Standard, ossia le sue specifiche non sono definitive e immodificabili ma, anzi, nel tempo potrebbero subire cambiamenti, aggiunte o addirittura eliminazioni di talune parti. In ogni caso, la situazione descritta non deve preoccupare chi desidera imparare tale tecnologia, perché essa è già parte integrante dei moderni browser, cioè la maggior parte delle caratteristiche è già stata in essi implementata. In più, si può essere certi che le eventuali aggiunte o modifiche, man mano che verranno inserite nella specifica, saranno, in tempi relativamente brevi,

subito prese in considerazione dai produttori dei principali browser, che anzi “lotteranno” tra loro per chi le avrà completamente implementate. In definitiva, HTML5, e tutto l’ecosistema di API che vi ruota attorno, è una grossa opportunità che, sia i vendor dei browser sia gli sviluppatori di applicazioni web non si devono lasciar sfuggire, perché tale linguaggio rappresenta il presente e, certamente, il futuro del World Wide Web.

Breve storia della nascita di HTML5 HTML5, come oggi lo conosciamo e come poi vedremo meglio in seguito, è frutto di una gestazione che trae le sue origini, anche se per certi versi in modo indiretto, dal lavoro pionieristico iniziato nei lontani anni Novanta da un ricercatore di nome Tim Berners-Lee. NOTA Tim Berners-Lee è uno scienziato e informatico inglese nato a Londra l’8 giugno del 1955 che, insieme all’informatico belga, Robert Cailliau, ha inventato il World Wide Web. Nel 1980, al CERN, progettò un sistema software chiamato ENQUIRE, che si avvaleva degli ipertesti e che aveva come obiettivo quello di consentire, in modo standard e con estrema facilità, a tutti i ricercatori di scambiarsi delle informazioni. Nel 1989 adattò tale originaria idea in modo che potesse applicarsi a Internet, progettando il primo browser e server web che ne permettesse il funzionamento. Nasceva così il Web come noi tutti lo conosciamo.

Berners-Lee creò in quel periodo un linguaggio definito HTML (HyperText Markup Language) mediante il quale era possibile, principalmente, formattare dei documenti testuali con degli speciali marcatori che consentivano di creare dei collegamenti tra testi, che potevano risiedere anche su server localizzati in posizioni differenti dal PC dove si stava utilizzando la pagina principale, permettendo dunque di compiere una sorta di “navigazione” tra le informazioni che essi rappresentavano. Successivamente, ne sottopose una bozza di specifiche all’importante istituto che si occupava (e si occupa tutt’ora) di creare gli standard di Internet, denominato IETF (Internet Engineering Task Force), dove nel 1994 fu creato un gruppo di lavoro (HTMLWG, HTML Working Group) che, a partire da quelle specifiche creò poi il relativo documento numerato come versione 2 di HTML. In quello stesso anno, Tim Berners-Lee fondò un consorzio che doveva esplicitamente occuparsi della standardizzazione delle tecnologie web, denominato W3C (World Wide Web Consortium), che, tra le altre cose, causò nel 1996 lo scioglimento del gruppo HTMLWG, inserito nell’organico del W3C.

Nel 1997 il consorzio redasse e pubblicò un’altra specifica di HTML, che aveva come numero di versione il 3.2, per poi aggiornarla nuovamente alla fine dello stesso anno con la versione 4.0. Arriviamo al 1998, anno in cui il W3C pubblicò una bozza di specifiche per la formulazione di un linguaggio che nel 1999 denominò XHTML 1.0. Nel 2000 divenne una raccomandazione e nel 2001 fu pubblicata la versione 1.1. XHTML differiva da HTML perché basato sul linguaggio XML (Extensible Markup Language) e non, come il primo, sul linguaggio SGML (Standard Generalized Markup Language). Nel 1999, inoltre, lo stesso consorzio pubblicò la versione 4.01 di HTML e anche la bozza di una specifica, denominata XHTML Extended Forms, rinominata poi XForms 1.0, con cui intendeva riprogettare i web form e diventata raccomandazione nel 2003. Dopo un po’ di anni, siamo nel giugno del 2004, il W3C organizzò un convegno dal titolo “The W3C Workshop on Web Applications and Compound Documents”, con lo scopo di raccogliere idee e suggerimenti sul futuro dello sviluppo web. A tale convegno parteciparono tutti i principali protagonisti del mondo legato all’implementazione delle tecnologie del Web; tra le tante indicazioni e proposte di carattere generale, furono ritenute interessanti le seguenti, manifestate dai membri di Mozilla Foundation e Opera Software. Le specifiche e le caratteristiche di una tecnologia devono sempre essere aperte, visibili e pubblicamente commentabili. Le caratteristiche di una tecnologia che una specifica intende descrivere devono essere il meno astratte possibili, ossia devono essere descritte avvalendosi di pratici casi di uso. Se si progetta una nuova specifica la stessa deve avere una piena compatibilità con le tecnologie che intende modificare o aggiornare, in modo che sia gli sviluppatori web sia gli implementatori dei browser non vengano, improvvisamente e radicalmente, “investiti” da una nuova tecnologia che renda obsoleto e non funzionante tutto il loro lavoro pregresso.

Se un documento contiene degli errori di authoring, gli stessi non dovrebbero interrompere il normale flusso di esecuzione della pagina web così come non dovrebbero essere visualizzati. Vi dovrebbe essere una gestione degli errori progettata con maggiore correttezza e con un livello di dettaglio analitico. Bisogna cercare di definire degli elementi di markup che siano in grado, dichiarativamente, di sostituire quello che, programmaticamente, un linguaggio di scripting, in equivalenza, è in grado di fare. Bisogna privilegiare la creazione di profili indipendenti dal dispositivo in uso. Al termine degli interventi si decise di effettuare una votazione per decidere se era giusto intraprendere una nuova strada per lo sviluppo dei futuri standard web seguendo le indicazioni che erano state formulate. Purtroppo, per i proponenti, vi fu una sconfitta (11 voti contro e 8 a favore), che però non li demoralizzò affatto ma, anzi, li indusse a unirsi e a creare un nuovo gruppo di lavoro separato dal W3C che denominarono WHATWG (Web Hypertext Application Technology Working Group). Tra le motivazioni che addussero contro il consorzio e che causarono una rottura con esso, è interessante citare le seguenti, ossia che il W3C: era sempre stato distante dalle reali esigenze degli sviluppatori web avendo sempre proposto standard teorici e astratti e, dunque, poco pratici; non si era mai impegnato più di tanto a creare o ad aggiornare gli standard in modo incrementale in modo che gli “attori” dello sviluppo del web potessero avere il tempo di adeguarsi di conseguenza e in modo indolore; non aveva più aggiornato la specifica su HTML dal lontano 1999, anno in cui uscì la versione 4.01; non aveva tenuto in considerazione il fattore di compatibilità quando aveva progettato il linguaggio XHTML e XForms. Per esempio, se si desiderava progettare con rigore delle pagine web aderenti a XHTML si doveva, primariamente, cambiare il MIME Type da text/html, proprio di HTML, a application/xhtml+xml e scrivere i relativi elementi

di markup secondo le nuove rigide regole sintattiche imposte da XHTML. Come conseguenza di ciò, se si scrivevano delle pagine XHTML con degli errori, l’elaborazione delle stesse sarebbe stata interrotta, e tale comportamento era, a loro avviso, ritenuto draconiano (draconian error handling), laddove il comportamento di HTML rispetto agli errori erra flessibile e senza avvisi. NOTA Il termine errore draconiano trae la sua semantica dal legislatore dell’antica Grecia Dracone che, all’epoca in cui visse, scrisse un codice di norme notevolmente rigido e duro.

Nel 2004 nacque, dunque, il citato gruppo WHATWG, fondato da alcuni membri di Mozilla Foundation, Apple e Opera Software, che aveva come obiettivo o mission principale quella di sviluppare e promuovere nuove tecnologie che potevano migliorare e far avanzare il mondo del Web. Esso iniziò subito a lavorare su delle specifiche denominate Web Applications 1.0 e Web Forms 2.0, che avevano come scopo quello di aggiornare in maniera significativa l’attuale HTML ma in modo incrementale e compatibile. Nel 2006, il padre del primigenio HTML, il già citato Tim Berners-Lee, si rese conto dell’importanza del lavoro che si stava svolgendo in seno al WHATWG e propose l’istituzione di un altro gruppo di lavoro in seno al W3C (che nacque ufficialmente nel 2007), che doveva con essi collaborare per la creazione degli standard web del futuro. In seguito alla nascita di tale gruppo di lavoro, e come primo atto di collaborazione con il gruppo WHATWG, si decise di cambiare il nome della specifica da Web Applications 1.0 in HTML5. Nel 2009, dato che HTML5 era divenuto la principale e più importante specifica che trattava del futuro dello sviluppo web, si decise che la specifica XHTML 2.0 dovesse cessare. Oggi, anno 2012, se vogliamo effettuare un rigido paragone con i livelli delle specifiche come statuite dal W3C, nonostante la specifica di HTML5 sia ancora in uno stato di Working Draft (ma dovrebbe presto raggiungere lo stato di Candidate Recommendation per divenire una Recommendation

nel 2022), i principali vendor di browser stanno continuando senza sosta a implementare tutte le sue eccitanti e nuove caratteristiche perché tale linguaggio rappresenta un’innovazione davvero importante per lo sviluppo delle moderne applicazioni web. NOTA Quando parla di HTML5, il gruppo WHATWG preferisce riferirsi a esso semplicemente come HTML, senza attribuirgli un numero di versione, e lo considera semplicemente come “l’ultimo lavoro su HTML”. In effetti, nella specifica è precisato che il termine HTML5 altro non è che una buzzword che si riferisce alle moderne tecnologie di sviluppo per il Web, la maggior parte delle quali sono sviluppate dal WHATWG, in autonomia o in collaborazione con il W3C e lo IETF. Le specifiche secondo il W3C Per meglio orientarsi nell’oscuro labirinto dei termini addottati per le specifiche dal W3C, può essere utile conoscere i livelli, o stati di avanzamento, di una specifica. Working Draft (WD): stato in cui la specifica è disponibile pubblicamente a tutti per una sua analisi. In questa fase è consentito effettuare modifiche alle sue caratteristiche. Last Call Working Draft: stato in cui si specifica una deadline per eventuali commenti, si sollecitano recensioni pubbliche e dai working group dipendenti. Candidate Recommendation (CR): stato in cui le caratteristiche di maggior rilievo della specifica non possono subire cambiamenti, a meno che non vi siano particolari e importanti richieste da parte degli implementatori. Proposed Recommendation (PR): stato in cui la specifica è sottoposta all’approvazione del W3C Advisory Council. In questa fase è difficile che siano accettati ed effettuati dei cambiamenti alle sue caratteristiche. W3C Recommendation (REC): stato in cui la specifica è uno standard e può essere impiegato nei reali sistemi di produzione. ATTENZIONE Allo stato attuale, Il gruppo di lavoro WHATWG non ritiene più importante considerare la specifica su HTML5 come un’unica entità sottoposta a un iter procedurale che ne sancisce il livello di maturità. Piuttosto, invece, la considera in termini pratici come scomposta in sezioni, dove ciascuna sezione può avere un differente livello di maturità e utilizzo. In pratica, per il gruppo di lavoro la fatidica data del 2022 in cui dovrà essere rilasciata la specifica in modo completo non ha più alcuna rilevanza perché per esso è importante concentrarsi e rendere chiaro cos’è già da oggi possibile utilizzare per le proprie applicazioni web, adottando quindi un modello di gestione della specifica non rigido, ma a sezioni e incrementale.

Elementi di base di una pagina web Una pagina web è composta fondamentalmente da marcatori, o tag, che stabiliscono delle regole su come debba essere strutturato e formattato il relativo documento che intendono descrivere. Questi tag possono essere di tipo two-sided (detti anche normal elements), espressi mediante l’indicazione di un tag di apertura e chiusura nella forma , oppure di tipo one-sided (detti anche void o empty elements), espressi mediante l’indicazione del solo tag di apertura nella forma o . Inoltre essi possono avere degli attributi, ossia del testo scritto al loro interno in una forma chiave/valore, che permettono di specificare opzioni o dettagli supplementari. TERMINOLOGIA Spesso, i termini tag ed elemento HTML si usano in modo intercambiabile. In realtà tra di essi vi è una differenza che può essere sintetizzata nel seguente modo: un elemento è quel nome informativo che indica la semantica di un oggetto, mentre un tag è l’elemento racchiuso tra le parentesi angolari . Per esempio, p è un elemento HTML che descrive un generico paragrafo, mentre

ne rappresenta il relativo tag di apertura, così come

ne rappresenta il relativo tag di chiusura. Inoltre, in via più estensiva e generalizzata, possiamo anche indicare un elemento HTML come un’entità composta da tre parti: un tag di apertura (

), il contenuto (Ciao a tutti) e un tag di chiusura (

).

Vediamo allora un primo esempio di definizione di una semplice pagina HTML, scritta secondo la sintassi propria di HTML5, che renderizza a video dei comuni paragrafi. Listato 1.1 File PrimaPagina.html.

La nostra prima pagina in HTML5

Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...

Non c'è nessuno a cui piaccia il dolore in sé, che lo ricerchi e che voglia

riceverlo, semplicemente perché è dolore...



NOTA Le regole per la scrittura dei tag in HTML5 sono molto flessibili. Infatti, per gli elementi vuoti, ossia per quelli che non possono avere un contenuto, come per esempio br, la presenza del carattere slash di chiusura (/) non è obbligatoria (si può scrivere
o
). Inoltre, i tag e gli attributi possono essere scritti con caratteri in maiuscolo, minuscolo o addirittura in modo misto; per alcuni elementi i tag di apertura o chiusura possono essere omessi; per gli attributi booleani (per esempio checked) non è necessario definire il valore relativo, che è indicato automaticamente dalla presenza/assenza dell’attributo (checked = "checked" è ridondante), mentre per gli altri il valore può essere scritto tra singoli apici, doppi apici o senza apici. La flessibilità di HTML5 non dovrebbe però essere “abusata”. È buona norma darsi delle regole e cercare di essere il più possibile rigorosi, come se si lavorasse su documenti XHTML; in questo modo si migliorano la leggibilità, la scalabilità e la semantica dei documenti prodotti.

Figura 1.1 Output del file PrimaPagina.html (Firefox).

Nel Listato 1.1 notiamo la presenza, come primo elemento, del tag , che rappresenta un’istruzione che dà al browser un’indicazione del tipo di codice di cui dovrà eseguire il parsing. In pratica, un documento HTML, tramite l’elemento DOCTYPE, dice al browser che il suo codice è conforme allo standard ivi indicato, e nel nostro caso esso asserisce che è conforme a HTML5. Un approfondimento del tag DOCTYPE Il DOCTYPE o Document Type Declaration, è un elemento HTML che deve essere posizionato come prima istruzione nell’ambito del documento che descrive e non deve avere altre istruzioni che lo precedono (anche righe vuote), altrimenti alcuni browser potrebbero trattare la pagina come se non ne avesse alcuno. Come già detto, il suo scopo principale è quello di indicare il linguaggio di markup che un browser deve utilizzare e le regole, stabilite in un apposito DTD (Document Type Definition), che deve

eseguire per una corretta renderizzazione del documento. Se un documento non ha la definizione di un DOCTYPE, il browser assume che il codice è scritto in un modo detto quirks mode, mentre nel caso contrario assume che il codice è scritto in un modo detto standards mode. Di seguito riportiamo alcuni dei più comuni DOCTYPE utilizzabili. , per HTML 4.01 Strict. , per HTML 4.01 Transitional. , per HTML 4.01 Frameset. , per XHTML 1.0 Strict. , per XHTML 1.0

Transitional.