Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Ups CT002537 PDF
Ups CT002537 PDF
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
Autor:
Diego Fernando Quisi Peralta
Director:
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.
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.
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.
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.
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
1.3
Alcance.................................................................................................................... 14
1.4
Objetivos ................................................................................................................. 14
1.4.1
Objetivos General.............................................................................................. 14
1.4.2
1.5
Experiencias del Proyecto Pequeas y Pequeos Cientficos de la Universidad Politcnica
Salesiana [3]........................................................................................................................ 15
CAPTULO 2 15
2
2.2
2.3
Comparacin de la plataforma de desarrollo Android con HTML 5 para dispositivos
mviles. .............................................................................................................................. 27
2.3.1
2.3.2
2.4
2.4.1
2.4.2
2.4.3
2.4.4
2.4.5
CAPTULO 3 . 39
3
3.1.1
3.1.2
3.1.3
Suposiciones y Dependencias............................................................................. 46
3.1.4
Requerimientos Funcionales............................................................................... 47
3.1.5
3.1.6
Restricciones..................................................................................................... 51
3.1.7
3.1.8
3.2
3.2.1
3.2.2
3.2.3
3.3
3.3.1
3.3.2
AsyncTask [27]................................................................................................. 64
3.3.3
3.3.4
CAPTULO 4 . 67
4
4.2
4.3
4.4
Documentacin. ....................................................................................................... 81
4.4.1
4.4.2
4.5
CONCLUSIONES.......................................................................................................... 95
RECOMENDACIONES................................................................................................. 97
BIBLIOGRAFA............................................................................................................ 98
ANEXOS...................................................................................................................... 102
9.1
9.2
NDICE DE FIGURAS
ILUSTRACIN 1 PROM EDIO DEL NIVEL DE CONOCIMIENTO DE LOS NIOS Y NIAS
RESPECTO A LOS TEMAS A BARCA DOS EN LOS TA LLERES, ANTES Y DESPUS DE LOS
MISMOS.................................................................................................................................................................... 16
ILUSTRACIN 2 INTERS DE LOS NIOS Y NIAS EN LA S CA RRERAS PROFESIONA LES
PREVIO A LOS TA LLERES (PRE-TEST)........................................................................................................ 16
ILUSTRACIN 3 INTERS DE LOS NIOS Y NIAS EN LA S 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 PA DRES DE FAMILIA EN QUE SUS NIOS Y NIAS
PARTICIPEN EN TALLERES DE ESTE TIPO. .............................................................................................. 17
ILUSTRACIN 6 TA LLERES EN EL AULA DE CIENCIA CON LA ESCUELA FRA NCISCA D VILA.
..................................................................................................................................................................................... 18
ILUSTRACIN 7 TA LLERES EN EL AULA DE CIENCIA CON LA ESCUELA CARLOS CRESPI. ....... 18
ILUSTRACIN 8 INAUGURA CIN Y ENTREGA DE DIPLOMAS A 1ER GRUPO DE PEQUEAS Y
PEQUEOS CIENTFICOS. VISITA DE SECRETA RIO DEL SENESCYT, REN RAMREZ. ........ 19
ILUSTRACIN 9 REUNIN CON PADRES DE FAMILIA EN LA ESCUELA CA RLOS CRESPI. .......... 19
ILUSTRACIN 10 COM POSICIN DE HTM L5 [9]............................................................................................... 22
ILUSTRACIN 11 COM PATIBILIDAD DE LOS NA VEGA DORES W EB CON HTM L5 [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
ACTUA LM ENTE [21] ........................................................................................................................................... 27
ILUSTRACIN 15 SITIO W EB DE ORA CLE PARA LA DESCA RGA DEL JDK .......................................... 30
ILUSTRACIN 16 DESCA RGA DEL JDK................................................................................................................ 31
ILUSTRACIN 17 INSTALA CIN DE JDK 7 ......................................................................................................... 31
ILUSTRACIN 18CARA CT ERSTICAS DE INSTA LA CIN DEL JDK .......................................................... 32
ILUSTRACIN 19 ESTADO DE LA INSTA LACIN DEL JDK ......................................................................... 32
ILUSTRACIN 20 SITIO WEB PA RA LA DESCARGA DEL SDK DE A NDROID...................................... 33
ILUSTRACIN 21 INSTALA CIN DEL SDK DE A NDROID ............................................................................ 33
ILUSTRACIN 22 DIRECTORIO DE INSTA LACIN DEL SDK DE ANDROID ......................................... 34
ILUSTRACIN 23 PA QUETES DE INSTA LA CIN DE ANDROID ................................................................. 34
ILUSTRACIN 24 INSTALA CIN DE LAS PLATAFORMAS DISPONIBLES DE A NDROID ................ 35
ILUSTRACIN 25 ADM INISTRA CIN DE DISPOSITIVOS VIRTUALES DE A NDROID ....................... 36
ILUSTRACIN 26 CREACIN DE UN NUEVO DISPOSITIVO VIRTUAL DE ANDROID ....................... 36
ILUSTRACIN 27 CONFIGURA CIN DE UN NUEVO DISPOSITIVO VIRTUA L DE ANDROID......... 37
ILUSTRACIN 28 VISUA LIZA CIN DE LOS DISPOSITIVOS VIRTUA LES ANDROID. ........................ 38
ILUSTRACIN 29 EJECUCIN DEL DISPOSITIVO VIRTUAL ANDROID .................................................. 38
ILUSTRACIN 30 SITIO W EB DE DESCARGA DEL ECLIPSE INDIGO 3.7 ................................................ 39
ILUSTRACIN 31 INSTALA CIN DEL PLUGIN ADT EN ECLIPSE............................................................... 40
ILUSTRACIN 32 A GREGACIN EL REPOSITORIO DE A NDROID ............................................................ 40
ILUSTRACIN 33 SELECCIN E INSTA LACIN DE LOS PAQUETES DE A NDROID .......................... 41
ILUSTRACIN 34 CREACIN DE NUEVO PROYECT O DE A NDROID ....................................................... 42
NDICE DE TABLAS
TABLA 1 TALLERES REALIZADOS POR LOS NIAS Y NIOS EN EL AULA DE PEQ UEAS Y PEQUEOS
CIENTFICOS. .............................................................................................................................................................. 16
TABLA 2 MATRIZ DE LOS STAKEHO LDERS. ..................................................................................................................... 45
10
CAPTULO 1
11
1
1.1
INTRODUCCIN
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 autoinvestigacin 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.
12
Antecedentes
1.2.1
Justificacin
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.
13
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 cua les 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:
1.4
Objetivos
1.4.1
Objetivos General
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 co mo el magnetismo, t ipos de
imanes, electro magnetismo y por ltimo el motor elctrico.
4
Mundo Verde: Representa la generacin de energ a y el medio ambiente impart iendo temas de v ital
importancia co mo la contaminacin, energ as renovables y por ltimo el cu idado del medio amb iente.
5
Permite que med iante 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.
14
1.4.2
1.5
Objetivos Especficos
tipos
de
dispositivos
mviles
Escuela
CARLOS
CRESPI
FRANCISCA
DVILA
CARLOS
CRESPI
FRANCISCA
DVILA
CARLOS
CRESPI
FRANCISCA
DVILA
CARLOS
CRESPI
Cupo
12 nios
12 nias
12 nios
12 nias
12 nios
12 nias
12 nios
Fecha
inicio
Lunes
abril
Lunes
abril
Lunes
abril
Lunes
abril
Lunes
mayo
Lunes
mayo
Lunes
mayo
de Fecha
de
finalizacin
9
9
23
23
7
7
21
de Viernes
abril
de Viernes
abril
de Viernes
mayo
de Viernes
mayo
de Viernes
mayo
de Viernes
mayo
de Viernes
junio
Horario
20 de 15h0016h00
20 de 16h0017h00
4 de 15h0016h00
4 de 16h0017h00
18 de 15h0016h00
18 de 16h0017h00
1 de 15h0016h00
15
FRANCISCA
Lunes 21 de Viernes
16h0012 nias
DVILA
mayo
1 de junio
17h00
Tab la 1 Ta lle res re a lizados por N ia s y N ios e n e l Aula de Peq ue as y
Peque os C ie ntfico s.
Taller 8
Resultados acadmicos.
58%
60%
50%
40%
30%
20%
10%
10%
0%
PRE-TEST
POST-TEST
16
98%
80%
60%
40%
20%
1%
0%
Mucho
Mas o menos
0%
1%
Poco
No contesta
17
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.
18
19
CAPTULO 2
20
2
2.1
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 (HTM L, XM L, 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 co mplemento de una aplicacin que se relaciona con otra, para aportarle una funcin nueva y
generalmente muy especifica.
21
10
22
23
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:
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:
las
24
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:
25
27
2.3.1
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]:
Desventajas
2.3.2
Aplicaciones nativas.
28
Desventajas [22]:
29
2.4
30
31
32
2.4.2
33
34
35
37
I lustrac i n 28 Vis ua lizac i n d e los d ispos itivos virtua les And ro id.
11. En la siguiente pantalla se muestra la ejecucin del dispositivo virtual.
38
2.4.3
39
40
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.
41
42
CAPTULO 3
44
3
3.1
Definicin de Stakeholders12
CARGO
RELEVACIN
(1-5)
5
Director de Tesis
Equipo de Investigacin
Stakeholder es una persona u organizacin que tiene influencia directa, indirectamente o se ve influenciado
por un proceso de desarrollo del software [25].
45
3.1.2
3.1.3
Suposiciones y Dependencias
Conexin a internet.
46
3.1.4
Requerimientos Funcionales
48
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.
49
3.1.5
Requerimientos no Funcionales
Rendimiento
Seguridad
Requisito de conexin.
El sistema no contendr
internet.
ninguna
Fiabilidad
Disponibilidad
Mantenibilidad
Portabilidad
Operabilidad
Interoperabilidad
50
3.1.6
Restricciones
Validacin de requerimientos
Diseo de la aplicacin.
3.2.1
Casos de Uso
51
Iteracin: 1
Minuta/s: 1.0
Nro. Orden: R1
til
Simple
Mediano
Deseable
Complejo
X Muy Complejo
Abstracto
Objetivo: Ensear el cuidado del medio ambiente desde los tabletscon Android
Precondiciones: Ingresar al sistema multimedia del mundo verde
Pos
condiciones:
Curso Normal:
Alte rnativas
52
3.2.2
Principal
+onCreate(savedInstanceState: Bundle)
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 Ve rde.
En el mundo verde se desarrollo una aplicacin hbrida del Mundo Verde.Dentro
del marco el desarrollo nativo est compuesto por las siguientes clases:
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)
53
NinoCientifica
+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
-bitmapCientifica: android.graphics.Bitmap
-bitmapcaraCientifica: android.graphics.Bitmap
+lienzo: NinoCientifica
+vt: java.util.ArrayList
+vtc: java.util.ArrayList
+translacion: boolean
+animacion: Animacion
+t: Tiempo
+cientifica: boolean
+NinoCientifica(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)
Nina
+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
+lienzo: Nina
+vt: java.util.ArrayList
+vtc: java.util.ArrayList
+translacion: boolean
+animacion: Animacion
+t: Tiempo
+Nina(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
Fondo
-bitmap: android.graphics.Bitmap
-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
+animacion: Animacion
+bajar: boolean
+agrandar: boolean
+Fondo(context: android.content.Context, px: int, py: int, pxp: int, pyp: int, w: int, h: int, t: Tiempo)
+draw(canvas: android.graphics.Canvas)
+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)
55
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
-btn2: 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
-btn1: android.widget.ImageButton
-btnMundo: android.widget.ImageButton
+fondo: Fondo
-web: Web
-arbolCientifico: ArbolCientifico
+media: Media
+t: Tiempo
+p: Principal
+Menu2(p: Principal, rl: android.widget.RelativeLayout, fondo: Fondo, web: Web, arbolCientifico: ArbolCientifico, ninoCientifica: NinoCientifica, nina: Nina, t: Tiempo, media: Media)
+setEventos()
+hilo()
Menu3
-btn1: android.widget.ImageButton
-btnMundo: android.widget.ImageButton
+fondo: Fondo
-web: Web
+media: Media
+t: Tiempo
+p: Principal
+Menu3(p: Principal, rl: android.widget.RelativeLayout, fondo: Fondo, web: Web, arbolCientifico: ArbolCientifico, ninoCientifica: NinoCientifica, nina: Nina, t: Tiempo, media: Media)
+setEventos()
+hilo()
Menu4
-btn1: android.widget.ImageButton
-btnMundo: android.widget.ImageButton
+fondo: Fondo
-web: Web
+media: Media
+t: Tiempo
+p: Principal
+Menu4(p: Principal, rl: android.widget.RelativeLayout, fondo: Fondo, web: Web, arbolCientifico: ArbolCientifico, ninoCientifica: NinoCientifica, nina: Nina, t: Tiempo, media: Media)
+setEventos()
+hilo()
56
Problema
-btnA: android.widget.ImageButton
-btnB: android.widget.ImageButton
-btnAtras: android.widget.ImageButton
+fondo: Fondo
-web: Web
-arbolCientifico: ArbolCientifico
-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
-btnA: android.widget.ImageButton
-btnB: android.widget.ImageButton
-btnC: android.widget.ImageButton
-btnAtras: android.widget.ImageButton
+fondo: Fondo
-web: Web
-arbolCientifico: ArbolCientifico
-nina: Nina
-ninoCientifica: NinoCientifica
+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
-btnA: android.widget.ImageButton
-btnB: android.widget.ImageButton
-btnC: android.widget.ImageButton
-btnD: android.widget.ImageButton
-btnE: android.widget.ImageButton
-btnF: android.widget.ImageButton
-btnAtras: android.widget.ImageButton
+fondo: Fondo
-web: Web
-arbolCientifico: ArbolCientifico
-nina: Nina
-ninoCientifica: NinoCientifica
+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
-btnA: android.widget.ImageButton
-btnB: android.widget.ImageButton
-btnC: android.widget.ImageButton
-btnAtras: android.widget.ImageButton
+fondo: Fondo
-web: Web
-arbolCientifico: ArbolCientifico
-nina: Nina
-ninoCientifica: NinoCientifica
+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()
57
Actividad
-btn1: android.widget.ImageButton
-btn2: android.widget.ImageButton
-btn3: android.widget.ImageButton
-btn4: android.widget.ImageButton
-btn5: android.widget.ImageButton
-btnAtras: android.widget.ImageButton
+fondo: Fondo
-web: Web
-ninoCientifica: NinoCientifica
+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
-arbolCientifico: ArbolCientifico
-ninoCientifica: NinoCientifica
-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
+animacion: Animacion
+onCreate(savedInstanceState: Bundle)
+resetPersonajes()
+setEscena(escena: int)
#onResume()
#onPause()
58
Componentes:
Componentes
+tiempo
Fondo
1
+web 1
Tiempo
1
+animacion
+fondo 1
Web
Animacion
Personajes
Personajes
+animacion
ArbolCientifico
1
1
+animacion
Nina
1
Animacion
1
+animacion
NinoCientifica
Animacion
Animacion
59
Mens
Menus
Menu1
+menu2
+menu1
+menu
1
+menu
Menu
Menu2
+menu3
+menu
Menu3
1
+menu
+menu4
Menu4
Actividades
Problema
+problema
Media
Animacion
Actividades
1
+context
1
+media
+context
+animacion
Principal
+context
1 +context
1
+necesita
Cuidando
+context
+context
+renovables
+cuidando
+actividad
Necesita
Actividad
Renovables
60
Fondo
componentes
+fondo +tiempo
1
Problema
Tiempo
+problema
1
Media
1 +web 1
1
+media
1 +fondo
+animacion
1
Web
personajes
+animacion
1
+animacion
+cuidando
1
+necesita
1
+context
1
Cuidando
Necesita
+actividad
1
+renovables
Actividad
Renovables
Menus
+menu2
Menu2
+menu1 1
+menu
Animacion
1
+animacion
NinoCientifica
Animacion
1
+context
1 +context
Menu1
1
+animacion
Nina
+context
1
Animacion
+context
Principal
+context
1
+context
Animacion
ArbolCientifico
Actividades
1
+menu 1
Menu
Animacion
1 +menu
+menu3
1
1
+menu
1
Menu3
+menu4
Menu4
61
3.2.3
Mundo Ve rde
Nio o Nia
context : Principal
1 : onCreate()
animacion : Animacion
menu : Menu
problema : Problema
media : Media
arbol : ArbolCientifico
animacion : Animacion
2 : doInBackground()
3 : onProgresUpdate()
4 : setEscena()
5 : Problema()
6 : media()
7 : setTiempos()
8 : doInBackground()
9 : onProgresUpdate()
10 : invalidate()
11 : stop()
12 : onCancel()
13 : onPause()
62
Mundo Elctrico
Nio o Nia
principal : Principal
index.html
1 : onCreate()
2 : loadUrl()
3 : runningAnimation()
4 : onPause()
3.3
Grficos en Android
BitmapFactory.decodeResource
(getResources(),
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.
Es perfecto para
JavaScript.
13
66
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.
68
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
I lustrac i n 46 Esp ac io de traba jo de Se nc ha Animator
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.
CAPTULO 4
72
4
4.1
Memoria: 8Gb
75
Memoria: 4 Gb.
Memoria: 16 GB.
80
60
40
20
0
Excelente
Bueno
Regular
Malo
77
Si
No
100
80
60
40
20
0
Dificil
Normal
Facil
78
79
80
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.
81
83
85
86
87
88
RECURSOS GRFICOS
a. Capturas de pantalla.
b. Icono de la aplicacin.
90
CATEGORIZACIN
a. Tipo de la aplicacin.
b. Categora.
c. Clasificacin de contenido.
91
93
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
95
96
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.
97
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- marketshare- 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-ahtml5
[9] Gran Angular Blog, Conoce (y prueba) las caractersticas de HTML5,
fecha de recuperacin: 07 de agosto 2012, http://www.granangular.net/conoce-prueba-caracteristicas- html5-presentacion-practicatecnicas-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-wcag20-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/
98
99
100
ANEXOS
101
9 ANEXOS
9.1 ANEXO 1: CERTIFICADO DE VALIDACIN DE
REQUERIMIENTOS.
102
103
104