CURSO TÉCNICO DE ACCESIBILIDAD Y USABILIDAD WEB PROYECTO FINAL: DEFINICIÓN Centro de Referencia en Accesibilidad y Estándares Web
Copyright (C) 2008 INTECO. Reservados todos los derechos (reproducción, distribución, comunicación pública, de transformación, o cualesquiera otros reconocidos por la normativa vigente). El presente documento cumple con las condiciones de accesibilidad del formato PDF (Portable Document Format). Se trata de un documento estructurado y etiquetado, provisto de alternativas a todo elemento no textual, marcado de idioma y orden de lectura adecuado. Para ampliar información sobre la construcción de documentos PDF accesibles puede consultar la guía disponible en la sección Accesibilidad > Formación > Manuales y Guías de la página http://www.inteco.es. Curso Técnico de Accesibilidad y Usabilidad Web Proyecto Final 2
ÍNDICE 1. INTRODUCCIÓN 4 1.1. Objetivos 4 1.2. Competencias 4 1.3. Entrega 5 2. DESCRIPCIÓN 6 2.1. Construcción de Sitios Web Accesibles 6 2.1.1. Práctica Unidad 2 6 2.1.2. Práctica Unidad 3 8 2.1.3. Práctica Unidad 6 8 2.1.4. Práctica Unidad 8 9 2.2. Accesibilidad en elementos externos 2.2.1. Práctica Unidad 5 2.2.2. Práctica Unidad 7 2.3. Usabilidad 2.3.1. Test Usuario 2.3.2. Diseño de un Test de Usuario 2.3.3. Evaluación de Usabilidad 11 Curso Técnico de Accesibilidad y Usabilidad Web Proyecto Final 3
Introducción Objetivos Para finalizar el "Curso Técnico de Accesibilidad y Usabilidad Web", los estudiantes deben realizar un proyecto en el que pongan en práctica los conocimientos adquiridos a lo largo de las unidades didácticas anteriores. Los objetivos del proyecto son: Creación de un sitio Web aplicando las técnicas de construcción de sitios Web Accesibles (XHTML+CSS). Evaluación y modificación del sitio para asegurar su accesibilidad. Identificar las diferentes tecnologías implicadas en el desarrollo Web y conocer las técnicas de creación de contenidos accesibles basados en dichas tecnologías. Realizar un documento Word correctamente marcado para exportarlo a formato PDF accesible. Conocer las técnicas de usabilidad y realizar un test de usuario. Competencias Una vez realizadas las actividades de cada unidad y el proyecto final, el alumno estará capacitado para: Identificar las necesidades de la diversidad de usuarios que acceden a los contenidos Web. Estructurar y generar contenidos Web correctamente así como evaluar la accesibilidad de los mismos. Generar plantillas accesibles en un CMS. Crear documentos PDF accesibles. Conocer los principios de las pruebas de usuario. Curso Técnico de Accesibilidad y Usabilidad Web Proyecto Final 4
Entrega Los archivos que conforman el proyecto final deberán enviarse por correo electrónico a la dirección tutor.accesibilidad@inteco.es. Las prácticas individuales de cada unidad deberán entregarla a la finalización de las mismas según la planificación del curso. Tabla: Entrega del Proyecto Final. Apartado Contenidos Unidad Nombre del archivo Diseño accesible. 2 Tcodigo_Nombre.Apellido1.Apellido2.zip Construcción de Sitios Web Accesibles Hojas de estilo. 3 Tcss_ Nombre.Apellido1.Apellido2.zip Práctica JavaScript. 6 Tscript_ Nombre.Apellido1.Apellido2.zip Evaluación de accesibilidad. 8 Tinforme_ Nombre.Apellido1.Apellido2.zip Práctica de Flash. 5 Tflash_ Nombre.Apellido1.Apellido2.zip Accesibilidad en Elementos Tpdf_Nombre.Apellido1.Apellido2.pdf ó Externos Práctica de PDF. 7 Tdoc_Nombre.Apellido1.Apellido2.doc Usabilidad - Test de Usuario - Diseño de un test de Usuario - Evaluación de usabilidad Tusa _Nombre.Apellido1.Apellido2.zip (se incluirán los 3 documentos) Curso Técnico de Accesibilidad y Usabilidad Web Proyecto Final 5
Descripción El Proyecto Final consta de 3 apartados: 1. Construcción de Sitios Web Accesibles. 2. Accesibilidad en elementos externos. 3. Usabilidad. Construcción de Sitios Web Accesibles Para considerar aprobado este primer apartado, el alumno deberá realizar las prácticas individuales correspondientes a las unidades 2, 3, 6 y 8. Las prácticas individuales deberán entregarse según los plazos descritos en el apartado Entrega. Práctica Unidad 2 La práctica consiste en la creación de un sitio Web completo de temática elegida por el alumno. Para la creación de las distintas páginas del sitio Web se debe hacer uso de los principales elementos y mecanismos explicados en la unidad 2, como encabezados, listas, tablas de datos, formularios, marcado del idioma, homogeneidad entre páginas, etc. El sitio Web debe estar formado por un mínimo de páginas. Es obligatorio realizar todas las páginas indicadas en el apartado ejercicios, que figura a continuación, y para completar el número de páginas pedidas se deben crear páginas de contenido de la temática que el alumno haya elegido. Las páginas se deben crear sin ningún tipo de estilo, solo se creará el código XHTML, lo cual ayudará al alumno a crear páginas correctamente estructuradas independientemente del estilo que se les aplique posteriormente, lo cual se realizará en la práctica de la Unidad 3. Ya que se trata de un sitio Web completo, todas las páginas deben contener los correspondientes menús de navegación que den acceso a las distintas secciones. Las páginas deben realizarse utilizando la gramática XHTML 1.0 Estricta. Curso Técnico de Accesibilidad y Usabilidad Web Proyecto Final 6
Los ejercicios a desarrollar son los siguientes: 1. Crear una página de inicio que sirva como presentación del sitio Web. 2. Crear una página Web que incluya el vídeo sobre lengua de signos. Como alternativa se debe proporcionar una transcripción textual de una de sus escenas (de manera textual tanto aquellos aspectos que pudieran pasar desapercibidos para una persona ciega, como para una persona sorda). 3. Crear una página Web que incluya una tabla de datos compleja con todos los elementos explicados en la correspondiente sección: Al menos dos niveles de encabezado. Información de resumen. Relaciones entre datos y encabezados. División de la información si es necesario. 4. Crear una página Web que incluya un formulario de al menos cinco controles a elegir. Ya que no se dispone de un servidor para la comprobación de los datos introducidos, como recogida de datos del formulario se creará una página que incluya ejemplos de posibles mensajes del resultado de la validación (error en los datos, datos correctos, etc.) 5. Crear varias páginas de contenido que incluyan los distintos elementos propios de una página de este tipo: Encabezados: La estructura de encabezados debe tener al menos 3 niveles. Listas: numeradas y no numeradas. Imágenes: decorativas y de contenido. Enlaces. Cambios de idioma. Marcado de texto: párrafos, citas, acrónimos y abreviaturas. 6. Realizar 3 páginas: mapa Web, contacto y accesibilidad, a las cuales se accederá desde las correspondientes opciones de un menú o barra de utilidades que aparecerá en todas las páginas del sitio. Curso Técnico de Accesibilidad y Usabilidad Web Proyecto Final 7
Desde el mapa Web se podrá acceder a todas las páginas realizadas, para ello se debe hacer uso de aquellos elementos de estructura que se precise, de forma que quede clara la jerarquía entre las páginas del sitio Web. 7. El sitio Web debe incluir imágenes de los diferentes tipos: Imagen que transmite información. Imagen decorativa. Imagen con función de enlace. Imagen compleja. 8. Realizar la validación del código fuente de todas las páginas realizadas mediante las correspondientes herramientas de validación propuestas en el apartado referente al uso de estándares. Práctica Unidad 3 Sobre la práctica de la unidad 2 se debe aplicar: Crear y vincular una hoja de estilos denominada general.css. Aplicar formato (color, tipo y tamaño de fuente) y posicionamiento (distribución espacial) a los contenidos y elementos mediante selectores CSS en general.css. Las páginas XHTML y la hoja de estilos general.css deben cumplir gramáticas formales. Práctica Unidad 6 El alumno debe incluir en la práctica de la unidad 2 los siguientes elementos y características: Una imagen funcional que vincule a otra página en una ventana nueva generada a través de JavaScript. La funcionalidad del enlace debe estar activa independientemente de si JavaScript está habilitado o soportado por el navegador. Realizar una validación en cliente sobre al menos tres de los campos del formulario creado en la Unidad 2. La validación de los campos se realizará mediante JavaScript (indicando los errores de validación también mediante JavaScript). Cuando el Curso Técnico de Accesibilidad y Usabilidad Web Proyecto Final 8
navegador no tenga soporte de scripts o los tenga desconectados, la validación se realizará en servidor, mostrando la página de ejemplo creada también en la Unidad 2 Un enlace que permita imprimir el contenido. Éste enlace no debe aparecer cuando JavaScript esté deshabilitado o no soportado por el navegador. Práctica Unidad 8 El alumno debe realizar un informe completo de evaluación de accesibilidad en el que ponga en práctica los conocimientos adquiridos. Además, mediante el uso de las herramientas mencionadas en la presente unidad didáctica se deben modificar las páginas de las prácticas de la unidad 2 para que no tengan errores de accesibilidad. Los requisitos del informe son los siguientes: El objeto de estudio del análisis de accesibilidad son las páginas Web realizadas en los ejercicios prácticos de la unidad 2. En el informe se deben detallar qué herramientas y funciones de las mismas se han usado para evaluar cada uno de los elementos de las páginas Web y el modo de hacerlo. Se deben incluir secciones al menos para los siguientes apartados: Validación de código (XHTML y CSS). Alternativas textuales para imágenes. Encabezados. Listas. Párrafos y elementos de bloque. Enlaces. Uso del color. Tablas de datos. Formularios. Curso Técnico de Accesibilidad y Usabilidad Web Proyecto Final 9
Hojas de estilo. El informe debe incluir un apartado final en el que se detallen las correcciones que el alumno ha realizado en las páginas gracias al uso de las herramientas utilizadas. Accesibilidad en elementos externos Práctica Unidad 5 Busca en Internet tres objetos Flash con diferente aspecto y funcionalidad. En cada uno de ellos se deben realizar tres comprobaciones de Accesibilidad: Comprobar si el objeto incrustado dispone de alternativa cuando no está soportado. Analizar si la diferencia de color entre el fondo y el primer plano de los elementos que lo compone es adecuada. Por último comprobar si el orden de tabulación de los elementos con funcionalidad es correcto. Práctica Unidad 7 Crear un documento Word correctamente marcado (puede utilizarse el documento relativo a la práctica de Diseño de Páginas Web Accesibles), para realizar una exportación a PDF accesible según se indica en la unidad 8. En caso de no disponer de la herramienta de conversión a PDF, se debe enviar únicamente el fichero en formato Word Accesible. Usabilidad Test Usuario Realizar el test de usuario propuesto en el documento Test_Usuario.pdf Diseño de un Test de Usuario Diseñar un test de usuario siguiendo los criterios descritos en el documento Diseño_Test_Usuario.doc Curso Técnico de Accesibilidad y Usabilidad Web Proyecto Final
Evaluación de Usabilidad La práctica consiste en experimentar la usabilidad de un sitio Web y detectar los posibles problemas de usabilidad presentes si los hubiese. El sitio Web a analizar es una página dedicada a la venta de material informático: http://www.pc-online.net/ No es necesario analizar el sitio Web en profundidad. Principalmente hay que analizar la página de inicio y navegar por el sitio sólo lo necesario para comprobar determinados aspectos de usabilidad como mecanismos de navegación, búsqueda, proceso de compra, etc. Escribir un pequeño informe listando los principales problemas encontrados (3 o 4 es suficiente) con una justificación o descripción breve del problema. Curso Técnico de Accesibilidad y Usabilidad Web Proyecto Final 11