En los últimos tiempos con la puesta en moda del diseño responsive y adaptivo, y con el aumento de visitas a los sitios desde dispositivos móviles, se ha ido incrementando el número de “trucos” para hacer el sitio más ligero y rápido. Uno de ellos es, “ocultar módulos en dispositivos móviles”.

Una de las vías que se ha adoptado, para ocultar los módulos en nuestro sitio, es haciendo uso de la propiedad de CSS “display:none”. En el artículo “Cómo ocultar módulos de Joomla en dispositivos móviles” se explica el uso de esta técnica. Como verán al final del artículo hacen un pequeño señalamiento que es importante tener presente: 

“...Hemos de tener en cuenta que este método, carga igualmente el módulo en el dispositivo, por lo que no es ideal, ya que el tiempo de carga no disminuye... pero como mínimo mejoramos la visibilidad del sitio web.”

Como bien puedes deducir, estamos sacrificando “velocidad” por “usabilidad”. Esto, en un sitio pequeño puede que no haga muchos estragos, pero si pensamos en un sitio más extenso donde ocultemos los módulos en dependencia de la resolución de pantalla o dispositivo, usando esta técnica de CSS, puede hacer el sitio muy lento en dispositivos pequeños, a pesar que el usuario sólo ve un par de cosas.

Y es aquí donde Joomla dice “Presente”, nuevamente. En la J!Platform (Framework que usa Joomla), a nivel de programación PHP existe una clase que detecta varios parámetros de mucho interés para nosotros. Por ejemplo, detecta la plataforma en la que esta corriendo el cliente web, ya sea Windows, Linux, Android…. , detecta el navegador que está usando, así como su versión, entre otros. Pero entre todos ellos, hay uno que nos viene bien para el artículo en cuestión, detectar si el cliente web es un dispositivo móvil. Esta clase se llama JApplicationWebClient.

Ejemplo Práctico

Pongamos un ejemplo de su uso, porque a veces tanto bla bla bla, no dice mucho. Supongamos que estamos creando o modificando una plantilla. Nuestra plantilla tiene como estructura, dos laterales, uno a la izquierda del contenido principal y otro a la derecha del mismo. Supongamos que el lateral izquierdo no queremos que salga para dispositivos móviles, ya que son banners que no interesa mostrar en estos dispositivos. ¿Cómo hacer actuar esta clase aquí? Sencillo, colocamos al principio del archivo index.php de nuestra plantilla lo siguiente:

// Detectar si el dispositivo es móvil
$client = new JApplicationWebClient();

Por ejemplo podemos colocarlo después de la línea “defined('_JEXEC') or die;” quedandonos:

<?php
defined('_JEXEC') or die;
// Detectar si el dispositivo es móvil
$client = new JApplicationWebClient();
.
.
.

Con esto obtenemos en la variable $client una nueva instancia de “JApplicationWebClient”. Para usarla, haremos lo siguiente. Supongamos, que el lateral izquierdo tiene esta estructura:

<aside id="sidebarleft" class="col-md-3">
 <jdoc:include type="modules" name="panelinfo_aleft" style="panelinfo" />
</aside>

Si queremos que este lateral no salga en cualquier dispositivo móvil, haremos lo siguiente:

<?php if(!$client->mobile) : ?>
   <aside id="sidebarleft" class="col-md-3">
      <jdoc:include type="modules" name="panelinfo_aleft" style="panelinfo" />
   </aside>
<?php endif; ?>

Como puedes apreciar, en la variable “mobile” tenemos lo que buscamos. Esta variable es de tipo “booleano”, true si el cliente web es un dispositivo móvil, false en caso contrario. Por lo que, sí es un dispositivo móvil, no se mostrará ese lateral. Y ojo, NO CARGARÁ ese lateral totalmente, por lo que el sitio podrá ser visto en dispositivos móviles, sin preocupaciones de que se estén cargando cosas ocultamente.

Conclusiones

Hemos resuelto nuestro problema. Por supuesto, esta clase JApplicationWebClient tiene más cosas a las que podemos sacarle provecho, y si eres de los que te animas con el código, puedes ver las distintas funciones que tiene esta clase en /libraries/joomla/application/web/client.php. Pero bueno, lo necesario para esta cuestión de ocultar módulos en dispositivos móviles, ya lo hemos llevado a cabo satisfactoriamente con un grado de optimización al máximo. Espero, que a partir de que implementes esto, tus sitios naveguen más rápido en dispositivos móviles.