JqueryMobile

¿Quien soy?

Soy Josep Maria Tuset, ingeniero superior de
telecomunicaciones por la Salle.

Soy consultor de Portales en everis.

Tecnologías:
web: Html, js, css, aspx, jsp, php
frameworks: .Net, Java, jqm

Empecé a trabajar con jqueryMobile desde
hace 10 meses con la versión Alpha 3

App vs web móvil
Depende de
Los objetivos de la aplicación (juegos, aplicación,..)
Funcionalidades
Público destino
….

Aplicaciones nativas Aplicaciones web
• lenguaje de programación • lenguaje de programación HMTL +
específico (ObjectiveC para JS + CSS.
iOS, Java de Android). • Rápidos, fiables y potentes
• Rápidos, fiables y potentes • Código único
• Duplicación de código para varias • Rapidez de desarrollo
plataformas • Bajos costes de mantenimientos
• Dependencia de los dispositivo • Acceder a caracterísiticas del
dispositivo mediante navegador
Casi todos los juegos son aplicaciones • Major flexibilidad
nativas.

Características HTML5
Offline & Storage

App Cache
HTML5 SQL Semantics
Graphics & Effects

SVG
Canvas Nuevos Elementos
Forms
WebGL

HTML5
Technologies Multimedia
User interface
Audio
Video
Drag and drop
File

Device Access

Geolocation

HTML5
HTML5 es un lenguaje multiplataforma por lo que permite el desarrollo de aplicaciones sin
preocuparse de los sistemas operativos de los dispositivos que la usan, al contrario de lo que
sucede con las aplicaciones nativas.
Las aplicaciones HTML5 se acercan rápidamente a las posibilidades de las aplicaciones
nativas con la ventaja del control de la aplicación y el ahorro económico que supone
desarrollar en múltiples plataformas.
Para el desarrollo multiplataforma en HTML5 han aparecido numerosos frameworks. Aunque
estén basados en HTML5 su compatibilidad en múltiples dispositivos depende de diversos
factores.

Frameworks
 Jquery Mobile http://jquerymobile.com/
 Sencha http://www.sencha.com/products/touch
 SproutCore http://www.sproutcore.com/
 JQTouch http://jqtouch.com/
 iUI http://www.iui-js.org/
 DHTMLX Touch http://dhtmlx.com/touch/
 The M project http://the-m-project.net/
 JO http://joapp.com/
 Wink toolkit http://www.winktoolkit.org/
 Dojo http://dojotoolkit.org
 Vaadin https://vaadin.com/home
 Google Web Toolkit http://code.google.com/intl/ca/webtoolkit/
 WebApp.net http://webapp-net.com
 Lungo JS http://www.lungojs.com

Etc …..

Resultados
Los resultados muestran la clara ventaja de jQuery Mobile y Sencha Touch respecto a sus
competidores, motivo por lo que son líderes en el campo de frameworks HTML5 para
dispositivos móviles.

Area JQueryMobile Sencha Touch SproutCore DHTMLX Touch jQTouch Dojo Toolkit Vaadin GWT
Execution 70% 75% 58% 62% 55% 55% 57% 57%
Development 98% 77% 52% 73% 80% 64% 41% 52%
Product 88% 100% 48% 48% 55% 60% 48% 63%
Support and
65% 65% 65% 65% 65% 65% 65% 65%
Documentation
Acumulated score 3,20 3,17 2,23 2,47 2,55 2,44 2,10 2,36
Average 80,06% 79,32% 55,78% 61,72% 63,64% 60,91% 52,52% 59,11%
Fuente: everis

jQueryMobile
jQuery Mobile es un framework de interfaz de usuario de desarrollo de web que permite
desarrollar aplicaciones web para móviles que trabajen en cualquier Smartphone y
Tablet.

El jQuery Mobile framework se basa en el core de jQuery y proporciona una serie de
herramientas, incluyendo el manejo del DOM de HTML y XML, el control de evento, la
comunicación con el servidor a través de Ajax, así como los efectos de animación y de
imágenes para páginas web.

Principales características
• Simple: El framework es simple de usar.
• Mejora progresiva: La filosofía de jQuery Mobile es soportar tanto la gama alta
de los dispositivos, como aquellos que no soportan grandes funcionalidades.
• Accesibilidad: jQuery Mobile ha sido diseñado pensando en la accesibilidad.
• Tamaño pequeño: El tamaño total de jQuery Mobile framework es
relativamente pequeño. Unos 12kb de la biblioteca JavaScript, 6kb de CSS y
algunos íconos.
• Tematización: proporciona un sistema de temas que nos ofrece una aplicación
a nuestro propio estilo.

Estructura
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>

<div data-role="page">

<div data-role="header">
<h1>Page Title</h1>
</div>

<div data-role="content">
Se centra en usar etiquetas
<p>Page content goes here.</p> HTML con atributos definidos.
</div>
Al mostrar la página crea lo
<div data-role="footer"> necesario para mostrar los
<h4>Page Footer</h4>
</div> componentes.
</div>


</body>
</html>

Página generada
<!DOCTYPE html>
<html class="ui-mobile"><head><base href="http://jquerymobile.com/demos/1.0/docs/pages/page-template.html">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>

<body class="ui-mobile-viewport">

<div data-role="page" data-url="/demos/1.0/docs/pages/page-template.html" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 320px;
">

<div data-role="header" class="ui-header ui-bar-a" role="banner">
<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Page Title</h1>
</div>

<div data-role="content" class="ui-content" role="main">
<p>Page content goes here</p>

</div>

<div data-role="footer" class="ui-footer ui-bar-a" role="contentinfo">
<h4 class="ui-title" tabindex="0" role="heading" aria-level="1">Page Footer</h4>
</div>

</div>

<div class="ui-loader ui-body-a ui-corner-all" style="top: 115.5px; "><span class="ui-icon ui-icon-loading spin"></span><h1>loading</h1></div><div
id="myEventWatcherDiv" style="display:none;"></div></body></html>

Estructura multi página
<div data-role="page" id=page1">
: En cada página hay que
</div> definir todas las secciones de
: nuevo
</div>
Página 1
<div data-role="footer">
:
</div>
</div>
:
:
<div data-role="page" id=page2">
:
</div>
: Página 2
</div>
:
</div>
</div>

Atributos – Data-*
Component HTML5 data-*
Header, Footer <div data-role="header">
Content body <div data-role="content">

Buttons <a href="index.html" data-role="button"
data-icon="info">Button</a>
Grouped buttons <div data-role="controlgroup">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Hell Yeah</a>
</div>
Inline buttons <div data-inline="true">
<a href="index.html" data-role="button">Foo</a>
<a href="index.html" data-role="button" data-theme="b">Bar</a>
</div>

Atributos – Data-*
Component HTML5 data-*
Form element <div data-role="fieldcontain">
(Select menu) <label for="select-options" class="select">Choose an option:</label>
<select name="select-options" id="select-options">
<option value="option1">Option 1</option>
</select>
</div>
Basic List views <ul data-role="listview">
<li><a href="index.html">One</a></li>
<li><a href="index.html">Two</a></li>
<li><a href="index.html">Three</a></li>
</ul>
Dialogs <a href="foo.html" data-rel="dialog">Open dialog</a>
<a href="dialog.html" data-role="button" data-inline="true” data-rel="dialog"
data-transition="pop">Open dialog</a>
Transitions <a href="index.html" data-transition="pop" data-back="true">

Listas
Las listas son un tipo de elemento fundamental de la interfaz de usuario, son muy
utilizados en aplicaciones móviles.
jQuery Mobile soporta gran variedad de tipos de listas: listas básicas, “nested”,
numeradas, con iconos/imágenes, con separadores, con burbujas, con barra de
buscador, seleccionables y de sólo lectura,…

Todas las listas se construyen igual y en función de atributos o estructuras que definimos
se mostrará una u otra.
Las listas se identifican por data-role=“listview”

Lista simple
<ul data-role="listview”>
<li><a href="../pag2.html">Page Two</a></li>
<li><a href="../pag3.html">Page Three</a></li>
<li><a href="../pag4.html">Page Four</a></li>
</ul>

Listas
Lista con burbuja
Añadir en el contenido la burbuja
<span class="ui-li-count">12</span>

<ul data-role="listview”>
<li><a href="../index.html">Opcion1<span class="ui-li-count">12</span></a></li>
<li><a href="../index.html">Opcion2<span class="ui-li-count”>2</span></a></li>
</ul>

Lista numerada.
Substituir el tag ul por ol

<ol data-role="listview”>
<li><a href="../pag1.html">18 Below</a></li>
<li><a href="../pag2.html”>19 To 25</a></li>
<li><a href="../pag3.html”>26 to 30</a></li>
</ol>

Listas

http://jquerymobile.com/demos/1.0/docs/lists/index.html

HTML5 inputs
HTML5 tiene varios tipos de “input types”
• email
• url
• number
• range
• Date pickers (date, month, week, time,
datetime, datetime-local)
• search
• color

Formato contenido
Grids: facilitan distribución contenido

• 2 columnas: ui-grid-a
• 3 columnas: ui-grid-b
• 4 columnas: ui-grid-c
• 5 columnas: ui-grid-d

Contenido expandible: Minimizan el contenido a
mostrar i el usuario elige que quiere expandir.

Acordeones:

Se pueden combinar los diferentes formatos.

Transiciones
Dispone de las siguientes transiciones
• Slide – La página actual se desplaza hacia la izquierda a la vez que entra desde la derecha la
página nueva.
• Pop – La página nueva se abre sobra la antigua en forma de pop-up pero ocupando todo el
espacio.
• Slideup – La página nueva aparece desde abajo, desplazándose hasta ocupar toda la pantalla.
• Slidedown – La página nueva aparece desde arriba y se desplaza hacia abajo ocupando la
pantalla.
• Fade – La pantalla nueva se monta sobre la actual con una transición de cambio de opacidad.
• Flip – El más espectacular. Esta transición entre pantallas simula un giro de 180º de la página,
simulando que la nueva es el dorso de la que teníamos.

<a href="index.html" data-transition="pop”>Page2</a>

Se puede configurar la transición por defecto con la opción de configuración defaultPageTransition

Eventos
jQuery Mobile añade algunos eventos específico para móviles que se pueden utilizar para detectar las
acciones realizadas en los dispositivos móviles.

Eventos táctiles
• tap : Toque rápido
• taphold : Toque completo (1 seg aprox)
• swipe : Cuando arrastras en horizontal más de 30px o 20px en vertical durante 1 seg.
• swipeleft : Cuando te desplazas a la izquierda
• swiperight : Cuando te desplazas a la derecha
• orientationchange : Cuando se cambia la orientación del dispositivo
• scrollstart : Se activa al empezar el scroll.
• scrollstop : Se activa al finalizar el scroll.

Eventos de transición de página
• Pagebeforeshow Se lanza cuando se muestra la página, justo antes que la transición empiece.
• Pagebeforehide Se lanza cuando se oculta la página, justo antes que la transición empiece.
• Pageshow Se lanza cuando se muestra la página, al finalizar la transición.
• Pagehide Se lanza cuando se oculta la página, al finalizar la transición..

Eventos
Eventos inicialización
• Pagebeforecreate Se lanza antes que se inicialice la página
• Pagecreate Se lanza cuando la página ha sido creada en el arbol DOM
• Pageinit Se lanza cuando se muestra la página se ha inicializado. Usar el evento pageInit(), no
utilizar$(document).ready()

$(document).ready(function() { ... });

$("#main").live('pageinit', function(event) {
alert( 'This page was just enhanced by jQuery Mobile!' );
});

Es importante detectar que funciones queremos ejecutar al cargar la página
por primera vez o en cada visita. (Event binding!)

Temas de colores
jQueryMobile aprovecha de las propiedades de CSS3 para:
• Esquinas redondeadas
• Sombras
• Gradientes en lugar de imágenes
• Transiciones

Aprovechando CSS consigue reducir :
• Volumen de datos de las imágenes de fondo
• Reducir peticiones al servidor

Utiliza Sprite para reducir
• Peso de la imagen
• Número de peticiones
• Velocidad de navegación en la aplicación

Se puede definir un tema personalizado a cada página o a cada elemento
concreto.
jQueryMobile permite definir hasta 26 temas distintos (a-z).

<a href="#" data-role="button" data-theme="a">About this app</a>
<a href="#" data-role="button" data-theme="b">About this app</a>

Temas de colores
http://jquerymobile.com/themeroller/

Visualización páginas
Viewport tag:
Especifica como mostrará la información el
navegador.

Ejemplo: igualamos el ancho de página a
mostrar a la resolución del dispositivo.

<meta name="viewport"
content="width=device-width,
initial-scale=1">

CSS3

CSS específicos según resolución

Mediante CSS3 se puede cambiar completamente una página.

Utilizando la propiedad media de CSS se pueden aplicar CSS
diferentes a la misma página

@media all and (min-width: 650px){ …. }
@media all and (min-width: 750px){ …. }

Opciones de configuración
Permiten configurar varias opciones del jQueryMobile
• Mensaje de error
• Transicion por defecto
• Texto del botón back
• Etc etc ….

Documentación opciones http://jquerymobile.com/test/docs/api/globalconfig.html

Las opciones de configuración se han de cargar una vez inicializado el jQueryMobile.

$( document ).bind( "mobileinit", function () {
$( function () {
$.extend( $.mobile, {
loadingMessage: "cargando",
backBtnText: "Atras"
} );
} );

Capturar el evento mobileInit antes de cargar el jquerymobile.js
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

Manipulación DOM
Manejo del tamaño de la DOM
jQuery Mobile gestiona automáticamente el uso de la DOM. jQueryMobile carga las páginas
en la DOM del navegador pero con el evento pagehide se elimina. Al cargar de nuevo la
página usa la cache del navegador si está disponible, en caso contrario la pide al servidor.
Este funcionamiento previene errores de gestión de espacio en la DOM.

Prefetch de páginas
Carga páginas en la DOM antes de visitarlas.
<a href="prefetchThisPage.html" data-prefetch>
$.mobile.loadPage( pageUrl, { showLoadMsg: false } );

Cacheo de páginas en la DOM
Se pueden mantener las paginas visitadas en la DOM y forzar su conservación.
Desde la inicialización: $.mobile.page.prototype.options.domCache = true;
<div data-role="page" id="cacheMe" data-dom-cache="true«
pageContainerElement.page({ domCache: true });

JSON
jQueryMobile permite interpretar datos en formato json i poder mostrar directamente los datos
por pantalla.

Un código como el siguiente permite cargar las últimas 10 imágenes sobre el tag android en
Flicker e inyecta estas imágenes en el contenedor «images».

<script>
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=android&tagmode=an
y&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 9 ) return false;
});
});
</script>

Detección de dispositivos
Una de las principales problemáticas que tiene la creación de aplicaciones web
para terminales móviles, es la amplia variedad de dispositivos con los que un
usuario puede acceder.

Existen servicios y herramientas que te permiten conocer que dispositivo está
accediendo a la web mediante el User-Agent.

El servicio Wurfl, consiste en una base de datos en formato XML que puede
ser utilizado desde una aplicación j2ee, php y .Net para conocer las
principales características (resolución de pantalla, si soporta javascript, ...) del
terminal que está haciendo la petición.

http://wurfl.sourceforge.net/

Plugins jQueryMobile
jQuery Mobile va incrementando la cantidad de plugins
que le permiten expandir sus posibilidades, entre estas
expansiones encontramos:

- PhotoSwipe: interesante galería de imágenes
- Pagination: facilita la creación de sites de
navegación unidireccional en formato paginación.
- Jquery-ui-map: permite integrar mapas de Google
con capacidades de geolocalización de forma
senzilla.

Testeo
Simuladores
• Económico
• No son 100% fiables. Para una aproximación
funcionan.
• Abarcas gran gama de dispositivos

Dispositivos
• Coste elevado
• Máxima fiabilidad

Lo importante no es tanto testear dispositivos en
concreto sino los diferentes SO con los navegadores.

Ejemplos
http://www.slideshare.net/mobile

http://m.life.com

http://m.stanford.edu/

http://m.box.com/

http://m.riu.com

Gracias

Josep Maria Tuset
jmtuset@gmail.com
@jmtuset

JqueryMobile

Más contenido relacionado

La actualidad más candente (10)

Similar a JqueryMobile (20)

Último (20)

JqueryMobile