Test Matemático(III)
por Luciano Moreno, del departamento de diseño web de BJS Software.

CAPAS Y POSICIONAMIENTO.-

Hace poco tiempo (aunque en esto del diseño web parece ya que fué mucho) las páginas web se construían exclusívamente con las típicas etiquetas de HTML, usando fundamentalmente tablas y frames para la maquetación y colocación de elementos en ellas. Pero estas herramientas pronto llegaron a ser insuficientes, debido al constante avance en diseño y la demanda cada vez mayor de sitios web con funcionalidades y sistemas de presentación dinamicos. Por este motivo las casas desarrolladoras de navegadores web (Microsoft y Nestcape fundamentalmente), junto con los estudios y consejos del W3C, volcaron sus esfuerzos en facilitar a los creadores web herramientas que les permitieran un mayor control sobre sus páginas, aunque eso sí, cada uno por su parte, como hacen siempre.

De este esfuerzo surgieron las capas y las etiquetas para definirlas y manejarlas. Nestcape sacó primero la etiqueta LAYER, que permitía una cierta libertad de acción, pero que tuvo el gran inconveniente de la incompatibilidad con otros navegadores, al ser una etiqueta propietaria. Microsoft por su parte se decidió por implementar como capas primero la etiqueta IFRAME, y después las etiquetas DIV y SPAN, que aunque ya existían en los estandares de HTML, se utilizaban sólo para crear bloques de texto.

Estas etiquetas se vieron reforzadas con la implementación del CSS Positioning, o posicionamiento mediante Hojas de Estilos en Cascada, y pronto fueron aceptadas y ámpliamente usadas por los diseñadores, de tal forma que Nestcape se vió en la necesidad de modificar su navegador para que pudiera usar estas nuevas técnicas. Se implementó el sitema en las versiones de Nestcape 4x, aunque sólo parcialmente, y en las nuevas versiones de Nestcape 6x se implementaron en su totalidad. Los navegadores que permiten el uso de capas, CSS y CSS positioning reciben el nombre de navegadores de cuarta generación.

Podemos definir una capa como un rectángulo virtual en el que podemos introducir texto, imágenes y cualquier conjunto de etiquetas HTML estandares. Mediante CSS podemos asignar propiedades de estilo tanto a la capa como al contenido de ella, como pueden ser tamaño de los textos que incluye, color de fondo y del texto, acolchado (padding) o margenes, etc.

Y mediante CSS positioning podemos situar estas capas en nuestra página, independientemente del código estandar HTML que esta contenga, ya que las capas son consideradas por el navegador como elementos totamente independientes, y también podemos, mediante código de scripting, acceder a las propiedades de cada capa, leerlas y modificarlas en tiempo real. Este es el fundamento del HTML Dinámico.

Una capa definida mediante DIV o SPAN se establece y se le da estilo mediante la sintaxis:

<DIV STYLE="atributo:valor;atributo:valor;.....">contenido de la capa</DIV>

Vamos a ver los principales atributos de posicionamineto que nos ofrece CSSP. Si deseaís conocer los atributos normales de CSS podéis estudiar el capítulo correspondiente a formateo de texto, en el que hay un resumen de ellos.

Atributos de CSSP.-

Los atributos mas usados de CSSP son:

• position:absolute / relative / static , define si la capa va a estar posicionada absolutamente, con lo que su posicionamiento no va a depender de la posición de la etiqueta DIV dentro del código general de la página, relativamente, con lo que entonces sí dependera de dicha posición o estaticamante, es de cir, que no va a estar posicionada, y que es el valor por defecto. Para el uso de capas con posicionamiento en HTML Dinámico deberemos posicionar las capas absolutamente, ya que si no lo hacemos así no podremos acceder y cambiar alguna de sus propiedades más importantes.
  
  
• top:medida-unidad, define la posición de la esquina superior izquierda de la capa, respecto al borde superior de la pantalla útil del navegador. La medida se debe dar en forma de número entero (no es recomendable ni a veces admitible usar tantos por ciento) y la unidad se puede dar en pixels (px), puntos (pt), picas (pc), milímetros (mm), etc, siendo validad todas las unidades definidas en el estándar.
  
  
• left:medida-unidad, define la posición de la esquina superior izquierda de la capa, respecto al borde izquierdo de la pantalla útil del navegador. La medida se debe dar en forma de número entero (no es recomendable ni a veces admitible usar tantos por ciento) y la unidad se puede dar en pixels (px), puntos (pt), picas (pc), milímetros (mm), etc, siendo validad todas las unidades definidas en el estándar. Ejemplo:
  
  <DIV STYLE="position:absolute;top:100px;left:50px">contenido de la capa</DIV>
  
  
• width:medida-unidad, define el ancho que va a tener el rectángulo virtual de la capa, y el conjunto medida-unidad tiene las mismas especificaciones que los atributos anteriores.
  
  
• height:medida-unidad, define el alto que va a tener el rectángulo virtual de la capa, y el conjunto medida-unidad tiene las mismas especificaciones que los atributos anteriores.
  
  
• clip:rect(medida-unidad, medida-unidad, medida-unidad, medida-unidad), define el recorte (cliping) que se va a dar al rectángulo virtual de la capa, y el conjunto medida-unidad tiene las mismas especificaciones que los atributos anteriores. De los cuatro conjuntos medida-unidad el primero representa el recorte horizontal superior que damos a la capa, el segundo el vertical izquierdo, el tercero el horizontal inferior y el cuarto el vertical derecho.
  
  

  

  Normalmente se recortan las capas sólo en la segunda y tercera opción, es decir, se recorta su ancho por la derecha y su altura por abajo. Es un atributo muy importante y debemos usarlo casi siempre, generalmente especificando en el recorte las mismas medidas que tiene la capa. Ejemplo:
  
  <DIV STYLE="position:absolute;top:150px;left:200px;width:200px;height:150px;clip:rect(0px,200px;150px;0px;">contenido de la capa</DIV>
  
  Si queremos obtener una capa de un tamaño determinado y le asignamos la anchura y la altura adecuada pero no la recortamos, Internet Explorer mostrarala capa con el tamaño adecuado siempre que la anchura y la altura del contenido de la capa no sea superior a las fijadas para ésta, en cuyo caso la capa se abrirá en anchura y altura lo necesario para mostrar completo todo su contenido. En el caso de Nestcape 4x obtendremos la altura prefijada, pero sólo la anchura necesaria para mostrar el contenido de la capa, y si el contenido excede en dimensiones al tamaño de la capa, ésta se abrirá lo mismo que en Explorer. Para ver esta situación claramente definimos dos capas con color de fondo (luego veremos como se define este) de 300x200px, una de ellas con poco contenido y otra con mucho.
  
  En cambio, si recortamos la capa asignando en el recorte el mismo tamaño que le hemos asignado mediante width y height obtendremos la capa en con el tamaño adecaudo, tanto si tiene poco contenido como si tiene excesivo. En este último caso si el contenido de la capa es texto, éste saltará de línea al llegar al final del ancho disponible, y si es una imagen sólo se vera de ella la porción que quepa dentro de la capa recortada.
  
  Ejemplos:

  capa sin recortar con poco contenido	capa sin recortar con excesivo contenido
  capa recortada con poco contenido	capa recortada con excesivo contenido

  
  
  Cuando lo que deseamos situar dentro de la capa es una imagen no es necesario recortarla, ya que ésta adpatará su tamaño al de la imagen.
  
  
• background-color:color / layer-background-color:color, que establece un color de fondo para la capa, correspondiendo la primera sintaxis a Internet Explorer y Nestcape Navigator 6x, y la segunda a Nestcape Navigator 4x. El color debe expresarse mediante su código hexadecimal o mediante su nombre web inglés estándar.
  
  
• visibility:visible / hidden, que establece la visibilidad de la capa, pudiendo con él lograr que una capa aparezca en pantalla (visible, que es el valor por defecto) o que desaparezca (hidden). En este último caso no sólo desaparece la capa, si no también todo su contenido, por lo que si contiene imágenes, enlaces u otros elementos estos no se mostrarán.
  
  Aunque el valor del atributo cuando se establece inicialmente es el mismo para todos los navegadores, si queremos variar su valor dinámicamente deberemos expresarlo de forma diferente según el navegador usado. Así tendremos:
  
  

  	I.Explorer	Nestcape 4x	Nestcape 6x
  visible	visible	show	visible
  oculta	hidden	hide	hidden

  
  
  Ya veremos más adelante cómo se aplica esto
  
  
• z-index:n, que define la coordenada z o cota de profundidad de una capa, y donde n es un número entero mayor o igual que 1. Si imaginamos cada capa como un folio de papel, de tal forma que podemos sobreponer en pantalla un folio encima de otro, viéndose el que esté encima de los demas, ésta propiedad establece el orden o posición de cada folio en el montón. Si dos capas coinciden en posición en el espacio de la pantalla se mostrará entera la que tenga mayor valor en su atributo z-index, y de la que esté inmediatamente debajo sólo se mostrarán aquellas partes que no coincidan con la capa de arriba. Si no se establece éste atributo, el orden de apilamiento coincidirá con el de definición de la capa en el código de la página. Como ejemplo, vamos a situar en pantalla dos capas, una roja y otra azul, de tal forma que coincidan en ciertas partes del espacio, habiendo asignado un valor z-index mayor a la capa azul. El resultado lo podéis apreciar aqui.
  
  

Estilos en cabecera y ficheros externos.-

Aunque en las anteriores explicaciones hemos puesto algunos ejemplos en los que situamos los atributos de estilo dentro de la propia etiqueta DIV o SPAN mediante STYLE, podemos también, y es mucho más aconsejable, situar los atributos de estilo para las capas en la cabecera de la página, entre la etiqueta </TITLE> y la etiqueta </HEAD>. Para ello se utiliza la pareja de etiquetas <STYLE TYPE="text/css">....</STYLE>, incluyéndose dentro de las mismas la definición de estilo de cada capa mediante un nombre que asignamos a cada capa, que debe ser único para cada una, precedido de un caracter # y seguido por los atributos encerrados entre llaves. Ejemplo:

<HTML>
<HEAD>
<TITLE>nuestro título</TITLE>
<STYLE TYPE="text/css">
#capa1{position:absolute;top:100px;left:50px;width:200px;height:150px;z-index:2;}
#capa2{position:absolute;top:200px;left:300px;width:500px;height:250px;z-index:3;}
.....
</STYLE>
</HEAD>
<BODY>
<DIVID="capa1">contenido de la capa</DIV>
<DIVID="capa2">contenido de la capa</DIV>
.....
</BODY>
</HTML>

Donde vemos que luego, en el BODY de la página asignamos a cada capa su estilo mediante el atributo ID="nombre_capa". Este método es mas compatible que la definición de atributos en línea, sobre todo porque Nestcape 4x se puede liar si lo hacemos de ese modo.

También es posible por último sacar fuera de la página las definiciones de estilo para las capas. Para ello creamos un fichero independiente que sólo debe contener la definición de estilos:

#capa1{............}
#capa2{........}
................

y lo salvamos con el nombre que deseemos y las extensión .css. Con esto sólo nos queda llamarlo desde la cabecera de la página, lo que se consigue con la etiqueta:

<LINK REL="stylesheet" TYPE="text/css" HREF="ruta_carpeta/fichero.css">

Bueno, por ahora ya está bien. No están aquí todos los atributos CSSP pero sí lo mas usados, y a nostros nos basta por ahora con ellos para nuestro problema. Continuémos pués con él.