SlideShare une entreprise Scribd logo
1  sur  30
Télécharger pour lire hors ligne
Ing. César Eduardo Suárez Trujillo S 
@cesarlarsson @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
Hardware soportado
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.
Javascript, ¿Que puedo usar?
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%
Estructura básica
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> 
<option value="option2">Option 2</option> 
<option value="option2">Option 3</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">
Phonegap
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...";
Casos de exito

Contenu connexe

Tendances (20)

Appmakr
AppmakrAppmakr
Appmakr
 
Las apps
Las appsLas apps
Las apps
 
Las apps
Las appsLas apps
Las apps
 
App’s
App’sApp’s
App’s
 
Las apps
Las appsLas apps
Las apps
 
LAS APPS
LAS APPSLAS APPS
LAS APPS
 
App machine
App machineApp machine
App machine
 
Mas para Android
Mas para AndroidMas para Android
Mas para Android
 
Windows 10 Developer Readiness. Interfaces Adaptativas
Windows 10 Developer Readiness. Interfaces AdaptativasWindows 10 Developer Readiness. Interfaces Adaptativas
Windows 10 Developer Readiness. Interfaces Adaptativas
 
Windows 10: One SDK to rule them all
Windows 10: One SDK to rule them allWindows 10: One SDK to rule them all
Windows 10: One SDK to rule them all
 
LAS APP
LAS APP LAS APP
LAS APP
 
Android Wear Diseño, Emuladores, Entorno de Desarrollo, Proyecto
Android Wear Diseño, Emuladores, Entorno de Desarrollo, ProyectoAndroid Wear Diseño, Emuladores, Entorno de Desarrollo, Proyecto
Android Wear Diseño, Emuladores, Entorno de Desarrollo, Proyecto
 
266521557 apuntes-unidad-formativa-app-inventor
266521557 apuntes-unidad-formativa-app-inventor266521557 apuntes-unidad-formativa-app-inventor
266521557 apuntes-unidad-formativa-app-inventor
 
Primer Ejemplo de Proyecto en Android Studio
Primer Ejemplo de Proyecto en Android StudioPrimer Ejemplo de Proyecto en Android Studio
Primer Ejemplo de Proyecto en Android Studio
 
Buenas prácticas en el desarrollo Android - Imaginática 2013
Buenas prácticas en el desarrollo Android - Imaginática 2013Buenas prácticas en el desarrollo Android - Imaginática 2013
Buenas prácticas en el desarrollo Android - Imaginática 2013
 
Android
AndroidAndroid
Android
 
Reconnect(); Sevilla - Universal Windows Platform
Reconnect(); Sevilla - Universal Windows PlatformReconnect(); Sevilla - Universal Windows Platform
Reconnect(); Sevilla - Universal Windows Platform
 
Las apps
Las appsLas apps
Las apps
 
Subir una aplicación a google play
Subir una aplicación a google playSubir una aplicación a google play
Subir una aplicación a google play
 
LAS APPS
LAS APPSLAS APPS
LAS APPS
 

En vedette

1,2,3, (Ré)Action !
1,2,3, (Ré)Action !1,2,3, (Ré)Action !
1,2,3, (Ré)Action !C-DAVY.COM
 
Lécuyer innovation béton : Bassins de rétention
Lécuyer innovation béton : Bassins de rétention  Lécuyer innovation béton : Bassins de rétention
Lécuyer innovation béton : Bassins de rétention Caroline Henri
 
Le_contre-blocus_de_la_bande_de_Gaza-_un (1)
Le_contre-blocus_de_la_bande_de_Gaza-_un (1)Le_contre-blocus_de_la_bande_de_Gaza-_un (1)
Le_contre-blocus_de_la_bande_de_Gaza-_un (1)karim isam-escribe
 
Sistemas de relacion en vegetales
Sistemas de relacion en vegetalesSistemas de relacion en vegetales
Sistemas de relacion en vegetalesJulio Sanchez
 
Autonomie dans le management
Autonomie dans le managementAutonomie dans le management
Autonomie dans le managementsherrer64
 
Program New Year's Eve Mont Royal 2016
Program New Year's Eve Mont Royal 2016Program New Year's Eve Mont Royal 2016
Program New Year's Eve Mont Royal 2016TiaraHotels
 
10 étapes pour créer une stratégie de contenu optimisée pour votre page Academos
10 étapes pour créer une stratégie de contenu optimisée pour votre page Academos10 étapes pour créer une stratégie de contenu optimisée pour votre page Academos
10 étapes pour créer une stratégie de contenu optimisée pour votre page AcademosAcademos_slide
 
Album creche vivante 2014 HERRLISHEIM
Album creche vivante 2014 HERRLISHEIMAlbum creche vivante 2014 HERRLISHEIM
Album creche vivante 2014 HERRLISHEIMMarie WEBER
 
La frise de la bataille de Trajan
La frise de la bataille de TrajanLa frise de la bataille de Trajan
La frise de la bataille de TrajanPolyxenia66
 
Lesson template
Lesson templateLesson template
Lesson templateanoop kp
 
Nherazteam ( Ancien diaporama)
Nherazteam ( Ancien diaporama)Nherazteam ( Ancien diaporama)
Nherazteam ( Ancien diaporama)Lelo_10
 

En vedette (20)

1,2,3, (Ré)Action !
1,2,3, (Ré)Action !1,2,3, (Ré)Action !
1,2,3, (Ré)Action !
 
Lécuyer innovation béton : Bassins de rétention
Lécuyer innovation béton : Bassins de rétention  Lécuyer innovation béton : Bassins de rétention
Lécuyer innovation béton : Bassins de rétention
 
Tierra
TierraTierra
Tierra
 
Le_contre-blocus_de_la_bande_de_Gaza-_un (1)
Le_contre-blocus_de_la_bande_de_Gaza-_un (1)Le_contre-blocus_de_la_bande_de_Gaza-_un (1)
Le_contre-blocus_de_la_bande_de_Gaza-_un (1)
 
Sistemas de relacion en vegetales
Sistemas de relacion en vegetalesSistemas de relacion en vegetales
Sistemas de relacion en vegetales
 
Chiffres
ChiffresChiffres
Chiffres
 
Semlaurent1
Semlaurent1Semlaurent1
Semlaurent1
 
Anabolismo
AnabolismoAnabolismo
Anabolismo
 
First design at Inside Page
First design at Inside PageFirst design at Inside Page
First design at Inside Page
 
Autonomie dans le management
Autonomie dans le managementAutonomie dans le management
Autonomie dans le management
 
Tema 18año 2012
Tema 18año 2012Tema 18año 2012
Tema 18año 2012
 
Allégations
AllégationsAllégations
Allégations
 
Program New Year's Eve Mont Royal 2016
Program New Year's Eve Mont Royal 2016Program New Year's Eve Mont Royal 2016
Program New Year's Eve Mont Royal 2016
 
10 étapes pour créer une stratégie de contenu optimisée pour votre page Academos
10 étapes pour créer une stratégie de contenu optimisée pour votre page Academos10 étapes pour créer une stratégie de contenu optimisée pour votre page Academos
10 étapes pour créer une stratégie de contenu optimisée pour votre page Academos
 
Album creche vivante 2014 HERRLISHEIM
Album creche vivante 2014 HERRLISHEIMAlbum creche vivante 2014 HERRLISHEIM
Album creche vivante 2014 HERRLISHEIM
 
La frise de la bataille de Trajan
La frise de la bataille de TrajanLa frise de la bataille de Trajan
La frise de la bataille de Trajan
 
Lesson template
Lesson templateLesson template
Lesson template
 
fasciculeS&C2011
fasciculeS&C2011fasciculeS&C2011
fasciculeS&C2011
 
Nherazteam ( Ancien diaporama)
Nherazteam ( Ancien diaporama)Nherazteam ( Ancien diaporama)
Nherazteam ( Ancien diaporama)
 
Tema 1cmc
Tema 1cmcTema 1cmc
Tema 1cmc
 

Similaire à Phonegap

JQquery Mobile por Yamil Lambert
JQquery Mobile por Yamil LambertJQquery Mobile por Yamil Lambert
JQquery Mobile por Yamil LambertYamil Lambert
 
HTML5, CSS3 y móviles
HTML5, CSS3 y móvilesHTML5, CSS3 y móviles
HTML5, CSS3 y móvilesPideCurso
 
Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011Hernan Beati
 
Responsive Web Design, ventaja, inconvenientes y recomendaciones
Responsive Web Design, ventaja, inconvenientes y recomendacionesResponsive Web Design, ventaja, inconvenientes y recomendaciones
Responsive Web Design, ventaja, inconvenientes y recomendacionesXavi Cardet
 
Presentacion Desarrollo de Aplicaciones para Iphone
Presentacion Desarrollo de Aplicaciones para IphonePresentacion Desarrollo de Aplicaciones para Iphone
Presentacion Desarrollo de Aplicaciones para IphoneAndres Karp
 
Master class: Mobile UI/UX. Como diseñar una App exitosa.
Master class: Mobile UI/UX. Como diseñar una App exitosa.Master class: Mobile UI/UX. Como diseñar una App exitosa.
Master class: Mobile UI/UX. Como diseñar una App exitosa.Martin Redigolo
 
Html5 para móviles, las reglas no escritas
Html5 para móviles, las reglas no escritasHtml5 para móviles, las reglas no escritas
Html5 para móviles, las reglas no escritasCarlos Toxtli
 
Frameworks y herramientas de desarrollo ágil para emprendedores y startups
Frameworks y herramientas de desarrollo ágil para emprendedores y startupsFrameworks y herramientas de desarrollo ágil para emprendedores y startups
Frameworks y herramientas de desarrollo ágil para emprendedores y startupsMario Jose Villamizar Cano
 
Lizbeth Anahi zambrano Santos 402
Lizbeth Anahi zambrano Santos 402Lizbeth Anahi zambrano Santos 402
Lizbeth Anahi zambrano Santos 402lizbethanahi15
 
Aprender a programar aplicaciones moviles
Aprender a programar aplicaciones movilesAprender a programar aplicaciones moviles
Aprender a programar aplicaciones movilesRobert Moreira
 
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españaWebinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españaJerilee Dueñas Rengifo
 
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españaWebinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españaCommunity Managers Latam
 
APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS mul...
APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS mul...APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS mul...
APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS mul...Interlat
 
GUIA DE LABORATORIO DEL USO DE LOS FRAMEWORS PHONEGAP Y JQUERY MOBILE EN APL...
GUIA DE  LABORATORIO DEL USO DE LOS FRAMEWORS PHONEGAP Y JQUERY MOBILE EN APL...GUIA DE  LABORATORIO DEL USO DE LOS FRAMEWORS PHONEGAP Y JQUERY MOBILE EN APL...
GUIA DE LABORATORIO DEL USO DE LOS FRAMEWORS PHONEGAP Y JQUERY MOBILE EN APL...Ivan Petrlik
 

Similaire à Phonegap (20)

Html5 para móviles
Html5 para móvilesHtml5 para móviles
Html5 para móviles
 
JQquery Mobile por Yamil Lambert
JQquery Mobile por Yamil LambertJQquery Mobile por Yamil Lambert
JQquery Mobile por Yamil Lambert
 
HTML5, CSS3 y móviles
HTML5, CSS3 y móvilesHTML5, CSS3 y móviles
HTML5, CSS3 y móviles
 
Atix21
Atix21Atix21
Atix21
 
Intro jQuery Mobile
Intro jQuery MobileIntro jQuery Mobile
Intro jQuery Mobile
 
Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011Introducción a HTML5 y CSS3 - ArtMedia 2011
Introducción a HTML5 y CSS3 - ArtMedia 2011
 
Responsive Web Design, ventaja, inconvenientes y recomendaciones
Responsive Web Design, ventaja, inconvenientes y recomendacionesResponsive Web Design, ventaja, inconvenientes y recomendaciones
Responsive Web Design, ventaja, inconvenientes y recomendaciones
 
Presentacion Desarrollo de Aplicaciones para Iphone
Presentacion Desarrollo de Aplicaciones para IphonePresentacion Desarrollo de Aplicaciones para Iphone
Presentacion Desarrollo de Aplicaciones para Iphone
 
Master class: Mobile UI/UX. Como diseñar una App exitosa.
Master class: Mobile UI/UX. Como diseñar una App exitosa.Master class: Mobile UI/UX. Como diseñar una App exitosa.
Master class: Mobile UI/UX. Como diseñar una App exitosa.
 
Html5 para móviles, las reglas no escritas
Html5 para móviles, las reglas no escritasHtml5 para móviles, las reglas no escritas
Html5 para móviles, las reglas no escritas
 
Aplicaciones móviles - HTML5
Aplicaciones móviles - HTML5Aplicaciones móviles - HTML5
Aplicaciones móviles - HTML5
 
Frameworks y herramientas de desarrollo ágil para emprendedores y startups
Frameworks y herramientas de desarrollo ágil para emprendedores y startupsFrameworks y herramientas de desarrollo ágil para emprendedores y startups
Frameworks y herramientas de desarrollo ágil para emprendedores y startups
 
Lizbeth Anahi zambrano Santos 402
Lizbeth Anahi zambrano Santos 402Lizbeth Anahi zambrano Santos 402
Lizbeth Anahi zambrano Santos 402
 
JqueryMobile
JqueryMobile JqueryMobile
JqueryMobile
 
Aprender a programar aplicaciones moviles
Aprender a programar aplicaciones movilesAprender a programar aplicaciones moviles
Aprender a programar aplicaciones moviles
 
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españaWebinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
 
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españaWebinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
 
APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS mul...
APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS mul...APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS mul...
APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS mul...
 
GUIA DE LABORATORIO DEL USO DE LOS FRAMEWORS PHONEGAP Y JQUERY MOBILE EN APL...
GUIA DE  LABORATORIO DEL USO DE LOS FRAMEWORS PHONEGAP Y JQUERY MOBILE EN APL...GUIA DE  LABORATORIO DEL USO DE LOS FRAMEWORS PHONEGAP Y JQUERY MOBILE EN APL...
GUIA DE LABORATORIO DEL USO DE LOS FRAMEWORS PHONEGAP Y JQUERY MOBILE EN APL...
 
PhoneGap Basics v1.0
PhoneGap Basics v1.0PhoneGap Basics v1.0
PhoneGap Basics v1.0
 

Plus de Cesar Eduardo Suarez T (8)

SEO Bascio
SEO BascioSEO Bascio
SEO Bascio
 
SEO Basico
SEO BasicoSEO Basico
SEO Basico
 
Git
Git Git
Git
 
Jquery 2
Jquery 2Jquery 2
Jquery 2
 
Jquery parte 1
Jquery parte 1Jquery parte 1
Jquery parte 1
 
Introduccion a Internet
Introduccion a InternetIntroduccion a Internet
Introduccion a Internet
 
CakePHP parte 2
CakePHP parte 2CakePHP parte 2
CakePHP parte 2
 
CakePHP
CakePHPCakePHP
CakePHP
 

Phonegap

  • 1. Ing. César Eduardo Suárez Trujillo S @cesarlarsson @cesarlarsson
  • 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
  • 4. ¿cómo funciona? Esta grafica ilustra fácilmente como funciona  @cesarlarsson
  • 5. Una imagen vale más que mil palabras
  • 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
  • 7. Otras alternativas www.appcelerator.com www.xamarin.com www.sencha.com
  • 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.
  • 16. 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%
  • 18. S Un solo documento html puede contener multiples paginas
  • 19. 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>
  • 20. 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> <option value="option2">Option 2</option> <option value="option2">Option 3</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">
  • 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...";