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

tabla de compatibilidad

¿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

  1. Alta segmentación en Android (ver ejemplos)
  2. La especificación aun no esta cerrada
  3. Dependiendo de la complejidad del codigo te va a tocar testear muy bien la aplicación
  4. Si abusas de javascript tu aplicación se puede volver lenta (exceso de librerias o animaciones Js)
  5. Las aplicaciones nativas siempre serán mas rápidas y gestionaran mejor la memoria (por eso son nativas)

Factores Positivos a tener en cuenta

  1. Tu aplicación es facilmente portable a diferentes plataformas
  2. Tienes gran libertad a la hora de definir el look&feel o diseño de tu app
  3. Cada vez hay mas frameworks HTML5 que te haran la vida más fácil
  4. Los tiempos de desarrollo se acortan
  5. Es un mercado en crecimiento

¿Cuando elegir entre desarrollar una App Nativa o una en HTML5?

  1. Si tu aplicacion no requiere gran rendimiento gráfico, no tiene sentido usar HTML5.
  2. Si tu aplicación es sencilla a nivel gráfico, puede ser una buena opción.
  3. Si quieres hacer una App multiplataforma en poco tiempo HTML5 te ahorrara costes.
  4. 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

Ver ejemplo

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

Gracias

Por Óscar Antón / molecularts.com