Pruebas de una web

Hay muchas formas de probar una página (o un sitio) web. Disponemos de validadores automáticos que nos pueden dar una primera valoración del trabajo realizado y que también ayudan durante el proceso de desarrollo, para saber si vamos por el buen camino:

• Validador HTML
• Validador CSS
• Validador de enlaces
• Validadores de accesibilidad

Pero estos validadores automáticos tienen algunas carencias, que sólo se pueden cubrir con otra serie de pruebas (manualmente en muchos casos). Dependerá de factores como el público al que está orientado nuestro sitio web, el realizar todas o algunas de las siguientes pruebas.

Navegadores

Las páginas web pueden verse en diferentes en muy distintos navegadores y en muchas posibles configuraciones. Como mínimo, será necesario probar en este subconjunto de navegadores:

Firefox

Este primer lugar en la lista no es por casualidad. Es un navegador en constante desarrollo, con un buen nivel de seguimiento de los estándares y que cuenta con una serie de herramientas (extensiones) que facilitan la realización de una página web.

MSIE

Es el más usado y con el que más cuidado habrá que tener, ya que sus diferentes versiones (5.5, 6.0, 7.0 entre otras) son muy diferentes entre sí. Dependerá de nuestro público objetivo el soportar más o menos versiones de este navegador. Seguramente, deberemos saltarnos algún estándar (CSS sobre todo) para adecuar nuestro trabajo a las particularidades de este cliente web. Esta es una de las razones por las que un validador automático no siempre es una buena medida de la situación.

Opera

Tiene menos seguidores que Firefox, pero tiene una mejor implantación de los estándares. Además, su versión para dispositivos móviles puede extenderse casi tanto como MSIE en los próximos años.

Safari

Es un navegador específico para Mac OS X. Esta en esta lista por 2 razones: porque cubre una parte importante de los usuarios de esta plataforma y (una razón más técnica) porque utiliza internamente otro motor de renderizado de páginas distinto de los anteriores, que también deberemos tener en cuenta (diferente motor => distintas reglas que pueden tener bugs y que tendremos que solventar).

Lynx

Es la nota exótica de esta lista. Pero no por ser exótica, está de más saltársela. Aunque su uso está relegado a unos cuantos geeks de sistemas Unix y Linux, tiene poderosas razones (prácticas) para estar aquí: nos da una buena aproximación a cómo se ve nuestra página en ausencia de CSS, imágenes, JavaScript y nos permite probar la navegación sin ratón entre los contenidos del sitio web.

Todas estas pruebas se pueden simular por separado con otras herramientas, pero con este navegador de sólo texto podemos llevar a cabo estas pruebas de una sóla tacada. Si no podemos acceder a una versión de este programa (y eso que la hay hasta para Windows), siempre podemos tener acceso a una simulación online.

Configuraciones de navegadores

Según la plataforma que utilice el usuario, el abanico de posibilidades de configuración de un mismo navegador puede ser extenso. Ante todo, para valorar el resultado de las siguientes pruebas, hay que ver si nuestra página se degrada elegantemente (graceful degradation). Es decir, como reacciona la página ante la pérdida de funcionalidad.

Sin imágenes

Si el cliente no dispone de una conexión rápida, puede que tenga desactivada la descarga de imágenes. Si es así, el contenido de nuestra página deber seguir siendo legible. Es una buena prueba para ver cómo se adaptan los textos alternativos de los elementos gráficos dentro del resto del contenido escrito.

Sin JavaScript

No es una situación tan extraña si recordamos que muchas personas, en su trabajo, por cuestiones de seguridad (que no pueden cambiar), tienen deshabilitado el soporte de JavaScript en sus navegadores. Así pues, ante esta circunstancia, la página debe seguir operativa, prescindiendo de la funcionalidad añadida que le daba JavaScript).

Esto, aunque ideal, no siempre puede cumplirse (sobre todo, en aplicaciones web). Por ello, al menos, se deberá mostrar un mensaje aclarando por qué la página no puede funcionar.

Sin cookies

Por las mismas razones que el apartado anterior, el soporte de cookies, por motivos de seguridad, no siempre está garantizado. Cómo reaccionar ante esto, dependerá del contexto de nuestro sitio web.

Sin plugin de Flash

Si gran parte de nuestro contenido se basa en el uso de Flash, puede que estemos en un grave problema si nuestros usuarios, o bien no tienen el plugin, o bien no tienen la versión adecuada. Habrá que verificar como de legible es nuestro contenido ante la ausencia de Flash.

Sin CSS

Aunque hoy en día esta circunstancia ya no es muy frecuente (hay muy pocas personas que todavía utilicen navegadores antiguos sin soporte para CSS), sí que es útil probar a leer y a navegar por el contenido sin estilo. De esta forma veremos si hemos utilizado correctamente los elementos HTML a la hora de construir la página (los encabezados, las listas, si no hemos utilizado tablas para maquetar, etc.).

Configuraciones de pantalla

Si diversos son los navegadores que nos pueden visitar, también son diferentes las propiedades de los monitores que usarán los visitantes.

Resolución

¿Qué resoluciones deberemos soportar: 800x600, 1024x768, 1280x1024, 1600x1200, ...? Y la lista sigue y sigue. Pero la respuesta es simple y a la vez complicada de resolver: todas ellas. O bien nuestra plantilla es lo suficientemente fluída como para adaptarse a las distintas resoluciones o bien cambiamos la plantilla dependiendo de la resolución (esto se puede hacer mediante JavaScript).

Sinceramente, creo que lo mejor y más pragmático es lo primero: hacer un diseño fluído que se adapte lo mejor posible a todas las resoluciones posibles. Con las demasiado pequeñas o las demasiado grandes tal vez el resultado no sea el más adecuado, pero para el resto de rangos, será óptimo (pero si no lo probamos, no lo sabremos).

Colores

Si difícil es hacer un diseño (en cuanto a disposición de los elementos), más difícil es aún conseguir una buena paleta de colores para ese diseño. Una buena paleta que consiga un buen contraste entre fondo y texto y que diferencie de un vistazo distintos elementos.

Una buena prueba para probar un contraste adecuado, es poner en escala de grises la página. Esto podemos conseguirlo cambiando nuestra configuración de escritorio o utilizando esta herramienta online para simular defectos de visión. Nos dará una buena medida de la accesibilidad de nuestra página (pensando en usuarios con problemas en la visión y para evitar que nuestros visitantes tengan estos problemas de visión).

También podemos hacer pruebas de otros problemas de visión (como el daltonismo), a través del servicio online de Vischeck.

Probar la página a 256 colores, hoy en día, no creo que sea necesario. Al igual que el número de usuarios con navegadores del siglo pasado, el número con configuraciones tan restrictivas, es muy pequeño. A no ser que sepamos, a ciencia cierta, que alguno de nuestros potenciales clientes pertenece a este reducido grupo, podemos prescindir de esta prueba.

Formato de impresión

¿Qué tal se imprimen nuestros contenidos? Aunque es más ecológico (y algunas veces más cómodo) guardar en formato electrónico una página web, en ocasiones, es interesante imprimir algunas páginas, o exportar a PDF.

Hay unas cuantas recomendaciones que conviene seguir para conseguir un buen formato de impresión, pero todas tienen un denominador común: la simplicidad. Se deberá prescindir de todos los elementos del diseño que no aporten nada al contenido principal de la página.

Sistemas operativos

Para cuidar el diseño de la página, habrá que elegir un conjunto de fuentes de letras adecuadas a los distintos sistemas operativos, porque no todas están en todos ellos. Habrá que probar estas elecciones en cada uno de los sistemas que hayamos optado por hacer nuestro desarrollo. Una forma de ahorrar en máquinas físicas (hardware), es hacer uso de máquinas virtuales.

Cada sistema operativo tiene sus propias herramientas de virtualización:

• Microsoft Windows: Virtual PC, VMWare
• Linux
• Mac OS X: iEmulator

Otro aspecto a tener en cuenta en las diferentes plataformas, serán los plugins que tengan unas y otras. No todas soportan el uso de ActiveX (por ejemplo), o no todas poseen las mismas versiones de los plugins (como el de Flash).

Redes lentas

Puede que hayamos hecho un sitio demasiado recargado o que utilice demasiados ficheros. Una forma de probar si nuestro sitio es rápido (en cuanto a velocidad de descarga), es probándolo en una red lenta. Esto se puede conseguir utilizando un módem o un programa limitador de la red, como NetLimiter.

Dispositivos móviles

¿Está nuestra página preparada para ser vista desde un móvil? ¿Tiene que estarlo? La respuesta a estas preguntas, es un rotundo sí. Las ciencias adelantan que es una barbaridad y seguramente, dentro de poco tiempo (si no es ya mismo), la gran mayoría de nuestros visitantes lo harán a través de alguna clase de dispositivo móvil.

Debemos preparar nuestro sitio web para esta circunstancia y deberemos probarlo. La opción más económica es hacerlo a través de emuladores de dispositivos móviles. Cada fabricante suele tener disponibles en su web unos cuantos de los modelos que va sacando al mercado.

Lectores de pantalla

Otra forma de probar la accesibilidad de una página web, es leerla tal y como la leería un lector de pantalla para un usuario invidente.

Como estos dispositivos suelen ser bastante caros (como Jaws), la mejor forma de hacer nuestras pruebas será, una vez, a través de emuladores.

Uno de ellos se llama Fangs y es una extensión para Firefox.