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 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] La aplicación de DHTML fue introducida por Microsoft con el lanzamiento de Internet Explorer 4 en 1997. [3] [ ¿ fuente no confiable? ]
DHTML permite que los lenguajes de secuencias de comandos cambien variables en el lenguaje de definición de una página web, lo que a su vez afecta la apariencia y la función del contenido de la página HTML, que de otro modo sería "estático", después de que la página se ha cargado por completo y durante el proceso de visualización. Por tanto, la característica dinámica de DHTML es la forma en que funciona mientras se visualiza una página, no en 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 cubre cualquier página web generada de manera diferente para cada usuario, ocurrencia de carga o valores de variables específicos. Esto incluye páginas creadas mediante secuencias de comandos del lado del cliente y aquellas creadas mediante 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 todavía se basan en solicitudes/recargas. Según el modelo DHTML, es posible que no haya 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 funciones de DHTML para permitir que la página inicie solicitudes de red (o 'subsolicitud') 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 sea realmente necesario.
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 la página. La combinación de HTML, CSS y JavaScript ofrece formas de:
Un uso menos común es crear juegos de acción basados en navegador. Aunque varios juegos se crearon utilizando DHTML a finales de los años 1990 y principios de los 2000, [4] las diferencias entre los navegadores dificultaron esto: muchas técnicas tuvieron que implementarse en el código para permitir que los juegos funcionaran en múltiples plataformas. Desde entonces, los navegadores han convergido hacia los estándares web , lo que ha hecho más viable el diseño de juegos DHTML. Estos juegos se pueden jugar en todos los principales navegadores 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 porque se asociaba con prácticas y convenciones que tendían a no funcionar bien entre varios navegadores web. [5]
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 distintos grados de soporte entre los navegadores web para las tecnologías involucradas hicieron que fuera difícil desarrollarlas y depurarlas . El desarrollo se volvió 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 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 DHTML </ title > </ head > < body bgcolor = "red" > < script > function init () { let myObj = documento . getElementById ( "navegación" ); //... manipular myObj } ventana . cargar = inicio ; </ script > <!-- A menudo el código se almacena en un archivo externo; esto se hace vinculando el archivo que contiene 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 sólo se mostrará si el usuario lo solicita.
<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title > Usando una función DOM </ title > < style > a { background-color : #eee ; } a : flotar { fondo : #ff0 ; } # alternarme { fondo : #cfc ; pantalla : ninguna ; margen : 30 px 0 ; relleno : 1 em ; } </ 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 pedido. </p> _ _ < p > El flujo general del documento continúa. </p> _ _ < script > función changeDisplayState ( displayElement , textElement ) { if ( displayElement . style . display === "none" || displayElement . style . display === "" ) { displayElement . estilo . mostrar = "bloque" ; elemento de texto . InnerHTML = "Ocultar párrafo" ; } más { displayElement . estilo . mostrar = "ninguno" ; elemento de texto . insideHTML = "Mostrar párrafo" ; } } let displayElement = documento . getElementById ( "alternarme" ); let textElement = documento . getElementById ( "mostrarocultar" ); elemento de texto . addEventListener ( "hacer clic" , función ( evento ) { evento . preventDefault (); changeDisplayState ( displayElement , textElement ); }); </script> </body> </html> _ _ _ _ _ _ DHTML no es una tecnología en sí misma; más bien, es producto de tres tecnologías relacionadas y complementarias: HTML, hojas de estilo en cascada (CSS) y JavaScript . Para permitir que los scripts y 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 Modelo de objetos de documento (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 cosa en el 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 proporciona acceso a 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 apropiada, incluido el uso del DOM para cambiar el documento.
Los estilos dinámicos son una característica clave de DHTML. Al utilizar CSS, se puede cambiar rápidamente la apariencia y el formato de los elementos de un documento sin agregar ni eliminar elementos. Esto ayuda a mantener los documentos pequeños y los scripts que manipulan el documento rápidamente.
El modelo de objetos proporciona acceso programático a los estilos. Esto significa que puede cambiar estilos en línea en elementos individuales y cambiar 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 establecer estos estilos recuperando el objeto de estilo de un elemento individual. Por ejemplo, para resaltar el texto de 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.
<!DOCTYPE html> < html lang = "es" > < head > < meta charset = "utf-8" > < title > Estilos dinámicos </ title > < style > ul { display : none ; } </estilo> </cabeza> < 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, tamaño y tipo de letra del texto </ li > < li > Mostrar y ocultar texto </ li > < li > Y mucho, mucho más </ li > </ul> _ _ < p > ¡Apenas hemos comenzado! </p> _ _ < script > función mostrarme () { documento . getElementById ( "primer encabezado" ). estilo . color = "#990000" ; documento . getElementById ( "lista desordenada" ). estilo . mostrar = "bloque" ; } documento . getElementById ( "enlace en el que se puede hacer clic" ). addEventListener ( "hacer clic" , función ( evento ) { evento . preventDefault (); showMe (); }); </script> </body> </html> 