Tecnología y Coaching para Emprendedores

Cómo Dar Formato a un Número de Teléfono con HTML5

html5

Seguro que en alguna ocasión has estado navegando desde un dispositivo móvil y has encontrado un teléfono al que has podido simplemente hacer clic y llamar. En cambio, seguro que han habido otros que has tenido que seleccionar, copiar y pegar para poder realizar la llamada.

Con HTML5 viene la solución para que siempre se pueda llamar a un teléfono desde una web, tanto si estamos en un dispositivo móvil como desktop. Es lo mismo que cuando hacemos clic en un correo electrónico y podemos enviar el email con nuestro gestor de correo favorito. La diferencia es el atributo utilizado, que pasa de ser mailto a tel o callto.

Así, simplemente añadiremos un enlace al teléfono al igual que hacíamos con los correos electrónicos, lo único que vamos a cambiar es el atributo utilizado. La verdad es que no tiene ningún secreto, pero mejor veamos un ejemplo:


<a href="tel:+34612345678">612345678</a>

Con este código de HTML5 habrás habilitado que se pueda llamar al teléfono 612345678 desde cualquier dispositivo. Fíjate que he incluido el prefijo de país con el signo más, en este caso un teléfono español con el prefijo de España +34. Esto es importante, ya que la web es internacional y los teléfonos se pueden marcar desde cualquier país del mundo. Aquí es imprescindible que pongas el signo más y no el número real que marcarías desde un teléfono fijo. Por ejemplo, desde la mayoría de países para llamar al extranjero marcaríamos el prefijo 00 antes de llamar y no el signo más. Si ponemos entonces 0034 y no +34, no nos va a funcionar.


Llamar con Skype

Si lo que queremos es que la llamada se realice de manera predeterminada con Skype, entonces en lugar de tel utilizaremos callto. Veamoslo:


<a href="callto:+34612345678">612345678</a>

En cualquier caso, es preferible usar tel ya que funciona con cualquier servicio de telefonía y no sólo con Skype. Yo he probado a llamar con el atributo tel usando Skype y no me ha dado ningún problema. Se ve que anteriormente no funcionaba, pero con las últimas versiones de Skype va todo bien, así que te recomiendo usar tel.

Dar estilo al teléfono

Para dar estilo al teléfono, lo que hacemos es aplicar este código de CSS3 en el CSS:


a[href^="tel:"]:before {
    content: "260E";
    display: block;
    margin-right: 0.5em;
}

Aquí hemos utilizado un selector de CSS3, así como los pseudoelementos de CSS3. Si no sabes muy bien de qué te hablo, te recomiendo este tutorial de CS3. Al especificar el signo ^= lo que estamos diciendo es que empiece por el valor especificado. Así con
a[href^="tel:"] lo que estamos diciendo es que aplique lo que se indica a todos los enlaces que tengas un atributo href que empiece por tel:.

Con :before lo que estamos diciendo es que se aplique esta regla antes de cargar el elemento. Tienes aquí disponible un tutorial de CSS3 en que te explico los pseudoelementos :after y :before. Estos pseudoelementos deben llevar sí o sí la propiedad content. Aquí lo que hemos especificado es que utilice un símbolo del teléfono y lo inserte antes del mismo. El resultado será el siguiente:

telefono.png

Para acabar..

En este post hemos visto cómo crear un enlace de un teléfono en HTML5 y cómo darle formato con CSS3. Te animo a compartirlo en las redes sociales y a dejar un comentario.

Si quieres aprender diseño web, te recomiendo el curso de diseño web desde cero con HTML5 y CSS3 así como el curso de diseño web responsive, con los que vas a aprender todo lo que necesitas saber sobre diseño web a nivel profesional.

Un abrazo!


Comentarios

  • ttorresonline

    Muy interesante :D

  • Nati

    ¡Muy bueno!
    Lo tendré en cuenta en mis próximas web’s.
    Gracias Sandra.

    • Sandra

      A ti Nati por comentar!

  • ldonis

    Hooo sumamente interesante,
    comenzaré a actualizar mi web XD
    muchas gracias por la info :D

    • Sandra

      Gracias Idonis! Yo lo voy a aplicar en la nueva web de CreativaSfera, que espero salga pronto. Un abrazo!

      • ldonis

        Hooo ok, estare esperando para ver la nueva web.
        Siempre sorprendes con tu creatividad.

        • Sandra

          jajaja, a ver qué tal esta vez :-)

  • Francisco

    Todos los días se aprende algo nuevo. Un detalle muy interesante, le daré buen uso. Gracias y ánimo , buen trabajo.

    • Sandra

      Gracias Francisco!

  • Enyelber

    Hola Sandra saludos,

    una pregunta, para hacer que se haga una llamada desde skype por nuestra web, sin colocar numero si no que sea por usuario, tendras algun amanual donde me pueda guiar.

  • Edson

    Gracias Sandra a la misma vez de ser un tip, es un plus para nuestras paginas web, un saludo grande desde Bolivia y sigue adelante, tus post son interesantes y tambien inspiradores.
    PD/ Me he suscrito pero al parecer no me llega ninguna notificacion.

    • Sandra

      Gracias Edson, compruebo ahora que estés suscrito, seguramente en Gmail lo tengas en la pestaña “Promociones”.. lo puedes arrastrar a la pestaña general. Un abrazo! Sandra

  • Victor

    Gracias, no recordaba la etiqueta!

  • oskar

    Gracias Sandra por compartir. Una pregunta si lo usas en desktop y no tienes skype puede dar error?

    • eSandra

      Hola!

      no, simplemente no podrías hacer la llamada, pues te pedirá con qué programa hacerla y no habrá ninguno instalado.

      un abrazo,
      Sandra

    • oskar

      Gracias Sandra, en el siguiente proyecto lo implementaré.

  • patricio

    Hola Sandra, muy bueno y muy útil tu post, pero tengo un problema, estoy customizando un template e hice lo que indicaste, el problema es que cuando le doy al numero me manda a una web que dice:

    NOT FOUND
    The requested URL /“tel:+34622855277” was not found on this server.

    Cuál puede ser mi error.
    Desde ya gracias.

  • Juan E

    Una pregunta, Sandra,
    no tiene que ver con el post, por lo que si me ayudas te estaria agradecido..
    He visto, que las imagenes como la que preside este post están de moda, este estilo de imágenes/dibujos tiene algún nombre en concreto?
    y segundo de donde las sacas???

    Un saludo y gracias por adelantado.