Anexo I

Crear una Aplicación Multiplataforma

a través de una Aplicación Web.

1.- Instalación del Paquete PhoneGap.

2.- Estructura básica de nuestro proyecto www.

3.- Archivo de configuración config.xml.

4.- Preferencias dentro del fichero config.xml.

5.- Plugins.

6.- Empaquetar para Android e IOS con PhoneGap

Build.

En este anexo aprenderás:

Con los conocimientos adquiridos en el curso somos capaces de realizar desde

una aplicación web de escritorio, una web para Smartphone o dispositivos con
pantalla especial hasta introducirnos en el gran mundo del Desarrollo de
Aplicaciones Multiplataforma para las distintas marcas existentes.

A continuación podrás ver una guía donde partiendo de un ejemplo realizado

en este curso, y con la ayuda de un Framework, podemos exportar a las
distintas plataformas iOS, Android, Windows Phone, Blackberry , etc.
solamente con elegirla, sin tener que conocer qué lenguaje usa cada
plataforma de forma nativa.

Posteriormente, una vez empaquetada la app para las distintas plataformas,

sólo tendrás que subirla a cada una de ellas y publicarla, es decir, tu aplicación
la podrás subir tanto a Play Store, Apps Store o cualquier otro.
Sí es verdad que es un pequeño paso, pero éste te abrirá un mundo de
posibilidades inmenso, ¿te atreves a dar ese paso?

1
 En el curso hemos comprobado que podemos hacer páginas
web y aplicaciones web multiplataforma a través de jQuery. Si
recordamos, se basaba en un archivo HTML, su código CSS3 y su
código en JavaScript o jQuery.

Vamos a usar PhoneGap para realizar un ejemplo de aplicación

multiplataforma. Para ello, necesitamos:

1- Un proyecto con sus archivos HTML5, CSS3 y JavaScript.

2- Editor de textos.
3- Emulador.
4- Paquete PhoneGap.
Para el punto 1, podemos crear cualquier aplicación web como
base. Como editor de textos, vamos a seguir usando Sublime Text 2
o cualquier otro editor que desees. Como emulador, vamos a seguir
usando Ripple Emulator, o cualquier otro que desees. Ahora tenemos
que solucionar el punto 4.

Se puede exportar aplicaciones de una forma muy sencilla y

automática con el propio PhoneGap Build, éste tiene un número
limitado de exportaciones gratuitas. Existen otros métodos no
tratados en este curso para hacerlo manualmente sin tener que usar
PhoneGap Build.

1.- Instalación del Paquete PhoneGap

Para instalar PhoneGap, nos dirigimos a la página web oficial:

http://phonegap.com/install

2
 En esta página nos comenta que debemos tener instalado
NodeJS previamente. Por lo que si no lo tenemos instalado, nos
debemos desplazar a la web oficial, descargar e instalar en nuestro
equipo:
http://nodejs.org/

Y en Mac, sería de forma usual a la instalación de cualquier

software:

3
 En MAC, cuando ejecutemos los comandos para la instalación
de PhoneGap, es posible que nos pida la instalación de XcodeBuild, en
tal caso, debemos instalarlo.

Una vez instalado podemos ejecutar unos comandos en la

consola de comandos, terminal o Shell, según el sistema operativo:

Windows:

C:\> npm install -g phonegap

Mac:

sudo npm install -g phonegap

Con esto tenemos instalado Node.js y PhoneGap. Ahora nos

podemos crear un proyecto, volvemos a usar la consola y nos
creamos una aplicación que se llame appHolaMundo, ejecutamos en
la consola o terminal:

phonegap create appHolaMundo

¡IMPORTANTE!! Nos ha creado un proyecto con varias carpetas

dentro de la cuenta de usuario, si estás en Windows
"C:\Users\TuUsuario\appHolaMundo" y si estás en otro sistema
operativo será en la raíz de la cuenta de tu usuario.

Ahora debemos copiar nuestro proyecto completo

appHolaMundo a la carpeta raíz de nuestro servidor web, si
recordamos era en C:\wamp\www o httpdocs... Depende del sistema
operativo y el servidor web que tengamos instalado.

Si analizamos el interior de la carpeta tendremos varios

archivos y carpetas, la que nos interesa será la que tiene de nombre
www, que será la que contendría nuestra aplicación web:

4
 Si activamos el servidor apache y nos dirigimos a la raíz del
servidor, y ejecutamos escribiendo en el navegador
appHolaMundo/www nos aparecerá la siguiente pantalla:

5
 Como podemos apreciar, PhoneGap está buscando un
dispositivo para conectar, es decir, no hemos arrancado el emulador.
Es una página de inicio que tiene PhoneGap cuando crea los
proyectos por defecto. Debemos irnos a Ripple Emulator y Activar el
emulador seleccionando Enable.

Una vez realizado nos aparece otra ventana, en la cual vamos a

Seleccionar Apache Cordova / PhoneGap.

Y ya nos aparece la pantalla que estamos acostumbrados a

trabajar con jQuery Mobile y a partir de ahí ya observaremos que el
icono inicial ha cambiado y nos indica que ya ha conectado con el
dispositivo:

6
 ¿Qué partes son las más importantes en nuestro proyecto
PhoneGap por ahora? Podíamos resumirlas inicialmente en las
siguientes:

PROYECTO PHONEGAP

Carpeta www
HTML5 ARCHIVO DE PLUGINS
CONFIGURACIÓN PREFERENCIAS
CSS3
JavaScript config.xml

Carpeta www: Donde tendremos nuestros archivos de la

aplicación web.

7
 Archivo de configuración: Con este archivo delimitaremos los
permisos, preferencias, versiones a exportar (Android, iPhone, etc.).
Los iconos y muchas más cosas.

Preferencias: Se entiende como preferencias a aquellas que

va a usar nuestra aplicación para que funcione correctamente, la
versión con la que se va a compilar (se debe omitir en caso de usar
PhoneGap Build), la orientación del dispositivo, si es en modo
pantalla completa (en caso de crear un juego), etc.

Plugins: Aquellos plugins que vamos a usar, en nuestro caso al

usar la versión web, automáticamente detectaría los plugins que
necesitamos en nuestro proyecto para funcionar correctamente.

2.- Estructura básica de nuestro proyecto www.

Se pueden enriquecer el código HTML para usar algunas

funciones primitivas del dispositivo, pero se salen del propósito de
este curso. Podemos decir que vamos a tener que tener como mínimo
un archivo index.html donde tendremos nuestro código HTML5 y
otro fichero que podemos llamar index.js donde iniciaremos el
dispositivo.

En relación al index.html sólo tenemos que enlazar o "linkar"

dentro del <head></head> el archivo index.js y la librería
cordova.js:

<input type="text/javascript" src="js/cordova.js"></script>

<input type="text/javascript" src="js/index.js"></script>

También tendremos que modificar un poco el metadato que teníamos

y modificarlo por el siguiente:

<!-- WARNING: for iOS 7, remove the width=device-width and

height=device-height attributes. See
https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1,
maximum-scale=1, minimum-scale=1, width=device-width,
height=device-height, target-densitydpi=device-dpi" />

Como podemos ver entre los comentarios, existe una señal de

advertencia o warning si lo hacemos para IOS7, dependiendo de la
versión para la que vayamos a compilar. Hay que estar muy
pendiente de estos mensajes y asegurarnos que estamos usando la
información correcta, y en caso de duda, siempre consultar la
documentación.

8
 Nuestro index.html podría tener el siguiente aspecto, debes
fijarte que he usado como base el ejemplo que realizamos en el
módulo de jQuery Mobile para tener algo en el <body> del
documento y no poner sólo el texto de hola mundo.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Módulo jQuery Mobile</title>
<input type="text/javascript" src="js/cordova.js"></script>
<input type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.min.css">
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes.
See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1,
minimum- scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

</head>
<body>
<section id="inicio" data-role="page">
<header data-role="header">
<h1>CABECERA</h1>
</header>
<article data-role="content">
<p>CONTENIDO DE LA PÁGINA<p>
</article>
<footer data-role="footer" data-id="menuInferior" data-position="fixed" data-theme="a">
<nav data-role="navbar">
<ul>
<li><a href="#inicio" class="ui-btn-active ui-state-persist"
data-icon="home">Inicio</a></li>
<li><a href="#formacion" data-icon="grid">Formación</a></li>
<li><a href="#experiencia" data-icon="star">Trabajos</a></li>
<li><a href="#otros" data-icon="info">Otros</a></li>
<li><a href="#contactar" data-icon="mail">Contactar</a></li>
</ul>
</nav>
</footer><!-- /footer -->

</section><!-- /page -->

</body>
</html>

Dentro del archivo cordova.js estarían las propias funciones

creadas en JavaScript que podremos usar según necesitemos. Pero sí
es necesario asegurarnos que el documento se ha cargado
correctamente, al igual que nos pasaba con jQuery para no acceder a
elementos y tener problemas ya que no estén disponibles.

Para ello, nos vamos a crear el otro archivo que he comentado

index.js que va a contener un escuchador deviceread para que
cuando termine de leer el dispositivo realice las llamadas a las
funciones. El esquema sería el siguiente:

var app = {
// Constructor de la Aplicación
initialize: function() {
this.bindEvents();
},

9
 // Enlazamos el escuchador de eventos
//
// Enlazamos algun evento que sea requerido en el inicio de la aplicacion, como por ejemplo
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// Manejador del evento deviceready
//
// El alcance de es el evento. Con el fin de llamar al evento recibido 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Actualiza el DOM con el evento recibido
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');

listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');

console.log('Received Event: ' + id);

}
};

Resumiendo podríamos decir que tendríamos que tener un

archivo index.html y un archivo index.js, aunque este último se
podría integrar dentro del mismo archivo no es conveniente por ahora
para separar por un lado el código propiamente HTML del resto.

Si ejecutamos la aplicación y tenemos activo el emulador por

ejemplo con un Nexus 4, veremos algo parecido a esto:

10
3.- Archivo de configuración config.xml.

Si recordamos dentro de nuestro proyecto, había una carpeta

www, y dentro de ésta un archivo llamado config.xml:

Este archivo es un archivo XML que tiene el contenido y

configuración de nuestra aplicación. Existen muchas características
que se definen en él. Vamos a ver la estructura por encima para
hacernos una idea y tendremos que hacer un gran estudio y esfuerzo
para la exportación correcta para las diferentes plataformas.

Inicialmente, como ya estamos acostumbrados, en la primera

línea nos indica el tipo de archivo, la versión y la codificación del
mismo, como vimos utf-8:

<?xml version='1.0' encoding='utf-8'?>

Todo el fichero está contenido dentro de las etiquetas

<widget>
</widget>

Indicando al inicio información primordial del proyecto: el id, la

versión y el espacio de nombres. La id es fundamental para no
crear conflictos con otras apps, para ello se suele usar la notación
Reverse DNS, que consiste en el nombre del dominio al revés y
seguido de la aplicación. Por ejemplo, si tuviéramos un dominio que
se llama http://www.aplicacioneswebmultiplataforma.es , y nuestra
aplicación se va a llamar appHolaMundo, tendríamos que usar:

es.aplicacioneswebmultiplataforma.appHolaMundo

11
 La versión indicaría la versión actual, importante para futuras
actualizaciones llevar un control creciente de las actualizaciones en
cada versión.

Y el xmlns para proporcionar elementos y atributos con

nombre único en el archivo.

Posteriormente vienen los datos referidos al proyecto, <name>

y <description> estos serán los que vea el usuario en relación a tu
aplicación, por lo que te recomiendo que busques y seas lo más claro
posible en él.

Posteriormente vienen los datos del autor, a través de la

etiqueta o tag <author></author> podremos declarar un email del
autor, una web del autor y su nombre. Estos datos son importantes
porque si el usuario de la aplicación se quiere poner en contacto con
nosotros (los desarrolladores de la aplicación) tendremos que facilitar
de algún modo esta información.

Por ahora, nuestro fichero tendría el siguiente aspecto:

<?xml version='1.0' encoding='utf-8'?>

<widget id="es.aplicacioneswebmultiplataforma.appHolaMundo"
version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>Hola Mundo Multiplataforma</name>
<description>
Es un ejemplo sencillo de una aplicación web exportada con PhoneGap
</description>
<author email="support@aplicacioneswebmultiplataforma.es"
href="http://www.aplicacioneswebmultiplataforma.es">
Equipo técnico web multiplataforma
</author>
...
...

Dentro de este fichero también vamos a definir por bloques

varios aspectos:

Las preferencias (preference), los plugins (gap:plugin), los

iconos (icon) y las imágenes de carga (gap:splash).

Respecto a los iconos debemos tener en cuenta que cada

dispositivo puede tener un formato, por lo que debemos ser lo más
estándar posible y dotar a nuestras aplicaciones de las diferentes
resoluciones que existan para que por ejemplo, ya sea un iPhone 5 o
un Nexus 4, utilice correctamente la resolución. Así se verá el icono
de la aplicación correctamente independientemente del dispositivo.
Pasa igual con las imágenes splash.

12
4.- Preferencias dentro del fichero config.xml.

Existen muchas preferencias que podemos definir en nuestra

aplicación a través de la etiqueta <preference>. Algunos ejemplos
pueden ser:

<preference name="phonegap-version" value="3.5.0" />

* Versión para la compilación de PhoneGap.
<preference name="orientation" value="default" />
* Orientación del dispositivo: por defecto, landscape (apaisado) o
portrait (retrato).

Con nuestro emulador podemos cambiarla, simulando cómo se vería

la aplicación con una orientación diferente:

landscape

portrait

<preference name="fullscreen" value="true" />

* Si se fuerza a pantalla completa o no (usualmente para juegos)
<preference name="android-minSdkVersion" value="7" />
* En caso de exportar para Android, el mínimo de SDK que soporta
nuestra aplicación

Y así podemos configurar muchas más cosas, para ayudarnos a

la configuración de este archivo tenemos que usar la documentación:

13
 http://build.phonegap.com/apps

Tendremos que darnos de alta para poder usarla, es gratuita y

nos vendrá bien tenerla para posteriormente exportar y trabajar con
nuestros proyectos:

Para darnos de alta, seleccionaremos Register a new

account, y se nos abrirá una nueva página.

Aquí podemos ver las opciones que por ahora nos ofrece
PhoneGap. Nosotros podemos crear una Aplicación Privadas de forma
gratuita, y a partir de ahí, si queremos añadir más aplicaciones,
tendremos que pagar una cuota mensual. Existen otros métodos
como se comentó anteriormente para no usar PhoneGap Build, pero
éstas son más manuales, menos rápidas y requieren de otros
conocimientos que no están dentro de este curso.

14
 Si no tenemos un Adobe ID, tendremos que crearnos uno,
seleccionando en Get an Adobe ID.

Una vez rellenos los datos, tendremos acceso a nuestra cuenta.

Con ella podemos empezar a trabajar, además ya si podremos
acceder a la documentación:

http://docs.build.phonegap.com/en_US/#googtrans(en)

Si nos fijamos está todo en inglés, pero ya hoy en día debemos

intentar manejarnos con el idioma, sobre todo en programación para
poder tener las últimas modificaciones.

15
 Con esta documentación podemos tener la ayuda necesaria
para rellenar correctamente el fichero config.xml, iconos para cada
plataforma, plugins, etc.

5.- Plugins.

Los plugins son la forma de extender funcionalidad cuando

usamos HTML con PhoneGap permitiendo la ejecución de código
nativo invocado desde JavaScript. En principio se necesitan otros
conocimientos que no hemos visto en este curso, para poder
interactuar con la parte nativa del dispositivo.

Debemos pensar que si hemos usado esas partes digamos

"especiales" distintas de HTML, necesitamos algún método o forma
para poder comunicarnos con la parte nativa. Esto se hace a través
de plugins, y PhoneGap los usará cuando sea necesario. Por lo que si
estamos usando su aplicación con PhoneGap Build, él detectará que
no vamos a usar la cámara, ni el estado de la batería, etc. y no usará
los plugins.

A modo de ejemplo, tenemos los siguientes plugins para poder

usar con PhoneGap:

<gap:plugin name="org.apache.cordova.battery-status" />

16
 <gap:plugin name="org.apache.cordova.camera" />
<gap:plugin name="org.apache.cordova.media-capture" />
<gap:plugin name="org.apache.cordova.console" />
<gap:plugin name="org.apache.cordova.contacts" />
<gap:plugin name="org.apache.cordova.device" />
<gap:plugin name="org.apache.cordova.device-motion" />
<gap:plugin name="org.apache.cordova.device-orientation" />
<gap:plugin name="org.apache.cordova.dialogs" />
<gap:plugin name="org.apache.cordova.file" />
<gap:plugin name="org.apache.cordova.file-transfer" />
<gap:plugin name="org.apache.cordova.geolocation" />
<gap:plugin name="org.apache.cordova.globalization" />
<gap:plugin name="org.apache.cordova.inappbrowser" />
<gap:plugin name="org.apache.cordova.media" />
<gap:plugin name="org.apache.cordova.network-information"
/>
<gap:plugin name="org.apache.cordova.splashscreen" />
<gap:plugin name="org.apache.cordova.vibration" />

6.- Empaquetar para Android e IOS con PhoneGap Build.

Vamos a ver a continuación un ejemplo de cómo obtener el

archivo empaquetado para las dos tiendas más comunes de
aplicaciones (Android e iOS). Debemos recordar los siguientes
puntos:

- Vamos a usar una aplicación totalmente web. La podemos crear

anteriormente con jQuery Mobile y luego adaptarla, o crearla
directamente desde el proyecto de PhoneGap creado.
- Necesitamos tener instalado NodeJs, Emulador, Editor de
textos, Servidor Web y tener instalado PhoneGap.
- Crearemos el proyecto con el comando: phonegap create
nombre.
- Cogeremos el proyecto y lo copiaremos a la carpeta raíz de
nuestro servidor web, ya sea www o httpdocs.
- Dentro del proyecto que hemos creado, tendremos una carpeta
www, y es ahí donde vamos a alojar los archivos de nuestra
aplicación web, se recomienda copiar los archivos a esta
carpeta y no eliminar todo, ya que existen archivos y carpetas
que nos pueden interesar mantener. (index.js, config.xml, etc.)
- Tenemos que modificar los archivos agregando las cabeceras
correctas, añadiendo los archivos JavaScript de cordova.js y el
de la propia página, usualmente index.js.
- Tenemos que agregar los archivos JavaScript necesarios en la
ruta que hayamos indicado.

17
 - Tenemos que comprobar las resoluciones, las rutas y adaptar
las imágenes del icono de la aplicación a todos los formatos
posibles para tener la máxima compatibilidad gráfica con los
dispositivos. Este icono se referirá al icono que le aparecerá al
usuario cuando busque tu aplicación dentro de su dispositivo.
- Tenemos que revisar el archivo config.xml dentro de nuestro
proyecto y asegurarnos que los datos están correctamente
rellenos, un ejemplo puede ser:
<widget id="es.aplicacioneswebmultiplataforma.appHolaMundo"
version="1.0.0" xmlns="http://www.w3.org/ns/widgets"
xmlns:gap="http://phonegap.com/ns/1.0">
<name>Hola Mundo Multiplataforma</name>
<description>
Es un ejemplo sencillo de una aplicación web exportada con PhoneGap
</description>
<author email="support@aplicacioneswebmultiplataforma.es"
href="http://www.aplicacioneswebmultiplataforma.es">
Equipo técnico web multiplataforma
</author>
,,,,,
- Tenemos que tener una cuenta Adobe ID que podemos
obtener de forma gratuita.

Partiendo de todos los puntos anteriores vamos a ver cómo

podemos generar nuestros archivos empaquetados para las
diferentes plataformas. Antes de nada, debemos saber que para
poder hacerlo vamos a necesitar generar unas keys o claves
asociadas a nuestro proyecto para hacer la exportación real a las
distintas tiendas.

Para poder generar estas key necesitamos estar dados de alta

como desarrolladores en las diferentes plataformas, y si
desarrollamos para Apple tendremos que estar obligatoriamente
dados de alta antes de poder continuar en el siguiente punto. Por
eso, vamos a usar la generación de claves para un proyecto en
Android, ya que en éste caso, podemos generar las keys sin tener
que pagar nada, incluso no necesitamos para éste punto estar dados
de alta como desarrolladores de Android.

Cuando generemos nuestra keys, debemos tener cuidado de

nunca perder la clave, ya que es el identificador de nuestro proyecto,
y para cualquier cambio, actualización en la aplicación, necesitaremos
esa clave para poder acceder a ella.

Como vamos a ver un ejemplo ilustrativo, vamos a obviar el

tema de la key o clave de la aplicación, pero recuerda que ésta será
necesaria cuando estés en un proyecto real.

18
 Ahora podemos continuar con la exportación a las diferentes
plataformas; necesitaremos inicialmente irnos al fichero config.xml y
comentar las líneas que se refieren a la versión de PhoneGap, ya que
estamos usando la propia aplicación de PhoneGap Build y él usará la
versión que crea conveniente. Debemos dejar el fichero con la línea
comentada o borrada:

...
...
</author>
<preference name="permissions" value="none" />
<!-- <preference name="phonegap-version" value="3.5.0" /> -->
<preference name="orientation" value="default" />
<preference name="target-device" value="universal" />
...
...

Vamos a tener que definir también en nuestro fichero a qué

plataforma vamos a exportar, añadiendo en el fichero config.xml la
información siguiente:

...
<gap:platform name="ios" />
<gap:platform name="android" />
<gap:platform name="winphone" />
...

En la mayoría de los casos es posible que no realicemos

directamente la exportación de las tres sino que vayamos perfilando
características y opciones para cada una de ellas. En este caso,
vamos a comentar qué queremos para las tres plataformas.

Ahora podemos subir la aplicación de dos formas:

1. Mediante un .zip.
2. Si tenemos una cuenta GitHub, podemos compartir y
trabajar con las aplicaciones que tengamos en nuestro
espacio de trabajo.

En nuestro caso, vamos a usar el punto 1, por lo que vamos a

comprimir en un archivo .zip el contenido de la carpeta de nuestro
proyecto, es decir, no la carpeta de nuestro proyecto, sino el interior
del mismo. Por ejemplo, si comprimimos el proyecto appHolaMundo,
tendríamos lo siguiente:

19
 El archivo que debemos subir es el señalado con la fecha. Ahora
ya nos podemos ir a la web de PhoneGap Build y subir nuestro
archivo, usando la opción Upload a .zip file.

Cuando subamos el archivo, estamos subiendo el contenido a la

plataforma de PhoneGap Build.

Cuando termine de subir, veremos que nos da la información

que hemos rellenado nosotros en el archivo config.xml y el icono que
aparece es el por defecto de PhoneGap. En principio, al ser un

20
ejercicio de prueba, hemos usado el que viene por defecto. Por tanto
veremos los siguientes datos:

Si le damos a Ready to build, veremos que nos aparecen las

plataformas que hemos creado y en caso de existir errores nos lo
indicará.

Si vemos para IOS nos ha aparecido el icono en rojo. Si la

seleccionamos pinchando sobre el icono, veremos más información:

21
 Bien, ya tenemos la información suficiente de qué nos ha
pasado. Vayamos por partes:

Nos está indicando que primero tenemos que tener una key y
luego podemos arreglar ésta.

Como no nos hemos dado de alta como desarrolladores, todavía

no podemos generar key para esta aplicación. Pasamos a la siguiente
plataforma Windows Phone:

Aquí vemos que no nos ha dado error, pero sin embargo, si nos
deja descargarnos el archivo, y además nos da la posibilidad de
añadir el Publisher ID para descargárnoslo completamente.

Vayamos a la última plataforma que hemos elegido, para

Android:

22
 Al igual que pasaba con Windows Phone, nos podemos
descargar directamente el .apk, que como vimos en el curso es el
formato de proyecto para Android y es el que necesitamos para su
tienda.

Si nos descargamos esa aplicación a un Smartphone, y la

instalamos (recuerda que debes tener marcada la opción de:
Permitir la instalación de aplicaciones de otras fuentes
distintas al market o Play Store.

La instalamos veremos que efectivamente hemos creado una

aplicación para Android desde código HTML5. Si nos vamos al
dispositivo, veremos que nos ha creado un icono (el que habíamos
dejado por defecto) y si ejecutamos la aplicación vemos que
efectivamente se ejecuta tal y como la habíamos diseñado con
jQuery.

Capturas de pantalla en un dispositivo real Lenovo con Android 4.0.4

Ahora nos debemos hacer la siguiente pregunta:

¿Por qué se ha perdido todo el menú del teléfono y ocupa toda

la pantalla?

23
 Efectivamente, es porque en nuestro archivo de configuración,
habíamos seleccionado que el valor era a fullscreen o pantalla
completa. Si recordamos teníamos:

...
...
<preference name="fullscreen" value="true" />
...
...
¿Qué pasa si giro la pantalla?

En principio, no dijimos nada de esta opción en el archivo de

configuración, por lo que entonces se comportará como cualquier
aplicación, sólo que al estar en modo fullscreen seguiremos sin ver el
resultado. Esto lo definimos también en el fichero de configuración en
concreto en:

...
...
<preference name="orientation" value="default" />
...
...

Capturas de pantalla en un dispositivo real Lenovo con Android 4.0.4

Sólo nos quedaría darnos de alta como desarrolladores, y generar las

keys, o claves necesarias para cada plataforma y proyecto. Como
para algunas plataformas, este paso es de pago, os recomiendo que
hasta que no tengáis la aplicación finalizada y probada
correctamente, no es necesario generar las keys. Así nos aseguramos
que el proyecto está finalizado y estamos preparados, muchas veces
tardamos algunos meses más en realizar un proyecto y si tenemos
una cuota anual.

24
 Como podemos ver podemos generar desde un diseño creado
en HTML5, CSS y JavaScript o jQuery Mobile, somos capaces de
realizar aplicaciones para múltiples plataformas.

25