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

De WikiEducator
Saltar a: navegación, buscar
(Página creada con '{{Usuario:juanda/phonegap/nav }} {{#widget:Slides}} {{MiTitulo| Curso de jQuery-Introducción}} <div class="slides layout-regular template-default"> <div class="slide"> = Empe…')
 
 
(69 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">
  
−
= Empezando 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>
−
 
 
<div class="slide">
 
<div class="slide">
−
 
+
*Algunos ejemplos:
−
===Entorno de desarrollo en Android===
+
:[http://m.ikea.com/es/ Web móvil de Ikea]
−
*JDK (Android se programa en Java)
+
:[http://m.disneyworld.disney.go.com/ Disney World]
−
*Eclipse
+
:[http://www.moulinrouge.fr/ Moulin Rouge]
−
*Android SDK
+
:[http://m.stanford.edu/ Universidad de Stanford]
−
*Android ADT Plugin para Eclipse
+
:[http://www.jqmgallery.com/ Y muchos más]
−
*Android AVD (Android Virtual Device)
+
*Para ver las páginas correctamente:
−
*PhoneGap SDK para Android
+
:Instala la extensión para Chrome Google Chrome to Phone para ver las páginas en el móvil
−
*Menos PhoneGap, el resto se pueden obtener mediante una [http://developer.android.com/sdk/index.html descarga única]
+
:Cambia el user-agent del navegador (lo más fácil es mediante las Chrome Developer Tools).
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
===Emulador Android===
+
 
−
*[http://www.youtube.com/watch?feature=player_embedded&v=k2Ly6O9LlPw Video sobre como crear dispositivos AVD] [http://www.media.formandome.es/android/avd.webm Descargar video]
+
==== Diseños responsivo ====
−
*Teclas de acceso rápido:
+
* Uso de CSS media queries: hojas de estilo css especificas para dispositivos según anchura de pantalla, resolución o características.
−
:Inicio: Tecla Home.
+
* Grid fluido, especificando sus elementos mediante unidades relativas.
−
:F2: Tecla Menú.
+
* Imágenes y media también en unidades relativas.
−
:Esc: Tecla de volver.
+
−
:F7: Tecla On/Off
+
−
:Ctrl-F5/Ctrl-F6 óKeyPad +/-: Control de volumen de audio.
+
−
:Ctrl-F11 ó KeyPad 7: Cambia la orientación entre horizontal y vertical.
+
−
:Alt-Intro: Visualiza el emulador a pantalla completa.
+
 
</div>
 
</div>
 +
 
<div class="slide">
 
<div class="slide">
  
−
===Nuevo proyecto Android===
+
==== Diseño responsable====
−
[[Archivo:new_android_project.png|600px|thumb|center|Nuevo Proyecto mediante Android]]
+
*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, [http://blogs.perficient.com/spark/2013/01/30/responsive-images-the-new-hotness/ ver ejemplo]
 +
*Uso de versiones minified y gzip
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
*[http://www.youtube.com/watch?feature=player_embedded&v=DZ5H99R3ghg#! Video Introducción Android] [http://www.media.formandome.es/android/intro_android.webm Descargar video]
+
====Ejemplo CSS Mobile First====
−
*[http://www.youtube.com/watch?feature=player_embedded&v=OZq-7T5kOrk#! Video sobre la creación del primer programa] [http://www.media.formandome.es/android/primer_programa.webm Descargar video]
+
* 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.
−
*'''Application Name:'''
+
* Para calcular la anchura en ems, se divide en ancho de nuestro objetivo entre 16px (tamaño de letra por defecto)
−
:Es el nombre de la aplicación que aparecerá en el dispositivo Android. Tanto en la barra superior cuando esté en ejecución, como en el icono que se instalará en el menú de programas.
+
*Aplicaciones Web accesibles via navegador
−
*'''Project Name:'''
+
<source lang="css">
−
:Es el nombre del proyecto. Se creará una carpeta con el mismo nombre que contendrá los ficheros del proyecto.
+
/* 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 }
 +
}
 +
</source>
 +
 
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
*'''Package Name:'''
+
 
−
:Indicamos el paquete con el espacio de nombres utilizado por nuestra aplicación. Hay que usar las reglas de los espacios de nombre en el lenguaje de programación Java. Las clases que creemos estarán dentro de él. Esto también establece el nombre del paquete donde se almacenará la aplicación generada.
+
==Aplicación Web con jQueryMobile==
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
*'''Minimum required SDK:'''
+
====Ficheros y documentación====
−
:Este valor especifica el mínimo nivel del API que requiere tu aplicación. Por lo tanto, la aplicación no podrá ser instalada en dispositivos con una versión inferior. Procura escoger valores pequeños para que tu aplicación pueda instalarse en la mayoría de dispositivos. Escoger valores pequeños para este parámetro tiene un inconveniente. No podremos utilizar ninguna de las mejoras que aparezcan en los siguientes niveles de API.
+
*Visitar [http://jquerymobile.com/download/ página jQueryMobile] para su descarga.
−
*'''Target SDK:'''
+
*Leer el tutorial que incluye.
−
:Indica la versión más alta de Android con la que se han puesto a prueba la aplicación. Cuando salgan nuevas versiones del SDK, tendrás que probar la aplicación con estas versiones y actualizar el valor.
+
*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>
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
*'''Compile With:'''
+
====Plantilla====
−
:Es la versión de la plataforma con la que compila la aplicación. Se recomienda indicar la versión más reciente que haya aparecido. Las nuevas versiones no solo añaden funcionalidades al API, también añaden mejoras en el desarrollo. Utilizar un Target SDK alto no está reñido con usar un Minimum requiered SDKpequeño.
+
<source lang="html4strict">
−
</div>
+
<!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">
 
<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>
 +
<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">
 
<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>
  
 
<div class="slide">
 
<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>
  
−
<div class="slide">
+
<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>
 +
<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»