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




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.