Sideshow barker

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.

Nota para usuarios de IE/Mac:

Para ver correctamente sitios de alfabetos no-romanos (como las traducciones al búlgaro y chino en este sitio), debes cambiar tus preferencias de Lenguage/Fuentes para que el Default Character Set lea "Universal Alphabet (UTF-8)" Esto no afectará ninguno de los sitios que visitas normalmente, y te dará acceso a un nuevo mundo de idiomas que probablemente ni puedes leer de todas maneras.

Yuppie holding a cigar

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.

Plumber with a toliet plunger

Perspectiva general: ¿Qué hay para mí?

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

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.

Man in a top hat, tuxedo, and white tie

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.

Mad scientist hatches his evil plot

El Problema con el uso de tablas:

Preacher testifying to the mortal danger of using tables for layout

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.

Boxer exhausted between rounds of a fight

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

Film director shouting at his crew

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.

Reporter grilling a lawmaker about his website

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.

Sweating orchestra conductor

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

Cowboy talking about the importance of accessibility

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.

Woman freaking out because her markup is ruining her SEO

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.

Construction worker committed to using his old tools

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.

Overconfident yuppie not worried about his code

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.
Bellboy struggling

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 }

Man telephoning his co-worker in a panic

Así es mucho mejor

mucho mejorAdivina ¿cuánto pesa el marcado de esta pequeña tabla? 2,1k. Cuenta con 4 filas y 2 columnas. Y ningún espaciador GIF.
Justo lo necesarioY todos los márgenes con puntos están hechos con CSS y son perfectamente válidos.
  • Ahora éste es un ítem de lista
  • Tal como debería ser
Todo está hecho con 8 celdas de tablas y 4 reglas de CSS.De verdad, todo lo que se necesita son 8 celdas y 4 reglas de CSS.
  • ¡Vivan las listas no numeradas!
  • ¿Por qué no marcas simplemente tus listas no numeradas como tales y dejas 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.
  • Me encantan las listas no numeradas
  • ¡Excelente! Basta de puntos de listas falsos

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 }

Policeman signaling for us to stop and think

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:

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.

Young coder realizing that he does not need to use tables for layout

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}

Superhero flying to our rescue

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.

Chef preparing tag soup

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.

Evil villain mocking us

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.

Friendly mailman

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.

Surgeon in the operating room

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.

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

Passive aggressive maid

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.

Fireman rescuing content

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

Clown

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.

Two superheroes

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.

Paparazzi

Ejemplos de sitios diseñados con CSS

Newsboy selling newspapers

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.

Painter at his easel

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

CSS-Discuss

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

A List Apart Para los que diseñan sitios Web

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

Worker asleep at his computer

Gracias. ¿Tienes alguna pregunta?

; Scott Design Inc

; Adobe Systems Incorporated

Don't blame us!

Even though we did our best translating this thing, you still might want to read the original English version.

Licencia de Creatividad ComunitariaEste trabajo está licenciado bajo una Licencia de Creatividad Comunitaria

>
Scott Design