2. Multimedia Inline

Hasta hace muy poco el único sistema disponible en el WWW para incluir contenido multimedia era usar archivos externos como acabamos de ver. Sin embargo gracias a las iniciativas de Microsoft y Netscape están apareciendo nuevas etiquetas y atributos del lenguaje HTML junto con nuevas técnicas que permiten al diseñador de páginas Web incluir dicho contenido en una página.

2.1. Vídeo inline

Uno de los primeros mecanismos fue introducido en Microsoft Internet Explorer. Este navegador incluye extensiones a la etiqueta IMG que permiten insertar vídeo con formato AVI. Estas extensiones han sido adoptadas también por el navegador Opera, pero por ningún otro, y tampoco por el estándar HTML 4.0 pero al ser ignorado por los navegadores que no lo soportan no impide la legibilidad de la página para los usuarios de estos.

La extensión en la que se basa la inclusión de vídeo inline es el atributo DYNSRC. Este atributo se usa de manera muy similar al ya conocido SRC, pero ahora el valor deberá ser la dirección de un vídeo en formato AVI en lugar de una imagen. Una de las grandes ventajas de este sistema para insertar vídeo consiste en la posibilidad (de hecho es obligatorio) de usar simultáneamente los dos atributos mencionados, SRC y DYNSRC, de manera que si el navegador soporta la inclusión de vídeo en la página mostrará el vídeo y en caso contrario mostrará la imagen. Veamos un ejemplo:

	<IMG DYNSRC="baile.avi"
	  SRC="baile.gif"
	  ALT="[Un baile]">

      

También es posible usar el resto de atributos de la etiqueta IMG como ALIGN, VSPACE, HSPACE, WIDTH, HEIGHT, etc. Pero además de estos, Microsoft introdujo otros nuevos como acompañamiento del atributo DYNSRC y que nos permitirán tener un mayor control sobre el vídeo, estos son:

2.2. El atributo LOWSRC

Este atributo es una extensión de Netscape a la etiqueta IMG. Su función es ofrecer la posibilidad al programador de especificar una segunda imagen, junto con la indicada con SRC, que sirva de previsualización de la imagen final. Esta previsualización suele ser la misma imagen pero con peor calidad, por ejemplo en formato JPEG con alto grado de compresión, y de mucho menor tamaño. De esta forma cargará mucho antes y el navegante podrá hacerse una idea de cómo será la imagen completa antes de que esta llegue:

	<IMG SRC="alta_calidad.gif"
	  LOWSRC="baja_calidad.gif">

      

Los navegadores que no entiendan esta etiqueta simplemente la ignorarán, y no mostrarán nada hasta que la imagen de alta calidad llegue, exactamente igual que si no hubiéramos usado LOWSRC. Por tanto podemos concluir que este atributo no causa ningún prejuicio para los usuarios de dichos navegadores. LOWSRC no ha sido aceptado por el estándar HTML 4.0.

2.2.1. Animaciones usando LOWSRC

Pronto los diseñadores de páginas Web se dieron cuenta que podían usar el atributo LOWSRC para algo más que para mostrar una previsualización de la imagen. Existen varios Webs que destacan por su excepcional diseño que se sirven de este atributo para crear una sencilla animación formada únicamente por dos imágenes. Un excelente ejemplo de este efecto puede ser visto en la página creada por Josh Feldman que encontramos en la dirección:

En esta página se usa el atributo LOWSRC para mostrar una imagen de un sobre cerrado y SRC para mostrar ese mismo sobre de fondo pero en primera instancia la carta ya abierta. En la figura 10.7 podemos ver la página tal y como aparece inicialmente con el sobre cerrado (imagen LOWSRC) y la carta final abierta que es mostrada pocos segundos después.

Figura 10.7. Usando el atributo LOWSRC se pueden crear animaciones sencillas pero impactantes como es el caso del web de Spectacle.

2.3. Sonidos Inline

Microsoft Internet Explorer también ha introducido una nueva etiqueta para posibilitar la inclusión de sonido en las páginas Web. Este sonido será cargado junto con la página y empezará a ser tocado sin requerir ninguna acción por parte del usuario. Para incluir un sonido de fondo como éste debemos usar la etiqueta BGSOUND. Veamos un ejemplo:

	<BGSOUND SRC="sinfonia_5.au">

      

Esta etiqueta no producirá ningún efecto visual en la página, simplemente si empezará a reproducirse el sonido de fondo. Los usuarios de otros navegadores no serán perjudicados por la inclusión de este atributo, simplemente no podrán oír el sonido.

El resto de atributos son:

Nota

Es muy importante no poner un sonido que pueda resultar molesto a los visitantes de nuestras páginas, ya que con ello conseguiremos que las abandonen rápidamente para dejar de oírlo.

Microsoft Internet Explorer soporta tres formatos de sonido inline:

Hay que tener mucho cuidado a la hora de incluir sonidos en nuestras páginas, ya que en general este tipo de ficheros son de gran tamaño y pueden incrementar enormemente el tiempo de carga. Por otro lado no es recomendable que sea reproducido más de una vez, ya que la repetición cansará a los visitantes.

Nota

En el directorio Sonido hemos incluido un ejemplo (sonido1.htm) que usa la etiqueta BGSOUND para reproducir como sonido de fondo un archivo en formato MIDI.

Al igual que ocurría con las extensiones para vídeo de Microsoft la etiqueta BGSOUND no es soportada por ningún otro navegador y tampoco ha sido aceptado por el estándar HTML 4.0. Sin embargo existe otro método que veremos un poco más adelante mucho más extendido basado en PLUG-INs y en una etiqueta llamada EMBED.

2.4. 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:

Figura 10.8. La marquesina animada muestra un texto que va moviéndose de derecha a izquierda en la ventana del navegador. En esta figura vemos 7 momentos consecutivos.

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>

      

Nota

Internet Explorer 3.0 ignora todo el código HTML existente entre la instrucción de inicio, <MARQUEE>, y la instrucción de fin, </MARQUEE>. Sin embargo en Internet Explorer 4.0 esta política ha cambiado y es posible usar las etiquetas formateadoras de texto o saltos de línea en su interior. Por esta razón debemos tener en cuenta que si usamos estas nuevas posibilidades los usuarios de Internet Explorer 3.0 (que son muchos) no podrán apreciar el formato del texto.

2.4.1. 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:

  • BGCOLOR: Especificando un color en código RGB (#RRGGBB) o por nombre (blue, red, etc.) cambiaremos el color de fondo de la marquesina.

  • HEIGHT y WIDTH: Determinan la altura y anchura respectivamente de la marquesina. Ambos atributos pueden tomar un valor en pixeles o bien como porcentaje de la ventana del navegador. Por ejemplo HEIGHT="50%" provocará que la marquesina tenga una altura mitad de la de la ventana del navegador. Estos atributos no afectan al tamaño del texto.

  • HSPACE y VSPACE: Determinan los márgenes entre los bordes de la marquesina y el texto u otros elementos de la página. HSPACE determina el margen a cualquiera de los lados y VSPACE los márgenes superior e inferior.

  • ALIGN: Este atributo controla el alineamiento vertical del texto que bordea la marquesina. Puede tomar cinco valores diferentes: ALIGN="top" (arriba), ALIGN="middle" (centro), ALIGN="bottom" (abajo), ALIGN="left" (izquierda) ALIGN="right" (derecha) que tienen un comportamiento idéntico al que tenían con las imágenes. Este atributo no modifica la posición del texto en el interior de la marquesina, ya que este esta siempre en la parte superior.

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:

Figura 10.9. La etiqueta MARQUEE está acompañada de numerosos atributos que nos permiten controlar la apariencia de la marquesina.

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

2.4.2. 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:

  • BEHAVIOR: Este atributo nos permite cambiar el comportamiento del texto y puede tomar tres valores. BEHAVIOR="scroll" es el valor por defecto y consiste en el efecto de desaparecer por un lado y aparecer por el otro. Si usamos BEHAVIOR="slide" el texto tiene un comportamiento similar pero para en cuanto llega al borde derecho. La última opción es BEHAVIOR="alternate", en este caso el texto aparecerá igualmente por la derecha, pero una vez llegue al borde izquierdo rebotará y volverá hacia la derecha donde volverá a rebotar repitiendo este comportamiento indefinidamente. Los ejemplos 5 y 6 de la página de ejemplos marquee.htm muestran estas dos últimas posibilidades.

  • DIRECTION: Con este atributo podemos controlar la dirección de desplazamiento del texto cuando este es de tipo SCROLL. Puede tomar dos valores: LEFT (izquierda) y RIGHT (derecha) siendo el primero el valor por defecto (movimiento de derecha a izquierda). En el ejemplo 7 del archivo antes mencionado podemos ver un ejemplo de este atributo.

  • LOOP: Determina cuantas veces se repetirá el desplazamiento del texto por la pantalla. Por ejemplo con SCROLL="4" el texto se desplazará por la pantalla únicamente 4 veces, mientras que si usamos SCROLL="-1" o bien SCROLL="infinity" seguirá desplazándose indefinidamente.

  • SCROLLAMOUNT: Aunque haya sensación de movimiento el texto se desplaza a pequeños saltos. Este atributo determina el número de pixeles que debe desplazarse el texto en cada uno de ellos. Junto con el siguiente atributo podemos controlar la velocidad del movimiento. Si ponemos un valor alto el texto se moverá más rápidamente pero con saltos más bruscos (ejemplos 8 y 9).

  • SCOLLDELAY: Determina el tiempo de espera entre cada uno de los saltos. Este tiempo debe estar dado en milisegundos. Valores mayores también provocan mayor rapidez y brusquedad. Experimentando con SCROLLAMOUNT y SCROLLDELAY encontraremos la combinación con la que satisfacemos nuestras necesidades de velocidad y suavidad de desplazamiento (ejemplos 10 y 11).

2.5. 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.

2.6. 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:

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:

Figura 10.10. Internet Explorer 4.0 incluye una serie de nuevas tecnologías entre las que destacan los nuevos controles multimedia.

en la dirección:

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