Doymer Consultores

  • Increase font size
  • Default font size
  • Decrease font size
Inicio Blog Joomla! Usando una Máscara de Sombra
07
Febr
2010

Usando una Máscara de Sombra

Imprimir PDF

Aquel que haya visitado este sitio en el pasado habrá podido observar que se ha producido un cambio significativo en su estructura. Este cambio era necesario y ha llevado bastante tiempo y, aunque no completamente realizado, al menos la estructura del sitio si que se mantendrá en el futuro.

Digo esto en el improbable caso de que a alguien le haya parecido lo suficientemente interesante alguno de los artículos escritos hasta el momento y haya guardado un marcador; la nueva estructura lo romperá. Si este es el caso les pido excusas y les ruego que lo actualicen en la confianza de que ya no cambiará más.

Dicho esto retomaremos hoy el pulso a la página completando el artículo anterior referente a la monitorización. Además lo que vamos a contar hoy aquí se puede aplicar a otros aspectos de nuestras páginas ya que se trata de integrar en las mismas una estructura de tipo 'lightbox', 'shadowbox' o de 'máscara de sombra'.

Probablemente lo hayais visto en multitud de sitios: pulsas un enlace y la pantalla se oscurece salvo una zona donde se presentan nuestros datos. Éstos pueden ser fotos, vídeos, textos, otras páginas o lo que se nos ocurra.

Pues bien, vamos a modificar la solución que ofrecimos en el artículo anterior. En este artículo terminabamos indicando que el añadir código de seguimiento de Google Analytics requería de la inclusión en nuestro sitio de un texto fijo  necesario para cumplir la legalidad vigente acerca del uso de determinados elementos que pueden considerarse ataques a la intimidad como son las 'cookies'. Proponíamos que tal información se mostrase en una ventana emergente (popup) al pulsar el enlace de Analytics.

Este mecanismo, aunque sencillo, tiene sus desventajas. Algunos navegadores no admiten ventanas emergentes como medida para atajar el abuso que suele hacerse de ellas en algunos sitios. Además, la ventana emergente puede quedarse abierta como ventana adicional de navegador si cambiamos de pantalla ya que no está ligada a nuestra página y se abre como ventana independiente.

Sería mucho mejor que nuestro mensaje informativo apareciese en una máscara de sombra de tal forma que formase parte de la misma página donde lo hemos activado. Sin embargo para esto tenemos que hacer dos cosas que no son directamente realizables desde un artículo:

  1. Incluir modal.js en nuestra página
  2. Incluir modal.css en nuestra página

En realidad sí que podemos incluir el script dentro del contenido del artículo puesto que el procotolo lo permite pero NO podemos hacer lo mismo con el fichero de estilo. Según la reglas del protocolo la inclusión de ficheros de estilo sólo puede hacerse en el área de cabecera. Si quieres probar incluye las siguientes líneas en una página cualquiera en modo 'nativo' (en Jooomla 1.5.x pulsa el botón 'Desactivar Editor' —Toogle Editor— que tienes al pié del editor de contenidos)

<script src="/media/system/js/modal.js" type="text/javascript" languaje="javascript">
<link rel="stylesheet" href="/media/system/css/modal.css" type="text/css" />

Carga esa página y verás que en la cabecera no aparece ninguna de las líneas que has puesto (lógico puesto que el sistema no las va a mover a ningún sitio por si solo) y que en el cuerpo sólo aparece la línea correspondiente al script; la línea de estilo sencillamente ha desaparecido.

Es decir que hemos de localizar un mecanismo para mover el css a la cabecera y sólo existen dos:

  • Modificar la plantilla
  • Integrar en la página, de alguna manera, código que sea interpretado por Joomla

Ya en el artículo anterior dejámos bien claro que modificar la plantilla no era una buena idea así que no vamos a seguir ese camino. Necesitamos, por tanto, un mecanismo que permita inyectar código desde nuestras páginas de tal forma que podamos insertar nuestros ficheros en la cabecera de la página de forma segura de tal manera que no tengamos que modificar el código base de Joomla (que es lo mismo de antes pero peor).

Y este mecanismo lo vamos a obtener mediante la instalación una extensión, un plugin en nuestro caso, que nos va a permitir que el código PHP que escribamos en nuestros artículos sea procesado por el motor de Joolma!.

De las alternativas existentes hemos seleccionado Sourcerer pero cada uno puede elegir la que más le guste si esta no le satisface por alguna razón. No nos vamos a alargar aquí explicando cómo instalar y configurar la extensión. Si lo encontrais difícil escribiremos en otro artículo cómo se hace pero ya os adelanto que es muy sencillo y directo y que la configuración por defecto que resulta del proceso de instalación es suficiente para empezar a funcionar.

Bien, ahora que tenemos la extensión instalada tenemos que activarla. Para eso vamos a la configuración de plugins (Extensiones->Administrador de plugins o Extensions->Plugin manager si lo tienes en inglés) y la buscamos. Es un plugin de sistema así que si tienes muchos plugins puedes filtrar por este tipo de plugins para reducir la lista que se presenta.

habilitar sourcererSelecciona el plugin y llegarás a su pantalla de configuración y aquí sólo tenemos que activarlo seleccionando 'Si' para el campo 'Activo'. La imagen de la izquierda te muestra esta pantalla aqunque en este caso está en inglés y el campo aquí se llama 'Enabled' pero la acción es la misma: seleccionar el botón de radio de la derecha para activarlo.

Salva los cambios y ya estás listo para insertar código directamente en tus artículos.

Tienes que tener cuidado al seleccionar estos plugins ya que al permitir la ejecución de código desde el propio artículo estás ofreciendo a tus usuarios (a aquellos que sean editores de artículos) la posibilidad de hurgar en las entrañas de tu sistema (no sólo de tu página sino de todo el equipo). Por ello busca extensiones que sean seguras e instálalas sólo si es absolutamente necesario el hacerlo. Y mantén un ojo en el sistema, actualizando este tipo de componentes con las últimas versiones cuando aparezcan, sobre todo si resuelven problemas de seguridad.

No utilices una extensión que lleve más de un año sin ser actualizada a menos que sea muy popular y que haya mucha gente usándola. Con mucha gente usándola al menos tienes la garantía que hay muchos ojos mirando los posibles agujeros de seguridad. Y revisa su código si sabes PHP o, al menos, busca en internet los posibles problemas de seguridad que pueda acarrear su uso buscando frases como 'security alert' asociadas al nombre del producto.

Bueno, después de este repaso, vamos a lo nuestro. Con nuestra extensión instalada todo lo que pongamos entre las etiquetas { source } { /source } va a ser interpretado por el sistema. Estas etiquetas son las configuradas por defecto en la extensión pero puedes cambiarlas por el texto que desees (¡OJO! Las etiquetas no llevan espacios en blanco entre en contenido y los paréntesis tal y como figura en este párrafo. Aquí añadimos los espacios precisamente para que no sean interpretadas por el plugin y las puedas ver).


La creación de una máscara de sombra está incluida de forma nativa en Joomla. No necesitas ninguna extensión adicional para activarla. Forma parte del comportamiento llamado 'modal' que se activa cargando en la cabecera de nuestra página modal.js y su fichero de estilo. Para cargar estos ficheros necesitamos modificar el documento que Joomla está generando y esto lo haremos de tral forma que:

  • No rompamos el sistema
  • No tengamos que estar controlando posibles duplicidades

Para alcanzar todos estos objetivos incluye el siguiente código al principio de tu artículo:

{*source}<?php
$doc =& JFactory::getDocument();
$doc->addStyleSheet('/media/system/css/modal.css');
$doc->addScript('/media/system/js/modal.js');

$js  = "window.addEvent('domready', function() {\n";
$js .= "  SqueezeBox.initialize({});\n";
$js .= "  $$('a.sqBox').each(function(el) {\n";
$js .= "    el.addEvent('click', function(e) {new Event(e).stop(); SqueezeBox.fromElement(el);});\n";
$js .= "  });\n";
$js .= "});\n";
$doc->addScriptDeclaration($js);
?>{*/source}

Con este código consigues:

  1. Activar el modo intérprete de php (el <?php de la primera línea)
  2. Obtener la dirección del objeto que controla el documento que estamos generando ( JFactory::getDocument() )
  3. Añadir en la sección correspondiente a hojas de estilo el estilo 'modal' que estamos necesitando ( addStyleShheet() )
  4. Añadir en la sección correspondiente a scripts de javascript el enlace al fichero necesario ( addScript() )
  5. Añadir una declaración que inicialize la máscara de sombra cuando la página se termine de cargar en el equipo del usuario ( addScriptDeclaration($js) )
  6. Salir del modo intérprete (el ?> de la última línea)

Y recuerda, las etiquetas '{*source}' van sin el asterisco.


Pero, ¿Qué pasa si en mi página quiero también incluir un módulo cuyo contenido abra otra máscara de sombra?. Voy a tener dos sitios donde este código está activo. ¿Voy a tener todo duplicado?. ¿Voy a generar una colisión y, por tanto, un problema?. Y la respuesta es NO. Y es no porque haciéndolo como hemos indicado la forma de funcionar de Joomla evita la doble entrada. Si el código que pones en tus dos, tres o cien artículos es EXACTAMENTE EL MISMO, Joomla es lo suficientemente inteligente como para no duplicarlo al hacer referencia todos ellos a una misma entrada en la lista de la sección correspondiente.

Ahora bien, si pones textos diferentes, es decir, si en una página pones addStyleSheet('/media/...') y en otra pones addStyleSheet('media/...') y en otra pones addStyleSheet('http://mi sitio/media/...') entonces trendrás TRES entradas diferentes ya que el contenido entre las comillas es lo que Joomla usa para distinguir entre entradas diferentes. Así que elige una opción y ten cuidado de que todas las páginas usen la misma y no tendrás problemas.

Bueno, ahora sólo necesitamos activar nuestra máscara de sombra. Para ello basta garantizar que nuestro enlace contiene los siguientes elementos:

  • Un tipo mediante la declaración rel="{handler:'iframe', size:{x:550,y:600}}"
  • La clase en la que va a ocurrir la presentación class="sqBox"

clase del enlaceEl manejador 'rel' puede ser de diferentes tipos según lo que vayamos a presentar. Así, puede ser de tipo 'img' si vamos a presentar una imagen o del tipo 'iframe', como el nuestro, si vamos a presentar el contenido de una página web. El resto de parámetros expresan el tamaño de la ventana que deseamos abrir para mostrar nuestra página. Si no pones manejador el sistema intentará interpretar el contenido y seleccionará uno de los disponibles así que puedes probar y ver qué efecto obtienes. Si no vas a poner manejador entonces la edición del enlace se vuelve muy sencilla: basta con que definas el enlace y la clase en los campos correspondientes de la ventana de edición de enlaces que incluye el propio editor de artículos como te mostramos en la imágen de la derecha y ya está.

En cuanto a la clase, hemos de tener cuidado de que sea la misma que hemos definido en el script. Si nos fijamos, nuestro script se va a disparar sobre los objetos de clase 'sqBox' ya que así lo hemos establecido mediante el código $$('a.sqBox').each() que hemos puesto dentro de las etiquetas { source }. Este código busca por toda la página elementos de tipo 'a' (es decir enlaces) cuya clase sea 'sqBox' y a todas las entradas localizadas las mete en una estructura de control.

Y esto es todo. Ahora cada enlace que tenga este formato

<a rel="{handler:'iframe', size:{x:550,y:600}}" href="http://...." class="sqBox">Mi URL en una máscara de sombre</a>

hará que el contenido de la página aparezca dentro de una máscara de sombra del tamaño indicado cuando alguien pulse sobre el enlace. Y si quieres verificarlo ve al pié de esta página y pulsa sobre el enlace de Google Analytics.

Share
Última actualización el Martes 10 de Agosto de 2010 23:57  

Comentarios  

 
0 # manicure 02-04-2017 10:18
After looking over a handful of the articles on your web page, I seriously
appreciate your way of blogging. I bookmarked it to my bookmark webpage list
and will be checking back in the near future. Please visit
my web site too and tell me what you think.
Responder | Responder con una citación | Citar
 

Escribir un comentario

El propietario de esta página no se hace responsable de las opiniones de sus lectores en los comentarios, así como puede o no estar de acuerdo con lo que en ellos se diga.

Usa el juego limpio en tus comentarios

Por favor, no realices comentarios ofensivos o insultantes. Tampoco generes comentarios con publicidad o Spam. No utilices los comentarios para 'enchufar' tu sitio. Los enlaces que pongas podrán ser eliminados. Pretendemos crear un espacio de comunicación entre el autor y los lectores.

Todos agradeceremos el correcto uso de la ortografía, pues no todos somos capaces de entender mensajes 'codificados' tipo SMS. Además te rogamos uses signos de puntuación, si puede ser, para mejorar la comprensión de tu mensaje.
No escribas sólo en mayúsculas ya que en Internet escribir con mayúsculas equivale a GRITAR y no por gritar se te va a hacer más caso sino, probablemente, al contrario.

Reserva de Edición

Nos reservamos el derecho de no incluir comentarios que sean ofensivos, desagradables, que ataquen a terceros (racistas, homófobos, etc) o que no tengan que ver con el sitio o con el tema de que se trata.
Los datos suministrados al emitir tu comentario son privados y de tu propiedad y no serán usados para ningúna acción comercial ni de otro tipo.


Código de seguridad
Refescar


Archivo

Powered by ArtTree