Giovedì, 03 Maggio 2012 20:33

Il vostro sito joomla diventa responsive con Mobile Joomla!

Scritto da
Vota questo articolo
(3 Voti)

Alcuni giorni fa ho avuto la possibilità di scrivere un articolo per il sito joomla.it in cui descrivevo il funzionamento di un interessantissimo componente che permette in modo molto semplice di trasformare un sito web sviluppato con joomla in versione mobile in modo automatico utilizzando il cosiddetto sistema responsive basato sull'user-agent teraWURFL; si tratta di Mobile Joomla! Ho pensato fosse interessante per voi lettori riproporlo anche qui sul mio blog. Il metodo migliore per rendere il proprio sito web responsive se lo si deve strutturare da zero rimane quello di utilizzare un template responsive, ormai se ne trovano parecchi e sono davvero ben fatti (vedi guida scelta template di joomla). Se non si può fare questo tipo di scelta perchè il nostro sito è già online e non ci va di impazzire a cambiare il template, Mobile Joomla può essere una buona scelta.
Essere in grado di rendere un sito web accessibile e visibile da ogni tipo di dispositivo, soprattutto quelli mobile è di grande importanza vista la loro grande diffusione, ciò nonostante spesso i contenuti devono rispettare degli standard differenti poichè  spesso chi guarda un sito nella versione mobile ha necessità di reperire le informazioni che cerca in modo rapido ed efficace e non ha di certo la possibilità di interagire con un astruso sistema di menu come può fare solitamente dal pc di casa. Oggi vi spiegherò come rendere il vostro sito web responsive in pochi passaggi e poterlo quindi visualizzare anche in versione mobile utilizzando il componente Mobile Joomla giunto alla versione 1.0.3.1 e compatibile con joomla 2.5. La sua grande particolarità è quella di NON richiedere la duplicazione delle voci di menu e il suo funzionamento è davvero semplice, vediamo come funziona!



Installazione:

Scaricate il pacchetto completo dalla Jed, registratevi per poter procedere al download. Una volta terminato entrate nella gestione estensioni e installatlo selezionando il file con estensione .tar.gz. Al suo interno troverete 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 passate alla configurazione del componente.



Plugin Mobile Joomla!

 

 

Configurazione Mobile Joomla!

pannello JoomlaIniziamo con la base configuration, inizialmente ci concentreremo su un'impostazione di base ovvero quella che ci permetterà di visualizzare l'intero sito web con tutte le voci di menu in versione mobile senza escluderne alcune o aggiungerne altre: entrate nel pannello Mobile Joomla, andate su General, da lì potrete decidere la qualità con cui viene fatto lo scaling delle immagini. Su Advanced Settings possiamo settare la compressione gzip e la cache (la cache tenetela disabilitata, a me ha dato un sacco di problemi!!). Nella parte destra del menu trovate tutte le impostazioni relative al dominio e eventuali sottodomini (comodi se per ogni dispositivo volete creare un sottodominio come ad esempio iphone.nomesito.it).

 

 

Advanced Settings

   

Configurazione layout dispositivi

Assegnazione moduli mobileEntrate nelle varie schede dei dispositivi per poter 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:

Incredibilmente abbiamo già terminato il nostro lavoro, infatti 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 al volo, nel mio caso ho scelto Opera Mobile Emulator disponibile gratuitamente e che fra l'altro consente di variare tra molti dispositivi apprezzando le differenze fra le varie risoluzioni del display. 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!!).

 

Et voilà, 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! La cosa in questo momento costituisce un serio ostacolo per un suo eventuale test sul mio sito web, già il database si sta gonfiando fin troppo, non vorrei che aggiungergli 40 mega sul groppone diventi davvero troppo.

 

Visualizzazione su SmartphoneVisualizzazione desktop



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).
Ringrazio Joomla.it per aver dato spazio alla mia guida sul loro sito!
Buon test a tutti!

Letto 21969 volte Ultima modifica il Domenica, 06 Maggio 2012 12:28

Questo Sito web utilizza Cookies ai fini di Profilazione Dati