Recuerden que siempre divido mis artículos técnicos sobre el blog en dos secciones: «¿qué he hecho?» y «¿cómo lo he hecho?». Si solo te interesa saber cómo se va a ver el efecto que he creado, quédate en el qué. Si quieres saber además los entresijos técnicos y/o cómo usar este efecto en tu blog de La Coctelera, lee también el cómo.

¿Qué he hecho?

Fruto de mi mente gamberra, he decidido poner vista previa de comentarios en este blog. Es algo que quería hacer hace tiempo, en parte motivado por las quejas de algunos de mis comentaristas, indicando que no estaría mal esa característica en La Coctelera.

¿Resulta realmente útil? Pues no sé... Si lo miramos desde el punto de vista de la interacción del usuario, quizás no sirva para nada. Aunque yo me he descubierto en las pruebas mirando el panel de vista previa en lugar de mirar la caja para meter el comentario cuando lo escribía. Algo querrá decir eso.

Esta característica es totalmente experimental, así que puede cambiar o incluso ser eliminada con el tiempo. Todavía hay que refinarla un poco, pero he preferido lanzarla ya para que ustedes mismos puedan comentarme sus posibles fallos.

¡Ah! He probado el engendro en Mozilla Firefox, en Internet Explorer 6 y en Opera 8.5, todos para Windows. En los tres navegadores funciona, con los siguientes puntos a tener en cuenta:

  • Tanto en Firefox como en Opera funciona perfectamente, tal y como esperaba. Se ve justamente lo que yo quería que se viese.
  • Internet Explorer, para variar, hace lo que le sale de los cojones. La vista previa realmente funciona, pero no se ve el título del panel de vista previa (el que tiene el fondo amarillo claro), y además, al escribir un comentario la caja de texto hace cosas raras. De todas formas, funciona.
  • En los comentarios de verdad hay algunas cosas que son filtradas, pero como la mayoría de mis lectores no las usan, no creo que eso tenga importancia de momento. De hecho, solo recuerdo a uno de mis lectores intentando meter una imagen en los comentarios (no se puede).

Pues nada. Háganle cosquillas al invento, y a muerte con ello.

¿Cómo lo he hecho?

Por un lado, hay un fichero llamado vistaPreviaComentarios.js que contiene el código para mostrar el panel de vista previa y lograr que copie los contenidos de la caja de texto de comentarios. Lo hago mediante manejo de eventos en Javascript.

Por otro lado, en la hoja de estilos del blog he definido dos estilos llamados #preview y #preview:before que son los que le dan el aspecto al panel de vista previa que creo con el código Javascript.

Si quieren probar si funciona lo de la vista previa solo tienen que subir el fichero vistaPreviaComentarios.js a su blog (igual que cuando suben una foto, por ejemplo), y poner el siguiente código en la sección «Sobre mí»:

 <script type="text/javascript"
 src="http://www.lacoctelera.com/myfiles/↵
 TUBLOG/vistaPreviaComentarios.js?Expires=1339538400&Signature=WHUsZYwD0MCmSxOABm2foakNMNbicAK9JIsmFuWi7sGhHEgIiYIMFvnIbluKFLpaYPahH6VnP8JUlBav7-mTLZutPkGHbx8tn1wDcsxzRjBc9proKPF8vOaG9J~IBhQQJZsZJDCuDqgR9mOnK2M2lTCTbLGg3lzGax3W3uIid-4_&Key-Pair-Id=APKAJYN3LZI5CG46B7AA&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cDovL2QzZHM0b3k3ZzF3cnFxLmNsb3VkZnJvbnQubmV0LzxzdHJvbmcgY2xhc3M9Y2FycmlhZ2VSZXR1cm5BcnJvdz4mY3JhcnI7PC9zdHJvbmc-DQpUVUJMT0cvdmlzdGFQcmV2aWFDb21lbnRhcmlvcy5qcyIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTMzOTUzODQwMH19fV19"></script>

¡Ojo! Donde pone «TUBLOG» va el nombre de tu blog (por ejemplo «adastra» o «jacosito» o «yeyo», por ejemplo).

Si quieres además ponerle el mismo estilo que utilizo yo al panel de vista previa, puedes crear un fichero con extensión .css que se llame, por ejemplo, vistaPreviaComentarios.css (qué original). En el ficherito escribe lo siguiente:

 /* Panel de vista previa */
 #preview {
   background: #ffffe0;
   padding: 5px;
   border: 1px dashed #dddddd;
 }
 
 
 /* Título del panel de vista previa */
 #preview:before {
   color: #aaaaaa;
   font-size: 1.3em;
   display: block;
   border-bottom: 1px solid #dddddd;
   margin-bottom: 10px;
   content: "Vista previa del comentario";
 }

Después de escribir esto me he dado cuenta de que total, bien puedo crear yo el fichero vistaPreviaComentarios.css por ti ;) Bueno, descárgalo, súbelo a tu blog y escribe lo siguiente en la sección «Sobre mí»:

 <style type="text/css">
 @import url('http://www.lacoctelera.com/myfiles/↵
 TUBLOG/vistaPreviaComentarios.css');
 </style>

¡Cópienlo tal cual! Excepto donde pone «TUBLOG». Ya sabes lo que tienes que poner ahí.

¡Eso es todo, amigos! Recuerden: esto es un experimento, así que no garantizo ni su funcionamiento, ni que les casque los estilos de su blog. En teoría no tiene por qué romper nada, pero tampoco puedo asegurarlo.

PS La flechita roja que aparece en los cuadros de código (↵) quiere decir que he tenido que partir la línea para que me quepa en el artículo. De lo contrario, la línea se hubiera salido por el margen derecho. O sea, que la línea que está después de la flechita es continuación de la línea de arriba. Si van a copiar el texto de los cuadros ténganlo en cuenta para quitar la flecha después.

PPS He copiado miserablemente los estilos para poner código en esta historia de los que utiliza Jomis :)

Actualización (14/01/2006)

He desactivado momentáneamente la vista previa de comentarios por el tembleque del campo de comentarios en Internex Explorer (como siempre, ese puto navegador dando la nota). En cuanto tenga una solución (si es que la encuentro, claro), vuelvo a activar esta característica. De todas formas, los ficheros que menciono en esta historia están disponibles justamente donde he dicho que están.

| |