Sin embargo me encontré un excelente artí­culo muy sencillo para modificar el loop de WordPress y lograr que los miniposts tengan la apariencia ideal de un modo sencillo. Visita Rudeworks para los detalles y Poderenliena.com pra ver qué tal me quedó.

¿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">&nbsp;</td>
    <td>&nbsp;</td>
    <td width="10">&nbsp;</td>
  </tr>
  <tr>
    <td width="10">&nbsp;</td>
    <td>&nbsp;</td>
    <td width="10">&nbsp;</td>
  </tr>
  <tr>
    <td width="10">&nbsp;</td>
    <td>&nbsp;</td>
    <td width="10">&nbsp;</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.