Accesibilidad y nuevas tecnologias web

Transcript Accesibilidad y nuevas tecnologias web

Accesibilidad y nuevas
tecnologías multimedia+web
Fabio Arciniegas
Postgraphy * Washington D.C.
SIDAR 2002
Contenido
Introducción
Objetivos
SMIL 1.0
– 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>

<meta name="copyright" content="yourOrganization" />
<layout>

</layout>
</head>
<body>

</body>
</smil>
SMIL - Areas
SMIL - Preview
Open Listing3-titlesAndNames.smil
(realplayer)
<?xml version="1.0"?>
<smil >
<head>
<layout>
<root-layout width="380" height="262"
background-color="white"/>
SMIL - Areas
<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"/>

<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">

</form>
<form id="secondPromise">

</form>
<form id="thirdPromise">

</form>

</vxml>
VoiceXML - Elementos
<?xml version="1.0"?>
<vxml>
<form id="firstPromise">

</form>
<form id="secondPromise">

</form>
<form id="thirdPromise">

</form>

</vxml>
VoiceXML - Elementos
<?xml version="1.0"?>
<vxml>
<form id="firstPromise">
<field name="promise">


</field>
</form>

</vxml>
VoiceXML - Elementos
<?xml version="1.0"?>
<vxml>
<form id="firstPromise">
<field name="promise">


</field>
</form>

</vxml>
VoiceXML - Elementos
<?xml version="1.0"?>
<vxml>
<form id="firstPromise">
<field name="promise">
<prompt>
<audio src="fightclub1.wav"/>
</prompt>

</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]
[dtmf-1 ok]
[(oh)? yes]
[(oh)? sure]
[yeah]
[dtmf-2 no]
{<option "yes">}
{<option "yes">}
{<option "yes">}
{<option "yes">}
{<option "yes">}
{<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:
[email protected]
Fabio Arciniegas
Postgraphy
Washington, D.C.
SIDAR 2002

Accesibilidad y nuevas tecnologias web

Transcript Accesibilidad y nuevas tecnologias web

Directory