- 1 -

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).

- 2 -

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!

- 3 -

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).

- 4 -

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

- 5 -

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.

- 6 -

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).

- 7 -

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 5-

8.

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).

- 8 -

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;

- 9 -

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.

- 10 -

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 micro-

contenuto 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.

- 11 -

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.

- 12 -

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/