Diseño e Implementacion de Una Aplicacion para Dispositivos Android

UNIVERSIDAD POLITCNICA
SALESIANA
SEDE CUENCA
CARRERA DE INGENIERA DE SISTEMAS

Tema:
Diseo e Implementacin de una Aplicacin para Dispositivos
Android en el Marco del Proyecto Pequeas y Pequeos Cientficos
de la Universidad Politcnica Salesiana

Tesis previa a la obtencin del
ttulo de Ingeniero de Sistemas

Autor:
Diego Fernando Quisi Peralta

Director:
Ing. Vladimir Robles Bykbaev
Cuenca, Diciembre 2012

2

Ing. Vladimir Robles Bykbaev.
CERTIFICO

Haber dirigido y revisado prolijamente la tesis titulada Diseo e Implementacin
de una Aplicacin para Dispositivos Android en el Marco del Proyecto Pequeas y
Pequeos Cientficos de la Universidad Politcnica Salesiana, realizado por el
estudiante Diego Fernando Quisi Peralta, y por cumplir los requisitos autorizo su
presentacin.

Cuenca, Diciembre de 2012

Ing. Vladimir Robles Bykbaev.
Director de Tesis
3

DECLARATORIA DE RESPONSABILIDAD

Yo Diego Fernando Quisi Peralta portador de la cedula de ciudadana 010461646-1,
estudiante de la carrera de Ingeniera de Sistemas, certifico que los conceptos
desarrollados, anlisis realizados, as como el desarrollo e implementacin son de
exclusiva responsabilidad del autor. Los textos de otros autores llevan su
correspondiente cita bibliogrfica y autorizo a la Universidad Politcnica Salesiana
el uso de la misma para fines acadmicos.


4

DEDICATORIAS

Dedico esta tesis a Dios, por darme todas las bendiciones, salud y estar en mi vida
siempre, a mi Madre Luisa Peralta de quien siempre he recibido su amor,
comprensin, paciencia, y quien siempre ha estado incondicionalmente a mi lado
para lograr mis metas y objetivos y sobre todo por su gran apoyo, cario y amor a lo
largo de toda mi vida siendo un gran ejemplo para m y mi formacin como persona
y profesional.
A mis tos Bolvar Peralta, Edison Peralta, Cecilia Peralta, Elizabeth Peralta, Beatriz
Peralta y a toda mi familia quienes siempre estuvieron en los buenos y malos
momentos, por la motivacin para cumplir mis objetivos, quienes siempre confiaron
en m y estuvieron all para darme un consejo o ayudarme incondicionalmente en
todo momento y gracias a ellos hoy puedo alcanzar esta meta en mi vida.
A mi enamorada Liliana Chaglla que todo este tiempo de la Universidad siempre
estuvo all para apoyarme en todo momento, enseando y compartiendo su
conocimiento, esto va para la mujer que nunca me dejo rendirme y siempre me dio
las fuerzas necesarias para poder cumplir este objetivo tan importante en mi vida.
Gracias.
A todos mis amigos que han compartido los buenos y no tan buenos momentos
conmigo y que da a da me ensearon lo que significa la verdadera amistad.
A todos los profesores quienes siempre estuvieron all, brindndonos siempre su
orientacin y ayuda en todo momento.


5

AGRADECIMIENTOS

A Dios por ser mi gua, compaero darme la vida, a mi madre Luisa Peralta,
gracias a todo su esfuerzo, apoyo y confianza que deposito en m y sobre todo su
amor. A toda mi familia especialmente a mis tos Bolvar, Cecilia, Edison, Elizabeth
y Beatriz Peralta quienes me animaron, apoyaron con su gran cario y siempre
estuvieron all incondicionalmente. Gracias a todos ellos soy quien soy hoy en da.
Agradezco especialmente a mi enamorada y amiga la Ingeniera Liliana Chaglla,
quien ha sido un apoyo incondicional en los buenos y malos momentos. Ayudarme
en toda la carrera universitaria. Gracias por ser tan especial y nica, de verdad que
le admiro como persona y tambin como una gran profesional. Agradezco a Dios
por haberte puesto dentro de mi vida. Te Amo Mucho y Gracias por todo.
Mi agradecimiento sincero al Ing. Vladimir Robles Bykbaev. Por su cooperacin,
direccin, paciencia, entrega y valiosos consejos que me permitieron alcanzar los
objetivos de esta tesis y por su gran apoyo incondicional, su conocimiento y
experiencia que a lo largo de todo mi carrera me supo transmitir.
Y a todos mis amigos y profesores por su apoyo, nimo, tiempo y compaa en las
diferentes etapas de mi vida. Gracias por formar parte de mi vida, por todo lo que
me han brindado y por todas sus bendiciones.


6

TABLA DE CONTENIDOS

CAPTULO 1 6
1 INTRODUCCIN.......................................................................................................... 12
1.1 Introduccin ............................................................................................................. 12
1.2 Antecedentes ............................................................................................................ 13
1.2.1 Justificacin ...................................................................................................... 13
1.2.2 Descripcin del Problema .................................................................................. 13
1.3 Alcance.................................................................................................................... 14
1.4 Objetivos ................................................................................................................. 14
1.4.1 Objetivos General.............................................................................................. 14
1.4.2 Objetivos Especficos ........................................................................................ 15
1.5 Experiencias del Proyecto Pequeas y Pequeos Cientficos de la Universidad Politcnica
Salesiana [3]........................................................................................................................ 15
CAPTULO 2 15
2 ESTUDIO DE LA TECNOLOGA A DESARROLLAR ............................................... 21
2.1 Estudio de HTML 5 para dispositivos mviles ............................................................ 21
2.2 Estudio del entorno de desarrollo Android .................................................................. 22
2.3 Comparacin de la plataforma de desarrollo Android con HTML 5 para dispositivos
mviles. .............................................................................................................................. 27
2.3.1 Aplicaciones HTML5 para dispositivos mviles. ............................................... 28
2.3.2 Aplicaciones nativas. ......................................................................................... 28
2.4 Especificaciones de la tecnologa de desarrollo. .......................................................... 30
2.4.1 Instalacin y configuracin de JDK 7 ................................................................. 30
2.4.2 Instalacin y configuracin del SDK de Android ................................................. 33
2.4.3 Instalacin y configuracin de Eclipse Indigo...................................................... 39
2.4.4 Instalar el plugin de Android para Eclipse ........................................................... 39
2.4.5 Creacin de un nuevo proyecto Android ............................................................. 41
CAPTULO 3 . 39
3 DISEO DEL SOFTWARE. .......................................................................................... 45
3.1 Levantamiento de Requerimientos de Software........................................................... 45
7

3.1.1 Definicin de Stakeholders ................................................................................ 45
3.1.2 Tcnicas de Elicitacin [26] ............................................................................... 46
3.1.3 Suposiciones y Dependencias ............................................................................. 46
3.1.4 Requerimientos Funcionales............................................................................... 47
3.1.5 Requerimientos no Funcionales .......................................................................... 50
3.1.6 Restricciones..................................................................................................... 51
3.1.7 Evolucin previsible del sistema......................................................................... 51
3.1.8 Validacin de requerimientos ............................................................................. 51
3.2 Diseo de la aplicacin. ............................................................................................ 51
3.2.1 Casos de Uso .................................................................................................... 51
3.2.2 Diagrama de Clases del Mundo Elctrico y Verde ............................................... 53
3.2.3 Diagramas de Secuencia del Mundo Elctrico y Verde......................................... 62
3.3 Anlisis de las herramientas de desarrollo. ................................................................. 63
3.3.1 Grficos en Android .......................................................................................... 63
3.3.2 AsyncTask [27]................................................................................................. 64
3.3.3 Reproduccin de sonido [31].............................................................................. 65
3.3.4 Desarrollo Html5 [23]........................................................................................ 66
CAPTULO 4 . 67
4 IMPLEMENTACIN, DOCUMENTACIN Y PRUEBAS .......................................... 73
4.1 Implementacin y seleccin de los mdulos de aprendizaje. ....................................... 73
4.2 Desarrollo de pruebas con los dispositivos mviles en el laboratorio ............................ 75
4.3 Desarrollo de pruebas con nios y nias. ................................................................... 77
4.4 Documentacin. ....................................................................................................... 81
4.4.1 Descarga e Instalacin de la aplicacin. .............................................................. 81
4.4.2 Manual de Usuario ............................................................................................ 84
4.5 Publicacin de la aplicacin en la tienda de Google..................................................... 85
5 CONCLUSIONES .......................................................................................................... 95
6 RECOMENDACIONES................................................................................................. 97
7 TRABAJOS FUTUROS ................................................................................................. 97
8 BIBLIOGRAFA............................................................................................................ 98
9 ANEXOS ...................................................................................................................... 102
9.1 ANEXO 1: CERTIFICADO DE VALIDACIN DE REQUERIMIENTOS. ...............102
9.2 ANEXO 2: ENCUESTA PRACTICADA A LOS NIOS Y NIAS ..........................104
8

NDICE DE FIGURAS

ILUSTRACIN 1 PROMEDIO DEL NIVEL DE CONOCIMIENTO DE LOS NIOS Y NIAS
RESPECTO A LOS TEMAS ABARCADOS EN LOS TALLERES, ANTES Y DESPUS DE LOS
MISMOS.................................................................................................................................................................... 16
ILUSTRACIN 2 INTERS DE LOS NIOS Y NIAS EN LAS CARRERAS PROFESIONALES
PREVIO A LOS TALLERES (PRE-TEST)........................................................................................................ 16
ILUSTRACIN 3 INTERS DE LOS NIOS Y NIAS EN LAS CARRERAS ............................................... 16
ILUSTRACIN 4 RESPUESTA DE LOS NIOS Y NIAS A LA PREGUNTA TE GUST EL
TALLER PEQUEAS Y PEQUEOS CIENTFICOS? ............................................................................... 17
ILUSTRACIN 5 INTERS DE LOS PADRES DE FAMILIA EN QUE SUS NIOS Y NIAS
PARTICIPEN EN TALLERES DE ESTE TIPO. .............................................................................................. 17
ILUSTRACIN 6 TALLERES EN EL AULA DE CIENCIA CON LA ESCUELA FRANCISCA DVILA.
..................................................................................................................................................................................... 18
ILUSTRACIN 7 TALLERES EN EL AULA DE CIENCIA CON LA ESCUELA CARLOS CRESPI. ....... 18
ILUSTRACIN 8 INAUGURACIN Y ENTREGA DE DIPLOMAS A 1
ER
GRUPO DE PEQUEAS Y
PEQUEOS CIENTFICOS. VISITA DE SECRETARIO DEL SENESCYT, REN RAMREZ. ........ 19
ILUSTRACIN 9 REUNIN CON PADRES DE FAMILIA EN LA ESCUELA CARLOS CRESPI. .......... 19
ILUSTRACIN 10 COMPOSICIN DE HTML5 [9]............................................................................................... 22
ILUSTRACIN 11 COMPATIBILIDAD DE LOS NAVEGADORES WEB CON HTML5 [10] ................... 22
ILUSTRACIN 12 ARQUITECTURA DE ANDROID ........................................................................................... 23
ILUSTRACIN 13 CICLO DE VIDA DE UN ACTIVITY [20] ............................................................................... 26
ILUSTRACIN 14 PORCENTAJES DE DISTRIBUCIONES DE ANDROID UTILIZADAS
ACTUALMENTE [21] ........................................................................................................................................... 27
ILUSTRACIN 15 SITIO WEB DE ORACLE PARA LA DESCARGA DEL JDK .......................................... 30
ILUSTRACIN 16 DESCARGA DEL JDK................................................................................................................ 31
ILUSTRACIN 17 INSTALACIN DE JDK 7 ......................................................................................................... 31
ILUSTRACIN 18CARACTERSTICAS DE INSTALACIN DEL JDK .......................................................... 32
ILUSTRACIN 19 ESTADO DE LA INSTALACIN DEL JDK ......................................................................... 32
ILUSTRACIN 20 SITIO WEB PARA LA DESCARGA DEL SDK DE ANDROID...................................... 33
ILUSTRACIN 21 INSTALACIN DEL SDK DE ANDROID ............................................................................ 33
ILUSTRACIN 22 DIRECTORIO DE INSTALACIN DEL SDK DE ANDROID ......................................... 34
ILUSTRACIN 23 PAQUETES DE INSTALACIN DE ANDROID ................................................................. 34
ILUSTRACIN 24 INSTALACIN DE LAS PLATAFORMAS DISPONIBLES DE ANDROID ................ 35
ILUSTRACIN 25 ADMINISTRACIN DE DISPOSITIVOS VIRTUALES DE ANDROID ....................... 36
ILUSTRACIN 26 CREACIN DE UN NUEVO DISPOSITIVO VIRTUAL DE ANDROID ....................... 36
ILUSTRACIN 27 CONFIGURACIN DE UN NUEVO DISPOSITIVO VIRTUAL DE ANDROID......... 37
ILUSTRACIN 28 VISUALIZACIN DE LOS DISPOSITIVOS VIRTUALES ANDROID. ........................ 38
ILUSTRACIN 29 EJECUCIN DEL DISPOSITIVO VIRTUAL ANDROID .................................................. 38
ILUSTRACIN 30 SITIO WEB DE DESCARGA DEL ECLIPSE INDIGO 3.7 ................................................ 39
ILUSTRACIN 31 INSTALACIN DEL PLUGIN ADT EN ECLIPSE............................................................... 40
ILUSTRACIN 32 AGREGACIN EL REPOSITORIO DE ANDROID ............................................................ 40
ILUSTRACIN 33 SELECCIN E INSTALACIN DE LOS PAQUETES DE ANDROID .......................... 41
ILUSTRACIN 34 CREACIN DE NUEVO PROYECTO DE ANDROID ....................................................... 42
9

ILUSTRACIN 35 CONFIGURACIN DE UN NUEVO PROYECTO ANDROID. ....................................... 43
ILUSTRACIN 36 EJECUCIN DE LA APLICACIN ANDROID................................................................... 43
ILUSTRACIN 37 SITIO WEB DE DESCARGA DE SENCHA ANIMATOR ................................................. 67
ILUSTRACIN 38 INSTALACIN DE SENCHA ANIMATOR.......................................................................... 67
ILUSTRACIN 39 DIRECTORIO DE INSTALACIN DE SENCHA ANIMATOR....................................... 68
ILUSTRACIN 40 INSTALACIN TERMINADA DE SENCHA ANIMATOR .............................................. 68
ILUSTRACIN 41 PANTALLA PRINCIPAL DE SENCHA ANIMATOR ........................................................ 69
ILUSTRACIN 42 CONFIGURACIN DEL NUEVO PROYECTO DE ANDROID ...................................... 69
ILUSTRACIN 43 PANEL DE OBJETOS DE SENCHA ANIMATOR .............................................................. 70
ILUSTRACIN 44 PANEL DE PROPIEDADES DE SENCHA ANIMATOR ................................................... 70
ILUSTRACIN 45 PANEL LNEA DE TIEMPO DE SENCHA ANIMATOR .................................................. 71
ILUSTRACIN 46 ESPACIO DE TRABAJO DE SENCHA ANIMATOR ......................................................... 71
ILUSTRACIN 47 PANEL DE ESCENAS DE SENCHA ANIMATOR ............................................................. 71
ILUSTRACIN 48 PANEL DE CONTROL DE TIEMPO DE SENCHA ANIMATOR ................................... 71
ILUSTRACIN 49 ENTRADA DE LA DOCTORA ATMICA EN EL MUNDO ELCTRICO EN 200MS.
..................................................................................................................................................................................... 73
..................................................................................................................................................................................... 73
..................................................................................................................................................................................... 74
ILUSTRACIN 52 ENTRADA DEL RBOL CALIPTO EN EL MUNDO VERDE EN 200MS ................... 74
ILUSTRACIN 55 DISPOSITIVO MVIL DE PRUEBA COBY. ....................................................................... 76
ILUSTRACIN 56 DISPOSITIVO MVIL DE PRUEBA SAMSUNG GALAXY TAB 2.............................. 76
ILUSTRACIN 57 DISPOSITIVO MVIL DE PRUEBAS ASUS TF101 .......................................................... 77
ILUSTRACIN 58RESULTADO DE LA PREGUNTA CMO FUE LA EXPERIENCIA DE
UTILIZACIN DE LOS TABLETS PARA EL APRENDIZAJE MULTIMEDIA DEL MUNDO
VERDE?..................................................................................................................................................................... 77
ILUSTRACIN 59 RESPUESTA A LA PREGUNTA. AUMENT EL GRADO DE INTERS DE
APRENDIZAJE UTILIZANDO LOS TABLETS? ............................................................................................. 78
ILUSTRACIN 60 RESPUESTA A LA PREGUNTA. LA UTILIZACIN DE LA APLICACIN DEL
MUNDO VERDE EN LOS TABLETS FUE?...................................................................................................... 78
ILUSTRACIN 61 PRUEBA CON NIAS DE LA ESCUELA "FRANCISCA DVILA". ............................ 79
ILUSTRACIN 62 PRUEBA CON LAS NIAS E INSTRUCTORES. ............................................................... 79
ILUSTRACIN 63 PRUEBA CON UN NIO DE LA ESCUELA "CARLOS CRESPI" CON EL TABLET
COBY. ........................................................................................................................................................................ 80
ILUSTRACIN 64 PRUEBAS CON NIOS DE LA ESCUELA "CARLOS CRESPI".................................... 80
ILUSTRACIN 65 PRUEBA CON UN ESTUDIANTE DE LA ESCUELA CARLOS CRESPI CON LA
TABLET SAMSUNG GALAXY TAB 2.............................................................................................................. 81
ILUSTRACIN 66 GESTOR DE DESCARGAS DE APLICACIONES PLAY STORE [35]. .......................... 81
ILUSTRACIN 67 BSQUEDA DE LA APLICACIN EN PLAY STORE ..................................................... 82
ILUSTRACIN 68 DESCRIPCIN DE LA APLICACIN DEL MUNDO VERDE........................................ 82
ILUSTRACIN 69 ACEPTAR Y DESCARGAR LA APLICACIN DEL MUNDO VERDE ....................... 83
ILUSTRACIN 70 INSTALACIN COMPLETA DE LA APLICACIN MUNDO VERDE........................ 83
ILUSTRACIN 71 ICONO DE LA APLICACIN DEL MUNDO VERDE. ...................................................... 84
ILUSTRACIN 72 MEN PRINCIPAL DEL MUNDO VERDE .......................................................................... 84
ILUSTRACIN 73 MEN DE SUBTEMAS DEL MUNDO VERDE. ................................................................. 84
ILUSTRACIN 74 TRAMOS DEL MUNDO VERDE ........................................................................................... 85
10

ILUSTRACIN 75 CREACIN DE UNA CUENTA EN GMAIL. ....................................................................... 86
ILUSTRACIN 76 CONDICIONES DE SERVICIOS Y POLTICAS DE SEGURIDAD DE GOOGLE. ... 86
ILUSTRACIN 77 PANTALLA DE BIENVENIDA A GMAIL............................................................................ 87
ILUSTRACIN 78 CREACIN DEL PERFIL DESARROLLADOR EN GOOGLE PLAY............................. 87
ILUSTRACIN 79 ACUERDO DE DISTRIBUCIN PARA DESARROLLADORES.................................... 88
ILUSTRACIN 80 PAGO DE CUOTA DE REGISTRO. ........................................................................................ 88
ILUSTRACIN 81 PANEL DE ADMINISTRACIN DE PUBLICACIONES EN ANDROID. .................... 89
ILUSTRACIN 82 VENTANA PARA SUBIR EL PROYECTO DE ANDROID. ............................................. 89
ILUSTRACIN 83 SELECCIN DEL .APK ............................................................................................................. 89
ILUSTRACIN 84 CUADRO DE PROGRESO DE SUBIR LA APLICACIN AL SERVIDOR. ................. 90
ILUSTRACIN 85 INFORMACIN DE LA APLICACIN SUBIDA AL SERVIDOR. ................................ 90
ILUSTRACIN 86 ESPECIFICACIONES DE LA INFORMACIN DEL MUNDO VERDE. ...................... 91
ILUSTRACIN 87 ESPECIFICACIONES GRAFICAS DEL MUNDO VERDE. .............................................. 92
ILUSTRACIN 88 CATEGORIZACIN Y DETALLE DE CONTACTO DEL MUNDO VERDE. ............. 92
ILUSTRACIN 89 ESPECIFICACIN DEL PRECIO Y DISTRIBUCIN DEL MUNDO VERDE. ........... 93
ILUSTRACIN 90 PRESENTACIN DE LA APLICACIN EN GOOGLE PLAY DEL MUNDO VERDE.
..................................................................................................................................................................................... 94

NDICE DE TABLAS

TABLA 1 TALLERES REALIZADOS POR LOS NIAS Y NIOS EN EL AULA DE PEQUEAS Y PEQUEOS
CIENTFICOS. .............................................................................................................................................................. 16
TABLA 2 MATRIZ DE LOS STAKEHOLDERS. ..................................................................................................................... 45

11

CAPTULO 1

12

1 INTRODUCCIN
1.1 Introduccin
Las Tecnologas de la Informacin y la Comunicacin TICs estn sufriendo un
desarrollo vertiginoso, lo cual est afectando a prcticamente todos los campos de
nuestra sociedad, y la educacin no es una excepcin [1], lo que conlleva a que las
tecnologas de informacin lleguen a ser un pilar bsico en la sociedad. Por ello, los
gobiernos estn invirtiendo en su desarrollo, de modo que las escuelas, colegios y
universidades puedan emplear las TICS como una herramienta de soporte en la
enseanza.
Actualmente las TICS ya estn cambiando ciertos procesos educativos mediante el
internet, como por ejemplo, educacin a distancia, el auto aprendizaje, cursos en
lnea, video conferencia, etc., lo que produce que sea un complemento o
enriquecimiento de la enseanza tradicional. Otro campo de utilizacin lo constituye
el apoyo en el aprendizaje, en donde las TICSson integradas pedaggicamente
dentro del proceso de enseanza del aula, como por ejemplo, el uso de dispositivos
mviles para un aprendizaje didctico [4].
Las TICS estn jugando un papel muy importante en el desarrollo de los pases,
siendo un factor importante para que los mismos puedan llegar a alcanzar ventajas
competitivas frente a los dems. El Ecuador no est dentro de pases que lideran
propuestas de innovacin en polticas y regulaciones que buscan desarrollar y
asimilar estas tecnologas. Esto produce que en el pas los estudiantes, entre una de
sus causas, no se enfoquen al mbito de la investigacin.
En este mundo globalizado, para poder lograr la inclusin de las TICS, es
importante incorporarlas en los entornos educativos y aplicar su uso, a travs del
uso de los dispositivos mviles para el aprendizaje o educacin virtual en los nios.
Una posible solucin a esta problemtica es que se empiece a inculcar la auto-
investigacin desde temprana edad, motivando esencialmente al estudio de las
ciencias exactas. Esto permitir crear en los nios y nias un inters por la
tecnologa e indirectamente afectar de manera positiva en el desarrollo de la
sociedad. La herramienta propuesta pretende complementar la labor de enseanza
de distintas ciencias por parte de los docentes escolares [3]. Consideramos que esta
enseanza se debe realizar con el apoyo de la tecnologa de los dispositivos mviles,
lo que probablemente ayude a motivar ms a los nios y nias en el uso de las
tecnologas de la informacin, auto-aprendizaje e investigacin.
Actualmente ya existe un proyecto en la Universidad Politcnica Salesiana para
apoyar el aprendizaje de los nios y nias, en lo que podemos apreciar como el
aprendizaje de las ciencias exactas con ayuda de las tics pueden influenciar
positivamente tanto en el desarrollo intelectual como creativo y emprendedor de los
nios y nias.
13

Las tecnologas de informacin se est renovando continuamente por lo que se ha
visto la posibilidad de desarrollar la aplicacin para los dispositivos mviles
utilizando tecnologas web como HTML5, CSS3 yJavaScript, y empaquetar dentro
de una aplicacin nativa para la visualizacin, obteniendo como resultado
aplicaciones hbridas potencializando las dos tecnologas, sin ms prembulo se
proceder al desarrollo del mismo.
1.2 Antecedentes
1.2.1 Justificacin
Actualmente la Universidad Politcnica Salesiana est desarrollando un proyecto
para apoyar el aprendizaje de nios y nias y despertar su inters por el estudio de la
ciencia y la tecnologa, todo esto desde una perspectiva basada en la
experimentacin y guas multimedia de enseanza. Este proyecto ya cuenta con un
portal web (www.pequeciencia.ups.edu.ec), sin embargo, se est renovando y dentro
de este proceso se ha visto la necesidad de incluir la plataforma de enseanza en
dispositivos mviles, ya que el continuo avance tecnolgico de stos ha permitido
que los usuarios puedan contar con herramientas de acceso virtual a diversos
procesos educativos.
En la actualidad las empresas estn analizando la posibilidad de trasladar sus
aplicaciones a los dispositivos mviles como una estrategia en el mercado muy
sofisticada, ya que el usuario se identifica con los aplicativos de la empresa,
consecuentemente las empresas estn buscando tener presencia en estos
dispositivos.
El beneficio que la Universidad Politcnica Salesiana obtendr, es mejorar sus
procesos de vinculacin con la colectividad y ayudar a que los nios y nias del
Azuay y el Ecuador puedan ser motivados por la tecnologa, despertando en ellos y
ellas ese amor por la ciencia.
El software desarrollado podr ser descargado en cualquier parte del mundo de
forma gratuita, llevando consigo el aval de la Universidad Politcnica Salesiana y
del Ecuador. Este programa permitir fomentar la investigacin a travs del uso de
aplicativos de dispositivos mviles y la riqueza tcnica generada puede servir de
base para en un futuro tener mejores procesos de estimulacin educativa en nios.
1.2.2 Descripcin del Problema
Como se mencion anteriormente, el proyecto Pequeas y Pequeos Cientficos ya
posee un portal web, en donde los nios y nias pueden profundizar su aprendizaje
sobre los mundos digital
1
, elctrico
2
, magntico
3
y verde
4
, pero una gran desventaja

1
Mundo Digital: Representa la evolucin de la tecnologa impartiendo temas como el funcionamiento de los
aparatos digitales, trabajar con datos binarios y por ultimo una breve introduccin a la programacin de
software.
14

es que ellos deben tener un dispositivo con acceso a internet para poder utilizar
stos servicios. En virtud de ello, se busca contar con esta aplicacin en dispositivos
mviles, preferentemente en tablets. De esta forma, los nios y las nias se podrn
descargar completamente la aplicacin y tendrn la posibilidad de involucrarse en
este mundo tecnolgico.
Actualmente el continuo avance de la tecnologa pone a disposicin de los
usuarios una gran variedad de dispositivos mviles, los cuales ofrecen servicios que
agilitan los procesos diarios, ofreciendo una amplia gama de aplicaciones para todo
propsito. Un ejemplo de estos dispositivos son los tablets, los cuales se asemejan a
un mini laptop del tamao de un cuaderno pequeo que no necesita de perifricos
para su utilizacin, ya que incorpora la tecnologa touchscreen
5
[2] a un bajo costo.
Uno de los principales motivos por los que se ha desarrollado en la tecnologa
Android, es que el 68.1% de los dispositivos mviles a nivel mundial usan Android
como sistema operativo[5] y por otro lado es completamente gratuito, por lo que
existe un gran nmero de fabricantes de dispositivos que estn utilizando esta
tecnologa, de forma que el nmero de usuarios est creciendo exponencialmente.
1.3 Alcance
Se considera dentro del alcance de este proyecto:
Que la aplicacin Android del proyecto Pequeas y Pequeos Cientficos
funcione correctamente en dispositivos con esta tecnologa.
Que la aplicacin desarrollada se cargue a la tienda de GooglePlay para
su publicacin y posterior descarga gratuita.
Creaciones de animaciones y guas multimedia utilizando Android para
un mejor aprendizaje de los nios.
Redaccin de la memoria del proyecto
1.4 Objetivos
1.4.1 Objetivos General
Disear e implementar una aplicacin para dispositivos Android para en el marco
del proyecto Pequeas y Pequeos Cientficos de la Universidad Politcnica
Salesiana.

2
Mundo elctrico: Representa la utilizacin de la energa para todos los dispositivos digitales, dando a
conocer temas como la historia de la electricidad, tipos de electricidad y por ltimo el circuito elctrico.
3
Mundo Magntico: Representa la utilizacin de imanes impartiendo temas como el magnetismo, t ipos de
imanes, electromagnetismo y por ltimo el motor elctrico.
4
Mundo Verde: Representa la generacin de energa y el medio ambiente impart iendo temas de vital
importancia como la contaminacin, energas renovables y por ltimo el cuidado del medio ambiente.
5
Permite que mediante el toque directo sobre la pantalla la entrada de los datos y rdenes al dispositivo, y a
su vez muestra los resultados en la pantalla, actuando como perifrico de entrada y salida de datos.
15

1.4.2 Objetivos Especficos
Desarrollar una aplicacin Android para el proyecto Pequeas y
Pequeos Cientficos que estar conformada por uno o ms mdulos de
aprendizaje de los mundos digital, verde, elctrico y magntico.
Generar una base de conocimiento debidamente documentada sobre el
desarrollo de proyectos Android
Realizar pruebas en diferentes tipos de dispositivos mviles
(preferentemente entablets).
Determinar cules son los requerimientos mnimos para que las
aplicaciones se ejecuten sin ningn problema en dispositivos basados en
Android.
Cargar la aplicacin terminada a la tienda de Google (Google Play).
Estudiar la tecnologa Android para el desarrollo de aplicaciones mviles
y de su metodologa para la documentacin
1.5 Experiencias del Proyecto Pequeas y Pequeos Cientficos de la Universidad
Politcnica Salesiana [3]
Desde el mes de diciembre del 2011 se han venido realizando diversas actividades
enfocadas a la implementacin del Aula de Ciencia de Pequeas y Pequeos
Cientficos. Se desarrollaron 8 talleres de ciencia, abarcando un total de 50 nios y
47 nias con un total de 97 estudiantes llegando a firmar convenios con las escuelas
Carlos Crespi y Francisca Dvila de la ciudad de Cuenca, en la siguiente tabla
se detalla cada uno de los talleres dictados.
TALLERES REALIZADOS
Taller Escuela Cupo
Fecha de
inicio
Fecha de
finalizacin
Horario
Taller 1
CARLOS
CRESPI
12 nios
Lunes 9 de
abril
Viernes 20 de
abril
15h00-
16h00
Taller 2
FRANCISCA
DVILA
12 nias
Lunes 9 de
abril
Viernes 20 de
abril
16h00-
17h00
Taller 3
CARLOS
CRESPI
12 nios
Lunes 23 de
abril
Viernes 4 de
mayo
15h00-
16h00
Taller 4
FRANCISCA
DVILA
12 nias
Lunes 23 de
abril
Viernes 4 de
mayo
16h00-
17h00
Taller 5
CARLOS
CRESPI
12 nios
Lunes 7 de
mayo
Viernes 18 de
mayo
15h00-
16h00
Taller 6
FRANCISCA
DVILA
12 nias
Lunes 7 de
mayo
Viernes 18 de
mayo
16h00-
17h00
Taller 7
CARLOS
CRESPI
12 nios
Lunes 21 de
mayo
Viernes 1 de
junio
15h00-
16h00
16

Taller 8
FRANCISCA
DVILA
12 nias
Lunes 21 de
mayo
Viernes
1 de junio
16h00-
17h00
Tabla 1 Talleres realizados por Nias y Nios en el Aula de Pequeas y
Pequeos Cient ficos.
Resultados del proyecto:
Resultados acadmicos.
Se ha observado un incremento del 48% en el promedio del nivel del conocimiento
de los nios y nias de los temas abarcados. Estos resultados se han obtenido de la
comparacin entre el pre-test y el post-test. La metodologa utilizada para alcanzar
este resultado no contempl la necesidad de enviar deberes, trabajos, ni estudiar en
horas fuera del taller.

I lust racin 1 Promedio del nivel de conocimiento de los nios y nias
respecto a los temas abarcados en los talleres, antes y despus de los
mismos.
Se plante la pregunta: Qu deseas ser cuando seas grande?. En el pre-test
apenas el 31% de los nios y nias se inclinaban por carreras vinculadas con la
ciencia y la ingeniera. Despus de los talleres el 65% expres que su deseo era
convertirse en cientfico o ingeniero.

I lust racin 2 I nters de los nios y
nias en las car reras profesionales
previo a los talleres (pre- test ).

I lust racin 3 I nters de los nios
y nias en las car reras
10%
58%
0%
10%
20%
30%
40%
50%
60%
70%
PRE-TEST POST-TEST
17

El 98% de los estudiantes manifest su gran satisfaccin de haber asistido a los
talleres Pequeas y Pequeos Cientficos. La razn predominante de este gusto es
esencialmente la metodologa de enseanza que se aplic, basada en adquirir nuevos
conocimientos de una manera divertida, por medio de la experimentacin y el juego.

I lust racin 4Respuesta de los nios y nias a la pregunta Te gust el
taller Pequeas y Pequeos Cient f icos?
Impacto en los padres de familia.
Se aplic la encuesta a los padres de familia a partir de la cual se determin que al
96% de los mismos les gustara mucho que sus hijos e hijas participen en este tipo
de talleres.

I lust racin 5 I nters de los padres de fami lia en que sus nios y nias
part icipen en talleres de este t ipo.
El 97% de los padres de familia expresaron que sus hijos e hijas diariamente sentan
muchas ganas de asistir a los talleres de ciencia. Asimismo, el 95% dijo que sus
hijos e hijas realizaban comentarios positivos en casa acerca de los talleres.
La repercusin de los talleres de ciencia expresa que el 71% de los padres de familia
percibieron que sus hijos e hijas, despus de los talleres, se interesaban mucho por
noticias de ciencia y tecnologa, y asimismo, un 75% dijo que sus nios y nias se
sentan muy motivados en conocer el porqu de las cosas y cmo funcionan.
98%
1% 0% 1%
0%
20%
40%
60%
80%
100%
Mucho Mas o menos Poco No contesta
Te gust el taller "Pequeas y Pequeos
Cientficos"?
18

Impacto en los centros educativos.
El proyecto ha tenido una excelente acogida por parte los centros educativos con los
cuales se trabaj durante esta primera etapa, quienes han manifestado que esto ha
sido una experiencia enriquecedora en el desarrollo intelectual, creativo y
emprendedor de los nios y nias participantes.
A continuacin se muestra unas imgenes de cmo los nios y nias toman las
clases, se entregan los respectivos diplomas por haber cruzado con xito el taller y
como sus padres son informados de los avances que tiene sus hijos del proyecto
Pequeas y Pequeos Cientficos.

I lust racin 6 Talleres en el Aula de ciencia con la escuela Francisca
Dvila.

I lust racin 7 Talleres en el Aula de ciencia con la escuela Car los Crespi.
19

I lust racin 8 I nauguracin y ent rega de diplomas a 1
er
gr upo de Pequeas
y Pequeos Cient ficos. Visita de Secr etar io del Senescyt, Ren Ramrez.

I lust racin 9 Reunin con padres de fami lia en la escuela Car los Crespi.

20

CAPTULO 2

21

2 ESTUDIO DE LA TECNOLOGA A DESARROLLAR
2.1 Estudio de HTML 5 para dispositivos mviles
La aparicin de internet y del World Wide Web, ha cambiado para siempre nuestra
forma de acceder a la informacin. Con la progresiva conversin de la Web en la
conocida Web 2.0, los usuarios pasamos de ser consumidores de informacin a
generadores de contenido, por consiguiente manejar y entender el lenguaje HTML5,
CSS3 y JavaScript nos permitir controlar a la perfeccin los materiales que
deseemos publicar en internet, proporcionndoles la forma y la estructura
apropiada[36].
HTML5 es un estndar que empez a desarrollarse en el ao 2009, y que nos
ofrece nuevas caractersticas para lograr de forma ms eficiente funciones que antes
slo se lograban instalando complementos como Flash Player o que slo eran
posibles en aplicaciones de escritorio o apps
6
nativas para los distintos dispositivos
mviles y tablets, pero se sigue conservando etiquetas de sus antecesores HTML4 y
XHTML [7].
HTML5 ya que no es simplemente una nueva versin del lenguaje de marcacin
HTML, sino una agrupacin de diversas especificaciones concernientes al
desarrollo web, se pretende proporcionar una plataforma con la que se desarrolle
aplicaciones web ms parecidas a las aplicaciones de escritorio. Para ello se estn
desarrollando APIS
7
que permitan trabajar con cualquiera de los elementos de la
pgina y realizar acciones que hasta hoy era necesario realizar por medio de
tecnologas adicionales [6], adems, por su caractersticas de cdigo
libre, renderizable
8
desde el navegador, flexibilidad y ligereza, hace que HTML5
sea una gran opcin para los dispositivos mviles [8].
Las reglas bsicas que se plantearon a la hora de actualizar a HTML 5 fueron [11]:
Basarse en HTML, CSS, DOM y JavaScript.
Reducir la necesidad del uso de plugins
9
, como por ejemplo flash.
Mejorar el tratamiento de errores.
Crear etiquetas que reemplacen el uso de scripts.
Lenguaje que pueda utilizarse en cualquier tipo de dispositivo, como
mviles, tablets, etc.

6
Apps es una abreviatura de aplicacin que puede funcionar en internet, en el equipo o en un dispositivo
mvil.
7
Apis es una abreviacin de Interfaz de programacin de aplicaciones, es un conjunto de rutinas, protocolos y
herramientas para la construccin de aplicaciones de software.
8
La renderizacinse encarga de interpretar las marcas (HTML, XML, imgenes, etc.) o la informacin de
formato (CSS, XSL, etc.), para mostrar el contenido formateado, es decir, con las formas y estilos
apropiados[32].
9
Es un complemento de una aplicacin que se relaciona con otra, para aportarle una funcin nueva y
generalmente muy especifica.
22

Eliminacin de etiquetas y atributos obsoletos o no deseables.

I lust racin 10 Composicin de Ht ml5 [9]
Sin embargo, el principal problema es que an se est definiendo el lenguaje. Por
ello, al no encontrarse estandarizado, los navegadores an no soportan al 100% sus
nuevas funcionalidades [34]. A continuacin se puede apreciar el grado de
compatibilidad de los principales navegadores web.
I lust racin 11 Compat ibilidad de los navegadores web con ht ml5 [10]
HTML5 permiten una flexibilidad y potencia muy grandes para la creacin de
animaciones, adems de hacerlas independientes del dispositivo en el que se est
visualizando: ordenadores, mviles, iPads, tablets, etc. [18],ejecutadas dentro de
un componente WebKit del mvil.
2.2 Estudio del entorno de desarrollo Android
10

Android es una plataforma para dispositivos mviles que contiene una fuente de
software donde se incluye un sistema operativo, middleware
11
y aplicaciones
bsicas para el usuario, con las siguientes caractersticas:
Desarrollo rpido de aplicaciones, que sean reutilizables y
verdaderamente portables entre diferentes dispositivos.

10
Toda sta seccin est tomada textual e ntegramente de [14].
11
Middleware es un software de computadora que conecta componentes de software o aplicaciones para que
puedan intercambiar datos o comunicarse entre stas [19].
23

Cuenta con su propia mquina virtual, Dalvik, que interpreta y ejecuta
cdigo escrito en Java.
Permite la representacin de grficos 2D y 3D.
Posibilita el uso de bases de datos.
Soporta un elevado nmero de formatos multimedia.
Servicio de localizacin GSM.
Controla los diferentes elementos hardware: Bluetooth, Wi-Fi, cmara
fotogrfica o de vdeo, GPS, acelermetro, infrarrojos, etc.
Cuenta con un entorno de desarrollo muy cuidado mediante un SDK
disponible de forma gratuita.
Ofrece un plugin para uno de los entornos de desarrollo ms populares,
Eclipse, y un emulador integrado para ejecutar las aplicaciones
Un dispositivo Android cuenta con la siguiente arquitectura (ilustracin 12), la
misma que se proceder a detallar sus componentes ms importantes.

I lust racin 12 Arquitect ura de Android
La capa ms inmediata es la que corresponde al ncleo de Android, utiliza el
ncleo de Linux 2.6 como una capa de abstraccin para el hardware disponible en
los dispositivos mviles, la cual contiene los drivers necesarios para cualquier
componente de hardware pueda ser utilizado.Cabe recalcar que el fabricante es el
encargado de crear las correspondientes libreras de control odrivers.
24

La siguiente capa corresponde con las libreras utilizadas por Android,estas han
sido escritas utilizando C/C++ y proporcionan a Android la mayor parte de sus
capacidades y caractersticas:
La librera libc incluye todas las cabeceras y funciones segn el estndar
del lenguaje C. Todas las dems libreras se definen en este lenguaje.
La libreraSurfaceManager es la encargada de componer los diferentes
elementos de navegacin de pantalla. Gestiona tambin las ventanas
pertenecientes a las distintas aplicaciones activas en cada momento.
OpenGL/SL y SGL representan las libreras grficas y por tanto
sustentan la capacidad grfica de Android.
La librera MediaPlayerproporciona todos los cdecs necesarios para el
contenido multimedia soportado en Android (vdeo, audio, imgenes
estticas y animadas, etc.)
A travs de la librera SQLite, Android ofrece la creacin y gestin de
bases de datos relacionales.
La librera WebKit proporciona un motor para las aplicaciones de tipo
navegador, y forma el ncleo del actual navegador incluido por defecto
en la plataforma Android.
En este nivel tambin se encuentran las libreras de Android, entre las cuales
encontramos las CoreLibraries, estas estn desarrolladas en lenguaje java, y la
maquina virtual Dalvik, que constituyen el framework de aplicaciones el cual
representa fundamentalmente el conjunto de herramientas de cualquier aplicacin.
Dentro de este framework de aplicaciones podemos mencionar algunas de las
libreras ms importantes:
Activity Manager: Importante conjunto de APIs que gestiona el ciclo de
vida de las aplicaciones en Android.
Window Manager: Gestiona las ventanas de las aplicaciones
TelephoneManager: Incluye todas las APIs vinculadas a las
funcionalidades propias del telfono (llamadas, mensajes, etc.)
Content Providers: Permite a cualquier aplicacin compartir sus datos
con las dems aplicaciones de Android. Por ejemplo, gracias a esta API
la informacin de contactos, agenda, mensajes, etc. ser accesible para
otras aplicaciones.
View System: Proporciona un gran nmero de elementos para poder
construir interfaces de usuario (GUI), como listas, mosaicos, botones,
check-boxes, tamao de ventanas, control de las interfaces mediante
tacto o teclado, etc. Incluye tambin algunas vistas estndar para las
funcionalidades ms frecuentes.
25

Location Manager: Posibilita a las aplicaciones la obtencin de
informacin de localizacin y posicionamiento.
Notification Manager: Permite que las aplicaciones usen un mismo
formato para comunicar al usuario eventos que ocurran durante su
ejecucin, por ejemplo, una llamada entrante, un mensaje recibido,
conexin Wi-Fi disponible, ubicacin en un punto determinado, etc.
La mquina virtual Dalvik ha sido optimizada y adaptada a las peculiaridades
propias de los dispositivos mviles (menor capacidad de proceso, baja memoria,
alimentacin por batera, etc.) y trabajar con ficheros de extensin
.dex(DalvikExecutables). Dalvik no trabaja directamente con el bytecode de Java,
sino que lo transforma en un cdigo ms eficiente que el original, pensado para
procesadores pequeos.
Los ficheros .class de Java se compilan en ficheros .dex, de forma que cada fichero
.dex puede contener varias clases. Despus, este resultado se comprime en un nico
archivo de extensin .apk(AndroidPackage), el cual es el que se distribuir a los
dispositivos mviles.
Una vez vista la arquitectura de Android, debemos revisar cules son los
componentes bsicos de una aplicacin:
Activity: Un componente Activity refleja una determinada actividad
llevada a cabo por una aplicacin y se asociatpicamente a una ventana
o interfaz de usuario.
BroadcastIntent Receiver: Se utiliza para lanzar una ejecucin dentro de
la aplicacin actual cuando un determinado evento se produzca. El
sistema lanzar la aplicacin si es necesario cuando el evento
monitorizado tenga lugar.
Service: Representa una aplicacin ejecutada sin interfaz de usuario y
que generalmente tiene lugar en segundo plano mientras otras
aplicaciones son las que estn activas en la pantalla del dispositivo.
Content Provider: Una clase que implemente este componente contendr
una serie de mtodos que permite almacenar, recuperar, actualizar y
compartir los datos de una aplicacin ya sea en archivos o la base de
datos SQLite.
Cada uno de los componentes bsicos de Android tiene un ciclo de vida bien
definido; esto implica que el desarrollador puede controlar en cada momento en qu
estado se encuentra dicho componente, pudiendo as programar las acciones.
El componente Activity, probablemente el ms importante tiene el siguiente ciclo de
vida:
26

I lust racin 13 Ciclo de vida de un Act ivit y [20]

En la ilustracin 13 podemos observar que entre los principales eventos que
tenemos son:
onCreate(), onDestroy(): Abarcan todo el ciclo de vida. Cada uno de
estos mtodos representan el principio y el fin de la actividad.
27

onStart(), onStop(): Representan la parte visible del ciclo de vida. Desde
onStart() hasta onStop(), la actividad ser visible para el usuario.
onResume(), onPause(): Delimitan la parte til del ciclo de vida. Desde
onResume() hasta onPause(), la actividad no es visible.
La mayora de las medidas de seguridad entre el sistema y las aplicaciones deriva
de los estndares de Linux 2.6. Por defecto, ninguna aplicacin tiene permiso para
realizar ninguna operacin o comportamiento que pueda impactar negativamente en
la ejecucin de otras aplicaciones o del sistema operativo. La nica forma de poder
saltar estas restricciones impuestas por Android, es mediante la declaracin explcita
de un permiso que autorice a llevar a cabo una determinada accin.
Android tiene varios avances en tecnologa y funcionalidad, cada uno de estos
avances conlleva a una actualizacin en las cuales se arreglan los problemas y se
agregan nuevas funciones.Actualmente Android se encuentra en la versin 4.1
(JellyBean), en la ilustracin 14 se puede apreciar las versiones de Androidms
utilizadas en los celulares y tablets, realizada en noviembre del 2012

I lust racin 14 Porcentajes de distr ibuciones de Android ut ili zadas
act ualmente [21]

2.3 Comparacin de la plataforma de desarrollo Android con HTML 5 para
dispositivos mviles.
Se proceder a detallar las ventajas y desventajas de las dos plataformas de
desarrollo para dispositivos mviles.
28

2.3.1 AplicacionesHTML5 para dispositivos mviles.
Una de las principales ventajas del desarrollo en dispositivo mviles es que todos
los dispositivos tienen un navegador web, que ya incorpora la tecnologa HTML5,
por lo que podemos crear una aplicacin web y desplegar la aplicacin dentro de un
visor Web como si fuera nativa [15].
Ventajas [15]:
Es de fcil diseo ya que no siempre se debe desarrollar una aplicacin
para mviles. Se puede realizar un diseo adaptado a una pantalla y se
podr visualizar como una aplicacin nativa.
Fcil implementacin en las aplicaciones que se pueden desarrollar
utilizando tecnologas web como HTML5, CSS3 y JavaScript,
permitiendo as optimizar el tiempo de desarrollo.
Manejo de seguridad utilizando libreras de JavaScript.
Acceso al hardware del dispositivo lo que permite acceder a las
caractersticas del dispositivo mvil como por ejemplo el GPS,
acelermetro, cmara, contactos, base de datos, filesystem, etc., por
medio de un framework[13].
Es la solucin que ms plataformas mviles soporta, ya que corre dentro
de un navegador web. Adems de Iphone/Ipad y Android, funciona
tambin en Palm, Symbian, WebOS, Windows 7 y BlackBerry [13].
Hay buena documentacin y bastantes ejemplos en lnea permitiendo un
mejor desarrollo [13].
La licencia es gratuita [13].
Desventajas
Mayor consumo de recursos ya que se debe renderizar HTML e
interpretar JavaScript, lo cual es ms costoso que ejecutar una aplicacin
nativa en trminos de recursos de hardware del dispositivo[15].
2.3.2 Aplicaciones nativas.
Entre las principales ventajas y desventajas del desarrollo nativo en dispositivos
mviles basados en Android son los siguientes:
Ventajas [22]:
Se puede instalar en casi todo tipo de dispositivos, lo cual permite que
los diferentes fabricantes y operadoras tomen a este sistema operativo en
sus equipos [16].
29

Android tiene un sistema completamente libre para que un desarrollador
no solo pueda modificarlos sino tambin mejorarlo.
Entorno de desarrollo libre basado en Eclipse y compatible con varios
sistemas operativos, que cuenta con simulador de Android para probar
las aplicaciones.
Libreras y componentes reutilizables para todo tipo de aplicaciones.
Gran comunidad de desarrolladores, variasfuentes de informacin acerca
de la plataforma con ejemplos de cada una de las aplicaciones.
Ms de 100.000 aplicaciones disponibles para telfonos Android la
mayora gratis.
Es un sistema operativo multitarea quees capaz de gestionar varias
aplicaciones abiertas a la vez, dejando en suspensin aquellas que no se
utilicen y cerrarlas en caso de resultar ya intiles para evitar un consumo
de memoria[16].
Desventajas [22]:
Google tiene una poltica restrictiva hacia las versiones ms recientes, no
hacindolas pblicas hasta que ellos lo vean conveniente.
Como Android es un sistema operativo de cdigo abiertoproduce que este
expuesto a vulnerabilidades.
Despus de un anlisis podemos llegar a la conclusin de que la tecnologa web es
un complemento del desarrollo para dispositivos mviles en su lenguaje nativo, ya
que nos permite desarrollar bajo una tecnologa utilizando HTML5 con todas sus
potencialidades. Por otra parte, CSS3 nos ayuda a la realizacin de animaciones,
estilos y efectos en los componentes de HTML y la potencialidad de JavaScriptpara
el manejo de eventos, servicios web, accesos a las caractersticas del dispositivo
como la cmara, GPS, acelermetros, etc. A este tipo de aplicaciones se les conoce
como aplicaciones hbridas [15].
Las aplicaciones hbridas potencializan las dos tecnologas para el desarrollo de
aplicaciones mviles, ya que una de las principales desventajas de la tecnologa web
es que tiene un mayor consumo de recursos, producido por que se ejecuta dentro de
un WebView, lo queproduce que se renderize la aplicacin e interpretecomo nativa,
por lo que en algunos casos es necesario complementar con las tecnologas nativas
para aumentar el rendimiento de la aplicacin.
Personalmente, para un tamao pequeo o mediano de una aplicacin que slo tiene
que mostrar el contenido, que necesita utilizar componentes bsicos del dispositivo
y no se necesita un mayor rendimiento, se puede realizar mediante tecnologa Web,
sin embargo, si la aplicacin se necesitaun mayor consumo de recursos y el uso
nativo de componentes se debe desarrollar con Androidnativo[17].
30

2.4 Especificaciones de la tecnologa de desarrollo.
Para el desarrollo de la aplicacin en elmarco del proyecto Pequeas y Pequeos
Cientficos de la Universidad Politcnica Salesiana, se proceder a utilizar las
tecnologas Android, HTML5, CSS3 yJavaScript, para la creacin de componentes
visuales y multimedia.
A continuacin se detalla la instalacin y configuracin para la creacin de
aplicaciones hbridas en Windows 7 Ultimate.
2.4.1 Instalacin y configuracin de JDK 7
Para instalar el entorno de desarrollo JDK 7 en Windows, debemos seguir estos
pasos:
1. Descargar el JDK de la sitio web de Oracle
http://www.oracle.com/technetwork/java/javase/downloads/index.html, en esta
pgina encontramos las diversas versiones (durante la redaccin de estas lneas,
la ltima versin que existe es la versin 7).

I lust racin 15 Sit io web de Oracle para la descar ga del JDK

31

2. Se procede a aceptar los trminos de licencia y escoger el instalador del sistema
operativo en el que se est desarrollando, en este caso se escoge Windows.

I lust racin 16 Descar ga del JDK
3. Con esto se descargar un archivo ejecutable, en el cual procedemos a dar doble
clic para la instalacin y posteriormente damos clic en siguiente.

I lust racin 17 I nst alacin de JDK 7

32

4. Escogemos las caractersticas que deseamos instalar y damos clic en siguiente,
se proceder a instalar del JDK.

I lust racin 18Caracter st icas de instalacin del JDK
5. Por ltimo se nos presenta un mensaje que nos informa que la instalacin se
realiz con xito, damos clic en cerrar.

I lust racin 19 Estado de la instalacin del JDK

33

2.4.2 Instalacin y configuracin del SDK de Android
1. Primeramente se descargara la versin de SDK de Android del sitio web
http://developer.android.com/sdk/index.html.

I lust racin 20 Sit io web para la descar ga del SDK de Android
2. Se procede a la instalacin del SDK, dando doble clic en el archivo descargado,
se nos presenta la siguiente pantalla y damos clic en siguiente.

I lust racin 21 I nst alacin del SDK de Android
34

3. Escogemos el directorio en donde queremos que se instale el SDK yprocedemos
a dar clic en siguiente.

I lust racin 22 Director io de instalacin del SDK de Android
4. Se instalara todos los paquetes del SDK de Android, damos clic en instalar.

I lust racin 23 Paquetes de instalacin de Android

35

5. Una vez completada la instalacin procedemos a dar clic en Finalizar.
6. Posteriormente se deben instalar paquetes adicionales del sistema operativo
Android, con esto podemos ejecutar nuestras aplicaciones dentro de un
dispositivo virtual, escogemos la ltima versin de Android,la cual al momento
de la redaccin de este documento es la 4.1 (API 16) y se escoger la versin
3.1 (API 11) como base, para realizar las pruebas en las diferentes versiones,
damos clic en instalar paquetes.

I lust racin 24 I nst alacin de las platafor mas disponibles de Android
7. Una vez terminada la instalacin de los paquetes se proceder a crear una
mquina virtual de Android, para esto nos dirigimos al Men Tools y
seleccionamos Manager ADVS, aqu podemos crear los dispositivos virtuales
para la ejecucin de las aplicaciones en un entorno virtual.
36

I lust racin 25 Administr acin de disposit ivos vir t uales de Android
8. Para crear un nuevo dispositivo virtual damos clic en Nuevo.

I lust racin 26 Cr eacin de un nuevo disposit ivo virt ual de Android
37

9. Ingresamos el nombre del dispositivo virtual, la plataforma en la que se va a
ejecutar, asignamos el tamao de memoria, el tipo de pantalla y el hardware con
el que cuenta el dispositivo. Una vez terminado damos clic en Create ADV.

I lust racin 27 Configuracin de un nuevo disposit ivo vir t ual de Android
10. Una vez terminada la creacindel dispositivo virtual, podemos iniciarlo para
comprobar su correcto funcionamiento, para esto damos clic en comenzar.
38

I lust racin 28 Visualizacin de los disposit ivos virt uales Android.
11. En la siguiente pantalla se muestra la ejecucin del dispositivo virtual.

I lust racin 29 Ejecucin del disposit ivo vir t ual Android
39

2.4.3 Instalacin y configuracin de Eclipse Indigo
Se proceder a detallar la instalacin y configuracin del entorno de desarrollo
eclipse
1. Se utilizar Eclipse Indigo 3.7 como entorno de desarrollo, el cual se descarga
del sitio web de Eclipse:
http://www.eclipse.org/downloads/download.php?file=/technology/epp/downloa
ds/release/juno/R/eclipse-jee-juno-win32.zip, dentro de este sitio escogemos el
servidor de descarga.

I lust racin 30 Sit io web de descar ga del Ec lipse I ndigo 3.7
2. Una vez finalizada la descarga no se debe realizar ningn proceso de
instalacin, simplemente se debe descomprimir el fichero en un nuevo directorio
y damos clic en el ejecutable de eclipse, la primera vez que se ejecuta la
aplicacin nos solicita escoger nuestro espacio de trabajo (workspace),carpeta
donde se almacenarn todas las aplicaciones desarrolladas.
2.4.4 Instalar el plugin de Android para Eclipse
El siguiente paso es instalar el plugin especfico de Androidpara la plataforma de
desarrollo EclipseIndigo, para esto nos valemos de la herramienta ADT
(AndroidDeveloment Tools) que nos facilita enormemente el desarrollo de proyectos
basados en Android.

40

1. Seleccionamos en el Men Help>Install New Software

I lust racin 31 I nst alacin delplugin ADT en Eclipse.
2. Damos clic en agregar repositorio, le asignamos un nombre al repositorio que
vamos a agregar (por ejemplo, Android) y en la localizacin ingresamos el
siguiente repositorio web https://dl-ssl.google.com/android/eclipse/ como se
muestra en la ilustracin 32.

I lust racin 32 Agregacin el repositor io de Android

41

3. Seleccionamos la pestaa Develoment Tools y procedemos a dar clic en
siguiente, produciendo que se instalenlos paquetes necesarios para el desarrollo
de software en Android.

I lust racin 33 Seleccin e instalacin de los paquetes de Android
4. Una vez terminada la instalacin se deber reiniciar Eclipse para que los
cambios tengan efecto.
2.4.5 Creacin de un nuevo proyecto Android
1. Seleccionar en el Men File > New > Project, y en el men resultante desplegar
la opcin Android y elegir Android Project y damos clic en siguiente.
42

I lust racin 34 Cr eacin de nuevo proyecto de Android
2. Se nos presenta la configuracin del nuevo proyecto, el cual tiene los siguientes
parmetros [14]:
Project name: Es el nombre del proyecto, en la prctica ser el nombre
que reciba la carpeta donde se guardar todo lo relativo al presente
proyecto dentro del workspace.
Packagename: El nombre del paquete bajo el cual ser desarrollado todo
el cdigo.
Activityname: Es el nombre de la clase Activity principal que ser creada,
esta clase simplemente es una clase ejecutable, capaz de realizar alguna
tarea y es imprescindible en la mayora de las aplicaciones para
Android.
Applicationname: El nombre de la aplicacin que se va a desarrollar,
constituye el nombre visible para el usuario del dispositivo mvil.
43

I lust racin 35 Configuracin de un nuevo proyecto Android.
3. Una vez terminada la creacin del nuevo proyecto, damos clic en finalizar.
4. Para ejecutar la aplicacin debemos dar clic derecho sobre el proyecto y
seleccionamos Run As >AndroidApplication, en la ilustracin 36 se observa el
resultado de ejecutar la aplicacin.

I lust racin 36 Ejecucin de la aplicacin Android.
44

CAPTULO 3

45

3 DISEO DEL SOFTWARE.
3.1 Levantamiento de Requerimientos de Software.
Como se mencion en el captulo anterior, el proyecto ya cuenta con un portal web
(www.pequeciencia.org) en donde se encuentran los cuatro mdulos
desarrollados.Dichosmdulos han sido desarrollados bajo la tecnologa de Adobe
Flash Builder. Un gran problema de la tecnologa flash es que en las nuevas
versiones de los sistemas operativos para dispositivos mviles como IOS y Android
4.1 se descartla compatibilidad de ejecucin de flash[33].
La tecnologa est en auge y los sistemas operativos mviles estn obteniendo una
mayor compatibilidad con HTML5, CSS3 yJavaScriptpara plasmar animaciones que
antes solo era posible en flash,consecuentemente, la principal fuente para el
levantamiento de requerimientos es el sitio web y donde los cdigos fuentes de la
aplicacin, repositorio de imgenes y sonidos fueron entregados por el equipo de
desarrollo del proyecto de Pequeas y Pequeos Cientficos (Ing. Elena Duran y
Ing. Diego Granja).
3.1.1 Definicin de Stakeholders
12

En la siguiente matriz se puede apreciar cules son los stakeholders involucrados en
el proyecto de Pequeas y Pequeos Cientficos de la Universidad Politcnica
Salesiana.
Matriz de los Stakeholders
NOMBRE CARGO RELEVACIN
(1-5)
Ing. Elena Duran Desarrolladores del Proyecto
Pequeas y Pequeos
Cientficos.
5
Ing. Diego Granja Desarrolladores del proyecto
Pequeas y Pequeos
Cientficos.
5

Ing. Vladimir Robles Director de Tesis 5
Ing. Rodolfo Bojorque Equipo de Investigacin 4
Ing. Eduardo Calle Jefe del departamento de
Investigacin
3
Tabla 2 Mat r iz de los St akeholders.

12
Stakeholder es una persona u organizacin que tiene influencia directa, indirectamente o se ve influenciado
por un proceso de desarrollo del software [25].
46

3.1.2 Tcnicas de Elicitacin [26]
El propsito de la elicitacines recolectar informacin de los stakeholders y
capturar esa informacin en el formato de posibles requerimientos (tanto tcnicos
como no tcnicos), junto con la justificacin que da soporte a cada requerimiento,
empleando tcnicas como:
Entrevistas: La entrevista es una forma de iteracin simple entre el
analista y los stakeholders. El analista simplemente permite que los
stakeholders hablen sobre las tareas que debe cumplir el software, lo cual
nos permite tener una visin global del dominio del problema. Por ello,
se mantuvo entrevistas constantes obteniendo una visin completa del
problema.
Tormenta de Ideas: Se rene un conjunto de personas relacionadas al
producto y stas sugieren y exploran sus ideas libremente, generando una
amplia variedad de puntos de vistas, logrando construir una imagen ms
completa del problema. Se obtuvo numerosas alternativas para resolver
el dominio del problema y las tecnologas a emplear.
RAD (Rapid ApplicationDesign):Diseo Rpido de Aplicaciones, es un
proceso de desarrollo de software que permite la construccin de
sistemas tiles en menos de 90 das.Es una metodologa para comprimir
el anlisis, el diseo, la construccin y las fases de prueba en una serie de
ciclos de desarrollo cortos e iterativos, por lo que en cada iteracin se
entrega una parte funcional del sistema
Prototipacin: La prototipacin es el proceso de creacin de un sistema
que ilustra las caractersticas relevantes del mismo. Comienza por el
estudio preliminar de los requerimientos del usuario y concluye con una
serie de requerimientos formulados y un prototipo desechable. Es un
proceso iterativo que permite la definicin del comportamiento del
sistema y en particular la apariencia del mismo.
3.1.3 Suposiciones y Dependencias
Se brindar el apoyo del equipo de desarrolladores del proyecto
Pequeas y PequeosCientficos.
La Universidad Politcnica Salesiana proveer las licencias para el
desarrollo e implementacin del software.
Acceso al laboratorio del CIDII (Centro de Investigacin, Desarrollo e
Innovacin en Ingenieras de la UPS).
La Universidad Politcnica Salesiana proveer de 2 tablets con Android
de 10 y 7 pulgadas.
Conexin a internet.
47

3.1.4 Requerimientos Funcionales
Laaplicacin desarrollada consta del mundo elctrico y del mundo verde,
consecuentemente el Mundo Verde est compuesto de los siguientes personajes,
temas y actividades.
Personajes:
Cientfica: Doctora Atmica.
Cientfico: Doctor Voltio
Nio: Panchito
Nia: Robertina
rbol: Calipto

Temas:
Tema 1: Un gran problema
Subtema 1: La contaminacin ambiental
Tramo 1: Planeta enfermo
Tramo 2: La contaminacin
Subtema 2: Todo necesita energa
Tramo 1: Energa
Tramo 2: Polucin
Tramo 3: Mundo verde
Tema 2: Las energas renovables
Subtema 1: Generacin de energa elctrica
Tramo 1: Energas renovables
Tramo 2: Energa elica
Tramo 3:Aerogeneradores
Tramo 4:Energa hidrulica
Tramo 5:Energa solar
Tramo 6:Reto solar
Tema 3: Cuidando el medio ambiente
Subtema 1: Salvemos al planeta
Tramo 1: Ahorremos energa elctrica
Tramo 2: Recomendaciones
Tramo 3: Ms Recomendaciones
Actividad:
Experimento 1: Moviendo un motor con la energa del sol.
Materiales:
Un fuerte sol
1 panel solar fotovoltaico
2 cables con lagartos
Motorcito
Procedimiento:
1. Anda a un lugar en donde haya mucho sol.
2. Conecta los elementos como se indica a continuacin

48

El Mundo Elctrico consta con los siguientes personajes, temas y actividades. Lo
cual se detallara a continuacin.
Personajes
Cientfica: Doctora Atmica.
Cientfico: Doctor Voltio
Nio: Panchito
Nia: Robertina

Temas:
Tema 1: Un poquito de historia
Subtema 1: Un mundo lleno de energa
Tramo 1: Todo necesita energa
Subtema 2: Tales de Mileto
Tramo 1: Filsofo
Subtema 3: Benjamn Franklin y los rayos
Tramo 1: Los rayos
Tramo 2: Rayos = Electricidad
Tramo 3: El pararrayos
Subtema 4: Alessandro Volta y la pila elctrica
Tramo 1: Pila elctrica
Subtema 5: Thomas Alva Edison y el foco elctrico
Tramo 1: Se le prendi el foco
Tema 2: Qu es la electricidad?
Subtema 1: Energa elctrica
Tramo 1: Recurdalo bien!
Subtema 2: El tomo y sus partes
Tramo 1: El tomo
Tramo 2: Electrones, protones y neutrones
Subtema 3: Tipos de electricidad
Tramo 1: Electricidad esttica
Tramo 2: Corriente elctrica
Tema 3: El circuito elctrico
Subtema 1: La corriente elctrica
Tramo 1: El circuito elctrico
Tramo 2: El interruptor
Tramo 3: Los conductores
Tramo 4: Voltaje elctrico
Tramo 5: Batera elctrica
Tramo 6: Resistor elctrico
Tema 4: Importancia de la electricidad
Subtema 1: La importancia de la electricidad
Tramo 1: Imagina!
Tramo 2: Recurdalo bien!

49

Actividades:
Experimento 1: Papelitos pegajosos.
Materiales:
- 1 electro-globo Pedazos de papel de colores
- Bitcora

Procedimiento:
1. Infla el electro- globo.
2. Esparce los papelitos de colores sobre tu mesa de trabajo.
3. Acerca el electro-globo que acabaste de inflar, y observa
qusucede.Qu tal si hacemos lo que hizo Tales de Mileto?
4. Frota el electro-globo varias veces en tu ropa o en tu cabello.
5. Ahora s, acerca el electro-globo a los papelitos de colores.

Experimento 2: Globos electrizados.
Materiales:
- 2 electro-globos Bitcora

Procedimiento:
1. Infla los dos electro-globos.
2. Acerca los globos a tu cabello. Qu sucede?
3. Frota cada globo varias veces en tu cabello o en la chompa
que tienes puesta. Antalo en tu bitcora, y haz un dibujo de
lo que observas.
4. Acerca los electro- globos a tu cabello, y pregntale a tu
compaero qu es lo que sucede con tu cabello.

Experimento 3: Puedes prender un foco?
Materiales:
- 2 pilas y su portapilas
- 3 cables con lagartos
- 1 Foco con su boquilla
- 1 Interruptor
- Bitcora

Procedimiento:
Recuerda que la batera es necesaria para que exista la fuerza
(voltaje) que mueve a los electrones. El foco ser el resistor de
nuestro primer circuito.
1. Conectaremos uno de los terminales del porta pilas con el
interruptor usando un cable con lagartos.
2. Con otro cable con lagartos conecta el interruptor al foco.
3. Usando otro cable con lagartos conectaremos el otro terminal
del foco hacia el otro terminar del portapilas.
50

3.1.5 Requerimientos no Funcionales
Rendimiento
El sistema ofrecer respuesta al usuario en tiempo real.
El tiempo de respuesta promedio de la aplicacin no debe superar los
5 segundos.
Seguridad
Requisito de conexin.
El sistema no contendr ninguna conexin abierta de acceso a
internet.
Fiabilidad
Que el sistema sea 90% fiable, es decir, que la aplicacin de cada 10
ejecuciones las 9 no tengan ningn error de compilacin.
Disponibilidad
En funcionamiento normal del sistema estar disponible el 100% del
tiempo, esto se obtiene instalando la aplicacin dentro del dispositivo
mvil como una aplicacin nativa.
Mantenibilidad
El sistema estar en constante mantenimiento, consecuentemente se
estarn actualizando o agregando nuevas funcionalidades.
Portabilidad
Compatibilidad con plataformas: En el sistema desarrollado ofrece
compatibilidad con otras plataformas Android desde la versin 3.0.
Que se pueda descargar de cualquier parte del mundo gratuitamente
por medio de Google Play.
Operabilidad
Podr ser operado por un nio de ms de 8 aos.
Interoperabilidad
Interoperabilidad entre tecnologa web y tecnologa nativa Android.
51

3.1.6 Restricciones
El dispositivo mvil en donde se ejecutarla aplicacin deber tener los
siguientes requisitos mnimos:
Procesador: ARM de 500Mhz
Memoria RAM: 512 MB.
Disco Duro: 30 MBdisponibles.
Las versiones de sistema operativo de los dispositivos mviles deben ser:
AndroidHoneycomb 3.0 o superior
3.1.7 Evolucin previsible del sistema
Se continuarel desarrollo de los siguientes mdulos, los cuales estn
compuestos por los mundos elctrico, magntico y digital.
Se implementara nuevas funcionalidades a los mdulos o mundos.
3.1.8 Validacin de requerimientos
Los requerimientos sern validados por el equipo de desarrollo del proyecto de
Pequeas y Pequeos Cientficos de la Universidad Politcnica Salesiana, el cual
deber cumplir con los requerimientos funcionales y no funcionales antes
expuestos, elaborando un certificadode la validacin que ser firmado por la Ing.
Elena Duran y el Ing. Diego Granja. Se adjunta en Anexo 1 el certificado de
validacin del proyecto.
3.2 Diseo de la aplicacin.
3.2.1 Casos de Uso
Caso de uso: Aprendizaje Multimedia del Mundo Verde y Elctrico

MUNDO VERDE, ELECTRICO
Nios o Nias
Seleccion del tema de Aprendizaje
52

Descripcin del caso de uso:
Paquete: Mundo Verde y
Elctrico
Iteracin: 1 Minuta/s: 1.0

Nombre Caso de Uso: Aprendizaje
multimedia mundo verde y elctrico.
Nro. Orden: R1

Actor Principal: Nias/os

Prioridad:X Esencial til Deseable
Complejidad: Simple Mediano Complejo X Muy Complejo
Tipo de Caso de Uso:XConcreto Abstracto
Objetivo: Ensear el cuidado del medio ambiente desde los tabletscon Android
Precondiciones: Ingresar al sistema multimedia del mundo verde
Pos
condiciones:
xito: El usuario podr aprender interactivamente el
cuidado del medio ambiente y el elctrico desde los tablets.
Fracaso: Salida inesperada del sistema multimedia.

Curso Normal: Alternativas
1. Visualizacin multimedia de los
temas de aprendizaje del mundo
verde y elctrico.
Terminar cada uno de los temas de
aprendizaje multimedia.

Asociaciones de Extensin: No aplica
Asociaciones de Inclusin: No aplica
Caso de Uso donde se incluye: No aplica
Caso de Uso donde se extiende: No aplica
Case de Uso en donde se Generalizacin: No aplica
53

3.2.2 Diagrama de Clases del Mundo Elctrico y Verde
Diagrama de clases del Mundo Elctrico.

La razn por la que el mundo elctrico solo consta de una clase, es que dentro del
mtodoonCreate(),su nica tarea es cargar un documento principaldesarrollado
enHTML5, CSS3 y JavaScript, el cual se encarga de todo el manejo de la
aplicacin.
Diagrama de clases del Mundo Verde.
En el mundo verde se desarrollo una aplicacin hbrida del Mundo Verde.Dentro
del marco el desarrollo nativo est compuesto por las siguientes clases:

Principal
+onCreate(savedInstanceState: Bundle)
ArbolCientifico
+px: int
+py: int
+pxc: int
+pyc: int
+x: int
+y: int
+h: int
+w: int
+xt: int
+xtc: int
-bitmap: android.graphics.Bitmap
-bitmapcara: android.graphics.Bitmap
-bitmapCientifico: android.graphics.Bitmap
-bitmapcaraCientifico: android.graphics.Bitmap
+lienzo: ArbolCientifico
+vt: java.util.ArrayList
+vtc: java.util.ArrayList
+translacion: boolean
+animacion: Animacion
+t: Tiempo
+cientifico: boolean
+ArbolCientifico(context: android.content.Context, px: int, py: int, pxc: int, pyc: int, w: int, h: int, t: Tiempo)
+addTiempoCuerpo(tinicial: int, tfinal: int, figCambio: int)
+addTiempoCara(tinicial: int, tfinal: int, figOrigen: int, figCambio: int)
+exeAnimacion()
+draw(canvas: android.graphics.Canvas)
54

NinoCientifica
+px: int
+py: int
+pxc: int
+pyc: int
+x: int
+y: int
+h: int
+w: int
+xt: int
+xtc: int
-bitmapCientifica: android.graphics.Bitmap
-bitmapcaraCientifica: android.graphics.Bitmap
+lienzo: NinoCientifica
+t: Tiempo
+cientifica: boolean
+NinoCientifica(context: android.content.Context, px: int, py: int, pxc: int, pyc: int, w: int, h: int, t: Tiempo)
+exeAnimacion()
Nina
+px: int
+py: int
+pxc: int
+pyc: int
+x: int
+y: int
+h: int
+w: int
+xt: int
+xtc: int
+lienzo: Nina
+t: Tiempo
+Nina(context: android.content.Context, px: int, py: int, pxc: int, pyc: int, w: int, h: int, t: Tiempo)
+exeAnimacion()
55

Fondo
-bitmapPantalla: android.graphics.Bitmap
+fondo: Fondo
+xt: int
+xtp: int
+h: int
+w: int
+px: int
+py: int
+x: int
+y: int
+pxp: int
+pyp: int
+t: Tiempo
+bajar: boolean
+agrandar: boolean
+Fondo(context: android.content.Context, px: int, py: int, pxp: int, pyp: int, w: int, h: int, t: Tiempo)
+exeAnimacion()
Web
+p: Principal
+web: android.webkit.WebView
+prbload: android.widget.ProgressBar
+w: int
+h: int
+px: int
+py: int
+Web(p: Principal, px: int, py: int, w: int, h: int)
+getButton(btn: android.widget.ImageButton, px: int, py: int, id: int): android.widget.ImageButton
Tiempo
+tiempo: int
+Tiempo()
+setTiempo(tiempo: int)
+getTiempo(): int
Animacion
#doInBackground(params: String): boolean
#onProgressUpdate(x: String)
56

Media
+media: android.media.MediaPlayer
+Media(context: android.content.Context, audio: int)
Menu
-btnProblema: android.widget.ImageButton
-btnRenovable: android.widget.ImageButton
-btnCuidando: android.widget.ImageButton
-btnActividad: android.widget.ImageButton
+fondo: Fondo
+media: Media
+t: Tiempo
+p: Principal
+Menu(p: Principal, rl: android.widget.RelativeLayout, fondo: Fondo, web: Web, arbolCientifico: ArbolCientifico, ninoCientifica: NinoCientifica, nina: Nina, t: Tiempo, media: Media)
+setEventos()
+hilo()
Menu1
-btn1: android.widget.ImageButton
-btnMundo: android.widget.ImageButton
+fondo: Fondo
-web: Web
-arbolCientifico: ArbolCientifico
+media: Media
+t: Tiempo
+p: Principal
+Menu1(p: Principal, rl: android.widget.RelativeLayout, fondo: Fondo, web: Web, arbolCientifico: ArbolCientifico, ninoCientifica: NinoCientifica, nina: Nina, t: Tiempo, media: Media)
+setEventos()
+hilo()
+setTiempos()
Menu2
+fondo: Fondo
-web: Web
+media: Media
+t: Tiempo
+p: Principal
+setEventos()
+hilo()
Menu3
+fondo: Fondo
-web: Web
+media: Media
+t: Tiempo
+p: Principal
+setEventos()
+hilo()
Menu4
+fondo: Fondo
-web: Web
+media: Media
+t: Tiempo
+p: Principal
+setEventos()
+hilo()
57

Problema
-btnA: android.widget.ImageButton
-btnB: android.widget.ImageButton
-btnAtras: android.widget.ImageButton
+fondo: Fondo
-web: Web
-nina: Nina
-ninoCientifica: NinoCientifica
+media: Media
+t: Tiempo
+p: Principal
+Problema(p: Principal, rl: android.widget.RelativeLayout, fondo: Fondo, web: Web, arbolCientifico: ArbolCientifico, ninoCientifica: NinoCientifica, nina: Nina, t: Tiempo, media: Media)
+setEventos()
+hilo()
+setTiempos()
Necesita
-btnC: android.widget.ImageButton
+fondo: Fondo
-web: Web
-nina: Nina
+media: Media
+t: Tiempo
+p: Principal
+Necesita(p: Principal, rl: android.widget.RelativeLayout, fondo: Fondo, web: Web, arbolCientifico: ArbolCientifico, ninoCientifica: NinoCientifica, nina: Nina, t: Tiempo, media: Media)
+setEventos()
+hilo()
+setTiempos()
Renovables
-btnD: android.widget.ImageButton
-btnE: android.widget.ImageButton
-btnF: android.widget.ImageButton
+fondo: Fondo
-web: Web
-nina: Nina
+media: Media
+t: Tiempo
+p: Principal
+actividad: Actividad
+Renovables(p: Principal, rl: android.widget.RelativeLayout, fondo: Fondo, web: Web, arbolCientifico: ArbolCientifico, ninoCientifica: NinoCientifica, nina: Nina, t: Tiempo, media: Media)
+setEventos()
+hilo()
+setTiempos()
+actividad()
Cuidando
+fondo: Fondo
-web: Web
-nina: Nina
+media: Media
+t: Tiempo
+p: Principal
+Cuidando(p: Principal, rl: android.widget.RelativeLayout, fondo: Fondo, web: Web, arbolCientifico: ArbolCientifico, ninoCientifica: NinoCientifica, nina: Nina, t: Tiempo, media: Media)
+setEventos()
+hilo()
+setTiempos()
58

Actividad
+fondo: Fondo
-web: Web
+media: Media
+t: Tiempo
+p: Principal
+tt: int
+renovable: boolean
+Actividad(p: Principal, rl: android.widget.RelativeLayout, fondo: Fondo, web: Web, arbolCientifico: ArbolCientifico, ninoCientifica: NinoCientifica, nina: Nina, t: Tiempo, media: Media, renovable: boolean)
+setInvisible()
+setVisible()
+setEventos()
+hilo()
+setTiempos()
Principal
+fondo: Fondo
-web: Web
-nina: Nina
+t: Tiempo
+estado: boolean
+media: Media
+rl: android.widget.RelativeLayout
+btn: android.widget.ImageButton = null
+escena: int
+menu: Menu
+menu1: Menu1
+menu2: Menu2
+menu3: Menu3
+menu4: Menu4
+problema: Problema
+necesita: Necesita
+renovables: Renovables
+cuidando: Cuidando
+actividad: Actividad
+onCreate(savedInstanceState: Bundle)
+resetPersonajes()
+setEscena(escena: int)
#onResume()
#onPause()
59

Las clases estn empaquetadas dentro de los siguientes paquetes:
Componentes:

Personajes

Componentes
Fondo Tiempo
Web Animacion
+tiempo
1 1
+animacion
1
1
+fondo
+web
1
1
Personajes
ArbolCientifico
Nina
NinoCientifica
Animacion
Animacion
Animacion
+animacion
1 1
+animacion
1 1
+animacion
1 1
60

Mens

Actividades

Finalmente se presenta el Diagrama UML del Mundo Verde.

Menus
Menu
Menu1
Menu3
Menu4
Menu2
+menu1
+menu
1
1
+menu2
+menu
1
1
+menu3
+menu
1
1
+menu4
+menu
1
1
Actividades
Principal
Animacion
Actividad
Cuidando
Necesita
Problema
Renovables
Media
+problema
+context
1
1
+media
+context
1
1
+animacion
1
1
+renovables
+context
1
1
+cuidando
+context
1 1
+necesita +context
1
1
+actividad
+context
1
1
61

componentes
Fondo Tiempo
Web Animacion
personajes
ArbolCientifico
Nina
NinoCientifica
Animacion
Animacion
Animacion
Actividades
Principal
Animacion
Menus
Menu
Menu1
Menu3
Menu4
Menu2
+menu1
+menu
1
1
+menu2
+menu
1
1 +menu3
+menu
1
1
+menu4
+menu
1
1
Actividad
Cuidando
Necesita
Problema
Renovables
Media
+tiempo +fondo
1 1
+animacion
1
1
+fondo
+web
1
1
+problema
+context
1
1
+media
+context
1
1
+animacion
+context
1
1
+renovables
+context
1
1
+cuidando +context
1 1
+necesita
+context
1
1
+actividad
+context
1
1
+animacion
1 1
+animacion
1 1
+animacion
1 1
62

3.2.3 Diagramas de Secuencia del Mundo Elctrico y Verde
Mundo Verde
.
context : Principal animacion : Animacion problema : Problema menu : Menu media : Media arbol : ArbolCientifico animacion : Animacion Nio o Nia
1 : onCreate()
2 : doInBackground()
3 : onProgresUpdate()
4 : setEscena()
5 : Problema()
6 : media()
7 : setTiempos() 8 : doInBackground()
9 : onProgresUpdate()
10 : invalidate()
11 : stop()
12 : onCancel()
13 : onPause()
63

Mundo Elctrico

3.3 Anlisis de las herramientas de desarrollo.
Como se mencionen captulos anteriores se desarrollaruna aplicacin hbrida
para el mundo verde,la cual constardel desarrollo en lenguaje nativo para la
reproduccin del sonido, animacin de los personajes y del fondo de la
aplicacin, por lo que se emplearn los siguientes paquetes de Android:
3.3.1 Grficos en Android
En el sistema Android se incluye la clase Canvas que implementa numerosos
mtodos para dibujar grficos en pantalla. La manera ms sencilla de dibujar
grficos en Android es dibujarlos sobre unCanvas asociado a un View[28].
Cada objeto View de una aplicacin tiene asociado un objeto Canvas. Este objeto
es pasado como argumento en las llamadas onDraw que realiza el sistema
cuando es necesario presentar el View. Por lo tanto, para dibujar en el Canvas
basta con sobrescribir (Override) el mtodo onDraw [28].
Porejemplo:
class Lienzo extends View {
publicLienzol(Contextcontext) {
super(context);
}
@Override
public void onDraw(Canvas canvas) {
//Cdigo para graficar dentro del Lienzo
}
}
principal : Principal
index.html
Nio o Nia
1 : onCreate()
2 : loadUrl()
3 : runningAnimation()
4 : onPause()
64

Para utilizar un recurso multimedia, basta con aadir el archivo al directorio
/res/drawable/ del proyecto, al hacer esto, el pluginde eclipse se encargar de
generar automticamente los identificadores java en la clase R. Con esto se puede
hacer referencia desde el cdigo o desde el diseo XML, se obtiene mediante un
identificador de recursos (id) que es el nombre del archivo sin la extensin del
tipo de archivo. Android soporta los formatos PNG (aconsejables), JPG
(aceptables) y GIF (desaconsejados) [29].
Para dibujar un mapa de bits, tenemos que utilizar la clase BitmapFactor, lo cual
enviamos como parmetro el identificador de referencia de la imagen dentro del
mtodo decodeResource() y nos retorna un objeto de tipo Bitmap.
Porejemplo:
Bitmapbitmap = BitmapFactory.decodeResource (get Resources(),
R.drawable.imagen);
Para graficar el mapa de bits (bitmap), nos dirigimos al mtodo onDraw() de la
clase Lienzo, dentro del mtodo onDraw() recibimos como parmetro un objeto
de tipo Canvas, la cual tiene el mtodo drawBitmap() que recibe los siguientes
parmetros [30]:
Bitmapbitmap:Es el mapa de bits.
Rectsrc:Puede ser nulo, es el rectngulo del mapa de bits que se
recortardel origen.
Rectdst:Es el rectngulo que el mapa de bits que se mostraren el
View.
Paint paint: Puedesernulo.Elestilo que se usa para dibujar el mapa de
bits.
3.3.2 AsyncTask[27]
Todos los componentes de una aplicacin Android, tanto las actividades como
los servicios, se ejecutan en el mismo hilo, llamado hilo principal (mainthread).
Existen ocasiones en las que necesitamos que se realicen tareas en segundo
plano, para solventar esto normalmente se hace uso de los hilos (Thread), el
problema con los hilos es que la interfaz grfica (UI) de Android no permite
llamadas desde otros hilos que no sea el suyo, para resolver esto debemos crear
un AsyncTask(Tarea Asncrona).
La clase AsyncTask dispone de tres tipos de parmetros distintos, que
deberemosespecificar cundo declaremos nuestra clase.
Params: Datos que pasaremos al comenzar la tarea
Progress: Parmetros que necesitaremos para actualizar la Interfaz
Grafica.
65

Result: Dato que devolveremos una vez terminada la tarea.
En el siguiente cdigo se presenta la estructura bsica de un AsyncTask.
public class MiTarea extends AsyncTask<Params, Progress, Result> {
}
Para poder actualizar la interfaz grafica del View, dentro de cada ciclo del
AsyncTask nos valemos de los siguientes mtodos:
doInBackground(): Este mtodo ser el encargado de realizar la tarea
en segundo plano, por lo que se ejecuta en otro hilo, en este mtodo
no podremos modificar la interfaz grafica de la aplicacin. Para
modificar la interfaz graficausaremos los tres mtodos siguientes.
protected Result doInBackground(Params... p) {
}
onPreExecute(): Este mtodo se ejecutar antes de doInBackground,
por lo que podremos modificar la interfaz para indicar el comienzo de
la tarea.
protected void onPreExecute() {
}
onProgressUpdate(): Este mtodo permitir actualizar la interfaz
mientras se est ejecuta la tarea asncrona. Para ello, desde el mtodo
doInBackground() deberemos llamar al mtodo publishProgress() y
pasarle los parmetros.
protected void onProgressUpdate (Progress... values){
}
onPostExecute(): Se ejecutar cuando finalice nuestra tarea asncrona
o tras la finalizacin del mtodo doInBackground().
protected void onPostExecute (Result result){
}
Finalmente para actualizar el View dentro del mtodo onProgressUpdate()
debemos valernos del mtodo invalidate().
3.3.3 Reproduccin de sonido [31]
Para la reproduccin de sonido, existe la librera MediaPlayer dentro del paquete
de android.media, el cual recibe como parmetro el contexto de ejecucin y el
identificador del recurso a reproducir, como se pude apreciar en el siguiente
ejemplo:
MediaPlayermp = MediaPlayer.create(context, identificador_recurso);
mp.start();
66

Para la reproduccin del sonido se invoca al mtodo start() y para detener la
reproduccin al mtodo stop().
3.3.4 Desarrollo Html5 [23]
El desarrollo integral del mundo elctrico y el marco central del mundo verde se
utilizoHTML5, CSS3 yJavaScript, para posteriormente desplegarladentro de un
WebView en Android. Para facilitar el desarrollo web se encontr una
herramienta llamada SenchaAnimator, que nos permite realizar animacin y
poder exportarlos aHTML5, CSS3 yJavaScript,obteniendo una aplicacin
hbrida, a continuacin se proceder a detallar la herramienta SenchaAnimator.
SenchaAnimator es un software para Mac, Windows yGNU/Linux, que permite
trabajar en una lnea de tiempo y realizar animaciones, sin tener que escribir
cdigo directamente, pero en caso de necesitarlo da la facilidad de incluirlo.
Con SenchaAnimator, se puede animar texto e imgenes con transiciones suaves
y profesionales, botones de diseo con degradados y un control completo de la
lnea de tiempo.El producto desarrollado es compatible con todos los estndares
web y siguiendo conceptos de desarrollo muy parecidos a los de Flash.
Caractersticas:
El desarrollo de la animacin es limpio y legible
Los usuarios tienen un control completo sobre la salida HTML5.
Produce proyectos que son compatibles con cualquier red mvil, as
como ORMMA
13
que es un estndar de la publicidad en redes mviles.
Obtener en tiempo real informacin visual y exportar el producto final
sin escribir una sola lnea de cdigo.
Crea proyectos que funcionan en todos los navegadores modernos que
soporten CSS3.
Optimiza el cdigopara los dispositivos mviles como Android 2.3+,
Apple iOS 4+, BlackBerry, etc.
Es perfecto para juegos simples y animaciones respaldas por
JavaScript.
A continuacin se proceder a detallar la instalacin y la forma de utilizar esta
herramienta para la creacin de animaciones, sin ms prembulo se detallara la
instalacin de SenchaAnimator en Windows 7 Ultimate.

13
ORMMA: Contiene un conjunto comn de normas para la publicacin de anuncios enriquecidos[24].
67

1. Nos descargamos la herramienta del sitio web de
Senchahttp://www.sencha.com/products/animator/download/, es necesario
registrarse para poder utilizar la herramienta por 30 das, al momento de
redactar, la versin de SenchaAnimator ltima es 1.3 y el costo es de $99
dlares.

I lust racin 37 Sit io web de descar ga de SenchaAnimator
2. Una vez descargado procedemos a la instalacin, damos doble clic sobre el
archivo descargado, seleccionamos el idioma de instalacin y damos clic en
siguiente.

I lust racin 38 I nst alacin de SenchaAnimator
68

3. Escogemos el directorio de instalacin y damos clic en siguiente.

I lust racin 39 Director io de instalacin de SenchaAnimator
4. Empezara el proceso de instalacin, una vez terminada la instalacin damos
clic en terminar.

I lust racin 40 I nst alacin ter minada de SenchaAnimator

69

5. Procedemos a iniciarSenchaAnimator, como se menciono anteriormente
parapoder utilizar los 30 das de prueba debemos crear un usuario en la
pgina principal de SenchaAnimator, para el cual ingresamos un nombre de
usuario, contrasea, correo electrnico, y aceptamos las condiciones de
licencia.
6. Ingresamos el usuario y contrasea creada en el paso anterior para la poder
utilizar la aplicacin, se nos visualizael entorno de trabajo de
SenchaAnimator.

I lust racin 41 Pantalla pr incipal de SenchaAnimator
3.3.4.1 Creacin de una animacin en SenchaAnimator
A continuacin se dar una introduccin de cmo utilizar esta herramienta para
crear y exportar la animacina HTML5, CSS3 y JavaScript.
1. Primero debemos crear un nuevo proyecto, para esto nos dirigimos al
MenFile > New Project, se nos visualizara la ventana deconfiguracindel
nuevo proyecto.Para esto escogemos la dimensin del proyecto y agregamos
soporte para Android 2.x, damos clic en Create.

I lust racin 42 Configuracin del nue vo Proyecto de Android
70

2. Guardamos el nuevo proyecto creado para eso nos dirigimos al Men File
>SaveProject,
3. Escogemos el directorio en donde se almacenarel proyecto y los archivos
adjuntos, le asignamos un nombre al proyecto y damos clic en Save, es
recomendable guardar el proyecto frecuentemente.
4. Para agregar nuevos elementos al proyecto tenemos en la parte superior
izquierda un panel en donde podemos escoger un cuadrado, circunferencia,
video, imagen, texto, audio e incrustar cdigo HTML.

I lust racin 43 Panel de objetos de SenchaAnimator
5. En la parte superior derecha tenemos un panel en donde podemos modificar
la propiedades de cada uno de los objetos, entre las cuales tenemos
dimensiones, transformaciones, fondos, bordes, traslaciones, etc.

I lust racin 44 Panel de propiedades de Sencha Animator
71

6. En la parte superior tenemos un panel de tiempo, donde podemos agregar
nuevos frames, lo que nos permite realizar las transacciones, animaciones o
modificaciones de objetos utilizando los frames segn la lnea de tiempo.

I lust racin 45 Panel lnea de t iempo de SenchaAnimator
7. En la parte central tenemos nuestro espacio de trabajo. Para agregar un nuevo
objeto solo debemos arrastrar del panel de objetos al espacio de trabajo,
podemos agregar varios objetos en el mismo espacio y realizar las
modificaciones creando o modificando los frames, teniendo una visualizacin
previa del proyecto.
I
I lust racin 46 Espacio de trabajo de SenchaAnimator
8. En la parte inferior tenemos cada una de las escenas creadas en nuestro
proyecto.Una escena es un parte del proyecto, por consecuente un proyecto
est compuesto de varias escenas.

I lust racin 47 Panel de escenas de SenchaAnimator
9. Por ltimo, tenemos el panel de control de la lnea de tiempo, en el cual
nosotros podemos controlar el tiempo yobtener una pre- visualizacin del
proyecto.

I lust racin 48 Panel de control de t iempo de SenchaAnimator
72

CAPTULO 4

73

4 IMPLEMENTACIN, DOCUMENTACIN Y PRUEBAS
4.1 Implementacin y seleccin de los mdulos de aprendizaje.
Se seleccionaronel mundo elctrico y el mundo verde para el desarrollo de la
aplicacin para dispositivos mviles, el mundo elctrico se desarrollpor
completo utilizando tecnologa web, es decir, solo se emplepara el desarrollo
HTML5, CSS3 y JavaScript, el resultado no fue el esperado por el equipo de
Pequeas y Pequeos Cientficos.El principal inconvenientees que el desarrollo
multimedia de movimientosno soporta cambios de imgenes de formafluida
como se esperaba que tuvieran los personajes de la aplicacin, aqu es donde
podemos apreciar las transiciones o cambios de imgenes cuando trabajamos en
tiempos de milisegundos. Esto se genera porque la animacin no se ejecuta
directamente en la mquina virtual de AndroidDalvik, produciendo un mayor
consumo de recursos al tener que primero renderizarHTML5 y CSS3 e
interpretar el cdigo JavaScript por cada ejecucin, por consiguiente es ms
costoso que ejecutar una aplicacin nativa que ya estpreviamente compilada
dentro de los archivos .dex. En las siguientes ilustracionescapturadas cada
200msse puede apreciar la transicin del personajeen el mundo elctrico durante
un lapso de 600ms, obteniendo como resultado la evidente falta de fluidez en sus
movimientos.

I lust racin 49Entrada de la Doctora Atmica en el Mundo Elct r ico en
200ms.

400ms.
74

600ms.
Sin embargo, los dispositivos mviles tanto en hardware como software se estn
renovando continuamente, es decir, los nuevos dispositivos mviles ya cuentan
con mayores recursos de hardware y nuevas caractersticas implementadas en
software. Entre estas nuevas caractersticas se puede resaltar que las nuevas
versiones de Android y IOS ya no integran soporte para flash [33], consecuente
estn optando por HTML5 para la creacin de animaciones y
multimedia,resultando que esta brecha de compatibilidad entreHTML5 y el
consumo de recursos se est dejando al margen. Consecuentemente,
HTML5sigue en proceso de desarrollo, implementndose nuevas funciones y
caractersticas. Por consiguiente,no se puede dejar de lado la utilizacin de
HTML5para la creacin de aplicaciones mviles.
Con lo antes expuesto,en el desarrollo del mundo verde se optpor la
implementacin de aplicaciones hbridas potenciando as las dos tecnologas. En
consecuencia, se diferenciarondos espacios de trabajo, en el primero que
corresponde alpanel central, se utilizcdigo HTML5, CSS3 y JavaScript para la
visualizacin del tema y el segundo espacio de trabajo que es la animacin de los
personajes, fondo, mens y reproduccin de sonido se emple tecnologa nativa
Android. El resultado fue satisfactoriamente aprobado por el equipo de Pequeas
y Pequeos Cientficos. A continuacin se pueden apreciar ilustraciones que se
tomaron cada 200ms por 600ms obteniendo como resultado:

I lust racin 52 Entrada del rbol Calipto en el Mundo Verde en 200ms
75

I lust racin 53Entrada del rbol Calipto en el Mundo Verde en 400ms

I lust racin 54Entrada del rbol Calipto en el Mundo Verde en 600ms
Cabe recalcar que el desarrollo del mundo verde fue completamente
parametrizado, por lo que en un futuro desarrollo del mundo elctrico, magntico
y digital se pueden reutilizar las clases previamente desarrolladas para minimizar,
agilizar y optimizar el tiempo de desarrollo.
4.2 Desarrollo de pruebas con los dispositivos mviles en el laboratorio
Las pruebas realizadas en el laboratorio cumplieron con los requerimientos
funcionales y no funcionales antes expuestos, entre estas podemos mencionar que
se realizpruebas con los siguientestablets:
Tablet Coby
Memoria: 8Gb
Pantalla: LCD 10.1 pulgadas.
Procesador: 1Ghz (Corex A8)
Memoria RAM: 1GB.
Sistema Operativo: Android 4.0.2 (IceCreamSandwich)
76

I lust racin 55 Disposit ivo Mvil de Pr ueba Coby.
Tablet SamsungGalaxyTab 2.
Memoria: 4 Gb.
Procesador: Dual-Core 1 Ghz
Memoria RAM: 1 GB.
Sistema Operativo: Android 4.0.2 (Ice CreamSandwich)

I lust racin 56 Disposit ivo Mvil de Pr ueba Samsung GalaxyTab 2.
Tablet - Asus
Memoria: 16 GB.
Procesador: Dual-Core 2.1 Ghz
Memoria RAM: 1GB.
Sistema Operativo: Android 3.2 (HoneyComb).
77

I lust racin 57 Disposit ivo Mvil de Pr ueba Asus TF101
Cabe mencionar que los tablets en donde se realizaronlas pruebas de laboratorio
fueron proporcionadospor la Universidad Politcnica Salesiana.
4.3 Desarrollo de pruebas con nios y nias.
El desarrollo de pruebas con los nios y nias fueron realizadas con los
estudiantes de la Escuela Carlos Crespi y Francisca Dvila, obteniendo como
resultado una satisfactoria acogida por los nios y nias, en donde mostraron un
mayor inters en la presentacin del curso Pequeas y Pequeos Cientficos.Para
esto se realizuna encuesta a 18 nios y nias. Esta encuesta se ha adjuntado en
el Anexo 2.
A partir de la encuesta realizada se obtuvo las siguientes grficas estadsticas.

I lust racin 58Resultado de la pregunta Cmo fue la exper iencia de
ut il izacin de los t ablet s para el aprendizaje mult imedia del mundo
verde?

0
20
40
60
80
Excelente Bueno Regular Malo
78

I lust racin 59 Respuesta a la pregunta. Aument el grado de inters
de aprendizaje ut il izando los t ablet s?

I lust racin 60 Respuesta a la pregunta. La ut ilizacin de la
aplicacin del mundo verde en los t ablet s fue?

Como se puede apreciar en las estadsticas, aument notablemente el inters de
aprendizaje del mundo verde utilizando los tablets, ya que el diseo empleado
en la aplicacin esta desarrollado para nios y nias de 8 aos en adelante.
Finalmente, presentamos algunas ilustraciones en la que los nios y nias estn
utilizando las tablets con el aplicativo mvil del mundo verde.

Si
No
0
20
40
60
80
100
Dificil Normal Facil
79

I lust racin 61 Pr uebas con Nias de la Escuela "Francisca Dvila".

I lust racin 62 Pr uebas con las Nias e I nstr uctores.

80

I lust racin 63 Pr ueba con un est udiante de la Escuela "Car los Crespi"
con lat ablet COBY.

I lust racin 64 Pr uebas con Nios de la Escuela "Car los Crespi".

81

I lust racin 65 Pr ueba con un est udiante de la Escuela Car los Crespi
con la t ablet Samsung GalaxyTab 2.
4.4 Documentacin.
Se proceder a detallar cules son los pasos necesarios para que un usuario
pueda descargarse la aplicacin desde la tienda de Google Play, instalarlo en el
dispositivo y por ltimo, se indicar el modo de utilizar la aplicacin del Mundo
Verde, sin ms prembulo se proceder a detallar el manual de Usuario.
4.4.1 Descarga e Instalacin de la aplicacin.
Primeramente debemos descargar la aplicacin desde la tienda de
Google Play, para ello nos dirigimos al men de aplicaciones e
ingresamos a nuestro gestor de descargas, en este caso utilizaremos el
Play Store.

I lust racin 66 Gestor de descar gas de aplicacionesPlay St ore [35].

82

En el gestor de descargas introducimos el nombre de la
aplicacin,ingresamos el texto PequeCiencia. Se desplegarn todas
las aplicaciones que coincidan con la bsqueda, en este caso
escogeremos la primera coincidencia. Seleccionamos la aplicacin
mundo verde como se muestra en la ilustracin 67.

I lust racin 67 Bsqueda de la aplicacin en Play Store

Posteriormente se nos presenta una descripcin de la aplicacin
Mundo Verde, como se muestra en la ilustracin 68, presionamos la
opcin Instalar.

I lust racin 68 Descr ipcin de la Aplicacin del Mundo Verde
83

Procedemos a Aceptar y Descargar la aplicacin, cabe recalcar que no
se necesita ningn tipo de permisos adicionales.

I lust racin 69 Aceptar y Descar gar la aplicacin del Mundo Verde
Una vez completada la descarga de la aplicacin, se proceder a
instalar automticamente en el dispositivo, finalmente presionamos la
opcin Abrir.

I lust racin 70 I nst alacin completa de la aplicacin Mundo Verde

84

4.4.2 Manual de Usuario
Una vez instalada, nos dirigimos al men de aplicaciones y
presionamos en el icono de la aplicacin delMundo Verde, el icono
se muestra en la ilustracin 71.

I lust racin 71 Icono de la Aplicacin del Mundo Verde.
Se nos presenta el men principal, el cual est compuesto por cuatro
temas como se muestra en la ilustracin 72, presionamos el tema de
aprendizaje a tratar:

I lust racin 72 Men Pr incipal del Mundo Verde
Se nos presenta los subtemas, si deseamos regresar al men principal
presionamos la opcin mundo verde, caso contrario presionamos el
subtema a estudiar.

I lust racin 73 Men de subtemas del Mundo Verde.
85

Finalmente, se nos presentan los literales del subtema seleccionado en
el paso anterior, para regresar al men de subtemas presionamos en la
opcin atrs, caso contrario presionamos ordenadamente cada uno de
los literales.

I lust racin 74 Tramos del Mundo Verde
4.5 Publicacin de la aplicacin en la tienda de Google.
Luego del desarrollo de la aplicacin del Mundo Verde, el siguiente paso es la
publicacin en la tienda de Google Play.Todo este proceso se realizaringresando
informacin de la Universidad Politcnica Salesiana, con el objetivo de que este
registro sirva para que futuros proyectos desarrollados dentro de la universidad se
publiquen. A continuacin se detallan los pasos para la creacin de una cuenta
desarrollador en Google:
1. Debemos tener creada una cuenta en Gmail, por lo que procederemos a
crearla, para eso nos dirigimos a la siguiente direccin web
https://accounts.google.com/SignUp?service=mail&continue=https%3A%2F
%2Fmail.google.com%2Fmail%2F&ltmpl=default y seguimos estos pasos:
2. Ingresamos los datos personales para la creacin de la cuenta, como se puede
apreciar en la ilustracin 75.
86

I lust racin 75 Cr eacin de una cuenta en Gmail.
3. Aceptamos las condiciones de servicio y las polticas de privacidad de
Google y procedemos a dar clic en siguiente paso.

I lust racin 76 Condiciones de Ser vicios y Polt icas de Segur idad de
Google.
4. Se nos presenta una pantalla de bienvenida a Gmail, damos clic en Ir a
Gmail.
87

I lust racin 77 Pantalla de Bienvenida a Gmail.
5. Finalmente se visualizarla bandeja de entrada de la cuenta creada.
Posteriormente creamos un perfil de desarrollador en Google Play, para eso nos
dirigimos a la siguiente direccin web
https://play.google.com/apps/publish/signup y seguimos los siguientes pasos:
1. Creamos un perfil de desarrollador, para ello ingresamos los datos bsicos
del desarrollador, como se muestra en la ilustracin 78, damos clic en Seguir.

I lust racin 78 Cr eacin del per fil desar rollador en Google Play.

88

2. Leemos y aceptamos el acuerdo de distribucin para desarrolladores de
Google, damos clic en Acepto y Continuar.

I lust racin 79 Acuerdo de distr ibucin para desarrolladores
3. Por ltimo, debemos pagar la cuota de registro, para ello especificamos
nuestro nombre, direccin de facturacin y la tarjeta de crdito para el pago
de 25 dlares, como se muestra en la ilustracin 80.

I lust racin 80 Pago de cuota de registro.
89

Luego de crear la cuenta desarrollador se proceder a publicar la aplicacin
enGoogle Play, esta aplicacinse podr descargar gratuitamente desde cualquier
parte del mundo, para esto nos dirigimos a la siguiente direccin web
https://play.google.com/apps/publish. Acontinuacinse detallan los pasos:
1. Se nos presentar el panel de administracin de aplicaciones, el cual nos
informa de todas las aplicaciones publicadas. Para subir una nueva
aplicacin damos clic en Aadir nueva aplicacin.

I lust racin 81 Panel de administ racin de publicaciones en Android.
2. Se nos presenta una ventana, en donde seleccionamos el idioma de la
publicacin, nombre de la aplicacin y damos clic en subir APK.

I lust racin 82 Ventana para subir el proyecto de Android.
3. Escogemos la aplicacin empaquetada que se subir al servidor, con
extensin .apk.

I lust racin 83 Seleccin del .apk
90

4. La aplicacin se empezara subir al servidor de Google, el tiempo de espera
depende del tamao de la aplicacin.

I lust racin 84 Cuadro de progreso de subir la aplicacin al ser vidor.
5. Posteriormente se nos presenta la ventana con la informacin de la aplicacin
subida, como la versin, dispositivos admitidos y dispositivos excluidos.

I lust racin 85 I nfor macin de la aplicacin subida al ser vidor.
6. A continuacin debemos especificar la informacin del proyecto, por lo que
debemos dar clic en Entrada en Play Store, en donde podemos especificar
con mayor detalle las caractersticas de la aplicacin, con los siguientes
campos:
INFORMACIN DEL PRODUCTO
a. Ttulo.
b. Descripcin.
c. Texto Promocional (opcional).
d. Cambios Recientes (opcional).
RECURSOS GRFICOS
a. Capturas de pantalla.
b. Icono de la aplicacin.
91

c. Grfico de las Caractersticas (opcional).
d. Grfico Promocional (opcional).
e. Video Promocional (opcional).
CATEGORIZACIN
a. Tipo de la aplicacin.
b. Categora.
c. Clasificacin de contenido.
DETALLES DEL CONTACTO.
a. Sitio web.
b. Correo Electrnico.
c. Telfono (opcional).
En las siguientes ilustraciones se puede apreciar la configuracin antes
mencionada para el proyecto del Mundo Verde de Pequeas y Pequeos
Cientficos.

I lust racin 86Especificaciones de la I nfor macin del Mundo Verde.

92

I lust racin 87 Especificaciones Graficas del Mundo Verde.

I lust racin 88 Categor izacin y detalle de contacto del Mundo Verde.
93

Para mayor detalle de como especificar el producto dirigirse al sitio web de
Soporte de Google (https://support.google.com/googleplay/android-
developer/support/bin/answer.py?hl=es&answer=1078870), posteriormente
damos clic en Guardar.
7. Finalmente procedemos a especificar el precio de la aplicacin y en qu
pases se distribuir. Esta aplicacin ser distribuida en todo el mundo de
forma gratuita por lo que no necesitamos ninguna configuracin adicional y
damos clic en Guardar.

I lust racin 89 Especificacin del precio y dist r ibucin del Mundo
Verde.
8. Al concluir visualizaremos la aplicacin configurada y publicada en la tienda
de GooglePlay.
94

I lust racin 90 Presentacin de la aplicacin en Google Play del
Mundo Verde.
Una caracterstica adicional que nos brinda Google Playes que podemos
visualizar cuadros estadsticos de descargas de la aplicacin.
95

5 CONCLUSIONES
Se ha obtenido un gran conocimiento sobre desarrollo en dispositivos mviles
basados en Android, as como su arquitectura, caractersticas, componentes y
funcionamiento. Cabe resaltar que el desarrollo en Android es muy parecido al
desarrollo en lenguaje Java, ya que incluye algunos APIs de este lenguaje, por
ello el aprendizaje y el desarrollo se realiz de forma ptima.
Dentro del desarrollo del presente proyecto se investigaron varios procesos de
conversin de archivos deformato en flash (SWF) a imgenes animadas (GIF), el
principal problema es que el archivo generado era 7 veces mayor que el original.
De igual forma, se prob realizar conversiones a videos y el resultado fue similar,
teniendo archivos 5 veces mayores que el original. Por ltimo, se realizaron
conversiones a formato HTML5, siendo la que mejor resultados dio, para ello se
utiliz herramientas de conversin como Swiffy de Google que aun esta en
versin de prueba y retorna buenos resultados en tamao de espacio en disco,
pero con informacin encriptada, por lo que no se puede modificar. En
consecuencia, ninguna de las tcnicas antes expuestas cumpla con los
requerimientos mnimos para la ejecucin de la aplicacin en los dispositivos
mviles, ya que los mismos tienen menor capacidad en hardware.
Una de las principales razones por la que se desarroll la aplicacin en Android,
es su alto nivel de utilizacin en plataformas celulares y tablets, en consecuencia
se permite que se pueda distribuir, modificar y estudiar sin limitaciones, ya que
es un sistema completamente libre [14] y a la vez el desarrollador puede decidir
sobre su aplicacin, si desea publicarla comercialmente o gratuitamente y los
lugares en donde se distribuir.
Se realiz una completa investigacin de desarrollo para dispositivos mviles,
encontrndose que se pueden implementaraplicaciones utilizando diferentes
tecnologas web como HTML5, CSS3 y JavaScript y con ayuda de frameworks
como JQuery Mobile, Sencha,PhoneGap, etc. Estas tecnologas se tomaron como
primer punto de partida, con el objetivo de facilitar el desarrollo de aplicaciones
y hacerlas multiplataforma, por ello se decidi desarrollar el mdulo del mundo
elctrico en esta tecnologa, pero durante su desarrollo se produjeron grandes
limitaciones, especficamente al momento de representar la accin de
movimiento de los personajes, lo cual no cumpli con las expectativas del equipo
de Pequeas y Pequeos Cientficos. En virtud de ello, esta tecnologa aun sigue
en un proceso de desarrollo, por lo que los dispositivos actuales no contienen las
caractersticas necesarias para una perfecta ejecucin de las mismas ni en
hardware ni en software, pero esta brecha se est reduciendo por motivos de
avance y actualizaciones tecnolgicas.
Por lo antes expuesto, se incursion en otra lnea de desarrollo, optando por un
desarrollo hbrido para el mdulo del Mundo Verde, que combinaba cdigo
Android con HTML5. Durante este proceso se pudo observar que la
96

libreraOpen-GL solo puede trabajar con imgenes con un tamao mximo de
2048 x 2048 pixeles, por lo que en algunos casos era necesario redimensionar las
mismas. Dentro de este proceso de desarrollo se implementaron clases
parametrizables, para que en un futuro se pueda agregar nuevas funcionalidades
o implementar los mundos elctrico, magntico y digital.
En el desarrollo se presentaron varios problemas entre los que podemos
mencionar el manejo de tiempos, por lo que se emplearon hilos asncronos
(AsyncTask), el problema al utilizar los AsyncTask es que se puede utilizar un
mximo de cinco AsyncTask ejecutadas en paralelo por aplicacin y con un
Sistema Operativo Android 3.0 o superior. Por ello, se modelaron hilos
asncronos para manejar varios procesos, como por ejemplo, se utiliz un solo
hilo asncrono para el manejo de los personajes del rbol Calipto y el cientfico
Dr. Voltio.
Con el Mundo Verde se realizaron pruebas en tablets de 10.6 ,10 y 7 pulgadas
con versiones de Android 4.0.2 y 3.0.2 respectivamente, los cuales fueron
facilitados por la Universidad Politcnica Salesiana, en donde se validaron los
diferentes requerimientos funcionales y no funcionales conjuntamente con el
equipo de Pequeas y Pequeos Cientficos de la Universidad Politcnica
Salesiana. En cuanto al proceso de pruebas, estas se realizaron con nios y nias
de las Escuelas Carlos Crespi y Francisca Dvila, en donde se observ el
gran entusiasmo y empeo en el aprendizaje de la ciencia y la tecnologa del
proyecto desarrollado.
Por ltimo se detallaron los pasos para crear una cuenta de desarrollador en
Google Play, con el objetivo de publicar la aplicacin del mundo verde y futuras
aplicaciones que sean desarrolladas dentro de la Universidad Politcnica
Salesiana y as promover el desarrollo de aplicaciones mviles.

97

6 RECOMENDACIONES
Seguir con el proceso de investigacin de desarrollo para dispositivos mviles
utilizando tecnologas web, ya que empresas como Google y Apple estn
apostando por HTML5, CSS3 y JavaScript para la realizacin multimedia o de
animaciones, entre estos procesos se puede destacar el uso de frameworks como
JQuery Mobile, Sencha, Titanium, Phonegap, etc., que facilitan notablemente el
desarrollo de aplicaciones mviles, agregando una ventaja ms que es la de
contar con aplicaciones multiplataforma.
Seguir desarrollando aplicaciones mviles dentro del CIIDI (Centro de
Investigacin, Desarrollo e Innovacin en Ingenieras de la UPS) para diferentes
campos aplicativos como la educacin, medicina, etc. y publicarlos dentro de la
cuenta de la Universidad Politcnica Salesiana, fomentando la innovacin y
desarrollo de aplicaciones mviles.

7 TRABAJOS FUTUROS
Seguir con el proceso de desarrollo con los mundos elctrico, magntico y
digital, reutilizando cdigo ya desarrollado dentro de la tesis, ya que como se
mencion anteriormente, se desarroll la aplicacin de forma parametrizada, para
que se pueda reutilizar el cdigo y as facilitar el desarrollo e implementacin en
plataformas como IOS y Windows 8.

98

8 BIBLIOGRAFA

[1] Jimmy Rosario, La Tecnologa de la Informacin y la Comunicacin
(TIC). Su uso como Herramienta para el Fortalecimiento y el Desarrollo de la
Educacin Virtual, fecha de recuperacin 20 de agosto de 2012,
http://www.cibersociedad.net/archivo/articulo.php?art=218
[2] TouchTerms.com, fecha de recuperacin 20 de agosto de 2012,
Touchscreen: http://www.techterms.com/definition/touchscreen
[3] Ing. Elena Durn, Ing. Diego Granja, Informe de Resultados de Proyecto
de Vinculacin con la Sociedad Pequeas y Pequeos Cientficos
presentado dentro de la Universidad Politcnica Salesiana, fecha de
recuperacin 06 de septiembre de 2012
[4] Jos Ramn Gmez, Las Tic en la Educacin, fecha de recuperacin 17 de
noviembre de 2012, http://boj.pntic.mec.es/jgomez46/ticedu.htm
[5] LucianArmasu, IDC AndroidJump 68.1% global market share, iOS slips to
16.9%, fecha de recuperacin 17 de noviembre de 2012,
http://www.androidauthority.com/idc-android-jumps-to-68-1-global- market-
share- ios-slips-16-9-106446/
[6] Miguel AngelAlvarez, HTML5 novedades ms significativas, fecha de
recuperacin 07 de agosto de 2012,
http://www.desarrolloweb.com/articulos/que-es-html5.html
[7]Rodrigo Meja Armijo y Diego Escares Venegas, Desarrollo HTML5 para
iPad y tabletas, fecha de recuperacin 07 de agosto del 2012,
http://habitatweb.mx/desarrollo- html5-para- ipad-y-tabletas
[8] Hctor Hiram Guedea Noriega, Introduccin a HTML5, fecha de
recuperacin 07 de agosto de 2012 http://hectorguedea.com/introduccion-a-
html5
[9] Gran Angular Blog, Conoce (y prueba) las caractersticas de HTML5,
fecha de recuperacin: 07 de agosto 2012, http://www.gran-
angular.net/conoce-prueba-caracteristicas- html5-presentacion-practica-
tecnicas-css3/2010/04/30/
[10] Sergio Lujn Mora, Talleres sobre HTML5, WCAG 2.0 y web mvil del
W3C, fecha de recuperacin 07 de agosto de 2012
http://accesibilidadenlaweb.blogspot.com/2012/05/talleres-sobre- html5-wcag-
20-y-web.html
[11] W3Schools, HTML5 Introduction, fecha de recuperacin 07 de agosto de
2012 http://www.w3schools.com/html5/html5_intro.asp
[12] jQueryFoundation, BuildingPhoneGapappswithjQuery Mobile, fecha
de recuperacin 07 de agosto de2012
http://jquerymobile.com/test/docs/pages/phonegap.html
[13] Adobe Systems Inc. PhoneGap, fecha de recuperacin 07 de agosto de
2012 http://phonegap.com/

99

[14] Jaime Aranaz Tudela, UNIVERSIDAD CARLOS III DE MADRID
ESCUELA POLITCNICA SUPERIOR, DESARROLLO DE
APLICACIONES PARA DISPOSITIVOS MVILES SOBRE LA
PLATAFORMA ANDROID DE GOOGLE, Enero de 2009, fecha de
recuperacin 23 de agosto de 2012, http://e-
archivo.uc3m.es:8080/bitstream/10016/6506/1/PFC_Jaime_Aranaz_Tudela_2
010116132629.pdf
[15] Alberto Biches, Desarrollo de aplicaciones mviles multiplataforma,
fecha de recuperacin 23 de agosto del 2012
http://albertovilches.com/aplicaciones- moviles-web- vs-nativas- vs-
multiplataforma
[16] Dosisgeek, Blog Geek, Razones para usar Android,
http://www.tudosisgeek.com/10-razones-para-usar-android-ventajas/
[17] HamzaWaqas, Phonegap vs. NativeComparisonbasedoverdepth, fecha
de recuperacin 23 de agosto del 2012,
http://informationastronaut.blogspot.com/2012/05/phonegap-vs- native-
comparison-based.html
[18] Guillermo Latorre, Los 4 mejores editores de animaciones en HTML5 y
CSS3, fecha de recuperacin 17 de noviembre de 2012,
http://hachemuda.com/2012/02/los-4-mejores-editores-de-animaciones-en-
html5- y-css3/
[19] ALEGSA, DICCIONARIO DE INFORMTICA, fecha de recuperacin
17 de noviembre de 2012, http://www.alegsa.com.ar/Dic/middleware.php
[20]Luis Rey Lara, fecha de recuperacin 17 de noviembre de 2012,
http://luisreylara.com/2011/11/05/activity-en-android/
[21] AndroidDevelopers, PlatformVersions, fecha de recuperacin 17 de
noviembre del 2012
http://developer.android.com/about/dashboards/index.html
[22] CeluActivo, Introduccin a la programacin en Android, fecha de
recuperacin 17 de noviembre de 2012,
http://www.celuactivo.com/2012/08/27/introduccion-a-la-programacion-en-
android/
[23]Sencha, SenchaAnimator, fecha de recuperacin 06 de septiembre de
2012, http://www.sencha.com/products/animator
[24] Orrma.org, Open Rich Media Mobile Advertising, fecha de recuperacin
06 de septiembre de 2012, http://code.google.com/p/ormma/
[25] Nekotek,Stakeholders, fecha de recuperacin 06 de septiembre de 2012,
http://www.nekotek.es/blog/2010/12/stakeholders/.
[26] Ing. Natalia Valeria Andriano, Comparacin del Proceso de Elicitacin
de Requerimientos en el desarrollo de Software a Medida y Empaquetado.
Propuesta de mtricas para la elicitacin Universidad Blas Pascal
Universidad Nacional de la Plata, fecha de recuperacin 06 de septiembre de
2012
http://postgrado.info.unlp.edu.ar/Carreras/Magisters/Ingenieria_de_Software/
Tesis/Andriano_Natalia.pdf,
100

[27]Miguel Angel, Androides y Pinginos, fecha de recuperacin 06 de
septiembre de 2012, http://miguelangellv.wordpress.com/2011/01/31/creando-
tareas-asincronas-en-android-con-asynctask/
[28] Blog OpenAlfa, Cmo dibujar grficos en Android, fecha de
recuperacin 06 de septiembre, http://blog.openalfa.com/como-dibujar-
graficos-en-android/
[29] Drawable Android. Programacin Aplicaciones para mviles.
Universidad Politcnica de Valencia, Drawable fecha de recuperacin 06 de
septiembre de 2012, http://www.androidcurso.com/index.php/recursos-
didacticos/tutoriales-android/35-unidad-4-graficos-en-android/136-drawable
[30] AndroidDevelopers, BitmapFactory, fecha de recuperacin 17 de
noviembre de 2012,
http://developer.android.com/reference/android/graphics/BitmapFactory.html
[31]AndroidDevelopers, Media Playback, fecha de recuperacin 17 de
noviembre de 2012,
http://developer.android.com/guide/topics/media/mediaplayer.html
[32] ALEGSA, DICCIONARIO DE INFORMTICA, fecha de recuperacin
17 de noviembre de 2012,
http://www.alegsa.com.ar/Dic/motor%20de%20renderizado%20web.php
[33]Alkar, XatakaAndroid, fecha de recuperacin17 de noviembre de 2012,
http://www.xatakandroid.com/aplicaciones-android/adios- flash-para-android-
gracias-por- intentarlo.
[34] Abaestudio, HTML5, el camino que sigue el desarrollo web, fecha de
recuperacin 17 de noviembre de 2012, http://www.abaestudio.com/html5-el-
camino-que-sigue-el-desarrollo-web
[35] ABOUT XDA DEVELOPERS, Google Play Store fecha de recuperacin
03 de noviembre de 2012,http://www.xda-developers.com/android/google-
play-store-pins-not-quite-secure/
[36] Gobierno de Espaa, Formacin en Red, fecha de recuperacin: 07 de
agosto de 2012,
http://formacionprofesorado.educacion.es/index.php/es/materiales/45- html5-
en- la-educacion?start=2

101

ANEXOS

102

9 ANEXOS
9.1 ANEXO 1: CERTIFICADO DE VALIDACIN DE
REQUERIMIENTOS.

103

104

9.2 ANEXO 2: ENCUESTA PRACTICADA A LOS NIOS Y NIAS

DISEO E IMPLEMENTACIN DE UNA APLICACIN PARA
DISPOSITIVOS ANDROID EN EL MARCO DEL PROYECTO
PEQUEAS Y PEQUEOS CIENTFICOS DE LA
UNIVERSIDAD POLITCNICA SALESIANA

ENCUESTA DE UTILIZACION DE TABLETS PARA EL
APRENDIZAJE DEL MUNDO VERDE
1. Cmo fue la experiencia de utilizacin de los tablets para el aprendizaje
multimedia del mundo verde?
a. Excelente
b. Bueno
c. Regular
d. Malo
2. Aument el grado de inters de aprendizaje utilizando los tablets?
a. Si
b. No
3. La utilizacin de la aplicacin del mundo verde en los tabletsfue?
a. Difcil
b. Normal
c. Fcil

Diseño e Implementacion de Una Aplicacion para Dispositivos Android

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Diseño e Implementacion de Una Aplicacion para Dispositivos Android

Hochgeladen von

Copyright:

Verfügbare Formate

UNIVERSIDAD POLITCNICA

Das könnte Ihnen auch gefallen