Accesibilidad y nuevas tecnologías multimedia+web Fabio Arciniegas Postgraphy * Washington D.C. SIDAR 2002
Contenido Introducción Objetivos SMIL 1.0 VoiceXML SMIL 2 Tecnología Aplicación Evaluación VoiceXML Tecnología Aplicación Evaluación SMIL 2 Tecnología Aplicación Evaluación
Introducción Historicamente, los grandes avances técnicos y narrativos producen tantas cargas de accesibilidad como opciones. Los nuevos desarrollos XML para mejorar la presentación y narrativa de la web no son la excepción.
Introducción [1] Las posibilidades de XML para definir lenguajes especializados para personas con discapacidades ha sido explorada ampliamente (no suficientemente) en otros trabajos [Martin 01] Seminarios y guias para diseño accesible de contenido tradicional han sido ampliamente difundidos Menos conocidas son las oportunidades de accesibilidad de lenguajes inicialmente diseñados para fines estéticos y multimedia
Objetivos Introducir las tecnologías: SMIL 1.0, VoiceXML y SMIL 2 Estudiar con casos reales su aplicabilidad como herramientas de accesibilidad Evaluar su relevancia en el marco general de calidad de desarrollo (costos, extensibilidad, etc.)
SMIL – Inspiración SMIL (Synchronized Multimedia Integration Language) nace de la necesidad de crear contenido modularizado multimedia para la web En su version mas sencilla, SMIL es un lenguaje de definicion de areas y secuencias
SMIL – Inspiración
SMIL - Estructura <?xml version="1.0"?> <head> <!-- Additional constructs such as the meta tag (as in HTML) are allowed here --> <meta name="copyright" content="yourOrganization" /> <layout> <!-- Layout Definition Elements --> </layout> </head> <body> <!-- Media and Synchronization Elements --> </body> </smil>
SMIL - Areas
SMIL - Preview Open Listing3-titlesAndNames.smil (realplayer)
SMIL - Areas <?xml version="1.0"?> <smil > <head> <layout> <root-layout width="380" height="262" background-color="white"/> <region id="advertisement" left="21" top="19" width="55" height="55"/> <region id="title" left="95" top="19" width="40%" height="20%"/> <region id="genInfo" right="21" top="19" <!-- note the addition of the z-index attribute, allowing layering --> <region id="main" left="22" top="94" width="334" height="128" z-index="1"/> <region id="statistics" left="38" top="127" width="95" height="95" z-index="2"/> <region id="subtitles" left="77" top="206" width="60%" height="35" z-index="3"/> </layout> </head><body>... SMIL - Areas
SMIL - Contenido <body> <seq> <par dur="60"> <video src="martina.rm" region="main-left" title="Martina Hingis"/> <text src="martina-ranking.txt" region="main-right" title="Ranking" begin="20"/> </par> <par dur="60" begin="2"> <img src="anna.jpg" region="main-left" title="Anna Kournikova"/> <text src="anna-ranking.txt" region="main-right" begin="21"/> </seq> </body>
SMIL – Inspiración para problemas de accesibilidad Los problemas visuales de accesibiliddad son variados y usualmente conflictivos (tamaño/forma/color vs. Area original, posicion) La produccion de videos alternativos con anotaciones es costosa (en tiempo, recursos) e inflexible
SMIL – Usos Reales de Accesibilidad La anotación dinamica usando areas paralelas en SMIL permite permite la localización y presentación de anotaciones sin precedentes en la industria, a precios de desarrollo y difusión minimos.
SMIL – Usos Reales de Accesibilidad La técnica demonstrada es aplicada en mayor detalle en mi articulo: A Realist’s SMIL Manifesto, disponible en xml.com
VoiceXML - Inspiración VoiceXML esá inspirado en nuevos y viejos mercados: Estamos llegando al limite de “point and grunt” (Engelbart) Anualmente se procesan $500 Billones en transacciones telefónicas en solo US.
VoiceXML - Naturaleza VoiceXML trata tres porciones de la interacción hombre-maquina usando voz: Reproducir audio (pregrabado y TTS) Reconocer voz y DTMF Controlar el flujo de un dialogo
VoiceXML - Estructura Un documento VoiceXML es una colección de formas Cada forma tiene un prompt, y espera del usuario respuestas para llenar parametros.
VoiceXML - Elementos <?xml version="1.0"?> <vxml> <form id="firstPromise"> <!-- Tyler: Ok, listen I can't have you talking to her about me... [Keep asking until user says "yes", "ok", or "I promise", and then move to the next form] --> </form> <form id="secondPromise"> <!-- Tyler: now promise. --> <form id="thirdPromise"> <!-- Tyler: promise?. --> <!--Say: That is three times you promised!--> </vxml>
VoiceXML - Elementos <?xml version="1.0"?> <vxml> <form id="firstPromise"> <!-- Tyler: Ok, listen I can't have you talking to her about me... [Keep asking until user says "yes", "ok", or "I promise", and then move to the next form] --> </form> <form id="secondPromise"> <!-- Tyler: now promise. --> <form id="thirdPromise"> <!-- Tyler: promise?. --> <!--Say: That is three times you promised!--> </vxml>
VoiceXML - Elementos <?xml version="1.0"?> <vxml> <form id="firstPromise"> <field name="promise"> <!-- 1. Prompt --> <!-- 2. Response behavior according with value of the field --> </field> </form> <!-- ... --> </vxml>
VoiceXML - Elementos <?xml version="1.0"?> <vxml> <form id="firstPromise"> <field name="promise"> <!-- 1. Prompt --> <!-- 2. Response behavior according with value of the field --> </field> </form> <!-- ... --> </vxml>
VoiceXML - Elementos <?xml version="1.0"?> <vxml> <form id="firstPromise"> <field name="promise"> <prompt> <audio src="fightclub1.wav"/> </prompt> <!-- 2. Response behavior according with value of the field --> </field> </form> <!-- ... --> </vxml>
VoiceXML - Elementos <?xml version="1.0"?> <vxml> <form id="firstPromise"> <field name="promise"> <prompt> <audio src="fightclub1.wav"/> </prompt> <filled> <result name="no"> <audio>That is not correct. Let me ask that again</audio> <reprompt/> </result> </filled> </field> </form> <!-- ... --> </vxml>
VoiceXML - Elementos <?xml version="1.0"?> <vxml> <form id="firstPromise"> <field name="promise"> <prompt> <audio src="fightclub1.wav"/> </prompt> <filled> <result name="yes"> <goto next="#secondPromise"/> </result> <result name="no"> <audio>That is not correct. Let me ask that again</audio> <reprompt/> </filled> </field> </form> <!-- ... --> </vxml>
VoiceXML - Elementos <nomatch> <audio>I didn't get that</audio> <reprompt/> </nomatch> <noinput> <audio>What was that?</audio> </noinput> <default> </default> (abrir fightclub2.wav)
VoiceXML - Gramáticas Una gramática para YES or NO [dtmf-0 yes] {<option "yes">} [dtmf-1 ok] {<option "yes">} [(oh)? yes] {<option "yes">} [(oh)? sure] {<option "yes">} [yeah] {<option "yes">} [dtmf-2 no] {<option "no">}
VoiceXML – Caracterisicas relevantes Mas alla de las ventajas tradicionales de VoiceXML para la industria de IVR, VoiceXML posee ventajas relevantes para nuestro objeto de estudio: Fácil de producir Barato Es naturalmente orientado a dialogos guiados por la máquina, lo cual ha sido probado eficiente y deseable en tareas complejas y problemas de accesibilidad
VoiceXML – Inspiración para problemas de Accesibilidad El paradigma Documento/Paleta es un reto (muchas veces innecesario) para personas con discapacidades El paradigma de dialogos subsecuentes (wizards) es uno de los avances significativos en UI en los ultimos años
VoiceXML – Usos Reales de Accesibilidad Los wizards de aplicaciones en windows estan compuestos por widgets conocidos y predecibles: Check Buttons Radio Buttons Text Fields
VoiceXML – Usos Reales de Accesibilidad Mas aún, dichos widgets tienen una relacion uno a uno con representaciones en un dialogo automatico: Check Buttons - Respuestas Si/No Radio Buttons – Seleccion multiple Text Fields – Respuestas STT altamente estandarizadas (e.g. Fechas)
VoiceXML – Usos Reales de Accesibilidad Mas aún, dichos widgets tienen una relacion uno a uno con representaciones en un dialogo automatico: Check Buttons - Respuestas Si/No Radio Buttons – Seleccion multiple Text Fields – Respuestas STT altamente estandarizadas (e.g. Fechas)
VoiceXML – Usos Reales de Accesibilidad Es posible crear documentos VoiceXML automaticamente a partir de wizards en Windows. Automatica y predeciblemente, cada aplicación de Windows puede ser recompilada para tomar su entrada tradicionalmente o por voz (!)
VoiceXML – Usos Reales de Accesibilidad Por cada paso en el dialog hay una forma Por cada widget en el dialogo hay un prompt y un campo como ha sido descrito previamente
VoiceXML – Usos Reales de Accesibilidad Se convierte en...
VoiceXML – Usos Reales de Accesibilidad <?xml version="1.0"?> <vxml> <form id="buscardisco"> <field name="donde"> <prompt> <audio>Ud. esta a punto de configurar sus folderes favoritos. Diga "todo el disco" para buscar exhaustivamente, o diga "busqueda rapida" para una busqueda mas rapida pero superficial </audio> </prompt> <filled> <result name="exhausitiva"> <goto next="javascript:exaustiva()"/> </result> <goto next="javascript:rapida()"/> </filled> ...
VoiceXML – Usos Reales de Accesibilidad ... <nomatch> <audio>No reconoci su opcion. por favor repitala</audio> <reprompt/> </nomatch> <noinput> <audio>Por favor diga "todo el disco" o "busqueda rapida" </audio> </noinput> </form> <!-- ... --> </vxml>
VoiceXML - Evaluación VoiceXML provee posibilidades de desarrollo accesible en audio sin precedentes, gracias a su: Precio Baja Complejidad Automatización razonablemente compleja (compare la produccion de un sistema Nuance en C a partir de un dialogo con la produccion de un simple archivo VoiceXML)
SMIL 2 - Inspiración SMIL 2 nace de la necesidad de incorporar elementos de secuencia a contenido web tradicional Aunque las ventajas de SMIL 1.0 son notables, la necesidad de alinear la tecnologia con XHTML era obvia si se queria hacer de SMIL 2 una herramienta para las masas
SMIL 2 - Estructura SMIL 2 esta compuesto por 45 modulos, distribuidos en 10 grupos funcionales: Timing Time manipulators Animation Content Control Layout Linking Media Objects Metainformation Structure Transitions
SMIL 2 - Estructura Microsoft implementó en IE 6 + un subconjunto de SMIL 2 llamado HTML+TIME Usando HTML+TIME cualquier atributo de una pagina HTML que tenga dimensiones (un paragrafo, una imagen) puede ser animado declarativamente
SMIL 2 – Elementos (abrir listing1-star.html) <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html xmlns:t ="urn:schemas-microsoft-com:time"> <head> <style> .time {behavior: url(#default#time2);} </style> <?import namespace="t" implementation="#default#time2"> </head> <body> <t:par dur="5"> <t:img src="comeplay.gif"> <t:transitionfilter begin="0" dur="3" type="starWipe" subtype="fivePoint" mode="in" /> </t:par> </body> </html>
SMIL 2 – Elementos (abrir listing4-mondrian.html) Cualquier elemento de HTML con area puede ser animado y secuenciado: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML XMLNS:t ="urn:schemas-microsoft-com:time"> <HEAD> <STYLE> .time {behavior: url(#default#time2);} </STYLE> <?IMPORT namespace="t" implementation="#default#time2"> </HEAD> <BODY> <DIV id="ol1" style="width: 80; height:236; top: 0; left: 0; border-top-width: 35px; border-left-width:0px"></DIV> <t:animateColor targetElement="ol1" attributeName="backgroundColor" from="black" to="#ADA5B5" begin="0" dur="3" fill="hold"/> </BODY> </HTML>
SMIL 2 – Inspiración para problemas de accesibilidad La pantalla no es el mejor recurso para lectura, pero es dinámica (por cada reto...) Las posibilidades de una web que pueda cambiar tamaños, colores, fuentes y estructuras de las paginas dependiendo de los retos de discapacitación del usuario es algo digno de buscar(!) y SMIL 2 puede ser parte elegante de la solución.
SMIL 2 – Usos reales en problemas de discapacidad Producir paginas accesibles con tamaños de letra adecuados y graficas claras no es suficiente. Siempre hemos de encontrar limitaciones de tamaño no previstas y es importante mantener la estructura de la página.
SMIL 2 – Usos reales en problemas de discapacidad Graficas de tamaño variable, a costo razonable son ideales para la producción accesible. Imagine una grafica lo suficientemente inteligente como para hacer Zoom cuando ud se acerca a la pantalla porque no puede ver bien un detalle.
SMIL 2 – Usos reales en problemas de discapacidad Mediante la combinación de un headmouse y SMIL 2 es posible: <DIV STYLE="background-color:black; font-family:arial; font-size:14pt; width:240; height:180; overflow-x:hidden; overflow-y:hidden; top: 60; left:200; position: absolute; border-style: dashed; border-color: gray; z-index:1;" id="hola" CLASS="time" ID="oDiv" > <t:img src="lili.jpg" id="oSour" style="width:240; height:180"/> <t:ANIMATE id="oAnim" begin="6" dur="4" fill="hold" targetElement="oSour" attributeName="marginLeft" calcMode="linear" values="0; -734" keyTimes="0; 1"/> <t:ANIMATE id="oAnim2" begin="6" dur="4" fill="hold" targetElement="oSour" attributeName="marginTop" calcMode="linear" values="0; -726" keyTimes="0; 1" /> <t:ANIMATE id="oAnim3" begin="6" dur="2" fill="hold" targetElement="oSour" attributeName="width" calcMode="linear" values="240; 1556" keyTimes="0; 1" /> </DIV> *abrir zoom2rose.html*
SMIL 2 – Usos reales en problemas de discapacidad La estrategia descrita (SMIL 2) es explicada en mayor detalle en mi articulo SMIL Manifesto II. A partir de IE 6, cualquier elemento en HTML puede ser animado con SMIL 2 en la manera que animamos colores y tamaños. Esto abre importantes posibilidades de accesibilidad a la web, como fue demostrado.
Futuros Pasos Esta presentación tan solo toca tres de los muchos aspectos en la aplicación de estrategias innovadoras para accesibilidad en multimedia/web y aspira tan solo a generar conciencia de las posibilidades y curiosidad para mayor investigación. Mas información: accessibility@postgraphy.com
Fabio Arciniegas Postgraphy Washington, D.C. SIDAR 2002