Tema 6
Parte III
Frameworks web para dispositivos mviles
Frameworks web para dispositivos mviles
1Introduccin
2
Frameworks web para mviles
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
3
Frameworks web para mviles
Tipos de frameworksDe 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
!!!
4
!!! Todos! Add!!! Do something! Do something else! Finish these damn demos!!Completed!! ! Write eblast!!!
Frameworks web para mviles
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
5
Ext.application({! name: 'Sencha',! launch: function() {! Ext.create("Ext.TabPanel", {! fullscreen: true,! items: [! {! title: 'Home',! iconCls: 'home',! html: 'Welcome'! }! ]! });! }!});!
Frameworks web para mviles
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
6
Frameworks web para mviles
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
7
Frameworks web para dispositivos mviles
2JQuery Mobile: conceptos bsicos
8
Frameworks web para mviles
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)
9
Frameworks web para mviles
Usar jQuery Mobile
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
10
!! Cancel!! Edit Contact!! Save!
Frameworks web para mviles
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 , pero se puede usar cualquier etiqueta
Cada pantalla suele tener cabecera, contenido y pie
11
Frameworks web para mviles
El hola mundo de jQuery Mobile12
!!! !! Hola mundo!! !! !! ! !
!
!!!! !! ! Cabecera!! !! !! ! Esto es el contenido de la pgina!! !! !! ! Pie!! !!!!
Frameworks web para mviles
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
13
Frameworks web para dispositivos mviles
3Navegacin entre pginas
14
Frameworks web para mviles
Navegacin entre pginas15
!! !! ! Cabecera!! !! !! Esto es el contenido de la pgina! Ir a la ! !
secundaria!! !! !! !! ! Pie!! !!! ! !
Frameworks web para mviles
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)
16
Frameworks web para mviles
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 data-role=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"
17
Frameworks web para mviles
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
18
Abrir dilogo
Frameworks web para dispositivos mviles
4Elementos de interfaz de usuario
19
Frameworks web para mviles
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
20
Frameworks web para mviles
Campos de formulario
Se usan etiquetas HTML convencionales
jQuery Mobile les da look de mvil y en algunos casos, funcionalidad tctil adicional
21
! Usuario:! ! Guardar datos:!! !! ! No!! ! S!! !
Frameworks web para mviles
Listas
En mviles es muy tpico tener listas que ocupan toda la pantalla
Lista de tareas, contactos, eventos cercanos ... En jQuery Mobile, 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 a la pgina adecuada
22
Frameworks web para mviles
Listas (II)
La variedad y sofisticacin de las listas en jQuery Mobile es considerable. Algunas posibilidades:
Thumbnails ( dentro de cada , 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"
23
Frameworks web para dispositivos mviles
5Eventos
24
Frameworks web para mviles
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
25
Frameworks web para mviles
Ejemplo26
//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() {! ...!})
Frameworks web para mviles
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/
27
Frameworks web para mviles
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
28
Top Related