HTMLpointHTMLpoint HTMLpoint.com


 Texto enteractivo con DHTML 1/2

 por Massimiliano Valente

HTML dinámico, gracias al uso conjunto de CSS (Cascading Style Sheet), script y código HTML, permite crear páginas web interactivas mediante los denominados estilos dinámicos. En la práctica, ello significa que los elaboradores de páginas web tienen, gracias a estas nuevas especificaciones, la posibilidad de modificar el aspecto de un documento sin que éste vuelva a cargarse.

Un uso especialmente interesante de los estilos denámicos es el que consiente la creación de sumarios expansibles, que, según la elección efectuada, se expone o esconde a la vista del navegador. Uno de los ejemplos más claros de dicha estructura puede verse en la portada de Microsoft.

El modelo de estilo dinámico considerado en los ejemplos de este artículo es compatible exclusivamente con MS Internet Explorer 4, mientras que Netscape ha recorrido un camino deverso adoptando el modelo JASS (JavaScript Accesible Style Sheets). Dicha incompatibilidad es el mayor freno al desarrollo de DHTML por los creadores de páginas web, que toleran malamente la idea de crear sitios dinámicos que discrimenen el acceso de los usuarios de uno u otro navegador.

Los estilos dinámicos permiten a los elaboradores hacer visible inicialmente sólo una parte del documento, con la posibilidad, mediante la definición de elementos y clases en DHTML, de expandir la estructura y visualizar su contenido de modo analítico.

El código que figura a continuación es un ejemplo muy sencillo de dicha estructura:


Muestra el ejemplo práctico


En este ejemplo se crean tres clases: fijo, expansible y vacío.

La clase "fijo" establece los elementos que, una vez pulsados, cambian de aspecto la estructura y se asocia al atributo child. Este último contiene el ID de los datos que hay que esconder o mostrar e identifica, de manera unívoca, los elementos de este tipo dentro de la estructura.

En nuestro caso específico, la clase "fjo" determina, además del color azul del texto, el tipo de cursor que tendrá el ratón cuando se encuentre encima de un elemento de la mencionada clase.

Cuando se hace clic en el elemento "fijo", el nombre de clase de los datos cambia de "vacío" a "expansible", o viceversa, produciendo el efecto deseado.

Los SCRIPT indican al navegador cómo interpretar la información presente en una página web. De esta manera, en relación con el marcado presente entre <SCRIPT></SCRIPT>, el navegador delega en el autor la gestión de los eventos del documento. En el momento en que el navegador lee, medeante un procedimiento particular denominado de "parser", el marcado del documento y encuentra <SCRIPT>, pasa el contenido al elaborador de script, para continuar después con la interpretación del resto de la página.

Los navegadores que no soportan la gestión de script ignoran todo lo comprendido entre <SCRIPT></SCRIPT>


  Vuelve a principio de página