Your SlideShare is downloading. ×
  • Like
JqueryMobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,190
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
137
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Framework desarrollo webapps
  • 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
  • 3. App o Web¿Cual es mejor?
  • 4. App vs web móvilDepende 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 navegadorCasi todos los juegos son aplicaciones • Major flexibilidadnativas.
  • 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. HTML5HTML5 es un lenguaje multiplataforma por lo que permite el desarrollo de aplicaciones sinpreocuparse de los sistemas operativos de los dispositivos que la usan, al contrario de lo quesucede con las aplicaciones nativas.Las aplicaciones HTML5 se acercan rápidamente a las posibilidades de las aplicacionesnativas con la ventaja del control de la aplicación y el ahorro económico que suponedesarrollar en múltiples plataformas.Para el desarrollo multiplataforma en HTML5 han aparecido numerosos frameworks. Aunqueestén basados en HTML5 su compatibilidad en múltiples dispositivos depende de diversosfactores.
  • 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. 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 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 65% 65% 65% 65% 65% 65% 65% 65%DocumentationAcumulated 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%Fuente: everis
  • 9. jQueryMobilejQuery Mobile es un framework de interfaz de usuario de desarrollo de web que permitedesarrollar aplicaciones web para móviles que trabajen en cualquier Smartphone yTablet.El jQuery Mobile framework se basa en el core de jQuery y proporciona una serie deherramientas, incluyendo el manejo del DOM de HTML y XML, el control de evento, lacomunicación con el servidor a través de Ajax, así como los efectos de animación y deimá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.
  • 10. Navegadores soportados
  • 11. 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"> Se centra en usar etiquetas <p>Page content goes here.</p> HTML con atributos definidos. </div><!-- /content --> Al mostrar la página crea lo <div data-role="footer"> necesario para mostrar los <h4>Page Footer</h4> </div><!-- /footer --> componentes.</div><!-- /page --></body></html>
  • 12. 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><divid="myEventWatcherDiv" style="display:none;"></div></body></html>
  • 13. Estructura multi página<div data-role="page" id=page1"> <div data-role="header"> : En cada página hay que </div> definir todas las secciones de <div data-role="content"> : nuevo </div> Página 1 <div data-role="footer"> : </div></div>::<div data-role="page" id=page2"> <div data-role="header"> : </div> <div data-role="content"> : Página 2 </div> <div data-role="footer"> : </div></div>
  • 14. 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>
  • 15. Atributos – Data-*Component HTML5 data-*Form element <div data-role="fieldcontain">(Select menu) <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">
  • 16. jQm - Controles
  • 17. ListasLas listas son un tipo de elemento fundamental de la interfaz de usuario, son muyutilizados 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 debuscador, seleccionables y de sólo lectura,…Todas las listas se construyen igual y en función de atributos o estructuras que definimosse 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>
  • 18. ListasLista con burbujaAñ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>
  • 19. Listas http://jquerymobile.com/demos/1.0/docs/lists/index.html
  • 20. HTML5 inputsHTML5 tiene varios tipos de “input types”• email• url• number• range• Date pickers (date, month, week, time, datetime, datetime-local)• search• color
  • 21. Formato contenidoGrids: facilitan distribución contenido• 2 columnas: ui-grid-a• 3 columnas: ui-grid-b• 4 columnas: ui-grid-c• 5 columnas: ui-grid-dContenido expandible: Minimizan el contenido amostrar i el usuario elige que quiere expandir.Acordeones:Se pueden combinar los diferentes formatos.
  • 22. 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
  • 23. EventosjQuery Mobile añade algunos eventos específico para móviles que se pueden utilizar para detectar lasacciones 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..
  • 24. 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() $(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áginapor primera vez o en cada visita. (Event binding!)
  • 25. 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>
  • 26. Temas de colores http://jquerymobile.com/themeroller/
  • 27. 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">
  • 28. CSS3CSS específicos según resoluciónMediante CSS3 se puede cambiar completamente una página.Utilizando la propiedad media de CSS se pueden aplicar CSSdiferentes a la misma página@media all and (min-width: 650px){ …. }@media all and (min-width: 750px){ …. }
  • 29. 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>
  • 30. 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 });
  • 31. JSONjQueryMobile permite interpretar datos en formato json i poder mostrar directamente los datospor pantalla.Un código como el siguiente permite cargar las últimas 10 imágenes sobre el tag android enFlicker 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>
  • 32. Detección de dispositivosUna de las principales problemáticas que tiene la creación de aplicaciones webpara terminales móviles, es la amplia variedad de dispositivos con los que unusuario 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 puedeser utilizado desde una aplicación j2ee, php y .Net para conocer lasprincipales características (resolución de pantalla, si soporta javascript, ...) delterminal que está haciendo la petición. http://wurfl.sourceforge.net/
  • 33. Plugins jQueryMobilejQuery Mobile va incrementando la cantidad de pluginsque le permiten expandir sus posibilidades, entre estasexpansiones 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.
  • 34. TesteoSimuladores• Económico• No son 100% fiables. Para una aproximaciónfuncionan.• Abarcas gran gama de dispositivosDispositivos• Coste elevado• Máxima fiabilidadLo importante no es tanto testear dispositivos enconcreto sino los diferentes SO con los navegadores.
  • 35. Ejemplos http://www.slideshare.net/mobile http://m.life.com http://m.stanford.edu/ http://m.box.com/ http://m.riu.com
  • 36. DUDAS - PREGUNTAS
  • 37. Gracias Josep Maria Tuset jmtuset@gmail.com @jmtuset