Las capas se pueden definir como páginas que se pueden incrustar dentro de otras. Los atributos de una capa (posición, visibilidad, etc.), como los de cualquier otro elemento HTML, pueden definirse dentro de una hoja de estilo. Su contenido, en cambio, siempre deberá ser especificado dentro de la parte principal de la página. Como se puede ver, de nuevo estamos siguiendo la filosofía de separar el contenido y la forma de representarlo.
En realidad, el nombre de capas no es nada oficial: es un invento de Netscape. La denominación oficial podra traducirse como "contenido HTML posicionable dinámicamente". Tampoco se las puede considerar dentro de ningún estándar HTML sino de los estándares CSS, pero son la base de lo que se ha dado en llamar HTML dinámico.
Sin duda, lo más importante de las capas es la posibilidad que presentan de ser movidas y modificadas desde un lenguaje de script. Desgraciadamente, las implementaciones de Netscape y Explorer son incompatibles entre sí, por lo que resulta complicado escribir código que funcione en ambas plataformas.
Definición
La única manera común de definir capas en Explorer y Netscape (versiones 4 y superiores) es mediante hojas de estilo en sintaxis CSS, por lo que será la que usemos de aquí en adelante.
La definición de una capa sigue la misma estructura que la que usabamos para decidir las características de una etiqueta con el parámetro ID:
<STYLE TYPE="text/css">
#micapa {position:absolute; top:100px; left:20px;}
</STYLE>
Esto colocaría a la capa que hemos denominado micapa a 20 pixels de la izquierda de la página y a 100 del comienzo de la misma. Muy bien, pero... ¿donde escribimos lo que queremos que contenga la capa? Utilizaremos para ello la etiqueta <SPAN>:
<DIV ID="micapa">
<H1>El ttulo de la capa</H1>
<P>Aquí es donde iría el texto.
...
</DIV>
Las capas que hemos definido hasta ahora se colocan en una posición determinada de la página. Pero existe otro tipo de capas llamadas flotantes cuya colocación depende, en cambio, de la posición dentro del código fuente de la página donde las hayamos colocado. Se definen así:
<STYLE TYPE="text/css"> #flotante {position: relative; left: 20px; top: 100px;}
</STYLE>
Propiedades
Existen varias propiedades de las capas que podemos modificar, como son la posición, la visibilidad, el orden en que se ponen en pantalla, etc... Son estos:
|| Propiedad || Descripción || Posibles valores ||
|| left y top || Sitúan la esquina superior izquierda de la capa respecto a la esquina superior izquierda de la capa donde esté metida. Hay que tener en cuenta que el documento completo también se considera una capa. || distancia en pixels, por defecto cero. ||
|| width y height || Determinan la anchura y altura de la capa. || un tamaño en pixeles. ||
|| clip || Nos permite definir el área que se podrá ver dentro de la capa. Por ejemplo, clip:rect(20px 30px 40px 10px); recortará la capa creando un cuadro visible cuya esquina superior izquierda está a 10 pixels por la izquierda y 20 por arriba de la de la capa y cuyo tamaño sería de 30-10 de ancho y 40-20 de alto. || un área. ||
|| z-index || Las capas con un mayor z-index se colocarán más arriba (se dibujarán al final, encima de las otras). Debe ser un valor positivo y único: dos capas no pueden tener el mismo z-index. || número positivo, por defecto las capas definidas en el código HTML más tarde están más arriba. ||
|| visibility || Especifican si la capa debe verse o estar oculta. || visible, hidden (oculta) o inherit (hereda la visibilidad de la capa padre). En aquellas capas que simplemente estén dentro de la página principal, este valor es equivalente a visible. ||
|| background-image || Gráfico de fondo de la capa. || una dirección. ||
|| background-color<imagenenlinea direccion="graficos/explorer.gif" descripcion="explorer"/> y layer-background-color<imagenenlinea direccion="graficos/netscape.gif" descripcion="Netscape"/> || Color de fondo de la capa. || un color. ||
Sonido
Aún cuando les pueda parecer increíble a algunos, es posible escuchar sonidos (o música) desde el propio navegador. Tanto Netscape como Explorer incorporan desde hace tiempo la capacidad de reproducir sonido. El único problema es que los archivos suelen ser grandes y, siendo algo innecesario y superfluo, poca gente incluye melodías en sus páginas.
Los formatos que se puede asegurar que los navegadores reproducirán son los archivos WAV y MID. Para poder reproducir otros necesitarn el
plug-in o añadido necesario, como puede ser el Real Audio para los archivos RA o el ModPlug para los MOD y derivados.
Sonido activado por el usuario
La manera más sencilla de incluir sonidos es dejando al usuario la decisión de escucharlos o no. Para hacerlo incluiremos el sonido en el parámetro HREF de un enlace, como si fuera una página HTML:------**Sonido de fondo
Lo del sonido de fondo ya es más complicado, ya que Netscape y Explorer ofrecen soluciones propietarias, distintas e incompatibles de hacer sonar un archivo de fondo.
En Explorer, desde la versión 2.0, se pueden incluir fondos sonoros utilizando la etiqueta BGSOUND :
<BGSOUND SRC="musica.mid">
El parámetro SRC indicará el archivo a reproducir. Esta etiqueta admite también otro parámetro, LOOP, que indica el número de veces consecutivas que sonará el fichero. Si se indica LOOP="infinite", el archivo se reproducirá indefinidamente, mientras estemos en la página.
Netscape utiliza su etiqueta <EMBED>. Teóricamente, esta etiqueta debería servir para unir objetos de varios tipos a la página web, pero en la práctica sólo se utiliza para esto. Esta etiqueta tiene los siguiente parámetros:
|| Parámetro || Utilidad ||
|| SRC || Contiene el nombre de archivo de sonido a reproducir ||
|| WIDTH y HEIGHT || En Netscape aparece un pequeño reproductor, estos parámetros especifican su tamaño. ||
|| AUTOSTART="true" || Arranca automáticamente la reproducción. ||
|| LOOP="true" || Reproduce ininterrumpidamente el fichero hasta que salimos de la página. ||
|| HIDDEN="true" || Oculta el reproductor. ||
Sin embargo, y debido a algunos bugs, si queremos reproducir infinitamente un archivo con el reproductor oculto, deberemos incluir todos los parámetros, incluyendo WIDTH y HEIGHT. Además, si el usuario tiene algún plug-in de sonido extraño, en lugar del que viene con Netscape, es posible que deje de funcionar correctamente.
Dado que ambas etiquetas son incompatibles entre sí, basta con incluir las dos... o, mejor dicho, bastaba. Ahora el Explorer es capaz de interpretar <EMBED>, pero no exactamente de la misma manera, lo que provoca que aparezca una ventana aparte con el reproductor. En definitiva, la mejor manera de mostrar una música de fondo es usando un pequeño script que averigue en qué navegador está instalado y discrimine.
