Realizzare siti in versione mobile -

Le applicazioni web possono essere visualizzate su dispositivi con caratteristiche hardware molto differenti tra di loro.

La dimensione dello schermo del dispositivo è la caratteristica tecnica principale che segna la linea di confine tra il vedere l’applicazione web nel suo aspetto originale e l’utilizzare una visualizzazione mobile per mostrare il contenuto.

La versione mobile di un sito può essere di due tipi: una applicazione o un tema grafico tagliato a misura dei dispositivi mobili.

L’applicazione deve essere scritta per il specifico dispositivo per la quale viene pensata. A tale scopo sono disponibili diversi framework che traducono l’applicazione in linguaggio macchina del dispositivo.

Il principale vantaggio dell’applicazione è che utilizza caratteristiche e funzioni del sistema operativo montato sul dispositivo, potendo disporre anche delle feature che il sistema mette a disposizione (per esempio sviluppando una applicazione per iphone si può sfruttare il fatto che il telefonino lo si può scuotere – funzione shake – e progettare l’applicazione in modo che risponda in un determinato modo se lo shake è usato; altro esempio per dispositivi apple l’utilizzo di più dita per navigare e il poter tracciare diverse gestures nell’utilizzo dell’applicazione)

Nel caso di utilizzo di una applicazione in pratica non viene usato un browser e un linguaggio di programmazione web per consultarlo. Il database viene utilizzato solo come deposito di contenuti richiamati dalla app stessa nel suo linguaggio.

Lo svantaggio dell’utilizzo dell’applicazione è che va scritta una app per ogni gruppo di dispositivi esistenti (app per blackberry, app per android, app per prodotti apple).

Alternativa alla applicazione è la costruzione di un tema grafico fruibile via browser web installato su dispositivi mobili.

NB che con tema grafico non si intendo solo l’utilizzo di un foglio di stile differente, ma il caricamento di un vero e proprio template nel quale gli oggetti sono disposti diversamente, dove possono essere aggiunti elementi e rimossi altri non necessari nella navigazione su dispositivi con risoluzione limitata.

L’informazione che viene utilizzata per discriminare l’utilizzo o meno di un template per mobile è lo User-Agent.

Lo User-Agent è una informazione appartenente al client che identifica browser, versione del browser, sistema operativo e lingua

L’applicazione web si prende carico del compito di controllare lo User-Agent che sta visitando il sito, decidere se si tratta di un dispositivo per il quale è necessario il tema mobile.

Dove risiede però il criterio o i criteri tramite i quali si decide cosa fare?

Non esiste un criterio matematico, ma il criterio comunemente utilizzato è una lista testuale da consultare che elenca gli user-agent dei dispositivi mobili.

La lista può essere locale (ossia sul server che ospita l’applicazione) o remota (quindi la consultazione di un file o di un database remoto con la lista)

In pratica, se lo user agent è tra quelli presenti nella lista viene caricato il template mobile.

Utilizzo in Drupal:

Esistono 4 moduli per effettuare questo redirect in Drupal:

WURFL
Browscap
Mobile Tools

Il funzionamento di questi 4 moduli non prevede il caricamento diretto del template mobile proseguendo la navigazione nella stessa URL quanto piuttosto in redirect verso – in genere – un dominio di terzo livello.

Questo viene fatto perché così l’informazione riguardante il metodo di navigazione dell’utente non deve essere memorizzata (localmente tramite cookie o dal server tramite sessione) e ricontrollata ad ogni richiesta.

Effettuato il redirect verso il dominio di terzo livello la navigazione prosegue senza ulteriori controlli

Descrizione dei moduli:

WURFL

E’ un modulo semplice e minimale.

Effettua il controllo sul dispositivo che visita il sito basandosi sulla libreria WURFL PHP library la quale consulta un file xml locale e ritorna il tipo di dispositivo.

Il file xml è da aggiornare manualmente.

Il criterio con cui fa la distinzione si basa sul tipo di dispositivo (non sul browser) usato.

http://drupal.org/project/wurfl

Browscap

Funziona allo stesso modo di WURFL con la differenza che consulta in un primo momento un file remoto (browscap.ini) messo a disposizione dallo sviluppatore della libreria.

Dopo la consultazione del file viene aggiornata una tabella del database (sempre locale) che evita mal configurazioni nel file in caso di interventi manuali.

Il criterio di classificazione degli user-agent è la consultazione del browser.

http://drupal.org/project/browscap

Mobile Tools

Modulo più completo.

Si integra sia con WURFL che con Browscap dei quali sfrutta la classificazione del dispositivo per migliorare il detect.

Fornisce una interfaccia di amministrazione tramite la quale è possibile creare condizioni di redirect.

Si integra con molti altri moduli aggiuntivi di Drupal.

http://drupal.org/project/mobile_tools

Problemi conosciuti

I motivi che causano il malfunzionamento di questi moduli sono motivi esclusivamente riconducibili alla cache del sito nella navigazione per utenti anonimi. Più precisamente a moduli che estendono la cache nativa di Drupal, come ad esempio Boost.

Boost è un modulo che staticizza le pagine periodicamente (con tempi a scelta dell’utente) le comprime e le dà in pasto al browser nel momento in cui vengono richieste. Questo inibisce l’opportunità di effettuare richieste lato server (quindi di controllare il dispositivo utilizzato), e di utilizzare sempre la pagina cachizzata.

Per risolvere questo problema di può procedere in tre direzioni: modificare il modulo boost in modo da non fargli memorizzare in cache la Home Page, abbassare il controllo a lato client o alzarlo ad un livello più alto del server rispetto al linguaggio di programmazione.

Modificare il modulo boost

Permetterebbe l’esecuzione del codice php della pagina e conseguentemente il suo controllo sul browser.

Non funziona per i link diretti alle pagine (ad esempio i link che arrivano dai risultati dei motori di ricerca) o i link diretti interni del sito.

Abbassare il livello nel client

E’ la soluzione intuitivamente più veloce, permette di intercettare in fretta alcuni dispositivi. Ha delle controindicazioni:

L’utente (o chi per lui – un modulo aggiuntivo) può disabilitare javascript facendo saltare il controllo.
Non tutti i browser per dispositivi mobili supportano javascript, e il controllo salta.
Il controllo lato client è a carico della macchina dell’utente.

Alzare il controllo nel livello server

E’ la soluzione più sicura ma anche la più complicata da attuare.

Si può procedere in due modi:

Scrittura di regole nel file .htaccess

Le regole devono essere scritte nel modo più preciso possibile, non è possibile consultare una lista esterna e dinamica rispetto al file quindi va tutto scritto all’interno

Il vantaggio è quello di poter innalzare il livello della distinzione pur mantenendo separata la gestione dominio per dominio.

Filtro installato sul server

E’ possibile rendere disponibile il filtro WURFL non solo ai linguaggi di programmazione dinamica come php, o javascript, ma a tutti i linguaggi.

Conseguentemente è stato scritto un modulo aggiuntivo di apache che sfrutta il filtro WURFL

http://www.idelfuschini.it/apache-mobile-filter-v2x.html

Lo svantaggio è che essendo un filtro a livello di apache è ancora a livello più alto dell’htaccess e ingloba dentro di se tutti i domini creati sul server.

Inoltre essendo una modifica su apache ci vuole la conoscenza tecnica per effettuare l’installazione e la configurazione in maniera corretta senza minarne in funzionamento.

Conclusioni

La via migliore per siti fatti in drupal è quella di installare il modulo mobile tools per avere una buona gestione dei redirect e delle condizioni di reindirizzamento tramite il pannello di controllo e di accoppiarlo con uno dei due metodi di detect, wurfl o browscap.

Inoltre, nel caso fosse installato il modulo integrativo della cache boost aggiungere al file .htaccess nella root del dominio regole che effettuino il controllo e il redirect prima di processare il file php preservando così la cache statica creata dal modulo.

Risorse:

http://wurfl.sourceforge.net
http://drupal.org/node/681396
http://www.projectronin.com/blog/?p=10
http://sourceforge.net/projects/mobilefilter/
http://ohryan.ca/blog/tag/mobile-browser/
http://drupal.org/node/1214890
http://cruncht.com/417/mobile-drupal-groundwork/
http://www.mediacurrent.com/blog/going-mobile-drupal
http://drupal.org/project/mobile_tools
http://drupal.org/project/browscap
http://drupal.org/project/wurfl