Un completo curso de diseño gráfico, ilustración, diseño web y tipografía.

DHTML - Páginas web dinámicas

Una página web sólo con texto e imagen se ha convertido, en los escasos años de andanza de la web, en una excepción. Dejando aparte el hecho de que cada vez más se utilizan páginas generadas dinámicamente en el servidor, vinculadas a sistemas de bases de datos (por ejemplo, sistemas ASP), las páginas web a las que nos hemos acostumbrado presentan mucha más riqueza que las originales de los primeros años 90 y ello se debe fundamentalmente al uso de JavaScript y HTML dinámico.

Aunque a primera vista pueda parecer algo fuera del alcance de un principiante, o de alguien que está simplemente preparando su página personal, crear una página que aproveche estas posibilidades no es tan difícil. Por suerte existen herramientas que lo hacen accesible.

Scripts

Los scripts (fundamentalmente Javascript) son pequeños fragmentos de código que el navegador interpreta para realizar determinadas tareas. Por ejemplo, en el caso más simple, puede buscar la fecha y hora del sistema y colocarla en la pantalla en forma de texto. En aplicaciones más sofisticadas, puede generar automáticamente complejas animaciones y efectos con el texto e imágenes. Se denomina HTML dinámico (DHTML) a la combinación de Javascript y definición de formato de página en CSS (Hojas de Estilo en cascada), para conseguir efectos dinámicos en las páginas web, impensables en la primera generación de navegadores.

Este tipo de páginas exigen un navegador actual (versión 4 o superior.) Como limitación adicional, existen problemas de compatibilidad entre diferentes navegadores. Por ejemplo, Internet Explorer 4 o 5 es mucho más versátil y fiel para manejar CSS y DHTML que Netscape 4.x. Incluso la versión 6 de Netscape presenta graves problemas a la hora de que funcionen determinadas acciones. No es de extrañar que muchos diseñadores, en aras de una máxima compatibilidad, hayan renunciado a determinadas posibilidades que hubieran sido muy interesantes. Al menos esto ha sucedido durante varios años. El hecho es que, nos guste o no, actualmente Explorer tiene tal implantación entre los navegantes que es casi seguro utilizar dhtml que sólo funcione para este navegador.

Esta falta de estándares es irritante, porque ha supuesto de hecho, una limitación importante en la evolución del diseño para la web durante varios años. Para complicar aún más la cosa, algunos scripts que funcionaban en la versión anterior de Netscape, ahora no lo hacen en la versión 6 y viceversa. Si el diseñador pretende una máxima accesibilidad, no le queda más remedio que usar scripts universalmente aceptados (aunque incluso en este caso existan diferentes comportamientos en cada navegador.)

Existen, por supuesto, otras alternativas para dotar de contenidos dinámicos a las páginas web. En diferentes secciones de Vigital tratamos otras alternativas como son Java y Flash. Cada sistema presenta sus ventajas y sus inconvenientes. Javascript tiene la ventaja de estar incluído (normalmente) dentro de la propia página html, ser bastante compacto y tener una amplia compatibilidad, mientras que Los comportamientos dinámicos en Flash son muy versátiles, puesto que pueden llevarse a cabo como respuestas a muy diversas acciones. Por ejemplo, para el ratón, puede dispararse una acción al hacer clic, doble clic, pasar por encima, salir de un área, entrar en un área...

CSS y DHTML

La relación entre ambos estriba en la forma en que el html dinámico trata los contenidos de la página una vez definidos como estilos de una hoja css. su posición, visibilidad no son algo fijo sino que se puede modificar a voluntad en función de diferentes parámetros. Con el html sólo no es posible lograr estas cualidades. Con frecuencia, los contenidos dinámicos deben situarse en contenedores, llamados capas (layers).  Cada capa tiene sus propios parámetros identificadores de posición, orden (por encima o debajo de otras capas), visibilidad y acciones respecto de lo que suceda en el navegador o lo que haga el usuario.

A diferencia del html normal, con capas es posible superponer diferentes elementos en una página, creando interesantes efectos. Las capas pueden mostrarse o ocultarse en función de los parámetros que se elijan; si una capa se define como objeto móvil, puede desplazarse a voluntad por la pantalla, bien automáticamente o en respuesta a diferentes acciones, incluso el propio movimiento del ratón.

A pesar de que la programación que se oculta detrás del dhtml puede ser poco menos que un dialecto klingon para el profano en JavaScript (entre los que nos incluímos), definir los comportamientos o acciones dinámicas en un editor visual no encierra dificultad. Una acción dinámica siempre tiene unos mismos elementos. Las acciones están definidas a partir de los objetos de la página. Un objeto puede ser un bloque de texto, un enlace, una imagen, una capa entera, la página completa... Cada categoría permite un determinado número de acciones -no todas están disponibles para cada tipo de objeto. Por ejemplo, algunas son exclusivas de los enlaces, y para disponer de ellas es preciso definir un enlace, aunque sea un enlace vacío (#).

1. Una situación que dispara la acción, afectando un objeto determinado con:

  • movimiento del ratón;
  • estado de otro objeto (al ser visible o invisible);
  • estado de la página (por ejemplo, al haberse cargado por completo, o al ir a una nueva página.);
  • transición, movimiento o arrastre de un objeto por la página. Por ejemplo, cuando un objeto ha llegado a una cierta posición puede disparar la apertura de una nueva ventana.

2. Una orden o mensaje que se transmite a otro u otros objetos de la página. Esta orden puede tener diferentes parámetros que permiten adaptarla a los propósitos del diseñador. Por ejemplo, si se trata de un movimiento a través de la pantalla se puede especificar la trayectoria que va a seguir.

3. Un objeto diana que cambia en función de lo que haya sucedido en 1) y la orden recibida 2).

  Algunas aplicaciones

Los scripts pueden solucionar tareas muy simples, tales como abrir una ventana nueva del navegador, cerrarla, ir adelante o atrás en el historial, mostrar la fecha, mostrar una imagen diferente según el momento del día o la semana... pero pueden llegar a constituir aplicaciones en sí mismas. Por ejemplo, programar un formulario que permita crear una página web, o calcular para un carrito de compra en una tienda online.

Algunos de los ejemplos más conocidos y/o útiles del uso de Javascript (especialmente en páginas con DHTML) son:

  • Menús de opciones desplegables. Los hay de muchos tipos distintos. Los más sencillos son idénticos a los menús de un formulario, pero en las versiones más sofisticadas se comportan de forma semejante a los menús extensibles de un programa (es decir, al hacer clic o pasar por encima de una parte del menú se muestran sus submenús u opciones.)
  • Se puede identificar el navegador y al usuario según la información almacenada en la máquina cliente, y en función de estos datos dirigir la navegación hacia una página específica.
  • Cambios dinámicos de imágenes. Los consabidos efectos de mouseover. Existen diferentes opciones. Pensados inicialmente para imágenes, con un poco de práctica se pueden aplicar a textos y contenedores de texto o imagen completos.
  • Cambio de posición o visibilidad de capas (layers). Una capa es un contenedor de texto e imagen en la página. Diversas capas pueden superponerse, ser o no visibles... Una página DHTML juega con estas opciones, de acuerdo con las acciones del visitante o según un esquema prefijado. Es un sistema con muchas posibilidades. Por ejemplo, podemos hacer que una capa inicialmente invisible aparezca al hacer clic en un enlace, mostrando por ejemplo una imagen o información adicional. Las capas pueden moverse por la página, apareciendo o desapareciendo...
  • Cajas con contenido desplazable (scrollboxes). Existen cajas de texto desplazable fáciles de programar en Javascript, pero últimamente se ven mucho una versión mejorada que utiliza dhtml para conseguir que el contenido de la caja se mueva automáticamente al colocar el ratón sobre las flechas de dirección, o al hacer clic en ella

 

Cómo incluir scripts

Si echamos un vistazo al código de una página dinámica, aparece el código necesario. Evidentemente, hace falta incluir esta programación para que todo funcione como es debido. Esto no significa que debamos escribir el código a mano y a partir de cero. Por fortuna, los diseñadores no tan expertos en programación y los aficionados disponen de otras alternativas que funcionan más o menos satisfactoriamente.

La forma más cómoda de incluir interactividad en las páginas es emplear un programa visual, de forma que definir una acción dhtml o un script sea sólo una cuestión de elegir entre opciones y menús, sin necesidad de manipular directamente el código. Esto hace más rápido y cómodo establecer las acciones más comunes. Habitualmente, efectos como mouseovers y similares están ya automatizados y se trata sólo de asignar las imágenes y los enlaces correspondientes en un cuadro de diálogo.

Definir los comportamientos dinámicos en programas de diseño web como Dreamweaver, GoLive o Fusion es muy simple. Una vez seleccionado el objeto al que se va asignar la acción, aparece un cuadro de diálogo. Existe una gran variedad de acciones predeterminadas, pero siempre es posible adaptar el sistema para introducir nuevas variantes. En el programa que empleamos para Vigital, Netobjects Fusion estas tareas son particularmente fáciles. Para cualquier objeto está disponible en la paleta de propiedades una ficha "Actions" en la que se define el comportamiento. Además, existen también componentes adicionales que facilitan aún más la creación de acciones dinámicas.

Los buenos programas de edición html incluyen comandos fáciles para incluir scripts de html dinámico (en este ejemplo, First Page 2000, un recomendable editor gratis)

Dreamweaver, en estos momentos probablemente el programa de diseño web más empleado por los profesionales, existen dos paletas dedicadas específicamente a preparar comportamientos dinámicos: behaviors (comportamientos), análoga a la anteriormente mencionada para Fusion; además existe un cuadro de cambio a lo largo del tiempo (Timeline) que sirve para definir movimiento de objetos en la página de una forma bastante intuitiva. GoLive también dispone de unas opciones semejantes.

Cortar y pegar

Evidentemente, el aficionado no suele tener acceso a un programa profesional como los mencionados (aunque Fusion tiene un precio asequible a cualquiera si se compra directamente en eFuse). Además, la variedad de comportamientos dinámicos es más o menos limitada, y no incluye a menudo scripts más básicos pero igualmente útiles. En estos casos lo mejor es copiar, pegar y configurar código html que incluya el script necesario y las definiciones CSS en su caso. Se puede insertar el código bien en el propio editor de html (abriendo una ventana con la vista del código fuente) o en un editor de texto cualquiera.

Si todo esto empieza a despertar la migraña en vuestra cabeza, no os preocupéis. A menudo se puede hacer todo sin apenas tocar el código, simplemente siguiendo unas instrucciones sencillas. Existen varias páginas especializadas en ofrecer Javascript de uso libre, destacando Dynamic Drive. Allí encontramos decenas de scripts listos para usar, con las instrucciones necesarias para configurarlos para nuestro caso particular.

Si queremos tomar prestado código de otras páginas, debemos tener presentes dos cosas: primero, probablemente será más difícil adaptarlo a nuestra página, a menos que sea algo muy simple; en segundo lugar, escribir el código lleva bastante trabajo y es posible que los autores no quieran compartirlo de forma gratuita. Debe considerarse en este caso como un material protegido por derechos de autor, y deberíamos consultarles antes de usarlo.

Trucos e ideas

DHTML es una excelente forma de economizar espacio y evitar navegación secuencial.

Podemos incluir mucha más información de la visible en una página, y hacer que se muestre con acciones asignadas a las capas. Por ejemplo, podemos crear un espacio que muestre información adicional sobre las secciones que indican unos iconos o un texto, y al hacer clic sobre ellos activarse este espacio con información adicional, al tiempo que se hacen invisibles los demás. También puede utilizarse un comportamiento de "scroll" -movimiento vertical u horizontal, activado por el ratón o automático.

Para crear una galería de imágenes: colocamos cada una de ellas en una capa distinta. Alineamos todas las capas para que el efecto visual sea lo mejor posible. Para ello se puede utilizar la opción de alinear en un editor visual, o bien simplemente ajustar la posición de la esquina superior izquierda para todas las capas. A continuación, se hacen invisibles todas excepto la que vaya a contener la primera imagen. Para que aparezcan las demás, deberemos definir una acción consistente en ocultar todas las capas y mostrar la que corresponda a la imagen actual.

Crear interactividad y juegos. Una capa puede definirse como objeto movible (draggable layer), de modo que al hacer clic sobre él se pueda arrastrar a un lugar cualquiera de la pantalla. Esto abre la puerta a interesantes aplicaciones:

Un "mando a distancia" para controlar la navegación dentro del sitio.

Juegos en los que se activa la navegación y aparecen nuevas páginas, efectos o acciones al arrastrar una imagen (contenida en una capa móvil) hasta una diana determinada: por ejemplo, mover una imagen de un libro hasta un estante.

Esquema de navegación con ventanas que simulan una interfaz de usuario.

Realmente, las posibilidades están limitadas sólo por nuestra imaginación.

Recursos

En la web encontramos una gran variedad de recursos sobre Javascript y DHTML. Lo que puede interesarnos aquí es una página como Dynamic Drive, donde se ofrece una gran variedad de scripts, clasificados por categorías (Menus and Navigation Systems -Special document effects  -  Scrollers - Images- General, Slideshows, onMouseover - Mouse Trail effects - Links and buttons - Dynamic clocks and dates  - Text animations - Browser Window - DHTML Games - User/ System Preference - Other ). Lo normal es que estos scripts, gratuitos, incluyan todas las instrucciones precisas para hacerlos funcionar, de modo que es algo realmente simple.

Existen otras páginas semejantes, como las comentadas en la sección de recomendaciones.

También es necesario un cierto conocimiento de las hojas de estilo en cascada (CSS) para trabajar con DHTML. Encontramos un artículo introductorio sobre CSS en Vigital, donde se explican los conceptos básicos, los programas que pueden utilizarse... El recurso que da acceso a prácticamente todos los demás sobre CSS es la página del Consorcio de la WWW (http://www.w3.org)