Cómo crear diferentes Sistemas de Votación para tu Web

Un pequeño tutorial de cómo crear 4 diferentes sistemas de votación para artículos o productos en nuestra web con un poco de HTML, Javascript y mucho CSS nos darán la posibilidad de agregar estos elementos a nuestra página… porque no todo va a ser WordPress y sus plugins.

Hola amig@s, este es mi 5º año participando en Octuweb y, para mí, siempre es un orgullo hacer un hueco -a veces es muy difícil encontrarlo- para dejar mi granito de arena y aportar algún recurso desde mi humilde experiencia. Agradezco a Félix el tenerme siempre en cuenta a la hora de hacer la convocatoria.

Nunca he pretendido ser ídolo de multitudes pero si, con un simple artículo, puedo ayudar a alguien a simplificar su tarea, he logrado mi objetivo. Este blog nos brinda la oportunidad de aportar algo de valor a algunos elegidos y ser uno de ellos me llena de satisfacción.

Rollo dicho, nunca me gustó escribir artículos dando consejos, no creo estar en condiciones de darle un consejo a nadie y no me gustaría cargar con la culpa interior de aconsejar mal a alguien, por eso, mis artículos siempre son sobre pequeños tutoriales de cómo crear cosas.

Y en este caso, este tutorial parecerá un poco simple pero, curiosamente, es uno de los temas por los que más consultas recibo en mi blog (o recibía hasta que el RGPD y Disqus tardaron en ponerse de acuerdo) y por eso quiero compartir 4 mini tutoriales de cómo votar contenidos en nuestra web.

Vivamos en Democracia

Vamos a dejarlo claro, no soy muy fan de creer que estos sistemas aporten algo… dudo mucho que una persona decida una compra de un producto en una tienda online por la cantidad de estrellas que tiene… todos sabemos que estos valores son manipulables. Tampoco me va a gustar más o menos un contenido por la cantidad de pulgares arriba, caras felices, pulgares abajo o caras tristes que tenga lo que estoy viendo. Seré yo quién decida la puntuación que le pongo a lo que leo.

Pero, viendo el lado positivo, estos sistemas nos pueden aportar una oportunidad de conocer cómo reacciona la gente a lo que le proponemos cuando visita nuestra web, lee nuestro artículo o busca un producto y este es el lado con el que nos quedaremos, con que estos sistemas son útiles y nos aportan valor.

Antes de nada

Para este tutorial he usado una base de datos MySQL para almacenar los votos recibidos y una imagen a modo de sprite con los iconos utilizados. La estructura de la tabla aparece a continuación y la imagen la puedes descargar desde este enlace.

Vamos al grano

Cerrando toda la introducción que hice -debo confesarlo, soy argentino de nacimiento, hablo hasta por los codos-, lo que vamos a ver son 4 sencillas pero diferentes formas de ofrecerle al usuario puntuar nuestro contenido.

Votación por Pulgar Arriba y Pulgar Abajo

Desde la época de los romanos el pulgar arriba o abajo marcó el destino de las personas pero en este caso, lo usaremos para indicar cuántos votos positivos y negativos recibe nuestro contenido.

Para ello, además de crear una base de datos (porque vamos a almacenar la cuenta), crearemos todas las funciones necesarias para mostrar el recuento actual, daremos opción a votar (no hemos puesto ninguna forma de bloqueo al voto repetitivo aunque sería muy fácil añadirla) y ejecutaremos mediante una llamada en Ajax nuestro voto.

Partiendo del primer paso en el que mostramos los elementos nos encontramos con:

Tenemos que tener en cuenta que podremos repetir estos elementos múltiples veces, razón por la cual deberemos tener siempre presente el intercambiar el ID del artículo o producto (de otro modo, se mostraría el mismo recuento para todos).

Un poco de CSS para poner bonitos nuestros dedos y un poco de javascript para hacer la votación:

Un fichero PHP con un pequeño código, recibirá nuestro voto y lo almacenará en la tabla correspondiente y asignándolo al producto o artículo en cuestión.

Adicionalmente, este código obtendrá el nuevo puntaje obtenido para devolverlo al javascript.

Votación con Estrellas

El típico star rating o votación con estrellas, donde asignamos a nuestro contenido una puntuación dentro del rango de 1 a 5, siendo 1 la puntuación más baja y 5 la más alta.

Este HTML será un poco más complejo, ya que debemos crear una capa superficial que seleccione la estrella a asignar, entonces tenemos:

Las estrellas base, es decir, 5 estrellas con borde pero sin relleno que hacen de base.

Las estrellas rellenas de color negro que indicarán el puntaje actual del contenido. En este caso, crearemos un div que estará posicionado por encima del base y su ancho será dinámico, resultando de la operación matemática:

Máximo posible = Total votos recibidos x 5 (ya que 5 es el puntaje máximo de cada voto)

Porcentaje del DIV = Puntaje Obtenido x 100 / Máximo posible

Para explicarnos mejor, si tenemos 3 votos (3 puntos, 4 puntos y 5 puntos) obtendremos:

Máximo posible = 3 x 5 (3 votos recibidos por el máximo de 5 puntos por voto) = 15 puntos

Porcentaje del DIV = (3+4+5) x 100 / 15 = 12 x 100 / 15 = 80

Este 80, sería igual a 80% ya que si el artículo o producto tuviera los 15 puntos, la capa superior (estrellas rellenas) deberían tener un ancho del 100% (es decir, las 5 estrellas pintadas); como nuestros votos suman 80, entendemos que es el 80% del tamaño del DIV base con lo que obtendremos 4 estrellas pintadas y 1 sin pintar.

Y por último, y por encima de estas dos capas, tendremos que crear una capa dinámica con 5 enlaces (cada uno llevará un valor de 1 a 5 como dato oculto) para que, al clicar sobre una estrella, el sistema entienda que quieres votar esa estrella y haga la correspondiente llamada Ajax a nuestro PHP que nos está esperando.

Básicamente tenemos:

En este tutorial es muy importante el atributo data-value ya que será el puntaje de la estrella pulsada. Tenemos que tener en cuenta que, por necesidades de la animación CSS al pasar el ratón por encima, el puntaje debe ir de mayor a menor ya que luego, por CSS, los elementos flotarán a la derecha, ordenándose.

Adornado con un poco de CSS:

Pero sin un poco de javascript de nada nos sirve:

Y, por último, el código PHP para conectarnos a la base de datos y guardar ese voto (que es el mismo que puse más arriba).

Te doy mi corazón

Este sistema es mucho más sencillo ya que simplemente se limitará a decir que doy mi vida por lo que estoy viendo (como el like de Instagram).

Opcionalmente, podemos mostrar el recuento de corazones que llevamos recibidos (en el ejemplo lo hacemos).

Aquí, básicamente tenemos un código que muestra un corazón:

Adornado con un poco de CSS:

Y, como en los casos anteriores, un poco de javascript que hace la magia del voto:

Y, también como en casos anteriores, el PHP que recibe el voto emitido.

Votación mediante emoticonos

Facebook fue el gran culpable de este sistema de votos… Emoticonos para expresar sentimientos y reacciones a los contenidos que leemos ya que, a veces, no es precisamente “Me gusta” lo que queremos decir.

Aquí, como no podía ser de otra manera, los hemos hecho un poco más gamberros que la conocida Red Social pero esto no quita que puedas personalizar tus emoticonos a tu gusto.

Empezaremos mostrando los emoticonos base y, como en otros casos, un recuento de las emociones recibidas en cada estado.

En este caso, nuestros estados serán: “LO AMO”, “ME GUSTA”, “SIN PALABRAS”, “WTF” y “LO ODIO” porque creo que representan más la forma en la que reaccionamos con lo que se lee hoy en día por la web.

Entonces, tenemos el siguiente HTML:

Nuevamente, es muy importante tener en cuenta el atributo data-voto ya que será el encargado de decirle al javascript el valor del voto emitido.

Al que personalizamos mediante CSS:

Pero no nos valdría de nada sin este pequeño Javascript:

Y, como siempre, el PHP se ocupará de la tarea pesada de almacenar el voto.

Códigos genéricos:

El sistema usa una serie de códigos genéricos que son:

1. Carga de votos iniciales mediante PHP

Esto nos permitirá tener en el array votos[tipo_de_voto] la cantidad obtenida hasta el momento de cargar la página inicialmente.

2. Envío de votos al fichero PHP mediante código javascript (damos por hecho que necesitas incluir la librería jQuery).

3. Función “alerta” hemos dicho…

Para todos los ejemplos, nos hemos basado en este sprite creado en formato PNG que contiene todas las imágenes necesarias.

Pues bien, hasta aquí hemos llegado con este mini tutorial. Creo que estos 4 métodos cubrirán todas tus necesidades y, como siempre digo, si lo mejoras me encantará saber qué le has hecho.

Para evitar múltiples votos

Como dije antes, el sistema no cubre estas opciones pero podemos bloquear múltiples votos de diferentes maneras tales como:

• Generando una cookie (cuidado con el RGPD, si te cambian el navegador te engañan, al menos 1 vez más)
• Capturando la IP del visitante (método menos fiable ya que la IP puede cambiar)
• Bloqueando el voto mediante una $_SESSION en PHP que dure X tiempo

Y no se me ocurre algún método más por ahora pero realmente te tienes que preguntar si te vale la pena el esfuerzo de fortalecer un código que, en el 90% de las veces, es irrelevante en una web y está de adorno o porque “mola”.

Pues nada, me despido, un vez más agradeciendo a Félix el contar conmigo otro año más y, si este tutorial te hizo ahorrar al menos 5 minutos de tu tiempo, me auto-voto con un corazón, un lo amo, un pulgar arriba y las 5 estrellas 🙂