He estado amenazando con escribir un artículo sobre XHTML durante un tiempo y aquí va. También hablaré sobre CSS y diseños web sin tablas, porque en el mundo web en este momento, XHTML y CSS son una pareja tan popular como Ashton y Demi (que pueden haberse separado ahora, pero no podría pensar en otra pareja de celebridades).
Recientemente, convertí mi weblog de Radio Userland a un diseño CSS sin tablas. Es decir, el diseño que está viendo ahora mismo no usa tablas para su diseño y todo el estilo está completamente definido usando CSS (hojas de estilo en cascada). Usé un diseño CSS de CSS Zen Garden, uno de Michael Landis (quien amablemente me dio permiso para usarlo). No tengo mucha experiencia diseñando CSS, así que pensé que sería mejor comenzar con un diseño existente de alguien que ya domina el arte de CSS. De esa manera puedo aprender haciendo, que descubrí hace mucho tiempo que es la mejor manera de mejorar en la Web. Al mismo tiempo, para darle a mi diseño CSS las mejores posibilidades de éxito, decidí hacer que mi sitio fuera compatible con XHTML.
XHTML es básicamente una combinación de HTML y XML. Es un puente entre dos mundos: la expresividad semántica de XML y el estándar de hipertexto de HTML. Entonces, ¿cuáles son las principales diferencias entre XHTML y su predecesor HTML 4? Según lo definido por W3Schools:
– Los elementos XHTML deben estar correctamente anidados – Los documentos XHTML deben estar bien formados – Los nombres de las etiquetas deben estar en minúsculas – Todos los elementos XHTML deben estar cerrados
En una palabra, XHTML es mucho más quisquilloso que HTML. La razón de esto es que XML requiere un estricto cumplimiento de las reglas de sintaxis, por lo que no hay ambigüedad para las computadoras. Las máquinas no pueden manejar la ambigüedad, pero los humanos (y la mayoría de los navegadores web) sí pueden. El resultado de esto es que XHTML, debido a que los requisitos de sintaxis son más estrictos que con HTML, requiere mucho más trabajo y esfuerzo para escribir. Incluso escribir esta publicación será un trabajo extra para mí, porque tendré que ejecutarlo a través de HTML Tidy para corregir todos los errores HTML que produce el editor Radio Userland WYSIWYG.
Entonces, si es más trabajo, tal vez se pregunte por qué molestarse con XHTML. Después de todo, los navegadores web todavía usan HTML 4. Así que no es como si tener utilizar XHTML para publicar en la Web. La respuesta se trata de compatibilidad futura. Al usar XHTML, está bastante seguro de que sus diseños funcionarán no solo hoy, sino también dentro de unos años. ¿Por qué? En pocas palabras, es porque XML llegó para quedarse, mientras que HTML 4 está a punto de desaparecer.
Uno de los argumentos más entretenidos para XHTML es este ensayo de Jeremy Keith, que usa The Matrix como inspiración:
“El desarrollo web es una guerra y somos soldados, escribiendo hacks y soluciones para hacer que los diseños se vean bien en los navegadores más antiguos con errores.
¿Y si mañana la guerra pudiera terminar? ¿Qué pasaría si pudiéramos crear sitios que no se derrumben en futuras versiones de navegadores? ¿No vale la pena luchar por eso? ¿No vale la pena desarrollarlo? “
Ja, ja, entonces tienes una opción: ¿la píldora roja o la píldora azul?
Cristian Vidmar despotricó recientemente contra los diseños CSS sin tablas. Acaba de lanzar un bonito tema basado en tablas para Radio Userland. El punto de Cristian, reiterado hoy, es que los diseños CSS no necesariamente tienen que excluir tablas. Si el diseño será complejo y / o gráfico, entonces Cristian considera que es mejor diseñar su sitio usando CSS y mesas. Este es un argumento justo: para propósitos prácticos, las tablas son muy útiles y son menos laboriosas de implementar que el posicionamiento CSS. Sin embargo, el argumento principal en contra de las tablas para el diseño es que las tablas no transmiten ninguna semántico información sobre el estructura del sitio. Las tablas son un dispositivo de presentación, mientras que el uso de etiquetas DIV en CSS para el diseño no solo se encarga de la presentación, sino que además transmite información sobre la estructura de los datos. A List Apart explica esto bastante bien:
“Los DIV implican una agrupación lógica o estructural. Incluso cuando están anidados, siguen siendo un marcado estructural … Sin embargo, TABLEs implican una relación entre los encabezados de columna y / o fila y los datos en las celdas TABLE. Cuando los usamos para el diseño, perdemos la semántica estructural de una TABLA. Y volvemos a usar HTML para el diseño. Anidar TABLAS solo agrava el problema “.
Sin embargo, no niego que las etiquetas div CSS son mucho más difíciles de implementar para fines de diseño que las tablas HTML. Deberá enterrar su cabeza en un buen libro de CSS de un verdadero maestro como Eric Meyer para comprender el posicionamiento de CSS. Por lo tanto, en términos de simplicidad y cantidad de esfuerzo requerido, los diseños de las mesas siguen reinando. Sin embargo, ese es el corto plazo.
A medio plazo, ¿qué pasa con el mantenimiento del diseño? Cuando necesite actualizarlo, deberá entrometerse con las tablas. Sé por experiencia que tener que preocuparse por un montón de celdas de la tabla para volver a montar un diseño de diseño es más complicado que simplemente modificar un par de líneas en un archivo CSS. Personalmente, también encuentro las etiquetas div CSS mucho más fáciles de ver que una gran mezcla de tablas HTML, etiquetas TR y TD.
Y, a largo plazo, los diseños sin tablas CSS tienen sentido porque transmiten información semántica sobre la estructura de su sitio. No creo que comprendamos del todo la importancia que tendrá la semántica dentro de 5 a 10 años en la Web. Pero sabemos que nuestros sitios web se implementarán en una serie de dispositivos o dispositivos, grandes y pequeños. Tener un diseño estructurado semánticamente permite que su sitio se represente más fácilmente en cualquier tipo de dispositivo, porque las etiquetas div pueden transmitir un orden lógico que las celdas de la tabla no pueden.
No pretendo ser un experto en XHTML y CSS; personas como Zeldman y Mark Pilgrim saben mucho más que yo sobre estas cosas. Pero soy un tipo curioso y me gusta experimentar con nuevas tecnologías web. De ahí mi entusiasta implementación de CSS y XHTML en mi weblog de Radio Userland. Por cierto, no encontré muchas otras personas que tengan diseños de CSS Radio sin tabla. Joe Gregorio fue el único que encontré con un diseño CSS. ¿Alguien sabe de otros? En mi vecindario de blogs, noté que Danny Ayers recientemente hizo un diseño CSS, pero no usa Radio. Con mucho gusto escribiré algunas notas sobre mis experiencias si hay alguna demanda por parte de los usuarios de Radio. Mi siguiente paso será diseñar mi propio diseño CSS original, y sí, volveré a usar un diseño sin tablas. Probablemente no abordaré esto por un tiempo, pero siempre estoy mirando hacia el futuro