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.
¿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:
npm install cartoon-avatarUna 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:
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:
Espero que este artículo os haya parecido interesante.
Un saludo.