Enlaces HTML en móviles

La web en dispositivos móviles es aún un mundo al que le queda mucho por explotar. Poco a poco se acerca a nosotros y gracias a los estándares (y dentro de poco a FirefoxOS) podemos comenzar a utilizar nuevas APIs o funciones que hasta ahora, sólo estaban disponibles en aplicaciones nativas. Una de estas es el reconocimiento inteligente de enlaces o links.

"a" ya es mucho más que un enlace HTML

Hasta hace relativamente poco tiempo, la etiqueta a se utilizaba en HTML para la agregación de enlaces. Su atributo href nos permite redireccionar al usuario hacia otra web. Ahora con nuevos "protocolos" agregados al estándar podemos no solo direccionar a una web, sino también a un número de móvil, a una aplicación de mapas...

Esta técnica no es nueva, skype y el envío de emails ya se hacía por este método: 

<a href="callto://nombredeusuario">Llámame a skype!</a>
<a href="mailto://miemail@dominio.com">Mándame un email</a>

Llámame a skype! | Mándame un email!

A continuación enumeraré distintos formatos del atributo href especialmente útiles a la hora de desarrollar una web enriquecida para móviles.

Llamadas en un enlace

Para dispositivos móviles que utilicen webOS browsers o iOS Safari podemos utilizar tel. Existen otras variantes para los dispositivos que no admiten tel, wtai. Wtai es un antiguo estándar que proviene de WAP 1.0. 

<a href="tel:+34111111111">Llámame!</a>
<a href="wtai://wp/mc;+34111111111">Llámame!</a>

Llámame!

Con iOS debemos de tener una consideración, y es que el número de teléfono debe de tener el siguiente formato: 34-111-111-111 (sin el símbolo de sumar del principio).

Esta opción de detección de número está habilitada por defecto en los navegadores móviles. Si por el contrario, no queremos que se enlace directamente a una llamada debemos de colocar la siguiente etiqueta en la cabecera: 

<meta name="format-detection" content="telephone=no"> (iOS y Android)
<meta http-equiv="x-rim-auto-match" content="none"> (BlackBerry)

SMS

Para el envío de sms: 

<a href="sms:+34111111111?body=Hola">Envíame un sms!</a>

Envíame un sms!

También están aceptadas smsto y mmsto, pero recomiendo la primera que se ha citado.

Mapas

En este caso, Android y iOS discrepan. Para Android: 

<a href="geo:latitud,longitud">Abre Google Maps en esta dirección numérica</a>
<a href="geo:0,0?q=dirección+a+la+que+vamos">Abre Google Maps en esta dirección</a>

Abre Google Maps en esta dirección numérica | Abre Google Maps en esta dirección

Para iOS: 

<a href="http://maps.apple.com/?q=Sevilla">Ver Sevilla en el mapa</a>

Ver Sevilla en el mapa

Referencias y recursos

Lo expuesto en el artículo es un resumen de los enlaces más importantes a la hora de desarrollar una web móvil. Si queréis profundizar en cada uno de ellos y descubrir más que os pueden servir en un futuro, no olvidéis visitar los siguientes enlaces: