Desarrollo de Aplicaciones Cross-
Platform para Dispositivos Móviles
Building Cross-Platform Mobile Applications
M.S.C. Ra...
Contenido
•  Hydration
•  Push Update
•  Update Tradicional
•  Instalar Extension PhoneGap for Brackets
•  Estructura de u...
Hydration
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 03 of 18
It’s a tool that delivers updates directl...
Push Update
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 04 of 18
Server	
  
Internet	
  
Smartphone,	
  ...
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 05 of 18
Update Tradicional
Server	
  
Internet	
  
Smartpho...
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 06 of 18
Instalar Extensión PhoneGap for Brackets [1/3]
Instalar Extensión PhoneGap for Brackets [2/3]
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 07 of 18
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 08 of 18
Instalar Extensión PhoneGap for Brackets [3/3]
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 09 of 18
Estructura de una aplicación en PhoneGap [1/5]
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 10 of 18
Estructura de una aplicación en PhoneGap [2/5]
Cons...
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 11 of 18
Estructura de una aplicación en PhoneGap [3/5]
<met...
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 12 of 18
Estructura de una aplicación en PhoneGap: devicerea...
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 13 of 18
Estructura de una aplicación en PhoneGap: phonegap....
Tip: http://emulate.phonegap.com/
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 14 of 18
Ripple Emulator
A...
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 15 of 18
Agregando jQuery Mobile a PhoneGap
1)  Agregar jQue...
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 16 of 18
PhoneGap & jQuery Mobile [1/]
Abrir la aplicación a...
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 17 of 18
PhoneGap & jQuery Mobile [1/]
1	
   2	
  
3	
  
Car...
Conclusiones	
  
•  PhoneGap permite utilizar frameworks Web de
terceros
•  Desarrollo para múltiples plataformas a través...
Upcoming SlideShare
Loading in...5
×

02 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles

418

Published on

Building cross platform mobile applications with PhoneGap
Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles

Published in: Real Estate
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
418
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

02 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles

  1. 1. Desarrollo de Aplicaciones Cross- Platform para Dispositivos Móviles Building Cross-Platform Mobile Applications M.S.C. Raquel Vásquez Ramírez M.S.C. Cristian A. Rodríguez Enríquez
  2. 2. Contenido •  Hydration •  Push Update •  Update Tradicional •  Instalar Extension PhoneGap for Brackets •  Estructura de una aplicación en PhoneGap •  Ripple Emulator •  Agregando jQuery Mobile a PhoneGap •  Conclusiones Building Cross-Plaftform Mobile Applications – PhoneGap Slide 02 of 18
  3. 3. Hydration Building Cross-Plaftform Mobile Applications – PhoneGap Slide 03 of 18 It’s a tool that delivers updates directly to your device while also significantly cutting down compile times during development. Hydration is a tool that has two main benifits for developers and testers: •  Compilation times are improved significantly. •  Updates are pushed directly to the application installed on a device.
  4. 4. Push Update Building Cross-Plaftform Mobile Applications – PhoneGap Slide 04 of 18 Server   Internet   Smartphone,  Tablet…  
  5. 5. Building Cross-Plaftform Mobile Applications – PhoneGap Slide 05 of 18 Update Tradicional Server   Internet   Smartphone,  Tablet…  
  6. 6. Building Cross-Plaftform Mobile Applications – PhoneGap Slide 06 of 18 Instalar Extensión PhoneGap for Brackets [1/3]
  7. 7. Instalar Extensión PhoneGap for Brackets [2/3] Building Cross-Plaftform Mobile Applications – PhoneGap Slide 07 of 18
  8. 8. Building Cross-Plaftform Mobile Applications – PhoneGap Slide 08 of 18 Instalar Extensión PhoneGap for Brackets [3/3]
  9. 9. Building Cross-Plaftform Mobile Applications – PhoneGap Slide 09 of 18 Estructura de una aplicación en PhoneGap [1/5]
  10. 10. Building Cross-Plaftform Mobile Applications – PhoneGap Slide 10 of 18 Estructura de una aplicación en PhoneGap [2/5] Considerando que se está utilizando la “sample starter application” se requiere eliminar el código innecesario dentro de las etiquetas <body></body>. Únicamente se mantienen los <script> y se agrega una <div> en el <body> que contendrá el código de la aplicación. <div id=”"></div>
  11. 11. Building Cross-Plaftform Mobile Applications – PhoneGap Slide 11 of 18 Estructura de una aplicación en PhoneGap [3/5] <meta name="viewport" content="width=device-width, initial-scale=1"> Adicionalmente se modifica el viewport a los siguientes valores
  12. 12. Building Cross-Plaftform Mobile Applications – PhoneGap Slide 12 of 18 Estructura de una aplicación en PhoneGap: deviceready [4/5] This is an event that fires when PhoneGap is fully loaded. Supported Platforms •  Android •  BlackBerry WebWorks (OS 5.0 and higher) •  iPhone document.addEventListener("deviceready”,  yourCallbackFuncBon,  false);  
  13. 13. Building Cross-Plaftform Mobile Applications – PhoneGap Slide 13 of 18 Estructura de una aplicación en PhoneGap: phonegap.js [5/5] The phonegap.js file is automatically injected by PhoneGap Build at build time. No es necesario contar con el archivo durante el desarrollo con PhoneGap Build.
  14. 14. Tip: http://emulate.phonegap.com/ Building Cross-Plaftform Mobile Applications – PhoneGap Slide 14 of 18 Ripple Emulator Apache Ripple™ is a web based mobile environment simulator designed to enable rapid development of mobile web applications for various web application frameworks, such as Apache Cordova™ and BlackBerry® WebWorks™. Para emular el API de PhoneGap para propósitos de testing en un browser se requiere de Google Chrome con la extensión de Ripple.
  15. 15. Building Cross-Plaftform Mobile Applications – PhoneGap Slide 15 of 18 Agregando jQuery Mobile a PhoneGap 1)  Agregar jQuery Mobile al proyecto de PhoneGap 2)  Setup de jQuery Mobile en la aplicación 3)  Integrar el HTML y JS relacionado con jQuery Mobile
  16. 16. Building Cross-Plaftform Mobile Applications – PhoneGap Slide 16 of 18 PhoneGap & jQuery Mobile [1/] Abrir la aplicación a actualizar o agregar una nueva en PhoneGap Build
  17. 17. Building Cross-Plaftform Mobile Applications – PhoneGap Slide 17 of 18 PhoneGap & jQuery Mobile [1/] 1   2   3   Cargar el archivo zip con el proyecto de PhoneGap 4  
  18. 18. Conclusiones   •  PhoneGap permite utilizar frameworks Web de terceros •  Desarrollo para múltiples plataformas a través de compilación en la nube •  Hydra permite actualizar sin reinstalar utilizando push Building Cross-Plaftform Mobile Applications – PhoneGap Slide 18 of 18
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×