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

De WikiEducator
Saltar a: navegación, buscar
 
(18 revisiones intermedias por el mismo usuario no mostrado)
Línea 1: Línea 1:
−
{{Usuario:juanda/PhoneGap/nav }}
+
{{TEP}}
−
{{#widget:Slides}} {{MiTitulo| Curso de jQuery-Introducción}}  
+
{{Usuario:juanda/phonegap/nav }}
 +
{{#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">
Línea 6: Línea 7:
 
= Introducción =
 
= Introducción =
 
</div>
 
</div>
 +
  
 
<div class="slide">
 
<div class="slide">
−
=== Requerimientos previos ===
+
=== Situación actual===
−
*html
+
*Hay muchas plataformas distintas para smartphones en el mercado
−
*Conocimiento básico de javascript
+
*Android, iPhone, BlackBerry, Nokia, Windows7 Phone, WebOS
−
*Conocimiento básico de document object model (DOM)
+
*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
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
−
=== ¿Qué es jQuery? ===
+
=== Ha pasado antes ===
−
*jQuery es una librería de funciones JavaScript:
+
*Desarrollos para Linux/Unix, Windows y Mac
−
*'''“Write less, do more”''' (escribe menos, haz más)
+
*Aparece Java
−
*Funcionalidad:
+
*Desarrollo Web para distintos navegadores: Explorer, Safari y Firefox
−
:Selección y manipulación de elementos HTML y CSS
+
*Aparecen nuevos navegadores como Chrome y Opera provocando mayor fragmentación
−
:Funciones de eventos en HTML
+
*Aparecen frameworks como jquery, YUI o Google Web Toolkit
−
:Efectos y animaciones de JavaScript
+
*Los navegadores empiezan a seguir las especificaciones de la W3C y últimamente casi todos se apoyan en WebKit (el último Opera).
−
:AJAX
+
−
:Compatibilidad con todos los navegadores
+
−
:…
+
−
: Versión actual de jQuery: '''1.8.2'''
+
−
:[http://jquery.org/license/ Licencia MIT]
+
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
  
−
=== Versiones de jQuery ===
+
=== Tipos de aplicaciones móviles===
−
*Versión de producción:
+
*Aplicaciones aisladas
−
:Minified y comprimida
+
:Alarma
−
:Aproximadamente 30KB
+
:Gestor de llamadas
−
*Versión de desarrollo:
+
:Explorador de archivos
−
: Sin comprimir
+
:...
−
: Aproximadamente 8 veces más pesada, aproximadamente 240KB
+
*Aplicaciones basadas en web services
−
 
+
:e-mail
−
*Se puede descargar de [http://www.jquery.com/download la web de jQuery]
+
:calendario
 +
:cliente de Twitter
 +
:...
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
*Versión de producción:
+
===Tipos de desarrollo web===
−
<source lang="javascript">
+
*Aplicaciones Web accesibles via navegador
−
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
+
−
</source>
+
−
*Versión de desarrollo
+
−
<source lang="javascript">
+
−
<script type="text/javascript" src="jquery-1.8.2.js"></script>
+
−
</source>
+
−
</div>
+
  
−
<div class="slide">
+
*Web Services
−
 
+
:Se usan métodos http
−
=== Uso de un CDN ===
+
:No tiene control de estado
−
 
+
:Estructura directorios como URI
−
*También a través de un '''CDN''' (Content Delivery Network).
+
:Se envían ficheros XML, JavaScript Object Notation (JSON), o ambos.
−
*¿Qué es un CDN? Grupo de servidores repartidos por todo el mundo en puntos estratégicos y pensados para la distribución de ficheros):
+
:Extensa [http://www.programmableweb.com lista de aplicaciones web] que permiten consumir Web Services
−
* CDN de Google:
+
−
<source lang="javascript">
+
−
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+
−
</source>
+
−
*CDN de Microsoft:
+
−
<source lang="javascript">
+
−
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
+
−
</source>
+
−
*CDN del propio jQuery:
+
−
: Minified:
+
−
<source lang="javascript">
+
−
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
+
−
</source>
+
−
:Full:
+
−
<source lang="javascript">
+
−
<script type="http://code.jquery.com/jquery-1.8.2.js"></script>
+
−
</source>
+
 
</div>
 
</div>
−
 
 
<div class="slide">
 
<div class="slide">
−
=== Momento de Ejecución del código Javascript ===
+
=== Tipo de aplicaciones Web con PhoneGap===
−
* Cuando la página se ha cargado.
+
*PhoneGap sirve para realizar aplicaciones que utilicen las características del dispositivo:<br/>
−
<source lang="javascript">
+
:Camara, GPS, libreta de teléfonos....
−
window.onload = function(){ /*Aquí viene mi código de javascript*/ }
+
*La mayoría de las aplicaciones web basadas en PhoneGap consumirán mediante javascript servicios web
−
</source>
+
*Ejemplos de aplicaciones de este tipo serían Google Maps, FourSquare...
−
* ¿Por qué? No se puede ejecutar hasta que el DOM se haya cargado completamente
+
−
* Desventaja: Habrá que esperar la carga completa de imágenes y anuncios para su ejecución.
+
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
{{Actividad|
+
=== Necesidades en desarrollos web para móviles===
−
Title=Hola Mundo mediante javascript|
+
*Desarrollo de la aplicación para varias plataformas
−
* Crea una página web con un enlace que muestre un alert con el texto "Hola Mundo" y que "anule" el enlace.
+
*La experiencia de usuario en la aplicación debe ser consistente entre plataformas:
−
<source lang="html4strict">
+
:Un usuario puede migrar de SO incluso utilizar varios
−
<!DOCTYPE html>
+
: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]
−
<html>
+
*Varios equipos de desarrollo no siempre es la mejor opción, por las necesidades de coordinación inherentes.
−
<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>
−
<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»