Algunos críticos del diseño “2.0″ y el uso de estándares mencionan que es una moda impráctica el uso de la semántica en el diseño de un sitio web. Sin embargo, a pesar del costo en tiempo, capacitación y cambio de paradigmas que implica el comenzar a diseñar y diagramar en capas y con CSS en lugar de tablas, el resultado es altamente benéfico. Bien vale la pena reescribir nuestro entender de la diagramación y construcción de sitios.
¿Por qué tablas?
Las tablas son un elemento útil. Básicamente nos da la posibilidad de ordenar elementos dentro de una estructura, posicionando de maneras fijas imágenes, textos y formas. Sin embargo, para lograr tal oden debemos reconocer que hay un costo alto: la transferencia de datos y el tiempo de carga del sitio.
Para fijar elementos dentro de una tabla sólo hay que incrustarlos, pero estos no son independientes de su entorno, si no que se combinan para hacer un todo. Por tanto, hay que poner esa tabla, con esos elementos, dentro de otra tabla, misma qu emuchas veces queda dentro incluso de otra más.
Por ejemplo: Tablas contra Capas
Si quiero centrar un elemento usando tablas, deberé usar tres columnas y tres renglones. La primer y última columna midiendo 10px para poder usarlos en ubicar un fondo que puede crear un marco. Las esquinas se usarían para poner imágenes redondeadas y así tendríamos un bello cuadrilátero, con esquinas redondeadas y márgenes de 10px alrededor del contenido perfectamente centrado. Ok, eso es lo que quiero. No voy a poner las imágenes, pero básicamente el código se vería así en HTML 4.01 transicional:
<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="10"> </td>
<td> </td>
<td width="10"> </td>
</tr>
<tr>
<td width="10"> </td>
<td> </td>
<td width="10"> </td>
</tr>
<tr>
<td width="10"> </td>
<td> </td>
<td width="10"> </td>
</tr>
</table>
Si quiero hacer lo mismo, en XHTML 1.0 Transicional:
<div id="cuadro"></div>
El extra, es la aplicación de una sencilla descripción en CSS de las propiedades de ese Div:
#cuadro {
width:800px;
margin: 50px auto;
padding:10px;
}
Lógicamente, a menos texto, menos transferencia de datos y menos tiempo de carga.
Por dónde comenzar.
Lo más adecuado al momento de iniciar una migración mental y emocional al mundo de la diagramación semántica es pensar que hay un beneficio mucho mayor. No es una moda geek, no es un grado de élite, no es una pérdida de tiempo.
Sí, en efecto puedes tardar menos (al principio, sólo al principio) en hacer la diagramación de un sitio en capas contra el apretar botones en Dreamweaver para hacer tablas. Quizá las tablas te ayuden a sacar rápido el trabajo de un cliente que tú crees no se va a dar cuenta de ello. Sin embargo, el cliente se va preguntar tarde o temprano por qué con 50 visitas a la semana, se le está acabando la taza de transferencia mensual y por qué tantos datos aparecen en sus estadísticas si lo único que tiene allí es una serie de cartas para sus clientes.
Más que un tutorial, este post es un pequeño argumento para tí que te resistes a cambiar. Creeme, vale la pena. A mi me costó, pero lo hice. A veces te resulta casi imposible resistir la tentación de construir esa página en tablas, cuando estás tratando de imaginar cómo aplicar el CSS a lo que estás armando y el “WYSIWYG” no siempre relfleja fielmente lo que estás construyendo; pero calma y verás muy pronto que no es lo mismo transferir una página en 5 segundos en lugar de 50 y que no es lo mismo 30kb que 500.
Feed
Facebook
Twitter
Ya, en Salto de Xala, recuerdo que era rico. Puedo meterlos en la columna que viene si es rico. :-)
