Revisión de 06:28 29 may 2013

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

Contenido

1 Introducción

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

Diseño 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 }
}

Cómo empezar

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>

@@ Línea 167: / Línea 167: @@
 <a data-role="button" href="#dialog1" data-rel="dialog" data-transition="pop">
 </source>
+</div>
+<div class="slide">
 *Mira el siguiente código y [http://www.media.formandome.es/phonegap/ejemplo2.html analiza su comportamiento]:
 <source lang="html4strict">
@@ Línea 248: / Línea 252: @@
 </source>
 </div>
 <div class="slide">
 ===Formularios===
@@ Línea 255: / Línea 260: @@
 *Los elementos del formulario son los habituales elementos HTML para formularios.
 *Cada elemento y su label se agrupan en un data-role="fieldcontain"
+</div>
+<div class="slide">
 *Mira el siguiente código y [http://www.media.formandome.es/phonegap/ejemplo3.html analiza su comportamiento]:
@@ Línea 318: / Línea 325: @@
 </div>
 <div class="slide">
 *[http://www.media.formandome.es/phonegap/ejemplo4.html Otro ejemplo] de formulario:

Diferencia entre revisiones de «Usuario:Juanda/phonegap/jquerymobile»

Revisión de 06:28 29 may 2013

Contenido

Introducción

¿Qué es jQuery Mobile

Diseño responsivo

Diseño responsable

Ejemplo CSS Mobile First

Cómo empezar

Plantilla

Atributo data-role

Estructura aplicación

Formularios

Menú de navegación

Herramientas personales

Espacios de nombres

Variantes

Vistas

Acciones

Buscar

Navegación

Herramientas

Imprimir/exportar