martes, 26 de junio de 2007

PDF accesibles

Última actualización: 27/06/2014

El formato PDF

El formato PDF (Portable Document Format) fue desarrollado por Adobe en el año 1993. En 2008 se convirtió en un estándar formal y abierto publicado por la ISO (Organización Internacional de Estandarización) como ISO 32000-1:2008 (Document management -- Portable document format-- Part 1: PDF 1.7, disponible de forma gratuita en la web de Adobe.

El formato PDF se ha convertido en el principal formato digital para distribuir documentación en Internet debido a sus características:

  • Es multiplataforma.
  • Es una especificación abierta. Actualmente se puede generar un PDF desde prácticamente cualquier aplicación, y hay numeroso software libre para crear o visualizar ficheros PDF.
  • Puede integrar una amplia combinación de contenidos heterogéneos: textos, imágenes, vídeo, formularios, etc.
  • Es fiable, robusto y mantiene la integridad de la información: muestra el mismo aspecto y estructura que el documento original, independientemente del programa desde el que se generó o desde el que se visualice.
  • Admite opciones de seguridad y firma digital.
  • Tiene capacidad de búsqueda.
  • Puede ser accesible para los usuarios de lector de pantalla si se tienen en cuenta unas buenas prácticas.

Existen diversas versiones de PDF. En la versión 1.4 (Acrobat 5.0) se incluyeron los PDF tags (etiquetas en español) y en la versión 1.5 (Acrobat 6.0) se mejoró el etiquetado de los PDF, que como veremos es imprescindible para la accesibilidad. La última versión es PDF 1.7, Adobe Extensión Level 8. La ISO está trabajando en la siguiente versión que será PDF 2.

Cada versión del software disponible para visualizar, modificar o crear archivos PDF, podrá visualizar o generar determinadas versiones de PDF. Se puede consultar una descripción detallada de las características de cada versión en Portable Document Format, Wikipedia.

Por tanto es importante conocer las diferentes versiones de PDF y con qué versiones de Adobe Acrobat se corresponden. Al guardar el PDF podremos indicar la compatibilidad con versiones anteriores, pero siempre habrá que tener en cuenta las características generales y de accesibilidad que admite la versión seleccionada.

Desde 1995, Adobe ha trabajado en el proceso de la ISO (Organización Internacional para la Estandarización) para proporcionar subconjuntos especializados de PDF como estándares para funciones y sectores específicos:

PDF 1.7 - ISO-32000

Podremos por tanto guardar por ejemplo nuestro PDF como PDF/A, pero un PDF/A no es un PDF accesible.

El estándar PDF/A está pensado para que se conserve igual a largo plazo y por tanto toda la información del documento (fuentes, perfil de color, etc.) debe estar incluida en el mismo. En un PDF/A no está permitido incluir audio, vídeo, javascript o cifrado.

Existen tres versiones de PDF/A y cada una tiene diversos niveles de cumplimiento: PDF/A-1b y PDF/A-1a; desde 2011 PDF/A-2, basado en PDF 1.7 (PDF/A-2b, PDF/A-2a, PDF/A-2u); y desde 2012, también basado en PDF 1.7, PDF/A-3, con los mismos niveles de cumplimiento.

Según el nivel de cumplimiento (avanzado, básico o unicode), un PDF/A tendrá algún requisito de accesibilidad, cómo estar etiquetado, pero en sí mismo no asegura ni remotamente que el documento sea accesible.

En 2012 se publicó el nuevo estándar PDF/UA (ISO 14289-1:2012) que recoge las características de la especificación PDF necesarias para la accesibilidad de un PDF. Todavía no se puede guardar un PDF como PDF/UA, y aun cuando sea posible, tampoco garantizará por sí mismo que el PDF sea accesible, pues muchas de las acciones y comprobaciones para convertir un PDF en PDF accesible no pueden realizarse automáticamente.

El validador de accesibilidad de Adobe Acrobat XI Pro ya tiene en cuenta los requisitos del estándar PDF/UA, así como los de las WCAG 2.0, pero solo pueden corregirse automáticamente los requisitos que pueden evaluarse automáticamente, el resto necesita validación y corrección manual.

He tratado específicamente el formato PDF/UA en los artículos:

Que és un PDF accesible

Un PDF accesible es aquel cuyo contenido es accesible para todos los usuarios independientemente de su discapacidad o contexto de uso.

Muchas de las acciones, aunque no todas, que se llevan a cabo para convertir un PDF en PDF accesible están pensadas para las personas que utilizan un lector de pantalla. Por ello, la mayoría de las modificaciones no son apreciables visualmente, y puede no haber diferencias visuales entre la versión del PDF antes de hacerlo accesible y la versión del PDF accesible.

Un lector de pantalla es un software que interpreta el documento y lo presenta al usuario mediante un sintetizador de texto a voz o mediante una línea braille, como podéis ver en este ejemplo: Refreshable Braille and the Web

Por tanto, para realizar PDF accesibles es necesario comprender cómo acceden al documento las personas que utilizan un lector de pantalla y saber utilizar de forma básica alguno de ellos, como NVDA, cuyo uso está muy extendido y es gratuito. La opción "Leer en voz alta" de Adobe Acrobat nunca puede sustituir la revisión del documento con un lector de pantalla.

¿Cuáles son algunas de las acciones que realizaremos para convertir un PDF en PDF accesible?

Estas son algunas de las acciones más importantes:

  • Indicar el idioma del documento, e indicar el idioma de cada contenido que esté en un idioma diferente al principal. De este modo el lector de pantalla podrá leer el documento adecuadamente.
  • Incluir texto alternativo a las imágenes informativas para que el lector de pantalla pueda leer al usuario la información que transmiten. Y por el contrario, indicar qué imágenes son decorativas (artifacto) para que no las anuncie.
  • Etiquetar el documento correctamente, es decir, indicar internamente de que tipo es cada contenido (un encabezado, una tabla, una lista, etc.) Así el lector de pantalla anuncia adecuadamente cada contenido y el usuario puede "ojear" el documento saltando de un tipo de elemento al siguiente mediante atajos de teclado.

    Paleta Tags de Adobe Acrobat

    Esta es una de las acciones en las que es habitual invertir más tiempo, puesto que, aunque puedes generar el PDF etiquetado o etiquetarlo automáticamente desde Adobe Acrobat, después suele ser necesario hacer muchas correcciones. El número de correcciones a realizar dependerá mucho de cómo se haya maquetado el documento de origen.

  • Revisar el orden de lectura interno que no siempre coincide con el visual, lo cual provocará que el lector de pantalla lea el documento en desorden y por tanto sea incomprensible.
  • Revisar que la paginación interna del documento se corresponde con la que aparece en las páginas o que incluye un índice de marcadores para facilitar la navegación por el documento.
  • Incluir un texto alternativo a los enlaces cuando no es claro su destino, o si estamos cumpliendo el nivel AAA, también a las abreviaturas y acrónimos en determinados casos, de manera que el lector de pantalla lea este texto en vez del enlace o la abreviatura.
  • Asegurar un orden de tabulación coherente entre los elementos interactivos.
  • Asegurar que la configuración de seguridad no interfiere con el acceso a la información por parte del lector de pantalla.
  • etc.

También hay otros requisitos que no están relacionados con los usuarios de lector de pantalla, como puede ser asegurar un correcto contraste de color. Otros que solo serán aplicables si el PDF incluye vídeos o formularios.

¿Quién define todos los requisitos a cumplir? ¿dónde puedo consultarlos?

Los requisitos a cumplir vienen definidos en las WCAG 2.0, que incluye 61 requisitos de conformidad. Algunos de estos requisitos no se aplican a los documentos PDF, otros se aplican igual que en cualquier otra tecnología, y algunos se aplican de forma especifica para los documentos PDF. Estos últimos puedes consultarlos en mi artículo PDF Techniques for WCAG 2.0

Algunos requisitos específicos del estándar PDF/UA no están incluidos en las WCAG 2.0, como es asegurar que la configuración de seguridad no interfiera con el acceso al contenido si usas un lector de pantalla. Los comenté en el artículo: PDF/UA. Descripción de la norma. Comparativa y relación con las WCAG 2.0

Convertir un PDF en accesible puede ser una tarea laboriosa. Muy pocos de los requisitos pueden corregirse de forma completamente automática, siempre requiere de un trabajo manual y especializado.

Para ello es importante conocer las buenas prácticas que pueden llevarse a cabo desde el fichero de origen para que el trabajo a realizar en el PDF con Adobe Acrobat XI Pro sea menor. Puedes ver un ejemplo en PDF accesible. PDF correctamente etiquetado desde inDesign. Sin embargo, por mucho que se trabaje el documento de origen, siempre serán necesarias acciones con Adobe Acrobat XI Pro.

También es importante seguir una metodología de trabajo y realizar las acciones en un determinado orden, para mayor eficacia y para evitar problemas que a posteriori no pueden resolverse sin volver a generar el PDF o solo pueden corregirse de una más forma compleja. Hablé de ello en: PDF accesibles (2): metodología

Comprobar la accesibilidad del PDF

Adobe incluye un validador de accesibilidad que permite comprobar aquellos criterios de conformidad que admiten una validación automática. En la última versión de Adobe Acrobat XI Pro se ha mejorado mucho el validador y evalúa de acuerdo a las WCAG 2.0 y el estándar PDF/UA. Hable de ello en Novedades de Adobe Acrobat XI Pro relacionadas con la accesibilidad de los PDF

Aunque es un herramienta valiosa, es importante recalcar que pasar con éxito el validador de Adobe Acrobat asegura cierto nivel de accesibilidad, pero hay muchos requisitos que no puede evaluar, y solo una revisión manual permitirá comprobar que es efectivamente accesible.

Por ello, para comprobar la accesibilidad de un PDF se debe:

  • Pasar el validador de accesibilidad de Adobe Acrobat XI Pro
  • Se debe verificar manualmente la accesibilidad y acceder al documento con un lector de pantalla.

También existen otros validadores, para mi gusto menos fiables, como:

Recomendaciones para enlazar correctamente el PDF desde nuestra web

Por último unas recomendaciones para enlazar correctamente el PDF desde la web:

  • Indica claramente que el enlace es a un fichero PDF y si se va abrir en una ventana nueva o si se va a descargar.
  • No lo embebas en la página o incluye también su descarga. No todas las ayudas técnicas soportan que el PDF se abra en el navegador.
  • Indica el tamaño del PDF.
  • Acompáñalo de un resumen de su contenido.
  • Incluye un enlace a un software gratuito que permita visualizar el PDF (por ejemplo Adobe Reader).
  • Haz el PDF en una versión inferior a la última del mercado.
  • Pon un nombre significativo y amigable al fichero.

Artículos relacionados

Servicios PDF accesible

Envíame un email si quieres más información.

Imprescindibles... (1)

80+ AJAX-Solutions For Professional Coding

40+ Tooltips Scripts With AJAX, JavaScript & CSS

Al día en AJAX mediante webéame

Ajax Examples in Action

Noticias... (3)

HP adapta su negocio de impresión a la Web 2.0

jueves, 14 de junio de 2007

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

Este artículo tiene tres páginas: estás en la Página 1 (Introducción y TDT).

Existen diversas posibilidades de que un usuario acabe viendo tu web en una televisión, posibilidades que desde mi punto de vista se pueden dividir en dos tipos:

Este artículo comenta todas estas posibilidades, con mayor profundidad en unos casos que en otros porque hay temas que se merecen artículos independientes.

He estado muchos días documentándome y mis objetivos han ido variando a medida que este monstruo crecía.

Finalmente, el objetivo último ha sido, además de sintetizar esta información de la manera más sencilla posible, concluir una serie de recomendaciones de accesibilidad que sirvan para todas ellas (página 3), puesto que al final todas comparten características comunes: dispositivo de salida la televisión, interacción mediante mando a distancia, etc.

1. TDT interactiva

1.1 Qué es

La Televisión Digital Terrestre (TDT) es una nueva tecnología para difundir señales de televisión, también por el aire como la analógica, que la sustituirá por completo en 2010 (el llamado apagón analógico del 3 de abril de 2010).

En marzo de 2007 la TDT tenía una penetración de mercado del 17,6% y en noviembre de 2006 una cobertura nacional del 80,45 % (Impulsa TDT).

De forma resumida, su funcionamiento es el siguiente:

[...] el sonido y las imágenes de los radiodifusores se digitalizan y convierten en bits de información que posteriormente se transmiten a través del aire desde los centros emisores. Esta señal se recibe desde las antenas de nuestras viviendas para finalmente ser convertida de nuevo en sonido e imágenes por los sintonizadores TDT (descodificadores o televisores integrados) que debemos instalar en nuestras casas.


[En Impulsa TDT]


La digitalización de la señal y el aprovechamiento del ancho de banda permite (además de una mejor calidad de la imagen y el sonido, la emisión en Dolby o en formato cine 16:9) que las televisiones puedan ofrecer nuevas funcionalidades de interactividad a través del mando a distancia del receptor:

  • EPG (Guía electrónica de programación)
  • Teletexto digital
  • Servicios interactivos: juegos, chats, votaciones
  • Subtitulado digital
  • Etc.

Hay distintos tipos de decodificadores (también llamados sintonizador digital de TDT, descodificador o decodificador TDT, STB (Set Top-Box) o “zapper” para los no interactivos) de la señal digital, cuyo uso no deja de ser una fase intermedia hasta que todas las televisiones lleven el chip descodificador integrado.

Para poder acceder a la interactividad es necesario tener un decodificador de gama alta, con el estándar europeo MHP (Multimedia Home Platform), con conexión al canal de retorno (los más comunes son Ethernet, RTC o ADSL) para enviar datos. También los hay con disco duro y con soporte para lector de Smart Cards.

Los equipos con MHP incluyen un pequeño ordenador programable con aplicaciones que se descargan on-line y que en próximas versiones incluirán persistencia. Los que incluyen lector de tarjeta chip podrán permitir servicios interactivos con el DNI electrónico. Para ello es muy importante conectar el canal de retorno a la línea telefónica, lo que rara vez se lleva a cabo.


[En "Todo es electrónico"]

1.2 Desarrollos TDT interactivos

Los servicios MHP se irán implantando progresivamente, según vaya progresando adecuadamente la implantación de la Televisión Digital Terrestre. Esto significa que seguramente comenzarán a ofrecerse después del "apagón analógico", el 3 de abril de 2010. Todo dependerá de la rapidez de implantación de la TDT.


[En "Pixels y Chips"]


En la actualidad, los servicios interactivos que se ofrecen por TDT son desarrollos específicos. Hoy por hoy en España, y que yo sepa, no se puede acceder a la web desde la TDT.

Desde el año pasado cada vez son más los desarrollos que se hacen para TDT.

La Agencia Tributaria ha comenzado este año a prestar ciertos servicios relacionados con la Campaña de la Renta a través de la Televisión Digital Terrestre (TDT) interactiva, como la solicitud a través de este nuevo canal del borrador de la declaración de la Renta tecleando el número de identificación fiscal (NIF) y la cantidad que aparece en la casilla 681 de la declaración del año pasado.

En noviembre de 2006 se celebró en Zaragoza el primer foro sobre Aplicaciones Interactivas en Televisión, en el cual participó el alcalde de Alcazar de San Juan (Ciudad Real), ciudad que a mediados de 2006 se convirtió en el primer municipio de España y el sur de Europa en disponer de servicios interactivos (1):

Entre ellos, destaca la posibilidad de realizar gestiones municipales, reserva de cita para el médico o consulta de servicios del ayuntamiento, y de la Junta de Comunidades de Castilla-La Mancha, banca electrónica (Caja Castilla-La Mancha), televenta o servicios sociales básicos o especializados.


[En Hispavista]

Las entidades bancarias también comienzan a ofrecer servicios financieros por TDT, por ejemplo Caja Navarra a partir de junio de este año:


[…] podrán conocer la posición de sus cuentas, consultar sus saldos y los últimos movimientos, informarse sobre los productos y servicios de Caja Navarra y bucear entre los centenares de proyectos sociales que las asociaciones sin ánimo de lucro han puesto a disposición de los clientes para ser elegidos.

[…] Para interactuar con la entidad bancaria será necesaria el alta en la banca on line o Clavenet y un decodificador de TDT con el sistema @mhp, que incorpora la tecnología necesaria para que la relación entre Caja Navarra y sus clientes sea, ahora también, televisiva.


[En "El mundo financiero"]

La Diputación de Huesca, desde octubre de 2006, también ofrece la “T-Administración”, que permite a los ciudadanos realizar sus gestiones a través de la televisión digital.

Formulario del portal de la Diputación de Huesca para TDT


Se trata de la primera aplicación nacional de gestión con la administración pública a través de la plataforma interactiva de Televisión Digital Terrestre. Cualquier usuario que disponga de un decodificador sobre el estándar MHP (Multimedia Home Platform) podrá acceder a todo el contenido del portal de la Diputación a través del mando a distancia del televisor, consultar información e incluso acceder a servicios interactivos y realizar trámites a través de la TV. […]

La navegación por la página es sumamente sencilla e intuitiva. En la parte superior izquierda aparece el menú con las secciones principales (La Diputación, La provincia, Servicios y Trámites) y que estará siempre accesible con el objetivo de facilitar la navegación a los telespectadores. En la parte inferior se reflejan los botones de colores que se asignan a cada acción: salida de la aplicación, ayuda, navegación a determinada sección y vuelta al inicio de la página.


[En Diputación de Huesca]

1.3 DVB-HTML

Como comentaba, hoy por hoy en España no se puede acceder a la web desde la TDT, es decir, no puedes poner, por ejemplo, http://www.google.com y acceder al buscador, sino que son siempre desarrollos específicos.

El estándar MHP (Multimedia Home Plataform) ha abierto la vía para que los proveedores de servicio puedan proporcionar aplicaciones de TV interactivas que los usuarios descargan y ejecutan en el receptor de TV digital, independientemente de su tecnología y de la red de difusión.

Las especificaciones MHP definen la arquitectura del receptor, los protocolos de transporte y señalización para los canales de difusión e interacción, y los tipos de aplicaciones que pueden ser distribuidas.


MHP 1.1 specifies the Internet Access profile, in which applications can control the basic operations of Open Internet resident clients (Web broswer, e-mail and news client).

To add, and indeed complement the DVB-J application format, MHP 1.1 defined a new optional application type: DVB-HTML

The figure below outlines the basic architecture of MHP 1.1 and the relationship between the DVB-HTML optional application type and the DVB-J application type.


[En mhp.org]

Un terminal MHP va a aceptar determinado tipo de aplicaciones en determinados lenguajes (DVB-J y DVB-HTML) y va incluir una API o conjunto de funciones que las aplicaciones pueden utilizar.

Estas aplicaciones son:

  • DVB-J (Xlet), son aplicaciones programadas en Java (se compilan), que pueden ser descargadas, lanzadas, interrumpidas y destruidas por el usuario desde su receptor de televisión. MHP permite que puedan coexistir múltiples aplicaciones en el receptor.
  • DVB-HTML (Digital Video Broadcast HyperText Markup Language) es un lenguaje declarativo que se interpreta y está basado en estándares de Internet. Se trata de páginas en formato XHTML que son presentadas por el receptor de TV al estilo de lo que realiza un navegador de Internet.

[…] is a standard for allowing digital televisions to access internet content. It is an optional part of the larger MHP1.1 standard of DVB.

The specification is based around a modularized version of XHTML 1.1, and also includes Cascading Style Sheets (CSS) 2.0, Document Object Model (DOM) 2.0, and ECMAScript (also known as JavaScript).


[En Wikipedia]

La extensión de estos documentos es .html y su cabecera:

<!DOCTYPE html PUBLIC "-//DVB//DTD XHTML DVB-HTML 1.0//EN" "http://www.dvb.org/mhp/dtd/dvbhtml-1-0.dtd">

En 2002, Nionex lanzó el primer navegador DVB-HTML del mundo para MHP (Multimedia Home Platform): Pontegra.

El proyecto STB-DVB-MHP (2004) de la Universidad de Vigo trabaja también en un navegador web para TDT, entre cuyos objetivos están los siguientes:

  • Gestión de formularios.
  • Ejecución de applets y JavaScript.
  • Permitir la integración de plug-ins.
  • Servir de aplicación soporte a documentos DVB-HTML.
  • Cumplir la norma MHP 1.1 en los puntos que afectan a los clientes de acceso a Internet.

Podemos hablar también de Ortikon Ace Browser:


ORTIKON ACE® Browser is a compact MHP-based DVB-HTML browser application (total size, zipped ~260 kB), and it runs on any STB supporting MHP-version 1.0.2 or later.

Ortikon ACE Publisher es la herramienta de creación de contenidos y Ortikon ACE Browser Emulator el emulador para PC:



ORTIKON ACE Browser Emulator is a PC application for quick, easy and efficient content production. It can be used for previewing purposes in the PC content authoring environment simultaneously with designing. The tool is a WYSIWYG application. So the DTV display screen will be exactly the same as that of the designer's PC. The content will be transferable directly from PC to DTV. With the virtual remote controller the designer tests the technical functioning and usability of the content.

[Ortokon Interactive Ltd]

ORTIKON ACE Browser Emulator

En digitv.ortikon.com puedes ver páginas de ejemplo teniendo en cuenta que:

These pages are optimized for ORTIKON ACE® DVB-HTML Browser. Because DVB-HTML is the format for digital-TV they use some features not used in PC world (such as MPEG2 I-frame backgrounds), and thus the layout does not look as they were originally designed on PC. By watching these pages with PC browsers you anyhow get the idea what features our current DVB-HTML Browser support.

Opera también soporta DVB-HTML, anunciando en 2006 que:

Opera Software today announces that Telsey Telecommunications, a leading manufacturer of IP set-top boxes, has selected the Opera browser once again to provide full-featured Internet browsing on the company's WAVES set-top boxes.

[En opera.com]

Puedes ampliar información sobre DVB-HTML en las direcciones que incluyo en el apartado de referencias.

1.4 Consideraciones de usabilidad y accesibilidad

Me hace gracia este comentario:

[...] la potencialidad del TDT como medio para navegar por Internet se ve recortada por el hecho de que muchos contenidos no están adaptados para los televisores, por lo que no se visualizan correctamente.

[En noticiasdot.com]

... vaya, eso me suena en contextos más habituales y cotidianos...

Como todavía no se puede acceder a la web desde la TDT, no vamos a poder validar nuestra páginas en este entorno, lo mejor que podemos hacer es como siempre acatar los estándares y cumplir con las Pautas de Accesibilidad de la WAI, y te aconsejo que seguir mis conclusiones y recomendaciones finales.

Si te hayas involucrado en uno de los desarrollos específicos para TDT interactiva, evidentemente sí que podrás y deberás validar la usabilidad y accesibilidad del servicio. Pero esto ya sería motivo de un artículo diferente. Os dejo aquí unos pantallazas del portal de la Diputación de Huesca para TDT, que a mi parecer reflejan un buen hacer en este sentido.

Diputacion de Huesca en TDT: Página principal

Diputacion de Huesca en TDT: Formulario desplegado

Diputacion de Huesca en TDT: Contenido interior  

[En León Ciudad Digital]

Referencias

"Infraestructuras para servicios multimedia" de Telefónica
Amplia descripción de todas las tecnologías implicadas en el desarrollo de las comunicaciones multimedia. Muy recomendable.
"Tecnologías y actividades de estandarización para la interconexión de Home Networks" de Fundación AUNA
Descripción de tecnologías para middleware, software y pasarelas residenciales.
Impulsa TDT
Portal de la Asociación para la Implantación y el Desarrollo de la Televisión Digital Terrestre en España.
Sintonizador Digital TDT
Guía fácil divulgativa sobre la TDT.
mhp.org
MHP: especificaciones, foros, noticias, países donde se está adoptado, etc.
"MHP" en Televisión Digital
Descripción del estándar MHP.
Sistema de Recepción Digital Multimedia
Portal del Proyecto STB-DVB-MHP del Departamento de Ingeniería Telemática de la Universidad de Vigo.
Documentación de Sistemas de Imagen del GPI-RV de la Universidad de Vigo

Artículos sobre DVB, MHP, TDT, etc.

"Decodificadores TDT con MHP y lector de tarjeta chip" de Todo es electrónico
Artículo de marzo de 2007 sobre los distintos decodificadores. Incluye lista de modelos de TDT con MHP y tarjeta chip.
"DVB-HTML" de Pablo Cesar
Breve presentación de DVB-HTML en diapositivas.
DVB-HTML Applications
Buena introducción a DVB-HTML que incluye mención a los "triggers".
"DVB-HTML an optional declarative language within MHP 1.1" de Philippe Perrot
Buena introducción a DVB-HTML.
"Guidelines for creating DVB-HTML Content" de Ortikon
Extenso manual de DVB-HTML ejemplificado con las páginas de ejemplo de digitv.ortikon.coma
"Companies working with MHP" en Interactive TV Web
Listado de herramientas de autor, aplicaciones, decodificadores, servicios, etc.

NOTAS

(1) Aunque es curiosa la opinión de los vecinos sobre el tema.

Este artículo tiene tres páginas: estás en la Página 1 (Introducción y TDT).

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

Este artículo tiene tres páginas: estás en la Página 2 (Televisión como dispositivo de salida).



2. Televisión como dispositivo de salida

2.1 Ordenador personal o portátil


Puedes utilizar tu televisión a modo de monitor conectándola a un PC o portátil.


Desde el punto de usabilidad y accesibilidad esta posibilidad no supone ninguna consideración especial, salvo advertir, como haré en las conclusiones y recomendaciones finales, que la resolución y las características de imagen de una televisión no son iguales que las de un monitor, pero esto es algo que siempre debemos tener en cuenta, puesto que nuestra web también puede ser visualizada desde muchos tipos de monitores, resoluciones, profundidad de color o dispositivos cuya resolución y calidad de imagen puede diferir de la de un monitor (teléfono móvil, una PDA, etc). 


2.2 Media Center


Al hablar de Media Center lo habitual es hablar de Windows Media Center, por ser el más extendido, pero no es el único, se suman a la “guerra por el salón”: LinuxMCE, XBMC (Xbox Media Center), Apple TV, etc.


Windows Media Center es un sistema operativo de Microsoft que viene instalado en el PC:



El Windows Media Center está ideado especialmente para los nuevos ordenadores HTPC (Home Theater PCs). Estos tienen aspecto de componentes de un equipo de alta fidelidad o de cine en casa, pero realmente son PCs más o menos potentes camuflados en cajas de sobremesa, y que gozan habitualmente de periféricos como sintonizadores de TV, de radio, etc...

[En Duiops]


y que está pensado para el ocio y entretenimiento digital:



Windows media center es la iniciativa de Microsoft para la convergencia de todo el ocio de nuestra casa en un único dispositivo. Media center es un programa que integra el control de la televisión, imágenes, vídeo, audio, radio, etc. Sus principales fortalezas salen a la luz combinando dicho software con un dispositivo hardware diseñado para, en nuestro salón, hacer de sustitutivo de la televisión, la mini cadena, el vídeo, los álbumes de fotos, etc.

[…] Es un detalle positivo el hecho de que sea manejable con un único mando.


[En "Convergencia de dispositivos eléctricos domésticos con elementos tecnológicos y capacidades e-business" de Álvaro García y Guillermo Tejera]


Efectivamente, desde una misma pantalla se puede controlar todo, y en lugar de ratón, se usa un mando a distancia.

Mando a distancia Windows Media Center

Teclado Windows Media Center


-Mando a distancia y teclado oficiales de Windows Media Center-

Es el sistema que se distribuye con la mitad de los equipos informáticos que se venden en España y su público objetivo será 4 millones en 2 años y 7 millones y medio para el 2010.


El navegador por supuesto es Explorer (6 o 7 según versión XP o Vista).


Se están desarrollando servicios específicos para Windows Media Center, por ejemplo Caja Madrid:



La multinacional Microsoft y la entidad financiera Caja Madrid han puesto en marcha un portal de servicios bancarios a través de la televisión pionero en el mundo, que permitirá a los clientes de la entidad financiera acceder, desde sus hogares con total seguridad y a través de un mando a distancia, a un completo menú para realizar las operaciones más habituales como consulta de saldo y tarjetas, extracto de movimientos, recarga de teléfonos móviles y transferencias, entre otros servicios.

Gracias a la facilidad de uso y la alta seguridad que proporciona el sistema operativo Windows Media Center, Caja Madrid amplía la oferta multicanal para sus clientes eliminando la complejidad añadida, sin contraseñas ni nombres de usuario adicionales, e integrándola con los otros servicios de Oficinas, Banca Telefónica, Banca por Internet, Banca a través del Móvil, Cajeros y Comercios.



[En "Microsoft y Caja Madrid crean el primer servicio bancario a través de la televisión del mundo" en cibersur.com]

 


2.3 Consolas


El tema de las consolas se merece un artículo aparte, sólo comentar brevemente en relación con el tema que nos ocupa:


 

Play Station de Sony


Tanto con PS2 como con PS3 se puede navegar por Internet.


El User-Agent que las identifica es: User-Agent Mozilla/4.00 [en] (PS2-PTV 1.1) Interactor 2.2 y Mozilla/4.0 (PS3 (PlayStation 3); 1.00)


Aunque hay que tener en cuenta:


"The PlayStation 3 uses a version of the NetFront browser by Access Co. as its internal web browser. It is the same browser used in the PSP (Sony-branded NetFront 2.81) with the same interface, menus and virtual keyboard. Its user agent string is cloaked, falsely reporting as Mozilla/5.0 (PLAYSTATION 3; 1.00)."

[En Wikipedia]


En "Playstation 3 Browser Specs" en Design 215 podemos ver resumidos los diferentes problemas de este navegador:

  • Framesets and iframes are not supported. The browser will attempt to open some framesets in separate windows but the results are less than desirable. This is bad news for people who use hidden iframes for their Web 2.0 apps.
  • CSS2 seems well supported and Standards compliant pages look good, especially if they are XHTML 1.0.
  • Javascript is somewhat supported but there doesn't seem to be any AJAX support.
  • Certain events are missing (as they would be on mobile devices) like "onkeydown" and so on.
  • Using "for(x in y){...}" to loop through the properties of a Javascript object doesn't work but you can test for the existence of individual properties.
  • Dynamically loading external Javascript files after the page has loaded doesn't seem to work. More bad news for Web 2.0 apps.
  • When using the on-screen keypad, the browser will add a space after each word. It does this on password fields as well, which can cause a bit of frustration if you don't remove the extra space at the end before you try to log in. I discovered this trying to log in to Gmail.

Múltiples ventanas en el navegador de PS3



Sin embargo, al contrario que con otros dispositivos, se pueden abrir diferentes ventanas.



Si quieres ampliar información sobre el navegador puedes consultar la Guía de usuario que incluye muchas imágenes; o bien ver este vídeo de youtube.com acerca de la navegación web con PS3.




PSP (PlayStation Portatil) de Sony


Puedes utilizar la PSP para conectarte a Internet o bien conectarte mediante la PS3 y navegar desde la televisión.


El User-Agent que la identifica es: User-Agent Mozilla/4.0 (PSP (PlayStation Portable); 2.00

PSP conectada a Internet

 


[En el blog de Fon]

Como la PSP usa un formato 16:9 es muy probable que no veas las páginas como sueles hacerlo con tu PC, por ello:



Para solucionar esto la PSP tiene la opción de cambiar el modo de visualización de las WEBs para ello pulsa Triángulo cuando estés navegando, accede al menú Ver, y podrás elegir entre tres modos.

1 – Normal: No hace ajustes, así que para ver toda la página tendrás que desplazarte continuamente

2 – Autoajuste: Encaja el ancho de la página a la pantalla de la PSP como si fuera en el PC

3 – Ajuste inteligente: Reorganiza la página para que se muestre primero el texto y luego las imágenes



[En Guías Trucos y Juegos PSP]

Nintendo Wii


Incluye Opera 9 para navegar por Internet, el User-Agent que la identifica es: User-Agent Opera/9.00 (Nintendo Wii; U; ; 1038-58; Wii Shop Channel/1.0; en)


[...] desde Nintendo se ha asegurado que se va a apurar al máximo el control de la navegación con el mando inalámbrico de Wii, que mediante giroscopios y un puerto infrarrojo permite situar un puntero en la pantalla y desplazarlo cómodamente.

[En "Consolas de videojuegos para navegar Internet" de Federico Guzman

El navegador usa una pantalla virtual de 800 píxeles de ancho y una altura entre 376 y 660 píxeles, sacando barras de scroll es caso de necesitarlas. También se puede hacer zoom en las páginas.


Si quieres conocer todos los detalle del Opera 9 de Nintendo Wii, puedes leer "Making Wii-friendly pages" de Mark 'Tarquin'.


Los principales problemas que se encuentran sus usuarios al navegar son:


  • las webs son difíciles de ver con el zoom por defecto
  • en las páginas diseñadas para visualizarse con una resolución superior a 800 píxeles tienes que ir escrolando de lado a lado
  • el tamaño de fuente con el que se trabaja para su visualización en un monitor no se renderizan bien en la pantalla de la televisión

Como curiosidad, existe un plugin (WordPress Wii Edition Plugin) que reconoce que accedes mediante la Wii y renderiza automáticamente tu blog a una versión optimizada: con los colores de la Wii y a un tamaño de fuente adecuado para la visualizarse desde la televisión.


Por supuesto no es necesario que nadie se instale un plugin para ver bien nuestra web, como explicaré en las conclusiones, bastará con que preparemos una CSS especial para la visualización de nuestras páginas desde la televisión.


 


xBox 360 de Microsoft


Cuenta con un buen servicio en línea, pero no con un navegador web.



 


Referencias

Windows Vista Media Center

Presentación de Windows Vista Media Center en el portal de Windows.

Windows XP Media Center

Presentación de Windows XP Media Center en el portal de Windows.

"Windows XP Media Center Edition 2005" en casadomo.com

Presentación divulgativa de Windows XP Media Center Edition 2005.

Apple TV

Web oficial de Apple TV.

"Consolas de videojuegos para navegar Internet" de Federico Guzmán

El artículo está muy bien pero hay que tener en cuenta que es de junio de 2006.

Playstation 3 User's Guide

Web oficial del Internet Browser de PS3.

"Playstation 3 Browser Specs" Design 215

Descripción de las características del navegador de la PS3 y resumen de sus principales problemas.

"PS3 Web Browser" en YouTube.com

Vídeo acerca de la navegación web en PS3.


PlayStation 3

Entrada muy completa en la Wikipedia.

"Web design guide for Opera Browser on Wii" en wiinintendo.net

Artículo acerca de cómo diseñar para Nintendo Wii.


Making Wii-friendly pages

El mejor artículo sobre las particularidad de la navegación web en Nintendo Wii.


Wii Opera browser is OUT!

Características de Opera 9 para Nintendo Wii.


 


Este artículo tiene tres páginas: estás en la Página 2 (Televisión como dispositivo de salida).


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 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).

Paquete de instalación de WebTV

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:

Google en MSN TV

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:

Google en MSN TV Viewer tras mi revisión 


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

Portal de RTVE en Explorer 6 
-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. Comienzo de la página principal

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:

Combinación de colores que se han de evitar



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 según tipo de televisión
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.



 


Referencias

MSN TV


Web oficial de WebTV.


MSN TV (developers)


Web oficial para desarrolladores de WebTV.


WebTV


En la Wikipedia viene una amplia entrada con casi todo lo que debes saber sobre WebTV.


"WebTV lleva Internet al salón de su casa" en el Diario del navegante


Un artículo para el recuerdo, es de noviembre de 1997...


"Developing TV Applications using Internet Technology" en W3C


Artículo del año 2000 del "W3C Workshop on Web Device Independent Authoring".


 


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


miércoles, 13 de junio de 2007

Noticias ... (2)

Claves en vena
En Japón ya se usa el patrón de la palma como identificador, que probará "la Caixa" ...

Jakob Nielsen critica que con la Web 2.0 se ha dejado de lado al diseño

 

Noticias... (1)

Apple lanza versión para Windows de su explorador de Internet Safari

Safari para Windows, reventado en dos horas

 


 

viernes, 8 de junio de 2007

Sabías que ... (2)

... existe una extensión para Firefox llamada User-Agent Switcher?

Permite cambiar el User-Agent con que se identifica Firefox y resulta muy útil para realizar pruebas.

Sabías que ... (1)

... existe una forma rápida y cómoda de aumentar o disminuir el tamaño de letra del navegador?

Pulsa "control+rueda del ratón".

Entrevista para el Periódico de Aragón

Daniel Torres Burriel quiso saber algo más de mí: Entrevista en el Periódico de Aragón