Tra i tanti vantaggi della versione 2.5 di Joomla c'è una maggiore disponibilità di mezzi per rendere disponibili i contenuti per dispositivi mobili. Ma se non volete o non potete effettuare la migrazione (io ad esempio non posso farlo in uno dei miei siti), avete comunque alcune possibilità.
Prima di analizzare le possibilità offerte ai vecchi siti fatti nella versione 1.5, vediamo una breve panoramica su come i nostri contenuti potrebbero essere resi disponibili sul mobile:
- Applicazioni native Android, iOS, Windows Phone: sviluppare un'applicazione del genere ha poco a che vedere con Joomla. Dovreste sviluppare delle vere e proprie applicazioni e andare a prendere i dati dal vostro DB Joomla tramite dei servizi JSON o SOA -> credo esuli dai compiti dell'utilizzatore medio di Joomla
- Applicazioni ibride HTML5: si tratta di una versione web del vostro sito, che però utilizza al massimo le caratteristiche dell'HTML5 per rendere la user experience del vostro sito mobile un pò più simile a quello delle APP native. Spesso queste applicazioni si appoggiano a delle librerie javascript fornite da una sorta di Container, che permettono di usare alcune caratteristiche degli SmartPhones. Tra le piattaforme gratuite emergenti in questo settore, non collegate a Joomla, segnalo Icemobile
- Creazione di una versione web-mobile del sito con un sottodominio (es mobile.corriere.it)
- Adozione di un template responsivo, con il layout che si adatta in base alla risoluzione.
- Utilizzo di due template: uno per la parte desktop e uno ottimizzato per i dispositivi mobile. In questo caso occorre usare uno dei molti plugin che si occupano di mostrare un template diverso in base allo user agent del dispositivo e quindi mostrare il template che maggiormente vi aggrada.
Vediamo adesso cosa è possibile sviluppare gratuitamente con Joomla 1.5 per ciascuna di queste modalità
- App native: se optate per questa strada, Joomla non può supportarvi (nemmeno nelle nuove versioni): dovrete per forza sviluppare negli ambienti nativi
- Applicazioni ibride: esiste Weeverapp, che consente di creare applicazioni ibride. Purtroppo, di gratuito offre solo 15 giorni di prova, dopo di che occorre sborsare almeno 10 dollari al mese o 99 l'anno per ogni applicazione
- Versione web mobile con sottodominio: in questo caso il master sul mercato è Mobile Joomla, già descritto in un precedente articolo. Fornisce una versione gratuita e una a pagamento. La versione gratuita vi incrementerà le dimensioni del database di circa 30/40 Mb, cosa che ritengo un pò rischiosa. Uno dei miei hosting ad esempio mi limita a 50 Mb sul db, ma anche se non ci fossero limiti del genere, ritengo inopportuno gestire database così grandi solo per capire se il mio utente sta accedendo con un telefono o con un tablet. Personalmente, preferisco sempre sviluppare in locale e poi migrare le modifiche fatte in remoto tramite la copia del DB. Se questo raggiunge dimensioni importanti, l'aggiornamento può diventare un problema. Mi ritrovo dunque a dover scartare anche questa opzione, a meno di non voler prendere la versione a pagamento.
- Template responsivo: purtroppo per joomla 1.5 non c'è nulla di gratuito in giro. JSN Epic sembra gratuito, ma in realtà la funzionalità responsive è a pagamento
- Utilizzo di due template, di cui uno ottimizzato per gli smartphone. In questo caso c'è una soluzione gratuita e quasi "chiavi in mano": JtouchMobile. Vediamo dunque come utilizzarla, seppur con le opportune cautele.
JtouchMobile per Joomla 1.5
Scarichiamo e installiamo l'estensione, occorre registrarsi al sito dell'autore. Si tratta di due componenti separati
1)Template mobile: si tratta di un template basato su jQueryMobile, con alcune opzioni selezionabili, di cui vi mostro il pannello di controllo con alcune opzioni:
- Menù principale: consente di indicare il menù da mostrare all'avvio, in home page
- Load jdoc head tag: impedisce il caricamento di tutti i javascript, compreso mootools, che potrebbero andare in conflitto con jQueryMobile
- Turn Off Pages: in teoria consente di escludere il caricamento di alcuni componenti in base al loro codice di menù, ma francamente non ho ben capito come usarlo
- Debug: Lasciatelo su off
- iOS - Show Add App: mostra su iPhone l'icona per il lancio veloce
- iOS - Icon: Indica l'icona da mostrare per il punto precedente
- Main Banner: il logo da mostrare in alto
- Desktop Template Name: il template per la versione desktop, usato per il pulsante "Switch to desktop version" che viene inserito automaticamente
- Theme, Header Theme, Fixed Footer/Header, Page Transition: parametri per customizzare un minimo il layout e il comportamento del sito
- Show Powered By: direi di lasciarlo su Off, dato il poco spazio sui dispositibi mobili
- Google Analytics: Valutate voi se e come abilitarlo. Personalmente, l'ho disabilitato e ho inserito il mio codice Analytics direttamente nel template, nella posizione suggerita da Google
- Use Kunena: nel caso in cui abbiate questo forum nel vostro sito, Jtouch lo trasforma con un layout mobile friendly
2) Jtouch Mobile Template Switcher
Installate questo plugin, che si trova nel pacchetto assieme al template, in modo da dirottare i vostri visitatori "Mobile" sul template Jtouch. Sottolineo "Jtouch", perchè purtroppo questo plugin non ha una funzionalità generica di switch template, ma consente unicamente lo switch verso il template Jtouch. Non è dunque utilizzabile per un template generico (nel caso ve lo facciate per i fatti vostri). C'è un altro plugin simile (extensions.joomla.org/extensions/mobile/mobile-display/9804), che però non ha l'utilissima funzione per fare in modo che i tablet possano usare il layout classico.
Tutto a posto? Dipende...
Vediamo un esempio sul sito www.invitoateatro.info: Questa è le versione desktop
Questa è la versione mobile, ottenuta in meno di un'ora di lavoro:
Sembra tutto a posto: occorre ancora cambiare loghi, favicon, fare qualche aggiustamento ai css, ma tutto sommato avete un bel sito mobile con poco sforzo e a giudicare dalle review degli utenti sembrano tutti felici, ma... non è così
Il buon funzionamento di JtouchMobile dipende dalla complessità del vostro sito. Se il vostro sito ha una struttura complessa, con molti componenti, plugin, moduli, menù, ecc, andrete incontro a molti problemi. Di seguito elenco quelli che ho incontrato io, ma potrebbero essercene altri
- Url non parlanti: la conversione dei menù fatta da jTouchMobile richiede per forza l'installazione di sh404SEF, che mi risulta essere a pagamento.
- Difficoltà nella gestione di menù multipli: se, come me, cliccando su una voce di menù atterrate su una pagina dove ne sono presenti altri, il meccanismo di navigazione salta del tutto. Può darsi che il problema sia dovuto all'assenza di sh404SEF, fatto sta che ho provato in due siti diversi e il risultato è lo stesso: un disastro... e non ho nessuna voglia di spendere 39 dollari per comprare sh404SEF e scoprire se con questo componente la navigazione funziona correttamente.
- Componenti non funzionanti: Per evitare conflitti e massimizzare la velocità di caricamento, Jtouch elimina praticamente tutti i js, mootools compreso. Praticamente, non funziona più nulla, si vedono solamente gli articoli di testo: niente jComments, niente JvoteSystem, niente Ninjaboard, niente di niente
Tuttavia, se avete il classico sito informativo monomenù e/o avete già installato sh404SEF, questa qui è probabilmente la soluzione migliore, oltre ad essere l'unica GRATUITA.
E se avete un sito parecchio complesso?
In questo caso non vi resta che ingegnarvi, come ho fatto io per www.etnatracking.com, inserendo un pò di customizzazioni qua e là, di cui fornisco qualche accenno:
- Create un template vuoto. Una buona base di partenza è il mobile template S-GO, recuperabile a partire da questo indirizzo, ma credo che in giro ce ne siano altri
- Inserite i moduli dove ritenete più opportuno (cioè: modificate a mano la struttura del template)
- Sovrascrivete html e css di jtouch template (per poter usare il template switcher)
- Create un bel header statico che vi faccia da menù fisso presente in tutte le pagine
- Adeguate i vostri menù alle esigenze della navigazione mobile; se necessario, effettuate delle copie ed escludete delle voci (es. pagine con molte foto)
- Giocate un pò con Mootools, css, js, html, ecc per ottenere dei simpatici effetti di comparsa per il menù (nel mio caso, ingresso con sliding laterale)
Et voilà! Anche il sito più complesso può mostrare con orgoglio una bella vetrina mobile, anche se in questo caso ci sono voluti 3 giorni di lavoro:
Versione desktop:
Versione Mobile:
