Ejercicios 2

Ejercicio 1 - Configuración de PhoneGap (0.5 puntos)

Para completar el último ejercicio se pide que realicéis los siguientes pasos para todas las aplicaciones:

• Desactivar el fullscreen de las aplicaciones (ya que está activado por defecto).

• Crear un icono para cada aplicación con una resolución de 128x128 píxeles. Podéis hacer solamente uno por aplicación que se utilice para ambas plataformas y para todas las resoluciones. El dibujo del icono podéis diseñarlo vosotros mismos o simplemente poner el logo de la tecnología utilizada: HTML5 o Bootstrap, y el nombre de la misma.

• Crear un splashscreen para cada aplicación con una resolución de 480x800px. Podéis hacer solamente uno por aplicación que se utilice para ambas plataformas y para todas las resoluciones. Al igual que el icono, el dibujo del splashscreen podéis crearlo vosotros mismos o simplemente poner el logo de la tecnología utilizada y el nombre de la misma. Revisad que la configuración del fichero config.xml sea correcta y apunte a vuestras imágenes, y que tras compilar las imágenes se hayan copiado a la ruta correspondiente dentro de la carpeta platforms.

Ejercicio 2 - Usando la API de PhoneGap (2.5 puntos)

En este ejercicio vamos a probar algunas de las funcionalidades que nos ofrece la API de PhoneGap.

En primer lugar creamos un nuevo proyecto con el nombre "PhoneGapAPI" y modificamos el HTML del "Hola Mundo" para que cargue la librería de PhoneGap y espere hasta que esté lista (ver el código básico de ejemplo que se incluye en la sección "Eventos - deviceready").

A continuación vamos a crear un log de eventos en esta aplicación. En primer lugar creamos la sección HTML donde mostraremos el log:

<div id="log" style="margin:5px;padding:5px;border:1px solid silver;color:gray">
</div>

Desde JavaScript podremos añadir texto a esta sección haciendo:

var element = document.getElementById("log");
element.innerHTML += "- API de PhoneGap cargada.<br/>";

Se pide que mostréis mensajes de log cuando se produzcan los siguientes eventos:

• Se cargue la API de PhoneGap (deviceready).

• La aplicación se ponga en background (pause).

• La aplicación salga de background (resume).

• Se pulse el botón atrás (backbutton).

• Se pulse el botón menú (menubutton).

• Se pulse el botón para bajar el volumen (volumedownbutton).

• Se pulse el botón para subir el volumen (volumeupbutton).

Instalar el plugin para obtener información sobre el dispositivo utilizado y mostrarla en una tabla antes del log.

Instalar el plugin para obtener información sobre la conexión y añadir esta información:

• Añadir al log los eventos de online y offline.

• Añadir el tipo de conexión a la tabla inicial de información del dispositivo.

Instalar el plugin de la brújula y configurar el listener para que actualice la orientación del dispositivo cada segundo (mostrar junto a la información inicial del dispositivo).

Instala otro plugin (el que tu quieras de entre los oficiales de PhoneGap) y añade la información del mismo a la aplicación.

A continuación se puede ver una captura de ejemplo de la aplicación a desarrollar: