Diferencia entre revisiones de «Usuario:Juanda/phonegap/PhoneGap»

De WikiEducator
Saltar a: navegación, buscar
Línea 32: Línea 32:
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
===Nuevo proyecto===
+
===Emulador Android===
 
*[http://www.youtube.com/watch?feature=player_embedded&v=k2Ly6O9LlPw Crear dispositivos AVD] [http://www.media.formandome.es/android/avd.webm Descargar video]
 
*[http://www.youtube.com/watch?feature=player_embedded&v=k2Ly6O9LlPw Crear dispositivos AVD] [http://www.media.formandome.es/android/avd.webm Descargar video]
*Abrir Eclipse File->New->Android Application Project
+
*Teclas de acceso rápido:
 
+
:Inicio: Tecla Home.
 
+
:F2: Tecla Menú.
*Web Services
+
:Esc: Tecla de volver.
:Se usan métodos http
+
:F7: Tecla On/Off
:No tiene control de estado
+
:Ctrl-F5/Ctrl-F6 óKeyPad +/-: Control de volumen de audio.
:Estructura directorios como URI
+
:Ctrl-F11 ó KeyPad 7: Cambia la orientación entre horizontal y vertical.
:Se envían ficheros XML, JavaScript Object Notation (JSON), o ambos.
+
:Alt-Intro: Visualiza el emulador a pantalla completa.
:Extensa [http://www.programmableweb.com lista de aplicaciones web] que permiten consumir Web Services
+
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
=== Tipo de aplicaciones Web con PhoneGap===
+
===Nuevo proyecto Android===
*PhoneGap sirve para realizar aplicaciones que utilicen las características del dispositivo:<br/>
+
[[Archivo:new_android_project.png|600px|thumb|center|Arquitectura de una aplicación en PhoneGap]]
:Camara, GPS, libreta de teléfonos....
+
*La mayoría de las aplicaciones web basadas en PhoneGap consumirán mediante javascript servicios web
+
*Ejemplos de aplicaciones de este tipo serían Google Maps, FourSquare...
+
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
=== Necesidades en desarrollos web para móviles===
+
 
*Desarrollo de la aplicación para varias plataformas
+
 
*La experiencia de usuario en la aplicación debe ser consistente entre plataformas:
+
:Un usuario puede migrar de SO incluso utilizar varios
+
:La experiencia de usuario podría variar entre dispositivos en función de las [http://phonegap.com/about/feature/ características y capacidades de los dispositivos]
+
*Varios equipos de desarrollo no siempre es la mejor opción, por las necesidades de coordinación inherentes.
+
 
</div>
 
</div>
  

Revisión de 12:03 22 feb 2013



Arquitectura

Arquitectura de una aplicación en PhoneGap

Arquitectura javascript

  • Una aplicación mediante PhoneGap tendrá dos partes bien definidas:
  • JavaScript para la parte de negocio: Interfaz de usuario y funcionalidad
  • Javascript para acceder y controlar el dispositivo

Entorno de desarrollo en Android

  • JDK (Android se programa en Java)
  • Eclipse
  • Android SDK
  • Android ADT Plugin para Eclipse
  • Android AVD (Android Virtual Device)
  • PhoneGap SDK para Android
  • Menos PhoneGap, el resto se pueden obtener mediante una descarga única

Emulador Android

Inicio: Tecla Home.
F2: Tecla Menú.
Esc: Tecla de volver.
F7: Tecla On/Off
Ctrl-F5/Ctrl-F6 óKeyPad +/-: Control de volumen de audio.
Ctrl-F11 ó KeyPad 7: Cambia la orientación entre horizontal y vertical.
Alt-Intro: Visualiza el emulador a pantalla completa.

Nuevo proyecto Android

Arquitectura de una aplicación en PhoneGap


Requerimientos para desarrollo de programas para dispositivos móviles

PhoneGap

  • Se basa en la parte común de todos los dispositivos móviles: el navegador
  • Los nuevos navegadores se adhieren a estándares como HTML5/CSS3.
  • HTML5 nos da mucha funcionalidad: procesos en background mediante web workers, soporte offline, base de datos...
  • CSS3 permite que nos despidamos de flash para realizar gradientes, bordes redondeados, páginas responsivas, vistas de impresión, etc.
  • Todas las plataformas móviles excepto Windows 7 Phone utilizan un navegador basado en webkit
Navegador en dispositivos móviles

Webviews

  • Piensa en una aplicación PhoneGap como un navegador embebido dentro de la aplicación y que ejecuta HMTL5/CSS.
  • Estos navegadores embebidos es lo que se conoce como webview
  • Cada una de las pantallas de nuestra aplicación será un webview.
  • Desde el webview ejecutaremos código JavaScript que comunicará con código nativo del dispositivo.
  • Todos los dispositivos permiten al código en JavaScript hacer llamadas a código nativo en Java/C++/Objective C y al revés.