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:

PreviousEjercicios 1

Last updated 5 years ago

Was this helpful?

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.

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:

PreviousEjercicios 1

Last updated 5 years ago

Was this helpful?