88-92-Webmasters-U174.

qxd

9/19/05

14:48

Page 88

:=}{><.;~_+

WEBMASTERS

DISEO DE SITIOS WEB UTILIZANDO SOLAMENTE CSS

Adis tablas
RODRIGO GALINDEZ

rodrigo@simplelogic.com.ar
Desarrollador web, Rodrigo es un apasionado por todo lo que vaya despus de http://

MAQUETAR SITIOS CON TABLAS ES PENSAR TODAVIA COMO EN EL AO 2000. ESTAMOS EN EL 2005, HAY MEJORES METODOS, MAS ACCESIBLES Y MAS SENCILLOS DE APRENDER. HOY VAMOS A IR UN POQUITO MAS ALLA: VEAMOS EL DISEO DE SITIOS USANDO SOLAMENTE HOJAS DE ESTILO EN CASCADA Y UN POCO DE BUEN XHTML. nico) recurso para representar datos tabulares. Si tienen que incluir una tabla de posiciones en un sitio de ftbol, lo mejor es usar una tabla, no hay otro elemento ms adecuado. Entonces, el consejo es: no intenten forzar con CSS la funcin de las tablas, porque realmente es muy complejo y, al fin y al cabo, estara mal semnticamente. No se preocupen, en una futura nota de Webmasters veremos cmo usar correctamente las tablas, no slo cubriendo la funcin de sus elementos principales (desde TD hasta TFOOT), tambin veremos la forma de darles atractivo visual con CSS. Las tablas son un mundo aparte que es necesario estudiar con detenimiento. Suficiente teora, empecemos con lo interesante. Es hora de que veamos un poco de prctica. En las siguientes pginas, explicaremos paso a paso cmo maquetar un sitio de tres columnas utilizando solamente CSS y XHTML. Como nos gusta meternos con los grandes, tomaremos como ejemplo al sitio de Tectimes (www.tectimes.com). Empecemos.

in duda alguna, la primera tcnica que aprendemos (o que nos ensean) cuando recin nos iniciamos en el arte de disear sitios web es la de maquetacin (diseo del layout) con tablas. Las tablas son un recurso hasta cierto punto vlido que nos permite controlar con gran precisin el layout o diseo de un sitio. La necesidad del diseo con tablas data de las primeras pocas del diseo web, en donde los diseadores de medios impresos (que hacan sus primeras incursiones en la Web) buscaban representar de alguna manera una trama o grilla invisible en donde posicionar los elementos, tal como lo hacen al maquetar libros, revistas y/o otras publicaciones grficas. Cuando estos diseadores se dieron cuenta de que con el atributo border=0 podan eliminar los bordes de las tablas, y cuando entendieron que en cada celda se poda representar una parte del layout (ya sea la cabecera del sitio o una botonera), no dudaron en utilizar tablas y ms tablas anidadas para sus sitios. Sin embargo, usar tablas para maquetar, es decir, para posicionar columnas de texto y elementos grficos, es semnticamente incorrecto; las tablas nunca se pensaron para el diseo de sitios, se crearon con el fin de utilizarlas para representar datos tabulares, como por ejemplo, una salida de nombres y apellidos de una base de datos, o una tabla de ltimas posiciones en un campeonato de ftbol. Las tablas, junto con los GIFs espaciadores transparentes, son la resaca del diseo web. No son ms que elementos de presentacin que agregan basura en nuestro cdigo HTML y que pueden ser fcilmente reemplazables por CSS. Entre las tantas desventajas de usar tablas para maquetar podemos nombrar:

Hacen ms lenta la carga de un sitio. Imagnense un sitio con 15 tablas anidadas (1 tabla principal, que centra las dems tablas, y tablas por cada seccin). Ahora imaginen que ese sitio es Tectimes, u otro sitio con mucho trfico diario. El resultado de estos ingredientes mezclados es: mayor peso de la pgina, tiempos de respuesta lentos y mayor gasto en ancho de banda. Es decir, pierden todos, el sitio y sus visitantes. Son una traba ms para la accesibilidad. Los lectores de pantalla tienden a leer el contenido de las tablas en forma secuencial. Sin embargo, muchos sitios al ser ledos de esta manera no tienen significado, agotando las posibilidades de lectura para gente con discapacidad visual. Por otro lado, imaginemos el caso de un navegador de un celular. Este navegador se llevar mucho mejor con un documento XHTML que tiene significado sin sus elementos de presentacin que, por ejemplo, con decenas de tablas anidadas. Hacen difcil la tarea de manteni-

miento. Aunque al principio el maquetar con tablas puede ser fcil, a la larga, mantener tales sitios es realmente difcil, sobre todo si no contamos con un editor visual de cdigo como Dreamweaver. Leer el cdigo de tablas anidadas en sitios grandes es realmente imposible. Y pasar el cdigo de estas tablas anidadas entre varios desarrolladores suele traer problemas. Antes de continuar, no quiero venderles la idea de que el usar tablas en HTML est mal. Como lo mencion anteriormente, las tablas son un excelente (en realidad, el

1 88

PATRONES EN DISEO WEB

Antes de empezar a echar mano en el cdigo, primero es bueno pensar la estructura que tendr nuestro sitio sin maquillaje (sin CSS), es decir, cules sern sus bloques o secciones componentes. Esto es til para que luego su transicin a cdigo sea lo ms sencilla posible. Una vez que tenemos los bloques lgicos en la cabeza, podremos pasar esta estructura a un documento XHTML ms fcilmente. Empecemos entonces por el primer caso que podemos identificar: un portal o sitio con dos columnas. El patrn que se repite en estos sitios es el de una cabecera, una seccin izquierda o derecha, el contenido y un pie
USR2.0

88-92-Webmasters-U174.qxd

9/19/05

14:49

Page 89

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

:=}{>< ;~ + ^ #
un contenido y un pie de pgina. La cabecera no es diferente de la de los sitios de dos columnas, a lo sumo agregan banners o un pequeo formulario para el registro de usuarios, pero el espacio reservado es el mismo. En el men izquierdo podemos encontrar las secciones del portal (Terra.com tiene sus canales a la izquierda) y en la derecha, ltimas noticias o anuncios publicitarios. En el rea de contenido se puede esperar cualquier cosa, desde grandes imgenes con enlaces a notas internas (es el caso de Ciudad.com.ar) hasta noticias y contenido destacado (es el caso de Uol.com.ar). En el pie de pgina, muchos portales tienen un formulario de bsqueda (psima decisin de usabilidad) e informacin de copyright.

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

de pgina (Figura 1). Ejemplos de estos sitios son los weblogs, en donde en la cabecera generalmente se encuentra el nombre del blog y una pequea descripcin; en el contenido tenemos los posts o entradas; en la seccin izquierda o derecha (segn el gusto de cada blogger), encontramos informacin del autor y las categoras, y en el pie de pgina tenemos informacin de contacto o sobre el sistema de publicacin. Estos sitios son los ms sencillos de maquetar con CSS, y de hecho, en prximas ediciones de Webmasters nos dedicaremos de lleno a explicar cmo se disea un template para Wordpress (el sistema de publicacin lder hoy) y para Blogger (sistema de publicacin gratuito).

Figura 2. UOL, un portal que utiliza el tradicional formato de tres columnas, encabezado y pie de pgina.

ANALIZANDO TECTIMES A FONDO

Tectimes es un tpico sitio con tres columnas de ancho fijo, es decir, tiene 760 pixeles de ancho y ste no es variable. Veamos sus componentes fundamentales y una descripcin de cada uno de ellos:
Componente Barra superior Cabecera Botonera Barra de navegacin de USERS Seccin izquierda Contenido Seccin derecha Pie de pgina Qu tiene Accesos directos a las secciones ms importantes del sitio. Logo de Tectimes, banners y enlaces. Registro de usuarios. Promociones de la Red USERS. Banners y enlaces a secciones del portal. Noticias. Publicidad sobre las revistas de MP Ediciones. Informacin de contacto. Nombre en XHTML #top #cabecera #botonera #users #izq #contenido #der #pie

Figura1. Un tpico blog de dos columnas.

El segundo caso es un poco ms complejo para maquetar, pero es tal vez el ms interesante para estudiar. Se trata de los sitios y portales de tres columnas (Figura 2). La mayora de ellos tienen una cabecera, un men izquierdo y una seccin a la derecha,
USR2.0

En negrita estn resaltadas las secciones que se repiten en todos los sitios de tres columnas. Adems de estos bloques lgicos, Tectimes agrega una barra superior, que ser muy fcil de incluir en nuestro nuevo layout, y por otro lado, una botonera y una barra de navegacin, que a los fines prcticos son copias de nuestra cabecera, pero con otro contenido. Como ven, despus de analizar detenidamente la estructura del sitio, vemos que no tiene ningn misterio guardado. Tambin en la tabla anterior dimos nombres a nuestras secciones para luego utilizarlas en el documento XHTML. Al ser secciones que solamente se llamarn una sola vez en la pgina, lo correcto es usar DIV en vez de CLASS. Las diferencias entre DIV y CLASS, como as tambin los conceptos fundamentales sobre CSS (de consulta obligatoria para no estar perdidos

89 1

88-92-Webmasters-U174.qxd

9/19/05

14:49

Page 90

: =}{><.;~_+

en esta nota) las pueden encontrar en la nota destacada sobre hojas de estilo del nmero anterior de su revista favorita. En la Figura 3 pueden ver cmo quedaron identificadas las secciones de Tectimes. Una cosa ms antes de empezar a ensuciar nuestras manos con cdigo: vamos a agregar un elemento DIV extra en nuestro cdigo (apropiadamente lo llamaremos #contenedor), que servir de envoltorio para los dems elementos. Este contenedor tendr la funcin de agrupar nuestros elementos en un marco invisible y nos permitir controlar el posicionamiento de todos los bloques que definimos anteriormente. No es un elemento con significado, lo nico que har es delimitar el ancho mximo para todos los elementos (760 pixeles) y los centrar. No se preocupen, cuando vean el cdigo lo entendern perfectamente.

5. 6.

<title>Tectimes</title> <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>

port del navegador, por lo tanto, es conveniente que est fuera de nuestro elemento contenedor, el cual, como dijimos anteriormente, ser de ancho fijo.
Utilizamos un elemento DIV que ser el envoltorio para los dems bloques o secciones: #contenedor. Seguimos declarando los bloques l-

gicos del documento, dentro de este contenedor, a saber : #cabecera, #botonera, #users, #izq, #contenido, #der y #pie.
Cerramos el cuerpo del documento XHTML con la instruccion </body>.

Como pueden observar, crear un sitio sin tablas implica pensar primero en los bloques lgicos o secciones que tendr el mismo, para luego agruparlos con elementos DIV. Estos DIVs, a su vez, tendrn elementos como cabeceras (H1, H2, H3, etc.), prrafos (P), imgenes (IMG) y un largo etctera. Lo que estamos haciendo es pensar en la estructura del documento, en su semntica, su significado, y no en su presentacin. Con las tablas primero pensbamos en su presentacin (esto ir aqu, el logo ir a la derecha, etc.). Con el marcado estructural pensamos cules son las secciones lgicas del documento XHTML, para luego darle un poco de maquillaje con buen CSS.

LA PRESENTACION EN CSS
La Figura 4 muestra el resultado del siguiente cdigo CSS aplicado al documento XHTML visto anteriormente:
1. 2. 3. 4. 5. 6. 7. *{ margin: 0; padding: 0; height: 50px; } body { 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 USR2.0

Figura 3. El sitio de Tectimes con sus secciones resaltadas.

LA ESTRUCTURA EN XHTML
Bien, comencemos entonces con nuestro cdigo XHTML. Lo que haremos es encerrar entre elementos DIV las secciones del sitio previamente identificadas. El cdigo resultante sera 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>

Esperaban ver ms lneas de cdigo? Lamento desilusionarlos, pero esto es lo nico que necesitaremos para armar la estructura de un sitio de tres columnas como Tectimes. Veamos algunos puntos interesantes:
El documento empieza con la defini-

cin del DTD que usaremos (XHTML 1.0 estricto) y sigue con las partes formales de un documento XHTML, es decir, cabecera, ttulo y cuerpo.
Continuamos con la declaracin de un bloque que tendr nuestra barra superior de accesos directos, al cual llamamos #top. En el sitio de Tectimes, esta barra se extiende a lo ancho del view-

1 90

88-92-Webmasters-U174.qxd

9/21/05

11:45

Page 91

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

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

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

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. }

Figura 4. Los hierros componentes de Tectimes.

Puntos interesantes y nuevas propiedades sobre este pedazo de cdigo CSS:

El cdigo empieza con el selector uni-

Seguimos con el selector para el ele-

versal reseteando los valores por defecto de mrgenes y rellenos para todos los elementos, como as tambin les da un alto de 50 pixeles para mejorar su visualizacin.

mento BODY. Ac vemos algo interesante: Nuestro primer hack. Los hacks son lneas de cdigo CSS que se utilizan para arreglar falencias de navegadores especficos, en este caso, estamos aplicando un hack para centrar nuestro bloque contenedor en

USR2.0

91 1

88-92-Webmasters-U174.qxd

9/19/05

14:50

Page 92

: = } { > < . ; ~_

Internet Explorer 5. Puesto que IE5 no reconoce la declaracin margin: 0 auto; (esta declaracin centrara el bloque al cual se la aplica, en este caso, el contenedor), tenemos que aplicar este pequeo hack o cdigo extra para que todo se vea bien en ese navegador. El hack tiene una segunda parte, ahora dentro del bloque contenedor, que se encarga de alinear todo a la izquierda. Esto es para que los elementos o bloques dentro del contenedor no estn centrados, sino que se muestren de izquierda a derecha, como estaban antes de aplicar el hack. Un poco rebuscado, verdad? Bien, piensen esto: acabamos de ver un hack para un sitio que no tiene ms de 100 lneas de cdigo; imagnense la cantidad de hacks para un sitio grande como Clarn.com o Ciudad.com.ar. S, adivinaron bien, la culpa la tiene IE. Ahora entienden el porqu del grito de miles y miles de diseadores web en el mundo da tras da.
En las lneas siguientes, utilizamos propiedades ya conoci-

el preciado layout de tres columnas al final cobre vida. Y eso es todo amigos, no ms sufrimiento por hoy.
Por ltimo, nos resta ver otra propiedad ms, esta vez me-

nos dolorosa que float. Se trata de clear, la cual puede tener tres valores posibles: clear:left. El elemento al cual se la aplica es movido una lnea debajo de cualquier caja flotada a la izquierda. clear:right. El elemento al cual se la aplica es movido una lnea debajo de cualquier caja flotada a la derecha. clear:both. El elemento al cual se la aplica es movido una lnea debajo de cualquier caja flotada a la izquierda o a la derecha. En nuestro caso, usamos clear:both en el pie de pgina para obligar al navegador a hacer un salto de lnea entre nuestras cajas flotadas anteriormente. Y eso es todo lo que debemos saber para poder hacer sitios de 3 columnas sin tablas en CSS.

das, como width, background y border (de nuevo, pueden encontrar una referencia a estas propiedades en el nmero anterior de Users), tiles para definir tamaos, colores de fondo y bordes para nuestras secciones o cajas.
Llegamos a los selectores de ID que tienen propiedades nuevas

AGREGAR ELEMENTOS A LA ESTRUCTURA

Ahora que ya tenemos la estructura del sitio, lo nico que nos resta hacer es agregar contenido. Con todo lo que venimos aprendiendo en esta seccin de la revista, ya tenemos las herramientas necesarias, as que esta tarea les queda para hacer en sus casas. Un tip: no hay elementos complejos. Slo elementos P, IMG, A y nada ms. Si son listos, seguramente identificarn ms secciones y las agruparn en cajas o bloques (es decir, en IDs) para facilitar su maquetacin, pero ms all de eso no hay nada complicado en Tectimes. Una vez que est la estructura bien armada y firme, podemos agregar los elementos que deseemos sin temor a romper nada.

para nosotros: #izq, #contenido y #der. Estos selectores comparten una misma propiedad de posicionamiento realmente interesante: float. Cuando una caja tiene esta propiedad, se dice que se convierte en una caja flotada. Esta propiedad:
Desplaza la caja hacia la izquierda o derecha tanto como sea posible, siempre respetando la lnea en donde est. En el caso de #izq, la declaracin float: left; le dice al navegador que esa caja estar en el mximo izquierdo posible de nuestro contenedor. Si no hubiramos puesto el contenedor, la caja se mostrara lo ms posible a la izquierda que se pueda, es decir, en el lado superior izquierdo del viewport. En consecuencia, si la caja estuviera flotada a la derecha (float: right;), se desplazara (s, adivinaron) hacia la derecha, tanto como sea posible. En el caso de que estemos flotando una caja a la izquierda, el contenido que est alrededor de ella digamos, un prrafo marcado con el elemento <p> estar desplazado hacia la derecha, bordeando esta caja. En el caso de una caja flotada a la derecha, su contenido se mostrar a la izquierda.

FACT TABLE
En una noche de insomnio y caf, migr el sitio de Tectimes a CSS partiendo de la estructura que vemos ahora, sin una tabla (el cdigo lo podrn encontrar en mi blog, www.16-bits.com.ar en futuros posts). Estos fueron mis resultados: Elemento Tablas GIFs espaciadores Imgenes Peso de pgina, slo HTML Total Diseo actual 15 KB 10 KB 20 KB 15.6 KB 60.6 KB Diseo con CSS+XHTML 0 KB 0 KB 12 KB 8.2 KB 20.2 KB

Es importante sealar que las cajas que estn flotadas necesitan s o s que les demos un tamao. La finalidad es evitar resultados no deseados en los varios navegadores disponibles. Ahora bien, luego de esta pequea teora viene lo complicado de entender: como nuestra primera caja, #izq, est flotada hacia la izquierda, la caja siguiente, #contenido, estar bordeando a #izq. A su vez, #contenido est tambin flotada hacia la izquierda, por lo que #der bordear a #contenido. Sin embargo, para que todo se vea bien, debemos flotar #der hacia la derecha, obligando al navegador a que renderize esta caja lo ms a la derecha posible, asegurndonos de que

CONCLUSION
Lo mejor para entender cmo funciona el maquetado de sitios con CSS y XHTML es practicar y, por supuesto, ver cmo estn armados otros sitios. En la Fact Table podrn encontrar algunos datos interesantes del rediseo 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 das sobre diseo de sitios web con estndares. Los esperamos ah.
USR2.0

1 92