HTML dinámico

HTML dinámico, o DHTML, es un término utilizado por algunos proveedores de navegadores para describir la combinación de HTML, hojas de estilo y secuencias de comandos del lado del cliente (JavaScript, VBScript, o cualquier otro script compatible) que permitió la creación de documentos interactivos y animados. Microsoft introdujo la aplicación de DHTML con el lanzamiento de Internet Explorer 4 en 1997.

DHTML permite que los lenguajes de secuencias de comandos cambien las variables en el lenguaje de definición de una página web, lo que a su vez afecta el aspecto y la función de lo que de otro modo sería "estático" Contenido de la página HTML después de que la página se haya cargado por completo y durante el proceso de visualización. Por lo tanto, la característica dinámica de DHTML es la forma en que funciona mientras se ve una página, no su capacidad para generar una página única con cada carga de página.

Por el contrario, una página web dinámica es un concepto más amplio que abarca cualquier página web generada de manera diferente para cada usuario, instancia de carga o valores de variables específicas. Esto incluye páginas creadas por secuencias de comandos del lado del cliente y aquellas creadas por secuencias de comandos del lado del servidor (como PHP, Python, JSP o ASP.NET) donde el servidor web genera contenido antes de enviarlo al cliente.

DHTML es el predecesor de Ajax y las páginas DHTML aún se basan en solicitudes/recargas. Bajo el modelo DHTML, no puede haber ninguna interacción entre el cliente y el servidor después de cargar la página; todo el procesamiento ocurre en el lado del cliente. Por el contrario, Ajax amplía las características de DHTML para permitir que la página inicie solicitudes de red (o 'subsolicitudes') al servidor incluso después de cargar 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 realmente se necesita.

Usos

DHTML permite a los autores agregar efectos a sus páginas que de otro modo serían difíciles de lograr, cambiando el modelo de objetos del documento (DOM) y el estilo de página. La combinación de HTML, CSS y JavaScript ofrece formas de:

• Animar texto e imágenes en su documento.
• Inserte un ticker u otra pantalla dinámica que refresque automáticamente su contenido con las últimas noticias, cotizaciones de acciones u otros datos.
• Utilice un formulario para capturar la entrada del usuario, y luego procesar, verificar y responder a esos datos sin tener que enviar los datos de vuelta al servidor.
• Incluye botones de redondeo o menús desplegables.

Un uso menos común es crear juegos de acción basados en navegador. Aunque se crearon varios juegos usando DHTML a fines de la década de 1990 y principios de la de 2000, las diferencias entre los navegadores lo dificultaron: se tuvieron que implementar muchas técnicas en el código para permitir que los juegos funcionaran en múltiples plataformas. Recientemente, los navegadores han estado convergiendo hacia los estándares web, lo que ha hecho que el diseño de juegos DHTML sea más viable. Esos juegos se pueden jugar en todos los principales navegadores y también se pueden transferir a Plasma para KDE, Widgets para macOS y Gadgets para Windows Vista, que se basan en código DHTML.

El término "DHTML" ha caído en desuso en los últimos años, ya que estaba asociado con prácticas y convenciones que tendían a no funcionar bien entre varios navegadores web.

La compatibilidad con DHTML con amplio acceso DOM se introdujo con Internet Explorer 4.0. Aunque había un sistema dinámico básico con Netscape Navigator 4.0, no todos los elementos HTML estaban representados en el DOM. Cuando las técnicas de estilo DHTML se generalizaron, los diversos grados de compatibilidad entre los navegadores web para las tecnologías involucradas dificultaron su desarrollo y depuración. El desarrollo se hizo más fácil cuando Internet Explorer 5.0+, Mozilla Firefox 2.0+ y Opera 7.0+ adoptaron un DOM compartido heredado de ECMAScript.

Más recientemente, las bibliotecas de JavaScript como jQuery han abstraído muchas de las dificultades cotidianas en la manipulación del DOM entre navegadores.

Estructura de una página web

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

¡Atención! DOCTYPE html.html lang="en"■.cabeza■ .meta charset="utf-8"■ .Título■Ejemplo DHTMLc)Título■c)cabeza■.cuerpo bgcolor="rojo"■ .script■ función init() {} Deja # Obj = documento.getElementById()"navegación"); //... manipular mi Obj } ventana.onload = init; c)script■ ¡Seguido! A menudo el código se almacena en un archivo externo; esto se hace vinculando el archivo que contiene el JavaScript. Esto es útil cuando varias páginas usan el mismo script: -- .script src="mi-javascript.js">script■c)cuerpo■c)html■

Ejemplo: mostrar un bloque de texto adicional

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 lo solicita.

¡Atención! DOCTYPE html.html■.cabeza■ .meta charset="utf-8"■ .Título■Utilizando una función DOMc)Título■ .estilo■ a {} fondo-color: #eee; } a:Hover {} antecedentes: #ff0; } #toggle Me {} antecedentes: #cfc; pantalla: ninguno; margen: 30px 0; padding: 1em; } c)estilo■c)cabeza■.cuerpo■ .h1■Utilizando una función DOMc)h1■ .h2■.a id="showhide" href="#■Mostrar párrafoc)a>h2■ .p id="toggle-me"■Este es el párrafo que sólo se muestra a petición.c)p■ .p■Continúa la corriente general del documento.c)p■ .script■ función Cambio()displayElement, texto Elemento) {} si ()displayElement.estilo.pantalla == "ninguno" Silencio displayElement.estilo.pantalla == ") {} displayElement.estilo.pantalla = "Block"; texto Elemento.interiorHTML = "Hide paragraph"; } más {} displayElement.estilo.pantalla = "ninguno"; texto Elemento.interiorHTML = "Mostrar párrafo"; } } Deja displayElement = documento.getElementById()"toggle-me"); Deja texto Elemento = documento.getElementById()"showhide"); texto Elemento.addEventListener()"clic", función ()e) {} e.preventDefault(); Cambio()displayElement, texto Elemento); }); c)script■c)cuerpo■c)html■

Modelo de objeto de documento

DHTML no es una tecnología en sí misma; más bien, es el producto de tres tecnologías relacionadas y complementarias: HTML, hojas de estilo en cascada (CSS) y JavaScript. Para permitir que los scripts y los componentes accedan a las funciones de HTML y CSS, el contenido del documento se representa como objetos en un modelo de programación conocido como Document Object Model (DOM).

La API DOM es la base de DHTML y proporciona una interfaz estructurada que permite el acceso y la manipulación de prácticamente cualquier elemento del documento. Los elementos HTML del documento están disponibles como un árbol jerárquico de objetos individuales, lo que permite examinar y modificar un elemento y sus atributos leyendo y configurando propiedades y llamando a métodos. El texto entre elementos también está disponible a través de propiedades y métodos DOM.

El DOM también brinda acceso a las acciones del usuario, como presionar una tecla y hacer clic con el mouse. Es posible interceptar y procesar estos y otros eventos creando funciones y rutinas de manejo de eventos. El controlador de eventos recibe el control cada vez que ocurre un evento determinado y puede llevar a cabo cualquier acción adecuada, incluido el uso del DOM para cambiar el documento.

Estilos dinámicos

Los estilos dinámicos son una característica clave de DHTML. Al usar CSS, uno puede cambiar rápidamente la apariencia y el formato de los elementos en un documento sin agregar o eliminar elementos. Esto ayuda a mantener los documentos pequeños y las secuencias de comandos que manipulan el documento rápido.

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

Los estilos en línea son asignaciones de estilo CSS que se han aplicado a un elemento mediante el atributo de estilo. Puede examinar y configurar estos estilos recuperando el objeto de estilo para un elemento individual. Por ejemplo, para resaltar el texto en un encabezado cuando el usuario mueve el puntero del mouse sobre él, puede usar el objeto de estilo para ampliar la fuente y cambiar su color, como se muestra en el siguiente ejemplo simple.

¡Atención! DOCTYPE html.html lang="en"■.cabeza■ .meta charset="utf-8"■ .Título■Estilos dinámicosc)Título■ .estilo■ ul {} pantalla: ninguno; } c)estilo■c)cabeza■.cuerpo■ .h1 id="Primera cabeza"■Bienvenido a Dynamic HTMLc)h1■ .p■.a id="link clicable" href="#■Los estilos dinámicos son una característica clave de DHTML.c)a>p■ .ul id="lista sin orden"■ .li■Cambiar el color, tamaño y tipografía del textoc)li■ .li■Mostrar y ocultar textoc)li■ .li■Y mucho, mucho másc)li■ c)ul■ .p■¡Acaba de empezar!c)p■ .script■ función showMe() {} documento.getElementById()"Primera cabeza").estilo.color = "#990000"; documento.getElementById()"lista sin orden").estilo.pantalla = "Block"; } documento.getElementById()"link clicable").addEventListener()"clic", función ()e) {} e.preventDefault(); showMe(); }); c)script■c)cuerpo■c)html■