|
|
|
|
Existen diferentes trucos para hacer nuestras páginas Web más atractivas. No se trata de directivas de HTML pero su uso permitirá conseguir mejores resultados estéticos en nuestras páginas Web.
Un Gif animado es un gráfico del tipo GIF 89a que da la impresión de animación. Para conseguir este efecto se deben crear por separado los gráficos GIF que componen la secuencia de la animación. Una vez hecho esto utilizaremos un programa para "fundir" todos estos gráficos en uno solo. Al mostrar este gráfico en nuestra página Web, el visor mostrará la secuencia de todos los graficos individuales de forma continua, con lo que dará el aspecto de animación que buscamos.
Uno de los programas que permite crear Gifs animados es el GIF CONSTRUCTION SET desarrollado por Alchemy MindWorks. Asimismo existe una URL donde se pueden "submitir" la secuencia de gifs estáticos y nos devuelve el gif animado correspondiente. La URL es http://www.vrl.com/Imaging/index.html.
A continuación podemos ver un gif animado. Si su visor no reconoce esta característica vera el gráfico estatico.
Un Gif transparente es un grafico del tipo GIF 89a en el cual se define su color de fondo como transparente. Con esto conseguimos el efecto de que el gráfico se encuentre como "flotando" en nuestra página. Para crear Gifs con el fondo transparente podemos utilizar un programa freeware llamado GIFTRANS.EXE. Este programa permite cambiar uno de los colores del gráfico a transparente. Para ello la instruccion a teclear es :
El codigo de color que queremos que se transforme a transparente hay que darlo en formato #RRVVAA que fué visto al principio de este manual. La instrucción:
muestra una lista de los colores incluidos en el gráfico con su código de color correspondiente.
De cualquier forma, los programas gráficos recientes, como CorelDraw 6 y LviewPro, permiten crear Gifs con colores transparentes de una manera muy sencilla.
Para ver la diferencia entre un grafico con fondo transparente y otro sin el, vea el ejemplo siguiente :
| Gif Normal | Gif Transparente |
|---|---|
|
|
Ademas de leerse las especificaciones de JavaScript para realizar programas en Java, existe una forma más facil de incluir estos scripts en nuestra página. Si estamos viendo una página que tiene algun efecto especial que nos guste, simplemente hemos de visualizar el código fuente de la misma (en Netscape opcion View - Document Source), marcar con el ratón todo el bloque contenido entre las directivas <SCRIPT> </SCRIPT>, copiarlas al portapapeles con CTRL+C y posteriormente incluir este bloque en nuestra página modificando los literales o frases animadas. Estas frases serán faciles de localizar porque contendrán la palabra var xx= " ....." antecediéndolas.
Sirva como ejemplo este código completo de una función JavaScript muy utilizada, que muestra varios mensajes desplazandose por la barra inferior del visor de páginas Web. Debemos modificar los literales indicados en var m1, var m2 y var m3 para adecuarlos al texto que queramos mostrar. Si se desea incluir mas mensajes hay que añadir mas lineas del tipo var mx = "texto " y "sumar" dichas variables en el apartado var msg = .
IMPORTANTE : Notese que el codigo JAVASCRIPT se encuentra en la seccion de "cabecera" (<HEAD>), y que la directiva <BODY> incluye el parametro onload para que se comienze a ejecutar el codigo JavaScript en el momento de cargar la pagina.
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!-- Ocultar el código para los viejos visores html --
// Desarrollo HTML, CGI y JAVASCRIPT por NETWEB,S.L., e-mail: 100445.2371@compuserve.com.
function scrollit(seed)
{
var m1 = " Texto 1 "
var m2 = " Texto 2 "
var m3 = " Texto 3 "
var msg=m1+m2+m3;
var out = " ";
var c = 0;
if (seed > 100)
{
seed--;
var cmd="scrollit(" + seed + ")";
timerTwo=window.setTimeout(cmd,7);
}
else
if (seed <= 100 && seed > 0)
{
for (c=0 ; c < seed ; c++)
{
out+=" ";
}
out+=msg;
seed--;
var cmd="scrollit(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,7);
}
else if (seed <= 0)
{
if (-seed < msg.length)
{
out+=msg.substring(-seed,msg.length);
seed--;
var cmd="scrollit(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,7);
}
else
{
window.status=" ";
timerTwo=window.setTimeout("scrollit(100)",75);
}
}
}
// --Final del codigo oculto -->
</SCRIPT>
<TITLE></TITLE>
</HEAD>
<BODY onload="timerONE=window.setTimeout('scrollit(100)',500)">
|
|
|
|
|