HTML dinámico

HTML dinámico , o DHTML , es un término que algunos proveedores de navegadores usaban para describir la combinación de HTML , hojas de estilo y scripts del lado del cliente ( JavaScript , VBScript o cualquier otro script compatible) que permitía la creación de documentos interactivos y animados. ^{[ 1 ] [ 2 ]} Microsoft introdujo DHTML con el lanzamiento de Internet Explorer 4 en 1997. ^{[ 3 ]}

DHTML permite que lenguajes de scripting, como JavaScript, modifiquen variables y elementos en la estructura de una página web, lo que a su vez afecta la apariencia, el comportamiento y la funcionalidad del contenido HTML, que de otro modo sería estático, una vez que la página se ha cargado por completo y durante el proceso de visualización. Por lo tanto, la característica dinámica de DHTML reside en su funcionamiento mientras se visualiza una página, no en su capacidad para generar una página única con cada carga.

En cambio, una página web dinámica es un concepto más amplio que abarca cualquier página web generada de forma diferente para cada usuario, cada carga o cada valor de variable específico. Esto incluye páginas creadas mediante scripts del lado del cliente y aquellas creadas mediante scripts del lado del servidor (como PHP , Python , JSP o ASP.NET ), donde el servidor web genera el contenido antes de enviarlo al cliente.

DHTML es el predecesor de Ajax , y las páginas DHTML siguen basándose en solicitudes y recargas. Bajo el modelo DHTML, puede que no haya interacción entre el cliente y el servidor después de que la página se haya cargado; todo el procesamiento se realiza en el lado del cliente. Por el contrario, Ajax extiende las funcionalidades de DHTML para permitir que la página inicie solicitudes de red (o "subsolicitudes") al servidor incluso después de la carga de la página para realizar acciones adicionales. Por ejemplo, si hay varias pestañas en una página, el enfoque DHTML puro cargaría el contenido de todas las pestañas y luego mostraría dinámicamente solo la que esté activa, mientras que AJAX podría cargar cada pestaña solo cuando sea realmente necesario.

DHTML permite a los autores añadir efectos a sus páginas que de otro modo serían difíciles de conseguir, modificando el Modelo de Objetos del Documento (DOM) y el estilo de la página. La combinación de HTML, CSS y JavaScript ofrece maneras de:

• Animar texto e imágenes en su documento.
• Integra un teletipo u otra pantalla dinámica que actualice automáticamente su contenido con las últimas noticias, cotizaciones bursátiles u otros datos.
• Utilice un formulario para capturar la información que introduce el usuario y, a continuación, procese, verifique y responda a esos datos sin tener que enviarlos de vuelta al servidor.
• Incluya botones emergentes o menús desplegables.

Un uso menos común es la creación de juegos de acción para navegador. Si bien se crearon varios juegos con DHTML a finales de la década de 1990 y principios de la de 2000, ^{[ 4 ]} las diferencias entre navegadores dificultaron su desarrollo: fue necesario implementar numerosas técnicas en el código para que los juegos funcionaran en múltiples plataformas. Desde entonces, los navegadores han convergido hacia los estándares web , lo que ha facilitado el diseño de juegos DHTML. Estos juegos se pueden jugar en todos los navegadores principales y en aplicaciones de escritorio y dispositivos que admiten contextos de navegador integrados.

El término "DHTML" ha caído en desuso en los últimos años, ya que se asociaba con prácticas y convenciones que tendían a no funcionar bien entre varios navegadores web. ^{[ 5 ]}

La compatibilidad con DHTML y el acceso extenso al DOM se introdujeron con Internet Explorer 4.0 . Si bien Netscape Navigator 4.0 contaba con un sistema dinámico básico , no todos los elementos HTML estaban representados en el DOM. Cuando las técnicas de estilo DHTML se generalizaron, los distintos niveles de compatibilidad entre los navegadores web dificultaron su desarrollo y depuración . El desarrollo se simplificó cuando Internet Explorer 5.0+ , Mozilla Firefox 2.0+ y Opera 7.0+ adoptaron un DOM compartido heredado de ECMAScript .

Posteriormente, las bibliotecas de JavaScript, como jQuery, simplificaron muchas de las dificultades cotidianas en la manipulación del DOM entre navegadores, aunque una mejor conformidad con los estándares entre los navegadores ha reducido la necesidad de esto.

Normalmente, una página web que utiliza DHTML se configura de la siguiente manera:

<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" > < title > Ejemplo de DHTML </ title > </ head > < body bgcolor = "red" > < script > function init () { let myObj = document . getElementById ( "navigation" ); // ... manipular myObj } window . onload = init ; </ script > <!--  A menudo, el código se almacena en un archivo externo; esto se hace  enlazando el archivo que contiene el JavaScript.  Esto es útil cuando varias páginas usan el mismo script:  --> < script src = "my-javascript.js" ></ script > </ body > </ html >

El siguiente código ilustra una función de uso frecuente. Una parte adicional de una página web solo se mostrará si el usuario la solicita.

< ! DOCTYPE html > <html> <head> < meta charset = " utf - 8 " > <title> Usando una función DOM </title> <style> a { background - color : #eee ; } a : hover { background : # ff0 ; } #toggleMe { background : #cfc ; display : none ; margin : 30px 0 ; padding : 1em ; } </style> </head> <body> <h1> Usando una función DOM </h1>​​​​​​< h2 >< a id = "showhide" href = "#" > Mostrar párrafo </ a ></ h2 >< p id = "toggle-me" > Este es el párrafo que solo se muestra a petición. </p><p> El flujo general del documento continúa . </p><script> function changeDisplayState ( displayElement , textElement ) { if ( displayElement.style.display === " none " || displayElement.style.display === " " ) { displayElement.style.display = " block " ; textElement.innerHTML = " Hide paragraph " ; } else { displayElement.style.display = " none " ; textElement.innerHTML = " Show paragraph " ; } } let displayElement = document.getElementById ( " toggle - me " ) ; let textElement = document.getElementById ( " showhide " ) ; textElement.addEventListener ( " click " , function ( event ) { event.preventDefault ( ) ; changeDisplayState ( displayElement , textElement ) ; } ) ; </script> </body> </html>​​​​​​​​

DHTML no es una tecnología en sí misma, sino el resultado de tres tecnologías relacionadas y complementarias: HTML, hojas de estilo en cascada (CSS) y JavaScript . Para que los scripts y componentes puedan acceder a las funcionalidades de HTML y CSS, el contenido del documento se representa como objetos en un modelo de programación conocido como Modelo de Objetos del Documento (DOM).

La API DOM es la base de DHTML, ya que proporciona una interfaz estructurada que permite acceder y manipular prácticamente cualquier elemento del documento. Los elementos HTML del documento están disponibles como un árbol jerárquico de objetos individuales, lo que posibilita examinar y modificar un elemento y sus atributos mediante la lectura y configuración de propiedades, así como mediante la llamada a métodos. El texto entre elementos también está disponible a través de las propiedades y métodos del DOM.

El DOM también permite acceder a las acciones del usuario, como pulsar una tecla o hacer clic con el ratón. Es posible interceptar y procesar estos y otros eventos mediante la creación de funciones y rutinas de gestión de eventos . El gestor de eventos recibe el control cada vez que se produce un evento determinado y puede realizar cualquier acción apropiada, incluyendo el uso del DOM para modificar el documento.

Los estilos dinámicos son una característica clave de DHTML. Mediante CSS, se puede cambiar rápidamente la apariencia y el formato de los elementos de un documento sin necesidad de añadir ni eliminar elementos. Esto ayuda a mantener los documentos concisos y a que los scripts que los manipulan sean más rápidos.

El modelo de objetos proporciona acceso programático a los estilos. Esto significa que puede modificar los estilos en línea de elementos individuales y cambiar las reglas de estilo mediante programación JavaScript sencilla.

Los estilos en línea son asignaciones de estilo CSS que se aplican a un elemento mediante el atributo `style`. Puedes examinar y configurar estos estilos obteniendo el objeto `style` de cada elemento. Por ejemplo, para resaltar el texto de un encabezado cuando el usuario coloca el puntero del ratón sobre él, puedes usar el objeto `style` para aumentar el tamaño de la fuente y cambiar su color, como se muestra en el siguiente ejemplo sencillo.

< ! DOCTYPE html > < html lang = " en " > <head> < meta charset = " utf - 8 " > <title> Estilos dinámicos </title> <style> ul { display : none ; } </style> </head>​<body> < h1 id = "first-header " > Bienvenido a HTML dinámico </h1><p> <a id="clickable-link" href="#"> Los estilos dinámicos son una característica clave de DHTML . </a> </p>​​​< ul id = "unordered-list" > < li > Cambia el color, el tamaño y la tipografía del texto </ li > < li > Muestra y oculta el texto </ li > < li > Y mucho, mucho más </ li > </ ul >¡ Esto es solo el comienzo !<script> function showMe () { document.getElementById ( " first -header" ). style.color = " # 990000" ; document.getElementById ( " unordered - list" ) . style.display = " block " ; }document.getElementById ( " clickable -link" ) . addEventListener ( " click" , function ( event ) { event.preventDefault ( ) ; showMe ( ) ; } ) ; </script> </body> </html>

• Página web dinámica

• QuirksMode es un sitio web completo con ejemplos de prueba e instrucciones sobre cómo escribir código DHTML que se ejecute en varios navegadores.
• Tutorial introductorio de DHTML