Aplicaciones móviles - HTML5

#FormaciónEBusiness
Aplicaciones móviles
Carlos Alonso Pérez

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

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.

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.

<h1>Car racing simulator</h1>
</div>
....
</div>
<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.

<h1>Page Title</h1>
<p>This is page 1</p>
</div>
Múltiples páginas.
<h1>Page Title</h1>
<p>I’m page 2!.</p>
</div>

<h1>Page Title</h1>
<a href=“#page2”>page 2</a>
</div>
Navegación
<div data-role=“page" id="page2">
<div data-role=“header"
data-add-back-btn="true">
<h1>Page Title</h1>
</div>

$(‘button’).click(function(){
$.mobile.changePage($(“#page2"));
});
. . .
<h1>Page Title</h1>
<button>page 2</button>
</div>
Navegación
<div data-role=“page" id="page2">
<div data-role=“header"
data-add-back-btn="true">
<h1>Page Title</h1>
</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">
<h1>Car racing simulator</h1>
</div>
<p>Waiting drivers...</p>
<button disabled>Run!</button>
</div>
<h4>Footer</h4>
</div>
</div>
$.mobile.changePage($(“#race"));

Cuadros de diálogo
<div data-role="page" data-dialog="true" id="pagetwo">
<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>
<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">
<h1>Results</h1>
</div>
<p></p>
<button>Close</button>
</div>
<h4>Footer</h4>
</div>
</div>
$('#race_config button').click(function() {
$.mobile.changePage($("#race"));
race.start();
});
$('#race_results button').click(function() {
$.mobile.changePage($("#ranking"));
});

Listas
jQuery 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">
<h1>Ranking</h1>
</div>
<ol data-role="listview">
</ol>
</div>
<h4>Footer</h4>
</div>
</div>

Transiciones
jQuery 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
. . .
<a href="#page2" data-transition="flow">page 2</a>
</div>
</div>
$.mobile.changePage($(“#ranking”), { transition: “flow”});

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
• tap
• taphold
• swipe
• swiperight
• swipeleft
Eventos de orientación
• orientationchange

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

Tablas
jQuery 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?

<table data-role="table" class="ui-responsive">
de los coches.

<table data-role="table" class="ui-responsive">
de los coches.
Race.prototype = {
start: function() {
$('table').trigger('RACE_START');
$(‘table').table('refresh');
…
},
add_finished: function(car_num) {
$(‘table’).table(‘refresh');
…
}
};

Temas
jQuery 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
http://themeroller.jquerymobile.com/

Temas: Ejercicio!
Compón tu propio tema utilizando ThemeRoller y aplícalo al proyecto.

GRACIAS.
Carlos Alonso Pérez
@calonso

Aplicaciones móviles - HTML5

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Destacado

Destacado (16)

Similar a Aplicaciones móviles - HTML5

Similar a Aplicaciones móviles - HTML5 (20)

Aplicaciones móviles - HTML5