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

De WikiEducator
Saltar a: navegación, buscar
(Página creada con '{{Usuario:juanda/phonegap/nav }} {{#widget:Slides}} {{MiTitulo| Curso de jQuery-Introducción}} <div class="slides layout-regular template-default"> <div class="slide"> = Empe…')
 
(→‎Instalación de plugins html y javascript para Eclipse)
 
(42 revisiones intermedias por el mismo usuario no mostrado)
Línea 1: Línea 1:
 
{{Usuario:juanda/phonegap/nav }}
 
{{Usuario:juanda/phonegap/nav }}
−
{{#widget:Slides}} {{MiTitulo| Curso de jQuery-Introducción}}  
+
{{#widget:Slides}} {{MiTitulo| Curso de PhoneGap}}  
 
<div class="slides layout-regular template-default">
 
<div class="slides layout-regular template-default">
 
<div class="slide">
 
<div class="slide">
  
−
= Empezando con PhoneGap =
+
= Proyecto Android con Eclipse =
 
</div>
 
</div>
−
 
−
 
 
<div class="slide">
 
<div class="slide">
−
=== Arquitectura===
+
====Entorno de desarrollo en Android====
−
[[Archivo:arquitectura_phonegap.png|600px|thumb|center|Arquitectura de una aplicación en PhoneGap]]
+
*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 [http://developer.android.com/sdk/index.html descarga única]
 +
*Instalación de plugins para desarrollo web con Eclipse
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
−
=== Ha pasado antes ===
+
 
−
*Desarrollos para Linux/Unix, Windows y Mac
+
====Personalización Eclipse para Web====
−
*Aparece Java
+
*Si tuvieramos instalado el Eclipse de Ubuntu 12.04 (Indigo 3.7) podemos desinstalarlo (no es necesario):
−
*Desarrollo Web para distintos navegadores: Explorer, Safari y Firefox
+
<source lang="bash">
−
*Aparecen nuevos navegadores como Chrome y Opera provocando mayor fragmentación
+
sudo apt-get remove eclipse-platform
−
*Aparecen frameworks como jquery, YUI o Google Web Toolkit
+
</source>
−
*Los navegadores empiezan a seguir las especificaciones de la W3C y últimamente casi todos se apoyan en WebKit (el último Opera).
+
[http://www.eclipse.org/downloads/ Descargamos Eclipse Classic], la versión actual es la 4.2 (Juno).
 +
*Descomprimimos el fichero en el directorio que nos parezca (/home/usuario) es una buena opción).
 +
*Si al ejecutarlo nos pide el entorno de java, deberemos instalarlo:
 +
<source lang="bash">
 +
$ sudo apt-get install openjdk-7-jre
 +
</source>
 
</div>
 
</div>
−
 
 
<div class="slide">
 
<div class="slide">
−
 
+
*El paquete openjdk-7-jre contiene tan solo el Java Runtime Environment.
−
=== Tipos de aplicaciones móviles===
+
*Para desarrollar en Java haría falta instalar el paquete openjdk-7-jdk que contiene el Java Development Kit.
−
*Aplicaciones aisladas
+
*Creamos el enlace al nuevo Eclipse en nuestro sistema:
−
:Alarma
+
<source lang="bash">
−
:Gestor de llamadas
+
juanda@juanda-PC:/usr/bin$ cat eclipse
−
:Explorador de archivos
+
#!/bin/sh
−
:...
+
ECLIPSE=/home/juanda/eclipse/eclipse
−
*Aplicaciones basadas en web services
+
exec $ECLIPSE
−
:e-mail
+
</source>
−
:calendario
+
−
:cliente de Twitter
+
−
:...
+
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
===Tipos de desarrollo web===
+
*Una vez que podamos ejecutar Eclipse, configuramos un nuevo repositorio de descarga de software, desde el menú ''''Help->Install new software''''
−
*Aplicaciones Web accesibles via navegador
+
http://download.aptana.com/studio3/plugin/install
 +
 
 +
*Otra opción es instalar plugins específicos (es la que yo prefiero).
  
−
*Web Services
 
−
:Se usan métodos http
 
−
:No tiene control de estado
 
−
:Estructura directorios como URI
 
−
:Se envían ficheros XML, JavaScript Object Notation (JSON), o ambos.
 
−
: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===
 
−
*PhoneGap sirve para realizar aplicaciones que utilicen las características del dispositivo:<br/>
 
−
: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 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 class="slide">
+
====Instalación de plugins html y javascript para Eclipse====
−
[[Archivo:Mobile_development_requirements.png|600px|thumb|center|Requerimientos para desarrollo de programas para dispositivos móviles]]
+
*Help->Install new software
 +
*Seleccionamos en los repositiorios el de Juno: Juno - http://download.eclipse.org/releases/juno e instalamos:
 +
:Web Developer Tools (html, css y javascript)
 +
:JavaScript Development Tools
 
</div>
 
</div>
−
 
 
<div class="slide">
 
<div class="slide">
−
===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
 
−
</div>
 
  
−
<div class="slide">
+
==== Instalación plugin de jQuery para Eclipse Juno ====
−
[[Archivo:Mobile_os_browser.png|600px|thumb|center|Navegador en dispositivos móviles]]
+
*Instalamos el Marketplace de Eclipse desde Help->Install new Software
 +
*Ejecutamos Help->Eclipse Marketplace y buscamos JSDT jQuery y lo instalamos
 +
*Configuración:
 +
:Project Explorer->JavaScript Resources
 +
:Properties (botón derecho) y pulsamos en Add JavaScript Library y seleccionamos jQuery.
 
</div>
 
</div>
−
 
−
<div class="slide">
 
−
===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.
 
−
</div>
 
−
 
−
 
 
</div>
 
</div>

Última revisión de 11:10 29 may 2013


Proyecto Android con Eclipse

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
  • Instalación de plugins para desarrollo web con Eclipse

Personalización Eclipse para Web

  • Si tuvieramos instalado el Eclipse de Ubuntu 12.04 (Indigo 3.7) podemos desinstalarlo (no es necesario): 
sudo apt-get remove eclipse-platform

Descargamos Eclipse Classic, la versión actual es la 4.2 (Juno).

  • Descomprimimos el fichero en el directorio que nos parezca (/home/usuario) es una buena opción).
  • Si al ejecutarlo nos pide el entorno de java, deberemos instalarlo: 
$ sudo apt-get install openjdk-7-jre
  • El paquete openjdk-7-jre contiene tan solo el Java Runtime Environment.
  • Para desarrollar en Java haría falta instalar el paquete openjdk-7-jdk que contiene el Java Development Kit.
  • Creamos el enlace al nuevo Eclipse en nuestro sistema: 
juanda@juanda-PC:/usr/bin$ cat eclipse
#!/bin/sh
ECLIPSE=/home/juanda/eclipse/eclipse
exec $ECLIPSE
  • Una vez que podamos ejecutar Eclipse, configuramos un nuevo repositorio de descarga de software, desde el menú 'Help->Install new software'

http://download.aptana.com/studio3/plugin/install

  • Otra opción es instalar plugins específicos (es la que yo prefiero).

Instalación de plugins html y javascript para Eclipse

Web Developer Tools (html, css y javascript)
JavaScript Development Tools

Instalación plugin de jQuery para Eclipse Juno

  • Instalamos el Marketplace de Eclipse desde Help->Install new Software
  • Ejecutamos Help->Eclipse Marketplace y buscamos JSDT jQuery y lo instalamos
  • Configuración:
Project Explorer->JavaScript Resources
Properties (botón derecho) y pulsamos en Add JavaScript Library y seleccionamos jQuery.
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/phonegap/PhoneGap&oldid=13171»