Hispanopedia WikiEl diseño web sin tablas (o maquetación web sin tablas ) es un método de diseño web que evita el uso de tablas HTML para el control del diseño de la página . En lugar de tablas HTML, se utilizan lenguajes de hojas de estilo como las hojas de estilo en cascada (CSS) para organizar los elementos y el texto en una página web .
Historia
HTML es un lenguaje de marcado cuya presentación visual inicialmente quedaba a criterio del usuario. Sin embargo, a medida que Internet se expandió del ámbito académico y de investigación al público general a mediados de la década de 1990, y se orientó más hacia los medios de comunicación, los diseñadores gráficos buscaron formas de controlar la apariencia visual de sus páginas web. Como popularizó especialmente el diseñador David Siegel en su libro Creating Killer Web sites , se utilizaron tablas y espaciadores (generalmente imágenes GIF transparentes de un solo píxel con ancho, alto o márgenes especificados explícitamente) para crear y mantener diseños de página. [ 1 ]
A finales de la década de 1990, llegaron al mercado los primeros editores WYSIWYG razonablemente potentes, lo que significó que los diseñadores web ya no necesitaban conocimientos técnicos de HTML para crear páginas web. [ 2 ] Estos editores fomentaron indirectamente el uso extensivo de tablas anidadas para posicionar elementos de diseño. Al editar sus documentos en estos editores, se añadía código innecesario y elementos vacíos. Además, los diseñadores inexpertos solían usar tablas más de lo necesario al usar un editor WYSIWYG. Esta práctica a menudo generaba muchas tablas anidadas, así como tablas con filas y columnas innecesarias. El uso de editores gráficos con herramientas de segmentación que generaban HTML e imágenes directamente también promovía un código deficiente, con tablas que a menudo tenían muchas filas de 1 píxel de alto o ancho. En ocasiones, se utilizaban muchas más líneas de código para renderizar el contenido que el propio contenido.
La dependencia de las tablas para el diseño web generó varios problemas. Muchas páginas web se diseñaron con tablas anidadas, lo que dio como resultado documentos HTML extensos que consumen más ancho de banda que los documentos con un formato más sencillo. Además, cuando un diseño basado en tablas se linealiza, por ejemplo, al ser procesado por un lector de pantalla o un motor de búsqueda, el orden resultante del contenido puede ser desordenado y confuso.
Las hojas de estilo en cascada (CSS) se desarrollaron para mejorar la separación entre diseño y contenido , y volver a una organización semántica del contenido en la web. El término "diseño sin tablas" implica el uso de CSS en lugar de tablas de diseño para posicionar elementos HTML en la página. Las tablas HTML aún tienen su lugar legítimo al presentar información tabular dentro de las páginas web, [ 3 ] y también se utilizan a veces como dispositivos de diseño en situaciones para las que el soporte de CSS es deficiente o problemático, como centrar verticalmente un elemento. Otro ámbito donde todavía se utilizan tablas es en los correos electrónicos, porque muchos clientes de correo electrónico populares no se han actualizado con la representación moderna de HTML y CSS. En tal escenario, los correos electrónicos complejos pierden parte de su coherencia estructural y creativa.
Adopción
La especificación CSS1 fue publicada en diciembre de 1996 por el W3C [ 4 ] con el objetivo de mejorar la accesibilidad web y enfatizar la separación de los detalles de presentación en las hojas de estilo del contenido semántico en los documentos HTML . CSS2, en mayo de 1998 (posteriormente revisado en CSS 2.1 y CSS 2.2), amplió CSS1 con funcionalidades para el posicionamiento y el diseño de tablas.
La preferencia por utilizar tablas HTML en lugar de CSS para controlar el diseño de páginas web completas se debía a varias razones:
- el deseo de los editores de contenido de replicar los elementos de diseño corporativo existentes en su sitio web;
- las limitaciones en el momento de la compatibilidad con CSS en los navegadores;
- la base instalada de navegadores que no eran compatibles con CSS;
- la falta de familiaridad de los nuevos diseñadores web con los estándares CSS;
- la falta de conocimiento o preocupación por las razones (incluidas la semántica HTML y la accesibilidad web ) para usar CSS en lugar de lo que se percibía como una forma más fácil de lograr rápidamente los diseños previstos, y
- una nueva generación de herramientas de diseño web WYSIWYG que fomentaron esta práctica.
Entre los hitos en la adopción de diseños basados en CSS se incluyen la campaña Browser Upgrade del Web Standards Project de febrero de 2001 y el rediseño simultáneo de la revista de diseño web A List Apart , seguido por el rediseño de Wired en 2002. [ 5 ] Se le atribuye al sitio web CSS Zen Garden , lanzado en 2003, la popularización de los diseños sin tablas. [ 6 ]
Razón fundamental
El propósito previsto y semántico de las tablas HTML radica en presentar datos tabulares [ 3 ] [ 7 ] en lugar de maquetar páginas. [ 8 ] Los beneficios de usar CSS para el diseño de páginas incluyen una mayor accesibilidad de la información para una mayor variedad de usuarios, que utilizan una amplia variedad de agentes de usuario . Hay ahorros de ancho de banda, ya que se eliminan grandes cantidades de etiquetas sin significado semántico de docenas de páginas, dejando menos encabezados, párrafos y listas, pero más significativos. Las instrucciones de maquetación se transfieren a hojas de estilo CSS para todo el sitio, que se pueden descargar una vez y almacenar en caché para su reutilización mientras cada visitante navega por el sitio. Los sitios pueden volverse más fáciles de mantener, ya que todo el sitio se puede rediseñar o cambiar de marca en una sola pasada simplemente alterando el marcado del CSS específico, lo que afecta a todas las páginas que dependen de esa hoja de estilo. Se puede agregar nuevo contenido HTML de tal manera que las reglas de maquetación consistentes se le apliquen inmediatamente mediante el CSS existente sin ningún esfuerzo adicional.<table><tr><td>
Ventajas
Accesibilidad
Debido al rápido crecimiento de Internet, la creciente legislación sobre discriminación por discapacidad y el uso cada vez mayor de teléfonos móviles y PDA , es necesario que el contenido web sea accesible para usuarios que utilizan una amplia variedad de dispositivos, más allá del ecosistema relativamente uniforme de ordenadores de escritorio y monitores CRT en el que la web se popularizó inicialmente. El diseño web sin tablas mejora considerablemente la accesibilidad web en este sentido, ya que las tablas demasiado anchas para una pantalla deben desplazarse lateralmente para leerse por completo, mientras que el texto se ajusta automáticamente.
Los lectores de pantalla y los dispositivos Braille presentan menos problemas con los diseños sin tablas, ya que siguen una estructura lógica. Lo mismo ocurre con los rastreadores web de los motores de búsqueda , los programas informáticos que la mayoría de los editores web esperan que encuentren sus páginas, las clasifiquen correctamente y, de este modo, permitan a los usuarios potenciales encontrarlas fácilmente en las búsquedas pertinentes.
Como resultado de la separación entre diseño (CSS) y estructura (HTML), también es posible ofrecer diferentes diseños para distintos dispositivos, como dispositivos portátiles , teléfonos móviles, etc. Asimismo, es posible especificar una hoja de estilos diferente para la impresión, por ejemplo, para ocultar o modificar la apariencia de anuncios o elementos de navegación que resulten irrelevantes y molestos en la versión imprimible de la página.
La directriz n.º 3 de las Pautas de Accesibilidad al Contenido Web del W3C establece: «Utilice hojas de marcado y de estilo, y hágalo correctamente». [ 9 ] El punto de control 3.3 de la directriz, un punto de control de prioridad 2, dice: «Utilice hojas de estilo para controlar el diseño y la presentación». [ 10 ]
Ahorro de ancho de banda
El diseño sin tablas produce páginas web con menos etiquetas HTML utilizadas exclusivamente para posicionar el contenido. Esto normalmente significa que las páginas en sí mismas son más pequeñas para descargar. La filosofía implica que todas las instrucciones relativas al diseño y posicionamiento se trasladen a hojas de estilo externas. De acuerdo con las capacidades básicas de HTTP , como estas rara vez cambian y se aplican a muchas páginas web, se almacenarán en caché y se reutilizarán después de la primera descarga. Esto reduce aún más el ancho de banda y los tiempos de descarga en todo el sitio. [ 11 ] [ 12 ]
Mantenibilidad
Mantener un sitio web puede requerir cambios frecuentes, tanto pequeños como grandes, en su estilo visual, según su propósito. En el diseño basado en tablas, la maquetación forma parte del propio HTML. Por lo tanto, sin la ayuda de editores visuales basados en plantillas, como los editores HTML , cambiar la disposición de los elementos en todo el sitio puede requerir un gran esfuerzo, dependiendo de la cantidad de cambios repetitivos necesarios. Incluso el uso de sed o utilidades similares de búsqueda y reemplazo global no soluciona el problema por completo.
En el diseño sin tablas mediante CSS, la información de diseño puede residir en un documento CSS. Dado que esta información puede estar centralizada, es posible que estos cambios se realicen de forma rápida y global por defecto. No es necesario modificar los archivos HTML al realizar cambios de diseño.
Además, dado que la información de diseño puede almacenarse externamente al HTML, añadir contenido nuevo en un diseño sin tablas puede resultar bastante sencillo, ya sea modificando una página existente o creando una nueva. En cambio, sin este tipo de diseño, la maquetación de cada página puede requerir una modificación manual más laboriosa o el uso de herramientas globales de búsqueda y reemplazo. Sin embargo, los propietarios de sitios web suelen querer que ciertas páginas se diferencien de las demás, ya sea temporalmente o a largo plazo. Esto suele requerir el desarrollo de una hoja de estilos independiente para esa página. El contenido de la página (o plantilla) generalmente puede permanecer inalterado, lo que no ocurre en un diseño basado en tablas.
Véase también
Referencias
- ↑ Gruber, Jordan S. (1997-02-01). "Fuera de lugar" . Wired .
- ↑ Maas, Benard. "Una breve historia de los editores WYSIWYG" . 1PMWD . Recuperado el 10 de febrero de 2015.
Microsoft Office FrontPage se lanzó como un paquete de la versión de 1997 de Microsoft Office, fue la primera vez que un editor y publicador WYSIWYG HTML comercial y robusto estuvo disponible para que cualquier persona lo usara... Cuando una página web creada con el software WYSIWYG MS FrontPage se ejecutaba con un FPSE de backend implementado, disfrutaba de toda la potencia que un tecnólogo podría crear escribiendo código HTML desde cero. Los diseñadores web ya no necesitaban un conocimiento técnico de HTML para crear páginas web.
- 1 2 Jennifer Kyrnin. "Tablas para datos tabulares : ¿Qué son los datos tabulares? ¿Cuándo usar tablas en un documento XHTML basado en estándares?" . About.com, parte de The New York Times Company. Archivado del original el 22 de enero de 2009. Consultado el 12 de mayo de 2025 .
- ↑ Lie, Håkon Wium; Bos, Bert (17 de diciembre de 1996). "Recomendación del W3C: Hojas de estilo en cascada, nivel 1" . W3C . Archivado del original el 5 de junio de 1997. Consultado el 19 de abril de 2019 .
- ↑ Zeldman, Jeffrey (14 de mayo de 2003). Diseño con estándares web (1.ª ed.). Indianápolis: New Riders. págs. 120-134 . ISBN 978-0-7357-1201-0.
- ↑ Zeldman, Jeffrey (2007). Diseño con estándares web (2.ª ed.). Berkeley: New Riders. pág . 137. ISBN 978-0-321-38555-0.
- ↑ "17.2.1 Objetos de tabla anónimos" . Especificación de hojas de estilo en cascada de nivel 2, revisión 1 (CSS 2.1) . W3C . 2009. Consultado el 23 de octubre de 2009 .
- ↑ Dominique Hazaël-Massieux (2005). "Tableless layout HOWTO" . W3C . Consultado el 8 de septiembre de 2007 .
- ↑ "Directrices de accesibilidad al contenido web 1.0" . W3C. 1999. Consultado el 19 de septiembre de 2009. Directriz
3. Utilice hojas de marcado y estilo y hágalo correctamente.
- ↑ "Técnicas para las Pautas de Accesibilidad al Contenido Web 1.0" . W3C. 2000. Consultado el 19 de septiembre de 2009. Utilice
hojas de estilo para controlar el diseño y la presentación.
- ↑ Daniel M. Frommelt (2003). "Reestructurando Slashdot con estándares web" . Revista A List Apart . Consultado el 20 de septiembre de 2009 .
- ↑ Dan Shafer (2003). "HTML Utopia: Designing Without Tables Using CSS, Chapter 4: CSS Website Design" . SitePoint Pty. Archivado del original el 30 de mayo de 2024. Recuperado el 20 de septiembre de 2009. ...
además de las ventajas organizativas descritas anteriormente, el navegador tiene menos código que descargar. En sitios con diseños complejos o con cientos de páginas o más, este menor tiempo de descarga puede tener un impacto significativo tanto en la experiencia del usuario como en los costos de ancho de banda.
Enlaces externos
- Cómo diseñar sin tablas según el modelo W3C
- 13 razones por las que CSS es superior a las tablas en el diseño web.
- Diseños abiertos (una colección de plantillas web sin tablas compatibles con W3C)
- Diseño web
- Accesibilidad web
- Hojas de estilo en cascada
- Diseño web adaptable
