Cpitulo 1 -Conociendo PhoneGap

Cpitulo 2 - Preparando el entorno

Cpitulo 3 - SDK de Android
Cpitulo 4 - Eclipse
Cpitulo 5 - SDK de iOS
Cpitulo 6 - Dreamweaver CS6
Cpitulo 7 - Estructura de una aplicacin
Cpitulo 8 - HTML5
Cpitulo 9 - CSS 3
Cpitulo 10 - JavaScript
Cpitulo 11 -Acceder informacin del usuario
Cpitulo 12 - Notificaciones
Cpitulo 13 - Detectar conexin
Cpitulo 14 - Acelermetro
Cpitulo 15 - Brjula
Cpitulo 16 - Geolocalizacin
Cpitulo 17 - Archivos;
Cpitulo 18 - Almacenamiento
Cpitulo 19 - Cmara
Cpitulo 20 - Contactos
Cpitulo 21 - Depuracin en navegadores
Cpitulo 22 - Depuracin en equipos
Cpitulo 23 - PhoneGap Build

A mi abuela, que me ense el valor de los libros. A mi

madre, que me di el coraje para escribirlo y a mi esposa,
que me dio la inspiracin.
Santiago, 2012

SOBRE EL AUTOR
Carlos Solis es Adobe Community Professional, speaker
en diversos eventos, entre ellos Adobe Express en Per y
Mxico, Latin Flash Tour y otros eventos en Costa Rica,
Colombia, Chile y Argentina.
Como desarrollador mvil ha creado soluciones para
varias marcas del Fortune 500 y colaborado con mltiples
startups en el Silicon Valley, Santiago, Tel-Aviv y New
York.
Certificado W3C en buenas prcticas mviles y fundador
del proyecto Revolucin Mvil. Firme creyente del
potencial de los desarrolladores latinoamericanos.

www.carlossolis.mobi

INTRODUCCION
Los dispositivos mviles han creado un nuevo mercado
que crece exponencialmente y esta repleto de nuevas
oportunidades.
Desde la llegada de las tiendas de aplicaciones o app
Stores la forma de distribuir software ha cambiado
radicalmente. Antes del 2008 - ao en que se inaugur la
App Store de Apple - para distribuir un programa, era
necesario crear una costosa estructura de distribucin y
marketing, hoy en da cualquier desarrollador tiene acceso
a una red global de clientes vidos de contenidos.
Muchos desarrolladores que trabajan lenguajes como
Objective-C, C, C++ o Java lograron incursionar
rpidamente en este nuevo mercado y monetizar sus
productos a travs de esta nueva red de distribucin que
generaron las App Stores.
Sin embargo, gran cantidad de desarrolladores que
apostaron por el desarrollo web se han quedado fuera de
esta bonanza, porque los lenguajes con los que se
construye la web no estn soportados para desarrollar
aplicaciones nativas.
PhoneGap abre una oportunidad a todos los

desarrolladores que han invertido aos de estudio y

perfeccionamiento en los lenguajes web, permitindole
crear aplicaciones nativas de alta calidad basadas en
lenguajes de su uso cotidiano como HTML, javascript y
CSS . PhoneGap es una de las mejores opciones para los
desarrolladores con conocimientos en lenguajes web que
deseen incursionar en el mundo del desarrollo mvil.
Con una tecnologa abierta, fcil de instalar en cualquier
plataforma y a un costo gratuito, PhoneGap es una opcin
real para desarrollar proyectos educativos, gratuitos o
comerciales.
En este libro aprenders a desarrollar aplicaciones
multiplataforma basadas en HTML5, CSS3 y Javascript
con ejemplos prcticos y realistas.
Desde la configuracin bsica y desarrollo, hasta la
publicacin final en las tiendas de aplicaciones,
aprenders todos los trucos prcticos que el autor de este
libro ha descubierto desarrollando aplicaciones con
PhoneGap.

Es para mi este libro?

El manual del guerrero mvil est planeado para ser una
gua introductoria a la creacin y desarrollo de
aplicaciones mviles con PhoneGap.
Los ejemplos y temas desarrollados ac son para usuarios
que nunca han desarrollado aplicaciones phonegap o que
tienen conocimientos bsicos y desean profundizar a un
nivel bsico - intermedio.
Cada captulo est redactado con la mayor claridad y en
la medida de lo posible se realizar una rpida induccin
sobre el tema, sin embargo es recomendable que el lector
tenga conocimientos bsicos sobre los lenguajes en los
que se basa PhoneGap : CSS3, Javascript, HTML5.
Luego de leer este libro el lector tendr un panorama
completo sobre el desarrollo de aplicaciones phonegap y
contar con bases slidas para seguir creciendo y
aprendiendo en el cambiante mundo de los dispositivos
mviles.

Como utilizar este libro?

Este es un libro prctico, rpido de leer y fcil de
comprender para poner manos a la obra de inmediato.
El libro est estructurado con un orden progresivo, cada
captulo se relaciona con el anterior y el objetivo final es
guiar al lector en un viaje de conocimiento desde lo ms
bsico hasta la publicacin final de su aplicacin. Pero si
usted, amable lector, es como el autor de este libro - y
muy posiblemente lo sea - tendr ansiedad por saltarse
captulos y buscar directamente la informacin que
necesita sintase libre de hacerlo! es ms, el autor le
invita a hacerlo!

Sobre el Manual del

guerrero mvil
El desarrollo en dispositivos mviles no es para
cobardes, se necesita una actitud desafiante, iniciativa y
mucha dedicacin, con un panorama siempre cambiante y
una fragmentacin de equipos casi infinita, no se puede
ver esto como un simple trabajo, cada da hay que estar
preparados para que todas las reglas cambien.
Para este trabajo no es suficiente un desarrollador normal,
se necesita un guerrero incansable, sediento de
conocimiento y dispuesto a darlo todo por alcanzar la
meta.
El libro del guerrero mvil es una coleccin pensada para
quienes necesitan informacin til y rpida, sin pginas de
relleno, sin introducciones interminables ni anlisis que
slo son tiles en la teora.
Este es un libro para aquellos que quieren hacer su trabajo
bien y tienen que hacerlo ahora mismo!

Ejemplos y ejercicios
Todos los ejemplos usados en este libro se encuentran
actualizados y disponible para descarga gratuita en la
siguiente direccin
www.manualdelguerreromovil.com/phonegap
En este libro utilizaremos - salvo casos en los que se haga
la salvedad - ejemplos funcionales en equipos android 2.2
en adelante y iPhone 5.0 en adelante que cubren a la
mayora de los usuarios de equipos mviles al momento
de escribir el libro.

Errores y correcciones
Aunque cada parte de este libro fue cuidadosamente
revisada siempre se nos puede escapar un error, si
encuentras alguno por favor notificarlo en el sitio oficial
del libro
www.manualdelguerreromovil.com/phonegap
Este libro digital tiene soporte para actualizaciones, sus
reportes de errores y correcciones sern tomados en
cuenta y sern entregadas gratuitamente a todos que
posean una copia.

Cursos y capacitaciones
Si desea recibir un curso online o presencial sobre los
temas de este libro contctenos sin compromiso en la
pgina oficial del libro para consultar sobre
disponibilidad y costos.

CONOCIENDO
PHONEGAP
Historia
El proyecto PhoneGap fue creado y dirigido por Nitobi,
una empresa canadiense fundada por Andr Charland y
Dave Johnson en los primeros aos de este milenio.
PhoneGap es un proyecto de cdigo abierto basado en
estndares web. Naci en el 2008 durante un evento
llamado iPhoneDevCamp, una conferencia informal de
desarrolladores, en la que buscan promover el desarrollo
de aplicaciones basadas en iOS y tecnologas web
estndar. En solo 2 das que dur el evento un grupo de
entusiastas desarrolladores logr crear un prototipo
funcional de lo que hoy conocemos como PhoneGap.
El proyecto salt a la fama en el 2009 cuando fue
premiado por el pblico como el mejor proyecto (
Peoples Choice Award ) durante la conferencia anual
Web 2.0 organizada por la prestigiosa editorial OReilly.

-Adquisicin de Adobe y nacimiento de

Cordova
El 4 Octubre del ao 2011 Nitobi fue adquirido por
Adobe. Con esta adquisicin se anunci que el cdigo
base de PhoneGap pasara a ser propiedad de la
Fundacin Apache bajo el nombre de Proyecto Apache
Cordova ( inicialmente llamado Apache Callback, nombre
ahora desechado ).
El cambio de nombre ha llevado a muchas confusiones
entre los desarrolladores, segn Brian Leroux - uno de los
lderes del proyecto - Cordova es el nombre con el que
se denomina al cdigo base del proyecto y ncleo central
de las aplicaciones. PhoneGap, es una "distribucin" que
hace uso de ese ncleo, tal y como los sistemas operativos
Debian o Ubuntu que, aunque son sistemas independientes,
son tambin distribuciones basadas en Linux.
Los creadores de PhoneGap - ahora parte de Adobe continan trabajando en el proyecto ahora enfocados en
integrar esta plataforma con las herramientas de Adobe y
servicios como PhoneGap Build.
La liberacin del cdigo fuente de PhoneGap le permitir
a la comunidad de desarrolladores mantener a perpetuidad
acceso a la licencia gratuita y espritu de cdigo abierto
que ampara la Fundacin Apache.

Para efectos de redaccin y orden, durante este libro

llamaremos PhoneGap tanto al proyecto Apache Cordova
como a PhoneGap y cualquiera de sus elementos.

Cmo funciona?
En pocas palabras, PhoneGap crea aplicaciones nativas
para dispositivos mviles a partir de lenguajes web (
HTML5, Javascript, CSS3, etc).
Esto lo logra a creando una instancia del navegador del
sistema que se controla travs de una interfaz de funciones
forneas (FFI por sus siglas en ingls).

La interfaz de funciones forneas es un mecanismo, por el

que un programa escrito en un lenguaje de programacin
puede realizar llamadas a funciones o usar los servicios
escritos en otro lenguaje.

En el caso de PhoneGap, este proceso se realiza al

permitir que los comandos de programacin hechos en
Javascript utilicen servicios escritos en lenguaje nativo de
la plataforma mvil en que se ejecuta la aplicacin, por
ejemplo Objective-C o Java.
El cdigo base de la aplicacin hecha en PhoneGap se
despliega en una instancia del navegador del sistema,
exactamente igual que una pgina web, pero, a diferencia
del navegador normal, la instancia que usa PhoneGap no
muestra controles de navegacin ni barras de
herramientas, sino que se muestra en pantalla completa, de
la misma forma que una aplicacin nativa.

-Webkit
La instancia de navegador en la que se despliega el
cdigo tiene, por lo general, un ncleo basado en el motor
de render Webkit.
Webkit es un proyecto de cdigo abierto que sirve como
motor a muchos de los principales navegadores web de
escritorio como Chrome, Safari, Konkeror o RockMelt y
de los navegadores mviles de iOS, Blackberry OS y
Android. Webkit est desempeando un papel crucial en
la implementacin de nuevas tecnologas como HTML5 y
CSS3.
Los principales actores de la internet como Apple, Adobe,
Microsoft y Google contribuyen con el proyecto Webkit
para que adopten rpidamente las nuevas tecnologas web
como HTML5, CSS3, AJAX Javascript. PhoneGap al
utilizar Webkit como base, tiene en general un buen
soporte sobre estos lenguajes.

- Aplicaciones Hbridas
Cuando se crea una aplicacin PhoneGap, el cdigo
basado en HTML5 y dems lenguajes web se empaqueta
en una aplicacin 100% nativa que muestra el cdigo a
travs de una instancia del navegador. La aplicacin tiene
acceso a todos los sensores del dispositivo al conectarse
de forma nativa a travs de la API de PhoneGap.
Por esta razn PhoneGap entra en la categora de
aplicacin hbrida: ejecuta una aplicacin web dentro de
una aplicacin nativa. PhoneGap combina la simplicidad
de los lenguajes web con el poder de los lenguajes
nativos, es, en sntesis, lo mejor de dos mundos.

Plataformas soportadas
Por un amplio margen PhoneGap es la tecnologa de
desarrollo mvil que tiene el mas amplio soporte de
plataformas distintas.
Gracias a que la mayora de los smartphones permiten
crear instancias del navegador en sus aplicaciones
nativas, PhoneGap solo crea clientes especficos para
cada plataforma, estos clientes interpretan un mismo
cdigo y envan comandos nativos a sus respectivos
sistemas operativos. Muy similar al principio que usan las
mquinas virtuales de Java o al del Player de Flash que
permiten ejecutar un mismo cdigo en muchas
plataformas.
Actualmente PhoneGap es soportado en 7 diferentes
plataformas:
iOS
Android
Windows Phone 7
Blackberry OS
WebOS
Symbian
Bada

Se pueden publicar en la
Appstore las aplicaciones
PhoneGap?
A inicios del ao 2010 Apple cambi las reglas para las
aplicaciones que se publicaban en su tienda, prohibiendo
aplicaciones hechas en lenguajes que no fueran nativos,
esta modificacin se hizo en medio de una guerra
meditica con Adobe y buscaba afectar directamente a
Flash que quera perfilarse como una herramienta de
desarrollo de aplicaciones para iPhone.
Tiempo despus en Octubre del mismo ao Apple revirti
sus trminos y volvi a aceptar aplicaciones creadas con
lenguajes no nativos.
Sin embargo, aunque hoy en da ya es posible publicar
aplicaciones basadas en cualquier lenguaje, el famoso
cambio de polticas nunca afect a PhoneGap y
posiblemente nunca lo afecte.
Desde el cambio original de reglas, Apple hizo la
salvedad de incluir a javascript y los lenguajes que se
ejecutan dentro de Webkit como lenguajes nativos, por lo
que aun durante el periodo en que las aplicaciones flash
fueron prohibidas, las aplicaciones PhoneGap siguieron

publicndose con total normalidad.

Es muy poco probable que con la enorme cantidad de
aplicaciones basadas en PhoneGap que existen
actualmente en la tienda de Apple y la profunda
integracin de Webkit en el sistema operativo, que algn
da se lleguen a restringir las aplicaciones basadas en
lenguajes web.
En resumen: es total y completamente seguro publicar
aplicaciones basadas PhoneGap en la Appstore de Apple
y en cualquier otra de las tiendas de aplicaciones de las
plataformas soportadas por PhoneGap.

Cuando usar PhoneGap?

PhoneGap es una plataforma muy verstil y el lenguaje
HTML5 en el que se basa est avanzando a pasos
agigantados, sin embargo, ninguna tecnologa es
absolutamente perfecta y PhoneGap no es la excepcin: no
todos los proyectos son aptos para trabajarlos con esta
tecnologa.
Vamos a analizar algunos tipos de aplicaciones y las
posibilidades que ofrece PhoneGap para cada una de
ellos.

-Aplicaciones informativas
Este es el tipo de aplicacin que funciona mejor con
PhoneGap: Mostrar informacin esttica o dinmica sobre
productos y servicios, desplegar textos, vdeos y
elementos grficos de alta calidad.
Una buena parte de las aplicaciones disponibles en las
tiendas de aplicaciones entra en esta clasificacin.
Crear una aplicacin de este tipo con PhoneGap es fcil y
rpido. El resultado final es prcticamente igual al de una
aplicacin nativa.
Por ejemplo, METAR Reader es una aplicacin para
pilotos areos que utiliza PhoneGap para mostrar e
interpretar informacin estndar sobre las condiciones
meteorolgicas en diferentes aeropuertos.

-Aplicaciones Utilitarias
Una de las categoras ms populares en las App Stores
son las aplicaciones utilitarias, que son todas aquellas que
nos sirven para hacer tareas y operaciones con nuestro
mvil desde lo crucial a lo trivial.
En esta categora estn las calculadoras de todo tipo,
linternas, monitores de memoria, lectores de cdigos QR
y miles ms. Esta es otra categora en la que el desarrollo
con PhoneGap se destaca positivamente.
Entre las aplicaciones utilitarias podemos incluir las que
nos ayudan a planificar y organizar nuestras tareas como
Diary Mobile. Esta aplicacin creada con PhoneGap
permite gestionar tareas y eventos que se sincronizan en la
nube.

-Adaptacin de Webapps
Entre las ventajas que tiene PhoneGap es que se pueden
crear aplicaciones completas usando los mismos
lenguajes que se utilizan para crear sitios web: HTML5,
CSS3 y Javascript.
Esto permite que con solo pequeas variaciones y
adaptaciones se pueda utilizar una web app o aplicacin
web y convertirla en una aplicacin mvil nativa.
Gracias a esta capacidad, las empresas pueden ahorrar
tiempo y dinero reutilizando sus aplicaciones basadas en
web, si ya estn optimizadas para equipos mviles, la
mayor parte del trabajo esta hecha.
El mejor ejemplo de este uso es la Wikipedia, que usa
PhoneGap para ofrecer en su aplicacin nativa los mismos
contenidos y servicios de la enciclopedia online.

-Juegos
Aunque PhoneGap no fue creado como una plataforma
dedicada para juegos, si es posible desarrollarlos aunque
con muchas restricciones.
No olvidemos que al trabajar sobre una instancia del
browser del sistema se genera una carga de procesador
adicional. La velocidad del navegador para renderizar los
elementos y realizar los clculos de javascript tiene un
impacto notable en el rendimiento, adems, la
complejidad del juego y la interaccin de mltiples
elementos grficos puede derivar en problemas de
rendimiento.
El juego Orbium creado en PhoneGap demuestra que es
posible crear juegos bsicos en esta plataforma. Aunque
si estas buscando crear un juego que haga uso intensivo
del procesador, es mejor que explores otras plataformas
como Flash, Cocos2D o Unity.

-Interaccin con los sensores

A diferencia de una simple aplicacin web creada con
HTML5, PhoneGap tiene acceso a la mayora de los
sensores y receptores del dispositivo mvil. Puede
acceder sin problema los sensores de GPS o la brjula
para ubicarse en el espacio o utilizar la cmara y
micrfono para registrar lo que pasa a su alrededor.
Utilizar los sensores del mvil con PhoneGap es muy
sencillo y solo necesita unas pocas lneas de cdigo.
ClicPic es un buen ejemplo del uso de los sensores, esta
aplicacin usa PhoneGap para acceder a la cmara del
equipo: Toma fotos, las procesa, clasifica y comparte en
su propia red social.

En general PhoneGap es una tecnologa bastante flexible.

Sus principales problemas son el rendimiento en
aplicaciones intensivas del procesador y el soporte
parcial de HTML5 o CSS3 en algunos sistemas
operativos, principalmente en las versiones ms antiguas.
Para esta plataforma, no se recomiendan aplicaciones que
usen animaciones avanzadas y clculos intensivos.

Siempre debe ponerse especial cuidado a todo lo que

tiene que ver con el rendimiento, en especial si se piensa
publicar aplicaciones que se ejecuten en equipos antiguos
o con procesador lento.
Con PhoneGap as como en cualquier otra tecnologa que
tenga que ver con dispositivos mviles, siempre tenemos
que ser cuidadosos con el uso de los limitados recursos
de un equipo mvil.

Licencia y condiciones de uso

A diferencia de otras plataformas de desarrollo,
PhoneGap es un proyecto de cdigo abierto,
completamente gratuito y basado en los estndares de la
web.
Desde octubre del 2011 tras la adquisicin de Nitobi por
parte de Adobe, PhoneGap es parte de la fundacin
Apache bajo el nombre de proyecto Cordova.
Al ser parte de esta fundacin est bajo la licencia
Apache versin 2.0, al igual que otros proyectos como
Android, Spring, o los servidores Tomcat y Apache.
Esta licencia permite a los usuarios de PhoneGap utilizar,
distribuir y modificar de manera gratuita y abierta el
cdigo.
La licencia permite comercializar aplicaciones sin pagar
regalas de ningn tipo, no es necesario incluir logos
oficiales o dar crditos a PhoneGap, Adobe o Apache y
no requiere la creacin de obras derivadas o publicacin
del cdigo fuente.
Es perfectamente seguro desarrollar aplicaciones
comerciales, educativas o de cdigo abierto sin riesgos
por el cobro de regalas o reclamos por el uso de

propiedad intelectual.

PREPARANDO EL
ENTORNO
Antes de comenzar a desarrollar aplicaciones para
mviles, tienes antes que instalar y configurar el entorno
de desarrollo con las herramientas en las que crears
aplicaciones para mviles.
A diferencia de otras plataformas ,PhoneGap no tiene un
entorno de desarrollo propio, por el contrario, trabaja
como plugin o extensin dentro de otros editores de
cdigo como Dreamweaver, Xcode o Eclipse.
Para crear una aplicacin mvil necesitars instalar adems de PhoneGap - las herramientas de desarrollo o
SDK's de cada plataforma en la que quieres desarrollar.
Un SDK es un conjunto de herramientas y utilidades que
permiten compilar cdigo fuente y convertirlo en una
aplicacin apta para ejecutarse en equipos mviles... y
eso es justo lo que usars para convertir tu cdigo
HTML5 una flamante aplicacin mvil.

Requerimientos de Sistema
Para crear y probar aplicaciones mviles en tu ordenador
necesitars instalar un editor de cdigo y los SDK de
Android y/o iPhone. Dependiendo de tu sistema operativo,
puede que necesites instalar programas adicionales (ver
detalles a continuacin).

-Requerimientos en Windows
Para desarrollar en PC necesitas un ordenador Windows
XP o superior, en este manual usaremos Windows 7 como
punto de referencia.
El JDK de JAVA crea el entorno necesario para correr el
emulador de Android y algunas herramientas de
depuracin. Muchos programas requieren este entorno y
es posible que ya lo tengas instalado en tu computador, de
lo contrario los instaladores de estos programas se
encuentran en el sitio de Oracle

http://www.oracle.com/technetwork/java/javase/downloads
Para utilizar todos los programas que se requieren para
desarrollar aplicaciones mviles, se sugiere una
configuracin mnima de:
1. Procesador Intel Pentium 4 o AMD Athlon 64
2. Microsoft Windows 7 o Microsoft Windows
Vista Service Pack 2.
3. 1 GB de RAM
4. Display de 1280x800 con tarjeta de video de 16-bit

-Requerimientos en Mac OS
En equipos Apple es necesario el sistema operativo
MacOS X 10.7.0 Lion o superior.
Aunque tambin se puede trabajar con el MacOS X 10.6
(Snow Leopard) se recomienda actualizar a la ltima
versin. La poltica de Apple es darle soporte nicamente
a la ltima versin de su sistema operativo y
eventualmente las versiones ms antiguas dejarn de ser
compatibles. En este manual se usar Mac OS Lion como
referencia.
Para utilizar todos los programas que se requieren para
desarrollar aplicaciones mviles, se sugiere una
configuracin mnima de:
1.
2.
3.
4.

Procesador Intel Multicore

Mac OS X v10.6
1GB de RAM
Display de 1280x800 tarjeta de video de 16-bit

-Requerimientos en Linux
1. Librera GNU C (glibc) 2.7 o superior.
Se recomienda usar Ubuntu Linux, versin 8.04 o
superior.
Las distribuciones de 64-bit deben ser capaces de ejecutar
aplicaciones de 32-bit.

-Conexin a internet
La conexin a internet es crucial no solo para descargar
programas y actualizaciones, tambin es requerida para
utilizar servicios como PhoneGap Build y algunos
emuladores que requieren el uso de conexin web.
Es posible crear y probar aplicaciones sin conexin a
internet, sin embargo, el proceso ser limitado por lo que
se recomienda que mientras se desarrollan aplicaciones
mviles hacerlo en un equipo que tenga asegurada la
conexin todo el tiempo.

-Instalacin de JAVA JDK

El Java JDK es necesario para ejecutar el emulador de
Android y algunas herramientas de depuracin. No es
suficiente con instalar el Java JRE es necesario instalar el
JDK completo para tener acceso a todas las herramientas
de desarrollo
El instalador de este programa se encuentra en el sitio de
Oracle.

http://www.oracle.com/technetwork/java/javase/downloads
Ahora que tienes un sistema listo para desarrollar
aplicaciones PhoneGap, vamos a crear aplicaciones. En el
proximo capitulo vamos a aprender como crear una
aplicacin Android bsica.

SDK DE ANDROID
Instalando el SDK de
Android
El SDK de Android contiene todo lo necesario para crear
y probar las aplicaciones para esta plataforma. Es
bastante completo e incluye emuladores de sistema
operativo y aplicaciones especializadas para controlar y
monitorear todos los elementos de una aplicacin mvil.
Para descargar el SDK de Android debes ir al sitio de
desarrolladores de Android y elegir all la versin del
SDK que corresponda a tu sistema operativo:
http://developer.Android.com/sdk/
El tamao promedio de esta descarga es de
aproximadamente 30MB. Una vez descargado el archivo
debers descomprimirlo en tu computador.
Descomprime este archivo en una ruta sencilla de
acceder, sin espacios, maysculas o tildes. Por ejemplo,
en windows puedes usar esta ruta:

C:/Android/
Esto no slo te ayudar a encontrar ms fcilmente el
SDK, tambin evitars posibles errores cuando compiles
tu aplicacin.

Instalacin de mltiples
versiones de Android
Descargar y descomprimir el SDK es solo el primer paso,
para poder probar una verdadera aplicacin tienes que
descargar las diferentes versiones del sistema operativo
de Android y todas las herramientas de desarrollo.
Este proceso es indispensable porque con estos archivos
podrs probar y depurar tus aplicaciones en mltiples
versiones de Android.
Para actualizar el sistema en un equipo PC debes abrir el
archivo "SDK Manager.exe" tal como se aprecia en la
imagen.

En los equipos Mac, debes abrir la carpeta "/tools" y

abrir el archivo "Android"

En ambos casos, al abrir el archivo correspondiente, se

mostrar el SDK Manager. ste es una sub-aplicacin del
SDK de Android enfocada a administrar los paquetes y
herramientas del sistema.
Con el SDK Manager puedes descargar cualquier versin
disponible de Android y probar caractersticas
adicionales como desarrollo de aplicaciones para Google
TV o hacer uso de las capacidades multipantalla o 3D
que tienen algunos dispositivos Android.
Cada vez que se lanza una actualizacin o nueva versin
de Android y sus herramientas, el SDK Manager te
mostrar la opcin de instalarla o actualizarla en tu
ordenador. Se recomienda chequear con frecuencia esta
aplicacin para tener la versin ms actualizada del SDK.
En el SDK manager, cada versin del sistema operativo
Android o su API se muestra como una carpeta. Dentro de

la carpeta de cada API hay una cantidad variable de

elementos relacionados con cada versin especfica, pero
dos de esos elementos se repiten consistentemente: "SDK
Platform" y "Google API's by Google Inc".
Para instalar una versin de Android es requisito instalar
al menos esos dos elementos, el resto, en su gran mayora,
son caractersticas opcionales.

Las versiones de Android vienen en grupos de paquetes,

para descargar cualquier versin de este sistema
operativo es necesario chequear la casilla
correspondiente al paquete que se desea instalar y luego
presionar el botn "Install package" que descarga e instala
todos los archivos necesarios automticamente.

La vista por defecto, clasifica las actualizaciones por

versin de la API de Android. Por ejemplo, los paquetes
relacionados con Android 2.2 ( Froyo ) aparecern en una
carpeta, mientras que los de Android 2.3 ( GingerBread )
estn en otra carpeta separada.
Cada una de las versiones de Android puede tener en
promedio unos 150 MB, la descarga de varios de ellos
puede tomar un periodo considerable de tiempo y espacio
en el disco duro.

Creacin y configuracin de
AVDs
Los AVD ( Android Virtual Devices ) son las "mquinas
virtuales" que nos permiten probar versiones especficas
de Android as como diferentes configuraciones de
hardware.
Gracias a los AVDs se pueden probar aplicaciones en
cualquier versin de Android con cualquier configuracin
de hardware de manera virtual, sin tener que comprar el
equipo fsico, reduciendo as los costos y el tiempo de
depuracin.
Para crear una AVD es necesario abrir el SDK Manager
tal como se detall en el apartado anterior, buscar la
seccin "Tools" y seleccionar la opcin "Manage
AVDs...":

Esto abrir el administrador de AVDs, para crear una

nueva configuracin presiona el botn "New.."

Escribe el nombre para el nuevo AVD y selecciona de la

lista "target" la versin del sistema operativo de Android
que deseas usar. Si no estas seguro cual elegir, escoge
"Android 2.3.3 - API Level 10". Este proceso crear un
AVD basado en Android 2.3.3 conocido como
Gingerbread.

Por lo general no es necesario modificar ningn otro

parmetro, si deseas crear una configuracin regular de

Android presiona "Create AVD" y el nuevo dispositivo

virtual aparecer en el AVD Manager.

Emular elementos de
Hardware
En algunos casos es necesario emular elementos del
hardware como la cmara o el GPS, el emulador de
Android permite depurar el sistema usando estos
elementos dentro de sus mquinas virtuales.
Para agregar un elemento de hardware, selecciona
cualquier AVD de la lista del AVD manager y presiona el
botn "Edit".
Busca el apartado "Hardware" y presiona el botn "New".
Esto desplegar una ventana con una lista de sensores y
capacidades de software, en este caso seleccionaremos la
opcin GPS para darle soporte a cualquier aplicacin que
necesite emular el dispositivo de geolocalizacin.

Una vez seleccionado el sensor, aparecer en la lista de

hardware disponible, asegrate que en la casilla junto al

nombre, aparezca que el sensor est activo, igualmente si

deseas desactivarlo, puedes hacerlo en esta casilla.
Es necesario activar manualmente los sensores para
emularlos en el AVD, algunos de los sensores que puedes
activar con este procedimiento son:
Acelermetro
GPS
Brjula
Camara
Micrfono
No solo los sensores se activan en el apartado de
hardware, tambin opciones como la emulacin de
orientacin del equipo o la presencia de un SD card se
administran aqu.
Si ests usando una aplicacin que use cualquiera de esas
caractersticas, no olvides activarla en tu AVD o
sencillamente no funcionar.

Activar el Emulador de
Android
Para activar el AVD solamente debes seleccionarlo de la
lista y presionar el botn "Start..."
Una ltima ventana con las opciones para el AVD
aparecer, selecciona el tamao y DPI adecuado para tu
sistema, de lo contrario el emulador puede aparecer en
escala incorrecta. Presiona el botn "Launch" para
arrancar el AVD.

Despus de unos minutos el emulador de Android se

mostrar en tu ordenador, el emulador es una copia fiel de
un dispositivo tal y como funcionaria con el sistema
operativo que le fue asignado.

Que versin de Android

usar para probar?
Android es al momento de escribir este manual, el sistema
operativo mvil ms popular del mundo. Existen
literalmente miles de equipos distintos con diferentes
versiones del sistema operativo y diferentes tamaos de
pantalla y diferentes especificaciones de hardware, a este
fenmeno se le llama fragmentacin.
Aunque el mercado de Android est muy fragmentado, no
quiere decir que no hay tendencias definidas, al momento
de escribir este manual, el 63% usa Android 2.3 y el 17%
usa la versin 2.2.
Al soportar y probar tus aplicaciones en estas dos
versiones de Android abarcas casi el 80% de los
dispositivos del mercado.

Aun con esta solucin sencilla, se recomienda

ampliamente descargar todas las versiones de Android y
probar las aplicaciones en todas las versiones de este
sistema operativo al menos una vez para comprobar si hay
soporte o no.
Tambin se recomienda revisar constantemente la
informacin actualizada y oficial de penetracin de las
versiones de Android:

http://developer.android.com/resources/dashboard/platform
versions.html
El mercado de los dispositivos mviles se mueve muy

rpido y en cualquier momento puede cambiar la

proporcin de usuarios de cada versin, no dejes que pase
mucho tiempo sin revisar esta valiosa informacin.

ECLIPSE
Ampliamente conocido entre los desarrolladores JAVA,
Eclipse es uno de los entornos de programacin ms
robustos del mercado. Planeado originalmente como un
IDE que funcione con cualquier lenguaje sin estar
orientado a ninguno en especial, Eclipse tiene una
capacidad camalenica de adaptarse a prcticamente
cualquier lenguaje de programacin a travs de un
completo sistema de plugins que permite incluir todas las
herramientas que se puedan necesitar.
Por su popularidad entre los desarrolladores JAVA ( la
base de Android) y su licencia de cdigo abierto, Google
ha creado un muy completo set de herramientas para
desarrollar aplicaciones con Eclipse que lo convierte en
la mejor opcin para crear aplicaciones Android.

Instalar Eclipse
Para instalar eclipse en tu equipo, el primer paso es
descargarlo gratuitamente en esta direccin ( se
recomienda usar la versin "Eclipse Classic" )
http://www.eclipse.org/downloads/
Como se mencion anteriormente, Eclipse es una
herramienta de desarrollo para muchos lenguajes. La
versin que ests descargando es la ms estndar y no
incluye ninguna herramienta para desarrollo de
aplicaciones para mviles o PhoneGap, as que vamos a
instalar uno por uno todos los plugins para convertir este
Eclipse en un entorno de desarrollo PhoneGap.

Instalar el ADT
Para desarrollar aplicaciones en Android, Google
desarroll el ADT ( Android Development Toolkit ), un
plugin para Eclipse que instala un entorno de desarrollo
muy completo para crear aplicaciones de Android.
El ADT integra las herramientas y funciones del SDK de
Android directamente con el ambiente de desarrollo de
Eclipse. Es requisito instalar el SDK de Android antes de
instalar el ADT.
Para instalar el ADT se debe abrir Eclipse y all dirigirse
a Help > Install new software

En la ventana emergente, encuentra el botn "add" y haz

click all. Esto te permitir agregar un nuevo repositorio
de software, desde el cual se descargar el ADT.
Cuando el sistema lo solicite, debes incluir un nombre
para el plugin y la direccin del repositorio:
http://dl-ssl.google.com/Android/eclipse/

El paso final es configurar el ADT, para esto, selecciona

la opcin Window > Preferences ( en equipos Mac OS la
opcin es Eclipse > preferences ). All debes seleccionar
"Android" en la lista que se muestra a la izquierda.

En la casilla "SDK Location" Haz click en "Browse" y

define la ruta a la carpeta donde guardaste el SDK de

Android. Presiona "OK" y el ADT estar configurado en

tu ordenador.

Instalando PhoneGap
En la documentacin oficial de PhoneGap, se muestra un
procedimiento de instalacin para Android que incluye
descargar el plugin y modificar varios archivos para
ejecutar el framework, el proceso es francamente
complicado e ineficiente. Adems de tomar mucho tiempo,
es necesario repetirlo en cada proyecto que se crea. Por
esta razn en este manual usaremos otro procedimiento
mucho ms prctico.
Vamos a utilizar el plugin MDS de AppLaud que elimina
ese proceso complicado y permite crear proyectos
PhoneGap en un solo clic.
Para instalar este y cualquier otro plugin, se sigue el
mismo proceso que acabamos de realizar para instalar el
plugin de ADT: se abre la opcin: Help > Install new
software

En la ventana emergente debes insertar un repositorio. La

direccin del repositorio de Applaud es:
http://svn.codespot.com/a/eclipselabs.org/mobile-webdevelopment-with-phonegap/tags/r1.2/download/

Recuerda actualizar peridicamente este plugin para

asegurarte que usas la ltima versin de PhoneGap en tu
proyecto. Generalmente Applaud actualiza su versin un
par de semanas despus de la actualizacin oficial de

PhoneGap.
Una vez descargados los archivos, el sistema pedir
reiniciar Eclipse y encontrars herramientas adicionales
en Eclipse, vamos a utilizar estas nuevas herramientas
para crear una aplicacin PhoneGap para Android.

Aplicacin bsica
Para crear tu primera aplicacin PhoneGap en Eclipse
tienes primero que crear un nuevo proyecto. Para esto haz
clic en el icono del MDS de AppLaud

En la ventana emergente, elige las opciones para tu

proyecto, por ejemplo, si quieres instalar automticamente
libreras como jQuery Mobile o Sencha Touch o si
quieres importar un proyecto externo solo marca las
casillas correspondientes. En este caso puedes dejar las
opciones por defecto y presionar el botn "Next"

En el futuro, cuando desees crear nuevas aplicaciones, lo

recomendable es escoger la opcin "Minimal PhoneGap
project" en la seccin "Project Contents", esto crear un
proyecto en blanco, listo para que puedas arrancar una
nueva aplicacin.
En la siguiente pantalla debes elegir un nombre para tu
proyecto, una vez definido presiona de nuevo "Next"

Ahora, debes elegir la versin base de SDK para tu

aplicacin. Al elegir una versin especfica en la que
dars soporte, tu aplicacin se vincula a las funciones de
una versin de Android en especial. Antes de elegir, toma
en cuenta que al seleccionar versiones ms recientes, es
posible que no le puedas dar soporte a equipos con
sistemas operativos ms antiguos.
Para garantizar una mejor distribucin y soporte de tu
aplicacin, elige como base Android 2.2 2.3.3 que son

compatibles con las versiones ms recientes ( Android 3.x

y Android 4.x), as tu aplicacin ser compatible con la
mayor cantidad de dispositivos en uso y con los que se
activen en el futuro.

En la ltima pantalla, debes definir la informacin de tu

proyecto. En este punto, el dato ms importante es el
Package Name. Para definirlo debes seguir la siguiente
nomenclatura:

[extensin de tu dominio]. [nombre de tu dominio].[

nombre de tu aplicacin ]
Por ejemplo, si mi dominio es "revolucion.mobi" y mi
aplicacin se llama "demo", debo definir el package name
como "mobi.revolucion.demo", si mi dominio fuera
google.com, debo definirla como "com.google.demo"

Al presionar el botn "Finish" automticamente se crearn

todos los archivos que necesitas para crear una aplicacin
PhoneGap. En el archivo index.html encontrars la base
de tu aplicacin.
La configuracin que elegimos para este proyecto de
prueba, crear una aplicacin de demostracin en este
archivo.

-Configurar y activar el emulador

Para probar tu aplicacin en el emulador de Android es
necesario configurar el ambiente de depuracin. Para
realizar este proceso tienes que seleccionar la opcin
"Debug Configurations"

Debes definir ahora un entorno para tu app, en la lista de

la izquierda haz doble clic sobre la opcin "Android
Application".

Las opciones de configuracin aparecern a la derecha.

Define un nombre en la casilla "Name" y en la casilla
"Project" haz clic en el botn "Browse" para elegir el
proyecto en el que ests trabajando.

Por ltimo haz clic en "Apply" y luego en "Debug" para

compilar tu aplicacin en modo de depuracin.

Luego de unos minutos podrs ver una aplicacin de

prueba funcionando en todo su esplendor el emulador de

Android.

Si haces cambios en tu aplicacin y quieres verlos en el

emulador simplemente guarda estos cambios y vuelve a
presionar el botn de "debug". Esta vez aparecer la
configuracin que ya tienes guardada, solo debes elegirla
para probar la nueva versin de tu aplicacin.
Cuando enves de nuevo tu aplicacin a depuracin no
cierres el emulador, sta se instalar y actualizar
automticamente en el emulador, ahorraras mucho tiempo
evitando reiniciar el sistema operativo.

SDK DE IOS
Instalacin
Si deseas crear programas para la plataforma mvil de
Apple y probarlos en tu equipo, es necesario bajar el
SDK de iOS, el sistema operativo de los equipos iPhone,
iPad y iPod Touch.
A diferencia del SDK de Android que es independiente
del programa en que desarrolla el cdigo, Apple cre
para iOS un paquete completo que incluye el SDK,
herramientas, emuladores y hasta el editor de cdigo.
El programa principal del paquete de Apple es Xcode.
Desde all se pueden crear las aplicaciones nativas para
iOS y al instalarlo se instala tambin todo el paquete del
SDK de iOS. El Xcode 4 puede instalarse nicamente en
equipos Apple y se requiere al menos OS X 10.7.0 Lion o
superior.
Para descargar Xcode 4 solamente debes abrir el App
Store incluido en todas los equipos de escritorio Apple
con sistema operativo Lion o superior

Debes buscar Xcode en la tienda y hacer la descarga del

programa. Esto descargar un instalador, que a su vez te
permite descargar a tu ordenador todos los archivos de
Xcode.

La instalacin tomar un tiempo porque descargars al

mismo tiempo los instaladores de Xcode, el SDK de iOS
y el emulador de este sistema operativo. El peso
aproximado del archivo de instalacin es de 1.8 GB
Descargar Xcode y el SDK de iOS es gratuito. Este
software te permitir crear y emular aplicaciones en el
ordenador. Para publicar y probar aplicaciones en el

mvil debers inscribirte en el programa de pago de

Apple.
Una vez finalizada la instalacin de Xcode tendrs
instalado en tu ordenador todo lo necesario para crear
apps para el sistema operativo iOS

Instalar PhoneGap en Xcode

Para crear tus aplicaciones PhoneGap desde Xcode,
tienes primero que descargar la ultima versin en el sitio
de PhoneGap ( http://www.phonegap.com/download )
Para efectos de redaccin y sencillez para el lector, en
este libro vamos a utilizar la versin 1.9.0 de PhoneGap
tambin disponible en el sitio de descarga.
Al momento de escribir este libro, el instalador de
PhoneGap 2 aun no tiene soporte para plantillas en Xcode.
Para crear tu proyecto usando la ltima versin de
PhoneGap debes hacerlo a travs de la lnea de
comandos. Puedes encontrar los detalles en la guia
oficial:

http://docs.phonegap.com/en/2.0.0/guide_gettingstarted_ios_index.md.html#Getting%20Started%20with%20
Una vez descargada la versin 1.9.0 de PhoneGap debes
descomprimir el archivo que acabas de descargar y
ejecutar el instalador. El archivo de instalacin est en la
carpeta "/lib/ios/" asegrate de abrir el archivo con la
extensin ".dmg"

Finalizado el proceso de instalacin podrs crear

aplicaciones PhoneGap desde Xcode. Vamos a utilizar
estas nuevas herramientas para poner manos a la obra y
crear una aplicacin iOS

Aplicacin bsica en Xcode

Una vez instalado, abre el Xcode, elige la opcin "Create
a New Xcode Project".

En la ventana emergente podrs elegir que tipo de archivo

deseas crear. Busca en la lista de la izquierda la opcin
iOS > Application y selecciona la opcin "Cordova-based
Application".

En la siguiente ventana debes elegir el nombre de tu

aplicacin y seleccionar un identificador para el apartado
"Company Identifier". La nomenclatura usual es definir la

extensin de tu dominio y su nombre. Por ejemplo si tu

dominio es google.com, usa como identificador:
com.google

Presiona "Next" y guarda el proyecto en algn lugar de

fcil acceso en tu ordenador.
Para crear tu primera aplicacin, presiona el botn "Run"
que est en la parte superior izquierda de la aplicacin.

Luego de unos segundos se compilar la aplicacin y

aparecer el emulador con un mensaje similar a este:

Este mensaje de error es normal, solo necesitamos un

paso extra para corregirlo. Durante la compilacin se cre

una carpeta llamada "www" en tu proyecto, debes

incluirla dentro de Xcode para que la utilice como base
de tu app.
Para encontrar la carpeta selecciona la raz de tu
proyecto, haz click derecho y selecciona la opcin "Show
in Finder"

Esta opcin abrir la carpeta donde se almacena el cdigo

fuente de tu aplicacin, busca all la carpeta "www"

Selecciona esta carpeta y arrstrala dentro de Xcode, en

la raz de tu proyecto, tal como se indica en la imagen:

Aunque la carpeta www ya es parte del proyecto, este

proceso la incluir grficamente en el editor. Asegurate de
seleccionar la opcin "Create folder references for any
added folders"

Para editar tu aplicacin abre la carpeta www que ahora

aparece en la lista de archivos a la izquierda

Abre el archivo index.html y reemplaza el cdigo original,

por este otro :
Ejercicio: 5.1
<!DOCTYPE html>
<html>
<head>
<title>Hola mundo</title>
<meta charset="utf-8">
</head>
<body>
<h1> Hola mundo! </h1>
</body>

</html>
Salva los cambios y presiona de nuevo el botn "Run"
Luego de unos segundos, tendrs lista tu primera
aplicacin hecha en Xcode, que se debe ver muy parecida
a esto:

En adelante, puedes seguir modificando los archivos de la

carpeta "www" para crear tus aplicaciones de iPhone /

iPad

DREAMWEAVER CS6
Dreamweaver es un software propietario desarrollado por
Adobe Systems. Es muy popular entre los desarrolladores
web y desde hace ms de una dcada es la herramienta
por excelencia para crear la web.
Desde la versin CS5.5 se incluye integracin con
tecnologas enfocadas al desarrollo de aplicaciones
mviles como jQuery Mobile, HTML5 y CSS3, adems
del soporte para crear y probar aplicaciones nativas
basadas en PhoneGap.
Con la adquisicin de Nitobi (creadores de PhoneGap)
Adobe mejor la integracin de Dreamweaver con
PhoneGap e incluy la opcin de compilar aplicaciones
desde la nube a travs del servicio PhoneGap Build.
Esta nueva forma de crear aplicaciones permite
desarrollar y publicar aplicaciones mviles sin depender
de ningn sistema operativo en particular. Dreamweaver
abre la opcin para que sus usuarios puedan crear
aplicaciones para plataformas que antes eran
incompatibles, ahora es posible crear aplicaciones para
iOS sin necesidad de usar un equipo Apple o desarrollar
aplicaciones para Blackberry desde Linux o Apple sin

necesidad de mquinas virtuales o libreras adicionales.

Instalar Dreamweaver
En este libro usaremos como referencia la versin en
ingls de Dreamweaver CS6. Si aun no lo tienes instalado
puedes bajar una versin de prueba por 30 das en el sitio
de Adobe:
http://www.adobe.com/es/products/dreamweaver.html
Para descargar este programa es necesario crear una
cuenta gratuita con Adobe o "Adobe ID", esta cuenta
tambin puede ser utilizada para otros servicios como
PhoneGap Build.
Gracias a que Dreamweaver est totalmente integrado con
PhoneGap, no es necesario instalar ningn software
adicional. Tampoco es necesario realizar ninguna
configuracin extra, el programa viene listo para crear
aplicaciones PhoneGap de inmediato.

Aplicacin bsica
El primer paso para crear una aplicacin con
Dreamweaver es crear un nuevo proyecto o "sitio". Para
crear un nuevo sitio debes ir a Site > New Site.

El sistema te pedir asignarle un nombre al proyecto y

definir una carpeta en tu ordenador para guardar los
archivos de tu futura aplicacin. Introduce los datos
correspondientes y presiona el botn "Save"

Ahora que tienes un proyecto definido, debes crear el

archivo base de la aplicacin, solo tienes que a la opcin

File> new.

En la pantalla de nuevos documentos encontrars muchas

opciones para crear la base de una aplicacin, en este
caso escoge: Blank Page > HTML > <none> y asegurate
que el DocType est definido en HTML5.

En el nuevo documento que acabas de crear, copia este

cdigo:
Ejercicio 6.1:
<!DOCTYPE HTML>
<html>

<head>
<meta charset="UTF-8">
<title>Hola Mundo</title>
<script src="phonegap.js" type="text/javascript"
charset="utf-8"></script>
</head>
<body>
<h1>Hola Mundo!</h1>
<p>Mi primera app hecha con Dreamweaver CS6</p>
</body>
</html>
Como puedes notar, se est incluyendo en el cdigo una
llamada a un archivo "phonegap.js". Este archivo es el
que conecta la librera de PhoneGap con tu aplicacin.
No es necesario incluirlo en tu proyecto de Dreamweaver,
cuando PhoneGap Build encuentra esta lnea de cdigo, se
encarga de agregar automticamente la versin ms
actualizada de la librera, esta funcionalidad es
particularmente til tomando en cuenta que el proyecto
PhoneGap es sumamente activo y las versiones cambian
muy rpido, ahora tienes la seguridad de usar siempre la
versin ms actualizada sin necesidad de modificar el
cdigo.

Guarda el archivo que acabas de crear con el nombre

"index.html" y tendrs lista la base de tu primera
aplicacin mvil en Dreamweaver CS6.

-Configuracin de Dreamweaver
Aunque este paso no es un requisito para crear
aplicaciones, si deseas probarlas en un emulador
Android local es necesario que descargues e instales el
SDK de Android tal como se indica el Captulo 3 de este
libro y que configures Dreamweaver para instalar
aplicaciones directamente en el emulador.
Para activar esta funcionalidad solo debes ingresar a:
Site>PhoneGap Build service> PhoneGap build settings.

En esta seccin debes indicar la ruta en la que instalaste

el SDK de Android, usa el icono de carpeta para navegar
en tu ordenador y seleccionar la carpeta correspondiente.

Esta configuracin se realiza una nica vez, en adelante

cuando compiles una aplicacin con Dreamweaver puedes
enviarla directamente a un emulador local de Android.

Compilar en la nube con

PhoneGap Build
Para crear una aplicacin PhoneGap desde Dreamweaver
debes seleccionar la opcin: File > Phonegap Build
Service > PhoneGap Build Service.

Dreamweaver enva todos los archivos del proyecto al

servicio PhoneGap Build. Este servicio se encarga de
procesarlos y compilarlos automticamente en 6
diferentes plataformas ( iOS, Android, Windows Phone,
Blackberry, webOS y Symbian).
Antes de enviar tus archivos a PhoneGap Build es
necesario que crees una cuenta gratuita e ingreses con tu

nombre y password registrados. Gracias a que PhoneGap

Build es parte de Adobe puedes utilizar el Adobe ID que
creaste previamente para bajar tu copia de Dreamweaver
CS6.

La primera vez que ejecutas un proyecto en PhoneGap

Build, el sistema va a solicitar un archivo de
configuracin para la aplicacin, selecciona la opcin
"Create as a new project" y presiona el boton "continue"

Este paso crear un archivo con el nombre

"ProjectSettings" dentro de tu proyecto con los detalles
de configuracin de la aplicacin.
Tu aplicacin ser enviada inmediatamente a PhoneGap
Build. En el panel de control de PhoneGap podrs ver las
diferentes versiones de tu aplicacin en 5 diferentes
plataformas.

-Probar aplicaciones
Dreamweaver CS6 te da 3 diferentes opciones para
probar las diferentes versiones de tus aplicaciones
PhoneGap:
Emulador: Descargar tu aplicacin de la nube y
ejecutarla en un emulador local.
Probar en equipo: Escanear un cdigo QR para
ejecutar tu aplicacin en un dispositivo fsico.
Descarga: Guardar la aplicacin compilada en la
nube, en tu disco duro.
Por ahora, para ver tu primera aplicacin, elige la opcin
Emulador para probar tu aplicacin localmente.
En cuanto la aplicacin se descargue la nube y est lista
para ser probada en tu ordenador, debes elegir un AVD
para ejecutarla.

Puedes elegir un AVD pre existente o crear uno

presionando el botn "AVD". Una vez elegido el AVD
presiona el botn "Launch" para instalar tu aplicacin en
el emulador.
Luego de unos minutos, tu aplicacin estar disponible en
el emulador de android

ESTRUCTURA DE UNA
APLICACION PHONEGAP
Las aplicaciones PhoneGap tiene una estructura definida
en su cdigo y componentes externos. Una vez terminada
la aplicacin, es posible que sea necesario configurar
algunos elementos externos a la programacin de la
misma, como la orientacin en pantalla o los iconos que
identificaran al programa dentro del sistema. Esta
configuracin en PhoneGap vara segn el sistema
operativo en que se desea publicar.
En este captulo examinaremos las partes que componen
una aplicacin PhoneGap: las partes del cdigo, la
integracin de PhoneGap con un documento HTML, la
estructura de los archivos y la configuracin especfica
para Android y iPhone.

Estructura html
-Doctype
El doctype define el tipo de documento que vamos a
utilizar. Aunque es posible utilizar diferentes Doctypes en
PhoneGap, en este manual vamos a utilizar el estndar
HTML5 para aprovechar al mximo esta nueva
tecnologa. En la prxima seccin hablaremos con detalle
del HTML5, por ahora incluiremos en la primera lnea de
la aplicacin el doctype:
<!DOCTYPE html>
Esto definir el documento que utilizaremos como uno de
tipo HTML 5, ahora vamos a construir un documento
completo.
Ejercicio 7.1
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 7.1</title>
<meta charset="utf-8">

</head>
<body>
<h1>Mi primer app</h1>
<button id="boton1"> Botn</button>
</body>
</html>
Cualquier documento, como este, puede convertirse en una
aplicacin mvil, si lo compilamos se vera as:

Sin embargo nadie descargar una aplicacin tan bsica,

no sin que antes le demos algo de estilo.

-CSS
Mejoremos un poco la apariencia de esta aplicacin. En
la misma carpeta en que tienes almacenado el documento
base, crea una carpeta con el nombre "css", dentro de ella
crea un nuevo documento y nombra el archivo como:
"hojaDeEstilos.css". Dentro de l incluiremos los estilos
de esta aplicacin:
body{
background:#1485CC;
font-family:Arial;
text-align:center;
color:#fff;
}
button{
margin-top:5em;
padding:1em;
font-size:1em;
background:#FFFC19;
}
div{
text-align:left;
}

Finalmente, para incluir estos estilos en la aplicacin, se

debe agregar esta linea antes de </head>
<link rel="stylesheet" href="css/hojaDeEstilos.css" >
En este punto la aplicacin debera verse as:

-Cordova.js y libreras de javascript

Tenemos una aplicacin con una estructura HTML5 y
apariencia grfica pero an no tiene ninguna
funcionalidad.
Muchas aplicaciones pueden continuar su desarrollo y
llegar a publicarse sin mayor problema con la
funcionalidad actual, pero si queremos que la aplicacin
tenga acceso a sensores como la cmara, brjula o el
GPS, es necesario que incluyamos la librera Cordova que
se encargar de conectar nuestra aplicacin con el
hardware del dispositivo y nos dar acceso a los
sensores.
Para conectar la aplicacin con Cordova solamente es
necesario copiar la el archivo javascript de Cordova en la
raz del proyecto (en caso de que no est presente an) e
invocarla copiando esta lnea antes de </head>
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>
La librera Cordova se encuentra en los archivos de
instalacin de PhoneGap. Segn el programa de
desarrollo que se utilice es posible que el archivo
Cordova se copie automticamente en el proyecto.

El nombre del archivo de cordova cambia segn la

versin, en el ejemplo actual se muestra simplemente
como "cordova.js" para efectos de redaccin. Recuerda
actualizar tu cdigo segn la versin que corresponda.
Si deseas agregar otras libreras de javascript se deben
incluir de la misma forma, en las lneas subsecuentes.
Tambin es posible incluir cdigo JavaScript
directamente en el documento a travs de la etiqueta
<script>. Vamos a darle algo de accin a la aplicacin de
ejemplo incluyendo este cdigo antes de </body>:
<script>
document.getElementById("boton1").onclick =
function(){alert(" haz hecho click")}
</script>
Este comando bsico de javascript selecciona el botn
que estaba inactivo y muestra una alerta de texto al hacer
click. Ms adelante en este manual vamos a explorar con
detalle el uso de JavaScript en PhoneGap.
Continuemos explorando la estructura de una aplicacin
con algo un poco ms interesante, en el prximo apartado
vamos a acceder informacin del dispositivo.

Eventos de PhoneGap
En el ejemplo anterior utilizamos el evento "onclick" que
se activa como es de sospechar cuando se hace click
sobre un elemento.
PhoneGap tiene tambin sus propios eventos que nos
indican estados del dispositivo en el que trabajamos. El
ms importante de todos los eventos de PhoneGap es
"deviceready" que nos indica cuando el dispositivo esta
listo para enviar y recibir informacin de la API de
PhoneGap.
Este evento es independiente de la carga de la aplicacin,
as que aunque la aplicacin ya est completamente
cargada y funcional no quiere decir que ya tenga acceso a
los sensores del dispositivo, eso puede tomar un tiempo
variable segn el sistema operativo y capacidad del
equipo.
Es crucial que toda aplicacin que utilice la API de
phoneGap se inicialice despus del evento "deviceready"
de lo contrario, es casi seguro que la aplicacin
despliegue errores de comunicacin con la API y obtengas
resultados inconsistentes o errneos.
Para agregar este importante evento debes incluir esta
lnea de cdigo justo despus de la lnea que incluye la

librera Cordova.
<script>
document.addEventListener("deviceready",
dispositivoListo, false);
</script>
En este caso lo que suceder es que cuando el dispositivo
en el que se ejecute la aplicacin est listo para enviar y
recibir datos de sus sensores, se activar el evento
"deviceready", cuando esto suceda, se ejecutar la funcin
"dispositivoListo".
Ahora es necesario definir la funcin
"dispositivoListo" que, en su forma mas bsica, puede
ser:
function dispositivoListo(){
alert(" tu dispositivo esta listo para usar la API de
PhoneGap")
}
Para este punto, el cdigo completo de la aplicacin es:
Ejercicio 7.2

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 7.2</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/hojaDeEstilos.css" >
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>
<script>
document.addEventListener("deviceready",
dispositivoListo, false);
function dispositivoListo(){
alert(" tu dispositivo esta listo para usar la API de
PhoneGap")
}
</script>
</head>
<body>
<h1>Mi primer app</h1>
<button id="boton1"> Botn</button>
<script>

document.getElementById("boton1").onclick =
function(){alert(" haz hecho click")}
</script>
</body>
</html>
Una vez compilado el ejercicio, se mostrar una ventana
de alerta en cuanto el dispositivo este listo para ejecutar
PhoneGap, similar a esto:

Ya estas usando HTML5, invocando una hoja de estilos

externa y la librera Cordova se inicializa
perfectamente.... nada mal para comenzar!

Archivos de un proyecto
PhoneGap
Cuando se crea un proyecto PhoneGap, tal como vimos en
los ejemplos anteriores, utilizamos una serie de archivos
de diferentes formatos como JavaScript CSS.
En general los dos archivos con los que vamos a trabajar
en PhoneGap sern:
index.html: este archivo es la base de toda aplicacin
PhoneGap, es crucial que toda aplicacin contenga un
archivo con exactamente ese nombre y extensin ( sin
maysculas, ni espacios ) de lo contrario, la aplicacin no
funcionar correctamente.
cordova.js: la conexin entre el documento HTML y la
API de PhoneGap. Este archivo permite ejecutar
comandos en lenguaje JavaScript que, gracias a PhoneGap
pueden interactuar con el hardware del equipo mvil. El
nombre de este archivo cambia segn la versin, usando
la nomenclatura: Cordova-X.x.js donde "X.x" es el
nmero de la versin actual. En este libro solo aparecer
con el nombre "cordova" sin nmero de versin para
efectos de redaccin. Recuerda siempre actualizar tu
cdigo para que se ajuste a al nombre del archivo que
utilizas.

El resto de archivos son opcionales, pero como buena

prctica se recomienda crear carpetas por cada tipo de
archivo (ej: hojas de estilo en una carpeta "css" y
javascript en la carpeta "js") en caso de usar archivos
JavaScript y CSS adicionales.
Todos estos archivos son la parte visible de una
aplicacin, detrs de ella, hay una serie de archivos
permitirn el acceso nativo a los sensores y dems
hardware del dispositivo mvil.
Por regla general, los archivos que vamos a trabajar en un
proyecto PhoneGap se encuentran en una carpeta llamada
"www". La ubicacin exacta de esta carpeta cambia segn
la plataforma, pero en general siempre conserva el mismo
patrn.
Al trabajar desde la aplicacin es acceder con total
libertad cualquier archivo que est dentro de la carpeta
"www", el resto de archivos del sistema son de acceso
restringido o bloqueado por motivos de seguridad.

Estructura de proyectos en
Xcode
Xcode fue creado para desarrollar aplicaciones de iOS,
los proyectos de PhoneGap son exactamente iguales a un
proyecto regular para iPhone/iPad pero con ligeras
adaptaciones.
Al revisar los archivos del proyecto, encontrars una
carpeta llamada "www" all estn todos los archivos en
los que se basa el proyecto, esta carpeta es la raz de toda
aplicacin.

En la carpeta "Products" se crear un archivo con el

nombre de tu proyecto y la extensin ".app", ese es el
proyecto compilado, mas adelante hablaremos de como
utilizarlo.
La carpeta "Resources" tiene en su interior dos
subcarpetas llamadas "icons" y "splash", all se
almacenan los iconos e imgenes de carga de tu
aplicacin.
Por ltimo la carpeta "Supporting Files" tiene un archivo
con el nombre de tu proyecto con el sufijo "-Info" y la
extensin ".plist", ( Ej: miapp-Info.plist ) este archivo
sirve para configurar tu aplicacin, ms adelante
revisaremos las propiedades de este archivo en detalle.

-Estructura de proyectos en Eclipse

La estructura de un proyecto PhoneGap en Eclipse se basa
en un proyecto nativo de Android con ligeros cambios.
La carpeta en la que vamos a trabajar es "assets". Dentro
de esa carpeta esta una subcarpeta llamada "www" que es
la raz de toda aplicacin PhoneGap.

En la carpeta "bin" encontrars archivos con el nombre de

tu aplicacin y la extensin ".apk" esos archivos son tu

aplicacin compilada. Ms adelante hablaremos como
utilizar este archivo.
La carpeta "res" almacena los iconos y pantallas de carga
de la aplicacin en mltiples resoluciones.
Finalmente, en la raz se encuentra el archivo
"AndroidManifest.xml" que se encarga de la configuracin
de la aplicacin. Hablaremos de l en el siguiente
apartado.

Archivos de configuracin
Los archivos de configuracin de Android y iOS son muy
distintos en su forma y sintaxis, sin embargo, cumplen la
misma funcin: configuran la forma en que la aplicacin
ser ejecutada dentro del dispositivo.
Dentro de estos archivos de configuracin se esconde
informacin crucial de toda app aqu se definen los
iconos que identificaran la aplicacin, las pantallas de
carga, la orientacin y hasta la capacidad de mostrarse a
pantalla completa.
Vamos a analizar individualmente los archivos de
configuracin de estos dos sistemas operativos

Configuracin en iOS
Tal como se menciona en el apartado de archivos de iOS ,
el archivo de configuracin de las aplicaciones iOS se
encuentra en la se encuentra en la carpeta "Suporting
Files" del proyecto.
En los proyectos de iOS generalmente hay dos archivos
con la extensin .plist, el que nos interesa es el que tenga
el nombre del proyecto con el sufijo "-Info" (ej: si mi
proyecto se llama test, el archivo se llamara testInfo.plist).
Al abrir este archivo encontraremos una lista de
propiedades de la aplicacin:

Este archivo de configuracin permite modificar varias

propiedades, algunas irrelevantes otras que tienen un gran
impacto en el comportamiento de la aplicacin.

-Mostrar en pantalla completa

Vamos a probar lo til que puede ser este archivo de
configuracin con un ejercicio simple. La aplicacin de
prueba que hemos creado, en iPhone se ve por defecto con
la barra de status que muestra datos como la hora o el
status de la batera:

Si al archivo de configuracin le agregamos una linea

extra con el parmetro "Status bar is initially hidden"
definido en "YES" de esta forma

La barra de status se ocultar cada vez que se ejecute esta

aplicacin y se mostrar a pantalla completa.

-Permitir acceso a documentos externos

Por cuestiones de seguridad la configuracin por defecto
de las aplicaciones PhoneGap restringen el acceso a
cualquier documento externo.
Si una aplicacin intenta conectarse a un documento
online, sencillamente se le bloquea el acceso y aparecer
un error en la consola de depuracin reportando que no se
tiene acceso al archivo solicitado.
Si tu aplicacin necesita acceso a archivos externos, es
necesario configurarlo en el archivo: "Cordova.plist" que
se encuentra en la misma carpeta que los dems archivos
de configuracin.
Abre el archivo, busca el valor "External Hosts" y
presiona el signo "+" que esta junto a l. Esto agregara
una linea por cada dominio que necesites autorizar, en
nuestro caso, vamos para darle acceso a la imagen del
ejemplo que se encuentra en el dominio
"manualdelguerreromovil.com" agregandolo tal como se
ve en la ilustracin:

Al agregarle un asterisco y un punto, se autoriza acceso a

todos los subdominios del sitio seleccionado.

-Control de orientacin
En iOS es posible bloquear la orientacin de la
aplicacin en posicin horizontal o vertical evitando la
conducta por defecto de rotar la pantalla automticamente.
Es posible editar esta conducta desde el archivo de
configuracin buscando el valor "Supported Interface
orientations". En iOS hay cuatro posibles orientaciones (
horizontal a la derecha y a la izquierda, vertical a la
derecha e izquierda) por lo que este valor permite incluir
de una a cuatro posibles posiciones soportadas.

La orientacin de la aplicacin se puede editar tambin en

el sumario de la aplicacin de Xcode.

Desde este sumario, tambin se pueden editar con mucha

facilidad y de forma grfica, otras opciones del archivo

de configuracin como los iconos y pantallas de carga de
la aplicacin.

Configuracin en Android
La configuracin de las aplicaciones android se realiza en
el archivo llamado AndroidManifest.xml que se encuentra
en la raz del proyecto Android.
En el AndroidManifest encontramos todo tipo de detalles
sobre la aplicacin, como las resoluciones soportadas o
los permisos de acceso al dispositivo.
Al igual que con la configuracin de iOS, este archivo nos
permite configurar aspectos importantes de nuestra
aplicacin.

-Control de orientacin
Para evitar que la aplicacin se ajuste a la orientacin del
aparato es posible bloquear la apariencia de la aplicacin
para que solo funcione en modo horizontal o vertical.
Necesitas buscar en el archivo de configuracin el nodo
<activity y le agregas el cdigo:
android:screenOrientation="portrait"
Tal y como se ilustra a continuacin:

Este comando bloqueara la aplicacin en posicin

vertical, para que el bloqueo se haga en la posicin
horizontal, se debe utilizar este otro cdigo:
android:screenOrientation="landscape"
En el caso que necesites probar esta caracterstica en el
emulador de Android, debes habilitar el soporte para esta
caracterstica en la configuracin del AVD.

Presiona las teclas CTRL+F12 para rotar el emulador.

Una lista completa sobre los comandos por teclado del
emulador estn en este URL: http://bit.ly/w1cFvz

-Mostrar a pantalla completa

Mostrar las aplicaciones PhoneGap a pantalla completa
en Android necesita una configuracin especial.
El primer paso para habilitar esta funcin es buscar el
archivo de actividad de la aplicacin. Usando el project
explorer de Eclipse localiza la carpeta "src" de tu
proyecto, dentro de esta carpeta encontraras un paquete
con el namespace que usaste para tu app, all encontrars
un archivo de extensin ".java" que tiene el nombre de tu
app con el sufijo "Activity".
Por ejemplo, suponiendo que tenemos una aplicacin
llamada "test" con un namespace "mobi.revolucion.test".
Segn la nomenclatura mencionada previamente, el
archivo de actividad se llama TestActivity.Java

Dentro del archivo de actividad, hay que modificar

algunas lneas, primero es necesario importar la siguiente
clase:
import android.view.WindowManager;

el siguiente paso es localizar la funcin onCreate() y

luego de la lnea
super.loadUrl("file:///android_asset/www/index.html"); inc
el siguiente cdigo:

getWindow().setFlags(WindowManager.LayoutParams.FL
WindowManager.LayoutParams.FLAG_FULLSCREEN
|
WindowManager.LayoutParams.FLAG_FORCE_NOT_FU
Por ejemplo en la aplicacin de demostracin que
mencionamos anteriormente, el archivo TestActivity.java
quedara con el siguiente cdigo:
package mobi.revolucion.test;
import org.apache.cordova.DroidGap;
import android.os.Bundle;
import android.view.WindowManager;
public class TestActivity extends DroidGap {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);

super.loadUrl("file:///android_asset/www/index.html

getWindow().setFlags(WindowManager.LayoutParam

WindowManager.LayoutParams.FLAG_FULLSCREE
|

WindowManager.LayoutParams.FLAG_FORCE_NO
}
}

-Imagen de Inicio
La imagen de inicio o Splash Screen es el grfico que
aparece mientras el dispositivo mvil carga tu aplicacin.
Prcticamente todas las aplicaciones usan un splash
screen porque los dispositivos generalmente tardan un
tiempo en inicializar una aplicacin, tambin esta imagen
sirve para introducir al usuario a lo que ser la
aplicacin.
Antes de comenzar a configurar, crea una imagen en
formato PNG de 320px de ancho y 480px de alto. Busca
en tu proyecto la carpeta "res", all encontraras varias
carpetas, cada una de ellas almacena archivos grficos
correspondientes a las resoluciones soportadas por tu
proyecto android, la nomenclatura de estas carpetas es:
drawable-hdpi: archivos grficos de alta resolucin
(High Density per Inch)
drawable-ldpi: archivos grficos de baja resolucin
(Low Density per Inch)
drawable-mdpi: archivos grficos de mediana
resolucin (Medium Density per Inch)
drawable-xhdpi: archivos grficos de muy alta
resolucin (eXtra High Density per Inch)
Cada carpeta necesita un tamao diferente de imagen para

mostrar en pantallas de diferente resolucin, si deseas

ms informacin sobre los tamaos soportados puedes
encontrarla en este URL

http://developer.android.com/guide/practices/screens_supp
Por ahora, solo guarda el mismo archivo grfico en
formato PNG que acabas de crear en cada una de estas
carpetas, asegurate que en todas tengan el mismo nombre:
"splash.png".
Para incluir esta imagen dentro aplicacin tambin es
necesario modificar el archivo de actividad como se
detallo en el apartado anterior. En este caso se necesita
localizar esta lnea en el archivo de actividad:
super.loadUrl("file:///android_asset/www/index.html");
y reemplazarla con el siguiente cdigo:
super.setIntegerProperty("splashscreen",
R.drawable.splash);
super.loadUrl("file:///android_asset/www/index.html",
10000);
La primera lnea agrega el soporte para el splash screen
usando el archivo "splash.png", la segunda lnea, incluye

una pausa de 10 segundos para mostrar la imagen

seleccionada.
El cdigo de ejemplo , se vera as al actualizarlo con
soporte para la imagen de carga:
package mobi.revolucion.test;
import org.apache.cordova.DroidGap;
import android.os.Bundle;
import android.view.WindowManager;
public class TestActivity extends DroidGap {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

super.setIntegerProperty("splashscreen",R.drawable.splas

super.loadUrl("file:///android_asset/www/index.html",100

getWindow().setFlags(WindowManager.LayoutParams.FL
WindowManager.LayoutParams.FLAG_FULLSCREEN
|

WindowManager.LayoutParams.FLAG_FORCE_NOT_FU
}
}
Edita los archivos de configuracin de tu aplicacin y
pruebala en el emulador, notars que ahora muestra una
imagen al inicializarse.
En este captulo analizamos las propiedades y
configuracin bsica de un proyecto PhoneGap, en los
prximos captulos vamos a revisar los tres pilares
fundamentales para crear un proyecto PhoneGap: HTML5,
CSS y JavaScript.

HTML5
HTML5, la base de
PhoneGap
Como hemos visto en ejercicios anteriores, la base
central de una aplicacin PhoneGap es HTML5. Gracias a
esta integracin con la nueva versin de HTML, es que
podemos aplicar lo ms novedoso del desarrollo web al
entorno mvil.
Aunque ya se ha utilizado en varios ejercicios, vamos a
hacer hincapi en un detalle importante de los documentos
que estamos usando en este manual, en todos los casos
iniciamos los documentos con esta primera lnea:
<!DOCTYPE html>
Esta lnea es el doctype y define el documento en el que
vamos a trabajar como uno de tipo HTML5. Esta
definicin permite acceder a las nuevas tecnologas de la
web y lo mejor: es perfectamente compatible con todos
los equipos en los que funciona PhoneGap.

HTML5 es mucho ms que nuevas etiquetas, el W3C

(world wide web consortium ) , organismo encargado de
mantener los estndares de los principales lenguajes de
internet, trabaja por convertir el navegador tradicional en
un completo entorno multimedia que nos permita trabajar
sin necesidad de ningn plugin o programas externos,
precisamente por esta razn es que HTML5 viene
empacado con una serie de nuevas tecnologas como
audio, video, canvas y mucho ms.
PhoneGap utiliza en muchos casos la implementacin
estndar del W3C para conectar los sensores del
dispositivo. Si ya has trabajado con HTML5 y conoces
sus nuevos tags y semntica tienes la mitad del camino
recorrido, si no ests familiarizado con este nuevo
lenguaje, desarrollando aplicaciones PhoneGap te vas a
convertir en un experto.
En este captulo vamos a explorar algunos de las
principales novedades de HTML5 que ya podemos
aplicar con seguridad en aplicaciones PhoneGap.

Viewport
El viewport es un elemento clave para asegurar la escala
y apariencia en que se muestran las aplicaciones. Si no se
incluye este el elemento en el cdigo se corre el riesgo de
que las aplicaciones se muestren en una escala incorrecta.
El viewport es el rea visual en la cual se muestra un
documento HTML, es posible manipular este elemento
para controlar la forma en que se despliegan los
contenidos en la pantalla de un dispositivo mvil.
Manipulando los atributos del viewport es posible
configurar elementos de visualizacin como el ancho,
alto, tamao y escala de un documento. Para habilitar el
viewport solamente se aade esta lnea dentro del
<head>
<meta name="viewport" content="width=devicewidth"/>
sta configuracin en especial se adapta dinmicamente al
tamao de pantalla del dispositivo mostrando los
contenidos en su escala correcta.
Esta etiqueta no solo nos sirve para ajustar el tamao del
rea visible, tambin podemos controlar el "pinch zoom"

o zoom gestual del sitio, por ejemplo, el siguiente cdigo

bloquea que los usuarios escalen el tamao de los
contenidos en pantalla:
<meta name="viewport" content="width=devicewidth, user-scalable=no;" />
Si queremos que los contenidos se escalen hasta un
tamao mximo tambin se puede definir con el atributo
"maximum-scale", por ejemplo, este viewport permite
escalar el contenido hasta el doble de su tamao regular:
<meta name="viewport" content="width=devicewidth, initial-scale=1.0, maximum-scale=2.0;" />
Si usas el emulador de iPhone presiona la tecla "alt" para
simular el "pinch" para escalar elementos.

Canvas
Muy similar al concepto de Flash, el elemento canvas es
un rea rectangular que permite representar grficos e
imgenes de forma dinmica en mapa de bits.
Canvas ofrece una amplia gama de posibilidades grficas,
que le permiten controlar todos los pixeles de su
contenido y manipularlos de muchas maneras.
Esta tecnologa tambin es compatible con equipos
mviles y se vuelve particularmente atractiva como un
medio para mostrar animaciones y grficos dinmicos, en
especial, tomando en cuenta que el plugin de Flash fue
descontinuado para equipos Android y no es compatible
con equipos iPhone. Por este mismo motivo el formato
Flash (.swf) no es compatible en aplicaciones PhoneGap.
Insertar Canvas en una app no podra ser ms sencillo,
solamente se debe incluir un cdigo similar a ste en
cualquier parte dentro de <body>
<canvas id="misCanvas"></canvas>
Se recomienda usar el atributo "id" ya que los contenidos
de Canvas se asignan con comandos de javascript,
asignarle un ID facilita la manipulacin desde este

lenguaje.
En el siguiente ejemplo, crea un crculo usando comandos
bsicos en <canvas>
Ejercicio 8.1
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, userscalable=no;" />
<title>Ejercicio 8.1</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="misCanvas" width="200" height="200">
</canvas>
<script>
/// selecciona el elemento canvas
var canvas =
document.getElementById("misCanvas");
var contexto = canvas.getContext("2d");
///crea un crculo dentro de las canvas

contexto.beginPath();
contexto.arc(60, 60, 50, 0, Math.PI*2, true);
contexto.closePath();
contexto.strokeStyle = "#FF0000";
contexto.fillStyle = "#0000FF";
contexto.lineWidth = 3;
contexto.fill();
contexto.stroke();
</script>
</body>
</html>
Como se puede observar lo que realmente genera los
grficos dentro de la API de Canvas es Javascript, en este
caso se gener un crculo de color azul:

Canvas es un tag muy flexible y adems de ser controlable

por javascript es completamente accesible por CSS.

Prueba agregar este cdigo CSS dentro del <head> del

ejemplo anterior para modificar las Canvas
<style>
#misCanvas{ background:#000; width:100%;
height:100%}
</style>
Esa simple lnea le define las propiedades grficas al
canvas, en este caso cambi el tamao y fondo al
elemento que tenamos antes.

Otra caracterstica interesante de las canvas es que

pueden dar un efecto de animacin, se usa la palabra
"efecto" porque lo que realmente sucede es que se
redibuja una imagen ligeramente distinta que da la
sensacin de animacin ante el ojo humano.
En el siguiente ejemplo se crea un crculo partiendo del

que acabamos de crear pero en este caso se redibuja el

crculo muchas veces, a travs de un intervalo de tiempo
de javascript:
Ejercicio 8.2
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=devicewidth, initial-scale=1.0, maximum-scale=2" />
<title>Ejercicio 8.2</title>
<meta charset="utf-8">
<style>
#misCanvas{ background:#000;}
body{ margin:0px; padding:0px;}
</style>
</head>
<body>
<canvas id="misCanvas" width="320" height="480"
></canvas>
<script type="text/javascript">
/// crea un intervalo que redibuja el crculo
var animacion = setInterval("animar()", 1000);
// posiciones originales y velocidad de la

animacin
var posX = 0;
var posY = 0;
var dx = 5;
var dy = 5;
//tamao de la figura
var shapeSize = 50;
// selecciona el elemento canvas y lo convierte
en una variable
var canvas =
document.getElementById("misCanvas");
/// selecciona el contexto 2D que usaremos para
dibujar
var contexto = canvas.getContext("2d");
/// la funcin animar() se ejecutar cada ciclo del
intervalo definido al inicio
function animar(){
// Limpia el dibujo anterior
contexto.clearRect(0, 0, canvas.width,
canvas.height);
/// Crculo
contexto.beginPath();
contexto.arc(posX,posY,shapeSize,0,Math.PI*2,true);

contexto.fillStyle = '#'+
(Math.random()*0xFFFFFF<<0).toString(16);
contexto.fill();
// controla la posicin, evita que los
elementos salgan de vista
if (posX + shapeSize > canvas.width || posX
< 0){
dx = -dx;
}
if (posY + shapeSize > canvas.height || posY
< 0){
dy = -dy;
}
posX += dx;
posY += dy;
}
</script>
</body>
</html>
Este cdigo genera una animacin con circulo de colores
aleatorios que baila por toda la pantalla sin usar ningn
plugin externo.

Canvas y su capacidad para dibujar formas, as como la

de animarlas, es una de las caractersticas de la API de
HTML5 con el soporte ms extendido, es totalmente
seguro usarlo en las aplicaciones PhoneGap para los
principales sistemas operativos de smartphone.

Video (iOS)
Una de las APIs ms famosas de HTML5 es el tag
<video> que permite incluir vdeos directamente en los
documentos HTML5 sin usar ningn plugin.
El soporte para vdeo, aunque est disponible en el
navegador de Android, no est disponible desde las
aplicaciones PhoneGap que usan esta plataforma. Al
momento de escribir este manual, los ejemplos que
veremos a continuacin slo funcionan en equipos iOS.

-Insertar video
Lo primero que se necesita para mostrar video en una
aplicacin PhoneGap, es un archivo con el formato
adecuado para desplegarse correctamente en un equipo
mvil.
Existe una infinidad de programas con la capacidad de
codificar el archivo de video en el formato correcto. En el
presente manual utilizaremos Miro Video Converter, un
proyecto de cdigo abierto, gratuito y multiplataforma. El
programa se puede descargar en el sitio oficial:
http://www.mirovideoconverter.com
Para darle el formato correcto a un video con este
programa slo es necesario arrastrar el archivo a la
ventana del convertidor y en este caso seleccionar la
opcin: "iPhone"

Una vez convertido el archivo, en este caso, puedes

renombrarlo como "video.mp4" y copiarlo en la carpeta
de tu proyecto phoneGap.
Por defecto, cuando en un documento HTML5 se inserta el
tag <video> sin ningn parmetro o configuracin
adicional, se muestra nicamente el primer cuadro del
archivo de video. Para mostrar una imagen diferente, se
utiliza el atributo "poster" con el valor de la imagen que
se desea mostrar. La imagen puede estar en formato PNG,
JPG o GIF.
En este caso usaremos una imagen con el nombre
"thumb.png" previamente incluida en la carpeta del
proyecto.

En el siguiente ejemplo se mostrar el uso del tag <video>

con el atributo "poster"
Ejercicio 8.3
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=devicewidth" />
<title>Ejercicio 8.3</title>
<meta charset="utf-8">
</head>
<body>
<video id="miVideo" src="video.mp4"
width="300px" height="234" poster="thumb.png" >
</video>
</body>
</html>
Este cdigo no slo inserta un video que puede
reproducirse directamente dentro de la aplicacin,
tambin gracias al atributo poster despliega una imagen
que ayuda al usuario a conocer los contenidos del video
que se va a observar.

-Control programtico de video

Aunque en iOS el video incluye automticamente un botn
de reproduccin, tenemos algunas opciones extra para
controlarlo gracias a la API de video.
Por ejemplo, podemos controlar la reproduccin de video
desde elementos externos, prueba agregar este cdigo
luego de </video> en el ejemplo anterior.
<button onClick="reproducir()"> reproducir video
</button>
<script>
function reproducir(){
var videoSeleccionado =
document.getElementById("miVideo")
videoSeleccionado.play();
}
</script>
Este cdigo muestra un botn que vincula el evento
onclick con la funcin reproducir(). Dentro de esta
funcin se selecciona el elemento de video y se activa la
reproduccin a travs del comando de la API de video:
play();
Puedes encontrar documentacion completa sobre esta API

de HTML5 en el sitio oficial del W3C

http://www.w3.org/TR/html5/media-elements.html

Audio (iOS)
HTML5 tambin permite utilizar archivos de audio
anidados directamente dentro del navegador sin necesidad
de plugins, esto se logra gracias al tag <audio>.
Al igual que con el video, la API de audio aunque esta
disponible en el navegador de Android, no lo esta para
aplicaciones basadas en PhoneGap. Los ejemplos que
veremos a continuacin solo funcionan en iOS

-Insertar audio
El formato que necesitamos para insertar audio con
HTML5 en iOS es el omnipresente .mp3, casi seguramente
tienes un archivo de este formato en algn lugar de tu
ordenador, solo cpialo en la carpeta del proyecto
phonegap y renombrarlo como "audio.mp3".
Para insertar audio en un documento debes utilizar el tag
<audio> similar a este cdigo
<audio id="miAudio" src="audio.mp3" controls >
</audio>

Esto muestra automticamente un control bsico del audio

que se acaba de incluir.

El tag <audio> no tiene representacin grfica, por lo que
si no se incluye el atributo "controls" aunque el audio est
presente, no ser visible.

-Control programtico
La API de <audio> es muy similar a la de video y utiliza
los mismos mtodos para controlar el audio.
En el siguiente ejemplo aprovechamos la capacidad que
tiene <audio> de ser invisible al eliminar el atributo
"control" y desplegamos nuestros propios controles,
usando la API de audio:
Ejercicio 8.4
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=2" />
<title>Ejercicio 8.4</title>
<meta charset="utf-8">
<style>
button {
background: green;
border-radius: 10px;
font-size: 1em;
margin: 4%;
padding: 1em;

width: 40%;
}
button:last-of-type {
background: red;
}
</style>
</head>
<body>
<audio id="miAudio" src="audio.mp3"></audio>
<button onClick="reproducir()"> reproducir
</button>
<button onClick="detener()"> detener </button>
<script>
function reproducir(){
var audio =
document.getElementById("miAudio");
audio.play();
}
function detener(){
var audio =
document.getElementById("miAudio")
audio.pause();
}
</script>

</body>
</html>
Los botones controlan la reproduccin del audio y con
algo de diseo adicional estarn listos para cualquier
aplicacin musical.

A lo largo de esta seccin hemos usado CSS para darle

propiedades grficas bsicas a los elementos de HTML5,
en el siguiente captulo, exploraremos a profundidad todas
las opciones que nos ofrece CSS3 para llevar la
apariencia de las aplicaciones PhoneGap un nivel
profesional.

CSS 3
HTML5 es la base de construccin de las aplicaciones en
PhoneGap, pero existe otra herramienta igual de crucial
para crear una aplicacin: el lenguaje CSS (Cascading
Style Sheets).
CSS permite definir o modificar la apariencia de todos y
cada uno de los elementos en un documento HTML o en
nuestro caso una aplicacin PhoneGap.
La ltima versin de la especificacin de este lenguaje es
el CSS3, y al igual que HTML5 est disponible para
utilizarlo en las aplicaciones hechas con PhoneGap.

CSS3 y equipos mviles

CSS3 tiene una relevancia particular en el desarrollo para
dispositivos mviles, ya que las animaciones y
transiciones que crea tienen un performance muy superior
a las creadas a travs de otras tecnologas como
javascript, esto se debe a que la animaciones de CSS3 son
aceleradas por hardware, mientras que una animacin
hecha con javascript se ejecuta desde el procesador y en
los dispositivos mviles, generalmente ste no es tan
veloz como para dar un rendimiento ptimo.
En general se recomienda dar prioridad a CSS para
manipular los elementos grficos y la creacin
animaciones debido a su bajo consumo de recursos en
equipos mviles.

Media queries
Los Media Queries son una serie de condiciones y
requisitos de CSS que permiten ejecutar cdigo al
evaluar ciertas condiciones predeterminadas, por
ejemplo, permiten invocar hojas de estilos adaptadas a las
capacidades especficas de cada dispositivo.
Con Media Queries tienes parmetros ms inteligentes
para definir las condiciones en que se deben mostrar las
hojas de estilo, por ejemplo, invocar hojas de estilo segn
el ancho y alto del navegador o del equipo, la orientacin
actual del dispositivo (horizontal o vertical) y hasta la
resolucin de pantalla.
Debido a que PhoneGap tiene la capacidad de generar
cdigo que funciona en muchos equipos y plataformas, el
uso de media queries es particularmente til para adaptar
el contenido a las condiciones y equipos cambiantes.
Usando media queries, es posible crear un solo cdigo
base con varias hojas de estilo que adapten la apariencia
de la aplicacin al desplegarse en un mvil, un tablet o un
equipo de alta resolucin.

-Sintaxis
Existen dos formas de utilizar media queries en un
documento, la primera es insertarlos directamente en la
llamada al documento CSS, usando para esto el atributo
media:
<link href="css/movil.css" rel="stylesheet"
type="text/css" media="handheld, only screen and
(max-device-width: 480px)" />
De esta forma, la hoja de estilos se ejecutar slo si se
renen las condiciones definidas, en el cdigo anterior
por ejemplo, los estilos que estn en el documento
"movil.css" se mostrarn slo si la aplicacin se ejecuta
en un dispositivo mvil, que tenga como mximo un ancho
de pantalla de 480 pixels.
La segunda opcin para utilizar media queries en un
documento es incluirlos dentro del documento CSS:
@media only screen and (max-width: 480px) {
body{ background:red }
}
@media only screen and (max-width: 999px) {
body{ background:green }

}
En este caso, la misma hoja de estilos puede reaccionar
de diferentes maneras: si el dispositivo mide menos de
480 pixels muestra un background rojo, si mide mas que
este tamao y menos de 999 pixels, el background ser
verde.
Este sencillo ejemplo, en la prctica mostrar un fondo de
color rojo si se ejecuta en un iPhone, mientras que el
fondo ser verde si la misma aplicacin se ejecuta en un
iPad.

Selectores CSS3
CSS3 incluye una nueva gama de selectores que podemos
utilizar en nuestras aplicaciones, eliminando la necesidad
de incluir constantemente clases o IDs. Esto permite que
nuestro cdigo no solo sea ms flexible, tambin, ms
eficiente. Al tener que buscar menos clases o IDs para
aplicar los estilos, le ahorramos algo de carga al limitado
procesador de un dispositivo mvil.
Pongamos manos a la obra , vamos a comenzar a explorar
los selectores usando como base este cdigo que no
utiliza ninguna clase ni ID:
Ejercicio 9.1
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=devicewidth, initial-scale=1.0, maximum-scale=2" />
<title>Ejercicio 9.1</title>
<meta charset="utf-8">
<link rel="stylesheet" href="ejercicio_9-1.css"
/>
</head>

<body>
<h1> Receta de t helado </h1>
<img src="icedTea.png" alt="tefrio" height="157"
width="73"/>
<ul>
<li>Hervir agua</li>
<li>Mezclar T</li>
<li>Agregar Limon y azucar</li>
<li>Enfriar</li>
<li>Disfrute!</li>
</ul>
</body>
</html>
Para mantener el orden del ejemplo, vamos a trabajar con
una hoja de estilos externa que debes crear en la carpeta
de tu proyecto en con el nombre "ejercicio_9-1.css", por
ahora dejalo en blanco.
El cdigo base, produce una aplicacin con este aspecto

Ahora, vamos a aplicarle una serie de estilos bsicos,

para comenzar a trabajar y darle una apariencia un poco
ms amigable a la aplicacin. En la hoja de estilos que
acabas de crear copia este codigo base:
body, h1{margin:0; padding:0;}
html,body{height:100%}
body{background: #f5bd07;}
ul{margin:127px auto 0; padding:0; width:90%;}

h1{font-size:20px; font-weight:normal;
background:#000; color:#fff; height:52px; line-height:
52px; text-align:right}
img{position: absolute; top:0}
li{ list-style-type:none; background:#000000;
height:45px; margin-bottom:10px; color:#fff; textindent:22px; line-height:45px}
Esto es CSS tradicional, el que siempre has utilizado para
crear sitios. Luego de aplicarlos, tenemos un punto de
partida para aplicar el CSS3, tu aplicacin por ahora
debera verse as:

Ahora ya estamos listos para comenzar a utilizar los

nuevos selectores! Comencemos por darle un color
diferente a cada caja de texto sin usar nada ms que
selectores CSS3.
El primero que vamos a usar es :first-child , un nuevo

selector que permite manipular el primer elemento de un

grupo, agrega esta linea al final del archivo .css
li:first-child {background:#733c0a}
Esto selecciona el primer elemento (:firstchild) de la lista
(li) y le asignar un nuevo color.
El cambio de apariencia al agregar una linea al final se da
porque en CSS se pueden asignar mltiples estilos para un
solo tag. Si dos estilos afectan al mismo tag, el ltimo
que se define tiene prioridad.
En los siguientes ejemplos de este captulo - nicamente
para efectos educativos - vamos a aprovechar este
principio de CSS agregaremos los nuevos selectores al
final de la hoja de estilo de esta forma sobre escribirn
cualquier otro efecto anterior y ser posible ver el cambio
de inmediato.
Para seleccionar la segunda casilla de texto, vamos a
utilizar el selector :nth-child que permite elegir un
elemento segn el orden en que aparece. Este selector
hace el conteo a partir del primer elemento del grupo, en
este caso vamos a modificar el segundo elemento, lo
seleccionamos asignando el nmero 2 como parmetro del
selector:

li:nth-child(2) {background:#ab5110}
El tercer elemento lo vamos a seleccionar usando :nth-oftype un selector muy similar al anterior pero que adems
de seleccionar en base al orden de los elementos, slo
afecta elementos de un tipo especfico, en este caso solo
selecciona el tercer elemento de la lista (<li>).
li:nth-of-type(3){background:#cd5d14}
En este caso en el grupo solo hay elementos de tipo <li>
pero si hubiera cualquier otro tag, :nth-of-type lo ignora
en su conteo por no ser del tipo correcto.
El penltimo elemento lo seleccionaremos con nth-lastchild que es el opuesto de nth-child. Este selector
tambin busca los elementos a partir del orden en que se
encuentran, pero hace su conteo a partir del ltimo
elemento. En este caso como queremos seleccionar el
penltimo elemento de la lista, le enviamos el numero 2
como parmetro para que cuente el segundo elemento
antes del final de la lista.
li:nth-last-child(2){background:#e46516}
Este selector es particularmente til si necesitamos
seleccionar elementos al final de una lista de la que

desconocemos la cantidad total de elementos.

Finalmente el ltimo elemento de la lista lo
seleccionaremos con :last-child que selecciona el ltimo
elemento de un grupo:
li:last-child{background:#ff721d}
Ahora la lista se ve mucho ms colorida y sin usar ni una
sola clase de CSS:

Existen muchas formas de seleccionar elementos y tal vez

para este ejemplo nos complicamos ms de lo necesario,
pero fue nicamente con fines pedaggicos.
Puedes encontrar la lista completa de los selectores de
CSS3 en la documentacin oficial del W3C:

http://www.w3.org/TR/selectors/#selectors

Efectos con CSS

Adems de los selectores podemos seguir mejorando
nuestra aplicacin con los nuevos efectos que incluye
CSS3.
Lo mejor de estos efectos es que no solo nos dan un
control total sobre la apariencia de las aplicaciones,
tambin permiten reducir drsticamente el peso total ya
que permiten hacer menor uso de imgenes para crear
elementos de interfase.
Por ejemplo, antes de CSS3 para darle un borde
redondeado a las cajas de texto tenamos que crear
imgenes con dicho borde redondeado y asignar una a
cada casilla, ahora podemos hacer esta tarea en un
segundo con la propiedad border-radius, para darle
bordes redondeados a toda la lista solo es necesario
agregar esta linea:
li{ border-radius:10px; }
De la misma forma, es posible agregarle una sombra a las
casillas con solo agregar esta linea:
li{ box-shadow:2px 2px 2px rgba(0,0,0,0.5)

-webkit-box-shadow:2px 2px 2px rgba(0,0,0,0.5)

}
Este efecto permite definir una sombra definiendo la
distancia X e Y en los primeros dos parmetros y el
desenfocado en el tercer parmetro.
A traves del soporte rgba (red, green, blue, alpha)
podemos incluir colores con transparencia, en este caso se
define el color negro y el ltimo parmetro: 0.5 permite
una transparencia del 50%
El atributo para definir la sombra de un elemento es "boxshadow". En este caso se incluyen dos diferentes
versiones, la versin regular y otra con el prefijo "webkit-" para asegurar el soporte en equipos Android.
Con ambos efectos aplicados - los bordes redondeados y
la sobra - las casillas ahora se ven de esta forma:

Tambin es posible agregarle sombras al texto, con una

propiedad muy similar a la anterior, con text-shadow se le
asignan sobras especficamente al texto:

li{text-shadow:1px 1px 1px rgba(0,0,0,1)}

En este caso se le asigna una sombra de color negro a
todos los elementos de texto que estn en la lista, este es
el resultado:

Por ltimo vamos a usar una gradiente de fondo sin usar

ninguna imagen, solamente tenemos que agregar este
codigo
body{
background: -webkit-gradient(linear, left top, left
bottom, color-stop(15%,#f5bd07), colorstop(33%,#fdf402));
background: -webkit-linear-gradient(top, #f5bd07
15%,#fdf402 33%);
background: linear-gradient(top, #f5bd07
15%,#fdf402 33%);

}
Detallar las propiedades y mecnica de las gradientes es
algo extenso y complicado de explicar en este manual
sobre aplicaciones mviles, para mantener las cosas
prcticas y sencillas se recomienda usar servicios como
colorzilla, que a travs de una interfase grfica genera sin
mayor complicacin el codigo para mostrar gradientes en
CSS.
http://www.colorzilla.com/gradient-editor/

Tipografas
Las tipografas han sido un dolor de cabeza histrico para
los desarrolladores de sitios web desde el inicio de la
internet. Afortunadamente CSS3 soluciona de una vez por
todas el problema y nos permite utilizar fuentes
personalizadas en nuestras aplicaciones.
Servicios como google fonts nos dan la facilidad de
incluir tipografas de uso libre en nuestras aplicaciones
http://www.google.com/webfonts
Google permite que utilicemos cualquiera de sus
tipografas y nos brinda un cdigo para enlazar el
documento con sus fuentes online.
Aunque tcnicamente es posible utilizar las tipografas
online de Google, no se recomienda esta tcnica. Utilizar
contenidos que requieren conexin a internet no es una
prctica recomendable para aplicaciones mviles ya que
los usuarios no siempre tendrn acceso a internet y por
ende las tipografas podran no desplegarse .
Es posible descargar las fuentes de Google Webfonts a
traves de la opcion " Download your collection "

Descarga la tipografa y copia los archivos en la carpeta

del proyecto PhoneGap, para este ejemplo usaremos la
fuente "Della Respira" as que copiamos los archivos en
"/fonts/Della_Respira". Dentro de esta carpeta
encontraremos un archivo "DellaRespira-Regular.ttf" que
es el que contiene la fuente.
El atributo @font-face es el encargado de definir una
nueva tipografa y de incluir en el documento.
Para incluir una nueva fuente usamos el atributo "src" para
definir la ruta al archivo que contiene la tipografa. El
atributo "font-family" define el nombre con el que esta
nueva tipografa estar disponible dentro de la aplicacin.
As por ejemplo, para que la fuente "Della Respira" que
acabamos de descargar se pueda utilizar en nuestra
aplicacin , agregaremos esta lnea al CSS:
@font-face { font-family:DellaRespira; src:
url('../fonts/Della_Respira/DellaRespira-Regular.ttf');
}

En este caso se define la nueva tipografa "dellaRespira"

que se mostrar segn los contenidos del archivo
"Della_Respira/DellaRespira-Regular.ttf".
Importante observar que el archivo de la tipografa
SIEMPRE debe estar dentro de la carpeta de trabajo del
proyecto phonegap y debe accederse a l a travs de un
enlace relativo tal como el que se usa en el ejemplo.
Ahora que est instalada la nueva tipografa podemos
asignarla como una fuente dentro de la aplicacin. Incluye
esta nueva lnea en el documento CSS:
body{font-family: 'DellaRespira', serif;}
As se asignar la fuente "DellaRespira" a todo el texto de
la aplicacin.

Importante sealar que se debe incluir siempre una fuente

segura como segunda opcin, en este caso, si la fuente
personalizada que acabamos de incluir no esta disponible
o no es compatible con el dispositivo o sistema operativo
en que se ejecuta, el texto de la aplicacin se mostrar con

la tipografa "serif".

Transformaciones
CSS3 incluye una nueva gama de propiedades llamadas
transformaciones, stas nos permiten como el nombre lo
dice, transformar objetos ya definidos y escalarlos,
moverlos o girarlos segn sea necesario.
Vamos a probar las transformaciones girando un poco la
imagen de la aplicacin, agrega esta lnea al CSS:
img{ -webkit-transform: rotate(-10deg); }
La funcin rotate() permite rotar un elemento segn un
valor definido en grados (representado como "deg" por la
palabra en ingls "degrees").
Otra caracterstica interesante de las transformaciones es
que podemos asignar varias al mismo tiempo, para probar
esta peculiaridad de las transformaciones reemplaza la
lnea anterior por esta otra
img{ -webkit-transform: rotate(-10deg) scale(0.5) }
Ahora la imagen no solo esta rotada, sino que ha sido
escalada a la mitad de su tamao original:

Si deseas conocer ms sobre las transformaciones, la lista

completa de propiedades est disponible en el W3C en
esta direccin:
http://www.w3.org/TR/css3-2d-transforms/#transformfunctions
Finalmente, nuestra aplicacin tiene una mejor apariencia,
totalmente personalizada gracias a CSS3 y sin usar clases
ni imgenes adicionales.

Transiciones
Ya hemos usado muchos trucos de CSS3 en este ejemplo,
pero an nos queda un As bajo la manga: las transiciones.
Las transiciones de CSS3 permiten pasar de un estado a
otro de manera suave y fluida, en otras palabras, podemos
hacer animaciones al cambiar una propiedad de CSS3.
Para habilitar la capacidad de transformacin de un
elemento es necesario asignar la propiedad de transicin
antes de cualquier transformacin, de lo contrario slo
cambiar de un estado a otro de manera abrupta, sin
ninguna animacin. Para probar una transicin bsica pega
este cdigo en el css del ejemplo:
img{ -webkit-transition: top 1s; }
Esta propiedad define como manejar los cambios que
afecten el elemento seleccionado, en este caso , img.
Al elegir una propiedad, en este caso "top", se indica que
cualquier cambio en el valor de dicha propiedad se
realizar con una transicin suave. Si se quisieran afectar
todas la propiedades se puede utilizar el valor "all".
El segundo parmetro de la transicin define el tiempo
que tardar, as, cuando se modifique la propiedad

seleccionada se crear una animacin de 1 segundo entre

el estado original y el nuevo.
El siguiente ejemplo utiliza una funcin de javascript para
asignar un nuevo valor a la propiedad "top" de las
imgenes. Para activar la transicin. copia este cdigo en
el documento HTML al final del cdigo, antes de
</body>:
<script>
//selecciona los botones
var lista = document.getElementsByTagName("li");
//selecciona la imagen
var imagen = document.getElementsByTagName("img")
[0];
for( elemento in lista ){
//asigna una conducta para el evento click
lista[elemento].onclick = function (elemento){
/// obtiene la posicin del elemento clickado
var posicionDelTexto = this.offsetTop;
// define el offset para ajustar la imagen
var offsetDeImagen = imagen.height/2;

// cambia la posicin "top" de la imagen

imagen.style.top = (posicionDelTexto offsetDeImagen )+"px";
}
}
</script>
Al presionar cualquier botn la copa se mover
suavemente por un segundo hasta ubicarse junto al botn
activo.

Prueba eliminar o modificar la propiedad "transition"

para ver los efectos en la animacin.
Puedes encontrar informacin detallada y completa sobre
las transiciones en la documentacin oficial del W3C

http://www.w3.org/TR/css3-transitions/
Para este punto tienes la informacin para mejorar la
apariencia de tus aplicaciones usando lo ltimo del CSS3
incluso creando animaciones y efectos sin usar
programacin.
Sin embargo, es indispensable utilizar javascript para
crear aplicaciones realmente profesionales, incluso para
los ejemplos ms simples en este manual hemos utilizado
javascript bsico.
En el prximo captulo revisaremos las ventajas que nos
ofrece javascript para crear interactividad y en especial
para enriquecer nuestras aplicaciones manipulando los
sensores y elementos de hardware del equipo mvil.

JAVASCRIPT
JavaScript es el lenguaje que se encarga de la
interactividad en nuestras aplicaciones. Mientras que
HTML provee los datos y CSS se encarga de presentarlos,
JavaScript permite manipular los elementos del
documento, administrar eventos e incluso agregar o quitar
elementos ya existentes.
Imagina que una aplicacin se desarrolla por capas, el
HTML es la capa de datos con toda la informacin,
enlaces e imgenes del documento. CSS es la capa
esttica, diagramando la informacin, asignando colores,
posiciones y efectos. JavaScript se encarga de la capa
interactiva y de acceder los sensores del dispositivo
mvil a travs de la API de PhoneGap.
En este captulo se mostrar cmo utilizar JavaScript en
aplicaciones PhoneGap con ejemplos bsicos y detallando
paso a paso.
Si an no ests familiarizado con las bases de este
lenguaje, dale una visita al centro de documentacin de
Mozilla que tiene excelente referencia y una gua
detallada para aprender JavaScript desde cero.
https://developer.mozilla.org/es/javascript

API de PhoneGap
Tal como se indic anteriormente, PhoneGap comunica
las aplicaciones basadas en HTML5 con el dispositivo a
travs del uso de un interface de funciones forneas que
ejecuta cdigo nativo a partir de comandos invocados por
JavaScript.
A lo largo del libro hemos utilizado varios ejemplos de
JavaScript, ahora vamos a detallar cmo acceder la API
de PhoneGap con ste lenguaje. Javascript es el lenguaje
que nos permitir controlar sensores como la cmara,
micrfono o GPS del dispositivo mvil
PhoneGap tiene una serie de objetos y clases de
JavaScript disponibles para interactuar con los diferentes
sensores y propiedades del dispositivo mvil. Estas
clases a su vez, tienen disponibles mtodos para enviar o
recibir informacin del equipo.
Los mtodos son un conjunto de comandos o instrucciones
predefinidos que realizan una determinada tarea.

-Estructura de los mtodos

Debido a que PhoneGap funciona en muchos sistemas
operativos y dispositivos, no siempre se puede contar con
la disponibilidad o permisos de acceso a un sensor.
Partiendo de esta premisa, en PhoneGap la mayora de los
mtodos fueron planeados para reaccionar en ambos
casos: si el sensor est disponible o si hay algn
problema para leerlo. La estructura en general que tienen
estos mtodos es:
Metodo( respuestaExitosa , AccionDeError,
{opciones} );
Los mtodos de PhoneGap generalmente incluyen dos
argumentos, en el primer argumento, se debe incluir el
nombre de una funcin. Esta funcin se ejecutar cuando
el mtodo obtenga exitosamente la informacin solicitada.
El primer argumento es el ms importante de definir
porque all es donde se recibe la respuesta del dispositivo
y se puede interactuar con los datos recibidos del sensor.
Segn el ejemplo, si el mtodo invocado realiza una
lectura normal y exitosa, ejecutar la funcin
respuestaExitosa.
El segundo argumento tambin incluye el nombre de una
funcin. Esta funcin se ejecutar cuando exista algn

problema para obtener los datos. Este argumento es

importante porque no siempre los sensores son accesibles
por varias razones,es posible que el equipo que ejecuta el
programa carezca del sensor solicitado, que el usuario no
autorice el acceso o simplemente est daado. Este
argumento tambin recibe datos relativos al error, que le
permite a la aplicacin reaccionar segn el tipo de
problema.
En el cdigo de ejemplo, si el mtodo no puede leer el
sensor indicado, ejecutar la funcin "AccionDeError" y
le enviar los detalles del error encontrado.
El ltimo argumento define los parmetros de lectura del
sensor, a diferencia de los anteriores, no recibe
informacin sino que la enva. Dependiendo del sensor
que se utilice es posible que se necesite configurar en
detalle la lectura del hardware, por ejemplo, calibrar la
calidad o tamao de la imagen capturada por la cmara,
definir la exactitud del GPS o el intervalo de tiempo para
detectar la rotacin del equipo.
Conociendo las partes de un mtodo regular de PhoneGap,
tomemos por ejemplo un llamado al sensor de GPS:
navigator.geolocation.getCurrentPosition (lecturaGPS,
errorGPS,{enableHighAccuracy: true});
function lecturaGPS(ubicacion){

alert("GPS activado y funcional")

}
function errorGPS(error){
alert("GPS no disponible")
}
En este caso getCurrentPosition es un mtodo de
navigator.geolocation. Este mtodo va a conectarse a la
API de PhoneGap y le solicitar informacin sobre el
sensor de GPS.
Si el dispositivo en el que se ejecuta este cdigo tiene
soporte para GPS, el sensor es funcional y el usuario
autoriza compartir su posicin, devolver las coordenadas
en que se encuentra ubicado el aparato. En este caso, al
ser exitosa la llamada se ejecutar la funcin del primer
argumento (lecturaGPS).
La funcin lecturaGPS recibe un objeto con toda la
informacin de respuesta del sensor, este objeto se recibe
como un parmetro en la funcin. En el caso del ejemplo,
el parmetro ubicacion contiene toda la informacin
sobre las coordenadas del equipo.
Si por el contrario, el sensor no esta disponible por
cualquier motivo, se ejecutar el segundo argumento
activando la funcin de error (errorGPS). Dicha funcin
tambin recibe una respuesta con los detalles del error. En

el caso del ejemplo, la funcin errorGPS puede acceder

los datos del error a travs del parmetro error.
Finalmente, en algunos mtodos se incluye un parmetro
adicional que modifica o configura la lectura regular del
dispositivo. Por lo general este parmetro adicional esta
en formato JSON y puede incluir mltiples indicaciones.
En el caso del ejemplo el parmetro enableHighAccuracy:
true fuerza al dispositivo a entregar la mayor exactitud
posible de sus coordenadas.
En la siguiente seccin se revisar con detalle el uso de
este y muchos otros mtodos de la API de PhoneGap, por
ahora el propsito es mostrar un ejemplo del flujo de los
eventos y estructura de los mtodos de la API de
PhoneGap.
Esta estructura se aplicar consistentemente en casi todos
los mtodos de la API de PhoneGap y es crucial
comprenderla cabalmente para crear aplicaciones de
buena calidad.

jQuery mobile
Posiblemente el framework de JavaScript ms utilizado en
la web es jQuery y tiene su versin adaptada para
dispositivos mviles llamado jQuery Mobile.
jQuery Mobile es un plugin del jQuery original y requiere
que este ltimo est instalado previamente para poder
funcionar.
Una vez activo, jQuery Mobile hace dos cosas: primero,
optimiza las funciones nativas para mejorar su
performance en equipos mviles , segundo, modifica el
HTML y genera un layout con una serie de elementos
grficos predefinidos que acelera sustancialmente la
velocidad de produccin.

-Instalar jQuery Mobile

Aunque es posible y es una tcnica muy comn en sitios
web, instalar jQuery Mobile enlazando directamente a los
archivos almacenados en la nube, se recomienda
ampliamente no aplicar esa tcnica para aplicaciones
PhoneGap.
Muy frecuentemente tu aplicacin ser utilizada sin
ninguna conexin a internet o con conexin intermitente. Si
los archivos de jQuery estn enlazados a documentos en la
nube, la aplicacin quedara posiblemente inutilizable.
Para instalar este framework, lo primero que debes hacer
es descargar jQuery en su pgina oficial:

http://docs.jQuery.com/Downloading_jQuery#Current_Rele
Crea una subcarpeta llamada "js" dentro de tu proyecto
PhoneGap y guarda all el archivo de jQuery.
Una vez descargado jQuery, debes descargar el plugin de
jQuery Mobile desde su sitio web oficial:
http://jquerymobile.com/download/
Crea una carpeta con el nombre "jQueryMobile",
descomprime el archivo .zip que acabas de descargar y
copia all todos los archivos que contiene. Al final
deberas tener una estructura similar a esta:

El nombre de los archivos de jQuery y jQuery Mobile

cambia segn la versin. Si la versin que descargaste
tiene otro nombre recuerda hacer los ajustes en el cdigo
del ejercicio.
Como mencionamos jQuery Mobile cumple dos funciones:
optimiza las acciones de jQuery y genera una interfaz
adaptada para dispositivos mviles, por eso es que este
plugin contiene imgenes y hojas de estilo.
Pongamos manos a la obra con el cdigo y comencemos a
construir una aplicacin con jQuery Mobile. comencemos
con este cdigo base:

Ejercicio 10.1
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=devicewidth, initial-scale=1.0, maximum-scale=2" />
<title>Ejercicio 10.1</title>
<meta charset="utf-8">
<link rel="stylesheet"
href="js/jQueryMobile/jQuery.mobile.theme1.1.0.min.css" />
<script src="js/jQuery-1.7.2.min.js"></script>
<script src="js/jQueryMobile/jQuery.mobile1.1.0.min.js"></script>
</head>
<body>
</body>
</html>
Como se puede observar en negrita agregamos 3 lneas de
cdigo extra para incluir los archivos descargados. La
primera incluye la hoja de estilos de jQuery Mobile que
se usar para crear las interfaces, la segunda lnea incluye

el el framework de jQuery propiamente dicho y la tercera

es la que inserta el plugin de jQuery Mobile.
Por ahora el cdigo no muestra ningun elemento en el
navegador, a continuacin vamos a explorar cmo crear
una interfaz de usuario con jQuery Mobile.

-Creacin de Interfaces
jQuery Mobile nos permite crear interfaces optimizadas
para dispositivos mviles muy rpidamente y con
relativamente poco esfuerzo.
La forma en que trabaja, es reescribiendo el cdigo
original del documento y generando uno nuevo, ms
complejo, segn las caractersticas y argumentos
solicitados.
Una caracterstica interesante de jQuery Mobile es que, a
diferencia de un sitio web, que pasa de un documento
HTML a otro para mostrar la informacin, las pginas o
"pantallas" de una aplicacin se manejan desde un solo
documento HTML.
Las pginas o "pantallas" estn en un nico archivo,
jQuery Mobile las administra para mostrar slo la parte
del documento correspondiente a cada pantalla mientras
que el resto permanece oculto. De esta forma se acelera
sustancialmente la carga de pginas, tambin permite
administrar eventos y animaciones entre una pantalla y
otra.
jQuery Mobile aprovecha al mximo los nuevos
elementos de HTML5 y hace un uso intensivo de los
atributos personalizados que se definen con el prefijo
"data-"

Por ejemplo "data-role", uno de los atributos ms usados

en jQuery Mobile, permite definir el rol a nivel de
funcionalidad y apariencia del elemento que lo contiene.
Al definir el rol de un elemento, este atributo permite
crear pginas, botones, mens y muchos elementos ms.
Al insertar el atributo "data-role" en cualquier tag lo
convertimos en un elemento de la interfaz. Sin necesidad
agregar ningn cdigo adicional jQuery agrega todos los
elementos grficos, clases y hasta animaciones necesarios
para el funcionamiento de ese elemento en particular.
Por ejemplo, para crear una pgina se utiliza el atributo
data-role="page" de esta forma:
<div data-role="page" id="inicio">
Inicio
</div>
Cuando jQuery Mobile renderiza la aplicacin comprende
que este div debe ser interpretado como una pgina. Le
agrega el cdigo y eventos necesarios para que se
comporte y vea como tal.
Usando el mismo principio, vamos a utilizar el atributo
data-role="header" para agregar un encabezado a la
pgina que acabamos de crear:

<div data-role="page" id="inicio" >

<div data-role="header">
<h1> Inicio </h1>
</div>
</div>
Ya tenemos una pagina con un encabezado, fijate que se
gener un fondo negro detrs del texto, en este caso como
jQuery detect que ese elemento era un header y
automticamente le agreg las imgenes necesarias para
que tenga la apariencia de un encabezado.

Como se mencion antes, jQuery Mobile encapsula toda

la aplicacin en un solo documento, as que todas las

pantallas deben agregarse en el mismo documento,

agreguemos dos pantallas ms a esta aplicacin:
<div data-role="page" id="pantalla2">
<h1> Pantalla 2 </h1>
</div>
<div data-role="page" id="pantalla3">
<h1> Pantalla 3 </h1>
</div>
Tenemos tres pantallas pero la aplicacin se sigue viendo
exactamente igual. Esto porque aun no tenemos ninguna
forma de navegar entre ellas, para crear elementos de
navegacin slo es necesario agregar un enlace normal de
HTML, en este caso vamos a incluirlo en la primera
pantalla, al inicio de la aplicacin:
<div data-role="page" id="inicio" >
<div data-role="header">
<h1> Inicio </h1>
</div>
<a href="#pantalla2"> Ir a Pantalla 2 </a>
</div>
Como habr notado el lector, en el cdigo todas las

pantallas tienen un atributo "id" diferente. Para navegar

entre pantallas los enlaces deben usar el nombre del ID
agregando el signo "#" al inicio.

El enlace del ejemplo no solo permite ir a la pantalla 2 ,

jQuery Mobile automticamente incluy una animacin de
transicin para darle una apariencia similar a la de una
aplicacin nativa.
Llevemos un poco ms lejos el enlace que acabamos de
crear y agreguemos el atributo de jQuery Mobile datarole="button" para que este enlace se comporte como un
botn:
<a href="#pantalla2" data-role="button"> Ir a Pantalla
2 </a>
Al probar el cdigo anterior se ver algo similar a esto:

Mucho mejor, cada vez se ve ms similar a una

verdadera aplicacin! El siguiente problema es que, en
esta aplicacin, cuando avanzamos a la siguiente pantalla,
no hay forma de regresar.
Para regresar a la pgina principal, se puede aplicar la
tcnica anterior de enlazar un link al id de la pgina
principal, o ms sencillo an, se puede utilizar el
atributo data-rel="back" que regresa la aplicacin a la
pantalla inmediatamente anterior.
<a href="#" data-rel="back" data-role="button" >
Regresar </a>

En este punto ya tenemos una aplicacin mnima con una

navegacin bsica y hasta transiciones de pantalla.
Para crear una aplicacin ms compleja con muchas
secciones, es posible que se necesite mostrar estas
secciones en forma de lista de enlaces directos a cada
seccin. Esto lo logramos aplicando el atributo datarole="listview" a cualquier lista regular :
<ul data-role="listview" >
<li><a href="#pantalla3"> Pantalla 1</a></li>
<li><a href="#pantalla3"> Pantalla 2 </a></li>
<li><a href="#pantalla3"> Pantalla 3 </a></li>
<li><a href="#pantalla3"> Pantalla 4 </a></li>

<li><a href="#pantalla3"> Pantalla 5 </a></li>

<li><a href="#pantalla3"> Pantalla 6 </a></li>
</ul>
En el cdigo anterior creamos una lista normal de enlaces,
pero con el uso de listview se genera un nuevo elemento
de tipo lista:

Con las listas podemos crear mens extensos que

abarquen mltiples pginas internas. Al igual que en con

los otros elementos de navegacin, las transiciones entre
pantallas incluyen las animaciones automticamente.
Por ltimo, vamos a agregar un men de navegacin en
esta pantalla. Al igual que con el elemento anterior,
utilizamos una lista con enlaces para generar el elemento,
pero esta vez se usar el atributo data-role="navbar" para
crear una barra de navegacin :
<div data-role="navbar">
<ul>
<li><a href="#pantalla1">Inicio</a></li>
<li><a href="#pantalla2">Pantalla 2</a></li>
<li><a href="#pantalla3">Otros</a></li>
</ul>
</div>

El siguiente ejercicio integra todos los elementos que

examinamos en una sola aplicacin:
Ejercicio 10.2
<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=devicewidth, initial-scale=1.0, maximum-scale=2" />
<title>Ejercicio 10.2</title>
<meta charset="utf-8">
<link rel="stylesheet"
href="js/jqueryMobile/jquery.mobile.theme1.1.0.min.css" />
<script src="js/jquery-1.7.2.min.js">
</script>
<script src="js/jqueryMobile/jquery.mobile1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="inicio" >
<div data-role="header">
<h1> Inicio </h1>
</div>
<a href="#pantalla2" data-role="button"> Ir a
Pantalla 2 </a>
</div>
<div data-role="page" id="pantalla2">
<div data-role="header">

<h1> Pantalla 2 </h1>

</div>
<a href="#" data-rel="back" datarole="button" > Regresar </a>
<ul data-role="listview" >
<li><a href="#pantalla3"> Pantalla 1</a>
</li>
<li><a href="#pantalla3"> Pantalla 2 </a>
</li>
<li><a href="#pantalla3"> Pantalla 3 </a>
</li>
<li><a href="#pantalla3"> Pantalla 4 </a>
</li>
<li><a href="#pantalla3"> Pantalla 5 </a>
</li>
<li><a href="#pantalla3"> Pantalla 6 </a>
</li>
</ul>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="#pantalla1">Inicio</a>
</li>
<li><a href="#pantalla2">Pantalla
2</a></li>

<li><a href="#pantalla3">Otros</a>
</li>
</ul>
</div><!-- /navbar -->
</div>
</div>
<div data-role="page" id="pantalla3">
<h1> Pantalla 3 </h1>
<a href="#" data-rel="back" datarole="button" > Regresar </a>
</div>
</body>
</html>

Pros y contras de jQuery

Mobile
No hay tecnologa perfecta y jQuery no es la excepcin.
Muchos desarrolladores crean todas sus aplicaciones con
esta tecnologa mientras que otros la evitan al mximo,
todo depende de las preferencias personales.
Aqu una breve lista de ventajas y desventajas de
desarrollar con jQuery Mobile para que puedas tomar la
mejor decisin.
Pros:
Desarrollo rpido de interfaces.
Sintaxis sencilla.
Efectos prediseados.
Manejo de eventos.
Baja curva de aprendizaje.
Contras:
Agrega peso extra a la aplicacin.
Manejo complejo de CSS.
Los efectos no funcionan fluidamente en algunos
equipos de baja gama.
Las aplicaciones ms grandes pueden hacer lenta la

carga por trabajar en un solo archivo.

Menos control general del cdigo.
jQuery Mobile es una excelente plataforma para comenzar
a desarrollar, para aplicaciones pequeas o medianas y
para acelerar tu produccin.
Si deseas aprender ms sobre este framework puedes
encontrar documentacin detallada en su sitio oficial
http://jQuerymobile.com/demos/
Tambin existen otros frameworks similares a jQuery
Mobile como Sencha Touch o DHTMLX touch con una
aproximacin similar de desarrollo rpido con elementos
prediseados.
jQuery Mobile y frameworks similares son un paquete
completo con su propio CSS, elementos grficos, eventos
y mtodos, que, aunque ofrecen una gran comodidad, a
muchos desarrolladores les gusta tener ms control sobre
sus aplicaciones, vamos a explorar entonces una solucin
para los que prefieren algo ms simple y transparente.

XUI
XUIJS es una librera de JavaScript creada
especficamente para dispositivos mviles, a diferencia
de jQuery Mobile que crea todos los elementos graficos,
XUI es una librera completamente minimalista, pensada
para los que se enfocan en la eficiencia y quieren
mantener control total sobre los elementos de la interfaz.
Una de las principales ventajas que tiene XUI es tu
tamao, apenas 10.4 Kb en su versin reducida
(comparado con los (70kb extra de jQuery Mobile). XUI
se adapta perfectamente con PhoneGap, de hecho su
creador, Brian Leroux, es tambin uno de los principales
desarrolladores de PhoneGap.

-Instalacin
Instalar XUI es sumamente sencillo. Crea una carpeta "js"
en tu proyecto PhoneGap y copia all la versin de XUI
con soporte para webkit que encuentra en el sitio oficial
http://xuijs.com/downloads
La estructura de archivos de una aplicacin basada en
XUI debera verse similar a esta imagen:

Como muchas otras libreras el nombre del archivo

cambia segn la versin, si el archivo que descargas tiene
un nombre distinto recuerda hacer las adaptaciones del
caso.
Para habilitar XUI en un documento solo se necesita
invocarlo como cualquier otro archivo JavaScript, en este
caso sera as:
<script src="js/xui-2.3.2.min.js"> <script>
Para dar un ejemplo de lo sencillo que es utilizar XUI
vamos a crear un lector de RSS en menos de 10 lneas de

cdigo.
Partiremos con este cdigo como base:
Ejercicio 10.3
<!doctype html>
<html>
<head>
<title>Ejercicio 10.3</title>
<script src="js/xui.js"></script>
</head>
<body>
<ul id="contenedor">
</ul>
</body>
</html>
Este cdigo, apenas tiene una llamada a la librera XUI y
una lista vaca con el id "contenedor".
La primera lnea que vamos a agregar escuchara un evento
"ready". En XUI este evento se activa en cuanto el
documento est cargado y listo para ser manipulado.
x$.ready( init );

Como se ve, el mtodo recibe un argumento, cuando se

activa el evento "ready" se invoca una funcin, en este
caso se activar la funcin "init"

function init(){
x$(document').xhr('http://feeds.feedburner.com/revolucion
format=xml', function() {
x$(this.responseXML).find("item title").each(bloque)
});
}
Dentro de la funcin incluimos el mtodo xhr que permite
llamadas a otros documentos a travs de AJAX.
En este caso, el mtodo xhr invocar el URL en el que se
encuentra el feed RSS de revolucion.mobi.
Recuerda que si estas trabajando en iOS, tanto esta como
cualquier otra aplicacin necesita autorizacin para
acceder dominios externos, tal como se explica en el
captulo 9 de este manual.
Cuando XUI se logra conectar el archivo externo, activa
el segundo argumento que, en este caso, est incluido
directamente como funcin. La informacin de respuesta
que se recibe, en este caso un documento XML es enviada
automticamente como el parmetro "this.responseXML".

En XUI, cualquier elemento que se incluya dentro de x$()

ser seleccionado y podr ser manipulado, as que vamos
a seleccionar el objeto con la informacin de respuesta
para parsearlo:
x$(this.responseXML)
Una vez seleccionado un elemento, podemos encadenarle
otros mtodos, ac por ejemplo usamos "find" para que
seleccione nicamente los nodos <item> que se
encuentren dentro del documento Esto porque segn el
standard del RSS cada post del blog que estamos
revisando se incluye en un nodo <item>.
x$(this.responseXML).find("item")
Por ltimo, el resultado de la seleccin es un array o
conjunto de elementos, al final se agrega un ltimo
mtodo: "each" este mtodo ejecutar una funcin por
cada elemento del array.
x$(this.responseXML).find("item").each(bloque)
En este caso, la funcin "bloque" se ejecutar cada vez
que XUI encuentre un articulo dentro del documento.

function bloque(element){
var texto = element.getElementsByTagName("title")
[0].textContent;
var entrada = '<li> ' + texto +' </li>';
x$("#contenedor").html('bottom',entrada);
}
En la funcin bloque se procesa cada entrada del blog, se
le extrae la informacin del ttulo y por ltimo se agrega
la lista contenedor con el mtodo "html" de XUI que
adems tiene una prctica opcin para ubicar el texto en
diferentes posiciones del nodo seleccionado, en este caso
"bottom" agrega una linea al final del texto actual, as los
ttulos se irn agregando consecutivamente a la lista.
El lector de noticias por RSS ya est listo!
Gracias a XUI, este simple lector de RSS solo necesit 10
lneas de programacin y apenas le agrego 10kb extra a la
aplicacin, no es en vano que esta librera es una de las
favoritas de muchos desarrolladores PhoneGap, entre los
cuales se incluye el autor de este manual. ;)
El cdigo completo, con algo de CSS extra se vera as:
Ejercicio 10.4

<!doctype html>
<html>
<head>
<title>Ejercicio 10.4</title>
<script src="js/xui-2.3.2.min.js"></script>
<script>
x$.ready(init);
function init(){
x$(document).xhr('http://feeds.feedburner.com/revolucionm
format=xml', function() {
x$(this.responseXML).find("item").each(bloque)
});
}
function bloque(element){
var entrada = '<li> <a
href="'+element.getElementsByTagName("link")
[0].textContent+'"> ' +
element.getElementsByTagName("title")
[0].textContent+'</a> </li>';
x$("#contenedor").html('bottom',entrada);
}
</script>
<style type="text/css">
ul, body{margin:0; padding:0}

li{
border-bottom: 1px solid #1f3953;
font-size: 17px;
font-family:Arial;
text-shadow:1px 1px 1px #000;
list-style-type: none;
overflow: hidden;
padding: 5px;
background-image: -webkit-gradient( linear, left
bottom, left top, color-stop(0.23, rgb(59,109,160)),
color-stop(0.71, rgb(93,153,195)));
}
a{display:block; text-decoration:none; color:
#FFF;}
</style>
</head>
<body>
<ul id="contenedor">
</ul>
</body>
</html>
Este sencillo lector se ver as:

Si deseas aprender ms sobre el proyecto XUI puedes

encontrar documentacin en su sitio oficial
www.xuijs.com
Para este punto del libro, ya hemos analizado todas las
partes de una aplicacin PhoneGap bsica, desde su
anatoma hasta los lenguajes que la controlan.
El prximo paso es acceder los sensores del dispositivo y
llevar nuestras aplicaciones al siguiente nivel.
En la siguiente seccin revisaremos uno por uno los
principales elementos de la API de PhoneGap y las
tcnicas para controlar el hardware del dispositivo mvil.

INFORMACION DEL
USUARIO
Acceder la informacin del dispositivo mvil puede ser
crucial para algunas aplicaciones que necesiten una
versin en especial de software, conocer el sistema
operativo en que se ejecutan o simplemente mostrar
informacin del usuario.
Estas capacidades toman particular importancia si
tomamos en cuenta que uno de los principales beneficios
de PhoneGap es la capacidad de generar un slo cdigo
base que puede funcionar en mltiples plataformas.
Conocer en detalle la informacin del sistema permite
crear un cdigo adaptable a la plataforma en la que
funciona, ejecutar slo acciones que le sean compatibles
y evitar cualquier comando que tenga problemas de
soporte o compatibilidad.
Con la informacin del sistema es posible por ejemplo
mostrar una apariencia grfica si el equipo usa Android y
otra si esta en iPhone, Blackberry o Windows Phone
ofreciendo una experiencia ms consistente y
contextualizada.

Las propiedades disponibles para acceder la informacin

del dispositivo son:
device.name: obtiene el nombre del dispositivo, en
equipos android obtiene el nombre del modelo, en
equipos iOS obtiene el nombre asignado por el
usuario.
device.cordova: muestra el numero de version de
Cordova
device.platform: nombre del sistema operativo
device.version: versin del sistema operativo
device.uuid: nmero de identificacin del
dispositivo

Mostrar la plataforma del

equipo
Con la propiedad device.platform podemos conocer cual
sistema operativo esta usando el usuario.
Esta propiedad puede ser invocada en cualquier momento
y devuelve una cadena de texto con el nombre del sistema
operativo en que funciona la aplicacin, por ejemplo :
"Android" "iPhone". En el caso especial de que esta
propiedad se invoque desde el simulador de iPhone,
device.platform devolver como resultado la cadena
"iPhone Simulator"
En el siguiente ejemplo se utilizar esta propiedad para
cargar una hoja de estilos diferente segn el sistema
operativo en que se ejecute la aplicacin:
Ejercicio 11.1
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 11.1</title>
<meta charset="utf-8">

<script type="text/javascript" charset="utf-8"

src="cordova.js"></script>
<script type="text/javascript">
//Notifica cuando el dispositivo esta listo
document.addEventListener("deviceready",
onDeviceReady, false);
// el dispositivo esta listo
function onDeviceReady() {
//muestra una ventana con el nombre del sistema
operativo
alert("Ests usando: "+device.platform);
var archivoCSS
switch(device.platform){
case "iPhone":
//muestra una hoja de estilos especifica
para iPhone
archivoCSS = "css/skin_iPhone.css";
break;
case "iPhone Simulator":
//el emulador de iphone se muestra como
otra plataforma
archivoCSS = "css/skin_iPhone.css";;
break;

case "Android":
//muestra una hoja de estilos especifica
para iPhone
archivoCSS = "css/skin_Android.css";
break;
default:
// si no detecta equipo iPhone ni Android
muestra esta version
archivoCSS = "css/skin_Default.css";
break;
}
var headID =
document.getElementsByTagName("head")[0];
var cssNode = document.createElement('link');
cssNode.rel = 'stylesheet';
cssNode.href = archivoCSS;
headID.appendChild(cssNode);
}
</script>
</head>
<body>
</body>
</html>

Este cdigo le permite a una aplicacin 2 diferentes

apariencias una para Android y otra para iPhone, adems
incluye una opcin especial para mostrar la apariencia de
iPhone en caso de que se ejecute desde el simulador de
iOS

Mostrar la versin del

sistema operativo
Con PhoneGap es posible tambin conocer la versin del
sistema operativo del dispositivo. A traves del metodo
device.version se puede obtener esta informacin de
versin, algo especialmente til con sistemas operativos
como Android que tiene una base de usuarios muy diversa
y distribuida en muchas diferentes versiones de sistema
operativo.
El siguiente ejemplo muestra la versin y cdigo del
sistema operativo Android del usuario:
Ejercicio 11.2
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 11.1</title>
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>
<script>
document.addEventListener("deviceready",

onDeviceReady, false);
function onDeviceReady(){
/* crea las variables que seran actualizadas segun
la informacion del sistema*/
var sistemaOperativo
var numeroVersion;
if(device.platform == "Android"){
sistemaOperativo = "Android";
switch(device.version){
case "2.1":
numeroVersion = "Eclair";
break;
case "2.2":
numeroVersion = "Froyo";
break;
case "2.3":
numeroVersion = "Gingerbread";
break;
case "3.0":
numeroVersion = "Honeycomb";
break;
case "4.0":
numeroVersion = "Ice Cream
Sandwich";

break;
case "4.1":
numeroVersion = "Jelly Bean";
break;
}
}else if(device.platform == "iPhone" ||
device.platform == "iPhone Simulator" ){
sistemaOperativo = "iOS";
numeroVersion = device.version;
}
/*selecciona el div "informacion" y le asigna
contenido */
document.getElementById("informacion").innerHTML=
"Ests usando: "+sistemaOperativo + " con la version:
" + numeroVersion ;
}
</script>
</head>
<body>
<h1 id="informacion"></h1>
</body>
</html>

Identificacin de equipos y
consideraciones de
privacidad
El UUID ( Universally Unique Identifier ) es un
identificador del dispositivo que se usa para reconocer
una unidad especfica, es similar al concepto de nmero
de serie del equipo o el MAC address de una terminal de
red. En teora, el UUID es un identificador nico, aunque
segn la plataforma el tipo de identificacin vara.
En el caso de Android, se usa como identificacin una
integral aleatoria de muy baja probabilidad de repeticin,
ms no necesariamente nica.
Los equipos iOS crean un UUID nico a partir de un
nmero basado en algunos elementos de hardware del
dispositivo.
En los equipos con Blackberry OS el identificador es el
nmero de PIN, mientras que los aparatos con Windows
Phone crean un hash basado en el dispositivo+usuario
El siguiente ejemplo muestra el nmero UUID de un
dispositivo:

Ejercicio 11.3
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 11.3</title>
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
//Notifica cuando el dispositivo esta listo
document.addEventListener("deviceready",
onDeviceReady, false);
// el dispositivo esta listo
function onDeviceReady() {
/// obtiene el numero de identificacion
var identificacion = device.uuid
//selecciona el elemento con el ID
"informacion" y muestra los datos
document.getElementById("informacion").innerHTML
= "El UUID de este equipo es: <br>"+identificacion
}
</script>

</head>
<body>
<p id="informacion"> </p>
</body>
</html>
La aplicacin resultante va a mostrar la cadena de
identificacin propia del sistema operativo en el que se
ejecute, similar al que se muestra en la imagen:

Al momento de escribir este manual las aplicaciones que

utilizan esta propiedad para identificar usuarios tienen
altas probabilidades de rechazadas en la appstore de
Apple debido a problemas de privacidad. Para garantizar
la aprobacin de tu aplicacin se recomienda usar con
precaucin esta propiedad o mejor, aun no utilizarla si no
es realmente necesario.

NOTIFICACIONES
En muchas ocasiones nuestras aplicaciones necesitarn
enviar alertas al usuario o consultarle su aprobacin para
algn efecto en el sistema, PhoneGap utiliza las
notificaciones nativas del sistema para enviar alertas,
crear dilogos de confirmacin, sonar timbres o utilizar el
vibrador del dispositivo

Enviar alertas
JavaScript , por defecto tiene una alerta bsica que
muestra un mensaje al usuario, esta alerta se invoca con el
mtodo alert() y es compatible con cualquier dispositivo
mvil.
En el siguiente ejemplo se muestra una alerta bsica de
JavaScript
Ejercicio 12.1
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 12.1</title>
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>
<script type="text/javascript">
//muestra una alerta basica
function mostrarAlerta() {
alert("alerta bsica");
return false;

}
</script>
</head>
<body>
<button onclick="mostrarAlerta();">Mostrar
alerta</button>
</body>
</html>
El ejemplo anterior vincula el evento onClick con la
funcin mostrarAlert() que, en este caso, despliega la
alerta usando el comando alert()de JavaScript

Esta alerta, aunque til, no nos deja mucho control sobre

el mensaje, solamente podemos mostrar el texto central de
la alerta, el resto de elementos no esta en nuestras manos.
Es posible mostrar ventanas ms personalizadas usando la
API de Phonegap a travs del mtodo
navigator.notification.alert() que permite personalizar los
elementos del pop up.
Vamos a modificar la funcin mostrarAlerta() para que

muestre este nuevo tipo de alerta, reemplaza el codigo de

la funcin aterior por este otro:
function mostrarAlerta() {
navigator.notification.alert('Esta es una alerta de
PhoneGap', null,'Mi aplicacion', 'Aceptar');
}
El mtodo navigator.notification.alert usa nuevos
parmetros. El primero define el mensaje de la alerta
igual que el mtodo bsico, el segundo parmetro permite
activar una accin luego de que se presiona el botn
aceptar, en este caso no es necesario este proceso as que
se define como null. El tercer parmetro define el texto
del ttulo y el ltimo parmetro muestra el texto del botn.
Ahora la ventana de alerta muestra un texto totalmente
personalizado:

Tambin es posible crear dilogos de confirmacin

usando el mtodo notification.confirm que funciona muy
similar al anterior:
navigator.notification.confirm('Desea aceptar las
condiciones?', respuesta,'Mi aplicacion',
'Aceptar,Rechazar');
Al igual que la alerta, el dilogo de confirmacin de

PhoneGap tiene 4 parmetros, en el caso anterior dejamos

el segundo parmetro en "null". Esta vez se incluye una
funcin "respuesta" que se activar cuando se presione
algn botn del dilogo.
Otro cambio que se incluye en las confirmaciones en el
ltimo parmetro en vez de poner el nombre del botn,
incluye el nombre que tendrn los diferentes botones,
separados por coma. Aunque poco frecuente usar ms de 2
valores, es posible agregar ms elementos a esta ltima
opcin, cada palabra separada por coma se convertir en
un botn.
Cuando el usuario presione algn botn de la alerta, se
activar la funcin respuesta(), cada uno de los botones
internos tiene asignado automticamente un nmero segn
su orden, as, en este ejemplo "aceptar" devuelve un valor
de 1 y "rechazar" un valor de 2. Veamos como la funcin
respuesta() procesa estos valores:
function respuesta(boton) {
if(boton == 1){
alert("has aceptado las condiciones")
}else if( boton == 2){
alert( "no aceptas las condiciones" )
}
}

Gracias a que la funcin respuesta()se ejecuta nicamente

cuando el usuario presiona un botn de la alerta y tiene la
capacidad de reaccionar segn esta respuesta, es posible
utilizar este tipo de alertas para crear aplicaciones ms
sofisticadas que slo ejecuten acciones cuando el usuario
lo autorice explicitamente.
En el siguiente ejemplo se muestran los 3 tipos diferentes
de alertas en accin:
Ejercicio 12.2
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 12.1</title>
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>
<script type="text/javascript">
//muestra una alerta bsica
function mostrarAlerta1() {
alert("alerta bsica");
return false;
}

//muestra una alerta personalizada

function mostrarAlerta2() {
navigator.notification.alert('Esta es una alerta
de PhoneGap', null,'Mi aplicacion', 'Aceptar');
}
// muestra un dilogo de confirmacin
function mostrarAlerta3() {
navigator.notification.confirm('Desea aceptar
las condiciones?', respuesta,'Mi aplicacion',
'Aceptar,Rechazar');
}
// reacciona segn la respuesta del dilogo de
confirmacin
function respuesta(boton) {
if(boton == 1){
alert("has aceptado las condiciones :)")
}else if( boton == 2){
alert( "no aceptas las condiciones :(" )
}
}
</script>
</head>
<body>

<button onclick="mostrarAlerta1();">Mostrar alerta

basica</button> <br>
<button onclick="mostrarAlerta2();">Mostrar alerta
personalizada</button><br>
<button onclick="mostrarAlerta3();">Mostrar dialogo
de confirmacion</button>
</body>
</html>

Alertas con sonido

El smartphone es un equipo que interacta con nuestros
sentidos y no todas las alertas tienen que ser de tipo
visual, tambin es posible enviar sonidos al usuario para
alertarle aunque no tenga el equipo a su alcance visual,
para este tipo de alertas PhoneGap tiene el mtodo
notification.beep()
El siguiente ejemplo reproduce un sonido de alerta al
presionar un boton
Ejercicio 12.3
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 12.3</title>
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>
<script type="text/javascript">
function reproducirSonido(cantidad) {
navigator.notification.beep(cantidad);
}

</script>
</head>
<body>
<button onclick="reproducirSonido(3);">Activar
alerta</button>
</body>
</html>
Como se observa en el ejemplo, se ha incluido un valor de
3 como parmetro en el llamado a la funcin
reproducirSonido() , este valor determina la cantidad de
veces que sonar la alarma.
En los equipos iPhone la alerta de sonido no tiene un
archivo de audio predeterminado, as que es necesario
que se incluya un archivo de audio de menos de 30
segundos con el nombre beep.wav en la raz del proyecto
(/www).

Vibrador
La mayora de los dispositivos moviles tienen la opcin
de vibrar para que sean ms sencillos de detectar los
mensajes aunque el ruido del entorno pueda afectar o en
casos en los que el usuario no quiere que se escuchen
estas alertas de sonido. Para enviar este tipo de mensajes
tenemos el mtodo vibrate() que recibe como parmetro el
tiempo que se desea que tarde la vibracin del equipo,
este parmetro se define en milisegundos, as que para
hacer por ejemplo que el vibrador se active por 2
segundos se debe asignar un valor de 2000 milisegundos.
El siguiente ejemplo activa el vibrador al presionar un
botn
Ejercicio 12.4
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 12.4</title>
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>
<script type="text/javascript">

function vibrar() {
navigator.notification.vibrate(2000);
}
</script>
</head>
<body>
<button onclick="vibrar();">Vibrar!</button>
</body>
</html>
En los equipos iPhone se ignora el parmetro de tiempo y
la alerta se ejecuta por un tiempo predefinido por el
sistema.

DETECTAR CONEXION
En el mundo de los dispositivos mviles, uno de los temas
ms importantes es el ancho de banda. Aunque en algunos
pases las conexiones de estos dispositivos tienen
capacidad de descarga ilimitada de datos, la mayora de
proveedores del mundo tiene restricciones de velocidad y
trfico. En algunos casos cuando el usuario se excede del
trfico base establecido en su plan pueden aplicar cobros
adicionales por lo que la descarga de contenidos
adicionales puede tener un impacto econmico para el
usuario.
Por regla general se recomienda siempre hacer un uso
responsable de la descarga de datos del usuario para
evitarle, en la medida de lo posible, efectos negativos en
su facturacin.
Detectar la presencia y tipo de conexin del usuario puede
ser un factor crucial en una aplicacion, ademas del ya
mencionado impacto en la facturacin, en la mayora de
los casos la conexin a internet no es constante. Por la
naturaleza mvil de estos dispositivos los usuarios
experimentan cambios constantes en su conexin desde el
tipo de conexin a la ausencia total de ella. Por eso es que
PhoneGap incluye un elemento en su API que no solo

detecta si hay conexin, tambin el tipo. De esta forma es

posible adaptar la experiencia a las condiciones del
usuario.

Deteccin de conexin
Detectar la conexin es muy simple a travs de la
propiedad network.connection.type que devuelve una
integral de acuerdo al tipo de conexin que tiene el
usuario. Los tipos de enlace a internet que detecta
PhoneGap son
UNKNOWN : el sistema no puede determinar el tipo
de conexin.
ETHERNET : el equipo est conectado a una red
local o almbrica.
WIFI : el equipo est conectado a una red
inalmbrica.
CELL_2G : El equipo est usando una red de datos
celular de tipo 2G, ( GPRS / EDGE).
CELL_3G : El equipo est usando una red de datos
celular de tipo 3G.
CELL_4G : El equipo est usando una red de datos
celular de tipo 4G.
NONE : Ninguna conexin a internet detectada.
El siguiente ejemplo detecta la presencia de una conexin
a internet y muestra el tipo de la misma:
Ejercicio 13.1

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 13.1</title>
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>
<script type="text/javascript">
function mostrarConeccion() {
var networkState =
navigator.network.connection.type;
if (networkState == Connection.NONE){
alert("no hay conexion a internet")
}else{
alert("Dispositivo conectado a internet
usando: "+networkState)
}
}
</script>
</head>
<body>
<button onclick="mostrarConeccion();">Mostrar

conexion</button>
</body>
</html>
Gracias a que es posible detectar no slo la presencia de
la conexin a internet sino el tipo, podemos crear
aplicaciones que por ejemplo descarguen imgenes de
baja resolucin cuando tienen conexin mvil y
descarguen una versin de alta resolucin si la conexin
es de mejor calidad como en el caso de 4G o WI-FI
El siguiente ejemplo adapta sus contenidos segn la
calidad de la conexin, si tiene acceso por WI-FI muestra
una imagen de alta resolucin (500kb) por el contrario si
usa una conexin a red de datos mvil, muestra una
imagen de baja resolucin (28kb):
Ejercicio 13.2
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 13.2</title>
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>

<script type="text/javascript" charset="utf-8">

function mostrarConeccion() {
var networkState =
navigator.network.connection.type;
if (networkState == Connection.NONE){
alert("no hay conexion a internet")
}else{
if(networkState == Connection.WIFI){
// si la conexin es Wi-Fi carga una imagen
de alta calidad(500kb)

document.getElementById("imagen").setAttribute("src","to
}else{
// si la conexin es por red celular carga
una imagen de baja calidad(28kb)

document.getElementById("imagen").setAttribute("src","to
}
}
}
</script>
</head>

<body>
<div>
<img id="imagen"/>
</div>
<button onclick="mostrarConeccion();">Mostrar
imagen segun conexion</button>
</body>
</html>
El resultado final muestra imgenes de diferente escala y
resolucin segn el ancho de banda del dispositivo.

El acelermetro es el sensor encargado de detectar el

movimiento del dispositivo, estos sensores son cada vez
ms populares y permiten aumentar el nivel de interaccin
del usuario a travs de la deteccin de cualquier
movimiento en el espacio del equipo.
El acelermetro detecta movimientos en 3 dimensiones y a
travs de la informacin que se obtiene del movimiento de
sus ejes se puede determinar la direccin, distancia y
velocidad en que se mueve el dispositivo.
Para detectar los movimientos del dispositivo en
PhoneGap tenemos el objeto accelerometer. Este objeto
brinda las herramientas para monitorear hasta el ms
mnimo movimiento del equipo, vamos a revisar una a una
sus capacidades:

Detectar posicin:
Como se detalla en el el captulo de JavaScript de este
libro, este mtodo sigue el patrn bsico de los mtodos
de PhoneGap, as por ejemplo para obtener el un
movimiento se utiliza

navigator.accelerometer.getCurrentAcceleration(lecturaEx
manejoDeError);
Como en la mayoria de los mtodos de la API , el primer
argumento es el nombre de la funcin que se activa cuando
la lectura es exitosa y el segundo se activa si ocurre algn
error.
El mtodo getCurrentAcceleration obtendr una lectura de
la posicin tridimensional del equipo y devuelve esta
informacin en forma de coordenadas X,Y, Z. El siguiente
ejemplo despliega la posicin del dispositivo usando el
acelermetro:
Ejercicio 14.1
<!DOCTYPE html>
<html>
<head>

<title>Ejercicio 14.1</title>
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>
<script type="text/javascript">
function mostrarPosicion(){

navigator.accelerometer.getCurrentAcceleration(lectur
manejoDeError);
}
function lecturaExitosa(acelerometro) {
var texto = " Posicin X: "+ acelerometro.x + "
<br>";
texto += " Posicin Y: "+ acelerometro.y + "
<br>";
texto += " Posicin Z: "+ acelerometro.z + "
<br>";
document.getElementById("resultados").innerHTML =
texto;
}
function manejoDeError(){
// maneja el error de lectura
alert("No se puede leer el acelerometro");
}

</script>
</head>
<body>
<h1>Posicion del dispositivo</h1>
<div id="resultados"></div>
<button onclick="mostrarPosicion();">Mostrar
Posicion</button>
</div>
</body>
</html>
Este mtodo permite leer la posicin del dispositivo cada
vez que se invoque, en este caso, al presionar el botn.
Precisamente como slo permite saber la posicin que
tiene el dispositivo en un momento especfico,es como
tomar una fotografa de la posicin esttica. En algunos
casos esta lectura puede ser insuficiente, es posible que se
necesite leer constantemente la posicin del equipo para
que las aplicaciones reacciones con los movimientos del
usuario.

Deteccin de movimiento
Algunas aplicaciones y juegos necesitan ir ms all de la
simple posicin del dispositivo e interactuar con el
movimiento conforme ocurre, para estas aplicaciones
existe el mtodo accelerometer.watchAcceleration , que a
diferencia de getCurrentAcceleration puede realizar
mltiples llamadas al acelermetro y rastrear con bastante
exactitud el ms mnimo movimiento del dispositivo.
Este mtodo trabaja muy similar a
getCurrentAcceleration , pero con algunas diferencias:

navigator.accelerometer.watchAcceleration(lecturaExitosa
manejoDeError, {frequency:3000} );
Como puede observarse, igual que en los ejemplos
analizados previamente se incluyen dos argumentos: uno
llama a una funcin en caso de xito y el otro se activa en
caso de error, sin embargo incluye un tercer argumento
que define las opciones en que se va a realizar la lectura
del sensor, este argumento es crucial para detectar
movimientos porque permite definir la frecuencia con la
que se van a monitorear los cambios.
El valor de la frecuencia se define en milisegundos. En el
siguiente ejemplo se muestra el movimiento del

dispositivo actualizado con una frecuencia de 3 segundos.

Ejercicio 14.2

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 14.2</title>
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>
<script type="text/javascript" >
var lecturaAccelerometro
function mostrarPosicion(){
lecturaAccelerometro =
navigator.accelerometer.watchAcceleration(lecturaExitosa
manejoDeError, {frequency:3000} );
}
function lecturaExitosa(acelerometro) {
var texto = " Posicin X: "+ acelerometro.x +
"<br>";
texto += " Posicin Y: "+ acelerometro.y + "
<br>";
texto += " Posicin Z: "+ acelerometro.z + "
<br>";

document.getElementById("resultados").innerHTML =
texto;
}
function manejoDeError(){
// maneja el error de lectura
alert("No se puede leer el acelerometro");
}
</script>
</head>
<body>
<h1>Deteccion de Movimientos</h1>
<div id="resultados"></div>
<button onclick="mostrarPosicion()">Mostrar
Movimientos</button>
</div>
</body>
</html>
La deteccin de movimientos a travs del acelermetro, al
igual que todos los mtodos que hacen una lectura
constante de los sensores, tiene un impacto directo sobre
el dispositivo tanto a nivel de batera como de
procesador, segn el sistema operativo en que se ejecute,
existe un nmero mximo de llamadas permitidas por

minuto, esto con el fin de mantener un uso racional de los

recursos del sistema, se recomienda realizar la menor
cantidad de llamadas posible, entre menos llamadas se
hagan mejor trabajar tu aplicacin y menos batera
consume.
Dicho esto, el ejemplo anterior tiene un serio problema
que podra afectar el rendimiento de la aplicacin.
Cuando se invoca el mtodo watchAcceleration ,
comienza a utilizar recursos del sistema y si no se detiene
este proceso puede llegar a dejar al usuario sin bateria,
por eso es importante que SIEMPRE que se active este
mtodo se incluye una opcin para detenerlo, ya se a por
parte del usuario o automticamente, una vez que se
obtenga el resultado deseado.
Para detener el rastreo de movimientos se debe utilizar el
siguiente comando:
navigator.accelerometer.clearWatch( identificador )
Este mtodo recibe como argumento el identificador que
se le asigne a accelerometer.watchAcceleration para as
detener el proceso de lectura del acelermetro.
En el siguiente ejemplo muestra la versin correcta del
ejercicio anterior utilizando el identificador para el
proceso de lectura del acelermetro y una opcin para que

el usuario pueda detener dicho proceso.

Ejercicio 14.3

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 14.3</title>
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>
<script type="text/javascript">
/// identificador del proceso de lectura
var lecturaAccelerometro
function mostrarPosicion(){
lecturaAccelerometro =
navigator.accelerometer.watchAcceleration(lecturaExitosa
manejoDeError, {frequency:3000} );
}
function lecturaExitosa(acelerometro) {
var texto = " Posicin X: "+ acelerometro.x + "
<br>";
texto += " Posicin Y: "+ acelerometro.y + "
<br>";
texto += " Posicin Z: "+ acelerometro.z + "

<br>";
document.getElementById("resultados").innerHTML =
texto;
}
function manejoDeError(){
// maneja el error de lectura
alert("No se puede leer el acelerometro");
}
function detenerLectura(){

navigator.accelerometer.clearWatch(lecturaAccelerometr
lecturaAccelerometro = null;
}
</script>
</head>
<body>
<h1>Deteccion de Movimientos</h1>
<div id="resultados"></div>
<button onclick="mostrarPosicion()">Mostrar
Movimientos</button>
<button onclick="detenerLectura()">Detener
Lectura</button>
</div>

</body>
</html>

BRUJULA
La brjula de un dispositivo mvil funciona de manera
similar a una brjula regular: mide la orientacin del
dispositivo con respecto al norte. En PhoneGap el objeto
compass es el que contiene los mtodos de acceso a la
brjula incorporada en el dispositivo.
El mtodo para leer informacin de la brjula es muy
similar al del acelermetro que estudiamos en el captulo
anterior:
navigator.compass.getCurrentHeading(lecturaExitosa,
manejoDeError);
Como se puede observar utiliza tambin dos argumentos
que invocan funciones, el primero se activa cuando la
lectura es exitosa, el segundo si hay un error para
realizarla.
El resultado de la lectura de la brjula devuelve un objeto
con informacin sobre la rotacin del dispositivo con
respecto al norte magntico, esta respuesta es
representada con un nmero en grados que van del 0 all
359.99 segn la orientacin del dispositivo al momento de
la lectura.

Los valores que se obtienen al leer la brjula son

magneticHeading: Medida en grados relativa al
norte magntico.
trueHeading: Medida en grados relativa al Norte
geogrfico
headingAccuracy: la desviacin en grados entre el
norte magntico reportado y el norte geogrfico.
timestamp: el momento en que fue tomada la lectura.

Deteccin de Orientacin
El proceso ms bsico que puede realizar la API de
PhoneGap es leer la orientacin actual del equipo con
respecto al norte. Por regla general se toma como punto de
referencia la parte superior del dispositivo.
El siguiente ejemplo muestra la orientacin actual del
dispositivo usando el mtodo getCurrentHeading():
Ejercicio 15.1
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 15.1</title>
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>
<script type="text/javascript" >
var lectura
function mostrarOrientacion(){
navigator.compass.getCurrentHeading(lecturaExitosa,
error);

}
function lecturaExitosa(orientacion) {
document.getElementById("resultados").innerHTML
= " Orientacion: " + orientacion.magneticHeading + "
Grados"
}
function error(){
alert("No es posible leer la brujula")
}
</script>
</head>
<body>
<h1>Orientacion del dispositivo</h1>
<div id="resultados"></div>
<button onclick="mostrarOrientacion();">Mostrar
Orientacion</button>
</body>
</html>
El resultado de esta aplicacin es similar a este:

El nmero que muestra esta aplicacin se obtiene del

valor que contiene heading.magneticHeading que muestra
la desviacin en grados que tiene el dispositivo con
respecto al norte magntico, el nmero 0 representa que el
dispositivo est alineado al norte mientras que 180 indica
que el dispositivo apunta al sur.
Es importante aclarar que el norte magntico es diferente
del norte real. El norte magntico se basa en el campo
magntico de la tierra y es sujeto a cambios por diversos
factores planetarios. El norte "real" es un punto geogrfico
esttico representado en el mapa.
En los equipos iOS se tiene la opcin de elegir cual de
los puntos utilizar como diferencia, mientras que en los
equipos Android el resultado se obtiene siempre a partir
del norte "magnetico". Para obtener resultados ms
consistentes se recomienda utilizar como referencia el
elemento heading.magneticHeading que es soportado por
ambas plataformas.
Los equipos Android por no tener soporte para resolver el
norte "real" tampoco tienen soporte para

headingAccuracy que determina la diferencia entre el

norte magntico y el real.

Lectura de movimiento
En el ejemplo anterior, los datos de la orientacin se
obtienen al presionar un botn, si la orientacin cambia,
el sistema no puede saberlo, es necesario que el usuario
solicite activamente la informacin. Cada vez que se
presione el botn se obtendr el resultado de la alineacin
en ese momento especfico.
Para observar la orientacin a lo largo del tiempo y
rastrear el movimiento del usuario se utiliza el mtodo
compass.watchHeading():
navigator.compass.watchHeading(lecturaExitosa, error,
{ frequency: 3000 } )
Este mtodo tambin incluye un tercer argumento que
permite definir la frecuencia de lectura, en este caso la
lectura se realizar cada 3 segundos ( 3000 milisegundos )
En el siguiente ejemplo se muestra una lectura de la
orientacin del dispositivo actualizado cada 3 segundos.
Ejercicio 15.2
<!DOCTYPE html>
<html>

<head>
<title>Ejercicio 15.2</title>
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>
<script type="text/javascript">
var lectura
function mostrarOrientacion(){
var lectura =
navigator.compass.watchHeading(lecturaExitosa, error,
{ frequency: 3000 } )
}
function lecturaExitosa(orientacion) {
document.getElementById("resultados").innerHTML
= " Orientacion: " + orientacion.magneticHeading + "
Grados"
}
function error(){
alert("No es posible leer la brujula")
}
function detenerLectura(){
navigator.compass.clearWatch(lectura);
lectura = null

}
</script>
</head>
<body>
<h1>Orientacion del dispositivo</h1>
<div id="resultados"></div>
<button onclick="mostrarOrientacion();">Mostrar
Orientacion</button>
<button onclick="detenerLectura();">Detener
Rastreo</button>
</body>
</html>
La diferencia central de este ejemplo con respecto al
anterior es que una vez que se activa la lectura, la
informacion sobre la orientacion se actualiza cada 3
segundos.

En este ejemplo ejemplo se incluye tambin el mtodo

navigator.compass.clearWatch
Este mtodo se utiliza para para detener la peticin de
datos a la brjula. Al igual que en el caso del
acelermetro se recomienda que siempre que se invoca el
mtodo watchHeading, se debe incluir a
compass.clearWatch para hacer un uso eficiente y
responsable de los recursos del sistema.

GEOLOCALIZACION
Uno de lo sensores mas populares en los equipos moviles
es el GPS . Es este sensor el que permite que los usuarios
ubiquen su posicin en el mapa, realizar check ins en
bares o restaurantes y geoetiqueten sus fotografas. Es muy
posible que en el pasado desarrollaras o planees
desarrollar una aplicacin que involucre de alguna manera
el Geoposicionamiento. Detectar la ubicacin del usuario
es una habilidad indispensable para poderse llamar un
desarrollador mvil en estos das.
Los dispositivos moviles tienen muchas formas de
determinar la ubicacin geogrfica: a travs de GPS,
AGPS e identificacin a travs de IP, no importa el
mtodo que utilicen, la API de PhoneGap puede obtener
las coordenadas del dispositivo e integrarlo
transparentemente a cualquier aplicacin.

Detectar la ubicacin del

Dispositivo
El mtodo para detectar la ubicacin del usuario en
PhoneGap funciona igual que el acelermetro y la brjula
estudiados anteriormente. El cdigo para obtener la
posicin del usuario es:
geolocation.getCurrentPosition(lecturaExitosa, error)
Como hemos visto en sensores similares el mtodo
getCurrentPosition hace una llamada al sensor de GPS y
utiliza 2 argumentos, donde el primero invoca una funcin
cuando la lectura es exitosa y el segundo se ejecuta
cuando hay un error.
A diferencia del acelermetro o la brjula, en el caso de
la geolocalizacin, por motivos de privacidad, el usuario
debe aprobar activamente el uso de este sensor.
La primera vez que tu app intente conocer la ubicacin del
usuario, una dilogo de confirmacin similar a este
aparecer en pantalla.

Esta confirmacin se hace en todas las plataformas. Si el

usuario decide no darle permisos a la aplicacin para
acceder el sensor de geolocalizacin se interpretara como
un error y activar el argumento correspondiente.
Por este motivo es que definir el argumento para que se
active cuando hay un error en la lectura del GPS se vuelve
particularmente importante en este caso ya que existe la
posibilidad que el usuario no quiera compartir su
ubicacin y decida no dar el permiso. La aplicacin debe
que tener la capacidad de seguir funcional aun si el
usuario rechaza el permiso.
Otro punto que cabe mencionar es que este mtodo tiene
problemas para mostrarse correctamente en emuladores
de dispositivos Androidd 2.x ( Ecleair, Froyo y
Gingerbread ), para solucionar este problema solo se
necesita agregar un tercer argumento que habilite la
opcin enableHighAccuracy, de la siguiente forma:
navigator.geolocation.getCurrentPosition(lecturaExitosa,

error,{ enableHighAccuracy: true });

Este argumento fuerza a que la lectura del GPS sea lo ms
exacta posible y hace que las aplicaciones que usen GPS
funcionen correctamente en cualquier emulador Android.
Al obtener una respuesta del sensor GPS se obtiene un
objeto con mltiples datos sobre la ubicacin del usuario
con informacin relevante no solo sobre la latitud,
longitud y altitud, tambin incluye informacin sobre el
margen de error de la lectura. La lista completa de los
elementos que se reciben con cada lectura es:
timestamp: muestra cuando fue detectada la
ubicacin.
coords.latitude: devuelve la latitud de la ubicacin,
en grados.
coords.longitude: devuelve la longitud de la
ubicacin, en grados.
coords.accuracy: indica que tan acertada es la
lectura de coordenadas con un margen de error en
metros.
coords.altitude: muestra la altitud cuando esta
disponible.
coords.altitudeAccuracy: indica que tan acertada
es la lectura de altitud con un margen de error en
metros.
coords.speed: devuelve la velocidad basado en la

lectura anterior, en metros por segundo.

coords.heading: regresa el ngulo en grados a partir
del norte.
El siguiente ejemplo muestra la ubicacin del equipo al
presionar un botn:
Ejercicio 16.1
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 16.1</title>
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>
<script type="text/javascript">
function mostrarUbicacion(){
navigator.geolocation.getCurrentPosition
(lecturaExitosa, error,{ enableHighAccuracy: true });
}
function lecturaExitosa(posicion) {
alert(' tu posicion es: Latitud ' +
posicion.coords.latitude+' ' + ' Longitud '+
posicion.coords.longitude )

}
function error(){
alert('no se donde estas');
}
</script>
</head>
<body>
<h1>Ubicacin del dispositivo</h1>
<div id="resultados"></div>
<button onclick="mostrarUbicacion();">Mostrar
Ubicacin</button>
</body>
</html>
En este ejemplo, cada vez que presiones el boton "mostrar
ubicacion" se desplegara una alerta con los datos de tu
ubicacin.

Detectar Movimiento
Al igual que con la brjula y el acelermetro , para el
sensor GPS tambin tenemos la opcin de rastrear el
movimiento del usuario a travs del mtodo
geolocation.watchPosition, que es exactamente igual al
geolocation.getCurrentPosition visto en el ejemplo
anterior, con la variante de que este otro mtodo enva
informacin de manera peridica.
La frecuencia de lectura se define en el tercer argumento,
con un valor definido en milisegundos
navigator.geolocation.watchPosition(lecturaExitosa,
error,{ frequency: 3000 });
El GPS es sin duda el sensor que agota ms rpidamente
la batera del dispositivo mvil. La frecuencia debe
definirse con el mayor intervalo posible, ajusta tus
aplicaciones para que hagan lecturas en intervalos de al
menos uno o dos minutos. Una frecuencia muy alta puede
drenar la batera de cualquier smartphone en minutos.
Tambin, al ser el GPS tan intensivo para la batera del
equipo, es absolutamente indispensable que cada vez que
se utilice el mtodo watchPosition se incluya una forma
para detener el uso del GPS. Para detener la lectura se

utiliza el mtodo :
navigator.geolocation.clearWatch()
Este mtodo recibe como argumento el identificador con
el que se cre geolocation.watchPosition y detiene el
proceso de lectura
En el siguiente ejemplo se asigna un identificador a la
llamada al GPS y permite que el usuario detenga la lectura
de GPS.
Ejercicio 16.2
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 16.2</title>
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>
<script type="text/javascript">
/// identificador de la llamada GPS
var llamada
function mostrarUbicacion(){
llamada =

navigator.geolocation.watchPosition(lecturaExitosa,
error,{ frequency: 3000 , enableHighAccuracy: true });
}
function lecturaExitosa(posicion) {
document.getElementById("resultado").innerHTML = '
tu posicion es: Latitud ' + posicion.coords.latitude+' ' +
' Longitud '+ posicion.coords.longitude
}
function error(){
alert('no se donde estas');
}
function detenerLectura(){
//detiene cualquier llamada vinculada al
identificador
navigator.geolocation.clearWatch(llamada)
llamada = null
}
</script>
</head>
<body>
<h1>Ubicacin del dispositivo</h1>
<div id="resultado"></div>
<button onclick="mostrarUbicacion();">Mostrar

Ubicacin</button>
<button onclick="detenerLectura();">Detener Lectura
</button>
</body>
</html>

Google maps
Durante el desarrollo de este libro varios alumnos y
usuarios de revolucion.mobi nos pidieron incluir un
ejemplo para interactuar con los mapas de Google Maps
a traves de la API de PhoneGap, por este motivo vamos a
incluir un ejemplo completo sobre este tema.
Antes de comenzar a crear una aplicacin que integre
Google Maps son necesarios algunos pasos previos que
cambian segn la plataforma en que se desarrolla.

- Preparacion iOS
Para acceder los archivos de un sitio externo debes
configurar el acceso a los dominios que usa google Maps.
Si estas trabajando con Xcode debes localizar el archivo
"Cordoba.plist" que se encuentra en la carpeta
"Supporting Files". Busca el apartado "External Hosts" y
agrega estas tres direcciones
*.gstatic.com
*.googleapis.com
*.google.com

- Preparacion Android
Si deseas probar tu aplicacin en un emulador de
Android, debes configurar el AVD para simular el sensor
GPS. Para activar esta funcin abrir el AVD manager,
seleccionar el dispositivo en el que se va a realizar la
prueba y agregarle el soporte para GPS.

Si no ests familiarizado con los detalles de la

configuracin previa, puedes encontrar informacin
detallada en el Captulo 7 de este libro.

- Crear un mapa bsico

El primer paso para crear la aplicacin es utilizar un
mapa bsicoo, que se puede descargar de cualquier
ejemplo de google maps, en este caso usaremos el
ejemplo de "mapa simple" de la documentacin de Google
Maps disponible en este URL

https://googledevelopers.appspot.com/maps/documentation/javascript/exa
simple
El codigo del ejemplo de Google es:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map
Simple</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map_canvas {
margin: 0;
padding: 0;

height: 100%;

}
</style>
<script src="https://maps.googleapis.com/maps/api/js?
sensor=false">
</script>
<script>
var map;
function initialize() {
/// define las opciones del mapa (zoom y centrado)
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397,
150.644),
mapTypeId:
google.maps.MapTypeId.ROADMAP
};
map = new
google.maps.Map(document.getElementById('map_canvas
mapOptions);
}
google.maps.event.addDomListener(window,
'load', initialize);
</script>

</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Este codigo ya es perfectamente funcional en PhoneGap y
al compilarlo muestra un mapa similar a este:

En el cdigo del ejemplo, la funcin initialize() es la que

contiene los elementos para desplegar mapa de Google.
La clase google.maps.LatLng() se utiliza en la API de
google Maps para definir una coordenada en el mapa y
recibe siempre dos valores: latitud y longitud. En este
ejemplo, las coordenadas se incluyen manualmente y

pertenecen a un punto de australia cerca de Sydney.

La informacion de estas coordenadas se envia junto con
otras opciones como el tipo de mapa y el nivel de
acercamiento dentro del objeto mapOptions. Cuando el
mapa se despliega toma estas opciones para definir los
detalles del mapa que se muestra en pantalla.
Ahora que conocemos a grandes rasgos los elementos del
mapa, vamos a ajustarlo para que se integre con la API de
PhoneGap.

- Integracion con PhoneGap

El primer paso para integrar la nueva aplicacin es
agregar la libreria de PhoneGap
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>
luego es necesario agregar una nueva variable global con
el nombre marcador, justo despues de la variable global
del mapa
var marcador
Vamos a usar esta variable global para crear un marcador
que muestra nuestra posicin en el mapa. Para agregar el
marcador incluye este cdigo luego de la creacin del
mapa
marcador = new google.maps.Marker( {position:
latlng, map:map });
Ahora vamos a agregar las funciones que interactuan con
la API de PhoneGap del ejercicio 16.2
function mostrarUbicacion(){

navigator.geolocation.getCurrentPosition( lecturaGPS ,
errorGPS , {enableHighAccuracy:true}
}
function errorGPS(){
alert(" no puedo encontrarte :(")
}
La funcin lecturaGPS() se encarga de procesar la
informacin que se obtiene de la lectura del sensor GPS.
function lecturaGPS(ubicacion){
var miubicacion = new
google.maps.LatLng(ubicacion.coords.latitude,
ubicacion.coords.longitude);
map.setCenter(miubicacion)
marcador.setPosition(miubicacion)
}
En este caso la variable miubicacion crea una nueva
coordenada de google maps usando las coordenadas
actuales del dispositivo. Por ltimo, los
comandos map.setCenter y marcador.setPosition centran
el mapa y el marcador en la posicin actual.
A continuacin se muestra el ejemplo completo con los
cambios destacados en negrita.

Ejercicio 16.3
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>
<title>Ejercicio 16.3</title>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?
sensor=true"></script>
<script type="text/javascript">
var map
var marcador
function initialize() {
var latlng = new google.maps.LatLng(-34.397,
150.644);
var myOptions = {
zoom: 8,

center: latlng,
mapTypeId:
google.maps.MapTypeId.ROADMAP
};
map = new
google.maps.Map(document.getElementById("map_canvas
, myOptions);
marcador = new google.maps.Marker( {
position: latlng,
map:map
})
}
function mostrarUbicacion(){
navigator.geolocation.getCurrentPosition(
lecturaGPS , errorGPS , {enableHighAccuracy:true} )
}
function lecturaGPS(ubicacion){
var miubicacion = new
google.maps.LatLng(ubicacion.coords.latitude,
ubicacion.coords.longitude);
map.setCenter(miubicacion)
marcador.setPosition(miubicacion)
}
function errorGPS(){

alert(" no puedo encontrarte :(")

}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%;
height:90%"></div>
<button onClick="mostrarUbicacion()"> mostrar mi
ubicacion </button>
</body>
</html>
El resultado final va a centrar el mapa y el marcador en la
ubicacin en que se encuentre el dispositivo o en la que se
le asigne desde el emulador.

El File API es uno de los elementos ms poderosos que

tiene PhoneGap. Como la mayora de las APIs de este
framework esta basado en la especificacin del W3C y
aprovecha el soporte HTML5 que tiene PhoneGap para
crear, manipular y borrar archivos.
Cada sistema operativo maneja ligeramente distinto la
ubicacin de los archivos, la principal diferencia es que
en el caso de iOS, los archivos se almacenan en una
carpeta interna del sistema dedicada exclusivamente para
cada aplicacin (conocida como sandbox), mientras que
en el caso de Android vamos a guardar los archivos en el
SD card.
Otra diferencia importante es el acceso a los archivos, en
el caso de iOS solo tendremos acceso al sandbox, no
podemos salir de ese entorno controlado, en el caso de
Android podemos acceder cualquier archivo que se
encuentre dentro del SDcard del usuario.

Acceder al sistema de
archivos
Antes de acceder el sistema debemos solicitar permisos y
verificar que la aplicacin tenga acceso al sistema, para
esto utilizaremos el mtodo :
window.requestFileSystem
Que solicita acceso al sistema de archivos del dispositivo
y retorna un objeto con acceso al sistema. Este mtodo
utiliza 4 argumentos:
LocalFileSystem que define el tipo de acceso al sistema
de archivos, puede ser PERSISTENT si se necesita
acceder al almacenamiento permanente del sistema o
TEMPORARY para acceder y crear archivos de tipo
temporal. En este libro usaremos la primera opcin.
El segundo argumento es el tamao (en bytes) que necesita
la aplicacin, por defecto se define en 0.
Los dos ltimos argumentos son las funciones de lectura
exitosa y error, en el caso de la primera recibe un objeto
de tipo filesystem que permite acceso al sistema de
archivos.

Acceso y lectura de Carpetas

Una vez garantizado el acceso al sistema de archivos se
pueden acceder y manipular las carpetas a travs del
objeto DirectoryEntry. El mtodo getDirectory permite
seleccionar un directorio:
fileSystem.root.getDirectory("manualDelGuerreroMovil",
{create: true, exclusive: false}, lecturaExitosa, error )
Esta funcin recibe como primer argumento la ruta y
nombre del folder que se desea abrir, el segundo
argumento incluye los parmetros en los que se realiza la
lectura: la opcin "create" definida en true, crear el
archivo en caso de que no exista y el parmetro
"exclusive" se debe definir en "false" si existe la
posibilidad de crear el archivo.
El acceso y/o creacin exitosa de la carpeta activar la
funcin lecturaExitosa que recibe como argumento un
objeto de tipo DirectoryEntry que contiene informacin
sobre la carpeta seleccionada.
function lecturaExitosa(carpeta){
alert (carpeta.fullPath)
}

Una vez que se tiene acceso a la carpeta a travs del

objeto DirectoryEntry tenemos acceso a manipular la
carpeta. Por ejemplo podemos acceder la informacin de
la carpeta con el mtodo getMetadata()
function lecturaExitosa(carpeta){
carpeta.getMetadata( procesarMetadata, error )
}
function procesarMetadata(metadata){
console.log("ultima modificacion: " +
metadata.modificationTime);
}

Creacion y manipulacion de
Archivos
Para leer un archivo utilizamos un mtodo muy similar al
que se utiliza para las carpetas:
fileSystem.root.getFile("readme.txt", {create: true,
exclusive: false}, lecturaExitosa, error );
La diferencia central radica en que aqu se define el
nombre del archivo con su respectiva extensin, al igual
que en el caso anterior, el parmetro "create" permite
crear el archivo en caso de que no exista.
Al realizar correctamente la lectura, se invoca la funcin
lecturaExitosa que recibe como argumento un objeto de
tipo FileEntry. Al tener acceso a este objeto podemos
invocar los mtodos especficos para manipular archivos.
Por ejemplo, una vez creado el archivo se puede editar y
agregarle texto.
En el siguiente ejemplo se explora un archivo y se edita su
contenido
function onDeviceReady() {
//solicita acceso al filesystem

window.requestFileSystem(LocalFileSystem.PERSISTEN
0, accesoFS);
}
// tenemos acceso al filesystem!
function accesoFS(fileSystem) {
// busca o crea el directorio
fileSystem.root.getFile("manualDelGuerreroMovil.txt",
{create: true, exclusive: false},function(myFile){
myFile.createWriter( function(escritor){
escritor.write("hola mundo!!!")
})
}, function(){alert("fallo")})
}
Una vez que se crea el archivo utilizamos el mtodo
CreateWriter que crea un objeto de tipo FileWriter, el
cual permite escribir dentro del archivo.
Por ltimo para borrar un archivo se utiliza el mtodo
remove

function onDeviceReady() {
//solicita acceso al filesystem

window.requestFileSystem(LocalFileSystem.PERSISTEN
0, accesoFS);
}
// tenemos acceso al filesystem
function accesoFS(fileSystem) {
// busca o crea el directorio
fileSystem.root.getFile("manualDelGuerreroMovil.txt",
{create: true, exclusive: false},function(myFile){
myFile.remove( function(){
alert("archivo Eliminado")
})
}, function(){alert("fallo")})
}
El siguiente ejemplo muestra un uso bsico de los tres
elementos mencionados:
Ejercicio 17.1

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>
<title>Ejercicio 17.1</title>
<script>
document.addEventListener("deviceready",
onDeviceReady, false);
function onDeviceReady() {
//solicita acceso al filesystem

window.requestFileSystem(LocalFileSystem.PERSISTEN
0, accesoFS);
}
// tenemos acceso al filesystem
function accesoFS(fileSystem) {
// busca o crea el directorio
fileSystem.root.getFile("manualDelGuerreroMovil.txt",
{create: true, exclusive: false},function(myFile){
myFile.createWriter( function(escritor){

escritor.write("hola mundo!!!")
})
}, function(){alert("fallo")})
}
}
</script>
</head>
<body >
<button> Crear archivo </button>
<button> leer archivo </button>
<button> Borrar archivo</button>
</body>
</html>
El siguiente ejemplo integra los comandos basicos de
creacin, lectura, escritura y borrado de un archivo.
Ejercicio 17.2
<!DOCTYPE html>
<html>
<head>

<title>Ejercicio 17.1</title>
<style type="text/css">
button, input{display:block; width:90%; height:35px;
margin:10px auto; }
input{ text-align:center; font-size:15px; color:#666;
}
</style>
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>
<script>
document.addEventListener("deviceready",
onDeviceReady, false);
var sistemaDeArchivos;
var rutaArchivo;
function onDeviceReady() {
//solicita acceso al filesystem

window.requestFileSystem(LocalFileSystem.PERSISTEN
0, accesoFS);
}
// tenemos acceso al filesystem
function accesoFS(fs) {
sistemaDeArchivos = fs
}

function crearArchivoVacio(){
// crea un archivo vacio

sistemaDeArchivos.root.getFile("manualDelGuerreroMov
{create: true, exclusive: false}, function(_ruta)
{rutaArchivo = _ruta})
}
function escribirEnarchivo(){
/// escribe los datos de la casilla de texto
rutaArchivo.createWriter( function(escritor){
contenido =
document.getElementById("textoArchivo").value
escritor.write(contenido)
})
}
function leerArchivo(){
var reader = new FileReader();
reader.onloadend = function(evt) {
alert(evt.target.result);
};
reader.readAsText(rutaArchivo);
}
function leerInfo(){

rutaArchivo.getMetadata(function(_data){
alert("ultima modificacion:
"+_data.modificationTime)})
}
function borrarArchivo(){
rutaArchivo.remove();
}
</script>
</head>
<body >
<button onclick="crearArchivoVacio()"> Crear
archivo </button>
<hr>
<input type="text" id="textoArchivo" value="Texto
de prueba" />
<button onclick="escribirEnarchivo()"> Escribir en
archivo </button>
<hr>
<button onclick=" leerArchivo()"> Leer archivo
</button>
<hr>
<button onclick="leerInfo()"> Leer Metadata
</button>
<hr>

<button onclick=" borrarArchivo()"> Borrar

archivo</button>
<hr>
</body>
</html>
El resultado final puede crear archivos, escribir texto
aleatorio en un archivo, acceder los datos del archivo,
mostrar metadatos como la fecha de creacin o tamao y
por ltimo eliminar el archivo creado.

En caso de que desarrolles con iOS y utilices el emulador,

puedes encontrar los documentos creados en esta ruta:

/Users/[ tu nombre de usuario]/Library/Application

Support/iPhone Simulator/[ version del sistema
operativo] /Applications/ [ identificador del
emulador ] /Documents
Si desarrollas para Android, puedes ver los archivos con
la herramienta DDM que se detalla en el captulo 22 de
este libro.

ALMACENAMIENTO
El api de permanencia de datos es particularmente til
para desarrollar aplicaciones. Nos permite almacenar y
manipular informacin con permanencia dentro del
sistema, o sea que no importa que el usuario cierre la
aplicacin o apague el equipo, los datos permanecern
disponibles para utilizarlos posteriormente.
Gracias a la permanencia de datos podemos desarrollar
aplicaciones ms sofisticadas, como juegos que puedan
restaurarse donde el usuario los dejo, recordar puntos
importantes en el mapa o simplemente recordar el nombre
de usuario con el que se utiliza nuestra aplicacin
Phonegap utiliza varias apis del W3C y nos ofrece
distintas formas de almacenar la informacin segn las
necesidades especficas de cada aplicacin. Vamos a
analizar cada una en detalle

Base de datos
Phonegap permite crear una base de datos local basada en
los estndares de las bases de datos SQL del W3C.
Para crear una base de datos slo es necesario invocar el
mtodo openDatabase:
window.openDatabase(database_name,
database_version, database_displayname,
database_size);
Al igual que la mayora de los mtodos de phonegap este
tambin utiliza callbacks en sus parmetros. El primero
define el nombre de la base de datos, el segundo la
versin , el tercero el nombre con el que se mostrar y por
ltimo el tamao original de la base.
window.openDatabase("DemoDB", "1.0", "Demo Base
de Datos", 200000);
Si la base de datos ya existe el sistema solo la abrir, si
no existe se crear y luego abrir, en ambos casos el
resultado ser un objeto de tipo Database, con el que
vamos a trabajar.

-Transacciones
La forma primaria en la que vamos a interactuar con la
base de datos de phonegap ser a travs de transacciones,
una transaccin bsicamente es una conexin a la base de
datos mediante la cual podremos enviar comandos.
En PhoneGap las transacciones tienen un acceso
exclusivo. eso significa que solo se atiende una
transaccin a la vez. Si se ejecutan dos transacciones al
mismo tiempo, la primera tendr prioridad y mientras se
ejecute esta transaccin cualquier otra peticin devolver
un error.
Las transacciones son un mtodo del objeto Database y se
pueden invocar en cualquier momento luego de realizada
la conexin:
document.addEventListener("deviceready",
onDeviceReady, false);
function onDeviceReady() {
var db = window.openDatabase("Database",
"1.0", "Cordova Demo", 200000);
db.transaction(populateDB, errorCB, successCB);
}
Las transacciones tienen 3 parmetros: los dos primeros

como es usual se activan cuando la transaccin es exitosa

o cuando falla, el tercero se activa una vez que finaliza la
interaccin con la base de datos y el sistema est listo
para volver a ejecutar una nueva transaccin. Este mtodo
es particularmente til porque como se expuso
anteriormente no es posible realizar ms de una
transaccin al mismo tiempo, utilizando este parmetro
podemos encadenar transacciones:
funcin ejecutarPrimeraTransaccion(){
db.transaction(populateDB, errorCB,
ejecutarSegundaTransaccion);
}
function ejecutarSegundaTransaccion(){
db.transaction(populateDB, errorCB,
ejecutarTerceraTransaccion);
}
function ejecutarTerceraTransaccion(){
db.transaction(populateDB, errorCB);
}

-Queries SQL
Una vez que abrimos una transaccin podemos interactuar
directamente con la base de datos a travs de queries de
SQL.
Los queries son peticiones que se le dan a la base de
datos y devuelven informacin en las condiciones que lo
solicitamos. Con los queries podemos guardar, borrar y
ordenar datos de forma muy rpida y sencilla.
function populateDB(tx) {
tx.executeSql('DROP TABLE IF EXISTS
DEMO');
tx.executeSql('CREATE TABLE IF NOT
EXISTS DEMO (id unique, data)');
tx.executeSql('INSERT INTO DEMO (id, data)
VALUES (1, "First row")');
tx.executeSql('INSERT INTO DEMO (id, data)
VALUES (2, "Second row")');
}
Aunque solo se puede abrir una transaccin a la vez, una
vez que tengamos acceso, es posible enviar mltiples
queries a la base de datos.
La informacin que se almacena en cada transaccin es

accesible una vez finalizada la misma. Los queries solo

pueden leer la informacin que hay en la base de datos al
momento de iniciar la transaccin.
Si una transaccin hace un query en el que almacena por
ejemplo el nombre del usuario, este dato no se puede
acceder en la misma transaccin, es necesario abrir otra
transaccin para leer las modificaciones que se hagan en
la base de datos.
El siguiente ejemplo realiza las operaciones bsicas de
SQL mencionadas previamente:
Ejercicio 18.1
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=devicewidth"/>
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>
<title>Ejercicio 18.1</title>
<style>
button {
width: 90%;
height: 25px;

margin: 5px auto;

}
ul{margin:0; padding:0; font-size:12px}
li{list-style-type:none; padding:10px 0; borderbottom: solid 1px #ccc }
</style>
<script>
document.addEventListener("deviceready",
onDeviceReady, false);
var db
function onDeviceReady() {
db = window.openDatabase("DemoDB", "1.0", "Demo
Base de Datos", 200000);
db.transaction(poblarBD, errorBD);
}
function poblarBD(tx) {
tx.executeSql('DROP TABLE IF EXISTS libros ');
// si no existe la tabla libros, la crea y agrega 2
columnas.
tx.executeSql('CREATE TABLE IF NOT EXISTS
libros ( titulo, autor)');
// Una vez creada la tabla, inserta entradas en ella
tx.executeSql('INSERT INTO libros (titulo, autor)
VALUES ("Manual del guerrero movil", "Carlos
Solis")');

tx.executeSql('INSERT INTO libros (titulo, autor)

VALUES ("Abraham Lincoln: Cazador de Vampiros",
"Seth Grahame-Smith")');
tx.executeSql('INSERT INTO libros (titulo, autor)
VALUES ("Alicia en el pais de las maravillas", "Lewis
Caroll")');
}
/*
function ejecutarPrimeraTransaccion(){
/// al finalizar correctamente esta transaccion se ejecuta
la segunda transaccion
db.transaction(transaccion, errorCB,
ejecutarSegundaTransaccion);
}
function ejecutarSegundaTransaccion(){
/// al finalizar correctamente esta transaccion se ejecuta
la tercera transaccion
db.transaction(transaccion, errorCB,
ejecutarTerceraTransaccion);
}
function ejecutarTerceraTransaccion(){
/// al finalizar correctamente esta transaccion se detiene
el proceso.
db.transaction(transaccion, errorCB);
}

function transaccion(){
/// ejecutar una transaccion
}
*/
function leerBaseDeDatos(){
// crea una nueva transaccion
db.transaction(leerBD, errorBD);
}
function leerBD(tx){
tx.executeSql('SELECT * FROM libros ', [] ,
mostrarResultados, errorBD);
}
function mostrarResultados(tx, resultados){
var lista = ""
for(var a=0; a < resultados.rows.length; a++){
lista += "<li>"
lista += "<b>Titulo:</b> " +
resultados.rows.item(a).titulo + "<br>";
lista += "<b>Autor:</b> " +
resultados.rows.item(a).autor + "<br>";
lista += "</li>"
}
document.getElementById("listaDeLibros").innerHTML
= lista

}
function agregarItem(){
db.transaction(agregarItemSQL, errorBD)
}
function agregarItemSQL(tx){
tx.executeSql('INSERT INTO libros (titulo, autor)
VALUES ("La importancia de llamarse Ernesto",
"Oscar Wilde")', [] , leerBD, errorBD);
}
function borarUltimo(){
db.transaction(borrarItemSQL, errorBD)
}
function borrarItemSQL(tx){
tx.executeSql('DELETE FROM libros WHERE
autor="Oscar Wilde"', [] , leerBD, errorBD);
}
function errorBD(){
alert("un error en la base de datos");
}
</script>
</head>
<body >
<button onclick="leerBaseDeDatos()"> leer Base de
datos </button>

<button onclick="agregarItem()"> Insertar nuevo

libro</button><br>
<button onclick=" borarUltimo()"> Borrar libros de
Oscar Wilde</button>
<h1> Libros </h1>
<ul id="listaDeLibros">
</ul>
</body>
</html>

Este ejercicio lee y crea una base de datos de libros con

sus ttulos y autores. Puede insertar nuevos registros y
borrar en base a una bsqueda.

Si deseas aprender mas sobre la sintaxis de las bases de

datos en PhoneGap, puedes encontrar documentacion
completa en el sitio oficial de SQLite

LocalStorage
Adems de la base de datos tenemos otras formas de
almacenar informacin de manera mas sencilla con
LocalStorage. Este objeto tambin es parte del Estndar
HTML5 y su funcin es la de almacenar datos simples con
permanencia de sesin, su funcionamiento es muy similar
al de las cookies pero ms elegante y eficiente, por lo que
lentamente se ha convertido en el reemplazo natural.
LocalStorage es mucho ms rpido y menos intensivo para
el ordenador y es la opcin ideal si lo que queremos es
almacenar datos simples como el nombre del usuario, la
ltima vez que se us la aplicacin o un punto en el mapa.
Mientras que la base de datos nos funcionar mejor si
queremos almacenar datos ms complejos como una lista
de usuarios o las coordenadas en el mapa de una cadena
de tiendas, tambin debemos preferir la base de datos si
queremos hacer operaciones con esa informacin como
ordenarla alfabticamente o hacer bsquedas dentro de
ella.
A diferencia de la base de datos localStorage tiene un uso
ms sencillo, para almacenar un dato slo se usa este
comando:
window.localStorage.setItem("key", "value");

Ahora la variable quedar almacenada en el equipo , si

queremos recuperar ese dato se usa el mtodo getItem:
var value = window.localStorage.getItem("key")
y para eliminarlo se usa removeItem()
window.localStorage.removeItem("key");
El siguiente ejemplo muestra cmo manipular informacin
usando localstorage

SessionStrorage
Este mtodo es exactamente igual a localStorage con una
nica diferencia: la informacin se borra al cerrar la
aplicacin.
Es particularmente til para almacenar informacin entre
documentos pero que es solo til durante la sesin actual,
por ejemplo el identificadores de sesin, passwords y
cualquier informacin sensible.
Para crear un variable de sesin se usa el mtodo
window.sessionStorage.setItem("key", "value");
y al igual que con localstorage estn disponibles los
mtodos getItem y removeItem para recuperar y borrar la
informacin respectivamente.
En el siguiente ejercicio se prueban ambos elementos
Ejercicio 18.2
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-

width"/>
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>
<title>Ejercicio 18.2</title>
<style>
button {
width: 90%;
height: 25px;
margin: 5px auto;
}
</style>
<script>
var normal
document.addEventListener("deviceready",
onDeviceReady, false);
function onDeviceReady(){
/// muestra las variables de sesion si existen
mostrarVariables();
}
function crearLocalStorage(){
window.localStorage.setItem("local", "variable
localstorage activa");
mostrarVariables()
}

function crearSessionStorage(){
window.sessionStorage.setItem("session","variable
session activa");
mostrarVariables()
}
function crearNormal(){
normal = "valor normal";
mostrarVariables()
}
function mostrarVariables(){
var texto = ""
if(window.localStorage.getItem("local")){
texto += "<li>"+
window.localStorage.getItem("local") + "</li>"
}
if( window.sessionStorage.getItem("session")){
texto += "
<li>"+window.sessionStorage.getItem("session")+ "
</li>"
}
if(normal){
texto += "<li>"+ normal+ "</li>";
}
// selecciona la lista del DOM

lista = document.getElementById("listaVariables");
lista.innerHTML = texto
}
</script>
</head>
<body >
<button onclick="crearLocalStorage()">Crear variable
localStorage</button>
<button onclick="crearSessionStorage()">Crear
variable SessionStorage</button>
<button onclick="crearNormal()">Crear variable
normal</button>
<a href ="otroDocumento.html"> Abrir otro Documento
</a>
<h1>Variables</h1>
<ul id="listaVariables">
</ul>
</body>
</html>

Este ejercicio crea variables de tipo localStorage,

sessionStorage y normales.

Las variables localStorage permaneces hasta que se

borren o se desinstale la app. Las variables
SessionStorage permanecen mientras la app est activa,
pero desaparecen al cerrar. las variables normales
desaparecen al cambiar de documento.

CAMARA
Lenta y silenciosamente los mviles reemplazaron a las
cmaras digitales, hoy en dia en flickr la mayora de las
fotografas se toman a travs de iPhone ms que cualquier
otra cmara profesional.

Fuente: http://www.flickr.com/cameras/
Un buen desarrollador mvil debe tener conocimientos

del uso de la cmara, debido a la enorme popularidad de

la fotografa en los mviles, existe una gran posibilidad
de que la proxima app que desarrolles utilice esta
capacidad.

-Como funciona la fotografa en PhoneGap

Al tomar una fotografa usando PhoneGap, una vez
capturada la imagen el dispositivo se enviar los datos de
vuelta a la aplicacin.
Para procesar la imagen tenemos 2 alternativas la primera
es accederla como datos crudos en base 64, la segunda es
utilizar el path virtual de la imagen.
Cuando PhoneGap recibe respuesta del dispositivo, enva
la respuesta segn se indique en forma de datos o de un
link al archivo.
En el siguiente ejemplo se toma una foto al presionar el
botn y muestra el resultado en el tag <img>
Ejercicio 19.1
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 19.1</title>
<style>
button{width:95%; height:35px;}
</style>
<meta charset="utf-8">

<script type="text/javascript" charset="utf-8"

src="cordova.js"></script>
<script>
var pictureSource; // picture source
var destinationType; // sets the format of returned
value

document.addEventListener("deviceready",onDeviceRead
function onFail(message) {
alert('Error: ' + message);
}
function tomarFoto(){
navigator.camera.getPicture( mostrarFoto, onFail,
{ quality: 50, destinationType:
Camera.DestinationType.FILE_URI } );
}
function mostrarFoto(param){
var imagen =
document.getElementById("imagen")
imagen.src = param
}
</script>
</head>
<body>

<button onclick="tomarFoto()"> Tomar Foto </button>

<img id="imagen" src="" />
</body>
</html>
Como se puede apreciar, en este ejemplo el mtodo que se
encarga de tomar la fotografa es
navigator.camera.getPicture( mostrarFoto, onFail, {
quality: 50, destinationType:
Camera.DestinationType.FILE_URI } );
Este mtodo , como muchos otros de phonegap utiliza 3
parmetros donde el primero se activa con una lectura
exitosa, el segundo se activa con el error y el tercero
define las opciones de la fotografa, en la prxima seccin
hablaremos en detalles de ellos.
En el presente ejemplo, cuando los datos de la imagen
estn disponibles, se activa la funcin mostrarFoto que
recibe como respuesta el URI de la imagen y lo asigna al
atributo src de la imagen para desplegarlo
Al momento de tomar una fotografia, los parmetros son
son sumamente importantes y pueden afectar el desempeo
de la aplicacin, a continuacin vamos a revisar los ms
relevantes.

Opciones de Fotografa
Cuando se toma una fotografa en PhoneGap, es posible
configurar una serie de elementos que van desde el tamano
hasta el formato de la imagen. Las principales elementos
de configuracin son:
quality : define la calidad de la imagen que se
tomar, gracias a que los dispositivos actuales
manejan cmaras de buena calidad, se recomienda
usar imgenes con calidad 50 o inferior para no
afectar el rendimiento ni el espacio disponibles del
dispositivo.
destinationType : Define la forma de recibir la
imagen, como una cadena codificada en base 64
(Data_URL) o el URI del archivo (File_URI), por
performance, compatibilidad y sencillez se
recomienda usar la segunda opcin para manipular
las imgenes.
sourceType : Indica la fuente para obtener la
imagen, puede ser una fotografa ya almacenada en el
dispositivo o una imagen capturada por la cmara.
targetWidth: define el ancho de la imagen en
pixeles.
targetHeight: define el largo de la imagen en
pixeles.

El siguiente ejemplo toma una fotografa y la copia en una

carpeta
Ejercicio 19.2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>
<title>Ejercicio 19.2</title>
<style>
body{text-align:center;}
button{ width:95%; height:35px}
h2{ font-size:14px}
</style>
<script>
var pictureSource; // picture source
var destinationType; // sets the format of returned
value

document.addEventListener("deviceready",onDeviceRead
var _root
var _workingFolder

var _imagePath
var _localImagePath
function onDeviceReady() {
//solicita acceso al filesystem

window.requestFileSystem(LocalFileSystem.PERSISTEN
0, accesoFS, error);
}
// tenemos acceso al filesystem
function accesoFS(fileSystem) {
// busca o crea el directorio

fileSystem.root.getDirectory("manualDelGuerreroMovil",
{create: true, exclusive: false},function(myfolder){
/// define el objeto del folder para utilizarlo
posteriormente
_workingFolder = myfolder;
alert("folder")
})
_root = fileSystem.root
}
function copiarFoto() {

window.resolveLocalFileSystemURI(_imagePath,function
{
fileEntry.copyTo(_workingFolder , "miImagen"+
Math.random() +".jpg" ,function(e){
_localImagePath = e;
var imagen =
document.getElementById("imagenGuardada")
imagen.src = _localImagePath.fullPath;
},
function(e){ alert(e)}); },
function(e){alert("fallo en la escritura"+e.code)}
);
}
function error(message) {
alert('error al tomar la foto : ' + message);
}
function tomarFoto(){
navigator.camera.getPicture( mostrarFoto,
error, { quality : 75, destinationType :
Camera.DestinationType.FILE_URI, sourceType :
Camera.PictureSourceType.CAMERA, allowEdit :
true, encodingType: Camera.EncodingType.JPEG,

targetWidth: 100, targetHeight: 100 } );

}
function mostrarFoto(param){
var imagen =
document.getElementById("imagen")
imagen.src = param;
_imagePath = param;
}
</script>
</head>
<body >
<button onclick="tomarFoto()"> Tomar Fotografia
</button>
<h2> Captura:</h2>
<img id="imagen" src="" />
<hr>
<button onclick="copiarFoto()"> Guardar imagen
</button>
<h2> Ultima imagen guardada:</h2>
<img id="imagenGuardada" src="" />
</body>
</html>

El resultado de este ejercicio toma fotografias y las copia

en una carpeta del sistema usando el File API que se
detalla en el capitulo 17 de este libro.

Para probar este ejemplo en un emulador android es

necesario habilitar la captura de imgenes desde el AVD,
puedes encontrar mas detalles sobre la configuracin en el
capitulo 7 de este libro.
Si ests trabajando en iOS debers probar estos ejemplos

en un equipo real ya que el emulador no tiene soporte para

la captura de imgenes.

CONTACTOS
El dispositivo mvil por excelencia es un telfono celular
y una de las principales funciones de este dispositivo es
hacer llamadas e interactuar con todos los contactos del
usuarios.
PhoneGap tiene acceso a la lista de contactos del
dispositivo y permite la manipulacin y creacin de todos
ellos. En este captulo revisaremos las operaciones
bsicas para administrar contactos desde una aplicacin.

Crear contactos
El mtodo que permite la creacin de contactos es
contacts.create(). Crear un contacto es bastante simple ,
solo es necesario invocar este mtodo:
var nuevoContacto = navigator.contacts.create();
Esta sencilla lnea ha creado un objeto de tipo Contact que
se puede modificar arbitrariamente. Para agregar nuevos
datos a este contacto tal como nmeros de telfono,
direcciones o imgenes, es necesario agregar nuevos
objetos que , tal como una figura de bloques, se integran
para formar un solo conjunto que compone el contacto.
El contacto que acabamos de crear an no tiene ningn
dato vinculado. Posiblemente el dato ms importante de
un contacto es el nombre y para agregarle uno es
necesario incluir un nuevo objeto llamado
ContactName(), el siguiente cdigo crea el nuevo objeto
que contiene los datos del nombre:
var nuevoNombre = new ContactName();
nuevoNombre.givenName = "Darth";
nuevoNombre.familyName = "Vader";

Aunque este objeto tiene datos del nombre del nuevo

contacto, estos elementos an no estn vinculados entre s.
Como se mencion anteriormente, en PhoneGap un
contacto es un conjunto de bloques. Cada contacto tiene
una serie de contenedores donde podemos almacenar
estos bloques o mejor dicho, objetos. En el caso del
nombre, el contacto tiene una propiedad llamada name
para incluir en el contacto los valores del nombre que
acabamos de crear,se debe asignar el valor del objeto
contactName a esta propiedad:
nuevoContacto.name = nuevoNombre
A partir de este momento, el nuevo contacto ya tiene un
nombre asociado, sin embargo, el contacto que hemos
creado aun no esta guardado en el sistema, para que este
nuevo contacto permanezca en el dispositivo como parte
de la lista de contactos utilizamos el mtodo save()
nuevoContacto.save()
Al igual que en el caso anterior, es posible agregar
muchos otros elementos a un contacto. Las principales
propiedades que podemos agregarle a un contacto son:
id: identificador global del contacto.

displayName: El nombre para mostrar del contacto,

pueden ser apodos o nombres cortos.
name: Un objeto que contiene los elementos del
nombre del contacto.
nickname: El nombre casual o apodo del contacto
phoneNumbers: Un objeto Array con los nmeros de
telfono del contacto.
emails: Un objeto Array con los correos electrnicos
del contacto.
addresses: Un objeto Array con las direcciones
contacto.
ims: un objeto Array con las direcciones de
mensajera instantnea del contacto.
organizations: Un objeto Array con las
organizaciones a las que pertenece el contacto.
birthday: La fecha de cumpleaos del contacto.
note: Notas acerca del contacto.
photos: Un objeto Array con las fotografas del
contacto.
urls: un objeto Array con las direcciones web del
contacto.
El siguiente ejemplo crea un nuevo contacto, le agrega
numeros de telefono y hasta una imagen personalizada:
Ejercicio 20.1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>
<title>Ejercicio 20.1</title>
<script>
function crearContacto(){
var nuevoContacto = navigator.contacts.create();
var nombre = new ContactName();
nombre.givenName = "Darth";
nombre.familyName = "Vader";
nuevoContacto.name = nombre
var numerosTelefonicos = [];
numerosTelefonicos[0] = new
ContactField('work', '123-456-7890', false);
numerosTelefonicos[1] = new
ContactField('mobile', '123-456-7890', true);
numerosTelefonicos[2] = new
ContactField('home', '123-456-7890', false);
nuevoContacto.phoneNumbers =
numerosTelefonicos;

var pics = []
pics[0] = new ContactField('url',
'http://manualdelguerreromovil.com/assets/darth_vader.jpg
true);
nuevoContacto.photos = pics
nuevoContacto.save()
}
</script>
</head>
<body >
<button onclick="crearContacto()"> crear contacto
nuevo </button>
</body>
</html>
Al hacer clic en el botn "Crear Contacto Nuevo" se
agrega un nuevo elemento en la lista de contactos, tal
como se puede ver en la imagen:

Si deseas probar este ejemplo en iOS no olvides agregar

el dominio "manualdelguerreromovil.com" en la lista de
ExternalHosts.

Buscar contactos
Los contactos se almacenan en una base de datos local y
es posible usar la API de PhoneGap para hacer bsquedas
entre los contactos y hasta usar filtros para buscar entre
los diferentes valores de los contactos.
Para hacer una bsqueda entre los contactos PhoneGap
tiene el mtodo navigator.contacts.find() que utiliza varios
parmetros para hacer bsquedas.
El siguiente cdigo hace una bsqueda entre los contactos
y muestra una lista de los que calzan con el resultado:
function verContactos(){
var options = new ContactFindOptions();
options.filter=""; // una cadena vacia muestra todos
los elementos
options.multiple=true;
// devuelve multiples
resultados
filtro= ["name","phoneNumbers"]; // busca entre los
nombres y numeros de telefono
// encuentra contactos
navigator.contacts.find(filtro, lecturaExitosa, false,
options);
}

En este ejemplo mtodo navigator.contacts.find() se

encarga de realizar la bsqueda en los contactos del
sistema. El primer parmetro que recibe es un array con
los elementos en los que se va a hacer la busqueda, en
este caso "filtro" indica que la bsqueda se realizar entre
valores de nombres y numeros de telefono.
El segundo y tercer parmetros son los clsicos callbacks
que usa PhoneGap para ejecutar la lectura exitosa o error
de lectura. El ltimo parmetro define las opciones de
lectura, en este caso el valor "mltiple" definido en "true"
permite obtener varios contactos en un solo resultado, si
esta en "false" se devolver solo el primer resultado de la
bsqueda en que existan otras posibles coincidencias.
Una vez que se realiza exitosamente la lectura, el mtodo
devuelve un array con todos los resultados que coinciden
con la bsqueda y pueden procesarse en el mtodo que
recibe esos datos
function lecturaExitosa(contacts) {
var resultados ="";
for (var i=0; i<contacts.length; i++) {
resultados += "<li>"+contacts[i].name.givenName + "
"+ contacts[i].name.familyName + "</li>";
}

//agrega los resultados forma de lista

var lista = document.getElementById("resultados")
lista.innerHTML = resultados
};
El siguiente ejemplo hace una bsqueda abierta entre
todos los contactos del sistema:
Ejemplo 20.2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>
<title>Ejercicio 20.2</title>
<script>
function verContactos(){
var options = new ContactFindOptions();
options.filter=""; // una cadena vacia muestra todos los
elementos
options.multiple=true;
// devuelve multiples
resultados

filter = ["name","phoneNumbers"]; // busca entre los

nombres y numeros de telefono
// encuentra contactos
navigator.contacts.find(filter, lecturaExitosa, false,
options);
}
function lecturaExitosa(contacts) {
var resultados ="";
for (var i=0; i<contacts.length; i++) {
resultados += "<li>"+contacts[i].name.givenName + "
"+ contacts[i].name.familyName + "</li>";
}
//agrega los resultados forma de lista
var lista = document.getElementById("resultados")
lista.innerHTML = resultados
};
</script>
</head>
<body>
<button onclick="verContactos()"> Ver contactos
</button>

<ul id="resultados">
</ul>
</body>
</html>
En este caso, el valor options.filter se deja vaco
intencionalmente para que la bsqueda devuelva todos los
contactos del sistema. Se invita al lector a probar
diferentes bsquedas en su lista de contactos.

La API de contactos de PhoneGap esta basada en el

estndar del W3C, puedes encontrar informacin
detallada y actualizada sobre ella en este URL:
http://www.w3.org/TR/2011/WD-contacts-api20110616/

DEPURACION CON
NAVEGADORES
Las aplicaciones PhoneGap son catalogadas como
hbridas porque, aunque en el fondo son aplicaciones
nativas, en su parte operativa usan lenguajes propios de la
web como HTML5 y CSS3.
Este tipo de aplicaciones, por su naturaleza dual, pueden
probarse en diferentes entornos. Aunque una aplicacin
PhoneGap se puede depurar en emuladores y dispositivos
moviles, gracias a que su base es HTML5, en la gran
mayora de los casos es posible depurar desde un
navegador web.
En este captulo vamos a examinar las principales
herramientas para probar y depurar aplicaciones desde el
browser.

Webkit
Como se ha mencionado anteriormente, las aplicaciones
PhoneGap corren en una instancia del navegador del
sistema, en la mayora de los casos, esta instancia es una
versin de Webkit.
En el mundo de los navegadores mviles, Webkit es uno
de los pesos pesados de la industria. Los principales
sistemas operativos mviles ( Android, iPhone y
Blackberry) tienen un punto en comn: todos sus
navegadores usan como ncleo el motor Webkit.
Webkit es un motor de render y su funcin es bsicamente
convertir el cdigo HTML, CSS, y Javascript en los
elementos grficos, lgicos e interactivos de un
documento web. Este proyecto de cdigo abierto est
revolucionando la internet y liderando el avance de
tecnologas como HTML5 y CSS3.
El proyecto Webkit es el motor detrs de todos estos
populares navegadores:
Google Chrome
Safari
Safari mobile
Android Browser
Blackberry browser

Konqueror
Amazon Kindle
RockMelt
Cualquiera de todos estos navegadores puede ejecutar el
cdigo HTML de tus aplicaciones PhoneGap con
apariencia y funcionalidad muy similar a la que tendr en
el dispositivo mvil.
Aunque muchos navegadores estn basados en Webkit,
pueden usar versiones ligeramente diferentes, estas
diferencias pueden ir desde sutiles cambios en la
apariencia de las propiedades CSS hasta el soporte de
caractersticas cruciales de la API de HTML5. Lo mismo
sucede con las diferentes versiones de sistemas
operativos para mviles.
Seguir la pista de todas estas diferencias es un trabajo
complejo, afortunadamente, el sitio MobileHTML5.com
tiene una tabla detallada y permanentemente actualizada
con todas las capacidades soportadas por los principales
navegadores, clasificadas por sistema operativo y
versin.

Fuente: http://mobilehtml5.org/
Si no estas seguro que versin de browser utilizar para tus
pruebas, puedes usar Google Chrome Safari que usan
Webkit y tienen muchas caractersticas en comn con sus
contrapartes mviles.
Para probar las similitudes de Webkit con una aplicacin
mvil real, prueba abrir este URL en Google Chrome
Safari:
http://goo.gl/T2oCw

Este archivo usa el mismo cdigo que el ejemplo final

usado en el captulo de CSS3. Aqui una imagen
comparativa entre ambas opciones:

A la izquierda se puede ver el ejercicio original, instalado

como una aplicacin en Android, a la derecha se ve el
archivo HTML base de la misma aplicacin.
Se puede apreciar el soporte que tiene el navegador para
para mostrar todos los efectos, tipografas, animaciones y

selectores CSS3 que se usaron en la aplicacin original.

-Herramientas de desarrollo de Safari /

Google Chrome
Al utilizar Safari Google Chrome podrs depurar tus
aplicaciones en una ventana especial con mltiples
herramientas de desarrollo. Para mostrar esta ventana solo
es necesario hacer click derecho en cualquier parte de un
documento y seleccionar la opcin: "inspeccionar
elemento"

La ventana de herramientas de desarrollo permite

monitorear y modificar una serie de elementos de un
documentos, desde sus elementos HTML hasta el cdigo
JavaScript

Las herramientas disponibles son:

Elementos: Permite ver en detalle cada uno de los
elementos que componen un documento. Al seleccionar
cualquier elemento, es posible modificar su HTML,
Estilos CSS, Eventos y propiedades del DOM ( Document
Object Model).
Recursos: Muestra recursos internos disponibles para la
aplicacin como Bases de datos, localStorage y
sessionStorage. Esta seccin es perfecta para depurar
aplicaciones PhoneGap que usan permanencia de datos.
Network: Despliega todos los archivos que descarga el
documentos y muestra detalles como el tamao y tiempo
de carga de cada uno.
Scripts: Muestra todos los archivos de JavaScript que usa
el documento, es posible inspeccionar el cdigo, detectar
errores y hasta modificar comandos.
Timeline: Permite hacer anlisis avanzado de velocidad y
rendimiento de la aplicacin.
Profiles: Captura y analiza el rendimiento de scripts de
Javascript.

Audits: Analiza el documento y ofrece sugerencias de

optimizacin para reducir la carga y mejorar el
rendimiento de la aplicacin.
Console: Una consola que permite insertar comandos
arbitrarios de JavaScript, detectar errores de javascript e
inspeccionar objetos y clases.
Finalmente, se incluye una til casilla de bsqueda para
encontrar elementos correspondientes a la ventana que
est activa.
Todas estas herramientas gratuitas hacen la depuracin de
aplicaciones PhoneGap mucho ms rpida, productiva y
detallada.
El browser convencional es muy til para depurar
aplicaciones, pero tiene una limitacin: los eventos y
mtodos especficos de la API de PhoneGap no estn
disponibles de manera nativa en el navegador. Por
ejemplo el evento "onDeviceReady" no se activa cuando
se hacen pruebas directamente en el browser.
Afortunadamente tenemos un plugin especializado para
desarrollo de aplicaciones PhoneGap que soluciona esta
limitacin.

Ripple
Ripple es un plugin para Google Chrome que recrea el
entorno y sensores de un dispositivo mvil real dentro del
navegador web. Ripple es propiedad de Research in
Motion, los creadores de Blackberry y tiene un sistema
bastante avanzado de simulacin optimizado
especficamente para PhoneGap.
Con este plugin y el soporte HTML5 de Google Chrome
es posible probar, con bastante aproximacin a la
realidad, prcticamente cualquier aplicacin PhoneGap,
incluso si usan eventos o sensores del mvil.

-Instalacin
Para instalar Ripple solo necesitas descargarlo
directamente desde la appstore de Google Chrome :

https://chrome.google.com/webstore/detail/geelfhphabnejjh
Una vez instalado el plugin vas a encontrar el nuevo icono
de Ripple

Desde este botn se puede administrar el modo de

emulacin. Al presionarlo te aparecer un men para
activar o desactivar la emulacin con Ripple.

Para entrar en modo de emulacin debes escoger la

opcin "Enable".
Al activarlo por primera vez es posible que aparezca una
ventana solicitando escoger una plataforma para emular,
puedes escoger las opciones "Apache Cordova" o
"PhoneGap".

El modo de emulacin tiene permanencia de sesin, lo que

significa que una vez activado en un documento, cada vez
que lo abras en el navegador, Ripple se activa
automticamente. Para desactivar esta conducta, solo
debes presionar el botn de Ripple y seleccionar
"Disable".
Toma en cuenta que Ripple no trabaja con archivos en
modo local, slo puede emular documentos en la red
usando el protocolo "http://". Si abres un archivo local
usando el protocolo "file://" el plugin no se activar.
Los archivos que se desean emular en Ripple deben estar
almacenados en un servidor externo o en uno interno
(localhost). En caso de no tener acceso a un servidor
externo, es posible habilitar un servidor local de manera

rpida y fcil con programas gratuitos como Xampp.

http://www.apachefriends.org/es/xampp.html

-Emulacin de aplicaciones
Para probar una aplicacin PhoneGap en Ripple, se deben
ubicar todos los archivos de la aplicacin (usualmente
contenidos en la carpeta "www") en un servidor local o
externo.
Solamente es necesario abrir en el navegador el archivo
"index.html" ( la base de la aplicacin PhoneGap ) y
activar el modo de emulacin de Ripple.
Si an no tienes ninguna aplicacin mvil lista, puedes
probar esta aplicacin de ejemplo:
http://revolucion.mobi/wpcontent/uploads/2011/11/index.html

Prueba cambiar los valores de Geolocalizacin y

presionar el botn "mostrar mi ubicacion" para ver los
cambios.
Una vez activado el emulador, es posible simular el
comportamiento de la aplicacin en diferentes
plataformas, emular sensores y hasta activar eventos
propios de PhoneGap.
Las principales secciones del plugin Ripple son:
Devices: Simula la apariencia, tamao y resolucin de

pantalla de mltiples equipos y sistemas operativos

mviles. Tambin permite cambiar la orientacin del
equipo en horizontal vertical.
Platforms: Muestra las plataformas y versiones
disponibles para emulacin. Asegrate de elegir siempre
la opcin "Apache Cordova" en su versin ms reciente.
Aunque tambin existe la opcin "PhoneGap", sta se
refiera a una versin antigua (1.0), previa a la compra de
Adobe y lanzamiento del proyecto Apache Cordova.
Information: Despliega informacin importante sobre el
documento y modo de emulacin actual.
Accelerometer: Muestra un dispositivo virtual en 3D que
se puede rotar libremente sobre todos sus ejes. Al
manipular el dispositivo virtual se enva directamente la
informacin a la aplicacin para que reaccione de igual
manera, simulando as el movimiento real de un
dispositivo. La informacin detallada se muestra en
tiempo real para depurar y comprobar los resultados.
Incluye tambin la opcin de simular la accin de
"sacudida" o "shake".
Device & Network Settings: Simula la presencia y tipos
de conexin a internet propios de un dispositivo mvil.
Geo Location: Permite simular y manipular todos los
valores de las coordenadas de geolocalizacin, desde la

latitud y longitud hasta la velocidad en que se desplaza el

mvil. Incluye adems un mapa para ubicar grficamente
las coordenadas que se introducen.
Events: Activa eventos especficos de PhoneGap como
deviceReady , que seala el momento en que el
dispositivo esta listo o backbutton , que se activa cuando
se presiona el botn de regresar de algunos dispositivos.
Esta caracterstica es particularmente til porque permite
emular el comportamiento de una aplicacin PhoneGap en
un dispositivo mvil real.
La depuracin en browsers es una gran opcin para
acelerar el desarrollo de aplicaciones, sin embargo no
importa lo prctico que sea el uso del browser, es
indispensable que antes de publicar una aplicacin,
realices pruebas en equipos reales o simuladores de
sistemas operativos mviles. Slo stos ofrecen una
versin realista de la aplicacin y en especial del
comportamiento que tendr una vez instalada en su
plataforma definitiva.
En el prximo captulo vamos a aprender cmo depurar
aplicaciones desde equipos fsicos y sistemas operativos
mviles.

DEPURACION CON
EQUIPOS REALES
Antes de publicar una aplicacin mvil es crucial realizar
pruebas en equipos reales. Las pruebas en emuladores,
aunque son muy prcticas para desarrollar rpidamente,
no son suficientes. No importa lo bueno que sea un
emulador, nunca tendr las mismas caractersticas de un
equipo real, algunas de las principales limitaciones de los
emuladores son:
Hardware: En emuladores como los que se incluye en el
SDK de Android y iPhone, aunque tienen la capacidad de
emular un sistema operativo mvil, lo hacen usando el
hardware de tu ordenador, que generalmente tiene ms
recursos de sistema que un mvil normal.
Tambin puede ocurrir el caso opuesto: el ordenador
donde se ejecuta el emulador puede tener pocos recursos
disponibles, un escenario posible en ordenadores antiguos
o aun modernos que estn ejecutando muchos programas
simultneamente al realizar la emulacin.
En ambos casos las aplicaciones van a tener un
desempeo que no corresponde al que tendran en un

equipo real.
Sistema operativo: El sistema operativo en el que haces
tus pruebas, en ocasiones puede mostrar un resultado
incorrecto, por ejemplo si haces tus pruebas usando
Ripple en el sistema operativo windows, encontrars
resultados inconsistentes al ejecutar tus aplicaciones en el
equipos iPhone.
Soporte: Algunas caractersticas no son soportadas en
todos los sistemas operativos ni en todas sus versiones.
Aunque una caracterstica funcione en algunos emuladores
y sistemas operativos, slo al ejecutarlo en un dispositivo
real puedes saber si funciona correctamente.
Por ejemplo, el tag <video> en Android est disponible
en el browser del sistema y algunos emuladores como
Ripple, pero no es posible ejecutarlo desde una
aplicacin PhoneGap por ausencia de soporte dentro del
entorno de la aplicacin.
Sensores: Varios sensores son difciles o imposibles de
probar de manera efectiva en emuladores. Sensores como
la cmara del sistema no siempre estn soportados en el
emulador y es necesario que se ejecuten desde un equipo
real para probarlos.
En otros casos, aunque es posible probar los sensores en
el emulador, su respuesta cambia en el dispositivo fsico,

por ejemplo al probar elementos de geolocalizacin, en

el mundo real encontrars grandes diferencias de exactitud
y un impacto en la batera del dispositivo que era
imposible de observar desde un emulador.
Ecosistema: Aunque tiene un impacto posiblemente menor
que los dems factores, es igual relevante tomar en cuenta
que el comportamiento especfico de tu aplicacin puede
verse influenciado al interactuar con el resto de
aplicaciones y servicios de un sistema operativo real. En
algunos casos, cuando utilizas plugins o componentes
adicionales, como Facebook o lectores de cdigos QR, es
posible que necesites que otras aplicaciones estn
instaladas en el sistema operativo.
Como puedes ver, las herramientas de simulacin que
hemos estudiado en este libro pueden darte una buena idea
de como funciona tu aplicacin, pero slo son
simulaciones. Tu aplicacin funcionar en equipos reales
y la prueba de fuego siempre se debe realizar en uno de
ellos.
A continuacin vamos a revisar los requerimientos,
configuracin y herramientas para instalar y depurar tus
aplicaciones en equipos reales.

Depuracin en equipos
Android
Android es uno de los equipos favoritos de los
desarrolladores porque adems de incluir excelentes
herramientas de desarrollo, su configuracin para
depuracin es sencilla, rpida y no requiere de ninguna
licencia especial.

-Configuracin del Dispositivo

El primer paso para configurar tu equipo Android es abrir
el men de opciones. Desde la pantalla principal del
sistema, presiona el botn de men que se encuentra en la
parte inferior de tu equipo.

Este botn despliega un menu con varias opciones para

configurar tu dispositivo, presiona la opcin "settings" :

En pantalla aparecer una lista con todos los elementos de

ajuste del sistema operativo, selecciona la opcin
"Applications"

Esto mostrar las opciones de configuracin para las

aplicaciones. Marca la casilla "Unknown sources" para
permitirle a tu dispositivo instalar aplicaciones desde
otras fuentes distintas a Google Play.
Al marcar esta casilla puede que aparezca una ventana de
advertencia informando sobre los posibles problemas que
puedes tener al habilitar esta opcin, presiona aceptar.
Toma en cuenta que no debes descargar aplicaciones en tu
equipo si no conoces bien su procedencia, de ser posible,
instala nicamente tus propias aplicaciones y no bajes
nada de tiendas o sitios que no conozcas bien.

A partir de ahora tu equipo puede instalar aplicaciones

creadas localmente! Vamos a hacer unos ajustes extra para
habilitar la depuracin. En este mismo apartado
selecciona la opcin "Development"

En esta seccin puedes configurar las opciones

especficas para desarrolladores:
Modo de depuracin cuando el dispositivo est
conectado al cable USB
Mantener la pantalla activa permanentemente
Permitir simulacin de posicionamiento GPS
La primera opcin es la ms importante porque te
permitir depurar aplicaciones desde el dispositivo. Las

otras opciones no son tan crticas, pero se recomienda

habilitarlas.

Ahora tu dispositivo esta configurado como herramienta

de desarrollo! Cuando lo conectes con el cable USB a un
ordenador, aparecer un icono indicando que el
dispositivo esta listo para depurar aplicaciones.

Depurar aplicaciones con

Eclipse
Lejos, el programa ms completo para probar
aplicaciones de Android es Eclipse, que tiene todas las
herramientas para depurar aplicaciones, adems de una
integracin total con el sistema operativo Android.
Para probar tus aplicaciones con todas las herramientas
de prueba que ofrece Eclipse debes compilar tus
aplicaciones en modo de depuracin. Para hacerlo,
selecciona el men contextual que aparece junto a la
opcin "Debug" y en la lista que se despliega, selecciona
"Debug Configurations"

Esto mostrar las opciones de depuracin de tu

aplicacin. En el men de la derecha selecciona la opcin

"Android Application" y crea una nueva configuracin
para compilar tu aplicacin tal y como se detalla en el
Captulo 4 de este libro.
Esta vez, adems de la configuracin normal, debes entrar
en el tab "Target" que se encuentra en la parte superior
derecha. All puedes elegir donde deseas que se ejecute tu
aplicacin.
Marca la opcin "Always prompt to pick device", de esta
forma cada vez que compiles tu aplicacin, Eclipse te
consultar en donde deseas que se ejecute.

Ahora conecta tu dispositivo al ordenador y compila tu

aplicacin en el modo de depuracin que acabas de crear.

En cuanto la aplicacin est lista, te aparecer una
ventana similar a esta, preguntando en donde deseas
ejecutar tu aplicacin. En la parte superior se muestra tu
dispositivo conectado con su versin de Android y
nmero de serie.

Selecciona tu dispositivo y en unos minutos la aplicacin

se instalar automticamente en l. Lo mejor de todo es
que aunque ests ejecutando tu aplicacin en un
dispositivo fsico, mientras est conectado por USB,
tienes disponibles todas las herramientas de Eclipse para
depurar.

-Herramientas de Eclipse
Gracias al plugin ADT de Android ( que aprendimos a
instalar en el Captulo 3 ) Eclipse tiene una completa serie
de herramientas para depurar aplicaciones,
completamente integradas con el sistema operativo
Android.
Puedes encontrar todas las herramientas especializadas de
Eclipse si vas a la barra superior del programa y
seleccionas Window > Show View > Other

Esto te mostrar todas las herramientas disponibles de

Eclipse. En la carpeta "Android" encontrars todas las
herramientas especializadas para ste sistema operativo.

Aqu encontrars herramientas para probar la mayora de

los aspectos de tu aplicacin, desde su apariencia hasta el
uso de recursos.

- LogCat.
Los logs de sistema te permiten analizar informacin,
enviarte mensajes de error y chequear datos internos.
Puedes usar la herramienta logCat para ver todo lo que
esta pasando en el sistema, rastrear errores de runtime o
de sintaxis. Tambin puedes enviar tus propios mensajes a
la consola a traves del comando console.log(). Este
comando esta disponible luego de que se inicialice el
evento "deviceready".
Por ejemplo, puedes usar el comando console.log("hola
mundo") y recibir un mensaje de manera oculta para el
usuario final. El mensaje aparecer nicamente en la
consola de LogCat.

-Captura de imgenes de pantalla

Para publicar tu aplicacin y obtener un buen nmero de
descargas es importante que muestres casos de uso real,
en algunas aplicaciones, como los juegos por ejemplo, no
es suficiente mostrar la portada de una aplicacin, tienes
que mostrar la experiencia real de jugarla!
Para capturar estas imgenes puedes usar la herramienta
"Devices" que entre otras muchas cosas te permite
capturar lo que aparece en la pantalla tanto del emulador
como de un equipo conectado en modo de depuracin.
Solo tienes que usar tu aplicacin y presionar el botn de
captura en el momento perfecto,el sistema almacenar la
captura de pantalla en una imagen.

-Administracin de Archivos
Con la herramienta "File Explorer" puedes ver y
administrar todos los archivos del sistema Android en el
que se ejecuta tu aplicacin. El File Explorer permite
enviar y recibir datos adems de crear o borrar archivos o
carpetas.

Con esta herramienta puede explorar archivos de sistema

tanto en emuladores como en equipos reales.

-Simular llamadas telefnicas, conexin a la

red y coordenadas de geolocalizacin
Android incluye el una herramienta particularmente til
llamada "Emulator Control" que puede simular varios
elementos como el tipo y estado de la red, llamadas
telefnicas entrantes, mensajes SMS y hasta la posicin
geogrfica del equipo.

Depurar en equipos iOS

A diferencia de Android, para depurar aplicaciones en un
equipo iOS (iPhone, iPad, iPod touch) debes cumplir con
una serie de requisitos previos.
Para probar en un equipo iOS es indispensable que lo
hagas desde un ordenador con sistema operativo MacOS y
registrarse en el programa de desarrolladores de Apple.

-Licencias y configuracin
Apple controla muy de cerca de todo el ecosistema iOS y
para probar una aplicacin en cualquier equipo que
funcione con este sistema operativo es necesario estar
inscrito en el programa de desarrolladores iOS. Aunque el
registro en este programa es gratuito y le permite al
desarrollador acceso a la descarga de programas y
documentacin, el acceso al hardware se obtiene
nicamente a travs de la membresa de pago que tiene un
costo anual de $100 USD.

El sitio de Apple para registrarte como desarrollador de

iOS es:
https://developer.apple.com/programs/register/
Para registrarte necesitas una tarjeta de crdito
internacional y si estas fuera de los Estados Unidos debes
enviar los datos de tu tarjeta de crdito por Fax a Apple.
Si no tienes una mquina de Fax a mano, puedes enviarlo
en linea a traves de Faxzero.com:

http://faxzero.com/
Una vez registrado como desarrollador podrs registrar
tus dispositivos y crear certificados de seguridad que te
permitirn instalar aplicaciones en equipos fsicos.
Puedes registrar hasta 100 dispositivos iOS diferentes.

- Configuracin del equipo

Una vez que tengas el registro como developer, puedes
crear, descargar e instalar, los certificados de
desarrollador, el proceso es algo complejo y tedioso. En
este manual vamos a dejar que Xcode se encargue del
trabajo de registrar y configurar tu dispositivo.
Para configurar tu dispositivo, conectalo por el cable USB
al ordenador y abre Xcode. Una vez abierto el programa,
selecciona en la barra superior la opcin Window >
Organizer

El organizer es un programa parte del SDK de iOS que te

permite administrar equipos, libreras documentacin y
aplicaciones.
Selecciona el apartado devices, aqui puedes administrar
todos tus dispositivos iOS

Si tienes conectado tu dispositivo lo veras en la lista de

aparatos a la izquierda del programa. El nombre con el
que aparece tu dispositivo es el que le has definido desde
el sistema operativo.

Selecciona el aparato que quieres registrar para

depuracin. En cuanto lo selecciones se mostrar a la
derecha una ventana con informacin del dispositivo.
Busca en la parte inferior de esa ventana el boton "Add to
portal"

Al presionar este botn Xcode se encargara de registrar

este aparato en tu cuenta de developer. Automticamente
se descargan e instalan todos certificados necesarios para
que puedas depurar aplicaciones en este dispositivo.
Luego de este proceso el aparato estar listo para hacer
pruebas.

Depurar aplicaciones con

Xcode
La herramienta por excelencia para desarrollar para
iPhone es Xcode. Esta herramienta est totalmente
integrada con el SDK y el sistema operativo e integra una
serie de programas adicionales para realizar pruebas tanto
en el emulador como en equipos fsicos.
Para ejecutar una aplicacin en un dispositivo fsico
primero debes conectar un dispositivo previamente
registrado y configurado para desarrollo.
Una vez conectado el equipo, busca en la parte superior la
lista de opciones para ejecutar el programa, elige la
opcin "iOS Device " tal como se muestra en la imagen.
En algunos casos, en vez de mostrarse como "iOS Device"
aparece el nombre del dispositivo que se encuentra
conectado.

Ahora que tienes definido tu dispositivo fsico para

ejecutar la aplicacin solo necesitas presionar el botn
"Run".
Luego de unos minutos la aplicacin PhoneGap se
ejecutar en el dispositivo.

-Herramientas de Xcode
Xcode tiene todo un arsenal de herramientas para que
depures tus aplicaciones hasta que estn listas para salir a
la appstore.
La mayora de estas herramientas te servirn para probar
tus aplicaciones tanto en el simulador como en un equipo
real. El proceso de prueba en iOS es particularmente
importante porque si tu aplicacin tiene alguna falla
crtica corre el riesgo de no ser aprobada en la Appstore.

- Consola
La consola de Xcode permite monitorear la actividad de
la aplicacin, rastrear datos, enviar mensajes de error y
analizar datos de funcionamiento.
Para activar la consola en Xcode debes ir a View >
Activate Console

Adems de monitorear con detalle tu aplicacin, puedes

enviar mensajes directos a travs del comando
console.log().
El comando console.log() solo esta disponible luego de
inicializado el evento deviceready y puede mostrar
mensajes exclusivamente en la consola sin que sean vistos
por el usuario.

-Instruments
Una de las herramientas ms poderosas de depuracin de
Xcode es Instruments, un programa que te permite realizar
mltiples pruebas tanto en el emulador como en el equipo
real.
Para desplegar Instruments desde Xcode, debes ir a
Xcode> Open Developer Tool > Instruments

En Instruments puedes realizar una gran cantidad de

pruebas como el uso de CPU, batera, velocidad y hasta
detectar fugas de memoria en tu aplicacin. Solo
selecciona la prueba que deseas realizar y presiona el
botn "Choose"

Para monitorear tu aplicacin debes seleccionarla de la

lista de procesos. Selecciona en la lista de procesos la
opcin "attach to process" y busca en la seccin System un
proceso con el nombre de tu aplicacin.
En este ejemplo se est ejecutando una prueba de
actividad en el programa "manual del guerrero mvil", en
la siguiente ilustracin se observa cmo seleccionar el
proceso correspondiente:

Una vez seleccionado el proceso, presiona el botn

"record" al lado superior izquierdo para comenzar a
rastrear la actividad de la aplicacin.
Dependiendo del anlisis solicitado, Instruments mostrar
grficas en tiempo real del rendimiento de la aplicacin.
Esta informacin puede ser almacenada para anlisis
posteriores.

- Administracin de archivos
Xcode tambin permite inspeccionar los archivos de una
aplicacin, esta informacin es particularmente til si tu
aplicacin de alguna forma crea o modifica archivos.
Para inspeccionar los archivos debes abrir el Organizer
de Xcode que ya hemos usado en pginas anteriores y
buscar en la lista de dispositivos el que ejecuta la
aplicacin que deseas inspeccionar.
Bajo el nombre de tu dispositivo encontrars una lista de
sub elementos, escoge el tem "Aplications" para mostrar
las aplicaciones instaladas en este dispositivo.

Las aplicaciones instaladas en tu dispositivo aparecen en

una lista al lado derecho, selecciona la aplicacin que
deseas inspeccionar y en la parte inferior de la pantalla
aparecern todos los archivos de esta aplicacin.
Recuerda que en iOS las aplicaciones trabajan de manera
independiente bajo el concepto de "Sand Box" cada
aplicacin tiene un espacio reservado para instalar y
administrar sus propios archivos, completamente
separado e independiente del sistema y otros programas.

Puedes administrar los archivos de una aplicacin con los

controles en la parte inferior de la ventana.

PHONEGAP BUILD
PhoneGap Build es un servicio de Adobe que permite
compilar aplicaciones PhoneGap en la nube. El principio
bsico de este servicio es crear aplicaciones en mltiples
formatos y plataformas en un solo paso, sin importar la
plataforma que se utilice para desarrollar.
Para crear aplicaciones con este servicio solo se necesita
subir los archivos fuente en HTML5, CSS3 y JavaScript.
Sin importar en qu plataforma trabajes, PhoneGap Build
convierte estos archivos en aplicaciones mviles. No es
necesario instalar ningn software adicional porque los
servidores de PhoneGap Build estn cargados con todos
los SDKs necesarios para crear aplicaciones en 6
diferentes plataformas ( iOS, Android, Windows Phone,
Blackberry webOS y Symbian )
Lo mejor de este servicio gratuito es que libera a los
usuarios de encadenarse a cualquier sistema operativo.
Por ejemplo, para crear una aplicacin iOS es
indispensable desarrollar desde un equipo Apple porque
el SDK de iPhone est completamente vinculado al
sistema operativo Mac OS. Tcnicamente, un usuario de
Windows o Linux estara imposibilitado a crear una
aplicacin para iPhone. Ahora, gracias a Phonegap Build

ya no importa en qu plataforma se desarrolle la

aplicacin, solo es necesario enviar el cdigo fuente a la
nube y las aplicaciones mviles se compilan
simultneamente en 6 formatos distintos, listas para
publicarse directamente en las tiendas de aplicaciones.
La direccin del sitio de PhoneGap build es:
http://build.phonegap.com/
Para utilizar el servicio solo es necesario tener una cuenta
gratuita de Adobe o Github

Subir Aplicaciones a la nube

Actualmente hay 3 diferente formas de publicar el cdigo
en PhoneGap Build:
Github: una de las opciones ms robustas es utilizar el
sistema de repositorios de git ya que adems de ser muy
prctico, permite que varios developers trabajen en un
solo cdigo y mantener control de versiones.
Upload directo: se pueden subir archivos de la aplicacin
directamente en forma de .zip o en un archivo .html
Dreamweaver CS6: La ltima versin del Creative Suite
de Adobe incluye integracin nativa con el servicio de
PhoneGap Build. En el captulo 6 de este libro se detalla
la configuracin bsica para integrar Dreamweaver CS6
con este servicio. Al crear una aplicacin mvil en
Dreamweaver CS6 el sistema se encarga de duplicarla en
el sitio de PhoneGap Build y de definir todos los ajustes
necesarios.

Crear una nueva aplicacin

Para crear una nueva aplicacin desde el sitio de
PhoneGap Build, solo es necesario buscar el botn "+new
app" para comenzar el proceso de creacin

El siguiente paso es definir el nombre de la aplicacin,

los settings y la fuente de origen de los archivos

El ttulo de la aplicacin es el identificador dentro de

PhoneGap Build y el nombre con el que se va a mostrar la
aplicacin en los dispositivos en que se instale.
Los settings de la aplicacin tienen 3 opciones:
Enable debugging: Permite activar la consola de
depuracin que puede enviar y recibir datos de
depuracin de cualquier terminal que instale la aplicacin
Make app private: Controla el acceso a la aplicacin, una
aplicacin pblica puede ser descargada por cualquier
persona mientras que una aplicacin privada solo puede
descargarse por usuarios previamente autorizados.
Enable hydration: Activa el "Hydration" nuevo servicio

de PhoneGap Build que actualiza automticamente

cualquier aplicacin instalada a la ltima versin
disponible.
Tambin tienes dos opciones para subir el cdigo fuente
de la aplicacin. En el caso de elegir la opcin "from a
repo" debes definir la direccin de un repositorio
pblico. La opcin "by upload" permite subir un archivo
en formato html o un archivo .zip con los archivos de la
aplicacin.

Configuracin
Una vez listos los archivos base de la aplicacin es
necesario crear un archivo de configuracin. Este archivo
definir las propiedades bsicas de la aplicacin y esta
basado en el standard de aplicaciones del W3C. Puedes
encontrar informacin detallada sobre el formato de los
archivos de configuracin en los siguientes enlaces:
http://www.w3.org/TR/widgets/
http://dev.opera.com/articles/view/extensions-api-configxml/
Si ests creando tu aplicacin a travs de Adobe
Dreamweaver CS6 el archivo de configuracin se crea
automticamente, en el caso de que utilices otra
herramienta es necesario crear un archivo con el nombre
config.xml e incluirlo en la raz de la aplicacin.
A continuacin se muestra un ejemplo del contenido que
debe tener el archivo de configuracin:
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id
= "com.phonegap.example"

version = "1.0.0">
<name>Nombre de la app</name>
<description>Descripcion breve.</description>
<icon src="icono.png"/>
<author href="https://revolucion.mobi"
email="carlos@revolucion.mobi">
Carlos Solis
</author>
<feature
name="http://api.phonegap.com/1.0/geolocation"/>
<feature
name="http://api.phonegap.com/1.0/network"/>
</widget>
Aunque, segn el estndar del W3C el archivo de
configuracin puede definir una gran cantidad de detalles
de una aplicacin mvil, PhoneGap Build solo soporta un
nmero limitado de propiedades, las principales son:
icon file: Debes incluir un archivo que ser el icono de tu
aplicacin, esta imagen se mostrar en el sistema
operativo y ser la forma en que los usuarios identificarn
tu aplicacin. El formato de este archivo debe ser PNG y
tiene soporte para canal Alpha.
Name: El ttulo de tu aplicacin, este ser el nombre con

el que aparecer identificada tu aplicacin dentro del

sistema operativo.
Versin: La versin actual de tu aplicacin
PhoneGap version: La versin que PhoneGap que deseas
utilizar en tu aplicacin.
Description: una breve descripcin de la aplicacin.
Icon: Una imagen pequea que identifica la aplicacin
Author: El nombre del autor de la aplicacin
Features: una lista de los elementos de la API que utiliza
la aplicacin, esta lista se utiliza para invocar permisos
de acceso en el dispositivo. Por ejemplo, si la aplicacin
usa la API de geolocalizacin, debe incluirse en esta lista
para asegurar el acceso al hardware del dispositivo.
La informacin de este archivo est disponible tambin
desde el sitio de PhoneGap Build en el panel de control
de la aplicacin, en la seccin de "settings"

Una vez definido el archivo de configuracin y enlazado

el cdigo, solo tienes que compilar. En un solo paso tu
aplicacin se compila para 6 plataformas distintas.
Dependiendo de la plataforma en la que quieras publicar
es posible que necesites algunos pasos extra antes de
publicarla en su respectiva tienda de aplicaciones, a
continuacin examinaremos los pasos detallados para
publicar tanto en Android como en iOS.

Publicar aplicaciones en
Android
Todas las aplicaciones de Android necesitan estar
firmadas con un certificado de seguridad antes de
publicarse en la tienda Google Play.
El certificado de seguridad en android es muy sencillo de
crear y el proceso es totalmente gratuito. Para crear el
certificado solo debes insertar este comando en consola
de tu sistema operativo
keytool -genkey -v -keystore
keyParaPublicar.keystore -alias mi_alias -keyalg RSA
-keysize 2048 -validity 10000
En el cdigo que aparece anteriormente, se va a crear un
archivo llamado keyParaPublicar.keystore y le asigna el
alias "mi_alias". El alias es un nombre corto que se
utilizar como identificacin del usuario.
En cuanto se inserte este comando , el sistema solicita
asignar un password y enviar algunos datos personales
nombre, organizacin, ciudad y codigo de pais, en este
ltimo caso se debe usar el cdigo standard de dos letras
para su pas, por ejemplo Estados unidos (US), Mexico

(MX), Chile (CL).

Toma en cuenta que al incluir algunos datos como el

password el cursor no parpadea ni se mueve y puede
parecer que no responde. Al terminar de incluir un dato
solo debes presionar la tecla enter y el sistema
responder.
Puedes encontrar informacin detallada sobre el proceso
de creacin de certificados para android en el sitio oficial

de Android:
http://developer.android.com/intl/es/tools/publishing/appsigning.html
Una vez finalizado el proceso antes mencionado, se crea
el archivo keyParaPublicar.keystore que ser el
encargado de encriptar tus aplicaciones.
El siguiente paso es subir este archivo a la nube para
encriptar todas tus aplicaciones . En el sitio de PhoneGap
Build, selecciona tu aplicacin y busca el apartado de
Android en la seccin "Builds". Selecciona la opcin
"add a key..."

Al agregar un nuevo certificado, el sistema va a solicitar

los permisos para cifrar el archivo:

Alias: El ttulo del certificado

Alias: incluir el alias que usaste a la hora de crear el
certificado, en el comando que se uso de ejemplo el alias
es "mi_alias"
Key password: incluir el password que usaste para crear
tu certificado de seguridad.
Keystore password: El segundo password que usaste

para crear tu certificado

Luego de definidos el certificado su aplicacin, el archivo
.apk que genera phonegap build est listo no solo para
hacer pruebas en cualquier equipo, tambin es posible
subirlo directamente a la tienda de Google Play.

Publicar aplicaciones iOS

Para publicar una aplicacin de iOS es necesario
encriptar tu aplicacin con los certificados de seguridad
que ofrece Apple. Los certificados de Apple son de uso
exclusivo para desarrolladores registrados. Los pasos
para completar el proceso de registro se detallan en el
Captulo 22 de este libro.
Una vez completado el registro como desarrollador de
iOS, es necesario ingresar con tus credenciales al sitio de
desarrolladores de Apple en:
http://developer.apple.com
Debes buscar el "iOS Provisioning Portal", en esta
seccin se generan y almacenan todos los certificados
para acceso y distribucin de aplicaciones iOS

El certificado que necesita PhoneGap build para distribuir

tus aplicaciones se encuentra en la seccin
"Provisioning". Si no tienes ningun certificado activo aun,
presiona el boton "New profile" para crear uno.

Al presionar el boton "Download" se descargar el

certificado del perfil correspondiente. El archivo

descargado tiene el nombre del perfil seleccionado y la
extensin ".mobileprovision". Guarda este archivo en un
lugar accesible, lo vas a necesitar ms adelante.
El siguiente paso necesita realizarse en un equipo Mac OS
registrado y configurado para desarrollar aplicaciones
iOS tal como se indica en el captulo 22 de este libro.
PhoneGap Build necesita un certificado de encriptado en
formato .p12, para generarlo debes abrir el programa
"Keychain Access".
Selecciona la categora "Certificates" y busca all un el
certificado de desarrollador de iOS a tu nombre:

Selecciona tu certificado de desarrollador y has click

derecho sobre l. En el menu contextual que se muestre
elige la opcion "Export iPhone Developer: XXXXXX "

donde XXX es tu nombre y numero de desarrollador

registrado.

Esta opcion va a exportar tu certificado de desarrollador

para utilizarlo en PhoneGap Build, recuerda exportarlo en
formato .p12

El sistema pedir un password para este certificado,

recuerda anotarlo en algn lugar accesible, lo necesitars
ms adelante.

Ya tienes todos los elementos necesarios para encriptar

aplicaciones en la nube!
Ahora debes regresar a la pagina de PhoneGap Build,
elige tu aplicacin y busca en la seccin "builds" la
opcion iOS. Selecciona la opcion "add a key..." para
registrar el nuevo certificado.

El menu emergente te pide algunos detalles adicionales, la

informacion que necesitas incluir es:
Title: el nombre de indentificacion de el certificado, asi
podras utilizarlo en otras aplicaciones.

Certificate (p12) file: aqui debes incluir el archivo .p12

que acabas de crear
Provisioning file: incluye aca el archivo que recien
descargaste del portal de desarrolladoreas (
.mobileprovisioning)
Certificate password: el password que definiste en el
certificado que creaste en tu ordenador.

Una vez asignado el certificado puedes compilar en la

nube tus aplicaciones iOS y descargar un archivo .ipa ya
listo para publicarse directamente en la Appstore de
Apple.

Depuracin de aplicaciones
en la nube
Phonegap build tiene servicio de depuracin muy
completo llamado weinre, con este sistema es posible
enviar y recibir informacin de cualquier terminal que
descargue la aplicacin.
Para activar el modo de depuracin es necesario activarlo
haciendo clic en el botn debug

El depurador detecta e identifica los dispositivos que

estn utilizando la aplicacin y muestra sus datos:

En la seccion "Consola" es posible enviar y recibir datos,

ejecutar funciones del programa o cualquier comando

arbitrario de javascript.

La siguiente aplicacin utiliza el comando

console.log() para enviar informacion al depurador cada
vez que se hace clic en el botn "enviar datos al
depurador" .
Ejercicio 23.1
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Hola Mundo</title>
<script src="cordova.js" type="text/javascript"
charset="utf-8"></script>
</head>
<body>
<h1>Depurando en la nube</h1>
<button onclick="enviarDatos()"> enviar datos al
depurador </button>
<script>

function enviarDatos(){
console.log("Datos Enviados desde el
movil")
}
</script>
</body>
</html>
Una vez instalado el programa e, PhoneGap build puede
detectar que hay un dispositivo conectado en modo de
depuracin y recibir los datos del equipo. En este ejemplo
cada vez que se presione el botn "enviar datos al
depurador" se reciben datos en tiempo real en la consola
de depuracion de PhoneGap Build.

Tambin es posible enviar datos desde la consola a los

dispositivos que tengan instalada la aplicacin, por
ejemplo, si en la consola se inserta el comando de
javascript:

alert("enviando datos desde el depurador")

En el equipo que usa la aplicacin se ejecutar el
comando y aparecer la respectiva alerta:

La consola de PhoneGap Build es una de las herramientas

de depuracin ms poderosas del mercado y en definitiva
permite refinar a un nivel profesional cualquier
aplicacin.