DEV Community

loading...
Cover image for 3 Útiles APIs Generadoras de Avatar

3 Útiles APIs Generadoras de Avatar

bruino profile image Bruno Sarverry ・3 min read

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

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
Enter fullscreen mode Exit fullscreen mode

ui avatar example


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
Enter fullscreen mode Exit fullscreen mode

joe schmoe example


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
Enter fullscreen mode Exit fullscreen mode

Tenemos diversas temáticas para elegir:

  • identicon: patrones geométricos únicos.
https://www.gravatar.com/avatar/bfcb1d6a22d7098499771d3bcec5a8c4?d=identicon&f=y&s=128
Enter fullscreen mode Exit fullscreen mode

gravatar identicon example

  • monsterid: distintas caricaturas de monstruos(variando el rostro, color, etc.).
https://www.gravatar.com/avatar/bfcb1d6a22d7098499771d3bcec5a8c4?d=monsterid&f=y&s=128
Enter fullscreen mode Exit fullscreen mode

gravatar monsterid example

  • wavatar: distintas expresiones de rostros en diversos colores.
https://www.gravatar.com/avatar/bfcb1d6a22d7098499771d3bcec5a8c4?d=wavatar&f=y&s=128
Enter fullscreen mode Exit fullscreen mode

gravatar wavatar example

  • retro: rostros pixeladas al estilo 8-bit.
https://www.gravatar.com/avatar/bfcb1d6a22d7098499771d3bcec5a8c4?d=retro&f=y&s=128
Enter fullscreen mode Exit fullscreen mode

gravatar retro example

  • robohash: distintas caricaturas de robots(variando el rostro, color, etc.).
https://www.gravatar.com/avatar/bfcb1d6a22d7098499771d3bcec5a8c4?d=robohash&f=y&s=128
Enter fullscreen mode Exit fullscreen mode

gravatar robohash example

  • 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
Enter fullscreen mode Exit fullscreen mode

gravatar mistery person example

Discussion (0)

pic
Editor guide