Descargar para leer sin conexión
![Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 06 of 18
Instalar Extensión PhoneGap for Brackets [1/3]](https://image.slidesharecdn.com/02buildingcross-platformmobileapplications-131005111344-phpapp01/85/02-Building-cross-platform-mobile-applications-with-PhoneGap-Desarrollo-de-Aplicaciones-Cross-Platform-para-Dispositivos-Moviles-6-320.jpg)
![Instalar Extensión PhoneGap for Brackets [2/3]
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 07 of 18](https://image.slidesharecdn.com/02buildingcross-platformmobileapplications-131005111344-phpapp01/85/02-Building-cross-platform-mobile-applications-with-PhoneGap-Desarrollo-de-Aplicaciones-Cross-Platform-para-Dispositivos-Moviles-7-320.jpg)
![Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 08 of 18
Instalar Extensión PhoneGap for Brackets [3/3]](https://image.slidesharecdn.com/02buildingcross-platformmobileapplications-131005111344-phpapp01/85/02-Building-cross-platform-mobile-applications-with-PhoneGap-Desarrollo-de-Aplicaciones-Cross-Platform-para-Dispositivos-Moviles-8-320.jpg)
![Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 09 of 18
Estructura de una aplicación en PhoneGap [1/5]](https://image.slidesharecdn.com/02buildingcross-platformmobileapplications-131005111344-phpapp01/85/02-Building-cross-platform-mobile-applications-with-PhoneGap-Desarrollo-de-Aplicaciones-Cross-Platform-para-Dispositivos-Moviles-9-320.jpg)
![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>](https://image.slidesharecdn.com/02buildingcross-platformmobileapplications-131005111344-phpapp01/85/02-Building-cross-platform-mobile-applications-with-PhoneGap-Desarrollo-de-Aplicaciones-Cross-Platform-para-Dispositivos-Moviles-10-320.jpg)
![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](https://image.slidesharecdn.com/02buildingcross-platformmobileapplications-131005111344-phpapp01/85/02-Building-cross-platform-mobile-applications-with-PhoneGap-Desarrollo-de-Aplicaciones-Cross-Platform-para-Dispositivos-Moviles-11-320.jpg)
![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);](https://image.slidesharecdn.com/02buildingcross-platformmobileapplications-131005111344-phpapp01/85/02-Building-cross-platform-mobile-applications-with-PhoneGap-Desarrollo-de-Aplicaciones-Cross-Platform-para-Dispositivos-Moviles-12-320.jpg)
![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.](https://image.slidesharecdn.com/02buildingcross-platformmobileapplications-131005111344-phpapp01/85/02-Building-cross-platform-mobile-applications-with-PhoneGap-Desarrollo-de-Aplicaciones-Cross-Platform-para-Dispositivos-Moviles-13-320.jpg)
![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](https://image.slidesharecdn.com/02buildingcross-platformmobileapplications-131005111344-phpapp01/85/02-Building-cross-platform-mobile-applications-with-PhoneGap-Desarrollo-de-Aplicaciones-Cross-Platform-para-Dispositivos-Moviles-16-320.jpg)
![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](https://image.slidesharecdn.com/02buildingcross-platformmobileapplications-131005111344-phpapp01/85/02-Building-cross-platform-mobile-applications-with-PhoneGap-Desarrollo-de-Aplicaciones-Cross-Platform-para-Dispositivos-Moviles-17-320.jpg)
Más contenido relacionado
Similar a 02 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles
02 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles
- 1. Desarrollo de AplicacionesCross- 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. Contenido • Hydration • PushUpdate • 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. Hydration Building Cross-Plaftform MobileApplications – 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. Push Update Building Cross-PlaftformMobile Applications – PhoneGap Slide 04 of 18 Server Internet Smartphone, Tablet…
- 5. Building Cross-Plaftform MobileApplications – PhoneGap Slide 05 of 18 Update Tradicional Server Internet Smartphone, Tablet…
- 6. Building Cross-Plaftform MobileApplications – PhoneGap Slide 06 of 18 Instalar Extensión PhoneGap for Brackets [1/3]
- 7. Instalar Extensión PhoneGapfor Brackets [2/3] Building Cross-Plaftform Mobile Applications – PhoneGap Slide 07 of 18
- 8. Building Cross-Plaftform MobileApplications – PhoneGap Slide 08 of 18 Instalar Extensión PhoneGap for Brackets [3/3]
- 9. Building Cross-Plaftform MobileApplications – PhoneGap Slide 09 of 18 Estructura de una aplicación en PhoneGap [1/5]
- 10. Building Cross-Plaftform MobileApplications – 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. Building Cross-Plaftform MobileApplications – 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. Building Cross-Plaftform MobileApplications – 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. Building Cross-Plaftform MobileApplications – 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. Tip: http://emulate.phonegap.com/ Building Cross-PlaftformMobile 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. Building Cross-Plaftform MobileApplications – 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. Building Cross-Plaftform MobileApplications – PhoneGap Slide 16 of 18 PhoneGap & jQuery Mobile [1/] Abrir la aplicación a actualizar o agregar una nueva en PhoneGap Build
- 17. Building Cross-Plaftform MobileApplications – PhoneGap Slide 17 of 18 PhoneGap & jQuery Mobile [1/] 1 2 3 Cargar el archivo zip con el proyecto de PhoneGap 4
- 18. Conclusiones • PhoneGappermite 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