Algunos elementos de diseño

Hasta el momento hemos trabajado con páginas en blanco. Sin embargo, es extraño encontrar páginas WEB que se asemejen a una hoja de papel; lo habitual es que se incluyan colores que hagan más agradable su presentación. De todas maneras, el uso indiscriminado de colores e imágenes no beneficia a la calidad de una página, por lo que no estaría de más respetar unas sencillas reglas:  
  • Los colores, de fondo o de texto, se utilizan con el objetivo de contribuir a la legibilidad de los textos. 
  • Salvo que sirvan para diferenciar contenidos las páginas que constituyen una sede WEB deberían tender a un diseño uniforme que transmita al visitante la sensación de que se encuentra en un lugar con señas de identidad propias. 
  • Los archivos de imágenes ocupan espacio...mucho espacio. Transmitirlos lleva tiempo...mucho tiempo. Por tanto, habrá que minimizar en lo posible el tamaño de las imágenes y utilizarlas cuando sean significativas, no meramente como elementos decorativos. 
  • Si utilizamos imágenes para enlazar unas páginas con otras hagámoslo siempre con las mismas: contribuiremos a la "imagen de marca" y aceleraremos la navegación puesto que sólo se descargarán la primera vez. 

Color de fondo

La forma más elemental de modificar el aspecto de una página es variando el color del fondo. Curiosamente el editor de Netscape no facilita demasiado esa tarea, ya que aunque incluye unas combinaciones predeterminadas tenemos que recurrir a teclear el código para conseguir algún color personalizado. 

Tendremos pues que recurrir, cuando creemos un archivo nuevo, al menú Insertar / Etiqueta HTML, ya que el color de fondo es un atributo del cuerpo de la página. Teclearemos <BODY BGCOLOR=xxxxxx>, donde xxxxxx sera una combinación de caracteres cuyo significado explicamos a continuación. 

Los caracteres xxxxxx representan tres pares de números que indican la cantidad de Rojo, Verde y Azul que componen el color. Para complicarlo un poco más no son exactamente números, sino alfanúmeros ya que representan una notación hexadecimal que puede ir desde 00 hasta FF que correspondería al 255 en base diez. (Eso hace que al poder optar entre 256 valores de rojo, otros tantos de verde e igual de azul consigamos un total de más de 16 millones de posibles colores). Veamos algunos ejemplos. 

  

Valores Color resultante Valores Color resultante Valores Color resultante
FF0000   00FF00   0000FF  
FFFF00   FF00FF   00FFFF  
25A7BB   ACB312   6047B6  
 
 

Práctica 9

  • Creamos una nueva página en el editor y, aplicando el procedimiento descrito le adjudicamos un color de fondo. 
  • Visualizamos el efecto y vamos modificando la etiqueta hasta encontrar uno que no dificulte la legibilidad. 
  • Guardamos el trabajo como ej9.htm 
 
Junto a la posibilidad de modificar el color de fondo de la página encontramos la de incluir un gráfico que haga de tapiz rellenando todo el fondo de la página. En las páginas de este curso se ha utilizado este recurso: las anillas y el degradado del margen son un archivo gráfico que se repite a lo largo de la página. 

En esta ocasión el editor de Netscape se comporta de una forma más amigable, permitiéndonos que en el menú Formato / Colores y propiedades de la página elijamos un archivo gráfico que se utilice como fondo de la misma. 

Existen multitud de páginas en la red que ofrecen la posibilidad de obtener este tipo de imágenes. Tendremos que "bajarlas" a nuestro ordenador y copiarlas en el directorio de trabajo para poder incluirlas en nuestra página. (Aunque se podrían guardar en cualquier directorio resulta más cómodo hacerlo en el directorio en el que estamos trabajando nuestras páginas, para no tener que irlas buscando por todo el disco duro). 

Puedes probar a bajar alguna imagen para el próximo ejercicio desde ColorVivo  
 

Práctica 9-b

  • Creamos una nueva página en el editor. 
  • Bajamos un gráfico de la página mencionada o bien el archivo back.gif que se utiliza en esta página. (Para hacer esto último basta con que pulses con el botón derecho en la superficie de la página y elijas Guardar fondo como
  • Visualizamos el efecto y guardamos el trabajo como ej9b.htm 
 
 
Cuando utilicemos fondos laterales habrá que tener en cuenta que el texto que escribamos se alineará a la izquierda y, por tanto se superpondrá al fondo con lo que es posible que afecte a la legibilidad. Para solucionar este problema podemos recurrir al truco de la imagen de 1 pixel 

En muchas ocasiones la imaginación es el mejor aliado para llevar a cabo tareas aparentemente difíciles. Éste es el caso del truco mencionado que consiste en lo siguiente:  

  • Con cualquier programa de tratamiento de imágenes se crea un dibujo de tamaño 1x1 píxeles y se guarda en formato Gif con fondo transparente. Conseguimos de esta forma una imagen que resultará invisible al visitante de la página WEB y cuya extensión será mínima. Sin embargo ocupará un espacio en la página desplazando el texto. 
  • Aunque la imagen en sí ocupe únicamente un pixel podemos indicarle atributos de ancho y alto para que el navegador le reserve el espacio que necesitemos dejar "en blanco". 
  • Creamos una estructura de tabla de dos columnas sin borde para definir la página y ponemos en la columna de la izquierda la imagen con la anchura suficiente para que el texto no se superponga al borde. 
Este procedimiento se puede utilizar también para introducir un tabulador a principio de línea o como relleno de celdas en sustitución del caracter de espacio (&nbsp;).  
 

Práctica 9-c

  • Abrimos, si lo habíamos cerrado, el documento ej9b.htm que acabamos de crear en el ejercicio anterior. 
  • Introducimos un texto que ocupe un par de renglones y pasamos a verlo en el navegador para comprobar el efecto que se ha producido. 
  • Volvemos al editor. Nos situamos al principio del párrafo y creamos una tabla de una fila y dos columnas con borde=1. (El texto que teníamos escrito se desplazará hacia abajo). 
  • Para no tener que crear el archivo de 1 pixel ahora puedes obtenerlo pulsando con el botón derecho en el recuadro y eligiendo Guardar imagen como para almacenarlo en tu carpeta de trabajo.
  • Nos situamos en la celda de la izquierda y buscamos el icono para insertar imágenes. (El que está entre la diana y la línea horizontal) 
  •  
     
  • Tras pulsar el botón seleccionamos el archivo 1pixel.gif y en el apartado dimensiones le ponemos Altura=20 y Anchura=75 (Recordemos que originalmente ocupa 1x1 y es transparente, con lo que sería muy dificil localizarlo si no aplicamos esta modificación del tamaño)
  • Ahora pasamos a la celda de la derecha y pulsamos con el botón derecho. Elegimos Propiedades de la tabla / Celda / Anchura de la celda=100 % de la tabla. Luego pasamos a la pestaña Tabla y ponemos el borde=0. 
  • Marcamos el texto que habíamos escrito inicialmente y lo cortamos pinchando en el botón de las tijeras. Vamos a la celda de la derecha y lo pegamos. Pulsamos INTRO y añadimos un par de renglones más. 
  • Guardamos el archivo como ej9c.htm y pasamos al navegador para ver cómo queda todo. 
 

Dando color al texto

Si necesitamos resaltar alguna palabra de forma especial recurriremos al menú desplegable que se encuentra entre el tamaño de letra y el indicador de negrita. Para ello habremos seleccionado previamente el texto al que deseamos cambiarle el color y tras pinchar en la flechita que despliega el tablero de colores elegiremos el que nos parezca más adecuado. 

Las páginas "arco iris" pueden resultar aparentemente muy impactantes, pero no suelen denotar un gusto estético muy elaborado. Utiliza los colores con mesura y siempre como recurso para enfatizar una información que lo requiera por su especial relevancia. 

  

Líneas de separación

La separación de bloques de información puede verse favorecida por la inclusión de lineas de división. Para hacerlo basta con recurrir al botón al efecto. 

La configuración de líneas horizontales que el editor de Netscape aplica por defecto incluye que las mismas se extiendan a lo largo del 100% de la página o de la celda si estamos en una tabla. Sin embargo, suele producir un efecto estético más agradable que reduzcamos la anchura. También puede ser interesante modificar la alineación que, por defecto se coloca al centro. Para realizar estas operaciones pulsaremos con el botón derecho sobre la línea y elegiremos Propiedades de la línea horizontal. 

Además de utilizar la línea que ofrece el programa podemos usar también como separadores gráficos diseñados al efecto (en estas páginas se utilizan dos: barra14.gif y barra14d.gif).  
 

Práctica 9-d

  • Abre un nuevo documento en el navegador y escribe en él varias bloques de texto que sean susceptibles de separación. 
  • Introduce entre el 1er y el 2º bloque una línea horizontal alineada a la derecha y con una anchura del 75% de la ventana. 
  • Entre el 2º y el 3er bloque inserta como separador el archivo barra14.gif (Para obtenerlo pasa al cambia al navegador, pulsa con el botón derecho sobre el gráfico y elige Guardar imagen como
  • Una vez que hayas hecho las modificaciones guarda el trabajo como ej9d.htm y comprueba el resultado. 
 
 

 
© Raúl Luna '98