DHTML: codificación web dinámica
DHTML significa reynamic HsipText METROArkup Lel lenguaje y se puede definir como el arte de hacer que las páginas web HTML sean dinámicas combinando HTML con Javascript y hojas de estilo en cascada (CSS). A diferencia de las otras cuatro variaciones HTML estudiadas en los cuatro artículos anteriores de esta serie, DHTML no es un estándar definido por el Consorcio W3. Más bien, es un "término de marketing utilizado por Netscape y Microsoft para describir las nuevas tecnologías que los navegadores de la generación 4.x admitirían" (Consorcio W3). HTML 4.0 introdujo por primera vez dos componentes importantes que son inherentes a la estructura de DHTML:
  • Hojas de estilo en cascada (CSS)
  • Modelos de objetos de documento (DOM)

Hacer tu código dinámico

CSS proporciona modelos de estilo y diseño, mientras que DOM proporciona modelos de contenido de documentos para documentos HTML. JavaScript y VBScript agregan la capacidad de escribir código de secuencias de comandos para controlar elementos HTML. En conjunto, estos tres componentes se suman a las páginas HTML dinámicas. Un disuasivo importante es la incompatibilidad del navegador: Netscape y Microsoft aún no han acordado qué implementar en sus navegadores: por lo tanto, escribir páginas DHTML que funcionen bien en ambos navegadores puede ser complicado. Para verlo usted mismo, puede acceder a los estándares de Microsoft y Netscape en línea:
  • Biblioteca MSDN en Microsoft
  • HTML dinámico en el comunicador de Netscape
"DHTML sobresale en la creación de efectos de bajo ancho de banda que mejoran la funcionalidad de una página web. Se puede usar para crear animaciones, juegos, aplicaciones, proporcionar nuevas formas de navegar a través de sitios web y crear diseños de página fuera de este mundo que simplemente no son No es posible con solo HTML. Aunque muchas de las características de DHTML pueden duplicarse con Flash o Java, DHTML proporciona una alternativa que no requiere complementos e incrustados sin problemas en una página web "(Dan Steinman, 1998).

Para comprender las complejidades de DHTML, es útil examinar sus componentes con más detalle.

Hojas de estilo en cascada

CSS son códigos sofisticados que separan el contenido web de la visualización web: el estilo, el posicionamiento, los colores, las fuentes, etc. El posicionamiento CSSP o CSS permite el control a nivel de píxeles sobre el posicionamiento de elementos HTML. La separación del estilo de presentación de los documentos web del contenido con CSS2 (CSS nivel 2) simplifica la creación web y el mantenimiento del sitio. "CSS2 admite hojas de estilo específicas de los medios para que los autores puedan adaptar la presentación de sus documentos a navegadores visuales, dispositivos auditivos, impresoras, dispositivos braille, dispositivos portátiles, etc. Esta especificación también admite posicionamiento de contenido, fuentes descargables, diseño de tabla, características para internacionalización, contadores automáticos y numeración, y algunas propiedades relacionadas con la interfaz de usuario "(Consorcio W3). El W3C ofrece un excelente tutorial para aprender CSS2 llamado, Especificación CSS2.

JavaScript

JavaScript es un lenguaje de script especial basado en navegador utilizado para controlar elementos HTML y agregar funcionalidad a formularios, marcos, ventanas, rollovers de imágenes, controles de audio y video y manipular DHTML. Netscape primero llamó a este JavaScript de secuencias de comandos, por lo que a Microsoft se le ocurrió el término, JScript, para su marca particular de secuencias de comandos. ¿El resultado? Dos versiones de JavaScript que pueden ser molestamente incompatibles. Para explorar más este problema, visite Netscape's JavaScript central y de Microsoft JScript página de recursos. El secreto de los efectos dinámicos del contenido JavaScripted es el uso de objetos de capa. Los objetos de capa hacen que el texto cambie cuando el mouse se desplaza sobre él; hace que las imágenes o el texto se muevan por la página web; También hace que los menús desplegables sean desplegables. Los objetos de capa se organizan en etiquetas div, con características definitorias como el color, la posición y la visibilidad.

Poniéndolos juntos

DHTML generalmente se aplica para lograr tres tareas:
  • Posición o colocar bloques de contenido en la página y moverlos
  • Modificaciones de estilo que cambian el aspecto de la página
  • Manejo de eventos o relacionar eventos del usuario con cambios en el posicionamiento u otras modificaciones de estilo
En las versiones más recientes de Internet Explorer y Netscape (versiones 5, 6 y posteriores), el DOM se está convirtiendo en el código de elección para la mayoría de la codificación DHTML. Una vez dominado, el DOM puede ayudar a los diseñadores web a manipular, agregar, eliminar y editar la codificación de documentos relacionados con todos los estilos, atributos (como un href) y elementos (como las etiquetas html) en la página. Eso significa que todas las etiquetas y atributos comunes a un documento html son accesibles a través del DOM. Actualmente, W3C recomienda los niveles de modelo de objeto de documento 0 y 1. El nivel 2 también está en proceso, pero aún no se ha promovido como estándar para la codificación DHTML.

Un grupo útil de tutoriales está disponible a través de HTML Goodies, llamado Tutorial de DHTML y Capa.

Los enlaces incluidos en este artículo ofrecen introducciones y procedimientos para comenzar su viaje en el dominio de este nuevo desarrollo en la codificación html.Cualquier búsqueda rápida en Google atraerá muchos más recursos, fácilmente disponibles a su alcance. A medida que los fabricantes de navegadores trabajan en su incompatibilidad y el uso de navegadores de versiones superiores se vuelve más común, DHTML se convertirá en una parte obligatoria del itinerario de cualquier diseñador profesional.

Serie de artículos destacados de HTML

PARTE 1: ¿Debe un diseñador creíble saber HTML?
PARTE 2: HTML 3.2 - El nacimiento de Wilbur
PARTE 3: HTML 4.0 y 4.01 - ¡Más de una buena cosa!
PARTE 4: XHTML: codificación web para diseño refinado
PARTE 5: DHTML: codificación web dinámica




Instrucciones De Vídeo: Como hacer un menu desplegable con HTML y CSS (Marzo 2024).