HTML5 and Next RIA Apps - Introduzione al corso e Strumenti di lavoro

HTML5 and Next RIA Apps

Introduzione al corso e Strumenti di lavoro

HTML5 and Next RIA Apps - Introduzione al corso

Introduzione al corso
Lo scopo di questo corso è quello di dare una panoramica su HTML5 e su come usarlo con
profitto già da subito, dove già si utilizzano, dove possibile tutte quelle caratteristiche che
di fatto rendono il linguaggio una rivoluzione.

Quindi si impareranno a costruire le “Next RIA Apps” ovvero le Rich Internet Application di
prossima generazione, con funzionalità avanzate, che prima di HTML5 richiedevano l'uso di
plugin, applet, meccanismi lato server.

Durante il corso si farà intenso uso di Javascript, in quanto la vera “rivoluzione” che porta
HTML5, viene gestita e governata via Javascript, attraverso framework che stanno
prendendo forma per poter meglio gestire e sviluppare tali nuovi “oggetti” messi a
disposizione.

Sarà obbiettivo principale quello di portare già oggi HTML5 nelle nostre pagine, di
cominciare a studiare quelle soluzioni di “dualismo” tra HTML4 e HTML5, quindi ci tornerà
utile conoscere anche i browser, quali sono gli ambiti applicativi e i relativi scenari d'uso.

Ad oggi, con la diffusione di smartphone, tablet, browser desktop di nuova generazione e
vecchia generazione, è importante saper progettare pagine che funzionano in maniera
ottimale su tutti i dispositivi.

Pagina 1

HTML5 and Next RIA Apps - Introduzione al corso

Introduzione al corso
Gli argomenti che quindi affronteremo nel corso sono:

- A cosa serve l'HTML5?
- Gli elementi di HTML5
- Tecniche HTML5 in azione nello scenario attuale
- Un alleato importante: CSS3
- I browser e caratteristiche
- Struttura di una pagina HTML5
- Introduzione a Javascript e jQuery
- Graceful degradation e feature detection
- Da una pagina HTML4 a una HTML5 passo passo
- Introduzione ad HTML5 e SEO: microdata, vocabolari e nuovi elementi semantici
- HTML5 Forms: i nuovi tag e i nuovi controlli
- Introduzione ai Media Elements e loro utilizzo via Javascript
- Audio: API, i formati audio; esempi di utilizzo e librerie a supporto
- Video: API, i formati video esempi di utilizzo e librerie a supporto
- Geolocalizzazione via web browser
- WebStorage e persistenza dei dati: API, esempi e librerie a supporto
- WebApplication Offline - Utilizzo di WebSockets, WebWorkers, IndexedDB, WebGL

Pagina 1

HTML5 and Next RIA Apps - Introduzione al corso

Cos'è e a cosa serve HTML5
In base alla definizione reperibile su Wikipedia (http://it.wikipedia.org/wiki/Html5):

“L'HTML5 è un linguaggio di markup per la progettazione delle pagine web attualmente in
fase di definizione (bozza) presso il World Wide Web Consortium.

La definizione delle specifiche iniziali del linguaggio è stata effettuata da un gruppo di
lavoro esterno al W3C: il WHATWG.

Il Web Hypertext Application Technology Working Group (noto anche con l'acronimo
WHATWG) è il gruppo di lavoro che si occupa dell'evoluzione del tecnologie HTML e delle
tecnologie correlate. Il WHATWG è stato fondato nel 2004 da Apple, Mozilla Foundation e
Opera Software. (da notare l'assenza di Microsoft)

Quindi attualmente i lavori sono seguiti dal WHATWG, dal W3C HTML working group e dal
IETF:
●
  Il WHATWG si occupa di HTML e API per lo sviluppo di applicazioni web e permette la
collaborazione tra i produttori di browser;

●   Il W3C coordina il gruppo di lavoro che sta scrivendo le specifiche sull'HTML5;

●   IETF: si occupa del layer HTTP e definisce le nuove API relativamente ai WebSocket

Pagina 1

HTML5 and Next RIA Apps - Introduzione al corso

Cos'è e a cosa serve HTML5
L'intento che si pongono questi gruppi di lavoro è quello di proporre nuovi comandi e
funzionalità fino ad allora ottenute in maniera non-standard, ossia mediante il ricorso a
plug-in o a estensioni proprietarie dei vari browser.

L' HTML5 è basato su vari principi che vogliono rappresentare una nuova visione di
opportunità e praticità:

- Compatibilità
- Utilità
- Separazione tra presentazione e contenuto
- Interoperabilità
- Accesso universale
                                // --------------------------- //

Compatibilità
Uno degli obbiettivi principali che si pone HTML5 è di fare in modo che il tutto continui a
funzionare correttamente e in modo fluido su tutti i browser, anche in quello “non-
compatibili” effettuando quello che viene chiamata “gracefull-degradation” : quando le
funzionalità non sono supportate devono essere previsti dei comportamenti alternativi.
Inoltre essere retrocompatibili in modo da far funzionare correttamente l'enorme mole di
dati e HTML accumulati in questi 20 anni di web.

Pagina 1

HTML5 and Next RIA Apps - Introduzione al corso

Cos'è e a cosa serve HTML5
Utilità
Una delle principali specifiche di HTML5 indica in modo preciso il principio di “Priority of
Constituencies” che può essere riassunta con la frase “l'utente ha sempre ragione”, cioè il
browser di fronte ad un dubbio, la specifica impone che sia favorito l'utente rispetto
all'implementazione del browser.

Il risultato di questa specifiche è che l'approccio al linguaggio è semplificato e pratico (e ce
ne accorgeremo in diversi punti) ad esempio il seguente codice viene considerato valido e
interpretato sempre allo modo:

id=”mainContainer”
id=mainContainer
ID=”mainContainer”

Effettivamente i puristi del codice potrebbero non gradire affatto tale specifica, che
permette una sintassi così permissiva, anzi vietata in xHTML; ma pensiamo a cosa potrebbe
succedere durante il rendering in una pagina complessa se un'errore di sintassi interrompe il
disegno della pagina: l'utente sarebbe il primo ad esserne svantaggiato.

Con questo non si vuole favorire un codice disordinato, ma si vuole invece una pagina
stabile, sempre e in qualsiasi condizione.

Pagina 1

HTML5 and Next RIA Apps - Introduzione al corso

Cos'è e a cosa serve HTML5
Utilità
Inoltre si stanno ponendo le basi per xHTML5, rendendo possibile la creazione di flussi di
lavoro XML in grado di generare codice HTML5 valido, in quanto la sintassi xHTML è molto
meno permissiva e quindi il codice precedente darebbe un codice non valido e l'elemento
non identificato nel DOM.

Separazione tra presentazione e contenuto
HTML5 effettua un enorme passo avanti relativamente la separazione tra il “presentation-
layer” e il “content-layer” utilizzando gli stili CSS3.
La maggior parte del markup legato al HTML non è più ufficialmente supportato, ma
continuerà a funzionare. Effettivamente si concretizza il percorso già iniziato con HTML4
Transitional e xHTML.

I problemi relativi al markup di presentazione sono:
- poca accessibilità
- complessità non necessaria (è difficile leggere codice pieno di stili “inline”)
- dimensioni maggiori del file HTML ( a causa di ripetizioni di fogli di stile)

Pagina 1

HTML5 and Next RIA Apps - Introduzione al corso

Cos'è e a cosa serve HTML5
Interoperabilità semplificata
Nel mondo degli acronimi informatici, si può dire che HTML5 rispetta pienamente il
principio K.I.S.S. : Keep it Simple and Suitable, cioè mantenere il codice semplice e adatto
al contesto.

Alcuni esempi di questo principio sono:

- Funzionalità native dei browser al posto di plugin o complesso codice Javascript;
- Un nuovo doctype semplificato;
- Dichiarazione sul set di caratteri semplificata (tag dedicati);
- API HTML5 potenti, ma semplici da utilizzare

Quindi, nel caso di implementazione di alcuni “elementi” della pagina, si preferisce usare
ciò che chiedono le API e non cercare soluzioni troppo “custom” ma invece “customizzare”
ciò che viene offerto dalle API.

Pagina 1

HTML5 and Next RIA Apps - Introduzione al corso

Cos'è e a cosa serve HTML5
Accesso Universale
In HTML5 questo principio si articola in tre concetti chiave:

- Accessibilità: per supportare gli utenti con disabilità, HTML5 lavora con il relativo
standard chiamato WAI (Web Accessibility Initative) e ARIA (Accessible Rich Internet
Applications): i “ruoli” (approfondiremo più avanti questo aspetto) supportati anche da
dispositivi di ausilio, come screen-reader possono già essere inclusi nel nostro codice;

- Indipendenza dal supporto: le funzionalità HTML5 devono essere garantite, per quanto
possibile, su qualsiasi piattaforma e dispositivo;

- Supporto per tutte le lingue: l'utilizzo del nuovo tag  supporta le annotazioni e i
pittogrammi dei sistemi di scrittura asiatici.

Pagina 1

HTML5 and Next RIA Apps - Introduzione al corso

Cos'è e a cosa serve HTML5
Funzionalità attualmente offerte
Attualmente la maggior parte dei browser HTML5 supportano le seguenti funzionalità:

-   Canvas 2D e 3D
-   Channel Messaging
-   Cross-document Messaging
-   Geolocalizzazione
-   Supporto al multimedia (Video e Audio)
-   MathML
-   Microdata
-   Eventi Server-Event
-   Scalable Vector Graphics (SVG)
-   Protocollo WebSocket e relative API
-   Concetto di Web-Origin
-   Le funzioni di WebStorage
-   Database SQL IndexedDB
-   WebWorkers
-   XMLHttpRequest Level 2
-   WebGL
-   WebForm Enhancement

Pagina 1

HTML5 and Next RIA Apps - Introduzione al corso

Strumenti di sviluppo
I nostri strumenti che useremo per sviluppare sono:

- Google Chrome: attualmente uno dei pochi browser con pieno supporto di HTML5
- Opera Dragonfly
- PHP Designer Free Edition

L'uso di Firefox sarà limitato in quanto ancora non supporta stabilmente HTML5 (almeno al
momento in cui sto realizzando le slide). Internet Explorer ha ancora dei bug e differenze di
interpretazione de verrà utilizzato per i test.

Inoltre per l'utilizzo di AJAX, Sever-Event ed altre attività ci serviremo di PHP, giusto per
mostrare come l'aspetto server-side sia comunque importante.

Ci serviremo di alcune librerie Javascript che saranno:
- Moderniz
- HTML5 Shiv
- jQuery
- jQuery Template

Pagina 1

HTML5 and Next RIA Apps - Introduzione al corso

La nostra prima pagina
Per la realizzazione della nostra prima pagina ci affidiamo ad HTML5 Boilerplate, che anche
se apparentemente complessa, sarà in nostro punto di partenza.

Ecco un primo stralcio “semplificato”:

Pagina 1

HTML5 and Next RIA Apps - Introduzione al corso

La nostra prima pagina
Come si può notare abbiamo una dichiarazione di  particolarmente semplificata,
e dei ragionamenti sulla versione del browser in uso, ed abbinare la relativa classe CSS
adeguata in modo condizionale:

Cui le espressioni si riferiscono:

●
    lt - Minore di
●
    lte - Minore di o Uguale a
●
    eq - Uguale a
●
    gte - Maggiore di o Uguale a
●   gt - Maggiore di

Pagina 1

HTML5 and Next RIA Apps - Introduzione al corso

La nostra prima pagina
Successivamente abbiamo la definizione del charset (utf8), del meta tag “X-UA-
Compatible” e del metatag “viewport”.

X-UA-Compatible è un metatag introdotto da Microsoft e riconosciuto solo da Internet
Explorer ed impone al browser quale motore di rendering utilizzare, delegandolo al sistema
operativo di individuarlo e utilizzarlo.

Altri esempio di questo tag sono:
 
Che appunto dicono al browser di utilizzare il motore di rendering di IE7 o IE8.
Altro parametro disponibile per X-UA-Compatible è IE=edge che indica al browser di
utilizzare l'ultima versione disponibile di IE disponibile.

Nel nostro caso abbiamo invece la seguente definizione:

Pagina 1

HTML5 and Next RIA Apps - Introduzione al corso

La nostra prima pagina
Tale definizione indica di usare Internet Explorer ultima versione disponibile, ma se
disponibile chiede di utilizzare Google Chrome Frame con priorità =1 (quindi più alta).

Per facilitare la diffusione di HTML5 Google ha rilasciato Google Chrome Frame, un plugin
che permette di utilizzare il sistema di rendering di Chrome, basato su WebKit, all’interno
di Internet Explorer 6, 7 e 8.
Utilizzando questo plugin si possono utilizzare i Tag HTML5 e fare affidamento su un motore
di Javascript altamente performante.

http://code.google.com/intl/it-IT/chrome/chromeframe/

Nel caso la nostra pagina venisse eseguita con browser diversi da IE tale metatag, viene
ignorato.

Altro metatag importante nella nostra definizione è

Che configura la larghezza della pagina, dicendogli di adattarsi in base al dispositivo;
questo tag è molto utilzzato in ambito mobile e vedremo più avanti il suo utilizzo.

Pagina 1

HTML5 and Next RIA Apps - Introduzione al corso

La nostra prima pagina
Quindi una pagina HTML5, al suo caricamento deve accertarsi di avere tutte le condizioni di
utilizzo, sia a livello di motore di rendering, come abbiamo visto, sia a livello di
funzionalità supportate.

Quando una pagina HTML5 viene totalmente caricata nel browser, subito prima la sua
visualizzazione viene generato automaticamente un evento chiamato “documet ready” che
comunica che la pagina è caricata a pronta per essere visualizzata.

Allo scatenarsi di questo evento, quindi possiamo considerare cosa abbiamo a disposizione
nel browser e se quindi sono supportate le funzionalità di HTML5 che ci interessa utilizzare.

Per questo tipo di attività ci viene in aiuto una libreria Javascript abbastanza collaudata e
di largo utilizzo che Modernzr ( http://www.modernizr.com/ ) che come cita il sito stesso

Modernizr is an open-source JavaScript library that helps you build the next generation of
HTML5 and CSS3-powered websites.

Pagina 1

HTML5 and Next RIA Apps - Introduzione al corso

La nostra prima pagina
Prima di vedere l'utlizzo di questa libreria occorre fare un ripasso di Javascript della sua
sintassi e dei suoi meccanismi di funzionamento.

Successivamente si passerà all'utilizzo di jQuery, come funziona, come utilizzare i selettori
e gli oggetti restituiti.

Da qui abbiamo il nostro punto di partenza per l'utilizzo di Modernizr.

Pagina 1

HTML5 and Next RIA Apps - Introduzione al corso

Introduzione a Javascript
JavaScript è un linguaggio di scripting che viene eseguito direttamente senza compilazione:
nel suo utilizzo più frequente, quello della programmazione per il web, consiste in un
linguaggio formale che fornisce al browser determinate istruzioni da compiere o che
gestisce i suoi eventi.

Mediante tale linguaggio si ha accesso a tutti gli elementi della pagina, o in gergo si ha
accesso al DOM: Document Object Model che è la rappresentazione ad oggetti di una pagina
HTML.

Quindi ogni singolo tag HTML viene visto da Javascript come un “oggetto” a cui può
accedere in lettura o scrittura (o entrambi) agli attributi (proprietà) o richiamare
determinati metodi specifici dell'oggetto.

Quindi è un linguaggio “client-side” ovvero eseguito dentro il browser e che dipende da
esso nelle sue performance e funzionalità: ogni browser offre accesso ai suoi oggetti (i tag)
attraverso specifiche proprietarie, quindi avremo dei metodi che magari funzionano sotto
Firefox e che invece non funzionano sotto Internet Explorer.

In HTML5 la padronanza di Javascript e del DOM è di fondamentale importanza per poter
agevolmente utilizzare le features messe a disposizione.

Pagina 1

HTML5 and Next RIA Apps - Introduzione al corso

Introduzione a Javascript
Per capire meglio come Javascript vede il DOM, vede una pagina HTML, consideriamo il
seguente schema:

Pagina 1

HTML5 and Next RIA Apps - Introduzione al corso

Introduzione a Javascript
Ogni tag viene visto come un “element” a cui possiamo accedere alle sue proprietà;
partiamo da un esempio base:

   Primo esempio di codice Javascript

     function visualizzaAlert()
     {
         alert('mi hai cliccato');
     }
    
Pagina 1

HTML5 and Next RIA Apps - Introduzione al corso

Introduzione a Javascript
Che produce il seguente risultato:

Cioè alla pressione del un tasto viene gestito l'evento “onclick” che richiama una funzione
Javascript che visualizza un messaggio di alert.

Adesso modifichiamo la pagina introducendo altri elementi e andremo a leggere le loro
proprietà.

Pagina 1

HTML5 and Next RIA Apps - Introduzione al corso

Introduzione a Javascript
Consideriamo il seguente codice:

HTML5 and Next RIA Apps - Introduzione al corso

Introduzione a Javascript

Titolo della pagina
Sotto titolo

Contenuto della pagina e
link annesso

Con l'evento “onclick” sul pulsante viene richiamata la funzione “visualizzaAttributi” che in
sequenza:

Crea un oggetto chiamato “obj” che istanzia il tag “h1” mediante il suo “id”
(id=”mainTitle”); mediante tale oggetto accediamo al contenuto del tag mediante la
proprietà “textContent” e la visualizziamo in un alert.
                // === Istanzio il tag h1 con id="mainTitle"
                var obj = document.getElementById('mainTitle');

                // === Leggo la sua proprietà textContent
                alert(obj.textContent);

Pagina 1

HTML5 and Next RIA Apps - Introduzione al corso

Introduzione a Javascript
Quindi accediamo in “lettura” a tale proprietà; per modificarla adesso accediamo in
scrittura, impostando un nuovo valore.
             // === Imposto adesso un'altro contenuto
             obj.textContent = 'EMIT Corso HTML5';

Successivamente accediamo all'attributo “class” del tag p identificato da id=”pageContent”
e lo visualizziamo in un alert
             // === Leggo l'attributo class da paragrafo con id="pageContent"
             alert(document.getElementById('pageContent').getAttribute('class'));

Esercitazione:
Scrivere il codice Javascript necessario per accedere all'attributo “href” del tag “a” e
modificare sia il valore dell'attributo “href” valorizzandolo con “
http://www.emit.polimi.it/” e cambiare il valore dell'attributo “title” con “Vai al sito di
EMIT”.

Pagina 1