El diseño web sin tablas (o diseño web sin tablas ) es un método de diseño web que evita el uso de tablas HTML para controlar el diseño de la página . En lugar de las tablas HTML, hojas de estilo lenguajes tales como hojas de estilo en cascada (CSS) se utilizan para organizar los elementos y texto en una página Web .
Historia
HTML es un lenguaje de marcado cuya presentación visual se dejó inicialmente en manos del usuario. Sin embargo, a medida que Internet se expandió del mundo académico y de la investigación a la corriente principal a mediados de la década de 1990, y se volvió más orientado a los medios, los diseñadores gráficos buscaron formas de controlar la apariencia visual de sus páginas web. Como lo popularizó especialmente el diseñador David Siegel en su libro Creando sitios web asesinos , se utilizaron tablas y espaciadores (generalmente imágenes GIF transparentes de un solo píxel con ancho, alto o márgenes explícitamente especificados) 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 poderosos , lo que significó que los diseñadores web ya no necesitaban conocimientos técnicos de HTML para crear páginas web. [2] Dichos editores fomentaron indirectamente el uso extensivo de tablas anidadas para colocar elementos de diseño. A medida que los diseñadores editaron sus documentos en estos editores, se agregaron código innecesario y elementos vacíos al documento. Además, era probable que los diseñadores no calificados usaran tablas más de lo necesario cuando usaban un editor WYSIWYG. Esta práctica con frecuencia condujo a muchas tablas anidadas dentro de tablas, así como tablas con filas y columnas innecesarias. El uso de editores gráficos con herramientas de corte que generan HTML e imágenes directamente también promovió un código deficiente con tablas que a menudo tienen muchas filas de 1 píxel de alto o ancho. A veces, se utilizaron muchas más líneas de código para representar contenido que el contenido real en sí.
La dependencia de las tablas con fines de diseño provocó una serie de problemas. Muchas páginas web se diseñaron con tablas anidadas dentro de tablas, lo que dio como resultado documentos HTML de gran tamaño que utilizan más ancho de banda que los documentos con un formato más simple. Además, cuando se linealiza un diseño basado en tablas, por ejemplo, cuando lo analiza un lector de pantalla o un motor de búsqueda, el orden resultante del contenido puede ser algo confuso y confuso.
Las hojas de estilo en cascada (CSS) se desarrollaron para mejorar la separación entre diseño y contenido , y avanzar hacia 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 colocar elementos HTML en la página. Las tablas HTML todavía tienen su lugar legítimo al presentar información tabular dentro de las páginas web, [3] y a veces también se siguen utilizando como dispositivos de diseño en situaciones en las que la compatibilidad con CSS es deficiente o problemática, como centrar verticalmente un elemento. Otra área en la que todavía se utilizan tablas son los correos electrónicos, porque muchos clientes de correo electrónico populares no se han mantenido al día con la representación moderna de HTML y CSS. En tal caso, Los correos electrónicos complejos pierden parte de su alineación 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) extendió CSS1 con facilidades para el posicionamiento y el diseño de tablas.
La preferencia por usar tablas HTML en lugar de CSS para controlar el diseño de páginas web completas se debió a varias razones:
- el deseo de los editores de contenido de replicar sus elementos de diseño corporativo existentes en su sitio web;
- las limitaciones en el momento del soporte de CSS en los navegadores;
- la base instalada de navegadores que no admitían 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 (incluida 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.
Puntos de referencia en la adopción de diseños basados en CSS incluyen los estándares del proyecto Web 'Navegador campaña s Actualización de febrero de 2001 y la revista de diseño web A List Apart ' s rediseño simultánea, seguido de la conexión de cable rediseño en 2002. [5] El CSS Zen Garden El sitio web, lanzado en 2003, ha sido reconocido por popularizar los diseños sin tablas. [6]
Razón fundamental
El propósito pretendido y semántico de las tablas HTML radica en presentar datos tabulares [3] [7] en lugar de diseñar páginas. [8] Los beneficios de usar CSS para el diseño de páginas incluyen una mejor accesibilidad a la información para una variedad más amplia de usuarios, utilizando una amplia variedad de agentes de usuario . Hay ahorros de ancho de banda debido a que hay una gran cantidad de semánticamente sin sentido
,
y las
etiquetas se eliminan de docenas de páginas dejando menos títulos, párrafos y listas, pero más significativos. Las instrucciones de diseño 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 puede ser rediseñado o renombrado en una sola pasada simplemente alterando el marcado del CSS específico, afectando a todas las páginas que se basan en esa hoja de estilo. Se puede agregar nuevo contenido HTML de tal manera que el CSS existente le aplique inmediatamente reglas de diseño consistentes sin ningún esfuerzo adicional.
Ventajas
Accesibilidad
Debido al rápido crecimiento de Internet, la expansión de la 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 los usuarios que operan una amplia variedad de dispositivos más allá del ecosistema relativamente uniforme de computadoras de escritorio y monitores CRT. la web se hizo popular por primera vez en. El diseño web sin tablas mejora considerablemente la accesibilidad web a este respecto.
Los lectores de pantalla y los dispositivos braille tienen menos problemas con los diseños sin mesa porque siguen una estructura lógica. Lo mismo ocurre con los rastreadores web de los motores de búsqueda , los agentes de software que la mayoría de los editores de sitios web esperan que encuentren sus páginas, las clasifiquen con precisión y permitan que los usuarios potenciales las encuentren fácilmente en las búsquedas adecuadas.
Como resultado de la separación de diseño (CSS) y estructura (HTML), también es posible proporcionar diferentes diseños para diferentes dispositivos, por ejemplo , computadoras de mano , teléfonos móviles, etc. También es posible especificar una hoja de estilo diferente para imprimir, por ejemplo, para ocultar o modificar la apariencia de anuncios o elementos de navegación que son irrelevantes y una molestia en la versión imprimible de la página.
La directriz de las Pautas de accesibilidad al contenido web del W3C no. 3 establece que "use el marcado y las hojas de estilo y hágalo correctamente". [9] El punto de control 3.3 de la guía, un punto de control de prioridad 2, dice "use hojas de estilo para controlar el diseño y la presentación". [10]
Ahorro de ancho de banda
El diseño sin tabla produce páginas web con menos etiquetas HTML que se utilizan únicamente para posicionar el contenido. Esto normalmente significa que las propias páginas se vuelven más pequeñas para descargar. La filosofía implica que todas las instrucciones relacionadas con el diseño y el posicionamiento se trasladen a hojas de estilo externas. De acuerdo con las capacidades básicas de HTTP , ya que rara vez cambian y se aplican en común 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
El mantenimiento de un sitio web puede requerir cambios frecuentes, tanto pequeños como grandes, en el estilo visual de un sitio web, según el propósito del sitio. En el diseño basado en tablas, el diseño es parte del propio HTML. Como tal, sin la ayuda de editores visuales basados en plantillas, como los editores HTML , cambiar el diseño posicional de los elementos en un sitio completo puede requerir un gran esfuerzo, dependiendo de la cantidad de cambios repetitivos necesarios. Incluso el empleo de sed o utilidades de búsqueda y reemplazo globales similares no puede aliviar el problema por completo.
En el diseño sin tablas que utiliza CSS, la información del diseño puede residir en un documento CSS. Debido a que la información de diseño puede estar centralizada, es posible que estos cambios se puedan realizar de forma rápida y global de forma predeterminada. Es posible que no sea necesario ajustar los archivos HTML en sí mismos al realizar cambios de diseño.
Además, debido a que la información de diseño puede almacenarse externamente al HTML, puede ser bastante fácil agregar contenido nuevo en un diseño sin tablas, ya sea modificando una página existente o agregando una nueva página. Por el contrario, sin dicho diseño, el diseño de cada página puede requerir un cambio manual más lento de cada instancia o el uso de utilidades globales de búsqueda y reemplazo. Sin embargo, los propietarios de sitios a menudo quieren que determinadas páginas sean diferentes de otras en el sitio, ya sea por un período corto o largo. Esto a menudo requerirá que se desarrolle una hoja de estilo separada para esa página. Sin embargo, el contenido de la página (o plantilla) generalmente puede permanecer inalterado, lo que no es el caso en un diseño basado en tablas.
Desventajas
Debido a que CSS se puede almacenar en caché, un diseño completamente basado en CSS se puede representar de manera incorrecta si se realizan cambios y un cliente aún usa una hoja de estilo desactualizada. Esto se puede mitigar con un desarrollo cuidadoso y el uso de técnicas cachebuster .
Ver también
- Enmarcado (World Wide Web)
- Diseño web adaptable
- Alfabetización web (diseño y accesibilidad)
- Holy Grail (diseño web)
Referencias
- ↑ Gruber, Jordan S. (1 de febrero de 1997). "Fuera del sitio" . Cableado .
- ^ Maas, Benard. "Una breve historia de los editores WYSIWYG" . 1PMWD . Consultado 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 editor HTML WYSIWYG comercial y sólido estaba disponible para que lo usara cada persona ... Cuando una página web se construyó a partir de el software WYSIWYG MS FrontPage se ejecutaría con un FPSE backend instalado y disfrutaría de toda la fuerza que un tecnólogo podría construir escribiendo código HTML desde cero. Los diseñadores web ya no necesitaban conocimientos técnicos de HTML para crear páginas web.
- ^ a b Jennifer Kyrnin. "Tablas para datos tabulares - ¿Qué son los datos tabulares? Cuándo utilizar tablas en un documento XHTML basado en estándares" . About.com, una parte de The New York Times Company . Consultado el 22 de octubre de 2009 .
- ^ Miente, Håkon Wium; Bos, Bert (17 de diciembre de 1996). "Recomendación del W3C: hojas de estilo en cascada, nivel 1" . W3C . Archivado desde el original el 5 de junio de 1997 . Consultado el 19 de abril de 2019 .
- ^ Zeldman, Jeffrey (14 de mayo de 2003). Diseñar con estándares web (1ª ed.). Indianápolis: nuevos jinetes. págs. 120-134 . ISBN 978-0-7357-1201-0.
- ^ Zeldman, Jeffrey (2007). Diseñar con estándares web (2ª ed.). Berkeley: nuevos jinetes. pag. 137 . ISBN 978-0-321-38555-0.
- ^ "17.2.1 Objetos de tabla anónimos" . Especificación de hojas de estilo en cascada Nivel 2 Revisión 1 (CSS 2.1) . W3C . 2009 . Consultado el 23 de octubre de 2009 .
- ^ Dominique Hazaël-Massieux (2005). "CÓMO de diseño sin tabla" . W3C . Consultado el 8 de septiembre de 2007 .
- ^ "Pautas de accesibilidad al contenido web 1.0" . W3C. 1999 . Consultado el 19 de septiembre de 2009 .
Pauta 3. Utilice hojas de estilo y marcado y hágalo correctamente.
- ^ "Técnicas para las pautas de accesibilidad del 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). "Retooling Slashdot con estándares web" . Una revista List Apart . Consultado el 20 de septiembre de 2009 .
- ^ Dan Shafer (2003). "Utopía HTML: diseñar sin tablas usando CSS, Capítulo 4: Diseño de sitios web CSS" . SitePoint Pty . Consultado el 20 de septiembre de 2009 .
... además de las ventajas organizativas descritas anteriormente, el navegador tiene menos código para descargar. En sitios muy diseñados, o sitios con cientos de páginas o más, este tiempo de descarga reducido puede tener un impacto significativo tanto en la experiencia del usuario como en los costos de ancho de banda.
enlaces externos
- CÓMO de diseño sin tabla del W3C
- 13 razones por las que CSS es superior a las tablas en el diseño de sitios web
- Diseños abiertos (una colección de plantillas web sin tabla compatibles con W3C)