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

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 estapágina de demostración.

Lo primero que necesitamos es insertar -si no lo tenemos ya- unsistema 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 manejargalletitas.

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; ielementos.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

El30000 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 valor60000*60*24*365. Si multiplicáis adicionalmente por99, 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 unpá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 llamacarlota (ambos botones radio tienen idéntico nombre) y la otramercedes (idem), pero podéis escoger el nombre que mejor os venga.

Otra es que tiene que haber una llamada a la funciónopciones(), por cada pregunta que se plantee. Estas funciones estarán en elinput que forma el botón y en concreto, dentro delonClick. 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 omercedes en el ejemplo). El segundo será el nombre que queramos poner a la cookie correspondiente (carlotacookie omercedescookie).

Con los nombres de las cookies hay que ser creativos. Tened en cuenta que al ir a lademo 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 unaID única y la clase creada al principio del todo y que llamamosvisible. Después se utiliza la funcióncomprobarseleccion con todas y cada una de las capas que queramos condicionar, enviando como parámetros el nombre delID y el de la cookie asociada a eseID.

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 deusar 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 votandoallí 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óncomprobarseleccion, como por ejemplo, el color de fondo o el tamaño de letra. ¿Se os ocurre algo más?

CosasParaMiBlogs

miércoles, 16 de marzo de 2011

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

Popular Posts

Blogger news

Labels

Blog Archive