Curso completo de HTML - Multimedia Inline (I)

Marquesinas animadas

Cuando de HTML se trata, una marquesina animada consiste en una línea de texto que se desplaza por la pantalla de izquierda a derecha, de derecha a izquierda o en ambas direcciones alternativamente. La etiqueta específica de Internet Explorer MARQUEE nos permitirá crear este tipo de marquesina con gran facilidad y rapidez. No serán necesarias imágenes ni vídeos. Tal y como ocurría con las dos extensiones que acabamos de ver, la etiqueta MARQUEE sigue siendo específica de Explorer y no es soportada por ningún otro navegador ni ha sido aceptada por el estándar HTML 4.0

El funcionamiento de esta etiqueta es muy sencillo, consta de una instrucción de inicio y otra de fin, entre ellas debemos escribir el texto que queremos que se desplace. Por ejemplo:

 <MARQUEE>
  Me estoy moviendo
  </MARQUEE>
 
       

Si visualizamos este código con Internet Explorerveremos aparecer el texto "Me estoy moviendo" por la derecha de la pantalla y desplazarse hacia la izquierda hasta llegar al borde izquierdo de la pantalla. Entonces volvería a aparecer de nuevo por la derecha y así indefinidamente. Es difícil plasmar con una figura el movimiento de la marquesina, por esta razón hemos incluido todos los ejemplos de esta sección en el en el archivo marquee.htm. Además en la figura 10.8 hemos capturado una página con este código en siete instantes de tiempo consecutivos para que el lector pueda hacerse una idea del funcionamiento de la marquesina animada:

El texto de una marquesina se sitúa siempre en una nueva línea, y el es mostrado con las mismas características que sería cualquier texto normal de la página, por ello podemos usar las etiquetas para formatear texto que conocemos para cambiar el formato del texto de una marquesina. Por ejemplo para conseguir un encabezado de tamaño 1 moviéndose podríamos usar:

 <H1>
  <MARQUEE>
  Me estoy moviendo
  </MARQUEE>
  </H1>
 
       

Igualmente podemos cambiar el color o el tipo de fuente del texto encerrando la marquesina con la etiqueta FONT:

 <FONT COLOR="#FF0000"
    FACE="arial"
    SIZE="4">
  <MARQUEE>
  Me estoy moviendo
  </MARQUEE>
  </FONT>
 
       

Cómo cambiar la apariencia

Además de estos métodos la propia etiqueta MARQUEE consta de una serie de atributos que nos permitirán cambiar su apariencia:

Una vez vistos estos atributos nos queda por hacer un ejemplo que los use. Nuestro objetivo será crear una marquesina con el fondo rojo, que ocupe una anchura mitad de la pantalla y esté alineado a la derecha. El código que debemos usar es:

   <H1>
    <MARQUEE ALIGN="RIGHT"
      BGCOLOR="#FF0000"
      HEIGHT="20%"
      WIDTH="50%">
    Gran oferta del MES: Un Mercedes a precio de coste
    </MARQUEE>
    </H1>
 
  

En la figura 10.9 podemos ver el resultado obtenido:

Para una mejor apreciación es recomendable visualizarlo con Internet Explorer por lo que este ejemplo está incluido en el directorio Ejemplo4 (ejemplo 4).

Cómo cambiar el comportamiento

Como hemos comentado antes, cuando creamos una marquesina el texto se desplaza de derecha a izquierda desapareciendo totalmente antes de volver a mostrarse por la derecha. Este efecto continúa indefinidamente lo suficientemente despacio para posibilitar su lectura. Este comportamiento, dirección, número de repeticiones y velocidad de movimiento puede ser modificado con 5 atributos de la etiqueta MARQUEE:

Texto que parpadea

Junto con el navegador Navigator 1.0, Netscape introdujo una extensión al lenguaje HTML que permite insertar texto que parpadea. Esta extensión consiste en una única etiqueta: BLINK. Su funcionamiento es simple, todo el texto que introduzcamos entre la instrucción de inicio y la instrucción de fin parpadeará. Por ejemplo:

 <BLINK>
  Este texto parpadea
  </BLINK>
 
       

En el WWW encontramos en numerosas ocasiones con esta etiqueta siendo usada en general para llamar la atención. El problema de BLINK es que resalta demasiado. Como hace que el texto parpadeante atraiga la atención y el parpadeo es continuo (no para en ningún momento) puede provocar distracción y provocar que los navegantes no se fijen en nada más de nuestra página.

La gran mayoría de diseñadores Web desaconsejan encarecidamente el uso esta etiqueta porque muchos navegantes lo consideran muy molesto. De hecho en el WWW se dice habitualmente que la etiqueta BLINK es el equivalente informático a rallar una pizarra con las uñas.

Si lo que queremos es resaltar una frase es recomendable usar las etiquetas de HTML pensadas para ello, aparte, si queremos podemos usar BLINK, pero así nos estaremos asegurando que la frase aparecerá resaltada (aunque no parpadee) en todos los navegadores.

Controles multimedia

Con Internet Explorer 4.0, Microsoft ha introducido un conjunto de controles multimedia que permiten insertar gráficos y efectos multimedia a las página Web. Entre estos controles destacan:

• Behaviors: Comportamientos especiales de los controles y otros elementos de la página.

• Effects: Aplica un filtro gráfico a cualquier elemento de una página.

• Hot Spot: Permite especificar acciones a realizar al pulsar en diferentes zonas de la ventana del navegador.

• Mixer: Mezcla varios ficheros de sonido WAV.

• Path: Permite crear movimiento de objetos por un camino establecido.

• Sequencer: Facilita el control del tiempo en los eventos de nuestra página.

• Sprite: Sirve para crear animaciones.

• Sprite Buttons: Para crear botones animados.

• Structured Graphics: Permite incluir en la página gráficos que pueden ser cambiados de tamaño y rotados por el navegante.

El uso de estos controles puede ser algo complicado y se sale fuera de los objetivos de este curso. Microsoft ha creado una página dedicada a las nuevas tecnologías de Internet Explorer 4.0, de la cual podemos ver una muestra en la figura 10.10:

en la dirección:

• www.microsoft.com/sitebuilder/workshop/prog/ie4/

dónde podemos encontrar amplia información. Para un tutorial concreto sobre estos controles podemos acceder a:

• www.microsoft.com/workshop/prog/ie4/directani/directani.htm