RGBLAB: Curso HTML parte #3

HTML al instante - Parte #3

Versión: 1.0
Autor: Santiago Badano
Ultima actualización: 03 Nov 96

En la segunda parte vimos como armar listas y tablas. Como vieron, las tablas son elementos muy poderosos, con los que practicamente se puede diseñar de todo. Si son muy complejas, armarlas a mano da trabajo, pero los resultados valen la pena.

En este tercer parte, veremos los Frames, gifs animados y programas de ayuda muy úitles que andan por la vuelta.

FRAMES
Los Frames fueron introducidos por Netscape hace ya mas de un año. Los principales browsers que soportan frames son Netscape Navigator 2.0 - 3.0 e Internet Explorer 3.0. Los Frames, que traducido sería algo asi como cuadros o marcos, son áreas definidas dentro de una misma ventana, cada cual como una página independiente, con su propio código, colores, titulo, etc. Los Frames, hasta el día de hoy, no han tenido tanto exito como se pensó en un principio, solo un pequeño porcentaje de los millones de documentos que hay en el cyberespacio utilizan Frames. Recientemente se implementó la posibilidad de utilizar Frames invisibles, y asi no 'cortar' visualmente una página. En varios casos un Frame invisible queda mucho mas agradable. Pero el objetivo de este cursillo no es discutir si sirven o no, ya que porsupuesto que son muy útiles; aqui veremos como se hacen.

Creando Frames
Un documento con Frames tiene la estructura basica como un documento normal de HTML, solo que el elemento <BODY> es remplazado por <FRAMESET>, que describe los sub-documentos que contendrá cada FRAME.

<HTML> <HEAD> </HEAD> <FRAMESET> </FRAMESET> </HTML>

FRAMESET acepta dos atributos, ROWS (filas) y COLS (columnas). Dentro de este elemento, colocamos el comando FRAME. FRAME, al igual que el comando IMG (imágen) acpeta el parámetro SRC. Si queremos que en un frameset se cargue una página llamada menu.htm sería: <FRAME SRC="menu.htm">.
Como todo, lo mejor es ver un ejemplo. Supongamos que queremos dividir una página en dos, de un lado el menú, y de otro lado donde se despliega la infromación solicitada en el menú. El código para esto sería asi:

<HTML> <HEAD> </HEAD> <FRAMESET COLS="30%,70%"> <FRAME SRC="menu.htm" NAME="z1"> <FRAME SRC="info.htm" NAME="z2"> </FRAMESET> </HTML>

Como ven, el tamaño se puede especificar en porcentajes poniendo el simbolo de porcentaje '%' al final del número, en pixels poniendo solo el número, y un valor especial es asterisco '*' que significa utilizar todo el espacio que queda. Esto es útil para asegurarnos que un frame siempre tenga un espacio mínimo disponible. Por ejemplo, si especificamos un menú de 200 pixels y el resto con '*', esto aseguraria que el menú nunca fuera menos de 200 pixels. Notaron que a cada frame le di un nombre, esto es muy importante, ya que es la manera de especificar en que frame queremos desplegar la información.

Parámetro TARGET
Supongamos que tenemos creadas las dos frames del ejemplo anterior, un menú del 30% y la información en el 70%. Si seleccionamos una conexión (link) en el menú veremos la información desplegada en el 30% del menú y no en el área de la información. Esto se soluciona empleando el parámetro TARGET.

Supongamos que en el menú tenemos 3 opciones

Volver a página principal
Ver lista de hoteles
Ver lista de restaurantes

Estas tres opciones estan en el menú, ahora ¿como hacemos para que cuando selecionamos lista de restaurantes la información aparezca en el otro frame, el mas grande?


<HTML>

<HEAD>

</HEAD>



<BODY>

<OL>

	<LI>

	<A HREF="principal.htm" TARGER="_top">

	Volver a página principal</A>

	<LI>

	<A HREF="hoteles.htm" TARGET="z2">

	Lista de hoteles</A>

	<LI>

	<A HREF="restaur.htm" TARGET="z2">

	Lista de restaurantes</A>

</OL>

</BODY>



</HTML>

Notaron que la conexión (link) utiliza un nuevo parámetro: TARGET.

<A HREF="hoteles.htm" TARGET="z2">Lista de hoteles</A>

El parámetro TARGET especifica en que FRAME desplegamos la información seleccionada. En este caso es z2, que es el nombre que le di al FRAME. Cuando defini el FRAME, utilize el parámetro NAME="z2". Esto le da un nombre lógico al FRAME al cual hacemos referencia con el parámetro TARGET en una conexión. TARGET también se puede usar con el elemento BASE. Ej: <BASE TARGET="z2">.
Esto se utiliza cuando por ejemplo tenemos muchas conexiones, las cuales todas se desplegan en un mismo FRAME, por ejemplo si tuvieramos 30 selecciones en el menú. En vez de poner en cada conexión <A HREF="hoteles.htm" TARGET="z2">Lista de hoteles</A>, ponemos al principio <BASE TARGET="z2"> y todas las conexiones automaticamente se desplegarian en el FRAME z2.

La primer conexión del ejemplo, <A HREF="principal.htm" TARGER="_top">Volver a página principal</A> tiene un TARGET especial.

TARGET especiales o mágicos

TARGET="_blank"
Este TARGET hace que la conexión se cargue siempre en una nueva VENTANA. Esta nueva ventana no tendra nombre.
TARGET="_self"
Este TARGET hace que la conexión se cargue siempre en el mismo FRAME que esta la conexión. Es la opción por defecto.
TARGET="_parent"
Este TARGET hace que la conexión se cargue siempre en el FRAMESET que contiene al FRAME actual.
TARGET="_top"
Este TARGET hace que la conexión se cargue siempre en la ventana del documento actual sin FRAMES.

FRAMES invisibles. ¡NUEVO!
Crear FRAMES invisibles es muy sencillo. Tengan en cuenta que solo quienes utilizan Netscape Navigator 3.x o MS Internet Explorer 3.x podrán ver FRAMES invisibles. ¿Cómo se ven si son invisibles?!
Los navegadores de Netscape y Microsoft, incorporaron a partir de las versiones 3.x, la posibilidad de controlar el borde de un FRAME. Se puede achicar, agrandar, se puede poner valor cero, y ahi tenemos el mágico FRAME invisible. Como todo se entiende mejor haciendolo, vean este codigo y pruebenlo:

<FRAMESET FRAMEBORDER="0" FRAMESPACING="0" BORDER="0" COLS="200,*">

    <FRAME MARGINWIDTH="5" MARGINHEIGHT="10" SRC="1.htm" NAME="menu" NORESIZE>

    <FRAME MARGINWIDTH="10" MARGINHEIGHT="10" SRC="2.htm" NAME="texto">

</FRAMESET>

Como ven, se crean dos FRAMES. El '1' llamado 'menú' de 200 pixels de ancho, el '2' llamado 'texto' de el resto de ventana que queda. Noten que en la declaración del FRAMESET hay dos parámetros:

FRAMEBORDER=0
FRAMESPACING=0

¿Porque dos? A pesar de que ambos hacen lo mismo, en necesario poner ambos para que se vea correctamente con Netscape Y Explorer. Esperemos que en un futuro cercano se haga estandard. Aún queda mas por decir de los FRAMES. En el correr de la semana ire completando este capitulo.

GIFS Animados
esto es un gif animado Los gifs animados son muy simples de crear y le agregan un toque de movimiento a una página, que realza su impacto visual. Generalmente, no conviene usar gifs animados solo por que si. Me refiero a que por ejemplo poner una flecha animada al lado de cada opción no es un uso muy creativo y no agrega nada interesante. Los mejores usos que he visto son logos animados, un ojo que hace una guiñada, luces de autos que se apagan y prenden, y cosas asi. Por ejemplo, imaginen la página de un informativo de TV en internet. Junto a la opción de noticias de último moménto una luz roja (como un LED) que se apaga y se prende. El gif animado, de solo 2 cuadros, crea la ilución de que esa opción en constantemente activa, siempre alerta. En esto de los gifs animados, son los detalles los que cuentan.

¿Qué es un GIF animado?
Un gif animado es una gif como cualquier otro, solo que contiene varios cuadros dentro de si. El formato gif hace años que soporta esto, pero nunca fue muy utilizado. Pero ahora, parece esta extraña opción de el formato gif encontró su destino. Un gif animado en realidad esta compuesto por varios cuadros, siendo cada cuadro un gif creado por separado anteriormente. Cuando juntamos estos cuadros en un gif, el gif muestra cada cuadro cierto tiempo, creando la ilusión de una animación. Podemos especificar el tiempo que cada cuadro sea mostrado, efectivamente acelerando y enlenteciendo la animación.

Creando un GIF animado
Crear un gif animado consta de dos etapas:

Crear cada GIF por separado
Unir los gifs sueltos en un gif animado

1.Crear cada GIF por separado
Un gif animado nace de varios gifs separados. Primero hay que crear cada gif con un progama permita salvar la imágen como gif. Cada uno usará el que mas le guste. Conviene no usar gifs de mas de 64 colores, ya que no olviden que el gif final ocupará aproximadamente la suma de todos los gifs que usemos. En el gif animado que ven mas arriba, fue formado a partir de estos gif sueltos:

Primer cuadro (gif vacio)

Segundo cuadro

Tercer cuadro

Cuarto cuadro

Quinto cuadro

2.Unir los gifs sueltos en un gif animado
Luego que tenemos los gifs sueltos, unirlos es muy fácil. Se necesita un programita para unir los gifs; uno muy bueno y facil de usar es el GIF Animator de Microsoft (Win95). Bajen y corran el el GIF Animator. Pueden usar estos mismos gif sueltos para probarlo, en Netscape Navigator apreten el botón derecho sobre el gif y eligan 'save as'. En el gif animator inserten los 5 cuadros, verán que alli les pueden cambiar el orden. Luego seleccionen todas las imagenes, le dan en 'image:duration 200' (2 segundos). Eligan preview y veran la animación. Luego eligan 'save as' y listo. Cuando carguen el gif que acaban de grabar, veran un hermoso GIF Animado!
Un par de sugerencias: eligan loop infinito, Netscape parece que no le gustan los gifs animados con un número específico de loops. Otra: si el gif es grande pero solo hay movimiento en una área pequeña, carguen como primer cuadro el gif entero, y los cuadros siguientes recortenlos para que solo sea la parte animada, asi ahorrarán muchos Kbytes!

Incluir un sonido para Netscape Navigator 3.0 e Internet Explorer 3.0
Este pequeño truco figura en un FAQ de Microsoft.
Usar el siguiente código:

<EMBED SRC="sound.au" height=2 width=2 autostart=true hidden=true>   <NOEMBED> <BGSOUND SRC="sound.au"> </NOEMBED>

Fin de la tercera parte.
En el correr de la semana ire completando este capitulo con mas temas, como ser: programas para generar páginas HTML, verificadores de syntaxis HTML (muy útiles), mas y mas frames y mas trucos.
Enviar e-mail a: rgblab@cs.com.uy.