G4: Usabilidad

Diseño del contenido

Nombre: Ubiquitous Content. versión 1.1. (Contenido Ubicuo)

Sinopsis: Uno de los objetivos principales que debe perseguir un diseñador web es separar el contenido de la presentación. Para que la interacción que existe entre estas dos dimensiones quede clara hay que dar un significado al contenido (marcado semántico) para que así pueda ser correctamente presentado. De esta forma cada elemento correctamente definido, podrá colocarse en la zona de la página que el diseñador gráfico considere oportuna. Llamamos a este patrón ubicuo porque la ubicuidad representa la mayor forma de independencia respecto del espacio. Y con este patrón el contenido es diseñado para poder ser presentado en cualquier lugar y con cualquier tamaño.

Problema: Uno de los problemas principales de accesibilidad que tienen los sitios web actuales es que el diseñador se fija como meta principal el lograr una página con una apariencia determinada. Y para ello utiliza las herramientas que tiene a su disposición: HTML, CSS… indistintamente, sin tener en cuenta que cada herramienta ha sido concebida con un fin concreto. HTML para estructurar el contenido de la página y CSS para presentar dicho contenido. EL diseñador debe de estructurar el contenido de la página (HTML) antes de presentarlo (CSS), obteniendo además una separación entre estas dos partes del diseño de la página: Contenido y presentación. Diseñando de esta forma, el acceso a dicha información desde cualquier dispositivo (PDA, móvil…), agente (Navegador, buscadores, lector de pantalla…) y por parte de cualquier usuario será el óptimo.

Un ejemplo muy típico del problema que representa la no separación del contenido y la presentación es el caso del uso de las tablas para maquetar. Esto provoca que la ubicación de los componentes sea controlada por código HTML y que información de carácter no tabular quede identificada como tabular.

El objetivo de este patrón es facilitar el proceso de diseño de la página para poder separar de forma natural el contenido de la presentación.

Principios de accesibilidad: Los principios de accesibilidad que este patrón trata de mejorar son:

Pauta 3. Utilice marcadores y hojas de estilo y hágalo apropiadamente.
• 3.1 Cuando exista un marcador apropiado, use marcadores en vez de imágenes para transmitir la información.
• 3.2 Cree documentos que estén validados por las gramáticas formales publicadas
• 3.5 Utilice elementos de encabezado para transmitir la estructura lógica y utilícelos de acuerdo con la especificación
• 3.6 Marque correctamente las listas y los ítems de las listas
• 3.7 Marque las citas. No utilice el marcador de citas para efectos de formato tales como sangrías

Pauta 5. Cree tablas que se transformen correctamente.
• 5.3 No utilice tablas para maquetar, a menos que la tabla tenga sentido cuando se alinee. Por otro lado, si la tabla no tiene sentido, proporcione una alternativa equivalente (la cual debe ser una versión alineada ).
• 5.4 Si se utiliza una tabla para maquetar, no utilice marcadores estructurales para realizar un efecto visual de formato.

Pauta 6. Asegúrese de que las páginas que incorporan nuevas tecnologías se transformen correctamente.
•6.1 Organice el documento de forma que pueda ser leído sin hoja de estilo. Por ejemplo, cuando un documento HTML es interpretado sin asociarlo a una hoja de estilo, tiene que ser posible leerlo.

Pauta 11. Utilice las tecnologías y pautas W3C

Solución: Para poder culminar esta separación entre contenido y presentación tenemos que realizar un marcado semántico de la página. Hay que marcar los títulos como tales, separar los párrafos, definir las listas… consiguiendo así un documento cuyo contenido esté correctamente calificado y estructurado. De esta forma nos aseguramos que el agente que acceda a la página sabrá cuales son los puntos importantes de la misma porque estarán marcador como títulos, podrá presentar de forma adecuada a un usuario una lista de opciones porque estará marcada como tal etc.

Arbol ordenado de contenidos: Para poder llevar a cabo el marcado semántico tenemos que construir el árbol ordenado de contenidos. Dicho árbol ordenado de contenidos persigue como fin la estructuración de dichos contenidos: Para ello se definirán qué contenidos se desean mostrar en la página, cuál es el orden en el que se van a mostrar y la relación existente entre los mismos. Cuando hablamos de relación nos referimos únicamente a relaciones que tratan de estructurar el contenido. Es decir qué elemento está contenido en otros. No tratamos de otros tipos de dependencia de otra naturaleza. (Por ej. Comportamiento de los elementos)

El criterio a seguir para establecer el orden de los elementos debe de ser el orden de acceso a los elementos por parte de agentes o usuarios que no utilicen hojas de estilo. (Por diferentes motivos: Por el uso de Navegadores solo texto, Navegadores antiguos, Lectores de pantalla…)

Identificación de etiquetas XHTML: Una vez conseguido el árbol de contenidos hay que identificar cada elemento con la etiqueta XHTML adecuada. Se recomienda XHTML sobre HTML porque su validación contra una definición de lenguaje no es tan formal y puede provocar la inclusión de elementos no estándar. Para llevar a cabo este paso correctamente hay que conocer en profundidad las posibilidades que nos da el lenguaje de marcas utilizado. Para ello hay que saber cuales son los atributos de cada etiqueta y cual es su uso apropiado. Es imprescindible buscar el máximo número de elementos a categorizar para conseguir una página bien estructurada. Identificando los títulos, párrafos, listas, citas… De esta forma si hay alguna etiqueta que identifique la naturaleza (o significado) del elemento, se le aplicará, y si no la hay, se utilizará la etiqueta “comodín” DIV, en ambos casos con un atributo ID adecuado que identifique el significado de dicho elemento. Es importante tener en cuenta que DIV por si sola no aporta ningún significado al elemento que califica, por lo que necesita del atributo ID para aportar dicho significado.

Uno de los problemas que se encuentra un diseñador es la no existencia, en los lenguajes de marcas utilizados en la actualidad (HTML, XHTML…), de todas las marcas que identifiquen las diferentes estructuras que una página Web puede tener. Por ej. Sabemos que un elemento muy típico de un documento Web es el menú. El menú es en sí una lista de opciones y como tal deberá ser marcado como una lista. Pero es una lista de opciones especial y por lo tanto exige una categorización más detallada para que luego se pueda asignar una presentación adecuada a dicha categorización. Esta categorización se puede conseguir dando un ID especial a dicha lista, por ej. “menu”. De esta forma conseguimos indicar que es una lista y a su vez un menú. Es decir el identificador que se le asigna a un elemento puede servirnos para dar un significado más concreto a dicho elemento. A pesar que dicho identificador es texto libre (por lo que su uso no está normalizado) nos da la suficiente información para que después desde la hoja de estilos CSS se pueda determinar la presentación de dicho elemento (posición, tamaño, aspecto gráfico…). Dicha hoja de estilos no tiene porqué ser única y por lo tanto la presentación de estos elementos puede cambiar.

Es importante no asociar mentalmente ninguna etiqueta con su presentación predeterminada. “Solo” estructurar el contenido. No debe de haber ningún elemento que defina la presentación en esta estructuración del contenido, ni explícita ni implícitamente:

• Explícitamente:

• Implícitamente: No utilizar nombres que se asocien con efectos de presentación en los selectores de identificación: Por ej. <DIV id=”colDerecha”…

Contenido dinámico: En el caso de que el (X)HTML se genere de una forma dinámica(Mediante programa y con datos de un origen de datos externo), el diseñador no escribe la totalidad del (X)HTML que se envía al cliente sino que una plantilla que luego se completará utilizando la información del origen de datos. Dado que el valor del atributo ID es irrepetible en una página, en muchos casos no se puede incluir en la plantilla por lo que puede resultar que haya elementos sin atributo ID o que el valor de dicho atributo ID sea generado automáticamente y por lo tanto desconocido en tiempo de diseño. En estos casos se puede utilizar el atributo class (Cuyo valor se puede duplicar en la página) para determinar la función de dichos elementos en la página. Es importante dar a class un nombre que sea significativo para el diseñador y que defina la funcionalidad del elemento en sí y no su presentación. Es decir es mejor llamarlo class=”filaTabla” que class=”verdePequeño”. Ya que si se le llama “filaTabla” se especifica la función del elemento en la página mientras que si se le denomina “verdePequeño” se define su presentación. A la hora de mantener el código, si se desea cambiar la presentación de todas las filas de una tabla, solo habrá que cambiar la definición de la clase “filaTabla” en la hoja de estilos, mientras que si se le llama “verdePequeño” se debería de cambiar de clase en la página HTML a otra como por ej. “azulGrande”, es decir se debería de retocar el contenido para cambiar la presentación.

Es importante no reutilizar la clase “filaTabla” en elementos que coyunturalmente vayan a tener la misma presentación. Reutilizarla solo en elementos cuya función en esta u otras páginas sea la misma.

Nota: En algunos casos, cuando se diseña la presentación (la hoja de estilos), se pueden detectar situaciones que nos obliguen a retocar el contenido para facilitar el diseño o para economizar medios.

Ejemplo: Supongamos una página HOME tipo de un sitio web. Podríamos mostrar el siguiente árbol de contenidos:

	Contenedor
		Indice
			Título indice
			Opciones indice
		Cabecera
			Título pagina
			Logo
			Buscar
		Menu
			Título menu
			OpcionesMenu
		Migas de Pan
			Título migas de pan
			Camino
		Contenido
			Título contenido
			ContenidoQuienesSomos
			ContenidoServicios
		Pie

El detalle de este árbol de contenidos dependerá de la previa definición de algunas de sus partes. Es decir si la estructura del elemento menú ya ha sido definido previamente no hace falta volverlo a descomponer, simplemente indicar dónde está definido.

Y para dicho árbol de contenidos obtendremos el siguiente cuerpo de página XHTML:

Autor

----------------------------------------------------                                         
  Ruben Arrizabalaga Muniategi           
<mailto:rarrizabalaga@eps.mondragon.edu>      
  Computer Science Department            
 University Of Mondragon - MGEP   
  Tel. +34 943739635 Fax. +34 943791536
----------------------------------------------------

Comentarios: Se agradecen

Palabras clave:

Accesibilidad, Contenido, Presentación, HTML, CSS, Patrón, Diseño.

Copyright:Dado que este patrón forma parte de una tesis doctoral aun sin publicar se permite el uso, modificación y referencia a este patrón siempre que se preserve la identidad de su autor.