23/03/2011 Categoría/s: Web móvil. 8 Comentarios

Vínculos en aplicaciones móviles para iOS

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:

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:

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.

-

Comentarios

  1. Juanjo escribió el 29/02/2012:

    Muchas gracias, me ha venido de lujo.

  2. jorge escribió el 03/11/2012:

    "... 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..."
    Estoy convencido de que esa afirmación pronto se cumplirá
    Saludos

  3. Gonzalo escribió el 06/11/2012:

    @jorge, no he apostado nada... por si acaso :)

  4. Oyagum escribió el 22/02/2013:

    Saludos! Me ha venido fenomenal el artículo, muchísimas gracias, el único problema que le veo, a ver si puedes echarme un cable, es con el tema de los enlaces, lo que has escrito, genial, pero con el tema formularios? como lo harías? muchísimas gracias por adelantado ;)

  5. Gonzalo escribió el 24/02/2013:

    Buenas, Oyagum.
    Lamento no poderte ayudar con los formularios :(

  6. Cesar escribió el 06/04/2013:

    Me encontré tu web, buskando entre varios links por que no encontraba como hacer los "Accesos directos" de las paginas a las pantallas de inicio de los iOs, sugeridas desde un HTML

    Muchas Gracias. oye una duda podrias explicar un poco mas sobre: window.scrollTo(0,1);

  7. Gonzalo escribió el 05/02/2014:

    Saludos César.
    window.scrollTo(0,1) lo que hace es mandar el foco al principio de la página, y de paso oculta la barra de dirección en el viewport.

  8. Álvaro escribió el 21/04/2014:

    Gracias. Muy bien explicado, me estaba volviendo loco!

    Un saludo.

Comentar

Categorías