Destacar comentarios del autor: icono, Base64 y otras hierbas

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 esel 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 llamadoBase64. 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 sonimage/gif,image/jpeg eimage/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 asumetext/plain. Como antes, el que quiera profundizar en el tema puede consultar enLibros 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT2eqIaTwX1LNwUC6iTU5NbCbONd53DQjF1hV7tsnNfaucUSbXh495ACCPi2SfASq1ViJpk1WRMdKS1_J-j-LG5JvD29_0-verrICybG8QKD5NqWcHl4q4g6egJUVcpwwhMtvxwqybR9I/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, enWUtils 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;}

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.

CosasParaMiBlogs

jueves, 29 de marzo de 2012

Destacar comentarios del autor: icono, Base64 y otras hierbas – Curso

Popular Posts

Blogger news

Labels

Blog Archive