único) recurso para representar datostabulares. Si tienen que incluir una tablade posiciones en un sitio de fútbol, lo me-jor es usar una tabla, no hay otro elementomás adecuado. Entonces, el consejo es: nointenten forzar con CSS la función delas tablas, porque realmente es muy com-plejo y, al fin y al cabo, estaría mal semán-ticamente. No se preocupen, en una futuranota de Webmasters veremos cómo usarcorrectamente las tablas, no sólo cubriendola función de sus elementos principales(desde TD hasta TFOOT), también veremosla forma de darles atractivo visual con CSS.Las tablas son un mundo aparte que es ne-cesario estudiar con detenimiento.Suficiente teoría, empecemos con lo intere-sante. Es hora de que veamos un poco depráctica. En las siguientes páginas, explica-remos paso a paso cómo maquetar un sitiode tres columnas utilizando solamente CSSy XHTML. Como nos gusta meternos con losgrandes, tomaremos como ejemplo al sitiode Tectimes (www.tectimes.com). Empecemos.

PATRONES EN DISEÑO WEBAntes de empezar a echar mano en el có-digo, primero es bueno pensar la estruc-tura que tendrá nuestro sitio sin maqui-llaje (sin CSS), es decir, cuáles serán susbloques o secciones componentes. Estoes útil para que luego su transición a có-digo sea lo más sencilla posible. Una vezque tenemos los bloques lógicos en la ca-beza, podremos pasar esta estructura aun documento XHTML más fácilmente.Empecemos entonces por el primer caso quepodemos identificar: un portal o sitio condos columnas. El patrón que se repite en es-tos sitios es el de una cabecera, una secciónizquierda o derecha, el contenido y un pie

■ Hacen más lenta la carga de un sitio.Imagínense un sitio con 15 tablas ani-dadas (1 tabla principal, que centra lasdemás tablas, y tablas por cada sección).Ahora imaginen que ese sitio es Tecti-mes, u otro sitio con mucho tráfico dia-rio. El resultado de estos ingredientesmezclados es: mayor peso de la página,tiempos de respuesta lentos y mayorgasto en ancho de banda. Es decir, pier-den todos, el sitio y sus visitantes.

■ Son una traba más para la accesibi-lidad. Los lectores de pantalla tienden aleer el contenido de las tablas en formasecuencial. Sin embargo, muchos sitios alser leídos de esta manera no tienen signi-ficado, agotando las posibilidades de lec-tura para gente con discapacidad visual.Por otro lado, imaginemos el caso de unnavegador de un celular. Este navegadorse llevará mucho mejor con un docu-mento XHTML que tiene significado sinsus elementos de presentación que, porejemplo, con decenas de tablas anidadas.

■ Hacen difícil la tarea de manteni-miento. Aunque al principio el maquetarcon tablas puede ser fácil, a la larga, man-tener tales sitios es realmente difícil, sobretodo si no contamos con un editor visualde código como Dreamweaver. Leer elcódigo de tablas anidadas en sitios gran-des es realmente imposible. Y pasar el có-digo de estas tablas anidadas entre variosdesarrolladores suele traer problemas.

Antes de continuar, no quiero venderles laidea de que el usar tablas en HTML está mal.Como lo mencioné anteriormente, las ta-blas son un excelente (en realidad, el

USR2.01 88

in duda alguna, la primera técnicaque aprendemos (o que nos ense-ñan) cuando recién nos iniciamos enel arte de diseñar sitios web es la de

maquetación (diseño del layout) con tablas. Las tablas son un recurso hasta cierto puntoválido que nos permite controlar con granprecisión el layout o diseño de un sitio. La ne-cesidad del diseño con tablas data de las pri-meras épocas del diseño web, en donde losdiseñadores de medios impresos (que hacíansus primeras incursiones en la Web) buscabanrepresentar de alguna manera una “trama” o“grilla” invisible en donde posicionar los ele-mentos, tal como lo hacen al maquetar libros,revistas y/o otras publicaciones gráficas.Cuando estos diseñadores se dieroncuenta de que con el atributo border=0podían eliminar los bordes de las tablas, ycuando entendieron que en cada celda sepodía representar una parte del layout(ya sea la cabecera del sitio o una boto-nera), no dudaron en utilizar tablas y mástablas anidadas para sus sitios.Sin embargo, usar tablas para maquetar,es decir, para posicionar columnas detexto y elementos gráficos, es semán-ticamente incorrecto; las tablas nunca sepensaron para el diseño de sitios, se crea-ron con el fin de utilizarlas para represen-tar datos tabulares, como por ejemplo,una salida de nombres y apellidos de unabase de datos, o una tabla de últimas po-siciones en un campeonato de fútbol. Las tablas, junto con los GIFs espaciadorestransparentes, son la resaca del diseño web.No son más que elementos de presentaciónque agregan basura en nuestro código HTMLy que pueden ser fácilmente reemplazablespor CSS. Entre las tantas desventajas de usartablas para maquetar podemos nombrar:

: ”=}{>< . ;~_+

WEBMASTERS

Desarrollador web, Rodrigo esun apasionado por todo loque vaya después de http://

RODRIGO GALINDEZrodrigo@simplelogic.com.ar

««

S

DISEÑO DE SITIOS WEB UTILIZANDO SOLAMENTE CSS

MAQUETAR SITIOS CON TABLAS ES PENSAR TODAVIA COMO EN EL AÑO 2000. ESTAMOSEN EL 2005, HAY MEJORES METODOS, MAS ACCESIBLES Y MAS SENCILLOS DEAPRENDER. HOY VAMOS A IR UN POQUITO MAS ALLA: VEAMOS EL DISEÑO DE SITIOSUSANDO SOLAMENTE HOJAS DE ESTILO EN CASCADA Y UN POCO DE BUEN XHTML.

«

Adiós tablas

88-92-Webmasters-U174.qxd 9/19/05 14:48 Page 88

un contenido y un pie de página. La cabecera no es diferente de la de los sitios de dos co-lumnas, a lo sumo agregan banners o un pequeño formulario para el registro de usuarios, pe-ro el espacio reservado es el mismo. En el menú izquierdo podemos encontrar las seccionesdel portal (Terra.com tiene sus canales a la izquierda) y en la derecha, últimas noticias o anun-cios publicitarios. En el área de contenido se puede esperar cualquier cosa, desde grandes imá-genes con enlaces a notas internas (es el caso de Ciudad.com.ar) hasta noticias y contenido des-tacado (es el caso de Uol.com.ar). En el pie de página, muchos portales tienen un formulario debúsqueda (pésima decisión de usabilidad) e información de copyright.

ANALIZANDO TECTIMES A FONDOTectimes es un típico sitio con tres columnas de ancho fijo, es decir, tiene 760 pixelesde ancho y éste no es variable. Veamos sus componentes fundamentales y una descrip-ción de cada uno de ellos:

En negrita están resaltadas las secciones que se repiten en todos los sitios de tres columnas. Ade-más de estos bloques lógicos, Tectimes agrega una barra superior, que será muy fácil de incluiren nuestro nuevo layout, y por otro lado, una botonera y una barra de navegación, que a losfines prácticos son copias de nuestra cabecera, pero con otro contenido. Como ven, después deanalizar detenidamente la estructura del sitio, vemos que no tiene ningún misterio guardado.También en la tabla anterior dimos nombres a nuestras secciones para luego utilizarlas en eldocumento XHTML. Al ser secciones que solamente se llamarán una sola vez en la página,lo correcto es usar DIV en vez de CLASS. Las diferencias entre DIV y CLASS, como así tam-bién los conceptos fundamentales sobre CSS (de consulta obligatoria para no estar perdidos

de página (Figura 1). Ejemplos de estos si-tios son los weblogs, en donde en la cabece-ra generalmente se encuentra el nombre delblog y una pequeña descripción; en el con-tenido tenemos los posts o entradas; en lasección izquierda o derecha (según el gustode cada blogger), encontramos informacióndel autor y las categorías, y en el pie de pá-gina tenemos información de contacto o so-bre el sistema de publicación. Estos sitios sonlos más sencillos de maquetar con CSS, y dehecho, en próximas ediciones de Webmas-ters nos dedicaremos de lleno a explicar có-mo se diseña un template para Wordpress(el sistema de publicación líder hoy) y paraBlogger (sistema de publicación gratuito).

El segundo caso es un poco más complejopara maquetar, pero es tal vez el más intere-sante para estudiar. Se trata de los sitios yportales de tres columnas (Figura 2). La ma-yoría de ellos tienen una cabecera, un me-nú izquierdo y una sección a la derecha,

89 1USR2.0

: ”=}{>< . ;~_+^#: ”=}{>< ;~ +^#:”=}{>< . ;~_+^#

Figura1. Un típico blog de dos columnas.3

Figura 2. UOL, un portal que utiliza el tradicional formato detres columnas, encabezado y pie de página.

3

Componente Qué tiene Nombre en XHTML

Barra superior Accesos directos a las secciones más importantes del sitio. #top

Cabecera Logo de Tectimes, banners y enlaces. #cabecera

Botonera Registro de usuarios. #botonera

Barra de navegación de USERS Promociones de la Red USERS. #users

Sección izquierda Banners y enlaces a secciones del portal. #izq

Contenido Noticias. #contenido

Sección derecha Publicidad sobre las revistas de MP Ediciones. #der

Pie de página Información de contacto. #pie

88-92-Webmasters-U174.qxd 9/19/05 14:49 Page 89

en esta nota) las pueden encontrar en lanota destacada sobre hojas de estilo delnúmero anterior de su revista favorita. Enla Figura 3 pueden ver cómo quedaronidentificadas las secciones de Tectimes.Una cosa más antes de empezar a ensuciarnuestras manos con código: vamos a agregarun elemento DIV extra en nuestro código(apropiadamente lo llamaremos #contene-dor), que servirá de “envoltorio” para los de-más elementos. Este contenedor tendrá lafunción de agrupar nuestros elementos enun marco invisible y nos permitirá controlarel posicionamiento de todos los bloques quedefinimos anteriormente. No es un ele-mento con significado, lo único que haráes delimitar el ancho máximo para todoslos elementos (760 pixeles) y los centrará.No se preocupen, cuando vean el códigolo entenderán perfectamente.

LA ESTRUCTURA EN XHTMLBien, comencemos entonces con nuestrocódigo XHTML. Lo que haremos es ence-rrar entre elementos DIV las secciones delsitio previamente identificadas. El códigoresultante sería similar al siguiente:

1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

2.3. <html>4. <head>

5. <title>Tectimes</title>6. <link rel=”stylesheet” type=”text/css”

href=”estilos.css” />7. </head>8.9. <body>10.11. <div id=”top”>12. <p>#TOP</p>13. </div>14. <div id=”contenedor”>15. <div id=”cabecera”>16. <p>#CABECERA</p>17. </div>18. <div id=”botonera”>19. <p>#BOTONERA</p>20. </div>21. <div id=”users”>22. <p>#USERS</p>23. </div>24. <div id=”izq”>25. <p>#IZQ</p>26. </div>27. <div id=”contenido”>28. <p>#CONTENIDO</p>29. </div>30. <div id=”der”>31. <p>#DER</p>32. </div>33. <div id=”pie”>34. <p>#PIE</p>35. </div>36. </div>37.38. </body>39. </html>

¿Esperaban ver más líneas de código? La-mento desilusionarlos, pero esto es lo únicoque necesitaremos para armar la estructurade un sitio de tres columnas como Tectimes.Veamos algunos puntos interesantes:

■ El documento empieza con la defini-ción del DTD que usaremos (XHTML 1.0estricto) y sigue con las partes formalesde un documento XHTML, es decir, ca-becera, título y cuerpo.

■ Continuamos con la declaración de unbloque que tendrá nuestra barra supe-rior de accesos directos, al cual llama-mos #top. En el sitio de Tectimes, estabarra se extiende a lo ancho del view-

: ” =}{>< . ;~_+

USR2.01 90

Figura 3. El sitio de Tectimes consus secciones resaltadas.

3

port del navegador, por lo tanto, esconveniente que esté fuera de nuestroelemento contenedor, el cual, como di-jimos anteriormente, será de ancho fijo.

■ Utilizamos un elemento DIV que será elenvoltorio para los demás bloques o sec-ciones: #contenedor.

■ Seguimos declarando los bloques ló-gicos del documento, dentro de estecontenedor, a saber: #cabecera,#botonera, #users, #izq, #conteni-do, #der y #pie.

■ Cerramos el cuerpo del documentoXHTML con la instruccion </body>.

Como pueden observar, crear un sitio sin ta-blas implica pensar primero en los bloqueslógicos o secciones que tendrá el mismo,para luego agruparlos con elementos DIV.Estos DIVs, a su vez, tendrán elementos co-mo cabeceras (H1, H2, H3, etc.), párrafos(P), imágenes (IMG) y un largo etcétera. Loque estamos haciendo es pensar en la es-tructura del documento, en su semántica,su significado, y no en su presentación.Con las tablas primero pensábamos en supresentación (esto irá aquí, el logo irá a laderecha, etc.). Con el marcado estructuralpensamos cuáles son las secciones lógicasdel documento XHTML, para luego darle unpoco de maquillaje con buen CSS.

LA PRESENTACION EN CSSLa Figura 4 muestra el resultado del si-guiente código CSS aplicado al documentoXHTML visto anteriormente:

1. * {2. margin: 0;3. padding: 0;4. height: 50px;5. }6. body {7. text-align: center; /* Centrado para IE 5.

Parte 1. */8. }9. #top {10. background-color: #d1d3d4;11. }12. #contenedor {13. margin: 0 auto; /* Centrado para browsers

88-92-Webmasters-U174.qxd 9/19/05 14:49 Page 90

91 1USR2.0

: ” =}{>< . ;~ +^#: ” =}{>< . ;~_+^#: ” =}{>< . ;~_+^#

compatibles con CSS */14. width: 760px;15. text-align: left; /* Centrado para IE 5. Parte 2. */16. border: 1px solid #777;17. }18. #cabecera {19. background-color: #fff;20. }21. #botonera {22. background-color: #000;23. }24. #users {25. background-color: #ff1515;26. }27. #izq {28. width: 150px;29. height: 500px;30. float: left;31. background-color: #ff8e00;32. }33. #contenido { 34. width: 470px;

35. float: left;36. background-color: #fff;37. }38. #der {39. width: 140px;40. height: 500px;41. float: right;41. background-color: #ececec;42. }43. #pie {44. clear: both;45. background-color: #083b64;46. }

Puntos interesantes y nuevas propiedadessobre este pedazo de código CSS:

■ El código empieza con el selector uni-versal reseteando los valores por defectode márgenes y rellenos para todos los ele-mentos, como así también les da un altode 50 pixeles para mejorar su visualización.

■ Seguimos con el selector para el ele-mento BODY. Acá vemos algo interesante:Nuestro primer hack. Los hacks son líneasde código CSS que se utilizan para arreglarfalencias de navegadores específicos, eneste caso, estamos aplicando un hack paracentrar nuestro bloque contenedor en

Figura 4. Los hierros componentesde Tectimes.

3

88-92-Webmasters-U174.qxd 9/21/05 11:45 Page 91

USR2.01 92

: ” =}{>< . ;~_

Internet Explorer 5. Puesto que IE5 no reconoce la declaraciónmargin: 0 auto; (esta declaración centraría el bloque al cualse la aplica, en este caso, el contenedor), tenemos que aplicareste pequeño hack o código extra para que todo se vea bienen ese navegador. El hack tiene una segunda parte, ahora den-tro del bloque contenedor, que se encarga de alinear todo a laizquierda. Esto es para que los elementos o bloques dentro delcontenedor no estén centrados, sino que se muestren de iz-quierda a derecha, como estaban antes de aplicar el hack. Unpoco rebuscado, ¿verdad? Bien, piensen esto: acabamos de verun hack para un sitio que no tiene más de 100 líneas de códi-go; imagínense la cantidad de hacks para un sitio grande co-mo Clarín.com o Ciudad.com.ar. Sí, adivinaron bien, la culpa la tieneIE. Ahora entienden el porqué del grito de miles y miles de di-señadores web en el mundo día tras día.

■ En las líneas siguientes, utilizamos propiedades ya conoci-das, como width, background y border (de nuevo, puedenencontrar una referencia a estas propiedades en el númeroanterior de Users), útiles para definir tamaños, colores de fon-do y bordes para nuestras secciones o cajas.

■ Llegamos a los selectores de ID que tienen propiedades nuevaspara nosotros: #izq, #contenido y #der. Estos selectores compar-ten una misma propiedad de posicionamiento realmente intere-sante: float. Cuando una caja tiene esta propiedad, se dice que seconvierte en una caja flotada. Esta propiedad:

■ Desplaza la caja hacia la izquierda o derecha tanto comosea posible, siempre respetando la línea en donde esté. En elcaso de #izq, la declaración float: left; le dice al navegadorque esa caja estará en el máximo izquierdo posible de nues-tro contenedor. Si no hubiéramos puesto el contenedor, lacaja se mostraría lo más posible a la izquierda que se pueda,es decir, en el lado superior izquierdo del viewport. En con-secuencia, si la caja estuviera flotada a la derecha (float:right;), se desplazaría (sí, adivinaron) hacia la derecha, tan-to como sea posible.■ En el caso de que estemos flotando una caja a la izquier-da, el contenido que esté alrededor de ella –digamos, un pá-rrafo marcado con el elemento <p>– estará desplazado ha-cia la derecha, bordeando esta caja. En el caso de una cajaflotada a la derecha, su contenido se mostrará a la izquierda.

Es importante señalar que las cajas que estén flotadas necesitan sí osí que les demos un tamaño. La finalidad es evitar resultados no de-seados en los varios navegadores disponibles.Ahora bien, luego de esta pequeña teoría viene lo complicado de en-tender: como nuestra primera caja, #izq, está flotada hacia la izquier-da, la caja siguiente, #contenido, estará bordeando a #izq. A su vez,#contenido está también flotada hacia la izquierda, por lo que #derbordeará a #contenido. Sin embargo, para que todo se vea bien, de-bemos flotar #der hacia la derecha, obligando al navegador a querenderize esta caja lo más a la derecha posible, asegurándonos de que

el preciado layout de tres columnas al final cobre vida. Y eso estodo amigos, no más sufrimiento por hoy.

■ Por último, nos resta ver otra propiedad más, esta vez me-nos dolorosa que float. Se trata de clear, la cual puede tenertres valores posibles:

■ clear:left. El elemento al cual se la aplica es movido una líneadebajo de cualquier caja flotada a la izquierda.■ clear:right. El elemento al cual se la aplica es movido una lí-nea debajo de cualquier caja flotada a la derecha.■ clear:both. El elemento al cual se la aplica es movido una líneadebajo de cualquier caja flotada a la izquierda o a la derecha.

En nuestro caso, usamos clear:both en el pie de página paraobligar al navegador a hacer un salto de línea entre nuestras ca-jas flotadas anteriormente.Y eso es todo lo que debemos saber para poder hacer sitios de 3 co-lumnas sin tablas en CSS.

AGREGAR ELEMENTOS A LA ESTRUCTURAAhora que ya tenemos la estructura del sitio, lo único que nos res-ta hacer es agregar contenido. Con todo lo que venimos apren-diendo en esta sección de la revista, ya tenemos las herramientasnecesarias, así que esta tarea les queda para hacer en sus casas. Un tip: no hay elementos complejos. Sólo elementos P, IMG, Ay nada más. Si son listos, seguramente identificarán más seccio-nes y las agruparán en cajas o bloques (es decir, en IDs) para fa-cilitar su maquetación, pero más allá de eso no hay nada com-plicado en Tectimes. Una vez que está la estructura bien arma-da y firme, podemos agregar los elementos que deseemos sin te-mor a romper nada.

CONCLUSIONLo mejor para entender cómo funciona el maquetado de sitios conCSS y XHTML es practicar y, por supuesto, ver cómo están armadosotros sitios. En la Fact Table podrán encontrar algunos datos inte-resantes del rediseño completo del sitio de Tectimes a CSS y XHTML,que espero los anime a realizar lo mismo con sus sitios.Como siempre, en los Foros de Tectimes (http://foros.tectimes.com)estamos debatiendo todos los días sobre diseño de sitios webcon estándares. Los esperamos ahí.

FACT TABLE

En una noche de insomnio y café, migré el sitio de Tectimes a CSS partiendo de la es-

tructura que vemos ahora, sin una tabla (el código lo podrán encontrar en mi blog,

www.16-bits.com.ar en futuros posts). Estos fueron mis resultados:

Elemento Diseño actual Diseño con CSS+XHTML

Tablas 15 KB 0 KB

GIFs espaciadores 10 KB 0 KB

Imágenes 20 KB 12 KB

Peso de página, sólo HTML 15.6 KB 8.2 KB

Total 60.6 KB 20.2 KB

88-92-Webmasters-U174.qxd 9/19/05 14:50 Page 92