¿Por qué separar contenido de presentación?

Es importante, para los desarolladores web y para cualquiera que este interesado en iniciarse en este campo, entender la importancia y ventajas que supone separar el contenido de la presentación. Y como podrán ver, son todo ventajas. Esto es más que una moda, es casi una necesidad hoy en día para crear páginas profesionales, ya que facilita el trabajo al diseñador y le ahorra dinero a la companía. Al terminar de leer este artículo verán que no hay por donde perderse a la hora de elegir un sistema para desarollar páginas web.

Este es un tema importante hoy en día, que ha sido tratado una infinidad de veces… todas en inglés, pero nunca (creo) en español. Ahi va mi granito de arena.

Para concretar un poco, la página que no separa contenido de presentación generalemente usa tablas para colocar los elementos en la página y usa etiquetas <font> o <center>. Mientras la que separa contenido de presentación consiste de dos partes, una HTML y otra CSS y usa etiquetas <div> y CSS para colocar los elementos en la página.

Un poco de historia

He aquí la explicación de porque un gran porcentaje de las páginas de internet no separan contenido de presentación según me la contaron a mi. En primer lugar hay que enteder que el HTML fue inventado por científicos como una utilidad para transportar información de una forma comoda y fácil. Como eran cientificos lo único que querían era enviar y recibir cosas científicas como informes e investigaciones, basicamente quisieron hacer un Word para internet. ¿Desde cuando en un trabajo hecho en Word se ponen menus? Un trabajo hecho en Word es lineal, al igual que las primeras páginas en internet. Simples documentos para transportar información.

Pero llegaron los diseñadores y la cosa se pudrió, o mejor dicho, nos mostraron el camino. Llegaron los diseñadores, vieron internet y no les gustó. Porque los elementos para controlar el diseño eran ridículos e inútiles. Hasta que descubrieron las tablas con border=0. Esto abrió todo un mundo nuevo de posibilidades, ahora podías colocar un elemento en cualquier lugar de la pantalla, los documentos no tenían porque ser lineales. No quiero con esto decir que las tablas son malas y que no hay que usarlas, lo que quiero decir es que tienen su utilidad definida y no es para diseñar, es para mostrar información que necesita estar en una tabla.

Y llegaron las etiquetas propietarias de IE como <font> y <center>. Ahí se fue todo al garete. Ahora podías cambiar la forma en la que los elementos de texto se veían. No solo el color, sino que tambien el tamaño, lo cual hizo que los <hx> cayeran en desuso. Esto combinado con los editores WYSIWYG (What You See Is What You Get, lo que ves es lo que hay, editores gráficos de páginas como Dreamweaver y Frontpage) contribuyeron a que a la gente le dejase de importar el código HTML y se dedicasen únicamente a hacer que las páginas se viesen bien. Lo cual tiene cierta lógica, el usuario común no quiere aprender un lenguaje cuando tiene una alternativa como los WYSIWYG.

El CSS fue concebido en respuesta al pedido de la gente que quería poder diseñar correctamente una página web. Es únicamente una herramienta para el diseño, no puede aportar nada en cuanto a contenido. De la misma manera que se supone que el HTML no puede aportar nada en cuanto a diseño.

En favor de la legibilidad de ahora en adelante me referiré a las páginas que separan contenido de la presentación como “modelo CSS” y a las otras como “modelo tablas”. En realidad llamarlo modelo CSS al bueno esta un poco mal porque se puede meter el código CSS en la etiquetas HTML y eso no sería separar contenido de la presentación, eso sería un tontería.

Ventajas: Ahorro de espacio

Esta es una de la mayores ventajas de separar contenido de la presentación. El modelo tablas es un bloque de tablas y gifs espaciadores que se tienen que repetir una y otra vez en todas la páginas de un sitio. Hacer un diseño complejo con tablas puede resultar en un código bastante pesado. Hacer lo mismo con div’s y su código CSS respectivo puede resultar igual o incluso más pesado, sin embargo el código no se repite en todas la páginas. El código HTML si se repite, pero el CSS no, los navegadores guardan el archivo en el caché y no hace falta bajárselo cada vez que se abre una página del mismo sitio y que use el mismo archivo CSS. Un archivo CSS sirve para tantas páginas como quieras, con lo cual el consumo de ancho de banda baja dramáticamente. Hace poco Douglas Bowman escribió un articulo en el que analizaba el sitio de Microsoft (modelo tablas) y lo convertía al modelo CSS, ahorrándose 25 KB. Haciendo cálculos de la cantidad de visitas diarias que recibe el sitio de Microsoft se ahorraría 329 TB (un TeraByte son 1024 GB) de transferencia anual. Esto no solo beneficia a la companía que ahorra dinero sino que beneficia al navegante que tiene que esperar menos para descargar una página.

Ventajas: Ahorro de tabajo

Siguiendo la linea del párrafo anterior, un archivo CSS sirve para una infinita cantidad de páginas. Cuando uno hace una sitio web, en el 99% de los casos todas las páginas del sitio web son iguales excepto en contenido; mismos colores y colocación de elementos, mismo diseño. El modelo CSS separa contenido de presentación, separa HTML de CSS… necesito decir más? Al tener el CSS separado, al tener el diseño por separado, modificar el único archivo CSS hace que todo el sitio cambie. Intenta hacer lo mismo con el modelo tablas, hay que ir página por página editando el HTML para cambiar un elemento de lugar. Hoy en día con las páginas dinámicas esto es un poco menos grave, porque se pueden usar includes y otras técnicas para que haya una sola plantilla de HTML y por lo tanto no sería dificil editar el archivo. Pero no todo el mundo usa páginas dinámicas y más vale prevenir que curar.

El modelo CSS tiene una desventaja y es que es más dificil colocar los elementos en el lugar correcto con CSS que con tablas. La guerra de los navegadores ha hecho que IE genere las páginas de una forma distinta que el resto y por lo tanto hay que aplicar un montón de trucos y buscarse la vida para que todo quede igual en IE como en Safari o Firefox. Pero todo esto se compensa el final cuando para cambiar un menu de la derecha a la izquierda en 1,000,000 de páginas solo haya que cambiar 2 palabras en 1 solo archivo.

Ventajas: Accesibilidad

Hagan un experimento, usen el Lynxview (navegador en modo texto) para leer mi página y la de Microsoft. ¿Cual está más clara? La gente tiende a pensar que los únicos que requieren páginas accesibles son los ciegos que usan navegadores que les leen el texto que hay en pantalla, estos navegadores se fijan mucho en las tablas y las interpretan bien, al reves de lo que quiere el diseñador y por lo tanto confunde al usuario. Sin ir más lejos los navegadores para ciegos dan un resultado casi idéntico a las páginas vistas con Lynxview, todos esos gifs de la página de Microsoft son una verdadera cagada. Los ciegos no son los únicos a quienes les perjudican las páginas no accesibles, también están los buscadores y los dispositivos móviles. Estos tres combinados crean una cuota de mercado bastante grande. Si en vez de usar <hx> usas <font> para las cabeceras el buscador/dispositivo movil/ciego no sabrá que es una cabecera, porque el navegador lo interpretará como texto normal. Intenta ver una tabla llena de espaciadores gif en la pantalla de un móvil, a que no va?

Conclusion

Como dije al principio, no hay por donde perderse en cuanto a elegir un sistema. Separar contenido de presentación solo produce beneficios, ahorro de tiempo, ancho de banda, accesibilidad, saber que estas haciendo las cosas de la manera correcta y saber que las estas haciendo bien. Con la única desventaja de tardar un poco más de tiempo en desarollar (a medida que vas practicando este tiempo se reduce cada vez más) por culpa de los navegadores que no siguen las estandares del W3C… *cough*IE*cough*. Take the web