Talleres Tcnicos

DHTML: Aplicaciones DHTML

Bueno! Ahora sabemos en qu consiste el DHTML, las tecnologas que implica y lo que significa DOM. Pero, cules son las aplicaciones concretas que puede esperar de todos esto? Cmo puede DHTML revolucionar sus pginas? Esta unidad le mostrar los campos fundamentales de aplicacin que DHTML ofrece. En este artculo: Animacin y efectos especiales Movimiento de objetos en una pgina DHTML y hojas de estilo DHTML y bsqueda y extraccin de datos

Este artculo PDF es parte de los servicios de Hosting Profesional de Lycos WebCenter. Para saber ms de Lycos WebCenter, por favor visita: http://webcenter.lycos.es

Copyright 2002 Lycos Espaa Internet Services, S.L. Todos los derechos reservados.

DHTML: Aplicaciones DHTML

Animacin y efectos especiales

Existen dos trminos increbles. El tipo de animaciones que DHTML permite y lo que est a punto de descubrir en nuestros talleres concierne principalmente las imgenes y su fondo de pgina. El objeto Document del DOM incluye una propiedad interesante: bgColor, que define el color del fondo de la pgina. Como tal vez ha podido ver, se puede cambiar de voleo el color del fondo de su pgina. Tan slo necesita el siguiente cdigo:
document.bgColor="#0000FF"

para obtener un fondo de pgina azul. Al igual que para las imgenes, se puede acceder a stos casi con la misma facilidad. Estn almacenados en una coleccin Images[] del objeto Document. Tambin se puede cambiar y desplazar a voluntad las imgenes.
Notas Objetos y colecciones Una coleccin es una estructura contenedora que tiene objetos del mismo tipos. Por ejemplo, la coleccin images de un objeto Document agrupa todas las imgenes incluidas en este documento. Para acceder a cualquier objeto especfico en esta coleccin, basta especificar el nombre de la coleccin seguido del ndice de posicin del objeto entre corchetes.

Al igual que para los efectos especiales, se les implementa en forma de filtros. El nico inconveniente que se debe tomar en consideracin al utilizarlos consiste en que slo Internet Explorer puede admitirlos. Dicho esto, todos los efectos difusos, de sombras y transparencias estn a su disposicin! En nuestros talleres mostraremos cmo utilizarlos.

Movimiento de objetos en una pgina

Como ya se ha dicho, DHTML permite mover inmediatamente los elementos de una pgina Web (imgenes, textos, conjuntos, subprogramas Java, etc.) sin tener que volver a cargar la pgina. Una vez ms, la manera en que Netscape y Microsoft implementan estas funciones difiere, tendremos entonces que desenvolvernos. Netscape propone una solucin propia mediante capas. Tan slo ponga los elementos que desee sobre una capa, mediante in cdigo HTML normal (con la etiqueta <LAYER>) y despus desplace la capa para mover los elementos contenidos en ella. Pese a que Internet Explorer no admita la implementacin de Netscape para las capas, ambos navegadores reconocen las etiquetas <DIV> y <SPAN> como delimitadores de capa. Las hojas de estilo sugieren el uso de las etiquetas <DIV> o <SPAN> para delimitar los elementos de pgina. As, la etiqueta <LAYER> y las etiquetas <DIV> o <SPAN> comparten el mismo principio de funcionamiento. Sirven para la misma finalidad y, desde el punto de vista DOM, estn representados de la misma manera. Sin embargo, no tienen el mismo nombre en el modelo de objeto. Examine estas dos instrucciones:
document.layers[layid].top = 150; // For Netscape (LAYERS) document.all[layid].top = 150; // For Internet Explorer

As, antes de volver a posicionar un elemento, debemos determinar el tipo de navegador para recurrir al cdigo adecuado.

Programa de Aprendizaje de Webmaster

2/3

DHTML: Aplicaciones DHTML

DHTML y hojas de estilo

Las hojas de estilo han facilitado indudablemente la creacin de pginas Web. Simplifican enormemente el formateo de una pgina y garantizan la coherencia y el equilibrio en este contexto. Como han sido incluidas en la especificacin del DOM e introducidas oficialmente con la versin CSS1, los navegadores de la cuarta generacin y ulteriores las admiten. Las hojas de estilo permiten formar bloques de datos (combinados con las etiquetas <DIV> y <SPAN>) y para mantener un mejor control de la presentacin de su pgina. Asociadas con DHTML, puede mover los bloques DIV y SPAN con una notoria precisin. Ya no necesita tablas: basta definir un bloque de un tamao fijo y posicionarlo. En algunos segundos y sin ningn esfuerzo especial, puede obtener entonces una presentacin sofisticada con bloques, columnas, etc. Por supuesto, todas las funciones de las hojas de estilo estn todava disponibles: definicin de mrgenes, eleccin de fuentes, distanciamiento y formato de vnculos de conformidad con su destino o el comportamiento del visitante en lugar de tener vnculos definidos de una vez por todas en la etiqueta <BODY>. Puede obtener estilos enteramente personalizados para todas sus pginas.

DHTML y bsqueda y extraccin de datos

A menudo, se utiliza DHTML para efectos visuales, pero tambin puede servir en un rea menos impresionante visualmente pero muy til: la bsqueda y extraccin de datos. Por ejemplo, puede presentar dinmicamente a los visitantes una tabla de datos variables de conformidad con su entrada. Una buena manera de hacer scripts CGI sin el lado del servidor, leyendo bases de datos cuando realmente no las necesita!

Programa de Aprendizaje de Webmaster

3/3