|
|
| Línea 50: |
Línea 50: |
| | :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 58: |
Línea 57: |
| | *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 class="slide">
| |
| − | === Momento de Ejecución del código Javascript ===
| |
| − | * Cuando la página se ha cargado.
| |
| − | <source lang="javascript">
| |
| − | window.onload = function(){ /*Aquí viene mi código de javascript*/ }
| |
| − | </source>
| |
| − | * ¿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 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">
| |
| − | {{Actividad|
| |
| − | 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 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">
| |
| − | ===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:
| |
| − | <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 class="slide">
| |
| − |
| |
| − | === 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()=== | + | === Necesidades en desarrollos web para móviles=== |
| − | * Utilizamos jQuery.noConflict() para evitar conflictos de nombre con otras librerías de JavaScript. | + | *Desarrollo de la aplicación para varias plataformas |
| − | <source lang="javascript">
| + | *La experiencia de usuario en la aplicación debe ser consistente entre plataformas: |
| − | <!DOCTYPE html>
| + | :Un usuario puede migrar de SO incluso utilizar varios |
| − | <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] |
| − | <head>
| + | *Varios equipos de desarrollo no siempre es la mejor opción, por las necesidades de coordinación inherentes. |
| − | <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> |
| | | | |
