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

De WikiEducator
Saltar a: navegación, buscar
Línea 1: Línea 1:
−
{{Usuario:juanda/phonegap/nav }}
 
−
{{#widget:Slides}} {{MiTitulo| Curso de jQuery-Introducción}}
 
−
<div class="slides layout-regular template-default">
 
−
<div class="slide">
 
−
 
 
= 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
+
*Los navegadores empiezan a seguir las especificaciones de la W3C
−
:Efectos y animaciones de JavaScript
+
*Ú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>
+
*Web Services
−
*Versión de desarrollo
+
:Se usan métodos http
−
<source lang="javascript">
+
:No tiene control de estado
−
<script type="text/javascript" src="jquery-1.8.2.js"></script>
+
:Estructura directorios como URI
−
</source>
+
:Se envían ficheros XML, JavaScript Object Notation (JSON), o ambos.
−
</div>
+
:Extensa [http://www.programmableweb.com lista de aplicaciones web] que permiten consumir Web Services
  
 
<div class="slide">
 
<div class="slide">
  
−
=== Uso de un CDN ===
+
=== 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...
  
−
*También a través de un '''CDN''' (Content Delivery Network).
 
−
*¿Qué es un CDN? Grupo de servidores repartidos por todo el mundo en puntos estratégicos y pensados para la distribución de ficheros):
 
−
* 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>
  

Revisión de 09:47 22 feb 2013

Introducción

</div>

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
  • Los navegadores empiezan a seguir las especificaciones de la W3C
  • Ú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...

Momento de Ejecución del código Javascript

  • Cuando la página se ha cargado. 
window.onload = function(){ /*Aquí viene mi código de javascript*/ }
  • ¿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.


Icon activity.jpg

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. 
 <!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>




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! 
$(document).ready(function(){
   // Aquí viene mi código jQuery
});


Icon activity.jpg

Hola Mundo mediante jQuery

  • Descarga una versión de jQuery e inserta las siguientes instrucciones de jQuery: 
		$("a").click(function(event) {
			alert("Hola Mundo");
			event.preventDefault();
		});
  • Resultado actividad: 
<!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>




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.

Sintaxis

$(selector).action()

  • $: Simbolo para definir JQuery (podríamos usar también JQuery)
selector: Consulta sobre los elementos HTML (sintaxis muy similar a CSS)
action: Acción que se ejecuta sobre los elementos
  • Ejemplos: 
$(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

Ejemplos de uso del selector de jQuery

$("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"

jQuery.noConflict()

  • Utilizamos jQuery.noConflict() para evitar conflictos de nombre con otras librerías de JavaScript. 
<!DOCTYPE html>
<html>
<head>
<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>


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