Ramón Corominas escribió:
> Hola, Hernán.
>> Pero no quisiera creer que Ramón ha probado los esquemas haciendo zoom
>> sin tildar el "Solo ampliar texto"... cuando él mismo ha puesto como
>> condición que se pruebe en ese contexto!
>>
> No sé dónde puse yo esa condición, la verdad.
Fue tu "primera" condición, Ramón:
<cita de Ramón>
Venga, va, la última vez que explico el escenario:
- Diseño líquido, que no haga sroll horizontal al aumentar el tamaño de
letra (hasta un 200%).
</cita de Ramón>
Has dicho textualmente: "al aumentar el tamaño de letra", no has dicho
"al hacer zoom". Letra...
Además, me resultó muy coherente que pidieras eso, ya que, por
experiencia, me consta que las personas que necesitan ampliar mucho el
texto, prefieren usar la ampliación de "solo texto" para evitar el
scroll horizontal (es lo que he aprendido en los cursos de Accesibilidad
Web que he realizado, y es lo que enseño en los Cursos que dicto yo).
> Efectivamente lo he
> probado con esa opción desactivada, que es como he probado los layouts
> con tablas que se siguen viendo perfectos, incluso sin esa opción. En
> cualquier caso, admitiré la posibilidad de activarla, y en ese caso se
> cumplen todas las condiciones
Lo dijo, lo dijo! jajajaja!!!... :-)
Seguro que se cumplen, Ramón.
Resultado parcial del partido: DIV/CSS: 1 - Tablas: 0 ;-)
Casi cualquier layout que hace años se hacía con tablas, puede hacerse
con CSS; así como existen layouts que se hacen con CSS, que no podrán
hacerse jamás con tablas (ver ejemplo más abajo).
Pero no alcanza con que ambas técnicas logren lo mismo, sino "a costa de
qué otras consecuencias" lo hacen.
> aunque...
>
> Sigue habiendo un problema con una condición que yo entendía como
> implícita en el enunciado, pero que ahora veo que no lo es, que es la
> definición de "columna" (y yo mismo he contribuido a la confusión con
> algún ejemplo desafortunado).
>
Ah, bueno!... Cambiamos el terreno nuevamente... ahora sacas de la manga
una nueva condición! jaja! Eres muy bueno, Ramón... deberías de ser
abogado! :-)
> Para mí, cuando hablo de layouts en columnas, doy por hecho que las
> columnas son adyacentes (no unas dentro de otras)
Y lo son, Ramón.
Dentro de su fila, los DIVs son adyacentes. Ya está cumplida esa parte
de esta "nueva" condición que agregas...
Lo único "dentro de otro" es que esos DIV están dentro de un DIV que
funciona como contenedor de una fila... Tal como en tu tabla cada TD
debe estar "dentro de" un TR... ¿no es igual?
Ah, no! Es mucho peor aún en tus tablas, porque tu diseño te exige usar
TABLAS ANIDADAS, así que tus columnas no solo están "dentro de" un TR,
sino que ese TR, está "dentro de" una TABLA, que a su vez está "dentro
de" un TD, y éste "dentro de" un TR, y éste "dentro de" una TABLA de
nivel superior, para poder colocar columnas en distintas filas sin que
estés obligado a que todas las columnas sigan los mismos anchos (por más
"colspan" que uses).
Veamos qué es lo que está más "dentro de" otras cosillas... si los divs
o las tablas.
Mira mi código:
<div id="contenedor">
<div id="fila1">
<div id="columna1-fila1">
</div> <!-- fin columna1-fila1 -->
<div id="columna2-fila1">
</div> <!-- fin columna2-fila1 -->
</div> <!-- fin fila1 -->
<div id="fila2">
<div id="columna1-fila2">
</div> <!-- fin columna1-fila2 -->
<div id="columna2-fila2">
</div> <!-- fin columna2-fila2 -->
<div id="columna3-fila2">
</div> <!-- fin columna3-fila2 -->
</div> <!-- fin fila2 -->
<div id="fila3">
<div id="columna1-fila3"></div> <!-- fin columna1-fila3 -->
</div> <!-- fin fila3 -->
</div> <!-- fin contenedor -->
Es mucho más simple que tu tabla. Porque tu tabla por cada fila tiene un
TR y dentro de él, debes ANIDAR OTRA TABLA, donde a su vez tienes las
columnas (TD).
Mira una tabla de 3 filas, con 2, 3 y 1 columnas respectivamente (para
lograr el mismo esquema que mi código en DIVs):
<table width="100%" border="1"><!-- tabla de fondo, con 3 filas -->
<tr> <!-- fila 1-->
<td><table width="100%" border="1"> <!-- tabla anidada para las 2
columnas de fila 1 -->
<tr>
<td> </td> <!-- columna 1 -->
<td> </td> <!-- columna 2 -->
</tr>
</table></td>
</tr><!-- fin fila 1 -->
<tr> <!-- fila 2 -->
<td><table width="100%" border="1"> <!-- tabla anidada para las 3
columnas de fila 2 -->
<tr>
<td> </td> <!-- columna 1 -->
<td> </td> <!-- columna 2 -->
<td> </td> <!-- columna 3 -->
</tr>
</table></td>
</tr> <!-- fin fila 2 -->
<tr> <!-- fila 3 -->
<td> </td>
</tr> <!-- fin fila 3 -->
</table>
Para seguir tu esquema de variar en cada fila la cantidad de columnas y
poner alternativamente 2, 3, 4 o más columnas, si lo haces en tablas,
debes necesariamente utilizar TABLAS ANIDADAS (si no, por más "colspan"
que uses, te quedará el ancho de las columnas de una fila dependiente
del ancho de las columnas de otras filas... un molesto "detalle" que
tenían las tablas, no sé si te acuerdas... yo ya me había olvidado, hace
tanto que no las uso para maquetar!).
Resultado: DIV/CSS: 2 - Tablas: 0 ;-)
> estilables por
> separado,
Todo es estilable por separado usando DIVs, nada más fácilmente
estilable que apuntar hacia #columna1-fila3, o sea, hacia un "id" que
identifica a una columna, y ponerle una imagen de background posicionada
en cualquiera de los bordes de esa columna, y despegando el texto con un
padding solo de ese lado, para que deje ver la imagen perfectamente. Muy
simple.
> y que se extienden por igual en altura (es decir, que si le
> doy color a cada columna por separado, veré dos columnas de igual
> altura, aunque sus contenidos no ocupen esta altura por completo). Esto
> es algo que es inherente a las celdas de tablas, pero no a los divs
> normales.
Entramos en otro territorio mucho más subjetivo: el de la "estética".
Ramón: es que están totalmente PASADOS DE MODA esos diseños de
"rectángulos rígidos"!!... Ya no se usa eso de que cada columna esté
pintada de un color liso, o de un motivo repetido en mosaico. Es muy
antiguo ese enfoque, precisamente porque fue tan fácil de hacer con
tablas, y se usó hasta el hartazgo durante 15 años... Hoy día se
prefieren diseños más "libres de rectángulos", como el de cualquiera de
los diseños que puedes encontrar en www.csszengarden.com
En los diseños que allí ves, seguramente encontrarás muy pocas "columnas
rellenas de color uniforme", y en cambio encontrarás diseños como éste,
IMPOSIBLE de hacer con tablas:
http://csszengarden.com/?cssfile=/213/213.css&page=0
Resultado: DIV/CSS: 3 - Tablas: 0.
Gol de Css Zen Garden! ;-)
>
> Por eso en tu layout, efectivamente, se cumple todo, salvo que cuando se
> aplican estilos a cada contenedor como colores de fondo, bordes, etc.,
> aparecen los solapamientos entre las columnas. Es más o menos lo mismo
> que les pasa a otros layouts como los de Ruthsarian, ya que en realidad
> tú haces más o menos lo mismo.
Como te decía, eso NO SE USA MAS hoy día. ¿Bordes a un rectángulo? Creo
que no hay nada más "duro" en diseño que eso... Habiendo técnicas de
reemplazo de texto por imagen, pudiendo colocar backgrounds "sutiles" en
cualquiera de las zonas de una página... pero claro, ya estamos hablando
de estética, que no es terreno tan objetivo como el código.
No voy a discutirte en ese terreno: quédate con tus tablas anidadas para
pintarlas de un color liso y con bordes, que eso es bien "fácil". Yo,
como tantos otros (y como la mayoría de clientes!), prefiero los diseños
más modernos con CSS y sin rectángulos, que realmente son mucho más fáciles.
>
> De todos modos, quiero aclarar que no dudo de que dándole vueltas al
> tema se puedan crear columnas del 100% de altura, con anchos en ems
> combinados con porcentajes, y que cumplan todas las demás condiciones.
Seguro que se puede, no lo dudes...
> Lo que digo es que para estas cosas me parece tan simple el diseño con
> tablas que parece mentira que haya que complicarse tanto la vida para
> acabar llegando a lo mismo.
>
¿Simple? ¿De veras que te parece más "simple" esa maraña de tablas
anidadas que unos pocos DIVs con solo 7 declaraciones CSS, como tenía mi
ejemplo? No puedo creerte.
Tal vez (es solo una conjetura, no sé cómo codificas) solo estés
pensando en tu propia "facilidad" de pulsar un botón en un editor VISUAL
y crear la tabla. De veras, es que no te imagino codificando a mano los
TR y TD de una tabla anidada y defendiendo la "facilidad" de eso!
Entonces, claro, hablando de editores visuales, "parecería" que es más
fácil tocar un botón de un asistente que codificar a mano los divs.
Y digo "parecería", porque, uses el modo de edición que uses, existen
"metodologías" de diseño (o costumbres, como prefieras llamarlo) donde
nunca se parte desde cero. Lo típico es tener "esquemas prearmados" de
distinta cantidad de columnas, tanto el XHTML como el CSS (incluyendo la
hoja de estilos de reseteo), entonces uno simplemente se pregunta: "¿qué
tipo de diseño busco? ¿3 columnas?". Y copia los archivos XHTML y CSS de
3 columnas a una carpeta, y en 30 segundos ya tiene la base lista.
¿Qué es más simple entonces? Que cada uno saque sus propias conclusiones.
Pero yo creo que el partido éste ya está terminado, y se definió para el
lado de CSS por goleada... jaja! ;-) Me voy a dar una ducha a los
vestuarios...
Un saludo, Ramón!!
--
Hernán Beati
http://www.saberweb.com.ar
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
