programación web para móviles · 2012-11-30 · aplicaciones web para móviles que pretende...

Experto Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles

© 2012-2013 Depto. Ciencia de la Computación e IA

Programación web para móviles

Sesión 5: Introducción a jQuery Mobile


© 2012-2013 Depto. Ciencia de la Computación e IAProgramación web para móviles Introducción a jQuery Mobile - 2

Contenido

• ¿Qué es jQuery Mobile?• Páginas en jQuery Mobile

• Anatomía de una página• Enlaces• Transiciones• Diálogos• Precarga y caché• Estilos de los componentes

• Barras de herramientas• Formateo de contenido



¿Qué es jQuery Mobile?

• “jQuery Mobile es un framework de interfaz gráfica especialmente diseñado para el desarrollo de aplicaciones web para móviles que pretende unificar el diseño de interfaces de usuario para la mayoría de dispositivos móviles del mercado”

• Basado en jQuery• Framework ligero• Apoyado por Mozilla Corporation, Palm, Blackberry, Nokia

y Adobe entre otras• Conseguir una misma sensación de navegación por parte

del usuario en la mayoría de los dispositivos móviles



Características de jQuery Mobile

• Basado en el núcleo de jQuery• Altamente compatible con la gran mayoría de dispositivos• Tamaño reducido (unos 20kb)• HTML5• Mejora progresiva• Accesibilidad• Soporte de eventos de ratón y de contacto• Fácilmente modificable



Soporte de jQuery Mobile

• Tres grados de soporte:• Grado A: soportan todas las características de jQuery Mobile

(navegación páginas web mediante AJAX y transiciones)• Grado B: no soportan la navegación mediante AJAX• Grado C: únicamente se garantiza el comportamiento básico

• Ver tabla de compatibilidades en los apuntes



¿Cómo funciona jQuery Mobile?

1. Páginas en HTML (con pequeñas modificaciones)

2. Transformaciones del DOM

3. Páginas web adaptadas a dispositivos móviles



Páginas en jQuery Mobile

• Anatomía de una página• Documentos HTML con páginas individuales• Documentos HTML multipágina

<!DOCTYPE html><html> <head> <title>Título de la página</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="1.1.1/jquery.mobile-1.1.1.min.css" /> <script type="text/javascript" src/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="juery.mobile-1.1.1.min.js"></script></head><body>...aquí iría el contenido...</body></html>



Anatomía de una página

• Importancia de la etiqueta meta name=”viewport”• Documento HTML de una sola página…<div data-role="page"> <div data-role="header">Título</div> <div data-role="content">Contenido</div> <div data-role="footer">Pie de página</div></div>…

Anatomía de una página

• Documento HTML multipágina

• Por defecto, se mostrará la primera página encontrada• No es posible enlazar <a href=”index.html#foo”>

…<div data-role="page" id=”home”> <div data-role="header">Home</div> <div data-role="content">Contenido</div> <div data-role="footer">Pie de página</div></div>

<div data-role="page" id=”author”> <div data-role="header">Fran García</div> <div data-role="content"> <p><a href="#home">Volver al inicio</a></p> </div> <div data-role="footer">Pie de página</div></div>



Títulos de las páginas

<div data-role="page" id="foo" data-title="Page Foo">…</div>

• Podemos especificar el título de las páginas con el atributo data-title



Enlaces entre páginas

• Sintaxis HTML• Enlaces cargados mediante AJAX por defecto

• Siempre que sea posible (salvo dominios externos)• Las nuevas páginas se cargan dinámicamente en el DOM• Se muestra imagen de precarga• En caso de error, se muestra mensaje de error

• Enlaces sin utilizar AJAX• Dominios externos• Atributo rel=”external”• Atributo data-ajax=”false”• Atributo target=”...”



Enlaces en un documento multipágina

• <a href=”#foo”>Foo</a>• Buscará una página con identificador foo• Se muestra con una transición• Navegación para volver atrás• Al enlazar desde una página cargada vía AJAX a un

documento multipágina, debemos añadir el atributo rel=”external” o data-ajax=”false”.

<a href="multipagina.html" rel="external">Multi-página</a>



Botón atrás

• Especificando el atributo data-rel=”back”• Se obviará el atributo href• Podemos especificar el atributo data-direction=”reverse”

<a href=”#home” data-rel=”back">Volver</a>



Transiciones entre páginas

• Añadir el atributo data-transition al enlace• Seis tipos de transiciones

• slide• slideup• slidedown• pop• fade• flip



Diálogos

• Simulan la creación de cuadros de diálogo• Añadir el atributo data-rel=”dialog” al enlace

<a href="foo.html" data-rel="dialog"> Abrir cuadro de diálogo</a>



Diálogos. Transiciones

• Transición por defecto pop• Podemos cambiarla con el atributo data-transition

• Para cerrar un cuadro de diálogo:• Hacer clic en cualquier lugar• O añadir un enlace con el atributo data-rel=”back”

• Los cuadros de diálogo no aparecerán en el historial de navegación

<a href="foo.html" data-rel="dialog" data-transition=”pop”> Abrir cuadro de diálogo</a>



Precarga

• Podemos precargar páginas únicas• Utilizaremos el atributo data-prefetch•

•

• ¡¡Cuidado con el uso de esta característica!!

<a href="enlaceprecargado.html" data-prefetch>Enlace precargado</a>



Caché

• Las páginas se van añadiendo al DOM• Cuando volvemos a una página ya cargada, se mira

automáticamente en el DOM• Si la página ha sido eliminada

• Se carga de la propia caché del navegador• Se vuelve a solicitar al servidor

• Podemos autogestionar esta caché

$.mobile.page.prototype.options.domCache = true;

<a href="foo/bar/baz" data-dom-cache="true">link text</a>



Estilo de los componentes jQuery Mobile

• Podemos estilizar cada componente de forma diferente• Tenemos cinco temas preparados• Podemos especificar este tema con el atributo data-theme

y puede tener los valores• a• b• c• d• e



Estilo de los componentes jQuery Mobile



Barras de herramientas

• Tenemos dos tipos:• Cabeceras (headers)• Pies de página (footers)

• Barras siempre visibles con data-position=”fixed”• Barras de herramientas para páginas a pantalla completa

• data-fullscreen=”true” al elemento div con data-role=”page”• y data-position=”fixed” en la barra de herramientas



Cabeceras

• Situada al inicio de las páginas• Atributo data-role=”header”• Contiene un título (<h1>..</h1>)• Botones

• Podemos añadir hasta dos botones (izquierda y derecha del título)• Serán enlaces

<div data-role="header" data-position="inline"> <a href="index.html" data-icon="delete">Cancel</a> <h1>Edit Contact</h1> <a href="index.html" data-icon="check">Save</a></div>



Cabeceras

• Los botones heredan el tema de la barra que los contiene• Podemos modificarlos con el atributo data-theme

<div data-role="header" data-position="inline"> <a href="index.html" data-icon="delete">Cancel</a> <h1>Edit Contact</h1> <a href="index.html" data-icon="check" data-theme="b">Save</a></div>



Cabeceras

• Podemos controlar donde aparecen los botones• Por ejemplo, si sólo mostramos un botón a la derecha• Especificamos el atributo class con los valores

• ui-btn-right• ui-btn-left

<div data-role="header" data-position="inline" <h1>Page Title</h1> <a href="index.html" data-icon="gear" class="ui-btn-right">Options</a></div>



Cabeceras

• Botones para volver atrás automaticos• Especificando el atributo data-add-back-btn=”true”• Podemos especificar el título del botón atrás con data-

back-btn-text=”Atrás”• E incluso el tema con data-back-btn-theme• Además, podemos crear un enlace con el atributo data-

rel=”back” y el atributo data-direction=”reverse”



Pies de página

• Comportamiento similar a las cabeceras• Atributo data-role=”footer”• Podemos añadir botones mediante enlaces con el atributo

data-role=”button”

<div data-role="footer" class="ui-bar"> <a href="index.html" data-role="button" data-icon="delete">Remove</a> <a href="index.html" data-role="button" data-icon="plus">Add</a> <a href="index.html" data-role="button" data-icon="arrow-u">Up</a> <a href="index.html" data-role="button" data-icon="arrow-d">Down</a></div>



Pies de página

• Podemos agrupar los botones con los atributos• data-role=”controlgroup”• data-type=”horizontal”

<div data-role="footer" class="ui-bar"> <div data-role="controlgroup" data-type="horizontal"> <a href="index.html" data-role="button" data-icon="delete">Remove</a> <a href="index.html" data-role="button" data-icon="plus">Add</a> <a href="index.html" data-role="button" data-icon="arrow-u">Up</a> <a href="index.html" data-role="button" data-icon="arrow-d">Down</a> </div></div>

Barras de navegación

• Facilitan la usabilidad de nuestra aplicación• Permite hasta cinco botones por barra• Situada en cabeceras o en pies de página• Lista desordenada de enlaces con data-role=”navbar”• Opción activa: class=”ui-btn-active”

<div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="a.html" class="ui-btn-active">One</a></li> <li><a href="b.html">Two</a></li> </ul> </div></div>




• jQuery Mobile se encarga automáticamente de ordenar los botones en función de su número




• Posibilidad de agregar iconos a los botones con el atributo data-icon

•

•

•

•

•

• Podemos controlar donde aparece el icono con el atributo data-iconpos y los valores left, right, top o bottom

arrow-l arrow-w arrow-u

arrow-d delete plus

minus check gear

refresh forward back

grid star alert

info home search



Formateo de contenido. HTML básico

• jQuery Mobile se basa en convenciones que nos ayudarán

• Podemos formatear contenido con HTML básico• Encabezados

<h1>Cabecera H1</h1><h2>Cabecera H2</h2><h3>Cabecera H3</h3><h4>Cabecera H4</h4><h5>Cabecera H5</h5><h6>Cabecera H6</h6>




<ol> <li>Lista desordenada item 1</li> <li>Lista desordenada item 2</li> <li>Lista desordenada item 3</li></ol>

• Listas desordenadas




<table> <thead> <tr><th>ISBN</th><th>Título</th> <th>Autor</th></tr> </thead> <tbody> <tr><td>843992688X</td><td>La colmena</td><td>Camilo José Cela Trulock</td></tr> <tr><td>0936388110</td><td>La galatea</td><td>Miguel de Cervantes Saavedra</td></tr> <tr><td>8437624045</td><td>La dragontea</td><td>Félix Lope de Vega y Carpio</td></tr> </tbody></table>

• Tablas



Diseño por columnas

• No es muy habitual en aplicaciones web para móviles• Se utilizan para aprovechar al máximo la amplitud de los

dispositivos• Utilizaremos una clase llamada ui-grid y se permiten hasta

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




• Ver código fuente en los apuntes




<div class="ui-grid-c"> <div class="ui-block-a"><div class="ui-bar ui-bar-e">Block 1</div></div> <div class="ui-block-b"><div class="ui-bar ui-bar-e">Block 2</div></div> <div class="ui-block-c"><div class="ui-bar ui-bar-e">Block 3</div></div> <div class="ui-block-a"><div class="ui-bar ui-bar-e">Block 4</div></div> <div class="ui-block-b"><div class="ui-bar ui-bar-e">Block 5</div></div> <div class="ui-block-c"><div class="ui-bar ui-bar-e">Block 6</div></div> <div class="ui-block-a"><div class="ui-bar ui-bar-e">Block 7</div></div> <div class="ui-block-b"><div class="ui-bar ui-bar-e">Block 8</div></div> <div class="ui-block-c"><div class="ui-bar ui-bar-e">Block 9</div></div> </div>

• Organización automática



Contenido desplegable

<div data-role="collapsible"> <h3>Contenido desplegable</h3> <p> Este contenido puede ser mostrado y ocultado por el usuario simplemente haciendo clic en la cabecera </p></div>

• Contenido que se mostrará cuando el usuario haga clic o contacte sobre él

• Debemos especificar el atributo data-role=”collapsible” seguido de un elemento de encabezado



Contenido desplegable

<div data-role="collapsible"> <h3>Contenido desplegable</h3> <p>Este contenido está dentro de un desplegable...</p> <div data-role="collapsible"> <h4>más información</h4> <p>... que a su vez tiene más contenido desplegable</p> </div> </div>

• Podemos utilizar el atributo data-collapsed=”false” para que se muestre por defecto el contenido

• Podemos tener varios componentes de estilo anidados



Contenidos desplegables agrupados

• También llamados acordeones• Es un conjunto de contenidos desplegables de tal forma

que al abrir uno el resto se ocultan automáticamente• La sintaxis es muy parecida a lo que veíamos

anteriormente• Sólo debemos agrupar todos los elementos dentro de una

capa div con el atributo data-role=”collapsible-set”• Si queremos mostrar de inicio algún contenido debemos

utilizar el atributo data-collapsed=”false”



Contenidos desplegables agrupados<div data-role="collapsible-set"> <div data-role="collapsible" data-collapsed="true"> <h3>Sección A</h3><p>Contenido desplega para A.</p> </div> <div data-role="collapsible" data-collapsed="true"> <h3>Sección B</h3><p>Contenido desplega para B.</p> </div> <div data-role="collapsible" data-collapsed="false"> <h3>Sección C</h3><p>Contenido desplega para C.</p> </div> <div data-role="collapsible" data-collapsed="true"> <h3>Sección D</h3><p>Contenido desplega para D.</p> </div></div>



¿Preguntas...?

programación web para móviles · 2012-11-30 · aplicaciones web para móviles que pretende...

Documents