HTML5 Mobile
...apps multiplataforma
Unos datos que marean
- mas de 152 millones de smartphones en todo el mundo
- 59% son Android
- 23% son iOS
- Symbian y Blackberry han caido al 6%
¿Y las tablets?
- mas de 106 millones de tablets en todo el mundo
- 44% son Android
- 54% son iOS
¿Que tienen en común estos mas de 250 millones de usuarios?
Navegadores HTML5
¿Puedo hacer Apps en HTML5?
Respuesta corta: Si
Respuesta larga: Si, pero recuerda que HTML5 no para de evolucionar y las implementaciones de los navegadores moviles aun estan en desarrollo, no va a ser un camino de rositas...
Factores Negativos a tener en cuenta
- Alta segmentación en Android (ver ejemplos)
- La especificación aun no esta cerrada
- Dependiendo de la complejidad del codigo te va a tocar testear muy bien la aplicación
- Si abusas de javascript tu aplicación se puede volver lenta (exceso de librerias o animaciones Js)
- Las aplicaciones nativas siempre serán mas rápidas y gestionaran mejor la memoria (por eso son nativas)
Factores Positivos a tener en cuenta
- Tu aplicación es facilmente portable a diferentes plataformas
- Tienes gran libertad a la hora de definir el look&feel o diseño de tu app
- Cada vez hay mas frameworks HTML5 que te haran la vida más fácil
- Los tiempos de desarrollo se acortan
- Es un mercado en crecimiento
¿Cuando elegir entre desarrollar una App Nativa o una en HTML5?
- Si tu aplicacion no requiere gran rendimiento gráfico, no tiene sentido usar HTML5.
- Si tu aplicación es sencilla a nivel gráfico, puede ser una buena opción.
- Si quieres hacer una App multiplataforma en poco tiempo HTML5 te ahorrara costes.
- Si combinas HTML5/CSS3/Javascript/Nativo correctamente, las Apps que desarrolles pueden ser iguales o mejores que las nativas en cuanto a calidad/coste de desarrollo.
¿Qué soluciones hay en la actualidad para crear apps HTML5?
- Usar WebView/Nativo, para Android teneis esta guía y para iOS esta otra (en ambas podeis comunicaros en Nativo con interfaces Javascript).
- PhoneGap/Cordova permite que utiliceis el hardware a traves de Javascript sin complicaros la vida, ademas se puede hacer cualquier cosa extendiendolo con plugins en nativo.
- Hay otras soluciones como MoSync que básicamente mejoran lo que ya ofrece Phonegap
- Appcelerator tiene cierta compatibilidad con HTML5, pero juega en otro campo.
¿Qué frameworks pueden facilitarme la vida?
- Pasando de framework me lo puedo hacer todo con HTML5/CSS3/Javascript (pero piensa en hacerte un framework si vas ha hacer mas de una aplicación).
- Puedo usar jQuery Mobile o jQTouch si me gusta jQuery (benchmarks interesantes sobre jQuery).
- Puedo usar Sencha si me gusta tener el código javascript bien organizado y orientado a clases.
- Puedo usar LungoJS si quiero aprovechar características de HTML5 y quiero un UI en CSS3 y ooCSS.
- En la página de PhoneGap podeis encontrar mas frameworks y librerías
Algunos ejemplos de código
Vamos a repasar algunos de los frameworks que hemos citado:
jQTouch
<html>
<head>
<title>Kilo</title>
<link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css">
<link type="text/css" rel="stylesheet" media="screen" href="themes/jqt/theme.css">
<script type="text/javascript" src="jqtouch/jquery.js"></script>
<script type="text/javascript" src="jqtouch/jqtouch.js"></script>
<script type="text/javascript">
var jQT = $.jQTouch({
icon: 'kilo.png',
statusBar: 'black'
});
</script>
</head>
<body>
<div id="home">
<div class="toolbar">
<h1>Kilo</h1>
</div>
<ul class="edgetoedge">
<li class="arrow"><a href="#about">About</a></li>
</ul>
</div>
<div id="about">
<div class="toolbar">
<h1>About</h1>
<a class="button back" href="#">Back</a>
</div>
</div>
</body>
</html>
jQuery Mobile
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
LungoJS
<!doctype html>
<html manifest="APP.appcache">
<head>
<meta charset="utf-8">
<title>ToDo.js with LungoJS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
<link rel="stylesheet" href="../../release/lungo-1.2.min.css">
<link rel="stylesheet" href="../../release/lungo.theme.default.css">
</head>
<body class="app">
<section id="login">
<article class="splash indented">
<div>
<h1>ToDo.<span class="semi-opacity">js<span></h1>
<input type="text" placeholder="Type your user" />
<input type="password" placeholder="Type your password" />
<a href="#" id="btnLogin" class="button big" data-icon="key">Test Demo!</a>
</div>
</article>
</section>
<script src="../../release/lungo-1.2.packed.js"></script>
<script>
var App = (function(lng, undefined) {
lng.App.init({
name: 'ToDo.JS',
version: '0.1'
});
return {};
})(LUNGO);
</script>
</body>
</html>
Sencha Touch
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
<script type="text/javascript">
new Ext.Application({
launch: function() {
new Ext.Panel({
fullscreen: true,
dockedItems: [{xtype:'toolbar', title:'My First App'}],
layout: 'fit',
styleHtmlContent: true,
html: '<h2>Hello World!</h2>I did it!'
});
}
});
</script>
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
</head>
<body></body>
</html>
Elige tu framework en función de tus gustos
Problemas mas comunes
- En versiones antiguas de iOS y Android no se soporta la propiedad CSS position:fixed muy usada para headers y footers.
- En estas versiones tambien se ignora la propiedad CSS overflow:scroll no permitiendo areas de scroll (una explicacion completa).
- La implementación de CSS3 aun no esta libre de errores en webkit (especialmente en Android cuando jugamos con transformaciones 3D).
- Tener que afinar con el DPI y los diferentes formatos de pantalla (soluciones).
- Abusar de Javascript hace las apps mas lentas (uso de multiples librerias, animaciones JS, mal uso del DOM).
Soluciones mas comunes
- A partir de iOS 5 y Android 4 los problemas en CSS (overflow:scroll y position:fixed) se han solucionado de forma nativa y mas info.
- En versiones anteriores, podemos usar fallbacks por javascript, en el caso de jQuery Mobile existe el atributo data-position="fixed" para headers y footers (aunque no es la mejor solución).
- Para definir areas de scroll siempre podemos usar iScroll.
- Para los diferentes formatos de pantalla podemos usar media-querys o responsive desing, permitiendo apps compatibles con tablets y smartphones.
- Para efectos ya tenemos CSS3 y hay librerias JS que nos facilitan la vida, usando transiciones o animaciones.
Menos hablar y mas ejemplos...
...bueno alla vamos.
Cambiar el diseño en función de la rotación
A veces, es interesante, ofrecer al usuario una experiencia diferente en función de la orientación de la pantalla
El código HTML5
A la minima expresión:
<!DOCTYPE html>
<html>
<head>
<title>Orientacion Test</title>
</head>
<body>
<section class="page">
<div class="main">
<header><h1>Cabecera</h1></header>
<section class="content">
Contenido
</section>
</div>
<footer>
<nav>
<ul>
<li><a href="#A">A</a></li>
<li><a href="#B">B</a></li>
<li><a href="#C">C</a></li>
</ul>
</nav>
</footer>
</section>
</body>
</html>
Un poco de CSS
Definimos un layout sencillo:
body, html,.page{
font-family: Arial, Helvetica, sans-serif;
height:100%;
}
header, footer{
background-color:#000; margin:0px; text-align: center;
padding:3px; color:#fff;
}
footer ul{
margin:0px; padding:0px; list-style: none;
min-height:60px;
}
footer li{
float:left; width:33%; border:solid 1px #fff;
}
footer li a{
color:#fff; text-decoration:none; width:100%;
display:block; padding-top:20px; padding-bottom:20px;
text-align: center;
}
section.content{
height:200px;
padding-top:100px;
font-size: 22px;
text-align: center;
}
Usando Media Queries
Ahora la media query usa la orientacion del dispositívo para cambiar el menu de posición:
@media screen and (orientation:landscape) {
.main{
float:right;
width:70%;
height:100%;
}
footer{
float:left;
width:29%;
height:100%;
}
footer li{
float:none;
width:100%;
}
footer ul{
list-style: none;
height:100%;
}
}
El resultado en navegador
Diferencias entre tamaño de pantalla y resolución de pantalla (DPI - tamaño vs densidad)
- Uno de los aspectos mas importantes que hay que tener en cuenta cuando usemos CSS3, es la diferencia entre tamaño de pantalla y densidad de pantalla.
- Cuando se lanzó iPhone al mercado el tamaño y la resolucion de pantalla eran iguales (320x480).
- Luego vino Android, Retina Display y pantallas cada vez mejores que implementaron un mayor DPI (puntos por pulgada o ppp).
- ¿Y esto en que me afecta?...
CSS3 y background-size
Gracias a CSS3 y la propiedad background-size, podemos hacer ajustar el tamaño de las imagenes a la resolución de pantalla.
Veamos un ejemplo con iPhone 3GS, iPhone 4 y Samsung Gallaxy S2:
Formato de pantalla
Queremos poner una imagen de fondo en varios dispositívos:
Solución con background-size
.fondo{
width: 100%; height: 100%;
background-image: url(test.png); /* Tamaño de la imagen 640x960 pixels */
background-size: 320px 480px;
}
Otra solución
.fondo{
width: 100%; height: 100%;
background-image: url(test.png); /* Tamaño de la imagen 640x960 pixels */
background-size: cover;
}
Para terminar...
- Usar siempre el metatag viewport.
- Tened en cuenta la segmentación en Android y haced pruebas en versiones de la 2 a la 4 o superior.
- Si orientais las apps solo a iOS tened en cuenta las versiones entre la 4 y la 5 o superior.
- Estad atentos a la evolución de webkit en Android e iOS.
- Si quereis publicar en Google Play o App Store, os toca aprender un poco de Eclipse y XCode, si quereis que alguien os haga la vida mas facil... no os olvideis de PhoneGap.
- Usad siempre animaciones CSS3 o transiciones en vez de Javascript (CSS3 permite aceleración por hardware).