| Artículos | 01 NOV 1998

Los Fondos a fondo

Tags: Histórico
Técnicas y trucos de diseño en Internet
Ramón Montero.

Es realmente raro encontrar alguna página Web sin fondos, aunque en algunos casos, sería preferible que no se hubiesen incluido . Los fondos no son detalles sin importancia y hay que conocer cómo aprovechar sus posibilidades al máximo

La gran facilidad que nos permite el código HTML para incluir fondos en las páginas web, su gran vistosidad y el llamativo efecto que produce al observador ha generalizado el uso de éstos de tal manera que resulta casi extraño encontrar algún diseño web que no los contenga .

Las posibilidades de personalización gráfica de una página, sin necesidad de interrumpir el contenido de ésta, es uno de los motivos más corrientes para la utilización de los fondos, permitiendo desde simples combinaciones de colores, hasta complejas mezclas de múltiples fondos, pasando por todo tipo de efectos y composiciones, como fondos animados, superpuestos, en mosaico, etc . Lo más normal y lógico es que los fondos sean utilizados como complementos de la composición de la página, aunque en algunos casos puedan ser aprovechados para conseguir llamar la atención del visitante . Sus posibilidades son tales que se llega incluso a utilizar los fondos como elementos de password, como ocultación de información o como sistemas de efectos especiales .

Es probable que la regla más importante a seguir en su utilización sea que no interfieran en el diseño del documento, a no ser que sean utilizados precisamente para todo lo contrario, o sea, para llamar la atención de forma especial .

De los distintos tipos de fondos posibles y de las muy diferentes aplicaciones de éstos trata el presente artículo, aclarando que sólo se tratarán los fondos de tipo gráfico, dejando para otro artículo el estudio de los fondos sonoros o musicales .

Cuestiones básicas

La inclusión de una definición del fondo de una página Web en el código HTML puede realizarse de dos formas: con aplicación global a toda la página o una zona específica . En el primer caso, la especificación debe incluirse como atributo de la etiqueta body, y en el segundo, como fondo de una tabla .

Si se trata de describir el fondo para toda la página, disponemos de dos posibilidades básicas: describir el color del fondo de la página o especificar una imagen que se desee ver repetida por todo el documento .

El color de fondo se especifica con el atributo bgcolor, y así una línea de código como < body bgcolor=?red? > , o en formato hexadecimal < body bgcolor=?#FF0000? > , consigue que toda la página se muestre con un color de fondo rojo . El lector que desee ver el sencillo ejemplo comentado, debe activar la figura 1 en la Web Técnicas y Trucos de diseño en Internet www . duna . org/tecnicas . htm .

Si lo que se desea es que se muestre una imagen determinada como fondo, el atributo de la etiqueta body que debe utilizarse es background, y si por ejemplo tenemos el código < body background=?dino . jpg? > , obtendremos un diseño como el de la figura 2, en el que se puede observar cómo se repite la imagen hasta rellenar el fondo de toda la pantalla, independientemente de las dimensiones de ésta . Hay que aclarar que se pueden combinar los dos tipos de atributos, pero siempre se impone la imagen sobre el color, produciendo el mismo efecto la línea < body background=?dino . gif? > que el código < body bgcolor=?green? background=?dino . gif? > , salvo en el caso de que la imagen incluya transparencia, en cuyo caso se podrá observar el verde como color de fondo de las áreas transparentes ( ver la figura 3 ) . Otra cuestión que se debe tener en cuenta es la posibilidad de especificar que la imagen del fondo esté fija, o sea, que al desplazarse por el contenido de una página larga, el fondo no acompañe al desplazamiento del texto . Esto se consigue incluyendo el atributo bgproperties=?fixed? a continuación de background . Esta característica sólo está soportada por Internet Explorer, pudiéndose ver el efecto comentado si se conecta con la figura 4 utilizando este navegador . ( Las figuras que no se muestran en el artículo están disponibles en la dirección http://www . duna . org/tecnicas . htm ) .

Sobre el atributo HTML que modifica el color del fondo no hay mucho más que decir ( a continuación se comentan algunas posibilidades extras ) , salvo que se recomienda que se utilice alguno de los descritos en la paleta de 216 colores-web que ya se ha explicado en otro artículo de esta serie . Sin embargo, la especificación que permite incluir una imagen como fondo tiene bastante más que comentar . Los fondos de las tablas también requieren un estudio más detallado .

Fondos de color

En principio, una vez especificado un color para el fondo no se puede modificar, pero si recurrimos a algún lenguaje del tipo JAVA, JavaScript o VBScript, sí es posible su modificación .

Como ejemplos de posibles modificaciones voy a comentar dos sencillos guiones JavaScript, uno de ellos permite que el visitante decida el color del fondo que más le guste, y el otro, que el color vaya modificándose periódicamente .

Para conseguir que se permita la elección del color del fondo, es suficiente con incluir el siguiente código al principio del listado HTML:

< form >

< p >

< input type=?button? value=?Amarillo? onClick=?document . bgColor=?yellow?? >

< input type=?button? value=?Azul claro? onClick=?document . bgColor=?cyan?? >

< input type=?button? value=?Naranja? onClick=?document . bgColor=?orange?? >

< /p >

< /form >

Por supuesto que si se desea ofrecer más posibilidades, sólo hay que aumentar las correspondientes líneas input con sus respectivos colores . En la figura 5 se puede observar un ejemplo del efecto referido . Si se pretende incluir un efecto visual distinto de lo común, con el siguiente código se obtiene un cambio del color del fondo de forma aleatoria cada 5 segundos . Solo hay que incluir en la cabecera ( entre < head > y < /head > ) las líneas:

< script language=?JavaScript? >

< ! ? //

function colorfondo ( )

{

window . setTimeout ( ?colorfondo ( ) ?, 5000 ) ;

var indice = Math . round ( Math . random ( ) * 4 ) ;

var ColorValue = ?FFFFCC?;

if ( indice == 1 )

ColorValue = ?FFCC99?;

if ( indice == 2 )

ColorValue = ?CCFFCC?;

if ( indice == 3 )

ColorValue = ?CCCC99?;

if ( indice == 4 )

ColorValue = ?FF9966?;

document . bgColor=ColorValue;

}

// ? >

< /script >

Y complementar la etiqueta body con:

< body onLoad=?colorfondo ( ) ;? >

Para modificar el tiempo sólo hay que cambiar la cantidad de 5 . 000 por los segundos deseados seguidos de tres ceros . Para añadir más colores, hay que incluir otras líneas del tipo:

if ( indice == 5 )

ColorValue = ?336699?;

Sin olvidarse de aumentar el valor multiplicador del generador aleatorio, que es un 4 en el ejemplo, en una unidad por cada nuevo color .

En la figura 6 se puede ver el ejemplo descrito .

Fondos de tablas

Las tablas también soportan fondos particulares, pudiendo hacerlo ?por tabla? o por ?celda?, lo que ofrece múltiples combinaciones, pero por desgracia para los diseñadores, los distintos navegadores interpretan de forma diferente algunas de las etiquetas respectivas . Esto último hace necesario tener en cuenta los detalles al máximo .

Para fijar un fondo común a toda la tabla, hay que incluir el atribut

Contenidos recomendados...

Comentar
Para comentar, es necesario iniciar sesión
Se muestran 0 comentarios
X

Uso de cookies

Esta web utiliza cookies técnicas, de personalización y análisis, propias y de terceros, para facilitarle la navegación de forma anónima y analizar estadísticas del uso de la web. Consideramos que si continúa navegando, acepta su uso. Obtener más información