G4: Usabilidad

GRUPO DE PATRONES DE DISEÑO DE LA PRESENTACIÓN

Sinopsis: Este grupo de patrones nos va a asistir a la hora de crear una presentación para un documento con el contenido bien estructurado. En este caso cuando hablamos de presentación nos ceñimos principalmente a la definición del tamaño y el posicionamiento de los elementos y separadores (márgenes, bordes y rellenos) de una página, y por ende de la página en sí.

Problema: Una vez estructurado el contenido, conocido el medio en el que se va a presentar la información (Papel, Pantalla, Pantalla pequeña…) y conocidas las estrategias de comunicación de la compañía (Cómo transmitir, integración de este contenido en una unidad más global), el diseñador debe de realizar el boceto de lo que va a ser la página o componente de la página que se está diseñando. Este boceto se puede realizar tanto en papel como en soporte digital usando un programa de edición gráfica. El problema surge cuando este boceto diseñado en un soporte con ubicaciones y tamaños fijos se implementa con CSS donde las posibilidades aumentan en beneficio del diseño y del usuario pero la complejidad del diseño también crece.

Hay que saber cómo depende el posicionamiento de cada elemento:
• Del posicionamiento y tamaño de otros
• De las unidades utilizadas en su posicionamiento

Hay que saber en qué medida depende el tamaño de cada elemento: • Del posicionamiento y tamaño de otros • De las unidades utilizadas en su posicionamiento

También debemos de saber cómo se van a comportar también los separadores de los elementos: bordes, márgenes y rellenos (espacios entre el margen y el contenido).

Principios de accesibilidad:

Pauta 3. Utilice marcadores y hojas de estilo y hágalo apropiadamente.
• 3.3 Utilice hojas de estilo para controlar la maquetación y la presentación.
• 3.4 Utilice unidades relativas en lugar de absolutas al especificar los valores en los atributos de los marcadores de lenguaje y en los valores de las propiedades de las hojas de estilo.

Pauta 11. Utilice las tecnologías y pautas W3C.

Solución: No hay un patrón que sea la panacea. Hay que conocerlos todos, sus ventajas e inconvenientes y aplicar el que sea adecuado en cada caso.

PRIMER PATRÓN

Nombre: Absolute Measure

Sinopsis: Mediante este patrón conoceremos las ventajas e inconvenientes de aplicar los posicionamientos y medidas absolutas en el diseño de la página.

Problema: Partiendo de la base que el contenido está estructurado y diseñado el boceto de la página. Hay casos en que la necesidad del diseñador es llevar su diseño o parte de su diseño desde el boceto a la página web tal cual, es decir respetando las posiciones y tamaños del boceto.

Principios de accesibilidad: Pauta 3. Utilice marcadores y hojas de estilo y hágalo apropiadamente.
• 3.3 Utilice hojas de estilo para controlar la maquetación y la presentación. .
• 3.4 Utilice unidades relativas en lugar de absolutas al especificar los valores en los atributos de los marcadores de lenguaje y en los valores de las propiedades de las hojas de estilo.

Pauta 11. Utilice las tecnologías y pautas W3C

Solución: Este patrón propone el diseño utilizando unidades absolutas de medida. Todo componente o separador que aplique este patrón va a mantener constante su posicionamiento y dimensiones, independientemente de que varíe la resolución, el tamaño de la ventana del navegador o el tamaño de la letra.

Las unidades absolutas de medida son:

Nombre	Abrev.	Ejemplo
Puntos	pt	font-size: 12pt
Picas	pc	text-indent: 2pc
Centímetros	cm	text-indent: 4cm
Pulgadas	in	text-indent: 1in
Milímetros	mm	text-indent: 8mm

El píxel (del inglés picture element, o sea, "elemento de la imagen") es la menor unidad en la que se descompone una imagen digital, luego no es una unidad absoluta, ya que cada dispositivo tiene su resolución y por lo tanto un píxel puede ocupar más o menos espacio físico. De todas formas a efectos prácticos, es una unidad de medida que sólo depende del dispositivo para el que se diseña por lo que lo podemos considerar como una medida absoluta para la problemática tratada. No es recomendable su uso en dispositivos del tipo impresora, ya que en éstas la unidad de medida utilizada es el punto.

Nombre	Abrev.	Ejemplo
Píxeles	px	text-indent: 8px

Una de las preguntas que se plantea un diseñador es: ¿Cuándo aplicar este patrón? Según las normas del WAI nunca, porque el punto de control 3.4 desaconseja explícitamente su uso, pero creemos que en ciertas circunstancias SÍ puede ser aconsejable.

Para ello vamos a enumerar las ventajas y desventajas de diseñar aplicando unidades absolutas:

Ventajas:

• El diseñador tiene un control total sobre el tamaño y posicionamiento de los elementos.
• Al ser el resultado fijo, la legibilidad no se ve afectada por cambios de resolución.
• Los elementos contiguos son siempre los mismos por lo que los contrastes de colores entre dichos elementos contiguos se calculan en diseño de una forma sencilla.
• Es un patrón que se adapta muy bien al diseño para documentos impresos.

Desventajas:

• En algunos navegadores el usuario no puede cambiar el tamaño de la letra haciendo que en muchos casos la página sea inaccesible para este usuario.
• El contenido no se adapta al tamaño de la pantalla, desaprovechándose espacio o incluso soportando barras de scroll innecesarias. Visto esto, podríamos aplicar este patrón a elementos como:
• Imágenes. Es interesante que se vean a su tamaño original o a uno en el que no se altere su nitidez.
• Separadores: Elementos como bordes, márgenes y rellenos.
• Páginas a visualizar en ciertos dispositivos como la impresora.

Ejemplo: Como ejemplo vamos a realizar una hoja de estilo para una página en concreto dirigida a la impresora. De esta forma observamos como las medidas absolutas no están reñidas con la accesibilidad:

body {
	margin: 12mm 0 0 10mm;
	padding: 0;
	background: #fff;
	color: #000;
	font: 10pt Georgia, "Times New Roman", Times, serif;
	line-height: 15pt;
}

h1, h2, h3 {
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}

img { border: 0 }

hr,  #menu, #pie,
#migasdepan, #saltos, #cabecera { display: none }

En esta hoja de estilo, se aplica un tamaño de letra en puntos, una altura de línea en puntos y un margen en milímetros. Se puede observar como el texto del documento es negro y que hay varios elementos que se ocultan a la hora de ser impresos.

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.

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.