Appunti HTML5

DREAMWEAVER CS 5.5. E HTML 5 Introduzione Con la nuova Creative Suite CS 5.5 è possibile pubblicare i contenuti su molti media digitali oggi presenti sul mercato. Oggi, attraverso la nuova suite, Adobe mette a disposizione una serie di applicativi in grado di creare contenuti una sola volta e pubblicare (gli stessi) su più media: desktop (Mac, Windows e Linux), Ipad e nuovi dispositivi mobili basati su sistemi operativi Android™, BlackBerry® o iOS. Il flusso di lavoro è, quindi, molto più rapido e semplificato; in certi casi le pubblicazioni su più media vengono realizzate in modo automatico in altri, dobbiamo utilizzare alcuni accorgimenti; ad esempio nel codice o nei controlli della pubblicazione, sempre senza "intaccare" o come in passato, rielaborare i contenuti.

Sempre più spesso si sente dire che "Flash è morto, non si usa più", in realtà si usa ancora, anzi per applicazioni complesse (i configuratori per automobili) Flash rimane ed è ancora la soluzione migliore; certo molte piattaforme mobili non lo supportano e linguaggi come java riescono, in un certo senso, a non far rimpiangere la mancanza di questa tecnologia.

Di più, Flash con la versione CS 5.5 Professional, attraverso il codice scritto in AS3 crea le applicazioni e le pubblica sui dispositivi mobili basata su sistemi operativi Android™, BlackBerry® o iOS. Flash per la pubblicazione oltre a utilizzare il tradizionale Adobe Flash player utilizza Adobe AIR. Adobe AIR è un runtime che consente agli sviluppatori di utilizzare HTML, JavaScript, Adobe Flash® Professional e ActionScript™ per creare applicazioni web che possono essere eseguite come client autonomi senza i vincoli di un browser. Con Adobe AIR i designer e gli sviluppatori possono sfruttare un ambiente di sviluppo uniforme e flessibile per la distribuzione di applicazioni su dispositivi e piattaforme diversi. Ora sono supportati anche i televisori e i sistemi operativi per dispositivi mobili Android™, BlackBerry Tablet OS* e iOS. Abode AIR è svincolato dai sistemi operativi o dai browser su cui viene eseguito, in quanto quando vengono richiamate le applicazioni che lo supportano, AIR viene installato sulla macchina, e per ogni macchina esiste un installazione ad hoc.

Ora anche Dreamweaver è notevolmente migliorato, Dreamweaver CS 5.5 non solo è in grado di produrre e distribuire siti e applicazione per il web di grande impatto, ma attraverso il nuovo linguaggio HTML5 e i CSS3 è in grado di produrre siti e applicazioni per le piattaforme mobili.

Ora è possibile creare i progetti servendosi del pannello CSS, aggiornato con il supporto delle nuove regole CSS3. Nuove regole che, permettono di creare grafica complessa partendo da delle semplici gif o jpg (es. gli angoli arrotondati o l'ombra degli oggetti).

-1-

In fase di pubblicazione, infine, imponendo i vincoli di larghezza delle pagine possiamo pubblicare lo stesso progetto su più media. Tutto questo a patto di creare pagine basate sul linguaggio HTML5 che aggiunge nuovi tag a quelli già esistenti ed è riconosciuto dai browser dei dispositivi mobili.

HTML 5: I nuovi tag Vediamo, ad esempio i tag <video></video> che permettono di inserire un video nella pagina.

Ecco l'esempio: <video poster="big_buck_bunny/poster.jpg" controls> <source src="big_buck_bunny/trailer.mp4" type="video/mp4" > <source src="big_buck_bunny/trailer.ogg" type="video/ogg" > <source src="big_buck_bunny/trailer.webm" type="video/webm">

Notate, in questo caso l'attributo source che permette di specificare, a seconda del browser su cui la pagina verrà caricata, il formato del video che deve essere caricato.

L’attributo poster ci consente di specificare una immagine che verrà utilizzata all‟interno dell‟area di riproduzione prima che il video venga eseguito.

Esistono poi, tutta una serie di tag per specificare i contenuti.

All‟inizio erano tabelle; ricordiamo tutti bene il tedio provocato dal dover costruire strutture complesse spezzandole all‟interno di una griglia fatta da infiniti <tr> e <td>: un attività noiosa, resa ancora peggiore dalla scarsa qualità e flessibilità del risultato. Poi, anni dopo, arrivarono i tag <div> e fu una vera e propria rivelazione; finalmente un modello di costruzione del documento pensato per separare in modo chiaro i contenuti tipici di una pagina web.

Grazie alla commistione dei tag DIV e i CSS nacquero pagine con codici HTML eleganti e leggibili. Passarono anni e il modello cominciò a mostrare le sue prime debolezze; in primo luogo ci si accorse che da un lato non vi era una regola collettiva e quello che per uno sviluppatore era „body‟ per l‟altro poteva essere „corpo‟; inoltre si realizzò che né il browser né tantomeno i motori di ricerca avrebbero mai potuto beneficiare di questa divisione semantica, proprio per colpa di quell‟arbitrarietà che permetteva a milioni di siti web di essere organizzati in strutture simili ma sempre leggermente diverse tra loro e per questo non raggruppabili secondo schemi automatici.

Emerse in questo modo uno dei più grandi problemi dell‟HTML4: l’incapacità di descrivere il significato delle informazioni di una pagina web in un formato interpretabile da altri software.

L‟HTML5 nasce per gestire ed incanalare tutte queste problematiche; i nuovi tag, infatti, disegnati appositamente per le più comuni strutture di contenuto e di attributi utilizzabili per definire ulteriore contenuto semantico alle pagine si adattano proprio a questo scopo. Oltretutto, cosa non da poco, si adattano perfettamente anche ai dispositivi mobili!

-2-

Come è noto il tag <!DOCTYPE html> specifica il tipo di linguaggio usato nella pagina web, in questo caso, come vedete il tag <!DOCTYPE html> è notevolmente semplificato non presentando ulteriori specifiche tipiche dei casi precedenti.

Con il Application Programming Interface API (Interfaccia di Programmazione di un'Applicazione) si indica ogni insieme di procedure disponibili al programmatore per la realizzazione di un determinato compito all'interno di un certo programma. Le API stesse rappresentano quindi un livello di astrazione intermedio, infatti consento al programmatore di non ripartire da zero perdendosi nello scrivere codice (di basso livello) che assolve funzioni e compiti elementari (es. tracciare un cerchio).

Il tag <cavas></cavas> può essere inteso come il corrispettivo digitale di una tela trasparente: uno spazio all‟interno di una pagina web sul quale insistere con specifiche API adatte a tracciare linee, cerchi, rettangoli, immagini e altro ancora. Il canvas è, in estrema sintesi, una grande matrice di pixel, ognuno dei quali modificabile singolarmente nelle sue quattro componenti RGBA, rosso, verde, blu e alpha, la trasparenza. In sostanza, questo tag e in grado di replicare i comportamenti fino ad oggi appannaggio della tecnologia Flash. (vedi http://xhtml.html.it/guide/lezione/5001/canvas/).

Il tag <audio></audio> come il tag <video></video> oltre ad avere una serie di attributi in grado di controllare la riproduzione del suono possiede attributi in grado di specificare il file da caricare per riprodurre l'audio a seconda del browser in cui l'audio stesso e richiamato.

Capitolo a parte, ma interessante per le funzionalità che vengono specificate sono i tag per i form (i moduli).

Premessa: quando Javascript fu introdotto nelle pagine web, fu subito implementato per assolvere a due compiti: il rollover delle immagini e la validazione dei form. Mentre il primo era un mero problema visuale (e in parte anche di usabilità), il secondo era necessario perché permetteva di eliminare (o per meglio dire arginare) l'invio di form mal compilati o con errori.

Per quanto riguarda la validazione con HTML5 avviene quello che è accaduto con l'audio e il video. Infatti, gli attributi associali a questi tag, introducono funzionalità e tecniche che permettono allo sviluppatore da affidarsi unicamente al linguaggio di markup, senza dove ricorrere a Javascript o a plugin esterni (grosso passo avanti).

-3-

Ad esempio, i nuovo linguaggio mette a disposizione un set di attributi specifici per il tipo range che servono a specificare delle limitazioni per il valore di questo attributo. Questi attributi sono min, max e step.

Esempio: <form name="commenti" method="post" action="/141/comments"> [...] <label>Voto: <input type="range" name="voto" min="0" max="5" step="1"> </label> [...] <input type="reset" value="Resetta il form"> <input type="submit" value="Invia il commento"> </form>

Interessante è anche l'attributo placeholder che permette di inserire un testo all'interno della casella o del box di testo in fase di definizione del form ovvero "inserisci qui il tuo nome". Non guadagna il focus e rimane fino a che l'utente non inserisce il testo.

Required, poi, è un attributo booleano e serve a rendere obbligatoria la compilazione dell'elemento a cui è applicato. La condizione viene valutata al submit del form.

Uno dei punti di forza di HTML5 è la semantica. Questo nuovo linguaggio ha introdotto diversi tag semantici (come header, article o nav) che permettono di strutturare il contenuto secondo una logica, appunto, semantica. Ma questa suddivisione non assolve a tutte le necessità semantiche di cui il web ha bisogno. L'obbiettivo è quello di dare la possibilità a programmi come crawler dei motori di ricerca o screen reader di comprendere il significato del testo. Queste informazioni sono accessibili da questi programmi e rimangono (attualmente) invisibili per l'utente. Entrano qui in gioco i cosiddetti microdati.

Ecco come Google li descrive, all'interno della Guida di Strumenti per i Webmaster: "La specifica dei microdati HTML5 è un modo per assegnare etichette ai contenuti al fine di descrivere un tipo specifico di informazioni (ad esempio recensioni, informazioni su persone o eventi). Ogni tipo di informazione descrive uno specifico tipo di elemento, come una persona, un evento o una recensione. Ad esempio, un evento ha proprietà quali il luogo, l'ora di inizio, il nome e la categoria."

Altra novità interessante sono i database per i browser (quelli che li supportano). Questo per dare la possibilità di creare e manipolare un database di ispirazione NoSQL (o rappresenta un alternativa ai cookie) memorizzato all‟interno del browser dell‟utente. Ogni database, identificato da un nome, può contenere un numero arbitrario di Object Store, letteralmente contenitori di oggetti: ad esempio -4-

un ipotetico database di una libreria potrebbe ospitare i seguenti Object Store: Libri, Clienti. Sia „Libri‟ che „Clienti‟ non sono altro che strutture paragonabili ad array associativi ordinati, dove ogni coppia chiave-valore rappresenta un oggetto, quindi in questo caso o un libro o un cliente.

All‟interno di un Object Store è possibile eseguire le normali operazioni di inserimento, modifica, eliminazione e ricerca; le API sono state pensate per ragionare con record in un formato JSON-like ma nulla vieta di memorizzare oggetti Javascript di fattura diversa, purché serializzabili.

CSS3 e la grafica.

Le nuove specifiche CSS3 definiscono nuove proprietà per gli sfondi e potenziano quelle esistenti. Una tra tutte, la proprietà background-position che permette di posizionare meglio lo sfondo della pagina web.

Poi abbiamo la proprietà Border-radius che permette di creare angoli arrotondati a qualsiasi elemento. Oltre alle precedenti specifiche, per quanto riguardano i bordi degli elementi (es. le tabelle o le immagini) le nuove proprietà definiscono gli angoli arrotondati degli elementi.

Ad esempio, la seguente proprietà: #box1 {border-top-right-radius: 20px} #box2 {border-top-right-radius: 20px 10px}

definisce l'arrotondamento dell'angolo superiore destro di un elemento E' possibile, poi, definire l'ombra di un elemento HTML. Se si guarda agli effetti visivi, la proprietà box-shadow introdotta nei CSS3 è forse, insieme a border-radius, quella più utile: con poche righe di codice CSS consente di ottenere un effetto di indubbia efficacia senza dover ricorrere a immagini, div aggiuntivi, hack di vario genere. box-shadow può essere applicata a tutti gli elementi.

Vediamo uno estratto del codice con quella che è la sintassi di base: box-shadow: 5px 5px 10px 2px #333333;

La sintassi di base prevede la definizione di quattro valori numerici:  Il primo valore (5px) imposta lo spostamento dell'ombra in senso orizzontale. Essendo il valore positivo, l'ombra viene collocata sul lato destro del box. Se si usano valori negativi l'ombra viene collocata sul lato sinistro.  Il secondo valore (5px) imposta lo spostamento in senso verticale. Dal momento che anche in questo caso si è usato un valore positivo, l'ombra viene collocata sul lato inferiore del box. Usando valori negativi l'ombra viene collocata sul lato superiore del box.

-5-

 Il terzo valore (10px) definisce il livello di sfocatura (blur radius) dell'ombra: più alto è questo valore, più sfocata apparirà l'ombra. Si usi 0 se si desidera un'ombra netta e senza sfocatura. Non sono permessi valori negativi.  Il quarto valore (2px) imposta il livello di diffusione (spread radius) dell'ombra. Più i valori sono alti, più l'ombra tenderà ad espandersi, in tutte le direzioni. Se invece si usano valori negativi, l'ombra tende a contrarsi, fino a scomparire del tutto.

Di questi quattro valori, gli unici obbligatori sono i primi due. I valori della sfocatura e della diffusione possono essere omessi. Se non specificati, tali valori sono pari per default a 0.

Arriviamo alla proprietà Font-face. Se non vogliamo usare soliti Verdana, Arial e Times New Roman il nuovo modulo CSS Fonts vi offre la soluzione. Grazie alla direttiva @font-face, infatti, possiamo usare i nostri font preferiti e servirli all'utente in un modo facile e veloce.

Tra l'altro, i web fonts caricati con @font-face sono supportati da anni, dalla versione 4.0, sul browser più diffuso: Internet Explorer. Negli ultimi 2/3 anni si sono accodati tutti gli altri produttori, e oggi non c'è davvero più alcun motivo che possa far esitare uno sviluppatore o un designer davanti alla possibilità di sfruttare questa tecnica.

Per usare i web fonts, l'unica cosa di cui abbiamo bisogno è... un font! Ma attenzione! Non tutti i font possono essere liberamente distribuiti, essendo la maggior parte protetti da ferree licenze commerciali relative al loro uso. Niente paura però. Per fortuna non mancano sul web eccellenti risorse a cui attingere per trovare font liberamente distribuibili e utilizzabili. Un sito da cui partire è www.fontsquirrel.com oppure webink (www.extensis.com/en/WebINK/index.jsp - sito a pagamento). Non solo (fontsquirrel) offre una vasta collezione di interessanti caratteri tipografici, ma può aiutarci a superare un grosso ostacolo: quello della compatibilità cross-browser dei formati di font. Anche Google offre alcuni font (http://www.google.com/webfonts).

-6-

Tramite @font-face possiamo utilizzare font in questi formati: TrueType (TTF), OpenType (OTF), WOFF, SVG, Embedded OpenType (EOT).

Vediamo la sintassi: @font-face { font-family: 'ArmWrestler'; src: url('armwrestler-webfont.eot'); /* per IE 5-8 */ src: local('☺'), /* direttiva local per IE */ url('armwrestler-webfont.woff') format('woff'), /* Firefox 3.6+, Chrome 5.0+, IE 9.0+ */ url('armwrestler-webfont.ttf') format('truetype'), /* Opera, Safari */ }

Prima osservazione. Bisogna definire una regola @font-face per ciascun font che intendiamo utilizzare.

E ora occhio all'ordine perché è cruciale: 1. Con font-family assegniamo un nome al font; è il nome che useremo successivamente quando dichiareremo nel foglio di stile la font-family; possiamo assegnare qualunque nome, ma è sempre conveniente fare riferimento a quello ufficiale del font.

2. Subito dopo, con il primo src, definiamo l'URL del font in formato EOT per Internet Explorer 58.

3. Nella riga successiva definiamo un nuovo attributo src, usando prima di tutto la direttiva local tramite la quale facciamo in modo che IE non scarichi anche la versione TTF del font consumando inutilmente banda e allungando i tempi di caricamento della pagina.

4. Infine, impostiamo l'URL del font in formato WOFF e quello per il formato TrueType.

Fatto. Ora non ci resta che usare i nostri font nelle dichiarazioni CSS consuete. Nell'esempio abbiamo usato solo questa regola: body {font: 14px ArmWrestler,Verdana, Arial, sans-serif;}

Come si vede, nulla cambia rispetto a quanto già sappiamo. Ci siamo limitati ad aggiungere i nomi dei font stabiliti in precedenza e a impostare i font alternativi, più che mai necessari visto che non tutti i browser supportano i font scaricati.

Veniamo al tag <wbr/> Rispetto al tradizionale tag <br />, già molto utilizzato, il tag <wbr /> ci permette di andare a capo solo quando c'è ne effettivamente bisogno (vedi i dispositivi mobili).

-7-

La proprietà Opacity Con opacity è possibile definire il livello di trasparenza di qualunque elemento. Di fatto, come recita la specifica, con opacity regoliamo il modo in cui un oggetto presente sulla pagina si fonde nella resa a schermo con lo sfondo.

La sintassi è delle più semplici. Ogni elemento ha di default un valore di opacity pari a 1. Se vogliamo regolare la sua trasparenza, usiamo una scala che va da 0.0 (oggetto completamente trasparente) a 1 (oggetto completamente opaco).

Vediamo la sintassi: div {background:white; color:black; opacity: 0.5}

La regola RGBa Da sempre, nei CSS, è possibile definire un colore con una notazione RGB, impostando cioè un valore per ciascun componente della tripletta di colori che è alla base di questo modello: Rosso (Red), Verde (Green), Blue (Blue).

I valori possono essere espressi in percentuale: body {background-color: rgb(100%, 100%, 100%)}

oppure usando una scala che va da 0 a 255: body {background-color: rgb(255, 255, 255)}

Le due regole sono equivalenti, in entrambi i casi lo sfondo della pagina sarà bianco.

Partendo da questa base, i CSS3 introducono una novità di sicuro interesse. Si tratta della definizione del colore attraverso una notazione RGBa: Rosso (Red), Verde (Green), Blue (Blue) e Alfa. 'Alfa' fa riferimento ad un'informazione extra, quella relativa al cosiddetto 'canale alfa', tramite il quale possiamo impostare la trasparenza del colore definito in RGB. Sintatticamente, i valori RGB si esprimono allo stesso modo visto in precedenza; il valore a (alfa) si imposta usando una scala compresa tra 0.0 (completamente trasparente) e 1.0 (completamente opaco), in maniera simile a quanto visto per la proprietà opacity: body {background-color: rgba(255, 255, 255, 0.5)}

Sempre a proposito di sfondo, interessante, anche la proprietà cover che ci permette di far si che l'immagine copra tutto l'elemento a cui viene applicata. Esempio: backgroud-size: cover; -8-

Creazione di pagine per il sito mobile http://www.adobe.com/devnet/dreamweaver/articles/getting-started-with-jquery-mobile.html Probabilmente ognuno di noi possiede o ha sentito parlare dei dispositivi mobili e altrettanto probabilmente si è reso conto che la categoria degli smartphone è molto ampia; la sfida che abbiamo davanti consiste nel creare siti che si “adattano” un vasto numero di differenti sistemi operativi e a un frammentato modo di interpretare gli standard web. Ad esempio, ultimo iPhone di Apple supporta, incredibilmente, i nuovi standard per l‟HTML5, mentre Symbian e i nuovi telefoni basati su sistemi operativi Microsoft attualmente non supportano o quasi questo nuovo standard. Per consentire di creare in modo efficace siti web per dispositivi mobili, gli sviluppatori di jQuery hanno lavorato su un framework che supporta gli standard mobili su una quantità abbastanza vasta di dispositivi mobili.

L'obiettivo degli sviluppatori di jQuery Mobile è creare un framework funzionante su il più ampio numero possibile di dispositivi mobili. Negli Stati Uniti l‟obiettivo primario è creare un framework compatibile con iOS e smartphone Android. Tuttavia, di fuori degli Stati Uniti, altri vettori, come Nokia, sono dominanti; quindi jQuery lavorerà anche sulla gamma di dispositivi che non usano i sistemi operativi predominati in USA. Per supportare una vasta gamma di dispositivi mobili deve, jQuery Mobile impiega una filosofia chiamata “progressive enhancement”; cioè il codice della pagina inizia con un markup HTML statico, che dovrebbe funzionare in tutti i browser. Poi aggiungere i comportamenti compatibili con i browser meno recenti. Ciò garantisce che il contenuto della vostra pagina e la funzionalità di base sono ancora visibili su dispositivi obsoleti.

Il problema della compatibilità dei browser, quindi non è di facile soluzione. Da un lato esistono browser con rich-content (ad esempio browser web Android, BlackBerry 6 e iOS Safari Mobile) che sono tutte le variazioni di un WebKit recent che posside un motore di rendering che alimenta molti browser web come Google Chrome e la versione desktop del Safari di Apple. (tale WebKit non sa nulla di caricamento o di funzioni che avvengono fuori dalla rete. Non sa nulla, ad esempio, di eventi OS nativi o non sa nulla di scorrimento).

Ogni sistema operativo, browser o fornitore del dispositivo, per visualizzare questi rich-content, deve costruire un browser basato su questo motore. Quindi avete milioni di telefoni che eseguono Nokia Symbian o Windows Mobile 6 e precedenti che non hanno implementato questo motore e in qualche modo però devono vedere questi contenuti. Per aggiungere alla sfida altri ostacoli dobbiamo sapere che ci sono diverse versioni di WebKit utilizzati dai diversi sistemi operativi mobili. Il principio di fondo rimane comunque il miglioramento progressivo del codice HTML per consentire di visualizzare le pagine su qualsiasi dispositivo mobile in grado di accedere al web.

-9-

Il primo passo per costruire un sito jQuery Mobile consiste nel creare una pagina web che all'interno dell'elemento HEAD fa riferimento ad alcuni file jQuery Mobile CSS e alcuni file JavaScript: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> <script src="http://code.jquery.com/jquery-1.5.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

Come si può vedere, in questo caso, con i file caricati all‟interno degli script, jQuery Mobile sta estendendo la libreria jQuery principale.

Creazione di pagine per il sito mobile usando i link A differenza delle pagine web tradizionali e le pagine web mobile non sono in grado di contenere una grande quantità di contenuti sia grafici che testuali.

Infatti, quanto visualizzo la versione tradizionale del sito del New York Times sul iPhone devo pizzicare e ingrandire per leggere il contenuto. Una soluzione migliore per visualizzare questo sito è quello di ridurre l'ingombro della pagina focalizzando il contenuto che si desidera presentare.

Un sito Web tradizionale, poi, è costituito da diverse pagine web con, a volte, pochi contenuti su ogni pagina. Ma quando si utilizza jQuery Mobile, si può affrontare il problema del microcontenuto in modo più efficiente; qui possiamo usare una sola una pagina con alcuni rimandi ai contenuti presenti sulla stessa pagina (uso di ancore).

Una pagina può essere strutturata come un blocco DIV (in jQuery Mobile) con un menu che collega più pagine diverse. La prima parte delle pagina, quindi, è costituita da un menu con collegamenti a una seconda parte della stessa pagina, la seconda parte (della pagina) è costituita da successivi blocchi DIV composti da Header, contenuto e Footer che rappresentano le diverse pagina.

La parte importante del blocco DIV è il primo div. All'interno dell'elemento notiamo la proprietà ID e data-role: data-role="page" id="menu"

data-role definisce il contenuto nell'elemento DIV come una "pagina". Data-role = "pagina" incarica jQuery Mobile che quella è una nuova pagina visibile dal dispositivo mobile. L'ID specifica che il blocco conterrà un menù in grado di indirizzare il navigatore su altri blocchi della stessa pagina.

Quindi, la pagina del menu è la prima pagina (per il dispositivo mobile) e poi ci sono tre ulteriori "pagine" che sono raggiungibile tramite un href e un ID.

- 10 -

Quando testate la pagina sul vostro dispositivo Android o iOS. succederanno tre cose: 1. Il menu carica come una propria pagina (si può provare a scorrere su e giù, ma non si vedrà altro).

2. Quando si seleziona un link, sulla pagina si noterà una transizione (effetto grafico) a un‟altra sezione della pagina.

3. Quando si entra su una pagina interna (non di menù) un pulsante indietro apparirà automaticamente in alto nella pagina.

Intestazioni e piè di pagina possono diventare bottoni di navigazione. Bottoni interattivi possono essere aggiunti a un piè di pagina che vi porterà alle sezioni dello schermo. Questa operazione viene eseguita con un data-role="navbar".

Qui sotto c'è il codice per una barra di navigazione: <div data-role="navbar"> <ul> <li><a href="#nav1" class="ui-btn-active">One</a></li> <li><a href="#nav2">Two</a></li> </ul> </div><!-- /navbar -->

Possiamo anche aggiungere bolle di dati per ciascuna voce di un elenco. Nell'esempio seguente viene aggiunto, all‟interno di ciascuna bolla, il numero di anni di Regno di ogni membro della famiglia reale britannica: <ul data-role="listview" style="margin-top: 0;"> <li><a href="#nav1">Henry VIII <span class="ui-li-count">Reign 37 Years</span></a></li> <li><a href="#nav1">George V <span class="ui-li-count">Reign 25 Years</span></a></li> <li><a href="#nav1">Prince of Wales <span class="ui-li-count">N/A</span></a></li> <li><a href="#nav1">Elizabeth I <span class="ui-li-count">Reign 44 Years</span></a></li> <li><a href="#nav1">Elizabeth II<span class="ui-li-count">Reign since 1952</span></a></li> </ul>

Pubblicazione del sito JQuery Mobile (importante !)

Come per i siti tradizionali, il sito jQuery Mobile è un insieme di file HTML, CSS e JavaScript. La distribuzione non è diversa rispetto alla distribuzione di un sito standard HTML/CSS. Possiamo utilizzare benissimo un programma FTP o la soluzione FTP presente in Dreamweaver, e pubblicare tutti file generati per il sito JQuery Mobile sul server web. Teniamo presente, in questo caso, che dobbiamo spostare (sul server) tutti i file JavaScript, CSS e le immagini che abbiamo generato, sia in modo automatico con i comandi di Dreamweaver sia in modo volontario con la creazione del nostri contenuti.

- 11 -

A questo punto, quando abbiamo caricato i nostri file sul server è possibile visitare il sito utilizzando un dispositivo mobile come un BlackBerry, iPhone, Android o Windows Phone.

Quando si pubblica un sito JQuery Mobile si può prendere in considerazione la creazione di un'identità mobile (dominio) completamente separata dal sito tradizionale creato per il desktop. Per esempio, se il sito principale è raggiungibile all‟indirizzo www.companyname.com, il vostro sito mobile verrà postato su m.companyname.com.

Non c'è un modo giusto o sbagliato per prediligere un sito desktop rispetto a un sito mobile. La decisione giusta comunque deve garantire una esperienza visiva accettabile anche nel caso del sito web mobile.

Risorse online: http://www.adobe.com/devnet/html5/articles/html5-basics.html http://diveintohtml5.org/ http://www.css3.info/free-css3-video-tutorials/ http://www.building43.com/videos/2011/05/05/adobes-dreamweaver-cs5-5/ (Video intervista a Scott Fagette, proget manager di Dreamweaver CS 5.5) http://tv.adobe.com/watch/adc-presents/videoandhtml5part1understandinghtml5/

- 12 -