Rendere il proprio sito web accessibile e visibile da ogni tipo di dispositivo, soprattutto quelli mobile è diventato un requisito fondamentale con l'avvento del web 2.0, ancora di più lo è diventato personalizzare gli stili e i contenuti in base al dispositivo con cui li stiamo visualizzando; spesso infatti chi guarda un sito nella versione mobile ha necessità di reperire le informazioni che cerca in modo rapido ed efficace e non avrà di certo la possibilità di interagire con un astruso sistema di menu come può fare solitamente dal pc di casa. Oggi cercheremo di capire come rendere il nostro sito web responsive e poterlo quindi visualizzare anche in versione mobile utilizzando un componente che si basa sul famigerato user-agent teraWURFL e la cui particolarità è quella di NON richiedere la duplicazione delle voci di menu. Il componente in questione è Mobile Joomla giunto alla versione 1.0.3.1 e compatibile con joomla 2.5 ci consentirà in pochi e semplici passaggi di fare tutto ciò, vediamo come!
Installazione:
Andate a scaricare il pacchetto dalla Jed, sarà necessaria una registrazione per poter procedere al download. Una volta completato entrate nella gestione estensioni e installate il pacchetto selezionando il file con estensione .tar.gz. All'interno del pacchetto sono presenti il componente, alcuni plugins che andranno attivati (lo sono di default ma meglio controllare) da gestione plugins di Joomla e una serie di template di base. una volta effettuato l'operazione passiamo alla configurazione del componente.
Configurazione Mobile Joomla!
Iniziamo con la configurazione di base, quella che ci permetterà di visualizzare l'intero sito web con tutte le voci di menu in versione mobile: dal pannello Mobile Joomla su General possiamo decidere la qualità con cui viene fatto lo scaling delle immagini. Su Advanced Settings possiamo settare la compressione gzip e la cache (io la tengo disabilitata, fra l'altro mi ha dato un sacco di problemi!!). Nella parte destra del menu troviamo tutte le impostazioni relative al dominio e eventuali sottodomini (comodi se per ogni dispositivo volete creare un sottodominio come ad esempio iphone.nomesito.it).
Configurazione layout dispositivi
Entrando nelle varie schede dei dispositivi potete configurare approfonditamente le posizioni dei moduli da visualizzare nella versione mobile e personalizzarvi tutti i campi. Qualora decidiate di visualizzare di alcuni menu solamente nella versione mobile non dovrete fare altro che creare le voci di menu e selezionare come posizione il template mobile preinstallato (mobile_iphone nel caso della versione iphone).
Prova sul campo:
Una volta terminata la breve configurazione il nostro sito web è pronto per essere visualizzato sui dispositivi mobile; se state sviluppando in locale vi consiglio di scaricarvi un emulatore che vi permetta di verificare il vostro risultato, nel mio caso ho scelto Opera Mobile Emulator disponibile gratuitamente. Nella fase di test mi sono reso conto che per valutare il risultato la cache va svuotata continuamente, pena la mancata visualizzazione in real time dei nostri sforzi. Pulite sempre la cache del browser (sia desktop che mobile) e pure quella di joomla (anche se ce l'avete disattivata, alcuni provider la attivano comunque!!).
Ecco a voi il risultato finale del nostro lavoro, il nostro sito web in perfetta visualizzazione mobile, il tutto senza duplicare i menu! Un'ultima annotazione, ho notato che sulla jed un'utente segnalava l'aumento spropositato delle dimensioni del database dopo l'installazione di mobile Joomla, in tal senso confermo che il database aumenta di circa 40 Mb in seguito all'installazione del componente!
Ricordo che sul sito dello sviluppatore potete trovare (a pagamento) template aggiuntivi e plugins per migliorare la compatibilità di Mobile Joomla con altri componenti (kunena ad esempio).
un saluto a tutti e buon test!
Massimo Lazzeri
Commenta questo articolo sul forum
Oppure commenta e condividi questo articolo sulla nuova pagina ufficiale di Joomla.it su Google+