Sortea2 Blog

La página de Sortea2 abunda en el uso de Javascript mediante librerías de Jquery. Quizás a veces los efectos sean hasta molestos (lo sentimos) pero no se puede decir que la página es estática.

Cuando se utiliza Jquery una de las mayores ventajas que se esgrimen es la existencia de innumerables plugins, a cual más útil. Y es verdad. Pero también es complicado adaptarse a cada uno de ellos. Cada programador tiene sus manías, sus ideas propias, su forma de hacer las cosas diferente. El uso de plugins tomados cada uno de un sitio, creados por programadores diferentes, da una absoluta falta de homogeneidad en el código.

Si uno se acostumbra a copiar trozos de código de aquí y de allí, es un script kiddie, un niñato que no sabe programar, sólo mal reutilizar.

Pero ante la ingente cantidad de herramientas tecnológicas, cada una con sus peculiaridades, se debe elegir entre eso o luchar vanamente por tratar de conocer un lenguaje para que pocos días después surja uno nuevo y también imprescindible. Por eso creo que es justificable el copypasteo de código ajeno, aunque a veces obtengamos resultados poco coherentes. Pero operativos.

Siempre luchando por entender las peculiaridades de cada uno de los plugins, a veces uno se frustra al ver que no hay forma de hacer funcionar uno en particular. Esto no se suele comentar mucho, porque se mira la página del desarrollador, con la demo operativa, se da plamas, se guarda el link y luego cae en el más oscuro de los olvidos, sin pensar la utilidad de aquello.

Por eso si vas a desarrollar un plugin para Jquery, te recomendaría en que emplearas el máximo tiempo posible en tener una demo que funcione, con diseño excelente. Que luego el plugin sea operativo o no, es lo de menos porque no se va a usar tanto como parece.

En fin, que paso a detallar los plugins que hemos usado en Sortea2.com, y cuales no y por qué. No trata de ser una lista de «mejores plugins», sino simplemente de plugins que han funcionado.

1. Calendario.

Hemos empleado el plugin datePicker.
Su funcionamiento no es muy complejo de configurar y el resultado es sencillo, admitiendo días y fechas en castellano.
Lo tenemos en la ventana de sorteos programados, para ver la fecha en que se programa un sorteo.

Por contra, aunque existen varios plugins para seleccionar la hora que nos podían haber servido en esa misma página, tras probar con varios siempre obtuvimos resultados poco satisfactorios. No dudo que el plugin funcione, pero para nuestro caso no servía. Y no pedíamos nada especial, simplemente un selector de fechas.

Tanto este TimePicker, com este otro timepicker llegaron a funcionar, pero la hora no había forma de ajustarla al control indicado, siempre aparecía en la parte de abajo de la página. También existe un tercer plugin para seleccionar horas, pero ya es suficiente por el momento.

Seguramente la causa no era otra que algún tag de html mal cerrado por nuestra parte, o una mala configuración de las propiedades. El caso es que tras mucho tiempo perdido, decidimos descartarlo definitivamente.

Preparar un selector de horas y minutos es trivial, ni siquiera hace falta javascript, por lo que al final tomamos ese camino, con el resultado que podéis ver en la página de sorteos avanzados.

Quizás falte coherencia en el diseño entre la selección de fecha y hora. Es algo que podemos mejorar con el tiempo.

2. Cookie.

El que hayamos usado un plugin para manejar las cookies lo veo más como un error y un síntoma de la paranoia que hay en torno al uso de los plugins. Hasta para la tarea más sencilla se buscan utilidades hechas por otros. Creo que si hubiéramos usado javascript puro y duro, habríamos necesitado menos código que con este plugin. Pero al menos permite el uso sencillo de cookies.

En la aplicación tenemos dos cookies, una para controlar el idioma con el que se accede a la página y otra para gestionar las identidades de los usuarios.

El plugin al que me refiero es este.

3. Subida de ficheros mediante Ajax.

Una de las peores ideas que tuvimos al desarrollar la página fue permitir el subir un listado de nombres cargándolo desde un fichero. Es una de estas funcionalidades que consumen mucho tiempo de desarrollo y que luego nadie usa. O peor aún, nadie usa para bien porque son una puerta abierta a las vulnerabilidades.

Al final la hicimos. También en la ventana de sorteos avanzados, se puede cargar una lista de nombres de un fichero, idealmente un .txt en que cada nombre ocupa una línea.

De nuevo aquí tiramos de un plugin que permite hacer una subida de fichero en forma totalmente asíncrona, sin tener que recargar la página y sin causar problemas.

Este es el plugin para subir ficheros con Jquery. Causó numerosos problemas conseguir adaptarlo al funcionamiento de la página, en gran parte porque fue una de las primeras tareas desempeñadas, cuando aún estábamos iniciándonos con el Jquery.

La idea inicial y algo que llegamos a hacer era mostrar la lista de nombres en un espacio dentro de la ventana, para que el usuario pueda ver quiénes participarán en el sorteo. Pero con el tiempo se nos fue acabando el sitio en la ventana y ya era todo muy complicado. Costó quitar una funcionalidad que ya estaba hecha, pero era necesaria una mayor simplicidad.

4. Livequery.

Livequery es posiblemente el plugin más útil de todos los que hemos empleado.

Nuestro problema es que cuando creábamos controles dinámicamente (como las listas de nombres y la de premios, que se amplian conforme el usuario va añadiendo más) era complicado hacer que estos controles heredaran los eventos de los controles iniciales en la página.

La tarea de añadir un listener a los eventos para nuevos controles era un motivo de quebraderos de cabeza. Y sin embargo con usar livequery esto se solucionó automáticamente.

Además fue el plugin más sencillo de implementar, pues es casi trivial. ¡Estamos enamorados de Livequery!

5. Dynacloud.

También tenemos una nube de etiquetas, como toda aplicación que quiera parecer 2.0. Y para ello lo primero era buscar el plugin correspondiente. En este caso, Dynacloud, para hacer una nube de tags.

Pues bien, no conseguimos hacerlo funcionar en la forma en que nos hubiera gustado. De nuevo mil historias, y cuando lográbamos que apareciera algo, estaba fuera de formato o al final de la página. Hicimos la funcionalidad desde cero, no es nada difícil.

6. Sugerir tag.

Finalmente, un plugin para sugerir un tag cuando estás escribiendo un nuevo sorteo. Como se hace en delicious, cuando introduces las primeras letras realiza una consulta y obtiene tags similares ya empleados para crear mayor uniformidad en la información.

No sin algo de sufrimiento, también se pudo poner en marcha con un resultado que consideramos muy bueno.

Como se hacen consultas continuas al servidor, para cada uno de los caracteres, en orden a aliviar la carga sobre la base de datos, optamos por cargar todos los tags en un fichero. De esta forma, no se realiza ninguna consulta a base de datos, simplemente se abre el fichero, se vuelca directamente sobre un array y se buscan las coincidencias.

Este fichero de tags se va actualizando cada cierto tiempo mediante una tarea y santas pascuas. Nos libramos de tener que estar machacando la base de datos realizando consultas poco eficientes (el «like» en SQL no es lo más rápido y directo que digamos).

Como resumen, espero que esta entrada le sirva a alguien de ayuda para ver cómo los plugins te solucionan problemas y ahorran tiempo, pero a veces pierdes mucho tiempo sin poder hacerlos funcionar y otras es más eficaz codificar uno mismo la tarea que necesita.
También puedes ver plugins que a lo mejor no son muy espectaculares, pero son operativos y necesarios para el funcionamiento de una página.