Mes: marzo 2011

Ahora mismo estoy cacharreando un poco con aplicaciones móviles para iOS.

Se puede hacer una aplicación web para iOS con HTML, CSS y Javascript, y se indica mediante algunos elementos meta. Aquí va un pequeño resumen:

• <meta name="apple-mobile-web-app-capable" content="yes" /> Da la opción al dispositivo iOS añadir a la pantalla de inicio, junto con el resto de las aplicaciones, un acceso directo a una aplicación web. Ojo que no es lo mismo que un acceso directo que abre Safari con la interfaz habitual del navegador.
• <meta name="apple-mobile-web-app-status-bar-style" content="black" /> Permite quitar de la interfaz los elementos propios del navegador (la barra de la dirección y el buscador arriba, y la barra de navegación, favoritos e historial abajo). Sólo deja visible la barra de estado (cobertura, hora y batería). Tiene tres posibles valores default (de azul iOS), black y black-translucent.
• <link rel="apple-touch-icon" href="touch-icon-iphone.png" /> permite elegir el icono (57×57 en formato PNG) para la pantalla de inicio. Sirve tanto para aplicaciones web como para simples accesos directos a una página web.
• <link rel="apple-touch-startup-image" href="/startup.png" /> incluye una imagen previa a la aplicación web.

No hablo del famoso viewport, aunque personalmente echo de menos la posibilidad de usar una etiqueta para que mantenga la proporción en las vistas vertical y apaisada.

Bueno, siguiendo estas claras instrucciones – risas de fondo – tenemos los primeros elementos para hacer una aplicación web. Qué modernos.

Y ahora viene una curiosidad, que puede tener su sentido, pero resulta chocante: cuando tocamos un vínculo, abre una nueva instancia del navegador, pero esta vez aparece los elementos de la interfaz «normal» (barra de estado, además de la barra de la dirección y la de navegación-favoritos). ¿Qué ocurre? ¿Qué hemos hecho mal?

La respuesta es… nada. Simplemente los vínculos no funcionan como tales en una aplicación web dentro de iOS. Actúan como una especie de window.open. ¿Solución? Un poco de javascript. Aquí va un ejemplo de jquery:

$(document).ready(function() {
	var deviceAgent = navigator.userAgent.toLowerCase();
	var ios = deviceAgent.match(/(iphone|ipod|ipad)/);
	if (ios) {
		$("a").click(function(event) {
			event.preventDefault();
			var direccion=$(this).attr("href");
			location.href=direccion;
		});
	};
});

Por si el código no resulta demasiado trivial, mediante el agente de usuario discriminamos a los dispositivos con sistema operativo iOS, eliminamos el comportamiento por defecto de los vínculo, y le añadimos la url del href a un location.href de javascript que sí funciona. En este caso podríamos tener una aplicación web compuesta por varias páginas HTML.

Teniendo en cuenta lo anterior, cabría preguntarse:

• ¿Quieres un acceso directo a la página de inicio definiendo la imagen tú mismo (y que no salga un pantallazo)? Usa apple-touch-icon.
• ¿Quieres que no se vea la barra de la dirección inicialmente? Prueba con window.scrollTo(0,1); e inicialmente no se verá (aunque estará presente).
• ¿Quieres reutilizar una web como una aplicación web en iOS (más cool) con su imagen de bienvenida – tan útil ella -, y sin elementos de la interfaz en el navegador? Pues mucho cuidado con los vínculos, y recuerda el código anterior para los vínculos internos de la aplicación web. No quedaría bien que al tocar un vínculo, se abra una nueva ventana. Nada bien.

Cambiando un poco de tema, ya hay bastantes voces (con más o menos autoridad) que dicen que las aplicaciones desarrolladas específicamente para un sistema operativo (Android, iOS, Blackberry, Symbian, Windows Phone,…) están viviendo su momento de gloria ahora, y en unos años, será sustituído por aplicaciones webs (teoricamente menos tiempo de desarrollo, y actualizaciones más rápidas). Todo depende de los avances en las aplicaciones web móviles y su implementación (ver Standards for Web Applications on Mobile: February 2011 current state and roadmap).Ya veremos.