A veces nos perdemos en cuestiones totalmente estéticas a la hora de realizar webs para entornos móviles, donde términos como "responsive" acaparan todo el protagonismo, olvidando que, a veces, podemos dotar de funcionalidades básicas que diferencien estas webs de los entornos de escritorio ya que nuestras páginas se van a mostrar en dispositivos que disponen de más funcionalidad que un navegador web de un computador de sobremesa o portátil.
Vamos a ver como integrar nuestra web con las funcionalidades primordiales de los teléfonos, es decir, realizar llamadas y guardar contactos en la agenda.
Llamadas Telefónicas
La realización de llamadas telefónicas desde la web se basa en una técnica ya utilizada para abrir el cliente de correo desde el explorador. Si para enviar un email utilizamos el esquema mailto:, para indicar que un enlace corresponde a un teléfono, usaremos tel:
<html>
<body>
<div>
<label>Telf:</label>
<a href="tel:96 000 00 00" class="tel">Llamar</a>
</div>
</body>
</html>
Esto nos generará un enlace al número telefónico especificado.
Como curiosidad, ¿ que ocurrirá si abrimos el enlace en un dispositivo sin posibilidad de realizar llamadas telefónicas ?
El dispositivo detecta que es un número telefónico y nos da la opción de guardarlo en contactos.
Gestión de contactos
La otra posibilidad es la de ofrecer tarjetas de contacto completas desde la web. Podremos dar oportunidad a los visitantes de nuestra web de obtener nuestros datos de contacto en nuestro curriculum online público, los de los clientes asignados a un vendedor desde nuestro programa de gestión, o nuestra tarjeta de visita de nuestro restaurante
El mecanismo necesario para la integración de los contactos se basa en:
- Tipo MIME para la tarjeta de contacto text/x-vcard
- Formato VCARD
Veamos la implementación de una descarga en ASP.Net MVC
Utilizaremos un controlador sin vista asociada para devolver el contenido. El primer paso es anunciar el tipo MIME anteriormente citado y sugerir al navegador un nombre de archivo en la descarga
Response.ContentType = "text/x-vcard";
Response.Headers.Add("Content-Disposition", String.Format(@"attachment; filename=""{0}.vcf""", "Contacto"));
Ahora sólo nos falta generar el cuerpo de la respuesta. El formato VCard es un sencillo formato de texto, por lo que para generarlo construiremos una cadena y la devolveremos con el ActionResult Content, que nos permite devolver un valor de texto como cuerpo del mensaje.
String result = String.Format(@"BEGIN:VCARD
VERSION:3.0
ORG:{0}
TEL;TYPE=WORK:{1}
EMAIL;TYPE=WORK:{2}
ADR;TYPE=WORK:;;{3};{4};;{5};{6}
END:VCARD", "Nombre", "96 000 00 00", "email@email.com", "Direccion", "Ciudad","46000", "ES");
return Content(result);
Es importante comentar que las líneas de la VCard han de estar alineadas a la izquierda sin espacios en blanco, ya que si no el dispositivo nos puede dar un error de formato incorrecto
El código completo de la acción es el siguiente:
public ActionResult VCard()
{
Response.ContentType = "text/x-vcard";
Response.Headers.Add("Content-Disposition", String.Format(@"attachment; filename=""{0}.vcf""", "Contacto"));
String result = String.Format(@"BEGIN:VCARD
VERSION:3.0
ORG:{0}
TEL;TYPE=WORK:{1}
EMAIL;TYPE=WORK:{2}
ADR;TYPE=WORK:;;{3};{4};;{5};{6}
END:VCARD", "Nombre", "96 000 00 00", "email@email.com", "Direccion", "Ciudad","46000", "ES");
return Content(result);
}
Si accedemos a la descarga, se procederá a guardar el archivo en el dispositivo y su posterior importación a la agenda de contactos.
No hay comentarios:
Publicar un comentario