Advertisement
  1. Code
  2. Mobile Web Apps

Truco Rápido para la Web Móvil: Enlaces de Números de Teléfono

by
Read Time:3 minsLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Este rápido truco te mostrará como crear un enlace de número de teléfono con HTML. Las técnicas en este rápido truco funcionan tanto con dispositivos Android como con iPhones y puede mejorar en gran medida la experiencia de los usuarios del sitio web en el móvil. 

Enlaces de Teléfono Predeterminados

Por defecto tanto en iOS como en Android, el navegador del dispositivo creará "mágicamente" los enlaces a partir del texto que interprete como un número de teléfono. Cuando el usuario pulse uno de estos enlaces, la aplicación de teléfono del dispositivo se iniciará. Los patrones exactos para los números que serán automáticamente convertidos en enlaces varía según las plataformas, pero he enumerado algunos de los que yo mismo he comprobado con éxito en la lista de aquí abajo:

  • 555-5555 (solo iPhone)
  • (555) 555-5555 (Android + iPhone)
  • +1 (555) 555-5555 (solo iPhone)
  • 555 5555 (solo iPhone)
  • 555 555 5555 (Android + iPhone)
  • +1 555 555 5555 (solo iPhone)
  • 555.5555 (solo iPhone)
  • 555.555.5555 (Android + iPhone)
  • +1 555.555.5555 (Solo iPhone)

Si tu sitio web o app usa uno de estos formatos multi-plataforma de arriba, tus usuarios deberían ser capaces de realizar llamadas con rapidez simplemente pulsando el texto.

Crear Enlaces de Números de Teléfono

La receta para crear tus propios enlaces de números de teléfono es sencilla. En lugar de usar un enlace normal basándote en el protocolo HTTP/S o el sistema de archivos, puedes usar el protocolo "tel:". Funciona exactamente igual a como lo haría cualquier otro enlace, pero en lugar de disponer de un atributo href apuntando a una URL o a un archivo, ubicarás "tel:" o "tel://" antes del número de teléfono.

Observa los siguientes ejemplos para verlo en acción:

NOTA: El código de arriba debería comprobarse en un dispositivo físico. No funcionará en el emulador de iOS SDK.

El último fragmento de ejemplo no es especialmente valioso. Muchos desarrolladores web no disfrutan del lujo de poder realizar pruebas extensivas en dispositivos móviles Android e iPhone, así que será fácil que no puedas saber que algunos de los formatos enumerados al principio no son reconocidos automáticamente por todos los dispositivos.

Debido a que los formatos de teléfono reconocidos pueden variar entre dispositivos, te sugiero que siempre coloques los números de teléfono en un enlace con el prefijo "tel://". Haciendo esto no solo te asegurarás de que la mayor cantidad de dispositivos enlazarán con la aplicación de llamadas del teléfono, también parece ser un enfoque más explícito, accesible, y semántico para manejar los enlaces de teléfono.

Por supuesto, si el contenido que estás creando está pensado para verse en un dispositivo sin teléfono, deberías usar un lenguaje del lado del servidor para añadir los enlaces "tel:" solo cuando fuese necesario, o deberías revisar el tipo de dispositivo vía JavaScript y añadir los enlaces a la página de forma progresiva cuando aplicase.

Deshabilitando la Detección de los Enlaces

Tanto para Android como para iPhone, puedes desactivar la vinculación del número de teléfono a través de la siguiente meta etiqueta:

Esta meta etiqueta desactivará la vinculación automática del número de teléfono mientras que al mismo tiempo te permite crear manualmente un enlace de número de teléfono utilizando el método "tel://" que acabamos de ver más arriba.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.