Los enlaces especiales del iPhone e iPad

31 de julio de 2013

Cuando accedes a una página o aplicación web a través de un iPhone o iPad, sus enlaces de tipo <a> pueden hacer mucho más que llevarte a otra página. Llamar por teléfono, enviar SMS, mostrar mapas o reproducir canciones son sólo algunas de las posibilidades de las páginas HTML accedidas a través de cualquier dispositivo con sistema operativo iOS.

Llamando por teléfono

El navegador Safari del iPhone e iPad detecta automáticamente los números de teléfono de las páginas HTML. Aún así, por si tus usuarios utilizan otros navegadores o la detección automática no funciona bien, es recomendable indicar explícitamente si un número corresponde realmente a un número de teléfono.

Para ello, indica el número de teléfono dentro del atributo href del enlace y añade la palabra tel: como prefijo:

<h3>Contacta con nosotros</h3>
<a href="tel:900900900">Pincha aquí para llamarnos</a>

Si el usuario accede a esta página a través de un dispositivo iOS y pincha en ese enlace, se le muestra un aviso indicándole que va a realizar una llamada de teléfono. Si acepta, el navegador deja paso a la aplicación de telefonía y se marca automáticamente el número. Para evitar problemas de seguridad, no se marcan los teléfonos que contienen caracteres como * y #.

Si tu aplicación o página HTML se accede desde muchos países, es necesario que indiques el prefijo internacional del país al que corresponde el número:

<h3>Contacta con nuestras oficinas</h3>
<ul>
    <li><a href="tel:+34900900900">España</a></li>
    <li><a href="tel:+52900900900">México</a></li>
    <li><a href="tel:+54900900900">Argentina</a></li>
</ul>

Si lo prefieres, también puedes añadir caracteres de separación como . y - para que el número sea más fácil de leer (aunque el usuario realmente no va a ver el número):

<h3>Contacta con nuestras oficinas</h3>
<ul>
    <li><a href="tel:+34-900-900-900">España</a></li>
    <li><a href="tel:+52-900.900.900">México</a></li>
    <li><a href="tel:+54.900.900.900">Argentina</a></li>
</ul>

El estándar RFC 3966 explica con detalle el formato completo de los enlaces para números de teléfono, incluyendo por ejemplo la posibilidad de indicar extensiones.

Enviando SMS

El navegador Safari del iPhone y del iPad también permite crear enlaces directos a la aplicación de mensajería SMS. Para abrir simplemente la aplicación, crea un enlace cuyo atributo href sea sms::

<a href="sms:">Abrir aplicación de mensajería</a>

Si además de abrir la aplicación quieres mostrar al usuario un mensaje vacío pero con el número de teléfono de destino ya relleno, indica el número también en el atributo href del enlace:

<a href="sms:900900900">Envíanos un SMS</a>

En este caso también se aplican las recomendaciones sobre prefijos internacionales y caracteres de separación de números que se explicaron en la sección anterior.

La única limitación de este tipo de enlaces es que actualmente no se puede establecer el contenido del mensaje SMS, por lo que el usuario es el que siempre tiene que escribir el mensaje.

Enviando emails

Para enviar un email al pulsar sobre un enlace en un dispositivo iOS, se utiliza el mismo formato de los enlaces mailto: que llevan años utilizándose en las páginas HTML normales:

<a href="mailto:[email protected]">Contacta con nosotros</a>

Con este tipo de enlaces también puedes rellenar automáticamente el asunto y el contenido del email (no olvides codificar los caracteres problemáticos para las URL, como por ejemplo los espacios en blanco, que se transforman en %20):

<a href="mailto:[email protected][email protected]&subject=El%20asunto%20del%20email&body=El%20contenido%20del%20email">Contacta con nosotros</a>

El único elemento que no está soportado por iOS es from, que permite indicar la dirección de origen del email. El resto de propiedades siguen el formato definido en el estándar RFC 2368.

Mapas, canciones y vídeos

Los dispositivos iOS soportan muchos otros tipos de enlaces especiales. En vez de utilizar un prefijo especial (tel:, sms: o mailto:) estos enlaces se consideran especiales por el tipo de URL a la que apuntan.

El siguiente enlace por ejemplo hace que se abra la aplicación de los mapas para mostrar la ciudad de París. Si no está disponible la aplicación, se abre un servicio de mapas en el propio navegador:

<a href="http://maps.apple.com/?q=paris">París</a>

Si quieres forzar a que el mapa se abra siempre en el propio navegador, cambia la primera parte de la URL por: http://maps.apple.com/, http://maps.apple.com/maps, http://maps.apple.com/local o http://maps.apple.com/m.

Los enlaces de mapas también pueden apuntar a direcciones postales o incluso coordenadas geográficas. Consulta el artículo en inglés Map Links para obtener más información.

De la misma manera, si la URL del enlace apunta a YouTube, el dispositivo tratará de abrir la aplicación de reproducción de vídeos de YouTube. Si no está disponible, se reproducirá en el sitio móvil de YouTube dentro del propio navegador. Para crear estos enlaces, utiliza cualquiera de los siguientes formatos (reemplazando XXXXX por el identificador del vídeo que quieres reproducir):

<a href="http://www.youtube.com/v/XXXXX">Ver vídeo</a>
<a href="http://www.youtube.com/watch?v=XXXXX">Ver vídeo</a>

Por último, también puedes enlazar con cualquier canción disponible en iTunes para reproducirla al pinchar sobre el enlace. El problema es que para obtener estos enlaces debes darte de alta como afiliado de la tienda de Apple (ver detalles):

<a href="http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?i=156093...&id=1560...62&s=14...1">Reproducir canción</a>