|
Otros trucos para las páginas HTML
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.
Gifs Animados.
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.
Gifs Transparentes
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 :
giftrans -t codigo_de_color fichero_gif > nuevo_fichero
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:
giftrans -l fichero_gif
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
|
|
|
Programas escritos en JavaScript.
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)">
(..... instrucciones propias para presentar la pagina web.....)
</BODY>
</HTML>
|
| 
