Resumen Para el diseño de la interfaz de la página Web, me he fijado tres principales objetivos
descargar 136.33 Kb.
|
Memoria Explicativa del Diseño Web Un mundo de libros Una página web Accesible Indice Indice 2 Resumen 3 Accesibilidad 4 La accesibilidad y el color 4 La accesibilidad y los estándares 8 Tamaño de letra 8 Usabilidad 9 Mapa de Web 11 Niveles de navegación 12 Diagrama de navegabilidad: 13 Convencionalismos en la Web. 14 Test de usabilidad 15 Portabilidad 17 Hojas de estilo 17 T.A. W. 26 Web Development 26 Listado de palabras clave 28 Bibliografía 30 Relativas a CSS: 30 Accesibilidad: 30 Anexo I – Test de usabilidad 31 Resumen Para el diseño de la interfaz de la página Web, me he fijado tres principales objetivos:
Para mejorar el diseño y cumplir con los requisitos de este proyecto he desarrollado la web en dos idiomas: español e ingles. No he empleado para ello servicios on-line de traducción por ser las traducciones menos cuidadas. Accesibilidad En el desarrollo de este diseño web se ha tenido presente en todo momento la accesibilidad. Se ha estudiado esta necesidad para satisfacer tanto a personas con minusvalía visual total (prestando atención a no dificultar el trabajo de los lectores automáticos) como parcial (prestando atención al color). El color es muy importante y por ello nos hemos asegurado de que el primer plano y las combinaciones de color de fondo proporcionen suficiente contraste cuando sea visto por alguien con deficiencia visual o para visualizarlas con pantallas monocromáticas. A continuación se comentan los pasos que he seguido para la selección de colores de la página web, para así cumplir el Punto de Verificación 2.2 de las Pautas de Accesibilidad al Contenido en la Web 1.0 . Para comprobar si dos colores ofrecen buena visibilidad de color, se ha de comprobar si la diferencia en brillo y la diferencia en color entre ambos es mayor que un intervalo dado. Para ello se emplean los algoritmos que sugiere el Consorcio de la World Wide Web (W3C). El intervalo que sugiere W3C es de > 125 para el brillo de color y > 500 para la diferencia de color.
(( valor de Rojo * 299) + (valor de Verde * 587) + (valor de Azul * 114)) / 1000 La diferencia entre el brillo de fondo y el brillo de primer plano debería ser mayor a 125.
(máximo (valor Rojo 1, valor Rojo 2) - mínimo (valor Rojo 1, valor Rojo 2)) + (máximo (valor Verde 1, valor Verde 2) - mínimo (valor Verde 1, valor Verde 2)) + (máximo (valor Azul 1, valor Azul 2) - mínimo (valor Azul 1, valor Azul 2)) La diferencia entre el color de fondo y el color de primer plano debería ser mayor que 500. Ahora veamos la práctica de esta teoría:
Fórmula de Brillo de Color: ((224-095)*299) + ((227-095)*587) + ((210-089)*114) / 1000 = 129,849 La diferencia en brillo entre los dos colores es suficiente. El límite es 125, y el resultado para los colores de fondo y primer plano (1) es 129,849. ((224-141)*299) + ((227-160)*587) + ((210-043)*114) / 1000 = 83,184 La diferencia en brillo entre los dos colores es no suficiente. El límite es 125, y el resultado para los colores de fondo y primer plano (2) es tan solo 83 por lo que descartamos este color. ((224-21)*299) + ((227-81)*587) + ((210-0)*114) / 1000 = 170,339 La diferencia en brillo entre los dos colores es no suficiente. El límite es 125, y el resultado para los colores de fondo y primer plano (3) es 170,339. Fórmula de Diferencia de Color: (224 – 095) + (227 – 095) + (210 – 089) = 382 La diferencia en color entre los dos colores es insuficiente. El límite es 500, y el resultado para los colores de fondo y primer plano (1) es 382, por lo que descartamos este color. Fórmula de Diferencia de Color: (224 –21) + (227 – 81) + (210 – 0) = 559 La diferencia en color entre los dos colores es suficiente. El límite es 500, y el resultado para los colores de fondo y primer plano (3) es 559. Tras estos cálculos sabemos que el color adecuado para este fondo es el tercero, ya que sino dificultaremos la visión del texto. Esta es un breve explicación de cómo se han seleccionado los colores, siguiendo el estándar. Este proceso se puede simplificar gracias a la página http://gmazzocato.altervista.org/colorwheel/wheel.php (Fig. 1) donde hallamos una rueda de color, en la que estableceremos un color de fondo o primer plano y podremos variar el complementario solo con pasar el ratón, indicándonos rápidamente si cumple con la accesibilidad, así como ver como se vería con las distintas incapacidades. |
