Aplicaciones móviles - HTML5

#FormaciónEBusiness

Aplicaciones móviles

Carlos Alonso Pérez

http://www.interlat.co/

http://communitymanagerslatam.com/

http://www.upb.edu.co/


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


• 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/

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>

http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js

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>

<div role="main" class="ui-content"> <p>Page content goes here.</p> </div>

<div data-role="footer"> <h4>Page Footer</h4> </div>

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="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 role="main" class="ui-content"> <p>This is page 1</p> </div>


</div>

Múltiples páginas.



<div role="main" class="ui-content"> <p>I’m page 2!.</p> </div>


</div>

<div role="main" class="ui-content"> <a href=“#page2”>page 2</a> </div>


</div>

Navegación

<div data-role=“page" id="page2">

<div data-role=“header" data-add-back-btn="true"> <h1>Page Title</h1> </div>



</div>

$(‘button’).click(function(){ $.mobile.changePage($(“#page2"));});. . . <div data-role=“page">


<div role="main" class="ui-content"> <button>page 2</button> </div>


</div>

Navegación

<div data-role=“page" id="page2">

<div data-role=“header" data-add-back-btn="true"> <h1>Page Title</h1> </div>



</div>

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/

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>

$.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 orientación

• orientationchange

Eventos



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



Temas: Ejercicio!

Compón tu propio tema utilizando ThemeRoller y aplícalo al proyecto.


GRACIAS. Carlos Alonso Pérez @calonso




Aplicaciones móviles - HTML5

Mobile

Transcript of Aplicaciones móviles - HTML5