Desarrollo de Apps Móviles con HTML5

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

Índice
de
contenidos
• La
Web

• Caso
prácPco
de
desarrollo

• jQuery
Mobile

• HTML5

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áﬁcos.
Se
aumentan
las

prestaciones
con
caracterísPcas
como
geolocalización,

almacenamiento
local
de
datos,
etc...

La
web
• La
web
es
un
entorno
completo
de
programación
de

aplicaciones
que
uPliza:

• HTML
para
deﬁnir
su
estructura

• CSS
para
deﬁnir
la
presentación

• JS
para
la
lógica

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.

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.

Aplicaciones
Web:
Desventajas
• Se
ejecuta
en
el
navegador

• Los
datos
se
deben
descargar

del
servidor.
Rendimiento

Caso
PrácPco
• ObjePvos

• Problemas

• Soluciones

• Viabilidad

• Decisión
ﬁnal

¿Qué
hace
falta
para
triunfar?

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

Llegar
a
todos
los
públicos

Fragmentación
en

Sistemas
OperaPvos

Fragmentación
en
pantallas

Fragmentación
método
de
entrada

Fragmentación
errores
soqware

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

Solución:
Desarrollo

mulPplataforma

Viabilidad
• Geolocalización
(GPS)

• Reproducción
mulPmedia

• Sensores
de
movimiento

• Almacenar
datos
locales

• Acceso
oﬄine
• Otros
sensores

• Cámara

• NoPﬁcaciones

• Web
GL

• Alto
rendimiento
h2p://mobilehtml5.org/
SI NO

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

• ...

Probando
nuestras
aplicaciones
• Apache
HTTP
Web
Server

+

• DisposiPvos

• DisposiPvos
reales

• Navegadores
remotos

• h2p://www.deviceanywhere.com

• Emuladores
y
Simuladores

• Amigos

Construyendo
una
app

mulPplataforma
• h2p://diplomado-‐test.herokuapp.com/demos

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>

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.

Arquitectura
• Unidad
básica:
page

• Cada
página
es
un
div
con
un
role
especíﬁco

• Un
documento
HTML
puede
contener
varias
páginas,

pero
sólo
una
será
visible.

Arquitectura
• Cada
página
está
compuesta
de
otras
secciones

• Cada
sección
es
un
div
con
un
role
especíﬁco
Role Descripción Role Descripción
page Deﬁne
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

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>

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.

Navegación
• Enlace
a
otra
página
del
mismo
documento
<body>
<div data-role="page" data-title="Pagina 1">
<h1>Header</h1>
</div>
<p>Go to page <a href="#page2">2</a></p>
</div>
<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">
<h1>Header</h1>
</div>
<p>Content of page 2</p>
</div>
<h4>Footer</h4>
</div>
</div>
</body>

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>

Navegación
• Enlaces
a
páginas
externas
a
nuestra
aplicación.

• Reglas:

• Añadiendo
el
atributo
data-‐rel=”external”
al
elemento
<a>

• Deﬁniendo
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>

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

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.

• 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">
<h1 id="header-title">HTML 5 Catalog</h1>
</div>
<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>
...

Componentes
<div data-role="page" id="main-menu">
<h1 id="header-title">HTML 5 Catalog</h1>
</div>
<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> </h1>
</div>
</div>
• El
enlace
a
geolocaPon
es
interno,
porque
en
algunos
navegadores

no
funciona
la
geolocalización
si
se
enlaza
de
forma
externa.

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>

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

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’);

E3quetas
semán3cas
Acceso
Hardware
Almacenamiento
local
Conec3vidad
Mul3media
Gráﬁcos

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
deﬁnen
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.

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});
});

Gráﬁcos
$('#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();
});

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;

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>
...
<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>

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.

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

Desarrollo de Apps Móviles con HTML5

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (16)

Similar a Desarrollo de Apps Móviles con HTML5

Similar a Desarrollo de Apps Móviles con HTML5 (20)

Último

Último (20)

Desarrollo de Apps Móviles con HTML5