Memoria Explicativa del Diseño Web
Anuncio
Memoria Explicativa del Diseño Web
Un mundo de libros
Una página web
Accesible
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
12 de enero de 2008
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
Indice
Indice ................................................................................................................................ 2
Resumen ........................................................................................................................... 3
Accesibilidad .................................................................................................................... 4
La accesibilidad y el color ............................................................................................ 4
El brillo de color ....................................................................................................... 4
La diferencia de color ............................................................................................... 4
La accesibilidad y los estándares .................................................................................. 7
Tamaño de letra ............................................................................................................ 7
Usabilidad ......................................................................................................................... 8
Normas de Drug sobre la usabilidad............................................................................. 8
Mapa de Web .............................................................................................................. 10
Niveles de navegación ................................................................................................ 11
Diagrama de navegabilidad: ....................................................................................... 12
Convencionalismos en la Web. .................................................................................. 13
Test de usabilidad ....................................................................................................... 14
Portabilidad..................................................................................................................... 16
Hojas de estilo ............................................................................................................ 16
T.A. W. ....................................................................................................................... 25
Web Development ...................................................................................................... 25
Listado de palabras clave ................................................................................................ 26
Usabilidad ................................................................................................................... 26
Accesibilidad .............................................................................................................. 26
Colores. ....................................................................................................................... 26
Idiomas. ...................................................................................................................... 26
Mapa Web................................................................................................................... 26
Menú. .......................................................................................................................... 26
Estándares Web .......................................................................................................... 26
Portabilidad................................................................................................................. 26
Hojas de estilo en cascada (Cascading Style Sheets, CSS) ........................................ 27
W3C (World Wide Web Consortium) ........................................................................ 27
Lenguaje extensible de marcado de hipertexto (eXtensible Hypertext Markup
Language, XHTML) ................................................................................................... 27
Diagrama de navegabilidad ........................................................................................ 27
Test de Accesibilidad Web (T.A.W.) ......................................................................... 27
Bibliografía ..................................................................................................................... 28
Relativas a CSS: ......................................................................................................... 28
Accesibilidad: ............................................................................................................. 28
Portabilidad................................................................................................................. 28
Conceptos generales ................................................................................................... 28
Anexo I – Test de usabilidad .......................................................................................... 29
Página 2 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
Resumen
Para el diseño de la interfaz de la página Web, me he fijado tres principales
objetivos:
1. Usabilidad. Desarrollar una página que sea lo más fácil y cómoda posible en
su manejo y navegación. Cuidando además de comprobar que es correcta
en su funcionalidad.
2. Accesibilidad. Desarrollar una página que cumplas las normas de
accesibilidad, cuidando el uso de los colores (según el Punto de Verificación
2.2 de las Pautas de Accesibilidad al Contenido en la Web 1.0), dando la
opción del tamaño de letra a mostrar, cuidar el uso de las estructuras en el
código html para no obstaculizar el trabajo de los lectores automáticos, etc.
Para controlar que esto es así he verificado que la página supera el Test de
Accesibilidad Web (T.A.W.) a nivel triple-A.
3. Portabilidad. Para garantizar que la aplicación sea portable a otros
dispositivos y se visualize correctamente en los navegadores Firefox e IE7,
esta está diseñada siguiendo los estándares web: CSS y XHTML1.1.
Además he cuidado la distribución de elementos para garantizar una
visualización lo más cómoda posible desde dispositivos con resoluciones
pequeñas, evitando el uso de barras desplazadotas horizontales.
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.
Página 3 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
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).
La accesibilidad y el 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.
El brillo de color se determina por medio de la siguiente fórmula:
(( 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.
La diferencia de color se determina por medio de la siguiente fórmula:
(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.
Página 4 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
Ahora veamos la práctica de esta teoría:
o Para nuestra columna de índice:
Situación Color
Hexadecimal
RGB
Primer plano (1)
#5F5F59
095,095,089
Primer plano (2)
#8DA02B
141,160,043
Primer plano (3)
#155100
021,081,000
Fondo
#E0E3D2
224,227,210
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.
Página 5 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
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.
Artículo I.
Fig.1. Accessibility Color Wheel - Giacomo Mazzocato y Jemima Pereira
Las 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
Página 6 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
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
Para 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.
Página 7 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
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.
1. No me hagas pensar.
2. No importa el número de veces que hay que hacer clic en algo si
la opción es mecánica e inequívoca.
3. Elimina la mitad de las palabras en todas las páginas y luego
elimina la mitad de lo que quede.
Siguiendo 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.
Página 8 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
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.
Ademá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).
Página 9 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
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.
Página 10 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
Fig. 7. Distribución página Mapa Web.
Niveles de navegación
Inicio
Autores
Libros
Índice Autores
Índice Libros
Enlaces
Página 11 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
Diagrama de navegabilidad:
La página presenta el siguiente diagrama de navegabilidad:
Fig. 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
Página 12 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
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:
o Enlace a la página principal en el titulo.
o Enlace a la página principal desde todas las secciones.
o Nombre de sección en las que nos hallamos visible (para que
sepa siempre donde está uno).
o 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.
Página 13 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
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.
1. Datos de la persona:
a.
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?
b.
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?
Página 14 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
2. 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.
a.
Encuentre información sobre el autor Assimov en Ingles.
b.
Encuentre información sobre el autor Assimov en Español.
c.
Encuentre la obra “Pórtico” de Frederick Pohl.
d.
Vaya a la sección de fantasía. (pregunta trampa)
e.
Vea la información sobre la diseñadora.
f.
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.
Página 15 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
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.
<link rel="stylesheet" type="text/css" href="./estilo.css" />
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.
<link rel="stylesheet" type="text/css" href="./estilo_big.css" />
Mediante estas hojas, distintas solo en el tamaño de letra (atributo fontsize, 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:
Página 16 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
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*/
}
Página 17 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
#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.
Página 18 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
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
<p><strong>texto</strong></p> por cada entidad de clase datos_libro.
Página 19 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
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:
#indice {
margin: 0% ! important;
float: left;
width: 9%;
padding:0;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #E0E3D2;
background-position: center center;
}
#contenido {
margin: 0% ! important;
float: right;
width: 90%;
background-color: #BFC2AD;
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%;
Página 20 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
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; }
Página 21 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
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.
Página 22 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
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%;
Página 23 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
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;
}
Página 24 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
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:
Página 25 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
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…
Página 26 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
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).
W3C (World Wide Web Consortium) es el encargado de formular la
especificación de las hojas de estilo que servirá de estándar para los
agentes de usuario o navegadores.
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.
Página 27 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
Bibliografía
Relativas a CSS:
-
http://estudio103.blogspot.com/2004/10/etiquetas-bsicas-enxhtml.html
-
http://www.webtaller.com/maletin/articulos/guia-CSS.php
-
http://www.w3schools.com/css/default.asp
-
Entra en la red, “Atributo font size”,
http://www.entraenlared.com/hojas_de_estilos_css/atributo_font_siz
e.asp
Accesibilidad:
-
El uso adecuado de los colores, Accesibles,
http://www.webexperto.com/articulos/art/239/el-uso-adecuado-delos-colores/
-
http://accesibilidadweb.blogspot.com/2007_02_01_archive.html
-
http://www.w3.org/TR/AERT#color-contrast
-
Accesibility Color Wheel
http://gmazzocato.altervista.org/colorwheel/wheel.php
-
TAW – Test Accesibilidad Web http://www.tawdis.net/taw3/cms/es
Portabilidad:
-
Firefox – Web Developers de Chris Pederick
https://addons.mozilla.org/es-ES/firefox/addon/60
Conceptos generales:
-
Web de TAW, ¿Qué es TAW?
http://www.tawdis.net/taw3/cms/es/infotaw/que.html
-
Wikipedia, Accesibilidad, http://es.wikipedia.org/wiki/Accesibilidad
Página 28 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
Anexo I – Test de usabilidad
He realizado el test a dos personas y estos han sido los resultados.
Sujeto 1:
Preguntas
Respuesta.
1. Datos de la persona:
a.
Conocimientos Web:
- ¿Edad?
49
- ¿Usa en su trabajo el PC?
Si
- ¿Trabaja en algo relacionado con la
No
informática?
- ¿Navega habitualmente por la Web?
Si
- Si es así, ¿Navega habitualmente por las
Si
mismas web?
- ¿Hace cuanto tiempo que navega?
b.
1 año
Experiencia Sobre la temática de nuestra
web:
- ¿Lee libros a menudo?
Si
- ¿Lee libros electrónicos?
No
- ¿Dónde compra esos libros?
- ¿Cómo decide que libros comprar?
(contraportada, caráctula, sinapsis…)
Librerias
Contraportada,
comentarios de
amigos
- ¿Consulta la opinión de otras personas o
No
recomendación en periódicos?
- ¿Y en la Web?
No
- ¿Conoce alguna página de venta de
Si
libros en la red?
- ¿Elige sus libros en función del autor?
A veces
- ¿O en función de su temática?
A veces
Página 29 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
2. Pruebas:
a.
Encuentre información sobre el autor
Conseguido
Tiempo
Si
15 s
Si
10 s
Si
16 s
Assimov en Ingles.
b.
Encuentre información sobre el autor
Assimov en Español.
c.
Encuentre la obra “Pórtico” de Frederick
Pohl.
d.
Vaya a la sección de fantasía.
No
10 s
e.
Vea la información sobre la diseñadora.
Si
13 s
f.
Descárguese el currículo vital de la
Si
15 s
diseñadora
Sujeto 2:
Preguntas
Respuesta.
1. Datos de la persona:
a.
Conocimientos Web:
- ¿Edad?
25
- ¿Usa en su trabajo el PC?
Sí
- ¿Trabaja en algo relacionado con la
Sí
informática?
- ¿Navega habitualmente por la Web?
Sí
- Si es así, ¿Navega habitualmente por las
Sí
mismas web?
- ¿Hace cuanto tiempo que navega?
b.
7 años
Experiencia Sobre la temática de nuestra
web:
- ¿Lee libros a menudo?
No
- ¿Lee libros electrónicos?
No
- ¿Dónde compra esos libros?
NA
- ¿Cómo
decide
que
libros
comprar?
NA
(contraportada, caráctula, sinapsis…)
- ¿Consulta la opinión de otras personas o
NA
Página 30 de 31
Desarrollada por Raquel Acitores Bermejo
Master en Ingeniería Multimedia
Universidad Pontificia de Salamanca campus Madrid
recomendación en periódicos?
- ¿Y en la Web?
No
- ¿Conoce alguna página de venta de
Amazon
libros en la red?
- ¿Elige sus libros en función del autor?
NA
- ¿O en función de su temática?
NA
2. Pruebas:
a.
Encuentre
Conseguido Tiempo
información
sobre
el
autor
Sí
10 s
sobre
el
autor
Sí
15 s
Encuentre la obra “Pórtico” de Frederick
Sí
18 s
Assimov en Ingles.
b.
Encuentre
información
Assimov en Español.
c.
Pohl.
d.
Vaya a la sección de fantasía.
No
10 s
e.
Vea la información sobre la diseñadora.
Sí
0s
f.
Descárguese
Sí
11 s
el
currículo
vital
de
la
diseñadora
Notas:
2.c. No sale el autor por la F.
Página 31 de 31
