3. ¿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
6. 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
8. 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.
9. 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
10. Instalando Phonegap
1- Instalar NODE.JS http://nodejs.org/download/
2- Instalar desde la terminal
3- Crear y correr nuevo proyecto
12. 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.
14. 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.
15. ¿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.
22. 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
23. 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)
24. 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>
25. 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
26. $( '#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.
});
27. 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
28. 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>
29. 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...";