Personalizar el blog a criterio de los usuarios, de forma permanente | Oloblogger No sabía cómo demonios titular este post para que quedara clara la idea y como seguro que no lo he c...

16 de marzo de 2011

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 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">
&#9675; Ver DIV Carlota

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

&#9675; 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?

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

10 comentarios :

  1. Es muy tonto lo que pregunto,pero no entiendo nada de esto.Osea,como permanente?
    Bss

    ResponderEliminar
  2. Ori, ve a la página de demostración y clicka en la opción que prefieras para que NO se vea algo. Comprobarás que desaparece en cuanto le das al botón de envío del formulario.

    Vuelve mañana y seguirá sin verse. Si no lo hubiera hecho con coookies, mañana (en realidad en cuanto refrescaras), se volvería a ver el elemento en cuestión.

    De esta manera, mientras tú no cambies tus opciones de configuración, los elementos marcados seguirán sin verse... para tí. Aquellos usuarios que no hayan marcado nada o los que hayan marcado sí, seguirán viéndolos.

    ResponderEliminar
  3. Hola Olorman. Tengo algunas dificultades técnicas y de diseño. No sé si será posible. Yo soy de Cartagena, creo que tú también. Me gustaría poder verte en persona para alclarar cosas. ¿Es posible?

    De momento, mi consulta prioritaria se refiere a un problema tengo con el enlace a algunas entradas. Antes tenía en la columna un gadget de entradas recientes y otra de entradas populares. Resulta que he comprobado que me lleva a la nada. No sólo ahí. Acabo de comprobar que en los archivos del blog tampoco me redirecciona más que a un escudo y no sale el texto. Y en una pestaña para páginas, en la que se denomina entrevistas, me pasa lo mismo. ¿Qué puedo tener mal? Te digo mi blog: http://culemania-sito.blogspot.com

    P.D.: Ahora estoy muy interesado en cuidar el blog porque empiezo a notar un crecimiento. Gracias

    ResponderEliminar
  4. Pues siento decirte que no va a ser posible Sito, porque bastante tengo con las consultas en el blog, en Twitter, en Facebook y por correo, como para también atenderlas en persona :) Supongo que lo entiendes...

    Bueno, a lo que vamos. Resulta que tienes una plantilla de las del nuevo diseñador y esas son un auténtico coñazo para modificar. Los síntomas de lo que me cuentas y de lo que he visto, me llevan a pensar que tienes alguna condición mal puesta en algún sitio, que hace que cuando estás en páginas individuales (item), el contenido del post no salga.

    Yo desde aquí no puedo ver dónde está el problema, pero empezaría a buscar (con plantillas de artilugios expandidas) la variable data:post.body, que es la que contiene todo lo escrito en cada post. Por los alrededores, apostaría a que hay alguna condición del tipo de la que te digo.

    Y ahora los consejos:
    1. Antes de grabar, usa Vista Previa.
    2. Y por si es algo que no puedes ver previamente, como te hubiera ocurrido en este caso, siempre guarda antes de hacer cambios, una copia de seguridad

    ResponderEliminar
  5. Gracias Oloman. Lo he solucionado, volviendo a la plantilla predeterminada.Gracias porque, después de leerte se me ha ocurrido esa tontería y fíjate: solucionado.

    ResponderEliminar
  6. Bien Sito. Esa solución sólo la dejo como último recurso, pero si no habías cambiado muchas cosas, mejor... porque algo había mal seguro ;)

    ResponderEliminar
  7. Me fascinan los artilugios que permiten a los lectores 'participar' en el diseño del blog que leen y mucho más si pueden guardarse los cambios. Admirable entrada.

    ResponderEliminar
  8. Jaime, gracias colega ;)

    ResponderEliminar
  9. Hola que tal, oye no se si me podrías explicar... mira loque quiero lograr es esto: como mostrar una entrada cuando entres al blog pero solo la primera vez que lo visite (digamos la primera entrada que esta en el blog en la pagina de inicio) y que al volverlo a visitar se le muestre otra entrada (ya sea la segunda entrada o cualquiera) creo que si me explique mas o menos :)

    Bueno me ayudarías bastante y agradecería tu ayuda en verdad es para un proyectito que tengo planeado pero no he logrado como hacerlo...

    porfa si me pudieras ayudar muchas gracias...

    me gusta tu blog porque siempre ayudas men la verdad lo aprecio, bueno te dejo espero me puedas ayudar, Saludos.

    ResponderEliminar
  10. Hola ¿Cuál es el objetivo exacto de eso? Lo digo porque quizás haya una forma más fácil de hacerlo que con esto. Amplia y concreta el ejemplo, porque no sé si lo que quieres es mostrar una entrada al azar cada vez que se visita el blog o quizás que siempre se muestre una cosa fija la primera vez y las siguientes las entradas normales...

    ResponderEliminar