Tutorial de HTML Dinámico

Autores:
Pedro Angel Castillo Valdivieso (pedro@geneura.ugr.es)
Fco. Javier García Castellano (fjgc@decsai.ugr.es)
 

1.- INTRODUCCION.

El lenguaje HTML no es suficiente para crear los documentos interactivos y multimedia que los sitios comerciales de hoy dia demandan (para hacerse una idea de lo que estoy hablando se puede echar un vistazo a www.doubleyou.com).

El manejo es una limitación obvia de HTML, ya que un documento estándar no puede especificar el nivel de pixel para acceder a la pagina. Otro problema añadido es que HTML crea páginas estáticas e inanimadas, es decir, una vez la página esta cargada en el navegador, permanece fija, no pudiendo ser modificado ni en forma ni en contenido. Esto limita la potencial interactividad de un formato multimedia, incluso utilizando un lenguage de script (JavaScript, VBScript, JScript), HTML duramente se puede aproximar a la interactividad de las aplicaciones multimedia.

Es por ello que apareció el HTML dinámico (Dynamic HTML -DHTML-) que ofrece a los creadores de páginas web la posibilidad de modificar, cambiar la apariencia, ocultar, mostrar y animar el contenido dinámicamente. DHTML se compone de:

  • posicionamiento de contenidos
  • hojas de estilo
  • fuentes cargables

Usado los anteriores elementos conjuntamente, obtenemos un mayor control sobre la apariencia, manejo y comportamiento de las páginas web. Las hojas de estilo permiten especificar atributos estilísticos de los elementos tipográficos de las páginas.Con el posicionamiento de contenidos, estás seguro de que cada componente será mostrado dentro de la página, exactamente donde deseas que aparezca, pudiendo modificar dinámicamente (después de cargada la página y mientras se visualiza) tanto la apariencia como la localización. Usando fuentes cargables, podemos estar seguros de que la página se vera con el aspecto (en cuanto a fuentes) con que se diseñó, ya que se especifica y se incluye la fuente de letra en el documento HTML. Así, el navegador que utilice el usuario final, utilizará la fuente con la que nosotros diseñamos la página, y no intentará hacerlo con la mas aproximada que tenga definida.


En esta parte del curso nos centraremos, sobre todo, en el manejo de bloques de contenido HTML y en el manejo y especificación de la posición de éstos

Independientemente del modo en que creemos los bloques posicionables (layers), podremos escribir scripts en JavaScript (JS) que los muevan, cambien su color y tamaño, cambien su contenido, los hagan visibles o invisibles...

También podremos usar JS para cambiar los contenidos visibles crear nuevos layers sobre la marcha, una vez que la página esté cargada.

Utilizando JS junto con layers, podemos definir animaciones directamente en la página web; podemos mover bloques por encima, por debajo, a través de otros; o bien hacerlos aparecer o desaparecer. Podemos hacerlos cambiar en tamaño o apariencia ante distintos eventos de ratón o teclado.

Navegadores: Navigator vs. Explorer

Los navegadores Netscape 4.0 (y superiores) e Internet Explorer 4.0 (y superiores) implementan el HTML dinámico, pero la creación de contenidos para ellos no es del todo compatible, en este tutorial nos centrarémos más en las características que aporta el navegador de Netscape que en el de Microsoft por varias razones:
    • La documentación es mejor y con menos errores
    • El Explorer sólo aporta ciertas cosas que no soporta el Navigator, y que no siempre funcionan como se indica en la documentación
    • Casi todo lo que funcione en el Netscape funcionará en el Explorer
    • El Navigator funciona en más plataformas que el Explorer (p.e. Linux)
 
Pedro Angel Castillo Valdivieso: pedro@geneura.ugr.es
Fco. Javier García Castellano: fjgc@decsai.ugr.es
Equipo GeNeura
Departamento de Arquitectura y Tecnología de los Computadores
Universidad de Granada
tlf: +34-58-243163
fax: +34-58-243230