Embed Size (px)
Citation preview
Diseño de una aplicación web para niños sordos de 6 a 11 años
Phonak-matic.com
Presentado por:
José Raúl Rodríguez Reyes, [email protected]
Ricardo Ordoñez Cedeño, [email protected]
Trabajo presentado para obtener el título de Ingeniero Multimedia
Diplomado Diseño y desarrollo de proyectos Multimedia
Asesora: Sandra Cano Cano Dra . en Ingeniera Electrónica
Doctorado Universidad Del Cauca
Universidad San Buenaventura
Facultad de ingeniería
Ingeniería Multimedia
Cali, Colombia
2017
1
Citar/How to cite (Rodríguez, & Ordoñez, 2017)
Referencia/Reference
Estilo/Style:
APA 6th ed. (2010)
Rodríguez, R., J. R., & Ordoñez, C. R. (2017). Diseño de una aplicación web
para niños sordos de 6 a 11 años. (Trabajo de grado Ingeniería
Multimedia). Universidad de San Buenaventura Colombia, Facultad de
Ingeniería, Cali. 2017
Bibliotecas Universidad de San Buenaventura
Biblioteca Fray Alberto Montealegre OFM - Bogotá.
Biblioteca Fray Arturo Calle Restrepo OFM - Medellín, Bello, Armenia, Ibagué.
Departamento de Biblioteca - Cali.
Biblioteca Central Fray Antonio de Marchena – Cartagena.
Universidad de San Buenaventura Colombia
Universidad de San Buenaventura Colombia - http://www.usb.edu.co/
Bogotá - http://www.usbbog.edu.co
Medellín - http://www.usbmed.edu.co
Cali - http://www.usbcali.edu.co
Cartagena - http://www.usbctg.edu.co
Editorial Bonaventuriana - http://www.editorialbonaventuriana.usb.edu.co/
Revistas - http://revistas.usb.edu.co/
Biblioteca Digital (Repositorio)
http://bibliotecadigital.usb.edu.co
2
Agradecimientos
Agradezco principalmente a Dios por permitirme
luchar día a día manteniéndome con salud y vida
para cumplir una vez más mis metas trazadas y a
mis padres quienes contribuyeron con su apoyo
para la culminación de este proyecto.
- José Raúl Rodríguez
A todas esas personas que estaban a mi lado en
Este proceso, que con sus altos y bajos me ayudaron
A ver un camino diferente pero siempre me apoyaron.
Muchas gracias
- Ricardo Ordoñez
3
Contenido
Resumen ......................................................................................................................................................................................8
1. Introducción .........................................................................................................................................................................9
2. Descripción del Problema ........................................................................................................................................... 10
3. Investigación documental ........................................................................................................................................... 11
3.1 Pedagogía en niños sordos ........................................................................................... 11
3.1.1 Variables Personales: ............................................................................................. 11
3.1.1.1 Edad de inicio de la sordera ............................................................................. 11
3.1.1.2 Nivel de sordera. ............................................................................................... 11
3.1.2 Variables de entorno: .............................................................................................. 12
3.1.2.1 Familiares: ........................................................................................................ 12
3.1.2.2 Escuela: ............................................................................................................ 12
3.1.2.3 Ambiente social: ............................................................................................... 12
3.1.3 Estrategias de comunicación con el niño sordo que favorecen el proceso de
aprendizaje y su interrelación con el entorno. ................................................................. 12
3.1.3.1 Captar la atención del alumno sordo ............................................................... 13
3.1.3.2 Mantener la atención del alumno sordo ........................................................... 13
3.1.3.3 Mantener la comunicación con el alumno sordo ............................................. 13
3.1.4 Lengua de señas ..................................................................................................... 14
3.2 Aplicación Web .............................................................................................................. 15
3.2.1 MYSQL .................................................................................................................... 16
3.2.3 Servidor web ............................................................................................................ 16
3.2.4 PHP 5.2.4 ................................................................................................................ 16
3.2.4.1 Diseño responsivo ................................................................................................ 16
3.2.4.2 Boostrap ............................................................................................................... 17
3.2.4.3 Servicios web ....................................................................................................... 17
3.2.4.4 Compiladores de css ............................................................................................ 17
3.2.4.5 Compiladores Sass Y Less .................................................................................. 17
3.2.5 HTML ....................................................................................................................... 18
3.2.5.1 HTML5 .................................................................................................................. 18
3.2.6 Framework Codeigniter ........................................................................................... 19
3.2.7 Modelo Vista Controlador ........................................................................................ 19
3.2.8 Ventajas de una aplicación web ............................................................................. 20
3.2.9 Desventajas de una aplicación web........................................................................ 21
3.3 Antecedentes .................................................................................................................................................................. 21
4
3.3.1 Jclic software educativo .............................................................................................. 22
3.3.2 App signed stories....................................................................................................... 22
3.3.3 Te Cuento .................................................................................................................... 23
4. Análisis e Ideación .......................................................................................................................................................... 24
5. Justificación y solución ................................................................................................................................................. 25
6. Objetivos .............................................................................................................................................................................. 26
6.1 Objetivo General ............................................................................................................ 26
6.2 Objetivos Específicos ..................................................................................................... 26
7. Acta del proyecto ............................................................................................................................................................. 27
8. Matriz de marco lógico ................................................................................................................................................. 28
9. Definición de actividades ............................................................................................................................................ 29
10. Definición del equipo de trabajo ........................................................................................................................... 29
11. Cronograma ..................................................................................................................................................................... 30
11.1 Diagrama de gantt........................................................................................................ 30
11.2 Ruta crítica y holgura ................................................................................................... 30
12. Desarrollo e implementación ................................................................................................................................. 31
12.1 Nombre y logo .............................................................................................................. 34
12.2 Análisis del perfil del niño ............................................................................................ 34
12.3 Diseño de interfaces .................................................................................................... 35
12.3.1 Pantalla inicial........................................................................................................ 35
12.3.2 Interface de acceso ............................................................................................... 36
12.4 Perfil estudiante ........................................................................................................... 36
12.4.1 Clasificación .......................................................................................................... 37
12.4.1.1 Nivel 1 ............................................................................................................. 38
12.4.1.2 Nivel 2 ............................................................................................................. 39
12.4.1.3 Nivel 3 ............................................................................................................. 39
12.4.2 Orientación espacial .............................................................................................. 40
12.4.2.1 Nivel 1 ............................................................................................................. 40
12.4.2.2 Nivel 2 ............................................................................................................. 41
12.4.2.3 Nivel 3 ............................................................................................................. 41
12.4.3 Cantidades ............................................................................................................ 42
12.4.3.1 Nivel 1 ............................................................................................................. 43
12.4.3.2 Nivel 2 ............................................................................................................. 43
12.4.3.3 Nivel 3 ............................................................................................................. 44
12.5 Perfil docente ............................................................................................................ 45
12.6 Modelo entidad relación ........................................................................................... 47
5
13. Conclusiones ................................................................................................................................................................... 48
14. Trabajos Futuros........................................................................................................................................................... 49
15. Bibliografía ...................................................................................................................................................................... 50
6
LISTA DE TABLAS
Tabla 1 Software utilizado .................................................................................................................. 15
Tabla 2 Acta del proyecto ................................................................................................................... 27
Tabla 3 Presupuesto del proyecto ....................................................................................................... 27
Tabla 4 Matriz de marco lógico .......................................................................................................... 28
Tabla 5 Equipo de trabajo ................................................................................................................... 29
Tabla 6 Diagrama de Gantt ................................................................................................................. 30
7
LISTA DE FIGURAS
Figura 1. Arquitectura para aplicaciones web dinámicas .................................................................... 15
Figura 2. Diseño Responsivo. ............................................................................................................. 17
Figura 3. Modelo MVC ...................................................................................................................... 20
Figura 4. Jclic software educativo. ...................................................................................................... 22
Figura 5. App signed stories. .............................................................................................................. 23
Figura 6. Te cuento ............................................................................................................................. 24
Figura 7. Estructura de un desarrollo basado en Design Thinking. ..................................................... 31
Figura 8. Canvas de usuario desarrollado para esta aplicación. (Parte 1). ........................................... 32
Figura 9. Canvas de usuario desarrollado para esta aplicación. (Parte 2). ........................................... 33
Figura 10. Logo Phonak-matic ............................................................................................................ 34
Figura 11. Personaje Phonak-Matic. ................................................................................................... 34
Figura 12. Inicio de Phonak-Matic. ..................................................................................................... 35
Figura 13. Usuario y contraseña.......................................................................................................... 36
Figura 14. Perfil estudiante. ................................................................................................................ 37
Figura 15. Ejemplo de clasificación. ................................................................................................... 38
Figura 16. Clasificación Nivel 1 ......................................................................................................... 38
Figura 17. Clasificación Nivel 2 ......................................................................................................... 39
Figura 18. Clasificación Nivel 3 ......................................................................................................... 39
Figura 19. Ejemplo orientación espacial ............................................................................................. 40
Figura 20. Orientación espacial nivel 1 ............................................................................................... 40
Figura 21. Orientación espacial nivel 2 ............................................................................................... 41
Figura 22. Orientación espacial nivel 3 ............................................................................................... 41
Figura 23. Ejemplo cantidades ............................................................................................................ 42
Figura 24. Cantidades nivel 1 ............................................................................................................. 43
Figura 25. Cantidades nivel 2 ............................................................................................................. 43
Figura 26. Cantidades nivel 3 ............................................................................................................. 44
Figura 27. Panel de trabajo docente. ................................................................................................... 45
Figura 28. Estadísticas de los estudiantes. .......................................................................................... 46
Figura 29. Modelo entidad relación. ................................................................................................... 47
8
Resumen
En este trabajo se desarrolló una aplicación web para incentivar el aprendizaje de matemáticas en
niños sordos de 6 a 11 años. La aplicación fue desarrollada con las herramientas HTML5, Canvas,
CSS, MYSQL, servidor Apache, PHP, Framework Codeigniter, junto a un diseño desarrollado en
Illustrator. La aplicación consta de 3 juegos didácticos, los cuales poseen 3 niveles con diferente
dificultad cada uno. El primer juego es de Clasificación de objetos. Selección y arrastre de objetos por
medio de mouse. El segundo juego es de Orientación espacial. Movimiento de avatar por medio de las
flechas del teclado. El tercer juego es de Cantidades. Selección de objetos haciendo click. A su vez
este desarrollo cuenta con un perfil de administrador el cual fue desarrollado para los docentes. En
este se puede verificar el estado de avance de cada estudiante, crear nuevos usuarios. Permite enviar
reportes con comentarios y arrojar estadísticas.
Palabras claves: Infancia, pedagogía interactiva, plataforma web, discapacidad auditiva,
matemáticas.
Abstract
In this work a web application was developed to encourage the learning of mathematics in deaf
children aged 6 to 11 years. The application was developed with the tolos HTML5, Canvas, CSS,
MYSQL, server Apache, PHP, Framework Codeigniter along with a design developed in Illustrator.
The application consists of 3 didactic games, which have 3 levels with different difficulty each. The
first game is Object Classification. Selection and dragging of objects by mouse. The second game is
Space Orientation. Avatar movement by means of the arrows of the keyboard. The third game is
Quantities. Selecting objects by clicking. In turn this development has an administrator profile which
was developed for teachers. In this you can check the progress status of each student, Create new
users. It allows to send reports with comments and to give statistics.
Keywords: Childhood, interactive pedagogy, web platform, hearing impairment, mathematics.
9
1. Introducción
Los niños con discapacidad auditiva se enfrentan a grandes retos de comunicación (McIlroy,
2011), está limitación puede afectar la interacción diaria de la persona con el mundo,
sobretodo en niños que están en su proceso de aprendizaje. Actualmente se han desarrollado
estrategias pedagógicas especiales que soporten estos estilos de aprendizaje. Hoy en día,
estamos en la era tecnológica donde el amplio crecimiento de las TICs vislumbra una posible
integración de estas herramientas hacia la pedagogía (e-learning) buscando cumplir a
cabalidad el derecho fundamental a la educación.
Hacer efectivo el derecho a la educación exige garantizar que todos los niños, niñas y jóvenes
tengan, en primer lugar, acceso a la educación, pero no a cualquier educación sino a una de
calidad con igualdad de oportunidades. Son, justamente, esos tres elementos los que definen
la inclusión educativa o educación inclusiva (Aincow, Booth y Dyson, 2006; Echeita y Duk,
2008). Según estos autores, avanzar hacia la inclusión supone, por tanto reducir las barreras
de distinta índole que impiden o dificultan el acceso, la participación y el aprendizaje de
calidad, con especial atención en los alumnos más vulnerables o desfavorecidos, por ser éstos
los que están más expuestos a situaciones de exclusión y los que más necesitan de la
educación, de una buena educación.
En los últimos años la tecnología de la información se ha convertido en una herramienta muy
importante para la sociedad, contribuyendo de una manera notable al desarrollo de nuevas
redes sociales, aplicaciones, plataformas virtuales, entre otras; facilitando a la humanidad
muchas de las tareas y/o obligaciones que éstos deben realizar. Logrando de esta forma una
evolución en todos sus aspectos, de una manera mancomunada (Chauán, 2009).
Este trabajo de investigación propone realizar el diseño e implementación de una plataforma
web educativa que pueda involucrarse materiales de apoyo para la enseñanza de actividades
relacionadas con las matemáticas para niños sordos entre los 6 y los 11 años de edad. Esta
plataforma web integra dos perfiles: el niño y el docente, de tal manera que el profesor pueda
actualizar los cursos y llevar un seguimiento del niño. Esta solución al estar basada en TICs
permite a los alumnos interactuar con el sistema todos los días las 24 horas del día,
estudiando en la comodidad de su casa y bajo el acompañamiento de sus padres.
10
2. Descripción del Problema
En la actualidad el avance de nuevas tecnologías como la telefonía móvil y el internet, han
generado un impacto social; por lo que han permitido a las personas nuevas formas de
interactuar. Uno de los avances notorios e importantes, ha sido la inclusión de plataformas
digitales, las cuales han causado muy buena impresión por parte de los usuarios, ya que por
medio de éstas pueden realizar acciones específicas; como la comunicación internacional,
acceso a la información, investigación y capacitación académica, entre otros.
Las personas con discapacidad auditiva presentan muchas dificultades para acceder a estas
tecnologías ya que desde sus inicios los computadores han sido concebidos para personas sin
ningún tipo de limitación, en particular los niños sordos presentan limitaciones en el
desarrollo del lenguaje y su comunicación y se ve severamente afectada en comparación con
los niños normales, esto genera largos procesos de aprendizaje, asimilación e interpretación
de conceptos.
El área de las matemáticas es una ciencia fundamental que se ha perfeccionado con años de
evolución y ha permitido grandes avances para la humanidad, las metodologías pedagógicas
tradicionales se ven cortas frente a la posibilidad de integrar herramientas tecnológicas que
permitan a los niños sordos interactuar y adquirir nuevos conocimientos a través de sistemas
dinámicos, el cual pueda servir como material de apoyo para el docente y que a su vez pueda
llevar un control de progreso de cada niño. Este tipo de herramientas, se ofrecen de manera
abierta y online, con el propósito de ser accedido desde cualquier lugar y en cualquier hora
del día.
Hoy en día, existe poca variedad de plataformas web para la enseñanza de matemáticas
orientadas a niños sordos de 6 a 11 años que cursan los primeros grados de primaria. Existen
diferentes necesidades en el área de matemáticas para estos niños, por lo que se ha observado
la necesidad de refrescar las metodologías pedagógicas actuales apoyándose en herramientas
tecnológicas que permitan el aprendizaje por internet llamado e-learning.
Con base en lo anterior la problemática de este trabajo de investigación se podría definir
como ¿Cuáles son los requerimientos de una plataforma web que permita el aprendizaje
de matemáticas para niños sordos entre 6 a 11 años?
11
3. Investigación documental
Se realizó una investigación documental buscando soportes conceptuales y teóricos que
sirvan como pilares para el desarrollo de este proyecto, entre éstos: Pedagogía para niños
sordos, plataformas web y antecedentes de trabajos similares.
3.1 Pedagogía en niños sordos
El desarrollo del niño sordo, y/o con discapacidad auditiva es, a priori, normal siempre que
sus necesidades comunicativas y de información estén cubiertas. Sin embargo, derivadas de
la discapacidad auditiva, nos podemos encontrar con una serie de cuestiones en su desarrollo
que es necesario tener en cuenta (Asza, 2010). Aun así, no podemos pensar que todos los
alumnos sordos van a tener las mismas características y necesidades, ya que estamos
hablando de un colectivo muy heterogéneo en función de las siguientes variables:
3.1.1 Variables Personales:
3.1.1.1 Edad de inicio de la sordera
Esta variable influye sobre todo en el aprendizaje de la lengua oral. Habitualmente se
establecen dos grupos:
Personas sordas prelocutivas: la sordera se ha producido antes de que el niño adquiera el
lenguaje oral, entre el nacimiento y los tres años aproximadamente.
Personas sordas postlocutivas: la sordera se origina una vez que se ha adquirido la lengua
oral, es decir, después de los tres años.
3.1.1.2 Nivel de sordera.
Hace referencia a la cantidad de pérdida auditiva que presenta una persona sorda y se
corresponde con la intensidad de sonido que no puede escuchar, se mide en dB. En este
sentido, no sólo es la cantidad, sino que la calidad del sonido también influye. Se mide en
frecuencias (Hz) y una mala calidad en la recepción del sonido tiene sus repercusiones más
negativas cuando son las bandas conversacionales las que están más afectadas (entre 500 y
2.000 Hz).
12
3.1.2 Variables de entorno:
3.1.2.1 Familiares:
1. Familias en las que hay personas sordas o con discapacidad auditiva o no. Los padres
sordos, o relacionados con la comunidad sorda, suelen aceptar más rápidamente la sordera,
comprenden mejor su situación y manejan unas estrategias comunicativas desde el inicio.
2. Grado de aceptación de la sordera del hijo y tiempo utilizado para ella. Esto modula sus
relaciones afectivas, sus intercambios comunicativos y la estructuración de las relaciones
dentro de la familia.
3. Creación de un clima de comunicación que proporcione un ambiente de intercambio que
favorezca su autonomía siendo conscientes de las necesidades que puedan existir en cuanto al
lenguaje y la interacción social.
3.1.2.2 Escuela:
1. Si existen herramientas adecuadas de detección de la sordera o no.
2. Si se ponen en marcha los mecanismos de una atención temprana y estimulación precoz
que garanticen un desarrollo integral y satisfactorio, relaciones con iguales, metodología
educativa.
3. Si se establecen o no relaciones positivas con sus iguales.
4. Tipo de escolarización y metodología educativa utilizada.
3.1.2.3 Ambiente social:
La comunicación es la herramienta fundamental de relacionarnos, sea esta verbal o no verbal.
En el caso del niño sordo, y/o con discapacidad auditiva, es importante emplear un sistema
comunicativo adecuado y favorecer espacios de relación y de encuentro para desarrollar
correctamente sus habilidades.
3.1.3 Estrategias de comunicación con el niño sordo que favorecen el proceso de
aprendizaje y su interrelación con el entorno.
El alumno sordo no tiene o no recibe de forma natural y completa la información auditiva
indirecta que el alumno oyente recibe por todo el ambiente e información sonora que nos
13
rodea. El alumno sordo debe ser motivado e involucrado en la interacción de forma más
constante que el alumno oyente (Cermi, Aragón 2007).
En el alumno sordo, observamos la falta de referencia conjunta, es decir, las relaciones entre
referentes (objetos o situaciones de las que hablamos) y los signos o palabras con los que nos
referimos a ellas, no los reciben de forma simultánea como los alumnos oyentes (no pueden
verlo y oírlo a la vez) sino de forma secuencial (primero perciben el objeto de referencia y
luego cómo se dice o qué se dice de él: ATENCIÓN DIVIDIDA).
3.1.3.1 Captar la atención del alumno sordo
Si nuestro alumno tiene restos auditivos que puede aprovechar, le llamaremos por su nombre
en voz alta, asegurándonos de que nos puede responder, y acompañaremos la llamada vocal
con alguna de las otras estrategias que seguidamente vamos a comentar.
Si estamos junto a él, le daremos suaves toques en el hombro (nunca en la cabeza), en la
espalda o en el brazo; si estamos sentados junto a él lo haremos en el antebrazo o en la pierna.
Si está lejos: podemos agitar en el aire nuestro brazo o nuestra mano para llamar su atención;
o bien, si está con otros compañeros, decirles que le avisen. También, podemos acudir por
nuestro propio pie allí dónde esté.
Si está en espacios cerrados, como el aula o el gimnasio, podemos utilizar las técnicas arriba
mencionadas, encender y apagar las luces o golpear con nuestro pie en el suelo (si es de
tarima) para que perciba la vibración, aunque esta última opción es la menos utilizada.
3.1.3.2 Mantener la atención del alumno sordo
La expresión facial y corporal que presentamos en nuestra comunicación se vuelven mucho
más importantes en este punto. El movimiento de nuestro cuerpo y/o nuestro rostro deben
manifestarse con un cierto valor afectivo y motivacional para que el alumno perciba que
realmente le estamos atendiendo. Asentir cuando se dirige a nosotros es fundamental.
3.1.3.3 Mantener la comunicación con el alumno sordo
● Asegurar que nuestro alumno nos está viendo, mirando y atendiendo cuando nos
estamos dirigiendo a él o al grupo-clase.
14
● Realizar el signo mirando. o decir la palabra siendo conscientes de que nos está
mirando.
● No girar la cabeza mientras hablamos.
● No dar explicaciones ni información básica mientras caminamos en clase o se escribe
en la pizarra.
● Evitar poner papeles, lápices o las manos delante de la cara.
● Indicar el objeto del que se va a hablar y que esté en su campo de visión, y pueda
percibir el referente (el objeto del que se va a hablar) y su denominación (su nombre,
su signo) al mismo tiempo. Mucho cuidado con la ATENCIÓN DIVIDIDA: Nos
tenemos que asegurar bien de que el alumno ha visto aquello de lo que le estamos
hablando, o bien que sigue nuestra explicación una vez que ha visto el referente.
● Cuando sea necesario, realizar un enunciado más corto, que resuma o simplifique el
contenido del mensaje en su esencia, pero con una estructura correcta.
● Asegurar que conoce las palabras que le estamos diciendo, para que pueda seguir
nuestra vocalización. Utilizar un lenguaje claro, bien vocalizado y fácil de entender.
● Utilizar además el señalamiento con nuestro dedo índice o con la mano (deícticos),
que muchas veces va a ser fundamental para hacer referencia a lo que queremos decir
hasta que lo sepamos explicar o nos pueda entender.
● Utilizar enunciados interrogativos cerrados (SI/NO), para obtener respuestas
lingüísticas más inmediatas cuando lo creamos oportuno.
● En situaciones grupales, como la asamblea o las tutorías, es fundamental respetar el
turno de palabra y dejar claro quién está hablando en cada momento.
● Informar de ello cuando haya terminado la conversación o vaya a interrumpirse.
3.1.4 Lengua de señas
La Lengua de Señas es la lengua natural de las personas sordas porque surge de forma natural
en la relación diaria entre esta población, en respuesta a su condición de personas con
limitación auditiva, por lo cual sus canales de emisión son corporales y espaciales y los de
recepción visuales.
Las personas sordas nacen con la capacidad biológica del lenguaje intacta. Sin embargo, su
limitación auditiva impide que puedan apropiarse del idioma o lengua oral que se habla a su
alrededor. La capacidad para desarrollar el lenguaje está ahí, pero los datos que pueden
activarla no acceden de modo regular al cerebro, pues el canal auditivo está bloqueado. El
niño puede captar información por otros sentidos, acerca del mundo que lo rodea, este
proceso, sin embargo, es incompleto y no llega a permitir el desarrollo del pensamiento ni de
otras habilidades para procesar, almacenar y comunicar información compleja sobre el
mundo; para ello necesita del contacto pleno con una lengua, que en el caso de las personas
sordas es la lengua de señas (Insor, 2006).
15
3.2 Aplicación Web
Las aplicaciones web reciben este nombre por ser ejecutadas en internet. Es decir que los
datos o los archivos que se trabajen son procesados y almacenados dentro de la web. Estas
aplicaciones, por lo general, no necesitan ser instaladas en computador.
El concepto de aplicaciones web está relacionado con el almacenamiento en la nube. Toda la
información se guarda de forma permanente en grandes servidores de internet y nos envían a
nuestros dispositivos o equipos los datos que requerimos en ese momento, quedando una
copia temporal dentro de nuestro equipo.
“En cualquier momento, lugar y desde cualquier dispositivo podemos acceder a este servicio,
sólo necesitamos una conexión a internet y nuestros datos de acceso, que por lo general son
el nombre de usuario y contraseña” (Mora, 2001).
Estos grandes servidores de internet que prestan el servicio de alojamiento están ubicados
alrededor de todo el mundo, así hacen que el servicio prestado no sea tan costoso o gratuito
en la mayoría de los casos y extremadamente seguro. Para el ambiente de desarrollo de la
aplicación se utilizarán las siguientes herramientas:
Base de datos MySQL
Servidor Web Apache
Lenguaje de Programación PHP 5.2.4
Plataforma de Desarrollo Sublime 2.0
Framework Codeigniter 3
Tabla 1 Software utilizado
Figura 1. Arquitectura para aplicaciones web dinámicas
16
3.2.1 MYSQL
MySQL es un SGBD (Sistema de gestión de base de datos) multiusuario con más de seis
millones de instalaciones. Es decir, una base es una colección estructurada de datos y el
usuario necesita un administrador para poder agregar, acceder o procesar esta información
guardada en el ordenador.
3.2.3 Servidor web
Como servidor web se seleccionó Apache el cual es un servidor web HTTP de código abierto.
Se seleccionó este servidor web por su excelencia, su posibilidad de configurar, robustez y
escalabilidad (Elvira, 2012).
A continuación, varias de sus características:
● Apache es una tecnología gratuita de código abierto.
● Corre en múltiples Sistemas Operativos.
● Apache es un servidor altamente configurable de diseño modular.
● Permite personalizar la respuesta ante posibles errores que se puedan dar en el
servidor.
● Es un servidor web ya que gestiona solicitudes y respuestas http.
3.2.4 PHP 5.2.4
HypertextPreprocessores (lenguaje de código abierto interpretado), es un lenguaje de
programación del lado del servidor, independiente de plataforma, rápido, con una gran
librería de funciones embebido en páginas HTML y ejecutado en el servidor.
3.2.4.1 Diseño responsivo
Es la técnica que nos permite crear sitios adaptables a las condiciones del ordenador o
dispositivos móviles desde donde se van a acceder.
17
Figura 2. Diseño Responsivo.
3.2.4.2 Boostrap
Es un framework, que permite crear interfaces web con CSS y JavaScript, cuya particularidad
es la de adaptar la interfaz del sitio web al tamaño del dispositivo en que se visualice.
3.2.4.3 Servicios web
Los servicios web son un conjunto de aplicaciones o de tecnologías con capacidad para
interoperar en la Web. Estas aplicaciones o tecnologías intercambian datos entre sí con el
objetivo de ofrecer unos servicios. Los proveedores ofrecen sus servicios como
procedimientos remotos y los usuarios solicitan un servicio llamando a estos procedimientos
a través de la Web.
3.2.4.4 Compiladores de css
Son un tipo de sintaxis que está más orientada a un lenguaje de programación. La ventaja es
que esta sintaxis no se diferencia mucho del CSS original, lo único que ahorra tiempo a la
hora de escribirlo y también permite según nuestras necesidades escribir el CSS
convencional.
3.2.4.5 Compiladores Sass Y Less
Un preprocesador de CSS es una herramienta que nos permite escribir pseudo-código CSS
que luego será convertido a CSS real. Ese pseudo-código se conforma de variables,
condiciones, bucles o funciones. Podríamos decir que tenemos un lenguaje de programación
que genera CSS.
El objetivo de estos preprocesadores es tener un código más sencillo de mantener y editar.
Los preprocesadores incluyen características tales como variables, funciones, mixins,
anidación o modularidad.
18
Sass incluye las siguientes características:
o 100% compatible con CSS3.
o Permite el uso de variables, anidamiento de estilos y mixins.
o Incluye numerosas funciones para manipular con facilidad colores y otros valores.
o Permite el uso de elementos básicos de programación como las directivas de control y
las librerías.
o Genera archivos CSS bien formateados y permite configurar su formato.
o Integración con Firebug gracias a la extensión FireSass.
Por otro lado, LESS proporciona una funcionalidad muy similar a la de SASS, sin embargo,
la sintaxis es un poco diferente al añadir un comportamiento dinámico a CSS, por ejemplo
variables, mixins, operaciones y funciones. LESS puede ejecutarse del lado del servidor
(usando Node.js y Rhino) o del lado del cliente (en navegadores modernos).
LESS proporciona los siguientes mecanismos: variables, anidamiento, operadores, mixins y
funciones. La principal diferencia entre LESS y otros pre-procesadores CSS es que LESS
permite la compilación en tiempo real.
El ámbito de las variables en LESS es muy similar al de la mayoría de lenguajes de
programación. Las variables y los mixins se buscan primero en el ámbito local, si no son
encontrados, el compilador buscará en el ámbito inmediatamente superior, y así
sucesivamente.
3.2.5 HTML
HyperTextMarkupLanguage (Lenguaje de marcado de hipertexto), es el lenguaje de marcado
predominante para la elaboración de páginas web. Es usado para representar la estructura y el
contenido en forma de texto, así como para complementar el texto con objetos tales como
imágenes. HTML se escribe en forma de etiquetas, rodeadas por corchetes angulares (<,>).
HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y
puede incluir un script (por ejemplo, JavaScript), el cual puede afectar el comportamiento de
navegadores web y otros procesadores de HTML (Scott, 2006).
3.2.5.1 HTML5
El término representa dos conceptos diferentes:
1. Se trata de una nueva versión de HTML, con nuevos elementos, atributos y
comportamientos.
2. Contiene un conjunto más amplio de tecnologías que permite a los sitios Web y a las aplicaciones ser más diversas y de gran alcance.
19
3.2.6 Framework Codeigniter
CodeIgniter es un framework para el desarrollo de aplicaciones escritas en php que utiliza el
MVC, permite a los desarrolladores Web mejorar la forma de trabajar y también agregar
mayor velocidad a la hora de crear una página Web. CodeIgniter no es el único framework
del mercado, también están zend, cakephp, symphony, entre otros. Pero CI (CodeIgniter) se
diferencia al resto por lo rápido, lo extensible, lo sencillo de aprender y lo poderoso que
puede llegar a ser si lo sabemos usar bien. Su objetivo es permitir que los desarrolladores
puedan realizar proyectos mucho más rápido que creando toda la estructura desde cero,
brindando un conjunto de bibliotecas para tareas comunes, así como una interfaz simple y
una estructura lógica para acceder esas bibliotecas. A continuación, se presentan
características principales de este marco:
● Versatilidad: la principal característica de CodeIgniter, en comparación con otros
frameworks PHP es que CI es capaz de trabajar la mayoría de los ambientes o los
Servidores, incluidos los sistemas de alojamiento compartido, donde sólo tienen
acceso a través de FTP para cargar archivos en el servidor y en la que no tienen
acceso a la Configuración.
● Facilidad de instalación: No es necesaria más de una cuenta FTP para subir
CodeIgniter al Servidor y su configuración se realiza con sólo editar un archivo en el
que se escribe cosas como el acceso a la base de datos. Durante la instalación no
tendrá acceso a herramientas como la línea de comandos, que a menudo no están
disponibles en todos los alojamientos.
● Flexibilidad: CodeIgniter es mucho menos rígido que otros frameworks. Define una
forma específica de trabajo, pero en muchos casos, podemos emplear o no, y sus
reglas de codificación a menudo se pueden saltar de la manera que nos convenga.
Algunos módulos, como el uso de diseños son completamente opcionales. Esto a
menudo ayuda, también que la curva de aprendizaje es simple en principio.
● Ligereza: El núcleo de CodeIgniter es muy ligero, lo que permite que la sobrecarga
del servidor no está jugando o corriendo grandes porciones de código.
● Documentación amigable: La documentación de CodeIgniter es fácil de seguir y
asimilar, porque está escrito en el modo de tutorial.
3.2.7 Modelo Vista Controlador
Uno de los patrones de arquitectura que más se utilizan para el desarrollo de aplicaciones
Web es el Modelo-Vista-Controlador (MVC) (Le, 2001). MVC es un patrón que fue utilizado
para construir las interfaces de usuario en el lenguaje Smalltalk-80 (Krasner, 1988), siendo
la aportación más importante de este patrón la separación de los componentes relacionados
con los datos de la aplicación de los componentes de la interfaz de usuario. La separación de
las capas permite tener, a nivel de desarrollo, un código más claro, flexible y reusable. El
20
patrón MVC identifica tres capas que son importantes para cualquier aplicación las cuales
son:
● Modelo encapsula los datos de la aplicación y la lógica para interactuar con ellos.
● Vista maneja la interacción con el usuario y la representación del modelo.
● Controlador es el intermediario entre el modelo y la vista ante las peticiones
generadas por el cliente en la vista. El controlador se encarga de seleccionar el
modelo solicitado por el usuario y la vista adecuada para representarlo.
Figura 3. Modelo MVC
3.2.8 Ventajas de una aplicación web
● Ahorra tiempo: Se pueden realizar tareas sencillas sin necesidad de descargar ni
instalar ningún programa.
● No hay problemas de compatibilidad: Basta tener un navegador actualizado para
poder utilizarlas.
● No ocupan espacio en nuestro disco duro.
● Actualizaciones inmediatas: Como el software lo gestiona el propio desarrollador,
cuando nos conectamos estamos usando siempre la última versión que haya
lanzado.
● Consumo de recursos bajo: Dado que toda (o gran parte) de la aplicación no se
encuentra en nuestro ordenador, muchas de las tareas que realiza el software no
consumen recursos nuestros porque se realizan desde otro ordenador.
● Multiplataforma: Se pueden usar desde cualquier sistema operativo porque sólo es
necesario tener un navegador.
● Portables: Es independiente del ordenador donde se utilice (un PC de sobremesa, un
portátil...) porque se accede a través de una página web (sólo es necesario disponer
de acceso a Internet). La reciente tendencia al acceso a las aplicaciones web a través
21
de teléfonos móviles requiere sin embargo un diseño específico de los ficheros CSS
para no dificultar el acceso de estos usuarios.
● La disponibilidad suele ser alta porque el servicio se ofrece desde múltiples
localizaciones para asegurar la continuidad del mismo.
● Los virus no dañan los datos porque éstos están guardados en el servidor de la
aplicación.
● Colaboración: Gracias a que el acceso al servicio se realiza desde una única
ubicación es sencillo el acceso y compartición de datos por parte de varios usuarios.
Tiene mucho sentido, por ejemplo, en aplicaciones online de calendarios u oficina.
● Los navegadores ofrecen cada vez más y mejores funcionalidades para crear
aplicaciones web ricas (RIAs).
3.2.9 Desventajas de una aplicación web
● Las aplicaciones web requieren navegadores web totalmente compatibles para
funcionar. Incluso muchas veces requieren las extensiones apropiadas y actualizadas
para operar
● Muchas veces requieren una conexión a internet para funcionar, si la misma se
interrumpe, no es posible utilizarla más. De todas maneras, en ocasiones, pueden ser
descargadas e instaladas localmente su uso offline.
● Muchas no son de código abierto, perdiendo flexibilidad
● La aplicación web desaparece si así lo requiere el desarrollador o si el mismo se
extingue. Las aplicaciones tradicionales, en general, pueden seguir usándose en esos
casos.
● El usuario, en general, no tiene libertad de elegir la versión de la aplicación web que
quiere usar. Un usuario podría preferir usar una versión más antigua,hasta que la
nueva sea probada.
● En teoría, el desarrollador de la aplicación web puede rastrear cualquier actividad que
el usuario haga. Esto puede traer problemas de privacidad.
3.3 Antecedentes
Existen diversas aplicaciones web diseñadas para una persona sorda destinadas a diferentes
contextos de uso, entre éstas encontramos:
22
3.3.1 Jclic software educativo
(JCLIC, 2015) es un programa que está conformado por un conjunto de aplicaciones
informáticas que sirven para realizar diferentes tipos de actividades educativas como:
rompecabezas, asociaciones, ejercicios de texto, palabras cruzadas. Es un entorno multimedia
que sirve para crear y realizar actividades educativas ya sea para las distintas etapas de
educación obligatoria como para alumnos con necesidades educativas especiales (NEE). Este
software permite trabajar las distintas áreas curriculares: comunicación y representación,
lengua y matemáticas y educación musical. En la figura 3 se presenta un ejemplo de
rompecabezas del software educativo.
Figura 4. Jclic software educativo.
3.3.2 App signed stories
(Signed Stories, 2016) es una aplicación para el uso del iPad con alumnos con discapacidad
auditiva, ya sea en el ámbito escolar o familiar. iDidactic intenta dedicar esfuerzos para
promocionar el uso de la tecnología con alumnos de necesidades educativas especiales.
Signed Stories contiene una increíble cantidad de cuentos infantiles en vídeo, que van desde
clásicos a historias originales para los más pequeños, a contenido para un público
adolescente.
Otro elemento interesante de la aplicación son los cuestionarios visuales. Este recurso puede
ser muy interesantes para el aprendizaje del lenguaje de signos de los propios alumnos o para
compañeros de alumnos con esta discapacidad.
El último recurso destacado de la aplicación es el apartado del diccionario en el que se van
acumulando las principales palabras de cada cuento descargado y que el usuario puede
consultar con una explicación mediante un vídeo de cada palabra. “Os recomendamos el blog
de la aplicación Signed Stories en el que docentes y padres y madres encontraréis recursos
23
muy interesantes”. En este sentido (iDidactic, 2016) también recomienda la web de
Confederación española de familias de personas sordas (FIAPAS). Sin ningún tipo de duda el
iPad mediante este tipo de interesante de aplicaciones puede ayudar a la integración de
alumnos con necesidades educativas especiales. En la figura 5 se presenta una imagen de la
aplicación funcionando.
Figura 5. App signed stories.
3.3.3 Te Cuento
La Fundación CNSE ha creado, con el apoyo del Ministerio de Educación, Cultura y
Deporte, el primer lector digital específico para personas sordas en España denominado “Te
cuento”. Se trata de una aplicación móvil de descarga gratuita que funciona de manera
similar a un lector de libros digitales, con la particularidad, de que su interfaz permite la
visualización de vídeos en lengua de signos (TeCuento, 2016).
La aplicación se presenta como una biblioteca virtual específica para personas sordas.
Pinchando en el icono correspondiente, la pantalla tomará la forma de libro, dividiéndose en
dos partes: en una “página” se podrá ver el texto y/o la imagen del cuento, y en la otra
página se alojará el vídeo signado correspondiente a la imagen o texto de la página anterior.
En esta biblioteca se irán incorporando paulatinamente ediciones de cuentos y libros
traducidos a la lengua de signos española: la primera de ellas, una versión infantil de la
conocida obra de Juan Ramón Jiménez “Platero y yo”. Además, esta aplicación incorporará
un apartado específico denominado “Te cuento” en la que niñas y niños sordos, podrán crear
sus propios relatos, tanto en lengua de signos como en castellano. En la figura 6 se presenta
una imagen de la aplicación.
24
Figura 6. Te cuento
4. Análisis e Ideación
El niño sordo en su desarrollo cognitivo pasa por las mismas etapas que el niño oyente,
aunque se puede observar con algún retraso en la adquisición de algunas nociones. Hay que
tener en cuenta que los órganos sensoriales proporcionan informaciones importantes que
inciden en un desarrollo evolutivo adecuado; el aislamiento y la falta de información a la que
se ve sometida por causa del déficit auditivo pueden representar implicaciones relevantes
para su desarrollo intelectual, lingüístico, social y emocional. Como consecuencia, tendrá un
retraso madurativo que supondrá una serie de dificultades en desarrollo cognitivo.
El lenguaje es un elemento muy ligado al desarrollo simbólico y cognitivo, es una
herramienta clave que nos permite representar mentalmente la información, planificar y
controlar nuestra conducta. Sin embargo, ese retraso madurativo irá superándose a medida
que el niño vaya adquiriendo e interiorizando un código lingüístico que le permita acceder a
la comunicación e interacción social. La inteligencia en personas sordas es igual que en
personas oyentes, puesto que la única diferencia que se puede encontrar en este aspecto se
debe al conjunto de experiencias vividas que normalmente reciben menor estimulación y
poco efectiva.
Como consecuencia, en cuanto mayor riqueza de experiencias de enseñanza-aprendizaje
podamos ofrecer a un niño sordo y cuanto más normalizado sea su desarrollo, menos limitada
estará su capacidad intelectual. Por esta razón, el desarrollo de novedosas aplicaciones web
que generen experiencias visuales e intuitivas se postula como una herramienta pedagógica
de alto impacto en niños sordos.
Estos son los requerimientos técnicos para que funcione la aplicación:
Computador con todos los periféricos (Mouse y teclado)
Sistema Operativo Windows, Linux o MAC
Acceso a Internet
Navegador Web Actualizado
25
5. Justificación y solución
Los computadores son herramientas muy importantes hoy en día, se ven integrados en
muchos ámbitos a nivel internacional, entre estos centros de investigación, universidades y
empresas. Su masificación ha llevado a convertirse en un apoyo constante que mejora la
interacción de las personas con el resto del mundo rompiendo barreras geográficas y
generando desarrollos de acceso masivo que bajo técnicas de aprendizaje por internet
optimizan la curva de aprendizaje en personas con o sin discapacidad.
En este proyecto se desarrollará una aplicación web para la enseñanza/aprendizaje de
matemáticas en niños con discapacidad auditiva entre los 6 y 11 años que cursan los primeros
grados de primaria, la aplicación se llama Phono-Matic y podrá ser visitada por cualquier
dispositivo tecnlogico con internet bajo el dominio “phono-matic.com”. Esta aplicación
constará de dos perfiles, profesores y estudiantes.
El perfil del docente permitirá agregar y quitar estudiantes, así como calificar el desempeño
de cada estudiante individualmente finalmente se integrará una ventana de estadísticas con un
botón para guardar y otro para enviar un correo electrónico junto a comentarios. Por otro
lado, el perfil de estudiante propone una herramienta intuitiva para que el estudiante
experimente la clasificación de objetos, la orientación espacial y finalmente interactúe con
cantidades.
El aprendizaje en los niños sordos es muy distinto a los modelos pedagógicos para niños
normales, entre estos, los temas seleccionados presentan mayor dificultad para la pedagogìa
de matemáticas en niños sordos entre 6 y 11 años. En este orden de ideas la clasificación de
objetos permite a los niños interactuar con el mundo real al descubrir, clasificar, y agrupar
objetos con los que interactúan en su vida cotidiana, la orientación espacial agudiza en el niño
la ubicación en un plano, el cual es fundamental para entender el desplazamiento
desencadenando el cálculo de recorridos y distancias. Finalmente, en cantidades el niño
desarrolla habilidades para el conteo, agrupación, y conjuntos.
26
6. Objetivos
6.1 Objetivo General
Diseñar una aplicación web para la enseñanza/aprendizaje de matemáticas para niños con
discapacidad auditiva.
6.2 Objetivos Específicos
Objetivo 1: Analizar diferentes aspectos en la usabilidad y accesibilidad para los niños con
discapacidad auditiva entre 6 a 11 años.
Objetivo 2: Analizar las diferentes herramientas y metodologías para el proceso de
enseñanza de matemáticas.
Objetivo 3: Diseñar una interfaz multimedia funcional para la enseñanza de matemáticas en
niños sordos de 6 a 11 años con discapacidad auditiva.
Objetivo 4: Diseñar actividades multimedia para el contenido de aplicación web orientada a
la enseñanza de matemáticas para niños con discapacidad auditiva.
27
7. Acta del proyecto
ITEM DESCRIPCIÓN
Nombre del proyecto Diseño de una aplicación web para niños de 6 a 11 años
Duración 4 meses
Interesados Niños sordos entre 6 y 11 años
Patrocinador Estudiantes: Ricardo Ordóñez y José Rodríguez Profesora: Sandra Cano Institución: Universidad San Buenaventura Cali
Cliente Padres y profesores de los niños sordos
Oportunidad de Negocio Licenciar el software como plataforma Web y aplicaciones móviles para
Android – IOS
Tabla 2 Acta del proyecto
Tabla 2. Acta del proyecto
RUBRO SUB-RUBRO HORA SEMANA SEMANAS VALOR
Recursos Humanos
Directora Proyecto Sandra Cano
10
16
5.000.000
Desarrollador Ricardo Ordoñez
20
16
3.600.000
Desarrollador José Rodríguez
20
16
3.600.000
Equipos Computador (x3) 6.000.000
Costos Fijos Infraestructura
Internet, Energía, Cubículo (x3) 2.000.000
Total 20.200.000
Tabla 3 Presupuesto del proyecto
28
8. Matriz de marco lógico
Objetivos Indicadores
Verificadores Supuestos
Fin Enseñanza/aprendizaje de matemáticas
(Cantidades, clasificación, orientación espacial) Se verifica con caritas
felices o caritas tristes según el avance
de los estudiantes.
Entregar
documentación y verificar el
cumplimiento de los
entregables del
proyecto.
Cumpliendo con las
actividades, componentes y
propósitos se realiza
el objetivo general del
proyecto. Propósito
La población objetivo de este proyecto
tenga diversidad de material para el aprendizaje de matemáticas haciendo
más eficiente el aprendizaje.
Pruebas y errores de
diseño con usabilidad enfocada en niños
sordos de 6 a 11 años
con asesoría del director del proyecto.
Al tener los
componentes claros y las actividades se
cumple se llega a el
propósito del proyecto.
Componentes
- Reunión de información y recaudo de
necesidades. - Diseño de interfaz para la aplicación
móvil.
- Pruebas en papel del diseño de la
aplicación web para el proyecto de investigación.
Revisión de
actividades y componentes del
proyecto.
Si cumplimos con el
desarrollo de los componentes de
actividades del
proyecto se puede
avanzar para cumplir el propósito.
Actividades
- Crear el acta de inicio. - Investigación bibliográfica sobre sistemas de aprendizaje para niños
sordos. - Definir los principales componentes de
aprendizaje para niños sordos. - Definir los principales componentes
para crear de una aplicación web. - Definir los componentes a utilizar en
la aplicación web para niños sordos. - Diseñar el funcionamiento de la
aplicación web. - Diseñar las piezas gráficas. - Integración de la aplicación web.
Revisión de
cronograma de actividades para
entrega de diseño de
aplicación web.
Si se cumplen las
actividades propuestas podemos
verificar los
componentes del
proyecto.
Tabla 4 Matriz de marco lógico
29
9. Definición de actividades
1. Crear el acta de inicio.
2. Investigación bibliográfica sobre sistemas de aprendizaje para niños sordos.
3. Definir los principales componentes de aprendizaje para niños sordos.
4. Definir los principales componentes para crear de una aplicación web.
5. Definir los componentes a utilizar en la aplicación web para niños sordos.
6. Diseñar el funcionamiento de la aplicación web.
7. Diseñar las interfaces gráficas.
8. Integración de la aplicación web.
10. Definición del equipo de trabajo
PARTICIPANTE CARGO DESCRIPCIÓN
Sandra Cano Directora Proyecto Orientación y verificación de cumplimiento de las
actividades del proyecto
Ricardo Ordoñez Desarrollador / Diseñador Investigación y diseño de la aplicación web
José Rodríguez Desarrollador / Diseñador Investigación y desarrollo de pruebas basados en
el usuario para la aplicación web
Tabla 5 Equipo de trabajo
30
11. Cronograma
A continuación, se presenta el cronograma de actividades planteado para el desarrollo del
proyecto, primero se observa el diagrama de gantt, posteriormente las holguras y la ruta
crítica.
11.1 Diagrama de gantt
Actividad /
Semana 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
1
2
3
4
5
6
7
8
Tabla 6 Diagrama de Gantt
11.2 Ruta crítica y holgura
La ruta crítica la ruta crítica se interpreta como la dimensión máxima que puede durar el
proyecto y las diferencias con las otras rutas que no sean la crítica, se denominan tiempos de
holgura. Partiendo del diagrama de gantt presentado en la sección anterior, cada actividad
tiene un tiempo estimado de 3 semanas, por lo tanto, en el peor de los casos se realizarán las
8 actividades en un total de 24 semanas si no se realiza ninguna tarea en paralelo. Si el
proyecto se desenvuelve de forma natural como ha sido planteado (16 semanas) presentará
una holgura de 8 semanas frente a la ruta crítica (24 semanas).
31
12. Desarrollo e implementación
Para el diseño implementamos la metodología "Design Thinking" que es utilizada para innovar,
centrada en las personas, ofreciendo un lente a través del cual se pueden observar los retos, detectar
necesidades y buscar una solución.
Como su nombre lo indica, se centra en el proceso de diseño, dejando en un segundo plano el
producto final, e integra enfoques de diferentes campos mediante la participación de equipos
multidisciplinares que tienen como objetivo:
Adquirir conocimientos básicos sobre los usuarios del producto o solución y el problema que
afrontan.
Desarrollar empatía con los usuarios, mediante la observación de los mismos, por lo tanto, es
una metodología basada en observar al usuario.
Generar un usuario tipo para el cual se diseña la solución o producto, definiendo así el punto
de vista a partir del cual se debe desarrollar el diseño.
Generar tantas ideas como sea posible. Por lo tanto, es necesario idear.
Construir prototipos de las ideas más prometedoras.
Aprender a partir de las reacciones de los usuarios al interactuar con el prototipo.
El diseño rentable nos facilita el desarrollo del modelo con una visión como es: la
inspiración(análisis), la planificación (ideación), implementación y evaluación. En la figura 7 se
presenta la estructura de un desarrollo basado en Design Thinking.
Figura 7. Estructura de un desarrollo basado en Design Thinking.
Inspiración: Es conocer y empatizar con el usuario para conocer qué problemas tiene e identificar las
motivaciones, en este caso el problema que es existe poca variedad de plataformas web para la
32
enseñanza de matemáticas orientadas para niños. Con base en lo anterior, en la figura 8 se
presenta el canvas del usuario desarrollado para esta aplicación.
Figura 8. Canvas de usuario desarrollado para esta aplicación. (Parte 1).
33
Figura 9. Canvas de usuario desarrollado para esta aplicación. (Parte 2).
Ideación: Identificando los usuarios el siguiente paso es paso es dar solución al diseño, el cual sea la
mejor manera de llamar la atención de los niños.
Para esto se tuvo en cuenta lo siguiente:
La paleta de colores predominantes dentro de la interfaz los cuales fueron seleccionados para
cumplir las funciones de buena legibilidad y ser atractivos al mismo tiempo.
En la psicología del color se implementó los siguiente:
o Rojo cereza ya que es uno de los colores favoritos por los niños porque su
significado está relacionado con la vitalidad, energía, valor y en general a todas las
emociones humanas.
o Celeste: El azul es un color que transmite calma y serenidad, los niños lo relacionan
con el cielo y el mar.
o Amarillo: El amarillo se interpreta con dinamismo, adaptación, creatividad y los
niños lo relacionan con el sol.
La tipografía es la Helvetia rounded, la cual posee terminaciones redondas, simplicidad en la
forma y es legible en todos los tamaños.
34
12.1 Nombre y logo
En el desarrollo de la aplicación web, durante las diferentes actividades que el niño
desarrollará en el proceso de la enseñanza tendrá un personaje que siempre lo estará
acompañando. Este personaje se ha creado de tal manera, que pueda servir de apoyo para el
niño en diferentes actividades de ayuda. El nombre que se ha colocado es PHONAK. Phonak
es un personaje (Figura 11) que acompañará al niño durante todo su proceso de
enseñanza/aprendizaje en las diferentes actividades de lectoescritura. Este personaje se ha
venido trabajando en una investigación que quiere integrar diferentes entornos de enseñanza
para los niños con discapacidad auditiva (Cano, 2015).
Figura 10. Logo Phonak-matic
Figura 11. Personaje Phonak-Matic.
El nombre e icono principal de la aplicación web fue dado por la directora del proyecto
Sandra Cano. El personaje principal ilustrado en el logo es PHONAK. PHONAK-
MATIC.COM resulta de la combinación entre el personaje y el tema pedagógico enfocado a
las Matemáticas.
12.2 Análisis del perfil del niño
Podríamos clasificar a los niños con discapacidad auditiva en dos ramas. La primera hace
referencia a los niños con discapacidad auditiva y discapacidad del habla (Sordo mudo) y la
segunda se refiere a los sordos elocuentes. El niño sordomudo es un niño más lento para
aprender, pero teniendo una buena guía aprende rápidamente. El niño sordo elocuente, es el
que no habla porque no escucha, pero tiene las posibilidades de decir palabras; es mucho más
rápido su aprendizaje, porque puede repetir con la lectura de los labios (lectura labio - facial)
y esto se puede tratar para gesticular y poder decir palabras. Según la investigadora Blanca
35
Luz Camuset sobre educación de las personas sordas, “podemos observar diferentes perfiles
en los niños sordos los cuales pueden llegar desde problemas de atención, hasta sentido de
inferioridad”. El trabajo realizado con niños sordos debe verificar muchos aspectos, tales
como la edad, la composición familiar, el entorno de desarrollo y la generación de estímulos
en el habla. Estos niños desarrollan un lenguaje del 60% con la lectura de los labios,
permitiendo entender en una forma básica lo que hablan. Finalmente, un niño de edad de 6 a
12 años con discapacidad auditiva está en la edad de mayor aprendizaje. Son capaces de
interpretar los estímulos de su entorno (lectura de labios), pero se les dificulta en frases u
oraciones largas o complejas. También se debe tener en cuenta que los niños sordos en las
edades de 6 a 11 años se encuentran en una escolaridad de 1ro y 2do de primaria al tener un
aprendizaje más lento.
12.3 Diseño de interfaces
Para el diseño de las interfaces gráficas, se han considerado unos principios de diseño
propuestos por (Cano, 2016), los cuales es importante aclarar el perfil del usuario de la
interfaz, en este caso, los niños a quienes va dirigida esta aplicación movil que es una ayuda
para el aprendizaje de los temas mencionados anteriormente para niños sordos y sordomudos
con o sin implante coclear, con sordera moderada o profunda. Considerando el uso de un
modelo orientado hacia la experiencia del usuario, este modelo propone que los niños de
manera intuitiva reconozcan que tipo de actividad hay que realizar y así poder abarcar los
temas de orientacion espacial, clasificación y cantidades. Esta aplicación es una ayuda
didáctica para reforzar el aprendizaje de diferentes logros en matemáticas. A continuación,
desglosamos todos los aspectos del diseño de la interfaz y su funcionamiento.
12.3.1 Pantalla inicial
Esta interface representa la pantalla de inicio de la aplicación web, en donde se expone el logo e
información inicial para los padres de familia acerca de qué es phonak-matic.
Figura 12. Inicio de Phonak-Matic.
36
En la imagen de inicio se busca dar a entender que es una aplicación para niños sordos ya que
se presenta el logo de la aplicación PHONAK en el medio de los niños. El robot está descrito
de color naranja el cual tiene en el dorso un oído y una línea diagonal que lo atraviesa que
haciendo referencia a la discapacidad auditiva. En esta imagen también se presenta el botón
de iniciar.
12.3.2 Interface de acceso
Figura 13. Usuario y contraseña
En la imagen anterior se presentan los dos campos para ingresar el Usuario y la Contraseña,
la aplicación acepta los usuarios docentes o estudiantes, la aplicación re direcciona al usuario
a su perfil con base en el login. El perfil de docente permite registrar y llevar un seguimiento
personalizado de cada estudiante. A continuación, se presenta el perfil estudiante.
12.4 Perfil estudiante
Al ingresar se presenta una imagen principal que contiene los temas principales con los que
va a interactuar el estudiante. Se observan 3 tarjetas de colores amarillo, naranja y rojo. Estos
colores se han seleccionado para referir a los niveles de dificultad de las 3 actividades
desarrolladas que son:
❖ Amarillo: Nivel Básico.
❖ Naranja: Nivel Medio.
❖ Rojo: Nivel Avanzado.
37
Figura 14. Perfil estudiante.
En la Figura 11 se observa que solo la primera tarjeta es la que está en full color, las otras
están con un alpha o blanco translucido, la cual nos indica que están inactivas y al hacer click
no entrará en estas temáticas. Estas tarjetas se activan progresivamente al terminar el cada
tema con su respectiva calificación.
Las tres tarjetas tienen diferentes logos, los cuales hacen referencias a sus temáticas. Además,
tiene dos ítems que referencia las calificaciones. Las calificaciones tienen dos estados de
emociones cara feliz o triste, ya que actualmente donde se ha realizado los análisis en el
Instituto de Niños Ciegos y Sordos, se califican como cara feliz o triste para diferenciar si
realizó correctamente la actividad (cara feliz) o no lo hizo (cara triste). Para informar a los
padres se ha escrito el tema que se va a evaluar (Clasificación, Orientación espacial y
cantidades), cada uno de los temas que se van a evaluar consta de tres niveles, los cuales
incrementan su dificultad progresivamente.
12.4.1 Clasificación
Esta actividad consiste en seleccionar los objetos que tienen que ver con el entorno en que se
encuentra, como primer ejemplo se tiene una cesta de picnic y diferentes objetos a su
alrededor. Estos objetos al seleccionarlos con un click y movimiento del mouse pueden
introducir los objetos dentro de la canasta de pignic. Si el objeto coincide en la situación
presentada, en la parte superior derecha saldrá una cara feliz, al reunir cinco caras felices
cambiaria al siguiente nivel, si no saldrá una cara triste y al completar cinco pasaría a
reiniciar el juego o a salir de la aplicación.
En todos los ejercicios se integró una animación que muestra, cual es la idea del ejercicio.
Este primer tema se indica que el niño debe colocar la pera dentro de la canasta. Esto se hace
con el mouse, selecciona el objeto haciendo clic sobre él, se mueve hacia la canasta y suelta
el click.
38
Figura 15. Ejemplo de clasificación.
A continuación, se muestra los diferentes niveles que contiene el tema 1 (Clasificación):
12.4.1.1 Nivel 1
Figura 16. Clasificación Nivel 1
En la imagen anterior se presenta una selección de objetos que están asociados a un picnic o
comitiva. El estudiante debe seleccionar e ingresar en la canasta en ellos todos los objetos de
acuerdo al tema. Al terminar, la aplicación mostrará un icono para continuar con el nuevo
nivel o regresar al menú de los temas.
39
12.4.1.2 Nivel 2
Figura 17. Clasificación Nivel 2
En la imagen anterior se observa que cambian los objetos, ahora se deben arrastrar los
elementos de supervivencia hacia el morral. En la parte superior derecha está el espacio para
la calificación, si se hace bien el ejercicio este obtendrá una carita feliz, de lo contrario se
colocará una carita triste.
12.4.1.3 Nivel 3
En el nivel 3 se combinarán los niveles 1 y 2. El niño deberá interactuar con el mouse
haciendo clic en un objeto, arrastrarlo hacia donde considere debe ir y soltando el clic hasta
completar el nivel. En este punto no solo podemos observar la parte de clasificación, sino
también la atención de los niños en los niveles anteriores.
Figura 18. Clasificación Nivel 3
40
12.4.2 Orientación espacial
En esta sección busca mediante una forma sencilla mostrar cuatro partes de la orientación
espacial que son: Arriba, Abajo, Izquierda y Derecha. En este punto la actividad consiste en
hacer que phonak cruce de un lado de la pantalla a otro. De manera lúdica se quiere presentar
y enseñar las cuatro direcciones espaciales antes mostradas.
Figura 19. Ejemplo orientación espacial
En la Figura 16 se explica utilizando una animación que se usarán las flechas del teclado.
Cada vez que el niño presione una tecla PHONAK avanzará en el sentido indicado con el
objetivo de llegar a la bandera. A continuación, se presentan los niveles desarrollados.
12.4.2.1 Nivel 1
Figura 20. Orientación espacial nivel 1
41
12.4.2.2 Nivel 2
Figura 21. Orientación espacial nivel 2
12.4.2.3 Nivel 3
Figura 22. Orientación espacial nivel 3
42
12.4.3 Cantidades
En esta sección lo que se considera es simplemente enseñar de manera didáctica los signos de
mayor y menor que (< ó >) los cuales se presentan en la selección de dos opciones, una
verdadera y una falsa. Phonak en una burbuja de pensamiento muestra un signo. Los signos
usados en esta sección son más y menos (+ y -), al aparecer estos signos en la burbuja de
pensamiento de Phonak, así el niño sabrá que escoger y tendrá como aprendizaje de
cantidades.
Esta sección se presenta una pequeña animación la cual indica que por medio del clic del
mouse el niño debe seleccionar la cantidad que muestre la imagen, en este caso al presentarse
un símbolo “más” el niño deberá seleccionar la escena donde hay dos niños y no el niño solo.
Para el caso de visualizarse el símbolo “menos” la respuesta correcta será seleccionar la
imagen donde se encuentra el niño solo.
En el momento de seleccionar la escena adecuada la imagen seleccionada le aparecerá un
contorno de color rodeando en la imagen en la que el estudiante ha presionado clic. Al
término de la animación aparecerán los iconos para regresar al menú de temas o siguiente
para pasar a la primera actividad del nivel. }a continuación se presenta una imagen con el
diseño planteado para el ejemplo de cantidades.
Figura 23. Ejemplo cantidades
43
12.4.3.1 Nivel 1
En este nivel se observa una cancha de fútbol en la cual al lado izquierdo tiene 3 balones de
fútbol y al lado derecho tiene 2 balones de fútbol. el niño debe seleccionar una de las 2
escenas que sea correspondiente al signo que está pensando PHONAK. En la parte superior
derecha se presenta un recuadro rojo, en el cual aparecerá una carita según la calificación del
estudiante.
Figura 24. Cantidades nivel 1
12.4.3.2 Nivel 2
En esta escena aparecen dos pizzas, una que tiene más pepperoni que la otra. el estudiante
debe seleccionar la imagen según el símbolo que este indicando PHONAK, en este caso debe
seleccionar la escena de la derecha.
Figura 25. Cantidades nivel 2
44
12.4.3.3 Nivel 3
Figura 26. Cantidades nivel 3
En la imagen anterior se observa el ejercicio propuesto para el nivel 3, se presenta un paisaje
con distintos árboles, el objetivo es que el estudiante seleccione el lado en el que considere
hay más árboles. Los métodos de interacción y calificación serán los mismos explicados
anteriormente.
Para la calificación de cada una de las actividades se verá en los cuadros superiores de la
parte derecha se mostrarán dos emoticones. Si la actividad es bien realizada se verá reflejada
en una cara feliz, si la actividad no es bien realizada se verá una cara triste.
45
12.5 Perfil docente
El ingreso al perfil docente requiere que en la pantalla inicial se digite correctamente el
usuario y contraseña del docente para que la aplicación lo direccione a su panel de trabajo.
Figura 27. Panel de trabajo docente.
Inicialmente en la parte superior izquierda se presentan dos iconos que permiten añadir o
eliminar estudiantes. En el icono de añadir nos permite crear nuevos estudiantes. Al hacer
esto el docente ingresará los siguientes elementos.
❏ Género que aparece con los símbolos círculo con flecha que denota que es masculino
y el símbolo de círculo con una cruz que denota género femenino.
❏ Un espacio punteado en el cual el docente colocará el Nombre y Apellido del
estudiante.
❏ En el icono asociado con el espacio del estudiante que es de una persona está asociado
con el perfil del estudiante. Al hacer clic abrirá una ventana flotante donde el docente
puede colocar el perfil del estudiante, como por ejemplo edad, cualidades del
estudiante, déficit del estudiante y cosas competentes a su labor de docente hacia el
estudiante.
❏ el icono de chulo nos permite a la hora de eliminar el estudiante simplemente
seleccionarlo y se borrará automáticamente.
❏ El siguiente icono que es parecido a un calendario nos deja ver que tipo de actividades
está realizando el estudiante programadas por el docente, así en el futuro si se
implementan nuevos temas el docente puede seleccionar los temas que se van a
trabajar por cada estudiante.
❏ En el botón que es de estadística asociado al estudiante nos muestra por medio de una
gráfica el avance de cada estudiante como podemos observar en la siguiente gráfica.
46
Figura 28. Estadísticas de los estudiantes.
En la parte inferior de las estadísticas también se observan tres secciones que corresponden a
comentarios, guardar, correo, a continuación, se describe el objetivo de cada sección:
➔ Comentarios: En este espacio el docente puede escribir sobre cada estudiante y así
tener presente los avances del niño
➔ Guardar: Este icono nos permite guardar los comentarios escritos.
➔ Correo: El docente puede enviar por medio de un correo electrónico los comentarios
y las estadísticas de cada estudiante a sus padres o tutores para que ellos puedan ver el
avance y aprendizaje de cada niño.
47
12.6 Modelo entidad relación
En la siguiente figura se observa el Modelo Entidad Relación (MER) en la cual se presenta el
flujo de datos que se maneja en la aplicación.
Figura 29. Modelo entidad relación.
48
13. Conclusiones
Se realizó el diseño de una aplicación web para enseñar matemáticas a niños sordos de entre
los 6 y 11 años, la aplicación tiene dos perfiles (profesor y estudiante), cuenta con tres tipos
de interacción; Clasificación, orientación espacial y cantidades. Cuenta con 3 niveles de
dificultad en cada uno de los tipos de interacción, el docente puede agregar o quitar nuevos
estudiantes, el sistema le genera automáticamente un password y este debe ser enviado al
padre del niño para ingresar a la plataforma. El sistema permite revisar los avances de cada
estudiante para realimentar a los padres sobre la curva de aprendizaje y la evolución de sus
hijos. Esto convierte el sistema en una herramienta flexible, novedosa e interactiva para
realizar pedagogía en niños sordos apoyándose en las tecnologías de la información y la
comunicación TICs.
49
14. Trabajos Futuros
Integrar nuevos niveles con más dificultad a la aplicación para que los estudiantes tengan
nuevos retos y mejoren su capacidad frente a las matemáticas, así mismo, se propone la
integración de nuevas temáticas pedagógicas como ciencias naturales, artes, historia entre
otros. Finalmente se propone tener una aplicación multiplataforma, de tal manera que pueda
ser funcional para cualquier tipo de dispositivos móviles.
50
15. Bibliografía
Mauricio Vianna, Ysmar Vianna, Isabel K. Adler, Brenda Lucena, Beatriz Russo. Design
Thinking: Innovación en negocios. 2011.
Guy McIlroy and Claudine Storbeck, Development of Deaf Identity: An Ethnographic
Study.Oxford University Press, 2011.
Asza “Agrupación de personas sordas de zargoza y aragón”, Estrategias, Recursos y
Conocimientos para poner en práctica con alumnos sordos y/o con discapacidad auditiva
Guía para profesores, 2010.
Chauán Kim, Elías. Plataformas Digitales. Disponible en:
http://www.slideshare.net/echahuankim/plataformas-digitales. 2009.
Echeita, G. y Duk, C. Inclusión Educativa. Revista Iberoamericana sobre Calidad, Eficacia y
Cambio en Educación, 6 (2), 1-6.(www.rinace.net/vol6num2.htm). 2008.
CERMI-ARAGÓN, Guía: Consejos para un trato adecuado para las personas con
discapacidad. Zaragoza, 2007.
Ainscow, M., Booth, T. y Dyson, A. Improving schools, developing inclusion Londres:
Routledge. 2006.
Insor “Instituto Nacional para Sordos”, Diccionario básico de la lengua de señas en
Colombia, 2006.
SCOTT, Isaacs: “A fondo: Dynamic HTML”, Editorial Madrid: McGraw-Hill, 2006.
Avraham Le and James T. Rayeld. Web-application development using the
model/view/controller design pattern. Enterprise Distributed Object Computing Conference,
IEEE International, 2001.
Sergio Luján Mora. Programación en internet: clientes web. Editorial club universitario,
ISBN 84-8454-118-5, 2001
G.E. Krasner and S.T. Pope. A cookbook for using the model-view-controller user interface
paradigm in smalltalk-80. Journal of Object-oriented programming, 1988.
XTEC, Xarxa telematica, depatamento educativo cataluña. JCLIC -
http://clic.xtec.cat/es/jclic/index.htm
ITV, Signed Stories™ is produced by our specialist sign language department ITV SignPost.
http://www.signedstories.com/apps
51
S. Cano, V. Peñeñory, C. Collazos, H. Fardoun, D. Alghazzawi. Training with Phonak:
Serious Game as support in Auditory – Verbal Therapy for Children with Cochlear Implants.
3rd Workshop on ICTs for improving Patients Rehabilitation Research Techniques, Lisboa.
Portugal, 2015.
S. Cano, C. Collazos, C. Manresa-Yee, V. Peñeñory. Principles of Design for Serious Games
to Teaching of literacy for Children with Hearing disabilities. XVII International Conference
on HCI, Salamanca, España, 2016
