1. Ing. Csar Eduardo Surez Trujillo S@cesarlarsson @cesarlarsson

2. @cesarlarsson 3. QUE ES PHONEGAP?S Este framework nace en SanFrancisco en 2009 por laempresa Nitobi Softwareobteniendo el premio del publicoen el OReilly Media de ese ao.S En Octubre de 2011 Adobecompra Nitobi@cesarlarsson 4. cmo funciona?Esta grafica ilustra fcilmente como funciona @cesarlarsson 5. Una imagen vale ms que mil palabras 6. Tipo de aplicacionesWeb Apps: Portales o aplicaciones web diseadas para verse biendesde dispositovs moviles y/o tabletas.Hybrid Apps: Son aplicaciones web empaquetadas dentro un browserde pantalla completa las cuales cuentan con extensiones para accedera funcionalidades del hardware del equipo.Native Apps: Son escritas en diferentes lenguajes dependiendo de lapaltaforma. Tiene acceso completo a todas las capacidades deldispositivo.@cesarlarsson 7. Otras alternativaswww.appcelerator.comwww.xamarin.comwww.sencha.com 8. Phonegap vs TitaniumPhonegap es una aplicacin web quese ejecuta en la vista de unnavegador web nativo. Nos permiteusar HTML5, CSS3 y JavaScript, ascomo frameworks de interfaz deusuario (front-end), como JqueryMobile, Sencha, etcAppcelerator es JavaScript puro yduro, que se compila a cdigonativo. Phonegap es compatiblecon muchas ms plataformas(sobre todo plataformas mviles),pero Appcelerator puede darnosun mejor rendimiento en segnqu casos, como por ejemploanimaciones. 9. Primeros pasosS Lo primero que tenemos que saber que a pesar deque nuestra aplicacin tcnicamente solo la vamos aescribir una vez (html- css -javascript). Cadaplataforma de desarrollo tiene sus libreras propiaspara la compilacin del proyecto.S En esta gua hablaremos de Android y iOS 10. Instalando Phonegap1- Instalar NODE.JS http://nodejs.org/download/2- Instalar desde la terminal3- Crear y correr nuevo proyecto 11. Hardware soportado 12. Ambiente de trabajoNo es necesario un IDE especifico para desarrollar en Phonegap, pero recomiendoNetbeans que desde su versin 8 permite desarrollar un proyecto para Phonegap deManera facil. 13. Javascript, Que puedo usar? 14. JQuery MobileS jQuery mobile es un framework de javascript queextiende la funcionalodad del framework estandar dejQuery como lo hace jQueryUI para las aplicacionesweb. 15. Por qu JQuery Mobile?S Nuestra aplicacin requiere una interfaz, es por eso que recurrimos ajQuery Mobile.S Ventajas: Simple: El framework es muy facil de usar. Mejora progresiva: La filosofa de jQuery Mobile es soportar tanto lagama alta de los dispositivos, como aquellos que no soportan grandesfuncionalidades. Accesibilidad: jQuery Mobile ha sido diseado pensando en laaccesibilidad. Tamao pequeo: El tamao total de jQuery Mobile framework esrelativamente pequeo. Unos 12kb de la biblioteca JavaScript, 6kb deCSS y algunos conos. Tematizacin: proporciona un sistema de temas que nos ofrece unaaplicacin a nuestro propio estilo. 16. BenchmarkArea JQueryMobile Sencha Touch SproutCore DHTMLX Touch jQTouch Dojo Toolkit Vaadin GWTExecution 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 and65% 65% 65% 65% 65% 65% 65% 65%DocumentationAcumulated score 3,20 3,17 2,23 2,47 2,55 2,44 2,10 2,36Average 80,06% 79,32% 55,78% 61,72% 63,64% 60,91% 52,52% 59,11% 17. Estructura bsica 18. S Un solo documento html puede contener multiples paginas 19. EtiquetasComponent HTML5 data-*Header, Footer

Content body

Buttons ButtonGrouped buttons

YesNoHell Yeah

Inline buttons

FooBar

20. Component HTML5 data-*Form element(Select menu)

Choose an option:Option 1Option 2Option 3

Basic List views

• One
• Two
• Three

Dialogs Open dialogOpen dialogTransitions 21. ListasS No hay elemento ms bsico en una aplicacin moviltradicional. El contenido principal de nuestraaplicacin o nuestro web site se puede plasmar comouna lista.

• Acura

AudiBMWSi agregamos elementos dinmicamentesimplemente usamos$('#mylist').listview('refresh')Para actualizar los nuevos elementos.http://jquerymobile.com/demos/1.1.0/docs/lists/docs-lists.html 22. ENTRADAS EN HMTL5S Una de las cosas que nos trae HTML5 es poder tenerinputs con tipos de datos especficos. Estos tipos nosayudaran a decirle al dispositivo que teclado nosdebe mostrar. Email Url Number Range Date pickers (date, month, week, time, datetime,datetime-local) 23. TRANSICIONESS Slide La pgina actual se desplaza hacia la izquierda a la vez que entra desde la derechala pgina nueva.S Pop La pgina nueva se abre sobra la antigua en forma de pop-up pero ocupando todo elespacio.S Slideup La pgina nueva aparece desde abajo, desplazndose hasta ocupar toda lapantalla.S Slidedown La pgina nueva aparece desde arriba y se desplaza hacia abajo ocupando lapantalla.S Fade La pantalla nueva se monta sobre la actual con una transicin de cambio deopacidad.S Flip El ms espectacular. Esta transicin entre pantallas simula un giro de 180 de lapgina, simulando que la nueva es el dorso de la que tenamos.S Para utilizar esta transicion en nuestra pagina:S About this app About this app 28. Para cambiar temas utilizamos el atributo data-theme=d en elElemento al que se le desee cambiar el tema especifico. Tambin demanera 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 nestedlists$.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..."; 29. Casos de exito