Capítulo IV: Sácale Jugo al Browser

TEMA 1: Imágenes y Colores.

Las imágenes en web pueden ser de dos tipos diferentes: Imágenes en línea, que aparecen al cargarse la página Web, junto con los vínculos y texto, y es de forma automática (tomando en cuenta que se cargue con un explorador gráfico que tenga activada la transferencia automática de imágenes); las otras son las imágenes externas, que se encuentran almacenadas en algún sitio Web, y se cargan como resultado de un vínculo o un evento de programación.

Las imágenes en línea deben tener un formato específico para que puedan ser leídas por el explorador, los formatos reconocidos hasta ahora son CompuServe Gif, CompuServe Gif animation, Gif87, Gif89, Jpeg y Jpg. Los primeros cuatro tienen la particularidad de tener colores indexados, esto quiere decir que contienen un índice de los colores utilizados en la imágen (máximo 255) en el que a un número hexadecimal del 0 al FF se le asigna un color RGB, la mayoría de las veces el número índice 0 se utiliza para definir un color transparente, esto quiere decir que será un color que se remplace con el fondo. Un Gif también puede tener una secuencia de imágenes ordenadas llamadas fotogramas que al ejecutarse simulan un movimiento, y cuentan con un índice propio de colores. El formato Jpeg o Jpg es una imágen RGB de 24bits como Windows Bitmap Bmp pero comprimida, lo que hace que sea más rápida de cargar.

Para introducir una imagen dentro de tu página debes colocar la etiqueta <img> en cualquier parte del código, el atributo más importante de esta etiqueta es src que se utiliza para indicarle al explorador la localización exacta de la imagen, es como el atributo href de la etiqueta <a>; así pues para colocar una imagen se debe seguir la siguiente síntaxis.
<img src="imagen.extensión">

Si ya tienes experiencia en colocar imágenes sabrás que las imágenes gif son casi siempre menores de capacidad que la jpg, así que en ocasiones es preferible colocar una imágen de menor resolución antes de que se cargue por completo una de mayor resolución, para lo que se utiliza en atributo lowsrc. Suponiendo que tenemos una imagen grande llamada "grande.jpg" y una imagen que representa lo mismo pero en menor resolución llamada "chica.gif" tendríamos el código siguiente:
<img src="grande.jpg" lowsrc="chica.gif">

Otro atributo importante es align que al igual que en la etiqueta de párrafo <p>, permite alinear la imágen con respecto al texto circundante, los valores básicos que puede tomar son:

Además de los atributos anteriores, existen otros nuevos que ofrecen mayor control de imágenes dentro de la línea de texto, aunque no tienen soporte con exploradores menores a Netscape 4.0 e Internet Explorer 4.0, y estos son:

Con estos valores se puede prácticamente rodear una imagen con una o varias líneas de texto, inclusive tablas, otras imágenes y saltos de línea. Pero si queremos hacer un salto de línea fuera del margen de la imagen, necesitamos utilizar un atributo de la etiqueta <br> llamado clear, que puede tomar los valores "left", para alinear el texto a la parte vacía del margen izquierdo, "right" para alinear el texto al margen vacío derecho, o "all" que provoca un salto de línea en ambos márgenes.

Ahora bien, si tu imágen no cubre el espacio en pixeles que tu quisieras, para formatear el texto mejor, lo que necesitas son los atributos de <img> llamados vspace y hspace, vspace añade el número de pixeles especificados, por arriba y por debajo de la imagen; hspace añade el número de pixeles especificados en la izquierda y derecha de la imagen.

Otros atributos importantes de <img> son height y width que controlan la escala de la imagen, height define el alto de la imagen y width define el ancho de la imagen, ambos pueden tomar valores en pixeles o en porcentajes de pantalla. Estas etiquetas te pueden servir para mostrar imágenes de menor resolución en un tamaño más grande, o una imágen de gran resolución en un tamaño más pequeño, para que la página se ejecute más rápido. Un truco que puedes hacer es colocar la misma imagen tanto en src como en lowsrc sólo que con diferentes dimensiones.

Si deseas colocar un texto, que defina la imagen cuando ésta no se cargue correctamente, o como información cuando el usuario mantenga el cursor posicionado dentro de la imagen por unos instantes, se utiliza el atributo alt de la etiqueta <img>, que puede tomar cualquier valor cadena o ISO-Latin como referencia.

Nota: Así como se vincula un texto, puedes vincular una imagen con cualquier protocolo URL.

El siguiente ejemplo produce una serie de imágenes tomadas de esta misma página, colocadas junto y alrededor de textos.
<html>
<head>
<title>Halloween</title>
</head>
<body bgcolor="black">
<basefont face="Arial" color="orange">
<h2><img src="../imagenes/dracula.gif align="left" align="bottom">La página de Halloween</h2>
<p>Esta es la página de Halloween, aquí existen párrafos alineados a la derecha del margen de la imagen
pueden ser tantos como se deseén, pero aquí sólo colocaré algunos cuantos.</p>
<p>Aquí hay otro párrafo, ¿no es obvio?</p>
<div align="center">
<a href="javascript: history.back(1)"><img src="../imagenes/esqueletos.gif"
lowsrc="../iconos/doc2.gif" alt="Imagen de Esqueletos danzando"></a>
<p>Haz clic en los esqueletos</p>
</div>
</body>
</html>

Haz clic aquí para ver el ejemplo en esta misma ventana

Las imágenes externas a diferencia de las imágenes en línea, no se encuentran dentro de la página, más bien son vínculadas desde una página y el explorador las carga como documento nuevo o inicia el proceso de descarga al disco duro. Este tipo de imágenes se utilizan mucho para indices de imágenes, así como una galería, en la que vienen las pinturas en pequeño, y al hacer clic en ellas, aparecen en tamaño más grande.

Los exploradores en modo texto, no soportan las imágenes en línea, sin embargo sí pueden descargar las imágenes externas para que se puedan ver en la aplicación correspondiente. Otro aspecto importante de las imágenes externas es su formato, ya que no sólo pueden ser gif o jpg, sino también bmp, xbm, tiff y pict.

Una vez que se coloquen las imágenes en el servidor web, éstas pueden ser llamadas a través de un vínculo normal o de imagen, y dependiendo del navegador, se descargará la imagen o se desplegará en documento nuevo.

Ya que terminé de explicarte a cerca de las imágenes, ahora pasemos a la segunda parte de este tema, que es el color. Para darle color a cualquier parte de la página, solo tienes que añadirle el atributo de color necesario seguido de una tríada hexadecimal que describa el color o el nombre del color que pueda reconocer el explorador.

La tríada hexadecimal de un color es la secuencia de valores de los colores primarios, Rojo, Verde y Azul que en inglés se escriben Red, Green, Blue o RGB, el valor que puede tomar cada color va del 0 al 255 que en hexadecimal es del 0 al FF, así pues, si queremos poner el color negro, o sea la ausencia del color escribimos #000000, para crear el color rojo ponemos #FF0000 y así sucesivamente podemos crear convinaciones para obtener cualquier color de la gama visible.

Una forma más sencilla de establecer un color, es escribiendo el nombre del color que queremos en inglés, siempre y cuando esté entre la lista de nombres reconocidos por el explorador; así podemos escribir "blue", "orchid", "white", etc.

Nota: Si quieres saber el nombre de los colores reconocidos por Netscape e Internet explorer, así como su tríada hexadecimal y un creador de tríadas hexadecimales, ve a mi Página de Colores.

Para establecer el color de fondo, debes utilizar el atributo bgcolor de la etiqueta <body>. Ejemplos:
<body bgcolor="MediumSlateBlue">
<body bgcolor="#7B68EE">

Para cambiar el color del texto en general de la pantalla se utilizan los atributos: text para cambiar el color del texto excepto vínculos, link para cambiar el color de los vínculos, alink para cambiar el color del vínculo que tiene el enfoque y vlink para cambiar el color del vínculo visitado. Ejemplos:
<body text="hotpink" link="#0000FF" vlink="purple" alink="green">
<body text="slateblue" link="MediumVioletRed" vlink="#12AD00" alink="FF6347">

También puedes cambiar el color del texto en partes específicas de la página utilizando el atributo color de la etiqueta <font>.
<font color="blue">Texto en Azul</font>
<forn color="#C1C1C1">Texto Gris</font>

Si quieres obtener una imagen de fondo como la que está en esta página necesitas colocar el atributo background de la etiqueta <body>, la imagen que coloques no necesita ser del tamaño de la página, ya que se colocará en mosaico, (repitiéndose una tras la otra) y si colocas el atributo bgproperties="fixed" la imagen quedará estática como marca de agua. Ejemplos:
<body background="../imagenes/puntitos.gif">
<body background="fondo1.jpg" bgproperties="fixed">

TEMA 2: Archivos Multimedia y Animación.

Multimedia significa muchos medios, esta palabra se refiere al conjunto de software y hardware que permiten la ejecución de archivos de sonido, videos, ambientes vietuales y demás objetos incrustados, pero la multimedia en web es un poco más limitada que en tu computadora porque los archivos de medios se transfieren lentamente y los formatos que existen independientes de plataforma son muy pocos.

Un archivo externo, es en sí, cualquier archivo colocado en el servidor web, que es llamado a través de un vínculo. Es muy sencillo colocar un archivo externo, solo tienes que hacer un vínculo en alguna parte de tu página, que tenga en su atributo href la ubicación exacta o relativa de dicho archivo. Cuando el usuario haga clic en el vínculo, el navegador descargará el archivo y presentará el contenido del archivo, en la misma ventana del navegador o en una aplicación auxiliar que se encuentre instalada en la computadora y sea capaz de leer el archivo.

El navegador web sabe qué hacer con un archivo externo debido a su extensión, así puede abrir en ventana un archivo gif o jpeg, o pasar un archivo bmp a paint para ser leído. Algunos servidores web utilizan un código especial llamado tipo de contenido para indicarle al navegador que tipo de archivo están enviándole.

Procura siempre colocar un vínculo al archivo externo que deseés, incluyendo una breve descripción y el tamaño del archivo en kbytes, así podrás ofrecer más información a quien quiera descargarlo de tu sitio, por ejemplo:
<p><a href="muro.mpg">Video Mpeg de 3'290 Kb </a>Video que muestra la caída del muro de Berlín</p>

Los archivos externos más comunes son los de sonido y video, pues permiten darle una presentación más interesante a una página web, pero desde la llegada de microsoft internet explorer 4, la mayor parte de archivos de sonido y algunos formatos de video pueden ser puestos en línea y ejecutarse en la misma ventana de aplicación.

Los formatos de sonido reconocidos son au, aif, wav, mid, mp2, mp3 y RealAudio, este último tiene la capacidad de reproducirse por flujo continuo, es decir, se reproduce mientras se va descargando, solo hay una pequeña espera mientras llega a la computadora el dato inicial y se ha vuelto muy popular, así como el formato mp3 que es una archivo wav comprimido, lo cual tiene la gran ventaja de descargarse rápidamente desde el servidor. Los formatos de video reconocidos son mpg, mov (QuickTime) y avi (Windows) estos a diferencia de las animaciones, pueden reproducir un sonido durante su ejecución.

La etiqueta <embed> se utiliza para reproducir los archivos de medios antes mencionados, esta debe de ir en el cuarpo de la página y por lo menos debe contener el atributo src cuyo valor deberá ser la ubicación exacta o relativa del archivo externo. A continuación encontrarás algunos ejemplos:
<embed src="http://www.dominio.com/sonido.wav">
<embed src="http://www.dominio.com/video.avi">

El atributo hidden ocultará o mostrará una barra de controles relativos al archivo de medios, estos serán los correspondientes al reproductor multimedia instalado en la máquina, si se especifica true, los controles no se mostrarán, si se especifica false o no se especifica, los controles estarán visibles y para uso del visitante. El atributo loop define si se repetirá la ejecución del archivo o no, si se especifica true, el archivo se ejecutará repetidamente en caso contrario, se ejecutará solo una vez; estos dos últimos atributos tomarán el valor false si no se especifica lo contrario, y por último el atributo autostart indica al navegador si reproducirá el archivo al cargarse la página o no, si se especifica true o no se especifica, el navegador iniciará la ejecución del archivo al cargar la página, si se especifica false, el archivo no se ejecutará sino hasta que el usuario lo indique, si la barra de controles está activada. A continuación algunos ejemplos:
<embed src="http://www.dominio.com/sonido.mid" autostart="false" loop="true">
<embed src="http://www.dominio.com/video.mpg" hidden="true">

La etiqueta predefinida para añadir un sonido de fondo es <bgsound> el atributo src define su ubicación, y el atributo loop define las veces que se repetirá el sonido, si es -1 o infinite, el sonido se ejecutará repetidamente. Ejemplos:
<bgsound src="sonido.wav">
<bgsound src="http://www.dominio.com/sonido.mid" loop="5">

Para mostrar videos Avi, se puede utilizar la etiqueta <img> sólo que la ubicación del video se colocará en el atributo dynsrc (Dynamic Source), el conocido atributo src se utilizará para representar el video sin ejecución, si se coloca el atributo controls, aparecerán una barra de controles debajo del video igual que hidden en <embed>, el atributo loop al igual que en <bgsound> indica el número de veces que se ejecutará el archivo y el atributo start definirá el evento que indique el inicio de la reproducción del video, si start="fileopen" el video se ejecutará tan pronto se cargue la página, y si start="mouseover" se reproducirá el video cuando se pase el mouse sobre él; por último, el atributo loopdelay indica el retardo en milisegundos entre cada repetición del bucle. Ejemplos:
<img src="imagenalternativa.gif" dynsrc="video.avi" loop="infinite" loopdelay="100" start="mouseover" controls>
<img dynsrc="video.avi" loop="2" start="fileopen">

El desplazamiento de textos o marquesinas son también un elemento importante en una presentación web, se consideran multimedia por ser un objeto de texto incrustrado, para hacerlo se utiliza la etiqueta <marquee></marquee> dentro del abre y cierre se coloca el texto a desplazar, marquee ignorará cualquier etiqueta contenida dentro. El comportamiento predeterminado de la marquesina es desplazarse continuamente de derecha a izquierda de un extremo a otro de la página, su color de fondo es transparente, el texto es negro y su alineación en hacia arriba, para modificar estos valores se utilizan los siguientes atributos.

                    Samuel           Guzmán           Padilla                    Este es un ejemplo de marquesina desplazándose.

Las animaciones en web son manejadas por el formato Gif, que almacena un conjunto ordenado de fotogramas de colores indexados que simulan movimiento al ser ejecutados, al principio del capítulo encontrarás una descripción más detallada, existen muchas aplicaciones en web, que son muy útiles en el manejo de Gifs animados, la aplicación que yo uso y recomiendo es Corel Photopaint, ya que cuenta con todas las características y complementos de un gif animado.

Gif Construction Set es una buena opción para crear Gifs animados en Windows, consulta http://www.mindworkshop.com/alchemy/gifcon.html
Gif Builder para Macintosh es un freeware para crear Gifs animados, consulta http://iawww.epf1.ch/staff/Yves.Piguet/clip2gif-home/GifBuilder.html
WhirlGif es una herramiente para UNIX que ordena imágenes gif, en un solo gif animado, consulta http://www.msg.net/utility/whirlgif/

Si no cuentas con ningún programa para crear gifs animados, descarga algunos desde mi página de descargas o descarga el applet Animator.class gratuitamente desde http://www.javasoft.com/applets/applets/Animator/index.html.

Para agregar este applet o cualquier otro a tu página escribe la etiqueta <applet> que describe al mismo applet y define su tamaño en pixeles o porcentajes con los atributos heigh y width; con la estiqueta <param> defines un parámetro del applet, los atributos name y value son los encargados de pasar la información del applet, así name es el nombre de la variable y value es el valor de dicha variable.
<applet code="applet.class" width="100" heigh="40">
<param name="parámetro" value="algun valor">
En caso de que el navegador no soporte applets, el mensaje de error va aquí.
</applet>