Este documento proporciona una introducción al framework jQuery Mobile. En 3 oraciones o menos: jQuery Mobile es un framework HTML5 para crear aplicaciones web móviles multiplataforma utilizando HTML, CSS y JavaScript. Proporciona componentes como listas, botones, formularios y transiciones entre páginas. Los desarrolladores pueden crear interfaces de usuario ricas para dispositivos móviles de manera rápida y sencilla con este framework.
2. ¿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
4. 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.
5. 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
6. 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.
7. 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 …..
8.
9. 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
10. 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.
18. 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>
19. 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>
<li><a href="../index.html">Opcion3<span class="ui-li-count”>24</span></a></li>
<li><a href="../index.html">Opcion4<span class="ui-li-count”>5</span></a></li>
<li><a href="../index.html">Opcion5<span class="ui-li-count”>1</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>
21. HTML5 inputs
HTML5 tiene varios tipos de “input types”
• email
• url
• number
• range
• Date pickers (date, month, week, time,
datetime, datetime-local)
• search
• color
22. 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.
23. 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
24. 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..
25. 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!)
26. 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>
28. 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">
29. 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){ …. }
30. 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>
31. 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 });
32. 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>
33. 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/
34. 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.
35. 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.