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

De WikiEducator
Saltar a: navegación, buscar
 
(62 revisiones intermedias por el mismo usuario no mostrado)
Línea 1: Línea 1:
 +
{{TEP}}
 
{{Usuario:juanda/phonegap/nav }}
 
{{Usuario:juanda/phonegap/nav }}
−
{{#widget:Slides}} {{MiTitulo| Curso de jQuery-Introducción}}  
+
{{#widget:Slides}} {{MiTitulo| Curso de PhoneGap}}  
 
<div class="slides layout-regular template-default">
 
<div class="slides layout-regular template-default">
 
<div class="slide">
 
<div class="slide">
−
= Proyecto Android con PhoneGap =
+
 
 +
= jQuery Mobile =
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
=== Arquitectura===
+
==Introducción==
−
[[Archivo:arquitectura_phonegap.png|600px|thumb|center|Arquitectura de una aplicación en PhoneGap]]
+
 
</div>
 
</div>
−
 
 
<div class="slide">
 
<div class="slide">
−
===Arquitectura javascript===
+
==== ¿Qué es jQuery Mobile====
−
*Una aplicación mediante PhoneGap tendrá dos partes bien definidas:
+
*Framework para crear intefaces de usuario basadas en HTML5
−
*JavaScript para la parte de negocio: Interfaz de usuario y funcionalidad
+
:-Nos abstrae de las diferencias para el desarrollo entre los distintos navegadores.
−
*Javascript para acceder y controlar el dispositivo
+
:-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
 +
</div>
 +
<div class="slide">
 +
*Algunos ejemplos:
 +
:[http://m.ikea.com/es/ Web móvil de Ikea]
 +
:[http://m.disneyworld.disney.go.com/ Disney World]
 +
:[http://www.moulinrouge.fr/ Moulin Rouge]
 +
:[http://m.stanford.edu/ Universidad de Stanford]
 +
:[http://www.jqmgallery.com/ 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).
 +
</div>
 +
<div class="slide">
 +
 
 +
==== 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.
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
−
===Librerías PhoneGap===
+
 
−
:PhoneGap viene con 3 componentes principales:
+
==== Diseño responsable====
−
*'''Código nativo'''
+
*Se utiliza el criterio "mobile first":
−
:Debemos copiar el jar correspondiente a la carpeta de lib
+
:Diseños sencillos
−
:Añadir el jar al class path (botón derecho  Build Path->Add to build Path)
+
:Diseños más complejos mediante media queries y siempre con un min-width
−
*'''Fichero de configuración en XML'''
+
:Se evita llevar un diseño pesado y aligerarlo para conseguir un time load aceptable para la red 3G.
−
:Copiar el directorio XML del directorio Android de PhoneGap a la carpeta res
+
*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, [http://blogs.perficient.com/spark/2013/01/30/responsive-images-the-new-hotness/ ver ejemplo]
−
*'''Fichero con el JavaScript de PhoneGap'''
+
*Uso de versiones minified y gzip
−
:Creamos una carpeta www dentro del directorio assets
+
−
:Ahí colocaremos tanto el javascript como nuestro index.html
+
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
===Proyecto Hola Mundo===
+
====Ejemplo CSS Mobile First====
−
*Creamos un nuevo proyecto en el que situaremos los ficheros anteriores
+
* 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.
−
*En Android una clase llamada actividad representa una pantalla de la aplicación, para usar PhoneGap, cambiaremos la pantalla de Actividad a DroidGap.
+
* Para calcular la anchura en ems, se divide en ancho de nuestro objetivo entre 16px (tamaño de letra por defecto)
−
*DroidGap es una actividad especial, que nos permite mostrar páginas html.
+
*Aplicaciones Web accesibles via navegador
−
<source lang="java">
+
<source lang="css">
−
package org.examples.phonegap.helloworld;
+
/* Start with core styles outside of a media query that apply to mobile and up */
−
import android.os.Bundle;
+
/* Global typography and design elements, stacked containers */
−
import com.phonegap.DroidGap;
+
body { font-family: Helvetica, san-serif; }
−
public class HelloWorld extends DroidGap {
+
H1 { color: green; }
−
/** Called when the activity is first created. */
+
a:link { color:purple; }
−
@Override
+
 
−
public void onCreate(Bundle savedInstanceState) {
+
/* Stack the two content containers */
−
super.onCreate(savedInstanceState);
+
.main,
−
super.loadUrl("file:///android_asset/www/index.html");
+
.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 }
 
}
 
}
 +
</source>
  
 +
</div>
 +
<div class="slide">
 +
 +
==Aplicación Web con jQueryMobile==
 +
</div>
 +
<div class="slide">
 +
====Ficheros y documentación====
 +
*Visitar [http://jquerymobile.com/download/ página jQueryMobile] para su descarga.
 +
*Leer el tutorial que incluye.
 +
*Utilizaremos un CDN:
 +
<source lang="bash">
 +
<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>
 
</source>
 
</source>
 
</div>
 
</div>
 +
<div class="slide">
 +
====Plantilla====
 +
<source lang="html4strict">
 +
<!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>
 +
</source>
 +
 +
</div>
 +
<div class="slide">
 +
====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 [http://www.media.formandome.es/phonegap/ejemplo1.html analiza su comportamiento]:
 +
 +
<source lang="html4strict">
 +
<!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>
 +
</source>
 +
 +
</div>
 +
<div class="slide">
 +
 +
====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:
 +
<source lang="html4strict">
 +
<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">
 +
<!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>                             
 +
</source>
 +
</div>
 +
 +
<div class="slide">
 +
 +
====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"
 +
</div>
 +
 +
<div class="slide">
 +
*Mira el siguiente código y [http://www.media.formandome.es/phonegap/ejemplo3.html analiza su comportamiento]:
 +
 +
<source lang="html4strict">
 +
<!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>
 +
</source>
 +
</div>
 +
<div class="slide">
 +
*[http://www.media.formandome.es/phonegap/ejemplo4.html Otro ejemplo] de formulario:
 +
<source lang="html4strict">
 +
<!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>
 +
</source>
 +
</div>
 +
<div class="slide">
 +
==Eventos en jQueryMobile==
 +
</div>
 +
<div class="slide">
 +
====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 [http://www.media.formandome.es/phonegap/eventojquery.html analiza su comportamiento]:
 +
<source lang="html4strict"
 +
<!DOCTYPE html>
 +
<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>
 +
</source>
 +
</div>
 +
<div class="slide">
 +
====Con jQuery Mobile====
 +
*Los touch events son distintos a los [http://api.jquery.com/category/events/mouse-events/ eventos tradicionales del ratón]:
 +
*Tap
 +
*Taphold (al menos 1s)
 +
*Swipe (Swipeleft y Swiperight)
 +
*Mira el siguiente código y [http://www.media.formandome.es/phonegap/eventojqmobile.html analiza su comportamiento] (es útil la extensión para'' Chrome Google Chrome to Phone'').
 +
<source lang="html4strict">
 +
<!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>
 +
 +
</source>
 +
 
</div>
 
</div>

Última revisión de 04:20 21 feb 2014

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



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

<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">
<!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" 
<!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>
<!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

<!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>
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/phonegap/jquerymobile&oldid=14367»