Oloblogger

Personalizar el blog a criterio de los usuarios, de forma permanente

Posted: 16 Mar 2011 01:55 PM PDT

No sabía cómo demonios titular este post para que quedara clara la idea y como seguro que no lo he conseguido, lo primero que haré será explicarla.

Lo que vamos a crear es un apartado con un formulario. Desde ese formulario, cualquier visitante de nuestro blog podrá marcar lo que quiere ver en él y lo que no. Esas opciones quedarán grabadas mediante cookies, de manera que los cambios solicitados por el usuario se mantendrán durante un tiempo determinado. O si así lo deseamos nosotros, de manera permanente.

Si todavía no se ve claro, podéis probar esta página de demostración.

Lo primero que necesitamos es insertar -si no lo tenemos ya- un sistema de gestión de cookies. En el enlace anterior están las indicaciones para instalar lo que nos permitirá grabarlas, leerlas y borrarlas. Como se explica en aquella entrada, nos sirve para cualquier ocasión en que tengamos que manejar galletitas.

A continuación y siempre antes del </head> insertamos dos funciones JavaScript. Una nos permitirá grabar las cookies que necesitamos para controlar de forma duradera las opciones marcadas por el usuario (function opciones). La otra (function comprobarseleccion) y la pequeña parte CSS (.visible/.invisible), sirven en este ejemplo para leer las cookies y, en función de su valor, mostrar u ocultar el bloque deseado.

<style type='text/css'>
.visible {display:block;}
.invisible {display:none;}
</style>

<script type='text/javascript'>
//<![CDATA[
function opciones(nombrediv,nombrecookie){
var elementos = document.getElementsByName(nombrediv);
var i;
for(var i=0; i<elementos.length; i++) {
if (elementos[i].checked)
break;
}
var expiracion = new Date();
expiracion.setTime(expiracion.getTime() + 30000),"/";
setCookie(nombrecookie,elementos[i].value,expiracion);
}
function comprobarseleccion (nombrediv,nombrecookie) {
var comprobar = getCookie(nombrecookie);
var elemento = document.getElementById(nombrediv);
if (comprobar == "1" ){elemento.className="invisible";}
else {elemento.className="visible";}
}
//]]>
</script>

El 30000 marcado en verde es el tiempo que tardarán en desaparecer las cookies que grabemos con este sistema. Ese tiempo viene en milisegundos, por lo que desaparecerán a los 30 segundos. Lo he hecho así para que podáis hacer pruebas sin esperar mucho. Una vez que esté todo a vuestro gusto, podéis cambiar ese tiempo por el valor que queráis. Para que la cookie dure un año sólo tendríais que usar el valor 60000*60*24*365. Si multiplicáis adicionalmente por 99, creo que la cookie ya se podrá considerar eterna.

Bien. Ya tenemos la base para que todo funcione. Ahora sólo nos falta el formulario y retocar los bloques (div) que queremos dejar afectos a este sistema.

El formulario lo podemos crear en un página estática o si os parece oportuno, en un gadget tipo HTML/JavaScript. Debería tener una estructura más o menos así:

<div style="background: #eeeeee; border: 1px solid #000000; margin: 0px auto; padding: 20px; width: 300px;color:#000000;">
<form name="seleccion">
○ Ver DIV Carlota

<input name="carlota" type="radio" checked value="0" />Si
<input name="carlota" type="radio" value="1" />No

○ Ver DIV Mercedes

<input name="mercedes" type="radio" checked value="0" />Si
<input name="mercedes" type="radio" value="1" />No

<input name="guardar" onClick="opciones('carlota','carlotacookie');opciones('mercedes','mercedescookie');document.location.reload();" type="button" value="Guardar" /></form>
</div>

Aquí hay tres cosas a tener en cuenta. La primera es que los botones radio que pertenecen a la misma pregunta, tengan el mismo nombre (name). En el ejemplo, las preguntas son dos. Una se llama carlota (ambos botones radio tienen idéntico nombre) y la otra mercedes (idem), pero podéis escoger el nombre que mejor os venga.

Otra es que tiene que haber una llamada a la función opciones(), por cada pregunta que se plantee. Estas funciones estarán en el input que forma el botón y en concreto, dentro del onClick. En el código de arriba quizás se ve más claro que en esta explicación.

Por último, cada función tiene que pasar dos parámetros. El primero será el nombre del campo que hayamos utilizado para cada pregunta (carlota o mercedes en el ejemplo). El segundo será el nombre que queramos poner a la cookie correspondiente (carlotacookie o mercedescookie).

Con los nombres de las cookies hay que ser creativos. Tened en cuenta que al ir a la demo de este código, se os grabará una cookie con ese nombre que yo he elegido. Si vosotros ponéis el mismo, cualquiera que haya pasado por aquí o por otro blog que no se haya molestado en cambiar el nombre, tendrá grabadas las opciones que eligió al visitar la demo. Ese es otro motivo por el que he usado sólo 30 segundos en el ejemplo. Una buena opción sería incluir una especie de prefijo/sufijo personalizado, como podría ser un número personal o incluso el nombre de vuestro blog (cookie1234olobloggercarlota, por ejemplo). Lo dicho, para pruebas podéis copiar y pegar tal cual, pero si definitivamente dejáis instalado esto, mejor que cambiéis los nombres de las cookies.

Ya tenemos el código para la gestión de cookies, las funciones que las graban, leen e interpretan, y el formulario para el usuario. Ya sólo nos falta adaptar los elementos a mostrar/esconder. Pero una vez hecho bien todo lo demás, esta es la parte más fácil.

<div id="carlota" class="visible">
ESTE ES EL DIV CON ID=CARLOTA
</div>
<div id="mercedes" class="visible">
ESTE ES EL DIV CON ID=MERCEDES
</div>
<script type="text/javascript">
comprobarseleccion('carlota','carlotacookie');
comprobarseleccion('mercedes','mercedescookie');
</script>

A cada capa habrá que añadirle una ID única y la clase creada al principio del todo y que llamamos visible. Después se utiliza la función comprobarseleccion con todas y cada una de las capas que queramos condicionar, enviando como parámetros el nombre del ID y el de la cookie asociada a ese ID.

Voila.

Todo esto se me ha ocurrido a partir de una entrada que Pizcos publicó hace unos días, en referencia a la conveniencia o no de usar los botones sociales en nuestros blogs. Esta podría ser una opción para que cada usuario eligiera si quiere verlos o no. Por cierto, que ya podéis estar votando allí sobre el tema. La encuesta la tenéis en su barra lateral y son sólo 4 preguntas.

También se puede aplicar a los bloques de publicidad o incluso, en plantillas líquidas (las que llevan las columnas en %, para que se pueda elegir si se desea ver la sidebar. En fin, para cualquier elemento de bloque que pueda tener vuestro sitio.

Se podría utilizar para configurar otro tipo de cosas a criterio del visitante, modificando la función comprobarseleccion, como por ejemplo, el color de fondo o el tamaño de letra. ¿Se os ocurre algo más?