Proyecto de Grado - Accesibilidad Web

DESARROLLO DE PAGINA WEB ACCESIBLE CON CONTENIDO
INFORMATIVO DEL PROGRAMA DE INGENIERIA DE SISTEMAS DE LA

UNIVERSIDAD LIBRE SECCIONAL BOGOTA
Andrés Arturo Vergara Salas
Universidad Libre de Colombia Seccional Bogotá.

Facultad de Ingeniería
Programa de Ingeniería de Sistemas
Bogotá D.C
2017
RESUME i
Agradezco a mis padres, hermanas y a todas aquellas personas que me apoyaron de principio a
fin de manera incondicional para así lograr esta gran meta, la meta de ser Ingeniero de Sistemas
Unilibrista.
Finalizar esta etapa es una gran satisfacción tanto para mí como para mis padres, ya que
comprendo el esfuerzo tan grande que ellos hicieron para sacar adelante este proyecto de vida.
Asimismo, agradezco a todos los docentes que me formaron durante esta etapa universitaria, sus
enseñanzas fueron esenciales para formarme como persona íntegra y como profesional para así
afrontar mi vida personal y profesional con altura y eficacia.
AGRADECIMIENTOS ii
Este Trabajo de Grado tiene por objetivo desarrollar una página Web accesible con contenido
informativo del programa de Ingeniería de Sistemas de la Universidad Libre Seccional Bogotá
para personas con discapacidad visual. Este proyecto surge de la necesidad de la sociedad en
general y de las instituciones por lograr la inclusión social y educativa de la población
discapacitada.
En este documento se describen las metodologías, arquitecturas y estructuras funcionales

implementadas llevar a cabo el levantamiento de información, análisis y desarrollo del sitio.
Dicho sitio web y su contenido informativo estará a disposición de personas con algún tipo de
discapacidad visual, aspirantes, estudiantes, docentes y administrativos de la Universidad Libre
de Colombia. Las personas que hagan uso de este sitio web contaran con funcionalidades de
accesibilidad tales como: lectura de contenido informativo por medio de asistente de voz,
aumento y reducción de tamaño de fuente, cambio de contraste de color de fondo y fuente de la
interfaz del sitio web y acceso a funcionalidades y secciones de la página por medio de
comandos (combinación de teclas).
Finalmente, la elaboración e implementación de este proyecto de grado será fundamental para

que la Universidad Libre continúe por el camino de la inclusión social y educativa y sea una de
las universidades pioneras en la incorporación de soluciones tecnológicas fiables, estables y
usables, que faciliten el acceso a la educación de aquellas personas que parecen de algún tipo de
discapacidad.
TABLA DE v
This Degree Work aims to develop an accessible Web page with informative content of the
System Engineering program of the Free Sectional University Bogota for people with visual
impairment. This project arises from the need of the society in general and of the institutions to
achieve the social and educational inclusion of the disabled population.
This document describes the methodologies, the architectures and the functional structures
implemented carry out the information gathering, the analysis and the development of the site.
This website and its information content was a group of people with some type of visual
disability, aspirants, students, teachers and administrators of the Universidad Libre de Colombia.
People using this website will have accessibility features such as: reading informational content
via voice assistant, increasing and reducing font size, changing background color contrast and
website interface font and access to functions and sections of the page by means of commands
(key combination).
Finally, the elaboration and implementation of this degree project are fundamental for the Free
University continues along the path of social and educational inclusion and the sea one of the
pioneer universities in the incorporation of reliable, stable and usable technological solutions,
that facilitate access to education of persons who appear to be of some form of disability.
ABSTRAC i
1. PLANTEAMIENTO DEL PROBLEMA................................................................................1

2. INTRODUCCIÓN...................................................................................................................2
3. ALCANCE..............................................................................................................................4
4. JUSTIFICACIÓN....................................................................................................................5
5. OBJETIVOS............................................................................................................................5
5.1. Objetivo General..............................................................................................................5
5.2. Objetivos Específicos......................................................................................................5
6. MARCO REFERENCIAL.......................................................................................................6
7. DISEÑO METODOLÓGICO.................................................................................................9
7.1. METODOLOGIA SCRUM.............................................................................................9
7.1.1. Delegación de roles:..............................................................................................10
7.1.2. Sprint......................................................................................................................11
7.1.3. Ceremonias............................................................................................................11
7.2. FASE DE INICIO..........................................................................................................11
7.2.1. Requerimientos Funcionales..................................................................................12
7.2.2. Actores del Sistema...............................................................................................14
7.2.3. Cronograma de Actividades..................................................................................14
7.2.4. Presupuesto............................................................................................................16
7.3. FASE DE DESARROLLO............................................................................................17
7.4. FASE DE TRANSICIÓN..............................................................................................17
7.5. DISEÑO DEL SISTEMA..............................................................................................18
7.5.1. Casos de Uso..........................................................................................................18
7.5.2. Detalle casos de uso...............................................................................................19
7.5.3. Requerimientos Funcionales del Sistema..............................................................22
7.5.4. DIAGRAMA DE COMPONENTES DEL SISTEMA..........................................28
8. RESULTADOS Y CONCLUSIONES..................................................................................29
9. REFERENCIAS BIBLIOGRAFICAS:.................................................................................31
Lista de v
Tabla 1. Requerimientos Funcionales................................................................................12

Tabla 2. Actores del Sistema.............................................................................................14
Tabla 3. Cronograma de Actividades................................................................................15
Tabla 4. Presupuestos........................................................................................................16
Tabla 5. Gestionar Contenido Pagina Web........................................................................19
Tabla 6. Activar asistente de voz.......................................................................................19
Tabla 7. Aumentar Fuente.................................................................................................20
Tabla 8. Disminuir Fuente.................................................................................................20
Tabla 9. Cambiar Contraste...............................................................................................21
Tabla 10. Detener asistente de voz....................................................................................21
Tabla 11. Requerimiento Funcional RQF1........................................................................22
Lista de v
Figura 1. Scrum.................................................................................................................10
Figura 2. Diagrama de Casos de Uso.................................................................................18
Figura 3. Diagrama de Componentes................................................................................28
1
1. PLANTEAMIENTO DEL PROBLEMA
1.1.Descripción del problema:
La Universidad Libre Seccional Bogotá dispone de páginas web para el público en

general, con contenido informativo de las ofertas académicas, sedes, generalidades de
la universidad, etc., además, cuenta con sistemas informativos y académicos para
estudiantes, docentes y aspirantes.
Los sistemas mencionados anteriormente no son accesibles para todo tipo de

población, ya que las personas con algún tipo de discapacidad, ya sea cognitiva,
física, motriz, visual o auditiva no tendrán la facilidad de acceder a la información de
dichos sistemas, lo cual afecta la inclusión social y educativa de este tipo de
población a los programas ofertados por la Universidad. Por este motivo es
indispensable que la Universidad inicie la construcción de sitios web cuyo contenido
sea accesible para todo tipo de población y así mejorar la inclusión social y educativa
de la Universidad.
1.2. Formulación del Problema
¿Cómo diseñar e implementar un aplicativo con contenido Web Accesible del

programa de ingeniería de sistemas para personas con algún grado de discapacidad
visual que ingresen a la Universidad Libre Seccional Bogotá?
2
2. INTRODUCCIÓN
“Todos tenemos la esperanza de que el mundo pueda ser un lugar mejor donde vivir y la
tecnología puede colaborar para que ello suceda” – Tim Berners Lee, 2004.
Como se menciona en la anterior frase las TICS a medida que transcurre el tiempo busca
cerrar las brechas sociales y ser más incluyentes para mejorar la calidad de vida de los
usuarios que las utilizan, por tal razón el desarrollo de software que se presenta en este
proyecto busca que las personas que padezcan alguna discapacidad visual puedan acceder
a una página WEB, donde encontrarán la información correspondiente al programa de
Ingeniería de Sistemas de la Universidad Libre Sede Bogotá.
Según la Organización Mundial de la Salud OMS (2014) En el mundo hay

aproximadamente 285 millones de personas con discapacidad visual, de las cuales 39
millones son ciegas y 246 millones presentan baja visión. Aproximadamente un 90% de
la carga mundial de discapacidad visual se concentra en los países de ingresos bajos.
Las personas con discapacidad visual en la actualidad utilizan diferentes estrategias

logrando beneficiarse de la información visual que requieren para generar algún tipo de
aprendizaje, lo que les permite realizar sus actividades del día a día, ya sea en el aspecto
educativo, laboral o personal. Este trabajo busca reconocer las implicaciones que lleva
una discapacidad visual, para acceder a la información de las plataformas virtuales. Las
causas que llegan a provocar este tipo de discapacidad pueden llegar a ser muy variadas
pueden ser heredadas o adquiridas (ya sea por enfermedad, accidente, infecciones,
consumo de alcohol o sustancias psicoactivas). Por esta razón es necesario que la
información sea accesible para los usuarios en cualquier momento (Cabrera, 2008).
Ser una persona con discapacidad visual conlleva a varias implicaciones, por lo cual es
necesario que la Universidad Libre tenga la posibilidad de que la información de su
página WEB sea accesible para una persona que tenga una discapacidad visual ya sea
congénita o adquirida, sin importar que tanto podría estar comprometida la visión, esto
lograra que las personas cuenten con las mismas oportunidades para ser incluidos
socialmente (Cabrera, 2008).
Por tal razón se hace necesario e indispensable emplear herramientas específicas como lo
son: programas, materiales didácticos, recursos de tecnología (TIC´s), con el fin de
generar una inclusión educativa a nivel básico y superior, con el propósito de propiciar el
desarrollo de habilidades y potenciales de las personas con ceguera o baja visión
(Cabrera, 2008).
3
En Colombia, aunque no se cuenta en la actualidad con una política educativa específica
para la reivindicación del Derecho a la educación de las personas con discapacidad en la
educación superior. Las universidades buscan ser más incluyentes ya que según
estadísticas del Departamento Administrativo Nacional de Estadísticas (DANE) y el
Consejo Nacional de Política Económica y Social (Conpes) el nivel educativo de las
personas con discapacidad es mucho menor y el porcentaje de esta población que ingresa
a la educación superior es inferior al 1%. (Centro Virtual de Noticias CVNE, 2013).
Hay áreas que registran grandes avances. Un ejemplo es el proceso de

implementación e innovación en Tic para la población con discapacidad
que se hace cada vez más sólido, es un hecho que el Ministerio de
Tecnologías para la información y la comunicación (MINTIC) busca
cerrar la brecha de acceso a las tecnologías de la información y las
comunicaciones.
De hecho, se están adelantando algunas estrategias y proyectos que
buscan abordar la accesibilidad, mediante el desarrollo de
capacidades en poblaciones especificas a través de la promoción
proyectada en accesibilidad, usabilidad y monitoreo de los mismos
(Centro Virtual de Noticias, CVNE del Ministerio de Educación, 2013,
p. 9).
Estas iniciativas planteadas para la apropiación de las TIC buscan la ampliación de

acceso de usuarios con discapacidad como lo son: El Centro de Relevo que es para la
comunicación de personas sordas, Conectando sentidos, son salas dotadas con elementos
para el aprovechamiento de las TICS por parte de las personas con discapacidad
sensorial, entre otras estrategias que se están implementando en Colombia por parte del
ministerio enfocándose en la educación superior (Centro Virtual de Noticias CVNE,
2013).
Por tal razón las universidades, como lo es la Libre Sede Bogotá pueden iniciar procesos
de accesibilidad donde se tenga en cuenta una política institucional, programas y
servicios, sistemas de registro, formación y conocimiento, accesibilidad física y por
último en el que está enfocado el presente trabajo a accesibilidad tecnológica de la
información (Centro Virtual de Noticias CVNE, 2013).
En la red se encuentran diferentes programas que facilitan el acceso a los usuarios con
discapacidad como lo es el programa SOLCA el cual no tiene ningún costo y permite
realizar búsquedas en internet, Google, Explorer o cualquier tipo de buscador, además
permite que las personas con alguna discapacidad visual realicen trabajos de Colegio,
Universidad o en su trabajo profesional usando una computadora con Excel, Word,
Power Point o cualquier Programa, como editores de Música u otros. Encontrando
diferentes programas de códigos abiertos y otros de software libre, beneficiando a las
personas que no cuentan con los recursos económicos para la compra de los programas,
lo que indica que a medida que transcurre los años, los medios tecnológicos brindan una
4
completa inclusión al mundo digital, social, laboral, educativo y productivo (Broce De
Tapia, 2012).
Sabemos que las personas con discapacidad no solo se enfrentan en su vida cotidiana con
las calles de la ciudad, transporte y lugares con difícil acceso, por tal razón se busca que
la universidad Libre Sede Bogotá realice una inclusión en sus plataformas virtuales
iniciando con el programa de Ingeniería de Sistemas, estos medios tecnológicos ofrecerán
una oportunidad de derribar obstáculos que tiene la sociedad para este tipo de usuarios
(Fundación Montemadrid, 2015).
3. ALCANCE
Los aspirantes, estudiantes, docentes y personal administrativo de la Universidad

Libre tendrán a su disposición una página Web accesible para personas con
discapacidad Visual.
El alcance del desarrollo será funcional para el programa de Ingeniería de Sistemas

Seccional Bogotá de la Universidad Libre seccional Bogotá.
Las características principales del contenido Web son:
 Funcionalidad de aumentar o reducir el tamaño de fuente
 Funcionalidad de Contraste para cambiar el color de fuente y el color del fondo de

la página
 Sintetizador de Texto a Voz para escuchar el contenido informativo.
 Funcionalidad de atajos, mediante la cual se podrá acceder a los diferentes

contenidos y funcionalidades de la página mediante la combinación de teclas sin
tener la necesidad de utilizar el mouse.
5
4. JUSTIFICACIÓN
En la actualidad la Universidad Libre cuenta con una página web que contiene
información de la totalidad de los programas ofertados a nivel nacional, entre los cuales
se encuentra el programa de ingeniería de Sistemas de la Seccional Bogotá en la cual se
puede visualizar contenido informativo acerca de las generalidades del programa,
aspectos curriculares, proyectos de grado e investigación.
Sin embargo, esta página no es accesible para todo tipo de población, razón por la cual se
propone realizar la construcción de Un sitio web para personas con algún grado de
discapacidad visual.
El desarrollo de esta página Web facilitará el acceso del contenido Informativo del
programa de Ingeniería de Sistemas de la Universidad Libre Seccional Bogotá, para
personas que tengan este tipo de discapacidad, generando un prototipo con el cual la
universidad iniciaría un proyecto de inclusión educativa mediante la construcción de
entornos digitales accesibles para este tipo personas, que busque fortalecer en este tipo de
población su autonomía, relaciones Intra e Interpersonales y una vida más productiva
convirtiéndose en un factor de desarrollo e inclusión para la sociedad.
5. OBJETIVOS
5.1. Objetivo General.
Desarrollar una página Web accesible con contenido informativo del programa de
Ingeniería de Sistemas de la Universidad Libre Seccional Bogotá para personas con
discapacidad visual.
5.2. Objetivos Específicos.
 Diseñar la página WEB a partir de la información obtenida de las fuentes

bibliográficas y los requerimientos establecidos por los funcionarios del
programa de Ingeniería de Sistemas Seccional Bogotá de la Universidad Libre.
 Desarrollar la aplicación de la página WEB a partir del diseño y la aplicación

de la metodología de desarrollo SCRUM.
 Describir la funcionalidad de los actores del sistema por medio de la

diagramación de los casos de uso, para definir la interacción de los usuarios con el
sitio WEB.
 Desarrollar la página Web bajo las normas internacionales de la W3C,

para cumplir con los estándares de desarrollo WEB.
6
6. MARCO REFERENCIAL
Como se plantea en la descripción del problema lo que se busca con la implementación

de un aplicativo con contenido web que facilite el acceso de la información del programa
de ingeniería de sistemas para personas que tengan algún nivel de discapacidad visual.
Para comprender el diseño y aplicación que se realizara en la página web, se realizara la

explicación de cada uno de los términos que se manejaran en el desarrollo del aplicativo
y los diseños que se han adelantado en los últimos años frente al acceso de páginas web
para personas con discapacidad visual (Shawn, L.H. 2005)
El uso de la tecnología de punta (TIC) ha revolucionado el mundo de las comunicaciones

y en la forma en que se accede a la información, convirtiéndose para el hombre de hoy en
actividades imprescindibles. De ahí que los sitios web son los que más se utilizan para
brindar información ocupando un lugar privilegiado por lo que se puede recibir desde
cualquier lugar en el que tenga acceso a la red (González, 2011).
La Web se ha convertido en el medio en el cual se exponen ideas, se ofrecen productos y

servicios, entretenimiento o cualquier recurso visual o auditivo que sea llamativo para el
internauta, es por esta razón que esta herramienta asociada a las tecnologías de la
comunicación, se le está dando un grado alto de importancia en las instituciones
educativas facilitando el acceso a información que se expone en los sitios Web
institucionales, Web de clases (ambientes virtuales de aprendizaje), organización y
servicios educativos. A los que pueden acceder todas las personas ya que estas
herramientas pueden contar con facilidades para personas que presentan algún tipo de
discapacidad. (Salamanca, 2014).
Toda esta incursión del desarrollo de actividades en los sitios web ha

permitido que la educación cambie para dar mayor flexibilidad al proceso
de enseñanza de los estudiantes actuales, permite el desarrollo de nuevas
habilidades y competencias en cuanto a la autoformación, espacios
dedicados a la enseñanza de actividades de acuerdo a modelos
pedagógicos. (Salamanca, 2014, p. 2)
Según la Organización Mundial De La Salud, OMS en un artículo publicado por el centro

de prensa de su sitio Web (2014) afirma que “En el mundo hay aproximadamente 285
millones de personas con discapacidad visual, de las cuales 39 millones son ciegas y 246
millones presentan baja visión. Aproximadamente un 90% de la carga mundial de
discapacidad visual se concentra en los países de ingresos bajos”. De ahí la importancia
de crear plataformas virtuales que sean accesibles para las personas que presenta algún
grado de discapacidad visual.
7
En Colombia, Según cifras del Departamento Nacional de Estadística, “En el 2015 se
contabilizaron en nuestro país 3’051.217 personas con limitaciones permanentes” (Caro,
2017, p. 4). De igual forma en otro informe de la misma entidad, “en Colombia se registra
un total de 1’134.085 personas con algún tipo de limitación visual, cuya situación laboral
es complicada: la encuesta ‘Pertinencia de la formación y perspectivas laborales de la
población con discapacidad visual’, elaborada por el Instituto Nacional para Ciegos
(INCI), publicó un informe que revela que solo el 35 por ciento accede al mercado
laboral” (Caro, 2017, p. 8).
Como se demuestra en las cifras anteriormente mencionadas se hace necesario que los
sitios Web contengan herramientas que faciliten el acceso de personas con discapacidad,
se ha evidenciado que las nuevas
Concepciones y desarrollos de la informática y las comunicaciones limita

el acceso a la información y a la comunicación y es más limitada que la
tecnología digital y móvil. La única diferencia que tiene la tecnología
digital especializada para población con limitación visual con el resto de
las tecnologías de la información y comunicación – TIC es que la interfaz
de salida de la información es audible o táctil y que la entrada de la
información se hace con sistemas de reconocimiento de voz. (Vargas et al.,
2017, p. 13).
Lo que se observa es que la tecnología especializada, no contempla las necesidades de

comunicación que poseen las nuevas generaciones de la población que presenta alguna
limitación visual, ya que no se tiene en cuenta los elementos culturales y sociales que
caracterizan la producción y diseño de la tecnología digital y las redes informáticas
(Vargas et al., 2017).
En los últimos años se han desarrollado diferentes aplicaciones que ayudan al acceso de
la tecnología para las personas que presentan limitación visual entre las más utilizadas se
encuentran:
• Mobile Accesibility (Android) “Aplicación diseñada para personas ciegas que les
permite usar su teléfono de una manera intuitiva, fácil y simple. Se trata de dos productos
en uno pues es un conjunto de 10 aplicaciones (Teléfono, Contactos, SMS, Alarma,
Calendario, Email, Web, Dónde estoy, Aplicaciones y Ajustes) y también es un lector de
pantallas para facilitar la navegación por la interfaz del móvil” (Sáez, 2014).
• Dragon Dictation (iPhone y Android) “Es una aplicación de reconocimiento de

voz muy fácil de utilizar, que permite dictar y ver al instante el mensaje o correo
electrónico que se desea enviar. De hecho, es hasta cinco veces más rápido que escribir
con el teclado. (Sáez, 2014).
8
• Talkback (Android) “Herramienta pensada para que las personas con
discapacidad visual puedan navegar por las aplicaciones y herramientas para así
favorecer un uso independiente y autónomo del Smartphone. Cuando TalkBack está
activado, el dispositivo habla y describe cada uno de los elementos que son seleccionados
o activados”. (Sáez, 2014).
• BrailleBack (Android) “Es un servicio de accesibilidad complementario que

ayuda a los usuarios invidentes a utilizar los dispositivos braille. Se utiliza junto con la
aplicación TalkBack antes mencionada para ofrecer un servicio combinado de voz y
sistema braille. Esta aplicación permite conectar una pantalla braille a través de Bluetooth
e introducir texto con el teclado braille” (Sáez, 2014).
En la actualidad los desarrolladores de WEB tienen que considerar que no todas las
personas poseen las mismas condiciones físicas y sensoriales. Como se ha nombrado
anteriormente no todas las páginas Web son accesibles para todos esto involucra el
contexto y las circunstancias tenga la persona, algunas situaciones que se pueden
presentar son: Las páginas Web usan gráficos no descritos (Frame), lo que dificulta a una
persona con limitación visual descifrar, equipos que no tienen la utilidad de mostrar
gráficos o con baja resolución, entre otras. (Venegas y Mansilla, 2005)
Al momento de diseñar la página Web se debe tener en cuenta “Las herramientas

software las cuales entregan un conjunto de programas documentos, procesamientos y
rutinas asociadas con la operación del sistema. Estos programas son desarrollados y
distribuidos para mejorar la accesibilidad en la Web”. Las herramientas automáticas que
se utilizan para validar y analizar frente a los criterios de la correcta utilización de HTML
y las recomendaciones de accesibilidad como: el "Validator" del Consorcio World Wide
Web, el analizador "Bobby", el analizador TAW, Programas lectores de pantalla o
navegadores de voz: HPR, Tiflowin, JAWS, OpenBook, Programas de manejo por voz:
"Freedom Box". Estos tipos de programas ayudaran al acceso de personas con limitación
visual hacer más accesible la Web (Venegas y Mansilla, 2005).
Algunas de los diferentes componentes físicos que se agregan al

computador, a diferencia de los programas o elementos lógicos que los
hacen funcionar, y que mejoran o entregan al usuario herramientas
específicas para la discapacidad visual son: Terminales Braille,
Terminales Braille dirigidos por hardware, Braillex, Brailloterm,
Terminales Braille dirigidos por software, Alva B.V, Braille and Speak,
Braille-n-Print, Herramientas de síntesis de voz, texto digital,
Procesadores de palabras, Computadora Portatil Parlante, Cámara
Magnificadora de Imágenes, Máquina de Lectura, Equipo Multifunción.
(Venegas y Mansilla, 2005, p. 50)
9
Frente al desarrollo de un sitio Web es necesario tener en cuenta las normas y
recomendaciones, ya que se convierten en una referencia práctica, estas normas
internacionales son elaboradas por la Web Accessibility Initiative del World Wide Web
Consortium. (Venegas y Mansilla, 2005)
Estas pautas están escritas para personas que diseñan sitios Web,
personas que comprueban los sitios Web existentes sobre accesibilidad,
organizaciones que desean dar a sus sitios un nivel de accesibilidad, y
personas interesadas en asegurar que las personas con discapacidad
puedan acceder a la información de la Web. (Venegas y Mansilla, 2005,
p. 59)
Según un estudio realizado por una compañía que se encarga del desarrollo de Web el
cual produjo un portal digital al que podrían acceder personas ciegas y con baja visión.
En este portal las personas podrían configurar el sitio, para que recibiera comandos de
voz, les hablara la información, configuraciones que con un simple gesto se pudiera
realizar acciones específicas como clic. Sitios como este permiten a las personas con
discapacidad ingresar a diversas páginas Web, para que puedan manipular según lo que
necesiten ejecutar, eliminando así barreras por su condición de discapacidad. Sin
embargo, este portal no es accesible para toda la población debido a que requiere de un
pago, esto se debe tener en cuenta ya que este tipo de población hace parte de estratos
socioeconómicos bajos a los cuales de igual forma se deben beneficiar de los sitios Web.
(Rodríguez, 2017)
De otro lado, es una política gubernamental que los sitios Web cuenten con condiciones
de accesibilidad, de modo que los distintos tipos de usuarios, haciendo uso de las
herramientas que utilizaran según sus condiciones, les permitieran hacer uso de la
información y procesos brindados a través de la Web, para personas con discapacidad.
(Rodríguez, 2017).
7. DISEÑO METODOLÓGICO
7.1. METODOLOGIA SCRUM
Para llevar a cabo el desarrollo y cumplimiento de los objetivos planteados, se realizará

la construcción de la página Web implementado la metodología ágil de desarrollo
SCRUM. Esta metodología se implementa con el fin de satisfacer las necesidades del
cliente generando entregas oportunas a corto plazo a partir de la planificación de las
actividades a realizar (Planning), delegación de funciones del equipo SCRUM, constante
comunicación entre los mismos integrantes del equipo (ceremonias), definición de los
ciclos de trabajo (SPRINT) y comunicación constante con el cliente.
1
Una de las características principales de esta metodología es la flexibilidad y
adaptación del equipo ante los posibles cambios solicitados por el cliente.
En la figura 1 se pueden apreciar la secuencia, roles, y ceremonias de la metodología

SCRUM.
Figura 1.
DEEMER. Pete, BENEFIELD. Gabrielle, LARMAN. Craig, VODDE. Bas, (2012)
7.1.1. Delegación de roles:
Los principales roles de la metodología SCRUM son:
 Product Owner: El Product Owner ó Dueño de Producto, es la única persona

del equipo que tiene la autorización para tomar decisiones sobre las
funcionalidades que tendrá el software. Es la representación del cliente y
demás personas interesadas en el producto. Adicionalmente es la persona que
tiene clara la lógica del negocio y es capaz analizar la relación costo-
beneficio.
 Scrum Master: El Scrum master no debe ser visto como una figura
autoritaria, sin embargo, su función es mediar y facilitar los procesos de cada
uno de los integrantes del equipo Scrum y fomentar los principios de la
metodología Scrum.
 Equipo de Desarrollo: El Equipo de desarrollo está integrado por

desarrolladores, testers, diseñadores, arquitectos de software, etc. y su
objetivo es desarrollar el producto solicitado por el cliente. La principal
característica del equipo es que al ser multidisciplinario tiene la capacidad de
tomar sus
1
propias decisiones entre si en vez de depender de las dediciones de grandes
jerarquías.
7.1.2. Sprint.
El Sprint es el ciclo de trabajo. Se compone de iteraciones de 1 a 4 semanas de duración.

Durante este tiempo, cada uno de los integrantes del equipo deberán trabajar de manera
constante sobre las actividades asignadas. No se recomienda que una persona trabaje en
dos actividades a la vez, ya que el enfoque de la metodología Scrum consiste en
dedicarse 100% en una sola actividad para no perder el enfoque y generar entregas agiles.
Antes, durante y al final del Sprint se llevan a cabo ceremonias con el fin de planificar,
ejecutar y entregar las actividades, además se hace una retroalimentación de lo sucedido
durante el Sprint.
7.1.3. Ceremonias.
Las ceremonias que se realizan durante el Sprint son:
 Planning: En esta reunión se realiza la planificación de las actividades, es

decir, se dan a conocer los requerimientos del cliente, se le asignan las
actividades a realizar a cada integrante del equipo, se establecen prioridades
sobre las actividades y se determinan los tiempos de las mismas.
 Daily: La daily es una reunión diaria que debe durar máximo 15 minutos. En
esta reunión cada integrante debe dar a conocer de manera muy breve los
avances de las actividades y posibles dificultades que haya tenido durante el
desarrollo de la misma.
 Retrospectiva: Esta reunión se lleva a cabo al final del Sprint. Es la
retroalimentación de todo lo sucedido durante el Sprint y cada integrante del
equipo debe indicar los aspectos positivos y negativos que se apreciaron durante
el desarrollo de las actividades. Se establecen accionables con el fin de mejorar
los aspectos negativos.
7.2. FASE DE INICIO
En esta fase se realizó la socialización del proyecto con el Ingeniero Fabian Blanco. En
dicha socialización se realizó el levantamiento de información, se establecieron los
requerimientos funcionales del sistema (Tabla 1) y los actores que intervienen en el
mismo (Tabla2).
1
7.2.1. Requerimientos Funcionales.
Tabla 1. Requerimientos Funcionales:

IDENTIFICADOR REQUERIMIENTO
Implementar un Menú que contenga
las siguientes secciones:
 Inicio Programa
 Sobre el Programa
 Aspectos Curriculares
 Proyectos de Grado
 Investigación
RQF1
El contenido informativo de cada uno
de estos Link debe ser extraído el
contenido informativo oficial de la
página del Programa de ingeniería de
sistemas de la Universidad Libre de
Colombia Seccional Bogotá.
Implementar funciones de
accesibilidad para invidentes: En la
parte superior de la página se debe
crear un menú con los siguientes
elementos: un botón para aumentar
hasta 3 veces el tamaño de la fuente,
un botón para reducir hasta 2 veces el
tamaño de la fuente, una lista
RQF2 desplegable que contenga los
siguientes ítems:
 Color Original
 Blanco Sobre Negro
 Amarillo sobre Negro
 Amarillo sobre Azul
 Verde Sobre Negro
El contraste (color de fondo y color de
fuente) debe variar dependiendo el
ítem seleccionado.
Implementar funciones de
accesibilidad para invidentes: En la
parte superior de la página debe
RQF3 contener el Botón “Accesible” que
redireccione una página que contiene
la información del funcionamiento de
1
la página (atajos, sintetizador de voz).
RQF4 Abrir los links accionados, en la
misma pestaña del navegador.
Activar el asistente de voz
automáticamente para sintetizar el
contenido informativo de texto a voz
de manera automática al ingresar a
RQF5 cada uno de los siguientes Links:
 Accesible
 Investigación
Acceder a funcionalidades de
RQF6 accesibilidad o secciones del sitio
Web mediante comandos
(combinación de teclas). Cada Link y
cada botón de la página podrá ser
accionado mediante la combinación de
teclas de la siguiente manera:
Links del Menú principal:
• Accesible: ALT + R
• Inicio Programa: ALT + G
• Sobre el Programa: ALT + H
• Aspectos Curriculares: ALT + J
• Proyectos de Grado: ALT + K
• Investigación: ALT + L
Botones del menú de Accesibilidad:

• Aumentar Fuente: ALT + +
• Disminuir Fuente: ALT + -
• Contraste Original: ALT + Y
• Contraste Blanco Sobre Negro: ALT
+U
• Contraste Amarillo sobre Negro:
ALT + I
• Contraste Amarillo sobre Azul: ALT
+O
• Contraste Verde sobre Negro: ALT
+P
Sintetizar a voz el texto de los links,
RQF7 botones y contenido informativo
cuando el cursor del mouse pase sobre
1
cada uno de estos elementos del sitio

web.
Detener la reproducción del asistente
RQF8 de voz cuando se presione la tecla
“Esc”.
7.2.2. Actores del Sistema.
Tabla 2. Actores del Sistema:

ACTOR DESCRIPCION
Web Master Es el usuario encargado de administrar
toda la información que debe
proporcionar la página Web
Usuario Final| Es el usuario que interactúa con el
contenido y funciones de la página Web
7.2.3. Cronograma de Actividades.
El desarrollo del proyecto se llevará a cabo en cuatro Sprints, (periodos en los cuales se
realizará el análisis y desarrollo de la página Web).
Cada Sprint tendrá una duración de dos semanas en las cuales se realizará el desarrollo de
las actividades propuestas. Dichas actividades deberán ser presentadas el último día del
Sprint en una ceremonia llamada Retrospectiva. En esta reunión se tratarán aspectos
positivos y negativos que se presentaron durante la ejecución de las actividades en el
Sprint y adicionalmente se plantearan aspectos por mejorar, para lograr una mejora
continua en la ejecución de actividades durante los siguientes Sprint.
Durante la primera semana del primer Sprint se realizará el levantamiento de la

información con el fin de establecer los requerimientos funcionales y no funcionales
para la construcción de la página Web. Adicionalmente se inicia el diseño metodológico
realizando la diagramación de casos de uso.
Durante la segunda semana del primer sprint se continuará con el diseño metodológico
del sitio web en donde se finalizará la diagramación de casos de uso y se continuará con
los detalles de caso de uso, detalle de requerimientos funcionales y diagramación de
componentes.
En la primera semana del Segundo Sprint, se inicia la codificación HTML del Front-End,
en donde se desarrollará la estructura y contenido de cada sección del sitio web.
En la segunda Semana del Segundo Sprint se llevará a cabo el desarrollo de la parte

lógica en Back-End y Front-End del sitio web, en donde programará la funcionalidad de
1
atajos para ingresar a las opciones de la página Web utilizando combinación de teclas con
el fin de limitar el uso del mouse. Estas funcionalidades se crearán con Jquery y C#.
En la primera semana del Tercer Sprint se llevará a cabo el desarrollo de la parte lógica
de la aplicación en donde se implementarán las funciones del asiste de voz que consiste
en sintetizar a voz el texto de botones, link y contenido informativo de las diferentes
secciones del sitio Web.
En la segunda semana del Tercer Sprint se llevará a cabo el desarrollo de la interfaz

gráfica del sitio web utilizando hojas de estilo en donde se establecerá el diseño de la
página Web (color de fondo, estilo y tamaño de fuente y contraste de colores entre letra y
fondo).
En la primera semana del Cuarto Sprint se llevarán a cabo pruebas unitarias con el fin de
corregir y mitigar los posibles errores funcionales que se puedan presentar durante este
proceso.
Finalmente, durante la segunda semana del Cuarto Sprint se realizará la documentación

del proyecto utilizando normas APA se realizará la presentación del producto Final.
Lo anteriormente mencionado se puede apreciar en la tabla 3.
Tabla 3. Cronograma de Actividades.

SPRINT ACTIVIDADES /SEMANA MAYO JUNIO
1 2 3 4 1 2 3 4
1. Levantamiento de información y
definición de requerimientos funcionales.
2. Diagramación de casos de uso
3. Detallar Casos de Uso
1 4. Detallar requerimientos Funcionales
del sistema
5. Diagramación de Componentes
del sistema
6. Desarrollo HTML: Programación
del front-end. Estructuración del Menú,
contenido textual y visual de la página Web.
7. Desarrollo de la parte Lógica de la
aplicación: Programación del front-end y
2 back-end en donde se codificará la
funcionalidad de atajos para ingresar a las
opciones de la página Web utilizando
combinación de teclas con el fin de limitar
el uso del mouse. Estas funcionalidades se
crearán con Jquery y C#.
1
8. Desarrollo de la parte Lógica de la

aplicación: Implementación de la
funcionalidad de sintetizador de Voz para
3 la lectura de texto.
9. Desarrollo Interfaz Gráfica mediante
Hojas de estilo CSS
10. Testing: Realización de Pruebas

Unitarias de cada sección y funcionalidad
del sitio web
4 11. Documentación del proyecto.
7.2.4. Presupuesto.
En la Tabla 4 se mostrará de manera detallada los recursos humanos, horas

implementadas, equipos y software que se requiere para desarrollar y publicar el sitio
Web.
Tabla 4. Presupuesto
Recursos $/hora Horas Total Fuente financiadora
humanos
Director del N/A 40 horas N/A N/A
proyecto de
grado
Estudiante N/A 192 horas N/A N/A
TOTAL HORAS TALENTO HUMANO: 232 Horas
Equipos y Costo Cantidad Total Fuente financiadora
Software unitario
Equipo de 1’200.000 1 1’200.000 Estudiante
computo
Visual Studio 0 1 0 Universidad Libre –
2017 Convenio Microsoft
Alojamiento del
Sitio Web en
Servidor de
Aplicaciones
TOTAL EQUIPOS Y SOFTWARE: $1’200.000
1
7.3. FASE DE DESARROLLO
A partir de la información recolectada de las fuentes bibliografías de la universidad y

después de las diferentes reuniones con funcionarios del programa de Ingeniería de
Sistemas de la Universidad Libre seccional Bogotá para la definición de los
requerimientos funcionales del sistema, se procede a realizar el desarrollo de la Pagina
Web accesible con contenido informativo del programa de Ingeniería de Sistemas de la
universidad libre seccional Bogotá.
7.4. FASE DE TRANSICIÓN
Finalizada la fase de desarrollo del sitio Web se realizará la presentación final del
proyecto ante los funcionarios del programa de Ingeniería de Sistemas de la Universidad
Libre seccional Bogotá. En dicha presentación se dará a conocer las funcionalidades del
sitio web y se recibirá la retroalimentación de los aspectos positivos y las posibles
mejoraras del proyecto.
1
7.5. DISEÑO DEL SISTEMA
7.5.1. Casos de Uso.

Es importante realizar la modelación de la interacción entre los actores y el sistema, para
esto se realiza el diagrama de casos de uso (Figura 2) con el fin de identificar la secuencia
de eventos realizados desde el punto de vista del usuario final y desde el punto de vista
del Web Master.
Figura 2. Diagrama de Casos de Uso

1
7.5.2. Detalle casos de uso.
A continuación, se puede apreciar a detalle el flujo normal, posibles flujos alternos,

precondiciones y datos básicos de cada caso de uso de los diferentes actores del sistema.
Tabla 5. Gestionar contenido Pagina Web

Código: 001
Nombre: Gestionar contenido Pagina Web
Descripción: Modificar contenido informativo de la página Web
Actores: Web Mater
Precondiciones: La Sección del sitio web debe existir, de lo contrario es
necesario crearla.
Autor: Andrés Vergara Salas
Fecha creación: 25/08/2017 Fecha última
modificación:
Flujo Normal:
 Modificar Contenido Informativo del Sitio Web
1. Identificar la sección a modificar
2. Acceder al Front-End del sitio web
3. Agregar o quitar contenido Informativo de la sección
4. Modificar Funciones Jquery para la sinterización de voz del nuevo
contenido.
Flujo Alternativo: N/A
Excepciones: N/A
Tabla 6. Activar asistente de voz

Código: 002
Nombre: Activar asistente de voz
Descripción: El asistente de voz se activa cuando el usuario pasa el cursor
del mouse sobre los botones, links o contenido informativo de
las diferentes secciones del sitio web
Actores: Usuario
Precondiciones: Haber ingresado a cualquiera de las secciones del sitio Web.
modificación:
Flujo Normal:
 Activar el Asistente de voz
1. Ingresar a cualquier sección del sitio Web.
2. Pasar el cursor del mouse sobre los botones, links o contenido
informativo
3. El texto del elemento se sintetiza a voz
Excepciones: N/A
2
Tabla 7. Aumentar Fuente
Código: 003
Nombre: Aumentar Fuente
Descripción: Al dar clic sobre el botón aumentar fuente, es posible aumentar
hasta 3 veces el tamaño de la letra del sitio web
Actores: Usuario
modificación:
Flujo Normal:
 Aumentar Fuente
2. Dar clic sobre el botón “+”
3. El tamaño de la fuente se aumentará
Excepciones: Esta función se puede realizar hasta 3 veces, después de la tercera
ejecución el botón se deshabilita.
Tabla 8. Disminuir Fuente

Código: 004
Nombre: Disminuir Fuente
Descripción: Al dar clic sobre el botón aumentar fuente, es posible disminuir
hasta 2 veces el tamaño de la letra del sitio web
Actores: Usuario
modificación:
Flujo Normal:
 Disminuir Fuente
2. Dar clic sobre el botón “+”
3. El tamaño de la fuente se disminuirá
Excepciones: Esta función se puede realizar hasta 2 veces, después de la segunda
ejecución el botón se deshabilita.
2
Tabla 9. Cambiar Contraste
Código: 005
Nombre: Cambiar Contraste
Descripción: Se modificará el color de fondo y color de letra dependiendo el
ítem seleccionado de la lista desplegable “Contraste”.
Actores: Usuario
modificación:
Flujo Normal:
 Cambiar Contraste
2. Seleccionar uno de los ítems de la lista delegable
3. El color de fondo y color de letra cambiaran dependiendo el ítem.
Excepciones: N/A
Tabla 10. Detener asistente de voz

Código: 006
Nombre: Detener asistente de voz
Descripción: Al presionar la tecla “Esc” se detendrá la reproducción del
sintetizador de voz
Actores: Usuario
Precondiciones: Haber accionado el sintetizador de voz al pasar el cursor del
mouse sobre los botones, links o contenido informativo de
cualquiera de las secciones del sitio web.
modificación:
Flujo Normal:
 Detener asistente de voz
2. Pasar el cursor del mouse sobre los botones, links o contenido informativo
3. El texto del elemento se sintetiza a voz
4. Presionar la tecla “Esc”
5. Se detendrá la reproducción del sintetizador de voz.
Excepciones: N/A
2
7.5.3. Requerimientos Funcionales del Sistema.
Tabla 11. Requerimiento Funcional RQF1

IDENTIFICADOR: NOMBRE:
RQF1. Crear Menú con las secciones: Inicio Programa, Sobre el
Programa, Aspectos Curriculares, Proyectos de Grado,
Investigación.
Prioridad de Desarrollo: DOCUMENTOS DE VISUALIZACIÓN ASOCIADOS:
ALTA SIN DEFINIR
Entrada: Salida:
Contenido Informativo de las Creación de menú con las secciones requeridas.
secciones: Inicio Programa, Sobre Cada sección contiene su información
el Programa, Aspectos correspondiente extraída de la página web
Curriculares, Proyectos de Grado, oficial del programa de Ingeniería de Sistemas
Investigación; extraídas de la de la Universidad Libre de Colombia Seccional
página web oficial del programa de Bogotá.
Ingeniería de Sistemas de la
Universidad Libre de Colombia
Seccional Bogotá.
Descripción: La página web debe contener un menú con los siguientes Ítems:
 Inicio Programa
 Investigación
El contenido informativo de cada uno de estos Link debe ser extraído el contenido
informativo oficial de la página del Programa de ingeniería de sistemas de la
Universidad Libre de Colombia Seccional Bogotá.
Precondición: Tener conocimiento del contenido de cada una de las secciones de la

página oficial del Programa de Ingeniería de sistemas de la Universidad Libre
Seccional Bogotá.
Postcondición: N/A
2
RQF2. Implementar Elementos de accesibilidad para personas con
discapacidad parcial de visión.
ALTA SIN DEFINIR
Entrada: Salida:
Accionar elementos. Cambio de contraste y/o aumento o
disminución de tamaño de fuente.
Descripción: Implementar funciones de accesibilidad para invidentes: En la parte
superior de la página se debe crear un menú con los siguientes elementos: un botón
para aumentar hasta 3 veces el tamaño de la fuente, un botón para reducir hasta 2
veces el tamaño de la fuente, una lista desplegable que contenga los siguientes ítems:
• Color Original
• Blanco Sobre Negro
• Amarillo sobre Negro
• Amarillo sobre Azul
• Verde Sobre Negro
El contraste (color de fondo y color de fuente) debe variar dependiendo el ítem
seleccionado.
Precondición: Utilizar imágenes para cada Ítem del menú tal como funciona página
oficial del Programa de Ingeniería de sistemas de la Universidad Libre Seccional
Bogotá.
Postcondición: No se deben presentar errores de Script al ejecutar los eventos
2
Tabla 13. Requerimiento Funcional

RQF3. Implementar contenido instructivo para el uso del sitio Web
para personas con discapacidad visual parcial o total.
ALTA SIN DEFINIR
Entrada: Salida:
Accionar Botón “Accesible” Información de atajos para acceder a cada
sección del sitio web e información del
funcionamiento del asistente de voz.
Descripción: Implementar funciones de accesibilidad para invidentes: En la parte
superior de la página debe contener el Botón “Accesible” que redireccione una página
que contiene la información del funcionamiento de la página (atajos, sintetizador de
voz).
Precondición: El usuario debe conocer la ubicación de las teclas, para ello es

indispensable que tenga conocimientos de mecanografía.
Postcondición: Se Redirecciona correctamente a la sección “Accesible”

RQF4. Abrir los links accionados, en la misma pestaña del navegador.
MEDIA SIN DEFINIR
Entrada: Salida:
Sección de origen. Sección de destino
Descripción: Abrir los links accionados, en la misma pestaña del navegador.
Precondición: El usuario debe dar clic sobre el link de la sección de destino.
Postcondición: No se deben generar errores de script o redireccionar a páginas en
blanco (Sin información).
2
RQF5. Activar el asistente de voz automáticamente para sintetizar el
contenido informativo de texto a voz
ALTA SIN DEFINIR
Entrada: Salida:
Ingresar a cada uno de los links Contenido informativo sintetizado de texto a
especificados voz
Descripción: Activar el asistente de voz automáticamente para sintetizar el contenido
informativo de texto a voz de manera automática al ingresar a cada uno de los
siguientes Links:
 Accesible
 Investigación
Precondición: Ingresar a los links especificados desde la sección principal de la

página web o ingresando directamente por la URL
Postcondición: No se deben generar errores de script que impidan la navegación.
2
Tabla 13. Requerimiento Funcional

RQF6. Acceder a funcionalidades de accesibilidad o secciones del
sitio Web mediante comandos (combinación de teclas)
ALTA SIN DEFINIR
Entrada: Salida:
Combinación de Teclas Ingreso a la sección solicitada o activación de
funcionalidad de accesibilidad.
Descripción: Acceder a funcionalidades de accesibilidad o secciones del sitio Web
mediante comandos (combinación de teclas). Cada Link y cada botón de la página
podrá ser accionado mediante la combinación de teclas de la siguiente manera:

• Contraste Blanco Sobre Negro: ALT + U
• Contraste Amarillo sobre Negro: ALT + I
• Contraste Amarillo sobre Azul: ALT + O
• Contraste Verde sobre Negro: ALT + P
Precondición: El usuario debe tener claro cuál será la página de destino o la función
de accesibilidad que utilizará.
Postcondición: No se deben generar errores de script que impidan la navegación.
2

RQF7. Sintetizar a voz el texto de los links, botones y contenido
informativo del sitio web
ALTA SIN DEFINIR
Entrada: links, botones o Salida: Texto sintetizado a voz
contenido informativo
Descripción: Sintetizar a voz el texto de los links, botones y contenido informativo
cuando el cursor del mouse pase sobre cada uno de estos elementos del sitio web.
Precondición: El usuario debe pasar el cursor del mouse sobre los elementos
descritos
Postcondición: No se deben generar errores de Script que dificulten o impidan
continuar con la navegación en el sitio web.

RQF8. Detener la reproducción del asistente de voz cuando se
presione la tecla “Esc”.
ALTA SIN DEFINIR
Entrada: Presionar Tecla “Esc” Salida: Sintetizador de voz detenido
Descripción: Detener la reproducción del asistente de voz cuando se presione la
tecla “Esc”.
Precondición: El asistente de voz debe estar en reproducción
Postcondición: El asistente de voz no debe continuar en reproducción a meno de que
el usuario lo active de nuevo. No se deben generar errores de Script que dificulten o
impidan continuar con la navegación en el sitio web.
2
7.5.4. DIAGRAMA DE COMPONENTES DEL SISTEMA
A continuación, se mostrará la organización y dependencias lógicas entre los

componentes del sitio Web mediante un diagrama de Componentes.
Figura 3. Diagrama de componentes

2
8. RESULTADOS Y CONCLUSIONES
El proyecto realizado tuvo como objetivo desarrollar una página Web accesible con
contenido informativo del programa de Ingeniería de Sistemas de la Universidad Libre
Seccional Bogotá para personas con discapacidad visual.
Al desarrollar el producto final se evidenció que el objetivo principal del proyecto se

cumple a cabalidad ya que el sitio Web cumple con los requerimientos funcionales
establecidos por los funcionarios del Programa de Ingeniería de sistemas de la
Universidad Libre seccional Bogotá.
El sitio web cuenta con un asistente de voz con el cual los usuarios con algún tipo de
Discapacidad visual congénita o adquirida van a poder acceder al contenido Web
informativo del programa de ingeniería de Sistemas de la Universidad Libre seccional
Bogotá
Se desarrollo el producto utilizando la metodología ágil de desarrollo Scrum, la cual

facilitó la gestión del proyecto y la puntualidad en las entregas en periodos de
tiempo reducidos.
Se implementó un menú de accesibilidad que cuenta con herramientas de aumento y

disminución del tamaño de fuente. La función de aumento de fuente se puede ejecutar
hasta tres veces mientras que la función de disminución de fuente se puede ejecutar hasta
2 veces.
De igual forma, este menú de accesibilidad cuenta con una lista desplegable que contiene
las diferentes opciones de contraste: Color original (colores representativos de la
universidad libre como son Rojo, negro y blanco), Blanco sobre Negro (color de fondo
de pantalla negro y color de fuente Blanca), amarillo sobre negro (color de fondo de
pantalla negro y color de fuente amarillo), amarillo sobre azul (color de fondo de pantalla
azul y color de fuente amarillo), verde Sobre Negro (color de fondo de pantalla negro y
color de fuente verde).
Adicional a esto, dicho menú contiene un botón “Mapa” con el cual se puede acceder
para facilitar la búsqueda y el ingreso a las diferentes secciones y sub secciones del
sitio web como son: Inicio Programa, Sobre el Programa, Aspectos Curriculares, entre
otros.
Finalmente, en el menú de accesibilidad se implementó el botón “Accesible”, con el

cual se puede ingresar para conocer el funcionamiento de las herramientas que tendrán a
disposición los usuarios con algún tipo de discapacidad visual logrando una interacción
con el contenido informativo del sitio web.
3
La página Web construida está basada en el contenido informativo de la página web
oficial del programa de ingeniería de Sistemas de la Universidad Libre seccional Bogotá,
por tal motivo se implementó un menú principal al que accederán con ayuda del asistente
de voz y la ejecución de comandos (combinación de teclas).
El sitio web desarrollado está basado en el contenido informativo que ofrece actualmente
la página web oficial del programa de ingeniería de Sistemas de la Universidad Libre
seccional Bogotá, el cual contiene las siguientes secciones:
 Inicio Programa: En esta sección el usuario tendrá acceso a las cuatro

noticias principales del programa.
 Sobre el Programa: En esta sección el usuario tendrá a su disposición la ficha
técnica y generalidades del Programa como lo son: Objetivos, perfil profesional,
perfil ocupacional y modelo pedagógico.
 Aspectos Curriculares: En esta sección el usuario tendrá a su disposición el plan
de estudio del programa.
 Proyectos de Grado: En esta sección el usuario tendrá a su disposición las actas
del Comité de Proyectos de grado
 Investigación: En esa sección el usuario podrá conocer cada una de las líneas
de investigación del programa de Ingeniería de sistemas
Al ingresar desde la página Principal (Inicio Programa) a las demás secciones,
automáticamente el asistente de voz se activa y lee el contenido informativo de la sección
accedida.
El sitio web, además contara con la funcionalidad de accionar cada Link y cada botón
mediante la combinación de teclas de la siguiente manera:

• Contraste Blanco Sobre Negro: ALT + U
• Contraste Amarillo sobre Negro: ALT + I
3
• Contraste Amarillo sobre Azul: ALT + O
• Contraste Verde sobre Negro: ALT + P
• Mapa: ALT + T
Finalmente, dentro del ámbito funcional del sitio web, es importante destacar que el
asistente de voz se activa automáticamente al pasar el cursor del mouse sobre los links,
botones y contenido informativo y sintetiza a voz el texto de cada uno de estos elementos.
El beneficio del uso de este prototipo es que podrá ser utilizado por aspirantes,
estudiantes, docentes y personal administrativo del programa de Ingeniería de Sistemas
de la Universidad Libre Seccional Bogotá. El contenido, estructura y funcionalidad del
sitio web permite que sea visitado por tanto por personas con algún tipo de discapacidad
visual ya sea parcial o total, como para las personas que no tienen ninguna limitación
visual.
A demás, La universidad Libre al implementar este tipo de proyectos, estaría ampliando

su proyecto educativo institucional implementado un paradigma de inclusión social y
educativa con el fin de romper las barreras que impiden que las personas con
discapacidad visual parcial o permanente puedan acceder a la educación Inicial, primaria,
secundaria y superior.
A pesar de que la legislación colombiana no cuenta con políticas educativas específicas

que contemplen de manera contundente la reivindicación del derecho a la educación de
las personas con discapacidad desde la educación inicial hasta la educación superior,
existen proyectos y programas implementados por parte del Ministerio de las TIC’S y el
Ministerio de educación que buscan cerrar las brechas en el ámbito laboral, tecnológico,
infraestructura y telecomunicaciones, que beneficien a la población discapacitada. En ese
sentido, la Universidad Libre de Colombia seccional Bogotá, por medio del programa de
ingeniería de sistemas estaría brindando soluciones tecnológicas que contribuyan al
bienestar, a la mejora de la calidad de vida y a la inclusión social y educativa de la
población discapacitada del país.
9. REFERENCIAS BIBLIOGRAFICAS:
3
o Broce de Tapia, A. (2012). Software para Personas con alguna Discapacidad.

Panamá: Autoridad Nacional para la Innovación Gubernamental. Recuperado
de: http://solca.aig.gob.pa/home/para-discapacitados
o Cabrera, M.E. (2008). DISCAPACIDAD VISUAL. Revista de integración e

Inclusión Educativa, Número 1, 1-14. Recuperado de
http://www.sld.cu/galerias/pdf/sitios/rehabilitacion-arte/discapacidad_visual.pdf
o Caro, S. R. (16 DE enero de 2016). Así es el día a día de un ciego en
Colombia. El Tiempo. Recuperado de
http://www.eltiempo.com/cultura/gente/como-sobrevive-una-persona-con-
discapacidad-visual-en-colombia-30498
o Centro Virtual de Noticias CVNE (26 de agosto de 2013). Panorama de la

inclusión en la Educación Superior en Colombia. Bogotá: Ministerio de
Educación. Recuperado de http://www.mineducacion.gov.co/cvn/1665/w3-article-
327505.html
o Figura 1. DEEMER. Pete, BENEFIELD. Gabrielle, LARMAN. Craig,

VODDE. Bas, (2012). Una introducción básica a la teoría y práctica de Scrum
(THE SCRUM PRIMER), Recuperado de
http://scrumprimer.org/primers/es_scrumprimer20.pdf, página 3
o Fundación Montemadrid (2015). Rompiendo barreras con software para personas

con discapacidad. España: Fundación Obra Social y Monte de Piedad de Madrid.
Recuperado de: http://blog.fundacionmontemadrid.es/accion-social/rompiendo-
barreras-con-software-para-personas-con-discapacidad/
o González, A.Virgilio. (15 de marzo de 2011). Metodología para el diseño y

elaboración de un sitio web. Recuperado de
https://www.gestiopolis.com/metodologia-para-el-diseno-y-elaboracion-de-un-
sitio-web/
o Instituto Nacional para Ciegos INCI, Bogotá: Universidad Central

(2017). UTILIZACIÓN DE LA TECNOLOGÍA ESPECIALIZADA
POR
PARTE DE LA POBLACIÓN CON LIMITACIÓN VISUAL. Instituto Nacional
para Ciegos INCI. Recuperado de
http://www.inci.gov.co/transparencia/sites/default/files/asistencia_tecnica/pdf/201
7/UTILIZACION%20DE%20LA%20TECNOLOGIA%20ESPECIALIZADA%2
0POR%20PARTE%20DE%20LA%20POBLACION%20CON%20DISCAPACI
DAD%20VISUAL.pdf.
o Organización Mundial de la salud OMS (agosto de 2014). Ceguera y

discapacidad Visual. Centro de prensa OMS. Recuperado de
http://www.who.int/mediacentre/factsheets/fs282/es/
3
o Rodríguez, S. (consultado el 04 de abril de 2017). Trasfondo de decisiones en

materia de TIC. Recuperado de http://www.inci.gov.co/home/content/trasfondo-
de-decisiones-en-materia-de-tic
o Saez, M. P. (09 de diciembre de 204). Aplicaciones para personas con

discapacidad. Recuperado de: https://blogthinkbig.com/aplicaciones-para-
personas-con-discapacidad/
o Salamanca, B.E. (octubre 2014). Influencia de los sitios web en las instituciones
educativas. Recuperado de https://es.slideshare.net/EvanSalamanca/generar-una-
entrada-en-el-blog-de-la-plataforma-correspondiente-a-un-ensayo.
o Shawn, L.H. (2005). Introducción a la Accesibilidad Web. Web Accessibility

Initiative. Recuperado de
http://www.w3c.es/Traducciones/es/WAI/intro/accessibility.
o Venegas, C. A. y Mansilla, G. M. (Mayo de 2015). ACCESIBILIDAD EN WEB

PARA PERSONAS CON DISCAPACIDAD VISUAL. Síntesis tecnológica,
volumen(2), p.1-10. Recuperado de: http://mingaonline.uach.cl/scielo.php?
script=sci_arttext&pid=S0718- 025X2005000100001&lng=es&nrm=iso.
DOI:10.4206/sint.tecnol.2005.v2n1-01

Proyecto de Grado - Accesibilidad Web

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Proyecto de Grado - Accesibilidad Web

Cargado por

Copyright:

Formatos disponibles

DESARROLLO DE PAGINA WEB ACCESIBLE CON CONTENIDO

INFORMATIVO DEL PROGRAMA DE INGENIERIA DE SISTEMAS DE LA

Andrés Arturo Vergara Salas

Universidad Libre de Colombia Seccional Bogotá.

En este documento se describen las metodologías, arquitecturas y estructuras funcionales

Finalmente, la elaboración e implementación de este proyecto de grado será fundamental para

1. PLANTEAMIENTO DEL PROBLEMA................................................................................1

Tabla 1. Requerimientos Funcionales................................................................................12

1.1.Descripción del problema:

La Universidad Libre Seccional Bogotá dispone de páginas web para el público en

Los sistemas mencionados anteriormente no son accesibles para todo tipo de

1.2. Formulación del Problema

¿Cómo diseñar e implementar un aplicativo con contenido Web Accesible del

Según la Organización Mundial de la Salud OMS (2014) En el mundo hay

Las personas con discapacidad visual en la actualidad utilizan diferentes estrategias

Hay áreas que registran grandes avances. Un ejemplo es el proceso de

Estas iniciativas planteadas para la apropiación de las TIC buscan la ampliación de

Los aspirantes, estudiantes, docentes y personal administrativo de la Universidad

El alcance del desarrollo será funcional para el programa de Ingeniería de Sistemas

Las características principales del contenido Web son:

 Funcionalidad de aumentar o reducir el tamaño de fuente

 Funcionalidad de Contraste para cambiar el color de fuente y el color del fondo de

 Sintetizador de Texto a Voz para escuchar el contenido informativo.

 Funcionalidad de atajos, mediante la cual se podrá acceder a los diferentes

5.1. Objetivo General.

5.2. Objetivos Específicos.

 Diseñar la página WEB a partir de la información obtenida de las fuentes

 Desarrollar la aplicación de la página WEB a partir del diseño y la aplicación

 Describir la funcionalidad de los actores del sistema por medio de la

 Desarrollar la página Web bajo las normas internacionales de la W3C,

Como se plantea en la descripción del problema lo que se busca con la implementación

Para comprender el diseño y aplicación que se realizara en la página web, se realizara la

El uso de la tecnología de punta (TIC) ha revolucionado el mundo de las comunicaciones

La Web se ha convertido en el medio en el cual se exponen ideas, se ofrecen productos y

Toda esta incursión del desarrollo de actividades en los sitios web ha

Según la Organización Mundial De La Salud, OMS en un artículo publicado por el centro

Concepciones y desarrollos de la informática y las comunicaciones limita

Lo que se observa es que la tecnología especializada, no contempla las necesidades de

• Dragon Dictation (iPhone y Android) “Es una aplicación de reconocimiento de

• BrailleBack (Android) “Es un servicio de accesibilidad complementario que

Al momento de diseñar la página Web se debe tener en cuenta “Las herramientas

Algunas de los diferentes componentes físicos que se agregan al

7.1. METODOLOGIA SCRUM

Para llevar a cabo el desarrollo y cumplimiento de los objetivos planteados, se realizará

En la figura 1 se pueden apreciar la secuencia, roles, y ceremonias de la metodología

DEEMER. Pete, BENEFIELD. Gabrielle, LARMAN. Craig, VODDE. Bas, (2012)

7.1.1. Delegación de roles:

Los principales roles de la metodología SCRUM son:

 Product Owner: El Product Owner ó Dueño de Producto, es la única persona

 Equipo de Desarrollo: El Equipo de desarrollo está integrado por

El Sprint es el ciclo de trabajo. Se compone de iteraciones de 1 a 4 semanas de duración.

Las ceremonias que se realizan durante el Sprint son:

 Planning: En esta reunión se realiza la planificación de las actividades, es

7.2. FASE DE INICIO

Tabla 1. Requerimientos Funcionales:

Botones del menú de Accesibilidad:

cada uno de estos elementos del sitio

7.2.2. Actores del Sistema.

Tabla 2. Actores del Sistema:

7.2.3. Cronograma de Actividades.

Durante la primera semana del primer Sprint se realizará el levantamiento de la

En la segunda Semana del Segundo Sprint se llevará a cabo el desarrollo de la parte

En la segunda semana del Tercer Sprint se llevará a cabo el desarrollo de la interfaz