universidad de guayaquil - repositorio.ug.edu.ecrepositorio.ug.edu.ec/bitstream/redug/2540/2/manual...
TRANSCRIPT
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
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
ÍNDICE GENERAL
Pág.
Í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
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.: ………..…………………..................... 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
5
Í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
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.
7
Elaboración: Lyzandro A. Fierro Vargas. Fuente: 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. 1: DESARROLLO EN FASES CON LA METODOLOGÍA DE
GALVIS P.
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
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.
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
Grupo
Gestionar
Usuarios
Gestionar
Asignación
es
Gestionar
Curso
Visor
Calificaciones
10
Elaboración: Lyzandro A. Fierro Vargas. Fuente: Diseño modulo administrador y submodulos Funcionales.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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.
11
o Diseño Navegacional:
GRÁFICO NO. 3: DISEÑO NAVEGACIONAL - ARQUITECTURA
Elaboración: Lyzandro A. Fierro Vargas. Fuente: 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.
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: Lyzandro A. Fierro Vargas. Fuente: Aplicación multiplataforma para el apoyo en el aprendizaje del idioma
extranjero inglés para niños de 5 a 6 años.
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.
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
Software:
Windows 7 o superior
Php V. 5.3.4
Apache V. 2.2.17
Base de Datos MySQL V. 5.1.53
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.
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
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:
17
Descripción de Campos Tabla: usuarios.
Elab
ora
ció
n:
Lyza
nd
ro A
. Fie
rro
Var
gas.
Fu
ente
: B
.D. b
ase_
en
glis
h_t
uto
_ap
p
CU
AD
RO
NO
. 1
DE
SC
RIP
CIÓ
N D
E C
AM
PO
S T
AB
LA
: u
sua
rios.
18
Descripción de Campos Tabla: tipo_usuarios.
CU
AD
RO
NO
. 2
DE
SC
RIP
CIÓ
N D
E C
AM
PO
S T
AB
LA
: ti
po
_u
sua
rios.
Elab
ora
ció
n:
Lyza
nd
ro A
. Fie
rro
Var
gas.
Fu
ente
: B
.D. b
ase_
en
glis
h_t
uto
_ap
p
19
Descripción de Campos Tabla: grupos
CU
AD
RO
NO
. 3
DE
SC
RIP
CIÓ
N D
E C
AM
PO
S T
AB
LA
: g
rup
os.
Elab
ora
ció
n:
Lyza
nd
ro A
. Fie
rro
Var
gas.
Fu
ente
: B
.D. b
ase_
en
glis
h_t
uto
_ap
p
20
Descripción de Campos Tabla: grupos_establecidos
CU
AD
RO
NO
. 4
DE
SC
RIP
CIÓ
N D
E C
AM
PO
S T
AB
LA
: g
rup
os_
esta
ble
cid
os.
Elab
ora
ció
n:
Lyza
nd
ro A
. Fie
rro
Var
gas.
Fu
ente
: B
.D. b
ase_
en
glis
h_t
uto
_ap
p
21
Descripción de Campos Tabla: asignaciones
CU
AD
RO
NO
. 5
DE
SC
RIP
CIÓ
N D
E C
AM
PO
S T
AB
LA
: a
sig
na
cio
nes
.
Elab
ora
ció
n:
Lyza
nd
ro A
. Fie
rro
Var
gas.
Fu
ente
: B
.D. b
ase_
en
glis
h_t
uto
_ap
p
22
Descripción de Campos Tabla: modulos
CU
AD
RO
NO
. 6
DE
SC
RIP
CIÓ
N D
E C
AM
PO
S T
AB
LA
: m
od
ulo
s.
Elab
ora
ció
n:
Lyza
nd
ro A
. Fie
rro
Var
gas.
Fu
ente
: B
.D. b
ase_
en
glis
h_t
uto
_ap
p
23
Descripción de Campos Tabla: tipo_modulos
CU
AD
RO
NO
. 7
DE
SC
RIP
CIÓ
N D
E C
AM
PO
S T
AB
LA
: ti
po
_m
od
ulo
s.
Elab
ora
ció
n:
Lyza
nd
ro A
. Fie
rro
Var
gas.
Fu
ente
: B
.D. b
ase_
en
glis
h_t
uto
_ap
p
24
Descripción de Campos Tabla: clienteconectado
CU
AD
RO
NO
. 8
DE
SC
RIP
CIÓ
N D
E C
AM
PO
S T
AB
LA
: cl
ien
teco
nec
tad
o.
Elab
ora
ció
n:
Lyza
nd
ro A
. Fie
rro
Var
gas.
Fu
ente
: B
.D. b
ase_
en
glis
h_t
uto
_ap
p
25
Descripción de Campos Tabla: historial_conexion
CU
AD
RO
NO
. 9
DE
SC
RIP
CIÓ
N D
E C
AM
PO
S T
AB
LA
: h
isto
rial_
con
exio
n.
Elab
ora
ció
n:
Lyza
nd
ro A
. Fie
rro
Var
gas.
Fu
ente
: B
.D. b
ase_
en
glis
h_t
uto
_ap
p
26
Descripción de Campos Tabla: en_clase
CU
AD
RO
NO
. 1
0
DE
SC
RIP
CIÓ
N D
E C
AM
PO
S T
AB
LA
: en
_cl
ase
.
Elab
ora
ció
n:
Lyza
nd
ro A
. Fie
rro
Var
gas.
Fu
ente
: B
.D. b
ase_
en
glis
h_t
uto
_ap
p
27
Descripción de Campos Tabla: evaluaciones_2
CU
AD
RO
NO
. 1
1
DE
SC
RIP
CIÓ
N D
E C
AM
PO
S T
AB
LA
: ev
alu
aci
on
es_2
.
Elab
ora
ció
n:
Lyza
nd
ro A
. Fie
rro
Var
gas.
Fu
ente
: B
.D. b
ase_
en
glis
h_t
uto
_ap
p
28
Elaboración: Lyzandro A. Fierro Vargas. Fuente: Diseño del modelo Entidad – Relación.
CUADRO NO. 12: MODELO ENTIDAD - RELACIÓN.
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.
29
Elaboración: Lyzandro A. Fierro Vargas. Fuente: 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.
GRÁFICO NO. 5: DIAGRAMA GENERAL DEL SISTEMA.
Elaboración: Lyzandro A. Fierro Vargas. Fuente: 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.
GRÁFICO NO. 6: DIAGRAMA DE AUTENTICACIÓN.
Diagrama de Flujo de Datos
Diagrama General del Sistemas.
Diagrama de Autenticación.
30
Elaboración: Lyzandro A. Fierro Vargas. Fuente: 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.
GRÁFICO NO. 7: DIAGRAMA EN ROL DE USUARIO.
Diagrama en Rol de Usuario.
31
Elaboración: Lyzandro A. Fierro Vargas. Fuente: 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.
GRÁFICO NO. 8: DIAGRAMA EN ROL DE ADMINISTRADOR
Diagrama en Rol de Administrador.
32
Elab
ora
ció
n:
Lyza
nd
ro A
. Fie
rro
Var
gas.
Fu
en
te:
Dis
eño
del
dia
gram
a d
el s
iste
ma
en r
ol u
suar
io d
e la
ap
licac
ión
mu
ltip
lata
form
a p
ara
el a
po
yo e
n e
l ap
ren
diz
aje
del
idio
ma
extr
anje
ro in
glé
s p
ara
niñ
os
de
5 a
6 a
ño
s.
GR
ÁF
ICO
NO
. 9
: D
IAG
RA
MA
DE
L S
IST
EM
A E
N R
OL
US
UA
RIO
Diagrama de Casos de Uso
Diagrama del Sistemas en Rol Usuario.
33
Elab
ora
ció
n:
Lyza
nd
ro A
. Fie
rro
Var
gas.
Fu
en
te:
Dis
eño
del
dia
gram
a d
el s
iste
ma
en r
ol a
dm
inis
trad
or
de
la a
plic
ació
n m
ult
ipla
tafo
rma
par
a el
ap
oyo
en
el
apre
nd
izaj
e d
el id
iom
a ex
tran
jero
ingl
és
par
a n
iño
s d
e 5
a 6
añ
os.
GR
ÁF
ICO
NO
. 1
0:
DIA
GR
AM
A D
EL
SIS
TE
MA
EN
RO
L A
DM
INIS
TR
AD
OR
.
Diagrama del Sistemas en Rol Administrador.
34
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-pagina-
3.html
http://wallpapers.net/view/blue_planet-1680x1050.html
http://www.sendspace.com/file/w8ua9x
Convertidor de .WAV a .MP3
http://media.io/