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 l a 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

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, Dicie mbre de 2012

Ing. Vladimir Robles Bykbaev. Director de Tesis

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.

Diego Fernando Quisi Peralta

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.

Diego Fernando Quisi Peralta

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.

Diego Fernando Quisi Peralta

TABLA DE CONTENIDOS
CAPTULO 1 6
1 INTRODUCCIN.......................................................................................................... 12 1.1 1.2 1.2.1 1.2.2 1.3 1.4 1.4.1 1.4.2 Introduccin ............................................................................................................. 12 Antecedentes............................................................................................................ 13 Justificacin ...................................................................................................... 13 Descripcin del Problema .................................................................................. 13 Alcance.................................................................................................................... 14 Objetivos ................................................................................................................. 14 Objetivos General.............................................................................................. 14 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 2.2 Estudio de HTML 5 para dispositivos mviles ............................................................ 21 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 2.3.2 2.4 2.4.1 2.4.2 2.4.3 2.4.4 2.4.5 Aplicaciones HTML5 para dispositivos mviles. ............................................... 28 Aplicaciones nativas. ......................................................................................... 28 Especificaciones de la tecnologa de desarrollo. .......................................................... 30 Instalacin y configuracin de JDK 7 ................................................................. 30 Instalacin y configuracin del SDK de Android ................................................. 33 Instalacin y configuracin de Eclipse Indigo...................................................... 39 Instalar el plugin de Android para Eclipse ........................................................... 39 Creacin de un nuevo proyecto Android ............................................................. 41

CAPTULO 3 . 39
3 DISEO DEL SOFTWARE. .......................................................................................... 45 3.1 Levantamiento de Requerimientos de Software........................................................... 45 6

3.1.1 3.1.2 3.1.3 3.1.4 3.1.5 3.1.6 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 3.3.3 3.3.4

Definicin de Stakeholders ................................................................................ 45 Tcnicas de Elicitacin [26] ............................................................................... 46 Suposiciones y Dependencias............................................................................. 46 Requerimientos Funcionales............................................................................... 47 Requerimientos no Funcionales .......................................................................... 50 Restricciones..................................................................................................... 51 Evolucin previsible del sistema......................................................................... 51 Validacin de requerimientos ............................................................................. 51 Diseo de la aplicacin. ............................................................................................ 51 Casos de Uso .................................................................................................... 51 Diagrama de Clases del Mundo Elctrico y Verde ............................................... 53 Diagramas de Secuencia del Mundo Elctrico y Verde......................................... 62 Anlisis de las herramientas de desarrollo. ................................................................. 63 Grficos en Android .......................................................................................... 63 AsyncTask [27]................................................................................................. 64 Reproduccin de sonido [31].............................................................................. 65 Desarrollo Html5 [23]........................................................................................ 66

CAPTULO 4 . 67
4 IMPLEMENTACIN, DOCUMENTACIN Y PRUEBAS .......................................... 73 4.1 4.2 4.3 4.4 4.4.1 4.4.2 4.5 5 6 7 8 9 Implementacin y seleccin de los mdulos de aprendizaje. ....................................... 73 Desarrollo de pruebas con los dispositivos mviles en el laboratorio ............................ 75 Desarrollo de pruebas con nios y nias. ................................................................... 77 Documentacin. ....................................................................................................... 81 Descarga e Instalacin de la aplicacin. .............................................................. 81 Manual de Usuario ............................................................................................ 84 Publicacin de la aplicacin en la tienda de Google..................................................... 85

CONCLUSIONES.......................................................................................................... 95 RECOMENDACIONES................................................................................................. 97 TRABAJOS FUTUROS ................................................................................................. 97 BIBLIOGRAFA............................................................................................................ 98 ANEXOS...................................................................................................................... 102 9.1 9.2 ANEXO 1: CERTIFICADO DE VALIDACIN DE REQUERIMIENTOS. ...............102 ANEXO 2: ENCUESTA PRACTICADA A LOS NIOS Y NIAS ..........................104 7

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 PE QUEOS 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

ILUSTRACIN 35 CONFIGURA CIN DE UN NUEVO PROYECTO ANDROID. ....................................... 43 ILUSTRACIN 36 EJECUCIN DE LA APLICACIN A NDROID................................................................... 43 ILUSTRACIN 37 SITIO W EB DE DESCARGA DE SENCHA ANIMATOR ................................................. 67 ILUSTRACIN 38 INSTALA CIN DE SENCHA ANIMATOR.......................................................................... 67 ILUSTRACIN 39 DIRECTORIO DE INSTA LACIN DE SENCHA ANIMATOR....................................... 68 ILUSTRACIN 40 INSTALA CIN TERMINADA DE SENCHA ANIMATOR .............................................. 68 ILUSTRACIN 41 PA NTA LLA PRINCIPA L DE SENCHA ANIMATOR ........................................................ 69 ILUSTRACIN 42 CONFIGURA CIN DEL NUEVO PROYECTO DE ANDROID ...................................... 69 ILUSTRACIN 43 PA NEL DE OBJETOS DE SENCHA ANIMATOR .............................................................. 70 ILUSTRACIN 44 PA NEL DE PROPIEDADES DE SENCHA ANIMATOR ................................................... 70 ILUSTRACIN 45 PA NEL LNEA DE TIEM PO DE SENCHA ANIMATOR .................................................. 71 ILUSTRACIN 46 ESPACIO DE TRA BAJO DE SENCHA ANIMATOR ......................................................... 71 ILUSTRACIN 47 PA NEL DE ESCENAS DE SENCHA ANIMATOR ............................................................. 71 ILUSTRACIN 48 PA NEL DE CONTROL DE TIEM PO DE SENCHA ANIMATOR ................................... 71 ILUSTRACIN 49 ENTRA DA DE LA DOCTORA ATMICA EN EL MUNDO ELCTRICO EN 200MS. ..................................................................................................................................................................................... 73 ILUSTRACIN 50 ENTRA DA DE LA DOCTORA ATMICA EN EL MUNDO ELCTRICO EN 400MS. ..................................................................................................................................................................................... 73 ILUSTRACIN 51 ENTRA DA DE LA DOCTORA ATMICA EN EL MUNDO ELCTRICO EN 600MS. ..................................................................................................................................................................................... 74 ILUSTRACIN 52 ENTRADA DEL RBOL CALIPTO EN EL M UNDO VERDE EN 200MS ................... 74 ILUSTRACIN 53 ENTRADA DEL RBOL CALIPTO EN EL M UNDO VERDE EN 400MS ................... 75 ILUSTRACIN 54 ENTRADA DEL RBOL CALIPTO EN EL M UNDO VERDE EN 600MS ................... 75 ILUSTRACIN 55 DISPOSITIVO MVIL DE PRUEBA COBY. ....................................................................... 76 ILUSTRACIN 56 DISPOSITIVO MVIL DE PRUEBA SAMSUNG GA LAXY TA B 2.............................. 76 ILUSTRACIN 57 DISPOSITIVO MVIL DE PRUEBAS ASUS TF101 .......................................................... 77 ILUSTRACIN 58RESULTADO DE LA PREGUNTA CM O FUE LA EXPERIENCIA DE UTILIZACIN DE LOS TABLETS PARA EL APRENDIZAJE M ULTIM EDIA DEL MUNDO VERDE? ..................................................................................................................................................................... 77 ILUSTRACIN 59 RESPUESTA A LA PREGUNTA. AUM ENT EL GRA DO DE INTERS DE APRENDIZAJE UTILIZANDO LOS TABLETS ? ............................................................................................. 78 ILUSTRACIN 60 RESPUESTA A LA PREGUNTA. LA UTILIZA CIN DE LA APLICACIN DEL MUNDO VERDE EN LOS TABLETS FUE?...................................................................................................... 78 ILUSTRACIN 61 PRUEBA CON NIAS DE LA ESCUELA "FRANCISCA D VILA"............................. 79 ILUSTRACIN 62 PRUEBA CON LA S NIAS E INSTRUCTORES. ............................................................... 79 ILUSTRACIN 63 PRUEBA CON UN NIO DE LA ESCUELA "CA RLOS 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 CA RLOS CRESPI CON LA TABLET SAMSUNG GA LAXY TA B 2.............................................................................................................. 81 ILUSTRACIN 66 GESTOR DE DESCA RGA S DE APLICACIONES PLAY STORE [35]. .......................... 81 ILUSTRACIN 67 BSQUEDA DE LA APLICACIN EN PLA Y STORE ..................................................... 82 ILUSTRACIN 68 DESCRIPCIN DE LA APLICACIN DEL M UNDO VERDE ........................................ 82 ILUSTRACIN 69 ACEPTA R Y DESCA RGA R LA APLICACIN DEL MUNDO VERDE ....................... 83 ILUSTRACIN 70 INSTALA CIN COM PLETA DE LA APLICACIN MUNDO VERDE........................ 83 ILUSTRACIN 71 ICONO DE LA APLICA CIN DEL M UNDO VERDE....................................................... 84 ILUSTRACIN 72 M EN PRINCIPAL DEL M UNDO VERDE .......................................................................... 84 ILUSTRACIN 73 M EN DE SUBTEMAS DEL M UNDO VERDE. ................................................................. 84 ILUSTRACIN 74 TRAMOS DEL M UNDO VERDE ........................................................................................... 85

ILUSTRACIN 75 CREACIN DE UNA CUENTA EN GMAIL. ....................................................................... 86 ILUSTRACIN 76 CONDICIONES DE SERVICIOS Y POLTICAS DE SEGURIDAD DE GOOGLE. ... 86 ILUSTRACIN 77 PA NTA LLA DE BIENVENIDA A GMAIL............................................................................ 87 ILUSTRACIN 78 CREACIN DEL PERFIL DESARROLLADOR EN GOOGLE PLAY ............................. 87 ILUSTRACIN 79 ACUERDO DE DISTRIBUCIN PARA DESA RROLLADORES.................................... 88 ILUSTRACIN 80 PA GO DE CUOTA DE REGISTRO. ........................................................................................ 88 ILUSTRACIN 81 PA NEL DE A DMINISTRA CIN DE PUBLICACIONES EN ANDROID. .................... 89 ILUSTRACIN 82 VENTANA PA RA SUBIR EL PROYECTO DE ANDROID. ............................................. 89 ILUSTRACIN 83 SELECCIN DEL .APK ............................................................................................................. 89 ILUSTRACIN 84 CUA DRO DE PROGRESO DE SUBIR LA APLICA CIN AL SERVIDOR.................. 90 ILUSTRACIN 85 INFORMACIN DE LA APLICA CIN SUBIDA A L SERVIDOR. ................................ 90 ILUSTRACIN 86 ESPECIFICA CIONES DE LA INFORMACIN DEL M UNDO VERDE. ...................... 91 ILUSTRACIN 87 ESPECIFICA CIONES GRA FICAS DEL MUNDO VERDE. .............................................. 92 ILUSTRACIN 88 CATEGORIZACIN Y DETA LLE DE CONTACTO DEL MUNDO VERDE. ............. 92 ILUSTRACIN 89 ESPECIFICA CIN DEL PRECIO Y DISTRIBUCIN DEL M UNDO VERDE............ 93 ILUSTRACIN 90 PRESENTA CIN DE LA APLICA CIN EN GOOGLE PLAY DEL M UNDO VERDE. ..................................................................................................................................................................................... 94

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

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 renova ndo 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 digital1 , elctrico 2 , magntico 3 y verde 4 , pero una gran desventaja

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 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

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 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

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 (preferentemente entablets). tipos de dispositivos mviles

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 Taller 1 Taller 2 Taller 3 Taller 4 Taller 5 Taller 6 Taller 7 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 9 9 23 23 7 7 21 de Fecha de finalizacin 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

Taller 8

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.

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.
70%
60% 50% 40% 58%

30%
20% 10% 0% PRE-TEST POST-TEST 10%

I lustrac i n 1 P ro med io de l nive l de co noc imie nto de los nios y nias respecto a los te mas abarcados e n los ta lleres, a ntes y d esp us de los mis mos. 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 lustrac i n 2 I nte rs de los nio s y nias e n la s car reras p ro fes io na le s previo a lo s ta lle res (p re- test).

I lustrac i n 3 I nte rs de los nio s y nias e n la s car reras

16

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.

Te gust el taller "Pequeas y Pequeos Cientficos"?

100% 80% 60% 40% 20% 1% Mucho Mas o menos 0% Poco 1% No contesta 98%

0%

I lustrac i n 4 Resp uesta de los nios y nia s a la p re gunta Te gust e l ta ller Peq ue as y Peq ue o s C ie ntf 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 lustrac i n 5 I nte rs de los padre s de fa milia e n q ue s us nios y nias partic ipe n e n ta lleres de este tipo. 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.

17

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 lustrac i n 6 Ta lle res e n e l Aula de c ie nc ia co n la esc ue la Fra nc isca D vila.

I lustrac i n 7 Ta lle res e n e l Aula de c ie nc ia co n la esc ue la Car los Cresp i.

18

I lustrac i n 8 I na ugurac i n y e ntre ga de d ip lo mas a 1 e r gr upo de Peq ue as y Peq ue os C ie ntfico s. Vis ita de Secr etar io de l Se nesc yt, Re n Ra mre z.

I lustrac i n 9 Re uni n co n padre s de fa milia e n la esc ue la Car lo s C resp i.

19

CAPTULO 2

20

2 2.1

ESTUDIO DE LA TECNOLOGA A DESARROLLAR 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 materia les 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.

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

Eliminacin de etiquetas y atributos obsoletos o no deseables.

I lustrac i n 10 Co mpos ic i n de Html5 [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 lustrac i n 11 Co mpatib ilidad de los na ve gado res web co n html5 [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:
10 11

Desarrollo rpido de aplicaciones, que sean reutilizables verdaderamente portables entre diferentes dispositivos.

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

22

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 lustrac i n 12 Arq uitec tura de Andro id 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 o drivers.

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: 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 funcionalidades propias del telfono (llamadas, mensajes, etc.) a las

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.
24

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 extensi n .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 re visar 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:

25

I lustrac i n 13 C ic lo de vida de un Activ ity [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.
26

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 lustrac i n 14 Po rce nta jes de d is tr ib uc io nes de Andro id utilizadas actua lme nte [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.

27

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].

28

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].

29

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 lustrac i n 15 S itio web d e Orac le pa ra la de scar ga de l J DK

30

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 lustrac i n 16 Desc ar ga de l 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 lustrac i n 17 I nsta lac i n de J DK 7

31

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

I lustrac i n 18Ca racte r s tica s de ins ta lac i n de l J DK 5. Por ltimo se nos presenta un mensaje que nos informa que la instalacin se realiz con xito, damos clic en cerrar.

I lustrac i n 19 Es tado de la ins ta lac i n de l JDK

32

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 lustrac i n 20 S itio web p ara la descar ga de l S DK de Andro id 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 lustrac i n 21 I nsta lac i n de l S DK de Andro id

33

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

I lustrac i n 22 Directo r io de ins ta lac i n de l S DK de Andro id 4. Se instalara todos los paquetes del SDK de Android, damos clic en instalar.

I lustrac i n 23 Paq uetes de ins ta lac i n de Andro id

34

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 lustrac i n 24 I nsta lac i n de la s p la ta for mas d ispo nib les de Andro id 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.

35

I lustrac i n 25 Ad minis tr ac i n de d ispos itivo s vir tua les de And ro id 8. Para crear un nuevo dispositivo virtual damos clic en Nuevo.

I lustrac i n 26 Cr eac i n de un nue vo d ispos itivo virtua l de And ro id

36

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 lustrac i n 27 Co nfigurac i n de un nue vo d ispos itivo vir tua l de Andro id 10. Una vez terminada la creacindel dispositivo virtual, podemos iniciarlo para comprobar su correcto funcionamiento, para esto damos clic en comenzar.

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.

I lustrac i n 29 Ejec uc i n d e l d ispos itivo vir tua l Andro id

38

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 lustrac i n 30 S itio web d e descar ga de l Ec lipse I nd igo 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.

39

1. Seleccionamos en el Men Help>Install New Software

I lustrac i n 31 I nsta lac i n de lp lugin A DT e n Ec lip se. 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 lustrac i n 32 Agre gac i n e l repos ito r io de Andro id

40

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 lustrac i n 33 Se lecc i n e ins ta lac i n de los paq ue tes de Andro id 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.

41

I lustrac i n 34 Cr eac i n de nue vo pro yec to de And ro id 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.

42

I lustrac i n 35 Co nfigurac i n de un nue vo p ro yecto Andro id. 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 lustrac i n 36 Ejec uc i n d e la ap licac i n Andro id.

43

CAPTULO 3

44

3 3.1

DISEO DEL SOFTWARE. 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 Stakeholders12

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 Ing. Elena Duran CARGO Desarrolladores del Proyecto Pequeas y Pequeos Cientficos. Desarrolladores del proyecto Pequeas y Pequeos Cientficos. Director de Tesis Equipo de Investigacin Jefe del departamento de Investigacin RELEVACIN (1-5) 5

Ing. Diego Granja

Ing. Vladimir Robles Ing. Rodolfo Bojorque Ing. Eduardo Calle

5 4 3

Tab la 2 Matr iz de los Stak eholders.

12

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

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 comp leta 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.

46

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
47

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!

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 Fiabilidad Que el sistema sea 90% fiable, es decir, que la aplicacin de cada 10 ejecuciones las 9 no tengan ningn error de compilacin. Requisito de conexin. El sistema no contendr internet. ninguna conexin abierta de acceso a El sistema ofrecer respuesta al usuario en tiempo real. El tiempo de respuesta promedio de la aplicacin no debe superar los 5 segundos.

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.

50

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: Android Honeycomb 3.0 o superior 3.1.7 Evolucin previsible del sistema los cuales estn

Se continuarel desarrollo de los siguientes mdulos, 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

Seleccion del tema de Aprendizaje Nios o Nias

51

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. Actor Principal: Nias/os Prioridad:X Esencial Comple jidad: Simple til Mediano

Nro. Orden: R1

Deseable Complejo X Muy Complejo Abstracto

Tipo de Caso de Uso:XConcreto

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: 1. Visualizacin multimedia de los temas de aprendizaje del mundo verde y elctrico. 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 Alte rnativas Terminar cada uno de los temas de aprendizaje multimedia.

52

3.2.2

Diagrama de Clases del Mundo Elctrico y Verde

Diagrama de clases del Mundo Elctrico.

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

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

Componentes Fondo +web 1 1 +animacion +fondo 1 Web 1 Animacion 1 +tiempo 1 Tiempo

Personajes

Personajes ArbolCientifico 1 Nina 1 NinoCientifica 1 +animacion 1 +animacion 1 +animacion 1 Animacion Animacion Animacion

59

Mens

Menu1 +menu1 1 +menu +menu 1 1 Menu

Menus +menu2 1 +menu +menu3 1 +menu4 1 Menu4 Menu3

Menu2

1 +menu 1

Actividades

Problema

1 +problema

1 +context 1 +context 1

Actividades Principal

+context 1 +context 1

+cuidando 1 +necesita 1 +actividad 1

Cuidando Necesita

Media

1 +media 1 +animacion

1 +context 1

+context 1

Animacion

Actividad

+renovables

Renovables

Finalmente se presenta el Diagrama UML del Mundo Verde.

60

Fondo

componentes +fondo +tiempo 1 1

Problema Tiempo Media

1 +problema 1 +media

Actividades 1 +context 1 +context 1 +context Principal

+context 1 +context 1 +context 1

+cuidando 1 +necesita 1 +actividad 1

Cuidando

1 +web 1 1 +fondo Web +animacion 1 Animacion

Necesita

1 +context 1

1 Animacion +animacion

+renovables

Actividad

Renovables

personajes ArbolCientifico 1 Nina 1 NinoCientifica 1 +animacion 1 +animacion 1 +animacion 1 Animacion Animacion Animacion

Menu1 +menu1 1 +menu +menu 1 Menu

Menus

+menu2 1

Menu2

1 +menu 1 +menu 1

+menu3 1 +menu4 1

Menu3

Menu4

61

3.2.3

Diagramas de Secuencia del Mundo Elctrico y Ve rde

Mundo Ve rde
Nio o Nia context : Principal animacion : Animacion menu : Menu problema : Problema media : Media arbol : ArbolCientifico animacion : Animacion

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()

62

Mundo Elctrico
Nio o Nia principal : Principal

index.html

1 : onCreate() 2 : loadUrl() 3 : runningAnimation()

4 : onPause()

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 } }
63

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 = R.drawable.imagen); BitmapFactory.decodeResource (getResources(),

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]: 3.3.2 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.

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.
64

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();
65

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 ORMMA13 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 JavaScript. juegos simples y animaciones respaldas por

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].

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.

I lustrac i n 37 S itio web d e descar ga de Se nc haAnima tor 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 lustrac i n 38 I nsta lac i n de Se nc ha Animator

67

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

I lustrac i n 39 Directo r io de ins ta lac i n de Se nc ha Animator 4. Empezara el proceso de instalacin,una vez terminada la instalacin damos clic en terminar.

I lustrac i n 40 I nsta lac i n te r minada de Se nc ha Animator

68

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 lustrac i n 41 Pa nta lla pr inc ipa l de Se nc ha Animato r 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 lustrac i n 42 Co nfigurac i n de l nue vo Pro yec to de And ro id

69

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 lustrac i n 43 Pa ne l de ob jetos d e Se nc haAnima tor 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 lustrac i n 44 Pa ne l de pro p iedade s de Se nc ha Anima tor

70

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 lustrac i n 45 Pa ne l lnea de tie mpo de Se nc ha Animator 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 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.

I lustrac i n 47 Pa ne l de es ce nas de Se nc ha Animato r 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 lustrac i n 48 Pa ne l de co ntro l de tie mpo de Se nc ha Animato r

71

CAPTULO 4

72

4 4.1

IMPLEMENTACIN, DOCUMENTACIN Y PRUEBAS 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 lustrac i n 49 Entrada de la Do ctora At mic a e n e l M undo Elctr ico e n 200ms.

I lustrac i n 50 Entrada de la Do ctora At mic a e n e l M undo Elctr ico e n 400ms.

73

I lustrac i n 51 Entrada de la Do ctora At mic a e n e l M undo Elctr ico e n 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 lustrac i n 52 Entrada de l rbo l Ca lipto e n e l M undo Verde e n 200 ms

74

I lustrac i n 53 Entrada de l rbo l Ca lipto e n e l M undo Verde e n 400 ms

I lustrac i n 54 Entrada de l rbo l Ca lipto e n e l M undo Verde e n 600 ms 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)

75

I lustrac i n 55 Dispos itivo M vil d e Pr ueba Cob y. Tablet SamsungGalaxyTab 2. Memoria: 4 Gb. Pantalla: LCD 7.0 pulgadas. Procesador: Dual-Core 1 Ghz Memoria RAM: 1 GB. Sistema Operativo: Android 4.0.2 (Ice CreamSandwich)

I lustrac i n 56 Dispos itivo M vil d e Pr ueba Sa ms ung Ga la xyTab 2. Tablet - Asus Memoria: 16 GB. Pantalla: LCD 10.61 pulgadas. Procesador: Dual-Core 2.1 Ghz Memoria RAM: 1GB. Sistema Operativo: Android 3.2 (HoneyComb).
76

I lustrac i n 57 Dispos itivo M vil d e Pr ueba As us 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.

80 60

40 20
0

Excelente

Bueno

Regular

Malo

I lustrac i n 58 Res ultado de la p re gunta C mo fue la e xper ie nc ia de utilizac i n de los tablets pa ra e l ap re nd iza je multimed ia de l mundo verd e?

77

Si

No

I lustrac i n 59 Resp uesta a la pre gunta. Aume nt e l grado de inter s de apre nd iza je utiliza ndo lo s tablets ?

100
80 60

40
20

0
Dificil Normal Facil

I lustrac i n 60 Resp uesta a la pre gunta. La utilizac i n de la ap licac i n de l mundo verde e n los tablets 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.

78

I lustrac i n 61 P r uebas co n N ia s de la Esc ue la "Fra nc isca D vila ".

I lustrac i n 62 P r uebas co n las N ias e I ns tr ucto res.

79

I lustrac i n 63 P r ueba co n un es tud ia nte de la Esc ue la "Car los Cresp i" con la tablet COBY.

I lustrac i n 64 P r uebas co n N io s de la Esc ue la "Ca r los Cre sp i".

80

I lustrac i n 65 P r ueba co n un es tud ia nte de la Esc ue la Ca r los Cre sp i con la tablet Sa ms ung Ga la xyTab 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 lustrac i n 66 Ges tor de de scar gas d e ap licac io ne s Play Store [ 35] .

81

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 lustrac i n 67 Bsq ueda de la ap lica c i n e n P la y Store Posteriormente se nos presenta una descripcin de la aplicacin Mundo Verde, como se muestra en la ilustracin 68, presionamos la opcin Instalar.

I lustrac i n 68 Desc r ipc i n de la Ap licac i n de l M undo Ve rde

82

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

I lustrac i n 69 Acep tar y Desca r gar la ap licac i n de l M undo Verde Una vez completada la descarga de la aplicacin, se proceder a instalar automticamente en el dispositivo, finalmente presionamos la opcin Abrir.

I lustrac i n 70 I nsta lac i n co mp leta de la ap licac i n M undo Verde

83

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 lustrac i n 71 Ico no de la Ap licac i n de l M undo Ve rde. 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 lustrac i n 72 Me n Pr inc ipa l de l M undo Verd e Se nos presenta los subtemas, si deseamos regresar al men principal presionamos la opcin mundo verde, caso contrario presionamos el subtema a estudiar.

I lustrac i n 73 Me n de s ub te ma s de l M undo Verde.

84

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 lustrac i n 74 Tra mos de l M undo 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.

85

I lustrac i n 75 Cr eac i n de una c ue nta e n Gma il. 3. Aceptamos las condiciones de servicio y las polticas de privacidad de Google y procedemos a dar clic en siguiente paso.

I lustrac i n 76 Co nd ic io ne s de Ser vic ios y Po lticas de Se gur idad de Goo gle. 4. Se nos presenta una pantalla de bienvenida a Gmail, damos clic en Ir a Gmail.

86

I lustrac i n 77 Pa nta lla de Bie nve nida a Gma il. 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 lustrac i n 78 Cr eac i n de l per fil d esar ro llador e n Google Pla y.

87

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

I lustrac i n 79 Ac ue rdo de d is tr ib uc i n pa ra desa rro lladore s 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 lustrac i n 80 Pa go d e c uota de re gistro.

88

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 lustrac i n 81 Pa ne l de ad min istrac i n de p ub lic ac io nes e n Andro id. 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 lustrac i n 82 Ve nta na para s ub ir e l pro yec to de Andro id. 3. Escogemos la aplicacin empaquetada que se subir al servidor, con extensin .apk.

I lustrac i n 83 Se lecc i n de l .apk

89

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

I lustrac i n 84 C uad ro de pro gre so de s ub ir la ap licac i n a l 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 lustrac i n 85 I nfor mac i n de la ap lica c i n s ub ida a l ser vidor. 6. A continuacin debemos especificar la informacin del proyecto, por lo que debemos dar clic e n 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.
90

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 lustrac i n 86 Esp ec ificac io nes de la I nfo r mac i n de l M undo Ve rde.

91

I lustrac i n 87 Esp ec ificac io nes Gra ficas de l M undo Verde.

I lustrac i n 88 Ca te gor izac i n y de ta lle de co ntacto de l M undo Verde.

92

Para mayor detalle de como especificar el producto dirigirse al sitio web de Soporte de Google (https://support.google.com/googleplay/androiddeveloper/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 lustrac i n 89 Esp ec ificac i n de l p rec io y d istr ib uc i n de l M undo Verde. 8. Al concluir visualizaremos la aplicacin configurada y publicada en la tienda de GooglePlay.

93

I lustrac i n 90 P rese ntac i n de la ap licac i n e n Google Play de l Mundo Verde. Una caracterstica adicional que nos brinda Google Playes que podemos visualizar cuadros estadsticos de descargas de la aplicacin.
94

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 M undo Verde , que combinaba cdigo Android con HTML5. Durante este proceso se pudo observar que la
95

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.

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

[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://earchivo.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- vsmultiplataforma [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- nativecomparison-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-enhtml5- 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-enandroid/ [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,

99

[27]Miguel Angel, Androides y Pinginos, fecha de recuperacin 06 de septiembre de 2012, http://miguelangellv.wordpress.com/2011/01/31/creandotareas-asincronas-en-android-con-asynctask/ [28] Blog OpenAlfa, Cmo dibujar grficos en Android, fecha de recuperacin 06 de septiembre, http://blog.openalfa.com/como-dibujargraficos-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/recursosdidacticos/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-androidgracias-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-elcamino-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/googleplay-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- html5en- la-educacion?start=2

100

ANEXOS

101

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

102

103

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 multime dia del mundo verde? a. Excelente b. Bueno c. Regular d. Malo 2. Aume nt el grado de inte rs 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

104