¿Cómo generar avatares para tus usuarios?

por:

¿Cómo generar avatares para tus usuarios?

Uno de los problemas comunes al que nos enfrentamos cuando queremos crear un proyecto web es cómo gestionar la privacidad de los usuarios. Distintos formatos de páginas y empresas, utilizan diversas técnicas pero hay una que viene siendo recurrente, el uso de un avatar o imagen del usuario.

¿Qué es un avatar?

Un avatar, de manera resumida, podríamos decir que es un imagen virtual que representa al usuario, normalmente con un aspecto similar a un comic o ilustración. Cuando decimos que representa a un usuario es porque tanto el avatar como el usuario suelen compartir algunas características, por ejemplo, el uso de gafas, pendientes, color de pelo, el llevar barba etc.

¿Cómo crear un avatar?

Normalmente la parte de creación de un avatar es una cosa que queda fuera del ámbito de tu proyecto web, ya que esperas que sea el usuario el que suba el suyo. Sin embargo, hay cierto tipo de público que prefiere un mayor grado de privacidad y no está dispuesto a usar un avatar. En este caso se pueden tomar dos decisiones:

  • Utilizar un avatar o imagen predeterminado
  • Generarles un avatar aleatorio

La primera opción es la más sencilla, pero al mismo tiempo delata fácilmente que ese avatar no representa al usuario, mientras que usando la segunda opción esto es más complicado.

Asignar un avatar a una persona es un proceso complejo, porque el usuario se tiene que identificar con el avatar

¿Cómo generar avatares para tus usuarios aleatoriamente?

En este artículo nos vamos a centrar en la segundo opción, para ello vamos a hacer uso del paquete de Node.js cartoon-avatar, el cual es capaz de devolvernos un avatar aleatorio tanto para mujeres como para hombres.

Para instalar el paquete debemos ejecutar:

1
npm install cartoon-avatar
npm install cartoon-avatar

Una vez que lo tenemos instalado podemos crear un archivo como el siguiente, para generar 3 avatares aleatorios y uno que además de ser aleatorio, sea de género femenino.

var toonavatar = require('cartoon-avatar');

console.log(toonavatar.generate_avatar());
console.log(toonavatar.generate_avatar());
console.log(toonavatar.generate_avatar());

console.log( toonavatar.generate_avatar({"gender":"female"}));

Si ejecutamos el archivo anterior, en mi caso he obtenido la siguiente salida:

1
2
3
4
https://raw.githubusercontent.com/Ashwinvalento/cartoon-avatar/master/lib/images/female/31.png
https://raw.githubusercontent.com/Ashwinvalento/cartoon-avatar/master/lib/images/male/78.png
https://raw.githubusercontent.com/Ashwinvalento/cartoon-avatar/master/lib/images/male/106.png
https://raw.githubusercontent.com/Ashwinvalento/cartoon-avatar/master/lib/images/female/56.png
https://raw.githubusercontent.com/Ashwinvalento/cartoon-avatar/master/lib/images/female/31.png
https://raw.githubusercontent.com/Ashwinvalento/cartoon-avatar/master/lib/images/male/78.png
https://raw.githubusercontent.com/Ashwinvalento/cartoon-avatar/master/lib/images/male/106.png
https://raw.githubusercontent.com/Ashwinvalento/cartoon-avatar/master/lib/images/female/56.png

A continuación se visualiza cada uno de los avatares:

El pase de diapositivas requiere JavaScript.

Espero que este artículo os haya parecido interesante.

Un saludo.

The following two tabs change content below.

Jorge Durán

Administrador, redactor y creador de Somos Binarios
Entusiasta de la tecnología desde los 10 años, desarrollador y creador de varios proyectos de software y autodidacta por naturaleza. Ingeniero Informático por la USAL