Curso de PhoneGap
De WikiEducator
Saltar a: navegación, buscar
|
Trabajo en proceso, espera cambios frecuentes. Tu ayuda y retroalimentación son bienvenidos. Ver página de charlas. |
|
PhoneGap
Tutorial para desarrollar aplicaciones móviles multiplataforma
Contenido
jQuery Mobile
Introducción
¿Qué es jQuery Mobile
- Framework para crear intefaces de usuario basadas en HTML5
- -Nos abstrae de las diferencias para el desarrollo entre los distintos navegadores.
- -Write less, do more (jQuery)
- -Diseño atractivo "out of the box": hacen diseñador al programador.
- Construido a partir de la librería jQuery y de jQueryUI
- Orientado especificamente para móviles
- Algunos ejemplos:
- Para ver las páginas correctamente:
- Instala la extensión para Chrome Google Chrome to Phone para ver las páginas en el móvil
- Cambia el user-agent del navegador (lo más fácil es mediante las Chrome Developer Tools).
Diseños responsivo
- Uso de CSS media queries: hojas de estilo css especificas para dispositivos según anchura de pantalla, resolución o características.
- Grid fluido, especificando sus elementos mediante unidades relativas.
- Imágenes y media también en unidades relativas.
Diseño responsable
- Se utiliza el criterio "mobile first":
- Diseños sencillos
- Diseños más complejos mediante media queries y siempre con un min-width
- Se evita llevar un diseño pesado y aligerarlo para conseguir un time load aceptable para la red 3G.
- Imágenes específicas para el tamaño de pantalla de los móviles, tanto por ancho de banda como por tamaño de pantalla, ver ejemplo
- Uso de versiones minified y gzip
Ejemplo CSS Mobile First
- Las media queries en ems en vez de pixeles para asegurarnos que el layout se adaptará al cambio del tamaño de las fuentes, además de al ancho de pantalla.
- Para calcular la anchura en ems, se divide en ancho de nuestro objetivo entre 16px (tamaño de letra por defecto)
- Aplicaciones Web accesibles via navegador
/* Start with core styles outside of a media query that apply to mobile and up */ /* Global typography and design elements, stacked containers */ body { font-family: Helvetica, san-serif; } H1 { color: green; } a:link { color:purple; } /* Stack the two content containers */ .main, .sidebar { display:block; width:100%; } /* First breakpoint at 576px */ /* Inherits mobile styles, but floats containers to make columns */ @media all and (min-width: 36em){ .main { float: left; width:60%; } .sidebar { float: left; width:40%; } } /* Second breakpoint at 800px */ /* Adjusts column proportions, tweaks base H1 */ @media all and (min-width: 50em){ .main { width:70%; } .sidebar { width:30%; } /* You can also tweak any other styles in a breakpoint */ H1 { color: blue; font-size:1.2em } }
Aplicación Web con jQueryMobile
Ficheros y documentación
- Visitar página jQueryMobile para su descarga.
- Leer el tutorial que incluye.
- Utilizaremos un CDN:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
Plantilla
<!DOCTYPE HTML> <html> <head> <meta charset='utf-8'> <title></title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> </head> <body> <!-- Página--> <div data-role="page"> <!--Aquí iría nuestra página jQuery Mobile --> </div> <!-- Fin página --> </body> </html>
Atributo data-role
- Utilizaremos el atributo data-role para definir las distintas partes de nuestra aplicación o sitio web.
- Mira el siguiente código y analiza su comportamiento:
<!DOCTYPE HTML> <html> <head> <meta charset='utf-8'> <title>Primera Web con jQuery Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> </head> <body> <!-- Página--> <div data-role="page"> <!-- Cabecera --> <div data-role="header"> <h1>Título de la página</h1> </div> <!-- Body --> <div data-role="content"> <p>El contenido de la página va aquí.</p> </div> <!-- Pie página --> <div data-role="footer"> <h4> Contenido en el pie de la página</h4> </div> </div> <!-- Fin página --> </body> </html>
Estructura aplicación
- Una aplicación tiene varias páginas y cajas de diálogo.
- Mediante jQuery Mobile se definirán todas en la misma página html.
- Cada página se puede abrir mediante un botón, que definirá su comportamiento mediante los atributos data-rel y data-transition:
<a data-role="button" href="#dialog1" data-rel="dialog" data-transition="pop">- Mira el siguiente código y analiza su comportamiento:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Mobile Demo</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> </head> <body> <!-- Página 1--> <div data-role="page" id="main"> <div data-role="header"> <h1> Página 1 </h1> </div> <div data-role="content"> <h1> Ejemplo de páginas con jQueryMobile </h1> <a data-role="button" href="#page2">Ver página 2</a> <a data-role="button" href="#dialog1" data-rel="dialog" data-transition="pop">Ver página 3</a> </div> <div data-role="footer"> <h4> Pie de página 1 </h4> </div> </div> <!-- Fin página 1 --> <!-- Página 2--> <div data-role="page" id="page2" data-add-back-btn=”true”> <div data-role="header"> <h1> Segunda página </h1> </div> <div data-role="content"> <h1> Contenido de la segunda página </h1> </div> <div data-role="footer"> <h4> Pie de página 2 </h4> </div> </div> <!-- Fin página 2 --> <!-- Página 3 --> <div data-role="page" id="dialog1"> <div data-role="header"> <h1> Tercera página </h1> </div> <div data-role="content"> <h1> Está página se abre como modal debido al atributo data-rel del botón. </h1> </div> <div data-role="footer"> <h4> Pie de la ventana modal </h4> </div> </div> <!-- Fin página 3 --> </body> </html>
Formularios
- Los toolbars en header y footer se crean simplemente añadiendo botones
- Los botones son enlaces con los atributos data-role="button" y data-icon="delete"
- El class="ui-bar" en el footer ha servido para añadir padding (ver api de jQueryMobile).
- Los elementos del formulario son los habituales elementos HTML para formularios.
- Cada elemento y su label se agrupan en un data-role="fieldcontain"
- Mira el siguiente código y analiza su comportamiento:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Formulario</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> </head> <body> <!-- Página 1--> <div data-role="page" id="main"> <div data-role="header"> <a href="index.html" data-icon="delete">Cancelar</a> <h1> Editar contacto </h1> <a href="index.html" data-icon="check">Guardar</a> </div> <div data-role="content"> <form action="#" method="get"> <h2> Formulario básico </h2> <div data-role="fieldcontain"> <label for="name"> Nombre: </label> <input type="text" name="name" id="name" value="" /> </div> <div data-role="fieldcontain"> <label for="textarea"> Descripción: </label> <textarea cols="40" rows="8" name="textarea" id="textarea"> </textarea> </div> <div data-role="fieldcontain"> <label for="search"> Buscar: </label> <input type="search" name="search" id="search" value="" /> </div> </form> </div> <div data-role="footer" class="ui-bar"> <a href="index.html" data-role="button" data-icon="delete">Quitar</a> <a href="index.html" data-role="button" data-icon="plus">Añadir</a> <a href="index.html" data-role="button" data-icon="arrow-u">Anterior</a> <a href="index.html" data-role="button" data-icon="arrow-d">Siguiente</a> </div> </div> <!-- Fin página 1 --> </body> </html>
- Otro ejemplo de formulario:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Mobile Demo</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> </head> <body> <!-- Main Page--> <div data-role="page" id="main"> <div data-role="header"> <a href="index.html" data-icon="delete">Cancelar</a> <h1> Pedir pizza </h1> <a href="index.html" data-icon="check">Guardar</a> </div> <div data-role="content"> <form action="#" method="get"> <h2> Formulario para pedir una pizza: </h2> <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend> Escoje la base: </legend> <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" /> <label for="radio-choice-1"> Fina y crujiente </label> <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" /> <label for="radio-choice-2"> Queso gratinado </label> <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" /> <label for="radio-choice-3"> Gorda y esponjosa </label> </fieldset> </div> <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend> Elige los ingredientes de la pizza: </legend> <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" /> <label for="checkbox-1a"> Champiñones </label> <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" /> <label for="checkbox-2a"> Aceitunas negras </label> <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" /> <label for="checkbox-3a"> Pimientos </label> <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" /> <label for="checkbox-4a"> Cebolla </label> </fieldset> </div> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend> Ingredientes para no vegetarianos: </legend> <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" /> <label for="checkbox-6"> Chorizo </label> <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" /> <label for="checkbox-7"> Jamón Serrano </label> <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" /> <label for="checkbox-8"> Carne picada </label> </fieldset> </div> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend> Forma de pago: </legend> <input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" /> <label for="radio-choice-c"> Metálico </label> <input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" /> <label for="radio-choice-d"> Cupón </label> <input type="radio" name="radio-choice-b" id="radio-choice-e" value="other"/> <label for="radio-choice-e"> Tarjeta crédito </label> </fieldset> </div> </form> </div> <div data-role="footer" > <p>Pizzeria CPIFP Los Enlaces </p> </div> </div> </body> </html>
Eventos en jQueryMobile
Sin jQuery Mobile
- Normalmente definimos los eventos mediante algún framework, por ejemplo jQuery.
- Evitamos el uso de javascript directamente debido a las diferencias entre navegadores.
- Mira el siguiente código y analiza su comportamiento:
<html> <head> <style> p { color:red; margin:5px; cursor:pointer; } p:hover { background:yellow; } </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <p>First Paragraph</p> <p>Second Paragraph</p> <p>Yet one more Paragraph</p> <script> $("p").click(function () { $(this).slideUp(); }); </script> </body> </html>
Con jQuery Mobile
- Los touch events son distintos a los eventos tradicionales del ratón:
- Tap
- Taphold (al menos 1s)
- Swipe (Swipeleft y Swiperight)
- Mira el siguiente código y analiza su comportamiento (es útil la extensión para Chrome Google Chrome to Phone).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Eventos con jQueryMobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <script> $(document).ready(function() { $("#tap").on("tap", function() { alert("TapEvent"); }); $("#taphold").on("taphold", function() { alert("Tap Hold Event"); }); $("#swipe").on("swipe", function() { alert("Swipe Event"); }); $("#swipeleft").on("swipeleft", function() { alert("Swipe Left Event"); }); $("#swiperight").on("swiperight", function() { alert("Swipe Right Event"); }); $(window).on('orientationchange', function(event){ $("#placeholder").html("Se ha cambiado la orientación a: "+event.orientation); }); }); </script> </head> <body> <div data-role="page" id="main"> <div data-role="header"> <h1> Eventos en jQueryMobile </h1> </div> <div data-role="content"> <h3> Eventos de cambio de orientación: </h3> <h3> Eventos táctiles: </h3> <p id="tap"> Pulsa aquí </p> <p id="taphold"> Pulsa y manten el dedo al menos 1s </p> <p id="swipe"> Desliza el dedo </p> <p id="swipeleft"> Desliza el dedo hacia la izqda </p> <p id="swiperight"> Desliza el dedo hacia la dcha. </p> </div> <div data-role="footer" class="ui-bar"> <h1> Footer </h1> </div> </div> </body> </html>
