HTML dinámico , o DHTML , es un término que fue utilizado por algunos proveedores de navegadores para describir la combinación de HTML , hojas de estilo y scripts del lado del cliente ( JavaScript , VBScript o cualquier otro script compatible) que permitieron la creación de documentos interactivos y animados. [1] [2] La aplicación de DHTML fue introducida por Microsoft con el lanzamiento de Internet Explorer 4 en 1997. [3] [ ¿ fuente no confiable? ]
DHTML (HTML dinámico) permite que los lenguajes de programación, como JavaScript, modifiquen variables y elementos en la estructura de una página web, lo que a su vez afecta el aspecto, el comportamiento y la funcionalidad de un 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 es la forma en que funciona mientras se visualiza una página, no su capacidad de 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 forma diferente para cada usuario, ocurrencia de carga o valores de variables específicos. 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 contenido antes de enviarlo al cliente.
DHTML es el predecesor de Ajax y las páginas DHTML siguen basándose en solicitudes y recargas. Con el modelo DHTML, no puede haber ninguna interacción entre el cliente y el servidor después de que se carga la página; todo el procesamiento se realiza 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 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 necesaria.
DHTML permite a los autores agregar efectos a sus páginas que de otra manera serían difíciles de lograr, modificando el modelo de objetos del documento (DOM) y el estilo de la página. La combinación de HTML, CSS y JavaScript ofrece formas de:
Un uso menos común es la creación de juegos de acción basados en navegador. Aunque se crearon varios juegos utilizando DHTML a finales de la década de 1990 y principios de la década de 2000, [4] las diferencias entre navegadores dificultaron esta tarea: muchas técnicas tuvieron que implementarse en código para permitir que los juegos funcionaran en múltiples plataformas. Desde entonces, los navegadores han convergido hacia 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 navegadores principales y en aplicaciones de escritorio y dispositivos que admitan contextos de navegador integrados.
El término "DHTML" ha caído en desuso en los últimos años debido a que estaba asociado con prácticas y convenciones que tendían a no funcionar bien entre varios navegadores web. [5]
El soporte DHTML con amplio acceso al DOM se introdujo con Internet Explorer 4.0 . Aunque existí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 distintos grados de soporte entre los navegadores web para las tecnologías involucradas hicieron que fuera difícil desarrollarlas y depurarlas . 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 tarde, las bibliotecas de JavaScript como jQuery eliminaron muchas de las dificultades cotidianas en la manipulación del DOM entre navegadores, aunque un mejor cumplimiento de 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 vinculando 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 código siguiente ilustra una función que se utiliza con frecuencia. Solo se mostrará una parte adicional de una página web si el usuario la solicita.
<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title > Uso de una función DOM </ title > < style > a { background-color : #eee ; } a : hover { background : #ff0 ; } # toggleMe { background : #cfc ; display : none ; margin : 30 px 0 ; padding : 1 em ; } </ style > </ head > < body > < h1 > Uso de 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 pedido. </ 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 = " Ocultar párrafo" ; } else { displayElement.style.display = " none " ; textElement.innerHTML = " Mostrar párrafo" ; } } let displayElement = document.getElementById ( " toggle - me " ) ; let textElement = document.getElementById ( " showhide " ) ; textElement.addEventListener ( " click " , function ( evento ) { evento.preventDefault ( ) ; changeDisplayState ( displayElement , textElement ) ; } ) ; < / script > < / body > < / html > DHTML no es una tecnología en sí misma, sino 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 características de HTML y CSS, los contenidos del documento se representan como objetos en un modelo de programación conocido como el Modelo de objetos del documento (DOM).
La API DOM es la base de DHTML y 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 permite examinar y modificar un elemento y sus atributos mediante la lectura y configuración de propiedades y la invocación de métodos. El texto entre los elementos también está disponible a través de las propiedades y los métodos DOM.
El DOM también proporciona acceso a acciones del usuario, como presionar una tecla o hacer clic con el mouse. Es posible interceptar y procesar estos y otros eventos mediante la creación de funciones y rutinas de control 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.
Los estilos dinámicos son una característica clave de DHTML. Al usar CSS, se puede cambiar rápidamente la apariencia y el formato de los elementos de un documento sin agregar ni quitar elementos. Esto ayuda a mantener los documentos pequeños y a que los scripts que los manipulan sean rápidos.
El modelo de objetos proporciona acceso programático a los estilos. Esto significa que puedes cambiar los estilos en línea de elementos individuales y cambiar las reglas de estilo mediante programación JavaScript simple.
Los estilos en línea son asignaciones de estilos CSS que se han aplicado a un elemento mediante el atributo style. Puede examinar y configurar estos estilos recuperando el objeto style de un elemento individual. Por ejemplo, para resaltar el texto de un encabezado cuando el usuario mueve el puntero del mouse sobre él, puede utilizar el objeto style para agrandar la fuente y cambiar su color, como se muestra en el siguiente ejemplo simple.
<!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 > Cambiar el color, el tamaño y el tipo de letra del texto </ li > < li > Mostrar y ocultar texto </ li > < li > Y mucho, mucho más </ li > </ ul > < p > ¡Solo acabamos de empezar! </ p > < script > función showMe ( ) { documento.getElementById ( " primer-encabezado" ) . style.color = " # 990000 " ; documento.getElementById( " lista - desordenada" ). style.display = " bloque" ; } document.getElementById ( " enlace -clicable" ). addEventListener ( " clic " , function ( evento ) { event.preventDefault ( ) ; showMe ( ) ; } ) ; </script> </body> </html> 