Trabajo en proceso, espera cambios frecuentes. Tu ayuda y retroalimentación son bienvenidos.
Ver página de charlas.

Contenido

1 jQuery Mobile

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:

Web móvil de Ikea

Disney World

Moulin Rouge

Universidad de Stanford

Y muchos más

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>

Curso de PhoneGap

Contenido

jQuery Mobile

Introducción

¿Qué es jQuery Mobile

Diseños responsivo

Diseño responsable

Ejemplo CSS Mobile First

Aplicación Web con jQueryMobile

Ficheros y documentación

Plantilla

Atributo data-role

Estructura aplicación

Formularios

Eventos en jQueryMobile

Sin jQuery Mobile

Con jQuery Mobile

Menú de navegación

Herramientas personales

Espacios de nombres

Variantes

Vistas

Acciones

Buscar

Navegación

Herramientas

Imprimir/exportar