Multimedia

Uno de los recursos más atractivos que ofrece el HTML es que permite incluir elementos gráficos y sonoros que enriquecen la información. Ahora bien, tanto unos como otros suelen emplear bastante tiempo en descargarse completamente, por lo que habrá que manejarlos con prudencia y recurrir a las técnicas necesarias para minimizar su tamaño.  

Imágenes

A lo largo de las páginas precedentes han ido apareciendo referencias a la inclusión de imágenes en las páginas HTML. De hecho podemos dar por sabido el procedimiento básico para insertar una imagen. Veremos pues el tipo de imágenes que podemos utilizar y algun truquillo para acelerar la carga de las páginas. 

Los formatos que actualmente soportan los navegadores son los archivos GIF y los JPG. Una descripción pormenorizada de sus propiedades y la forma de trabajar con ellos para obtener los mejores resultados serían materia de un curso específico, por lo que nos limitaremos a decir que, mientras que el formato GIF es adecuado para imágenes con un máximo de 256 colores y con predominio de los colores planos, el formato JPG ofrece mejores resultados con imágenes de 16 millones de colores y variación tonal continua. 

Una característica añadida del formato GIF es que permite definir colores transparentes, con lo que las siluetas del dibujo quedarán recortadas sobre el fondo. También se utiliza para crear pequeñas animaciones, aunque hay que señalar que éstas pueden llegar a resultar bastante molestas. 

  

Práctica 11

  • Salva en tu disco las tres imágenes siguientes con el procedimiento que ya conoces. 
  • Crea un documento nuevo y construye una tabla de una fila y tres columnas. 
  • Incluye en cada celda una de las imágenes fijándote en cual pones las imágenes gif y en cual está la jpg. Pasa al navegador guardando el trabajo como ej11.htm 
  • Comprueba la diferencia en la calidad de las dos fotos según el formato. 
  • Vuelve al editor y modifica el tamaño de las fotos reduciendo el ancho y el alto a la mitad en una de ellas y pasando al doble en la otra. También puedes modificar en una de ellas el espacio a izquierda y derecha poniendo, por ejemplo 50 pixels. 
  • Pasa al navegador para ver el efecto. 
  • Vuelve al editor y escribe un texto junto a una de la imágenes. Experimenta con diferentes alineaciones del texto con respecto a ella. 
  • Salva el trabajo con el mismo nombre. 
 
 
Es importante que las imágenes que incluyamos en nuestras páginas lleven el atributo de tamaño (Netscape lo hace de forma automática), ya que de esta forma el navegador sabrá el espacio que debe adjudicarle a la imagen y podrá ir cargando el resto del texto. Si la imagen no llevara los atributos de ancho y alto la carga del resto del documento se detendría hasta que la imagen se hubiera recibido completamente. 

Con respecto a las modificaciones del tamaño original no tienen una especial utilidad: si agrandamos la imagen perdemos calidad y si la empequeñecemos no disminuimos el tamaño del fichero, que se sigue descargando íntegro, sino que le indicamos al navegador que ajuste la imagen al tamaño especificado. Si queremos presentar un icono que sirva de enlace para poder ver una imagen de gran tamaño es preferible que editemos la imagen original y construyamos una versión reducida de la misma, ya que de esa forma sí que modificamos el espacio que ocupa y aceleramos la descarga. 

  

El sonido

También disponemos de dos formatos de sonido directamente legibles por los navegadores: el formato midi (archivos con extensión .mid) y el formato de onda (archivos con extensión .wav). 

Los archivos midi están basados en partituras en las que se indica el tono y duración de cada una de las notas, así como el instrumento que interpreta cada pista. Su característica principal es el escaso espacio que ocupan en comparación con la información que incluyen. Resultan adecuados, pues, para incorporar pasajes musicales. 

Dado que los archivos midi se basan en partituras tienen la ventaja de poder crearse y modificarse con facilidad si se tienen nociones de música. Presentan, en cambio, el inconveniente de que la calidad de la reproducción dependerá de la tarjeta de sonido con la que se escuchen, ya que si esta es de escasa calidad los timbres de los instrumentos se asemejaran poco al sonido real. 

En los archivos de formato wav invertimos los términos: son muy extensos porque se basan en la digitalización directa de una fuente de sonido. Además, no dependen demasiado de la calidad de la tarjeta de sonido en que se reproducen y no resultan adecuados para fragmentos musicales largos, sino para efectos especiales y voz. (Siempre habrá que procurar utilizar fragmentos breves debido a su gran extensión). 

Sea cual sea el formato que utilicemos el factor principal a tener en cuenta será la extensión de los archivos. Independientemente de que el equipo con el que elaboremos las páginas de la revista sea muy potente, nunca podemos saber con que equipo y, sobre todo, con qué tipo de modem accederán a nuestra página los futuros visitantes y... una página que tarda mucho en cargarse no suele incorporarse a la libreta de marcadores y es difícil que vuelva a ser visitada. 

  

Práctica 12

  • Captura la siguiente imagen  
  • Pulsa con el botón derecho en el enlace para guardar el sonido 
  • Crea un nuevo documento e incluye la imagen recién capturada. 
  • Pulsa con el botón derecho sobre la imagen y crea un enlace al archivo primaver.mid que has guardado 
  • Salva el trabajo como ej12.htm y comprueba lo que ocurre al pulsar sobre el icono. 
 
 
Con el procedimiento que acabas de realizar has creado la forma más sencilla de que un usuario pueda escuchar un sonido al visitar la página. Además, el visitante tendrá la opción de reproducir el sonido o no hacerlo según pulse o no en el enlace. 

Cabe también la posibilidad de que el sonido se cargue junto con la página y empiece a reproducirse de forma automática. En este caso el procedimiento es algo más complejo y además se añade un problema especial al no existir compatibilidad entre las etiquetas de Netscape y Microsoft, por lo que deberemos incluir las etiquetas para cada uno de los navegadores de forma que garanticemos que el visitante podrá escuchar el sonido independientemente del navegador que utilice.  
 

Práctica 12-b

  • Crearemos un nuevo documento que reproduzca automáticamente el archivo primaver.mid 
  • Recurrimos al menú Insertar / Etiqueta HTML y escribimos la etiqueta básica de Netscape: <EMBED SRC=primaver.mid HIDDEN=true> 
  • Con el mismo procedimiento incluimos la etiqueta para Explorer: <BGSOUND SRC=primaver.mid> 
  • Guardamos el trabajo como ej12b.htm y pasamos al navegador para comprobar el resultado. 
 
 
Como has podido comprobar el arranque automático de los sonidos puede resultar un tanto molesto para el usuario, especialmente si se le obliga a escuchar sin darle la posibilidad de detener la audición. Si consideramos que puede ser más educado dejar en manos del usuario la decisión acerca de continuar la audición podemos realizar la siguiente modificación.  
 

Práctica 12-c

  • Volvemos al editor y, pulsando con el botón derecho sobre la etiqueta de Netscape elegimos Propiedades de la etiqueta HTML y la modificamos de forma que resulte <EMBED SRC=primaver.mid AUTOSTART=true WIDTH=145 HEIGHT=60> con lo que lograremos que aparezca una consola en la que el visitante podrá optar por detener la reproducción. 
  • Guardamos el archivo como ej12c.htm 
 
 
En ocasiones puede interesarnos incluir una grabación explicativa o un saludo. Para hacerlo procederemos a grabar la voz utilizando el equipamiento multimedia y la guardaremos con la extensión .wav 

La forma de incluir estos sonidos en la página es exactamente igual que para los ficheros .mid, pero deberíamos cerciorarnos del tamaño de los archivos, especialmente cuando los incluimos como autoarrancables puesto que su tamaño es sensiblemente superior y pueden afectar muy negativamente a la velocidad de descarga. 

 

 
© Raúl Luna '98