Artículo I.F ig.1. Accessibility Color Wheel - Giacomo Mazzocato y Jemima Pereira
L as siguientes dos figuras muestran el antes (Fig.2) y el después (Fig.3), tras reajustar los colores, según las pautas de accesibilidad.
Fig.2.Página antes Fig. 3. Pagina después
La accesibilidad y los estándares
El uso de los estándares es muy útil con respeto a la accesibilidad, ya que las personas con minusvalía visual total, necesitan el uso de lectores automáticos para navegar por la red.
Estos lectores necesitan de estructuras claras, por ejemplo el uso de div y no de tablas cuando no son bloques de datos, el uso de las etiquetas de texto alternativo a las fotos, etc.
Para posibilitar el trabajo de los programas lectores me he valido de dos hojas de estilo en cascada o CSS, con los que presentar correctamente los datos, sin usar tablas. Además he incluido en los archivos html todas las descripciones de las fotos. Otra medida empleada ha sido no abusar de las imágenes, así como dotar a la página de cierta estructura, respetando la jerarquía en los títulos, empleando listas…
Tamaño de letra
P ara satisfacer la necesidad de las personas con dificultades con visión además del color adecuado, he incorporado la utilidad del tamaño de letra. Esta se presenta como dos imagines, con su texto correspondiente para los programas lectores, una menor (tamaño de fuente medio) y otra mayor (tamaño de fuente grande). Esto se puede lograr con una simple configuración del navegador, pero esto puede ser complicado para cierto público, es por ello que lo incluyo en mi página. Esta funcionalidad está implementada con una hoja de estilo idéntica a la general (estilo.css) llamada estilo_big.css, la cual solo varia en el atributo font-size, haciendo que los valores que en la hoja de estilo general eran medium y large tengan valor large y x-large, respectivamente, en estilo_big.css.
Usabilidad
Dentro de la usabilidad tendremos en cuenta múltiples cuestiones, como los niveles de navegación, secciones, sub-secciones, menús, convenciones de la web, niveles de Drug, redacción de hipertexto, etc. Dichas cuestiones las paso a detallar a continuación.
Normas de Drug sobre la usabilidad.
No me hagas pensar.
No importa el número de veces que hay que hacer clic en algo si la opción es mecánica e inequívoca.
Elimina la mitad de las palabras en todas las páginas y luego elimina la mitad de lo que quede.
S iguiendo las normas de Drug sobre usabilidad antes expuestas y contemplando la importancia de la jerarquización en las páginas web, nuestra web se halla dividida en cuatro secciones: Inicio, libros, autores y enlaces, como puede verse en la siguiente figura.
Para facilitar la usabilidad y atender a la norma primera de las citadas normas de Drug, se dispone de un menú superior horizontal situado inmediatamente por debajo del titulo de la página. Estando este menú siempre en la misma posición, estableciendo así una navegación constante o global.
Continuando con esa jerarquización y para facilitar la redacción del hipertexto, se localiza una zona de sub-secciones en las páginas de libro y autores.
Proporcionando así un acceso alfabético a libros o autores, según la sección en la que nos encontremos.
Estas secciones o índices, se encuentran enlazados con el primer libro o autor, según corresponda, que empieza por cada letra. Esto es así porque toda la información de la página está situada seguida, para facilitar su uso, impresión, etc. Aunque la información está agrupada por autor o libro y clasificada según su importancia, poniendo al principio lo más importante (Fig.5.).
Fig.5. Distribución según importancia de los datos de un libro.
A demás al mismo nivel del menú de secciones se encuentras las utilidades, que aun no formando parte de la jerarquía del sitio proporcionan las funcionalidades de selección de idioma, tamaño de letra y mapa Web.
La utilidad de cambio de idioma se realiza a través de dos imágenes enlazadas con la versión en ingles o castellano de la sección que se está actualmente viendo. Las páginas en ingles enlazan a página en ingles. Lo mismo sucede con las que están en castellano. Esto se explica más extensamente en diagrama de navegabilidad (Fig.4).
Por su parte la utilidad de tamaño de letra fue explicada en el apartado de usabilidad.
A continuación nos encontramos con la utilidad de mapa de web. Se especifica con un icono el cual cambia de tamaño, si estamos en una página de letra grande, para facilitar su lectura.
Mapa de Web
El mapa de web, presenta una entrada por cada una de las secciones. A su vez en las secciones que posee sub-secciones como las de libros y autores, presenta una lista enlaces alfabética, como se puede ver en la figura 6.
Fig. 6. Captura del Mapa Web, parte en castellano.
También es importante destacar que la página con el mapa Web en español es la misma que en ingles, es decir primero está en castellano y a continuación está en inglés, existiendo un enlace, en la utilidad de selección de idioma, dirigido a la zona de la sección con el idioma correcto. Así como su correspondiente ancla en el código de la página. La fig. 7. muestra la estructura que sigue la página mapa Web. Comentar que la pagina mapa para letra mayor es idéntica en su distribución, ya que solo cambiamos su hoja de estilo.
Fig. 7. Distribución página Mapa Web.
N iveles de navegación
Diagrama de navegabilidad:
La página presenta el siguiente diagrama de navegabilidad:
F ig. 8. Diagrama de navegabilidad parcial.
Dicho diagrama (Fig. 8.) refleja la usabilidad de la página. Esta es bastante simple, existen cuatro páginas básicas, Inicio, Libros, Autores y Enlaces. Así mismo la página web se puede presentar en dos tamaño de letra, media y grande. Existiendo la información en dos idiomas, español e ingles. Las paginas básica en Ingles serán: Home, Books, Authors y Links.
La usabilidad esta pensada para que una vez el usuario elija tamaño de letra o idioma o ambas, el resto de páginas que visite de nuestra web se muestren con esta configuración. Es decir, deba cambiar de tamaño o idioma expresamente.
Un elemento no incluido en el diagrama de la figura 8, por proporcionar mayor claridad, es la utilidad Mapa web. Esta utilidad puede ser usada desde cualquier página de la web, existiendo dos modelos distintos, uno con letra normal y otro con letra mayor (mediante cambio de css). Es decir desde las paginas con letra grande se accede al mapa web con letra grande e igual para las de letra pequeña.
El diagrama completo con la utilidad Mapa Web incluida, se puede ver en la figura siguiente (Fig. 9).
Fig. 9. Diagrama de navegabilidad completo.
Convencionalismos en la Web.
En la Web existen una sería de normas de diseño no escritas. Para mi diseño he seguido las siguientes:
Enlace a la página principal en el titulo.
Enlace a la página principal desde todas las secciones.
Nombre de sección en las que nos hallamos visible (para que sepa siempre donde está uno).
Menú y utilidades siempre situadas en el mismo sitio.
Para comprobar la buena funcionalidad de la pagina web diseñada, hemos realizado unas tareas de pruebas de código para comprobar que todos los enlaces funciones correctamente y que el tiempo de carga no sea elevado.
Pero además para comprobar que sea usable por todo el mundo hemos diseñado un test de usabilidad.
Test de usabilidad
Para verificar la usabilidad de nuestra página web por cualquier perfil de visitante he elaborado este test que será probado por dos usuarios, uno no experto y otro experto.
Este trata de perfilar a la persona, para ver como se mueve por la red y si forma parte del público objetivo de esta web.
Datos de la persona:
Conocimientos Web:
¿Edad?
¿Usa en su trabajo el PC?
¿Trabaja en algo relacionado con la informática?
¿Navega habitualmente por la Web?
Si es así, ¿Navega habitualmente por las mismas web?
¿Hace cuanto tiempo que navega?
Experiencia Sobre la temática de nuestra web:
¿Lee libros a menudo?
¿Lee libros electrónicos?
¿Dónde compra esos libros?
¿Cómo decide que libros comprar? (contraportada, caráctula, sinapsis…)
¿Consulta la opinión de otras personas o recomendación en periódicos?
¿Y en la Web?
¿Conoce alguna página de venta de libros en la red?
¿Elige sus libros en función del autor?
¿O en función de su temática?
Pruebas:
En esta fase se hacen una serie de pruebas al usuario para ver que tal se “mueve” por la página a analizar, prestando atención a donde tropieza. Y se recoge el tiempo y si lo logró hacer o no.
Encuentre información sobre el autor Assimov en Ingles.
Encuentre información sobre el autor Assimov en Español.
Encuentre la obra “Pórtico” de Frederick Pohl.
Vaya a la sección de fantasía. (pregunta trampa)
Vea la información sobre la diseñadora.
Descárguese el currículo vital de la diseñadora.
Los resultados obtenidos en el test de usabilidad están incluidos en el anexo I.
Portabilidad
Para dotar a esta web de la mayor portabilidad posible, me he apoyado en el uso de los estándares web: XHTML1.1. y CSS. Además he empleado dos herramientas para comprobar los diseños: T.A.W. para verificar la accesibilidad de la web y Web Development para comprobar la representación de la web con distintas resoluciones.
Hojas de estilo
Para controlar la parte visual (representación) de esta página web, he diseñado dos hojas de estilo en cascada llamadas estilo.css y estilo_big.css.
Ambas hojas se enlazan mediante la siguiente sentencia dentro de la cabecera de cada archivo HTML.
Esta sentencia hace referencia a la primera platilla, la cual tiene el tamaño de letra medio, y la enlazan las páginas normales. Por su parte las páginas con letra grande usan la siguiente sentencia para asociarla con la plantilla estilo_big.css.
M ediante estas hojas, distintas solo en el tamaño de letra (atributo font-size, mirar capítulo accesibilidad), he establecido la distribución de información, mediante clases e identificadores. Dicha distribución se basa en dos modelos, ambos tienen como base este esquema:
Cuyo código es el siguiente: body {
background-color: #E0E3D2; /*Marron claro*/
margin: 0% ! important;
width: 100%;
font-size: medium;
}
#cabecera {
margin: 0% ! important;
height: 131px;
width: 100%;
background-color: #CED2B9;
background-position: center center;
background-repeat: no-repeat;
}
#cabecera img{
margin: 0% ! important;
padding-left: 0%;
padding-top: 0%;
padding-right: 0%;
padding-bottom: 0%;
}
#menu {
margin: 0% ! important;
width: 100%;
background-color: #8da02b;
background-position: center center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: large;
font-weight: bold;
color: #012004;/*El de menu e idioma*/
} #menu_list {
margin: 0% ! important;
text-align: center;
}
#menu_list li{
margin: 0% ! important;
display: inline;
}
#container {
margin: 0% ! important;
width: 100%;
}
#container_verde {
margin: 0% ! important;
width: 100%;
background-color: #CED2B9 ! important;
}
#footer {
margin: 0% ! important;
width: 100%;
background-color: #8da02b;
color: #012004;
clear: both;
border: 0px solid #999999;
padding: 1%;
vertical-align: middle;
text-align: center;
}
Como puede verse en el código hay dos container (container y container_verde) variando tan solo en el color de fondo, con lo que no afecta a la distribución.
Los modelos siguientes modifican su diseño en el contenido del elemento container (en el caso de las páginas libros y autores) o container_verde (en el caso de las páginas inicio, enlaces y mapa_web) . El primer modelo, el de las páginas de libros y autores, sigue el siguiente esquema dentro del cuerpo de container.
Los tres puntos indican que puede haber más de una entidad de clase cuadro_libro y que existe mas de un juego de sentencias texto por cada entidad de clase datos_libro.
Obsérvese que existen elementos de tipo clase, esto es así para permitir que existan varios elementos con la misma definición de estilo.
Dicho esquema viene definido por el siguiente fragmento de código:
font-family: Georgia, "Times New Roman", Times, serif;
font-size: medium;
color: #02260e;
background-repeat: repeat-x;
background-position: center top;
}
cuadro_libro {
margin: 0% ! important;
width: 100%;
}
.datoslibro img {
float: left;
margin: 0% ! important;
padding-left: 2%;
padding-bottom: 2%;
padding-right: 3%;
}
.datoslibro {
margin: 0% ! important;
float: right;
width: 100%;
font-family: "Trebuchet MS";
}
.datoslibro p {
margin: 0% ! important;
padding-left: 15%;
}
.datoslibro strong {
margin: 0% ! important;
font-weight: bold;
}
.datos_centro {
margin: 0% ! important;
width: 100%;
}
#indice a:link {
margin: 0% ! important;
color: #155100;
text-align: center;
}
#indice a:hover {
margin: 0% ! important;
color: #120014;
}
#indice h1{
margin: 0% ! important;
text-align: center;
font-size: medium; }
En el código se puede observar que elemento container se divide en dos elementos: indice (ocupa el 10% del espacio) y contenedido (con el 90%). Ambos tienen el atributo flota para que se distribuyan a izquierda y derecha respectivamente. Esto es útil para su visionado bajo distintas resoluciones. El segundo modelo, el de las páginas de enlaces, mapa web e inicio, tiene la siguiente distribución que solo varía dentro del elemento container_verde.
Como se observa en el esquema, dentro del container_verde, solo existe un elemento de anchura 80%, que se sitúa en el centro.
Dicho esquema viene definido por el siguiente fragmento de código: #contenedor_central { /*El del inicio y enlaces*/
background-color: #BFC2AD;
font-family: Georgia, "Times New Roman", Times, serif;
color: #02260e;
background-image: url(./content_topimage.gif);
background-repeat: repeat-x;
background-position: center top;
margin-left: 10%;
margin-right: 10%;
margin-top: 0%;
margin-bottom: 0%;
}
a{
margin: 0% ! important;
font-family: Georgia, "Times New Roman", Times, serif;
text-decoration: none;
font-size: medium;
color: #012004;
}
li{
margin: 0% ! important;
font-family: "Trebuchet MS";
font-size: medium;
color: #02260e;
}
h1 {
margin: 0% ! important;
padding-top: 2%;
padding-bottom: 2%;
padding-left: 3%;
padding-right: 3%;
font-size: x-large;
}
h2 {
margin: 0% ! important;
padding-top: 2%;
padding-bottom: 2%;
padding-left: 3%;
padding-right: 3%;
font-size: large;
}
p {
margin: 0% ! important;
padding-top: 1%;
padding-bottom: 1%;
padding-left: 3%;
padding-right: 3%;
font-size: medium;
}
.img{
margin: 0% ! important;
float: left;
padding-left: 3%;
padding-top: 3%;
padding-right: 3%;
padding-bottom: 3%;
}
#lista_enlaces{
list-style-image: url(./hoja.gif);
padding-left: 5%;
}
ul{
margin: 0 ! important;
}
Dentro del contenedor_central podemos encontrar distintos elementos, como títulos: h1,h2; enlaces y varios tipos de listas.
A destacar el elemento lista_enlaces definido para la página enlaces, y cuya principal variación es modificar el símbolo de lista por una hoja.
T.A. W.
La pagina web diseñada pasa los controles automáticos de la herramienta TAW. Y los errores manuales que localiza, han sido revisado y la página no se ve afectada por ellos.
Web Development
Esta herramienta es un plug-in de firefox y permite visualizar la misma página con diferentes resoluciones, lo que permite verificar que esta se ve correctamente en cualquier dispositivo.
Vista desde una PDA a resolución de 480x640:
Listado de palabras clave
Usabilidad. Esta es una de las características que debemos buscar en nuestros diseños webs. Con ello conseguiremos que la página sea más cómoda.
Accesibilidad. Esta es el grado con el que algo puede ser usado, visitado o accedido por todas las personas, independientemente de sus capacidades técnicas o físicas. Llevado a nuestro campo es la serie de medidas que debemos tomar de cara al diseño para garantizar que cualquier persona pueda usarla.
Colores. como se ha visto en el apartado de accesibilidad, los colores son muy importantes en el ámbito de las interfaces web, ya que el uso de colores no adecuados limitará a nuestro público.
Idiomas. El uso de varios idiomas en nuestras páginas contribuye a no limitar nuestro público.
Mapa Web. Este se usa en las páginas como índice de contenido. Proporcionando una visión de la estructura global de la web.
Menú. Como se ha visto en el apartado de usabilidad, el diseño de un menú correcto, claro y global a diseño, mejora y facilita el uso de nuestra web. Haciendo que el usuario este más cómodo, no se pierda y por tanto, no “huya” de nuestra web.
Estándares Web. Son las normas que se emplean en la red para tratar de conseguir una Web con la mejor tecnología. Estos aportan robustez a los diseños. Facilitando entre otras cosas la accesibilidad y portabilidad.
Portabilidad. Capacidad de la que tratamos de dotar a todos nuestros diseños para lograr que el mismo diseño e implementación, se pueda representar en distintos navegadores como Firefox, IE7 e incluso en distintos dispositivos PDA, teléfonos móviles… Para conseguirlo nos apoyamos principalmente en los estándares webs como CSS, XHTML, XML…
Hojas de estilo en cascada (Cascading Style Sheets, CSS). Estas son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML).
La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.
Lenguaje extensible de marcado de hipertexto (eXtensible Hypertext Markup Language, XHTML), es el lenguaje de marcado pensado para sustituir a HTML como estándar para las páginas web. XHTML es la versión XML de HTML, por lo que tiene, básicamente, las mismas funcionalidades, pero cumple las especificaciones, más estrictas, de XML. Su objetivo es avanzar en el proyecto del World Wide Web Consortium de lograr una web semántica, donde la información, y la forma de presentarla estén claramente separadas.
Diagrama de navegabilidad, diagrama que expresa los enlaces entre las páginas de nuestra Web.
Test de Accesibilidad Web (T.A.W.) Es una herramienta para el análisis de la accesibilidad de sitios web, alcanzando de una forma integral y global a todos los elementos y páginas que lo componen. Su objetivo es comprobar el nivel de accesibilidad alcanzado en el diseño y desarrollo de páginas web con el fin de permitir el acceso a todas las personas independientemente de sus características diferenciadoras.
Taller-4to Unificado-Informática Aplicada «páginas wiki» tienen títulos únicos. Si se escribe el título de una «página wiki» en algún lugar del wiki entre dobles corchetes...
