Busqueda en Google

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 prácticamente 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 útiles 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 así 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 éxito como se pensó en un principio, solo un pequeño porcentaje de los millones de documentos que hay en el ciberespacio 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 por supuesto que son muy útiles; aquí veremos como se hacen.

Creando Frames
Un documento con Frames tiene la estructura básica 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 (imagen) acepta 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 información solicitada en el menú. El código para esto sería así: 
<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 símbolo de porcentaje '%' al final del número, en píxeles 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 píxeles y el resto con '*', esto aseguraría 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

  1. Volver a página principal
  2. Ver lista de hoteles
  3. Ver lista de restaurantes
Estas tres opciones estan en el menú, ahora ¿como hacemos para que cuando seleccionamos 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 definí el FRAME, utilice 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 despliegan en un mismo FRAME, por ejemplo si tuviéramos 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 automáticamente se desplegarían 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 ahí tenemos el mágico FRAME invisible. Como todo se entiende mejor haciéndolo, vean este código y pruébenlo: 

<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 píxeles 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 Standard. Aún queda mas por decir de los FRAMES. En el correr de la semana iré 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 así. Por ejemplo, imaginen la página de un informativo de TV en internet. Junto a la opción de noticias de último momento una luz roja (como un LED) que se apaga y se prende. El gif animado, de solo 2 cuadros, crea la ilusió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 alentando la animación.

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

  1. Crear cada GIF por separado
  2. 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 programa permita salvar la imagen 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 aprieten el botón derecho sobre el gif y eligan 'save as'. En el gif animator inserten los 5 cuadros, verán que allí les pueden cambiar el orden. Luego seleccionen todas las imágenes, le dan en 'image:duration 200' (2 segundos). Elijan preview y verán la animación. Luego eligan 'save as' y listo. Cuando carguen el gif que acaban de grabar, verán un hermoso GIF Animado!
Un par de sugerencias: elijan 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 recórtenlos para que solo sea la parte animada, así 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: 

<!-- Netscape Navigator 3.0 con LiveAudio plug-in -->

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



<!-- Internet Explorer 2.0 - 3.0-->

<!-- NOEMBED es para que Netscape ignore esto -->

<NOEMBED>

<BGSOUND SRC="sound.au">

</NOEMBED>

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

Pagina Principal