Porqué el diseñar con tablas es estúpido:

problemas definidos, soluciones ofrecidas

Las tablas existían en HTML por una sola razón: para mostrar datos tabulares. Pero luego border="0" hizo posible que los diseñadores pudieran obtener una rejilla para diseñar texto e imágenes. Puesto que es aún uno de los métodos más dominantes para diseñar visualmente sitios web de alta complejidad, el uso de tablas está, de hecho, interfiriendo con la creación de un sitio web mejor, más accesible, flexible y funcional. Descubre de dónde proviene la raíz de los problemas y procura obtener soluciones para crear un diseño sin tablas o de transición.

Ve a buscar a tu jefe

¿Hay algún “traje” en la audiencia? ¿Están tus jefes aquí en Seybold, asistiendo a diferentes sesiones en este preciso momento? Búscalos. Ellos son quienes necesitan saber de qué manera las Normas Web pueden ahorrarle dinero a su compañía.

Perspectiva general: ¿Qué hay para mí?

Te brindaremos una introducción sobre una manera de trabajar que

• hará que tus páginas carguen más rápido
• reducirá tus costos de hosting
• hará que tus rediseños sean más eficientes y económicos
• te ayudará a mantener consistencia visual en todos tus sitios
• te hará obtener mejores resultados con los motores de búsqueda
• hará que tus sitios sean más accesibles para todas las personas interesadas y agentes de usuarios
• y te brindará un margen competitivo (es decir, seguridad laboral) a medida que el mundo se rige cada vas más por Normas Web.

Además, trataremos de qué manera el diseño de páginas con Cascading Style Sheets (CSS) (hojas de estilo en cascada) requiere una forma de pensar un poco diferente de la que sueles tener acerca de tu contenido y de tu marcado.

Sitios Web de tercera generación (Killer Web Sites): tablas anidadas y espaciadores GIF

Al principio, la Internet constituía fundamentalmente un medio de intercambio de información para los académicos, investigadores y el ejército militar. Sin embargo, no le llevó demasiado tiempo a los visionarios darse cuenta de que este nuevo medio era ideal para vender desde nuevos productos y alimento para perros hasta autos usados y cobertura de deportes por medio de transferencia directa.

Sin embargo, como cualquier otro medio que está aún en pañales, los primeros tiempos de la Internet resultaron ser estéticamente “crudos” (y, realmente, no muy tentadores para los consumidores) hasta que David Siegel publicó su libro memorable, el cual ofrecía algunas recomendaciones brillantes para superar las restricciones de los exploradores existentes y especificaciones W3C alrededor del año 1997. (Estamos hablando de Netscape 2 y 3, compañeros).

Estas recomendaciones eran tan brillantes que aún así constituyen el método más frecuente de diseño de páginas Web en la actualidad.

El Problema con el uso de tablas:

• los datos de presentación se mezclan con tu contenido.
  • Esto hace que los archivos de tus páginas sean innecesariamente pesados, ya que los usuarios deben bajar estos datos de presentación por cada página que visitan.
  • Banda ancha no es gratuita.
• Esto hace que los rediseños de los sitios y contenido existentes requieran mucha mano de obra (y sean muy costosos).
• Además, hace que la consistencia visual de todo un sitio sea extremadamente difícil de alcanzar (y muy costosa).
• Las páginas basadas en tablas son también mucho menos accesibles para los usuarios que padecen incapacidades y para las personas que utilizan teléfonos celulares y PDA para acceder a la Web.

La salvación está a tu alcance

Los exploradores modernos son capaces de presentar las Normas Web mucho mejor, y ya no necesitamos usar estos métodos arcaicos.

En lugar de anidar tablas dentro de tablas y de llenar celdas vacías con espaciadores GIF, podemos utilizar un marcado mucho más simple y CSS para diseñar espectaculares sitios que serán más rápidos para cargar, más fáciles de rediseñar y más accesibles para todos.

La solución: CSS y marcado estructural

Si diseñamos nuestras páginas utilizando un marcado estructural en nuestros documentos HTML y hojas de estilo en cascada (Cascading Style Sheets), podemos mantener el contenido de nuestras páginas separado de la manera en que se presentan.

Este método tiene varias ventajas con respecto al uso de las tablas....

Los rediseños son más fáciles y menos costosos

Si eliminas el marcado de presentación de tus páginas, el rediseño de los sitios y contenido existentes requerirá mucho menos trabajo (y costará mucho menos). Para modificar el diseño del sitio, todo lo que necesitas es modificar las hojas de estilo; no es necesario que edites todas las páginas.

Por ejemplo: dale un vistazo a CSS Zen Garden, o a los interruptores de estilo del sitio Eric Meyer. Para obtener más información, consulta Alternative Style de Paul Sowden.

Banda ancha no es gratuita

El uso de Normas Web reduce los tamaños de los archivos de tus páginas, ya que los usuarios no necesitan bajar datos de presentación con cada página que visitan. Los exploradores de los usuarios mantienen en memoria las hojas de Estilo que controlan el diseño.

Los archivos más ligeros resultan en descargas más rápidas y costos de hosting más bajos.

!Eh! ¡Todas estas páginas se ven iguales!

El uso de Normas Web, además, hace que resulte extremadamente fácil mantener consistencia visual en todo un sitio. Como las páginas utilizan el mismo documento CSS para su diseño, todas siguen el mismo formato.

Esta característica consolida tu marca comercial y hace que tu sitio sea más utilizable.

Escríbelo una vez, utilízalo en todas partes, para todos

El uso de Normas Web hace que tus páginas sean mucho más accesibles para usuarios que padecen incapacidades y para las personas que utilizan teléfonos celulares y PDA para acceder a la Web.

Los visitantes que utilizan lectores de pantalla (así como también aquellos que poseen conexiones lentas) no necesitan acceder a celdas de tablas innumerables ni a espaciadores para llegar al contenido real de nuestras páginas.

En otras palabras, el hecho de separar el contenido de la manera en que se presenta hace que tu contenido sea independiente de dispositivo.

Google es ciego

Hablando de accesibilidad, si minimizas tu marcado y utilizas atributos de encabezado de manera adecuada lograrás mejorar tu clasificación en los motores de búsqueda.

Si reduces el porcentaje del código de contenido, utilizas palabras claves en tus atributos de encabezado y reemplazas el encabezado GIF con texto lograrás que tus sitios obtengan mejores resultados en los motores de búsqueda.

Todavía puedes utilizar tablas si lo necesitas, pero no te abuses

Esto le permitirá a los usuarios (y a los jefes) que tercamente continúan usando exploradores versión 4 hasta el último día de sus vidas, una aproximación aceptable a lo que el resto del mundo está apreciando.

Una tabla que se ve relativamente bien

		Lorem ipsum dolor sit amet, consectetuer adipiscing elit.				Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
		Suscipit lobortis nisl ut aliquip ex ea commodo consequat.				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. • At vero eros et accumsan et iusto odio dignissim qui blandit • Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
		Qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.				Diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. • Epsum factorial non deposit quid pro quo hic escorol. • Olypian quantels et gomilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay.
		Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed. • Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. • Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore.

Mira bajo la superficie

		Esto se podría realizar de una manera mucho más simple.				Adivina ¿cuánto pesa el marcado de esta pequeña tabla? 13,7k. Cuenta con 17 filas y 9 columnas. ¿Y mencioné todos los espaciadores GIF?
		Podemos ver muchas celdas de tablas y espaciadores aquí.				Y todos los márgenes con puntos están hechos con un atributo de fondo en las celdas de las tablas, los cuales no serán validados. • ¿Una tabla anidada? ¿Para qué? • ¿Para hacer una lista no numerada? Me estás tomando el pelo ¿no?
		Todo esto se podría realizar con 8 celdas de tablas y con 4 reglas de CSS.				De verdad, todo lo que se necesita son 8 celdas y 4 reglas de CSS. • ¡Ay no! Otra tabla haciéndose pasar por una lista no numerada. • Simplemente marca tus listas no numeradas como tal y deja que CSS haga el resto.
		Necesitas una regla para <table>, otra para <td>, otra para <ul> y otra para <li>.				Eso es todo. Una vez que las tienes, lo has logrado. • Mejor que 8 celdas de tablas más para crear una lista no numerada falsa, lo cual termina siendo mucho menos accesible. • ¡Excelente! La última línea de la lista falsa.

El código que muestra la estructura de la tabla:

table{ margin:3px; padding:2px; border:solid 2px blue }

td{ padding:2px; border-style: solid; border-width: 1px; border-color:gray gray silver silver }

Así es mucho mejor

Y éste es el Código CSS que debes utilizar para deshacerte del marcado inválido:

table{ border-bottom:1px dotted fuchsia; border-left:1px dotted fuchsia }

td{ padding:11px 20px 20px 11px; border-top:1px dotted fuchsia; border-right:1px dotted fuchsia }

ul { margin-top:10px; margin-bottom:10px; margin-left:0; padding-left:1em }

li{ margin-bottom:10px }

Repasando diseños transicionales

Utiliza margen y relleno en lugar de espaciadores GIF y de celdas extra.

Utiliza estilos de vínculo y de @import. Lo primero para versiones anteriores de los exploradores, lo segundo para las últimas versiones de los exploradores.

<link href="basic.css" rel="stylesheet" type="text/css">

<style type="text/css" media="screen"><!--
@import url(modern.css) screen;
--></style>

Ejemplos del mundo real:

• Escuela Montessori de Santa Cruz
• k10k
• Fox Searchlight Pictures

Pero espera, todavía hay más:

Para obtener mayor información acerca de los diseños de transición, consulta el primer capítulo de Eric Meyer en CSS y gran parte de Designing with Web Standards de Jeffrey Zeldman.

Marcados CSS: el futuro está aquí

Los exploradores que la mayoría de los usuarios utilizan actualmente cuentan con un buen soporte para CSS. Cada uno de ellos posee sus peculiaridades pero, una vez que te acostumbras, puedes trabajar con todos ellos.

La codificación de CSS es simple Incluso para alguien como yo que cree que la mayoría de los JavaScript se parecen a malas palabras.

if(links[x].length > 0);{
for (y=0; y<links[x].length; y++) {

Cada regla de CSS tiene un selector y una declaración. La declaración está compuesta de una propiedad y de un valor. Las propiedades deberían asemejarse a 2 palabras unidas con un guión.

body {margin:0; padding:0}

.related {float:right; width: 15em; margin-left:1em; margin-bottom:1em; color:blue}

#footer {color:gray; font-size:0.6em; line-height: 1.2em; background-color:white; margin:0}

Marcado estructural: codifica lo que quieres significar, significa lo que codificas

Si bien escribir el CSS real es simple, el hecho de utilizar CSS para crear sus diseños requiere de una manera de pensar un poco diferente a la que la mayoría de nosotros probablemente estamos acostumbrados.

En lugar de pensar en algo como “esto va aquí y eso allí” mientras trabajamos en una página o en un diseño, necesitamos pensar acerca de las clases de información de nuestra página y de la estructura de esa información.

Le brindamos al encabezado más importante una etiqueta <h1>, los subtítulos son marcados con etiquetas <h2>, etc. y los párrafos son párrafos.

Esto se conoce como un marcado “estructural” o “semántico”.

En lugar de colocar tu contenido dentro de tablas y de celdas de tablas, envuélvelo en elementos div. Brinda a tus elementos div una identificación (id) o una clase (class) que describa su contenido y/ o función, en lugar de su apariencia.

Evita el marcado de <b>ed and <br>eakfast

Piensa por qué quieres que algo aparezca de cierta forma. ¿qué significa? Tu marcado puede y debería transmitir un significado, incluso para alguien que no puede ver su página. El marcado semántico hace que nuestras páginas sean más accesibles para todos, incluso para los motores de búsqueda.

Cuando colocas alguna palabra o texto en itálica, es porque quiere enfatizarlo (<em>), o porque se trata del título de un libro (<cite>)?

Si alguna palabra o texto está en negrita, probablemente debería estar marcado como <strong>.

Si deseas realizar un salto de línea, probablemente deberías marcarlo como un elemento del encabezado. Si no se trata de un encabezado, ¿forma parte de una clase que tiene lugar en tu sitio? Si fuera el caso, entonces utiliza CSS en lugar de <br>.

.foo {display:block}

Para obtener más información, consulta Bed and BReakfast markup (B&BR) de Tantek Çelik.

¿Qué son las barras de navegación?

Piénsalo: tu navegación es, en realidad, una lista no ordenada de enlaces.

Márcalos dentro de las etiquetas <ul>.

• enlace1
• enlace2
• enlace3
• enlace4
• enlace5

Barras de navegación horizontales

Podemos utilizar CSS para controlar la manera en que se exhiben estas listas en nuestras páginas.

Si utilizamos display:inline, podemos crear barras de navegación horizontales.

Aquí está el código para esta barra de navegación:

ul {
margin-top:1em;
margin-bottom:0.5em;
}

#nav1 ul{
background-color:silver;
text-align:center;
margin-left:0;
padding-left:0;
border-bottom:1px solid gray
}

#nav1 li{
list-style-type:none;
padding:0.25em 1em;
border-left:1px solid white;
display: inline
}

#nav1 li:first-child{
border:none;
}

Barras de navegación verticales

Aquí está el código para esta barra de navegación:

#nav2 {
background-color:silver;
border:solid 1px gray;
width: 8em
}

#nav2 ul{
list-style-type:none;
margin:0;
padding:0;
border:none
}

#nav2 li{
margin:0;
padding:0.25em 0.5em 0.25em 1em;
border-top:1px solid gray;
width: 100%;
display: block
}

html>body #nav2 li{
width: auto;
}

#nav2 li:first-child{
border:none
}

Para obtener más información, consulta el artículo de Mark Newhouse, Taming Lists, en la lista "A List Apart", y Styling lists, en la wiki "CSS-Discuss"

Cosas que funcionan mejor con tablas que con CSS

Existen algunas cosas que no funcionan tan bien con CSS como lo hacen con los diseños de tabla.

Por ejemplo, digamos que tienes una barra de navegación negra y quieres ampliar toda la altura de tu contenido. Con un diseño de tabla, es algo muy fácil: simplemente otórgale un fondo negro a <td>.

Esto se puede realizar con CSS, pero requiere una forma diferente de pensar.

Si le brindamos a nuestro div de navegación un fondo negro, el negro se extenderá solamente hasta donde termina la navegación. En la mayoría de las páginas, el contenido continúa más allá de la navegación, así que esto no saldría bien.

En cambio, podríamos revestir un GIF negro en nuestro div de contenido y brindarle a este div suficiente relleno; pero si nuestra navegación es mayor que nuestro contenido, esto tampoco funcionará.

Otra forma de tratar de resolverlo es revestir el GIF negro en el fondo de nuestro <body>, lo cual es correcto a menos que quieras utilizar otra imagen para el fondo de tu <body>.

O, podemos envolver nuestro contenido en un div “wrapper” y revestir la imagen en esa div. Sin embargo, esto implica un agregado intrascendente no semántico para nuestro marcado.

Y, desde ya, el hecho de revestir imágenes de fondo no será un buen resultado si quieres lograr que la amplitud de tu navegación sea fluida.

Como dijimos anteriormente, algunas cosas funcionan mejor con tablas que con CSS. Pero, finalmente, deberás preguntarte si todo el enredo que viene con el uso de las tablas para el diseño en lugar de datos vale la pena.

Migrando de trabajar a los hachazos con las tablas a las Normas Web: el panorama mayor

Antes que nada, necesitas elegir una estrategia de migración. ¿Deseas migrar todo el sitio de una vez o sección por sección?

Identifica las secciones y páginas que más se beneficien de la conversión. Las páginas de inicio, los nuevos anuncios de productos y páginas similares constituyen un lugar natural donde comenzar.

Identifica todos los tipos de contenido / información en tu sitio.

• Información de productos
• Información de precios
• Información de la empresa
• Portfolio (bolsa de trabajo)
• Servicios ofrecidos
• Información del inversor
• Carro de compras
• Foros de usuarios
• etc.

Desglosando tus páginas

Una vez que hayas comprendido los tipos de contenido en tu sitio, es hora de analizar tus páginas existentes para obtener divisiones lógicas de contenido.

• Navegación principal
• Subnavegación
• Encabezados y pies de página
• Contenido
• Información relacionada
• Otros

Analiza la estructura de tus tablas en busca de tablas anidadas y de celdas vacías usadas para márgenes y espaciadores. (Queremos reemplazarlas con etiquetas div o con una estructura de tablas mucho más simple).

Echa una mirada a tu marcado

Una vez que hayas analizado la estructura de tus páginas, es hora de mirar por debajo de la capucha proverbial y de analizar tu marcado actual de HTML presentacional, el cual puede ser reemplazado por marcado estructural.

• Por el amor de todo lo sagrado, ¡líbrate de las etiquetas <font> y de los espaciadores GIF!
• Además, bota los marcados <b> y <br>.
• Deshazte del marcado presentacional para tablas (bgcolor, background, etc.).
• Reemplaza la codificación de CSS puramente presentacional (por ejemplo <span class="header">) por marcado estructural adecuado. ((Tantek Çelik brinda más detalles en su publicación: A Touch of Class).

Reemplaza las etiquetas presentacionales por marcado estructural

Puedes utilizar “encontrar y reemplazar” (y expresiones regulares), pero la manera más simple de realizarlo sería visualizar tu página actual en un explorador, y copiar y pegar el texto en tu editor HTML.

¡Considera la estructura de tu documento! El simple paso de reemplazar etiquetas <b> por <strong> no es suficiente.

¿Cuál es el encabezado más importante? Márcalo con una etiqueta <h1>. Marca tus subtítulos con etiquetas <h2>, etc. Márca tus párrafos con etiquetas <p>. Marca tu navegación como listas no ordenadas.

Elige un DOCTYPE y utilízalo. (Recomendamos XHTML transicional, a menos que seas un purista, en cuyo caso, usa XHTML estricto).

Divide tu página en divisiones (divs) lógicas

Coloca tu navegación principal en un div con una id de mainnav (navegación principal); coloca tu subnavegación dentro de una div con un id o class de subnav (subnavegación); coloca tu pie de página en un <div id="footer"> y envuelve tu contenido dentro de un <div id="content">.

No parece ser mucho ahora, pero cuando empieces a agregar reglas a tus hojas de estilo, todo pronto se verá mucho mejor.

Es hora de comenzar a escribir tu CSS

Al comienzo, otórgale a cada div un "border". Por ejemplo, div {border:1px dotted gray; padding:.5em} Esto contribuirá a que puedas ver donde empieza y termina cada división y, además, a descubrir si tiene algún anidamiento.

Escribe primero tu CSS para los selectores de elemento (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, etc.).

Utiliza tantos selectores contextuales o de descendientes como sea posible. Esto contribuirá a que tu marcado se vea mucho más definido. Por ejemplo, #subnav li{border:1px solid black; padding:.5em; display: inline} solamente afectará los ítems de lista que tienen lugar dentro de tu div de subnav.

Pon a prueba tantos exploradores como puedas y haz que tus amigos pongan a prueba los suyos.

Ejemplos de sitios diseñados con CSS

• CSS Zen Garden
• Adobe Studio
• Wired News
• ESPN
• Quark
• Inc.com
• PGA Open Championship
• phish.com
• CSS Edge

Infórmate

Obviamente, no podemos abarcar todo lo que necesitas saber sobre los diseños con CSS en una hora, pero estos libros pueden ayudarte a tener un rápido conocimiento del uso de las Normas Web para que tus páginas sean más rápidas, definidas y menos pesadas.

• Eric Meyer on CSS: Mastering the Language of Web Design; Eric Meyer; New Riders; 2002
• Designing with Web Standards; Jeffrey Zeldman; New Riders; 2003
• Cascading Style Sheets; Separating Content from Presentation; Owen Briggs, Steven Champeon, Eric Costello, and Matt Patterson; glasshaus; 2002
• SAMS Teach Yourself CSS in 24 Hours; Kynn Bartlett; SAMS; 2002
• Cascading Style Sheets; Designing for the Web; Hakon Wium Lee and Bert Bos; Addison-Wesley Pub Co; 1999
• Cascading Style Sheets; The Definitive Guide; Eric Meyer; O'Reilly & Associates; 2000

¿Papel? No necesitamos nada de papel hediondo: Recursos en línea

CSS-Discuss

• Lista de correo: muy activa, muy útil.
• Wiki: "Entre otras cosas, wiki funciona como una memoria a largo plazo colectiva para los participantes de la lista”. ¿Quieres darle a Internet Explorer for Windows algo que este explorador pueda entender, pero darle algo más avanzado a mejores exploradores? Aquí encontrarás como hacerlo y mucho más.
• Archivos: ¿Tienes algún problema con CSS y no encuentras ninguna respuesta? No te preocupes, alguien más ya ha tenido (y recibido ayuda para tratar de resolver) ese mismo problema. Encuentra las respuestas aquí.

zeldman.com The Daily Report: Ofrece regularmente contenido claro y perspicaz y útiles enlaces

A List Apart Para los que diseñan sitios Web

• Taming lists, de Mark Newhouse. Información indispensable que te ayudará a brindarle a tu navegación un marcado semántico.
• CSS: Going to Print, Eric Meyer. Nunca vas a tener que volver a hacer una “versión para la impresora”.
• Alternative Style: Working With Alternate Style Sheets, de Paul Sowden. Deja que tus visitantes decidan la manera de visualizar sus páginas.
• Using XHTML and CSS for an effective Search Engine Optimization Campaign, de Brandon Olejniczak. El marcado estructural te ayudará, además, a obtener mejores clasificaciones en los motores de búsqueda.

The Web Standards project Bendita sea esta gente.

CSS: A guide for the unglued Una gran página de enlaces

CSS Layout Techniques: for Fun and Profit Diseños que puedes utilizar en tus proyectos, de Eric Costello. Recursos y tutoriales.

Real World Style Diseños, consejos y trucos sobre CSS de Mark Newhouse.

The Business Benefits of Web Standards Buenas noticias para los "trajes" (ejecutivos) modernos. La doctrina de las Normas Web en términos que hasta un MBA (alguien con su Maestría en Administración) puede apreciar

Gracias. ¿Tienes alguna pregunta?