#FormaciónEBusiness
Aplicaciones móviles
Carlos Alonso Pérez
#FormaciónEBusiness
COMPARTE Y DEBATE #DIPLOMADOAPPS
Índice de contenidos
• Introducción al desarrollo móvil • Responsive Web Design • jQuery Mobile
Introducción al desarrollo móvil
Introducción al desarrollo móvil
• Cada nuevo teléfono que aparezca tendrá un navegador. • El uso de las web por dispositivos móviles pronto superará
al escritorio. • La web es la única tecnología realmente multiplataforma. • El desarrollo para móviles es un desarrollo bastante
complicado y exigente, pero ninguna otra tecnología permite realmente alcanzar CUALQUIER plataforma.
Responsive Web Design
No Responsive Web Design
Responsive Web Design
Responsive Web Design
• Conjunto de técnicas desarrolladas por el diseñador web Ethan Marcotte.
• Los sitios web diseñados utilizando estas técnicas adaptan su layout al entorno.
• Principalmente reglas CSS. • Dependiendo del valor de ciertas condiciones (tamaño,
orientación, etc…) el sitio se muestra de una forma u otra.
Técnicas RWD
• CSS3 Media Queries • Evaluando algunas capacidades del navegador,
decidimos qué CSS aplicar. • Layout fluidos
• Utilizando medidas CSS relativas en lugar de absolutas • Images y medios fluidos.
• Las imágenes escalan para ocupar todo el espacio.
Índice de contenidos
• Introducción al jQuery Mobile • Primeros Pasos • Componentes • Transiciones • Eventos • Temas
jQuery Mobile
• Framework Web optimizado para dispositivos móviles. • Construido sobre la librería jQuery. • Utiliza HTML5, CSS3, JS y AJAX para renderizar páginas
con mínimo esfuerzo. • Lleva el principio jQuery ‘write less, do more’ al siguiente
nivel, aplicando un diseño y funcionalidad atractiva y que funciona exactamente igual en todos los navegadores.
• Construido buscando máxima accesibilidad, progressive enhancement y RWD.
jQuery Mobile
Solución multiplataforma
Introducción: Páginas
• Una página consiste en un elemento HTML con atributo data-role=“page”.
• Dentro de éste contenedor, cualquier elemento HTML válido es aceptado.
Introducción: Navegación AJAX
• Sistema de navegación AJAX. • Ofrece soporte para añadir un botón Back. • Intercepta cualquier enlace o formulario y lo convierte en AJAX. • Mientras la petición espera, un spinner aparece en pantalla. • Cuando la petición termina, inserta en el DOM el primer elemento de
tipo página que encuentre (data-role=‘page’). El resto es descartado. • A continuación mejora todos los widgets de esa página para conseguir
el look & feel deseado. • Finalmente la nueva página se hace visible mediante una transición. • Anota el título para el elemento de navegación.
Introducción: Contenido y Widgets
• jQuery Mobile incluye una buena variedad de widgets:
– Elementos de formulario – Colapsables – Popups – Cuadros de diálogo – Tablas – Listas –…
Introducción: Tematizando
• jQuery Mobile incluye un framework de tematizado que nos permitirá cambiar el aspecto de los componentes nativos de forma sencilla.
• Swatches: • Diferentes conjuntos de colores para toolbars, contenido y
botones. • Cada tema puede contener hasta 26.
• jQuery Mobile ThemeRoller: • Herramienta web para crear tus propios temas. • http://themeroller.jquerymobile.com/
Primeros pasos
Enlazando el framework
Igual que con jQuery, enlazamos el framework desde un CDN
<head> … <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script src=“http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js”> </script> …</head>
Enlazando el framework: Ejercicio!
• Enlazar el framework jQuery Mobile al proyecto del simulador de carreras.
• ¿Qué ha ocurrido con el botón de run? ¿Por qué?
Viewport
• Los navegadores móviles renderizan las páginas en una ventana virtual. • Esta ventana es normalmente más ancha que la pantalla, así evita
estrechar y romper el aspecto de las páginas no diseñadas para móviles.
• Safari Mobile introdujo el tag viewport para permitir a los desarrolladores controlar el tamaño de esa ventana virtual.
• Viewport no es parte de ningún estándar, aunque la mayoría de los navegadores móviles ya lo usan.
Viewport
http://mrcalonso.com/viewport-html5-y-emulacion/
Viewport y emuladores
Páginas• La página es la unidad fundamental en jQuery Mobile. • Se utilizan para agrupar contenido y meterlo y sacarlo de la pantalla de
forma animada. • Un documento HTML puede contener:
• Una página e ir añadiendo más al DOM bajo demanda utilizando AJAX.
• Múltiples páginas e ir navegando entre ellas sin necesidad de hacer más peticiones al servidor.
http://api.jquerymobile.com/page/
<div data-role=“page">
<div data-role="header"> <h1>Page Title</h1> </div><!-- /header -->
<div role="main" class="ui-content"> <p>Page content goes here.</p> </div><!-- /content -->
<div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer —>
</div><!-- /page -->
Páginas
Páginas: Ejercicio!Recubrir todo el contenido HTML de nuestro proyecto simulador de carreras en una página jQuery Mobile con header y footer.
<div data-role=“page">
<div data-role="header"> <h1>Car racing simulator</h1> </div>
<div role="main" class="ui-content"> .... </div>
<div data-role="footer"> <h4>Footer</h4> </div>
</div>
Páginas: Ejercicio!Recubrir todo el contenido HTML de nuestro proyecto simulador de carreras en una página jQuery Mobile con header y footer.
<div data-role=“page">
<div data-role="header"> <h1>Page Title</h1> </div><!-- /header -->
<div role="main" class="ui-content"> <p>This is page 1</p> </div><!-- /content -->
<div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer —>
</div><!-- /page -->
Múltiples páginas.
<div data-role=“page">
<div data-role="header"> <h1>Page Title</h1> </div><!-- /header -->
<div role="main" class="ui-content"> <p>I’m page 2!.</p> </div><!-- /content -->
<div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer —>
</div><!-- /page -->
<div data-role=“page">
<div data-role="header"> <h1>Page Title</h1> </div><!-- /header -->
<div role="main" class="ui-content"> <a href=“#page2”>page 2</a> </div><!-- /content -->
<div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer —>
</div><!-- /page -->
Navegación
<div data-role=“page" id="page2">
<div data-role=“header" data-add-back-btn="true"> <h1>Page Title</h1> </div><!-- /header -->
<div role="main" class="ui-content"> <p>I’m page 2!.</p> </div><!-- /content -->
<div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer —>
</div><!-- /page -->
$(‘button’).click(function(){ $.mobile.changePage($(“#page2"));});. . . <div data-role=“page">
<div data-role="header"> <h1>Page Title</h1> </div><!-- /header -->
<div role="main" class="ui-content"> <button>page 2</button> </div><!-- /content -->
<div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer —>
</div><!-- /page -->
Navegación
<div data-role=“page" id="page2">
<div data-role=“header" data-add-back-btn="true"> <h1>Page Title</h1> </div><!-- /header -->
<div role="main" class="ui-content"> <p>I’m page 2!.</p> </div><!-- /content -->
<div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer —>
</div><!-- /page -->
Múltiples páginas: Ejercicio!
• Reestructurar el proyecto de forma que cada pantalla sea una página y navegar de una a otra con alguno de los métodos vistos.
• Reescribir el código JS necesario para asumir este cambio. • Eliminar el código innecesario. ¿Es necesaria la clase css hidden?
Múltiples páginas: Solución!
<div data-role="page" id="race_config"> <div data-role="header"> <h1>Car racing simulator</h1> </div> <div role="main" class="ui-content"> <p>Waiting drivers...</p> <button disabled>Run!</button> </div> <div data-role="footer"> <h4>Footer</h4> </div></div>
$.mobile.changePage($(“#race"));
Cuadros de diálogo
<div data-role="page" data-dialog="true" id="pagetwo"> <div data-role="header"> <h1>I'm A Dialog Box!</h1> </div>
<div data-role="main" class="ui-content"> <p>The dialog box…</p> <a href="#pageone">Go to Page One</a> </div>
<div data-role="footer"> <h1>Footer Text In Dialog</h1> </div></div>
http://api.jquerymobile.com/dialog/
Cuadros de diálogo: Ejercicio!Queremos que la página que indica cuál fue el coche ganador se muestre como un cuadro de diálogo con un botón para cerrarlo y pasar a la siguiente pantalla.
Cuadros de diálogo: Ejercicio!Queremos que la página que indica cuál fue el coche ganador se muestre como un cuadro de diálogo con un botón para cerrarlo y pasar a la siguiente pantalla.
<div data-role="page" data-dialog="true" id="race_results"> <div data-role="header"> <h1>Results</h1> </div> <div role="main" class="ui-content"> <p></p> <button>Close</button> </div> <div data-role="footer"> <h4>Footer</h4> </div></div>
$('#race_config button').click(function() { $.mobile.changePage($("#race")); race.start();});
$('#race_results button').click(function() { $.mobile.changePage($("#ranking"));});
ListasjQuery Mobile incluye también una forma sencilla de incluir listas integradas en nuestras aplicaciones.
<ol data-role=“listview”>. . .</ol>
http://api.jquerymobile.com/listview/
Listas: Ejercicio!
Queremos ahora integrar la lista del ranking con el estilo jQuery Mobile.
Listas: Ejercicio!
Queremos ahora integrar la lista del ranking con el estilo jQuery Mobile.
<div data-role="page" id="ranking"> <div data-role="header"> <h1>Ranking</h1> </div> <div role="main" class="ui-content"> <ol data-role="listview"> </ol> </div> <div data-role="footer"> <h4>Footer</h4> </div></div>
TransicionesjQuery Mobile incluye una serie de efectos CSS3 que podemos utilizar para animar el cambio de páginas.
• Fade (por defecto)
• Flip
• Flow
• Pop
• Slide
• Slidefade
• Slideup
• Slidedown
• Turn
• None
<div data-role=“page"> . . . <div role="main" class="ui-content"> <a href="#page2" data-transition="flow">page 2</a> </div></div><!-- /page -->
$.mobile.changePage($(“#ranking”), { transition: “flow”});
Transiciones: Ejemplos
Transiciones: Ejercicio!Probar todas las diferentes transiciones y añadir una transición adecuada para mostrar cada página.
• Fade (por defecto) • Flip • Flow • Pop • Slide
• Slidefade • Slideup • Slidedown • Turn • None
Eventos
Eventos jQuery +
• Eventos de toque • Eventos de scroll • Eventos de cambio de orientación • Eventos de página
http://api.jquerymobile.com/category/events/
Eventos
Eventos de toque y barrido
• tap• taphold• swipe• swiperight• swipeleft
Eventos
Eventos de toque y barrido
• tap• taphold• swipe• swiperight• swipeleft
Eventos de orientación
• orientationchange
Eventos
Eventos de toque y barrido
• tap• taphold• swipe• swiperight• swipeleft
Eventos de orientación
• orientationchange
Eventos de scroll
• scrollstart• scrollstop
Eventos de página
Eventos de inicialización
• pagebeforecreate• pagecreate
$(document).on(“pagecreate”, function(event){ . . .});
Eventos de página
Eventos de inicialización
• pagebeforecreate• pagecreate
$(document).on(“pagecreate”, function(event){ . . .});
Eventos de transición
• pagebeforeshow• pageshow• pagebeforehide• pagehide
$(document).on(“pageshow”, “#pageid”, function(event){ . . .});
Eventos de página: Ejercicio!Queremos que la carrera comience exactamente cuando la página correspondiente ya esté visible en pantalla, no antes como ocurre ahora.
Eventos de página: Ejercicio!Queremos que la carrera comience exactamente cuando la página correspondiente ya esté visible en pantalla, no antes como ocurre ahora.
<script> var race; $(document).ready(function() { });
$(document).on('pageshow', '#race', function() { race.start(); });</script>
TablasjQuery Mobile proporciona dos tipos de tablas.
• Reflow: Intenta colocar la tabla en horizontal, pero si no cabe entonces lo hará en vertical
<table data-role=“table” class=“ui-responsive”>
Tablas
• Mostrando/Ocultando columnas: Oculta las columnas que no caben y muestra un botón para que el usuario seleccione cuáles quiere mostrar/ocultar.
<table data-role=“table” data-mode="columntoggle" class=“ui-responsive”>
Contenido dinámico. Widgets.• jQuery Mobile aplica estilos y formato en el momento de cargar la
página, pero ¿Qué pasa con el contenido que añadimos dinámicamente después de ese momento?
• Debemos indicar al framework que estamos añadiendo contenido y por lo tanto debe aplicarle los estilos, transiciones etc…
// Creación…$(‘#new_page’).page();$(‘#new_a’).button();
// Actualización…$(‘#checkbox’).val(‘true’).checkboxradio(‘refresh’);$(‘#mytable’).table(‘refresh’);
Tablas y contenido dinámico: Ejercicio!• Queremos aplicar el estilo jQuery Mobile a la tabla con la carrera
de los coches. • Tener en cuenta que esta tabla se rellena dinámicamente. • ¿Qué ocurre cada vez que se modifica el contenido de la tabla?
Tablas y contenido dinámico: Ejercicio!
<table data-role="table" class="ui-responsive">
• Queremos aplicar el estilo jQuery Mobile a la tabla con la carrera de los coches.
• Tener en cuenta que esta tabla se rellena dinámicamente. • ¿Qué ocurre cada vez que se modifica el contenido de la tabla?
Tablas y contenido dinámico: Ejercicio!
<table data-role="table" class="ui-responsive">
• Queremos aplicar el estilo jQuery Mobile a la tabla con la carrera de los coches.
• Tener en cuenta que esta tabla se rellena dinámicamente. • ¿Qué ocurre cada vez que se modifica el contenido de la tabla?
Race.prototype = { start: function() { $('table').trigger('RACE_START'); $(‘table').table('refresh');… }, add_finished: function(car_num) { $(‘table’).table(‘refresh');… }};
TemasjQuery Mobile proporciona dos temas diferentes por defecto llamados “a” y “b”. Cada uno con diferentes colores, fuentes, barras, etc…
<div data-role=“page” data-theme=“b”>
Temas: Ejercicio!
Compón tu propio tema utilizando ThemeRoller y aplícalo al proyecto.
#FormaciónEBusiness
GRACIAS. Carlos Alonso Pérez @calonso