Outline Caratteristiche del Mobile Web Modello di fruizione nel Mobile Web Tipologie di siti per dispositivi mobili: siti derivati vs. siti dedicati Mobile

Outline• Caratteristiche del Mobile Web

• Modello di fruizione nel Mobile Web

• Tipologie di siti per dispositivi mobili: • siti derivati vs. siti dedicati

• Mobile Web Practices

• Linguaggi e ambienti di programmazione:• WAP vs. XHTML MP

• Resa grafica sui device mobili: emulatori

• Correttezza del codice: validatori

• Bontà architettura dell’informazione e funzionalità: test di usabilità

Sviluppo vero e proprio

Linguaggi e ambienti di programmazione

• Introduzione WML – specifiche WAP 1.0/2.0

• XHTML MP e CSS MP

Linguaggi per il mobile web

WAP 1.0 e WML (1)

WAP 1.0 e WML (2)

WAP 2.0

• XHTML Mobile Profile è XHTML Basic (anch'esso un sottoinsieme di XHTML) più rigoroso e depurato da quegli elementi e caratteristiche che non riescono ad essere interpretate dalle attuali ridotte capacità dei dispositivi mobili.

• Prima di usare l' XHTML Mobile Profile, il linguaggio per i siti per dispositivi mobili era il WML (Wireless Markup Language) ed il WMLScript. Con l' uscita dell' XHTML Mobile Profile, le pagine realizzate per i dispositivi mobili e quelle per dispositivi desktop convergono, perché di può usare la stessa tecnologia per realizzarle.

• Ora dunque, scrivere una pagina per i dispositivi mobili (XHTML MP) differisce di poco dallo scriverla per dispositivi desktop (XHTML), perché di poco differiscono XHTML MP e XHTML!

XHTML MP

• Le pagine HTML /XHTML del nostro sito possono essere convertite in documenti XHTML MP con poche modifiche o persino senza apportarne nemmeno una. Ci si deve assicurare, tuttavia, che il layout delle pagine HTML /XHTML si veda bene su un piccolo monitor e che la dimensione non sia più grande di quella che sarà la dimensione dei dispositivi degli utenti finali.

•Dal momento che si tratta di un formato figlio di XHTML esso ne eredita le caratteristiche formali e la filosofia.

• In particolare è stata eliminato dall’XHTML la gran parte di elementi e attributi dedicati alla gestione dello stile di presentazione, a vantaggio di un codice più leggero, pulito e orientato al significato delle informazioni.

• L' XHTML MP supporta WAP CSS, il quale permette la separazione dei contenuti dalla presentazione in file distinti e con estensioni diverse. Come tutti sappiamo, i dispositivi mobili hanno caratteristiche molto differenti, per esempio i formati di schermo. La separazione del contenuto dalla presentazione significa che si deve scrivere il contenuto una sola volta, e cambiare lo stile ed il layout per dispositivi mobili differenti intervenendo solo sul file WAP CSS.

• Con XHTML MP e WAP CSS si ha più controllo sulla presentazione. Per esempio si possono controllare bordi, sfondi, margini, padding, ecc... È possibile specificare, inoltre, la dimensione del font, font-family ed il colore. Tali caratteristiche non erano presenti in WML 1.x.

Rispetto al WML, HTML MP non supporta

• Decks e cards:

Le CARD (luoghi dove vengono visualizzate ed elaborate le informazioni, cioè il testo e la grafica) sono organizzate in DECK (struttura del sito web) Il browser WAP visualizza ogni volta una scheda e ci si può spostare in altre schede attraverso i collegamenti àncora (link). Con l' uso dei deck e delle card il numero di richieste al server sono ridotte.Per ottenere caratteristiche simili in XHTML MP, si possono dividere i messaggi in più parti (più documenti vengono messi in una singola risposta http). Un' altra soluzione potrebbe essere quella di usare i link àncora ( i link àncora sono presenti in varie parti della pagina, ed i collegamenti sono definiti con lo scroll sui punti in cui essi si trovano).


• Timers:

Per generare un temporizzatore (timer) in WML, si usa il tag <timer> con il corrispondente evento "ontimer". Entrambi questi due elementi non sono supportati dall' XHTML MP. Per avere lo stesso risultato, si deve usare il tag <meta http-equiv="refresh" />:

<head><meta http-equiv="refresh" content="10; URL=http://www.Nomesito.com/" /></head>

Nell' esempio di codice qui sopra proposto, l' elemento <meta> indica al browser WAP di andare all' url indicato (nell' esempio un url generico) dopo 10 secondi.


• Eventi:

Gli eventi non sono disponibili in XHTML MP. Il WML supporta 4 eventi: ontimer, onenterbackward, onenterforward e onpick. In XHTML MP l' aggiornamento HTTP lo si può simulare con l' evento ontimer.Per gli altri eventi, non ci sono alternative in XHTML MP. Se il loro uso deve necessariamente essere previsto per la visualizzazione delle applicazioni sui dispositivi Internet mobili, si deve prendere in considerazione la possibilità di usare il WML dalla versione 1.x al posto dell' XHTML MP.


• Gli scripting lato client:

In WML è possibile utilizzare un linguaggio di scripting lato client chiamato WMLScript, il quale è molto simile al JavaScript. Questo linguaggio lato client non è disponibile in XHTML MP. I dispositivi mobili supportano un linguaggio di scripting lato-client chiamato ECMAScript Mobile Profile (ESMP), il quale è stato pensato per poter interagire con l' XHTML MP. Esso supporta tutte le funzionalità di WMLScript.


• La configurazione dei tasti rapidi:

Attraverso le gli utenti possono selezionare le opzioni, a seconda dell' azione che devono svolgere, più usate di frequente premendo il tasto destro o sinistro presente sul dispositivo mobile.Non è possibile programmare le softkeys in XHTML MP. Una alternativa è quella di usare l' attributo "accesskey". I tag àncora ed i pulsanti di invio (submit) supportano l' attributo accesskey:

<a accesskey="1" href="pag1.xhtml">Lezioni XHTML MP Parte 1</a><a accesskey="2" href="pag2.xhtml">Lezioni XHTML MP Parte 2</a><a accesskey="3" href="pag3.xhtml">Lezioni XHTML MP Parte 3</a>

Se l'utente preme il tasto "1" il browser WAP andrà direttamente alla "pag1.xhtml".


• Il tag per la sottolineatura :

Tale tag non esiste in XHTML MP. Per sottolineare delle parole, si deve usare la proprietà "text-decoration" del WAP CSS.Per esempio, se si volesse sottolineare un titolo contraddistinto dal tag h1, si deve scrivere la seguente dichiarazione in un foglio di stile WAP CSS, oppure nella pagina XHTML:

h1 {text-decoration: underline

}

Tale sintassi non è per nulla diversa da quella utilizzata dai fogli di stile utilizzati per le pagine web.


• Il tag per la sottolineatura :

Tale tag non esiste in XHTML MP. Per sottolineare delle parole, si deve usare la proprietà "text-decoration" del WAP CSS.Per esempio, se si volesse sottolineare un titolo contraddistinto dal tag h1, si deve scrivere la seguente dichiarazione in un foglio di stile WAP CSS, oppure nella pagina XHTML:

h1 {text-decoration: underline

}

Tale sintassi non è per nulla diversa da quella utilizzata dai fogli di stile utilizzati per le pagine web.


• L' attributo format per i campi di testo :

WML si può specificare un valore per l' attributo <format> di un elemento di "input" per restringere il tipo ed il numero dei caratteri che un utente può scrivere in un campo di testo.In XHTML MP, l' attributo "format" è stato eliminato dall' elemento "input". L' alternativa è usare la proprietà "wap-input-format" presente in WAP CSS. Per esempio, per restringere l' immissione nei campi di testo e fare in modo che in essi si debbano inserire solo 5 caratteri numerici, si può scrivere la seguente dichiarazione attraverso il WAP CSS nella pagina XHTML:

input {-wap-input-format: "5N"

}


• L' invio dei dati attraverso i link : In WML, l'invio dei dati dell'utente al server avviene mediante i link àncora:Il tuo nome?<input name="nome"/> <anchor><go method="get" href="pag_xhtml_tutorial.asp "><postfield name="name" value="$(name)"/><postfield name="tutorial" value="$(tutorial)"/></go> Invia dati </anchor>

XHTML MP non supporta l' invio dei dati con i link àncora; devono essere utilizzati, invece, i pulsanti di invio:<form action="pag_xhtml_tutorial.asp " method="get"> Il tuo nome? <input name="nome"/> <input type="submit" value=" Invia dati"/>

</form>

XHTML MP: Regole di sintassi

• Tutti i tag in XHTML MP devono essere chiusi correttamente.

Codice scorretto:

XHTML MP tutorial parte 1XHTML MP tutorial parte 2XHTML MP tutorial parte 3

Codice corretto:

XHTML MP tutorial parte 1XHTML MP tutorial parte 2XHTML MP tutorial parte 3


• Tag ed attributi devono essere scritti in minuscolo

Il markup XHTML MP è case-sensitive. Tutti i tag ed attributi devono essere scritti in minuscolo.

Codice scorretto:

XHTML MP tutorial parte 1XHTML MP tutorial parte 2XHTML MP tutorial parte 3

Codice corretto:

XHTML MP tutorial parte 1XHTML MP tutorial parte 2XHTML MP tutorial parte 3


• Il valore degli attributi deve essere racchiuso tra apici

Si possono usare sia apici doppi che singoli.

Codice scorretto:

XHTML MP tutorial parte 1XHTML MP tutorial parte 2XHTML MP tutorial parte 3

Codice corretto:

XHTML MP tutorial parte 1XHTML MP tutorial parte 2XHTML MP tutorial parte 3


• Non è permessa nessuna minimizzazione degli attributi

Per alcuni attributi è previsto uno ed un solo possibile valore. In HTML si può omettere il valore di un attributo in alcuni casi. Questo è definito "minimizzazione" di attributo.

Codice scorretto:<input type="checkbox" checked="checked" />

Codice corretto:<input type="checkbox" checked="checked" />


• I tag devono essere annidati correttamente

Codice scorretto:XHTML MP tutorial parte 1XHTML MP tutorial parte 2XHTML MP tutorial parte 3

Codice corretto:XHTML MP tutorial parte 1XHTML MP tutorial parte 2XHTML MP tutorial parte 3

Tag ammessi in XHTML MP (1)

Tag ammessi in XHTML MP (2)

Supporto tag in XHTML MP (1)

Supporto tag in XHTML MP (2)

Supporto elementi multimediali

Accessibilità in XHTML MP (1)

Accessibilità in XHTML MP (2)

CSS MP

CSS MP

Proprietà di CSS MP (1)

Proprietà di CSS MP (2)

Supporto elementi CSS MP

Accessibilità CSS MP (1)

Accessibilità CSS MP (2)

Testing e valutazioni circa la qualità del sito realizzato









Già durante la fase di sviluppo è importante verificare costantemente la resa del codice sui display dei terminali finali.Andrebbero in tal senso valutati:




Emulatori e Testing

• Per valutare la resa grafica, ci si può avvalere di emulatori.Un emulatore è un software che sfrutta le risorse di un calcolatore per simulare le caratteristiche e le prestazioni di un altro apparecchio hardware o di un altro sistema operativo.

• Nel mondo del mobile web, per via dei costi che possono derivare dall'acquisto di una serie di dispositivi, l'utilizzo degli emulatori rappresenta spesso una strada obbligata per poter valutare la qualità delle pagine su un buon numero di piattaforme.

• La dimensione che viene a mancare è ovviamente quella dell'interazione vera e propria con il dispositivo.

Emulatori

• Microsoft Device Emulator. Si tratta di un potente tool per l'emulazione di sistemi basati su Windows Mobile 5.0. Il sistema consente di caricare su PC le immagini di due palmari e di uno smartphone basati sul sistema operativo di Microsoft. Uno strumento molto interessante anche solo per navigare un po' il web e scoprire quanti pochi siano i siti web adatti ad una visualizzazione da dispositivo mobile;

• Openwave Developer Kit: consente di installare su PC un emulatore del browser Openwave;

• Wapag: dalla pagina web è possibile lanciare ben sei emulatori di cellulari I-mode.

Emulatori

• YoSpace: fornisce una serie di emulatori utilizzabili direttamente via web ma offre anche la possibilità di accedere ad un emulatore personalizzato da installare nelle pagine del proprio sito web.

• Go.Web: la casa produttrice di RIM blackberry offre, previa registrazione, l'accesso ad un software che consente di emulare un cercapersone. Molto utile per ottenere una vista anche su una piattaforma meno consueta.

• Rientra nella categoria degli emulatori anche la tecnologia di Small Screen Rendering (SSR) incorporate nel browser Opera (http://www.opera.com).

SSR è una tecnologia sviluppata da Opera per adattare il contenuto delle pagine web alle ridotte dimensioni e capacita dei dispositivi mobili. E’ possibile sperimentare questa modalità di navigazione anche mediante la versione PC di Opera. Semplicemente attivando l'opzione corrispondente, SSR riorganizza il contenuto automaticamente per riempire lo schermo del dispositivo mobile impedendo per prima cosa lo scrolling orizzontale perché il contenuto sarà sempre largo quanto lo schermo e non di più.

http://www.opera.com/

• SSR annulla alcuni aspetti della visualizzazione della pagina:

• Layout della pagina• Immagini• Colori• Tabelle• Frames• Dimensione dei font• Allineamento

•La pagina web viene mostrata come una unica colonna di testo. Se il layout originale utilizza colonne multiple, queste vengono unite in una unica colonna seguendo l’ordine del documento XHTML che abbiamo creato.

• Immagini molto grandi non vanno molto bene sui piccoli schermi quindi alcune vengono rimosse e altre vengono scalate.

• Le immagini usate in background non vengono mostrate e il colore di background viene automaticamente reso in grigio chiaro e il colore del testo in nero, questo per aumentare la leggibilità dei testi sui piccoli schermi. Ecco perché è importante non affidare al solo colore i messaggi che vogliamo veicolare.

• Se la pagina web ha un css, Opera non vi applicherà la tecnologia SSR ma interpreterà il foglio di stile corrispondente.









Per valutare la correttezza formale del codice esistono alcuni strumenti gratuiti accessibili direttamente dalla Rete (validatori automatici).

• Per verificare la correttezza del codice XHTML si consiglia l'uso di:

• W3C Markup Validation Service: http://validator.w3.org/ • Web Design Group HTML Validator: http://www.htmlhelp.com/tools/validator/

• In relazione alla validità dei fogli di stile CSS si possono utilizzare:

• W3C CSS Validator: http://jigsaw.w3.org/css-validator/ • Web Design Group CSSCheck: http://www.htmlhelp.com/tools/csscheck/

Validatori

http://validator.w3.org/

http://www.htmlhelp.com/tools/validator/





http://jigsaw.w3.org/css-validator/



http://www.htmlhelp.com/tools/csscheck/





• Un altro strumento molto utile è fornito da WebSiteOptimization.com, http://www.websiteoptimization.com/services/analyze/ che mette a disposizione un applicativo gratuito per valutare l'efficienza delle pagine web.

Il sistema fornirà un report con utili consigli sui punti da migliorare per rendere la propria pagina più veloce.

Per esempio ci aiuterà il tempo impiegato per visualizzare la pagina a varie velocità di connessione e ci segnalerà quali sono gli elementi più

problematici su cui lavorare per alleggerire il codice.

Validatori

http://www.websiteoptimization.com/services/analyze/





• Infine, si potrebbe usare un software che simula diverse velocità di connessione.

• Sloppy (http://dallaway.com/sloppy/), ad esempio, è un applicativo Java che permette di valutare il tempo che impiegherà una pagina ad essere visualizzata. Particolarmente utile è la possibilità di impostare come velocità di connessione 9,6 Kb/s, corrispondente ad una connessione GPRS.

• Mobi (http://mr.dev.mobi) verifica tempi e costi di scaricamento pagine e indica se il codice e’ corretto, fornendo anche consigli su come modificarlo.

Validatori

http://mr.dev.mobi/









Test usabilità• Sulla base delle conoscenze che sono state elaborate durante la fase di analisi, si recluta un campione di 10-15 utenti considerati rappresentativi del potenziale pubblico di visitatori del sito:

• Motivazione/ricompensa• Inclusione anche degli anziani, non vedenti e altre categorie di utenti che consentano di testare anche la dimensione di accessibilità

• L’esperto stila un set di compiti la cui usabilità è giudicata importante per il raggiungimento degli obiettivi del sito;• Per ciascun compito, l’esperto definisce le istruzioni per la sua esecuzione e soglie di efficienza ed efficacia (es. tempo impiegato, numero di click, numero di errori, raggiungimento dell’obiettivo, etc.)• Si conduce un test preliminare (pre-test) durante il quale si sottopone ad uno o due utenti rappresentativi il set di compiti, allo scopo di affinare le istruzioni e le metriche di valutazione;

Test usabilità

• Si conduce il test vero e proprio in un laboratorio di usabilità: l’esperto presenta i compiti da eseguire e assiste all’esecuzione senza intervenire in alcun modo;

• Si accolgono i dati (riprese audio e video, registrazioni dello schermo, appunti presi dall’esperto, etc.) e li si esamina da un punto di vista statistico;

• Si scrive un rapporto conclusivo in cui si evidenziano le criticità, si portano le adeguate motivazioni, si espone la metodologia seguita e si formulano raccomandazione per il miglioramento del sistema;

Test usabilità• Vantaggi:

• Coinvolge gli utenti reali, il cui punto di vista inedito è assai importante;• Porta alla luce il percorso degli utenti reali nel sistema;• Consente di ottenere misurazioni comparabili all’interno di una sessione di test e tra sessioni differenti (es. condotte dopo un primo re-design);• Produce dati quantitativi, più obiettivi e facilmente comunicabili;

• Limiti: • Pone gli utenti in una situazione sperimentale controllata ed estranea alle reali dinamiche interattive;• Gli utenti non sono realmente motivati ad eseguire gli obiettivi; prescritti e la loro performance può essere comunque influenzata dalla “situazione-test”;• Si rischia di perdere per strada le componenti più qualitative dell’interazione con uno strumento (piacevolezza, frustrazione, etc.)

Riferimenti

• W3C, “Mobile Web Best Practices 1.0”, 2006 (http://www.w3.org/TR/mobile-bp/)

• Crevola A., “Guida siti per dispositivi mobili”, 2005 (http://mobile.html.it/guide/leggi/29/guida-siti-per-dispositivi- mobili/)

• Etemad E., Newth J.D., “Pocket-Sized Design: Taking Your Website to the Small Screen”, 2004 http://www.alistapart.com/articles/pocket/

• Morville P., “Ambient Findability”, O’Reilly 2006

http://www.w3.org/TR/mobile-bp/

http://mobile.html.it/guide/leggi/29/guida-siti-per-dispositivi-mobili/





http://www.alistapart.com/articles/pocket/

56

Esame

•Realizzare un sito web e il suo infodesign per dispositivi mobili che:

• Rispetti tutte le MWBP

• Abbia codice XHTML validato dal W3C Markup Validation Service: http://validator.w3.org/

• Abbia codice CSS validato da W3C CSS Validator: http://jigsaw.w3.org/css-validator/

• Testare il sito anche con http://www.websiteoptimization.com/services/analyze/

• Testare il sito anche con: http://ready.mobi/launch.jsp?locale=en_EN

http://validator.w3.org/

Documents

Outline Caratteristiche del Mobile Web Modello di fruizione nel Mobile Web Tipologie di siti per dispositivi mobili: siti derivati vs. siti dedicati Mobile