|
|
| Línea 33: |
Línea 33: |
| | :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"> |
Revisión de 10:51 22 feb 2013
PhoneGap
Tutorial para desarrollar aplicaciones móviles multiplataforma
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
- 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
- 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.
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
});
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();
});<!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
$(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>
