Desarrollo de Aplicaciones Cross-Platform
para Dispositivos Móviles
Building Cross-Platform Mobile Applications
M.S.C. Raq...
Contenido	
  
•  PhoneGap
•  PhoneGap Plans
•  ¿Aplicaciones Nativas?
•  PhoneGap Build
•  Registro Gratuito
•  First Mobi...
PhoneGap
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 03 of 15
Es un framework para el desarrollo de apli...
PhoneGap Plans
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 04 of 15
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 05 of 15
¿Aplicaciones Nativas?
NO, las aplicaciones resulta...
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 06 of 15
PhoneGap Build
Registro [1/5]
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 07 of 15
The first step is to register an acc...
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 08 of 15
Registro [2/5]
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 09 of 15
Registro [3/5]
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 10 of 15
Registro [4/5]
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 11 of 15
Registro [5/5]
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 12 of 15
First Mobile App with PhoneGap Build
1.  Setup del ...
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 13 of 15
First Mobile App with PhoneGap Build [1/5]
1)	
  Us...
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 14 of 15
First Mobile App with PhoneGap Build [2/5]
3)	
  Al...
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 14 of 15
First Mobile App with PhoneGap Build [3/5]
5)	
  Un...
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 14 of 15
First Mobile App with PhoneGap Build [4/5]
6)	
  La...
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 14 of 15
First Mobile App with PhoneGap Build [5/5]
7)	
  De...
Conclusiones	
  
•  PhoneGap permite crear aplicaciones Híbridas
•  Desarrollo para múltiples plataformas
•  Para aplicaci...
Recursos	
  
•  Brackets Code Editor
– http://download.brackets.io/
•  PhoneGap for Brackets
– https://github.com/adobe/br...
Upcoming SlideShare
Loading in …5
×

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

1,002 views

Published on

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

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

  • Be the first to like this

No Downloads
Views
Total views
1,002
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

01 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   •  PhoneGap •  PhoneGap Plans •  ¿Aplicaciones Nativas? •  PhoneGap Build •  Registro Gratuito •  First Mobile App with PhoneGap Build •  Conclusiones Building Cross-Plaftform Mobile Applications – PhoneGap Slide 02 of 15
  3. 3. PhoneGap Building Cross-Plaftform Mobile Applications – PhoneGap Slide 03 of 15 Es un framework para el desarrollo de aplicaciones móviles producido por Nitobi, y comprado posteriormente por Adobe Systems. PhoneGap permite a los programadores desarrollar aplicaciones para dispositivos móviles utilizando JavaScript, HTML5 y CSS3.
  4. 4. PhoneGap Plans Building Cross-Plaftform Mobile Applications – PhoneGap Slide 04 of 15
  5. 5. Building Cross-Plaftform Mobile Applications – PhoneGap Slide 05 of 15 ¿Aplicaciones Nativas? NO, las aplicaciones resultantes son híbridas. Debido a: •  El renderizado de la UI es realizado mediante un “web browser engine” •  Pueden acceder a ciertas características del API nativa •  Son empaquetadas como aplicaciones nativas
  6. 6. Building Cross-Plaftform Mobile Applications – PhoneGap Slide 06 of 15 PhoneGap Build
  7. 7. Registro [1/5] Building Cross-Plaftform Mobile Applications – PhoneGap Slide 07 of 15 The first step is to register an account and log in. https://build.phonegap.com/plans/free 1  private  app   unlimited  open-­‐source  apps   unlimited  collaborators
  8. 8. Building Cross-Plaftform Mobile Applications – PhoneGap Slide 08 of 15 Registro [2/5]
  9. 9. Building Cross-Plaftform Mobile Applications – PhoneGap Slide 09 of 15 Registro [3/5]
  10. 10. Building Cross-Plaftform Mobile Applications – PhoneGap Slide 10 of 15 Registro [4/5]
  11. 11. Building Cross-Plaftform Mobile Applications – PhoneGap Slide 11 of 15 Registro [5/5]
  12. 12. Building Cross-Plaftform Mobile Applications – PhoneGap Slide 12 of 15 First Mobile App with PhoneGap Build 1.  Setup del ambiente Android (O el sistema operativo destino) 2.  Crear una “PhoneGap Build Account” 3.  Setup Code Editor (Adobe Dreamweaver CS6, Brackets…) 4.  Obtener el “Starter Template” h5ps://github.com/phonegap/phonegap-­‐start.   5.  Usar PhoneGap Build para generar la aplicación
  13. 13. Building Cross-Plaftform Mobile Applications – PhoneGap Slide 13 of 15 First Mobile App with PhoneGap Build [1/5] 1)  Usar  un  repositorio  de  Github  o  Subir  un  archivo  ZIP   2)  UClizando  la  opción  de  “Upload  a  .zip  file”  esperar  a  que  cargue  el  proyecto  
  14. 14. Building Cross-Plaftform Mobile Applications – PhoneGap Slide 14 of 15 First Mobile App with PhoneGap Build [2/5] 3)  Al  terminar  la  carga  del  proyecto,  indicará  los  parámetros  de  configuración  del   proyecto   4)  Dar  clic  en  “Ready  to  build”  
  15. 15. Building Cross-Plaftform Mobile Applications – PhoneGap Slide 14 of 15 First Mobile App with PhoneGap Build [3/5] 5)  Una  vez  generada  la  aplicación  se  muestra  un  código  QR  para  descargar  y  probar  la   aplicación  en  un  disposiCvo  
  16. 16. Building Cross-Plaftform Mobile Applications – PhoneGap Slide 14 of 15 First Mobile App with PhoneGap Build [4/5] 6)  Las  plataformas  listas  se  mostrarán  en  color  “Azul  Turquesa”,  las  pendientes  en   color  “Gris”  y  las  que  no  se  pueden  generar  en  “rojo”     En  este  caso  debido  a  que  no  se  cuenta  con  una  key  de  desarrollo  de  iOS  no  es   posible  generar  la  aplicación  
  17. 17. Building Cross-Plaftform Mobile Applications – PhoneGap Slide 14 of 15 First Mobile App with PhoneGap Build [5/5] 7)  Detalle  de  los  archivos  instalables  disponibles  para  descarga  
  18. 18. Conclusiones   •  PhoneGap permite crear aplicaciones Híbridas •  Desarrollo para múltiples plataformas •  Para aplicaciones comerciales (privadas) tiene costo Building Cross-Plaftform Mobile Applications – PhoneGap Slide 15 of 15
  19. 19. Recursos   •  Brackets Code Editor – http://download.brackets.io/ •  PhoneGap for Brackets – https://github.com/adobe/brackets-phonegap – https://github.com/adobe/brackets/wiki/Brackets- Extensions (How to Install) Building Cross-Plaftform Mobile Applications – PhoneGap Slide 16 of 16

×