3 útiles APIs generadoras de avatares

Bruno Sarverry — Tue, 20 Apr 2021 16:51:43 +0000

Asocie una identidad visual al perfil de los usuarios de su producto tecnológico, implementando alguna de las siguientes soluciones mediante API.

¿Por qué prestar atención a implementar avatares en nuestros desarrollos?

Más allá de la función que cumple en la interfaz de usuario, los avatares(aquellas imágenes que representan nuestra identidad de manera online) pueden permitirnos crear una identidad visual a nuestro producto tecnológico, haciendo que destaque por sobre el resto.

Por ello, aquí presentamos 3 APIs generadoras de avatares(de entre varios) que son gratuitos, sin límite, y no necesitan de crear una cuenta, para implementar en sus proyectos:

UI Avatar
Joe Schmoe
Gravatar

UI Avatar

Un generador enfocado en las siglas de nuestros nombres, muy común en los clientes de correo electrónico.
En función de un nombre y un color, puede representar la identidad del usuario de su plataforma de manera discreta y conservadora.



https://ui-avatars.com/api/?name=Jon+Snow&background=0D8ABC&color=fff&size=128

Joe Schmoe

Una colección de ilustraciones coloridas de personas. Una manera distinta(y de actitud) para usar como imagen de perfil para sus usuarios.

A partir de un nombre, un correo electrónico, o una ID, puedes solicitar el mismo avatar varias veces, por lo que podrás asociar la identidad del usuario con la misma.
Aparte de un identificador, puedes solicitar el avatar en función del sexo inclusive.



https://joeschmoe.io/api/v1/male/jon

Gravatar

Posiblemente el más famoso, es utilizado por una multitud de sitios web(Github, Disqus, Stackoverflow, Gitlab, entre otros).
El propósito de Gravatar es que tengas un Avatar de Reconocimiento Global, en el que cargas los datos de tu perfil una única vez, y cualquier sitio web que esté asociado a Gravatar insertará tu perfil creado en él.
Aqui nos interesa la funcionalidad integrada de Gravatar de generar un avatar temático, enviando como parámetro un hash md5 de algún identificador único para el usuario que administras, por ej. usando su email:



#Email del usuario
email = "  Jon.Snow@thewall.north "
# Eliminamos los espacios en blanco
email = email.strip()
# Forzamos todos los caracteres en minúscula
email = email.lower()
print(email) # jon.snow@thewall.north

# Obtenemos el hash md5
import hashlib
hash = hashlib.md5(email.encode())

print(hash.hexdigest()) # bfcb1d6a22d7098499771d3bcec5a8c4

Tenemos diversas temáticas para elegir:

identicon: patrones geométricos únicos. ```

https://www.gravatar.com/avatar/bfcb1d6a22d7098499771d3bcec5a8c4?d=identicon&f=y&s=128

![gravatar identicon example](https://www.gravatar.com/avatar/bfcb1d6a22d7098499771d3bcec5a8c4?d=identicon&f=y&s=128)

- **monsterid:** distintas caricaturas de monstruos(variando el rostro, color, etc.).

https://www.gravatar.com/avatar/bfcb1d6a22d7098499771d3bcec5a8c4?d=monsterid&f=y&s=128

![gravatar monsterid example](https://www.gravatar.com/avatar/bfcb1d6a22d7098499771d3bcec5a8c4?d=monsterid&f=y&s=128)

- **wavatar:** distintas expresiones de rostros en diversos colores.

https://www.gravatar.com/avatar/bfcb1d6a22d7098499771d3bcec5a8c4?d=wavatar&f=y&s=128

![gravatar wavatar example](https://www.gravatar.com/avatar/bfcb1d6a22d7098499771d3bcec5a8c4?d=wavatar&f=y&s=128)

- **retro:** rostros pixeladas al estilo 8-bit.

https://www.gravatar.com/avatar/bfcb1d6a22d7098499771d3bcec5a8c4?d=retro&f=y&s=128

![gravatar retro example](https://www.gravatar.com/avatar/bfcb1d6a22d7098499771d3bcec5a8c4?d=retro&f=y&s=128)

- **robohash:** distintas caricaturas de robots(variando el rostro, color, etc.).

https://www.gravatar.com/avatar/bfcb1d6a22d7098499771d3bcec5a8c4?d=robohash&f=y&s=128

![gravatar robohash example](https://www.gravatar.com/avatar/bfcb1d6a22d7098499771d3bcec5a8c4?d=robohash&f=y&s=128)

- **mp:** (mystery-person) una simple silueta de una persona por defecto. Nota: no requiere de un hash en específico.

https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y&s=128

![gravatar mistery person example](https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y&s=128)

Acortar URL + Código QR, en Python

Bruno Sarverry — Tue, 20 Apr 2021 16:17:39 +0000

Acortar URL permite simplificar y hacer más atractivo estéticamente un link, como también poder registrar los click que realizan en ellos.
Los códigos QR ayudan a la comodidad del usuario, evitando introducir datos de forma manual en los teléfonos.
La suma de ambos dará como resultado un Código QR lo más reducido en tamaño posible, resultando más atractivo en lo estético, y pudiendo además(gracias a los servicios acortadores de URL) tener información estadística del uso del mismo.
Todo esto, usando uno de los lenguajes de programación de más auge en estos últimos tiempos.

Acortar URL

La manera más fácil y rápida es usando la librería pyshorteners, que pone a disposición muchas APIs acortadoras de URL para usar.
Instalamos directamente de PyPi:

pip install pyshorteners

Aquí una lista de los servicios disponible para acortar las urls, con sus implementaciones respectivas.
Para nuestro ejemplo usaremos da.gd como solución:

import pyshorteners

shortener = pyshorteners.Shortener()
short_url = shortener.dagd.short('https://en.wikipedia.org/wiki/Jon_Snow_(character)')
print(short_url) # https://da.gd/5X3NV

De esta manera reducimos notablemente la cantidad de carácteres, que nos servirá para el siguiente paso.

Generar QR

Nos apoyaremos de las librerías python-qrcode y Pillow(Python Imaging Library) para crear los códigos.
Instalamos directamente de PyPi:

pip install qrcode pillow

Y aplicamos:

import qrcode

qr = qrcode.QRCode(
    box_size=5,
    error_correction = qrcode.constants.ERROR_CORRECT_M,
    )
qr.add_data('https://da.gd/5X3NV')
qr.make(fit=True)

img = qr.make_image()
img.show()

El parámetro box_size es el tamaño en píxeles de cada cuadrado del QR.
Con error_correction definimos la corrección de errores para el QR. Hay 4 constantes definidas dentro de la librería de códigos QR (a mayor porcentaje de corrección, posiblemente dimensiones más grande del QR):

ERROR_CORRECT_L: corrección de errores del 7% o menos.
ERROR_CORRECT_M(por defecto): corrección de errores del 15% o menos.
ERROR_CORRECT_Q: corrección de errores del 25% o menos.
ERROR_CORRECT_H: corrección de errores del 30% o menos.

Definiendo a fit igual a True determina el tamaño del QR automaticamente a partir del valor de entrada en add_data.

Resultado

El producto final(comparándolo con la misma URL sin acortar) es:

Conclusión

Para la experiencia de usuario: a más pequeño un código QR, menos complejo al ojo humano, y visualmente más atractivo.
Por tanto hay que tener en cuenta que:

a mayor cantidad de carácteres, más grande las dimensiones del código QR;
a más grande las dimensiones del código QR, más le cuesta al smartphone procesar el contenido a escanear.

Podemos también tener estadísticas de interés sobre las reacciones/escanéos del código QR que hicimos, a partir de la función de contabilización de clicks al enlace que ofrece algunos servicios, por ejemplo bit.ly.

import pyshorteners

shortener = pyshorteners.Shortener(api_key='YOUR_KEY')
shortener.bitly.total_clicks('https://bit.ly/TEST')

DEV Community: Bruno Sarverry