Aplicaciones de evaluación web

1. Aplicaciones en navegador

1.1. Web Developper Toolbar

a. Cómo funciona

Web Developer Toolbar es una herramienta que nos permite, una vez instalada en nuestro navegador, realizar una exhaustiva revisión del diseño y desarrollo de un sitio web. Aunque existen versiones tanto para Firefox como para Internet Explorer, recomendamos utilizar el primero, ya que el número de opciones de análisis que posee la herramienta disponible para Firefox es mayor y, por lo tanto, el resultado de la evaluación será más rico (y nos permitirá aprender más cosas)
La herramienta nos ofrece doce botones desplegables que agrupan funciones por áreas de aplicación. Veamos, a grandes rasgos, cuáles son estas:
t8-wdt1.png
Disable.
Permite deshabilitar diferentes opciones de la página: Cache, Java, JavaScript, tamaño mínimo de texto, colores de página, bloqueador de popus, etc. de forma que podamos comprobar cómo se comportará la página desplegándose en visualizadores (navegadores) de usuarios que tengan deshabilitadas una o varias de estas propiedades.
Cookies
Ofrece un amplio panel de administración y supervisión de Cookies: habilitar, deshabilitar todas, algunas, ciertos dominios, etc. Además, permite comprobar las cookies que utiliza un determinado sitio
t8-wdt2.png
CSS
Permite desactivar los estilos de un sitio, ver el código CSS de la página, añadir una hoja de estilos propia. Además, si no se tiene conocimiento de CSS, permite experimentar con la edición mediante el submenú “Edit CSS”; esta opción abre una ventana lateral con el código de la hoja, modificable a gusto, y cuyos resultados podremos ver en vivo sobre la misma página.
Forms
Esta pestaña nos permite comprobar el funcionamiento de los formularios de un sitio. Podemos activar y desactivar campos, mostrar contraseñas y autocompletar. Desde la solapa “View Source”, aparte del código de los formularios, se puede ver también el código fuente que ha sido generado dinámicamente por Javascript.
Images
Esta herramienta es muy completa:
  • Disable images: Podemos comprobar qué sucede en la página si se deshabilitan las imágenes internas, las enlazas desde sitios externos (por ejemplo para saber qué sucedería si se “caen” servicios externos en los que tengamos alojados estas)
  • Display: Para comprobar los textos alternativos que llevan incluidos las imágenes, comprobar sus dimensiones, tamaño y ruta (path)
  • Otros: Hay utilidades muy diversas tales como un marcador (outline) de las imágenes (según distintos criterios de análisis), o la posibilidad de eliminar (hidden) imágenes para comprobar si se han utilizado estas como elementos de fondo, o como componentes de diseño.
Information
Otra amplia herramienta que nos permite realizar acciones como desplegar diferentes informaciones (abreviaturas, teclas de acceso, anclas, bloques CSS, índices de tabulación, atributos de tabla, atributos de título…) o crear informes rápidos de dichos elementos.
Miscellaneous
Agrupa un conjunto diverso de herramientas como las siguientes:
  • Display Line Guides. Permite generar una retícula de diseño sobre una página de forma que podamos comprobar, visualmente, la estructura, organización y sus dimensiones.
  • Display Ruler. Muestra una regla dinámica que podemos superponer sobre la página para medir elementos de diseño.
  • Show. Permite mostrar algunas cuestiones como, por ejemplo, comentarios al código.
  • Otros. Podemos abrir un editor HTML para comprobar posibles ediciones de la página; poner en modo lineal la presentación de los bloques CSS (Linearize page) para comprobar, por ejemplo, cómo se verá en dispositivos de pantallas reducidas; mostrar, si posee la página, los bloques que en los que el usuario puede cambiar el tamaño, etc.
Outline
Es muy útil tanto para el análisis como para la evaluación de un sitio. Permite destacar con un trazo de color diferentes elementos, por ejemplo, los bordes y dimensiones de los <div>, encabezados, enlaces, tablas, etc.
Resize
Herramienta que posibilita cambiar el tamaño de la ventana del navegador a 800×600 o cualquier otro tamaño predefinido, con el fin de comprobar cómo se visualizará la pantalla en distintas resoluciones. También trae una regla que podemos superponer sobre la página para medir distancias y tamaños, así como una lupa que podremos usar para descubrir pequeñas imperfecciones.
Tools
Incorpora una batería de herramientas de validación especialmente útiles (y que hemos tratado en la parte teórica). Podemos, mediante “Edit Tools”, añadir nuevas herramientas y aplicaciones de validación. Algunas de las más importantes para nosotros:
  • CSS: Validación de la sintaxis de las hojas de estilo en cascada.
  • Fedd: Valida las fuentes de sindicación (RSS, ATOM…)
  • HTML: Valida el código XHTML
  • Links: Valida los enlaces
  • Section 508 y WAI: Valida la accesibilidad el sitio frente a estas pautas de accesibilidad.
View source
Como su nombre indica, nos permite visualizar el código de la página de diferentes maneras.

b. Guía de análisis

A continuación se indica un posible recorrido para realizar el análisis de un sitio web utilizando la herramienta Web Developper Toolbar:
  • Análisis global de Experiencia de Usuario
    • Siguiendo la propuesta de los siete parámetros de Morville, analiza de forma global cada sitio respondiendo a las siguientes cuestiones: ¿Es utilizable?, ¿Es útil?, ¿Es deseable?, ¿Es valioso?, ¿Es encontrable?, ¿Es creíble?, ¿Es accesible?
  • Análisis de Usabilidad
    • Utilizando los siguientes botones y opciones de la barra Web Developer Tollbar, comprueba en qué medida se resiente, si es que lo hace (qué elementos dejan de funcionar, cuáles dejan de ser plenamente operativos y funcionales, en cuáles se resiente la usabilidad…) la información que ofrece el sitio: “Disable”, “Cookies”, “CSS”, “Forms”, “Images”, “Miscelanous>Linenarize page”, “Miscelanous>Small screen rendering”, “Resize”
  • Análisis de Accesibilidad
    • Comprueba mediante los siguientes botones y opciones de la barra, el grado de atención a la accesibilidad que muestra el diseño del sitio: “Information>abreviations, Tab Index, document outline”, “Images>Display Alt Atributes”…
    • Valida el sitio con la herramienta “Tools>Validate WAI”. Evalúa los resultados.
  • Análisis de composición y validación de estándares
    • Utilizando los siguientes botones y opciones de la barra Web Developer Tollbar, repara en cómo está compuesta la página (mediante tablas, mediante posicionamiento con CSS, marcos…): “Outline>frames, Tables, Block level elements…”
    • Valida las hojas de estilo en cascada con la herramienta “Tools>Validate CSS”
    • Valida el HTML con la herramienta “Tools>Validate HTML”
    • Valida los Feed con la herramienta “Tools>Validate Feed”

Recursos

  • Lector de pantalla de Usamos. El Simulador de Lector de Pantallas es una herramienta desarrollada por Usamos y sirve para ayudar a comprender como recibirán la información de un sitio Web las personas que utilizan lectores de pantalla para navegar por Internet.
  • Low-Vision Simulation. Permite a los desarrolladores experimentar online el entorno y las dificultades de acceso con las que se encuentra un usuario que tiene baja visión, por ejemplo, cataratas, glaucoma o degeneración macular.
  • aDesigner. Es un simulador que ayuda a los diseñadores de páginas web a asegurarse de que las personas con problemas de visión encuentran sus páginas accesibles y usables. Evalúa el contraste de los colores de la página, la posibilidad de que el usuario cambie el tamaño de la fuente, que exista texto alternativo para las imágenes y otras recomendaciones de accesibilidad.
  • VisCheck. Es una herramienta que nos muestra cómo ve una persona daltónica. Existe tanto una versión online como una versión descargable.
  • Daltonize. Es una herramienta que puede ser utilizada para corregir imágenes de forma que, en la imagen resultante de la transformación, la persona con daltonismo pueda distinguir más fácilmente la información de los colores para los que tiene dificultad.
  • Graybit. Es una herramienta online que dada una página web, la convierte a escala de grises y la muestra en el navegador.
  • Visual Impairment Simulator. Es una aplicación para Windows que se puede utilizar para simular lo que ven las personas con diversos problemas visuales cuando utilizan el ordenador.
  • Screen Reader Simulation. Permite al desarrollador experimentar el entorno que encuentran los usuarios de lectores de pantalla para acceder a los contenidos de un sitio web.
  • Fangs. Es un emulador de un lector de pantalla que crea una representación textual de una página web con el contenido que leería en esa página un lector de pantallas moderno.
  • Lynx Viewer Text-Only Simulator. Es una herramienta que permite al autor ver la página de forma similar a como se vería en el navegador sólo texto Lynx.
  • Web Page Backward Compatibility Viewer. Esta herramienta permite ver el aspecto de la página suponiendo que nuestro navegador o producto de apoyo de acceso no soporta ciertas características, como por ejemplo, imágenes, tablas, scripts, applets de java, etc.
  • Firevox. Plugin para Firefox que emula a un lector de pantalla.