Octubre, 2016

Universidad Tecnológica Nacional.

Diplomatura en Accesibilidad y Usabilidad

Multimedia Sin Barreras, por Maria Dolores García Fernández

Multimedia Sin Barreras

Objetivos

Que los asistentes puedan:
- Conocer las normativas vigentes:
  - Convención sobre los derechos de las Personas con Discapacidad (Ley 26.378/2008)
  - Aspectos legales en Argentina, Ley 26653/2010.
  - Concepto de comunicación según CPDPcD
  - Concepto de Ajustes razonables CPDPcD
- Valorar sobre los elementos multimediales que componen el mensaje.
- Reflexionar sobre distintas consideraciones teóricas a la hora de incrustar un video en una pagina Web
  - Inclusión directa de un video en una pagina web
  - Inclusión de un video mediante un reproductor Flash
  - Incluir un video de youtube o vimeo
  - Limitaciones de (X)HTML
- Experimentar las bondades y limitaciones de incrustar un video con HTML 5
- Analizar las técnicas de diseño y construcción indicadas en las normativas para facilitar la comunicación del lenguaje audiovisual :
  - La Audiodescripción (AD)
  - El Subtitulado oculto (CC)
  - La Lengua de Señas(LSA)
- Reflexionar sobre
  - la problemática de la implementación de los mencionados métodos alternativos de comunicación.
  - Requisitos para que los elementos multimediales sean accesibles
  - Cómo insertar estos contenidos en la Web y validar el código fuente.

Imagen que sugiere diseño multimedia

Sobre nosotros y nuestro entorno

"Hemos modificado tanto nuestro entorno, que ahora debemos modificarnos a nosotros mismos para exisitir dentro de este nuevo entorno."

Norbert Wiender.

Frase extraída del libro digital: "La accesibilidad y el diseño universal entendido por todos. De cómo Stephen Hawking, viajó por el espacio."

Impacto Multimedia

impacto de la multimedia en el diseño web

La comunicación multimedia es un recurso muy útil por que en poco espacio pademos ofrecer mucha información. Esto impacta en distintos aspectos, tales como:

Diseño
- Organización del diseño
- Distribución de la información
Comunicación de contenidos
- Ofrecer a la información en formatos Alternativos que favorezcan la eliminación de barreras en la comunicación.
Programación
- Cumplir con Reglas Internacionales de Diseño Web (W3C)
Aspectos políticos- Sociales
- Las reglas se expresan en Leyes Nacionales para su cumplimiento(Convención sobre los derechos de las Personas con Discapacidad, Ley Nacional 26.378 y Ley de acceso a la información de las páginas Web, Ley 26653/2010

Concepto y elementos que intervienen en el mensaje multimedial

Multimedia refiere a cualquier objeto o sistema que utiliza múltiples medios de expresión(físicos o digitales) para presentar o para comunicar determinada información.

Elementos que componen el mensaje multimedial

Texto
Imagen
Sonido
Animaciones
Video
Interactividad

Multimedia y las Pautas WAI

Elementos para la comunicación y las Pautas WAI

Elementos multimedia según las pautas WAI

Imágenes y Animaciones: Usar texto alternativo (atributo alt) para describir la función de los elementos visuales.
Mapas de Imagen
Gráficos de datos
Enlaces e hipertexto
Organización de las páginas
Scripts applets y plug-ins: Ofrecer alternativas accesibles en el caso de que las características activas no sean accesibles o no tengan apoyo.
- Ejemplo de Carrusel (realizado con CSS)
- Ejemplo funciones de Ariel Flesler (realizado con Javascript no intrusivo)
Audio:Facilitar subtítulos y transcripción de los ficheros de sonido.
Video: Audio descripción, transcripción, subtítulos, lengua de señas.

Elementos para acceder y comprender a la información sin barreras

Video y su versión transcripta del mismo.

Subtitulado:

Son textos que se emplean como sustitutos de la banda sonora, para personas con deficiencias auditivas.

Audio descripción:

Es la banda sonora que se utiliza para que las personas con dificultades visuales, puedan compensar lo que no ven, recibiendo una adecuada información sonora que la traduce o explica.

Transcripción de la banda sonora:

Versión escrita de la Audio descripción y del Subtitulado.

Lengua de Señas:

Esta forma de expresión permite que sordos puedan establecer un canal de comunicación con su entorno social.

Multimedia y Accesibilidad web

Niveles de cumplimiento

Niveles de cumplimiento según las pautas WAI

Subtitulado:

Son textos que se emplean como sustitutos de la banda sonora, para personas con deficiencias auditivas. AA

Audio descripción:

Es la banda sonora que se utiliza para que las personas con dificultades visuales, puedan compensar lo que no ven, recibiendo una adecuada información sonora que la traduce o explica. AA

Transcripción de la banda sonora:

Versión escrita de la Audio descripción y del Subtitulado. A

Lengua de Señas:

Esta forma de expresión permite que sordos puedan establecer un canal de comunicación con su entorno social.AAA

Ejemplo de transcripción de la banda sonora

La opción a la transcripción también debe ser accesible, sea esta en html, como en formato .doc o .pdf

Ejemplo 1:

Información ofrecida en video y transcripta de la banda sonora: http://www3.uah.es/caracciolos/index.php/caracciolos/article/view/20

contenido en dos formatos, en este caso un video y la transcripción del mismo

Ejemplo 2:

¿Cómo hacer un Doumento digital accesible? http://www.youtube.com/watch?v=q7TVcpmRACM

Subtitulos.

Independientemente de que un vídeo pregrabado posea equivalencia textual, es necesario proporcionar un equivalente sincronizado (subtítulos) a la banda sonora.

Ejemplo de Video y su transcripción.

Subtitulado
- Pregrabado
  - Formato abierto
  - Formato Cerrado
- Tiempo Real

El subtitulado incluye todos los contenidos sonoros, tanto los diálogos como los sonidos ambientales y todo sonido significativo necesario para comprender el contenido multimedia.
Si el contenido multimedia tiene varias pistas de audio en diferentes idiomas entonces se deberían proporcionar subtítulos para todos los idiomas usados.
Los contenidos incluidos en los subtítulos se deberán corresponder con los contenidos en el propio vídeo.
La fuente utilizada en los mismos no debe causar problemas de legibilidad a ningún usuario. Así, se recomienda emplear texto amarillo, verde o cian sobre fondo negro, con un tipo de fuente convencional y un tamaño que permita su lectura sin dificultad en un monitor de tamaño medio.
Los tiempos de entrada de los subtítulos se deberán corresponder correctamente con la pista de audio.
Los vídeos dispondrán de un mecanismo de activación/desactivación de subtítulos, opción recomendable en este tipo de elementos.

Ejemplo:Acceso a Ejemplos y descarga del reproductor CCPlayer

Bibliografía: Sobre Office de Windows accesible, sutitulado y audiodescripción, ver la pagina del CeSya

Audio descripción.

Ilustración de una secuencia de la pelicula, La ruta natural.

Audio Descripción
- Pregrabado
  - Formato abierto
  - Formato Cerrado
- Tiempo Real

Cuando se trasmite información importante en la banda visual de un vídeo pregrabado, es necesario incluir una descripción auditiva (también llamada audio descripción) adecuada de la escena.

De forma similar a los subtítulos, las descripciones auditivas están sincronizadas con la banda visual y, en este caso, son útiles para que las personas con discapacidad visual puedan seguir la acción y la información no auditiva de los vídeos. Es decir, de lo que se ve en las imágenes.

La descripción auditiva es una narración con información sobre los elementos visuales clave presentes en el vídeo como los escenarios, acciones, lenguaje corporal, gráficos y texto mostrado en pantalla y, en general, todo el contenido visual relevante.

A continuación se ofrece el mismo video en dos versiones una sin audiodescripción y otra con subtitulado sin audiodescripción:

La ruta natural, divaD, corto (Audiodescripto)

La ruta natural, divaD, corto con subtitulado

¿Cómo incrustar un video en una Web?

Video Youtube

Otro ejemplo de código de cómo se inserta el video con el reproductor Youtube

Descarga del código en formato texto para incrustar un video youtube con etiqueta IFRAME

código de como incrustar el video de Youtube en nuestra Web

Presentación en Slideshare:

código de como incrustar el video de Youtube en nuestra Web

Código de ejemplo Código para incrustar un slideshare

Ver ejemplo en linea: http://www.desarrollosdg.com.ar/dolores_sitio/portfolio.php

Ejemplo de código de cómo se incrusta el video en una página Web con HTML5

Probar ejemplo: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video

Código para incrustar un video con html5

Incrustación de un video con Código HTML5 y la propiedad autoplay

Probar ejemplo: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_autoplay

Código para incrustar un video con html5 con autoplay

Ejemplo 1: Incrustación de un video con Código HTML5 y javascript

Probar ejemplo: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_js_prop

Código para incrustar un video con html5 con javascript

Ejemplo 2:Incrustación de un video con Código HTML5 y javascript

Probar ejemplo: http://ncamftp.wgbh.org/ibm/dvs/sintel-clip.html

Ejemplo 2: Código para incrustar un video con html5 con javascript

Ejemplo 3:Incrustación de un video con Código HTML5 y javascript

Probar ejemplo 3:http://ableplayer.github.io/ableplayer/demos/youtube.html

Ejemplo 3: Código para incrustar un video con html5 con javascript

Este ejemplo utiliza el reproductor de YouTube, pero con los controles del Able Player. Si los elementos se utilizan para los títulos o subtítulos, éstos tienen prioridad sobre los subtítulos de YouTube. De lo contrario, los títulos y subtítulos de YouTube se utilizan si está disponible.

La ventaja de usar los subtítulos locales es que se pueden utilizar para construir una transcripción interactiva y buscar dentro de videos.

Actualmente YouTube no expone datos de subtítulo específicos a través de su API por lo que estas funciones no son posibles con los subtítulos de YouTube solo. Además, un atributo Poster puede ser usado para reemplazar la imagen de póster predeterminado de YouTube con una imagen alternativa.

Ejemplo 4:Incrustación de un video con Código HTML5 y javascript

Probar ejemplo 4:http://ableplayer.github.io/ableplayer/demos/video7.html

Ejemplo 3: Código para incrustar un video con html5 con javascript

El atributo data-transcript-src se utiliza para identificar el ID de un contenedor que contiene una transcripción pre-existente codificada manualmente y expresada en html.

Las transcripciones creadas manualmente pueden incluir una mejor estructura general de los automatizados, y pueden incluir marcas HTML adicional más allá de la simple marcado que se genera automáticamente por el Player. Por lo tanto, esta característica ofrece a los autores un mayor control sobre el contenido de sus transcripciones.

Ejemplo 5:Incrustación de un video con Código HTML5 y javascript

Probar ejemplo 5:http://ableplayer.github.io/ableplayer/demos/youtube.html

Ejemplo 5: Código para incrustar un video con html5 con javascript

De lo contrario, los títulos y subtítulos de YouTube se utilizan si está disponible.

La ventaja de usar los subtítulos locales es que se pueden utilizar para construir una transcripción interactiva y buscar dentro de videos.

tipos de archivo

Video: .mp4, .avi
Subtítulos cerrados: .srt
Subtítulos cerrados: .vtt
Audiodescripción cerrada: .mp3

Descripción extendida de audio: .mp3
Descripción textual extendida: .doc, .pdf

Multimedia y la inclusión

Multimedia accesible +
la combinación de archivos que ofrecen formatos alternativos.
Mensaje
Recepción del mensaje
Inclusión

Multimedia y Accesibilidad Web

Bibliografía

Muchas gracias!

María Dolores García Fernández
Mail: garcia.mariad@gmail.com
Sitio Web: www.desarrollosdg.com