Tu web en la televisión (3 de 3)

Este artículo tiene tres páginas: estás en la Página 3 (WebTV y Conclusiones y recomendaciones finales).

Ir a la Página 1 (Introducción y TDT)
Ir a la Página 2 (Televisión como dispositivo de salida)

[Ir a las Conclusiones y recomendaciones finales de accesibilidad]

2.4 WebTV

2.4.1 Qué es

WebTV es un dispositivo que permite navegar por Internet mediante un receptor de televisión y una línea telefónica.

La primera empresa en entregar este servicio fue WEBTV Networks Inc. (cuyo nombre original fue Artemis). Ésta fue fundada en 1995 por Steve Perlman, Bruce Leak y Phil Goldman, quienes al año siguiente lograron lanzar al mercado la primera máquina que permitía al usuario navegar por Internet [...] además, ofrecía la capacidad de ver televisión en un solo equipo, sin necesidad de añadidos especiales.

[En Wikipedia]

En 1997 Microsoft compró WebTV. En 1998 tenía medio millón de usuarios. En 2001 lo rebautizó con su actual nombre: MSN TV, llegando al millón de suscriptores, que fueron disminuyendo en los años posteriores. En 2004 presentó MSN TV2, haciendo una campaña de promoción orientada a los usuarios sin PC en sus domicilios.

Esta tecnología se encuentra disponible sólo en Estados Unidos y posee dos modos de conexión a Internet, ya sea por banda ancha o por módem.

[Si te interesa su historia, puedes consultarla en la Wikipedia]

En la web oficial de MSN TV se puede ver como el paquete de instalación incluye teclado wireless y mando a distancia (no tiene ratón).

En la actualidad, el sistema operativo es Windows CE, puede contener RealAudio y Real Video y soporta imágenes en formato JPEG, GIF, BMP, PNG (puedes consultar todas las características técnicas en su web oficial.

2.4.2 TV browser

El primer dispositivo de WebTV se basó en el navegador de Internet Spyglass de Mosaic. Desde la compra de Microsoft se basó en Internet Explorer.

En MSN-TV (classic) TV Browser está basado en Explorer 4 y desde 2004 para MSN-TV2 en Explorer 6 y compatible con Netscape Navigator (su versión más reciente es de 2006).

Hablaré de la versión Classic (mejor probar siempre en la versión más vieja). Destacaría las siguientes particularidades de este navegador (se pueden consultar todas en su web para desarrolladores).

Soporta “casi” HTML 4.0, casi porque no soporta: colgroup, col, fieldset, legend, optgroup, tbody, tfoot, thead. Además incluyen nuevos atributos y etiquetas propietarias (como sidebar).
Sólo admite una ventana y no puede presentar los frames como estamos acostumbrados, sino que los combina en una tabla con resultados “no previsibles”.
Admite CSS1 y algunas propiedades de posicionamiento definidas en CSS2.
La implemetación Javascript de TV Browser (JellyScript) “casi” soporta Javascript 1.3. No soporta document.write y los eventos pueden ser sólo disparados por los elementos HTML
No admite Java o controles ActiveX, ni otras aplicaciones que requieran plugins o aplicaciones externas como PDF.

Por otro lado, la página web puede interactuar con la televisión de modo que, por ejemplo, desde un enlace puedes ir a ver la televisión, o ponerla como fondo de un elemento, etc.

El User-Agent que lo identifica es: Mozilla/4.0 WebTV/2.6 (compatible; MSIE 4.0)

2.4.3 Principales problemas

Los principales problemas que se encuentran los usuarios de WebTV al navegar por la web son los mismos que ya hemos ido viendo en otros dispositivos:

Textos demasiado pequeños en las imágenes

Como no existe el scroll horizontal, el navegador redimensiona horizontalmente las páginas (algo parecido a lo pasaba en AOL Avant, el “paquito” con el que los que sean tan viejos como yo se habrán peleado).

Por esta razón, los gráficos con textos pequeños serán ilegibles, recomendándose un mínimo de 16pt.

Problemas en la disposición de los elementos

El TV Browser escala los textos a 18 pt Helvetica, en consecuencia, si el texto se encuentra en columnas estrechas será difícil de leer. Un desarrollo web siempre debe prever que el usuario pueda seleccionar en el navegador la visualización de las páginas con un tamaño de fuente mayor, por tanto, la única diferencia en este dispositivo es que el usuario “siempre” va a elegir el tamaño más grande de fuente.

Utilización de colores inadecuados para su visualización por televisión

2.4.3 Revisemos con MSN TV Viewer

MSN TV Viewer es un emulador de WebTV que nos permite revisar nuestros desarrollos en este dispositivo.

Es gratuito y te lo puedes descargar de su web para desarrolladores.

En el emulador tienes dos pantallas, una donde visualizas las páginas (puedes poner una URL o revisar páginas en local) y otra donde te lista los errores que localiza. También muestra un mando a distancia para que, junto con el teclado, puedas navegar por la página.

Así se ve la página principal de Google:

Independientemente de que el código de la página de Google me pone los pelos de punta, hay que reconocer que se ve relativamente bien, con el foco en el primer elemento y todo el contenido accesible y legible. Cree una CSS para TV y la apliqué a la página de Google, con poquitos cambios, la página se vio perfecta:

Otro ejemplo que he cogido, por estar hablando de televisiones, es la de RTVE:

-Página principal de RTVE en Explorer 6-

Así se ve la página principal de RTVE en MSN TV Viewer:

RTVE en MSN TV Viewer. Contenido de la página principal

En esta web el resultado es más desastroso. Se pueden ver claramente ejemplificados varios problemas comunes: los gráficos con textos (los textos de los menús de toda la cabecera son imágenes) se vuelven ilegibles; y los textos desaparecen de pantalla o pasan a estar en columnas demasiado estrechas, efecto que se puede evitar usando una CSS específica que redimensione los contenidos a la resolución de pantalla de la televisión.

Conclusiones y recomendaciones finales

No tenemos ratón sino mando a distancia

Al maquetar una página siempre debemos recordar que hay usuarios que no disponen de ratón, pero no está de más recordarlo: siempre se ha de comprobar el funcionamiento de una aplicación sin ratón, verificando que se puede interactuar fácilmente con una sola mano.

No se deben utilizar eventos asociados al ratón, hay que comprobar que el tabulador se comporta adecuadamente accediendo a todos los elementos necesarios en el orden adecuado, etc.

También son muy útiles los mecanismos para saltar la navegación y acceder directamente al contenido.

CSS específica

Para poder personalizar los colores, el tamaño de fuente, el ancho de nuestra página o la disposición de sus elementos para su correcta visualización desde la televisión, será necesario tener una CSS específica para este dispositivo, de igual modo que creamos CSS específicas para dispositivos móviles o para la impresión.

<LINK REL='stylesheet' media=’TV’ TYPE='text/css' HREF='tvcss.css'>

Este código se situa en el head de la página para que cargue la CSS "tvcss.css" sólo en este dispositivo de salida.

Colores: paleta para televisión

La resolución y las características en general de una televisión difieren de las de un monitor y, a menudo, los colores que utilizamos no son “cómodos” para visualizarse en la televisión. En especial hay que huir de las siguientes combinaciones de color de fondo-color de letra:

On most television displays, the following colors will bleed into each other - most especially the red - and will shimmer and flicker. En devfiles.myopera.com

En este sentido es interesante la herramienta WebTV Color Picker que permite revisar tu paleta de colores para televisión.

Por tanto, al crear nuestra CSS específica para televisión, deberemos crear una combinación de colores adecuada para este dispositivo.

Imprescindible diseño líquido o diseño elástico

Uno de los problemas recurrentes que hemos ido viendo son problemas relacionados con el scroll, la resolución y la redimensión o reajustes de la página que modifican la disposicion de los elementos.

Siempre hemos de tener en cuenta que el usuario puede tener una resolución de pantalla o un dispositivo de salida diferente del nuestro (un móvil, una PDA, una consola, etc.), por ello resulta imprescindible:

cumplir con las Pautas de Accesibilidad de la WAI
huir de la maquetación por tablas
no idear diseños fijos sino un "diseño líquido" (que se adapte a la resolución del dispositivo) o bien un "diseño elástico", en el cual el ancho de elementos en pantalla depende del tamaño de letra configurado por el usuario en su navegador (Luis Villa), pero en cualquier caso, ejecutado mediante unidades relativas y mediante una maquetación con DIVs.

Como dice Luis Villa: Diseñar para la web requiere una mentalidad flexible capaz de adaptarse a posibilidades de presentación diferentes y a un cierto “descontrol”.

Resoluciones de TV, de la Wikipedia

Tipo y tamaño de fuente de los textos

Los gráficos o imágenes con textos pequeños pueden volverse ilegibles en la televisión. Nunca es recomendable que utilices imágenes para contenido textual, pero en caso de ser necesario, su texto deberá tener un mínimo de 16pt.

Por otro lado, los textos deberán tener un tamaño adecuado para visualizarse por televisión, se recomienda el equivalente a unos 18 pt. No está de más recordar que no se deben utilizar tamaños de letra fijos sino siempre relativos.

También hay que tener en cuenta que no dispondremos de las mismas fuentes que en el ordenador. Por ejemplo, Nintendo Wii solo dispone de dos fuentes: una Sans-Serif "Wii NTLG PGothic" y una monoespaciada "Wii NTLG Gothic".

Nuestra CSS específica deberá tener en cuenta todos estos factores.

Respetar los estándares

Se recomienda respetar el estándar XHTML Basic, recomendación de la W3C pensada para mejorar el acceso a través de dispositivos alternativos, como dispositivos móviles o televisión.

[...] si partimos de que las características de HTML 4 (marcos, tablas avanzadas, un grupo fijo de atributos manejadores de eventos, etc.) fueron desarrolladas para un cliente del tipo computadora de escritorio, éstas han probado ser inapropiadas para la mayoría de dispositivos distintos.

["XHTML Basic" en usabilidadweb.com.ar]

Si necesitas una introducción sobre XHTML Basic puedes consultar "El XHMTL" de Juan Luis Lara de las IV Jornadas del Sidar]

En cualquier caso mejor XHTML que HTML, y recuerda que la mayoría de los navegadores para la televisión no soportan frames ni ventanas emergentes, ni muchas etiquetas o atributos como he ido indicando.

Reconocer el dispositivo

Es muy útil conocer en qué dispositivo nos encontramos. Desde Javascript podremos saberlo preguntando por el appName, sólo necesitamos conocer el User-Agent, que he ido indicando en cada apartado (y que puede variar en función de la versión o el idioma). Por ejemplo para WebTV:

if(navigator.appName.indexOf("WebTV")!=-1) //WebTV detected

Puede ser muy útil en este sentido, para hacer pruebas, la extensión para Firefox User-agent Switcher, que permite cambiar el User-Agent con que se identifica Firefox.

Revisar: aprovechemos los emuladores

He ido nombrando distintos emuladores en el artículo (MSN TV Viewer, ORTIKON ACE Browser Emulator, etc.) No hay excusa para no revisar.

Formatos no soportados

No siempre se soporta Flash, menos aun ficheros PDF o incluso determinados formatos de imágenes.

Recuerda que, como deberías hacer siempre, tendrás que proporcionar alternativas accesibles para estos ficheros u otros ficheros que necesiten aplicaciones externas.

Javascript

Aunque es habitual que se soporte Javascript e incluso AJAX, hay excepciones y comportamientos anómalos, así que, como siempre, se deberá comprobar que la aplicación funciona correctamente sin Javascript y proporcionar las alternativas oportunas.

Pautas de Accesibilidad de la WAI

Las Pautas de Accesibilidad de la WAI aseguran la accesibilidad de los contenidos a todos los usuarios desde todos los contextos de navegación, conseguir al menos un nivel de adecuación doble-A es imprescindible para asegurar la correcta visualización e interacción con tus páginas.