App ies juan gris alfonso moreno

APLICACIÓN I.E.S. JUAN GRIS TRABAJO DE INVESTIGACIÓN

Alfonso Moreno Mateos

App IES Juan Gris

2

Bachillerato de Investigaciรณn

Bachillerato de Investigación

App IES Juan Gris

CONSEJERÍA DE EDUCACIÓN, JUVENTUD Y DEPORTE

Comunidad de Madrid

Aplicación IES Juan Gris Este trabajo ha sido realizado en el programa “Bachillerato de Investigación del I.E.S Juan Gris”.

Móstoles (Madrid). Febrero de 2017

App IES Juan Gris por Alfonso Moreno Mateos se distribuye bajo una Licencia Creative Commons Atribución-SinDerivar 4.0 Internacional.

Para ver una copia de esta licencia, visite” http://creativecommons.org/licenses/by-nd/4.0/"

3

App IES Juan Gris

4

Bachillerato de Investigaciรณn

Bachillerato de Investigación

App IES Juan Gris

“Me gustaría agradecer este trabajo a todas las personas de mi entorno en estos últimos dos años, pero en especial a mi familia por saber calmar mi genio en los momentos de enfado cuando no sabía la manera de continuar, al igual que mis compañeros de clase.

Pero en especial a mi tutor del trabajo Gregorio Rosa por ayudarme en todo este largo proceso y sus horas de dedicación fuera de su horario laboral. Por último, a Goyo Gómez y Daniel Ruiz, programadores de Mobincube por sus respuestas a mis dudas”

5

App IES Juan Gris

6

Bachillerato de Investigaciรณn

Bachillerato de Investigación

App IES Juan Gris

Antes de empezar con la lectura, quiero dejar constancia de que este documento no es la única parte del trabajo. Lo que verdaderamente es el proyecto, es la aplicación “IES Juan Gris”. En esta memoria sólo se podrá encontrar el proceso llevado a cabo para crearla.

Para entender este trabajo en toda su extensión, el lector deberá descargar e instalar las aplicaciones creadas. Su uso se podrá complementar con la lectura para así entender su funcionamiento.

Los links de descargas de ambas apps se encuentran en las páginas 33 y 34, en la sección “Metodología y Descargas”. También en los siguientes códigos QR.

7

App IES Juan Gris

8

Bachillerato de Investigaciรณn

Bachillerato de Investigación

App IES Juan Gris

ÍNDICE

1.

INTRODUCCIÓN ....................................................................................................... 11 Diferencias entre web y app ............................................................................................ 12 Qué es un Smartphone ..................................................................................................... 12 Sistemas operativos en teléfonos móviles ....................................................................... 12

2.

TIPOS DE APLICACIONES ...................................................................................... 15 AppNativas ...................................................................................................................... 16 AppWeb ........................................................................................................................... 16 Híbrida ............................................................................................................................. 17

3.

OBJETIVO ................................................................................................................... 19

4.

FORMAS DE HACER APLICACIONES. .................................................................. 21 4.1.

Adianteapps .......................................................................................................... 22

4.2.

AppArchitect ......................................................................................................... 23

4.3.

AppPress ............................................................................................................... 24

9

App IES Juan Gris

Bachillerato de Investigación

4.4.

Appsbar ................................................................................................................. 25

4.5.

Apper .................................................................................................................... 26

4.6.

Infinite Monkeys ................................................................................................... 27

4.7.

AndroidCreator ..................................................................................................... 28

4.8.

Mobincube ............................................................................................................ 29

4.9.

App Inventor ......................................................................................................... 30

5.

PRECEDENTES .......................................................................................................... 31

6.

METODOLOGÍA Y DESCARGA .............................................................................. 33 6.1.

AppWeb IES Juan Gris ......................................................................................... 35

Elementos de la App .................................................................................................... 35 Programación de la App. .............................................................................................. 36 6.2.

App Nativa Calificaciones .................................................................................... 37

Elementos ..................................................................................................................... 37 Programación ............................................................................................................... 39 6.3.

7.

App híbrida IES JUAN GRIS ............................................................................... 43

Descripción de la App .................................................................................................. 51 Contacto ........................................................................................................................... 53 Bachillerato a Distancia ................................................................................................... 54 Convocatorias .................................................................................................................. 54 Ubicación ......................................................................................................................... 55 Libros de Texto................................................................................................................ 55 Fotos ................................................................................................................................ 56 Horarios ........................................................................................................................... 56 Noticias ............................................................................................................................ 57 Canal de Video ................................................................................................................ 57 Documentos ..................................................................................................................... 58 Twitter ............................................................................................................................. 58 Web.................................................................................................................................. 58 Calificaciones .................................................................................................................. 59 Otros elementos ............................................................................................................ 64

10

8.

Errores y posibles mejoras. .......................................................................................... 65

9.

BIBLIOGRAFÍA .......................................................................................................... 67

Bachillerato de Investigación

App IES Juan Gris

1.

INTRODUCCIÓN

Desde el origen del ser humano, la tecnología ha estado presente en nuestras vidas. La tecnología es la invención de herramientas y técnicas con un propósito práctico.

La informática está siendo cada vez más frecuente en el día a día del ser humano. En los últimos años, la venta de smartphones y otros dispositivos electrónicos ha aumentado considerablemente; esto ha desencadenado un aumento del mercado de programas y aplicaciones, con una lucha entre las diferentes empresas por conseguir ya sea la mejor red social, el mejor juego o la mejor aplicación.

La tecnología de hoy en día ha sustituido a la tradicional, es muy difícil salir a la calle y no ver a nadie conectado a su Smartphone ya sea, hablando con otra persona en cualquier parte del mundo, compartiendo imágenes o leyendo un libro digital.

Pero las aplicaciones no solo las desarrollan las grandes empresas como Supercell, Google o Facebook; sino también cada vez hay más tiendas, colegios o gimnasios con sus propias apps. Últimamente se ha visto la necesidad de que cada organismo tenga su propia app; ya sea para que sus usuarios tengan mayor facilidad a la hora de acceder a sus datos y servicios; o para la propia organización, y así llevar mejor control de sus clientes y poder llegar a ellos de una forma más directa y a su vez poder recoger sus opiniones y posibles mejoras.

11

App IES Juan Gris

Bachillerato de Investigación

Una aplicación ahorra tiempo, la mayoría de las aplicaciones están basadas en páginas webs; pero especializadas para un sistema operativo, ya que, si se entrase desde el navegador, esa web no estaría totalmente optimizada. Una aplicación provoca en los usuarios una mejor experiencia, de visión y de manejabilidad.

Pero para entender lo que es verdaderamente una aplicación habría que ver sus diferencias con un sitio web.

Diferencias entre web y app Una página web es un documento al que se puede acceder a través de un navegador web.

Una aplicación es un programa instalado en un dispositivo, como WhatsApp, Google Play, Instagram, etc.

En una página web, se interacciona con la información. La diferencia con las aplicaciones es que no están físicamente instaladas en el dispositivo, sino que se ejecutan a través de un navegador, como Chrome, Opera, etc.

Pero, ¿dónde se ejecutan realmente todas estas aplicaciones?

Qué es un Smartphone Un Smartphone, teléfono inteligente en castellano, es un dispositivo en el que enviar y recibir llamadas no es su única tarea, sino que se puede interaccionar con él y utilizar funciones muy similares, si no iguales en muchos sentidos, a las de un ordenador.

Comenzaron en 1992 con las PDA´s como Simon, de IBM. Más tarde en 2002 llegó la Blackberry 5810 hasta que en 2007 Apple y su iPhone revolucionaron el mundo de la telefonía.

Ilustración 1: Simon de IBM

12

Ilustración 2: : BlackBerry 5810

Ilustración 3: Iphone1

Bachillerato de Investigación

App IES Juan Gris

Sistemas operativos en teléfonos móviles El sistema operativo es el software principal de un dispositivo; se encarga de poder dar uso al hardware.

Pueden diferenciarse numerosos Sistemas Operativos, dependiendo del desarrollador. Algunos dispositivos como las tablets actuales permiten el uso de varios SO. Cuando se inicia el dispositivo, el sistema operativo comprueba que todo el sistema sea correcto, haciendo posible el buen uso del hardware.

Usuario Aplicación Sistema Operativo Hardware

El SO se encarga de cargar la memoria y Ilustración 4: funcionamiento de un dispositivo facilitar el inicio de los programas. Cuando un programa está en ejecución, el sistema operativo trabaja en segundo plano. Muchos programas necesitan acceder al hardware del teléfono, como al táctil o la cámara. El acceso es realizado por el sistema operativo, permitiendo al usuario utilizar la aplicación.

Al igual que los ordenadores utilizan sistemas como Windows o Linux, los Smartphones utilizan también diferentes SOs como Android o iOS. Estos sistemas están dedicados a las características de cada teléfono, y a satisfacer las necesidades del usuario.

Según “https://www.cnet.com”, en el primer semestre de 2016 estos eran los porcentajes del uso de sistemas operativos en smartphones.

SISTEMAS OPERATIVOS Android iOS

83%

15%

Windows Phone 1% Blackberry 0,8% Otros

0,2%

Ilustración 5: gráfico del uso de sistemas operativos.

13

App IES Juan Gris

Bachillerato de Investigación

Los sistemas operativos móviles destacables son:     

Android: sistema operativo diseñado por Google y usado cada vez por más plataformas como HTC, LG. iOS: es el sistema operativo de Apple y utilizado por iPhone.

Symbian: creado por Nokia utilizado muchos años en sus teléfonos.

Windows Phone: desarrollado por Microsoft, aunque es utilizado principalmente por los terminales de Nokia.

Firefox OS: de la Fundación Mozilla, responsable del navegador Firefox.

Cada sistema sobresale por una característica. Apple por la seguridad que proporciona a sus usuarios o Android por la flexibilidad y facilidad que ofrece.

Todos estos sistemas se han extendido a tablets y ordenadores.

14

Bachillerato de Investigación

App IES Juan Gris

2.

TIPOS DE APLICACIONES

Una aplicación es un programa informático diseñado para ser ejecutado en smartphones; como un programa en un ordenador, permitiendo al usuario interaccionar con ella y realizar una tarea concreta ya sea el acceso a webs o entretenimiento. Al igual que en Windows los programas llevan una extensión .exe para ser instalado, en Android es .apk Se pueden diferenciar tres tipos de aplicaciones según las características que ofrezca o la forma en la que ha sido desarrollada:

  

App Nativas App Web App Híbridas

15

App IES Juan Gris

Bachillerato de Investigación

AppNativas Las aplicaciones nativas están desarrolladas y optimizadas para el sistema operativo del dispositivo utilizado y la plataforma del fabricante (Android, BlackBerry, etc.):   

Las apps para iOS se desarrollan con lenguaje Objective-C. Las apps para Android se desarrollan con lenguaje Java.

Las apps en Windows Phone se desarrollan en .Net.

Este tipo de app se adapta por completo a las funcionalidades y características del dispositivo, consiguiendo así una experiencia de mejor de manejabilidad. Sin embargo, el desarrollo conlleva un mayor coste, ya que es necesario realizar una versión para cada tipo de dispositivo.

Entre las más conocidas destacan WhatsApp o Facebook.

AppWeb Una app web es una versión de una página web adaptada a un teléfono. Esa app cuenta con un navegador al igual que si lo abriéramos desde el propio navegador de nuestro terminal.

Este tipo es la opción más sencilla y económica; ya que se crea una aplicación adaptada para todos los dispositivos.

Por el contrario, la aplicación web ofrece una peor experiencia de uso, ya que ignora las características del dispositivo y ofrece una menor seguridad debido a que depende del navegador.

Las aplicaciones web se ejecutan dentro del propio navegador web del dispositivo a través de una URL. Por ejemplo, en Safari, si se trata del sistema operativo iOS. El contenido se adapta a la pantalla adquiriendo un aspecto de navegación APP. Las apps web móviles son siempre una buena opción si nuestro objetivo es adaptar la web a formato móvil.

16

Bachillerato de Investigación

App IES Juan Gris

Híbrida Una app híbrida es una mezcla de ambos tipos de apps (web y nativa). Este tipo de desarrollo web tiene la capacidad de adaptación al dispositivo como una app nativa; también permite utilizar los estándares de desarrollo web (HTML5) y aprovechar las funcionalidades del dispositivo tales como la cámara, el GPS o los contactos.

Aporta un menor coste que una aplicación nativa y una mejor experiencia que una aplicación web.

Cuando se trata de crear una aplicación para una institución, como puede ser un centro educativo, lo mejor sería una app híbrida o una web-app, donde en este caso se tiene la página web del instituto como referencia.

La tabla 1 muestra una comparativa de todos los tipos de aplicaciones con sus ventajas e inconvenientes.

Tabla 1: Comparativa de los tipos de aplicaciones

VENTAJAS

AppNativa

AppWeb

 Acceso completo al dispositivo  Mejor experiencia de uso  Actualización constante





Proceso de desarrollo más sencillo y económico Código reutilizable en diferentes plataformas El usuario dispone siempre de la última versión

 

Instalación construida en JavaScript, HTML y CSS Acceso a parte del hardware del dispositivo Mismo código en múltiples plataformas









App Híbrida

INCOVENIENTES

 



 



Diferentes herramientas según el dispositivo Tienden a ser más caras

Requiere conexión a internet Acceso limitado al hardware del dispositivo La experiencia es menor Requiere mayor esfuerzo en visibilidad

El diseño no siempre es el apropiado Experiencia más personal

17

App IES Juan Gris

18

Bachillerato de Investigaciรณn

Bachillerato de Investigación

App IES Juan Gris

3.

OBJETIVO

El objetivo del trabajo es crear una aplicación móvil para el I.E.S. Juan Gris de Móstoles, que pueda ofrecer información relevante de forma más personalizada que la web, destinada a los alumnos principalmente, ya que a través de ella podrán conocer sus notas, horarios, etc., y con información útil para el resto de la Comunidad Educativa (padres, profesores, etc.) como datos del Centro, fotografías, enlaces, etc. También se creará otra aplicación dedicada única y exclusivamente a los profesores.

19

App IES Juan Gris

20

Bachillerato de Investigaciรณn

Bachillerato de Investigación

App IES Juan Gris

4.

FORMAS DE HACER APLICACIONES.

Una aplicación se puede crear por diferentes métodos, ya sea con sistemas que se basan en comandos de programación, como por ejemplo Android Creator, Adobe Air, o bien aplicaciones que facilitan su creación sin tener gran conocimiento del tema; la mayoría de estos programas realizan Apps Híbridas mientras que los que usan comandos de programación crean Apps Nativas.

A continuación, se muestra una breve reseña de diferentes sitios web que permiten crear Apps sin necesidad de tener grandes conocimientos sobre programación.

En cada entrada se ofrece información acerca de la manejabilidad y la forma en la que se puede desarrollar las aplicaciones.

21

App IES Juan Gris

Bachillerato de Investigación

4.1. Adianteapps https://www.adianteapps.com/

Es una página web española destinada a crear aplicaciones de manera gratuita sin tener la necesidad de saber programar y en la que se debe registrar para poder disfrutar de sus funciones.

Es bastante útil ya que proporciona al usuario una serie de videos con los diferentes pasos que se deben seguir para desarrollar una app.

Para crear la aplicación se puede seguir una serie de plantillas con distintos temas como los que se observan al final de esta página (Ilustración 6).

Permite añadir publicidad y encuestas para promocionar la app y ganar dinero; sin embargo, si se quiere enviar notificaciones a cada dispositivo es necesario pagar.

La aplicación creada sería válida en dispositivos Android e IOS, pero si se desea subir a sus respectivos mercados (Google Play y AppStore), habría que pagar por ello un precio de 7,99€.

Ilustración 6: plantillas para crear la aplicación en Adianteapps.

22

Bachillerato de Investigación

App IES Juan Gris

4.2. AppArchitect http://www.apparchitect.com

Es una página inglesa, dedicada especialmente a la creación de aplicaciones para dispositivos de Apple con el sistema operativo IOS. En la versión para Windows no es necesario saber programar, pero la versión para Mac, ofrece esa posibilidad, siendo más completa y compleja.

Para poder probarla en un dispositivo es necesario tener instalada la app de AppArchitect, disponible en el AppStore de manera gratuita.

En esta ocasión no aparece ningún tipo de plantilla, sino distintos apartados de lo que se quiere añadir; lo que hace a cada aplicación única.

Ilustración 7: apartados para crear una aplicación en AppArchitect.

23

App IES Juan Gris

Bachillerato de Investigación

4.3. AppPress www.app-press.com

Este sitio web está enfocado a aplicaciones destinadas al retoque fotográfico su precio es de 30$ si se dedica al uso personal o 75$ para distribuir de manera profesional.

También ofrece la posibilidad de que creen ellos (programadores de App-Press) la app, pero por un elevado coste.

Esta página está destinada a un uso más técnico.

Ilustración 8: precio de AppPress.

24

Bachillerato de Investigación

App IES Juan Gris

4.4. Appsbar http://www.appsbar.com

Es una página bastante completa ya que permite realizar aplicaciones destinadas a la mayoría de sistemas operativos; Android, IOS, BlackBerry y Windows Phone.

Permite seleccionar un icono y un fondo, dando a elegir entre múltiples opciones. Es sencilla de manejar ya que ofrece distintas temáticas y a partir de ahí modificar los datos a gusto del desarrollador.

Ilustración 9: temas de Appsbar

25

App IES Juan Gris

Bachillerato de Investigación

4.5. Apper https://play.google.com/store/apps/details?id=com.xpous.myapps&hl=es

Es una aplicación gratuita disponible para dispositivos Android y que permite crear apps desde el propio dispositivo para usarlas después en él descargando el .apk.

El precio de la primera semana es gratuito, después, el coste pasará a ser de 5$ semanales.

Es bastante completa y fácil de manejar; ya que desde el móvil tiene un aspecto más cercano. El único inconveniente es que se debe completar todas las categorías que propone; ni una más ni una menos.

Ilustración 10: temas de Appsbar

26

Bachillerato de Investigación

App IES Juan Gris

4.6. Infinite Monkeys https://www.infinitemonkeys.mobi

Es una web gratuita y bastante sencilla. Para crear la aplicación sólo se tiene que arrastrar los componentes que se quiera que tenga la app.

Aparece tal y como se vería en el móvil. Tiene una gran variedad de posibilidades. Por el momento está destinada sólo a Android, pero en un futuro también estará disponible también para dispositivos con iOS.

Ilustración 11: portada y apartados de Infinite

27

App IES Juan Gris

Bachillerato de Investigación

4.7. AndroidCreator http://www.androidcreator.com/es/

Es una web destinada a la creación de apps de forma gratuita y sin la necesidad de saber programar.

Está destinada a tablets y móviles Android, pudiendo publicar la app en Google Play (con un gasto superior) o descargarla a través de un enlace.

Sólo es necesario descargar la aplicación una sola vez, y todos los cambios que se realicen desde el área de administración se verán reflejados inmediatamente.

Ilustración 12: apartados de la app proporcionados por Android Creator

28

Bachillerato de Investigación

App IES Juan Gris

4.8. Mobincube http://www.mobincube.com/es/

Es una página web gratuita y en español, destinado sólo a dispositivos Android.

Ofrece la opción de crearla basándose en una plantilla o programándola. Entre las distintas posibilidades que ofrece destacan aplicaciones destinadas al mundo de la construcción o un gimnasio; pudiendo así publicar horarios, localización o incluso tus datos personales.

Después de crear la app, se puede descargar mediante un link (ese link es siempre el mismo, y para cada actualización habrá que volver a descargar la app) o a través de un código QR.

Ilustración 13: aplicación vista desde Mobincube

Cada vez son más frecuentes los códigos QR, códigos de barra bidimensionales que al ser escaneados son redirigidos a un sitio web. La web a la que te dirige viene predestinada con cada código.

29

App IES Juan Gris

Bachillerato de Investigación

4.9. App Inventor http://ai2.appinventor.mit.edu/

App inventor es un sistema creado por Google (con colaboración del MIT) el 12 de julio de 2010 para acercar al mundo del desarrollo a personas con escaso conocimiento.

Para usarlo sólo es necesario disponer de una cuenta google. El funcionamiento del sistema es similar al de Scratch; dos pantallas una en la que se eligen los componentes que debe tener la aplicación y otra con una serie de comandos; en esta pantalla, se unen cada uno de los elementos añadidos en la pantalla principal, dando una función a cada uno. A pesar de esto, es muy difícil adaptarlo a las necesidades que se requieren.

Se puede descargar el archivo.apk o un código BIDI.

Ilustración 14: entrada a modificar la app creada.

30

Bachillerato de Investigación

App IES Juan Gris

5.

PRECEDENTES

A la hora de realizar el proyecto, se ha tomado como referencia la actual página web del instituto; www.iesjuangris.com , y la aplicación del IES Tierra Blanca, de La Zarza de Badajoz, diseñada con Mobincube.

Ilustración 15: interfaz www.iesjuangris.com

31

App IES Juan Gris

Bachillerato de Investigaciรณn

Ilustraciรณn 16: interfaz app IES Tierrablanca

32

Bachillerato de Investigación

App IES Juan Gris

6. METODOLOGÍA Y DESCARGA En este proyecto, se han creado tres aplicaciones: 

Una appweb basada en el sitio web del Instituto: www.iesjuangris.com, Esta primera app se ha creado mediante AppInventor; en las siguientes páginas veremos la manera en la que se ha desarrollado y cada uno de sus componentes. Como ya hemos visto tiene una serie de ventajas e inconvenientes que se podrán comprobar de primera mano.



Una appnativa destinada a los profesores, en ella, éstos tienen que introducir las calificaciones de los alumnos, los resultados se almacenan en la base datos de la app para su posterior consulta por parte de los alumnos desde la App Híbrida. También se ha desarrollado utilizando AppInventor.

Ilustración 17: Código QR appnativa

Ilustración 18: Código QR appweb

33

App IES Juan Gris



Bachillerato de Investigación

La aplicación principal: IES Juan gris; es una App híbrida destinada a los alumnos y padres, ya que podrán consultar notas, noticias, horarios etc. Para desarrollarla se ha usado Mobincube debido a que era el sitio web que mejor se adaptaba a nuestras necesidades, y a la hora de hacer pruebas era el que mejor resultados ha aportado.

Ilustración 19: Código QR para la descarga de la APP IES Juan Gris

34

Bachillerato de Investigación

6.1.

App IES Juan Gris

AppWeb IES Juan Gris

La plataforma elegida para desarrollar la appweb ha sido AppInventor, ya que es un sistema gratuito de probada solvencia (creado por el MIT y Google) para las características de este tipo de aplicación. Sólo está disponible para dispositivos Android.

Elementos de la App App inventor ofrece dos pantallas para el diseño: Una para la interfaz y otra para la programación.

La aplicación en realidad es un enlace a la web del Centro por lo que la pantalla de interfaz no se muestra y no se necesita ninguna interacción por parte del usuario. No obstante, es necesario introducir cada campo en la programación de la app.

Ilustración 20: visión de aplicación desde AppInventor

Ilustración 21: vista principal AppWeb

35

App IES Juan Gris

Bachillerato de Investigación

Cuando se ejecuta la aplicación, se abre un “visor web”; que es un componente destinado a ver páginas Web. Se especifica la URL de destino desde el Diseñador, o en el Editor de Bloques.

No es un navegador con funcionalidad completa como puede ser Google Chrome, sino un enlace abierto a través de otra aplicación.

El editor de bloques es la segunda parte de la APP. No es visible, pero es la que hace posible el funcionamiento dando la tarea deseada a cada elemento.

Programación de la App. Para correr la aplicación son necesarios una serie de comandos que al unirse hacen posible el correcto funcionamiento:

Ilustración 22: bloques Appweb

Condicional: ejecuta una acción si se cumple una condición.

Procedimiento: Acción que se ejecuta. En este caso, abrir el visor web e ir a la URL www.iesjuangris.com.

Texto: Cuadro de texto para introducir palabras.

36

Bachillerato de Investigación

6.2.

App IES Juan Gris

App Nativa Calificaciones

Calificaciones es una AppNativa desarrollada con el mismo sistema que la Appweb: AppInventor. El sistema de desarrollo ha sido más complicado, ya que intervienen varias pantallas, componentes y bases de datos. Sólo está disponible para dispositivos Android. El enlace de descarga se encuentra al inicio del punto 6.

Elementos La app está formada por dos páginas. Se ha realizado una primera fase de acceso libre.

Queda pendiente para un futuro el añadir más complejidad introduciendo el registro de cada profesor mediante un usuario y una contraseña.

Los componentes actuales de la primera pantalla son: 

8 Etiquetas de texto; es un texto definido que después se visualizará en la pantalla.



3 Disposiciones horizontales. Son contenedores sobre los que se colocan los componentes. Su función es organizar la información de una manera más clara y precisa. (Rectángulos en negro).



2 Campos de texto, es un cuadro que permite al usuario introducir texto. Se utiliza para introducir los datos del alumno (nombre y un apellido).



3 Desplegables, es un componente desplegable que muestra una ventana emergente que contiene una lista de elementos. Dichos elementos se definen en el diseñador. En esta aplicación se han utilizado para introducir el nombre de cada asignatura, número de evaluación y la puntuación con la que se desea calificar al alumno.

Ilustración 23: interfaz calificaciones



1 Botón, que detecta cuándo se hace clic sobre él, y permite mandar la nota a una base de datos online. (Botón “Aceptar”).



1 Miniwebdb1, es un componente no visible que puede establecer comunicación con un servicio Web para almacenar información online.



1 Imagen de fondo de uno de los pasillos del instituto.

37

App IES Juan Gris

Bachillerato de Investigación

Los elementos de la segunda página son bastantes sencillos, utilizados solamente para indicar que la nota se ha subido de manera correcta: 

2 etiquetas, que indican que la nota se ha publicado correctamente.



1 disposición horizontal, formada por dos botones.



2 botones, uno para retroceder a la primera página y seguir poniendo calificaciones, y otro para salir de la app.



1 miniwebdb1 para almacenar los datos.



1 imagen de fondo de uno de los pasillos del instituto.

Ilustración 24: 2º pantalla calificaciones

38

Bachillerato de Investigaciรณn

App IES Juan Gris

Programaciรณn Cada pantalla cuenta con sus propios bloques de programaciรณn, que se unen para dar sentido al funcionamiento de la app.

Los bloques de la primera pรกgina son los siguientes:

Ilustraciรณn 25: bloques app calificaciones (1)

39

App IES Juan Gris

Bachillerato de Investigación

Ilustración 26: bloques app calificaciones (2)

Todos los tipos de bloques de App Inventor son esenciales. Pero en esta aplicación destacan principalmente 4: 

 



40

Condicionales: son los bloques iniciales de color mostaza. Su función es que cuando se cumpla una condición, por ejemplo, hacer clic, realicen la acción que se necesite, expuesta en otro bloque. Puede ser abrir otra pantalla o almacenar datos.

Funciones: son los bloques morados. Estos bloques son los que expresan la acción, pero no tienen autonomía, sino que necesitan un condicional para que funcionen.

Variables: son los bloques de color rojo y sirven para que se ejecute la función. Hay distintos tipos de variable, desde la más sencilla como puede ser cambiar el nombre de un elemento hasta unir diferentes elementos de la app como los campos de texto como si fuera uno solo.

Los bloques de color verde solo sirven para indicar el elemento en el que se desea añadir la acción, por ejemplo, el campo “nota”.

Bachillerato de Investigación

App IES Juan Gris

Para aclarar toda duda posible se explicará el primer conjunto de bloques (ilustración 25): El primer bloque es un condicional. La condición que se debe cumplir es pulsar en “botón uno” (bloque de programación “When botón Uno.Click”). Al cumplirse esta condición se realizará la función encajada (CallTiniWebDB1.GetValue), que almacenará en la base de datos “TiniWebDB1” el elemento a mostrar “desplegable 2 (cuadro de texto “nota”). Tan solo se podrá acceder a este cuadro una vez introducidos “nombre”, “apellido”, “desplegable 3” (asignatura) y “desplegable “1 (evaluación), los cuales se ha unido a través de la variable “join”. Una vez hecho clic en aceptar se abrirá también una segunda pantalla llamada “dos”.

El resto de grupos de código son también condicionales basados en cada uno de los elementos, para introducir cada apartado en la base de datos.

La segunda pantalla cuenta con menos bloques, ya que alberga menor información. La primera pantalla es la principal, en la que se encuentra toda la información relevante. Esta solo sirve para que el profesor se asegure de haber puesto la calificación de forma correcta.

Las funciones nuevas que se introducen en esta pantalla son cambiar el tipo de letra, el color de fondo o volver a la página anterior.

41

App IES Juan Gris

Bachillerato de Investigación

Ilustración 27: bloques app calificaciones (3)

Ahora aparecen dos nuevos tipos de bloques aparte de los ya explicados:  

42

Listas: son los bloques de color azul cuya función es crear listas de elementos a los que asignar una acción de un modo parecido a la variable “join”.

Transformación: es el bloque de color naranja que permite cambiar el formato de letra o el color de fondo.

Bachillerato de Investigación

6.3.

App IES Juan Gris

App híbrida IES JUAN GRIS

La app híbrida, que como ya se comentó anteriormente es la que mejor se adaptaba a las necesidades del instituto. Se ha creado utilizando el sistema de desarrollo de Mobincube, (plataforma explicada en el punto 4.8). A continuación, se profundizará en esta página.

Una vez elegido desarrollar la aplicación desde cero (opción de Mobincube opuesta al inicio con plantillas), se debe escoger el tipo de pantalla que va a tener cada una de las partes de la app.

Los diferentes tipos de pantalla se pueden ver en la siguiente ilustración:

Ilustración 28: tipos de páginas de Mobincube

43

App IES Juan Gris

Bachillerato de Investigación

Cada tipo de pantalla tiene una función específica y unas características: 

Lista de opciones; permite crean un menú, con los apartados que se seleccionen; a cada uno de ellos se le puede añadir una acción. Tan solo permite modificaciones en la orientación: vertical u horizontal.

Ilustración 29: página lista de opciones

44

Bachillerato de Investigación



App IES Juan Gris

Detalle; es el tipo de pantalla más importante para esta aplicación, ya que todas las demás se basan principalmente en esta. Permite crear una pantalla en la que se puede añadir imágenes, textos… dándole una función (acción que realizan) a cada uno de estos elementos. Combinando estos, se pueden obtener numerosas formas, como menús, listas, formularios, etc.

Ilustración 30: elementos de una página “detalle”

Las posibles funciones de cada elemento aparecen en la ilustración 31:

Ilustración 31: función de los elementos de Mobincube

45

App IES Juan Gris



Bachillerato de Investigación

Imagen interactiva; Este tipo de pantalla se basa en una única imagen. Dentro de esta imagen se pueden señalar zonas (áreas) y asignar una función a cada área. De modo que cuando se pulse esa zona se realizará una acción, como ir a otra pantalla. Está principalmente desarrollada para crear juegos o menús.

Ilustración 32: funcionamiento de una imagen interactiva

Por ejemplo, si se quiere asignar una acción a cada botón (ejemplo 1), habría que seleccionar el área de cada flecha y añadirle una función. (Ilustración 31).

Ejemplo 1

46

Bachillerato de Investigación



App IES Juan Gris

RSS; permite ver información cargada directamente en un RSS a través de un enlace. Un RSS es una forma de recibir información cada vez que se actualicen los contenidos del sitio web que tengan predestinado ese RSS.

Ilustración 33: introducción de un RSS



Mapa; ofrece la posibilidad de añadir una o varias ubicaciones en un mapa, donde se verá la dirección establecida y las calles de alrededor. También permite añadir más información a parte de la dirección.

Ilustración 34: mapas

47

App IES Juan Gris



Bachillerato de Investigación

Agenda; es un calendario en el que se puede seleccionar fechas, añadiendo una función a cada una de ellas, de modo que al hacer clic en ese día se lleve a cabo una tarea como por ejemplo conducir a otra pantalla.

Ilustración 35: agenda



Web; este tipo de pantalla ofrece dos posibilidades; una web online, dirección a un sitio web de forma directa mediante un enlace a través de la app como si fuera desde el navegador del propio teléfono, y la otra posibilidad; web local, añadiendo un JavaScript (códigos de programación avanzada).

Ilustración 36: web

48

Bachillerato de Investigación



App IES Juan Gris

Splash; su función es crear un retardo de camino a otra página, introduciendo una imagen.

Puedes seleccionar los segundos de retraso y la acción que se desea que se cumpla.

Ilustración 37: funcionamiento de “splash”



Visor de datos, permite ver informaciones almacenadas en bases de datos.

Las bases de datos se pueden crear desde Mobincube o pueden estar ya hechas, para ello, se debe importar la base de datos a la plataforma de datos de Mobincube; creando así un archivo db o .sqlite; formato apto para este tipo de pantalla.

Ilustración 38: tipos de bases de datos

49

App IES Juan Gris



Bachillerato de Investigación

Tienda; este tipo de pantalla no es compatible con Windows Phone ni con HTML5. Para empezar, hay que añadir una cuenta de PayPal donde irán los beneficios. A partir de ahí, se pueden añadir los productos que se deseen mediante imágenes y modificándolo a gusto del vendedor.

Ilustración 39: forma de pago en la página “tienda”

Una vez elegido el tipo de pantalla, se debe elegir los componentes que van a formar parte de esa pantalla; imagen, texto, campo, separador, tabla, texto online o videos.

Ilustración 40: componentes

50

Bachillerato de Investigación

App IES Juan Gris

7. Descripción de la App Un trabajo de este tipo está sometido a un proceso constante de actualización de forma que cada día podemos añadir algo nuevo. Esto ha provocado que haya una gran diferencia entre el producto final y el que originalmente se diseñó. Este proceso sigue sucediendo hoy en día y la app actual es diferente de la que se refleja en esta memoria.

Esta memoria está basada en los contenidos y desarrollos de la aplicación a fecha 1 de Enero de 2017, con lo cual las modificaciones que se hicieron a posteriori no están disponibles en este documento, pero sí que lo estarán en la presentación y defensa del trabajo.

La primera versión fue creada el 21 de junio de 2016 y se han sucedido mejoras hasta la forma en la que hoy se encuentra: diferentes pantallas, fondos, funciones, tipos de páginas etc.

El formato elegido también ha sufrido una evolución constante, buscando una optimización del espacio basándose en opiniones de usuarios que utilizan apps similares y en un muestreo realizado entre compañeros de clases (que previsiblemente utilizarán la aplicación en un futuro).

51

App IES Juan Gris

Bachillerato de Investigación

Finalmente se ha optado por un modelo parecido al del IES Torreblanca, descartando la opción de un menú desplegable inicial, pero utilizándolo en segundo plano ya que en la actual interfaz todos los elementos se encuentran a la vista.

La interfaz es uno de los puntos más destacables e importantes. Cualquier aplicación debe ser agradable a la vista del usuario, especialmente en el primer vistazo, ya que puede influir en su opinión hasta el punto de utilizarla de forma habitual o eliminarla de su dispositivo.

Esta pantalla posiblemente ha sido la que más cambios ha sufrido, cambios de imagen de fondo, de iconos, elementos, funciones etc.

Ilustración 41: interfaz app IES Juan Gris

52

Bachillerato de Investigación

App IES Juan Gris

A continuación, se hace una explicación de cada uno de los apartados-pantallas de la aplicación, en la que se explica su función y la manera en la que se ha creado.

Contacto Es una página “detalle” formada por distintitos elementos: ubicación, Twitter, teléfono, correo electrónico y página web. Cada uno de estos elementos llevan insertado una función, algunos mediante un comando interno de Mobincube que dirigen a otra página (Twitter y Web) y otros que permiten al usuario realizar la acción directamente, como llamar o enviar un email; todo esto haciendo un simple clic en el icono deseado.

Ilustración 42: “contacto”

  

 

Ubicación: conduce a Google Maps, con las indicaciones que hay que seguir para llegar al centro a modo de GPS. Teléfono: simplemente con hacer un click, conduce al marcador del móvil con el número de teléfono ya marcado.

Email: se ha utilizado un comando llamado “malito”, al hacer click te llevará a la aplicación de correo electrónico del terminal, teniendo escrito ya la dirección de correo y el asunto: App. Twitter: conduce a la sección Twitter de la App. Web: es un enlace interno a la Web del instituto.

Ilustración 43: “email”

53

App IES Juan Gris

Bachillerato de Investigación

Bachillerato a Distancia Es una página “visor web”, que dirige al sitio web del bachillerato a distancia, (http://mostolesdistancia.com). Esta parte es bastante importante ya que el IES Juan Gris es el único instituto de Móstoles que ofrece este servicio a sus alumnos.

Se ha decidido este tipo de pantalla ya que cuenta con la misma información que en la web, de forma que si se hubiera creado una pantalla detalle independiente de la web habría que copiar la misma información que aquí aparece.

Ilustración 44: “bachillerato a distancia”

Convocatorias Es una página “agenda”, provista de un calendario; el desarrollador tiene la posibilidad de seleccionar unos días que más tarde se marcarán en el calendario, con una función establecida a cada fecha. Que normalmente es “abrir pantalla” para que así al hacer clic, aparezca esa nueva pantalla con la información pertinente de ese día.

Ilustración 45: “agenda”

54

Ilustración 46: día 22 de marzo

Bachillerato de Investigación

App IES Juan Gris

Ubicación Es una página de “ubicación” que permite establecer direcciones, teniendo siempre una como principal; la del instituto. Mobincube permite añadir más información como la imagen o el código postal.

Su principal diferencia con respecto al apartado de ubicación que aparecía en la pantalla de contacto, es que aquí simplemente te muestra la ubicación mientras que la otra actúa a modo de GPS.

Libros de Texto

Ilustración 47: “ubicación”

Es una “vista web” de una plataforma de subida de documentos ISSUU; https://issuu.com en la que se encuentran disponibles las listas de libros de todos los cursos.

ISSUU es una plataforma online de visualización de documentos, como libros, revistas o archivos pdf, su servicio comenzó en 2007 y tiene el mismo funcionamiento que YouTube con sus videos. Su sistema es muy sencillo: se suben los documentos y las personas que deseen ver ese archivo tienen que tener el link, previamente se tiene que seleccionar su seguridad: pública, privada o a través del perfil; esto mismo ocurre con Google Docs. También existe la posibilidad de visualizarlos a doble página o a pantalla completa.

Ilustración 48: “libros de texto”

55

App IES Juan Gris

Bachillerato de Investigación

Fotos Esta página consiste en una “vista Web” de la sección imágenes de la página web del instituto.

Una vez subidas las fotos al sitio web principal del instituto, las imágenes estarían en la aplicación, disponibles a la vez para todos los usuarios.

Ilustración 49: “fotos”

Horarios Consiste en una “lista de opciones” en la que aparecen todos los cursos del instituto, una vez seleccionado el curso del alumno, conduce a otra página con vista detalle en la que aparece el horario del curso seleccionado. También aparece el nombre del tutor y su horario de reunión.

Solamente están cargados los horarios de dos grupos; SF1 y SF2, para demostrar el funcionamiento, en un hipotético caso de que la aplicación continue, estaría disponible para el año escolar 2017-2018 y contaría con los horarios de todos los cursos.

Ilustración 51: lista de cursos

56

Ilustración 50: horario SF1

Bachillerato de Investigación

App IES Juan Gris

Noticias Es un “visor web” de la sección de noticias del sitio web del instituto. Este es el mejor sistema ya que todos los cambios que se realicen en la web quedarán automáticamente actualizados en la aplicación.

Una buena forma de mandar alertas a los usuarios, es mediante el servicio de notificaciones de Mobincube.

Ilustración 52: "noticias"

Canal de Video Es una página especial llamada “canal de video” cuyo funcionamiento se basa en un enlace al perfil de “YouTube” del instituto.

De manera que, al hacer clic en este apartado, estaremos frente a todos los videos disponibles, estando las novedades en un primer lugar. El formato es bastante similar que el que se adquiere cuando se accede desde el navegador.

Ilustración 53: "YouTube IES Juan Gris”

57

App IES Juan Gris

Bachillerato de Investigación

Documentos En la web del instituto hay un apartado “documentos”. Pues bien, en esta sección de la app encontramos todos estos documentos desde la plataforma ISSUU, pudiendo descargarlos todos en formato pdf.

Ilustración 54: "documentos"

Twitter

Este tipo de página es una página especial que dirige a la red social “Twitter”; al perfil del instituto @JuanGrisTwittea. Permitiendo al usuario estar atento de todos los tweets que escriba la persona al mando de la cuenta. Para divisar todos los tweets no es necesario tener ninguna cuenta.

Ilustración 55: “Twitter @JuanGrisTwittea

Web Este tipo de pantalla consiste en un “visor web” pero su funcionamiento no se basa en HTML (web local), sino en un link externo al sitio web del instituto www.iesjuangris.com Dando la misma función que una app web o como si se accediera través de un navegador como Google Chrome.

Ilustración 56: "web www.iesjuangris.com"

58

Bachillerato de Investigación

App IES Juan Gris

Calificaciones

1º AppInventor

•Todo comienza desde el dispositivo del profesor, seleccionando los datos del alumno; clase, nota… Una vez establecida la nota, ésta se almacena en la base de datos de AppInventor.

(Instrucciones)

•El siguiente paso, interviene ya en la aplicación principal (Mobincube). El alumno abrirá la aplicación y se dirigirá al apartado de calificaciones, dónde se encuentran las instrucciones a seguir.

3º

•Una vez leidas, habrá que pulsar sobre el botón "siguiente" que conduce al visor web de la base de datos en la que se encuentran almacenadas las notas de cada alumno.

2º

Base de datos

4º

•El alumno introducirá sus datos y verá un mensaje con su nota.

Nota

5º

•Si se desea se puede volver a ver otra nota pulsando "Return to Main Page" y después "Get value".

Continuar

Esta es sin duda la parte más importante de la aplicación, ya que entra en juego la app “Calificaciones” creada con App Inventor y explicada anteriormente. Como se ha dicho, esta aplicación está dedicada exclusivamente a los profesores, pero en esta ocasión son los alumnos los que disfrutan de sus ventajas ya que se une con la app principal de Mobincube.

Su funcionamiento es complejo, debido a la combinación de aplicaciones, tipos de páginas, elementos… Las pantallas principales son “detalle”, “visor web”, y una “base de datos online”, más la aplicación de los profesores por otro lado.

59

App IES Juan Gris

Bachillerato de Investigación

En un primer momento, esta sección era un visor web de la base de datos de la app “Calificaciones”, pero a las personas que fueron probando la aplicación les surgían dudas sobre la forma de utilizarla. Por ello se optó por crear una página “detalle” inicial en la que se especificaran todos los pasos a seguir para poder ver la nota obtenida en esa asignatura.

Ilustración 57: pantalla “detalle” Calificaciones

Esta pantalla cuenta con una serie de imágenes en la que se explican paso a paso como conseguir ver la nota de forma que no hubiera duda alguna del funcionamiento.

60

Bachillerato de Investigación

App IES Juan Gris

Una vez leídas las instrucciones, se debe hacer clic en el botón “Siguiente”, que conducirá a una página “visor web”. Esta web será la de la base de datos de App Inventor en la que se encuentran almacenadas todas las notas de los alumnos subidas a través de la app “Calificaciones” por los profesores.

Ilustración 58: pantalla “visor web” Calificaciones

El “Tag” es la etiqueta que determina qué elemento de la base de datos se está solicitando y debe coincidir con los valores suministrados por el profesor al introducir la nota a través de la app “Calificaciones”.

Para ello el usuario deberá introducir sus datos: nombre, apellido, asignatura y evaluación.

De forma que al pulsar sobre “Get value” saldrá un mensaje “Value NOMBREAPELLIDOASIGNATURAEVALUACIÓN”, “nº obtenido”.

A continuación, si se desea volver a mirar la nota de otra asignatura, habría que pulsar en “Return” “Get value” y se volvería a estar en la pantalla “visor web”.

61

App IES Juan Gris

Bachillerato de Investigación

A continuación, en el “Ejemplo 2” se podrá ver un cómo funciona todo el proceso, uniendo las dos aplicaciones:

Ejemplo 2: Proceso que interviene en la pantalla “Calificaciones”

62

Bachillerato de Investigaciรณn

App IES Juan Gris

63

App IES Juan Gris

Bachillerato de Investigación

Otros elementos Otros elementos presentes en la aplicación son: 

La barra de navegación superior: Esta barra cuenta con dos botones, con una función cada uno. Uno de ellos son las tres líneas (botón izquierdo) que permiten acceder a un menú desplegable con cada uno de los elementos presentes en el menú principal, el otro botón es la flecha de retroceso (botón derecho) cuya misión es volver al lugar anterior.

Ilustración 59: "barra de navegación superior"



Menú desplegable: Este menú está disponible sólo accediendo a través de la barra de navegación superior, pulsando el botón de la izquierda. En un principio se decidió prescindir de esta forma como menú principal debido a cuestiones estéticas, subrogándolo a un segundo plano, pero con las mismas funciones y apartados que el principal.

Ilustración 60: "menú desplegable"

64

Bachillerato de Investigación

App IES Juan Gris

8.

Errores y posibles mejoras.

Tanto la app “Calificaciones”, como la app “IES Juan Gris” han sufrido un gran número de modificaciones desde sus inicios.

La aplicación híbrida (Mobincube) comenzó a ser desarrollada en junio del 2016 mientras que la app nativa (App Inventor) no se acabó hasta octubre de ese mismo año.

A la hora de crear ambas aplicaciones se ha tenido en cuenta las limitaciones de cada página. Se eligió Mobincube por sus amplias características y por su fácil manejabilidad, pero conociendo sus limitaciones; como la publicidad; bastante molesta, de su versión gratuita o la mala visión de los sitios web debido al amplio zoom.

Con App Inventor las restricciones no son menores, ya que para una adecuada vista general tienen que intervenir las disposiciones verticales u horizontales necesarias hasta conseguir la posición deseada. Otro defecto de este sistema es que los elementos son poco agradables a primera vista, todo muy cuadrado, con poca interactividad para que el programador pueda personalizar la estética.

65

App IES Juan Gris

Bachillerato de Investigación

Los cambios sufridos en “Calificaciones” no han sido muchos. En la primera versión, el profesor era el encargado de escribir todo: nombre, nota, asignatura y evaluación. Tras el proceso de mejora, al seleccionar cada uno de esos apartados la aplicación ofrece un menú desplegable con todas las asignaturas, números del uno al diez y evaluación.

El proceso de actualización es constante y hay algunas que se podrían afrontar en un futuro para facilitar el uso tanto a profesores como alumnos:  La primera sería el registro de cada profesor a través de un usuario y contraseña para abrir la aplicación. De igual forma el introducir un usuario y contraseña por parte del alumno para poder ver las calificaciones sería el objetivo lógico a conseguir. Esto permitirá personalizar todos los servicios.  Un objetivo aún más ambicioso y más a largo plazo, sería ampliar los servicios ofrecidos al alumno tras introducir un usuario y contraseña: asignaturas, horarios, boletines informativos y por supuesto, sus calificaciones, todo personalizado.  Por último, hay campo de mejora en la forma de incluir entradas en la base de datos. En lugar de tener que introducirlos uno a uno, sería más práctico poder cargar bases de datos ya completas de las que extraer los elementos.

66

Bachillerato de Investigación

App IES Juan Gris

9.

BIBLIOGRAFÍA



Revista “Android Magazine” “Nº 5 EXTRA ANDROID. TRUCOS, HACKS & APPS”.



Montero Miguel, Roberto (2015) “Desarrollo de aplicaciones para Android”. Barcelona. Ed. “Ediciones de la u”. ISBN 9587621158



Ayuda Mobincube: http://support.mobincube.com/hc/es



“Android4all” https://andro4all.com/



“Xataka Android” https://www.xatakandroid.com/

67

App IES Juan Gris

Bachillerato de Investigación

Videos

68



“Conceptos básicos Mobincube.https://www.youtube.com/watch?v=p4pTpMMRpi0&index=1&list=PL0YlVnlvRztuomsX 0vbL2qbglU60_FmhW



“Añade módulos HTML en tus apps de Mobincube” https://www.youtube.com/watch?v=xYZUGWXPA0U&list=PL0YlVnlvRztuomsX0vbL2q bglU60_FmhW&index=12



“Como crear una base de datos en Mobincube” https://www.youtube.com/watch?v=MKEf2idqrOQ