Tesis1 Aguilera Garcia - Rios Fuentes

Captulo 1
UNIVERSIDAD VERACRUZANA
FACULTAD DE ESTADSTICA E
INFORMTICA
TTULO:
Diseo de interfaz como apoyo para alumnos con discapacidad
visual que cursen la Experiencia Educativa de Computacin Bsica
en la Universidad Veracruzana
MODALIDAD:
Trabajo Prctico-Educativo
QUE PARA OBTENER EL GRADO DE:

Licenciado en Informtica
PRESENTA:
Shaguree Lubaggi Cuspinera
DIRECTOR:
M.C.C. Alfonso Snchez Orea
CO-DIRECTOR:
Dra. Mara Dolores Vargas Cerdn
XALAPA, VER. ENERO 2

Captulo 6
Contenido
1.1 ANTECEDENTES ........................................................................................................................ 2
1.2 PLANTEAMIENTO DEL PROBLEMA................................................................................................ 2
1.3 OBJETIVOS ............................................................................................................................... 3
1.3.1 General .......................................................................................................................... 3
1.3.2 Especficos .................................................................................................................... 3
1.4 JUSTIFICACIN.......................................................................................................................... 3
1.5 ALCANCES Y LIMITACIONES ........................................................................................................ 4
2.1 CARACTERSTICAS DE LAS PERSONAS CON DISCAPACIDAD VISUAL ............................................... 0
2.1.1 Definiciones de discapacidad y discapacidad visual ..................................................... 0
2.1.2 Clasificacin de funcin visual ....................................................................................... 0
2.1.3 Dificultades de las personas con discapacidad visual y algunas soluciones ................ 1
2.2 TIFLOTECNOLOGA TECNOLOGA EXISTENTE ............................................................................ 2
2.2.1 Lectores de pantalla ...................................................................................................... 3
2.2.2 Halconix ......................................................................................................................... 3
2.3 DISEO CENTRADO EN EL USUARIO ............................................................................................ 5
2.3.1 Usabilidad ...................................................................................................................... 6
2.4 METODOLOGA DE DESARROLLO Y DISEO MULTIMEDIA ............................................................... 7
2.4.1 Anlisis ........................................................................................................................... 8
2.4.2 Diseo educativo .............................................................................................................. 8
2.4.3 Diseo interactivo ............................................................................................................ 9
2.4.4 Desarrollo ..................................................................................................................... 10
2.4.5 Produccin .................................................................................................................... 10
2.4.6 Implementacin y evaluacin .......................................................................................... 10
2.5 REA DE FORMACIN BSICA GENERAL (AFBG) ....................................................................... 11
2.5.1 Computacin bsica ....................................................................................................... 12
2.5.2 Procesador de textos ...................................................................................................... 12
2.6 SALA BRAILLE ........................................................................................................................ 13
CAPTULO 3 MINIJUEGO DE ORIENTACIN ............................................................................. 0
3.1 ANLISIS DE REQUERIMIENTOS ................................................................................................... 0

3.2 DISEO ..................................................................................................................................... 2
3.3 IMPLEMENTACIN...................................................................................................................... 3
3.3.1 Versin 1.0 (preliminar) ................................................................................................... 4
3.3.2 Versin 1.3 ...................................................................................................................... 4
3.3.3 Versin 1.4 ...................................................................................................................... 7
3.4 PRUEBAS .................................................................................................................................. 8
CAPTULO 4 INTERFAZ FINAL: APLICANDO LA METODOLOGA DE BRIAN BLUM........... 0
4.1 REUNIN DE ARRANQUE ............................................................................................................. 0

4.2 ANLISIS .................................................................................................................................. 0
4.2.1 Del ambiente.................................................................................................................... 0
4.2.2 Del pblico ...................................................................................................................... 1
4.2.3 Del contenido................................................................................................................... 2
4.2.4 Del sistema ...................................................................................................................... 2
4.3 DISEO EDUCATIVO ................................................................................................................... 2
4.3.1 Metas educativas .............................................................................................................. 2
4.3.2 Objetivos de aprendizaje ................................................................................................... 2
4.3.3 Decisiones de contenido.................................................................................................... 3
4.3.4 Modelo cognoscitivo ......................................................................................................... 3
4.3.5 Prototipo de papel ............................................................................................................ 3
VI
Captulo 1
4.4 ACTIVIDADES DE APRENDIZAJE ................................................................................................... 6

4.5 DISEO INTERACTIVO................................................................................................................. 7
4.5.1 Requerimientos funcionales............................................................................................... 7
4.5.2 Metfora y paradigmas ..................................................................................................... 8
4.5.3 Diseo de interfaz ............................................................................................................ 9
4.5.4 Mapa de navegacin....................................................................................................... 15
4.5.5 Pantallas de esquema ..................................................................................................... 15
4.6 DESARROLLO .......................................................................................................................... 17
4.6.1 Guiones ......................................................................................................................... 17
4.7 PRODUCCIN ........................................................................................................................... 32
4.7.1 De audio y video ............................................................................................................ 32
4.7.2 Integracin .................................................................................................................... 33
4.8 IMPLEMENTACIN Y EVALUACIN ............................................................................................. 33
CAPTULO 5 RESULTADOS ........................................................................................................... 0
5.1 ARCHIVOS GENERADOS (Y GUARDADOS) AL FINALIZAR LAS PRUEBAS.............................................. 0

5.2 CUESTIONARIO POSTERIOR ......................................................................................................... 0
5.3 OBSERVACIONES ....................................................................................................................... 6
CAPTULO 6 CONCLUSIONES ...................................................................................................... 0
6.1 DEL MINIJUEGO ......................................................................................................................... 0

6.2 DE LA INTERFAZ DEL SISTEMA FINAL ........................................................................................... 0
6.3 DE LAS METODOLOGAS DE DESARROLLO DE SOFTWARE ................................................................ 1
6.4 GENERALES .............................................................................................................................. 1
6.5 TRABAJOS FUTUROS ................................................................................................................... 1
REFERENCIAS BIBLIOGRFICAS .................................................................................................. 2
Resumen
Las personas con discapacidad visual se han enfrentado a una barrera social debido a diversas
dificultades que se presentan cuando otras personas intentan comunicarse con ellos. Con la
actual bsqueda por la inclusin e integracin de estas personas, se han desarrollado diversas
herramientas tecnolgicas. El uso de la computadora ha ido adquiriendo cada vez mayor
importancia en la vida diaria, por esta razn se les ha enseado a las personas con
discapacidad visual a utilizarla por medio del teclado. Con este trabajo se propone generar
un paradigma alterno al uso nico del teclado: la utilizacin del ratn como medio de
navegacin. Si bien el objetivo principal de este trabajo est enfocado al desarrollo de
competencias para la Experiencia Educativa (EE) de Computacin Bsica impartida en la
Universidad Veracruzana (UV), su utilidad se puede extender a cualquier rea educativa que
requiera el uso de la computadora.
VII
Captulo 1
Palabras clave: Discapacidad visual, Tiflotecnologa, Inclusin, Educacin, Computacin,

Ratn.
VIII
Captulo 6
Captulo 1 Introduccin
Desde tiempo atrs se ha buscado la equidad en la raza humana para un mayor y mejor
crecimiento social, lo cual ha llevado al desarrollo de gran cantidad de herramientas y
tecnologa enfocadas a la inclusin de personas marginadas a crculos sociales y a la sociedad
en general.
En cuanto a personas invidentes o con discapacidad visual, ha surgido un problema en el
mbito educativo, pues an falta desarrollar y aplicar herramientas que permitan una
preparacin adecuada de los estudiantes en esas condiciones para as brindarles las mismas
oportunidades laborales que a las personas que no presentan dicha discapacidad.
En este primer captulo se mencionan algunos antecedentes estadsticos en cuanto a la
poblacin con discapacidad visual y se describen el propsito y las caractersticas generales
de este trabajo.
El captulo dos nos coloca en el contexto que manejaremos a lo largo del documento,
involucrando las caractersticas de las personas con discapacidad visual (PDV), el diseo de
interfaces centrado en el usuario, los pasos de la metodologa de desarrollo y diseo
multimedia, los alcances del rea de Formacin Bsica General en la Universidad
Veracruzana, la tecnologa existente para asistir a PDV y una breve descripcin de lo que es
la Sala Braille (sede de las pruebas realizadas para esta investigacin).
El tercer captulo explica el desarrollo del minijuego de orientacin como un til
complemento de la interfaz final.
En el captulo cuarto se detalla la aplicacin de la Metodologa de desarrollo y diseo
multimedia para la elaboracin del sistema.
Posteriormente, en el quinto captulo, se presentan los resultados obtenidos con las pruebas
y los cuestionarios.
Por ltimo se encuentran algunas conclusiones generadas, abarcando diferentes aspectos a lo
largo del desarrollo de este trabajo y de la aplicacin final.
1
Captulo 6
1.1 Antecedentes
En el censo poblacional del INEGI (Instituto Nacional de Estadstica, Geografa e

Informtica) realizado en los Estados Unidos Mexicanos en el ao 2010, se registr que, de
la poblacin total de Mxico (111,960,139 personas), 1,561,466 (1.39%) presentaban
discapacidad visual severa en el pas (incluyendo personas que an con anteojos tenan
dificultad para ver), de los cuales el 10.95% presentaban dicha discapacidad de nacimiento,
42.06% por enfermedad, 7.12% por accidente, 25.94% por edad avanzada y el resto por
alguna otra causa (o por causa no especificada).
Del total de personas con discapacidad (5,739,270), 23.5% corresponde a jvenes entre 15 y
29 aos, rango en el que se encuentra la mayora de los estudiantes universitarios. En cuanto
al nivel de instruccin posterior a los 15 aos, 25% no contaban con instruccin alguna,
59.7% con estudios de nivel bsico (primaria, secundaria), 8.3% de nivel medio superior
(preparatoria, bachillerato) y solamente el 6.2% con algn estudio de nivel superior
(licenciatura, posgrado).
Se registr tambin que el 68.2% de personas con discapacidad visual en Mxico no se
encontraba econmicamente activa.
De estos datos estadsticos se desata una enorme preocupacin al notar que es minsculo el
porcentaje de personas con discapacidad visual que culminan con satisfaccin sus estudios
debido a factores sociales, econmicos, etc. y sumamente alto el porcentaje de personas que
no se encuentran econmicamente activas.
1.2 Planteamiento del problema
La Universidad Veracruzana, actualmente comenz a implementar un programa de inclusin

para las personas con alguna discapacidad, sin embargo, an no existe un sistema formal que
permita llevarla a cabo. En algunos casos, se han modificado o adaptado las instalaciones
fsicas para facilitar la movilidad para las personas con algn tipo de discapacidad motriz.
Cuando una persona con discapacidad visual que haya ingresado en alguno de los programas
educativos que ofrece la Universidad Veracruzana desea cursar la experiencia educativa (EE)
de computacin bsica (obligatoria), se encuentra con diversas dificultades:
2
Captulo 6
- El profesor no est capacitado en el manejo de personas con esta discapacidad.

- El plan de estudios no hace mencin acerca de algn procedimiento para la
explicacin de los temas para personas con discapacidad visual.
- No existe un programa institucional de capacitacin de estas competencias para el
alumno con discapacidad visual.
- No existe software especializado en el desarrollo de actividades de la EE.
Todas estas dificultades impiden una verdadera inclusin e integracin de los alumnos con
discapacidad visual al cursar una EE como computacin bsica.
1.3 Objetivos
1.3.1 General
- Disear una interfaz que permita a personas con discapacidad visual desarrollar las
competencias de computacin bsica (procesador de textos) necesarias para
desenvolverse en un entorno escolar y laboral.
1.3.2 Especficos
- Conocer las habilidades cognitivas de las personas con discapacidad visual.

- Incluir una capacitacin en el manejo del ratn para agudizar la ubicacin en un
espacio.
- Agilizar el desarrollo de habilidades bsicas de manejo de un procesador de textos.
- Proporcionar una herramienta que permita alcanzar las competencias necesarias de la
EE de Computacin Bsica de la Universidad Veracruzana.
1.4 Justificacin
Con la actual tendencia educativa y laboral hacia un enfoque por competencias, los
universitarios requieren egresar con los conocimientos, las habilidades y las actitudes
adecuadas para obtener cierto puesto.
3
Captulo 6
El uso de las computadoras como apoyo escolar y laboral se ha vuelto algo indispensable hoy
en da, por lo que se necesita que cada vez ms gente pueda utilizarla con facilidad.
Con este trabajo se pretenden disminuir las dificultades a las que se suelen enfrentar las
personas con discapacidad visual al aprender y utilizar una de las herramientas ms
importantes en la vida diaria: el procesador de textos.
1.5 Alcances y limitaciones
El sistema est enfocado al apoyo en las actividades del programa educativo de computacin
bsica de la Universidad Veracruzana relacionadas con el manejo de un procesador de textos
(en este caso particular, Microsoft Word 2010).
El medio principal de navegacin para la interfaz desarrollada es el ratn, aunque se utilizar
el teclado para la captura de texto.
El usuario principal hacia el que se dirige el sistema es el universitario de entre 18 y 30 aos
que presente discapacidad visual.
Actualmente, para un ptimo funcionamiento de la aplicacin, se requiere utilizar el
navegador Google Chrome y ajustar la resolucin de la pantalla a un ancho mnimo de 1024
y un alto fijo de 768.
4
Captulo 6
Captulo 2 Marco terico

2.1 Caractersticas de las personas con discapacidad visual
Todos hemos escuchado distintos trminos utilizados para referirse a personas con
discapacidad visual, muchas veces desconociendo los trminos oficialmente aceptados o su
definicin.
2.1.1 Definiciones de discapacidad y discapacidad visual
En el diccionario de la Real Academia Espaola (RAE), se define discapacitado como una

persona que padece una disminucin fsica, sensorial o psquica que la incapacita total o
parcialmente para el trabajo o para otras tareas ordinarias de la vida.
En la Clasificacin Internacional del Funcionamiento, de la Discapacidad y de la Salud (CIF)
(Organizacin Mundial de la Salud, 2014), se plantea la discapacidad como un trmino
genrico que incluye dficits, limitaciones en la actividad y restricciones en la participacin.
Para el INEGI, discapacidad es un trmino que comprende las deficiencias en las estructuras
y funciones del cuerpo humano, las limitaciones en la capacidad personal para llevar a cabo
tareas bsicas de la vida diaria y las restricciones en la participacin social que experimenta
el individuo.
Tomando como base estas definiciones, podemos puntualizar la discapacidad visual como
la deficiencia o limitacin de la vista que implique una restriccin de la participacin de un
individuo en actividades ordinarias.
2.1.2 Clasificacin de funcin visual
En un artculo de la Organizacin Mundial de la Salud (2014), se divide la funcin visual en

cuatro niveles:
- Visin normal.
- Discapacidad visual moderada (baja visin).
0
Captulo 6
- Discapacidad visual grave (baja visin).

- Ceguera.
Este trabajo se enfocar principalmente en el sector con ceguera, pero sin dejar a un lado a
las personas con baja visin.
2.1.3 Dificultades de las personas con discapacidad visual y algunas soluciones
La gua Educacin Inclusiva. Personas con Discapacidad Visual, elaborada en el Instituto

de Tecnologas Educativas (ITE), menciona algunas de las complicaciones que se presentan
en las PDV, entre las que se destacan las siguientes:
- Dificultad para recibir la informacin del entorno.- Al requerir, generalmente, la
utilizacin combinada de los otros sentidos, puede tomarle a la persona ms tiempo
el recibir cierta informacin.
- Dificultad para aprender por imitacin.
- Utilizacin de verbalismos1 o ecolalias2.
- Posible atencin dispersa.
- Deficiencia de habilidades sociales no verbales (como expresiones faciales).
Para combatir los obstculos anteriores, la gua sugiere algunos puntos que se deben trabajar
con la PDV:
- Aprendizaje de conductas adaptativas (y conductas sociales no verbales).
- Estimulacin auditiva (tanto para aprendizaje acadmico como para conocer
elementos presentes en su entorno).
- Estimulacin del sentido del gusto y del olfato (identificar y discriminar sensaciones
olfativas y gustativas).
- Estimulacin visual (en su caso, para aprovechar al mximo cualquier resto visual).
1 Definicin de la RAE: Verbalismo.- Propensin a fundar el razonamiento ms en las palabras que

en los conceptos.
2 Definicin de la RAE: Ecolalia.- Perturbacin del lenguaje que consiste en repetir [el enfermo]
involuntariamente una palabra o frase que acaba de pronunciar l mismo u otra persona en su
presencia.
1
Captulo 6
- Estimulacin psicomotora.
- Adecuacin de ritmos de aprendizaje (evitando su exclusin de un grupo).
- Programas especficos de tcnicas de orientacin y movilidad (para aumentar su
autonoma y autoestima).
- Adecuacin del entorno a las necesidades educativas y sociales del alumno
(ubicacin del alumno en el aula, ayudas pticas y no pticas, entre otros).
Subrayo este ltimo punto debido a que en muchas ocasiones es omitido. El asignarle un
espacio (y una computadora, en el contexto de este trabajo) especfico, cerca del profesor,
permite que el alumno pueda llegar a su lugar de manera independiente y que sienta la
confianza de contar con el profesor cerca de l.
Cabe hacer mencin de que la persona con discapacidad visual no desarrolla ms los dems
sentidos forzosamente. Eso es logrado por la necesidad que se presenta y la prctica de la
utilizacin de ellos, lo cual es fundamental para un desarrollo acadmico adecuado.
Cada sentido genera en una persona imgenes mentales y sensoriales. Si bien las ms
utilizadas por las personas sin discapacidad visual son precisamente las creadas por ese
sentido, esto nos muestra que las PDV pueden ocupar las imgenes construidas por el resto
de sentidos.
Para el caso del odo, la gua del ITE puntualiza que el alumno con discapacidad visual debe
procesar la informacin auditiva mediante:
- Atencin.- Determinar que hay un sonido.
- Identificacin.- Reconocer qu sonido est escuchando.
- Discriminacin.- Distinguir un sonido de otro.
- Localizacin.- Identificar la procedencia de un sonido.
- Seguimiento.- Desplazarse hacia la fuente de un sonido.
2.2 Tiflotecnologa Tecnologa existente
El Diccionario de la Real Academia Espaola define la Tiflotecnologa como el estudio de

la adaptacin de procedimientos y tcnicas para su utilizacin por los ciegos.
2
Captulo 6
En la actualidad existe una gran cantidad de herramientas que facilitan el acceso a la

informacin, por ejemplo, de una computadora. Una de las ms importantes es el lector de
pantalla.
2.2.1 Lectores de pantalla
Entre los lectores de pantalla de escritorio ms utilizados destacan dos: JAWS y NVDA.
Algunas de las principales diferencias entre ambos son:
- JAWS funciona exclusivamente en sistemas operativos Windows. Si bien esto lo hace
menos portable, tambin le proporciona una mayor velocidad al acceder los recursos
del sistema de manera ms directa. NVDA puede ser utilizado en diversos sistemas
operativos.
- NVDA en ocasiones no lee todos los elementos de pginas web (JAWS suele leer
casi todos), sin embargo, NVDA puede leer algunos elementos de Flash.
- JAWS permite, en general, navegar de manera ms amigable por software de la
paquetera de Microsoft Office, no obstante, NVDA aborda de mejor manera una
variedad de programas distintos, como la calculadora.
- Al ser NVDA de cdigo libre, la comunidad puede crear add-ons (complementos)
para aadirle funciones, pudiendo el usuario descargarlos en cuanto sean liberados.
Para obtener una nueva funcionalidad en JAWS, se debe esperar a que sea
implementada por los desarrolladores del programa mismo, para despus comprarla
junto con una nueva versin.
- Uno de los puntos ms importantes recae en el precio. Una licencia de JAWS tiene
un costo aproximado de 1,000 dlares, mientras que NVDA es un lector de pantalla
gratuito.
2.2.2 Halconix
Uno de los esfuerzos ms importantes realizados en la Universidad Veracruzana en pro de

las personas con discapacidad visual es el sistema Halconix, comenzado en el 2010 como
3
Captulo 6
proyecto de tesis y presentado en el 2012 por la Licenciada en Informtica Lizbeth Yesenia

Contreras Rivas.
Halconix es una distribucin del sistema operativo LINUX basada en Debian. Las
herramientas y programas que utiliza giran en torno al concepto de software libre. Entre
algunas de las principales herramientas que utiliza para auxiliar a las PDV se encuentran:
- Orca.- Funciona como lector de pantalla para aplicaciones que soportan AT-SPI
(herramientas de accesibilidad de GNU/Linux). Utiliza el sintetizador de voz
espeak por defecto. Tambin se aprovecha de Orca el magnificador de pantalla,
programa para ampliar los caracteres y configurar algunos de sus atributos (como el
color).
- xZoom.- Otro magnificador de pantalla.
- Britty.- Programa que, en conjunto con Orca, provee soporte braille.
- Mozilla Firefox.- Uno de los navegadores web ms utilizados que permite la descarga
de complementos generados por otros desarrolladores. Halconix utiliza la extensin
Theme Font & Size Changer para ajustar el tamao y tipo de letra del navegador.
Tambin se emplea el complemento Big Buttons para ampliar el tamao de los
botones para personas con baja visin.
- Paquetera OpenOffice.- Compatible con Orca.
- Atajos de teclado para facilitar la utilizacin de la interfaz y el acceso a las
aplicaciones.
Posteriormente, en el 2013, el L.I. Francisco Snchez Vsquez, desarroll la segunda versin
de Halconix, implementando varios elementos como:
- La tecla Windows como Gnome Shell (funciones para lanzar aplicaciones,
cambiar de ventana, etc).
- Complemento WebVisum para el navegador Mozilla Firefox, aadiendo diversas
particularidades que facilitan la navegacin de las PDV, buscando que sean cada vez
ms independientes.
- Diversos editores: de texto, Gedit; web, BlueFish; de diapositivas, MagicPoint. Estos
programas brindaron ms opciones para los desarrolladores con discapacidad visual.
- Software para quemado de discos Brasero.
4
Captulo 6
- Rhythmbox, como reproductor multimedia.

- Pidgin, para mensajera instantnea.
2.3 Diseo centrado en el usuario
Una definicin del diseo centrado en el usuario (DCU) (Human-centered design) se puede
encontrar en el estndar ISO 13407:
Human-centered design is characterised by: the active involvement of users and a
clear understanding of user and task requirements; an appropriate allocation of
function between users and technology; the iteration of design solutions; multi-
disciplinary design.
Este concepto abarca el involucrar al usuario y entender sus necesidades de manera que se
puedan implementar soluciones tecnolgicas de acuerdo a dichos requerimientos. El estndar
tambin propone dividir el proceso del diseo centrado en el usuario en cuatro fases (Hassan-
Montero, Y.; Ortega-Santamara, S.; 2009) (ver figura 1):
- Entender y especificar el contexto de uso: Identificar a las personas a las que se dirige
el producto, para qu lo usarn y en qu condiciones.
- Especificar requisitos: Identificar los objetivos del usuario y del proveedor del
producto debern satisfacerse.
- Producir soluciones de diseo: Esta fase se puede subdividir en diferentes etapas
secuenciales, desde las primeras soluciones conceptuales hasta la solucin final de
diseo.
- Evaluacin: Es la fase ms importante del proceso, en la que se validan las soluciones
de diseo (el sistema satisface los requisitos) o por el contrario se detectan problemas
de usabilidad, normalmente a travs de test con usuarios.
5
Captulo 6
Fig. 1 - Proceso del Diseo centrado en el usuario (tomado de http://www.nosolousabilidad.com/manual/3.htm)
Algunos autores dividen el DCU solamente en tres etapas principales, englobando las dos
primeras etapas de la clasificacin anterior en una sola:
- Conocer a los usuarios finales a fondo.
- Disear un producto que se ajuste a sus capacidades, motivaciones y expectativas y
resuelva sus necesidades.
- Probar el producto diseado.
El Test de usuarios mencionado pretende contestar las preguntas:
- Qu? Los puntos principales que sern probados por los usuarios.
- Cmo? La manera en la que sern probados (qu herramientas se necesitarn, por
ejemplo).
- Cundo? Las pruebas deben llevarse a cabo durante el proceso de desarrollo para
detectar errores o posibles mejoras a tiempo y reducir la probabilidad de que se
generen correcciones costosas (en tiempo, dinero y esfuerzo) al final.
2.3.1 Usabilidad
Si bien la palabra usabilidad no existe en el diccionario de la Real Academia Espaola,

podemos encontrar algunas definiciones que nos acercan a su entendimiento.
6
Captulo 6
Una de ellas (estndar ISO 9241-11) es:

The extent to which a product can be used by specified users to achieve specified
goals with effectiveness, efficiency and satisfaction in a specified context of use.
Es decir, el cmo un producto puede ser usado para satisfacer necesidades especficas de los
usuarios con efectividad y eficiencia.
En Definicin.de (Prez Porto, J.; Merino, M.; 2013) se conceptualiza la usabilidad como
una referencia a la facilidad con que un usuario puede utilizar una herramienta fabricada por
otras personas con el fin de alcanzar un cierto objetivo.
Jakob Nielsen (2014) menciona cinco principales variables o aspectos de calidad que deben
ser evaluados para identificar si una interfaz es usable o no:
- Facilidad de aprendizaje.- Consiste en que el usuario pueda conocer en poco tiempo
la herramienta o producto (en este caso, la interfaz) y realizar tareas bsicas con ella.
- Eficiencia.- Una vez que el usuario conoce la interfaz, deber poder realizar tareas
complejas cada vez ms rpido.
- Facilidad de ser recordado.- Despus de no utilizar la interfaz por un tiempo, el
usuario debe poder retomar con prontitud la eficiencia que haba sido alcanzada.
- Baja incidencia de errores (eficacia).- Un error es una accin que no logra la meta
propuesta. Se debe buscar que el usuario pueda desempear tareas cometiendo la
menor cantidad de errores. Tambin deben poder deshacerse con facilidad los errores
cometidos.
- Satisfaccin.- Se pretende que la utilizacin de la interfaz sea para el usuario una
experiencia agradable y sencilla (cubriendo sus necesidades).
2.4 Metodologa de desarrollo y diseo multimedia
Esta metodologa fue elaborada por Brian Blum en 1993 y se enfoca en productos multimedia
en un ambiente educativo. Consta de cinco etapas principales (anlisis, diseo educativo,
diseo interactivo, desarrollo y produccin), complementadas con diversos elementos
(reunin de arranque, actividades de aprendizaje e implementacin y evaluacin).
7
Captulo 6
2.4.1 Anlisis
Permite detectar y organizar informacin fundamental de la situacin actual, las necesidades,

los usuarios y las exigencias del proyecto en general. Se deben tomar en cuenta diferentes
tipos de anlisis:
- Del ambiente.- Se requiere conocer el contexto de la situacin que se desea abordar,
es decir, la ubicacin geogrfica, el nivel socioeconmico existente, los medios de
comunicacin y tecnologa en general con la que se dispone.
- Del pblico.- Abarca las caractersticas generales de los usuarios de destino,
incluyendo su edad, nivel educativo, cultura, etc.
- Del contenido.- Consiste en definir lo que se desea obtener y/o la informacin que
ser presentada con la utilizacin del producto final.
- Del sistema.- Se identifica el hardware y software necesario para el desarrollo del
sistema. Puede incluir sistema operativo, lenguaje de programacin, dispositivos de
entrada y/o salida, entre otros.
2.4.2 Diseo educativo
El enfoque educativo de la metodologa de Brian Blum hace que esta sea una de las fases
ms importantes durante el desarrollo de un proyecto multimedia y aborda diversos puntos
especficos que al integrarse forman la esencia de un producto educativo.
- Metas educativas.- Definen lo que se pretende que aprendan los usuarios con el apoyo
del sistema.
- Objetivos de aprendizaje.- Se detalla el propsito, lo que ser capaz de realizar el
usuario, los medios para conseguirlo y los beneficios.
- Decisiones de contenido.- Concretar qu material es necesario presentar en el sistema
y descartar elementos de los que se pueda prescindir.
- Modelo cognoscitivo.- Se selecciona el o los modelos adecuados que puedan ayudar
a obtener los resultados deseados dependiendo del perfil de usuario hacia el que est
destinado el sistema.
8
Captulo 6
- Prototipo de papel.- Representa una primera aproximacin visual de la organizacin

de los elementos que se requieren mostrar en cada interfaz.
2.4.3 Diseo interactivo
Como su nombre lo dice, esta etapa se centra en la interaccin del usuario con el sistema o
la manera en la que se involucrar con los diversos elementos de la aplicacin, es decir, cmo
los ver, seleccionar, escuchar, etc.
- Requerimientos funcionales.- En este punto se describen las especificaciones tcnicas
requeridas para poder utilizar el producto de manera correcta, por ejemplo el sistema
operativo, los dispositivos de entrada y/o de salida, la memoria RAM, el procesador,
etc.
- Metfora y paradigmas.- Es recomendable comparar elementos del mundo real con
elementos de la aplicacin, de manera que los usuarios puedan familiarizarse con el
sistema con mayor facilidad y comprensin. Se pueden utilizar conos representativos
(por ejemplo, una casa = inicio) o imgenes que la mayora de las personas asocie a
ciertos eventos o acciones.
- Diseo de interfaz.- Una interaccin ptima del usuario con el sistema es un punto
fundamental para el xito de dicha aplicacin, esto se logra dedicando suficiente
tiempo al anlisis y al diseo de la interfaz de usuario. En este paso se elaboran las
distintas vistas del sistema y se describe a rasgos generales lo que se har en cada
una.
- Mapa de navegacin.- Es una representacin jerrquica-lineal de la relacin que
existir entre las diferentes vistas de la aplicacin, es decir, a qu secciones puede
llevar cada vista (y viceversa).
- Pantallas de esquema.- Consiste en describir la estructura y organizacin visual de las
diversas reas de cada vista o ventana.
9
Captulo 6
2.4.4 Desarrollo
En la metodologa de Brian Blum, el desarrollo se enfoca en la realizacin de guiones para

representar la interaccin deseada del usuario con el sistema.
- Guiones.- Se elaboran tablas que describan elementos multimedia esenciales de cada
pantalla y/o actividad. Cervantes (2015), menciona algunas preguntas que los guiones
deberan responder para cada vista:
o Qu se ve en la pantalla?
o Qu se lee?
o Qu se oye?
o Cmo se mueve el usuario de una a otra pantalla?
Cada pregunta se responde con el nombre de los archivos y su descripcin en la fila
del elemento correspondiente, por ejemplo: Imgenes pato.jpg - Un pato bebiendo
agua en un estanque (Qu se ve en la pantalla?).
2.4.5 Produccin
En esta fase se generan todos los elementos multimedia que se detectaron necesarios en las
etapas anteriores, abarcando audio, video, imgenes y texto.
- Produccin de audio y video.- Este paso comprende tanto la produccin como tal de
los clips de video y de audio como la posproduccin de ellos, es decir, la eliminacin
de defectos y/o la edicin y refinamiento de detalles que no quedaron como se
deseaba al grabarlos.
- Integracin.- Se integran y organizan todos los elementos producidos en el sistema
final.
2.4.6 Implementacin y evaluacin
Para concluir adecuadamente el desarrollo de un sistema se requiere evaluar cada elemento,

tanto en el mbito funcional como en cuanto a la usabilidad de cada interfaz y asegurarse de
10
Captulo 6
que no existan fallas, pues un error del sistema puede ocasionar que un usuario abandone su
utilizacin.
Se deben realizar pruebas tanto por parte del (los) desarrollador(es) como de algunos usuarios
de muestra.
2.5 rea de Formacin Bsica General (AFBG)
El Modelo Educativo Integral y Flexible (MEIF, adoptado actualmente por los programas
educativos de la Universidad Veracruzana) divide las EE de cada programa en cuatro reas:
- De formacin bsica (subdividida en general e iniciacin a la disciplina).
- De formacin disciplinaria.
- De formacin terminal.
- De formacin de eleccin libre.
El rea de Formacin Bsica General est enfocada al desarrollo de las competencias bsicas
(tomadas del enlace http://www.uv.mx/afbg/proposito/) del estudiante aplicables a cualquier
rea del conocimiento, como son:
- Reconocer, analizar y proponer soluciones a problemas.
- Indagar, examinar y utilizar informacin oral y escrita en espaol e ingls.
- Escuchar, hablar, leer y escribir correctamente.
- Trabajar colaborativamente.
- Utilizar eficientemente la tecnologa en diversas actividades.
- Aprender de manera autnoma y autorregulada.
- Analizar y evaluar implicaciones personales, sociales, acadmicas y culturales de sus
decisiones.
El AFBG abarca cinco experiencias educativas:
- Computacin bsica.
- Habilidades de pensamiento crtico y creativo.
- Ingls I.
- Ingls II.
- Lectura y redaccin a travs del anlisis del mundo contemporneo.
11
Captulo 6
2.5.1 Computacin bsica
Computacin bsica es una experiencia educativa (EE) del rea de Formacin Bsica
General (AFBG) dentro de la Universidad Veracruzana. Desde la implementacin del
Modelo Educativo Integral y Flexible (MEIF), se introdujo como EE obligatoria en todas las
licenciaturas disponibles en la universidad debido a la creciente importancia que ha ido
adquiriendo la utilizacin de la computadora tanto en el mbito escolar como laboral.
El contenido del plan de estudios de computacin bsica vigente en la universidad (elaborado
el 23 de junio de 2003 y modificado el 4 de febrero de 2009) para la Licenciatura en
Informtica puede ser encontrado en el apndice 1.
A grandes rasgos, el contenido de la EE abarca lo siguiente:
- Hardware y Software.
- Sistema Operativo (Windows).
- Procesador de textos (Microsoft Word).
- Hoja de clculo (Microsoft Excel).
- Presentacin electrnica (Microsoft Power Point).
2.5.2 Procesador de textos
Dentro de los temas que contempla la seccin de Procesador de textos (una de las
herramientas ms tiles y ms empleadas en la actualidad), se encuentran:
- Elementos principales de la pantalla.
- Archivo.
- Edicin.
- Ver.
- Insertar.
- Formato.
- Herramientas.
12
Captulo 6
- Tablas.
- Ventana.
- Ayuda.
La interfaz desarrollada en este trabajo se enfoc principalmente en uno de los temas
anteriores: el formato. En ella, tambin se muestran los conos del tema de tablas para una
versin futura.
- Formato:
o Fuente.
o Prrafo.
o Numeracin y vietas.
o Sombreado.
- Tablas:
o Insertar tabla.
o Insertar / eliminar celdas.
o Ancho de columna / altura de fila.
o Ordenar datos.
Bordes.
2.6 Sala Braille
La Benemrita Escuela Normal Veracruzana Enrique C. Rbsamen, institucin educativa

de nivel superior de Xalapa, Veracruz, tiene adjunto el Centro de Servicios Bibliotecarios y
de Informtica Jos Mancisidor (figura 2), inaugurado en Enero de 2003.
13
Captulo 6
Fig. 2 Centro de Servicios Bibliotecarios y de Informtica (Jos Mancisidor)
Cuenta con acceso a Internet y seis reas de consulta, entre las que se encuentra la Sala
Braille, que ofrece materiales bibliogrficos, auditivos e informticos (incluyendo una lnea
braille y una impresora braille) para personas con discapacidad visual, y donde
eventualmente son llevados a cabo talleres informativos y de capacitacin.
Dicha sala es atendida desde el 2007 por el Mtro. en Educacin Especial Alejandro Ivn
Castro Orozco (en el turno matutino), quien se encuentra inmerso en la inclusin de personas
con discapacidad visual en el mbito educativo, laboral y social y en la utilizacin de
herramientas tiflotcnicas.
Dentro de los servicios de asesora brindados a los usuarios de la Sala Braille se encuentran:
la enseanza de lecto-escritura en sistema braille, el uso de mquina o teclado virtual en
computadora, el uso de gua lineal para escritura manuscrita, uso de tabla de trazos y la
enseanza de caja aritmtica y baco Cranmer. Tambin fueron realizadas audio grabaciones
y una recopilacin de tutoriales para el uso de aplicaciones tiflotcnicas.
14
Captulo 6
Dichas aplicaciones abarcan: lectores y magnificadores de pantalla, TTS (Text to Speech,

convertidores de texto digital a sonido), transcriptores y teclados virtuales braille, software
de rehabilitacin visual, navegadores parlantes, OCR (reconocedor ptico de caracteres),
juegos tiflomticos, lnea braille, software para enseanza de braille y para aprendizaje /
prctica de mecanografa.
Con asesora del maestro Alejandro Castro fueron realizadas las pruebas de la interfaz
elaborada con algunos usuarios de la Sala Braille, consiguiendo los resultados necesarios
para este trabajo.
15
Captulo 6
Captulo 3 Minijuego de orientacin
3.1 Anlisis de requerimientos
Como primer paso se requiri la elaboracin de una pequea aplicacin que permitiera
observar la interaccin de un usuario con discapacidad visual con la computadora por medio
del ratn. Los elementos necesarios son:
- Una interfaz interactiva que se ajuste al tamao y resolucin de la pantalla.
- Ocho reas principales (los cuatro bordes y las cuatro esquinas).
- Un botn o elemento a buscar.
- Clips de audio para indicar instrucciones y para indicar al usuario cuando pasa por
alguna de las reas o del botn a buscar.
Para obtener todo lo anterior se utiliz el software siguiente:
- Inkscape.- Creacin de los elementos grficos (las reas y el botn).
- Audacity.- Captura y edicin de los clips de audio (se requiri el complemento
Lame para manejo de archivos mp3).
- Adobe Flash CS6.- Integracin de los elementos mencionados en una interfaz
interactiva.
Una vez detectados los requerimientos, se elabor y aplic un cuestionario para conocer el
estado inicial de las personas que probaran el minijuego (ver apndice 2).
Basado en el Lenguaje de Modelado Universal (UML), se gener un pequeo diagrama de
casos de uso del minijuego (ver figura 3) y la descripcin de cada uno de ellos (tabla 1 y
apndice 3).
0
Captulo 6
Fig. 3 Minijuego 1 - Diagrama de casos de uso
Tabla 1 Minijuego - Descripcin de caso de uso "Seleccionar nivel"
CASO DE USO: SELECCIONAR NIVEL

Autor: Shaguree Lubaggi Cuspinera
Fecha: 28/03/16
Descripcin: Persona con discapacidad visual selecciona un nivel (escenario) del
minijuego.
Actores: PDV (Persona con discapacidad visual)
Precondicin:
PDV inicia la aplicacin.
Flujo Normal:
1. Sistema reproduce audio de instrucciones iniciales.
2. PDV mueve el ratn buscando los botones.
3. Al pasar el puntero sobre el botn de algn nivel, sistema reproduce audio indicando qu
nivel es.
4. PDV da clic a un botn de nivel.
Flujo Alternativo:
3.1. Al pasar el puntero sobre el nombre del juego, sistema reproduce audio indicndolo.
Pos condicin:
Nivel elegido se abre.
Sistema reproduce audio de instrucciones del nivel seleccionado.
Para probar la funcionalidad de los casos de uso mostrados, se elabor el siguiente plan de
pruebas (tabla 2 y apndice 4).
1
Captulo 6
Tabla 2 Minijuego - Plan de pruebas de "Seleccionar nivel"
Caso de uso: Seleccionar nivel

Caso Entrada Condiciones de Salida Esperada Condiciones de Salida
Entrada
1.1 Puntero sobre botn del Puntero sobre un Reproduccin de Sistema reproduce audio
nivel 1. botn de nivel. audio. indicando qu nivel es.
1.2 Puntero sobre Puntero sobre el Reproduccin de Sistema reproduce audio
Desactibomba nombre del audio. indicando el nombre del
minijuego. juego.
2.1 Clic en botn del nivel Clic en un botn de Seleccin exitosa Nivel elegido se abre.
2. nivel. de nivel. Sistema reproduce audio
de instrucciones del nivel
seleccionado.
2.2 Clic en rea distinta a Clic en un rea Ninguna. Ninguna.
botn de nivel 1, 2 o 3. distinta a un botn
de nivel.
3.2 Diseo
Se elabor un minijuego sencillo en donde se pudiera implementar lo encontrado en la fase

de anlisis, y para generar un diseo bsico se utiliz la estrategia de prototipado.
Esta estrategia consiste en elaborar una interfaz grfica preliminar de cmo se visualizara el
sistema, la cual se presenta ante el cliente en busca de posibles modificaciones o mejoras.
Se dise en Inkscape un prototipo (no funcional) que ocupara los elementos grficos
mencionados, tomando en cuenta la interaccin requerida con las reas y un botn central
(ver fig. 4).
2
Captulo 6
Fig. 4 Minijuego 2 - Versin preliminar (y nivel 1 de la versin 1.3)
Tambin fue grabada en Audacity (con el complemento Lame) una primera versin de
las instrucciones (buscar el botn central con el ratn y dar clic para desactivar dicho botn).
En esta primera versin an no exista un men principal, ya que solamente se pensaba
realizar un nivel.
3.3 Implementacin
Se elabor en la plataforma Adobe Flash CS6, Desactibomba, un videojuego desarrollado

en ActionScript 2, cuyo objetivo principal es el de analizar la adaptacin de una persona con
discapacidad visual a un espacio por medio del ratn.
3
Captulo 6
El juego consiste en encontrar y desactivar bombas con ayuda de indicaciones auditivas y el

uso del ratn.
3.3.1 Versin 1.0 (preliminar)
Una versin preliminar fue probada con una persona ciega. En esta primera versin se
reproduca un sonido particular cuando el jugador pasaba el ratn sobre un borde, otro cuando
pasaba por una esquina y otro cuando pasaba por la bomba, sin embargo, los sonidos no le
especificaban al usuario en qu borde o esquina estaba. Otro problema detectado fue que el
juego no se ajustaba al 100% de la resolucin de pantalla que tuviera el usuario, por lo que
el usuario poda abandonar el rea de juego sin darse cuenta.
3.3.2 Versin 1.3
Tras algunas versiones con ajustes pequeos, en la versin 1.3, el juego cuenta con un men
inicial y tres niveles: el primero cuenta con una bomba (un crculo a encontrar) en el centro
de la pantalla; en el segundo nivel, hay cuatro bombas localizadas cerca de cada esquina de
la pantalla (las bombas de este nivel son un poco ms pequeas); en el tercer y ltimo nivel
solamente hay una bomba (an ms pequea) colocada aleatoriamente en el rea de juego.
El men de seleccin de nivel (ver fig. 5) posiblemente ser el primer acercamiento del
usuario al uso del ratn. Es una interfaz muy sencilla con 3 botones que ocupan cada uno un
cuarto de la altura de la pantalla y todo el ancho.
4
Captulo 6
Fig. 5 Minijuego 3 - Versin 1.3 - Men inicial
En el primer nivel (ver fig. 4) se pretende que el usuario comience a familiarizarse con la
velocidad de desplazamiento del cursor y a ubicar el rea de juego al escuchar las
notificaciones de los bordes y las esquinas y tener que buscar la bomba en el centro.
En el nivel 2 (fig. 6) se observarn principalmente dos aspectos: la facilidad o dificultad del

jugador al desplazarse entre distintos puntos y su memoria espacial (el recordar qu bombas
ya desactiv y cules le faltan).
5
Captulo 6
Fig. 6 Minijuego 4 - Versin 1.3 - Nivel 2
El objetivo del diseo del tercer y ltimo nivel (fig. 7) es observar la destreza que ha
alcanzado el usuario con el ratn con la experiencia de los niveles anteriores y qu estrategias
de bsqueda utiliza para encontrar una bomba sin proporcionarle instrucciones especficas
de su localizacin.
6
Captulo 6
Fig. 7 Minijuego 5 - Versin 1.3 - Nivel 3
En esta versin, el rea de juego se ajusta al 100% de la pantalla del usuario y el jugador
recibe, por medio de audio, las instrucciones correspondientes antes de cada nivel, es decir,
dnde se encuentra la bomba (a excepcin del tercer nivel) y cmo desactivarla. Durante los
tres niveles del juego hay reas (en cada borde y cada esquina) que anuncian al jugador en
dnde se encuentra el ratn al pasar encima de ellas (izquierda, derecha, arriba, abajo o
esquina), cuando pasa por una bomba y cuando la desactiva (dando clic en ella). En el
segundo nivel tambin se va indicando cuntas bombas quedan de las cuatro iniciales del
nivel.
3.3.3 Versin 1.4
Para esta versin se aument el tamao de la bomba del tercer nivel, sin embargo, las
principales modificaciones se realizaron sobre el audio:
- En el men de seleccin de nivel ahora se reproduce un audio anunciando el nombre
del minijuego al pasar el puntero del ratn sobre l.
7
Captulo 6
- Al pasar el puntero sobre una esquina, ahora se indica qu esquina es especficamente.

- Se edit el balance de los audios para los bordes y las esquinas de los lados izquierdo
y derecho, de manera que se escuchen con mayor intensidad del lado correspondiente.
- Ahora se menciona en qu nivel se encuentra el jugador al iniciar cada nivel.
3.4 Pruebas
Primeramente, se realizaron todas las pruebas descritas de antemano en el plan de pruebas.

Posteriormente, se procedi a que diversas personas con discapacidad visual utilizaran el
minijuego Desactibomba, cronometrando el tiempo que demoraba cada uno para cada
tarea: seleccionar un nivel, desactivar la bomba del nivel 1, desactivar cada bomba del nivel
2 (4 bombas) y desactivar la bomba del nivel 3. Al final se anotaron observaciones
particulares a cada usuario. Se utiliz la tabla 3 para registrar dicha informacin.
Tabla 3 Cronometrado del minijuego
Cronometrado de Desactibomba
Actividad Tiempo Observaciones
Men
Nivel 1
Nivel 2 Bomba 1
Bomba 2
Bomba 3
Bomba 4
Nivel 3
Observaciones generales
En un principio se prob la versin 1.3 del minijuego con tres personas, posteriormente se
utiliz la versin 1.4.
8
Captulo 6
Fig. 8 Pruebas del minijuego 1 - Persona con baja visin
Fig. 9 - Pruebas del minijuego 2 - Persona con ceguera
Las pruebas se llevaron a cabo a lo largo de una semana con varias personas con dos tipos de
usuarios: sin discapacidad visual (con los ojos vendados) y con discapacidad visual,
abarcando el mayor porcentaje los ltimos.
9
Captulo 6
La mayora de las personas que probaron el minijuego acortaron sus tiempos en cada intento,
lo cual muestra que existe un aprendizaje y que iban adquiriendo cierto dominio o destreza
con respecto al uso del ratn.
Un evento a notar en el tercer nivel fue que, en el segundo intento, algunas personas volvan
a buscar la bomba en el rea donde les haba salido en el primer intento (no se les haba
mencionado que cada vez volvera a aparecer de manera aleatoria), lo cual demostr que
pueden utilizar la memoria espacial.
Los resultados obtenidos en esta etapa permitieron realizar algunos ajustes para adaptar el
minijuego al sistema final, como el agregar un botn de Ir a inicio (lleva a la pgina de
inicio del sistema) en la parte superior, generando la versin 1.5 (final) de Desactibomba.
10
Captulo 6
Captulo 4 Interfaz final: Aplicando la metodologa de Brian

Blum
Mientras se trabajaba cada etapa del minijuego, se comenz a utilizar la Metodologa de

desarrollo y diseo multimedia de Brian Blum para la realizacin de la interfaz final.
4.1 Reunin de arranque
Como primer punto, se llev a cabo una reunin con la coordinacin de computacin bsica
(del rea de Formacin Bsica General de la Universidad Veracruzana), donde fue expresada
la necesidad de una solucin ante el problema que representaba impartir clases de dicha
experiencia educativa a un grupo donde se encontraran personas con discapacidad visual.
Posteriormente, mi asesor y yo comenzamos a reunirnos para definir y entender el problema
y todo lo que engloba, pensar posibles respuestas a ello y determinar algunos elementos clave
que contendra la interfaz final. Aqu definimos que dicha interfaz se sustentara en la
utilizacin del ratn como medio de navegacin y el uso de audio.
Conversando con un familiar y con un maestro de la Biblioteca Jos Mancisidor (adjunta a
la Benemrita Escuela Normal Veracruzana Enrique C. Rbsamen) que presentan
discapacidad visual, se notaron algunas necesidades y dificultades ante las que suelen
enfrentarse.
4.2 Anlisis
4.2.1 Del ambiente
El desarrollo y las pruebas estn dirigidas actualmente a la poblacin de Xalapa, Veracruz,

dentro y fuera de la Universidad Veracruzana. Muchas personas cuentan con computadora o
tienen acceso a una. En los centros de cmputo de la universidad, generalmente se cuenta
0
Captulo 6
con computadoras (con ratn y teclado) suficientes para la cantidad de alumnos inscritos a la
experiencia educativa de computacin bsica en cada horario.
Se sugiere que haya un lugar con computadora (siempre el mismo lugar) disponible para cada
persona con discapacidad visual en la primera fila y que se le permitiera pasar antes que el
resto de los alumnos, ya que esto permitira que despus de dar dicha indicacin un par de
veces, el alumno con discapacidad visual pueda llegar y ocupar su lugar todas las clases
restantes de manera independiente (sin necesidad de que el maestro lo gue en ocasiones
posteriores).
Se recomienda que las computadoras que sern utilizadas por cada alumno con discapacidad
visual sean previamente preparadas de la siguiente manera:
- Que se encuentren encendidas y con una sesin iniciada.
- Acomodar el teclado y el ratn de manera que el usuario pueda sentarse
perpendicularmente al escritorio, directamente en frente de los dispositivos de
entrada.
- Iniciar el lector de pantalla.
- Proporcionar audfonos al alumno (o solicitarle que los lleve a clase).
4.2.2 Del pblico
El usuario deseado para este proyecto es la persona con discapacidad visual que se encuentre
en el rango promedio de edad universitaria (17-30 aos aproximadamente), ya que con la
interfaz elaborada se pretende reducir las dificultades y limitaciones a las que se enfrentaran
en la EE de computacin bsica. Para ingresar a la Universidad Veracruzana deben tener
estudios que abarquen por lo menos hasta el ltimo ao de preparatoria o bachillerato, sin
embargo el sistema puede ser utilizado sin la necesidad de tanto conocimiento previo.
Es altamente recomendable que el usuario cuente con experiencia en la utilizacin del teclado
comn para la captura y seleccin de texto.
1
Captulo 6
4.2.3 Del contenido
Se presenta una interfaz accesible con botones que permitan la interaccin necesaria para
realizar prcticas relacionadas con temas del programa de computacin bsica de la UV.
Tambin se utilizar audio para orientar y dar algunas indicaciones a la persona con
discapacidad visual.
4.2.4 Del sistema
Para el desarrollo del sistema se requiri una computadora con ratn y teclado (puede ser de
escritorio o porttil, pero con ratn de dos botones externo). La programacin se realiz en
HTML 5 (lenguaje de marcas de hipertexto), CSS 3 (hojas de estilo en cascada) y Javascript
(en Sublime Text 2) utilizando Windows 7. Tambin se utiliz software editor de grficos
(Inkscape), de audio (Audacity) y de video.
4.3 Diseo educativo
4.3.1 Metas educativas
Se pretende que los usuarios aprendan a utilizar algunos elementos de un procesador de textos
con la ayuda de esta interfaz basada en audio y la instruccin del profesor de computacin
bsica.
4.3.2 Objetivos de aprendizaje
Con el uso del sistema propuesto, el usuario conocer y/o desarrollar su habilidad con el
ratn como medio de navegacin, lo cual le permitir realizar las prcticas de procesador de
textos con una interfaz amigable.
2
Captulo 6
La constante utilizacin del ratn en la interfaz permitir al usuario adquirir una destreza con
l que le facilite la navegacin por distintas interfaces, extendiendo su utilidad ms all del
aprendizaje obtenido para las prcticas de computacin bsica.
4.3.3 Decisiones de contenido
Por practicidad, nicamente se abordar un tema del programa de computacin bsica de la

UV, el de formato, sin embargo tambin se agregarn los botones (desactivados) de la
prctica de tablas para una versin futura. Esto permitir probar y observar la viabilidad del
uso del ratn en una interfaz accesible y evaluar si se debera extender su contenido para
abarcar la totalidad del programa de la EE.
4.3.4 Modelo cognoscitivo
Los programas educativos de la Universidad Veracruzana estn enfocados en un modelo por

competencias, exigiendo que los planes de estudios elaborados le proporcionen a los alumnos
los conocimientos (saber terico), habilidades (saber heurstico) y actitudes (saber
axiolgico) requeridos para dominar los diversos temas del contenido de cada experiencia
educativa (el de computacin bsica se encuentra en el apndice 1).
Si bien este sistema funcionar como una herramienta para un fragmento del plan de estudios
de computacin bsica, el alumno con discapacidad visual podra adquirir una parte de las
competencias de dicha EE con la utilizacin del mismo.
4.3.5 Prototipo de papel
A continuacin, en las figuras 10-13, se presenta un prototipo en papel (versin preliminar

grfica) de la pantalla de inicio y dos pantallas de la interfaz de prcticas.
3
Captulo 6
Fig. 10 Prototipo en papel 1 - Pantalla de inicio
En la imagen anterior (figura 10) se muestran tres botones: el primero para acceder al
minijuego, el segundo para abrir el tutorial de uso de la aplicacin de prcticas y el tercero
para ingresar a la interfaz de prcticas.
Fig. 11 Prototipo en papel 2 - Formato 1
4
Captulo 6
En la figura 11 se observan los botones para la prctica de formato (de izquierda a derecha y
de arriba hacia abajo): Archivo, guardar, fuente, prrafo, numeracin y vietas, sombreado,
prctica de formato, prctica de tablas, ir a inicio y a la derecha dos botones de herramientas
(por ejemplo, audios para que capture el alumno en texto). Hasta abajo se puede apreciar la
barra de informacin donde se indicara en texto el nombre de cada botn.
En la figura siguiente (12) podemos ver desplegadas las opciones del submen Tamao del
men Fuente y cmo se vera reflejado el texto en la barra de informacin (en la parte
inferior).
Fig. 12 Prototipo en papel 3 - Formato 2
En la siguiente imagen (fig. 13) se puede observar que al dar clic en el botn de la prctica
de tablas solamente cambiaran los botones exclusivos de la prctica de formato (fuente,
prrafo, numeracin y vietas, sombreado) por los de tablas (insertar tabla, insertar / eliminar
celdas, ancho de columna / alto de fila, ordenar, bordes).
5
Captulo 6
Fig. 13 Prototipo en papel 4 - Tablas
4.4 Actividades de aprendizaje
Se utilizaron dos actividades similares involucrando el uso del teclado (para captura y
seleccin de texto), el lector de pantalla NVDA (para escuchar el texto
capturado/seleccionado) y el uso del ratn (para navegar por la interfaz y utilizar los botones
de cada men). A continuacin (tabla 4) se describir la mecnica principal de dichas
actividades.
Tabla 4 Actividad de aprendizaje - Aplicar formato a un texto
Elemento Descripcin
Nombre de la actividad Aplicar formato a un texto.
Descripcin El usuario realizar las siguientes actividades:
- Capturar un texto dictado.
- Cambiar la fuente de una palabra.
- Cambiar el estilo (negritas/cursivas) de una palabra.
- Agregar sombreado a una palabra.
- Cambiar la alineacin de una lnea de texto.
- Agregar numeracin/vietas a lneas de texto.
- Guardar un archivo.
- Limpiar el rea de escritura (archivo nuevo).
6
Captulo 6
Duracin Aproximadamente entre 15 y 30 minutos.

Tcnica didctica Se proporcionarn al usuario las instrucciones oralmente antes de
cada actividad mencionada. Se ayudar lo menos posible a los
usuarios para que desarrollen las habilidades necesarias para ir
avanzando de manera independiente en la prctica.
Evaluacin Se tomar el tiempo empleado para completar cada actividad.
Adicionalmente, les ser aplicado un breve cuestionario para
conocer sus opiniones y sensaciones con respecto al uso del ratn
y de la aplicacin en general.
Documentacin didctica Esta actividad fue seleccionada para poner a prueba la realizacin
de algunas de las tareas que demanda el programa educativo de
computacin bsica de la Universidad Veracruzana y para que el
usuario se familiarice con la utilizacin del ratn para buscar
botones o elementos en un rea determinada.
4.5 Diseo interactivo
4.5.1 Requerimientos funcionales
Para el correcto funcionamiento y aprovechamiento de la interfaz desarrollada existen ciertos

requerimientos bsicos:
- El usuario ser una persona con discapacidad visual (orientada por el profesor de la
EE las primeras veces que utilice la interfaz).
- Computadora con monitor (como apoyo para el profesor), teclado y ratn de dos
botones.
- Navegador Google Chrome.
- Se recomienda utilizar el sistema operativo Windows (7 o posterior), ya que es el SO
usado en computacin bsica en la Universidad Veracruzana.
- Ajustar la resolucin del monitor a un ancho mnimo de 1024 y un alto fijo de 768
pixeles.
- Emplear (y preferentemente dominar) un lector de pantalla. Se recomienda NVDA
(gratuito) o JAWS.
- Ingresar a pantalla completa al iniciar la aplicacin (presionando F11).
7
Captulo 6
4.5.2 Metfora y paradigmas
Se utilizaron conos que fueran altamente representativos para cada botn. Si bien el alumno
con discapacidad visual no podr verlos (en caso de ceguera), resultarn tiles para la gua
del profesor.
Tambin se cuenta con una barra inferior donde se muestra la informacin de los botones en
texto.
Para representar el men Archivo se utiliz el cono de una carpeta .
Para el botn de Guardar, el reconocido cono del disquete .
El botn de la Prctica de Formato es indicado con una hoja llena de texto .
Una tabla con celdas combinadas en la parte superior (como encabezado) es el cono
para el botn de la Prctica de Tablas.
El botn que lleva al men de Inicio es representado con una casa .

En cuanto a los botones para la primera prctica (Formato) se utilizaron los siguientes conos.
Un cono con una A y el cursor de escritura se us para representar el botn del men
Fuente.
El cono para el botn de Prrafo es una hoja con un solo prrafo .

Unos puntos representan las vietas, mientras que lneas representan el texto despus de cada
vieta .
El botn de Sombreado se indica con un bote regando pintura sobre una barra .
Para los conos de la segunda prctica (Tablas), se usaron los siguientes.
8
Captulo 6
El mismo cono utilizado en el botn de la prctica se us para Insertar tabla.

Insertar / eliminar celdas es representado por una flecha empujando una fila nueva en
una tabla .
El botn de Ancho de columna / Alto de fila muestra unas lneas midiendo el ancho de dos
columnas .
Una flecha descendente de la A a la Z expresa Ordenar.

Por ltimo, el botn de Bordes se representa con una pequea tabla de 2x2 con el borde
inferior grueso .
Los botones con una bocina indican un ejemplo de audio de un texto.
4.5.3 Diseo de interfaz
La interfaz desarrollada se compone principalmente de un men inicial, el minijuego

Desactibomba desarrollado en Falsh, un tutorial en video de cmo utilizar la interfaz y dos
vistas que comparten elementos (las prcticas de formato y tablas). Estas ltimas tambin se
pueden entender como una sola vista en la que se cambian, agregan o eliminan botones para
ajustarse a cada prctica, ya que la mayora de acciones se realizan a travs de sub-mens.
En general se procuraron evitar los colores rojo y verde, ya que suelen ser los ms
problemticos de identificar para las personas que presentan daltonismo.
En la pantalla de inicio se utiliz un fondo claro y se mantuvo la interfaz lo ms sencilla
posible, con el nombre de la aplicacin (Accetextos) y tres botones: uno para acceder al
minijuego Desactibomba, otro para ver el tutorial y otro para las prcticas.
En una primera versin de la pantalla de inicio (figura 14), los botones se encontraban
distribuidos de manera uniforme horizontalmente.
9
Captulo 6
Fig. 14 Diseo de interfaz 1 - Inicio (versin 1)
Posteriormente (figura 15) se modific la distribucin de los botones colocndolos uno

debajo del otro de manera que cada uno ocupara el ancho total de la pantalla, facilitando el
que los usuarios con discapacidad visual pudieran encontrarlos. Se agreg a cada botn el
texto indicando hacia dnde llevaban. Tambin fue aadida una indicacin de audio para
ingresar a pantalla completa (presionando la tecla F11).
10
Captulo 6
Fig. 15 Diseo de interfaz 2 - Inicio (versin final)
El diseo del minijuego se conserv en su totalidad (ver captulo 3), por lo cual no ser
explicado de nuevo en esta seccin.
11
Captulo 6
Fig. 16 Diseo de interfaz 3 - Tutorial
La vista del tutorial (figura 16) nos muestra un video que explica dnde puede encontrar el
usuario cada men, botn, etc. de la interfaz. Se utiliz un video en vez de usar nicamente
audio para que tambin los profesores (o compaeros sin discapacidad visual) conozcan la
interfaz y puedan ayudar al alumno con discapacidad si lo requiere.
12
Captulo 6
Fig. 17 Diseo de interfaz 4 - Formato 1
La vista anterior (figura 17) muestra los botones correspondientes a la prctica de Formato.
El botn de la prctica activa tiene un fondo amarillo y la prctica inactiva un fondo blanco
(para la descripcin de cada elemento, revisar el prototipo en papel y las metforas y
paradigmas). Las herramientas de ejemplos de audio (lado derecho) tienen un fondo gris
debido a que en la versin actual se encuentran desactivados, sin embargo era necesario
colocarlos para tomar en cuenta el espacio que utilizaran en la interfaz.
En la figura 18 se indica cmo se vera desplegado el submen Color del men fuente.
13
Captulo 6
Fig. 18 Diseo de interfaz 5 - Formato 2
Por ltimo, en la siguiente vista (figura 19) se puede observar que la prctica activa cambi
a Tablas, se cambiaron los conos necesarios y se agreg un botn para cumplir los
requerimientos de las prcticas. Nuevamente, el fondo de los botones de la prctica de tablas
es gris por estar desactivados.
Fig. 19 Diseo de interfaz 6 - Tablas
14
Captulo 6
4.5.4 Mapa de navegacin
Si bien se cuentan con pocas vistas, resulta de utilidad representar jerrquicamente su

relacin con sus respectivos sub-mens.
Inicio
(Accetextos.html)
Minijuego Tutorial Prctica Prctica

(desactibomba.html) (tutorial.html) Formato Tablas
(practicas.html) (practicas.html)
Nivel 1
Fuente Insertar tabla
Nivel 2 Insertar / eliminar

Prrafo
celdas
Nivel 3 Numeracin y Ancho de columna /

vietas alto de fila
Sombreado Ordenar
Bordes
Fig. 20 Mapa de navegacin
4.5.5 Pantallas de esquema
A continuacin (figura 21) se explican los elementos o reas principales de la interfaz

desarrollada.
15
Captulo 6
Fig. 21 Pantalla de esquema
1. Nombre de la aplicacin.
2. Logo smbolo de la Universidad Veracruzana y del cuerpo acadmico Tecnologa
Computacional y Educativa.
3. Mens principales: Archivo y Guardar.
4. Mens secundarios: botones relacionados con la prctica de Formato o con la de
Tablas.
5. Sub-men: acciones ligadas a una seccin de una prctica o a un botn del men
principal.
6. Opciones: acciones particulares de un elemento de sub-men.
7. Seleccin de prcticas: Formato y Tablas.
8. Botn Ir a Inicio.
9. rea de escritura / edicin de texto.
10. Barra de herramientas: Con botones de ejemplos en audio.
11. Barra de informacin: Muestra el texto de los botones o sub-mens seleccionados o
informacin adicional necesaria para el profesor.
16
Captulo 6
4.6 Desarrollo
4.6.1 Guiones
Ya contando con una idea clara del producto multimedia (anlisis) plasmada en un diseo
concreto (diseo educativo e interactivo), se procedi a elaborar los guiones de lo que
contendra cada pantalla (o cada men).
Nota: Los guiones de las pantallas del minijuego y del tutorial sern omitidos, ya que la
primera solamente reproducir el archivo desactibomba.swf (de Flash) detallado con
anterioridad y la segunda slo contendr el video tutorial.mp4. Ambas pantallas cuentan
con el botn Ir a inicio en la parte superior y con el audio irInicio.mp3.
Tabla 5 Guion 1 - Pantalla de Inicio
Pantalla #1: Inicio

Imagen - UVgrande.png Logosmbolo de la Universidad Veracruzana.
- CAgrande.png Logosmbolo del cuerpo acadmico Tecnologa Computacional y
Educativa.
- minijuego.png Captura de pantalla en miniatura del nivel 1 del minijuego
Desactibomba.
- tutorial.png Captura de pantalla en miniatura de la interfaz de prcticas.
- practicas.png Hoja con texto (prctica formato) y tabla con celdas combinadas
(color caf) en la fila superior (prctica tablas).
Sonido - bienvenido.mp3 Voz diciendo Bienvenido a Accetextos. Para comenzar, pulse la
tecla F11 para ingresar a pantalla completa. Utilice el ratn para seleccionar una
accin.
- accetextos.mp3 Voz diciendo Accetextos.
- irMinijuego.mp3 Voz diciendo Ir a minijuego de orientacin.
- irTutorial.mp3 Voz diciendo Ir a tutorial.
- irPracticas.mp3 Voz diciendo Ir a prcticas.
- ChopinPrelude.mp3 loop Msica de fondo (indica que se encuentra sobre un
botn).
- BeethovenPathetique.mp3 loop Msica de fondo.
- DebussyClair.mp3 loop Msica de fondo.
Texto - Nombre de la aplicacin: Accetextos.
Accin - Al cargar pgina Reproducir bienvenido.mp3.
- AreaTitulo rol Reproducir accetextos.mp3.
17
Captulo 6
- BtnIrMinijuego rol Reproducir irMinijuego.mp3. Reproducir

ChopinPrelude.mp3.
- BtnIrMinijuego clic Abrir pgina desactibomba.html.
- BtnIrTutorial rol Reproducir irTutorial.mp3. Reproducir
BeethovenPathetique.mp3.
- BtnIrTutorial clic Abrir pgina tutorial.html.
- BtnIrPracticas rol Reproducir irPracticas.mp3. Reproducir
DebussyClair.mp3.
- BtnIrPracticas clic Abrir pgina practicas.html.
Tabla 6 Guion 2 - Prctica formato
Pantalla #2: Prctica formato

Imagen - UV.png Logosmbolo de la Universidad Veracruzana.
- CA.png Logosmbolo del Cuerpo Acadmico Tecnologa Computacional y
Educativa.
- archivo.png Carpeta amarilla con fondo negro.
- guardar.png Disquete caf.
- fuente.png Letra A con smbolo de cursor.
- parrafo.png Hoja con un prrafo.
- vinetas.png Puntos (vietas) y lneas (texto).
- sombreado.jpg Bote regando pintura sobre una barra.
- formato.png Hoja con texto.
- tablas.png Tabla con celdas combinadas (color caf) en la fila superior.
- audio.png Bocina negra.
Sonido - practicas.mp3 Voz diciendo Prcticas.
- menuArchivo.mp3 Voz diciendo Men archivo.
- guardar.mp3 Voz diciendo Guardar.
- menuFuente.mp3 Voz diciendo Men fuente.
- menuParrafo.mp3 Voz diciendo Men prrafo.
- numVin.mp3 Voz diciendo Men numeracin y vietas.
- sombreado.mp3 Voz diciendo Sombreado.
- formato.mp3 Voz diciendo Prctica Formato.
- tablas.mp3 Voz diciendo Prctica Tablas.
- activa.mp3 Voz diciendo Activa (indica la prctica activa).
- irInicio.mp3 Voz diciendo Ir a inicio.
- areaEsc.mp3 Voz diciendo rea de escritura.
- escucharEj1.mp3 Voz diciendo Audio de ejemplo uno.
- ejemplo1.mp3 Voz diciendo El audio de ejemplo uno es el siguiente: Texto en
arial, coma, con negritas, coma, sombreado azul y centrado, punto y aparte. Nmero
uno, punto y aparte. Nmero dos, punto y final.
- hecho.mp3 Sonido indicando que se complet una accin.
18
Captulo 6
- BeethovenFurElise.mp3 loop Msica de fondo (indica que se encuentra sobre un

botn).
- SatieGymnopedie.mp3 loop Msica de fondo.
- Barra de informacin: Informacin: * (el texto del * vara dependiendo de sobre
qu botn o rea est el cursor del ratn).
Accin - Al cargar pgina Reproducir practicas.mp3.
- BtnArchivo rol Reproducir menuArchivo.mp3. Reproducir
BeethovenFurElise.mp3. Cambiar texto de barra de informacin por: Men
archivo. Mostrar men Archivo.
- BtnGuardar rol Reproducir guardar.mp3. Reproducir
BeethovenFurElise.mp3. Cambiar texto de barra de informacin por: Guardar.
- BtnGuardar clic Pedir el nombre del archivo a guardar. Guardar el contenido del
rea de escritura en un archivo html. Reproducir hecho.mp3.
- BtnMenu1 rol Reproducir menuFuente.mp3. Reproducir
fuente. Mostrar men Fuente.
- BtnMenu2 rol Reproducir menuParrafo.mp3. Reproducir
prrafo. Mostrar men Prrafo.
- BtnMenu3 rol Reproducir numVin.mp3. Reproducir
numeracin y vietas. Mostrar men Numeracin y vietas.
- BtnMenu4 rol Reproducir sombreado.mp3. Reproducir
BeethovenFurElise.mp3. Cambiar texto de barra de informacin por: Sombreado.
Mostrar men Sombreado (opciones de colores de sombreado).
- BtnFormato rol Reproducir formato.mp3. Reproducir activa.mp3.
Reproducir DebussyClair.mp3. Cambiar texto de barra de informacin por:
Prctica formato (activa).
- BtnTablas rol Reproducir tablas.mp3. Reproducir BeethovenPathetique.mp3.
Cambiar texto de barra de informacin por: Prctica tablas.
- BtnTablas clic Reproducir hecho.mp3. Cambiar a pantalla Prctica tablas.
Reproducir hecho.mp3.
- BtnIrInicio rol Reproducir irInicio.mp3. Reproducir SatieGymnopedie.mp3.
Cambiar texto de barra de informacin por: Ir a inicio.
- BtnIrInicio clic Reproducir hecho.mp3. Abrir pgina Accetextos.html.
- AreaEscritura rol Reproducir areaEsc.mp3. Cambiar texto de barra de
informacin por: rea de escritura.
- BtnAudio1 rol Reproducir escucharEj1.mp3. Cambiar texto de barra de
informacin por: Audio de ejemplo 1.
19
Captulo 6
- BtnAudio1 clic Reproducir ejemplo1.mp3.

- BtnAudio2 (desactivado).
Tabla 7 Guion 3 - Prctica tablas
Pantalla #3: Prctica tablas

Imagen - UV.png Logosmbolo de la Universidad Veracruzana.
- CA.png Logosmbolo del cuerpo acadmico Tecnologa Computacional y
Educativa.
- archivo.png Carpeta amarilla con fondo negro.
- guardar.png Disquete caf.
- insertar tabla.png Tabla con celdas combinadas (color azul) en la fila superior.
- insertar celda.png Flecha empujando una fila hacia una tabla.
- ancho columnas.png Lneas midiendo el ancho de 2 columnas.
- ordenar.png Flecha descendente de la A a la Z.
- bordes.png Pequea tabla con un borde ms grueso.
- formato.png Hoja con texto.
- tablas.png Tabla con celdas combinadas (color caf) en la fila superior.
- audio.png Bocina negra.
Sonido - practicas.mp3 Voz diciendo Prcticas.
- menuArchivo.mp3 Voz diciendo Men archivo.
- guardar.mp3 Voz diciendo Guardar.
- formato.mp3 Voz diciendo Prctica Formato.
- tablas.mp3 Voz diciendo Prctica Tablas.
- activa.mp3 Voz diciendo Activa (indica la prctica activa).
- irInicio.mp3 Voz diciendo Ir a inicio.
- areaEsc.mp3 Voz diciendo rea de escritura.
- escucharEj1.mp3 Voz diciendo Audio de ejemplo uno.
- ejemplo1.mp3 Voz diciendo El audio de ejemplo uno es el siguiente: Texto en
arial, coma, con negritas, coma, sombreado azul y centrado, punto y aparte. Nmero
uno, punto y aparte. Nmero dos, punto y final.
- BeethovenFurElise.mp3 loop Msica de fondo (indica que se encuentra sobre un
botn).
- Barra de informacin: Informacin: * (el texto del * vara dependiendo de sobre
qu botn o rea est el cursor del ratn).
Accin - Al cargar pgina Reproducir practicas.mp3.
20
Captulo 6
- BtnArchivo rol Reproducir menuArchivo.mp3. Reproducir

archivo. Mostrar men Archivo.
- BtnMenuGuardar rol Reproducir guardar.mp3. Reproducir
BeethovenFurElise.mp3. Cambiar texto de barra de informacin por: Guardar.
- BtnMenuGuardar clic Pedir el nombre del archivo a guardar. Guardar el
contenido del rea de escritura en un archivo html. Reproducir hecho.mp3.
- BtnMenu5 (desactivado).
- BtnFormato rol Reproducir formato.mp3. Reproducir DebussyClair.mp3.
Cambiar texto de barra de informacin por: Prctica formato.
- BtnFormato clic Reproducir hecho.mp3. Cambiar a pantalla Prctica
formato. Reproducir hecho.mp3.
- BtnTablas rol Reproducir tablas.mp3. Reproducir activa.mp3. Reproducir
BeethovenPathetique.mp3. Cambiar texto de barra de informacin por: Prctica
tablas (activa).
- BtnIrInicio rol Reproducir irInicio.mp3. Reproducir SatieGymnopedie.mp3.
Cambiar texto de barra de informacin por: Ir a inicio.
- BtnIrInicio clic Reproducir hecho.mp3. Abrir pgina Accetextos.html.
- AreaEscritura rol Reproducir areaEsc.mp3. Cambiar texto de barra de
informacin por: rea de escritura.
- BtnAudio1 rol Reproducir escucharEj1.mp3. Cambiar texto de barra de
informacin por: Audio de ejemplo 1.
- BtnAudio1 clic Reproducir ejemplo1.mp3.
- BtnAudio2 (desactivado).
Tabla 8 Guion 4 - Men archivo
Men Archivo
Imagen Ninguna.
Sonido - nuevo.mp3 Voz diciendo Nuevo, opcin uno de tres.
- abrir.mp3 Voz diciendo Abrir, opcin dos de tres.
- guardar.mp3 Voz diciendo Guardar, opcin tres de tres.
- BeethovenMoonlight.mp3 loop Msica de fondo.
- ChopinPrelude.mp3 loop Msica de fondo.
Texto Sub-men:
- Nuevo.
21
Captulo 6
- Abrir.
- Guardar.
Accin - BtnNuevo rol Reproducir nuevo.mp3. Reproducir
BeethovenMoonlight.mp3. Cambiar texto de barra de informacin por: Men
archivo - Nuevo.
- BtnNuevo clic Borra todo el contenido del rea de escritura. Reproducir
hecho.mp3.
- BtnAbrir rol Reproducir abrir.mp3. Reproducir ChopinPrelude.mp3.
Cambiar texto de barra de informacin por: Men archivo - Abrir.
- BtnAbrir clic Abre el explorador de archivos para seleccionar y abrir un archivo
html existente. Reproducir hecho.mp3.
- BtnGuardar rol Reproducir guardar.mp3. Reproducir
BeethovenPathetique.mp3. Cambiar texto de barra de informacin por: Men
archivo - Guardar.
- BtnGuardar clic Pedir el nombre del archivo a guardar. Guardar el contenido del
rea de escritura en un archivo html. Reproducir hecho.mp3.
Tabla 9 Guion 5 - Men fuente
Men Fuente
Imagen Ninguna.
Sonido - fuente.mp3 Voz diciendo Fuente, sub-men uno de cinco.
- tamano.mp3 Voz diciendo Tamao, sub-men dos de cinco.
- color.mp3 Voz diciendo Color, sub-men tres de cinco.
- estilo.mp3 Voz diciendo Estilo de fuente, sub-men cuatro de cinco.
- efectos.mp3 Voz diciendo Efectos, sub-men cinco de cinco.
Texto Sub-men:
- Fuente.
- Tamao.
- Color.
- Estilo de fuente.
- Efectos.
Accin - BtnFuente rol Reproducir fuente.mp3. Reproducir
fuente - Fuente. Mostrar opciones de Fuente.
22
Captulo 6
- BtnTamano rol Reproducir tamano.mp3. Reproducir ChopinPrelude.mp3.

Cambiar texto de barra de informacin por: Men fuente - Tamao. Mostrar
opciones de Tamao.
- BtnColor rol Reproducir color.mp3. Reproducir BeethovenPathetique.mp3.
Cambiar texto de barra de informacin por: Men fuente - Color. Mostrar opciones
de Color.
- BtnEstilo rol Reproducir estilo.mp3. Reproducir DebussyClair.mp3.
Cambiar texto de barra de informacin por: Men fuente - Estilo de fuente. Mostrar
opciones de Estilo de fuente.
- BtnEfectos rol Reproducir efectos.mp3. Reproducir SatieGymnopedie.mp3.
Cambiar texto de barra de informacin por: Men fuente - Efectos. Mostrar
opciones de Efectos.
Tabla 10 Guion 6 - Men prrafo
Men Prrafo
Imagen Ninguna.
Sonido - alineacion.mp3 Voz diciendo Alineacin, sub-men uno de dos.
- sangria.mp3 Voz diciendo Sangra, sub-men dos de dos.
Texto Sub-men:
- Alineacin.
- Sangra.
Accin - BtnAlineacion rol Reproducir alineacion.mp3. Reproducir
prrafo - Alineacin. Mostrar opciones de Alineacin.
- BtnSangria rol Reproducir sangria.mp3. Reproducir ChopinPrelude.mp3.
Cambiar texto de barra de informacin por: Men prrafo - Sangra. Mostrar
opciones de Sangra.
Tabla 11 Guion 7 - Men numeracin y vietas
Men Numeracin y vietas

Imagen Ninguna.
Sonido - numeracion.mp3 Voz diciendo Numeracin, opcin uno de dos.
- vinetas.mp3 Voz diciendo Vietas, opcin dos de dos.
Texto Sub-men:
- Numeracin.
23
Captulo 6
- Vietas.
Accin - BtnNumeracion rol Reproducir numeracion.mp3. Reproducir
numeracin y vietas: Numeracin.
- BtnNumeracion clic Agrega o elimina numeracin al texto seleccionado.
- BtnVinetas rol Reproducir vinetas.mp3. Reproducir ChopinPrelude.mp3.
Cambiar texto de barra de informacin por: Men numeracin y vietas: Vietas.
- BtnVinetas clic Agrega o elimina vietas al texto seleccionado. Reproducir
hecho.mp3.
Tabla 12 Guion 8 - Men sombreado
Men Sombreado (Opciones Sombreado)

Imagen Ninguna.
Sonido - selSomb.mp3 Voz diciendo Seleccione sombreado.
- negro.mp3 Voz diciendo Negro, opcin uno de ocho.
- blanco.mp3 Voz diciendo Blanco, opcin dos de ocho.
- rojo.mp3 Voz diciendo Rojo, opcin tres de ocho.
- verde.mp3 Voz diciendo Verde, opcin cuatro de ocho.
- azul.mp3 Voz diciendo Azul, opcin cinco de ocho.
- amarillo.mp3 Voz diciendo Amarillo, opcin seis de ocho.
- magenta.mp3 Voz diciendo Magenta, opcin siete de ocho.
- cyan.mp3 Voz diciendo Cian, opcin ocho de ocho.
Texto Opciones:
- -Seleccione color-.
- Negro.
- Blanco.
- Rojo.
- Verde.
- Azul.
- Amarillo.
- Magenta.
- Cian.
Accin - BtnSelSomb rol Reproducir selSomb.mp3. Cambiar texto de barra de
informacin por: Seleccione sombreado.
- BtnSombNegro rol Reproducir negro.mp3. Cambiar texto de barra de
informacin por: Sombreado: Negro.
- BtnSombNegro clic Cambia color de sombreado del texto seleccionado por
negro. Reproducir hecho.mp3.
24
Captulo 6
- BtnSombBlanco rol Reproducir blanco.mp3. Cambiar texto de barra de

informacin por: Sombreado: Blanco.
- BtnSombBlanco clic Cambia color de sombreado del texto seleccionado por
blanco. Reproducir hecho.mp3.
- BtnSombRojo rol Reproducir rojo.mp3. Cambiar texto de barra de informacin
por: Sombreado: Rojo.
- BtnSombRojo clic Cambia color de sombreado del texto seleccionado por rojo.
- BtnSombVerde rol Reproducir verde.mp3. Cambiar texto de barra de
informacin por: Sombreado: Verde.
- BtnSombVerde clic Cambia color de sombreado del texto seleccionado por
verde. Reproducir hecho.mp3.
- BtnSombAzul rol Reproducir azul.mp3. Cambiar texto de barra de informacin
por: Sombreado: Azul.
- BtnSombAzul clic Cambia color de sombreado del texto seleccionado por azul.
- BtnSombAmarillo rol Reproducir amarillo.mp3. Cambiar texto de barra de
informacin por: Sombreado: Amarillo.
- BtnSombAmarillo clic Cambia color de sombreado del texto seleccionado por
amarillo. Reproducir hecho.mp3.
- BtnSombMagenta rol Reproducir magenta.mp3. Cambiar texto de barra de
informacin por: Sombreado: Magenta.
- BtnSombMagenta clic Cambia color de sombreado del texto seleccionado por
magenta. Reproducir hecho.mp3.
- BtnSombCyan rol Reproducir cyan.mp3. Cambiar texto de barra de
informacin por: Sombreado: Cian.
- BtnSombCyan clic Cambia color de sombreado del texto seleccionado por cian.
Tabla 13 Guion 9 - Opciones fuente
Opciones Fuente
Imagen Ninguna.
Sonido - selFuente.mp3 Voz diciendo Seleccione fuente.
- arial.mp3 Voz diciendo Arial, opcin uno de ocho.
- calibri.mp3 Voz diciendo Calibri, opcin dos de ocho.
- comic.mp3 Voz diciendo Comic Sans, opcin tres de ocho.
- courier.mp3 Voz diciendo Courier New, opcin cuatro de ocho.
- impact.mp3 Voz diciendo Impact, opcin cinco de ocho.
- tahoma.mp3 Voz diciendo Tahoma, opcin seis de ocho.
- times.mp3 Voz diciendo Times New Roman, opcin siete de ocho.
- verdana.mp3 Voz diciendo Verdana, opcin ocho de ocho.
25
Captulo 6

Texto Opciones:
- -Seleccione fuente-.
- Arial.
- Calibri.
- Comic Sans MS.
- Courier New.
- Impact.
- Tahoma.
- Times New Roman.
- Verdana.
Accin - BtnSelFuente rol Reproducir selFuente.mp3. Cambiar texto de barra de
informacin por: Men fuente - Seleccione fuente.
- BtnArial rol Reproducir arial.mp3. Cambiar texto de barra de informacin por:
Men fuente - Fuente: Arial.
- BtnArial clic Cambia la fuente del texto seleccionado a Arial. Reproducir
hecho.mp3.
- BtnCalibri rol Reproducir calibri.mp3. Cambiar texto de barra de informacin
por: Men fuente - Fuente: Calibri.
- BtnCalibri clic Cambia la fuente del texto seleccionado a Calibri. Reproducir
hecho.mp3.
- BtnComic rol Reproducir comic.mp3. Cambiar texto de barra de informacin
por: Men fuente - Fuente: Comic Sans MS.
- BtnComic clic Cambia la fuente del texto seleccionado a Comic Sans MS.
- BtnCourier rol Reproducir courier.mp3. Cambiar texto de barra de informacin
por: Men fuente - Fuente: Courier New.
- BtnCourier clic Cambia la fuente del texto seleccionado a Courier New.
- BtnImpact rol Reproducir impact.mp3. Cambiar texto de barra de informacin
por: Men fuente - Fuente: Impact.
- BtnImpact clic Cambia la fuente del texto seleccionado a Impact. Reproducir
hecho.mp3.
- BtnTahoma rol Reproducir tahoma.mp3. Cambiar texto de barra de
informacin por: Men fuente - Fuente: Tahoma.
- BtnTahoma clic Cambia la fuente del texto seleccionado a Tahoma. Reproducir
hecho.mp3.
- BtnTimes rol Reproducir times.mp3. Cambiar texto de barra de informacin
por: Men fuente - Fuente: Times New Roman.
- BtnTimes clic Cambia la fuente del texto seleccionado a Times New Roman.
26
Captulo 6
- BtnVerdana rol Reproducir verdana.mp3. Cambiar texto de barra de

informacin por: Men fuente - Fuente: Verdana.
- BtnVerdana clic Cambia la fuente del texto seleccionado a Verdana. Reproducir
hecho.mp3.
Tabla 14 Guion 10 - Opciones tamao
Opciones Tamao
Imagen Ninguna.
Sonido - selTamano.mp3 Voz diciendo Seleccione tamao.
- tam8.mp3 Voz diciendo Ocho, opcin uno de siete.
- tam10.mp3 Voz diciendo Diez, opcin dos de siete.
- tam12.mp3 Voz diciendo Doce, opcin tres de siete.
- tam14.mp3 Voz diciendo Catorce, opcin cuatro de siete.
- tam18.mp3 Voz diciendo Dieciocho, opcin cinco de siete.
- tam24.mp3 Voz diciendo Veinticuatro, opcin seis de siete.
- tam36.mp3 Voz diciendo Treinta y seis, opcin siete de siete.
Texto Opciones:
- -Seleccione tamao-.
- 8.
- 10.
- 12.
- 14.
- 18.
- 24.
- 36.
Accin - BtnSelTamano rol Reproducir selTamano.mp3. Cambiar texto de barra de
informacin por: Men fuente - Seleccione tamao.
- BtnTam8 rol Reproducir tam8.mp3. Cambiar texto de barra de informacin
por: Men fuente - Tamao: 8.
- BtnTam8 clic Cambia el tamao del texto seleccionado a 8 puntos. Reproducir
hecho.mp3.
hecho.mp3.
hecho.mp3.
27
Captulo 6

hecho.mp3.
hecho.mp3.
hecho.mp3.
hecho.mp3.
Tabla 15 Guion 11 - Opciones color
Opciones Color
Imagen Ninguna.
Sonido - selColor.mp3 Voz diciendo Seleccione color.
- negro.mp3 Voz diciendo Negro, opcin uno de ocho.
- blanco.mp3 Voz diciendo Blanco, opcin dos de ocho.
- rojo.mp3 Voz diciendo Rojo, opcin tres de ocho.
- verde.mp3 Voz diciendo Verde, opcin cuatro de ocho.
- azul.mp3 Voz diciendo Azul, opcin cinco de ocho.
- amarillo.mp3 Voz diciendo Amarillo, opcin seis de ocho.
- magenta.mp3 Voz diciendo Magenta, opcin siete de ocho.
- cyan.mp3 Voz diciendo Cian, opcin ocho de ocho.
Texto Opciones:
- -Seleccione color-.
- Negro.
- Blanco.
- Rojo.
- Verde.
- Azul.
- Amarillo.
- Magenta.
- Cian.
28
Captulo 6
Accin - BtnSelColor rol Reproducir selColor.mp3. Cambiar texto de barra de

informacin por: Men fuente - Seleccione color.
- BtnColNegro rol Reproducir negro.mp3. Cambiar texto de barra de
informacin por: Men fuente - Color: Negro.
- BtnColNegro clic Cambia color del texto seleccionado por negro. Reproducir
hecho.mp3.
- BtnColBlanco rol Reproducir blanco.mp3. Cambiar texto de barra de
informacin por: Men fuente - Color: Blanco.
- BtnColBlanco clic Cambia color del texto seleccionado por blanco. Reproducir
hecho.mp3.
- BtnColRojo rol Reproducir rojo.mp3. Cambiar texto de barra de informacin
por: Men fuente - Color: Rojo.
- BtnColRojo clic Cambia color del texto seleccionado por rojo. Reproducir
hecho.mp3.
- BtnColVerde rol Reproducir verde.mp3. Cambiar texto de barra de
informacin por: Men fuente - Color: Verde.
- BtnColVerde clic Cambia color del texto seleccionado por verde. Reproducir
hecho.mp3.
- BtnColAzul rol Reproducir azul.mp3. Cambiar texto de barra de informacin
por: Men fuente - Color: Azul.
- BtnColAzul clic Cambia color del texto seleccionado por azul. Reproducir
hecho.mp3.
- BtnColAmarillo rol Reproducir amarillo.mp3. Cambiar texto de barra de
informacin por: Men fuente - Color: Amarillo.
- BtnColAmarillo clic Cambia color del texto seleccionado por amarillo.
- BtnColMagenta rol Reproducir magenta.mp3. Cambiar texto de barra de
informacin por: Men fuente - Color: Magenta.
- BtnColMagenta clic Cambia color del texto seleccionado por magenta.
- BtnColCyan rol Reproducir cyan.mp3. Cambiar texto de barra de informacin
por: Men fuente - Color: Cian.
- BtnColCyan clic Cambia color del texto seleccionado por cian. Reproducir
hecho.mp3.
Tabla 16 Guion 12 - Opciones estilo de fuente
Opciones Estilo de fuente

Imagen Ninguna.
Sonido - negritas.mp3 Voz diciendo Negritas, opcin uno de dos.
- cursivas.mp3 Voz diciendo Cursivas, opcin dos de dos.
29
Captulo 6
Texto Opciones:
- Negritas.
- Cursivas.
Accin - BtnNegritas rol Reproducir negritas.mp3. Cambiar texto de barra de
informacin por: Men fuente - Estilo de fuente: Negritas.
- BtnNegritas clic Agrega o elimina el estilo en negritas al texto seleccionado.
- BtnCursivas rol Reproducir cursivas.mp3. Cambiar texto de barra de
informacin por: Men fuente - Estilo de fuente: Cursivas.
- BtnCursivas clic Agrega o elimina el estilo en cursivas al texto seleccionado.
Tabla 17 Guion 13 - Opciones efectos
Opciones Efectos
Imagen Ninguna.
Sonido - subrayado.mp3 Voz diciendo Subrayado, opcin uno de dos.
- tachado.mp3 Voz diciendo Tachado, opcin dos de dos.
Texto Opciones:
- Subrayado.
- Tachado.
Accin - BtnSubrayado rol Reproducir subrayado.mp3. Cambiar texto de barra de
informacin por: Men fuente - Efectos: Subrayado.
- BtnSubrayado clic Agrega o elimina el efecto de subrayado al texto
seleccionado. Reproducir hecho.mp3.
- BtnTachado rol Reproducir cursivas.mp3. Cambiar texto de barra de
informacin por: Men fuente - Efectos: Tachado.
- BtnTachado clic Agrega o elimina el efecto de tachado al texto seleccionado.
Tabla 18 Guion 14 - Opciones alineacin
Opciones Alineacin
Imagen Ninguna.
Sonido - aliIzq.mp3 Voz diciendo A la izquierda, opcin uno de cuatro.
- aliCen.mp3 Voz diciendo Centrado, opcin dos de cuatro.
- aliDer.mp3 Voz diciendo A la derecha, opcin tres de cuatro.
- aliJus.mp3 Voz diciendo Justificado, opcin cuatro de cuatro.
Texto Opciones:
- Izquierda.
30
Captulo 6
- Centrado.
- Derecha.
- Justificado.
Accin - BtnAliIzq rol Reproducir aliIzq.mp3. Cambiar texto de barra de informacin
por: Men prrafo - Alineacin: A la izquierda.
- BtnAliIzq clic Cambia la alineacin del texto seleccionado hacia la izquierda.
- BtnAliCen rol Reproducir aliCen.mp3. Cambiar texto de barra de informacin
por: Men prrafo - Alineacin: Centrado.
- BtnAliCen clic Cambia la alineacin del texto seleccionado hacia el centro.
- BtnAliDer rol Reproducir aliDer.mp3. Cambiar texto de barra de informacin
por: Men prrafo - Alineacin: A la derecha.
- BtnAliDer clic Cambia la alineacin del texto seleccionado hacia la derecha.
- BtnAliJus rol Reproducir aliJus.mp3. Cambiar texto de barra de informacin
por: Men prrafo - Alineacin: Justificado.
- BtnAliJus clic Cambia la alineacin del texto seleccionado a justificado.
Tabla 19 Guion 15 - Opciones sangra
Opciones Sangra
Imagen Ninguna.
Sonido - aumSan.mp3 Voz diciendo Aumentar sangra, opcin uno de dos.
- disSan.mp3 Voz diciendo Disminuir sangra, opcin dos de dos.
Texto Opciones:
- Aumentar.
- Disminuir.
Accin - BtnSanAum rol Reproducir aumSan.mp3. Cambiar texto de barra de
informacin por: Men prrafo - Sangra: Aumentar.
- BtnSanAum clic Aumenta la sangra del texto seleccionado. Reproducir
hecho.mp3.
- BtnSanDis rol Reproducir cursivas.mp3. Cambiar texto de barra de
informacin por: Men prrafo - Sangra: Disminuir.
- BtnSanDis clic Disminuye la sangra del texto seleccionado. Reproducir
hecho.mp3.
31
Captulo 6
4.7 Produccin
4.7.1 De audio y video
Para grabar todos los audios de los botones se utiliz la aplicacin mvil Grabadora de Voz
(pre-cargada en algunos telfonos celulares) sosteniendo el celular aproximadamente a 25
centmetros de la fuente emisora del sonido.
Utilic mi voz (a un volumen medio y una velocidad normal) para que los usuarios que
probaron el sistema se sintieran familiarizados con ella, ya que antes de las pruebas platicaba
un poco con ellos.
Posteriormente, cada audio grabado fue convertido de formato m4a a mp3 con el
convertidor en lnea gratuito Online-convert.com (encontrado en el sitio web con el mismo
nombre).
Como ltimo paso con respecto a la produccin de audio, se edit cada grabacin con el
software gratuito Audacity con el complemento Lame para reducir ruido, eliminar audio
excedente, etc. (ver figura 22).
Fig. 22 - Produccin - Edicin de audio
En cuanto al video tutorial, se captur el contenido de la pantalla con el programa gratuito

Icecream Screen Recorder mientras se utilizaba la interfaz de prcticas. Se utiliz Online-
32
Captulo 6
convert.com para convertir el video capturado de formato webm a mpg, despus se grab
y edit el audio del tutorial.
4.7.2 Integracin
El video y el audio (grabados por separado) del tutorial para conocer la interfaz se integraron
utilizando Windows Movie Maker (figura 23).
Fig. 23 - Integracin - Audio / Video del tutorial
Todo lo creado y editado en la etapa de produccin (audios, el video tutorial y el minijuego

desarrollado en Flash) fue aadido al sistema utilizando HTML 5 (estructura de la interfaz),
CSS 3 (estilos) y Javascript (programacin) en Sublime Text 2.
4.8 Implementacin y evaluacin
Como ltimo paso de la Metodologa de desarrollo y diseo multimedia, se elabor el plan

de pruebas con las tablas de cronometrado y el cuestionario de resultados correspondiente
(mostrados ms adelante), el cual fue implementado en una computadora porttil con
resolucin de 1366 x 768, un ratn inalmbrico de dos botones (y rueda), sobre un tapete
para ratn (mousepad) de aproximadamente 22 x 18 cm.
33
Captulo 6
Ocho personas con discapacidad visual (que han asistido a la Sala Braille) fueron contactadas
para probar la interfaz uno por uno. Los usuarios se sentaron de frente a la computadora (al
teclado) y el ratn se encontraba a la derecha (todos los usuarios fueron diestros). El teclado
era empleado nicamente para capturar y seleccionar texto, el resto de funciones se
realizaban por medio del ratn.
Previo a que los probadores comenzara con las actividades, la computadora fue encendida,
se ajust la velocidad del ratn a 3, se activ el lector de pantalla NVDA y se abri la carpeta
donde se encontraba el archivo de arranque de la aplicacin (Accetextos.html).
Les fueron explicadas a los usuarios brevemente las actividades que realizaran (incluyendo
el inicio de la aplicacin, la exploracin de la interfaz y las prcticas). El inicio del
cronometrado fue efectuado en el momento en que los usuarios abran la aplicacin
Accetextos.html y se finalizaba cuando seleccionaban la opcin Nuevo del men Archivo
para limpiar el contenido del rea de escritura al terminar la segunda prctica. Se guardaron
tiempos parciales del cronmetro por cada tarea que el usuario conclua.
34
Captulo 6
- Inicio del plan de pruebas -
Plan de pruebas de la interfaz de prcticas Accetextos
- Aplicar las pruebas con 5-15 usuarios con discapacidad visual.

- Se utilizar el lector de pantalla NVDA.
- Se ajustar la velocidad del ratn a 3.
- Cronometrar tiempo consumido en el men de inicio, en el men del minijuego, en cada
uno de los 3 niveles, en capturar el texto dictado, en aplicar cada elemento de formato
solicitado, en guardar el archivo como se indica y en abrir un archivo nuevo.
- El llenado de la tabla de cronometrado (anexa) se realizar en segundos (Ej. 20) o, de ser
necesario, en minutos y segundos (Ej. 240), redondeando los segundos a mltiplos de 10.
- Anotar observaciones que haya detectado el aplicador de la prueba.
- Aplicar cuestionario breve (anexo) para detectar dificultades, necesidades y sensaciones que
puedan llevar a realizar mejoras en la interfaz.
Actividades:
- Cada usuario jugar una vez el minijuego Desactibomba (los 3 niveles o hasta que aborte
el intento).
- Escuchar el tutorial de uso de la interfaz de prcticas.
- Se le darn al usuario de 3 a 6 minutos de reconocimiento de la interfaz de prcticas con el
ratn.
- Intentar realizar una primera prctica de formato que consistir en lo siguiente:
o Capturar siguiente texto (ledo por el aplicador de las pruebas):
Texto en arial, con negritas, sombreado azul y centrado.
1. Nmero 1.
2. Nmero 2.
o Cambiar la fuente de la palabra arial a Arial.
o Cambiar el estilo de la palabra negritas a negritas.
o Agregar sombreado azul a la palabra azul.
35
Captulo 6
o Alinear al centro la primera lnea de texto (Texto en arial, con negritas, sombreado
azul y centrado.).
o Agregar numeracin (1 y 2) a las lneas de texto Nmero 1 y Nmero 2.
o Guardar el archivo como prueba 1 *.html (el * se cambiar por el primer nombre
y apellido paterno del usuario).
o Limpiar el rea de texto con la opcin Nuevo del Men archivo.
- La segunda prctica de formato ser muy similar pero con pequeas variantes:
o Capturar siguiente texto (ledo por el aplicador de las pruebas):
Texto en comic sans, con cursivas, sombreado amarillo y alineado a la derecha.
Vieta 1.
Vieta 2.
o Cambiar la fuente de las palabras comic sans a Comic Sans MS.
o Cambiar el estilo de la palabra cursivas a cursivas.
o Agregar sombreado amarillo a la palabra amarillo.
o Alinear a la derecha la primera lnea de texto (Texto en comic sans, con cursivas,
sombreado amarillo y alineado a la derecha.).
o Agregar vietas a las lneas de texto Vieta 1 y Vieta 2.
o Guardar el archivo como prueba 2 *.html (el * se cambiar por el primer nombre
y apellido paterno del usuario).
o Limpiar el rea de texto con la opcin Nuevo del Men archivo.
36
Captulo 6
Tabla 20 Plan de pruebas Accetextos - Cronometrado 1
Cronometrado de Accetextos (1)

Men de inicio
Minijuego
Seleccin de nivel
Nivel 1
Nivel 2
Nivel 3
Prctica formato
Captura de texto
Fuente
Estilo de fuente
Sombreado
Alineacin
Numeracin
Guardar
Nuevo
Tabla 21 Plan de pruebas Accetextos - Cronometrado 2
Cronometrado de Accetextos (2)

Men de inicio
Prctica formato
Captura de texto
Fuente
Estilo de fuente
Sombreado
Alineacin
Vietas
Guardar
Nuevo
37
Captulo 6
Cuestionario de resultados
1. Utilizar esta aplicacin le proporcion una experiencia:

Muy satisfactoria ( ) Poco satisfactoria ( ) Nada satisfactoria ( )
2. Utilizar el ratn en la aplicacin fue:

Muy fcil ( ) Fcil ( ) Complicado ( ) Muy complicado ( )
3. La velocidad de movimiento del ratn le result:

Adecuada ( ) Demasiado lenta ( ) Demasiado rpida ( )
4. Las instrucciones proporcionadas fueron claras?

S ( ) No ( )
5. El audio de los botones fue claro?

S ( ) No ( )
6. Los tamaos de los botones de las opciones le resultaron:

Adecuado ( ) Muy pequeos ( ) Muy grandes ( )
7. Realizar la primera prctica le result:

Muy fcil ( ) Fcil ( ) Complicado ( ) Muy complicado ( )
8. Realizar la segunda prctica le result:

Ms fcil que la primera ( ) Igual que la primera ( ) Ms difcil que la primera ( )
9. Piensa que con la capacitacin adecuada, la aplicacin podra ser una herramienta til para
usted?
S ( ) No ( ) Por qu? _________________________________________
10. Cree que podra aplicar lo aprendido con el uso de esta aplicacin en mbitos ajenos a un
procesador de textos (por ejemplo, Internet)?
S ( ) No ( ) Por qu? _________________________________________
11. Qu cree que se pudiera implementar para mejorar la aplicacin?

___________________________________
- Fin del plan de pruebas -
38
Captulo 6
Fig. 24 Pruebas Accetextos 1
Fig. 25 Pruebas Accetextos 2
39
Captulo 6
Captulo 5 Resultados
Los resultados obtenidos al aplicar las pruebas fueron los siguientes:
5.1 Archivos generados (y guardados) al finalizar las pruebas

El 100% de los usuarios lograron realizar todas las actividades del plan de pruebas
satisfactoriamente. El 85% de ellos terminaron entre 15-20 minutos efectivos (sin contar
explicaciones), solamente 1 usuario demor ms de 20 minutos en completar las tareas
indicadas.
Algunos presentaban errores mnimos (ortogrficos o letras repetidas / faltantes), ajenos al
uso de la interfaz como tal, en el texto capturado o en el nombre del archivo guardado (ver
figura 26, sSans).
Fig. 26 Prueba de la interfaz - Error de escritura
5.2 Cuestionario posterior

Pregunta 1.- Utilizar esta aplicacin le proporcion una experiencia:
0
Captulo 6
Pregunta 1
Muy satisfactoria
Poco satisfactoria
Nada satisfactoria
Fig. 27 Resultados cuestionario posterior - pregunta 1
Pregunta 2.- Utilizar el ratn en la aplicacin fue:
Pregunta 2
Muy fcil
Fcil
Complicado
Muy complicado
Pregunta 3.- La velocidad de movimiento del ratn le result:
1
Captulo 6
Pregunta 3
Adecuada
Demasiado lenta
Demasiado rpida
Pregunta 4.- Las instrucciones proporcionadas fueron claras?
Pregunta 4
S
No
Pregunta 5.- El audio de los botones fue claro?
2
Captulo 6
Pregunta 5
S
No
Pregunta 6.- Los tamaos de los botones de las opciones le resultaron:
Pregunta 6
Adecuado
Muy pequeos
Muy grandes
Pregunta 7.- Realizar la primera prctica le result:
3
Captulo 6
Pregunta 7
Muy fcil
Fcil
Complicado
Muy complicado
Pregunta 8.- Realizar la segunda prctica le result:
Pregunta 8
Ms fcil que la
primera
Igual que la primera
Ms difcil que la
primera
Pregunta 9.- Piensa que con la capacitacin adecuada la aplicacin podra ser una
herramienta til para usted?
4
Captulo 6
Pregunta 9
S
No
Por qu?.-
- (S) Acceso ms rpido y sencillo a mens y ciertos elementos o reas inalcanzables
por el teclado.
- (No) Formato de guardado del archivo (.html) y eficacia de los comandos rpidos de
teclado (usuario con mucha experiencia previa en uso del teclado).
Pregunta 10.- Cree que podra aplicar lo aprendido con el uso de esta aplicacin en mbitos
ajenos a un procesador de textos?
Pregunta 10
S
No
Por qu?.-
5
Captulo 6
- (S) Dependiendo de la adaptacin de los programas, podra facilitar la navegacin

en ellos. Acceso a reas inalcanzables con el teclado.
- (No) Los botones en cada pgina o interfaz estn en diferentes lugares (no existe un
estndar).
5.3 Observaciones
El tiempo promedio de cada actividad en general variaba muy poco entre los diversos
usuarios, sin embargo la captura y seleccin de texto result ms sencillo para aquellos que
contaban con mayor experiencia previa en el uso de una computadora.
El 85% de los usuarios que utilizaron el sistema expres que les resultara de gran utilidad,
tanto para la edicin de textos como para utilizar el ratn en otras interfaces (por ejemplo,
para navegar en distintas pginas de internet), siempre y cuando se alcanzara una
estandarizacin de las interfaces que permitiera a los usuarios con discapacidad visual
navegar en ellas con el ratn de manera similar a Accetextos.
Otro elemento de gran importancia observado con la aplicacin de las pruebas es que el 100%
de los usuarios mostraron un amplio inters y satisfaccin al experimentar el uso del ratn en
tareas que solan realizar solamente con el teclado.
6
Captulo 6
Captulo 6 Conclusiones
6.1 Del minijuego
Se requiere preparar un ambiente ligeramente controlado: un ratn de 2 botones y ajustar la

velocidad de movimiento del ratn en el Panel de Control de Windows (la velocidad que
present mejores resultados fue 3).
Los usuarios fueron dominando ms el minijuego con cada intento (aprendizaje), perdiendo
poco a poco el miedo a utilizar el ratn como medio de navegacin.
6.2 De la interfaz del sistema final
A pesar de que a las personas con discapacidad visual se les ha inculcado generalmente el
uso nico del teclado para la realizacin de la mayora de tareas en la computadora, dicha
poblacin no est cerrada a ese paradigma, es decir, mostraron gran inters al presentarles la
idea del uso del ratn en combinacin con el teclado.
Si bien los usuarios tenan cierto escepticismo ante la propuesta de navegar por una interfaz
con el ratn, a la mayora les result bastante ms sencillo de lo que imaginaban al utilizar el
sistema desarrollado, lo cual sugiere que, con la capacitacin adecuada, podra ser una
herramienta til para la realizacin de las prcticas que exige la EE de computacin bsica
de la Universidad Veracruzana.
Es cierto que se requiere un cierto grado de configuracin previa (como el ajustar la velocidad
del ratn) y de hardware (un ratn externo de al menos dos botones) y software especfico
(lector de pantalla, navegador, etc.) para la utilizacin ptima de la interfaz presentada, no
obstante, al no ser el uso del ratn un fin, sino un medio para alcanzar dicho fin,
probablemente sera de gran utilidad para cualquier actividad realizada en una computadora
y no solamente para la utilizacin del procesador de textos.
0
Captulo 6
6.3 De las metodologas de desarrollo de software

El utilizar una metodologa de desarrollo puede parecer ms lento al principio al no mostrar
un avance inmediato en el sistema final, pero invertir tiempo en las etapas de anlisis y diseo
(y de pruebas al final) nos ayuda a crear un software ms completo, funcional y usable.
Cada paso de la Metodologa de desarrollo y diseo multimedia de Brian Blum se vio
reflejado en la versin final del sistema elaborado (Accetextos), facilitando el mantenimiento
y el realizar pequeos ajustes para satisfacer los requerimientos iniciales y algunos que se
fueron presentando a lo largo de la etapa de pruebas.
6.4 Generales
Es de suma importancia lograr una inclusin e integracin adecuada de toda la poblacin. Se
han realizado una gran cantidad de esfuerzos individuales para la inclusin de personas con
discapacidad visual, sin embargo se requiere combinar dichos esfuerzos para generar ms
ideas y productos que permitan lo anterior de manera ptima.
6.5 Trabajos futuros

Continuando con la metodologa seguida a lo largo del desarrollo de esta interfaz, la
aplicacin podra expandirse de manera que abarque ms temas o prcticas de la EE de
computacin bsica o incluso de otras experiencias educativas.
Este trabajo puede funcionar como un inicio enfocado al desarrollo de una competencia del
uso del ratn en computadoras para personas con discapacidad visual, siendo un potencial
recurso para una enorme cantidad de actividades de diversa ndole.
Como se ha mencionado, los resultados obtenidos en cuanto al uso del ratn por personas
con discapacidad visual presentan la posibilidad de crear o adecuar interfaces de distintos
tipos o reas acadmicas y laborales para que sean navegadas por medio del ratn. Un rea
que algunos de los usuarios del sistema sugirieron abordar es la de entretenimiento, es decir,
videojuegos accesibles, ya que actualmente existe poca diversidad.
1
Captulo 6
Referencias bibliogrficas
Arriaga Bellido, A. (2015). Gua para el diseo de interfaces grficas usables para personas
con discapacidad visual (Tesis de pregrado). Universidad Veracruzana, Xalapa, Veracruz,
Mxico.
Benemrita Escuela Normal Veracruzana. (2015). CSBI. Consultado el 23 de Noviembre en:

http://www.benv.edu.mx/normal/csbi.
Bueno Martn, M. (1994). Deficiencia visual: Aspectos psicoevolutivos y educativos. Mlaga,

Espaa.
Castro Orozco, A. (2012). Halconix. LINUX para usuarios con discapacidad visual en la
Universidad Veracruzana. Consultado el 25 de Septiembre de 2016 en: http://salabraille-csbi-
xalapa.blogspot.mx/2012/09/halconix-linux-para-usuarios-con.html.
Castro Orozco, A. (2012-B). Resea histrica de la Sala Braille del CSBI. Consultado el 23
de Noviembre de 2016 en: http://salabraille-csbi-xalapa.blogspot.mx/2012/09/halconix-
linux-para-usuarios-con.html.
Castro Orozco, A. (2013). TIFLOALE. Consultado el 25 de Septiembre de 2016 en:

http://tifloale.es.tl/Bienvenida.htm.
Cern Gmez, K. (2015). Gua para la elaboracin de contenido digital accesible (Tesis de
pregrado). Universidad Veracruzana, Xalapa, Veracruz, Mxico.
Cervantes Lpez, D. (2015). Aplicacin multimedia didctica como apoyo al aprendizaje de

los verbos y vocabulario para personas con discapacidad auditiva (Tesis de pregrado).
Universidad Veracruzana, Xalapa, Veracruz, Mxico.
2
Captulo 6
Coln, J. (2015). NVDA vs JAWS: caractersticas esenciales en un lector de pantalla.

Consultado el 18 de Noviembre de 2016 en: http://pratp.upr.edu/blog/nvda-vs-jaws-
caracteristicas-esenciales-en-un-lector-de-pantalla.
Contreras Rivas, L. (2010). Halconix, distribucin de software libre para personas con
discapacidad visual (Tesis de pregrado). Universidad Veracruzana, Xalapa, Veracruz,
Mxico.
Guzmn Valenzuela, C. (2000). Aplicacin de la metodologa de Brian Blum al desarrollo

del proyecto de David y Goliat (Tesis de maestra). Universidad Autnoma de Nuevo Len,
Monterrey, Nuevo Len, Mxico.
Hassan-Montero, Y.; Ortega-Santamara, S. (2009). Informe APEI sobre Usabilidad. Gijn:

Asociacin Profesional de Especialistas en Informacin. ISBN: 978-84-692-3782-3.
Consultado el 15 de Diciembre de 2016 en:
http://www.nosolousabilidad.com/manual/index.htm.
INEGI. Censo de poblacin y vivienda 2010.
INEGI. (2013). Las personas con discapacidad en Mxico, una visin al 2010.
Kingett, R [crippledcritic] (2012). JAWS VS NVDA. a screen reader battle. Recuperado de:
https://www.youtube.com/watch?v=qQFI63b7e_g.
Lafuente de Frutos, . (2012). Educacin Inclusiva. Personas con Discapacidad Visual.

Instituto de Tecnologas Educativas. Ministerio de Educacin, Cultura y Deporte. Espaa.
Lubaggi Cuspinera, S. [shaguree] (2015). Usabilidad - por Shaguree Lubaggi Cuspinera

(video privado). Recuperado de: https://www.youtube.com/watch?v=UtcJC4JAWvo.
3
Captulo 6
Murrieta Chino, D. (2010). Plataforma de software GNU/Linux a medida para la Universidad

Veracruzana: Instalador Halconix (Tesis de pregrado). Universidad Veracruzana, Xalapa,
Veracruz, Mxico.
Nielsen, J. (2012). Usability 101: Introduction to Usability. Nielsen Norman Group.

Consultado el 15 de Diciembre de 2016 en: https://www.nngroup.com/articles/usability-101-
introduction-to-usability/.
Organizacin Mundial de la Salud. (2001). Clasificacin Internacional del Funcionamiento,

de la Discapacidad y de la Salud. IMSERSO.
Organizacin Mundial de la Salud. (2014). Ceguera y discapacidad visual. Nota descriptiva

N 282. Consultado el 18 de Junio de 2016 en:
http://www.who.int/mediacentre/factsheets/fs282/es/.
Prez Hernndez, C. & Hernndez Lpez, R. (2010). Halconix GNU/Linux para la

Universidad Veracruzana (Tesis de pregrado). Universidad Veracruzana, Xalapa, Veracruz,
Mxico.
Prez Porto, J. & Merino, M. (2013). Definicin de usabilidad. Definicion.de. Consultado el

15 de Diciembre de 2016 en: http://definicion.de/usabilidad/.
Presley, I. & DAndrea, F. (2008). Assistive technology for students who are blind or visually
impaired: a guide to assessment. Nueva York, Estados Unidos.
Surez Villa, I. (2009). Discapacidad visual: anlisis de software y hardware de apoyo (Tesis
de pregrado). Universidad Veracruzana, Xalapa, Veracruz, Mxico.
4
Captulo 6
Universidad Veracruzana (2016). Sitio web de la Universidad Veracruzana. Consultado el 5

de Agosto de 2016 en: http://www.uv.mx.
Usability Body of Knowledge (2010). What is Usability?. Consultado el 15 de Diciembre de

2016 en: http://www.usabilitybok.org/what-is-usability.
User Experience Professionals Association (2014). Definitions of User Experience and

Usability. Consultado el 15 de Diciembre de 2016 en: http://uxpa.org/resources/definitions-
user-experience-and-usability.

Tesis1 Aguilera Garcia - Rios Fuentes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tesis1 Aguilera Garcia - Rios Fuentes

Uploaded by

Copyright:

Available Formats

Captulo 1

QUE PARA OBTENER EL GRADO DE:

XALAPA, VER. ENERO 2

3.1 ANLISIS DE REQUERIMIENTOS ................................................................................................... 0

4.1 REUNIN DE ARRANQUE ............................................................................................................. 0

4.4 ACTIVIDADES DE APRENDIZAJE ................................................................................................... 6

5.1 ARCHIVOS GENERADOS (Y GUARDADOS) AL FINALIZAR LAS PRUEBAS.............................................. 0

6.1 DEL MINIJUEGO ......................................................................................................................... 0

Palabras clave: Discapacidad visual, Tiflotecnologa, Inclusin, Educacin, Computacin,

En el censo poblacional del INEGI (Instituto Nacional de Estadstica, Geografa e

1.2 Planteamiento del problema

La Universidad Veracruzana, actualmente comenz a implementar un programa de inclusin

- El profesor no est capacitado en el manejo de personas con esta discapacidad.

- Conocer las habilidades cognitivas de las personas con discapacidad visual.

1.5 Alcances y limitaciones

Captulo 2 Marco terico

2.1.1 Definiciones de discapacidad y discapacidad visual

En el diccionario de la Real Academia Espaola (RAE), se define discapacitado como una

2.1.2 Clasificacin de funcin visual

En un artculo de la Organizacin Mundial de la Salud (2014), se divide la funcin visual en

- Discapacidad visual grave (baja visin).

2.1.3 Dificultades de las personas con discapacidad visual y algunas soluciones

La gua Educacin Inclusiva. Personas con Discapacidad Visual, elaborada en el Instituto

1 Definicin de la RAE: Verbalismo.- Propensin a fundar el razonamiento ms en las palabras que

2.2 Tiflotecnologa Tecnologa existente

El Diccionario de la Real Academia Espaola define la Tiflotecnologa como el estudio de

En la actualidad existe una gran cantidad de herramientas que facilitan el acceso a la

2.2.1 Lectores de pantalla

Uno de los esfuerzos ms importantes realizados en la Universidad Veracruzana en pro de

proyecto de tesis y presentado en el 2012 por la Licenciada en Informtica Lizbeth Yesenia

- Rhythmbox, como reproductor multimedia.

2.3 Diseo centrado en el usuario

Fig. 1 - Proceso del Diseo centrado en el usuario (tomado de http://www.nosolousabilidad.com/manual/3.htm)

Si bien la palabra usabilidad no existe en el diccionario de la Real Academia Espaola,

Una de ellas (estndar ISO 9241-11) es:

2.4 Metodologa de desarrollo y diseo multimedia

Permite detectar y organizar informacin fundamental de la situacin actual, las necesidades,

2.4.2 Diseo educativo

- Prototipo de papel.- Representa una primera aproximacin visual de la organizacin

2.4.3 Diseo interactivo

En la metodologa de Brian Blum, el desarrollo se enfoca en la realizacin de guiones para

2.4.6 Implementacin y evaluacin

Para concluir adecuadamente el desarrollo de un sistema se requiere evaluar cada elemento,

2.5 rea de Formacin Bsica General (AFBG)

2.5.1 Computacin bsica

2.5.2 Procesador de textos

2.6 Sala Braille

La Benemrita Escuela Normal Veracruzana Enrique C. Rbsamen, institucin educativa

Fig. 2 Centro de Servicios Bibliotecarios y de Informtica (Jos Mancisidor)

Dichas aplicaciones abarcan: lectores y magnificadores de pantalla, TTS (Text to Speech,

Captulo 3 Minijuego de orientacin

3.1 Anlisis de requerimientos

Fig. 3 Minijuego 1 - Diagrama de casos de uso

Tabla 1 Minijuego - Descripcin de caso de uso "Seleccionar nivel"

CASO DE USO: SELECCIONAR NIVEL

Tabla 2 Minijuego - Plan de pruebas de "Seleccionar nivel"

Caso de uso: Seleccionar nivel

Se elabor un minijuego sencillo en donde se pudiera implementar lo encontrado en la fase

Fig. 4 Minijuego 2 - Versin preliminar (y nivel 1 de la versin 1.3)

Se elabor en la plataforma Adobe Flash CS6, Desactibomba, un videojuego desarrollado

El juego consiste en encontrar y desactivar bombas con ayuda de indicaciones auditivas y el

3.3.1 Versin 1.0 (preliminar)

3.3.2 Versin 1.3