El Problema de Diseñar con Tablas

Wednesday, July 11, 2007

Personalmente que llevo trabajando con HTML desde hace mucho tiempo debo confesar que el dejar las tablas de lado me tomo su tiempo, a un ahora que el concepto del uso CSS esta mas latente por los diseñadores es necesario una transición para dejar de lado las benditas tablas.

A pesar de esto el uso de tablas sigue siendo valido pero no como antes de utilizaba en el diseño ahora debe mirarse solo como un complemento en caso puntuales que sea necesario su utilización.

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.

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.

Lo que no vemos en las tablas:

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

La solución al 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.

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

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.


FUENTE:
http://x-web.blogcindario.com