Jun
27

Separar la presentación del contenido

Hace mucho tiempo cuando se construía un sitio web se solía mezclar la presentación con el contenido, de aquellos tiempos podemos recordar etiquetas como <b>, <i>, o propiedades como el font-face, bgcolor, hábitos como el maquetado con tablas y más que solo resultaba en desastre ya que al final el tipo de letra quedaba junto al texto, el color de fondo y las negritas mezclado con nuestro contenido. Dando una clara muestra de desorden.

Ahora para construir un sitio web es lo correcto y no solo una buena práctica separa la presentación del contenido, xhtml y css entran aquí para mostrarnos el camino.

El contenido

El contenido es lo mas importante en nuestro sitio web, debemos tener mucho cuidado de como lo mostramos y de como se compone internamente (las mescolanzas que comente al principio), esto es información en si, por ejemplo textos o imágenes de interés para nuestros visitantes. Aquí html nos será de ayuda para plasmar dicho contenido en una página, sin aplicar colores y diseño en general aún.

La presentación

Una vez teniendo nuestro contenido limpio y plasmado en una página, vamos a darle la presentación. Ahora es momento de pensar en el tipo de letra, color de fondo, backgrounds y demás que tengamos definidos. Aquí es donde vamos a aprovechar el potencial de css.

El pasado 9 de abril se celebro el día sin css en el que muchos sitios web populares deshabilitaron sus hojas de estilo para dar paso a una presentación limpia de diseño igual a la primera imagen que muestro arriba.

Siempre vamos en busca del orden pero también debemos considerar otras ventajas de esto, ya que si existe una correcta separación de contenido y presentación solo necesitaremos tocar nuestro css para hacer un rediseño y cambiarle totalmente la apariencia a nuestro sitio web en el momento que lo creamos conveniente, sin afectar el contenido y ahorrándonos bastante tiempo.

  • Technorati
  • Meneame
  • Marcar en Delicious
  • Marcar en Google

Tags: ,

Enviar un Comentario




XHTML: Puedes usar estas etiquetas, <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Suscribir RSS Twitter webinperu Facebook webinperu Plurk webinperu

© 2008 webinperu xhtml | css | gestionado con WordPress