Phonegap

Ing. César Eduardo Suárez Trujillo
@cesarlarsson

Simplemente JS o cualquiera de los demás frameworks

¿QUE ES PHONEGAP?
Este framework nace en San Francisco en 2009 por la
empresa Nitobi Software obteniendo el premio del publico en
el O’Reilly Media de ese año.

En Octubre de 2011 Adobe compra Nitobi

¿CÓMO FUNCIONA?

Esta grafica ilustra fácilmente como funciona 

NATIVA O BASADA EN WEB
Ventajas de la tecnologías nativas: Mejor experiencia del usuario (en la
interfaz del móvil) y mejor uso de las características de hardware del mismo.
Desventajas: Incompatibilidad de plataformas por lo que el app debe
desarrollarse varias veces, una por cada plataforma que se quiera (Android,
iOS, Blackberry, Windows Phone, etc.) utilizar.

Ventajas de tecnologías Web: Un desarrollo que funcionará para cualquier
plataforma. Sólida integración con aplicaciones basadas en servidores
empresariales (aplicaciones Web y de bases de datos). Desventajas: Una
interfaz de usuario móvil comparativamente débil y poca capacidad de
interactuar con el móvil (sonido, pantalla, GPS, cámara, etc.). Además, no se
pueden publicar en los App Stores y Markets para distribuirse y ser
descargadas.

¿Y COMO ES ESTA VUELTA?
Lo primero que tenemos que saber que a pesar de que
nuestra aplicación técnicamente solo la vamos a escribir una
vez (html- css -javascript). Cada plataforma de desarrollo
tiene sus librerías propias para la compilación del proyecto.

En esta guía hablaremos de Android y iOS

JQUERY MOBILE
jQuery mobile es un framework de javascript que extiende la
funcionalodad del framework estandar de jQuery como lo
hace jQueryUI para las aplicaciones web.

CREANDO LA INTERFAZ
 Nuestra aplicación requiere una interfaz, es por eso que recurrimos a
jQuery Mobile.
 Ventajas:
• Simple: El framework es muy facil de usar.
• Mejora progresiva: La filosofía de jQuery Mobile es soportar tanto la gama
alta de los dispositivos, como aquellos que no soportan grandes
funcionalidades.
• Accesibilidad: jQuery Mobile ha sido diseñado pensando en la accesibilidad.
• Tamaño pequeño: El tamaño total de jQuery Mobile framework es
relativamente pequeño. Unos 12kb de la biblioteca JavaScript, 6kb de CSS y
algunos íconos.
• Tematización: proporciona un sistema de temas que nos ofrece una
aplicación a nuestro propio estilo.

COMPARATIVO

Area JQueryMobile Sencha Touch SproutCore DHTMLX Touch jQTouch Dojo Toolkit Vaadin GWT
Execution 70% 75% 58% 62% 55% 55% 57% 57%
Development 98% 77% 52% 73% 80% 64% 41% 52%
Product 88% 100% 48% 48% 55% 60% 48% 63%
Support and
65% 65% 65% 65% 65% 65% 65% 65%
Documentation
Acumulated score 3,20 3,17 2,23 2,47 2,55 2,44 2,10 2,36
Average 80,06% 79,32% 55,78% 61,72% 63,64% 60,91% 52,52% 59,11%

ESTRUCTURA BÁSICA
 Nuestra primera pagina en jQuery debe tener los siguiente
elementos básicos:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>

<div data-role="page">

<div data-role="header">
<h1>Titulo de la pagina</h1>
</div>

<div data-role="content">
<p>Contenido de la pagina.</p>
</div>

<div data-role="footer">
<h4>Pie de pagina</h4>
</div>
</div>


</body>
</html>

 Un solo documento html puede contener multiples paginas

<div data-role="page” id=“pagina1”>
<div data-role="header">
<h1>Titulo de la pagina</h1>
</div>

<div data-role="content">
<p>Contenido de la pagina.</p>

</div>

<h4>Pie de pagina</h4>
</div>
</div>

ETIQUETAS IMPORANTES
En esta pagina de la documentación la encontramos
http://jquerymobile.com/test/docs/api/data-attributes.html
Component HTML5 data-*
Header, Footer <div data-role="header">
Content body <div data-role="content">

Buttons <a href="index.html" data-role="button"
data-icon="info">Button</a>
Grouped buttons <div data-role="controlgroup">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Hell Yeah</a>
</div>
Inline buttons <div data-inline="true">
<a href="index.html" data-role="button">Foo</a>
<a href="index.html" data-role="button" data-theme="b">Bar</a>
</div>

Component HTML5 data-*
Form element <div data-role="fieldcontain">
(Select menu) <label for="select-options" class="select">Choose an option:</label>
<select name="select-options" id="select-options">
<option value="option1">Option 1</option>
</select>
</div>
Basic List views <ul data-role="listview">
<li><a href="index.html">One</a></li>
<li><a href="index.html">Two</a></li>
<li><a href="index.html">Three</a></li>
</ul>
Dialogs <a href="foo.html" data-rel="dialog">Open dialog</a>
<a href="dialog.html" data-role="button" data-inline="true” data-rel="dialog" data-
transition="pop">Open dialog</a>
Transitions <a href="index.html" data-transition="pop" data-back="true">

LISTAS
No hay elemento más básico en una aplicación movil
tradicional. El contenido principal de nuestra aplicación o
nuestro web site se puede plasmar como una lista.

<ul data-role="listview" data-theme="g">
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
</ul>

Si agregamos elementos dinámicamente
simplemente usamos $('#mylist').listview('refresh')
Para actualizar los nuevos elementos.

http://jquerymobile.com/demos/1.1.0/docs/lists/docs-lists.html

ENTRADAS EN HMTL5
Una de las cosas que nos trae HTML5 es poder tener inputs
con tipos de datos específicos. Estos tipos nos ayudaran a
decirle al dispositivo que “teclado” nos debe mostrar.
• Email
• Url
• Number
• Range
• Date pickers
(date, month, week, time, datetime, datetime-local)
• Search
• Color

TRANSICIONES
Slide – La página actual se desplaza hacia la izquierda a la vez que entra
desde la derecha la página nueva.
Pop – La página nueva se abre sobra la antigua en forma de pop-up pero
ocupando todo el espacio.
Slideup – La página nueva aparece desde abajo, desplazándose hasta
ocupar toda la pantalla.
Slidedown – La página nueva aparece desde arriba y se desplaza hacia
abajo ocupando la pantalla.
Fade – La pantalla nueva se monta sobre la actual con una transición de
cambio de opacidad.
Flip – El más espectacular. Esta transición entre pantallas simula un giro
de 180º de la página, simulando que la nueva es el dorso de la que
teníamos.

Para utilizar esta transicion en nuestra pagina:

<a href="index.html" data-transition="pop”>Page2</a>

EVENTOS
El framework de jQuery ya nos traía una serie de eventos
simples de usar, pero en jQueryMobile tenemos que tener en
cuenta lo siguiente:

$(document).bind('pageinit'), no $(document).ready()

Realmente cada una de la paginas va cargando según se van
llamando

http://jquerymobile.com/test/docs/api/events.html

$( '#aboutPage' ).live( 'pageinit',function(event){
alert( ‘Esta pagina se ha cargado' );
});

$('.quickNav').live('tap',function(event) {
$(".select_body").toggle(); // toggles the
visibility/display of the element.
});

TOUCH EVENTS
Algo realmente importante en dispositivo móviles y tablets son lo eventos
sobre la pantalla, jQuery Mobile trae consigo una serie de eventos para tal
fin como son:

tap : Toque rápido
taphold : Toque completo (1 seg aprox)
swipe : Cuando arrastras en horizontal más de 30px o 20px en vertical
durante 1 seg.
swipeleft : Cuando te desplazas a la izquierda
swiperight : Cuando te desplazas a la derecha
orientationchange : Cuando se cambia la orientación del dispositivo
scrollstart : Se activa al empezar el scroll.
scrollstop : Se activa al finalizar el scroll.

También podemos detectar cambio de orientación

• orientationchange

TEMAS
Los temas son algo clave, podemos generar nuestro propios temas desde la aplicación
online
 <a href="#" data-role="button" data-theme="a">About this app</a>
 <a href="#" data-role="button" data-theme="b">About this app</a>

Para cambiar temas utilizamos el atributo data-theme=“d” en el
Elemento al que se le desee cambiar el tema especifico. Tambien
de manera general se puede cambiar de forma general los
elementos.
$.mobile.page.prototype.options.theme = "d";
$.mobile.page.prototype.options.addBackBtn = false;
$.mobile.page.prototype.options.backBtnTheme = "d";

// Page
$.mobile.page.prototype.options.headerTheme = "d"; // Page header only
$.mobile.page.prototype.options.contentTheme = "d";
$.mobile.page.prototype.options.footerTheme = "d";

// Listviews
$.mobile.listview.prototype.options.headerTheme = "d"; // Header for nested lists
$.mobile.listview.prototype.options.theme = "d"; // List items / content
$.mobile.listview.prototype.options.dividerTheme = "d"; // List divider

$.mobile.listview.prototype.options.splitTheme = "d";
$.mobile.listview.prototype.options.countTheme = "d";
$.mobile.listview.prototype.options.filterTheme = "d";

$.mobile.listview.prototype.options.filterPlaceholder = "Buscar por...";

ANDROID Y PHONEGAP
Lo primero que tenemos que hacer es bajar el SDK de Android que esta disponible
para Windows, MacOS y Linux

http://developer.android.com/sdk/index.html

La pagina de desarrollo de Android recomienda, el uso de eclipse
y realmente es muy bueno para las aplicaciones nativas, pero cuando
se trata de phonegap, netbeans tiene ventajas dado su interfaz para
el manejo de HTML, css y javascript
Para utilizar facilmente netbeans con nuestro SDK de Android,
ingresamos a Options->plugins

http://kenai.com/projects/nbandroid

http://kenai.com/projects/nbandroid/downloads/download/updatecenter/updates.xml

CONFIGURANDO PHONEGAP
Bueno phone son realmente una serie de librerias que
debemo integrar a nuestro proyecto, por eso primero
debemos ingresar al sitio oficial http://phonegap.com/ en la
sección descargas seleccionamos la version que queramos.
Para este momento acaban de liberal la versión 1.8, igual
utilizaremos la 1.7 denominada apache cordova, aquí estan la
librerías para cada una de la plataformas.

HELLO WORLD
Como en todo inicio, no hay nada como nuestro hello world, por
defecto si corremos nuestro proyectos no crea un hello world
nativo, pero lo que haremos sera crear nuestro hello world con
phonegap.

Luego configuramos nuestro proyecto, y seleccionamos a que
Plataforma vamos a usa en nuestro proyecto. Creo que la 2.2
Cobija una gran gama de dispositivos

Importamos las librerias de phonegap e nuestro proyectos

Luego de editar nuestro principal archivo de actividades, modificamos el
Manifiesto AndroidManifest.xml que se encuentra

En la carpeta assets creamos la carpeta /www donde se colocara nuestro
proyecto. Por defecto netbeans no es capaz de encontrar esta ubicación, por
eso debemos realizar los siguiente:

Buscar el archivo project.properties

Agregar los siguiente:
assets.dir=assets
assets.available=true

Ahora agregamos nuestro archivo index.html a nuestra carpeta
www y lo ejecutamos.

PHONEGAP Y IOS
Para trabajar con phonegap en iOS es mucho mas
sencillo, simplemente en el paquete que descargamos
instalamos el plugin utilizando cordova-1.7.0.dmg

Si corremos el emulador a la loca tendremos lo siguiente

CASOS DE ESTUDIO

http://phonegap.com/app/hockey-community/

http://phonegap.com/app/tiny-terrors/

ALTERNATIVAS
Phonegap no es el único proyecto de este tipo, existen más
de 15 proyectos mal contados de este estilo. Algunos incluso
con mas potencial (unas pagas) en este momento que
phonegap. Entre lo mas importantes estan:

http://www.quickconnectfamily.org/

http://appspresso.com/

http://www.sencha.com/

http://www.applicationcraft.com/
http://www.appfurnace.com/

http://www.iui-js.org/

Phonegap

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Destacado

Destacado (20)

Similar a Phonegap

Similar a Phonegap (20)

Más de Cesar Eduardo Suarez T

Más de Cesar Eduardo Suarez T (8)

Último

Último (15)

Phonegap