MANUAL TECNICO.pdf

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 MULTIPLATAFORMA 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
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 MULTIPLATAFORMA 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
ÍNDICE GENERAL
Pág.
ÍNDICE DE GRÁFICOS
ÍNDICE DE CUADROS
4
5
MANUAL TÉCNICO
APLICACIÓN METODOLOGÍA GALVIS PANQUEVA A.
FASE PRE-PRODUCCIÓN (ANÁLISIS)
FASE PRODUCCIÓN (DISEÑO)
6
6
8
9
REQUERIMIENTOS PARA EL DESARROLLO
HERRAMIENTAS PARA EL DESARROLLO
13
14
DICCIONARIO DE DATOS
DETALLES DE TABLAS DEL PROYECTO
16
17
MODELO DE ENTIDAD - RELACIÓN
28
DIAGRAMA DE FLUJO DE DATOS
DIAGRAMA GENERAL DEL SISTEMA
DIAGRAMA DE AUTENTICACIÓN
DIAGRAMA EN ROL DE USUARIO
DIAGRAMA EN ROL DE ADMINISTRADOR
29
29
29
30
31
DIAGRAMA DE CASOS DE USO
DIAGRAMA DEL SISTEMA EN ROL USUARIO
DIAGRAMA DEL SISTEMA EN ROL ADMINISTRADOR
32
32
33
LINKS
34
Í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.: ………..………………….....................
11
GRÁFICO 4
Ingeniería de software – modelo incremental: …...……..……………………
12
GRÁFICO 5
Diagrama General del Sistema.: ………..…………………………………....
29
GRÁFICO 6
Diagrama de Autenticación: ………………………..……................................
29
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:………..……………………………...
32
GRÁFICO 10
Diagrama del Sistema en Rol Administrador:……………………………..
33
4
ÍNDICE DE CUADROS
Pág.
CUADRO 1
Descripción de Campos Tabla: usuarios:…………………………………..
17
CUADRO 2
Descripción de Campos Tabla: tipo_usuarios: …………..…………..…......
18
CUADRO 3
Descripción de Campos Tabla: grupos: …………....………...….……..……
19
CUADRO 4
Descripción de Campos Tabla: grupos_establecidos: …...………………....…
20
CUADRO 5
Descripción de Campos Tabla: asignaciones: .…………..…………..….….....
21
CUADRO 6
Descripción de Campos Tabla: modulos: .…………..…………..….…............
22
CUADRO 7
Descripción de Campos Tabla: tipo_modulos: .…………..…..………..….......
23
CUADRO 8
Descripción de Campos Tabla: clienteconectado: .…………..………..……....
24
CUADRO 9
Descripción de Campos Tabla: historial_conexion: .…………..…………..….
25
CUADRO 10
Descripción de Campos Tabla: en_clase: .…………..…………..….…............
26
CUADRO 11
Descripción de Campos Tabla: evaluaciones_2: .…………..…………..…......
27
CUADRO 12
Modelo Entidad - Relación:.……………………………….....………….……..
28
5
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
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
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
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
1
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.
2
El sistema muestra la interfaz con los controles necesarios para
gestionar una búsqueda por parametros.
3
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.
4
5
El administrador escoge la acción que desea realizar: Crear Grupo,
Establecer Grupo (fecha creación, máximo de usuarios, detalles).
6
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.
7
8
9
10
11
12
13
14
15
16
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
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
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
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.
Requerimientos para el Desarrollo
Hardware:

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

Windows 7 o superior

Php V. 5.3.4

Apache V. 2.2.17

Base de Datos MySQL V. 5.1.53
Software:
13

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
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
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
Elaboración:
Fuente:
Lyzandro A. Fierro Vargas.
B.D. base_english_tuto_app
DESCRIPCIÓN DE CAMPOS TABLA: usuarios.
CUADRO NO. 1
Descripción de Campos Tabla: usuarios.
17
Elaboración:
Fuente:
Lyzandro A. Fierro Vargas.
B.D. base_english_tuto_app
DESCRIPCIÓN DE CAMPOS TABLA: tipo_usuarios.
CUADRO NO. 2
Descripción de Campos Tabla: tipo_usuarios.
18
Elaboración:
Fuente:
Lyzandro A. Fierro Vargas.
B.D. base_english_tuto_app
DESCRIPCIÓN DE CAMPOS TABLA:
CUADRO NO. 3
grupos.
Descripción de Campos Tabla: grupos
19
Elaboración:
Fuente:
Lyzandro A. Fierro Vargas.
B.D. base_english_tuto_app
DESCRIPCIÓN DE CAMPOS TABLA:
grupos_establecidos.
CUADRO NO. 4
Descripción de Campos Tabla: grupos_establecidos
20
Elaboración:
Fuente:
Lyzandro A. Fierro Vargas.
B.D. base_english_tuto_app
DESCRIPCIÓN DE CAMPOS TABLA:
CUADRO NO. 5
asignaciones.
Descripción de Campos Tabla: asignaciones
21
Elaboración:
Fuente:
Lyzandro A. Fierro Vargas.
B.D. base_english_tuto_app
DESCRIPCIÓN DE CAMPOS TABLA:
CUADRO NO. 6
modulos.
Descripción de Campos Tabla: modulos
22
Elaboración:
Fuente:
Lyzandro A. Fierro Vargas.
B.D. base_english_tuto_app
DESCRIPCIÓN DE CAMPOS TABLA:
CUADRO NO. 7
tipo_modulos.
Descripción de Campos Tabla: tipo_modulos
23
Elaboración:
Fuente:
Lyzandro A. Fierro Vargas.
B.D. base_english_tuto_app
DESCRIPCIÓN DE CAMPOS TABLA:
CUADRO NO. 8
clienteconectado.
Descripción de Campos Tabla: clienteconectado
24
Elaboración:
Fuente:
Lyzandro A. Fierro Vargas.
B.D. base_english_tuto_app
DESCRIPCIÓN DE CAMPOS TABLA:
historial_conexion.
CUADRO NO. 9
Descripción de Campos Tabla: historial_conexion
25
Elaboración:
Fuente:
Lyzandro A. Fierro Vargas.
B.D. base_english_tuto_app
DESCRIPCIÓN DE CAMPOS TABLA:
CUADRO NO. 10
en_clase.
Descripción de Campos Tabla: en_clase
26
Elaboración:
Fuente:
Lyzandro A. Fierro Vargas.
B.D. base_english_tuto_app
DESCRIPCIÓN DE CAMPOS TABLA:
CUADRO NO. 11
evaluaciones_2.
Descripción de Campos Tabla: evaluaciones_2
27
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 5.1.53.
CUADRO NO. 12: MODELO ENTIDAD - RELACIÓN.
Elaboración:
Fuente:
Lyzandro A. Fierro Vargas.
Diseño del modelo Entidad – Relación.
28
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
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
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
Elaboración:
Fuente:
Lyzandro A. Fierro Vargas.
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.
GRÁFICO NO. 9: DIAGRAMA DEL SISTEMA EN ROL USUARIO
Diagrama de Casos de Uso
Diagrama del Sistemas en Rol Usuario.
32
Elaboración:
Fuente:
Lyzandro A. Fierro Vargas.
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.
GRÁFICO NO. 10: DIAGRAMA DEL SISTEMA EN ROL ADMINISTRADOR.
Diagrama del Sistemas en Rol Administrador.
33
LINKS
Sonidos
http://www.sonidosfree.com/
http://www.freesound.org/browse/
http://www.wavsource.com/
Imágenes
http://fondosparabloggergratis.blogspot.com/p/fondos-para-blogger-gratis-pagina3.html
http://wallpapers.net/view/blue_planet-1680x1050.html
http://www.sendspace.com/file/w8ua9x
Convertidor de .WAV a .MP3
http://media.io/
34