Otras utilidades

Capítulo 8. Otras utilidades

Además de los formularios y de todas las funciones y utilidades de JavaScript que se han visto, existen muchas otras utilidades que es necesario conocer para desarrollar aplicaciones completas. Como no es posible estudiar todas las herramientas que se pueden crear con JavaScript, a continuación se muestran algunas de las utilidades básicas más comunes.

8.1. Relojes, contadores e intervalos de tiempo

En ocasiones, algunas páginas web muestran un reloj con la hora actual. Si el reloj debe actualizarse cada segundo, no se puede mostrar la hora directamente en la página HTML generada por el servidor. En este caso, aunque existen alternativas realizadas con Java y con Flash, la forma más sencilla de hacerlo es mostrar la hora del ordenador del usuario mediante JavaScript.

Para crear y mostrar un reloj con JavaScript, se debe utilizar el objeto interno Date()para crear fechas/horas y las utilidades que permiten definir contadores, para actualizar el reloj cada segundo.

El objeto Date() es una utilidad que proporciona JavaScript para crear fechas y horas. Una vez creado un objeto de tipo fecha, es posible manipularlo para obtener información o realizar cálculos con las fechas. Para obtener la fecha y hora actuales, solamente es necesario crear un objeto Date() sin pasar ningún parámetro:

var fechaHora = new Date();

Utilizando el código anterior, se puede construir un reloj muy básico que no actualiza su contenido:

var fechaHora = new Date();
document.getElementById("reloj").innerHTML = fechaHora;
 
<div id="reloj" />

Cuando se carga la página, el ejemplo anterior mostraría un texto parecido al siguiente en el <div> reservado para el reloj:

Mon May 04 2009 13:36:10 GMT+0200 (Hora de verano romance)

Este primer reloj construido presenta muchas diferencias respecto al reloj que se quiere construir. En primer lugar, muestra más información de la necesaria. Además, su valor no se actualiza cada segundo, por lo que no es un reloj muy práctico.

El objeto Date() proporciona unas funciones muy útiles para obtener información sobre la fecha y la hora. Concretamente, existen funciones que devuelven la hora, los minutos y los segundos:

var fechaHora = new Date();
var horas = fechaHora.getHours();
var minutos = fechaHora.getMinutes();
var segundos = fechaHora.getSeconds();
 
document.getElementById("reloj").innerHTML = horas+':'+minutos+':'+segundos;
 
<div id="reloj" />

Utilizando las funciones getHours(), getMinutes() y getSeconds() del objeto Date, el reloj solamente muestra la información de la hora. El resultado del ejemplo anterior sería un reloj como el siguiente:

20:9:21

Si la hora, minuto o segundo son menores que 10, JavaScript no añade el 0 por delante, por lo que el resultado no es del todo satisfactorio. El siguiente código soluciona este problema añadiendo un 0 cuando sea necesario:

var fechaHora = new Date();
var horas = fechaHora.getHours();
var minutos = fechaHora.getMinutes();
var segundos = fechaHora.getSeconds();
 
if(horas < 10) { horas = '0' + horas; }
if(minutos < 10) { minutos = '0' + minutos; }
if(segundos < 10) { segundos = '0' + segundos; }
 
document.getElementById("reloj").innerHTML = horas+':'+minutos+':'+segundos;
 
<div id="reloj" />

Ahora el reloj muestra correctamente la hora:

20:14:03

Si se quiere mostrar el reloj con un formato de 12 horas en vez de 24, se puede utilizar el siguiente código:

var fechaHora = new Date();
var horas = fechaHora.getHours();
var minutos = fechaHora.getMinutes();
var segundos = fechaHora.getSeconds();
 
var sufijo = ' am';
if(horas > 12) {
  horas = horas - 12;
  sufijo = ' pm';
}
 
if(horas < 10) { horas = '0' + horas; }
if(minutos < 10) { minutos = '0' + minutos; }
if(segundos < 10) { segundos = '0' + segundos; }
 
document.getElementById("reloj").innerHTML = horas+':'+minutos+':'+segundos+sufijo;
 
<div id="reloj" />

Utilizando el código anterior, el reloj ya no muestra la hora como 20:14:03, sino que la muestra en formato de 12 horas y con el sufijo adecuado:

08:14:03 pm

Para completar el reloj, sólo falta que se actualice su valor cada segundo. Para conseguirlo, se deben utilizar unas funciones especiales de JavaScript que permiten ejecutar determinadas instrucciones cuando ha transcurrido un determinado espacio de tiempo.

La función setTimeout() permite ejecutar una función una vez que haya transcurrido un periodo de tiempo indicado. La definición de la función es:

setTimeout(nombreFuncion, milisegundos);

La función que se va a ejecutar se debe indicar mediante su nombre sin paréntesis y el tiempo que debe transcurrir hasta que se ejecute se indica en milisegundos. De esta forma, si se crea una función encargada de mostrar la hora del reloj y se denomina muestraReloj(), se puede indicar que se ejecute dentro de 1 segundo mediante el siguiente código:

function muestraReloj() {
  var fechaHora = new Date();
  var horas = fechaHora.getHours();
  var minutos = fechaHora.getMinutes();
  var segundos = fechaHora.getSeconds();
 
  if(horas < 10) { horas = '0' + horas; }
  if(minutos < 10) { minutos = '0' + minutos; }
  if(segundos < 10) { segundos = '0' + segundos; }
 
  document.getElementById("reloj").innerHTML = horas+':'+minutos+':'+segundos;
}
 
setTimeout(muestraReloj, 1000);
 
<div id="reloj" />

No obstante, el código anterior simplemente muestra el contenido del reloj 1 segundo después de que se cargue la página, por lo que no es muy útil. Para ejecutar una función de forma periódica, se utiliza una función de JavaScript muy similar a setTimeout() que se denomina setInterval(). Su definición es:

setInterval(nombreFuncion, milisegundos);

La definición de esta función es idéntica a la función setTimeout(), salvo que en este caso, la función programada se ejecuta infinitas veces de forma periódica con un lapso de tiempo entre ejecuciones de tantos milisegundos como se hayan establecido.

Así, para construir el reloj completo, se establece una ejecución periódica de la función muestraReloj() cada segundo:

function muestraReloj() {
  var fechaHora = new Date();
  var horas = fechaHora.getHours();
  var minutos = fechaHora.getMinutes();
  var segundos = fechaHora.getSeconds();
 
  if(horas < 10) { horas = '0' + horas; }
  if(minutos < 10) { minutos = '0' + minutos; }
  if(segundos < 10) { segundos = '0' + segundos; }
 
  document.getElementById("reloj").innerHTML = horas+':'+minutos+':'+segundos;
}
 
window.onload = function() {
  setInterval(muestraReloj, 1000);
}
 
<div id="reloj" />

Empleando el objeto Date y sus funciones, es posible construir "cuentras atrás", es decir, relojes que muestran el tiempo que falta hasta que se produzca un evento. Además, las funciones setTimeout() y setInterval() pueden resultar muy útiles en otras técnicas de programación.

8.2. Calendario

Cuando una aplicación muestra un formulario para que el usuario inserte sus datos, la información más complicada de obtener siempre suelen ser los números de teléfono y las fechas. El motivo es que existen muchas formas diferentes de indicar estos datos. Las fechas por ejemplo se pueden indicar como dd/mm/aa, dd/mm/aaaa, aaaa/mm/dd, dd-mm-aa, dd mm aaaa, etc.

Los métodos más utilizados para que el usuario introduzca la información relativa a una fecha suelen ser un cuadro de texto en el que tiene que insertar la fecha completa (indicándole el formato que debe seguir) o un cuadro de texto para el día, una lista desplegable para el mes y otro cuadro de texto para el año.

En cualquier caso, para el usuario suele ser más cómodo que la aplicación incluya un calendario en el que pueda indicar la fecha pinchando sobre el día elegido:

Figura 8.1 Aspecto de un calendario creado con JavaScript

Además, este método es menos propenso a cometer errores, ya que si el calendario está bien construido, no es posible introducir fechas inválidas y tampoco es posible insertar las fechas en un formato incorrecto.

No obstante, realizar un calendario completo en JavaScript no es una tarea trivial, por lo que no se va a estudiar su desarrollo completo. Afortunadamente, existen scripts gratuitos para mostrar calendarios y que permiten su uso libre incluso en aplicaciones comerciales.

De entre todos los calendarios disponibles, uno de los más completos es el desarrollado por la empresa DynArch, que se puede acceder desde su página web oficial: http://www.dynarch.com/projects/calendar/ y que se puede descargar gratuitamente desde http://sourceforge.net/projects/jscalendar/ El archivo descargado incluye todos los scripts necesarios, su documentación, ejemplos de uso, diferentes estilos CSS para el calendario, etc.

A continuación se indican los pasos necesarios para incluir un calendario básico en cualquier página web:

1) Enlazar los archivos JavaScript y CSS requeridos:

Se descomprime el archivo descargado, se guardan los archivos JavaScript y CSS en el sitio adecuado (en este ejemplo se supone que los archivos JavaScript se guardan en el directorio js/ y los archivos CSS en el directorio css/) y se enlazan directamente desde la cabecera de la página HTML.

<head>
...
<style type="text/css">@import url("css/calendar-estilo.css");</style>
<script type="text/javascript" src="js/calendar.js" />
<script type="text/javascript" src="js/calendar-es.js" />
<script type="text/javascript" src="js/calendar-setup.js" />
...
</head>

El calendario incluye traducciones a más de 40 idiomas, entre los que se encuentra el español. Para mostrar el calendario en un determinado idioma, tan solo es necesario enlazar el archivo del idioma correspondiente. Las traducciones se encuentran en el directorio lang y su formato es calendar-XX.js, donde XX es el código del idioma.

2) Añadir el código XHTML necesario para el elemento que va a mostrar el calendario:

<p>Introduce la fecha pulsando sobre la imagen del calendario</p>
<input type="text" name="date" id="fecha" readonly="readonly" />
<img src="calendario.png" id="selector" />

En este caso, el calendario está formado por dos elementos:

• Un cuadro de texto llamado fecha y que almacena el valor introducido por el usuario. Como se le ha asignado un atributo readonly="readonly", el usuario no puede modificar su valor.
• Una pequeña imagen o icono que se utiliza para activar el calendario. Cuando el usuario pincha con el ratón sobre la imagen, se muestra el calendario de JavaScript.

3) Configurar el calendario:

<script type="text/javascript">
window.onload = function() {
  Calendar.setup({
    inputField: "fecha",
    ifFormat:   "%d / %m / %Y",
    button:     "selector"
  });
}
</script>

Una vez enlazados los archivos del calendario y preparado el código XHTML, es necesario inicializar y configurar el calendario. La configuración del calendario consiste en establecer el valor de alguna de sus propiedades. Las propiedades básicas imprescindibles son:

• inputField: se trata del atributo id del elemento en el que se mostrará la fecha seleccionada, en este ejemplo sería fecha.
• ifFormat: formato en el que se mostrará la fecha una vez seleccionada (en este caso se ha optado por el formato dd / mm / aaaa).
• button: atributo id del elemento que se pulsa (botón, imagen, enlace) para mostrar el calendario de selección de fecha. En este ejemplo, el id de la imagen es selector.

Después de esta configuración básica, el calendario ya puede utilizarse en la aplicación:

1) Aspecto por defecto del selector de calendario:

Figura 8.2 Elementos XHTML del calendario JavaScript: cuadro de texto e icono

2) Al pinchar una vez sobre la imagen del calendario:

Figura 8.3 Aspecto inicial del calendario JavaScript cuando se abre por primera vez

Se muestra el calendario con el aspecto e idioma establecidos y aparece resaltada la fecha del día actual.

3) Se selecciona la fecha deseada:

Figura 8.4 Seleccionando una fecha en el calendario JavaScript

4) Después de pinchar con el ratón sobre la fecha deseada:

Figura 8.5 El cuadro de texto muestra la fecha establecida por el usuario con el calendario JavaScript

Al pulsar con el ratón sobre la fecha deseada, el calendario se cierra automáticamente y el cuadro de texto muestra la fecha seleccionada con el formato indicado en la configuración del calendario. Si se vuelve a abrir el calendario para seleccionar otra fecha, se mostrará resaltada la fecha del día seleccionado y no la fecha del día actual.

Ejercicio 18

Mejorar el calendario creado añadiendo las opciones necesarias para que muestre el siguiente aspecto:

Figura 8.6 Aspecto mejorado del calendario JavaScript

1. Que no se muestre el número de la semana en el calendario (pista: weekNumbers)
2. Modificar el formato en el que se muestra la fecha seleccionada. El formato original es 21 / 08 / 2007 (indicado como %d / %m / %Y). El formato deseado es Martes, 21 de Agosto de 2007 (pistas: %A, %B)
3. El nuevo formato de fecha es mucho más agradable para los usuarios, pero más incómodo para los scripts que tienen que manejarlo. Afortunadamente, el calendario dispone de la posibilidad de guardar dos valores: un valor para mostrar a los usuarios y otro valor para que lo procesen los scripts. Cuando el usuario seleccione una fecha, la fecha con el formato original se debe almacenar en un campo oculto de formulario y el otro formato más largo debe mostrar al usuario en un elemento de tipo <span> (pistas: displayArea, daFormat)

4. 8.3. Tooltip

   Los tooltips son pequeños recuadros de información que aparecen al posicionar el ratón sobre un elemento. Normalmente se utilizan para ofrecer información adicional sobre el elemento seleccionado o para mostrar al usuario pequeños mensajes de ayuda. Los tooltips son habituales en varios elementos de los sistemas operativos:
   

   Figura 8.7 Aspecto de un tooltip típico en el Sistema Operativo
   Realizar un tooltip completo mediante JavaScript es una tarea muy compleja, sobre todo por la dificultad de mostrar el mensaje correctamente en función de la posición del ratón. Afortunadamente, existen scripts que ya están preparados para generar cualquier tipo de tooltip. La librería que se va a utilizar se denomina overLIB, y se puede descargar desde su página web principal: http://www.bosrup.com/web/overlib/
   La descarga incluye todos los scripts necesarios para el funcionamiento del sistema de tooltips, pero no su documentación, que se puede consultar en: http://www.bosrup.com/web/overlib/?Documentation. La referencia de todos los comandos disponibles se puede consultar en: http://www.bosrup.com/web/overlib/?Command_Reference
   A continuación se indican los pasos necesarios para incluir un tooltip básico en cualquier página web:
   1) Enlazar los archivos JavaScript requeridos:

   <script type="text/javascript" src="js/overlib.js"><!-- overLIB (c) Erik Bosrup --></script>

   Se descomprime el archivo descargado, se guarda el archivo JavaScript en el sitio adecuado (en este ejemplo se supone que los archivos JavaScript se guardan en el directorio js/) y se enlaza directamente desde la cabecera de la página HTML. Los tooltips sólo requieren que se enlace un único archivo JavaScript (overlib.js). El comentario que incluye el código XHTML es el aviso de copyright de la librería, que es obligatorio incluirlo para poder usarla.
   2) Definir el texto que activa el tooltip y su contenido:

   <p>Lorem ipsum dolor sit amet, <a href="#" onmouseover="return overlib('Prueba de un tooltip básico y muy sencillo.');" onmouseout="return nd();">consectetuer adipiscing elit</a>. Etiam eget metus. Proin varius auctor tortor. Cras augue neque, porta vitae, vestibulum nec, pulvinar id, nibh. Fusce in arcu. Duis vehicula nonummy orci.</p>

   Los tooltip se incluyen como enlaces de tipo <a> para los que se definen los eventos onmouseover y onmouseout. Cuando el ratón se pasa por encima del enlace anterior, se muestra el tooltip con el aspecto por defecto:
   

   Figura 8.8 Aspecto por defecto del tooltip creado con la librería overLIB
   La librería overLIB permite configurar completamente el aspecto y comportamiento de cada tooltip. Las opciones se indican en cada tooltip y se incluyen como parámetros al final de la llamada a la función overlib():

   <a href="#" onmouseover="return overlib('Prueba de un tooltip básico y muy sencillo.', CENTER);" onmouseout="return nd();">consectetuer adipiscing elit</a>

   El parámetro CENTER indica que el tooltip se debe mostrar centrado respecto de la posición del ratón:
   

   Figura 8.9 Centrando el tooltip respecto de la posición del ratón
   Otra opción que se puede controlar es la anchura del tooltip. Por defecto, su anchura es de 200px, pero la opción WIDTH permite modificarla:

   <a href="#" onmouseover="return overlib('Prueba de un tooltip básico y muy sencillo.', CENTER, WIDTH, 120);" onmouseout="return nd();">consectetuer adipiscing elit</a>

   El valor de la nueva anchura se indica en el parámetro que va detrás de WIDTH. El nuevo aspecto del tooltip es el siguiente:
   

   Figura 8.10 Definiendo la anchura que muestra el tooltip
   El uso de los parámetros de configuración en la propia llamada a la función que muestra los tooltips no es recomendable cuando el número de parámetros empieza a ser muy numeroso. Afortunadamente, overLIB permite realizar una única configuración que se utilizará para todos los tooltips de la página.
   La configuración global consiste en llamar a la función overlib_pagedefaults() con todos los parámetros de configuración deseados. Por tanto, el código JavaScript necesario para realizar los cambios configurados hasta el momento sería:

   <script type="text/javascript" src="js/overlib.js"><!-- overLIB (c) Erik Bosrup --></script>
   <script type="text/javascript">
   overlib_pagedefaults(CENTER, WIDTH, 120);
   </script>
    
   <p>Lorem ipsum dolor sit amet, <a href="#" onmouseover="return overlib('Prueba de un tooltip básico y muy sencillo.');" onmouseout="return nd();">consectetuer adipiscing elit</a>. Etiam eget metus. Proin varius auctor tortor. Cras augue neque, porta vitae, vestibulum nec, pulvinar id, nibh. Fusce in arcu. Duis vehicula nonummy orci.</p>

   Utilizando esta configuración global, se va a modificar por último el aspecto del tooltip para hacerlo más parecido a los tooltips de los sistemas operativos:
   

   Figura 8.11 Tooltip creado con la librería overLIB y personalizado para que parezca un tooltip de Sistema Operativo
   En el ejemplo anterior se ha modificado el tamaño y tipo de letra y el color de fondo del tooltip mediante la siguiente configuración:

   overlib_pagedefaults(WIDTH,150,FGCOLOR,'#ffffcc',BGCOLOR,'#666666',TEXTFONT,"Arial, Helvetica, Verdana",TEXTSIZE,".8em");

   Ejercicio 19

   Mejorar el tooltip propuesto añadiendo las siguientes características:

   1. Que el tooltip no se muestre instantáneamente, sino que transcurra un cuarto de segundo hasta que se muestre (pista: DELAY)
   2. Que exista una separación horizontal de 15 píxel entre el puntero del ratón y el tooltip (pista: OFFSETX)
   3. Que el tooltip se muestre en la parte superior del puntero del ratón y no en la parte inferior (pista: ABOVE)

   El nuevo aspecto del tooltip se muestra en la siguiente imagen:

   

   Figura 8.12 Nuevo aspecto del tooltip

5. 8.4. Menú desplegable

   La navegación de algunas páginas web se realiza mediante menús desplegables, que disponen de varios niveles jerárquicos que se despliegan a medida que el usuario pasa el puntero del ratón por encima de cada elemento. Aunque CSS permite realizar menús desplegables horizontales y verticales de cualquier nivel de profundidad, los navegadores de la familia Internet Explorer versión 6.0 y anteriores no disponen del suficiente soporte de CSS como para crear este tipo de menús.
   De esta forma, la única forma de crear un menú desplegable que funcione correctamente en cualquier navegador consiste en utilizar JavaScript. A pesar de que realizar un menú desplegable sencillo con JavaScript no es una tarea muy compleja, se va a utilizar un componente ya realizado que pertenece a la librería de desarrollo web de Yahoo.
   La Yahoo UI Library, conocida como YUI, y que se puede traducir como "Librería de componentes de interfaz de usuario de Yahoo" es un conjunto de utilidades y controles escritos en JavaScript para el desarrollo rápido y sencillo de aplicaciones web complejas.
   La librería completa está dividida en módulos y componentes relacionados con CSS, DOM, eventos, AJAX, etc. Entre las utilidades disponibles se encuentran calendarios, tooltips, cuadros que autocompletan el texto, árboles jerárquicos, etc. Además de esas utilidades, la YUI incluye un completo módulo de menús que permite realizar decenas de tipos de menús diferentes: horizontales, verticales, desplegables, estáticos, menús contextuales, menús de aplicación, menús realizados con XHTML o con JavaScript, etc.
   La librería YUI se puede descargar gratuitamente en http://developer.yahoo.com/yui/, la información específica sobre los menús se puede encontrar en http://developer.yahoo.com/yui/menu/ y se pueden ver decenas de ejemplos de menús ya realizados en http://developer.yahoo.com/yui/examples/menu/.
   A continuación se indican los pasos necesarios para incluir un menú vertical desplegable:
   1) Enlazar los archivos JavaScript y CSS requeridos:
   La librería YUI se puede descargar gratuitamente con todos los archivos necesarios, toda la documentación y cientos de ejemplos (por lo que comprimida ya ocupa más de 11 MB). Aunque es posible utilizar los archivos CSS y JavaScript proporcionados por la librería desde nuestro servidor, Yahoo permite enlazar los archivos CSS y JavaScript desde sus propios servidores.
   De esta forma, todos los archivos requeridos por las utilidades de Yahoo se pueden servir directamente desde sus servidores, mucho más rápidos y fiables que cualquier servidor particular. Como el usuario se descarga los archivos desde los servidores de Yahoo, el ahorro de ancho de banda es total y la aplicación carga mucho más rápido.
   Para crear un menú vertical, se deben enlazar los siguientes archivos:

   <!-- Dependencias --> 
   <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/menu/assets/skins/sam/menu.css">
   <script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
   <script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/container/container_core-min.js"></script>
    
   <!-- Código para menús -->
   <script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/menu/menu-min.js"></script>

   Si se opta por servir los archivos desde nuestro propio servidor, es recomendable enlazar las versiones comprimidas de cada archivo, que se pueden reconocer porque su nombre termina en -min.js.
   2) Definir el código XHTML de los elementos del menú:

   <div id="menu_vertical" class="yuimenu">
   <div class="bd">
     <ul class="first-of-type">
     <li class="yuimenuitem"><a href="#">Lorem ipsum</a></li>
     <li class="yuimenuitem"><a href="#">Dolor sit amet</a></li>
     <li class="yuimenuitem">Consectetuer
       <div id="consectetuer" class="yuimenu">
       <div class="bd">
         <ul>
           <li class="yuimenuitem"><a href="#">Donec quis nunc</a></li>
           <li class="yuimenuitem"><a href="#">Fusce eleifend</a></li>
           <li class="yuimenuitem"><a href="#">Donec erat</a></li>
           <li class="yuimenuitem"><a href="#">Faucibus orci</a></li>
           <li class="yuimenuitem"><a href="#">Volutpat quam</a></li>
         </ul>
       </div>
       </div>
     </li>
     <li class="yuimenuitem"><a href="#">Adipiscing elit</a></li>
     </ul>
   </div>
   </div>

   La librería YUI dispone de muchos tipos diferentes de menús. Además, los menús se pueden construir completamente con JavaScript (en la página XHTML no aparecen los elementos del menú) o a partir del código XHTML de los elementos del menú incluido en la página.
   Este último método, definir el menú con XHTML y después aplicarle JavaScript, es la forma recomendada, ya que si el usuario no tiene JavaScript activado, el menú se visualiza correctamente. Por ese motivo, no se va a estudiar el método de construcción de un menú de YUI exclusivamente con JavaScript.
   Los elementos que forman los menús creados con YUI se construyen mediante listas no ordenadas con las etiquetas <ul> y <li>. Un pequeño inconveniente de los menús definidos con la librería YUI es que cada uno de los menús (el principal y todos los desplegables) debe encerrarse con dos elementos de tipo <div>. En otras palabras, el esquema de cada menú (y submenú desplegable) es el siguiente:

   <div id="cualquier_identificador" class="yuimenu">
     <div class="bd">
       <ul class="first-of-type">
         ...
       </ul>
     </div>
   </div>

   Los valores de los atributos class de los elementos <div> anteriores deben mantenerse para que el menú funcione correctamente.
   3) Construir el menú y mostrarlo en la página:

   <script type="text/javascript">
   YAHOO.util.Event.onContentReady("menu_vertical", function () {
     var elMenu = new YAHOO.widget.Menu("menu_vertical", { width: '150px' });
     elMenu.render();
     elMenu.show();
   });
   </script>

   El código JavaScript que crea dinámicamente el menú requiere que el árbol DOM de la página se haya construido completamente, por lo que se utiliza la función onContentReady() que forma parte de las utilidades para eventos de la librería YUI.
   Para construir el menú se crea un nuevo objeto de tipo YAHOO.widget.Menu y se le pasan las opciones de inicialización (en este caso, que tenga una anchura de 150 píxel).:

   var elMenu = new YAHOO.widget.Menu("menu_vertical", { width: '150px' });

   Una vez creado el objeto del menú, se construye mediante la instrucción elMenu.render() y se muestra en la página con la instrucción elMenu.show().
   El resultado final es un menú vertical desplegable con el siguiente aspecto:
   

   Figura 8.13 Aspecto final del menú vertical desplegable creado con la librería Yahoo YUI

6. 8.5. Galerías de imágenes (Lightbox)

   Muchos sitios web utilizan galerías de imágenes para mostrar sus productos y servicios. Este tipo de galerías muestran una serie de miniaturas de imágenes que se amplían al pinchar sobre cada imagen. Hasta hace poco, la técnica más utilizada para construir una galería consistía en incluir las miniaturas en la página y abrir cada imagen grande en una ventana emergente (o pop-up) o en una nueva página.
   El uso de técnicas basadas en JavaScript ha supuesto una revolución en la creación de las galerías de imágenes y ha permitido mejorar la experiencia de navegación del usuario. La técnica se conoce como Lightbox y fue creada originalmente por Lokesh Dhakar. Lightbox es una técnica muy sencilla de utilizar, funciona correctamente en todos los navegadores y permite mantener la semántica del documento (no ensucia la página con código JavaScript).
   El código de la versión más reciente se puede descargar gratuitamente en http://www.huddletogether.com/projects/lightbox2/, donde también se puede ver una demostración de las galerías de imágenes construidas con Lightbox.
   La descarga incluye el código fuente del script, todos los archivos JavaScript externos necesarios, archivos CSS e imágenes de prueba y una breve pero completa documentación.
   A continuación se indican los pasos necesarios para incluir Lightbox en una página web:
   1) Enlazar los archivos JavaScript y CSS requeridos:

   <!-- Dependencias -->
   <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
   <script type="text/javascript" src="js/prototype.js"></script>
   <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    
   <!-- Código fuente -->
   <script type="text/javascript" src="js/lightbox.js"></script>

   Lightbox utiliza dos de las librerías más conocidas y utilizadas para realizar aplicaciones JavaScript complejas: Prototype y Scriptaculous. Además de estos dos archivos JavaScript, también es necesario enlazar un archivo de tipo CSS que controla el aspecto de Lightbox y enlaza las imágenes utilizadas.
   2) Activar Lightbox:
   La página XHTML original contiene un enlace simple que abre una nueva página en la que se puede ver ampliada la imagen original:

   <a href="images/image-1.jpg" title="Título de la imagen 1">Imagen 1</a>

   Para activar Lightbox, tan solo es necesario incluir el siguiente atributo rel:

   <a href="images/image-1.jpg" rel="lightbox" title="Título de la imagen 1">Imagen 1</a>

   Ahora, si el usuario tiene activado JavaScript, al pinchar en el enlace:
   

   Figura 8.14 Enlace con el atributo "lightbox" añadido
   Se mostrará la imagen ampliada centrada en la misma página:
   

   Figura 8.15 Imagen ampliada que se muestra al pinchar sobre el enlace
   Lightbox se activa automáticamente para todos los enlaces cuyo atributo rel sea igual a lightbox. Además, Lightbox muestra como título de la imagen el valor del atributo title del enlace. Si el usuario no tiene activado JavaScript, la imagen se abrirá en una página nueva, como ocurre si no se utiliza Lightbox. La sencillez de uso y el resultado tan espectacular que se consigue son los puntos fuertes de Lightbox.
   Normalmente, Lightbox no se utiliza con enlaces de texto sino con imágenes que contienen enlaces:

   <a href="images/image-1.jpg" rel="lightbox" title="Título de la imagen 1"><img src="images/imagen_pequena1.jpg" /></a>

   Ahora, si el usuario tiene activado JavaScript, al pinchar sobre la imagen pequeña:
   

   Figura 8.16 Imagen en miniatura con el enlace preparado para Lightbox
   Se mostrará la imagen ampliada centrada en la misma página:
   

   Figura 8.17 Imagen ampliada que se muestra al pinchar sobre la imagen en miniatura
   La imagen ampliada se muestra con una vistosa animación y el fondo de la página completa se oscurece para que el usuario centre toda su atención en la imagen. El usuario puede cerrar la imagen ampliada y volver a la página original pulsando sobre la imagen CLOSE X de la esquina inferior derecha de la imagen.
   Utilizar Lightbox aporta muchas ventajas respecto de la experiencia de usuario del sitio web. Además, el código XHTML permanece intacto y no se ensucia con llamadas a funciones JavaScript, ya que lo único que hay que añadir es un atributo rel="lightbox" a las imágenes y enlaces que vayan a utilizar Lightbox.
   Además, Lightbox permite relacionar varias imágenes entre sí para crear una galería de imágenes. Así, mientras se visualiza una imagen ampliada es posible pasar a la siguiente imagen de la galería. Para relacionar varias imágenes entre sí, tan sólo es necesario aplicar un valor único al atributo rel como se muestra a continuación:

   <a href="images/imagen-1.jpg" rel="lightbox[galeria1]">imagen #1</a>
   <a href="images/imagen-2.jpg" rel="lightbox[galeria1]">imagen #2</a>
   <a href="images/imagen-3.jpg" rel="lightbox[galeria1]">imagen #3</a>

   Todas las imágenes que tengan el mismo valor del atributo rel, automáticamente pasarán a formar parte de una galería de fotos por la que se puede navegar hacia la siguiente o hacia la anterior imagen.
   La técnica Lightbox presentada solamente es válida para elementos de tipo imagen. No es posible por tanto mostrar una página web o cierto código XHTML dentro de una ventana de ese tipo.
   Afortunadamente, existen otras librerías basadas en Lightbox y que permiten mostrar cualquier tipo de código XHMTL en el interior de la ventana. La más conocida es la técnica creada por ParticleTree y que se puede encontrar en: http://particletree.com/features/lightbox-gone-wild/
7.