Soy césar, aka @inquiettudes, diseñador de interacción freelance trabajando para mejorar la experiencia de usuario de la realción de las personas y los objetos. Puedes saber un poco más de mi en facebook, twitter y linkedin. Me encanta el diseño de interacción, la construcción de sitios web y las redes sociales. Pero lo que realmente me motiva es la solución de problemas y las relaciones entre los usuarios. De la manera mas sencilla. Así de fácil.

Usabilidad, diseño centrado en el usuario, arquitectura de la información & servicios diseño de interacción

El blog de inquiettudes

Saltar hacia los estándares

¿Tienes algo que añadir?

Desde hace un tiempo se está extendiendo, afortunadamente, la conciencia de utilizar estándares en los desarrollos web. Ya sea por accesibilidad, por google o simplemente por moda, asistimos a la presentación de nuevos sitios marcados como XHTML y CSS.

Publicado hace mas o menos 11 años por @inquiettudes.

Estructura el código

Cuando damos el salto de maquetar con tablas a maquetar con CSS, no damos importancia a la estructura de nuestro código. Los documentos creados bajo estándares deben tener un añadido de semática, aportar mas significado.

En el nacimiento de la web, HTML fue creado como un lenguaje de marcado comprensible semánticamente. Con la llegada de la web mas gráfica, mas “de presentación” este código, antes comprensible, pasó a ser algo imposible de entender. Un cúmulo de etiquetas sin sentido. Seguro que hemos visto infinidad de veces, y lamentablemente seguimos viendo cosas como:

<table width="780" cellspacing="0" cellpadding="0" border="0"><tr><td><img src="/images/0.gif" width="1" height="1" border="0"/></td></tr><tr><td background="/images/01.gif"><img src="/images/0.gif" width="1" height="1"border="0"/></td></tr></table></code>

Vuelta a los inicios

Ahora, más que desde el nacimiento de las CSS (que ha llovido) desde la utilización mas mayoritaria de ellas, podemos volver al significado semántico de nuestro código (X)HTML, posibilitando así la separación del contenido y de su presentación en pantalla o cualquier otro dispositivo.

Si además añadimos significado a nuestros documentos (X)HTML, mediante la utilización de etiquetas del lenguaje, obtendremos beneficios en accesibilidad, en posicionamiento en buscadores, en futuras actualizaciones… y para la multitud de dispositivos futuros que puedan llegar a aparecer.

(X)HTML nos da multitud de elementos con su porpio significado:

  • Cabeceras, h1, h2…
  • Listas, ul, ol, dl
  • fieldset, legend, label
  • abbr, acronym
  • cite
  • caption, thead, tbody
  • strong y em

Al igual que en un procesador de textos, aumentamos significado mediante listas, tablas, títulos, subtítulos… Si utilizamos los mismos elementos con significado semántico, no sólo mejorará el entendimiento de nuestro documentos (X)HTML, sino que además ahorraremos código en muchas ocasiones con las ventajas que conlleva de cara al ancho de banda, buscadores, actualizaciones…

Mas elementos: id y class

Para completar el significado disponemos de elementos que nos ayudan a incluir información estructural a nuestros documentos añadiendo atributos como id o class

Un id identifica a un elemento único en el documento y class define propiedades que pueden ser aplicadas a varios elementos. Este segundo elemento es utilizado para para identificar contenido de similares características.

Nombrar ids y class

Un error semántico a la hora de dar nombre a estos elementos es aplicar nombres relacionados con la presentación. Si nombramos a una clase cajaRoja o menuArriba estamos cometiendo un error de concepto. Estamos asociando la presentación con el contenido. Y además no estamos aportando nada a la estructura.

A la hora de seleccionar nombres para nuestras clases, lo mejor es añadir un poco de contenido semántico, utilizando nombres como menuPrincipal, utilidades, mensajeError, contenidoPrincipal

Trabaja con las herencias

Cuando empezamos a maquetar con CSS, lo primero que hacemos en nuestros (X)HTML es añadir clases e ids para todos los elementos. Una forma de limpiar nuestro código es agrupar elementos dependientes, utilizar la herencia entre clases… de esta forma bajo un mismo contenedor podemos dar estilo a todo lo que contiene.

Div y span

Son dos elementos que nos ayudan a estructurar nuestro código, pero como herencia de nuestro trabajo con tablas (los que hemos maquetado con ellas) tenemos la costumbre de añadir div y span para casi todos los grupos de elementos de nuestro documento.

Muchos elementos ya tienen información semántica suficiente para que no tengamos que incluirlos dentro de una capa contenedora, elementos como las tablas, las listas…

Si añadimos el atributo id con valor menuPrincipal a nuestra lista de opciones de menu no es necesario, además ensuciaría nuestro código, incluir esta lista dentro de un contenedor div con el id menuPrincipal.

Da un paso más

Si ya has dejado a un lado las tablas y trabajas con (X)HTML y CSS da un paso más y trabaja de una manera más semántica:

  • Estructura tu código
  • Utiliza correctamente las etiquetas que nos proporciona el sistema
  • Evita el uso de divs innecesarios
  • No nombres a las clases ni a los identificadores pensando en la presentación
  • Agrupa elementos en tu CSS

Publicado hace mas o menos 11 años por @inquiettudes en las categorías CSS, Estándares.

Etiquetado cómo . Si quieres estar al dí de lo que pasa en el post suscríbete a los comentarios.

¿Tienes algo que decir?

Deja tu comentario seguro que es muy interesante. Por favor guarda la temática del post para mantener un debate agradable. No uses este formulario como SPAM. Añade tu comentario a continuación, tambié puedes crear un trackback desde tu sitio. Suscríbete a los comentarios de este post.

Mi último tweet

cosas que están pasado durante este 2017

Hecho con mucho cariño entre ciudad real y madrid