Phonegap

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

¿QUE ES PHONEGAP?
S 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.
S En Octubre de 2011 Adobe
compra Nitobi
@cesarlarsson

¿cómo funciona?
Esta grafica ilustra fácilmente como funciona 
@cesarlarsson

Una imagen vale más que mil palabras

Tipo de aplicaciones
Web Apps: Portales o aplicaciones web diseñadas para verse bien
desde dispositovs moviles y/o tabletas.
Hybrid Apps: Son aplicaciones web empaquetadas dentro un browser
de pantalla completa las cuales cuentan con extensiones para acceder
a funcionalidades del hardware del equipo.
Native Apps: Son escritas en diferentes lenguajes dependiendo de la
paltaforma. Tiene acceso completo a todas las capacidades del
dispositivo.
@cesarlarsson

Otras alternativas
www.appcelerator.com
www.xamarin.com
www.sencha.com

Phonegap vs Titanium
Phonegap es una aplicación web que
se ejecuta en la vista de un
navegador web nativo. Nos permite
usar HTML5, CSS3 y JavaScript, así
como frameworks de interfaz de
usuario (front-end), como Jquery
Mobile, Sencha, etc…
Appcelerator es JavaScript puro y
duro, que se compila a código
nativo. Phonegap es compatible
con muchas más plataformas
(sobre todo plataformas móviles),
pero Appcelerator puede darnos
un mejor rendimiento en según
qué casos, como por ejemplo
animaciones.

Primeros pasos
S 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.
S En esta guía hablaremos de Android y iOS

Instalando Phonegap
1- Instalar NODE.JS http://nodejs.org/download/
2- Instalar desde la terminal
3- Crear y correr nuevo proyecto

Ambiente de trabajo
No es necesario un IDE especifico para desarrollar en Phonegap, pero recomiendo
Netbeans que desde su versión 8 permite desarrollar un proyecto para Phonegap de
Manera facil.

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

¿Por qué JQuery Mobile?
S Nuestra aplicación requiere una interfaz, es por eso que recurrimos a
jQuery Mobile.
S 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.

Benchmark
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%

S Un solo documento html puede contener multiples paginas

Etiquetas
Component HTML5 data-*
Header, Footer <div data-role="header">
<div data-role="footer">
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
(Select menu)
<div data-role="fieldcontain">
<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
S 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
S 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)

TRANSICIONES
S Slide – La página actual se desplaza hacia la izquierda a la vez que entra desde la derecha
la página nueva.
S Pop – La página nueva se abre sobra la antigua en forma de pop-up pero ocupando todo el
espacio.
S Slideup – La página nueva aparece desde abajo, desplazándose hasta ocupar toda la
pantalla.
S Slidedown – La página nueva aparece desde arriba y se desplaza hacia abajo ocupando la
pantalla.
S Fade – La pantalla nueva se monta sobre la actual con una transición de cambio de
opacidad.
S 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.
S Para utilizar esta transicion en nuestra pagina:
S <a href="index.html" data-transition="pop”>Page2</a>

EVENTOS
S 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:
S $(document).bind('pageinit'), no $(document).ready()
S Realmente cada una de la paginas va cargando según se
van llamando
S 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. También 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...";

Phonegap

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Phonegap

Más de Cesar Eduardo Suarez T

Phonegap