UNIVERSIDAD DE GUAYAQUIL

Transcripción

1 UNIVERSIDAD DE GUAYAQUIL FACULTAD DE CIENCIAS MATEMÁTICAS Y FÍSICAS CARRERA DE INGENIERÍA EN SISTEMAS COMPUTACIONALES MANUAL TÉCNICO DE LA APLICACIÓN MULTI- PLATAFORMA PARA EL APOYO EN EL APRENDIZAJE DEL IDIOMA EXTRANJERO INGLÉS PARA NIÑOS DE 5 A 6 AÑOS TESIS DE GRADO Previo a la obtención del Título de: INGENIERO EN SISTEMAS COMPUTACIONALES AUTOR: LYZANDRO ALEXANDER FIERRO VARGAS TUTOR: ING. JUAN CHANABÁ ALCÓCER, M. Sc. GUAYAQUIL ECUADOR 2013

2 UNIVERSIDAD DE GUAYAQUIL FACULTAD DE CIENCIAS MATEMÁTICAS Y FÍSICAS CARRERA DE INGENIERÍA EN SISTEMAS COMPUTACIONALES MANUAL TÉCNICO DE LA APLICACIÓN MULTI- PLATAFORMA PARA EL APOYO EN EL APRENDIZAJE DEL IDIOMA EXTRANJERO INGLÉS PARA NIÑOS DE 5 A 6 AÑOS TESIS DE GRADO Previo a la obtención del Título de: INGENIERO EN SISTEMAS COMPUTACIONALES LYZANDRO ALEXANDER FIERRO VARGAS TUTOR: ING. JUAN CHANABÁ ALCÓCER, M. Sc. GUAYAQUIL ECUADOR 2013

3 ÍNDICE GENERAL ÍNDICE DE GRÁFICOS 4 ÍNDICE DE CUADROS 5 MANUAL TÉCNICO 6 APLICACIÓN METODOLOGÍA GALVIS PANQUEVA A. 6 FASE PRE-PRODUCCIÓN (ANÁLISIS) 8 FASE PRODUCCIÓN (DISEÑO) 9 REQUERIMIENTOS PARA EL DESARROLLO 13 HERRAMIENTAS PARA EL DESARROLLO 14 DICCIONARIO DE DATOS 16 DETALLES DE TABLAS DEL PROYECTO 17 MODELO DE ENTIDAD - RELACIÓN 28 DIAGRAMA DE FLUJO DE DATOS 29 DIAGRAMA GENERAL DEL SISTEMA 29 DIAGRAMA DE AUTENTICACIÓN 29 DIAGRAMA EN ROL DE USUARIO 30 DIAGRAMA EN ROL DE ADMINISTRADOR 31 DIAGRAMA DE CASOS DE USO 32 DIAGRAMA DEL SISTEMA EN ROL USUARIO 32 DIAGRAMA DEL SISTEMA EN ROL ADMINISTRADOR 33 LINKS 34 Pág.

4 ÍNDICE DE GRÁFICOS Pág. GRÁFICO 1 Desarrollo en Fases con la Metodología de Galvis P.:... 7 GRÁFICO 2 Diseño módulo Administrador y submódulos funcionales:.. 9 GRÁFICO 3 Diseño navegacional - arquitectura.: GRÁFICO 4 Ingeniería de software modelo incremental: GRÁFICO 5 Diagrama General del Sistema.: GRÁFICO 6 Diagrama de Autenticación: GRÁFICO 7 Diagrama en Rol de Usuario:.. 30 GRÁFICO 8 Diagrama en Rol de Administrador: 31 GRÁFICO 9 Diagrama del Sistema en Rol Usuario: GRÁFICO 10 Diagrama del Sistema en Rol Administrador:

5 ÍNDICE DE CUADROS Pág. CUADRO 1 Descripción de Campos Tabla: usuarios:.. 17 CUADRO 2 Descripción de Campos Tabla: tipo_usuarios: CUADRO 3 Descripción de Campos Tabla: grupos: CUADRO 4 Descripción de Campos Tabla: grupos_establecidos: CUADRO 5 Descripción de Campos Tabla: asignaciones: CUADRO 6 Descripción de Campos Tabla: modulos: CUADRO 7 Descripción de Campos Tabla: tipo_modulos: CUADRO 8 Descripción de Campos Tabla: clienteconectado: CUADRO 9 Descripción de Campos Tabla: historial_conexion: CUADRO 10 Descripción de Campos Tabla: en_clase: CUADRO 11 Descripción de Campos Tabla: evaluaciones_2: CUADRO 12 Modelo Entidad - Relación:

6 MANUAL TÉCNICO El siguiente manual técnico tiene como objetivo mostrar especificaciones técnicas utilizadas en el proyecto. Aplicación Metodología Galvis Panqueva Alvarado H. Se desarrolló una aplicación multiplataforma como material educativo computarizado aplicando la metodología de Galvis Panqueva expuesta en el marco teórico de esta tesis de grado. Para el desarrollo de la aplicación multiplataforma de acuerdo al tema de tesis de grado se utilizó como motor gráfico a Flash CS6 que maneja 2D donde existen códigos as3 nativos de la aplicación. El código fuente se desarrolló en el lenguaje php en cada una de las fases que indica la metodología de Galvis Panqueva tanto en su estructura de desarrollo, entorno gráfico, sonidos, clases, objetos y reglas del programa lo que dio como resultado una aplicación multiplataforma para el apoyo en el aprendizaje del idioma inglés para niños de 5 a 6 años de edad. 6

7 GRÁFICO NO. 1: DESARROLLO EN FASES CON LA METODOLOGÍA DE GALVIS P. Elaboración: Fuente: Lyzandro A. Fierro Vargas. Aplicación multiplataforma para el apoyo en el aprendizaje del idioma extranjero inglés para niños de 5 a 6 años. La opinión de los usuarios en cada momento facilitó la detección y solución a tiempo de los errores y el análisis de la aplicación en cada momento donde se mejoró continuamente de los prototipos desarrollado. Requirió la realización de importantes esfuerzos iniciales para obtener la versión final. Se inició un proceso iterativo de 7

8 pruebas que proporcionó la realimentación para la mejora, especialmente de procesos lógicos pero también de otros destalles de interfaz. A continuación se indica los pasos realizados en el desarrollo de la aplicación multiplataforma y fases aplicadas de la metodología de Galvis Panqueva. Fase de Pre-producción Análisis o Género: La aplicación multiplataforma es de tipo material educativo computarizado. o Historia: Se estableció un diseño educativo esquematizado en un papel borrador al igual de su estructura lógica, reglas de la aplicación, menú principal, además los contenidos educativos vasado en un pensum de un centro infantil bilingüe de la ciudad de Guayaquil. o Bocetos: Se han realizado varios bosquejos hasta dar con el boceto final de la aplicación. Para la elección de la forma y colores de interfaz de usuarios fue en apoyo de licenciadas especialistas en párvulos quienes sugirieron diseños llamativos, en el resalte e impacto visual. Los fondos de los diferentes niveles fueron buscados y descargados de la web. 8

9 o Usuarios: Niños entre 5 a 6 años de edad, sin discapacidad física. o Área de contenido: Inglés básico. o Modo de uso de la aplicación: Individual, con apoyo de instructor. Fase de Producción Diseño o Diseño de la aplicación: Definidos los elementos de la aplicación funcionales y no funcionales, como son la alternativa de elegir 3 tipos de niveles de dificultad para usuarios en ciertas actividades controlados por el modulo administrador. Además del diseño de los módulos administrador y de los submodulos u opciones, módulo usuario y módulo actividad interactiva. GRÁFICO NO. 2: DISEÑO MODULO ADMINISTRADOR Y SUBMODULOS FUNCIONALES. Gestionar Usuarios Gestionar Grupo Gestionar Asignación es Gestionar Curso Visor Calificaciones 9

10 El sistema muestra la interfaz con los controles necesarios para gestionar cada opción del menú en el sistema: El administrador escoge la acción que desea realizar: Crear, Modificar, Listar, Asignar o Eliminar un usuario o administrador. El sistema muestra la interfaz con los controles necesarios para gestionar una búsqueda por parametros. El administrador escoge la acción que desea realizar: Crear, Editar, Subir Foto de un usuario o administrador. El sistema muestra la interfaz con los controles necesarios para gestionar Grupos: Listar, Actualizar, Guardar. El administrador escoge la acción que desea realizar: Crear Grupo, Establecer Grupo (fecha creación, máximo de usuarios, detalles). El sistema muestra la interfaz con los controles necesarios para gestionar las asignaciones de Usuarios en Grupos Establecidos. El Administrador gestionará búsquedas por parametros tanto para Grupos Establecidos como para Usuarios. Gestionará las asignaciones para GEE; Iniciar Curso (GEC), Listar GEI y GEF. Puede Listar los Usuarios asignados de Grupo Establecido, además de los detalles del Usuario. El sistema muestra la interfaz con los controles necesarios para gestionar el curso. El administrador gestionará los cursos disponibles asignados como los integrantes. Gestionará las asignaciones de los módulos disponibles (Actividades Interactivas) para los cursos disponibles para clases. Puede Iniciar clase, terminar clase, controlar niveles de dificultades para las actividades. El administrador gestionará búsquedas por parámetros. El sistema lista las Actividades Interactivas existentes con sus calificaciones y alumnos registrados en la base de datos Visualizar los datos en forma gráfica estadística. 17 Elaboración: Fuente: Lyzandro A. Fierro Vargas. Diseño modulo administrador y submodulos Funcionales. 10

11 o Diseño Navegacional: GRÁFICO NO. 3: DISEÑO NAVEGACIONAL - ARQUITECTURA Elaboración: Fuente: Lyzandro A. Fierro Vargas. Aplicación multiplataforma para el apoyo en el aprendizaje del idioma extranjero inglés para niños de 5 a 6 años. o Diseño artístico: Características de cada una de las interfaces de usuario, diseño de las imágenes en Adobe Illustrator según bocetos creados. Efectos de sonidos y grabaciones de audio creados en Ripper Pro a ejecutarse en los diferentes interfaces de la aplicación. Gráficos de tipo 2D en formato GIF. Los efectos sonoros fueron buscados y descargados de la Web. o Diseño Educativo: Tomando como punto de partida para el contenido educativo se contó con un pensum y la estructura de temas, para establecer lo que hay que enseñar o reforzar para subsanar con apoyo del material educativo computarizado. 11

12 o Diseño mecánico: Movimiento de las imágenes, ejecución de audio en eventos click, elección de opciones. o Motor de la aplicación: Motor de Macromedia Flash, Motor lenguaje Php quien realiza los procesos lógicos. o Diseño técnico: La codificación de la aplicación en lenguaje Php utilizando la herramienta de editor de Flash, diagrama de comportamiento de cada una de las clases u objetos y los tiempos de desarrollo establecidos. o Pruebas Alpha: Pruebas y corrección de novedades a la aplicación multiplataforma, donde se comprobó el cumplimiento cabal de lo establecido en los requerimientos y reglas de la aplicación. GRÁFICO NO. 4: INGENIERÍA DE SOFTWARE MODELO INCREMENTAL Elaboración: Fuente: Lyzandro A. Fierro Vargas. Aplicación multiplataforma para el apoyo en el aprendizaje del idioma extranjero inglés para niños de 5 a 6 años. 12

13 o Implementación: Generación del archivo ejecutable en la plataforma de Windows el cual se encuentra en el CD adjunto a esta documentación. Hardware: Requerimientos para el Desarrollo Tarjeta de video básica que soporte mínimo gráficos 2D. Procesador mínimo 2.0 GHz. Memoria 2 Gb. Parlantes básicos. Smartphone SO Android Software: Windows 7 o superior Php V Apache V Base de Datos MySQL V

14 Macromedia Flash CS6 Adobe Illustrator CS6 Ripper Pro. Herramientas para el Desarrollo Después de realizar el análisis de las herramientas a emplearse en este proyecto, a continuación se menciona los puntos que se consideró para su selección: Plataformas para la ejecución En el alcance de esta Tesis se tiene enmarcado que esta aplicación trabajo bajo las plataformas de Sistemas Operativos: Windows, Linux, Macintosh, donde las pruebas y uso del mismo fueron exitosas. Macromedia Flash CS6 Es la tecnología de Macromedia que más está creciendo en el mercado de internet, se la emplea para realizar escenarios donde se puede dibujar o importar ilustraciones, agregar texto, sonido y agregar características adicionales tales como botones de navegación o componentes de la interfaz de usuario. Se trata de una herramienta para realizar presentaciones multimedia en software interactivo. 14

15 ActionScript Lenguaje de programación incorporado que proporciona Flash. Este lenguaje de creación de scripts, permite comunicarse con un programa. Puede utilizarlo para indicar a Flash qué debe hacer y para qué sucede mientas se reproduce una película. Esta comunicación bidireccional permite crear películas interactivas. Adobe Illustrator CS6 Es un programa de diseño que sirve para editar imágenes, fotos. También sirve para poder crear tus propios diseños. Es una herramienta útil para los diseñadores gráficos. Ripper Pro Es un galardonado editor de audio digital que incluye herramientas y efectos para manipular audio, además, de poder cambiar sus formatos. Base de Datos MySQL Utilizamos como base de datos phpmyadmin, porque es una herramienta muy completa que permite acceder a todas las funciones típicas de la base de datos MySQL a través de una interfaz web muy intuitiva. La aplicación en si no es más que un conjunto de archivos escritos en PHP que podemos copiar en un directorio de un servidor web, de modo que, cuando accedemos a esos archivos, nos muestran una página donde podemos encontrar las bases de datos a las que tenemos acceso en nuestro servidor de bases de datos y todas sus tablas. La 15

16 herramienta nos permite crear tablas, insertar datos, en las tablas existentes, navegar por los registros de las tablas, editarlos y borrarlos, borrar tablas, etc. Incluso ejecutar sentencias SQL y hacer un backup de la base de datos. Diccionario de Datos A continuación se describen las escrituras participantes dentro del modelo de datos del proyecto: 16

17 Descripción de Campos Tabla: usuarios. CUADRO NO. 1 DESCRIPCIÓN DE CAMPOS TABLA: usuarios. Elaboración: Lyzandro A. Fierro Vargas. Fuente: B.D. base_english_tuto_app 17

18 Descripción de Campos Tabla: tipo_usuarios. CUADRO NO. 2 DESCRIPCIÓN DE CAMPOS TABLA: tipo_usuarios. Elaboración: Lyzandro A. Fierro Vargas. Fuente: B.D. base_english_tuto_app 18

19 Descripción de Campos Tabla: grupos CUADRO NO. 3 DESCRIPCIÓN DE CAMPOS TABLA: grupos. Elaboración: Lyzandro A. Fierro Vargas. Fuente: B.D. base_english_tuto_app 19

20 Descripción de Campos Tabla: grupos_establecidos CUADRO NO. 4 DESCRIPCIÓN DE CAMPOS TABLA: grupos_establecidos. Elaboración: Lyzandro A. Fierro Vargas. Fuente: B.D. base_english_tuto_app 20

21 Descripción de Campos Tabla: asignaciones CUADRO NO. 5 DESCRIPCIÓN DE CAMPOS TABLA: asignaciones. Elaboración: Lyzandro A. Fierro Vargas. Fuente: B.D. base_english_tuto_app 21

22 Descripción de Campos Tabla: modulos CUADRO NO. 6 DESCRIPCIÓN DE CAMPOS TABLA: modulos. Elaboración: Lyzandro A. Fierro Vargas. Fuente: B.D. base_english_tuto_app 22

23 Descripción de Campos Tabla: tipo_modulos CUADRO NO. 7 DESCRIPCIÓN DE CAMPOS TABLA: tipo_modulos. Elaboración: Lyzandro A. Fierro Vargas. Fuente: B.D. base_english_tuto_app 23

24 Descripción de Campos Tabla: clienteconectado CUADRO NO. 8 DESCRIPCIÓN DE CAMPOS TABLA: clienteconectado. Elaboración: Lyzandro A. Fierro Vargas. Fuente: B.D. base_english_tuto_app 24

25 Descripción de Campos Tabla: historial_conexion CUADRO NO. 9 DESCRIPCIÓN DE CAMPOS TABLA: historial_conexion. Elaboración: Lyzandro A. Fierro Vargas. Fuente: B.D. base_english_tuto_app 25

26 Descripción de Campos Tabla: en_clase CUADRO NO. 10 DESCRIPCIÓN DE CAMPOS TABLA: en_clase. Elaboración: Lyzandro A. Fierro Vargas. Fuente: B.D. base_english_tuto_app 26

27 Descripción de Campos Tabla: evaluaciones_2 CUADRO NO. 11 DESCRIPCIÓN DE CAMPOS TABLA: evaluaciones_2. Elaboración: Lyzandro A. Fierro Vargas. Fuente: B.D. base_english_tuto_app 27

28 Modelo Entidad Relación A continuación se muestra el modelo Entidad Relación de las tablas utilizadas en la aplicación multiplataforma, la Base de Datos utilizada es MySQL Server CUADRO NO. 12: MODELO ENTIDAD - RELACIÓN. Elaboración: Fuente: Lyzandro A. Fierro Vargas. Diseño del modelo Entidad Relación. 28

29 Diagrama de Flujo de Datos Diagrama General del Sistemas. GRÁFICO NO. 5: DIAGRAMA GENERAL DEL SISTEMA. Elaboración: Fuente: Lyzandro A. Fierro Vargas. Diseño del diagrama general de la aplicación multiplataforma para el apoyo en el aprendizaje del idioma extranjero inglés para niños de 5 a 6 años. Diagrama de Autenticación. GRÁFICO NO. 6: DIAGRAMA DE AUTENTICACIÓN. Elaboración: Fuente: Lyzandro A. Fierro Vargas. Diseño del diagrama de autenticación de la aplicación multiplataforma para el apoyo en el aprendizaje del idioma extranjero inglés para niños de 5 a 6 años. 29

30 Diagrama en Rol de Usuario. GRÁFICO NO. 7: DIAGRAMA EN ROL DE USUARIO. Elaboración: Fuente: Lyzandro A. Fierro Vargas. Diseño del diagrama en Rol de usuario de la aplicación multiplataforma para el apoyo en el aprendizaje del idioma extranjero inglés para niños de 5 a 6 años. 30

31 Diagrama en Rol de Administrador. GRÁFICO NO. 8: DIAGRAMA EN ROL DE ADMINISTRADOR Elaboración: Fuente: Lyzandro A. Fierro Vargas. Diseño del diagrama en Rol de administrador de la aplicación multiplataforma para el apoyo en el aprendizaje del idioma extranjero inglés para niños de 5 a 6 años. 31

32 GRÁFICO NO. 9: DIAGRAMA DEL SISTEMA EN ROL USUARIO Elaboración: Lyzandro A. Fierro Vargas. Fuente: Diseño del diagrama del sistema en rol usuario de la aplicación multiplataforma para el apoyo en el aprendizaje del idioma extranjero inglés para niños de 5 a 6 años. Diagrama de Casos de Uso Diagrama del Sistemas en Rol Usuario. 32

33 GRÁFICO NO. 10: DIAGRAMA DEL SISTEMA EN ROL ADMINISTRADOR. Elaboración: Lyzandro A. Fierro Vargas. Fuente: Diseño del diagrama del sistema en rol administrador de la aplicación multiplataforma para el apoyo en el aprendizaje del idioma extranjero inglés para niños de 5 a 6 años. Diagrama del Sistemas en Rol Administrador. 33

34 LINKS Sonidos Imágenes 3.html Convertidor de.wav a.mp3 34