Accesibilidad y nuevas tecnologias web by cuiliqing

VIEWS: 11 PAGES: 50

									   Accesibilidad y nuevas
tecnologías multimedia+web

       Fabio Arciniegas
   Postgraphy * Washington D.C.

           SIDAR 2002
               Contenido
               Introducción
               Objetivos
SMIL 1.0
– Tecnología    VoiceXML
                               SMIL 2
– Aplicación    – Tecnología
                               – Tecnología
– Evaluación    – Aplicación
                               – Aplicación
                – Evaluació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)
<?xml version="1.0"?>
<smil >
<head>
<layout>     SMIL - Areas
 <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"
            width="55" height="55"/>
     <!-- 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 - 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"
                     title="Ranking"
                     begin="21"/>
 </par>
</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>
  <form id="thirdPromise">
    <!-- Tyler: promise?. -->
  </form>
   <!--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>
  <form id="thirdPromise">
    <!-- Tyler: promise?. -->
  </form>
   <!--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/>
           </result>
      </filled>
    </field>
 </form>
<!-- ... -->
</vxml>
VoiceXML - Elementos
     <nomatch>
         <audio>I didn't get that</audio>
         <reprompt/>
      </nomatch>

      <noinput>
           <audio>What was that?</audio>
           <reprompt/>
     </noinput>

     <default>
        <reprompt/>
     </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>
               <result name="exhausitiva">
              <goto next="javascript:rapida()"/>
            </result>
       </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>
            <reprompt/>
      </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

								
To top