Vamos a analizar dos ejemplos, o mejor dicho, un resultado al cual se llegó de dos formas diferentes.
Los dos ejemplos en cuestión son The big company CSS y The big company Tables, dos simples páginas que fueron creadas para este articulo. Al compararlas entre sÃ, a simple vista no existen mayores diferencias entre una y otra más allá de algunas posiciones y tamaños diferentes.
Sin embargo las diferencias son grandes, y mientras una de ellas fue estructurada teniendo en cuenta los estándares principales de diseño web, la otra está estructurada utilizando métodos arcaicos y actualmente obsoletos.
“The big company CSS” utiliza el poder de CSS al máximo, efectivamente separando contenido de presentación y además usa elementos xhtml de forma semánticamente correcta. “The big company Tables” utiliza algo de CSS y el trabajo de estructurar la página recae en una tabla (por suerte solo una, no es raro ver páginas con varias tablas anidadas entre si). Además es importante mencionar que “The big company CSS” fue codificada a mano mientras que el código de “The big company Tables” fue generado por un programa WYSIWYG.
Las tablas fueron originalmente usadas por los diseñadores web para lograr estructurar sus páginas en épocas en las cuales no se tenÃan otras herramientas o las existentes eran poco conocidas. Pero la función de una tabla, semánticamente, es el de contener datos tabulares (pensar en un archivo de excel por ejemplo).
Hasta ahora puede parecer que la elección de estructurar usando CSS es simplemente un capricho alimentado por el querer hacer las cosas de la forma “correcta” sin ningún beneficio aparente. Pues bien, los beneficios de aplicar correctamente CSS para estilizar una página son amplios:
Código
Las páginas estructuradas con CSS cargan más rápido. Porque? Porque el código es mas “limpio”, de menor tamaño. Estructurar con tablas trae consigo cantidad de código extra que crea páginas pesadas y por ende tardan mas en cargar ya que es necesario descargar más información.
Código del body de “The big company CSS”
<body> <div id="wrapper"> <h1 id="headTitle">The big company CSS</h1> <ul id="menu"> <li><a href="#">menu opt 1</a></li> <li><a href="#">menu opt 2</a></li> <li><a href="#">menu opt 3</a></li> <li><a href="#">menu opt 4</a></li> <li><a href="#">menu opt 5</a></li> <li><a href="#">menu opt 6</a></li> </ul> <div class="textImage"> <img src="img/460w367h.jpg" alt="dude" class="floatRight"/> <p>Lorem ipsum dolor (etc)</p> <p>Cras sed urna (etc)</p> <div class="unifier"></div> </div> <div class="textImage"> <img src="img/300w306h.jpg" alt="gal" class="floatLeft"/> <p>Pellentesque habitant morbi (etc)</p> <p>Ut non mi sagittis (etc)</p> <div class="unifier"></div> </div> <div id="footer"> <p>2009 © Copyright information</p> </div> </div> </body>
Código del body de “The big company Tables”
<body>
<table width="960" height="" border="0" id="mainBadTable">
<tr>
<td height="103" colspan="6"><font face="Verdana, Geneva, sans-serif" size="6" style="margin:50px 0 22px 10px;"><b>The big company Tables</b></font></td>
</tr>
<tr>
<td width="160" height="36" class="menuItems"><a href="#"><font face="Verdana, Geneva, sans-serif" size="3">menu opt 1</font></a></td>
<td width="160" class="menuItems"><a href="#"><font face="Verdana, Geneva, sans-serif" size="3">menu opt 2</font></a></td>
<td width="160" class="menuItems"><a href="#"><font face="Verdana, Geneva, sans-serif" size="3">menu opt 3</font></a></td>
<td width="160" class="menuItems"><a href="#"><font face="Verdana, Geneva, sans-serif" size="3">menu opt 4</font></a></td>
<td width="160" class="menuItems"><a href="#"><font face="Verdana, Geneva, sans-serif" size="3">menu opt 5</font></a></td>
<td width="160" class="menuItems"><a href="#"><font face="Verdana, Geneva, sans-serif" size="3">menu opt 6</font></a></td>
</tr>
<tr>
<td height="437" colspan="3"><p><font face="Verdana, Geneva, sans-serif" size="3">Lorem ipsum dolor (etc)</font></p>
<p><font face="Verdana, Geneva, sans-serif" size="3">Cras sed urna (etc)</font></p></td>
<td colspan="3"><img src="img/460w367h.jpg" style="float:right" /></td>
</tr>
<tr>
<td height="343" colspan="2"><img src="img/300w306h.jpg" alt="gal" /></td>
<td height="343" colspan="4"><p><font face="Verdana, Geneva, sans-serif" size="3">Pellentesque habitant morbi (etc)</font></p>
<p><font face="Verdana, Geneva, sans-serif" size="3">Ut non mi sagittis (etc)</font></p></td>
</tr>
<tr bgcolor="#000000">
<td height="40" colspan="6" align="right" valign="middle" style="border-top:#999 2px solid;"><p style="float:right; font-size:1.2em;">2009 © Copyright information</p>
</td>
</tr>
</table>
</body>
A simple vista los beneficios de codificar a mano son aparentes en la facilidad de poder encontrar los elementos que conforman la página en “The big company CSS”, mientras que “The big company Tables” al ser generada por un programa WYSIWYG sufre de deficiencias en tabulación y orden. Por qué se creo “The big company Tables” de esa forma? Porque esta es la situación en la que generalmente se crea una página estructurada con tablas.
En términos de tamaño, tenemos 776 caracteres en tbcCSS vs 1883 caracteres en tbcTables, es decir un 143% más de código innecesario en este caso. Si traducimos esto a una página de 200 kb, si fuese hecha con tablas terminarÃa pesando 486kb, una diferencia de 286kb. Uno podrÃa pensar que 286kb es una diferencia despreciable… para un solo usuario, pero cuando empezamos a calcular la cantidad de visitantes por dÃa que puede llegar a tener una página, esto se traduce en gastos innecesarios de bandwith y en páginas que tardan mas en cargar. ImagÃnese si la página principal de google fuese 50kb mas pesada de lo que es actualmente… no dudo en estimar que eso resultarÃa en millones de dolares en perdidas (actualmente la página principal de Google pesa tan solo 23kb)
Dinamismo y mantenimiento
Como dijimos anteriormente, con CSS uno tiene la posibilidad de separar contenido de la presentación. Es decir que la página xhtml lidia solamente con elementos semánticos que encierran contenido, sin especificar estructura ni diseño de ningún tipo, mientras una hoja de estilo externa se encarga de especificar la presentación de los elementos.
Para ejemplificar esto, digamos que en tbcCSS quisiesemos cambiar el fondo de la página. Vamos a la hoja de estilo CSS y cambiamos una lÃnea de código que asocie el fondo a otra imagen. Listo. Nuestro fondo se cambia no solo en la página principal sino también en todas las página que deseemos. Si por ejemplo quisiesemos cambiar el tamaño de la tipografÃa, lo harÃamos solo modificando datos en la hoja de estilo sin tener que lidiar con las obsoletas etiquetas <font>. Se imagina cambiar a mano, párrafo por párrafo el tamaño de una fuente en 20 páginas diferentes? Ineficiente.
Incluso si quisiesemos hacer algo tal como cambiar una columna de lugar, o por ejemplo convertir el menú horizontal en tbcCSS en un menú vertical, esto se puede hacer con CSS. Si quisiesemos convertir un menú horizontal a vertical en tbcTables tendrÃamos que hacer una reestructuración total de las tablas.
Creo que la mejor forma de darse cuenta del poder de CSS para la estructuración y estilo es visitando css Zen Garden, el cual mantiene un mismo archivo xhtml y solo cambia los archivos externos de CSS, resultando en un rediseño total de la página.
Accesibilidad y usabilidad
El código que conforma una página es “traducido” por un explorador en imágenes que el usuario puede ver e interactuar. Pero no siempre los usuarios de una página interactúan con su información a través de la vista. Algunos usuarios pueden ser no videntes y utilizar lectores de pantalla para acceder a la información. En casos como estos es cuando la semántica toma mayor importancia.
Observemos tbcTables. Podemos claramente darnos cuenta que “The big company Tables” es un tÃtulo, por el tamaño en que se muestra y por el tratamiento de la tipografÃa. Sin embargo, semanticamente es simplemente texto en negritas, y un lector de pantalla no darÃa mucho mas información que esa al usuario. En cambio en tbcCSS el tÃtulo esta encerrado en una etiqueta <h1> que semanticamente significa “encabezado”, lo cual expresa correctamente la naturaleza del texto.
Otro ejemplo claro es la diferencia entre <b> que significa “mostrar el texto en negritas” de <strong> que significa “esto es importante” y que por este motivo, se muestra en negritas.
No solamente usar contenido semanticamente correcto es efectivo para usuarios no videntes sino que también lo es para los “robots”, los webcrawlers que se encargan de indexar nuestra página para que aparezca en los SERPs de búsqueda. Para simplificarlo, hace que nuestras páginas sean mas facilmente analizadas por buscadores como Google o Yahoo y para que nuestro contenido sea encontrado por la gente que lo busca, tema concerniente a SEO.
Una página estructurada con CSS puede cambiar completamente su diseño para adaptarse a usuarios que acceden desde celulares, y para crear versiones para ser impresas fácilmente, mientras que en situaciones que la página esta estructurada con tablas, generalmente vemos un link que dice “versión para imprimir” que nos lleva a otra página estructurada de forma diferente. Para que duplicar el contenido si podemos modificar su estructura externamente?
Para lograr estructurar correctamente una página, uno debe pensar en términos de contenido primero, y después de visualización. Cuando alguien se propone estructurar una página con tablas, esta pensando en términos de visualización primero, y de contenido después.
Estética
Con CSS uno tiene muchas mas posibilidades para presentar la información, mucho mas control sobre los elementos que conforman la página. Esto quiere decir que un diseñador tiene mas libertad para poder expresar su visión de diseño. Claro que usar CSS de forma correcta no se traduce directamente en un buen diseño, esto depende de la capacidad del diseñador. Pero en manos de un buen diseñador, CSS es una herramienta que brinda innumerables posibilidades.
Una excelente herramienta para el diseño web es la utilización de grillas para estructurar los elementos en página. Algunos podran argumentar que las grillas limitan la creatividad, sin embargo considero que simplemente sientan parámetros iniciales con los que podemos jugar mas fácilmente. En el caso de tbcCSS podemos ver que gracias a un mayor control de los elementos, se vislumbra una estructura, con todos los beneficios que esto trae consigo. Sin embargo, en la versión con tablas… pues bien, no es el caso. Esto no quiere decir que sea imposible adherirse a una grilla usando tablas, sin embargo el menor control que estas nos dan hace esta tarea mucho mas complicada.
Conclusión
Creo haber demostrado la importancia de utilizar xhtml de forma semánticamente correcta y enumerado las diferencias principales entre diseñar con tablas y con CSS (probablemente haya olvidado algunas). Quise hacer un acercamiento al tema a aquel que quizás no conozca tanto sobre diseño web, pero para aquellos que sÃ, este es un debate que ya ganó CSS hace bastante tiempo; es decir, esto no es simplemente mi opinión, esto es lo que ha sido aceptado como la mejor opción por los mejores diseñadores y organizaciónes reguladoras como la W3C.
Pero todos somos libres de tener nuestras opiniones y de diferir. Muchos diseñadores quizás sigan usando el método de tablas y lo defiendan, quizás no tengan tiempo para aprender CSS y cuando quisieron hacerlo se enfrentaron a algo no familiar y frustrante en ocasiones. Para aquellos que se encuentren en esa situación, lo único que puedo decir es que simplemetne intenten aprender, CSS es increÃblemente poderoso y cuando se llega a dominarlo, realmente se disfruta.
Sos la posta