Se avete già un sito web Joomla! e volete portarlo sui dispositivi mobili, allora l’estensione Mobile Joomla! è un ottimo modo per farlo. In questo articolo su cocoate.com viene spiegato come utilizzare l’estensione per rendere i siti web Joomla! mobile-friendly.

mobile joomla

Innanzitutto questa estensione offre il vantaggio di avere correttamente ridimensionate le immagini per qualsiasi dispositivo e rimuove i tag HTML che possono dare problemi sui dispositivi mobili. Oltre a queste importanti caratteristiche, ci sono molte altre caratteristiche che permettono una configurazione semplice ed efficace del tuo sito web mobile:

  •     Rilevamento User-Agent (WURFL, database dei dispositivi TeraWURFL)
  •     Supporto Multi-Site (reindirizzamento sotto-domini)
  •     Adattamento immagini
  •     Template per categorie di dispositivi
  •     Esclusione menu per categorie di dispositivi
  •     Personalizzabile con diversi moduli e template
  •     Compatibilità con estensioni di terze parti, moduli e componenti

E’ sempre un problema per una società, offrire una buona qualità gratuitamente, per essere in grado di offrire Mobile Joomla! gratuitamente l’estensione visualizza annunci di supporto in fondo alle pagine mobili. Questi annunci aiutano la compagnia a fornire Mobile Joomla! gratuitamente e ci sarebbero molto grati se mantenessimo questi annunci per sostenere lo sviluppo di questa estensione, tuttavia, se per qualche motivo si desidera rimuovere gli annunci, questa estensione fa’ al caso vostro. A voi la scelta!

 

Requisiti

I seguenti componenti di sistema sono necessari per l’esecuzione di tutte le caratteristiche di Mobile Joomla!
Per sapere se siete in possesso dei seguenti requisiti basta entrare nel pannello di amministrazione di Joomla! quindi Sito -> Informazioni di sistema -> Informazioni PHP

  • Almeno 32 MB di memoria per eseguire script PHP (PHP memory limit)
  • PHP GD2 extension (libreria di immagini per il ridimensionamento delle immagini)
  • PHP estensione bz2 (per importare i local dump del database dei dispositivi TeraWURFL)
  • PHP MySQLi extension (prerequisito per il database dei dispositivi TeraWURFL)
  • Possibilità di caricare i dati su protocollo HTTP (allow_url_fopen abilitato, ecc…) E ‘necessario per gli aggiornamenti di Mobile Joomla! e per il download del database TeraWURFL nel caso di disabilitazione dell’estensione bz2

Per i prossimi tre requisiti è necessario esaminare le condizioni nell’interfaccia di amministrazione del proprio fornitore di spazio web o chiedete al vostro provider direttamente. Nella maggior parte dei casi, i moderni hosting provider dovrebbero soddisfare queste richieste:

  • La creazione di diritti di file su PHP
  • Procedure creation right in MySQL database (prerequisito per il database dei dispositivi TeraWURFL)
  • Almeno 30 MB di spazio sul database

 

Installazione di Mobile Joomla!

E’ necessaria la registrazione al sito Mobile Joomla! per scaricare il componente. Installiamolo da Estensioni-> Gestione estensioni -> Installa

Il pacchetto consiste in un componente, vari plugin e un modulo.

Dopo l’installazione è possibile scegliere se si desidera accedere alla documentazione o andare direttamente alla interfaccia di configurazione del componente. Il mio consiglio è solo quello di dare un’occhiata al vostro nuovo sito web con un dispositivo mobile (è stato creato direttamente dopo l’installazione)!

Si può notare che il menu principale del sito originale è stato convertito in un formato diverso.

Aprite il collegamento alla documentazione in una finestra separata e seguite il link Mobile Joomla! Settings per dare un’occhiata alle impostazioni di configurazione!

 

Features

Rilevamento User-Agent (WURFL, database dispositivi TeraWURFL)

Mobile Joomla! è dotato di due plug-in che sono responsabili di rilevare il dispositivo corretto, ovvero il semplice plugin per rilevare i browser comuni e il plugin TeraWURFL. Wireless Universal Resource FiLe (WURFL) è uno sforzo della comunità, incentrato al rilevamento dei dispositivi mobili. Tera-WURFL è una popolare, libera e open source PHP WURFL API, gestita dalla società ScientiaMobile!

Durante il processo di installazione, sono state create diverse tabelle nel database, che contengono i dati di quasi tutti i dispositivi mobili del mondo. Gli aggiornamenti per queste tabelle arrivano regolarmente con l’aggiornamento del componente Mobile Joomla!

Il rilevamento del dispositivo funziona in modo semplice e non è necessario configurare nulla, infatti entrambi i plugin vengono attivati automaticamente dopo l’installazione.

 

Supporto Multi-Site

A seconda delle esigenze a volte è necessario non solo avere un template diverso ma avere un sito web completamente diverso per ogni categoria di dispositivi mobili.

Esempio: Prendiamo ad esempio il sito web con URL http://joomla.italianwebdesign.it ammettiamo di voler creare un sito speciale per vecchi dispositivi WAP (o iPhone, o tutti gli smartphone).
Basta aggiungere l’URL (ad esempio wap.italianwebdesign.it) nelle Impostazioni avanzate e tutti i dispositivi WAP verranno reindirizzati a questo URL!

Attenzione: il componente Mobile Joomla! reindirizza il dispositivo ma non crea un sito separato (che è compito del webmaster) bisogna fare in modo di inserire un’URL valido, ad un sito già esistente!

 

Adattamento immagini

Mobile Joomla! supporta diverse modalità di adattamento delle immagini del sito:

  • Don’t rescale: Lascia tutte le immagini “così come sono”
  • Remove all: Rimuove tutte le immagini
  • Rescale if bigger: Ridimensiona le immagini di grandi dimensioni per adattarsi allo schermo del dispositivo (meno il valore del parametro “Decrease Image Width”)
  • Fixed rescale ratio: Ridimensiona ogni immagine in base al rapporto tra la larghezza e la larghezza predefinita dell’immagine dal parametro “PC template width”

La qualità delle immagini ridimensionate dipende dal parametro Rescaled image quality (0-100) nelle impostazioni di Mobile Joomla! Ogni immagine ridimensionata si trova in una sottodirectory (Resized) della directory con l’immagine originale (es. /images)

N.B. solo le immagini nei tag <img> vengono trattate, quindi di conseguenza, tutte le immagini di background nei CSS rimarranno invariate!

Mobile Joomla! toglie gli attributi di stile alle immagini per fissare quelle che hanno padding ampio visualizzato bene sul desktop, ma brutto sui cellulari. Le immagini esterne non vengono ridimensionate.

Esempio: Aggiungiamo una foto ad un articolo. La larghezza è di 500px e la dimensione di 104kb sul sito normale. Mobile Joomla! ridimensiona l’immagine a 280px di larghezza e 13kb di dimensione

 

Categorie di dispositivi

Mobile Joomla! differenzia i dispositivi in quattro categorie e ogni dispositivo ha il proprio template. Le categorie più importanti sono smartphone e iPhone.

Smartphone
Uno smartphone è un qualsiasi dispositivo mobile ad esclusione dei dispositivi basati su iOS.
Template: mobile_pda

iPhone
La categoria comprende i dispositivi iOS (iPhone, iPod, iPad). Si basa su jQTouch, un plugin open source jQuery che funziona anche per i telefoni basati su Android.
Template: mobile_iphone

WAP
Questa categoria di dispositivi offre il supporto per i vecchi apparecchi con Wireless Markup Language (WML). A partire dal 2012, l’uso del WAP è in gran parte scomparso.
Template: mobile_wap

iMode
iMode è lo standard mobile NTT DoCoMo ancora utilizzato da 51,6 milioni di clienti in Giappone e oltre 5 milioni nel resto del mondo
Template: mobile_imode

 

Impostazioni di layout

E’ possibile configurare il layout per i dispositivi mobili in modo globale o a seconda della categoria del dispositivo.
Diamo un’occhiata alla scheda Smartphone che è divisa in 6 box:

Settings

Nella finestra impostazioni è possibile scegliere il template. Mobile Joomla offre template supplementari da acquistare.

Homepage

E’ possibile scegliere un link da un menu per l’homepage mobile. È possibile inoltre disattivare l’output HTML di un componente, il ché può risultare molto utile.

Image

I parametri globali di immagini possono essere modificati, inoltre c’è anche la possibilità di aggiungere un margine (in pixel) all’immagine ridimensionata e di aggiungere automaticamente gli attributi di stile height e width al tag < img >  (width:…px !important; height:…px !important;)

Advanced

Nella casella avanzata c’è la possibilità di:

  • impostare la compressione Gzip per ridurre le dimensioni della pagina
  • rimuovere i tag non supportati, come iframe, object, embed e applet
  • rimuovere tutto il codice JavaScript
  • convertire le entità HTML in simboli, in modo che i simboli UTF-8 vengano utilizzati al posto di &euro ecc ecc…
  • impostare l’intestazione del tipo di contenuto

Template Modules
Tutti i template mobile hanno la stessa struttura:

Header Modules Area
Breadcrumbs
Middle Modules Area
Component area
Footer Modules Area
Joomla! Footer
Support ads

A seconda del template, si hanno diverse posizioni. È possibile selezionare le posizioni dei moduli desiderati.

Template Options

Questa casella è disponibile solo nella scheda “general smartphone” e offre la possibilità di:

  • scegliere tra un blocco <header> standard o semplificato. Il blocco semplificato contiene solo il titolo della pagina e solo CSS e JS caricati dal template
  • caricare l’editor TinyMCE o altri (extended editor)
  • incorporare un css/custom.css nella pagina, perché di solito è abbastanza piccolo quindi più veloce da caricare con la pagina, piuttosto che aspettare una richiesta separata
  • iniziare con un’intestazione <?xml version=”1.0″ encoding=”utf-8″ ?>
  • specificare quali DOCTYPE utilizzare per le vostre pagine
  • specificare se l’attributo xmlns deve essere incluso nell’elemento HTML, in modo da avere: (es.) <html xmlns=”http://www.w3.org/1999/xhtml”> invece di <html>

La compatibilità con estensioni di terze parti, moduli e componenti

Mobile Joomla! offre diverse estensioni per le “3rd party extensions”. Alcune liberamente disponibili!