De Wikipedia, la enciclopedia libre
Saltar a navegación Saltar a búsqueda
HTML
Comparaciones

HTML dinámico , o DHTML , es una colección de tecnologías que se utilizan juntas para crear sitios web interactivos y animados mediante el uso de una combinación de un lenguaje de marcado estático (como HTML ), un lenguaje de scripting del lado del cliente (como JavaScript ), un lenguaje de definición de presentación. (como CSS ) y el Modelo de objetos de documento (DOM). [1] Microsoft introdujo la aplicación de DHTML con el lanzamiento de Internet Explorer 4 en 1997. En la actualidad, las referencias a JavaScript discreto La codificación (DOM Scripting) ha reemplazado el uso del término DHTML.

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 del contenido de la página HTML que de otro modo sería "estático", 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 visualiza 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 cubre cualquier página web generada de manera diferente para cada usuario, ocurrencia de carga o valores de variable específicos. Esto incluye páginas creadas por scripting del lado del cliente y las creadas por scripting del lado del servidor (como PHP , Python , JSP o ASP.NET ) donde el servidor web genera contenido antes de enviarlo al cliente.

DHTML se diferencia de Ajax por el hecho de que una página DHTML todavía se basa en solicitudes / recargas. Con DHTML, es posible que no haya interacción entre el cliente y el servidor después de que se cargue la página; todo el procesamiento ocurre en JavaScript en el lado del cliente. Por el contrario, una página Ajax utiliza características de DHTML para iniciar una solicitud (o 'subpesta') al servidor 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.

Usos [ editar ]

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 de documento (DOM) y el estilo de la 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 actualice 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 procese, verifique y responda a esos datos sin tener que enviar datos al servidor.
  • Incluya botones de rollover o menús desplegables.

Un uso menos común es crear juegos de acción basados ​​en navegador. Aunque varios juegos se crearon utilizando DHTML a finales de la década de 1990 y principios de la de 2000, las diferencias [ cita requerida ] entre los navegadores hicieron esto difícil: muchas técnicas tuvieron que implementarse en el código para permitir que los juegos funcionaran en múltiples plataformas. Recientemente, los navegadores han ido 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 navegadores principales y también se pueden migrar a Plasma para KDE , Widgets para macOS y Gadgets para Windows Vista , que se basan en código DHTML.

El término "DHTML" ha dejado de utilizarse 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. DHTML ahora puede denominarse codificación JavaScript discreta (DOM Scripting), en un esfuerzo por poner énfasis en las mejores prácticas acordadas al tiempo que permite efectos similares de una manera accesible y compatible con los estándares .

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 hicieron que fueran difíciles de desarrollar y depurar . 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 diarias en la manipulación de DOM entre navegadores.

Estructura de una página web [ editar ]

Ver también: eventos DOM

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 >  función  init ()  {  var  myObj  =  document . getElementById ( "navegación" );  // ... manipula la  ventana myObj }  . onload = init ; </ 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 = "myjavascript.js" > </ script >  </ body > </ html >

Ejemplo: Visualización de un bloque de texto adicional [ editar ]

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.

<! 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 ;  pantalla :  ninguna ;  margen:  30 px  0 ;  acolchado :  1 em ;  }  </ style >  </ head >  < body >  < h1 > Usando una función DOM </ h1 >  < H2 > < un  ID = "MostrarOcultar"  href = "#" > Mostrar el párrafo </ a > </ h2 >  < p  id = "toggleMe" > 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 ( id )  {  var  d  =  document . getElementById ( 'showhide' ),  e  =  documento . getElementById ( id );  if  ( e . style . display  ===  'none'  ||  e . style . display  ===  '' )  {  e . estilo . display  =  'bloquear';  d . innerHTML  =  'Ocultar párrafo' ;  }  más  {  e . estilo . display  =  'ninguno' ;  d . innerHTML  =  'Mostrar párrafo' ;  }  }  documento . getElementById ( 'mostrar ocultar' ). addEventListener ( 'clic' ,  función  ( e )  {  e . preventDefault ();  changeDisplayState ( 'toggleMe' ); });  </ script >  </ body > </ html >

Modelo de objeto de documento [ editar ]

Artículo principal: Modelo de objetos 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 componentes accedan a 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).

DOM API es la base de DHTML, proporcionando 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 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 [ editar ]

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 quitar elementos. Esto ayuda a mantener los documentos pequeños y las secuencias de comandos 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 las reglas de estilo utilizando una programación de 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 en un encabezado cuando el usuario mueve el puntero del mouse sobre él, puede usar el objeto de estilo 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 = "firstHeader" > Bienvenido a HTML dinámico </ h1 > < P > < un  ID = "clickableLink"  href = "#" > estilos dinámicos son una característica clave de DHTML. </ a > </ p > < ul  id = "unorderedList" >  < li > Cambiar el color, el tamaño y el tipo de letra del texto </ li >  < li > Mostrar y ocultar el texto </ li >  < li > Y mucho, mucho más </ li >  </ ul > < p > ¡Acabamos de empezar! </ p > < script >  función  showMe ()  {  documento . getElementById ( "firstHeader" ). estilo . color  =  "# 990000" ;  documento . getElementById ( "unorderedList" ). estilo . display  =  "bloque" ;  } documento . getElementById ( "clickableLink" ). addEventListener ( "clic" ,  función  ( e )  {  e . preventDefault ();  showMe ();  });  </ script >  </ body > </ html >

Ver también [ editar ]

  • Página web dinámica

Referencias [ editar ]

  1. ^ "Hojas de estilo web" . www.w3.org . Consultado el 7 de abril de 2018 .

External links[edit]

  • QuirksMode, a comprehensive site with test examples and instructions on how to write DHTML code which runs on several browsers.
  • Introductory DHTML Tutorial