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/