Este documento presenta una introducción al desarrollo de aplicaciones móviles con HTML5. Explica la evolución de la web y cómo ahora es posible crear aplicaciones completas en ella de forma multiplataforma. Luego, analiza el caso práctico de crear una aplicación que funcione en todos los dispositivos para llegar a más público, y propone usar tecnologías como jQuery Mobile para lograrlo de forma sencilla. Finalmente, muestra los primeros pasos para construir una aplicación multiplataforma con esta librería.

1. www.interlat.co
–
info@interlat.co
-­‐
h2p://www.facebook.com/interlat
-­‐
www.twi2er.com/interlat
-­‐
PBX:
57(1)
658
2959
-­‐
Bogotá
-­‐
Colombia
Aula
Virtual:
h2p://www.interlat.co/moodle/
Conferencista:
Carlos Alonso Pérez
País: España
Módulo IV:
Móvil Apps Desarrollo con
HTML5

2. Índice
de
contenidos
• La
Web
• Caso
prácPco
de
desarrollo
• jQuery
Mobile
• HTML5

3. La
web:
Evolución
• Inicialmente:
Herramienta
para
visualizar
archivos
remotos
que
cambiaban
muy
ocasionalmente.
• El
contenido
se
genera
dinámicamente
en
los
servidores.
• Se
añade
interacPvidad
a
los
siPos
web.
• Pasan
unos
años
en
blanco...
• Se
permite
comunicar
a
la
web
con
los
servidores
sin
necesidad
de
recargar
la
página
al
completo.
• Se
añade
soporte
naPvo
y
estándar
para
muchas
caracterísPcas
mulPmedia
y
de
gráficos.
Se
aumentan
las
prestaciones
con
caracterísPcas
como
geolocalización,
almacenamiento
local
de
datos,
etc...

4. La
web
• La
web
es
un
entorno
completo
de
programación
de
aplicaciones
que
uPliza:
• HTML
para
definir
su
estructura
• CSS
para
definir
la
presentación
• JS
para
la
lógica

5. Desarrollo
web:
Evolución
• El
desarrollo
es
simplemente
maquetación.
• Se
añade
interacPvidad
con
JS,
pero
solo
como
elemento
“decoraPvo”,
nada
importante.
Nadie
se
plantea
que
JS
valga
para
otra
cosa.
• Aparecen
DOM
y
AJAX.
Las
páginas
web
ya
pueden
comunicarse
con
servidores
sin
recargar
la
página.
Son
mucho
más
usables
y
úPles.
• 2007:
Aparece
Google
Gears:
Extensión
para
navegadores
que
añadía
capacidades
como
almacenamiento
local,
threads
en
background,
etc...
• Actualmente
podemos
desarrollar
aplicaciones
web
prácPcamente
como
si
se
tratase
de
aplicaciones
de
escritorio.

6. Aplicaciones
Web:
Ventajas
• Para
el
usuario:
– No
Pene
necesidad
de
instalar
la
aplicación
ni
desinstalarla
si
no
le
gusta.
– Actualizaciones
transparentes.
• Para
el
desarrollador:
– Ventajas
de
sus
usuarios:
• No
hay
que
escribir
código
de
instaladores/desinstaladores
• Desarrollar
una
aplicación
con
pequeños
incrementos
y
saber
que
todos
los
usuarios
estarán
actualizados
siempre.
– La
web
es
mulPplataforma,
por
tanto,
las
aplicaciones
web
son
mulPplataforma.

7. Aplicaciones
Web:
Desventajas
• Se
ejecuta
en
el
navegador
• Los
datos
se
deben
descargar
del
servidor.
Rendimiento

8. Caso
PrácPco
• ObjePvos
• Problemas
• Soluciones
• Viabilidad
• Decisión
final

9. ObjePvos:
Triunfar

10. ObjePvos:
Triunfar

11. ¿Qué
hace
falta
para
triunfar?

12. ¿Qué
hace
falta
para
triunfar?

13. ¿Qué
hace
falta
para
triunfar?

14. ¿Qué
hace
falta
para
triunfar?
Y ...

15. Llegar
a
todos
los
públicos

16. Fragmentación

17. Fragmentación
en
Sistemas
OperaPvos

18. Fragmentación
en
pantallas

19. Fragmentación
método
de
entrada

20. Fragmentación
hardware

21. Fragmentación
errores
soqware

22. Fragmentación
conclusión
Equilibrio
Capacidades utilizadas
Clientes Potenciales
vs

23. Solución:
Desarrollo
mulPplataforma

24. Solución:
Tecnologías

25. Viabilidad
• Geolocalización
(GPS)
• Reproducción
mulPmedia
• Sensores
de
movimiento
• Almacenar
datos
locales
• Acceso
offline
• Otros
sensores
• Cámara
• NoPficaciones
• Web
GL
• Alto
rendimiento
h2p://mobilehtml5.org/
SI NO

26. Decisión
final

27. jQuery-­‐Mobile
• MulPplataforma,
mulPdisposiPvo
y
mulPnavegador
• Interfaz
opPmizada
para
disposiPvos
tácPles
• Diseño
comletamente
personalizable
• HTML5
no
intrusivo
• Carga
contenido
dinámico
a
través
de
AJAX
• Construido
sobre
el
ya
conocido
jQuery
• Ligero
• Mejora
progresiva
• ...

28. Probando
nuestras
aplicaciones
• Apache
HTTP
Web
Server
+
• DisposiPvos
• DisposiPvos
reales
• Navegadores
remotos
• h2p://www.deviceanywhere.com
• Emuladores
y
Simuladores
• Amigos

29. Construyendo
una
app
mulPplataforma
• h2p://diplomado-­‐test.herokuapp.com/demos

30. Primeros
pasos
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Your Title</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.8.2.min.js">
</script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>

31. Primeros
pasos
<!DOCTYPE html>
<html>
<head>
...
<meta name="viewport"
content="width=device-width, initial-scale=1">
...
</head>
<body>
</body>
</html>
• Inicialmente
no
debería
estar
escalado
ni
ser
más
ancho
que
el
disposiPvo.

32. Arquitectura
• Unidad
básica:
page
• Cada
página
es
un
div
con
un
role
específico
• Un
documento
HTML
puede
contener
varias
páginas,
pero
sólo
una
será
visible.

33. Arquitectura
• Cada
página
está
compuesta
de
otras
secciones
• Cada
sección
es
un
div
con
un
role
específico
Role Descripción Role Descripción
page Define
una
página header Cabecera
de
página
content Contenido
de
página footer Pie
de
página
navbar Barra
de
navegación. button Un
botón
controlgroup Un
componente collapsible
Panel
de
contenido
colapsable
collapsible-set
Grupo
de
paneles
colapsables fieldcontain
Contenedor
de
campos
de
formulario
listview Una
lista dialog Cuadro
de
diálogo
slider Control
de
valores
booleanos

34. La
página
• La
única
sección
obligatoria
es
content
<body>
<div data-role="page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<p>Content</p>
</div>
<div data-role="footer"
data-position="fixed">
<h4>Footer</h4>
</div>
</div>
</body>

35. Navegación
• Se
uPlizan
enlaces
HTML
<a>
• Tipos
de
enlaces:
• A
otra
página
del
mismo
documento
• A
una
página
en
otro
documento
• Absolutos,
a
otra
página
web
• Especiales
(SMS,
llamada,
etc...)
• jQuery
Mobile
se
encarga
de
manejar
el
historial
para
poder
volver
atrás.

36. Navegación
• Enlace
a
otra
página
del
mismo
documento
<body>
<div data-role="page" data-title="Pagina 1">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<p>Go to page <a href="#page2">2</a></p>
</div>
<div data-role="footer"
data-position="fixed">
<h4>Footer</h4>
</div>
</div>
<div data-role="page" id="page2" data-title="Pagina 2"
data-add-back-btn="true" data-back-btn-text="Previous">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<p>Content of page 2</p>
</div>
<div data-role="footer"
data-position="fixed">
<h4>Footer</h4>
</div>
</div>
</body>

37. Navegación
• El
enlace
una
otra
página
de
otro
documento
es
un
enlace
normal,
el
framework
detectará
que
se
trata
de
un
documento
jQM
y
lo
usará
como
tal.
• jQM
descarga
el
nuevo
documento
con
AJAX.
• Reglas:
• El
desPno
del
enlace
debe
ser
un
documento
jQM
• El
desPno
debe
estar
alojado
en
el
mismo
dominio.
• El
desPno
debe
ser
un
documento
jQM
de
una
sola
página.
• El
enlace
no
debe
declarar
atributo
target.
• jQM
permite
precargar
(prefetch)
enlaces
con
alta
probabilidad
de
ser
visitados
para
reducir
Pempos
de
espera.
<a href=‘page2.html’ data-prefetch>Go to page 2</a>

38. Navegación
• Enlaces
a
páginas
externas
a
nuestra
aplicación.
• Reglas:
• Añadiendo
el
atributo
data-­‐rel=”external”
al
elemento
<a>
• Definiendo
el
atributo
target=”_blank”
al
elemento
<a>
• Cuando
el
dominio
enlazado
es
disPnto
al
de
nuestro
documento.
<a href=‘http://www.google.com’ data-rel=”external”>Go to Google</a>
<a href=‘http://www.google.com’ target=”_blank”>Go to Google</a>
<a href=‘http://www.google.com’>Go to Google</a>

39. Navegación
• Enlaces
especiales
son
enlaces
que
desencadenan
acciones
especiales
dependiendo
del
protocolo
que
uPlizan.
Acción Protocolo Ejemplo
Llamada
telefónica tel <a
href=”tel:+18002233544”>...</a>
Llamada
facePme facetime <a
href=”facePme:101010”>...</a>
Llamada
Skype skype <a
href=”skype:skype_user?call”>...</a>
Mandar
email mailto <a
href=”mailto:a@example.com”>...</a>
Mandar
SMS sms <a
href=”sms://+18002233544”>...</a>
h2p://www.iana.org/assignments/uri-­‐schemes.html

40. Navegación
• Podemos
decidir
con
qué
transición
se
cambiará
de
página.
• jQM
implementa
las
transiciones
usando
CSS3,
que,
en
la
mayoría
de
los
disposiPvos
está
acelerado
por
hardware,
si
está
disponible.
• jQM
aplicará,
por
defecto,
la
animación
inversa
para
el
evento
de
vuelta
atrás.

41. • Creamos
una
página
para
cada
sección
y
las
enlazamos
desde
la
página
principal.
• Cada
página
Pene
un
script
.js
asociado,
que
se
enlaza
desde
la
página
principal.
Navegación
...
<script src="js/storage.js"></script>
<script src="js/canvas.js"></script>
<script src="js/video.js"></script>
</head>
<body>
<div data-role="page" id="main-menu">
<div data-role="header">
<h1 id="header-title">HTML 5 Catalog</h1>
</div>
<div data-role="content">
<a href="#geolocation">Geolocation</a>
<a href="pages/canvas.html">Canvas</a>
<a href="pages/storage.html">Offline Storage</a>
<a href="pages/video.html">Video Player</a>
</div>
...

42. Componentes

43. Componentes

44. Componentes

45. Componentes

46. Componentes
<div data-role="page" id="main-menu">
<div data-role="header">
<h1 id="header-title">HTML 5 Catalog</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#geolocation">Geolocation</a></li>
<li><a href="pages/canvas.html">Canvas</a></li>
<li><a href="pages/storage.html">Offline Storage</a></li>
<li><a href="pages/video.html">Video Player</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h1>&nbsp;</h1>
</div>
</div>
• El
enlace
a
geolocaPon
es
interno,
porque
en
algunos
navegadores
no
funciona
la
geolocalización
si
se
enlaza
de
forma
externa.

47. Javascript
API:
Eventos
• Del
document
(aplicación):
• mobileinit,
ready,
load,
orientaPonchange
• De
cada
página:
• pagebeforecreate,
pagecreate,
pageinit,
pageremove
• pagebeforeload,
pageload,
pageloadfailed
+
argumento
• De
cada
elemento
del
DOM
• tap,
taphold,
swipeleq,
swiperight
<script>
$(document).bind("mobileinit", function(){
// Place for global configuration of jQM
});
</script>

48. Javascript
API:
UPlidades
• UPlidades
data-*
• Filtro
:jqmData
• Métodos
jqmData
y
jqmRemoveData
• UPlidades
de
página
• $.mobile.activePage
referencia
la
página
(div)
acPva
• $.mobile.pageContainer
referencia
la
div
content
de
la
página
acPva.
• $.mobile.changePage()
cambio
de
página
programáPcamente
• $.mobile.loadPage()
carga
una
página,
pero
no
la
muestra

49. Javascript
API:
Contenido
dinámico
• Debemos
indicar
a
jQM
que
vamos
a
añadir
contenido
para
que
aplique
los
esPlos
CSS,
transiciones,
etc...
necesarios.
• Creación
• $(‘#new_page’).page();
• $(‘#new_a’).button();
• Actualización
• $(‘#checkbox’).val(‘true’).checkboxradio(‘refresh’);
• $(‘#list’).listview(‘refresh’);
• $(‘#changed_page’).trigger(‘create’);

50. E3quetas
semán3cas
Acceso
Hardware
Almacenamiento
local
Conec3vidad
Mul3media
Gráficos

51. Acceso
Hardware:
Geolocalización
• El
API
de
Geolocalización
permite
a
los
programas
JS
acceder
a
la
posición
en
el
mundo
del
usuario.
• Los
navegadores
que
soportan
geolocalización
definen
el
objeto
navigator.geolocation,
que
Pene
tres
métodos:
• getCurrentPosition():
Solicita
la
posición
del
usuario
• watchPosition():
Solicita
la
posición
del
usuario
y
monitoriza
los
cambios
• clearWatch():
Indica
que
quiere
dejar
de
monitorizar
la
posición
del
usuario.
• El
navegador
puede
acceder
a
la
posición
de
tres
maneras:
• Sensor
GPS
• IP
• WIFI
• Cualquier
método
requiere
comunicación
con
servidores
o
satélites,
por
tanto,
este
API
será
siempre
asíncrono.

52. Acceso
Hardware:
Geolocalización
<script src="http://maps.googleapis.com/maps/api/js?sensor=true">
</script>
$('#geolocation').live('pageinit', function(){
navigator.geolocation.getCurrentPosition (function(pos) {
var lat = pos.coords.latitude;
var lng = pos.coords.longitude;
var latlng = new google.maps.LatLng (lat, lng);
var options = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var $content = $("#geolocation div:jqmData(role=content)");
$content.height (screen.height - 100);
var map = new google.maps.Map ($content[0], options);
new google.maps.Marker ({
map: map,
animation: google.maps.Animation.DROP,
position: latlng
});
}, function(e) {
alert("Error: " + e.message);
}, {maximumAge: 30000, timeout: 30000, enableHighAccuracy: true});
});

53. Gráficos
$('#canvas').live('pageinit', function() {
var context = $('#theCanvas')[0].getContext('2d');
context.beginPath();
context.rect(20, 20, 200, 100);
var grd = context.createLinearGradient(20, 20, 220, 120);
grd.addColorStop(0, '#8ED6FF');
grd.addColorStop(1, '#004CB3');
context.fillStyle = grd;
context.fill();
context.stroke();
context.beginPath();
context.arc(70, 200, 50, 0, 2 * Math.PI, false);
grd = context.createLinearGradient(30, 150, 120, 250);
grd.addColorStop(0, '#000000');
grd.addColorStop(1, '#BC2920');
context.fillStyle = grd;
context.fill();
context.stroke();
});

54. Almacenamiento
local
• localStorage
y
sessionStorage
son
objetos
JS
persistentes
que
guardan
datos
serializados
(cadenas)
• localStorage
guarda
los
datos
hasta
que
se
borran
explícitamente,
sessionStorage
hasta
que
el
navegador
se
cierra
• Same-­‐origin
policy
var name = localStorage.username;
if (!name) {
localStorage.username = “Carlos”;
}
var point = { x: 1, y: 2 };
localStorage.point = JSON.stringify(point);
var readPoint = JSON.parse(localStorage.point);
delete localStorage.point;

55. Almacenamiento
local
<script>
$('#storage').bind('pageinit', function(){
refreshList();
$('#add_btn').bind('click', function() {
var $input = $('#item');
if (!$input.val()) {
alert("You have to add some text!");
} else {
var arr = localStorage.items
? JSON.parse(localStorage.items) : [];
arr.push($input.val());
localStorage.items = JSON.stringify(arr);
}
refreshList();
});
});
function refreshList() {
var $list = $("#storage ol:jqmData(role=listview)").empty();
var arr = localStorage.items
? JSON.parse(localStorage.items) : [];
if (arr.length) {
$.each(arr, function(index, value) {
var $li = $('<li>').text(value);
$list.append($li);
});
}
$list.listview("refresh");
}
</script>
...
<div data-role="content">
<input type="text" id="item"
placeholder="Add Item..." value=""/>
<input type="button" id="add_btn"
value="Add Item" data-icon="plus" data-inline="true"/>
<ol data-role="listview" data-inset="true">
<ol>
</div>

56. MulPmedia
$('#video').live('pageinit', function(){
var player = $('#theVideo');
var status = $('#status');
player.bind('loadStart', function(event) { status.val("Loading..."); });
...
$('#play_btn').bind('click', function() {
var video = $('#theVideo').get(0);
var playables = VIDEO_RESOURCES.filter(function(videoObj) {
return video.canPlayType(videoObj.type);
});
if (playables.length) {
video.src = playables[0].path;
video.load();
video.play();
} else {
alert("No compatible video format provided!");
}
});
});
var VIDEO_RESOURCES = [
{type: 'video/mp4', path: '/html5catalog/resources/141.mp4' },
{type: 'video/webm', path: '/html5catalog/resources/movements_ES.webm' },
{type: 'video/ogg', path: '/html5catalog/resources/movements_ES.ogg' }
];
• Dependiendo
de
cada
navegador
y
plataforma
se
soportará
un
formato
de
vídeo
u
otro,
por
tanto
debemos
proporcionar
varios.

57. www.interlat.co
–
info@interlat.co
-­‐
h2p://www.facebook.com/interlat
-­‐
www.twi2er.com/interlat
-­‐
PBX:
57(1)
658
2959
-­‐
Bogotá
-­‐
Colombia
Aula
Virtual:
h2p://www.interlat.co/moodle/
Gracias!
Carlos Alonso Pérez
Developer
Twitter: @calonso
LinkedIn: mrcalonso
Mail: info@mrcalonso.com