Destacar comentarios del autor: icono, Base64 y otras hierbas | Oloblogger El sistema de comentarios anidados, entre algunas otras mejoras -y disgustos- nos trajo también una ...

29 de marzo de 2012

Destacar comentarios del autor: icono, Base64 y otras hierbas

Destacando al autor en los comentarios
El sistema de comentarios anidados, entre algunas otras mejoras -y disgustos- nos trajo también una marca para poder destacar de alguna manera los comentarios del propio autor de la entrada. Esa marca es un icono redondo gris de pequeño tamaño, con un lapicero dentro.

Como había trasteado de más con esto de los comentarios, borré accidentalmente el código que lo hace visible y se me olvidó el tema, pero recientemente lo he vuelto a poner y de paso lo he personalizado un poco. Ahora el lapicero es el mío ;)


En los comentarios aparece ahora a la derecha del nombre del comentarista, un espacio destinado a este icono, pero sólo se verá si en los estilos tenemos la clase adecuada con un gráfico de fondo como propiedad. Estamos hablando de esta clase y estas propiedades:

.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}


Eso tan extraño que aparece en la url de la supuesta imagen de fondo, no es más que un código llamado Base64. Como con todos los sistemas de codificación, lo que pretende Base64 es transformar los datos originales en otros distintos mediante un algoritmo, en este caso de sustitución.

Aunque parezca que lo que intenta esta codificación es hacernos ininteligibles esos datos, realmente lo que pretende es utilizar un número menor de caracteres de una manera normalizada. Nótese que es característico de este código los signos = con los que terminan sus secuencias (más información sobre este sistema en el anterior enlace).


Evidentemente, lo que Blogger ha hecho aquí ha sido transformar el código que compone una imagen (png) en su equivalente en Base64. El objetivo es prescindir del uso directo de imágenes y sustituirlas por algo que el navegador sólo lee y traduce como tales.

La mayor ventaja es que así se reducen el número de peticiones a servicios externos, ya que la imagen está en la página y no hay que solicitarla a un almacén externo. Por contra hace que el peso de la hoja de estilo sea algo mayor, pero esto es siempre mejor que la opción de que sea la parte HTML la que cargue con ese peso. Recordar que las hojas de estilo suelen ser cacheadas por completo por los navegadores. Esto último es precisamente lo que hace que el aumento de tamaño no penalice demasiado el rendimiento de la carga de la página y que esta técnica sea recomendada por muchos especialistas.



Como habéis visto, para poner una imagen en formato Base64, la sintaxis es esta:

data:[<mediatype>][;base64],>datos>

mediatype indica al navegador el tipo y formato del fichero que se quiere traducir y los que más se utilizan y nos interesan en este caso son image/gif, image/jpeg e image/png, de entre los cuales escogeremos el que coincida con el tipo que tenga la imagen original. Como dato adicional, comentar que si no se indica el tipo, el navegador asume text/plain. Como antes, el que quiera profundizar en el tema puede consultar en Libros Web.


Volviendo a lo del icono personalizado, nada impide utilizar una imagen a la manera tradicional y el resultado sería el mismo:

.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(http://3.bp.blogspot.com/-2Uma6hEA0c0/T3NdHKfdf6I/AAAAAAAACSc/3WRsL3GcvMk/s1600/icono.png);}


Creo que ya está medianamente claro, que si queremos cambiar ese lapicero por defecto por otra imagen, sólo tendremos que cambiar el código Base64 que inserta Blogger por la dirección de la imagen que queremos poner nosotros. Precaución con el tamaño, ya que el de ese icono es de sólo 18x18 px.


Una vez que sabemos qué es eso del Base64, también podemos sustituir el código original por el de cualquier otra imagen codificada con esa misma técnica. Por ejemplo, en WUtils podéis encontrar un codificador/decodificador especialmente preparado para convertir imágenes.


Otra cosa. Si por casualidad no os sale el icono quizás es porque os falte el código que puse al principio u esta otra parte que se ve a continuación. Esta es la que da tamaño al bloque destinado para el icono. Si no se reserva espacio para el dibujo, es imposible que se muestre el fondo, que es cómo se inserta ese icono con CSS:

.icon.blog-author{display:inline-block;height:18px;margin:0 0 -4px 6px;width:18px;}



Nick destacado + Icono

Es posible que alguno quiera destacar más los propios comentarios resaltando todo el bloque y no sólo añadiendo una pequeña imagen, pero lo único que se me ocurre por ahora sería introducir un condicional en el script de comentarios para que cuando el autor coincida con cierta cadena de caracteres (la del propietario del blog), el estilo cambie. Pero sinceramente, hasta que no pase un tiempo prefiero no tocar esa parte con los problemas que ha dado.

Pero podemos hacer una cosita más con CSS que siempre es mucho más fácil de cambiar y que no afecta tanto en caso de futuros cambios. Sería destacar nuestro propio nick jugando con las propiedades que le podemos asignar a un texto. Para eso echamos mano de la clase .post-author que Blogger utiliza de manera exclusiva para nosotros, los autotes. Por ejemplo:

.comments .comments-content .blog-author a {font-size:120%;font-weight:bold;padding:2px;background:#666666;color:#ffffff;}


Así que jugando con el icono y con tamaños, colores, bordes, sombras y algunas propiedades más para nuestro sobrenombre, podemos conseguir un estilo destacado para nuestros propios comentarios, de una manera sencilla.

¿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.

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

follow us in feedly

23 comentarios :

  1. Increíble lo he colocado y se ve genial. Gracias

    ResponderEliminar
  2. Increíble explicación Oloman :D, entendí muy bien lo de la Base64, es muy útil!

    ResponderEliminar
  3. Una pregunta., que venga en Base64 no hace más lenta la página?
    Porq usan esa codificación? No tarda (por asi decirlo) más el navegador en interpretar los datos de la página?

    Existe alguna norma estandar que requiera esta BASE64 para las imagenes?

    ResponderEliminar
    Respuestas
    1. Es posible, pero supongo que depende del tipo de dato que metas ahí. Si es una imagen compleja o más grande que las comentadas en el post, seguramente los inconvenientes superen a la ventajas. En este enlace de Wikipedia puedes ver una lista de unos y otras.

      Lo cierto es que no tengo criterio suficiente como para indicarte a ciencia cierta, pero por ejemplo, yo tengo otra página en la que el hosting me limita las peticiones y tengo problemas de acceso algunos días. Si hubiera conocido esto antes y teniendo en cuenta que la web es bastante rápida porque no es compleja, seguramente hubiera colocado las pocas imágenes que tengo con este sistema, ya que eso y los scripts que contiene son los que me hacen elevar el nivel de dichas solicitudes.

      Eliminar
    2. Me salté la última pregunta.

      No creo que haya ninguna norma que obligue a usar esa codificación pero por contra, tampoco me suena que esté desaconsejada.

      Eliminar
  4. Hola!!!! Me gustaría ponerle a mi otro blog buscandolabuenasuerte.blogspot.com.ar el estilo de comentarios que tenés acá...un marco redondeado con el avatar afuera...como logro eso? ya le puse uno pero sólo marca lo míos y no tiene nada de estilo...me ayudás??? podés ver a lo que me refiero en http://buscandolabuenasuerte.blogspot.com.ar/2012/01/se-armo-tole-tole-en-la-chacra-de.html?showComment=1336737754571#c7070614888212681909 gracias!!!!

    ResponderEliminar
    Respuestas
    1. Hola. Lo del avatar redondeado lo tienes explicado en este enlace

      Eliminar
    2. ola un fovor como coloco esto en la plantilla
      "◄25C4"
      q es lo q usas para tus comentarios

      Eliminar
  5. ...Nada, que no me sale :'D
    He puesto todo lo que dices (también lo que da tamaño al bloque -que por cierto, he mirado en el código de blogs donde sale el iconito y eso no está-), hasta he probado si con una url normal iría, pero nada oye... ¿Qué puede ser?

    ResponderEliminar
    Respuestas
    1. Acabo de contestar otro comentario tuyo en el que también tienes problemas con un código CSS. Ambos son cosas muy sencillas por lo que sospecho que lo que ocurre es que no lo insertas dónde debes. Otra cosa es que con Vista Previa no verás este tipo de cambios, ya que necesitas grabar y acceder a un post (no a la página Home) para poder hacerlo.

      Eliminar
    2. Que va, que va, si para ver cambios en los comentarios guardo la plantilla y lo veo... ¡Y no me sale el lápiz, claro! Y el código lo he probado a insertar en varios sitios, de hecho como referencia miré el código fuente de este blog y un par más, para ver donde funcionaba, y nada nada... Ahora que lo pienso, ¿No sería que borré algo del código expandido? O de esa parte, almenos...

      Y vamos, ahora mismo tengo puesto el código tal y como dices, compruébalo si quieres (...ojalá fuera un error tonto mío de fácil solución xD)

      Eliminar
    3. Creo que ya se lo que pasa. Estas clases son las que maneja el nuevo sistema de comentarios anidados y tú tienes todavía el antiguo. En ese caso, para poder modificar los comentarios que tú escribas, el post que tienes que ver es este: Destacar los propios comentarios

      Eliminar
    4. ¡Oh! ¡No había visto tu respuesta!
      Ahora lo miro.

      Eliminar
    5. Sólo hay que suscribirse a las entradas que te interesen para no tener que estar atento ;)

      Eliminar
    6. No, si lo había hecho xD
      Tan solo se me pasó.

      Eliminar
  6. hola oloman mira esta genial el tuto pero como la imagen q le puse es el tamaño de 10px x 30px lo que hice fue

    agregarle estos valores
    height: 12px;
    width: 30px;

    estaria mal hacer eso ??? por q si ago eso funciona al 100%


    mi blog tiene el nombre de club-dhayzone

    ResponderEliminar
    Respuestas
    1. ¿Cómo va a estar mal si te funciona? :) En cualquier caso sería redundante si no hiciera falta.

      Eliminar
  7. Oloman, tengo una consulta. ¿Se pueden mostrar la cantidad de comentarios dentro de un post/entrada? Espero ansioso tu respuesta, y GRACIAS¡¡¡

    Marcos

    ResponderEliminar
    Respuestas
    1. Se puede si los pones delante o detrás del contenido. En mitad del mismo no. Tendrías que colocar esto en el post-header o post-footer: <data:post.numComments/>

      A la izquierda del título de este mismo post puedes ver el numerito.

      Eliminar
  8. Hola Oloman, solo decirte que gracias por tus ayudas...me ha quedado perfecto...mardepensamientosblog.blogspot.com por si quieres echarle un vistazo.un saludo ;-)

    ResponderEliminar
    Respuestas
    1. Jejeje... Una estrellita. Buen detalle.

      Eliminar