Frameworks Moviles

Tema 6
Parte III
Frameworks web
para dispositivos
mviles
Introduccin
Frameworks web para

dispositivos mviles
2
Frameworks web para mviles
Nos permiten desarrollar un sitio web con aspecto y

funcionalidad tpica de mviles sin tener que escribir todo el
HTML/CSS/Javascript desde cero
Elementos de interfaz adaptado a mviles (botones grandes, listas,...)

Transiciones entre pantallas
Compatibilidad entre plataformas
Tipos de frameworks
De marcado
Definimos los elementos de pantalla con etiquetas HTML

convencionales, con clases CSS o atributos HTML propios del
framework
En la inicializacin, el framework les asigna un aspecto (CSS) y un
comportamiento (Javascript) especiales
!
!
!
!

<div id="home" selected="true" class="edgetoedge form">!
<div class="toolbar">!
<h1>Todos</h1>!
<a href="#add" class="btn2 slideup">Add</a>!
</div>!
<ul>!
<li><input type="checkbox"/>Do something<small></li>!
<li><input type="checkbox"/>Do something else</li>!
<li><input type="checkbox"/>Finish these damn demos</li>!
</ul>!
<h4>Completed</h4>!
<ul>!
<li><input type="checkbox" checked/></li>!
<li><input type="checkbox" checked />Write eblast</li>!
</ul>!
</div>!
Tipos de frameworks (II)
De cdigo
Ms parecidos al concepto tpico de librera. Cuando queremos

definir por ejemplo un widget lo hacemos con cdigo Javascript
Ext.application({!
name: 'Sencha',!
launch: function() {!
Ext.create("Ext.TabPanel", {!
fullscreen: true,!
items: [!
{!
title: 'Home',!
iconCls: 'home',!
html: 'Welcome'!
}!
]!
});!
}!
});!
Algunos frameworks
De marcado
jQT (antes jQTouch) http://jqtjs.com/

jQuery Mobile http://jquerymobile.com/
LungoJS http://lugo.tapquo.com
De cdigo
Sencha Touch http://www.sencha.com/products/touch/

Jo http://joapp.com/
DOJO mobile http://dojotoolkit.org/features/mobile
Aplicaciones web vs. sitios web
La mayora de frameworks mviles estn orientados al

desarrollo de aplicaciones web mviles, no de sitios web
Sitio web mvil: conjunto de HTML enlazados entre s y adaptados a

mviles
Aplicacin web mvil: un nico HTML contiene todas las
pantallas (o pginas) de la aplicacin. Al igual que una app. nativa
contiene todo el GUI, pero en lugar de estar desarrollado con Java u
Obj-C usa JS+HTML+CSS
No obstante, tambin pueden usarse para desarrollar sitios

web ms convencionales
JQuery Mobile:
conceptos
bsicos
Frameworks web para

dispositivos mviles
8
jQuery Mobile
Probablemente el framework web para mviles ms conocido

y difundido
http://jquerymobile.com/
Bajo el paraguas de jQuery
Multiplataforma: iOS, Android, Windows Phone, ...
Proporciona
widgets optimizados para mviles

personalizacin del estilo visual (temas)
Usar jQuery Mobile
Frameworks web para mviles 10
Incluir en el proyecto
El .js de jQuery
El .js, CSS e iconos de jQuery Mobile
La mayora de widgets se obtienen poniendo atributos

especiales (data-*) a etiquetas HTML convencionales
<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>
Estructura bsica de una pgina
En un solo archivo HTML hay varias pginas (pantallas) de

mvil
De este modo, se reduce el nmero de peticiones al servidor mientras

navegamos por la aplicacin
Cada pantalla ser una etiqueta con data-role=page
Habitualmente se usa <div>, pero se puede usar cualquier etiqueta
Cada pantalla suele tener cabecera, contenido y pie
El hola mundo de jQuery Mobile

<!DOCTYPE html>!
<html>!
! <head>!
! <title>Hola mundo</title>!
! <link rel="stylesheet" !
href="jquery.mobile-1.3.1.min.css"/>!
! <script src="jquery-1.7.min.js"></script>!
! <script src="jquery.mobile-1.3.1.min.js"></script>!
<meta charset="utf-8"/> !
<meta name="viewport" content="width=device-width,
initial-scale=1">
!
</head>!
<body>!
<div data-role="page">!
! <div data-role="header">!
! ! <h1>Cabecera</h1>!
! </div>!
! <div data-role="content">!
! ! <p>Esto es el contenido de la pgina</p>!
! </div>!
! <div data-role="footer">!
! ! <h4>Pie</h4>!
! </div>!
</div>!
</body>!
</html>!
Funcionamiento interno
Entre otras cosas, cuando se carga el HTML
Se disparan eventos a los que si nos interesa podemos asociar

listeners (pageinit, pagebeforeshow,...)
Se asocian clases CSS a los elementos con un data-role especial
Se asocian manejadores de evento javascript a los widgets
Se posicionan las cabeceras y pies
Navegacin
entre pginas
Frameworks web para

dispositivos mviles
14
Navegacin entre pginas

<div data-role="page">!
! <div data-role="header" id=principal>!
! ! <h1>Cabecera</h1>!
! </div>!
! <div data-role="content">!
!
<p>Esto es el contenido de la pgina</p>!
<p>Ir a la !
<a href="#secundaria"!
data-transition="slideup">!
secundaria</a>!
!
</p>!
! </div>!
! <div data-role="footer">!
! ! <h1>Pie</h1>!
! </div>!
</div>!
<div data-role= "page" id="secundaria">!
<div data-role="header" !
data-add-back-btn="true">!
!
Cmo se navega entre pantallas?
jQuery Mobile secuestra el evento de click sobre los enlaces
Se dispara una transicin CSS3 con la animacin de cambio de pgina

Por defecto es slideright, pero tambin hay slideleft, slideup, slidedown, flip,...
Dinmicamente se cambian las clases CSS de la pgina actual para

ocultarla y de la anterior para mostrarla
Disparando adems una serie de eventos: pagebeforeshow, pagebeforehide,
pageshow, pagehide
Se actualiza con javascript el historial de navegacin (para que si

pulsamos el back del navegador todo funcione correctamente)
Enlaces externos
Si el href no lleva el #, estamos enlazando a otro HTML
Por defecto no se cambia de pgina

Automticamente se hace una peticin AJAX para obtener el nuevo HTML
Se examina el nuevo HTML en busca de la primera etiqueta con datarole=page
Se inserta dinmicamente esta etiqueta en el DOM del HTML actual, ignorando
el resto
Se hace la transicin a la nueva pgina
Podemos hacer una navegacin convencional (cambiando totalmente

de HTML)
Ponerle al enlace un rel="external" o un data-ajax="false"
Dilogos
Pginas convencionales a las que se llega con un enlace con

data-rel="dialog"
No se incluyen en el historial de navegacin para que si hacemos
atrs no volvamos a ellas
<a href="#dialogo" data-rel="dialog">Abrir dilogo</a>
Elementos de
interfaz de
usuario
Frameworks web para

dispositivos mviles
19
Formularios
Por defecto los action usan AJAX
En lugar de saltar a la pgina devuelta por el servidor, esta se inserta

dinmicamente en el HTML actual
Por tanto, el servidor no debe devolver un HTML completo, sino
solo una pgina de jQuery Mobile
Para usar el comportamiento habitual (no AJAX), poner el

atributo data-ajax=false en el <form>
Campos de formulario
Se usan etiquetas HTML convencionales
jQuery Mobile les da look de mvil y en algunos casos,

funcionalidad tctil adicional
<div data-role="fieldcontain">!
<label for="usuario" class="ui-hidden-accessible">Usuario:</label>!
<input type="text" id="usuario" value="" placeholder="Usuario..."/>!
<label for="flip">Guardar datos:</label>!
!
<select name="flip" id="flip" data-role="slider">!
! !
<option value="no">No</option>!
! !
<option value="si">S</option>!
!
</select>!
</div>
Listas
En mviles es muy tpico tener listas que ocupan toda la

pantalla
Lista de tareas, contactos, eventos cercanos ...

En jQuery Mobile, <ul> con data-role=listview
Tambin es muy tpico que al pulsar en un elemento de la lista vayamos

a otra pantalla para ver los detalles
En jQuery Mobile, se pone simplemente un enlace dentro de cada <li> a la
pgina adecuada
Listas (II)
La variedad y sofisticacin de las listas en jQuery Mobile es

considerable. Algunas posibilidades:
Thumbnails (<img> dentro de cada <li>, jQuery automticamente

ajustar el tamao)
Separadores (etiquetas con data-role=list-divider)
Badges (tpica burbuja que indica cuntos elementos hay):
class=ui-li-count
Filtrar automticamente elementos: lista con data-filter="true"
Eventos
Frameworks web para

dispositivos mviles
24
Eventos importantes
Usar el $(document).ready para inicializar aspectos

globales de la aplicacin
Usar el evento pageinit de cada pgina para inicializar lo

propio de ella
Por ejemplo vincular un listener a un botn
Usar el pagebeforeshow para inicializar lo que puede cambiar

cada vez que se muestra
Por ejemplo, si es una lista generada dinmicamente, insertar los <li>
Ejemplo
//Esto se ejecuta una sola vez para el documento entero!

$(document).ready(function() {!
//personalizar el texto del botn para ir a la pgina anterior!
$.mobile.toolbar.prototype.options.backBtnText = "Atrs"!
})!
//Esto se ejecuta una sola vez para cada pgina, una vez inicializada!
//por jQuery (aadidas las clases CSS, ...)!
$('#pagBusqueda').on('pageinit', function() {!
$('#botonBuscar').click(buscar)
!
})!
//Aqu rellenaramos la pgina detalles con los datos pertinentes,!

//justo antes de mostrarla!
$('#pagDetalles').on('pagebeforeshow', function() {!
...!
})
Referencias
Aqu hemos visto solo unos cuantos conceptos, porque la

cantidad de atributos data-* es considerable
La documentacin de jQuery Mobile no es tan exhaustiva

como la de jQuery, pero tiene muchas demos integradas
http://demos.jquerymobile.com/1.4.2/
Referencias: libros
http://proquestcombo.safaribooksonline.com/ (solo
desde la UA)
!
jQuery Mobile Up and Running,OReilly 2012
!
!
jQuery Mobile Web Development Essentials 2nd
ed., Raymond Camden; Andy Matthews. Packt
Publishing, 2013

Frameworks Moviles

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Frameworks Moviles

Cargado por

Copyright:

Formatos disponibles

Tema 6

Frameworks web para

Frameworks web para mviles

Frameworks web para mviles

Nos permiten desarrollar un sitio web con aspecto y

Elementos de interfaz adaptado a mviles (botones grandes, listas,...)

Frameworks web para mviles

Definimos los elementos de pantalla con etiquetas HTML

!

Tipos de frameworks (II)

Frameworks web para mviles

Ms parecidos al concepto tpico de librera. Cuando queremos

jQT (antes jQTouch) http://jqtjs.com/

Sencha Touch http://www.sencha.com/products/touch/

Frameworks web para mviles

Aplicaciones web vs. sitios web

Frameworks web para mviles

La mayora de frameworks mviles estn orientados al

Sitio web mvil: conjunto de HTML enlazados entre s y adaptados a

No obstante, tambin pueden usarse para desarrollar sitios

Frameworks web para

Frameworks web para mviles

Probablemente el framework web para mviles ms conocido

widgets optimizados para mviles

Usar jQuery Mobile

Frameworks web para mviles 10

La mayora de widgets se obtienen poniendo atributos

Estructura bsica de una pgina

Frameworks web para mviles 11

En un solo archivo HTML hay varias pginas (pantallas) de

De este modo, se reduce el nmero de peticiones al servidor mientras

Cada pantalla suele tener cabecera, contenido y pie

El hola mundo de jQuery Mobile

Frameworks web para mviles 12

Frameworks web para mviles 13

Entre otras cosas, cuando se carga el HTML

Se disparan eventos a los que si nos interesa podemos asociar

Frameworks web para

Navegacin entre pginas

Frameworks web para mviles 15

Cmo se navega entre pantallas?

Frameworks web para mviles 16

jQuery Mobile secuestra el evento de click sobre los enlaces

Se dispara una transicin CSS3 con la animacin de cambio de pgina

Dinmicamente se cambian las clases CSS de la pgina actual para

Se actualiza con javascript el historial de navegacin (para que si

Frameworks web para mviles 17

Si el href no lleva el #, estamos enlazando a otro HTML

Por defecto no se cambia de pgina

Podemos hacer una navegacin convencional (cambiando totalmente

Frameworks web para mviles 18

Pginas convencionales a las que se llega con un enlace con

Frameworks web para

Frameworks web para mviles 20

Por defecto los action usan AJAX

En lugar de saltar a la pgina devuelta por el servidor, esta se inserta

Para usar el comportamiento habitual (no AJAX), poner el

Frameworks web para mviles 21

Se usan etiquetas HTML convencionales

jQuery Mobile les da look de mvil y en algunos casos,

Frameworks web para mviles 22

En mviles es muy tpico tener listas que ocupan toda la

Lista de tareas, contactos, eventos cercanos ...

Tambin es muy tpico que al pulsar en un elemento de la lista vayamos