Plataforma Informática para La Ejecución de Aplicaciones Software Orientadas A Personas en Situación de Discapacidad Visual en Colombia

Plataforma informtica para la ejecucin de
aplicaciones software orientadas a personas en

situacin de discapacidad visual en Colombia.
Andrs Giovanni Lara Collazos
Corporacin Universitaria Autnoma del Cauca

Facultad de Ingeniera
Popayn, Colombia
2015
Plataforma informtica para la ejecucin de

aplicaciones software orientadas a personas en
situacin de discapacidad visual en Colombia.
Andrs Giovanni Lara Collazos
Trabajo de investigacin presentado como requisito parcial para optar al ttulo de:
Ingeniero de sistemas
Director:
Ingeniero Jimmy Andrs Campo Bravo
Lnea de Investigacin:
Desarrollo de Software
Corporacin Universitaria Autnoma del Cauca

Facultad de Ingeniera
Popayn, Colombia
2015
Dedicatoria
A mis padres
Que
siempre
me
apoyaron
me
ensearon el valor de la educacin y la

honestidad
A mis hermanos
Quienes me inspiran a ser un ejemplo

para ellos y que algn da me superen
como persona.
A Natii
Por estar conmigo en los momentos que

necesitaba un apoyo.
Nota de aceptacin
El Director y los Jurados del trabajo de grado: PLATAFORMA

INFORMTICA PARA LA EJECUCIN DE APLICACIONES
SOFTWARE ORIENTADAS A PERSONAS EN SITUACIN DE
DISCAPACIDAD VISUAL EN COLOMBIA realizado por
ANDRS GIOVANNI LARA COLLAZOS, una vez revisado el
informe final y aprobado la sustentacin del mismo, autorizan
para que se realicen los trmites concernientes para optar el
ttulo profesional de Ingeniero de Sistemas Informticos
______________________________________________
Director de trabajo de grado: Ingeniero, Jimmy Andrs Campo Bravo
______________________________________________
Jurado: Ingeniero, Alexander Muoz Tintinago
______________________________________________
Jurado: Ingeniero, Henry Crdoba Idrobo
AGRADECIMIENTOS
En primer lugar un agradecimiento especial a la institucin Bluesea que me prest

su apoyo y conocimiento en el tema de accesibilidad y experiencia con personas
en situacin de discapacidad visual.
En segundo lugar al profesor Jimmy Andrs Campo Bravo que me dirigi y gui
con su conocimiento para que este proyecto fuera una realidad.
En tercer lugar a la comunidad de cdigo libre, pues sin ella muchos desarrollos
no podran ser posibles, en especial a Richard Stallman que fue el ideador de todo
este mundo tan magnfico de compartir y recibir con la satisfaccin de ayudar a
otros.
RESUMEN
El proyecto Plataforma informtica para la ejecucin de aplicaciones software

orientadas a personas en situacin de discapacidad visual en Colombia se
desarroll con el fin de brindarle a la comunidad un estudio en el cual se analizara
la mejor forma de solucionar problemas comunes con relacin a la interaccin
humano computador en trminos de accesibilidad.
Esta investigacin consta de 4 mdulos los cuales se dividen en: Framework

grfico Origamy, Plataforma Adesk, Tecnologa AWA (Accessible Web Adaptable) y
Trabajo de campo.
El framework Origamy es un estndar de buenas practicas que permite crear

aplicaciones accesibles para personas en situacin de discapacidad visual parcial
o completa. Este framework sugiere controles y colores los cuales se adaptan
fcilmente cuando existe una deficiencia visual.
La plataforma Adesk es un conjunto de aplicaciones que facilitan el uso del

computador por medio de la interfaz Origamy e implementa sus estndares en
aplicaciones como un lector de PDF, navegador web, reproductor de msica,
editor de textos, aplicacin para escuchar radios online, etc.
En el captulo 3, relacionado con la tecnologa AWA se habla sobre cmo mediante

cdigo inyectado se puede transformar un sitio web en un sitio accesible segn el
estndar del framework grfico Origamy; esta tcnica es llamada AWA (Accessible
Web Adaptable).
La ventaja de este desarrollo es el poder convertir cualquier sitio web que desde
antes no haya sido creado con estndares de accesibilidad, logrando as ser
incluyente con todos los usuarios de internet, indiferente de su discapacidad.
Por ltimo se realizaron pruebas para evaluar qu tan efectivo era el framework
grfico Origamy, Adesk y AWA; para ello la institucin BlueSea brind su apoyo al
proyecto permitiendo realizar las para pruebas de accesibilidad con las cuales se
evalu si verdaderamente una persona con cierta discapacidad visual poda usar
el computador sin problemas haciendo uso de Adesk, por otro lado se realizaron
laboratorios de usabilidad especiales para personas en situacin de discapacidad
probando la fortaleza del framework grfico Origamy.
En las pruebas finales se us el navegador por defecto de Adesk para hacer

realizar pruebas sobre sitios web muy conocidos en nuestro pas.
Todos los estudios sugirieron cambiar en cierta medida el enfoque de la

investigacin, dado que se conoci que sta puede ser muy bien recibido en el
rea acadmica.
Cabe recordar que todo el proyecto fue pensado bajo la filosofa del Software
Libre.
Palabras clave: Accesibilidad, Desarrollo, Interfaces, Usabilidad, Codigo libre,

Web.
ABSTRACT
The Project Information Technology platform for the execution of software

applications oriented to people with visual impairment in Colombia was developed
in order to provide to the comunity a research in which the best way to solve
common problems related to the human-computer interaction in terms of
accesibility were analized.
This research is split in 4 modulos divided in: Origamy Graphic Framework, Adesk
Platform, AWA (Accessible Web Adaptable) Technology and field work.
The Origamy framework is an standard of good practice for the creation of

accesible applications for people with partial or total visual impairment. This
framework suggests controls and colors that are easily adaptable when theres a
visual deficiency.
The Adesk platform is a group of applications that ease the use of the computer by
the Origamy interface and implements its standars in applications such as PDF
reader, web browser, music player, text editor, online radio player, etc.
The 3rd Chapter, related to AWA technology, is about how by the use of injected
code it is possible to transform a website in an accesible site according to the
Origamys graphic framework standard; this technique is called AWA (Accessible
Web Adaptable). The advantage of this development is the power to change any
website that hasnt been cretaed before with the accesibility standars, making it
inclusive to all Internet users no matter their disability.
Finally, all the tests that were made in order to evaluate how effective the Graphic
Framework Origamy, Adesk and AWA were are going to be presented; the BlueSea
institution backed us up for the making of the different accesibility tests that would
give an insight on whether or not a person with some visual impairment was able to
use the computer with Adesk without any problem; by the other hand, some other
special laboratory tests of usability were made for people with disability proving this
way the strength of the graphic Framework Origamy. For the final tests, Adesks
default browser was used for testing the websites most popular in our country.
All the research suggested to somehow change the approach of the investigation,
given the fact that it is known this could be very well accepted in the academic
aerea.
Keywords: Accessibility, Developer, Interfaces, Usability, Open Soruce, Web.
CONTENIDO
Pg.
1. Captulo I: problema.......................................................................................... 22
1.1 Planteamiento del problema...........................................................................22
1.2 Justificacin.....................................................................................................25
1.3 Objetivos...........................................................................................................28
1.3.1 Objetivo general..............................................................................................28
1.3.2 Objetivos especficos......................................................................................28
2. Capitulo II: Marco terico o referentes conceptuales....................................29
2.1 Antecedentes....................................................................................................29
2.1.1 Historia............................................................................................................29
Grecia.............................................................................................................29
Egipto............................................................................................................. 30
Hebreos..........................................................................................................30
2.1.2 Bases tericas................................................................................................ 31
Concepto accesibilidad..................................................................................31
Concepto de ceguera.....................................................................................32
Concepto de baja visin.................................................................................32
Ayudas tecnolgicas para personas ciegas.................................................. 33
Ayudas tecnolgicas para personas con baja visin.....................................35
Concepto de usabilidad................................................................................. 36
Diferencia entre accesibilidad y usabilidad....................................................37
Niveles de discapacidad visual......................................................................37

2.2 Estado del arte................................................................................................. 39
3.Captulo III: Metodologa.................................................................................... 44
3.1 Framework grfico: Origamy..........................................................................45
3.1.1 Introduccin.................................................................................................... 45
3.1.2Metodologa de diseo usada para desarrollar el framework grfico Origamy
................................................................................................................................. 46
Anlisis...........................................................................................................47
Diseo............................................................................................................ 48
Implementacin..............................................................................................53
Evaluacin......................................................................................................53
3.1.3 Concepto.........................................................................................................56
Interfaz general.............................................................................................. 57
Colores generales..........................................................................................58
Coeficiente de contraste................................................................................ 60
Paleta de colores de Origamy....................................................................... 61
3.1.4 Diseo de controles........................................................................................ 63
Profundidad, bordes y redondeado............................................................... 64
Espacio entre controles................................................................................. 65
Animaciones y transiciones........................................................................... 66
Tipografa, tamao del texto y colores...........................................................66
3.1.5 Controles.........................................................................................................68
Input............................................................................................................... 68
Botones o buttons.......................................................................................... 69
Listbox............................................................................................................71
3.1.6 Columnas interfaz origamy.............................................................................73
Concepto de diseo a 2 columnas................................................................ 73
3.1.7 Columna de men...........................................................................................76
Men de la aplicacin.................................................................................... 76
Accesos rpidos del men.............................................................................80
3.1.8 Columna de contenido....................................................................................81
3.1.9 Ttulos............................................................................................................. 83
3.1.10 Licencia.........................................................................................................83
3.1.11 Concusiones................................................................................................. 84
3.2 Plataforma de aplicaciones Adesk.................................................................85
3.2.1 Introduccin.................................................................................................... 85
3.2.2 Metodologa para el desarrollo de la plataforma de aplicaciones Adesk .......86
Requerimientos funcionales...........................................................................87
Requerimientos no funcionales..................................................................... 90
Anlisis...........................................................................................................90
Diseo............................................................................................................ 93
Actividades.....................................................................................................96
3.2.3 Concepto.........................................................................................................97
3.2.4 Concepto servidores de ejecucin................................................................. 98
Peticiones API REST..................................................................................... 99
Files.py.........................................................................................................100
Appcenter.py................................................................................................ 101
3.2.5 List window (Gestor de ventanas)................................................................ 104
bin/list_windows.py...................................................................................... 104
3.2.6 start.py.......................................................................................................... 108
3.2.7 estructura de archivos de Adesk...................................................................112
3.2.8 Estructura de una aplicacin Adesk..............................................................115
Directorios bsicos de una aplicacin Adesk...............................................116
Archivos iniciales..........................................................................................117
3.2.9 Aplicaciones entregables..............................................................................120
Aplicacin de bsqueda en la red Google...................................................120
Aplicacin Facebook....................................................................................121
Aplicacin Jamendo.....................................................................................132
Aplicacin Msica........................................................................................ 134
Aplicacin PDF.............................................................................................136
3.3 Tecnologa AWA (Adaptable Web Accessibility).........................................142
Proceso........................................................................................................142
Problemas al usar la tcnica inject.......................................................... 145
AWA aplicado en la vida real....................................................................... 146
3.4 Trabajo de campo.......................................................................................... 150
Seleccin de usuarios..................................................................................150
Metodologa de la prueba............................................................................ 152
Resultados de las pruebas.......................................................................... 158
Conclusiones del trabajo de campo.............................................................161
4. Captulo IV: Resultados...................................................................................164
5. Captulo V: Conclusiones............................................................................... 166
6. Captulo VI: bibliografa.................................................................................. 168
14
LISTA DE FIGURAS
Pg.
Figura 2-1:Alfabeto braille [10, 7].............................................................................35
Figura 2-2: Captura tema en alto contraste Ubuntu 14.10......................................37
Figura 2-3: Wireframe v1.0 figura 1.........................................................................49
Figura 2-10: Tcnica Baja visibilidad...................................................................54
Figura 2-11: Tcnica Blanco y negro...................................................................55
Figura 2-12: Diseo columnas Origamy..................................................................57
Figura 2-13: Rango colores y su visibilidad9...........................................................58
Figura 2-14: Ejemplo estados control......................................................................62
Figura 2-15: Ejemplo de un listbox con Origamy.....................................................63
15
Figura 2-16: Ejemplo grupos de botones................................................................64

Figura 2-17: Captura fuente Droid Sans..................................................................66
Figura 2-18: Ejemplo cuadro input...........................................................................67
Figura 2-19: Ejemplo grupo botones.......................................................................68
Figura 2-20: Ejemplo botn llamando la atencin...................................................69
Figura 2-21: Ejemplo listbox....................................................................................71
Figura 2-22: Ejemplo men izquierda......................................................................73
Figura 2-23: Ejemplo aplicacin Jamendo a dos columnas....................................74
Figura 2-24: Captura aplicacin para escuchar documentos PDF.........................75
Figura 2-25: Captura aplicacin para escuchar documentos PDF.........................78
Figura 2-26: Caso de uso 1, uso plataforma...........................................................83
Figura 2-27: Caso de uso 2, uso y desarrollo plataforma.......................................84
Figura 2-28: Caso de uso 3, uso navegador web....................................................84
Figura 2-29: Caso de uso 4, uso lector de PDF......................................................85
Figura 2-30: Caso de uso 5 Tecnologa AWA..........................................................85
Figura 2-31: Diagrama de capas.............................................................................88
Figura 2-32: Diagrama de sistema de archivos.......................................................90
Figura 2-33: Diseo de servidores de ejecucin.....................................................91
Figura 2-34: Diagrama de despliegue sistema Adesk.............................................94
Figura 2-35: Captura cdigo Json...........................................................................96
Figura 2-36: Diagrama de clase para files.py..........................................................97
16
Figura 2-37: Diagrama del proceso de Appcenter.py..............................................98

Figura 2-38: Diagrama de clase para Appcenter.py..............................................100
Figura 2-39: Diagramas de clase para list_window.py..........................................104
Figura 2-40: Captura de subcarpetas de la carpeta usr....................................109
Figura 2-41: Carpetas del sistema Adesk..............................................................110
Figura 2-42:Ejemplo de archivos precargados en las aplicaciones Adesk...........112
Figura 2-43: Captura directorios de una aplicacin Adesk llamada Jamendo......112
Figura 2-44: Ejemplo de archivo configuration.json para la aplicacin Jamendo. 114
Figura 2-45: Captura de pantalla Webapp Google................................................116
Figura 2-46: Captura de pantalla Webapp Facebook............................................117
Figura 2-47: Captura de pantalla, Facebook sesin iniciada................................118
Figura 2-48: Captura de pantalla aplicacin Jamendo..........................................119
Figura 2-49: Captura pantalla aplicacin Jamendo controles...............................120
Figura 2-50: Captura de pantalla aplicacin Msica.............................................121
Figura 2-51: Captura de pantalla aplicacin Lector PDF......................................122
Figura 2-55: Captura de pantalla aplicacin Lector PDF, controles......................125
Figura 2-56: Captura de pantalla aplicacin Lector PDF, zoom............................126
Figura 2-57: Captura de pantalla aplicacin Lector PDF completa.......................127
17
Figura 2-58: Proceso transformacin cdigo html a cdigo html de tipo Origamy
...............................................................................................................................128
Figura 2-59: Proceso peticiones TCP/IP y navegadores.......................................129
Figura 2-60: Proceso peticiones TCP/IP, navegadores y procesador Origamy....130
Figura 2-61: Captura sitio web El Tiempo (www.eltiempo.com)............................133
Figura 2-62: Captura sitio web El Tiempo con renderizado AWA..........................134
18
LISTA DE TABLAS
Pg.
Tabla 2-1: Paleta de colores Origamy......................................................................61
Tabla 2-2: Resultados prueba primera jornada.......................................................92
Tabla 2-3: Personas completamente ciegas..........................................................137
Tabla 2-4: Personas parcialmente ciegas..............................................................138
Tabla 2-5: Personas de la tercera edad.................................................................138
Tabla 2-6: Personas sin problemas visuales de edad media................................138
Tabla 2-7: Tabla de evaluacin indirecta................................................................143
Tabla 2-8: Ejemplo coeficiente de efectividad.......................................................144
Tabla 2-9: Resultados prueba primera jornada.....................................................145
Tabla 2-10: Tabla coeficiente de efectividad primera jornada...............................145
Tabla 2-11: Resultados prueba segunda jornada..................................................146
Tabla 2-12: Tabla coeficiente de efectividad primera jornada...............................147
INTRODUCCIN
La accesibilidad en el mundo de la informtica ha avanzado de una forma lenta

pero robusta, dada las nuevas tecnologas que han surgido en los ltimos tiempos.
El reconocimiento de voz, de seas, de texto en imgenes y otros avances nos

permiten hoy por hoy disfrutar de sin fin de alternativas para el modelado y
desarrollo de soluciones software y hardware para personas en situacin de
discapacidad, sea cual sea la deficiencia.
La historia comienza desde el siglo XIX, donde exista una consideracin de la

discapacidad como un mal o un demonio que posea a quien la padeca. Louis
Braille el cual era un francs que qued ciego siendo tan solo un nio, tuvo la
oportunidad de probar un sistema de lecto escritura creado por Charles Barbier,
el cual pens que era fabuloso y a partir de este sistema, cre uno nuevo y
llamado por su apellido Braille.
De ah la importancia de compartir el conocimiento y generar comunidad. Cuando

estos dos pilares de la libertad que tanto habla Richard Stallman en sus libros se
unen, se pueden usar para crear nuevas cosas y as apoyar a la sociedad.
Con el pasar de los tiempos se convirti en algo importante el tema de la

accesibilidad, puesto que la Segunda guerra mundial dejo muchas personas en
esta condicin y era necesario empezar a trabajar en soluciones que dieran mejor
experiencia a los afectados.
Ya en el sigo XX se plantearon modelos para entender que las personas en

situacin de discapacidad no deben ser aislada del entorno, si no que por el
contrario debe estar incluida en la sociedad con ayudas tecnolgicas, adems
apoyada por un diseo de las cosas de manera universal.
La accesibilidad se resume en la forma como pensamos las cosas para que sean
universalmente usadas. El trmino Universalmente se refiere a que desde la
persona ms anciana hasta los nios no requieran de una curva de aprendizaje
alta para utilizar los elementos que a menudo vemos en nuestro entorno.
Si una persona sea cual sea su situacin no tiene forma de acceder a un
elemento, esto se considera poco accesible o nulo en accesibilidad.
Este proyecto est dedicado a las personas que en su situacin de discapacidad

visual no pueden acceder a servicios de TI como lo son los navegadores web,
lectores de correo electrnico, lectores de documentos, ofimtica, reproductores
multimedia y medios de streaming.
Pensando en lo anteriormente dicho, se desarrollaron 3 principales productos. El

primero de ellos es la interfaz Origamy, la cual est basada en colores que sugiere
la norma WCAG 2.0 con sus siglas en ingles (Web Content Accessibility
Guidelines) y un novedoso men de manejo de las aplicaciones y sitios web.
El segundo producto es la tecnologa llamada AWA (Adaptable Web Accessibility)

que facilita la interaccin de la persona en situacin de discapacidad visual con los
sitios web.
Por ltimo la plataforma Adesk con la que se unen los dos anteriores conceptos
(AWA y Origamy), generando un conjunto de aplicaciones de uso diario que
facilitan la inclusin de las personas en situacin de discapacidad visual y que a
un futuro se adaptar a otro tipo de discapacidades.
22
1.
CAPTULO I: PROBLEMA
1.1
PLANTEAMIENTO DEL PROBLEMA
La situacin de discapacidad visual es un estado en el cual no se puede percibir el

entorno por medio de los ojos o se realiza con dificultad.
Los temas de accesibilidad son una prioridad en la actualidad porque todos

tenemos el mismo derecho a participar en una sociedad que debe asegurar el
trabajo, la educacin y la salud.
En el campo de la tifotecnologa, que es la encargada de gestionar lo relacionado

a las TIC para personas con alguna situacin de discapacidad es un campo virgen
de investigacin. Es cierto que desde hace aos se habla del estudio de las
diferentes soluciones, pero por falta de apoyo y estndares no se ha podido
avanzar a un nivel mucho ms alto que en el que se encuentra actualmente.
23
Es as como podramos dar tecnologa a personas en situacin de discapacidad,

permitiendo que puedan desarrollar tareas comunes; esto apoyado en la filosofa
del Cdigo Abierto y el cual tendra un soporte mundial gigantesco, por ejemplo
todas las comunidades de discapacidad visual de Colombia y del mundo; donde
podran aportar su experiencia e ir sumando hasta crear un gran depsito de
conocimiento y aplicaciones girando en este entorno.
En Colombia, segn el DANE1 el 6.4% de la poblacin se encuentra en situacin

de discapacidad, siendo el 43.4% de personas con problemas visuales.
La gran mayora de esta poblacin no tiene acceso a las tecnologas de la

informacin por cuestiones tcnicas dado que el actual concepto de la interfaz de
ventanas, indicadores y mensajes de los diferentes sistemas operativos; no
permite una fcil interaccin humano computador en un estado de discapacidad
visual.
Explicado lo anterior, nos realizamos la siguiente pregunta, bajo la cual se

desarrolla toda la investigacin y desarrollo:
1 Dane.gov.co [Internet]. Colombia: Dane; 2004 [actualizado Julio 2004; citado 4 septiembre 2014]. Disponible en:
http://www.dane.gov.co/files/investigaciones/discapacidad/inform_estad.pdf
24
Cmo se puede desarrollar desde la ingeniera de sistemas soluciones

grficas y aplicaciones de tipo software adaptadas a personas en situacin
de discapacidad, para mejorar la interaccin humano computador en
Colombia?
25
1.2
JUSTIFICACIN
Las interfaces grficas de software son la representacin de botones, ventanas,

mensajes de alerta, textos y dems que facilitan la interaccin humano
computadora.
Al principio los computadores se manejaban con una interfaz de tipo texto y por
medio de comandos, aunque era una interfaz muy rudimentaria funcionaba para
aquel entonces.
Luego lleg la poca dorada de las interfaces un poco despus de los

computadores personales. Estas interfaces nunca fueron pensadas para personas
con algn tipo de discapacidad, por el contrario era un lujo tener un computador en
el hogar e inclusive en el trabajo.
El gran ingenio de los humanos permiti que las personas con discapacidad visual
usaran programas que convierten las palabras en audio dependiendo de la
posicin del cursor en la pantalla, por muchos aos ha sido una gran solucin a
los problemas dado que al no poder ver los elementos en pantalla las personas en
26
situacin de discapacidad visual, pueden interactuar de acuerdo a las seales

auditivas proporcionadas.
Estos ltimos aportes benefician mucho pero no son suficientes, no todos los
programas estn diseados para personas ciegas porque existen animaciones,
diseos y colores que enriquecen la experiencia visual pero no son accesibles.
Entonces era necesario mejorar la experiencia de usuario de la comunidad con

discapacidad visual en Colombia, dado que la fuerza intelectual, social, laboral ,
educativa y dems que aporta este sector de la poblacin es sumamente
importante como parte de un pas ms incluyente.
Para solucionar esto se pens en crear una interfaz grfica llamada Origamy,
donde la persona ciega o parcialmente ciega pueda interactuar por medio de
mapas auditivos los cuales resuma los elementos que existen en pantalla y as
acceder a cada una de las herramientas que proporciona las aplicaciones.
Para completar la solucin al problema se desarroll una plataforma llamada

Adesk, la cual ahorra tiempos en tareas comunes como consultar el correo,
navegar por internet, redactar un texto o escuchar msica entre otras cosas a
personas en situacin de discapacidad visual porque era necesario dada la
27
ausencia de software realmente diseado a personas en situacin de

discapacidad visual.
Este proyecto se desarroll con el fin de estudiar y proponer soluciones a las

problemticas de las interfaces de software relacionadas con las personas con
28
1.3
1.3.1
OBJETIVOS
OBJETIVO GENERAL
Disear y desarrollar una plataforma que permita facilitar la interaccin humano

computador en personas en situacin de discapacidad visual en Colombia.
1.3.2
OBJETIVOS ESPECFICOS
Disear y describir una interfaz grfica que facilite a las personas en
situacin de discapacidad visual la interaccin humano computador.
Desarrollar y documentar una plataforma de aplicaciones de tipo software

que permita usar recursos del computador cmodamente a personas con
Crear y registrar una solucin de tipo software que permita a las personas
ciegas navegar por internet fcilmente.
29
2.
CAPITULO II: MARCO TERICO O

REFERENTES CONCEPTUALES
2.1
ANTECEDENTES
Los temas de accesibilidad no son nuevos, desde hace muchos aos se vienen
planteando soluciones a los problemas de acceso de recursos por parte de las
personas con diferentes discapacidad.
2.1.1
HISTORIA
Grecia
Cuando se empez a estructurar Grecia, los lderes en ese entonces pensaban
que las discapacidades eran algo que limitaban su desarrollo socio-cultural y
econmico, por lo cual sacrificaban a las personas que padecan alguna
deficiencia.
30
Es tan as que los arrojaban desde el Monte Taigeto para producir su defuncin.
Ms tarde el filsofo Aristteles en el siglo IV A.C. trat de investigar estos temas
pero
luego
Digenes,
Hipcrates
Galeno
investigaron
discapacidades
relacionadas con la salud mental del cerebro.
Aunque en Atenas se creaban lugares casi sagrados, donde se trataban a las

personas que eran consideradas por ellos distintas, lugares bellos y saludables
para su tratamiento.
Egipto
Tenan tratos similares con personas que no eran de la realeza, pero las personas
que eran importantes eran tratados con frulas para sus fracturas que indicaban el
desarrollo en el tema de la rehabilitacin.
Hebreos
Los antiguos hebreos no tenan consideracin con las personas discapacitadas,
pues crean que eran personas llenas de pecados; No eran aptas para participar
en ritos religiosos y por el contrario eran separadas de la sociedad.
31
Al pasar el tiempo los hebreos reconsideraron esto y el concepto de discapacidad

se traslado a que eran creados en semejanza a Dios segn los libros sagrados.
2.1.2
BASES TERICAS
Concepto accesibilidad
Segn el libro Accesibilidad de los contenidos web la accesibilidad primero se
plante como la facilidad de acceso a espacios fsicos en un contexto geogrfico.
Con la llegada de la era tecnolgica, la accesibilidad ya no es del tipo geogrfico si

no se ampla a la forma como las personas acceden a la multimedia y el hipertexto
sin ningn problema y en igualdad de condiciones, sea cual sea la discapacidad
que tenga.
Cito el texto donde se plasma el concepto:
Se define accesibilidad como la facilidad de uso de forma eficiente,

eficaz y satisfactoria de un producto, servicio, entorno o instrumento por
personas que poseen diferentes capacidad. Por lo tanto accesibilidad
electrnica hace referencia a que los productos y servicios electrnicos
32
puedan ser utilizados por los usuarios con efectividad, eficiencia y

satisfaccin en un contexto de uso determinado 2
Concepto de ceguera
Las personas con ceguera son aquellas que no tienen ninguna respuesta visual en
su cerebro, por lo tanto no perciben el mundo por medio de sus ojos.
Al no tener percepcin del mundo exterior por medio de sus organos visuales, se
desarrollan otros sentidos para poder recibir informacin y a su vez comunicarla.
Concepto de baja visin

A diferencia de la ceguera, la baja visin es una caracterstica que si bien la
persona tiene problemas para identificar su entorno de forma visual, esta tiene un
residuo de capacidad para obtener informacin por medio de sus ojos, lo que
quiere decir que si puede observar pequeas seales del exterior, pues esta
persona no es ciega.
2 Pablo Lara Navarra y Jos ngel Martnez Usero [Internet]. La accesibilidad de los contenidos web. Editorial UOC.
Barcelona Espaa; 2006 [citado 22 diciembre 2014]. Pgina 9. Disponible en: https://books.google.es/books?
id=5hOIl_gHpFYC&lpg=PA9&dq=qu%C3%A9%20es%20accesibilidad&pg=PA9#v=onepage&q=qu%C3%A9%20es
%20accesibilidad&f=false
33
Las limitaciones son similares a la ceguera pero tienen la ventaja de utilizar otro
tipo de alertas para recibir informacin como lo son los colores fuertes o luces
parpadeantes.
Ayudas tecnolgicas para personas ciegas

El lenguaje Braille consiste en una serie de puntos fsicos que permiten a las
personas ciegas obtener informacin y mensajes de texto mediante el tacto, los
puntos indican letras y estos a su vez en grupo forman palabras donde permiten
comprender prrafos y textos de una manera fcil y sin complicaciones.
El tacto es realizado mediante los dedos de la mano y est conformado por 6

puntos binarios (Activo e inactivo) y sus combinaciones representan letras y
nmeros.
En el mbito tecnolgico existen teclados que traducen textos mostrados en la

pantalla del computador en braille fsico, mediante pequeos dispositivos
mecnicos.
34
Figura 2-1:Alfabeto braille [10, 7].
Tomado de: http://www.clinicabaviera.com/blog/mundo-para-ver/educacion/braile-leer-con-lasmanos/
Otra solucin al problema de la comunicacin en la PC son los lectores de

pantalla, que convierten en audio todos los textos que existen en una interfaz de
software. Por ejemplo si una persona ciega accede a un sitio web de noticias, este
software leer los ttulos, prrafos, enlaces y dems elementos del navegador.
Los programas que hay para esta solucin auditiva van desde privativos como el
JAWS hasta Open Source o Cdigo libre como ORCA patrocinado por la fundacin
GNOME.
35
Ayudas tecnolgicas para personas con baja visin

En el caso de las personas con baja visin se manejan otro tipo de herramientas,
por ejemplo como lo son los magnificadores de pantalla; que se refieren a
programas que aumentan de tamao una parte de la pantalla cual lupa en
documento fsico.
Cabe recordar que las personas con baja visin pueden usar las herramientas
para personas ciegas por comodidad o costumbre.
Tambin
existen
herramientas
del
sistema
operativo
como
lo
son
las
configuraciones de accesibilidad. Esto se refiere a temas personalizados que

mejoran la apariencia y convierten los elementos grficos del sistema operativo en
colores con alto contraste, Esto con el fin de que pueda ser ms fcilmente
identificados en pantalla como lo muestra el grfico:
36
Figura 2-2: Captura tema en alto contraste Ubuntu 14.10.
Captura de pantalla tomada de Ubuntu 14.10 en interfaz de alto contraste, crditos de la interfaz
Canonical, Gnome 2014 Licencia GNU
Concepto de usabilidad
La usabilidad aunque es un termino nuevo y en el espaol no existe; es una
palabra usada para indicar la facilidad de uso de las cosas, en el caso del software
se refiere a la forma como una interfaz y las tareas se simplifican para buscar que
las personas tengan una experiencia agradable cuando usen dicho programa.
El concepto de usabilidad tambin se traslada a las cosas fsicas, por ejemplo si

un vaso para tomar chocolate tiene a sus lados formas ondulares para que los
dedos lo agarren mejor, este vaso tiene una usabilidad grande, pero si por el
37
contrario es liso y dificulta la accin de tomar bebidas pues su diseo es poco

usable.
Diferencia entre accesibilidad y usabilidad

Se tiende a confundir estos dos trminos. Mientras que la accesibilidad se refiere a
cmo las personas pueden acceder de manera equitativa a las cosas, la
usabilidad se relaciona con la forma cmo las personas se le facilita usarlas.
Todos deberamos aprender a ser accesibles y usables, desde el abogado hasta

los escritores, ya que nuestro trabajo siempre va a la comunidad y no a un sector
definido por ms especialistas que seamos.
Niveles de discapacidad visual

Se manejan 3 tipos de discapacidad visual, los cuales se clasifican de acuerdo al
nivel de afectacin de la visin:
El primer nivel es llamado Leve y es una discapacidad que le permite a las

personas desarrollar sus actividades cotidianas y es la ms comn por edad y
herencia.
38
Mientras que el segundo nivel es la discapacidad visual moderada en la que ya

afecta su desempeo diario pero puede valerse de otras formas para suplir la
afectacin; por ejemplo bastones, gafas, lentes de contactos entre otros.
Y la tercera discapacidad visual es del tipo grave donde necesita de la ayuda de

los dems para poder ejecutar funciones diarias, por ejemplo animales o personas
guas, es de los tipos ms fuertes dado que la persona afectada se siente
golpeada en su ser, para lo cual debe desarrollarse una terapia de rehabilitacin
ms intensiva.
39
2.2
ESTADO DEL ARTE
Las interfaces para las personas con discapacidad visual ha sido desarrollado por
muchos aos y a generado discusiones entorno a este.
Los diferentes estudios y documentaciones al respecto como lo es Mi interfaz de

acceso al ordenador3 del Gobierno de Espaa nos comenta qu tipos de
parmetros debe tener un software en relacin con su interfaz, para poder ser
accesible a personas ciegas o con discapacidad parcial.
Por ejemplo se sugiere usar un alto contraste en las interfaces. que refiere a la
propiedad de un color para hacerse notar sobre el otro; entre ms contraste mayor
ser la diferenciacin y esto permitir leer los textos con facilidad o identificar
elementos de la interfaz.
La teora del color la podemos encontrar en el libro titulado La teora del color 4
de Anibal de los Santos en el que nos explica cmo se componen los colores, las
armonas de los colores y sus clasificaciones. Esto es importante porque as
3 Dolores Abril Abadn, Santiago Gil Gonzlez y Margarita Sebastin Herran [Internet]. Mi interfaz de acceso al ordenador.
Editorial CEAPAT - IMSERSO. Madrid Espaa; 2013 [citado 23 diciembre 2014]. Disponible en:
http://www.ceapat.es/InterPresent2/groups/imserso/documents/binario/interfazacceso.pdf
4 Anibal de los Santos [Internet]. Teora del color. Editorial GRUPO IDAT. 2013 [citado 23 diciembre 2014]. Disponible en:
http://adelossantos.files.wordpress.com/2010/10/teroria-del-color.pdf
40
identificamos cules tienen mayor contraste con relacin al negro que es el color
que se sugiere.
Existe un artculo cientfico llamado Positive Display Polarity Is Advantageous For

Both Younger And Older Adults5 en el cual, se discute que el contraste de colores
por ejemplo negro blanco puede ser perjudicial para la salud de jvenes y
adultos.
Todo el conjunto de investigacin y desarrollo con relacin a la accesibilidad, lleva

por nombre Tiflotecnologa, que en pocas palabras es el concepto relacionado con
la adaptacin de la tecnologa, a las personas en situacin de discapacidad; para
evitar traumatismos.
En relacin a software, existe una gran cantidad de programas informticos que

permiten la interaccin ms fcil de las personas en discapacidad visual. Uno de
ellos es el lector de pantalla, que es un programas de computadora diseados con
el fin de escuchar los elementos que estn en pantalla del sistema operativo; por
5 Cosima Piepenbrock*, Susanne Mayr, Iris Mund and Axel Buchner [Internet]. Positive display polarity is advantageous for
both younger and older adults. Institut fur Experimentelle Psychologie, Heinrich-Heine-Universitat. Dusseldorf Alemania;
2013
[citado
23
diciembre
2014].
Disponible
en:
http://www.psychologie.hhu.de/fileadmin/redaktion/Oeffentliche_Medien/Fakultaeten/MathematischNaturwissenschaftliche_Fakultaet/Psychologie/AAP/Publikationen/2013/Piepenbrock-2013-Positive_display_polarity_is_.pdf
41
ejemplo botones, ttulos y mensajes que son nombrados por medio de una voz
generada digitalmente.
Esta tecnologa cuenta con versiones libres como privativas, es la mejor opcin al
momento de la interaccin humano computadora para personas en situacin de
La limitante de este tipo de programas, es que necesita que el mensaje que se

quiere reproducir, est en modo texto, si el texto est en mapa de bits, la
aplicacin simplemente no mostrar ningn mensaje.
En los sitios web, como alternativa, las imgenes tienen descripcin de lo que se
muestra, algo que no se cumple siempre y que es una norma de la W3C que es la
que sugiere los estndares y protocolos relacionados con la web.
Para el caso del sistema operativo Microsoft Windows, tenemos Jaws, su uso es
privativo y toca pagar licencia, aunque en este momento el Ministerio de
Tecnologas ha puesto un gran presupuesto para adquirir totalmente gratuito el
software. Esta iniciativa se llama ConverTIC yest disponible para mayor
informacin en el sitio web http://www.vivedigital.gov.co/convertic/.
42
En el rea del Software Libre, tenemos el proyecto Orca, como lector de pantalla y
es totalmente gratuito para entornos Linux en todos sus escritorios, aunque
funciona mejor en Gnome. Su URL es https://projects.gnome.org/orca/ y en
distribuciones como Ubuntu se encuentra en el Centro de software.
Por otro lado, existe el software de Zoom o Maximizador de pantalla, que su

funcin es ampliar una porcin de pantalla, para que la persona con dificultad
visual pueda identificar mejor lo que est en el monitor, es una especie de lupa
virtual.
Las distribuciones Linux ms importantes tienen instalada esta herramienta. Para

Windows basta buscar en la barra de inicio Maximizador de pantalla para su
uso.
Tambin existe distribuciones Linux totalmente orientadas a las personas en
situacin de discapacidad parcial o completa, es el caso de Oralux y Vinux, las
cuales
se
pueden
descargar
de
los
sitios
web
http://oralux.net/
http://www.vinuxproject.org/ respectivamente.
Estas distribuciones son diseadas completamente para que la interaccin de la

persona sea sencilla, usando las herramientas que el software libre proporciona
para tal fin; por su puesto son gratuitas y con fines no lucrativos.
43
Para la relacin de los sentimientos y la parte psicolgica de las personas con

discapacidad visual, existe un libro llamado Soluciones para la baja visin 6 y lo
que nos aporta en la investigacin es poder entender desde los zapatos de la
persona ciega, cmo es su diario vivir y los diferentes cambios en su personalidad
y sentimientos.
6 Guillermo Arroyo [Internet]. Soluciones para la baja visin. Editorial Paratexto. Buenos Aires Argentina; 2014 [citado 23
diciembre
2014].
Disponible
en:
http://www.amazon.com/Soluciones-para-visi%C3%B3n-Spanish-Editionebook/dp/B005VFX772
44
3. CAPTULO III: METODOLOGA
Para el proyecto se us una metodologa gil propia, la cual extrae conceptos de

otras como Kanban, XP, Scrum y PSP. La decisin se tom a raz que el desarrollo
era unipersonal.
En casos en los cuales existe un grupo de trabajo, las metodologas permiten

mayor organizacin a la hora del desarrollo de software, pero en este proyecto se
determin que al usar una metodologa en la cual no existe un cliente con el
cual discutir cambios si no asesores, el tema cambia dado que en algunos casos
los modelos se rompen.
Al tomar lo mejor de Kanban, la organizacin de Scrum y la facilidad de XP y PSP

se permiti avanzar con gran velocidad en el desarroll.
45
La organizacin se dividi en 2 partes, lo primero era desarrollar las pautas

grficas (Framework Grfico Origamy). Luego se cre la plataforma Adesk para
poder aplicar el framework grfico.
Como por ltimo se cre la tecnologa AWA la cual incluye los dos desarrollos
anteriormente mencionados, cerrando el crculo de produccin e investigacin.
En cada uno de los componentes se describe el desarrollo de la metodologa.
3.1
3.1.1
FRAMEWORK GRFICO: ORIGAMY
INTRODUCCIN
Las interfaces grficas permiten interactuar con un dispositivo mediante grficos

en una pantalla o monitor; Son comunes en los equipos de nueva generacin
como tablets, celulares, porttiles, electrodomsticos y otros que hacen parte de la
era digital.
Origamy naci de la idea de disear pautas para una interfaz grfica que permita
brindar a las personas con baja visin usar un dispositivo electrnico con facilidad,
sin depender de configuraciones extra en el sistema operativo y de paso que los
programas y sitios web que la usen sean accesibles.
46
Lo importante de este apartado en la investigacin es la documentacin para que

la comunidad pueda usarlo de forma gratuita, ya que esto beneficia a las personas
con baja visin.
3.1.2
METODOLOGA
DE
DISEO
USADA
DESARROLLAR EL FRAMEWORK GRFICO ORIGAMY
PARA
La metodologa usada para el framework es lineal, porque se proporcionaba

facilidad y ahorro en tiempo cuando se investigaba y desarrollaba.
Estos fueron los pasos que se ejecutaron:
1. Anlisis
2. Diseo
3. Implementacin
4. Evaluacin
Anlisis
El anlisis corresponde al primer paso de la metodologa, en la cual se tuvo en
cuenta las interfaces existentes de los diferentes sistemas operativos para PC y
47
Porttiles como lo son Windows 7, Ubuntu 14.10, MacOS Leopard y algunos de

antao como WebOS y OS2.
El anlisis arroj la identificacin de 5 elementos fundamentales en todas las

interfaces:
Barra de tareas
Reloj
Botn de inicio o arranque
Botn de cerrar aplicaciones
conos de aplicaciones
Con estos elementos se pudo desarrollar un esqueleto de la aplicacin el cual est

descrito en el concepto del Framework.
Adems se investig acerca de los colores ptimos para una interfaz accesible
basados en la norma WCAG7.
7 W3c.org [Internet]: World Wide Web Consortium; 2008 [actualizado 11 Dic 2008; citado 30 Dic 2014]. Disponible en:
http://www.w3.org/TR/WCAG20/
48
Diseo
El diseo estuvo asesorado del diseador grfico Hammer Chicaiza, el cual tiene
gran experiencia en interfaces de usuario y usabilidad. Tambin se bas en los
conocimientos
expuestos
sobre
usabilidad
accesibildad
en
el
sitio
http://www.nosolousabilidad.com, biblioteca de contenidos cuando se trata de

temas relacionados. En el diseo se realizaron varios wireframes 8 los cuales
fueron corregidos hasta llegar a una versin estable que permitiese pasar a la
siguiente fase. A continuacin los wireframes y sus versiones:
Wireframes versin 1.0:
Figura 2-3: Wireframe v1.0 figura 1
Wireframe diseado por Andrs Giovanni Lara Collazos - 2005, bajo licencia GNU
8 Los wireframe son dibujos que permiten a los desarrolladores de un proyecto plasmar una interfaz grfica, con los
mnimos posibles. Deben ser lineas, simbolos y colores muy bsicos, aunque pueden ir avanzando de nivel por lo cual
agregan nuevas propiedades hasta llegar a un punto ptimo y desarrollado.
49
Wireframes versin 2.0

50
Wireframe diseado por Andrs Giovanni Lara Collazos bajo licencia GNU
Wireframe diseado por Andrs Giovanni Lara Collazos bajo licencia GNU
51
Wireframes versin 3.0

Figura 2- 8: Wireframe v3.0 figura 1
52
Implementacin
La implementacin fue realizada posteriormente en el desarrollo de la plataforma
Adesk, dado que no existe forma de realizarlo sin visualizar cambios directamente.
Para conocer los resultados sugerimos desplazarse al punto 3.2 relacionado con
la plataforma Adesk y sus respectivos resultados.
Evaluacin
En la evaluacin se ejecut la plataforma Adesk y sobre esta se realiz 2 tcnicas:
Tcnica Baja visibilidad

Para esta tcnica, el evaluador de la interfaz cerr los ojos, hasta estar totalmente
sin visibilidad.
Mientras cerraba los ojos en un lapso de 10 minutos, iba describiendo si en el

transcurso mantiene visibilidad ptima de la interfaz y sus elementos.
53
Figura 2-10: Tcnica Baja visibilidad
Tomado de: Openclipart - 2015
Los resultados para la ltima versin del framework fueron ptimos, aunque hubo
ajustes en los colores. Se reemplaz totalmente los colores Azul oscuro por
Azul claro y el Amarillo se mantuvo.
Tcnica Blanco y negro

En el mundo de la discapacidad visual, existe personas que son daltnicas, lo que
indica que no pueden identificar claramente los colores o son confusos. Para estos
casos es recomendable usar colores con alto contraste. En este caso se tom una
captura y se convirti a tipo monocromtico en colores blanco y negro.
54
Figura 2-11: Tcnica Blanco y negro
Como se pudo observar la prueba arroj resultados positivos. La interfaz en

blanco y negro era visible y de fcil ubicacin para los elementos. Por otro lado se
descart que los colores no fueran los adecuados en el diseo.
55
3.1.3
CONCEPTO
La idea de la interfaz Origamy vino del arte de manipular el papel para crear
formas fantsticas simplemente doblndolo. Cada doblez crea vrtices que son
fciles de visualizar.
Se traslad el concepto a las interfaces grficas para aplica de forma similar y

para usar grillas donde va el men y el contenido de la aplicacin.
Interfaz general
La interfaz se compuso de 2 columnas que permiten identificar 2 tipos de
navegacin: simple y avanzada; con lo que se le aport accesibilidad la cual se
ampli ms adelante.
56
Figura 2-12: Diseo columnas Origamy
Colores generales
Los colores de las aplicaciones diseadas con Origamy deben ser oscuros en su
fondo, mientras que los bordes, botones y elementos clickeables deben tener
colores blancos o que generen gran contraste.
Para entender el contraste, debemos mirar el siguiente grfico, el cual muestra

qu colores son ms visibles y cuales no para los humanos:
57
Figura 2-13: Rango colores y su visibilidad9
Tomado de: http://www.educando.edu.do/articulos/estudiante/el-ojo-humano-y-otros-sistemasvisuales/
como se pudo ver los colores que ms llaman la atencin a los humanos son: el
verde, amarillo verdoso y el amarillo; los cuales sirvieron para indicar que un
elemento de la interfaz debe requerir atencin o sobresale sobre los dems en el
framework.
9 Anibal de los Santos [Internet]. Teora del color. Editorial GRUPO IDAT. 2013 [citado 23 diciembre 2014]. Disponible en:
58
El contraste es la propiedad de los colores que permite diferenciarse entre ellos,

por ejemplo el color blanco tiene un gran contraste frente al negro. Y cmo se
sabe si un color frente a otro tiene un gran contraste?, la solucin a este
cuestionamiento es una frmula matemtica que nos arroja un coeficiente de
contraste.
Coeficiente de contraste
El coeficiente de contraste es un nmero que permite saber si 2 colores tienen un
buen contraste para personas con baja visin, est basado en colores RGB 10:
( Rojo299)+(Verde587)+( Azul114)
100
La anterior frmula se aplica al color de fondo, para el color del texto o de los
elementos se usa igual.
En un ejemplo ms claro, se us los colores #FFFFFF (Blanco) y #000000 (Negro)

con sus respectivos valores en RGB que seran blanco (255,255,255) y negro
(000, 000, 000):
10 RGB es un estndar de color, basado en sus siglas en ingls: Red / Green / Blue; que permiten lograr cualquier color
visible por los humanos.
59
Para negro:
(0299)+(0587)+( 0114 )
=0
1000
Para blanco:
(255299)+(255587)+(255114 )
=255
1000
Si el primer color es mayor a 125 y la resta da menos de 500, quiere decir que
este color tiene un buen contraste para personas con baja visin.
En este caso la resta da 255, lo que confirma la teora que el blanco y el negro son
colores perfectos en contraste.
Paleta de colores de Origamy

A continuacin los colores que se sugieren para las aplicaciones basadas en
Origamy que a su vez estn basado en las normas de la WCAG 11 2.0 (Web
Content Accessibility Guidelines) o en espaol Gua de accesibilidad para
contenido web:
11 W3c.org [Internet]: World Wide Web Consortium; 2008 [actualizado 11 Dic 2008; citado 30 Dic 2014]. Disponible en:
60
Tabla 2-1: Paleta de colores Origamy
Cdigo
Nombre
Funcin
Color
hexadecimal
Blanco
Controles
#FFFFFF
Cyan
Cursor encima
#1AEBFF
Amarillo
Seleccionado
#FFFF00
Texto para fondo

Blanco
#FFFFFF
negro
Texto para fondo
Negro
amarillo, cyan y
#000000
blanco
La anterior tabla nos permiti identificar 4 elementos bsicos: el fondo, control

(Checkbox, input, selectbox, button, etc), el evento activo y el evento cursor
encima.
Es necesario indicar cada estado para que la persona con baja visin pueda
ubicar fcilmente: los elementos en la interfaz, los colores del cursor encima y
activo son los que ms se realzan en la interfaz; pues su funcin es ser ms
fuertes para que llamen la atencin del usuario.
61
3.1.4
DISEO DE CONTROLES
Los controles son elementos que permiten realizar acciones sobre el programa,
por ejemplo para una aplicacin de reproducir audio existen botones como ir atrs
o adelante, pausar cancin o reproducirla entre otros.
Los controles cuando no estn activos deben ser de color blanco, cuando se pasa
el cursor por encima deben de cambiar al color cyan, mientras que cuando est
activo o seleccionado deben cambiar al color amarillo, a continuacin un ejemplo:
Figura 2-14: Ejemplo estados control
Interfaz diseada por Andrs Giovanni Lara Collazos - 2005, bajo licencia GNU
62
Como se puede observar, el color amarillo simboliza que el botn Reproducir

est seleccionado, mientras que el botn Pausar tiene el cursor encima. Los
dems botones estn sin seleccionar o no tienen el cursor sobre ellos.
Profundidad, bordes y redondeado

La interfaz Origamy sugiere que los controles deben estar con diseo plano 12,
pues la persona con baja visin no notar los adornos adicionales que el elemento
lleve, por ejemplo sombras o degradados, puesto que su rango de identificacin
visual es limitado.
Figura 2-15: Ejemplo de un listbox con Origamy
12 Un diseo plano es aquel que no contiene degradados y evita las sombras al mximo, priorizando el contraste.
63
El usuario identificar fcilmente las zonas donde debe hacer click, en el ejemplo
anterior se puede observar la cancin California seleccionada, tambin se puede
localizar una barra de desplazamiento la cual puede arrastrar y ver ms contenido.
Se sugiere los bordes redondeados ya que da mayor elegancia a los controles,

adems que estandariza los controles, puesto que la persona con baja visin
sabr que todo elemento que tiene bordes redondeados es para usarse.
Espacio entre controles

El espaciado entre controles es necesario para que la interfaz se note limpia y no
saturada de elementos en un solo lugar. El espacio sugerido debe ser de mnimo
40 px para grupos de elementos y el doble para indicar el inicio de otro grupo o un
elemento o control:
Figura 2-16: Ejemplo grupos de botones
64
Un grupo de botones es considerado un elemento, se debe evitar controles

continuos ya que confundiran al usuario.
Animaciones y transiciones
Las animaciones en este contexto no aportan mucho adems de dificultar la
ubicacin de los controles, por ejemplo no se debe usar un botn que aparezca de
la nada pues la persona podra desubicarse.
Se sugiere que los botones sean estticos, as el mapa mental de la persona con
baja visin ser mejor, sabr dnde encontrar siempre los controles y no perder
tiempo buscndolos.
Tipografa, tamao del texto y colores

La tipografa que se sugiere para las aplicaciones es Droid Sans, en primer lugar
es de licencia libre, por lo cual su uso es de tipo libre y en segundo lugar es una
tipografa que permite ahorrar espacio a los costados, esto beneficia en el ahorro
del tamao de los controles:
65
Figura 2-17: Captura fuente Droid Sans
Tomada
de:
http://www.clinicabaviera.com/blog/mundo-para-ver/educacion/braile-leer-con-las-
manos/
Esta tipografa es muy legible. Adems de la tipografa el texto debe tener un estilo
llamado Negrita o Negrilla que consiste en letras ms rellenas sin ocupar
espacio excesivo y sin perder legibilidad.
El tamao de la letra es relativo ya que la interfaz se adapta segn la

configuracin que se le de, por ejemplo entre ms zoom tenga la aplicacin pues
se vern ms grandes las letras; pero el tamao de texto desde el cual debe partir
el escalado es de 30px.
66
El color que se sugiere para los colores de fondo amarillos, blancos o cyan es
negro (#000000), mientras que para elementos que tengan color de fondo negro,
se sugiere el color blanco, pues si se usa un color amarillo o cyan no se van a
diferenciar, dado que el ancho de las letras es reducido y para el ojo humano entre
menos espacio exista, menos se diferencian los colores.
3.1.5
CONTROLES
Los controles para Origamy deben ser fciles de usar adems de tener un gran
tamao. Tambin la interactividad debe ser de manera en que no se escondan
elementos, por ejemplo se sugieren selecbox con formas de lista.
Aqu se explica algunos controles
Input
Figura 2-18: Ejemplo cuadro input
67
El control Input sirve para recibir informacin de tipo texto. Los colores que se
deben manejar en el tema principal son:
Borde blanco y grueso
Fondo negro con relacin a la interfaz
El control input es de los ms importantes, posiblemente el ms conocido en

interfaces y sitios web.
Hay que indicar que por ninguna razn se debe usar texto de sugerencia dentro
del cuadro de texto, esto podra confundir a la persona parcialmente ciega y hacer
pensar que ya se encuentra con contenido.
Botones o buttons
Figura 2-19: Ejemplo grupo botones
68
Los botones deben ser de color blanco, con bordes redondeados y texto negro,
esto para facilitar el contraste. Al pasar el ratn debe tomar este aspecto:
Figura 2-20: Ejemplo botn llamando la atencin
69
Cuando un botn es clikeado, para indicar que est seleccionado se usa el color
amarillo, esto indica que est en otro estado.
Listbox
Los listbox son listas donde se puede seleccionar una opcin o varias
dependiendo de la funcin que deba realizar.
Los listbox en el caso de Origamy deben tener apariencia parecida a los input pero
permitiendo resaltar la opcin que se selecciona de la lista.
La seleccin debe ser amarilla, y las opciones en fondo negro con letras blancas.
70
Figura 2-21: Ejemplo listbox
71
3.1.6
COLUMNAS INTERFAZ ORIGAMY
La interfaz Origamy est planeada para que la persona con deficiencia visual
siempre tenga en el mismo lugar los mens y el contenido. Esto ahorra tiempo en
el momento de realizar la interaccin adems de mejorar la usabilidad del software
o sitio web.
Concepto de diseo a 2 columnas

Las dos columnas para una aplicacin accesible se centran principalmente en los
sitios web en la internet, la razn es que los mens que no se usen continuamente
no deben estar al lado derecho de la pantalla ya que el ratn por lo general se
ubica en el lado derecho debido a que el scroll o barra de desplazamiento en la
mayora de las ocasiones se encuentra tambin al lado derecho y no izquierdo,
salvo en algunos casos como webs o aplicaciones en otro lenguaje donde se
escriba de derecha a izquierda.
72
Figura 2-22: Ejemplo men izquierda
Captura de pantalla tomada de Gmail, crditos de la interfaz Alphabetic 2014
Como observamos, el men de la webapp Gmail se encuentra al lado izquierdo,

porque su interactividad aunque es importante no representa algo necesario o vital
al momento de manejar la interfaz.
En el caso de que el contenido requiera la interaccin repetitiva, debe ir a la
derecha.
En estos casos, el contenido siempre se ubicar al lado derecho, donde se

concentrar la mayora del tiempo invertido en el trabajo sobre la aplicacin.
Las dos columnas se deben mantener constante, salvo a mensajes de ayuda,

alerta o cuadros de mensaje que requiera que todo salga de su normal accin.
73
Este concepto surge luego de analizar interfaces como Twitter o Facebook donde
se maneja gran parte del tiempo n men principal en la izquierda y el contenido en
la derecha.
Figura 2-23: Ejemplo aplicacin Jamendo a dos columnas
En la anterior captura de pantalla, se puede apreciar el men que siempre estar

en el mismo lugar y se sugiere que nunca cambie mientras la aplicacin est
abierta, para que los usuarios no sufran confusiones.
74
3.1.7
COLUMNA DE MEN
Men de la aplicacin
Este elemento de la interfaz est pensado para ser el resumen de todas las
acciones, botones y controles que pueda usar una persona ciega en una
aplicacin.
Aunque es una ayuda para personas con baja visin, el men es exclusivo para
personas completamente ciegas, la razn es que contiene acciones que no
necesitan interaccin directa sobre el contenido.
Por ejemplo en una aplicacin para leer archivos PDF, en el men de la aplicacin
no debe existir opciones como Zoom o ampliar pgina, esto debido a que la
columna de contenido es la encargada de suplir esa labor.
Pero en el men s debe existir opciones como Escuchar men, siguiente pgina,
pgina anterior, abrir archivo, escuchar pgina y otras funciones que son
exclusivas de personas que no pueden ver el contenido.
Figura 2-24: Captura aplicacin para escuchar documentos PDF
75
En la captura 2-15 podemos observar cmo el contenido est separado del men
principal, este ltimo brinda un acceso rpido a todas las opciones de la
aplicacin.
Accesos rpidos del men

El men contiene accesos rpidos a las funciones para que no sea demorada la
interaccin y facilite la recordacin de los comandos.
La primera opcin ser siempre Escuchar men asignada a la tecla F1. Es
necesario tener siempre presente esta primera opcin, puesto que es la forma
como se puede escuchar el men principal.
76
Consecuente con la norma, existen funciones asignadas para 11 opciones ms,

hasta llegar a F12.
Se sugiere que la ltima opcin sea la de salir del programa o aplicacin, esto en
cuestin de aplicaciones pero en sitios web no debe existir la funcin de salir. Si es
un sitio web con login ah debe estar ubicada la opcin de logout.
3.1.8
COLUMNA DE CONTENIDO
El contenido es donde se ubica la mayora de la interaccin de la aplicacin o sitio

web, en este se encuentran las opciones grficas y los controles de interaccin.
As se estandariza la organizacin y para la persona con visin parcial es una gran
ventaja, al tener siempre una constancia en interfaces.
El contenido debe tener mucho espaciado entre los controles o elementos, con
esto se logra que la interfaz no quede sobre - recargada y sea ms limpia, lo que
no cansa la vista y se ve ms atractiva.
77
Figura 2-25: Captura aplicacin para escuchar documentos PDF
78
3.1.9
TTULOS
Los ttulos de la aplicacin deben ser de color amarillo, un color que se rezalta con
facilidad sobre el negro de fondo de la aplicacin, se debe evitar sobre elementos
blancos, ya que su contraste sera mnimo.
3.1.10
LICENCIA
La interfaz origamy es una gran ayuda cuando se vayan a disear programas de

tipo accesible para personas en situacin de discapacidad visual, ahorrando
tiempo en pensar cmo debe ser los botones, mens, barras de desplazamiento,
cuadros de informacin y dems.
El Framework se libera bajo licencia GPLV3 13 (GNU General Public License), lo

que indica que puede ser modificado, renderizado, redistribuido y crear nuevos
productos a base de este proyecto.
13 Licencia GPLV3 [Internet]: GNU Org; 2007 [consultado 2 enero 2015]. Disponible en: http://www.gnu.org/licenses/quickguide-gplv3.html
79
La razn para abrir a la comunidad este esfuerzo es para que se beneficie desde
la persona con menos recursos hasta la que quiera aportar un granito de arena a
la comunidad.
3.1.11
CONCUSIONES
1. El software puede facilitar la vida de las personas, nosotros desde nuestra

profesin (Ingeniera de sistemas informticos) somos artistas del cdigo, se
puede crear lo inimaginable como lo que siempre han necesitado las personas de
diferentes poblaciones.
Este arte debe ser encaminado a crear herramientas que ayuden y no que
destruyan, este proyecto pretende dar un paso hacia las aplicaciones accesibles
que en un futuro sern exigidas para la igualdad y la equidad de las personas en
situacin de discapacidad visual.
2. El Framework Origamy, est diseado para ser usado por personas en situacin
de discapacidad visual y para poblacin con dficit de atencin. Como por nios
que inician el aprendizaje en la tecnologa.
80
Todas las opciones estn simplificadas para que la curva de aprendizaje sea
mnima y no exponencial como resulta en muchos casos en los sistemas
operativos, donde estn adaptados los mdulos para personas que puedan ver de
forma fluida.
3. Origamy espera que se siga desarrollndose, con nuevos estudios que aporten
nuevas cosas, falta an mucha investigacin acerca del tema de las interfaces
para personas en situacin de discapacidad visual.
3.2
3.2.1
PLATAFORMA DE APLICACIONES ADESK
INTRODUCCIN
Luego de haber desarrollado el framework grfico Origamy, procedimos a

implementarlo en una serie de aplicaciones para demostrar el poder de esta
herramienta, para posteriormente hacer pruebas y observar si en verdad se logr
lo que queramos.
Adesk significa Accessible Desktop o Escritorio accesible en espaol, y expresa

toda la funcionalidad que queremos con el proyecto de plataforma de software. Un
81
lugar donde las aplicaciones sean accesibles y de fcil acceso para personas
ciegas o parcialmente ciegas, que a un futuro se puede extender a otras
discapacidades.
La idea surgi una noche, cuando discutamos con algunos amigos acerca de la
accesibilidad y usabilidad de las aplicaciones, que por lo general no estn
diseadas para serlo.
El software se desarroll bajo Python y diseado para que las aplicaciones se

hagan en HTML5 con Javascript y CSS donde sean componentes fciles de usar
y livianos, siguiendo la tendencia de la mayora de sistemas operativos del
mercado.
3.2.2
METODOLOGA PARA EL DESARROLLO DE LA

PLATAFORMA DE APLICACIONES ADESK
La metodologa para desarrollar la plataforma fue lineal. Dado que nos permita
retroalimentacin. A continuacin el proceso:
82
Requerimientos
Anlisis
Diseo
Actividades
Requerimientos funcionales
Diagramas de casos de uso

Figura 2-26: Caso de uso 1, uso plataforma
Diagrama de caso de uso realizado por Andrs Giovanni Lara Collazos - 2015, bajo licencia GNU
83
Figura 2-27: Caso de uso 2, uso y desarrollo plataforma
Figura 2-28: Caso de uso 3, uso navegador web
84
Figura 2-29: Caso de uso 4, uso lector de PDF
Figura 2-30: Caso de uso 5 Tecnologa AWA
85
Requerimientos no funcionales
1. Se requiere una plataforma que permita por parte de las personas en

situacin de discapacidad visual usar los recursos del computador.
2. Se requiere que la plataforma permita ejecutar aplicaciones basadas en
estndares abiertos como HTML, CSS, Javascript y JSON.
3. Se requiere desarrollar aplicaciones bsicas para la plataforma Adesk que
permitan demostrar las funcionalidades del sistema.
4. Se requiere que las aplicaciones creadas usen y apliquen el framework
grfico Origamy.
86
5. Se requiere que las aplicaciones desarrolladas puedan usarse sin un

monitor o pantalla.
6. Se requiere que las aplicaciones sean auditivas, para que la interaccin sea
buena entre la persona ciega o parcialmente ciega y el pc.
Anlisis
Segn los requerimientos, se lleg a la conclusin de usar un sistema operativo
Linux, en base a su flexibilidad para modificar o usar recursos de manera fcil.
Para poder usar los recursos del sistema sin tener que crear un Kernel desde 0 o
un sistema operativo, se analiz que la plataforma fuera una capa superior dado
que con eso aseguramos compatibilidad con hardware y protocolos.
Al ser una capa del sistema operativo, podemos tomar recursos como conexiones
de red, servidores grficos, acceso a perifricos, etc. y concentrarnos en lo que de
verdad importa que es el puente entre Sistema Operativo y plataforma.
En primer lugar est la plataforma Adesk, en segundo lugar est Python como
lenguaje intermedio, el cual traduce al protocolo TCP-IP algunos recursos del
sistema que por seguridad estn desactivados en el HTML. Luego sigue el
87
software del sistema, este puede ser comandos de audio, accesos a perifricos
por medio de software, generacin de grficos, etc.
Siguiente est el sistema operativo en este caso Linux, el cual permite cargar la
plataforma. Ms abajo est el Kernel del sistema, el encargado de comunicar el
Sistema operativo con el Hardware.
Figura 2-31: Diagrama de capas
88
Diagrama de capas realizado por Andrs Giovanni Lara Collazos - 2015, bajo licencia GNU
Para el tema de conversin de texto a audio se us la capa 3 (verde) la cual es

Software del sistema y que tiene la finalidad de usar programas que estn
instalados. La aplicacin en Linux que permite la conversin se llama Festival.
89
Diseo
Sistema de archivos
Para este caso se us la idea de los sistemas Like Unix o Sistemas parecidos a
Unix. El sistema de archivos de Unix es muy organizado y permite expansibilidad
de una forma sencilla.
Las principales carpetas que podemos encontrar en este sistema de archivos son:
bin
etc
home
usr
La ventaja que nos da esta distribucin de carpetas es poder separar

configuraciones, datos personales, datos del sistema y archivos de las
aplicaciones.
90
Figura 2-32: Diagrama de sistema de archivos
Diagrama de sistema de archivos por Andrs Giovanni Lara Collazos - 2015, bajo licencia GNU
Comunicacin entre aplicaciones o sistema operativos

En el lenguaje de maquetado HTML, no se permite realizar conexiones o cargar
archivos directamente desde el sistema operativo. Todo esto debe ser realizado
por medio de la interaccin del usuario y manualmente.
Esto nos lleva a crear un concepto llamado Servidores de ejecucin, los cuales
nos permiten subdividir las necesidades y crear pequeos servidores como lo
91
hace los sistemas Unix Like, donde su filosofa es: Haz una cosa, pero hazla
bien.
Con esto separamos el acceso a los archivos, el acceso a las interfaces, el acceso
a los recursos del sistema, entre otros.
Para la comunicacin entre estos servidores se us el protocolo TCP-IP por medio

de servidores HTTP montados localmente y que transmiten por diferentes puertos
como el 61987, 61988, 80 entre otros.
Figura 2-33: Diseo de servidores de ejecucin
Diagrama de diseo de servidores realizado por Andrs Giovanni Lara Collazos - 2015, bajo
licencia GNU
92
Para obtener bases de datos u otro tipo de recursos utilizamos el estndar Json
que se ha vuelto muy comn en aplicaciones web y apps para celulares.
La ventaja de usar Json es que nos permite ahorrar tiempo en la conexin a

cualquier base de datos o recurso. Todo es transmitido por HTTP y TCP/IP.
Actividades
Tabla 2-2: Resultados prueba primera jornada
Actividad
Fecha inicio
Fecha fin
Costo
Se ley los
requerimientos
Anlisis de
y se analiz
requerimientos cmo se podra
resolver cada
uno
4 de agosto
2014
31 de agosto
2015
$3'000.000
Se redact el
concepto de
Adesk, el
anlisis y la
documentacin
1 septiembre
de 2014
Concepto
Adesk
Descripcin
21 octubre de
$3'650.000
2014
Se codific el
30 diciembre
Programacin concepto para 1 noviembre de
$20'000.000
Adesk
cumplir los
2014
de 2014
requerimientos
Pruebas y
encuestas
parte 1
93
Se puso a
prueba la
plataforma,
buscando
evaluar su
20 febrero de 21 febrero de $400.000

2015
2015
funcionamiento
3.2.3
CONCEPTO
El concepto de Adesk parte de simular los escritorios de los diferentes sistemas

operativos
que
hay
en
la
actualidad,
tomando
las
mejores
ideas
implementndolas para que puedan aportar una idea de accesibilidad mayor que
la que existe en cada uno de ellos.
Adesk parte de la idea de brindar un sistema para acceder a las principales

funciones del PC con aplicaciones adaptadas para las personas en situacin de
discapacidad visual parcial o completa, usando el framework grfico Origamy.
Adesk como Origamy estn pensados para ser de cdigo libre, as esperando que
la comunidad aporte sus conocimientos y mejoras al proyecto.
94
3.2.4
CONCEPTO SERVIDORES DE EJECUCIN
Los servidores de ejecucin son aplicaciones escritas en Python que permiten

interactuar con el PC desde interfaces web como lo son el lenguaje de etiquetas
HTML por medio de peticiones GET y POST 14 simulando en ocasiones servidores
REST.
En Adesk se manejan 3 servidores de ejecucin que son los que administran

archivos, cargan aplicaciones e inician la interfaz.
Figura 2-34: Diagrama de despliegue sistema Adesk
Diagrama de despliegue realizado por Andrs Giovanni Lara Collazos - 2015, bajo licencia GNU
14 Gmez, Joaqun Andreu [Internet]. Servicios en Red. Editorial Idetex. 2010 [citado 28 diciembre 2014]. Disponible en:
https://books.google.es/books?id=vhit3ZmGQPsC&lpg=PA147&dq=peticiones%20get%20y
%20post&pg=PA147#v=onepage&q=peticiones%20get%20y%20post&f=false
95
Peticiones API REST

En el mundo web de aplicaciones, para ahorrar infraestructura y facilitar la
interaccin con bases de datos y archivos, se ideo el modelo de API REST 15.
Creado en una tesis doctoral por Roy Fielding es un sistema donde todo el acceso
a un contenido de un servidor se accede mediante peticiones GET, POST, PUT y
DELETE simulando un CRUD con sus siglas en ingles: Create, Read, Update y
Detele; y en espaol Crear, Leer, Actualizar y Eliminar.
Todo esto se maneja por medio del protocolo HTTP y el servidor devuelve
respuestas de tipo JSON que son estructuras de datos que inicialmente las
manejo Javascript y luego se extendi a muchos lenguajes de programacin como
algo estndar por su facilidad.
API REST es una solucin para las aplicaciones que quieren funcionar como MVC
(Modelo, Vista, Controlador) separando la conexin a las bases de datos y siendo
indiferente la tecnologa de almacenamiento que se haya elegido, estandarizando
las respuestas en formato JSON y siendo ledas directamente desde cdigo HTML
por medio de Javascript.
15 De Vega Luna, Alberto [Internet]. Historias de developers. Amazon Digital Services. 2013 [citado 28 diciembre 2014].
Disponible en: http://www.amazon.com/historias-developers-Spanish-Edition-Alberto-ebook/dp/B00EG015NQ
96
Files.py
Files es el servidor de ejecucin encargado de procesar las consultas de los
archivos y carpetas de Adesk.
Se puede acceder a cualquier archivo o carpeta que est contenido en adesk y

permite editar cuando se desee. Funciona con peticiones POST y GET.
Programado en Python y corre en el puerto 61987, por ejemplo para acceder a

una carpeta llamada nuevos usaramos la siguiente url del api:
http://localhost:61987/home/
Files en este caso devuelve un cdigo Json:
Figura 2-35: Captura cdigo Json
97
Figura 2-36: Diagrama de clase para files.py
Appcenter.py
Es el servidor que permite el lanzamiento de las aplicaciones escritas en HTML,
CSS y Javascript contenidas en Adesk.
Su funcionamiento es bsico, se ejecuta junto a start.py y acompaa las funciones

que pueda tener la aplicacin. Con esto se garantiza que mientras se ejecute o
est abierta no se pierdan datos y se mantenga en memoria.
El appcenter tambin controla las ventanas y los botones en la barra de tareas del
entorno Adesk, similar al administrador de tareas de Windows pero con funciones
limitadas y reducidas.
Filtra los tipos de archivos admitidos por Adesk de forma que no se pueda
introducir cdigo malicioso y solo sean de tipo:
98
HTML
CSS
TXT
JSON
CSSA
OTF
SVG
PNG, JPG, JS
Figura 2-37: Diagrama del proceso de Appcenter.py
Diagrama del proceso realizado por Andrs Giovanni Lara Collazos - 2015, bajo licencia GNU
El puerto donde transmite Appcenter.py es el 61988 y se accede por medio de http

por localhost: http://localhost:61988
99
Otra funcin de appcenter es convertir cadenas de texto a audio por medio de la

librera Festival que se incluye en los repositorios de la mayora de
distribuciones Linux modernas.
El proceso de audio es una capa sobre el SO que recoge las palabras por medio
de GET (HTTP) e internamente ejecuta el comando festival texto a leer en la
consola Shell16 del sistema; al ejecutarse esta orden automticamente los
altavoces proceden a reproducir el audio que genera la librera.
Un
ejemplo
de
esta
peticin
es:
http://localhost:61988/audio/hola+bienvenido+a+adesk donde reproducira un texto

similar a: Hola bienvenido a adesk, esto con el fin de que por medio de
peticiones GET se pueda escuchar texto y no se deba recurrir a interactuar con el
SO, con esto se evita la ejecucin de cdigo malicioso desde el lenguaje de
maquetado HTML o Javascript segn el caso.
La ltima funcin de Appcenter.py es de cerrar aplicaciones, la forma sencilla de

ejecutar esto es por medio de una solicitud GET por medio de HTTP de la
siguiente forma: http://localhost:61988/stop/1
16 Espinar, Isaac Paneque [Internet]. Linux 4You! 2013 Espaol. 2013 [citado 29 diciembre 2014]. Disponible en:
https://books.google.es/books?id=jSECXTiZqvYC&lpg=PA29&dq=consola%20shell&pg=PA29#v=onepage&q=consola
%20shell&f=false
100
Donde Stop es la accin, y el numeral en este caso 1 es la primera ventana en

ejecucin, al realizarse esta consulta automticamente la aplicacin sale de la
memoria.
Figura 2-38: Diagrama de clase para Appcenter.py
3.2.5
LIST WINDOW (GESTOR DE VENTANAS)
bin/list_windows.py
El gestor de ventanas es una clase que permite administrar como su nombre lo
dice las aplicaciones abiertas de forma grfica en Adesk. Cuando se usa la clase
list_windows se est invocando el archivo bin/list_windows.py donde al ejecutarse
se tiene a disposicin mtodos como los siguientes:
new_window
show_click
101
El mtodo new_windows crea una nueva ventana y la enlista, asignndole un

nmero del 1 a N, siendo N infinito limitado por la memoria en el equipo.
Este array de nmeros y referencias se encuentra en list_windows y es gestionado

por las herramientas para arrays de Python.
Por otro lado show_click es el encargado de ejecutarse cuando la ventana es

llamada por medio del taskbar o barra de tareas en espaol, es un evento y como
tal es dado por una accin.
De manera paralela se maneja otra clase llamada window_object la cual es la

encargada de encapsular todo en un objeto capaz de contener la informacin de
una ventana de aplicacin Adesk y poder manipularla al mismo tiempo. Sus
mtodos son:
window
accesible_code
popup
audio
102
El mtodo window es el encargado de devolver el objeto con el cual se est

trabajando en formato Webkit, por la librera del sistema.
El mtodo accesible_code es el encargado de transformar el cdigo de las

webapps o pginas web que funcionan como aplicaciones. La forma como
funciona ser ampliado en el apartado dedicado a webapps pero su funcin en
resumen es tomar un cdigo html y aplicarle estilos CSS e instrucciones Javascript
para poder transformarlo en una interfaz de tipo Origamy.
Popup tambin es un mtodo, pero en este caso se ejecuta cuando se abre una
nueva ventana. La razn para esto es utilizar los Popups como medio de
comunicacin de las aplicaciones Adesk y el motor del sistema incluyendo el SO.
Para finalizar la descripcin de los mtodos, el llamado audio es utilizado con la

finalidad de transformar un texto a formato de audio, por medio de la librera del
sistema Festival.
Festival es una utilidad para sistemas Unix donde toma una serie de letras y
palabras y las convierte en audio, esto lo hace con una serie de algoritmos para
sonar lo ms parecido a una voz humana.
103
Para poder ejecutar aplicaciones de tipo Adesk, el sistema utiliza la librera Webkit
la cual es de cdigo libre y es usada por los navegadores como Koqueror o el
mismo Safari para Mac Os.
Esta librera fue usada hasta hace poco por el navegador Chrome pero debido a
diferencias polticas la marca Google decidi crear un fork llamado Blink siendo
hijo de Webkit pero diferencindose en cambios mnimos.
Hay ms alternativas a Webkit para trbajar proyectos basados en web, como por
ejemplo el motor del navegador Firefox llamado Greko pero este ltimo no tiene la
suficiente integracin con Python y fue por eso que se tom la determinacin de
usar el primer motor. Cabe recordar que ambos son cdigo libre.
A continuacin se presenta el diagrama de clase de las dos clases manejadas en

list_windows.py
104
Figura 2-39: Diagramas de clase para list_window.py
3.2.6
START.PY
Es un mdulo encargado de lanzar aplicaciones y gestionar el funcionamiento de

Adesk adems de ser el motor de la aplicacin, gestiona la ejecucin del corazn
y administrar qu se ejecuta al inicio.
Tambin est encargado de usar las libreras GTK, las cuales son necesarias para
renderizar la interfaz grfica e incluye de igual manera la librera Webkit.
Los mtodos que utiliza son:
Close
Theme
Windows
105
Taskbar
Popup
Background_load
Command_shell
El mtodo Close es el encargado de cerrar la aplicacin, dado que esta usa

Pipeline que en pocas palabras son tuberas virtuales las cuales se usan para
enviar y recibir informacin, as es como Close se encarga de cerrar cada una de
las conexiones abiertas y librera la memoria.
Theme tiene como funcin cargar los archivos necesarios para renderizar las
aplicaciones con los estilos requeridos por Origamy por medio de CSS y
Javascript.
Windows gestiona y recibe informacin de cmo se va a manejar las ventanas de

las aplicaciones, as que tiene el poder de cerrar y crear en memoria objetos de
tipo window como antes se ha mencionado.
Taskbar administra la informacin grfica y el reloj del sistema, haciendo un

puente entre el html y las peticiones GET de las aplicaciones e indicndole al
usuario qu ventanas estn abiertas y cules se van a cerrar.
106
El apartado Popup es un mtodo el cual se encarga de hacer llamados al

command_shell de la aplicacin cuando desde otro objeto se ejecutan popups.
Por otro lado, background_load carga el fondo en el escritorio de Adesk.
Cuando se ide Adesk se pens en crear una consola bsica que pudiera tener el
poder de ser llamada por cualquier aplicacin contenida en el sistema, as naci el
mtodo Command_shell donde por medio de comandos Adesk aplica acciones
dentro del sistema, los principales son:
app (open, close)
windows (select)
En prximas versiones se espera hacer una shell mucho ms poderosa,

gestionando energa, brillo, wifi, etc.
107
A continuacin el diagrama de clase para start.py
108
3.2.7
ESTRUCTURA DE ARCHIVOS DE ADESK
Adesk fue ideado a base de la estructura de archivos de los sistemas operativos

denominados Like Unix en otras palabras similares a Unix como lo son Mac OS,
Linux, Solaris o BSD.
Las principales carpetas son:
bin
etc
home
usr
La carpeta bin contiene los archivos necesarios para que el sistema se ejecute,
son inmutables y es donde se encuentra el mdulo list_windows.py. Esta carpeta
es importante para el sistema dado que guarda algunas aplicaciones que son
necesarias apenas arranca el sistema.
Por otro lado se encuentra etc, siendo una carpeta dinmica. Es donde se
guarda la informacin adicional para la ejecucin de las aplicaciones de Adesk, se
denomina dinmica porque apenas se instala algo en el sistema, esta carpeta
cambia.
109
Complementario a etc, se encuentra home. Es una carpeta en los sistemas

Like Unix que permite almacenar la informacin del usuario, as se logra la
separacin de los archivos del sistema y los documentos, datos, binarios y dems
que no hacen parte del sistema pero s son necesarios a la hora de manipular la
plataforma.
Es similar a la carpeta Mis documentos del sistema operativo Windows, la

ventaja de tener un directorio como home es que al momento de actualizar la
plataforma, los datos del usuario siguen intactos mientras que etc y las dems
carpetas pueden ser manipuladas sin comprometer la estabilidad o prdida de
datos.
Por ltimo se encuentra la carpeta usr, la cual se compone de 2 subcarpetas:

Figura 2-40: Captura de subcarpetas de la carpeta usr
110
Principalmente la labor de usr es de contener las carpetas de los programas

instalados en la plataforma Adesk, mientras que share contiene los estilos y
sonidos de la interfaz, esto con el fin de poder tener ms de una apariencia y ser
cambiada cuando el usuario desee.
Figura 2-41: Carpetas del sistema Adesk
111
3.2.8
ESTRUCTURA DE UNA APLICACIN ADESK
Las aplicaciones Adesk estn diseadas para usar tecnologas web como lo son el
HTML, CSS, Javascript e imgenes de tipo PNG, JPG, SVG; Tambin tipografas
para cambiar el aspecto de estas sin depender que estn instaladas en el Sistema
Operativo.
La libertad a la hora de programar las aplicaciones es mucha, aunque se debe

seguir los lineamientos de la interfaz Origamy. Por otro lado, al cargar una
aplicacin automticamente se abren los estilos predeterminados de Origamy,
esto se hace por medio de instrucciones HTML las cuales permiten renderizar los
botones, controles, bordes y dems. Paralelamente se incluyen las libreras y
modelos de Javascript dado que no podemos hablar de clases en este lenguaje
hasta la versin ECMAScript17 (ECMA-262) dado que est en fase experimental,
as que para asegurar la compatibilidad se decidi no tomar la alternativa a clases.
17 ECMA es una especificacin para Javascript, la cual estandariza todo al rededor de este lenguaje, esto surgi dado a la
guerra de navegadores (Internet Explorer y Netscape) donde cada uno daba su forma de ejecutar las instrucciones
Javascript, as creando incompatibilidad entre exploradores y por consiguiente doble cdigo.
112
Figura 2-42:Ejemplo de archivos precargados en las aplicaciones Adesk
Directorios bsicos de una aplicacin Adesk

Las aplicaciones Adesk tienen 3 carpetas fundamentales: css, img y js. En ellas se
almacenan los archivos necesarios para su correcto funcionamiento.
Figura 2-43: Captura directorios de una aplicacin Adesk llamada Jamendo
113
La carpeta css tiene como funcin almacenar los archivos de estilos de la

aplicacin, en ella debe existir como mnimo un estilo llamado basic.css e
incluirlo en la aplicacin.
En la carpeta img se almacenan las imgenes JPG, SVG, PNG y GIF. Las
imgenes bsicas contenidas en la carpeta son icon-black.svg y icon-white.svg;
siendo usadas en la aplicacin como los conos que identifican cuando sean
llamadas.
Por ltimo se tiene el directorio JS, que tiene como funcin almacenar los
archivos de tipo Javascript los cuales le agregan interactividad a la aplicacin. Es
necesario que se cree el archivo basic.js dentro del folder ya que permite declarar
los elementos del men.
Archivos iniciales
El
principal
archivo
que
debe
contener
una
aplicacin
Adesk
es
configuration.json, el cual tiene como funcionalidad guardar los datos de

configuracin de la aplicacin, como el nombre y descripcin entre otros:
114
Figura 2-44: Ejemplo de archivo configuration.json para la aplicacin Jamendo
El archivo index.html es el primero en ejecutarse cuando se abre la aplicacin,

tiene una estructura base que se debe respetar a menos que se busque que la
aplicacin no siga los estndares Origamy:
title
app
content
menu
basic
console
A continuacin un cdigo de ejemplo de un archivo index.html de una aplicacin

Adesk:
115
<html>
<head>
<metacharset="utf8"/>
<title>Ttulo</title>
</head>
<body>
<divid="app">
<divid="content">
<divid="menu"></div>
<divid="basic"></div>
</div>
</div>
</body>
<divid="console"></div>
</html>
Otro archivo necesario para el funcionamiento de las aplicaciones es js/basic.js,

en su interior se debe declarar los elementos bsicos del menu, un ejemplo es:
menu.add("Escucharmen");
menu.add("Atrs");
menu.add("Reproducir");
menu.add("Pausar");
menu.add("Siguiente");
menu.add("Salir");
116
3.2.9
APLICACIONES ENTREGABLES
Las aplicaciones que se desarrollaron para la plataforma Adesk son:
Aplicacin de bsqueda en la red Google

Esta aplicacin es una webapp, la cual se desarroll con el fin de hacer
bsquedas rpidas en la plataforma Adesk.
Est basada en la tecnologa AWA y permite un acceso directo a la versin web de

Google. Para ello se hace una conexin HTTPS la cual proporciona los resultados
con la interfaz ORIGAMY.
Figura 2-45: Captura de pantalla Webapp Google
Captura de pantalla, Adesk Webapp Google. Andrs Giovanni Lara Collazos - 2015, bajo licencia
GNU. Google Alphabetic 2015
117
Aplicacin Facebook
La webapp Facebook, permite acceder a la red social en su versin mvil con la
interfaz ORIGAMY, para tal labor se utiliz la versin para celulares dado que es la
que permite usar la web de forma menos pesada y con elementos ms bsicos.
Esta webapp permite chatear y visualizar fotografas, tambin dar like e interactuar
con las publicaciones de los contactos:
Figura 2-46: Captura de pantalla Webapp Facebook
Captura de pantalla, Adesk Webapp Facebook. Andrs Giovanni Lara Collazos - 2015, bajo
licencia GNU. Facebook 2015
118
Figura 2-47: Captura de pantalla, Facebook sesin iniciada
Captura de pantalla, Adesk Webapp Facebook. Andrs Giovanni Lara Collazos - 2015, bajo
licencia GNU. Facebook 2015
Como se puede observar en las capturas, la aplicacin permite visualizar el

contenido de Facebook de una manera accesible, dndole prioridad al texto y a las
imgenes.
Los controles no se pierden y se mantiene el contraste en cada uno de los

enlaces.
119
Aplicacin Jamendo
El proyecto Jamendo, es un sitio web donde se permite a las personas utilizar
msica con licencia libre; lo que quiere decir que cualquier persona puede
descargar, modificar, mejorar, copiar y compartir la msica que otros artistas
producen.
El fin del proyecto es que se deba pagar poco o nada por compartir y difundir el
arte auditivo, aprovechando esta idea se decidi crear una aplicacin que
permitiera utilizar las radios de Jamendo y que las personas en situacin de
discapacidad visual pudieran escucharlas.
Figura 2-48: Captura de pantalla aplicacin Jamendo
Captura de pantalla, Adesk Jamendo. Andrs Giovanni Lara Collazos - 2015, bajo licencia GNU.
Jamendo 2015
120
Los controles se usan de acuerdo a la interfaz Origamy, permite adelantar de

emisora, pausarla, devolverse y dems. Tambin se carga la cartula de la
cancin actual por medio del api de Jamendo en Json.
Figura 2-49: Captura pantalla aplicacin Jamendo controles
Captura de pantalla, Adesk Jamendo. Andrs Giovanni Lara Collazos - 2015, bajo licencia GNU.
Jamendo 2015
121
Aplicacin Msica
La aplicacin Msica, permite interactuar con los archivos de audio guardados en
la carpeta musica de Adesk. Est diseado de forma similar a la aplicacin
Jamendo, con la diferencia que no son emisoras online.
Figura 2-50: Captura de pantalla aplicacin Msica
Captura de pantalla, Adesk Msica. Andrs Giovanni Lara Collazos - 2015, bajo licencia GNU.
Msica 2015
Esta aplicacin tiene controles como Atrs, Reproducir, Pausar, Siguiente y Al

azar.
Tambin tiene la lista de reproduccin, la cual se puede manejar por medio de los
controles y botones de FN
122
Est basada en conexiones HTTP por medio de un script en Python, dado que el
navegador no tiene acceso a archivos del disco duro de manera directa.
Aplicacin PDF
La aplicacin PDF, permite a la persona en situacin de discapacidad visual poder
escuchar o en su defecto si su discapacidad no es muy grave ver las pginas de
los archivos PDF.
La aplicacin se desarroll con la librera PDF.js, la cual usa Firefox para visualizar
archivos de este tipo. El proceso se hace por medio de conversin a un objeto de
tipo Javascript, de ah se extrae el texto y se parsea por medio de las
herramientas de Adesk para convertirlo en audio.
Figura 2-51: Captura de pantalla aplicacin Lector PDF
Captura
de
123
pantalla, Adesk Lector PDF. Andrs Giovanni Lara Collazos - 2015, bajo licencia GNU. Lector
PDF 2015
Para el acceso a los archivos PDF, se usa un cuadro de mensajes y de archivos

proporcionado por la plataforma Adesk
Captura de pantalla, Adesk

Lector PDF. Andrs
Giovanni Lara Collazos - 2015, bajo licencia GNU. Lector PDF 2015
124
Captura de pantalla, Adesk Lector PDF. Andrs Giovanni Lara Collazos - 2015, bajo licencia
GNU. Lector PDF 2015
125
Al abrir el archivo, se despliegan las pginas del archivo PDF, las cuales son
navegables por medio de botones de Atrs y Adelante:
Figura 2-55: Captura de pantalla aplicacin Lector PDF, controles
Los controles tienen la interfaz Origamy, los controles se simplificaron para lo cual
se quitaron opciones que complican la interaccin de los usuarios en situacin de
La distribucin de la navegacin est de acuerdo a la comprensin del cerebro

humano en relacin del avance y retroceso, como se maneja en los libros, de
izquierda a derecha.
126
Tambin se trabaj en botones de Zoom, como ampliar y mermar zoom, para

personas que no tiene discapacidad visual completa y solo parcial, las cuales
pueden ver los botones e interactuar con ellos.
Figura 2-56: Captura de pantalla aplicacin Lector PDF, zoom
127
Figura 2-57: Captura de pantalla aplicacin Lector PDF completa
Captura
de pantalla, Adesk Lector PDF. Andrs Giovanni Lara Collazos - 2015, bajo licencia GNU. Lector
PDF 2015
128
129
3.3
TECNOLOGA AWA (ADAPTABLE WEB ACCESSIBILITY)
AWA y sus siglas en ingls Adaptabe Web Accessibility que traduce Adaptable
web accesible. Es una tecnologa creada a base del framework grfico Origamy;
donde se convierte un sitio web cualquiera en una web accesible.
Proceso
Figura 2-58: Proceso transformacin cdigo html a cdigo html de tipo Origamy
Diagrama de proceso realizado por Andrs Giovanni Lara Collazos - 2015, bajo licencia GNU
El estndar TPC/IP funciona de la siguiente manera, primero el navegador espera

instrucciones en su barra de direcciones, al escribir la URL, pgina web o ip este
se comunica con la central y de ah es redirigido a los servidores DHCP que estn
130
distribuidos por todo el mundo, estos servidores transforman los nombres de las
web en ip y se comunican con el servidor donde se contiene el portal web.
Si existe, el servidor le devuelve un mensaje de que que est correcta la solicitud

al navegador y a continuacin formatea el cdigo HTML para que el navegador lo
entienda y lo renderiza para el usuario final.
Figura 2-59: Proceso peticiones TCP/IP y navegadores
conos tomados de: http://iconfinder.net, bajo la licencia CC
Con la tecnologa AWA, el proceso aumenta pero mejora para el usuario final. En
el momento en que el navegador recibe el cdigo HTML, este activa el
131
preprocesador AWA y transforma la respuesta en estilos e instrucciones para que

la apariencia cambie a lo sugerido por Origamy:
El preprocesador agrega los archivos CSS, HTML y Javascript por medio de

cdigo inyectado. Esta tcnica de introducir instrucciones es usada por los virus o
malwares que infectan los navegadores.
Figura 2-60: Proceso peticiones TCP/IP, navegadores y procesador Origamy
conos tomados de: http://iconfinder.net, bajo la licencia CC
132
Problemas al usar la tcnica inject

En la prctica de la utilizacin de la tcnica AWA, encontramos varios problemas
entre ellos la proteccin a este tipo de tcnicas por parte de los navegadores.
Como se coment anteriormente es una tcnica usada por virus y malwares en los
navegadores, para ello se desarroll una proteccin especial llamada Cross-site
por medio de los principales navegadores.
El Cross-site funciona de la siguiente manera: cuando el navegador detecta un

cdigo externo que hace referencia a un servidor que no es el local
inmediatamente bloquea el cdigo y no lo deja ejecutar.
Al realizar esto, se evita que las pginas del lado del cliente (el navegador) sean
modificadas.
La solucin que encontramos desde la investigacin fue incluir por medio de

Javascript el cdigo puro para saltear la restriccin del Cross-site.
Por el lado de los estilos CSS no hay problema, dado que estos no representan
peligro para el usuario final dado que solo modifican los elementos del sitio web y
no ejecutan instrucciones que peligren la estabilidad o seguridad.
133
AWA aplicado en la vida real

Conociendo el funcionamiento de AWA, procedimos a probar si esta tecnologa
funciona de verdad, lo primero que se realiz fue crear una aplicacin llamada
Navegador en Adesk, la cual como su nombre lo indica es un navegador web el
cual aplica AWA y transforma cualquier sitio web en un tipo Origamy.
El desarrollo dur cerca de 2 semanas y funcion a la perfeccin. El principal

inconveniente que encontramos es los estilos de los sitios web, como sabemos en
el HTML y CSS no hay un estndar que nos permita maniobrar y modificar todo el
entorno web, si no que a medida que se desarroll la web se fueron creando
parches y frameworks que permitieran renderizar de una forma agradable para el
usuario final los elementos.
El objetivo se logr por medio de modificaciones individuales y genricas, estilos

que permitieran mantener la estructura sugerida en Origamy.
Para demostrar el funcionamiento de AWA, tomamos un sitio web muy reconocido

en Colombia como lo es www.eltiempo.com, en la siguiente captura podemos
observar que tiene estilos con colores normales que no son accesibles para
personas con baja visin:
134
Figura 2-61: Captura sitio web El Tiempo (www.eltiempo.com)
Captura de pantalla tomada de http://www.eltiempo.com, crditos Casa editorial El Tiempo 2015:
135
Figura 2-62: Captura sitio web El Tiempo con renderizado AWA
Captura de pantalla tomada de http://www.eltiempo.com, crditos Casa editorial El Tiempo 2015
Los resultados fueron que la interfaz AWA convirti el sitio web y lo transform en
un sitio con colores accesibles y fciles de usar por personas con baja visin. Por
136
otro lado el sitio web renderizado con AWA es audible entre enlaces y textos en el
sitio web.
137
3.4
TRABAJO DE CAMPO
El trabajo de campo se desarroll con el fin de validar toda la investigacin

realizada entorno a solucionar problemas comunes en la comunidad de personas
en situacin de discapacidad visual en Colombia.
Para tal labor, se decidi tomar como referencia personas que voluntariamente
decidieron colaborar con esta labor, para ello se contact con la empresa BlueSea
la cual viene desde hace algn tiempo laborando con personas en situacin de
discapacidad visual en la ciudad de Popayn.
Bluesea prest su conocimiento para corregir algunos aspectos del proyecto como
fue el estado real de la tecnologa en personas con deficiencias visuales. Es as
como se form un conjunto de ideas y aportes que dieron como resultado un mejor
planteamiento de las dudas y respuestas ms fuertes al rededor del proyecto.
Seleccin de usuarios
La metodologa usada para la muestra fue de tipo estratificado, la razn es que
esto nos permita separar entre tipos de discapacidad y personas con problemas
cognitivos.
138
En la muestra se tom 4 tipos de personas:
Ciegas
Parcialmente ciegas
Personas de la tercera edad
Personas sin problemas visuales de edad media
Se tom diferentes tipos de personas para poder medir el coeficiente de

efectividad realizando tareas como abrir la aplicacin lectora de PDF's y abrir un
documento mediante la plataforma Adesk.
Un punto importante para la seleccin fue que estas personas tuvieran un mnimo
de conocimiento en informtica exceptuando los voluntarios de la tercera edad
dado que es difcil encontrar personas que tengan tal conocimiento en esta etapa.
La clasificacin fue la siguiente:
Tabla 2-3: Personas completamente ciegas
Identificador
Edad
C1
30
C2
36
139
Tabla 2-4: Personas parcialmente ciegas
Identificador
Edad
P1
18
P2
21
P3
33
P4
34
Tabla 2-5: Personas de la tercera edad
Identificador
Edad
T1
81
Tabla 2-6: Personas sin problemas visuales de edad media
Identificador
Edad
S1
22
S2
29
Metodologa de la prueba
Se realiz una prueba directa y otra indirecta, para la prueba directa se utiliz un
laboratorio de usabilidad, en el cual la persona tena 20 minutos para el ejercicio. A
continuacin el escrito de introduccin a la prueba:
140
Tenga un buen da, primero que todo agradecemos su participacin en el

proyecto Adesk, para su informacin Adesk es una plataforma para personas en
situacin de discapacidad visual parcial o completa en Colombia, su colaboracin
es muy importante en esta parte del proyecto ya que con esto obtendremos datos
que nos servirn para evaluar y mejorar nuestro gran sueo que es desarrollar
ayudas para la comunidad.
Le aclaramos que esta prueba es voluntaria, en cualquier momento puede abortar

el proceso. Si se siente cansado o no puede completar la tarea no se sienta mal,
lo importante es la comunicacin de todos sus sentimientos y comentarios frente
al proceso.
Al momento de terminar, debe indicarle al ayudante que estar en la siguiente

habitacin esperando a que finalice el proceso, si tiene alguna duda tambin
puede consultarle.
Muchas gracias.
141
Como se puede observar, se us un lenguaje claro y suave para el participante, la

razn es que el sujeto debe estar tranquilo, tambin debe entender que los errores
en la prueba son valiosos para nosotros e incluso una cancelacin de las tareas
nos indica que algo est pasando en las interfaces o en el software.
Esta prueba se ejecut en dos salones, uno para el participante el cual cuenta con
un computador porttil con conexin a internet y otro saln para el observador que
por medio del protocolo VNC puede observar el accionario del participante.
El participante debe estar completamente solo en la habitacin, para lograr que no

tenga ninguna intervencin externa y la prueba sea evaluada en su totalidad, sin
datos basura.
Al momento de finalizar la prueba, el participante le indica al observador y este le

hace el siguiente cuestionario:
142
Encuesta post prueba para la investigacin de la plataforma

Adesk
Fecha: Da / Mes / Ao
Nombre del participante: ___________________________________
Edad: _____
Cmo se sinti en la prueba?

__________________________________________________________________
________________________________________________________________
Qu problemas tuvo durante el proceso?

__________________________________________________________________
________________________________________________________________
Pudo completar las tareas?

__________________________________________________________________
________________________________________________________________
143
Tuvo mareos o se sinti incmodo con las interfaces?

__________________________________________________________________
________________________________________________________________
Cmo se sinti en la prueba?

__________________________________________________________________
________________________________________________________________
Tiene algn comentario adicional?

__________________________________________________________________
________________________________________________________________
Firma del participante
_____________________
Recuerde que estos datos sern usados para la investigacin para la plataforma Adesk, en
ningn momento se usar con fines comerciales.
144
Por otro lado, para la prueba indirecta la cual realizo el ayudante del proceso en
otro saln se evalu varios elementos de la interaccin del participante con la
plataforma, estos datos fueron:
Tabla 2-7: Tabla de evaluacin indirecta

Parti
Dificultad para
Preguntas
entender la prueba
acerca de la
(1-10)
interfaz
Dificultad de usar la
cipan
Tiempo de la prueba
interfaz (1-10)
te
En el apartado de Dificultad de usar la interfaz se us con el fin de medir de 1 a

10 qu tan complicado fue para la persona el uso de la plataforma.
En Dificultad para entender la prueba se evalu si la persona tuvo dificultades

para entender la tarea que se le haba asignado y en preguntas acerca de la
interfaz se contabiliz cuntas dudas el participante tuvo sobre las labores que
deba cumplir, esto con el fin de saber si la interfaz era complicada o no.
Todos los resultados se suman y se dividen sobre le tiempo demorado en la

actividad, a esto le llamamos coeficiente de efectividad.
145
Entre ms alto sea el coeficiente, menor es la efectividad y si tiende a cero el valor

nos indica que la dificultad fue menor.
Tabla 2-8: Ejemplo coeficiente de efectividad
Parti
Dificultad para
Preguntas
entender la prueba
acerca de la
(1-10)
interfaz
cipan
Tiempo de la prueba
interfaz (1-10)
te
C1
20
Nos da como resultado:

2+3+ 1
=0,3
20
Con esto podemos deducir que la prueba no gener gran problema para el
usuario, dado que este valor tiende a 0.
Resultados de las pruebas

Dadas las 5 pm de la tarde, del da 20 de febrero de 2015, en una jornada de 8
horas se evalu al primer grupo de personas, se eligi las personas con alguna
discapacidad visual para que la prueba fuera ms uniforme, convocando al otro
da al segundo grupo de personas mayores y de edad media.
Los resultados fueron:
146
Tabla 2-9: Resultados prueba primera jornada

Parti
Dificultad para
Preguntas
entender la prueba
acerca de la
(1-10)
interfaz
cipan
Tiempo de la prueba
interfaz (1-10)
te
C1
20
C2
17
P1
14
P2
20
P3
P4
Tabla 2-10: Tabla coeficiente de efectividad primera jornada

Participante
Dificultad de usar la interfaz (1-10)
C1
0.15
C2
0.48
P1
0.5
P2
0.25
P3
1.85
P4
0.7
Como podemos analizar, la mayora de personas tuvieron dudas sobre la interfaz

en esta primera jornada, esto nos indica que aunque la interfaz es nueva para
147
ellos, esta proporciona facilidad al momento de hacer tareas bsicas como abrir el
programa lector de PDF's y un archivo PDF.
Para la siguiente jornada efectuada el da 21 de febrero de 2015, se convoc a la

segunda tanda de participantes de la prueba, que tena como fin evaluar a las
personas que no tienen problemas visuales graves como lo son las personas
mayores y personas de mediana edad.
Para la prueba con la persona de edad adulta se necesit un asistente, dado que
este participante no tena conocimientos bsicos de informtica. Previo a la prueba
se proporcion instrucciones bsicas del manejo del ratn y los estados del cursor
para que la prueba tuviera validez
Tabla 2-11: Resultados prueba segunda jornada

Parti
Dificultad para
Preguntas
entender la prueba
acerca de la
(1-10)
interfaz
cipan
Tiempo de la prueba
interfaz (1-10)
te
T1
10
13
20
S1
S2
148
Tabla 2-12: Tabla coeficiente de efectividad primera jornada

Participante
Dificultad de usar la interfaz (1-10)
T1
1.45
S1
0.57
S2
En esta jornada se logr comprender que las personas con una deficiencia menor
visual manejaron mejor la herramienta frente a quienes tienen algn problema de
tipo visual. Eran los datos que se esperaban, dado que se presenta cierta ventaja
aunque esto no representa ningn problema.
Al finalizar cada prueba se entrego al participante de turno un obsequio que consta

de un paquete de papas y un jugo en caja como forma de agradecimiento por tan
gran apoyo a la causa.
Conclusiones del trabajo de campo

En la primera jornada se logr observar que las personas en situacin de
discapacidad visual presentan problemas al momento de usar la interfaz grfica,
en primera parte porque necesitan un adiestramiento en cmo usar la herramienta
Adesk.
149
Aunque las personas luego de entender el funcionamiento aceleraron su ejecucin

de la tarea, lo que indica que la curva de aprendizaje es corta y es entendible
puesto que el Framework Origamy proporciona facilidad para recordar controles y
acciones dado su tamao y ubicacin de elementos.
En esta primera parte se observ que el men principal de la aplicacin fue

esencial para el cumplimiento de la labor, lo que refuerza la teora de que una
ayuda visual como lo es lo anterior mencionado es necesaria en cualquier interfaz
y no cometer el error de la tendencia del diseo web actual que es esconder la
navegacin.
Por otro lado en la segunda jornada se observ que la persona de la tercera edad
tuvo total problema con la interfaz, dado que jams tuvo contacto con un
computador o dispositivo electrnico moderno.
Al avanzar la prueba mejor un poco la interaccin. Demostrando que en personas

mayores la curva de aprendizaje es similar que la de personas ciegas.
Los controles grandes y colores adecuados aseguran que las personas adultas
puedan recordar fcilmente la ubicacin de estos, lo que nos traslada a una
150
experiencia satisfactoria cuando se tiene una capacitacin previa. Para este tipo
de personas la paciencia debe ser la clave.
En el caso de las personas de mediana edad con conocimientos en informtica al

inicio, los primeros 2 minutos fueron de preguntas, pero inmediatamente captaron
la idea de la interfaz, la razn de esto es la familiarizacin de los elementos con
una interfaz de escritorio como lo es Windows o Linux.
Luego de analizar los datos con los miembros de BlueSea y comentar otros
aspectos de la tecnologa y personas en situacin de discapacidad visual; nos
dimos cuenta que en algunos casos el individuo desarrolla un talento para manejar
los aplicativos del computador con gran facilidad por medio de los atajos del
teclado, que herramientas como Adesk se quedan cortas.
La gran mayora de aplicaciones tiene accesos directos por teclado y esto facilita
las tareas, adems de que una persona que haya perdido la visin desarrolla otros
talentos y mejora su sentido de la audicin.
151
4.
CAPTULO IV: RESULTADOS
Los resultados de la investigacin y el desarrollo fueron satisfactorios, por un lado

obtuvimos una gran cantidad de retroalimentacin para la interfaz Origamy, la cual
se adapt conforme a como se comentaba y se sugera de acuerdo a los expertos
y personas conocedoras del tema de accesibilidad.
En relacin a la plataforma Adesk, se desarroll un producto con 5 aplicaciones las

cuales funcionan de manera correcta, ellas son:
Lector de archivos PDF
Navegador web
Reproductor de msica
Reproductor de radios online
Webapps
Cada una cuenta con la interfaz Origamy implementada y funcionando.
152
El desarrollo de Adesk dej como subproducto un conjunto de herramientas y un

framework para el la implementacin de las aplicaciones, las libreras Javascript
permiten al desarrollador de software ahorrar tiempo y acceder a recursos del
sistema y de la plataforma de manera sencilla.
La tecnologa AWA se implement en la aplicacin Navegador de la plataforma

Adesk, la cual est funcional y fue testeada por personas en situacin de
La gran mayora de sitios pueden ser renderizados por la aplicacin,

transformando la interfaz en una interfaz de tipo Origamy por medio de AWA.
Por ltimo se cre un banco de conocimiento basado en las pruebas de usabilidad

que se realizaron en el mes de Febrero, las cuales arrojaron datos que permitieron
mejorar el concepto de los dos frameworks.
153
5.
CAPTULO V: CONCLUSIONES
1. La accesibilidad debe ser un punto importante a la hora de crear software, no se

debe dejar al lado puesto que muchas personas dependen diariamente de la
tecnologa y en su interior de los programas de computador, es necesario pensar
en las minoras que exigen mejores prcticas en el medio.
2. A medida que se hicieron pruebas y se desarroll esta investigacin, se cambi

la orientacin de la misma por un objetivo educativo, al principio suponamos que
las personas ciegas o parcialmente ciegas tenan gran dificultad al usar programas
de computador; pero la prctica nos dira que todo el panorama es distinto, que al
perder un sentido, se desarrollan otros y la mente funciona mucho mejor, la
memoria se agudiza y el sentido del audio se maximiza.
La orientacin educativa de Adesk puede mejorar los procesos en personas que

tienen problemas cognitivos, la interfas Origamy se adapta y es fcil de usar. Si se
populariza este tipo de iniciativas, veramos en institutos de educacin un gran
154
nmero de personas compartiendo sin problemas de lo aprendido y lo que se les

brinda de conocimiento.
3. La actual web no es accesible en su totalidad, lo que impide que muchas

personas tengan acceso a estos recursos, por ejemplo los vdeos no tienen
descripcin o las imgenes no contienen etiquetas que permitan a los lectores de
pantalla explicarle a una persona que ha perdido su visin.
Si no priorizamos esto desde el gobierno y nosotros como ingenieros de sistemas,

el futuro ser cada vez ms complicado para las comunidades vulnerables, no
solo hablamos de discapacidad visual si no de auditiva o motriz.
4. Por ltimo, el cdigo libre nos ha aportado muchas herramientas, la

reutilizacin, el poder redistribuir y modificar las creaciones de tipo software en
todo el mundo es un privilegio que est al alcance de todos, hay que masificar la
filosofa de Richard Stallman, el gran creador e impulsor de este movimiento,
recordemos que El conocimiento es libre, comprtelo.
155
6.
CAPTULO VI: BIBLIOGRAFA
1. Dane.gov.co [Internet]. Colombia: Dane; 2004 [actualizado Julio 2004;

citado
septiembre
2014].
Disponible
en:
http://www.dane.gov.co/files/investigaciones/discapacidad/inform_esta
d.pdf
2. Pablo Lara Navarra y Jos ngel Martnez Usero [Internet]. La
accesibilidad de los contenidos web. Editorial UOC. Barcelona
Espaa; 2006 [citado 22 diciembre 2014]. Pgina 9. Disponible en:
https://books.google.es/books?id=5hOIl_gHpFYC&lpg=PA9&dq=qu
%C3%A9%20es%20accesibilidad&pg=PA9#v=onepage&q=qu
%C3%A9%20es%20accesibilidad&f=false
3. Dolores Abril Abadn, Santiago Gil Gonzlez y Margarita Sebastin
Herran [Internet]. Mi interfaz de acceso al ordenador. Editorial
CEAPAT - IMSERSO. Madrid Espaa; 2013 [citado 23 diciembre
2014].
156
Disponible
en:
http://www.ceapat.es/InterPresent2/groups/imserso/documents/binario
/interfazacceso.pdf
4.
Anibal de los Santos [Internet]. Teora del color. Editorial GRUPO

IDAT.
2013
[citado
23
diciembre
2014].
Disponible
en:
5.
Cosima Piepenbrock*, Susanne Mayr, Iris Mund and Axel Buchner

[Internet]. Positive display polarity is advantageous for both younger
and older adults. Institut fur Experimentelle Psychologie, HeinrichHeine-Universitat. Dusseldorf Alemania; 2013 [citado 23 diciembre
2014].
Disponible
en:
http://www.psychologie.hhu.de/fileadmin/redaktion/Oeffentliche_Medie
n/Fakultaeten/MathematischNaturwissenschaftliche_Fakultaet/Psychologie/AAP/Publikationen/201
3/Piepenbrock-2013-Positive_display_polarity_is_.pdf
6.
Guillermo Arroyo [Internet]. Soluciones para la baja visin. Editorial

Paratexto. Buenos Aires Argentina; 2014 [citado 23 diciembre 2014].
Disponible
en:
http://www.amazon.com/Soluciones-para-visi
%C3%B3n-Spanish-Edition-ebook/dp/B005VFX772
7.
Anibal de los Santos [Internet]. Teora del color. Editorial GRUPO

IDAT.
2013
[citado
23
diciembre
2014].
Disponible
en:
157
8.
W3c.org [Internet]: World Wide Web Consortium; 2008 [actualizado

11
Dic
2008;
citado
30
Dic
2014].
Disponible
en:
9. Licencia GPLV3 [Internet]: GNU Org; 2007 [consultado 2 enero 2015].
Disponible en: http://www.gnu.org/licenses/quick-guide-gplv3.html
10. Gmez, Joaqun Andreu [Internet]. Servicios en Red. Editorial Idetex.
2010
[citado
28
diciembre
2014].
Disponible
en:
https://books.google.es/books?
id=vhit3ZmGQPsC&lpg=PA147&dq=peticiones%20get%20y
%20post&pg=PA147#v=onepage&q=peticiones%20get%20y
%20post&f=false
11. De Vega Luna, Alberto [Internet]. Historias de developers. Amazon
Digital Services. 2013 [citado 28 diciembre 2014]. Disponible en:
http://www.amazon.com/historias-developers-Spanish-Edition-Albertoebook/dp/B00EG015NQ
12. Espinar, Isaac Paneque [Internet]. Linux 4You! 2013 Espaol. 2013
[citado
29
diciembre
2014].
Disponible
https://books.google.es/books?
id=jSECXTiZqvYC&lpg=PA29&dq=consola
%20shell&pg=PA29#v=onepage&q=consola%20shell&f=false
158
en:

Plataforma Informática para La Ejecución de Aplicaciones Software Orientadas A Personas en Situación de Discapacidad Visual en Colombia

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Plataforma Informática para La Ejecución de Aplicaciones Software Orientadas A Personas en Situación de Discapacidad Visual en Colombia

Caricato da

Copyright:

Formati disponibili

Plataforma informtica para la ejecucin de

aplicaciones software orientadas a personas en

Andrs Giovanni Lara Collazos

Corporacin Universitaria Autnoma del Cauca

Plataforma informtica para la ejecucin de

Andrs Giovanni Lara Collazos

Corporacin Universitaria Autnoma del Cauca

ensearon el valor de la educacin y la

Quienes me inspiran a ser un ejemplo

Por estar conmigo en los momentos que

El Director y los Jurados del trabajo de grado: PLATAFORMA

En primer lugar un agradecimiento especial a la institucin Bluesea que me prest

El proyecto Plataforma informtica para la ejecucin de aplicaciones software

Esta investigacin consta de 4 mdulos los cuales se dividen en: Framework

El framework Origamy es un estndar de buenas practicas que permite crear

La plataforma Adesk es un conjunto de aplicaciones que facilitan el uso del

En el captulo 3, relacionado con la tecnologa AWA se habla sobre cmo mediante

En las pruebas finales se us el navegador por defecto de Adesk para hacer

Todos los estudios sugirieron cambiar en cierta medida el enfoque de la

Palabras clave: Accesibilidad, Desarrollo, Interfaces, Usabilidad, Codigo libre,

The Project Information Technology platform for the execution of software

The Origamy framework is an standard of good practice for the creation of

Keywords: Accessibility, Developer, Interfaces, Usability, Open Soruce, Web.

Niveles de discapacidad visual......................................................................37

Figura 2-16: Ejemplo grupos de botones................................................................64

Figura 2-37: Diagrama del proceso de Appcenter.py..............................................98

La accesibilidad en el mundo de la informtica ha avanzado de una forma lenta

El reconocimiento de voz, de seas, de texto en imgenes y otros avances nos

La historia comienza desde el siglo XIX, donde exista una consideracin de la

De ah la importancia de compartir el conocimiento y generar comunidad. Cuando

Con el pasar de los tiempos se convirti en algo importante el tema de la

Ya en el sigo XX se plantearon modelos para entender que las personas en

Este proyecto est dedicado a las personas que en su situacin de discapacidad

Pensando en lo anteriormente dicho, se desarrollaron 3 principales productos. El

El segundo producto es la tecnologa llamada AWA (Adaptable Web Accessibility)

PLANTEAMIENTO DEL PROBLEMA

La situacin de discapacidad visual es un estado en el cual no se puede percibir el

Los temas de accesibilidad son una prioridad en la actualidad porque todos

En el campo de la tifotecnologa, que es la encargada de gestionar lo relacionado

Es as como podramos dar tecnologa a personas en situacin de discapacidad,

En Colombia, segn el DANE1 el 6.4% de la poblacin se encuentra en situacin

La gran mayora de esta poblacin no tiene acceso a las tecnologas de la

Explicado lo anterior, nos realizamos la siguiente pregunta, bajo la cual se

Cmo se puede desarrollar desde la ingeniera de sistemas soluciones

Las interfaces grficas de software son la representacin de botones, ventanas,

Luego lleg la poca dorada de las interfaces un poco despus de los

situacin de discapacidad visual, pueden interactuar de acuerdo a las seales

Entonces era necesario mejorar la experiencia de usuario de la comunidad con

Para completar la solucin al problema se desarroll una plataforma llamada

ausencia de software realmente diseado a personas en situacin de

Este proyecto se desarroll con el fin de estudiar y proponer soluciones a las

Disear y desarrollar una plataforma que permita facilitar la interaccin humano

Desarrollar y documentar una plataforma de aplicaciones de tipo software

CAPITULO II: MARCO TERICO O

relacionadas con la salud mental del cerebro.

Aunque en Atenas se creaban lugares casi sagrados, donde se trataban a las

Al pasar el tiempo los hebreos reconsideraron esto y el concepto de discapacidad

Con la llegada de la era tecnolgica, la accesibilidad ya no es del tipo geogrfico si

Cito el texto donde se plasma el concepto:

Se define accesibilidad como la facilidad de uso de forma eficiente,

puedan ser utilizados por los usuarios con efectividad, eficiencia y

Concepto de baja visin

Ayudas tecnolgicas para personas ciegas