Capas, qué y como.

[Jorolo]

Hola a todos.

No paro de leer comentarios del tipo: las capas esto, las capas lo otro.

¿Qué es una capa? ¿Cómo se hace una capa?

[etanol]

Una capa es un código que forma parte de la web y que tiene un comportamiento muy independiente dentro de la ventana del navegador. Se puede colocar en cualquier parte de la página web y sirve para ubicar el código que se situa entre sus etiquetas.

Las etiquetas que se utilizan normalmente son:

Código:

<DIV></DIV>
<LAYER></LAYER>
<SPAN></SPAN>

Cada tipo de etiqueta tiene sus atributos propios para ubicar su contenido en la web.

Por ejemplo:

Código HTML:

<div id="c1" style="position:absolute; left: 200px; top: 100px;">Hola</div> 

Con este código aparecerá "Hola" en una localización de 200 pixels a la izquierda y 100 pixels desde el inicio de página.

Un saludo.

[Jorolo]

Hola etanol.

Muchas gracias por la respuesta

Las etiquetas que se utilizan 'normalmente' son:
Código:

<DIV></DIV> <LAYER></LAYER> <SPAN></SPAN>

¿layer? ¿de que lenguaje es ese elemento?

¿normalmente?? ¿pueden crearse 'capas' con otras etiquetas? ¿cuales?


Interesante el ejemplo:

<div id="c1" style="position:absolute; left: 200px; top: 100px;">Hola</div>

¿Puede crearse una capa con el elemento p?
<p id="c1" style="position:absolute; left: 200px; top: 100px;">Hola</p>

[thisisalexis]

Iniciado por Jorolo

Hola etanol.
¿Puede crearse una capa con el elemento p?
<p id="c1" style="position:absolute; left: 200px; top: 100px;">Hola</p>

No según los estándares. Las etiquetas DIV y LAYER son, por excelencia, las utilizadas para la creación de capas; que alguien me corrija si me equivoco, pero la etiqueta LAYER tiene problemas de incopatibilidad con algún navegador, no recuerdo si es el IE o el Netscape, es por ello que la que se utiliza en la mayoría de los casos, para maquetar una página Web, por ejemplo, es la etiqueta DIV.

[Jorolo]

Hola thisisalexis.Gracias por la respuesta.

Iniciado por thisisalexis

No según los estándares. Las etiquetas DIV y LAYER son, por excelencia, las utilizadas para la creación de capas;

¿Podrias ser un poco más específico? ¿Según qué estándares? Te lo pregunto por que ha quedado en el aire una pregunta.

Iniciado por Jorolo

¿layer? ¿de que lenguaje es ese elemento?

Segun el estándar xhtml 1.0 no existen ni el elemento ni la etiqueta layer.

Otra duda que tengo es con cuantos y cuales elementos puedo crear una capa

Iniciado por etanol

Las etiquetas que se utilizan normalmente son:

Iniciado por thisisalexis

Las etiquetas DIV y LAYER son, por excelencia, las utilizadas para la creación de capas;

Ambos dais a entender (o al menos no descartais) la posibilidad de crear capas con elementos distintos a div, pero no mencionas ninguno
En realidad la cosa es peor, etanol me indico tres elementos, despues de tus comentarios solo me queda uno.

Reformularé mi pregunta inicial:
¿Qué diferencia hay entre una 'cosa' que sí es una capa y una 'cosa' que no es una capa?

[Slaider]

y como se hace para que una capa no se modifique de sitio segun la resolucion de la pantalla o el navegador?

[tunait]

Qué tal,

el tag LAYER fue un invento de Netscape 4.x (tag propietario) que sirvió para hacer entonces lo que hoy se hace con un elemento posicionado en forma absoluta. A partir de la versión 5.x + se retiró y Netscape ni siquiera mantuvo la compatibilidad con el tag en las versiones posteriores a la 4.x.

Una capa, según mi apreciación, es un concepto y entiendo que se refiere a un elemento posicionado de forma absoluta. El elemento que se use para una "capa" puede ser casi cualquiera, dado que con estilos podemos cambiar todas o casi todas sus propiedades y hacer que se comporte como un div.

"Creo" que el llamar capas a los elementos posicionados en forma absoluta es una consecuencia de quienes usan o han usado dreamweaver, puesto que dw llama "capas" (layers) a contenedores posicionados de esta forma y los tags que ofrece para ello son precisamente span, div, layer e ilayer.

Si estoy equivocada en algo, me corrijan por favor

Un saludo

[Manoloweb]

Es correcto Tunait, el concepto de CAPAS no es algo de html ni de los estándares web. Es un concepto "abstracto" que se refiere al posicionamiento de elementos en tres dimensiones dentro de un diseño.

Esto puede verse muy claramente cuando se usan programas como Photoshop, donde cada "layer" creado tiene una posición X (horizontal), Y (vertical) y además una posición Z (profundidad).

Esta posición Z es la que permite lograr efectos de elementos que parecen estar "detras" o "delante" de otros.

Con esa idea en mente, nuestros amigos de Macromedia (uaggghh!) usaron el término cuando se encontraron con una posibilidad similar en la construcción de páginas web.

Dicha posibilidad no es otra cosa que la característica de CSS que permite indicarle casi a cualquier elemento sus dimensiones (ancho, alto) y su posición (sea absoluta o relativa) en la página. Además de poder controlar su ubicación en orden de profundidad (z-index).

Por lo tanto, la respuesta a la pregunta original es la siguiente:

¿Que es una capa?
Es cualquier elemento html de bloque que ocupa una posición determinada en el orden de profundidad, vertical y horizontal.

Algunos elementos que NATURALMENTE son considerados como "bloques" son <div>,<p>,<table>,<ul>,<ol>,<blockquote>,<pre>,<if rame>,etc..

Otros elementos que NO son de bloque, pero usando CSS pueden cambiar su tipo de despliegue a "block" son...
<span>,<a>,<img>,<cite>,<strong>,<em>,<input>,<lab el>,<select>, etc...


¿Cómo se hace una capa?
En realidad siempre que se construye una página html se está haciendo una serie de "capas", que aunque tienen las tres "dimensiones" estas aparecen de forma secuencial (una despues de la otra, y así subsecuentemente).

Si queremos MANIPULAR las capas, eso ya es cosa de aplicar estilos para ubicarlas en su posición deseada.



Resumen: No existe tal cosa como "capas" en HTML, sin embargo existe una serie de atributos de los elementos que pueden hacerlos comportarse como capas, y esos atributos son manipulables principalmente desde las hojas de estilo (CSS ó XSLT).

Espero haber ayudado a aclarar esta pregunta

Saludos!

[Jorolo]

Hola a todos.

Muchas gracias tunait por la respuesta.

De tus comentarios saco dos conclusiones
1- las capas no existen, son solo un concepto. Una forma (engañosa) de nombrar algo que sí existe.
2- Dreamweavwr engaña a sus usuarios inculcandole conceptos erroneos y les 'ayuda' invitandolos a usar 'cosas' como layer que no solo no son estándar sino que además son 'cosas' que no están soportadas ni "por la madre que las parió" (lease Netscape)


Hola slayder. Dos cosas.
1- ¿Qué más da la resolución? el 50% es siempre la mitad.
2- ¿No hubiera sido mejor plantear tu consulta en un tema nuevo?


Hola manoloweb.
Muchisimas gracias por tu lúcida y extensa aportación al tema.

[tunait]

Iniciado por Jorolo

2- Dreamweavwr engaña a sus usuarios inculcandole conceptos erroneos y les 'ayuda' invitandolos a usar 'cosas que no solo no son estándar sino que además son 'cosas' que no están soportadas ni "por la madre que las parió" (lease Netscape)

Yo no diría tanto como que Dreamweaver engaña; más bien creo que por falta de conocimientos el usuario lo entiende así y le queda un concepto equivocado. DW te da la herramienta pero quien la use se supone que debería saber qué es lo que está haciendo.

DW no ofrece la posibilidad de insertar un div o un span desde un botón o menú. Si lo quieres debes teclearlo a mano en el código fuente. La única forma que dw ofrece para insertar estos elementos es para posicionarlos sólo de forma absoluta desde un botón o desde el menú bajo el nombre de "capa" (o layer en su versión en inglés) y permite configurar algunas propiedades pero ninguna de ellas es la propiedad position. Quienes no estudian un poco de html y css no saben que un span o un div pueden tener otros usos y por lo tanto asocian a que un div o un span es una capa. Por eso cuando se les habla de maquetar sin tablas usando divs lo confunden con capas.

no son estándar sino que además son 'cosas' que no están soportadas ni "por la madre que las parió" (lease Netscape)

Me gustó eso