Post on 15-Nov-2014
description
Framework desarrollo webapps
¿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 o Web
¿Cual es mejor?
App vs web móvil
Depende de
Los objetivos de la aplicación (juegos, aplicación,..)
Funcionalidades
Público destino
….
Aplicaciones nativas
• lenguaje de programación específico (ObjectiveC para iOS, Java de Android).
• Rápidos, fiables y potentes• Duplicación de código para varias
plataformas• Dependencia de los dispositivo
Casi todos los juegos son aplicaciones nativas.
Aplicaciones web
• lenguaje de programación HMTL + JS + CSS.
• Rápidos, fiables y potentes• Código único• Rapidez de desarrollo• Bajos costes de mantenimientos• Acceder a caracterísiticas del
dispositivo mediante navegador• Major flexibilidad
Características HTML5
Semantics
Offline & Storage
Multimedia
Device Access
Graphics & Effects
User interface
HTML5 Technologies
Nuevos Elementos Forms
App Cache HTML5 SQL
Audio Video
File
Geolocation
Drag and drop
SVG
Canvas
WebGL
HTML5HTML5 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
Area JQueryMobile Sencha Touch SproutCore DHTMLX Touch jQTouch Dojo Toolkit Vaadin GWTExecution 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 Documentation
65% 65% 65% 65% 65% 65% 65% 65%
Acumulated score 3,20 3,17 2,23 2,47 2,55 2,44 2,10 2,36Average 80,06% 79,32% 55,78% 61,72% 63,64% 60,91% 52,52% 59,11%
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.
Fuente: everis
jQueryMobilejQuery 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.
Navegadores soportados
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><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body></html>
Se centra en usar etiquetas HTML con atributos definidos. Al mostrar la página crea lo necesario para mostrar los componentes.
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><!-- /header -->
<div data-role="content" class="ui-content" role="main">
<p>Page content goes here</p>
</div><!-- /content -->
<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><!-- /footer -->
</div><!-- /page -->
<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"> <div data-role="header"> : </div> <div data-role="content"> : </div> <div data-role="footer"> : </div></div>::<div data-role="page" id=page2"> <div data-role="header"> : </div> <div data-role="content"> : </div> <div data-role="footer"> : </div></div>
En cada página hay que definir todas las secciones de nuevo
Página 1
Página 2
Atributos – Data-*Component HTML5 data-*
Header, Footer <div data-role="header"><div data-role="footer">
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 (Select menu)
<div data-role="fieldcontain"> <label for="select-options" class="select">Choose an option:</label> <select name="select-options" id="select-options"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option2">Option 3</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">
jQm - Controles
ListasLas 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>
ListasLista 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>
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
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.
Formato contenido
TransicionesDispone 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
EventosjQuery 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..
$(document).ready(function() { ... });
EventosEventos 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()
$("#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 coloresjQueryMobile 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áginasViewport 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ónPermiten 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 DOMManejo del tamaño de la DOMjQuery 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áginasCarga 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 DOMSe 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 });
JSONjQueryMobile 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=any&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.
TesteoSimuladores• 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
DUDAS - PREGUNTAS
Gracias
Josep Maria Tusetjmtuset@gmail.com@jmtuset