Programación Web Joomla! Cómo ocultar o mostrar un módulo correctamente en Joomla! en vista móvilCómo ocultar o mostrar un módulo correctamente en Joomla! en vista móvil
Diseño responsive y la diferencia con la vista en móvil
Uno de los problemas más comunes en Joomla!, en diseño responsive, es poder mostrar u ocultar un módulo según el dispositivo desde el que estemos viendo la página web. Si haces una búsqueda por Internet, te encontrarás varias formas -que he estado probando- y veremos los problemas de cada una de ellas y cuál podríamos utilizar. Hay una que en Joomla 3.x no me funciona, si sigues leyendo podrás evitar perder el valioso tiempo que yo perdí con este asunto.
Ocultar un elemento con CSS
La técnica más utilizada y posiblemente la más sencilla, no solo en Joomla!, para ocultar un elemento de una página web es esconder de la vista dicho elemento haciendo uso de hojas de estilo en cascada CSS. En un diseño responsive se puede realizar de forma efectiva haciendo uso de las "media queries". Por ejemplo, tengo un <div> que quiero ocultar:
<div class="oculta-en-movil">TEXTO A OCULTAR</div>
Voy a crear un esqueleto básico de una página web HTML5:
<!DOCTYPE HTML>
<html>
<head>
<title>Oculta div en responsive</title>
</head>
<body>
<div class="oculta_en_movil">TEXTO A OCULTAR</div>
</body>
</html>
Ahora voy a crear el estilo necesario para que cuando veamos el resultado en una pantalla de menos de 300 píxeles, el elemento <div> sea ocultado:
<!DOCTYPE HTML>
<html>
<head>
<title>Oculta div en responsive</title>
<style>
@media screen and (max-width: 300px){
.oculta_en_movil{display: none;}
}
</style>
</head>
<body>
<div class="oculta_en_movil">TEXTO A OCULTAR</div>
</body>
</html>
Este ejemplo lo puedes ver en acción aquí: (después de revisar el artículo decidí cambiar 300px por 700 píxeles para poder ver el efecto en un navegador de escritorio, 300 píxeles era muy poco)
Como puedes comprobar, solamente al redimensionar la ventana y bajar de 700 píxeles, el texto quedará oculto a la vista. En Joomla! este ejemplo es fácil de hacer en un módulo, porque puedes asignar la clase directamente desde las opciones del módulo (dentro de Joomla!): Extensiones > módulos > entras en el módulo > pestaña avanzado > clase CSS del módulo. En este caso pondríamos: oculta_en_movil.
Problemas de ocultar un elemento con CSS y media queries
El mayor problema conocido es que al ocultar el elemento <div> no lo liberas, no lo descargas de la memoria, sigue estando en el código fuente. Imagina una web responsive donde ya has cargado el <div>, seguidamente la redimensionas haciéndola más pequeña y observas que llega un momento en el que el <div> se oculta: no hay problema porque ya lo habías cargado antes, sin embargo, y es muy común, puede que visualices la web desde el navegador de un dispositivo pequeño como un smartphone donde, por defecto, el <div> no debería aparecer y es verdad que con el código anterior permanecerá oculto, pero el problema es que se cargará. Bueno, ¿y dónde está el problema al cargar un <div> de más? El problema es que dicho elemento puede contener información pesada que hará consumir ancho de banda innecesario y el usuario tardará más en cargar la página. Imagina que en tu web tienes varios módulos de redes sociales que a su vez cargan sus scripts que, por experiencia, sabemos que pueden llegar a ralentizan la carga. Aunque ocultes esos módulos en un dispositivo pequeño, la web no se cargará hasta finalizar la descarga total del contenido de dichos módulos, es decir, que obligas al usuario a esperar por algo que no va a ver.
¿Solución? En este momento me desvío hacia Joomla! para comentar las opciones que tiene. La idea es desde código <php> mostrar o no un elemento o módulo dependiendo del dispositivo usado por el usuario.
Dispositivo móvil desde Joomla!
¿Cómo saber si el usuario está usando un móvil para ver tu web? Desde Joomla! 1.x hasta Joomla! 3.x han habido varios cambios en este aspecto. Desde Joomla! 1.x hasta 2.x se hacía usando la clase JBrowser, pero a partir de ahí JBrowser quedó desaprobada y muchos pensábamos que desaparecería, sin embargo, en Joomla! 3 volvió a ser utilizada y se volvió a reaprobar, por eso verás por la red que este tema ha generado alguna que otra confusión. También en Joomla! 3 se puede hacer desde la clase JApplicationWebClient, que es la alternativa a la obsoleta JWebClient. Ya ves qué lío de clases. Vamos a ver las dos opciones más detenidamente para Joomla! 3.x. (no tiene sentido para versiones anteriores)
Detectar navegador con JBrowser
Este modo de detección es en Joomla! 3.x totalmente correcto por lo comentado en el párrafo anterior, sin embargo, yo no lo uso porque no me funciona. Verás que isMobile siempre me retorna false, así que puedes saltar este párrafo si no te interesa dicha info. Esto último lo he testeado en Joomla! 3.5, es posible que en posteriores versiones o cuando tú leas este artículo sí funcione, por este motivo he decidido no obviarlo.
El código, que puedes analizar, se encuentra en tu sitio > libraries > environment > browser.php. Ahí verás todas las opciones detalladas y en el enlace del título. Para utilizarlo, primero hay que llamarlo así:
jimport('joomla.environment.browser');
Y seguidamente crear una instancia del objeto, por ejemplo:
$navegador = &JBrowser::getInstance();
Y a partir de aquí puedes obtener mucha información, entre otras:
getBrowser > devuelve navegador actual (opera, chrome, palm, msie, amaya, fresco, avantgo, safari, konqueror, mozilla, lynx, links, hotjava, up, xiino, palmscape, nokia, ericsson, wap, imode, blackberry, motorola, mml)
getPlatform > devuelve la plataforma del usuario (win, mac, unix)
getVersion > devuelve la versión del navegador
getAgentString> devuelve la cadena completa de texto del agente de usuario (User Agent)
etc...
O preguntar si el navegador es versión móvil o no con el siguiente método:
isMobile > (true, false)
Un ejemplo ocultando el anterior <div> cuando sabemos que el navegador es versión móvil:
<?php
jimport('joomla.environment.browser');
$navegador = &JBrowser::getInstance();
if (!$navegador->isMobile())
{
?>
<div class="oculta_en_movil">TEXTO A OCULTAR</div>
<?php
}
?>
Acabo de probar el ejemplo anterior y compruebo incluso modificando mi User-Agent que isMobile() siempre me devuelve false. Sinceramente he depurado muy poco el código en Eclipse y no tengo tiempo para investigar más a fondo. Posiblemente podría ser un error de la expresión regular pero no lo sé. Yo uso la siguiente forma:
Detectar navegador con JApplicationWebClient
El código lo puedes analizar en: tu sitio > libraries > joomla > application > web > client.php.
Soporta estas propiedades:
- platform: Devuelve un valor entero que significa la plataforma detectada en la que se ejecuta el cliente Web. (WINDOWS = 1; WINDOWS_PHONE = 2; WINDOWS_CE = 3; IPHONE = 4; IPAD = 5; IPOD = 6; MAC = 7; BLACKBERRY = 8; ANDROID = 9; LINUX = 10; ANDROIDTABLET = 22)
- mobile: Devuelve True si el cliente web es un dispositivo móvil
- engine: Valor entero que indica el motor de renderizado detectado utilizado por el cliente web (TRIDENT = 11, WEBKIT = 12, GECKO = 13, PRESTO = 14, KHTML = 15, AMAYA = 16)
- browser: Volor entero que representa el navegador usando por el cliente web (IE = 17; FIREFOX = 18; CHROME = 19; SAFARI = 20; OPERA = 21)
- browserVersion: Cadena de texto con la versión del navegador detectada.
- encodings: Un array con el orden de prioridad detectado de las codificaciones aceptadas por el cliente.
- languages: Un array con el orden de prioridad detectado de los lenguajes aceptados por el cliente.
- userAgent: La cadena de texto con el agente de usuario (User Agent)
- acceptEncoding: Cadena de texto conteniendo las cadenas de texto codificadas aceptadas del cliente web.
- acceptLanguage: Cadena de texto conteniendo las cadenas de texto de los lenguajes aceptados del cliente web.
- robot: Devuelve True si el cliente web es un robot.
- detection: Un array de indicadores que determinan si una rutina de detección ha sido ejecutada o no.
Es muy sencilla de implantar, voy a ocultar el <div> en un navegador móvil:
<?php $client = new JApplicationWebClient();
if (!$client->mobile)
{
?>
<div class="oculta_en_movil">TEXTO A OCULTAR</div>
<?php
}
?>
Como puedes ver, he mantenido la clase "oculta_en_movil" en ambos ejemplos porque $client->mobile no reconoce un navegador de escritorio redimensionado a un tamaño pequeño y tal vez necesites ocultarlo desde las media queries, como vimos al inicio del tutorial.
Si ahora miras el ejemplo desde un móvil o modificas el User-Agent para hacer creer que lo estás haciendo desde un navegador móvil, verás que el elemento <div> no aparecerá.
Un código final para ocultar un módulo:
<?php $client = new JApplicationWebClient();
if (!$client->mobile)
{
?>
<?php if ($this->countModules('position-1')) : ?>
<jdoc:include type="modules" name="position-1" style="none" />
<?php endif; ?>
<?php
}
?>
A tener en cuenta
El uso de JBrowser o JApplicationWebClient no siempre dará un mismo resultado. Por ejemplo robot o mobile no son detectados de la misma forma, ya que la búsqueda de cadenas de texto dentro del agente de usuario es diferente en ambas.
Como sabes, la cadena agente de usuario (User Agent) puede ser modificada por el usuario y los datos que tú vas a obtener están bajo el control de él.
feryseg.com