Diferencia entre revisiones de «Usuario:Juanda/phonegap/Introducción»

De WikiEducator
Saltar a: navegación, buscar
(→‎Introducción)
 
(15 revisiones intermedias por el mismo usuario no mostrado)
Línea 1: Línea 1:
 +
{{TEP}}
 +
{{Usuario:juanda/phonegap/nav }}
 +
{{#widget:Slides}} {{MiTitulo| Curso de PhoneGap}}
 +
<div class="slides layout-regular template-default">
 +
<div class="slide">
 +
 
= Introducción =
 
= Introducción =
 +
</div>
  
  
Línea 16: Línea 23:
 
*Desarrollo Web para distintos navegadores: Explorer, Safari y Firefox
 
*Desarrollo Web para distintos navegadores: Explorer, Safari y Firefox
 
*Aparecen nuevos navegadores como Chrome y Opera provocando mayor fragmentación
 
*Aparecen nuevos navegadores como Chrome y Opera provocando mayor fragmentación
−
*Los navegadores empiezan a seguir las especificaciones de la W3C
+
*Aparecen frameworks como jquery, YUI o Google Web Toolkit
−
*Últimamente casi todos se apoyan en WebKit (el último Opera).
+
*Los navegadores empiezan a seguir las especificaciones de la W3C y últimamente casi todos se apoyan en WebKit (el último Opera).
 
</div>
 
</div>
  
Línea 27: Línea 34:
 
:Gestor de llamadas
 
:Gestor de llamadas
 
:Explorador de archivos
 
:Explorador de archivos
−
....
+
:...
 
*Aplicaciones basadas en web services
 
*Aplicaciones basadas en web services
 
:e-mail
 
:e-mail
 
:calendario
 
:calendario
 
:cliente de Twitter
 
:cliente de Twitter
−
....
+
:...
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
Línea 44: Línea 51:
 
:Se envían ficheros XML, JavaScript Object Notation (JSON), o ambos.
 
: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
 
:Extensa [http://www.programmableweb.com lista de aplicaciones web] que permiten consumir Web Services
−
 
+
</div>
 
<div class="slide">
 
<div class="slide">
−
 
 
=== Tipo de aplicaciones Web con PhoneGap===
 
=== Tipo de aplicaciones Web con PhoneGap===
 
*PhoneGap sirve para realizar aplicaciones que utilicen las características del dispositivo:<br/>
 
*PhoneGap sirve para realizar aplicaciones que utilicen las características del dispositivo:<br/>
Línea 52: Línea 58:
 
*La mayoría de las aplicaciones web basadas en PhoneGap consumirán mediante javascript servicios web
 
*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...
 
*Ejemplos de aplicaciones de este tipo serían Google Maps, FourSquare...
−
 
 
</div>
 
</div>
−
 
 
<div class="slide">
 
<div class="slide">
−
=== Momento de Ejecución del código Javascript ===
+
=== Necesidades en desarrollos web para móviles===
−
* Cuando la página se ha cargado.
+
*Desarrollo de la aplicación para varias plataformas
−
<source lang="javascript">
+
*La experiencia de usuario en la aplicación debe ser consistente entre plataformas:
−
window.onload = function(){ /*Aquí viene mi código de javascript*/ }
+
:Un usuario puede migrar de SO incluso utilizar varios
−
</source>
+
: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]
−
* ¿Por qué? No se puede ejecutar hasta que el DOM se haya cargado completamente
+
*Varios equipos de desarrollo no siempre es la mejor opción, por las necesidades de coordinación inherentes.
−
* Desventaja: Habrá que esperar la carga completa de imágenes y anuncios para su ejecución.
+
 
</div>
 
</div>
−
<div class="slide">
 
−
{{Actividad|
 
−
Title=Hola Mundo mediante javascript|
 
−
* Crea una página web con un enlace que muestre un alert con el texto "Hola Mundo" y que "anule" el enlace.
 
−
<source lang="html4strict">
 
−
<!DOCTYPE html>
 
−
<html>
 
−
<head>
 
−
  <meta charset="utf-8">
 
−
  <title>Hola Mundo en javaScript</title>
 
−
  <script type="text/javascript">
 
−
  window.onload = function() {
 
−
  document.getElementById("holamundo").onclick = holaMundo;
 
−
  }
 
−
  function holaMundo()
 
−
  {
 
−
  alert ("Hola Mundo");
 
−
  return false;
 
−
  }
 
−
  </script>
 
−
</head>
 
−
<body>
 
−
  <a id="holamundo" href="http://jquery.com/">jQuery</a>
 
−
</body>
 
−
</html>
 
−
</source>
 
−
}}
 
−
</div>
 
−
<div class="slide">
 
  
−
=== Momento de Ejecución del código jQuery ===
 
−
* Cuando el documento (DOM) esté preparado para ser manipulado.
 
−
* Antes de que se carguen imágenes o anuncios.
 
−
* ¡Ojo al efectuar acciones sobre imágenes si no están todavía cargadas!
 
−
 
−
<source lang="javascript">
 
−
 
−
$(document).ready(function(){
 
−
  // Aquí viene mi código jQuery
 
−
});
 
−
</source>
 
−
</div>
 
 
<div class="slide">
 
<div class="slide">
−
{{Actividad|
+
[[Archivo:Mobile_development_requirements.png|600px|thumb|center|Requerimientos para desarrollo de programas para dispositivos móviles]]
−
Title=Hola Mundo mediante jQuery|
+
−
* Descarga una versión de jQuery e inserta las siguientes instrucciones de jQuery:
+
−
 
+
−
<source lang="html4strict">
+
−
$("a").click(function(event) {
+
−
alert("Hola Mundo");
+
−
event.preventDefault();
+
−
});
+
−
</source>
+
−
*Resultado actividad:
+
−
<source lang="html4strict">
+
−
<!DOCTYPE html>
+
−
<html lang="en">
+
−
<head>
+
−
<meta charset="utf-8">
+
−
<title>Hola Mundo con jquery</title>
+
−
<script src="jquery-1.8.2.min.js"></script>
+
−
<script>
+
−
$(document).ready(function() {
+
−
$("a").click(function(event) {
+
−
alert("Hola Mundo");
+
−
event.preventDefault();
+
−
});
+
−
});
+
−
</script>
+
−
</head>
+
−
<body>
+
−
<a href="http://jquery.com/">jQuery</a>
+
−
</body>
+
−
</html>
+
−
</source>
+
−
}}
+
 
</div>
 
</div>
−
<div class="slide">
 
  
−
=== 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.
 
−
</div>
 
 
<div class="slide">
 
<div class="slide">
−
===Sintaxis===
+
===PhoneGap===
−
'''$(selector).action()'''
+
*Se basa en la parte común de todos los dispositivos móviles: el navegador
−
*'''$''': Simbolo para definir JQuery (podríamos usar también JQuery)
+
*Los nuevos navegadores se adhieren a estándares como HTML5/CSS3.
−
:'''selector''': Consulta sobre los elementos HTML (sintaxis muy similar a CSS)
+
*HTML5 nos da mucha funcionalidad: procesos en background mediante web workers, soporte offline, base de datos...
−
:'''action''': Acción que se ejecuta sobre los elementos
+
*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
−
*Ejemplos:
+
−
<source lang="javascript">
+
−
$(this).hide() //oculta el elemento actual
+
−
$("p").hide() //oculta todos los elementos de tipo párrafo
+
−
$("p.test").hide() //oculta todos los párrafos con class=test
+
−
$("#test").hide() //oculta todos los elementos con id=test
+
−
</source>
+
−
 
+
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
−
 
+
[[Archivo:Mobile_os_browser.png|600px|thumb|center|Navegador en dispositivos móviles]]
−
=== Ejemplos de uso del selector de jQuery  ===
+
−
<source lang="javascript">
+
−
$("p")  //se seleccionan todos los elementos de tipo párrafo
+
−
$("p.intro")  //todos los párrafos con class=intro
+
−
$("p#demo")  //todos los párrafos con id=demo
+
−
$("[href]") //todos los elementos con atributo href
+
−
$("[href='#']") //todos los elementos con atributo href="#"
+
−
$("[href!='#']")  //todos los elementos con atributo href diferente de "#"
+
−
$("[href$='.jpg']") //todos los elmentos con atributo href que acabe en .jpg
+
−
$("p").css("background-color","yellow"); //modificamos el background-color de todos los párrafos a amarillo
+
−
$("p#intro:first") //El primer párrafo con id="intro"
+
−
$("ul li:first") El primer elemento <li> de cada <ul>
+
−
$("div#intro .head") //Todos los elementos con class="head" dentro de un <div> con id="intro"
+
−
</source>
+
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
−
===jQuery.noConflict()===
+
===Webviews===
−
* Utilizamos jQuery.noConflict() para evitar conflictos de nombre con otras librerías de JavaScript.
+
*Piensa en una aplicación PhoneGap como un navegador embebido (sin marco, "chromeless browser") dentro de la aplicación y que ejecuta HMTL5/CSS.  
−
<source lang="javascript">
+
*Estos navegadores embebidos es lo que se conoce como '''webview'''
−
<!DOCTYPE html>
+
*Cada una de las pantallas de nuestra aplicación será un webview.
−
<html>
+
*Desde el webview ejecutaremos código JavaScript que comunicará con código nativo del dispositivo.
−
<head>
+
*Todos los dispositivos permiten al código en JavaScript hacer llamadas a código nativo en Java/C++/Objective C y al revés.
−
<script src="jquery.js"></script>
+
−
<script>
+
−
var jq=jQuery.noConflict();
+
−
jq(document).ready(function(){
+
−
  jq("button").click(function(){
+
−
    jq("p").hide();
+
−
  });
+
−
});
+
−
</script>
+
−
</head>
+
−
<body>
+
−
<p>Esto es un párrafo.</p>
+
−
<button>Pulsa aquí</button>
+
−
</body>
+
−
</html>
+
−
</source>
+
−
 
+
 
</div>
 
</div>
−
 
  
  
 
</div>
 
</div>

Última revisión de 00:58 15 may 2013

Road Works.svg Trabajo en proceso, espera cambios frecuentes. Tu ayuda y retroalimentación son bienvenidos.
Ver página de charlas. 		Road Works.svg



Introducción


Situación actual

  • Hay muchas plataformas distintas para smartphones en el mercado
  • Android, iPhone, BlackBerry, Nokia, Windows7 Phone, WebOS
  • Han aparecido otras nuevas como Bada y Meego
  • La fragmentación es fuerte entre los distintos fabricantes ya que no se sigue ningún tipo de especificación o estándar común

Ha pasado antes

  • Desarrollos para Linux/Unix, Windows y Mac
  • Aparece Java
  • Desarrollo Web para distintos navegadores: Explorer, Safari y Firefox
  • Aparecen nuevos navegadores como Chrome y Opera provocando mayor fragmentación
  • Aparecen frameworks como jquery, YUI o Google Web Toolkit
  • Los navegadores empiezan a seguir las especificaciones de la W3C y últimamente casi todos se apoyan en WebKit (el último Opera).

Tipos de aplicaciones móviles

  • Aplicaciones aisladas
Alarma
Gestor de llamadas
Explorador de archivos
...
  • Aplicaciones basadas en web services
e-mail
calendario
cliente de Twitter
...

Tipos de desarrollo web

  • Aplicaciones Web accesibles via navegador
  • 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 lista de aplicaciones web que permiten consumir Web Services

Tipo de aplicaciones Web con PhoneGap

  • PhoneGap sirve para realizar aplicaciones que utilicen las características del dispositivo:
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...

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 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.
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 (sin marco, "chromeless browser") 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.


Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/phonegap/Introducción&oldid=12638»