Unidad de Investigación ACCESO

Accesibilidad a la Red

Información y herramientas sobre el diseño accesible de sitios web. Diseño para Todos

Introducción a DHTML

Rafael Romero Zúnica
Unidad de Investigación ACCESO 
Publicado originalmente en Temalia. 01/06/2001

Resumen

DHTML consiste en el uso de HTML4, CSSP y Javascript combinados en las páginas web para lograr efectos avanzados multimedia y de interactividad en las mismas.

Artículo

DHTML son las siglas en inglés de Lenguaje de Marcado de Hipertexto Dinámico, o simplemente HTML Dinámico. No se trata de un único lenguaje sino de un término genérico para referirse a los últimos lenguajes de creación de páginas web que permiten aportar interactividad y animación a las mismas.

Para aclarar más la definición se puede decir que DHTML hace referencia a páginas desarrolladas usando una combinación de HTML 4, Javascript, hojas de estilo en cascada (CSS), incluyendo la extensión para posicionamiento (CSSP), uso de capas (layers) y divisiones de página (DIV).

Multimedia e interactividad
DHTML tiene la ventaja frente a otras tecnologías como Flash, Shockwave o Neuron de que no precisa de la instalación de ningún conector (plug-in) adicional en el navegador. Se trata además de unos lenguajes que permiten crear efectos mediante el código que se descarga con la página web y que se ejecuta en el ordenador del usuario. Esto lo hace mucho más rápido y se traduce en una necesidad de menor ancho de banda.

Hay que considerar que el HTML fue desarrollado con la idea de crear documentos estáticos y sin animación. Una vez la página se ha cargado en el navegador, ésta no cambia de apariencia o contenido a menos que se vuelva a recargar desde el servidor. Esto limita sus posibilidades como un formato para crear contenido multimedia interactivo.

Sin embargo, con DHTML los desarrolladores pueden crear páginas que actualicen su contenido dinámicamente, cambien de apariencia y que muestren, escondan e incluso desplacen elementos por toda la página. Esto abre la puerta a la creación de animaciones, juegos y otras aplicaciones multimedia más complejas.

Posicionamiento y animación con CSSP y Javascript
Mediante CSSP los textos, imágenes y demás elementos de la página pueden colocarse en coordenadas exactas, con una precisión de pixeles. Se pueden superponer textos sin necesidad de recurrir a simular el efecto con una imagen GIF, con el consiguiente ahorro de espacio en el tamaño del archivo. Esto también permite organizar espacialmente el contenido de la página sin tener que usar técnicas basadas en marcos o tablas.

Por otro lado, con la ayuda de Javascript se puede cambiar el posicionamiento absoluto de bloques de contenido de la página en respuesta a eventos causados por el usuario, como hacer clic en una imagen. Así se logra la simulación del movimiento de estos elementos.

También se puede lograr usando Javascript un efecto de 'arrastra y soltar' (drag and drop) de los componentes de la página: imágenes, texto o incluso tablas completas.

Creación dinámica de contenido
Mediante Javascript se pueden crear multitud de efectos e integrarlos en la página web para hacerla mucho más atractiva. A continuación se muestran dos ejemplos:

• Contadores de tiempo que van mostrando los segundos pasados desde la carga de la página. Al final de la cuenta atrás pueden hacer que se cargue otra página automáticamente o se muestre un mensaje en un cuadro de diálogo.
• Efecto sustitución en imágenes (rollover). Mediante este conocido efecto se precargan distintas imágenes que luego se muestran consecutivamente en el mismo espacio en respuesta a acciones del usuario, como pasar el ratón por encima o hacer clic en otro lugar.

Compatibilidad entre navegadores
Debe tenerse en cuenta que no todos los navegadores reconocen correctamente los nuevos elementos de CSS, CSSP y Javascript. éstos sólo empiezan a ser soportados a partir de la versión 4 de Netscape Navigator, Internet Explorer y Opera y aun así en estas versiones hay bastantes carencias y diferencias de interpretación. Las versiones 5 de los tres navegadores principales son mucho mejores en este sentido.

Se recomienda que antes de publicarlas se prueben las páginas web que usen estas tecnologías en distintos navegadores y versiones para verificar si el funcionamiento es satisfactorio. Hay que lograr que al menos sean mínimamente usables aunque no puedan reproducir los efectos avanzados de DHTML incluidos en el código.

Para ampliar información sobre DHTML se recomienda este tutorial en castellano con algunos ejemplos simples muy ilustrativos en http://www.cicei.ulpgc.es/gsi/tutorial_dhtml/index.html 

(c) Unidad ACCESO. Dep. Psicología Evolutiva i de l'Educació. Universitat de Valencia Estudi General.
Contactar con Unidad ACCESO