Personalizar estructura de comentarios

La estructura de los comentarios contiene distintas etiquetas las cuales cada una se diferencian con distintas Id's o clases, por lo tanto se pueden personalizar mediante CSS.

He visto en distintos blog los cuales por ejemplo, el editor de comentarios se encuentra a la izquierda y con un tamaño muy chico, el cual distorsiona con el diseño del blog.

Por supuesto que eso va en el gusto de cada uno.

Con algo de CSS podemos cambiar el aspecto de nuestro editor.

También se puede corregir la distancia en la parte de abajo del editor.

En la siguiente imagen veremos distintas partes las cuales podemos personalizar, destacadas por un numero y un borde de distinto color:

Cada parte tiene una ID (#) o una clase (.)

Los códigos CSS van arriba de ]]></b:skin>

#comments{
propiedad: valor;
propiedad: valor;
}
#comments h4{
propiedad: valor;
propiedad: valor;
}
.avatar-image-container{
propiedad: valor;
propiedad: valor;
}
#comments-block{
propiedad: valor;
propiedad: valor;
}
.comment-author{
propiedad: valor;
propiedad: valor;
}
.comment-body{
propiedad: valor;
propiedad: valor;
}
.comment-timestamp{
propiedad: valor;
propiedad: valor;
}
.comment-form {
propiedad: valor;
propiedad: valor;
}
#comment-post-message{
propiedad: valor;
propiedad: valor;
}
.comment-form p{
propiedad: valor;
propiedad: valor;
}
#comment-editor{
propiedad: valor;
propiedad: valor;
}

Por ejemplo si queremos personalizar el editor: (11)

#comment-editor{
width:600px; /*ANCHO */
height:240px; /* ALTO */
margin-left:20px; /* DISTANCIA DESDE LA IZQUIERDA */
}

Ajustamos el ancho.
Con la altura podemos sacarle la separación que tiene abajo.
Con el margin-left ajustamos para dejarlo centrado.

Ver ejemplo:

Si quieren dejar un mensaje a los visitantes arriba del editor (10), lo hacen desde:

Configuración, Comentarios y colocan el texto en donde dice:

Mensaje del formulario de comentarios.

Ejemplo para personalizar: (10)

.comment-form p{
border: 1px solid #ccc;
width:500px;
padding:10px;
color:#fff;
background:#000;
margin-left:20px;
}

Si solo quieren centrarlo.

Centrar todo (1)

#comments{
margin:0px auto;
}

Centrar la caja desde "Publicar un comentario en la entrada" (8)

.comment-form{
margin:0px auto;
}

Cualquier duda me lo comentan.

Gadget de "Perfil" Integrado con Botón de Google+

Según he comprobado, Blogger ha implementado una nueva característica al gadget de Perfil que facilita en su lista de gadgets. Se trata de un botón que permitirá que los usuarios de tu blog con cuenta en Google+ ¡puedan agregarte a un círculo fácilmente, sin tener que visitar tu página en Google+!. Viene integrado también un contador que muestra el número de personas que te han agregado a un círculo, como lo puedes apreciar en la imagen de abajo con mi perfil.

No es algo que se ha mencionado oficialmente, por lo menos no encontré nada que hiciera mención a ésto, simplemente lo vi en una de las plantillas en la que tengo agregado este gadget, ¡integrado y funcionando!. Ya me contarás si ya aparece en tu blog al usar el gadget del perfil ;)



Si eres usuario nuevo de Blogger y nunca has usado en tu blog el gadget de perfil en tu blog, permíteme decirte que este gadget muestra información sobre ti, y que tu mismo completas desde Blogger. Puedes editar los datos que deseas que aparezcan, y que están limitados a 1200 caracteres, si haces click en la sección del perfil que se encuentra ubicada en la barra superior gris, una vez que has accedido a tu cuenta de Blogger y que reconoces porque aparece tu nombre de usuario.





Para añadir el gadget de "Perfil" a tu blog, como con el resto de gadgets, vas a la pestaña "Diseño", seleccionas el lugar donde lo quieres mostrar, por ejemplo en la columna lateral, haces click en "Agregar gadget" y lo seleccionas de la lista haciendo click en el botoncito que dice "+" para que sea añadido. Después guardas los cambios haciendo click en el botón que dice: "Guardar disposición".

Una vez agregado el gadget de perfil a tu blog, éste mostrará la foto que tengas en tu perfil, los datos que hayas añadido sobre ti, y un enlace que envía a la página del perfil de Blogger.



Si actualizas tu perfil de Blogger, al de Google+, los datos que se muestran en el perfil son los que has configurado desde la página de tu perfil en Google+ y el enlace que dice "Ver todo mi perfil", te envía a la página de tu perfil en Google+, en lugar de la de Blogger y ahora, como te menciono, también aparece un botón con contador para que los usuarios te puedan agregar a un círculo.

Cómo usar esta nueva característica

Para que esta característica funcione, necesitas tener actualizado tu perfil de Blogger al de Google+. Esto lo haces seleccionando la pestaña "Google+" del panel de Blogger. Para saber cómo actualizar tu perfil de Blogger al de Google+, échale un vistazo a esta entrada donde menciono cómo hacerlo.



Una vez actualizado, simplemente agregas el gadget de perfil en la columna lateral de tu blog, en el fondo de la página o el lugar donde quieres que aparezca y ¡listo!, cualquier visita con cuenta activa en Google+ podrá agregarte a un círculo desde ahí.

Cómo hacer para que el enlace de "Ver todo mi perfil" no quede tan separado del texto

Como puedes apreciar en la primera imagen de arriba, el texto del enlace que dice "Ver todo mi perfil"  se ve muy separado del texto de la información del perfil. Si te ocurre lo mismo, una forma de solucionar ésto es poniendo un margen negativo a la sección del texto y lo harías asando este CSS:



.profile-textblock{

margin-bottom:-30px;

}





Solo editas el valor de -30 según necesites, deja "px", que significa pixeles, tal y como aparece en el código anterior. Tiene que quedar todo junto como se puede apreciar.



El CSS anterior lo pones seleccionando la pestaña "Plantilla", luego vas a Personalizar > Avanzado  > Añadir CSS y ahí lo pegas y editas. Después guardas el cambio haciendo click en "Aplicar al blog".



¿Ya usas este gadget en tu blog?, ¿el que tenga el botón de Google+ te anima a usarlo?

Nuevo widget en Blogger: Formulario de Contacto

Hace apenas unas horas, Blogger a incorporado un nuevo widget. Se trata de un formulario de contacto que podrás agregar a tu blog fácilmente.



Para ponerlo en tu blog, solo selecciona la pestaña Diseño, luego haces click en agregar gadget en la sección que quieres que aparezca, por ejemplo, en la columna lateral. Después, seleccionas la pestaña Más gadgets y luego lo agregas.

Características:



El formulario de contacto de Blogger, cuenta con las siguientes características:

• Campo para el nombre del usuario


• Campo para el correo electrónico


• Campo para el mensaje (textarea)


• Botón para enviar


• Mensaje de confirmación al ser enviado el formulario, o de error al no cumplirse con los campos requeridos.

El diseño es sencillo, y los colores del texto los heredará de la sección donde lo agregues. Por el momento, este widget no cuenta con opciones de configuración, ni está disponible para las vistas dinámicas.



Los mensajes que se envíen los recibirás a la cuenta de correo electrónico que tengas registrado en Blogger.





Fuente: Página oficial de Blogger en Google+

Comentarios, Google+, blogs y el final de una era

Seguramente, todos han recibido el mail de Blogger anunciando la integración de los comentarios de Google+ en Blogger; algo que permite sincronizar los comentarios entre ambos servicios. Los detalles (en inglés) y en español.

Dicen: "Este mensaje se ha enviado a porque nos indicaste que querías recibir avisos sobre las funciones nuevas de Blogger."

Pero, si en casi siete años, esta es la primera vez que envían un mail ... uno se pone a pensar ¡pucha!, se ve que este asuntito es algo que REALMENTE les interesa ¿A quién? ¿a mi? no, a Google.

Para algunos, es un sueño hecho realidad, para otros, entre quienes me incluyo, es la confirmación de eso que uno viene suponiendo hace tiempo: que Blogger terminará siento integrado, absorbido o deglutido por Google+ ya que estamos en tiempos de redes sociales

Los blogs fueron la explosión de la participación activa pero, al parecer, ahora, cuando ya no nos quedan muchas palabras, le llegó el turno al micro-blogging y a las redes sociales, ese "cruce entre patio andaluz con sus cotilleos y foro romano" o "una fuente de información para poder crear un medio o apoyar uno ya existe".

Todo el mundo ama a Google ... hasta que es demasiado grande. Demasiado poder para alguien aunque sea un angelito sin malas intenciones.

Llegó Google+ y algunos se enamoraron, a otros les resulta indiferente. Si es bueno, si es malo, si es lindo, si es feo, si es mejor o peor que otro servicio carece de importancia. Habrá quien lo use para esto y otro para aquello. Habrá quién lo use mucho y habrá quien lo use menos. Cada cual atenderá su juego como pueda.

Pero que nadie se olvide que no hay monopolios buenos y monopolios malos. Todos son malos. El gran imperio de la web tiene muchos pretendientes al trono y la verdad, como soy un simple mortal, andar levantando tal o cual bandera para que otro se llene los bolsillos me parece una tremenda estupidez.

Distopía: utopía perversa donde la realidad transcurre en términos opuestos a los de una sociedad ideal, es decir, en una sociedad opresiva, totalitaria o indeseable. El término fue acuñado como antónimo de utopía y se usa principalmente para hacer referencia a una sociedad ficticia frecuentemente emplazada en el futuro cercano en donde las tendencias sociales se llevan a extremos apocalípticos.

Seguir a alguien no es estar junto a alguien, es ir detrás.

Creo que la idea de la web es otra: es ir juntos y no en fila india. Creo que la idea de la web es ir para cualquier lado y encontrarse con otros en el camino, sin tratar de venderles nada.

Explorando las Nuevas funcionalidades del Editor HTML de Blogger

Me quedé sorprendida con las mejoras que Blogger a implementado al editor HTML de la plantilla. Ahora es más intuitivo, y funcional. Lo han dotado de características que están orientadas a mejorar la legibilidad del código fuente de la plantilla, permitiendo tanto a programadores web, como a administradores del blogs, editar el código fácilmente.



Estas son las principales características que han sido añadidas:

• Coloreado de sintaxis. Resalta la presentación del código con diferentes colores y fuente distinta, lo que permite que éste se más legible, ya que podrás identificar entre otras cosas, etiquetas, atributos y valores fácilmente.


• Soporta numeración de lineas, por lo que podemos identificar la ubicación de un error, al estar haciendo un cambio o verificando el código. 


• Auto-indentación, que en cristiano (perdón por el modismo) quiere decir que separa el código de la izquierda en cierto orden, para que sea más fácil identificar visualmente su estructura. 


• Acceso rápido al código de los widgets. Ahora, es posible acceder al código de los widgets fácilmente solo seleccionándolo, desde la lista desplegable denominada "Ir al Widget".


• Código plegable. Característica que permite mostrar en forma selectiva ciertas secciones de código, haciendo que la exploración de éste sea más rápida, permitiendo así su edición.


• Carga la vista previa de la plantilla dentro del editor. Ahora sin necesidad de salir de la página, es posible ver cómo luce la plantilla, cuando estamos editando el código.

¿Qué tal? Bueno, pensando en que hay usuarios nuevos que desconocen cómo funciona el editor de Blogger, y que tenemos nuevas características, exploremos el editor y hablemos de sus funciones ;)

El Editor HTML de la plantilla, y sus características

El editor HTML de la plantilla te permite realizar cambios en la plantilla, para lograr la apariencia que desees darle al blog. Claro que hay que tener conocimiento de programación para lograrlo, aunque con algunas nociones de programación o con la ayuda de algunos tutoriales, también puedes hacer cambios, que hacen grandes diferencias en el diseño.



Para ingresar al editor de HTML, como antes, usamos la pestaña "Plantilla" del panel de Blogger, luego, hacemos click en el botón "Editar HTML".

Hecho lo anterior, verás al editor de HTML de la plantilla, en vivo y a todo color, listo para empezar a hacer cambios en el código de la plantilla ;)

A primera vista, podemos ver que el código de la plantilla está coloreado, que como puedes apreciar, lo hace más legible.



A la izquierda, podemos ver que las lineas están numeradas, y también  podemos ver este simbolito: "►", que indica que se puede desplegar el código de determinada seccion de la plantilla, como el CSS de la plantilla, que se encuentra en <b:skin>...</b:skin>, y el código de los widgets. 



Al desplegar el código de los widgets, estarías expandiendo plantillas de artilugios, función que como recordarás, se encontraba anteriormente en el editor. 



Arriba, se encuentran los botones con las funciones, que, siguiendo un orden de izquierda a derecha, son los siguientes:

• Atrás nuevo. Te permite salir del editor, para regresar a las opciones que se encuentran en la pestaña "Plantilla".


• Guardar Plantilla. Sirve para guardar los cambios que se hayan hecho en el código de la plantilla.


• Ir al Widget nuevo. Lista desplegable que contiene todos los widgets que tenga agregados la plantilla (sus Ids, que es como Blogger los ha definido), y que al seleccionarlo, te enviará directamente al código de éste.
  
  
  
  
  
  
  
  
  
  
  
  
  Si quisieras ver el código completo del widget, tendrás que desplegarlo haciendo click en: "►"  que aparece a la izquierda donde está la numeración, en la linea de código donde empieza el widget.
  
  


• Editar plantilla nuevo. Te permite regresar al código fuente de la plantilla, cuando estás viendo la "vista previa de la plantilla".


• Vista previa de la plantillacambió. Esta función ya existía anteriormente, aunque ahora la vista previa se carga dentro del editor, sin salir de la página. Sirve para visualizar cómo luce la plantilla cuando estamos haciendo un cambio.


• Restablecer plantillas de artilugios a los valores predeterminados. Esta función también ya existía aunque tenía otra ubicación. Ahora es más visible, porque aparece con el resto de los botones. Sirve para resetear o restaurar la plantilla. Dicho muy simple, sirve para que la plantilla tenga la condición que originalmente tenía antes de hacer cambios en los widgets, y ésta tendrá los valores que por defecto agrega Blogger. Esto es especialmente útil, cuando se ha editado mal la plantilla provocando problemas en el funcionamiento del blog, como cuando no funcionan los comentarios anidados de Blogger. Hay que tener en cuenta que, al usar esta función, estaremos borrando todos los cambios hechos en los widgets de Blogger. El código CSS que hayas agregado, no se elimina. 


• Plantilla de formatonuevo. Esta nueva opción, permite mostrar o no indentación en la plantilla, que es la separación u ordenación del código que sirve para identificarlo fácilmente. Si quieres buscar algo usando Ctrl + F, deberás primero hacer click en esta opción, y luego usar dichas teclas para hacer la búsqueda, si es que no has seleccionado ir al código del widget, desde "Ir al widget". 


• Revertir los cambios. Limpia o elimina el código que hayas añadido y que no ha sido todavía guardado en "Guardar plantilla".

Por último si deseas remplazar cualquier cosa que se repita en la plantilla, de forma automática, puedes usar las teclas Ctrl + Shift + R. Por ejemplo, si quieres cambiar la forma en que has identificado un menú: .menu_aburrido  por .menu_divertido, y lo hará, sin que tu tengas que teclear el texto uno a uno ¿qué pasada verdad?   :)

Ctrl + Shift + F. Encuentra y remplaza texto uno a uno. (corrección :)

Conclusiones

Tengo que decir que recibo con agrado estas mejoras. El código es más legible, por lo que será más fácil y rápido editarlo, o explorarlo. Y a ti, ¿te gustan los cambios?

Referencias: Blogger Buzz

Mejoras en el editor de plantillas de Blogger

El editor de plantillas de Blogger ahora incluye una serie de modificaciones que parecen interesantes y lo hacen bastante más amigable de lo que era.

Si entramos en Plantilla y hacemos click en Editar HTML, se nos mostrará el código mucho más organizado, con las líneas numeradas y las palabras claves de CSS, HTML y JavaScript, coloreadas, diferenciando propiedades, valores y etiquetas.

Arriba, una serie de botones nos permiten usar opciones extras.

Ir al widget es un menú desplegable conde se listan los gadgets o widgets que hayamos agregado y basta un click sobre los nombres para posicionarnos en el código que, como siempre, se verá contraído pero podremos desplegar individualmente con el icono que se mostrará a la izquierda.

Vista previa de la plantilla, la mostrará allí mismo y no en una nueva ventana, Basta hacer click otra vez en Editar Plantilla para regresar al código.

Por último, Plantilla de formato re-ordena el código, agregando indentación de forma automática.

Como siempre, debemos usar el botón Guardar para que los cambios sean efectivos o bien Revertir cambios.

REFERENCIAS:buzz.blogger.com

Entradas con estilos variables segun la etiqueta

Para establecer estilos diferenciados en cierto tipo de páginas, en Blogger podemos usar los códigos condicionales ya que todo aquello que se encuentre dentro de esa condición, sólo se ejecutará si esta se cumple. Por ejemplo, si quisiéramos que el color de fondo del blog fuera rojo cuando se muestra una página estática, pondríamos algo así:

<b:if cond='data:blog.pageType != &:quot;static_page&:quot;'>
  <style>
    body {background-color:red;}
  </style>
</b:if>

Pero hay cierto tipo de páginas un poco más complejas de diferenciar ya que no hay condiciones exactas. Por ejemplo, las páginas de etiquetas que son de tipo index al igual que muchos otros tipo de páginas incluyendo el home.

Una alternativa para reconocer este tipo de páginas es usar los selectores condicionales de CSS que nos permiten detectar el contenido de cualquier atributo que tenga una etiqueta y, de ese modo, definir reglas de estilo especiales para ellas.

¿Un poco confuso? En realidad es bastante simple. Supongamos que los enlaces de nuestro sitio son de color verde:

a {color:green:}

y quisiéramos que aquellos tienen el atributo target="_blank" fueran de color amarillo; agregaríamos lo siguiente, con o sin la palabra !important:

a[target="_blank"] { {color: yellow !important;}

¿Y si quisiéramos algo más genérico como diferenciar el color de los enlaces internos de los enlaces externos? En ese caso podríamos usar el atributo href que es el que contiene la dirección url y un "comodín" (el caracter asterisco) para que la regla se aplique a cualquier enlace que contenga parte de nuestra dirección. En el caso de este blog, podría ser algo así:

a[href*="vagabundia.blogspot.com"] { {color: yellow !important;}

la sintaxis en general es:

[atributo*="dato"]

Donde el comodín hace que se aplique a cualquier atributo cuyo contenido contenga el dato total o parcialmente.

Entonces, para establecer reglas de estilo diferentes en ciertas páginas como las etiquetas, podríamos utilizar este sistema pero debemos tener algo en donde mirar, debe haber alguna etiqueta que tenga algún atributo que podamos leer y actuar en consecuencia.

Se me ocurre que lo más sencillo es colocarlo en la etiqueta body que normalmente dice esto:

<body>

o esto:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

o cualquier cosa similar, no tiene importancia, basta que allí agreguemos un atributo extra como rel y la url de la página que obtenemos de los datos del mismo Blogger:

<body expr:rel='data:blog.canonicalUrl' .......

Hecho eso, nada cambiará así que ahora crearemos las reglas que se nos ocurran ya que sabemos que ese atributo contendrá algo así cuando estemos en una página de etiquetas:

rel="http://miblog.com/search/label/nombre_etiqueta"

Suponiendo que quisiera que las páginas de etiquetas Google de este blog tuvieran un color de fondo rojo, la regla sería:

body[rel*="label/Google"] {background: red;}

Y si quisiera cambiar el título de los posts:

body[rel*="label/Google"] .post-title { ....... acá las propiedades ....... }

y el header:

body[rel*="label/Google"]  #header-wrapper { ....... acá las propiedades ....... }

Aplicando after y before también podemos agregar "contenido".

Si pusiera esta regla, cuando se abre una página de etiquetas Google, se vería una imagen a la derecha del header:

body[rel*="label/Google"] #header-wrapper {position: relative;}
body[rel*="label/Google"] #header-wrapper:after {
  content: url(url_imagen);
  position: absolute;
  right: 20rpx;
  top: 20px;
}

En resumen, a partir del primer selector, puedo acceder a cualquier etiqueta, id o clase interna y definir reglas exactas que se apliquen en ciertas condiciones.

Obviamente, alguien preguntará si podríamos hacer lo mismo para diferenciar los posts según su etiqueta y ahí las cosas se complican porque, hasta donde sé, no hay ningún dato al que podamos acceder para conocer la etiqueta de una entrada hasta que esta es cargada en el includable post lo que significa que cualquier cambio que hagamos podría tardar en verse ya que puede haber otras partes de nuestra página que se mostrarían antes y si estas tardan, primero se mostrará el estilo general y luego el modificado.

El segundo problema es que allí podemos leer las etiquetas del post pero esto se debe hacer en un bucle y usar JavaScript para agregar el dato extra que necesitamos (el nombre de la etiqueta).

Entonces, haremos eso, buscaremos:

<b:includable id='post' var='post'>

y veremos que la siguiente linea dice algo como esto o similar:

<div class='post hentry uncustomized-post-template'>

Debajo, pondremos lo siguiente:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast == &quot;true&quot;'>
      <script type='text/javascript'>
        var postetiqueta=&#39;<data:label.name/>&#39;;
       </script>
    </b:if>
  </b:loop>

  <!-- con eso, tenemos el nombre de la última etiqueta (si es que el post tiene varias) guardada en una variable -->

  <script type='text/javascript'>
    // agregamos el atributo rel con el nombre en la etiqueta body
    document.body.setAttribute(&#39;rel&#39;,postetiqueta);
  </script>

</b:if>

Y si usamos jQuery podemos reemplazar document.body.setAttribute() por:

$('body').attr('rel',postetiqueta);

De acá en más, en las páginas individuales, la etiqueta body tendrá un atributo rel cuyo valor es el nombre de la etiqueta de la entrada así que, con un criterio similar al comentado inicialmente, podemos usar selectores y definir estilos particulares para esas entradas aunque, en este caso, no necesitamos el comodín.

En el blog de pruebas hay dos entradas armadas de este modo, en una, la etiqueta es rojo y algunas de sus reglas son estas:

<style>
body[rel="rojo"] #header-wrapper {display: none;}
body[rel="rojo"] #sidebar-wrapper {display: none;}
body[rel="rojo"] #main-wrapper {width: 100%;}
body[rel="rojo"] {background: #800;}
body[rel="rojo"] .post-title a { ....... propiedades ....... }
body[rel="rojo"] .post-body { ....... propiedades ....... }
</style>

Lo mismo ocurre con otra entrada del demo cuya etiqueta es azul; simplemente, cambian las reglas:

body[rel="azul"] {background: #79B;}

Ultimos comentarios con avatares

Una variante para mostrar los últimos comentarios nos permitiría agregar la imagen con el avatar de cada comentarista.

Siguiendo el mismo criterio del script que se muestra en esta entrada y que no no hace otra cosa que leer los feeds utilizando Json, nos encontramos con que Blogger nos envía un dato que identifica al autor: entry.author y, un dato que es un array que leemos mediante entry.author[0]

Allí, se guardan cuatro valores:

entry.author[0].email.$t no nos sirve para nada ya que siempre dice "noreply@blogger.com"
entry.author[0].name.$t es el nombre del comentarista
entry.author[0].uri.$t es la dirección url del perfil
entry.author[0].gd$image son los datos de la imagen que se estableció en el perfil de Blogger

Esta última tiene un dato que es el importante:

entry.author[0].gd$image.src es la dirección url de la imagen agregada al perfil

y otros que no tienen uso práctico:

entry.author[0].gd$image.rel
entry.author[0].gd$image.width
entry.author[0].gd$image.height

Esto, quiere decir que podemos acceder a esa imagen y mostrarla siempre que exista aunque hay una serie de detalles a tener en cuenta.

Primero, el tamaño de la imagen. Lo que allí se guarda es la imagen original que hayamos utilizado y puede tener diversos tamaños (hay algunas enormes) por lo tanto, deberíamos tratar de usar una miniatura y así, agilizar la carga. Si la imagen está alojada en Blogger como la mayoría de ellas, esto se resuelve con cierta facilidad cambiando la url ya que el servicio nos provee de miniaturas diversas; si la imagen ha sido alojada en otro servidor, no tenemos otro remedio que cargar la original y re-dimensionarla con CSS.

El segundo problema lo generan los perfiles que no tienen una imagen o estas no son accesibles; en ese caso, también usaremos CSS para colocar una por defecto.

El script sería algo así y debería estar agregado antes de </head>:

<script type='text/javascript'>//<![CDATA[

var comsA_cantidad = 10; // definimos la cantidad de comentarios a ser mostrados
var comsA_longitud = 60; // definimos la longitud máxima de esos comentarios
var comsA_dimension = "/s16-c/"; // y establecemos el tamaño de esos avatares (en este caso 16x16)

var comsA_pattern1 = /\/s\d*\//;
var comsA_pattern2 = /\/s\d*-c\//;

function showrecentcomments_avatar(json) {
  var entry, comulr, comcontent, comavatar, profile_img, elancho, salida;

  // el bucle que leerá los comentarios
  for (var i=0; i < comsA_cantidad; i++) {
    entry = json.feed.entry[i]; // leo y guardo el dato
    if (i==json.feed.entry.length)break; // si no hay suficientes, termino

    // busco la dirección URL de comentarios
    for (var k = 0; k < entry.link.length; k++) {
       if (entry.link[k].rel == 'alternate') {
          comulr=entry.link[k].href;
          break;
       }
    }

    // busco el comentario en si mismo
    if ("content" in entry){
      comcontent = entry.content.$t;
    } else if("summary" in entry) {
      comcontent = entry.summary.$t;
    } else {
      comcontent = "";
    }
    // lo transformo en texto puro y si es necesario, lo corto para que no supere el largo máximo
    var re=/<\S[^>]*>/g;
    comcontent=comcontent.replace(re,"");
    if (comcontent.length>comsA_longitud) {
      comcontent = comcontent.substring(0,comsA_longitud) + " &#133;";
    }

    // esta es la parte nueva, que define la imagen del avatar a utilizar
    var profile_img = entry.author[0].gd$image.src; // la imagen del perfil de Blogger

    // hay algunas imágenes alojadas en googleusercontent.com que no tienen el protocolo http asi que se lo agregamos
    if (!/^http:/.test(profile_img)) {
      profile_img = "http:" + profile_img;
    }

    // buscamos /sxxx/ o /sxxx-c/ en la url de la imagen que indica su tamaño
    elancho = profile_img.match(comsA_pattern1) || profile_img.match(comsA_pattern2);
    // y si encontramos eso, lo cambiamos por /s16-c/ que es lo que definí previamente
    comavatar = profile_img.replace(elancho, comsA_dimension);

    // listo, como ya tengo todos los datos, armo el HTML a mostrar
    salida = "<li>";
    salida += "<img src='"+comavatar+"' />";
    salida +=  "<span>" + entry.author[0].name.$t + "</span>";
    salida +=  "<a target='_blank' rel='nofollow' href='" + comulr + "'>" + comcontent +"</a>";
    salida +=  "</li>";

    // y finalmente, lo escribo
    document.write(salida );
  }
}

//]]>
</script>

¿Cómo uso esto? Agrego un elemento HTML donde quiera mostrarlo (la sidebar, por ejemplo) y allí, coloco la lista y la función donde sólo debo establecer la url de mi blog:

<ul id="ultimosComentariosAvatar">
  <script src="http://nombreblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments_avatar"></script>
</ul>

El resto es cosa de CSS:

#ultimosComentariosAvatar { /* este el rectángulo contenedor (la etiqueta UL) */
    list-style-type:none;
}
#ultimosComentariosAvatar li { /* cada item de la lista */
    /* voy a usar una imagen por defecto como fondo por si el perfil no tiene una */
    background: transparent url(http://img2.blogblog.com/img/b16-rounded.gif) no-repeat left 5px;
    border-bottom: 1px dotted #234;
    font-family: Tahoma;
    font-size: 12px;
    padding: 5px 0 5px 20px;
    position: relative;
}
#ultimosComentariosAvatar li span { /* el nombre del autor */
    color: #BCD;
    font-weight: bold;
    padding-left: 5px;
}
#ultimosComentariosAvatar li:hover {background-color: #171E27;}

/* el contendio es un enlace al comentario en si mismo */ 
#ultimosComentariosAvatar a, #ultimosComentariosAvatar a:link, #ultimosComentariosAvatar a:visited {
    color: #BBB;
    display: block;
    font-weight: normal;
    padding-left: 5px;
}

/* la imagen la posiciono para tapar el fondo por defecto y la fuerzo a dimensionarse */ 
#ultimosComentariosAvatar li img {
    height: 16px;
    left: 0;
    position: absolute;
    top: 5px;
    width: 16px;
}

Blogger: Resúmenes tipo mosaico

Cuando se quieren mostrar las entradas resumidas en un formato tipo mosaico y que las imágenes que generalmente se utilizan como adorno, mantengan su proporción, estamos hablando de una estructura distinta a la clásica que muestra una serie de rectángulos donde la altura es siempre fija:

Es el caso del famoso Pinterest o sitios similares que van colocando rectángulos de altura variable, acomodándolos una debajo del otro, llenando los espacios vacíos.

Para que sea simple de hacer, ese tipo de estructura requiere CSS3 y utilizar las distintas variantes de la propiedad column lo que implica que sólo será visible en navegadores de última generación. Para colmo, a mi entender, ese sistema no es muy razonable en un blog ya que las columnas se escriben de arriba hacia abajo con lo que, si colocáramos 15 entradas en tres columnas, la columna izquierda tendría las primera 5, la del centro las segundas 5 y la tercera el resto; algo que puede ser molesto ya que un lee e interpreta de izquierda a derecha.

Otra forma de hacer lo mismo es usar scripts o plugins específicos aunque algunos de ellos no solucionan esos problemas ya que la única manera de hacer algo así y que se vea en cualquier navegador es mediante alguna clase de script que calcule alturas y vaya "dibujando cada rectangulito estableciendo propiedades absolutas.

Ahora bien, si uno no quiere complicarse la vida, en Blogger, habría una solución simple que no requiere nada sofisticado y que debería funcionar en cualquier navegador ya que no se necesitan propiedades especiales y el script es similar a cualquier otro que lea los feeds del sitio utilizando json.

La idea es crear tres DIVs que serán las columnas, uno flota a la izquierda, otro a la derecha y el tercero está centrado. Luego, vamos agregando las entradas a cada una de ellos en el orden en que las leemos de tal manera que si mostramos 15 entradas, los post 1,4,7,10 y 13 estarán en DIV izquierdo, los posts 2,5,8,11,14 en el centro y los posts 3,6,9,12,15 en el DIV derecho.

Voy hacer lo con un ejemplo concreto que puede verse online en el home de este sitio; allí busqué el includable principal del blog:

<b:includable id='main' var='top'>
  .......
</b:includable>

Y como es algo que sólo quiero mostrar en el home sin hacer una plantilla nueva, me limitaré a condicionar su contenido y agregar las nuevas columnas de este modo:

<b:includable id='main' var='top'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <div id='left-col'/>
    <div id='right-col'/>
    <div style='clear:both;'/>
    <script src='/feeds/posts/default?start-index=1&amp;max-results=12&amp;orderby=published&amp;alt=json-in-script&amp;callback=mosaicocols' type='text/javascript'/>
  <b:else/>
    <!-- AQUÍ DEJO TODO LO  QUE TENGA, SEA LO QUE SEA  -->
  </b:if>
</b:includable>

Y ahora, el script que es el que interpreta los feeds; lo coloco antes de </head> y usa jQuery para simplificar las cosas pero, podría hacerse con cualquier otra librería o con ninguna:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
//<![CDATA[
function mosaicocols(json) {
  var entry, posttitle,posturl,postimg;
  var salida = "";
  var contar = 0;
  for (var i = 0; i < 24; i++) { // voy  a mostrar 24 entradas
    if (i == json.feed.entry.length) { break; }
    entry = json.feed.entry[i]; // el feed
    posttitle = entry.title.$t;; // el título de cada post
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl  = entry.link[k].href; // la dirección url de cada post
        break;
      }
    }
    // buscamos una imagen para decorar
    var t = "";
    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url; // es la que Blogger detecta
      postimg = postimg .replace('s72-c','s275'); // pero la cambio para que sea más grande y no una miniatura
    } else {
      // si no se detecta una, buscamos en el mismo post
      var s, a, b, c, d;
      s = entry.content.$t;
      a = s.indexOf("<img");b = s.indexOf("src=\"",a);c = s.indexOf("\"",b+5);d = s.substr(b+5,c-b-5);
      if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {
        postimg = d; // es la primera imagen del post
      } else {
        // y si no hay ninguna, usamos una imagen genérica
        postimg = 'url_imagenxdefecto';
      }
    }
    // ahora, armo la salida de cada rectángulo utiilizando cualquier estructurura HTML que se me ocurra
    salida = "<div class='m-post' id='"+i+"'>";
    salida += "<a class='miniatura' href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
    salida += "<h2><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h2>";
    salida += "</div>";
    contar = contar+1; // para simplificar las cosas, voy contando los posts
    if (contar==1) { // posts 0 3 6 9 12 15 etc 
      $('#left-col').append(salida); // los agrego a la columna izquierda
    } else if (contar == 2) { // posts 1 4 7 10 13 16 etc
      $('#right-col').append(salida);  // los agrego a la columna derecha
     } else {  // posts 2 5 8 11 14 17 etc 
      $('#center-col').append(salida); // los agrego a la columna central
      contar = 0; cada tres, pongo el contador a cero
    }
  }
}
//]]>
</script>
</b:if>

Estas son las tres líneas que deberían cambiarse si se usa otra librería o si no se usa ninguna:

$('#left-col').append(salida);
$('#right-col').append(salida);
$('#center-col').append(salida);

Por último, el CSS que también va antes de </head>:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
  // si es necesario, agrego cualquier cosa que se necesaria para cambiar anchos u ocultar elementos
  #outer-wrapper, #content-wrapper, #header-wrapper, #main-wrapper {width:930px;}
  #sidebar-wrapper {display:none;}
  // estas serían las reglas de las tres columnas
  #left-col {float:left;}
  #right-col {float:right;}
  #center-col {margin:0 auto;width: 297px;}
  // cada uno de los rectángulos
  .m-post {
    border: 1px solid #EEE;
    margin-bottom: 20px;
    padding: 10px;
    text-align: center;
    width: 275px;
    background-color: #FFF;
    box-shadow: 0 5px 5px #AAA;
    position: relative;
  }
  .m-post a {text-decoration:none;}
  // la imagen de los posts
  .m-post .miniatura {
    display: inline-block;
  }
  .m-post .miniatura img {
    vertical-align: top;
    width: 275px;
  }
  // el título de los posts
  .m-post h2 a {
    color:#666;
    font-size: 17px;
    font-family: Tahoma;
    font-weight: normal;
    letter-spacing: 0;
    padding: 0;
    text-transform: none;
  }
</style>
</b:if>

Y eso es todo. Obviamente, de ahí en adelante, cualquier cosa es posible y cada uno deberá investigar y jugar un poco.

Blogger y los comentarios abusivos

Esta es una traducción aproximada de un artículo publicado en The Real Blogger Status que me llamó la atención:

Blogger no censurará comentarios o aceptará reportes sobre comentarios abusivos

En los Foros de Ayuda de Blogger, muchas veces se pregunta ¿Por qué Blogger no me da la opción de bloquear a un comentarista abusivo?

Esta es una petición que simplemente no se pueden cumplir ya que:

• es técnicamente imposible
• es contrario a la política de Blogger

Porque cualquier persona puede crear varias cuentas de Google sin esfuerzo y Blogger no van a perder tiempo en desarrollar funciones de bloqueo que sólo darían una falsa sensación de seguridad ya que no tendría efectos a largo plazo.

Si usted realmente siente que un comentarista representa una amenaza legal o física, debe reportar la amenaza a las autoridades locales. Si se trata de otro tipo de "molestia", Blogger considera que es "libertad de expresión" y por lo tanto, la publicación de ese tipo de comentarios es de quien los hace y quien los permite ya que el administrador de un blog, usted puede elegir qué comentarios publicar y qué comentarios rechazar para lo cual existe la opción de moderarlos.

Si cualquier comentario lo ofende, modérelos o elimínelos lo antes posible. Concéntrese en la publicación de su blog y pase por alto estos abusos. Con el tiempo, la persona abusiva se aburrirá y seguirá adelante.

A simple vista, la explicación parece razonable pero mezcla verdades, mentiras y excusas.

En primer lugar, es cierto que la responsabilidad de lo publicado es nuestra; tanto si somos administradores de un blog como si somos comentaristas pero, es completamente falso que Blogger no pueda implementar técnicamente este tipo de función, que sea una opción inútil o que sea algo contrario a sus políticas. Por favor, no traten de enarbolar banderas para justificar lo injustificable.

De hecho, Blogger TIENE varias opciones de denuncia. En la navbar (Informar sobre mal uso), en los comentarios (marcar como spam); cada tanto, aparecen direcciones para reclamar por violaciones al copyright.

Muchos otros servicios de Google tienen opciones de bloqueo o filtros diversos, GMail, YouTube ... casi cualquier sistema de redes sociales posee lo mismo (y un blog es una red social). Es algo casi elemental.

Todas esas herramientas nada tienen que ver con la censura ni limitan la libertad de expresión de nadie porque libertad de expresión es defender dos derechos: el de cualquiera a decir lo que se le de la gana y el mio a decidir si quiero o no quiero escucharlo; si no se defienden ambos derechos no hablamos de libertad de expresión.

A veces, parecería que cuando se trata de la web, el concepto de la libertad está un poco tergiversado. Una cosa es que yo acepte, admita o defienda la libertad de cualquiera, de hacer de su propio espacio el sitio que quiera y otra cosa es que yo permita que aquello que no me gusta, se traslade al mio. Ese concepto es tan elemental como eso de que cada hogar es un mundo ... pero el mio es mio.

Poner límites no significa coartar la libertad de nadie porque no creo que nadie pueda ser feliz haciendo infelices a otros a menos que sea alguna especie de psicótico. Respetar y ser respetado, las reglas son muy sencillas.

Cuando me dejo de sentir cómodo en cierto lugar porque no me gustan sus reglas, lo que debo hacer es irme silbando bajito y a otra cosa. Lo mismo pasa si lo que veo no es de mi agrado o si no cubre mis expectativas ¿Qué voy a hacer? ¿Decirle al otro que eso no me gusta? ¿A quién le puede importar? ¿Qué aporto? ¿Qué cambiará? ¿Acaso debo ser el juez de todo? ¿Acaso los otros deben darme explicaciones? Sería mejor utilizar el viejo criterio y callarse a menos que se tenga algo bueno que decir. Ser sincero no es decir siempre lo que uno piensa, sobre todo, cuando nadie nos ha preguntado nuestra opinión.

La máscara que nos provee la web es un arma de doble filo. Por un lado, nos permite re-inventarnos a nosotros mismos y despojarnos de timideces, traumas y miedos. Por el otro, parece habilitar a que algunos saquen lo peor de si.

La máscara provoca embriaguez, aguza los sentidos, destraba la lengua (o los dedos) pero nos enfrenta al riesgo de sentirnos omnipotentes, de hacernos creer que nuestra voz debe ser escuchada a como de lugar.

Blogger, navegadores y compatibilidad

Hay quien aún se preocupa porque su sitio se vea en ciertos navegadores como Internet Explorer 6 por ejemplo, cosa que, a esta altura del siglo 21, carece de todo sentido práctico. Incluso, hay quienes se preocupan por IE7 que parecería más moderno pero en realidad, sólo fue una prueba fallida que trajo más problemas que soluciones.

Claro que, cada cuál puede hacer lo que quiera pero, si se usa Blogger, hay que saber que ninguno de esos navegadores es soportado por el sistema mismo y, si bien por ahora podemos acceder al servicio sin restricciones usando cualquier tipo de navegador, Blogger nos advierte que no se responsabiliza por los resultados y, cualquier cosa es posible.

En su página de ayuda Blogger and browser compatibility no da la lista de los navegadores soportados:

Y en el caso de IE8 y 9, nos advierte que debemos deshabilitar la opción de compatibilidad

Todo muy lindo, todo muy razonable pero si todo es así ¿por qué demonios Blogger sigue agregando automáticamente esta etiqueta en las platillas?

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

Ya que, lo que hace eso es justamente lo contrario, indicarle a IE que debe usar el modo compatibilidad, es decir, si estamos usando IE8 o IE9 el blog se mostrará como si usáramos IE7. Moraleja, a la ridiculez de Microsoft se le suma la de Google así que, ya sabemos en manos de quien estamos XD

Lo primero que debe hacerse en una plantilla de Blogger es sobrescribir esa etiqueta y abandonar de una buena vez esta locura de pretender compatibilidad absoluta con todo navegador y todo dispositivo a costa de nosotros, los usuarios, que debemos hacer malabares para resolver los problemas que ellos generan así que hay que agregar lo siguiente inmediatamente después de <head>

<meta content='IE=EmulateIE8' http-equiv='X-UA-Compatible'/>

Nosotros, sólo debemos entender que un blog con cierto diseño, no se verá igual en un móvil con una pantallita de 320 pixeles de ancho que en un monitor widescreen salvo que pensemos ese diseño con anterioridad y adaptemos las cosas para que ello ocurra. Los límites existen siempre, basta saber cuáles son para usarlos a nuestro favor o ... hacer cualquier cosa menos ignorarlos.

Y la nueva interfaz llegó para quedarse :-(

Los desarrolladores de Blogger se parecen a los hijos de esos amigos que son muy simpáticos cuando se los mira en fotografías pero, cuando los invitamos a cenar, se transforman en vendavales incontrolables y nos pasamos la noche atajando jarrones justo antes que se estrellen contra el piso, interponiéndonos entre esas tiernas manitos llenas de chocolate y la pared recién pintada o tratando de explicar por qué el gato no tiene ganas de jugar a la peluquería y sería mejor que dejaran esas tijeras y buscaran entretenerse con algo menos afilado. Adorables criaturitas.

Pues así es, uno cree que ellos (hablo de los desarrolladores de Blogger y no de los niñitos) SABEN, PIENSAN ... pero, a veces, da la impresión que no y para mi gusto, la nueva interfaz que nos han enchufado a la fuerza es una demostración más de ese presentimiento.

Es verdad que apenas la empezaron a mostrar y sugerir una y otra vez que la usáramos, probé y huí rápidamente así que ahora que es un cambio forzoso, mi subjetividad es nula y la miro con aprehensión aunque sea inevitable pero me pregunto ¿por qué se empeñan en cambiar lo que funciona en lugar de arreglar lo que no funciona?

Habrá a quien le guste, a mi no. Me parece incómoda, lo que antes estaba a la mano, ahora hay que buscarlo en distintos menús, está pensada para una resolución de pantalla específica ya que si uno tiene un monitor ancho, hay espacios enormes que no tienen uso pero ciertos botones se posicionan en los extremos y uno debe tomar un taxi para ir de uno a otro cosa que, evidentemente, nos permite ejercitar el antebrazo pero que es muy poco funcional. Por el contrario, en monitores con resoluciones bajas, ciertos botones desaparecen y si redimensionamos la ventana pasa lo mismo y debemos recargar la página para que vuelvan a su lugar.

Esta bien, lo sé, son detalles ... consecuencias de la modernidad pero ¿no podrían haberlo verificado? No es tan difícil, es algo casi elemental.

Lo más lindo es el cartelito de "Cargando" que se ve cada dos por tres; muy simpático. Uno va a hacerse un café, vuelve y allí sigue; amarillito y pequeñito ¿Recargamos la página con el botón del navegador? Bueno, a veces anda, a veces no porque muchas de las páginas internas se deben cerrar con un botón interno. UFA.

Suspiro. Veamos que hay. Uno no es un conservador por antonomasia así que siempre se está dispuesto a darle una oportunidad a lo nuevo pero ... ¿por qué sale siempre esta ventanita si no he hecho cambio alguno?

Y ¿en que quedamos? ¿se permiten 148 o 150 caracteres?

Mejor reviso las entradas por las dudas y ahí veo que todas tienen marcada esta opción, algo que jamás he usado:

y si quiero cambiar algo me dice:

¿Qué significa Omitir advertencia? Si hay un error hay un error y listo, hay que resolverlo y a otra cosa. Omito y todo sigue igual pero sin cartelito. Maravilloso. El error ha sido barrido bajo la alfombra. Total, si no lo veo: no existe.

Me olvido de las entradas. Veamos la plantilla, editar HTML ... y no, no han sacado el mensaje de advertencia, se abre una y otra vez porque, seguramente, ¿esperan que uno se resigne y no lo use más?

Eso es lo que presiento ¿Llegará el dia en que ya no habrá manera de editar las plantillas manualmente y habrá que usar siempre el nuevo editor? Me lo pregunto porque han desaparecido las plantillas tradicionales aunque ahí abajo, insólitamente, hay un enlace a las viejísimas, esas previas al Blogger Beta y con las que los que estamos acá desde hace años, alguna vez tuvimos que lidiar.

Quiere decir que ahora tenemos cuatro posibilidades: usamos las Vistas Dinámicas, usamos las engorrosas plantillas de nuevo estilo, usamos las clásicas que hace añares que nadie toca o tenemos que importar alguna descargada desde algún sitio y rogar que funcione y que siga funcionando.

OK, OK, ya no me quejo más

Comentarios en Blogger: ¿Habrá cambios?

Desde que a Blogger se le ocurrió agregar los comentarios anidados, da la impresión que no sabe para que lado ir (o lo sabe y no lo quiere decir) porque constantemente está haciendo cambios sobre los cuales nada dice y cambiando, agregando y quitando códigos de las plantillas.

Hace ya un tiempo, han aparecido dos nuevos includables forzosos dentro del widget de los posts:

<b:includable id='iframe_comments' var='post'>
  <b:if cond='data:post.allowComments'>
    <script expr:src='data:post.commentSrc' type='text/javascript'/>
    <div class='cmt_iframe_holder'/>
    <b:if cond='data:post.embedCommentForm == "false"'>
      <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
  </b:if>
</b:includable>

El primero, vaya uno a saber qué hace ... por ahora, no parece hacer nada excepto agregar un script larguísimo y un div cuya clase es cmt_iframe_holder:

http://www.blogblog.com/dynamicviews/xxxxxxxxxxxxxxx/js/comments.js

¿Para qué será?
¿Tendrá algo que ver con ese ícono que se ve a veces en los comentarios de este tipo y que muestra un lapicito? ¿Será que están pensando en permitirnos editar nuestros propios comentarios?

El otro includable es este:

<b:includable id='comment_picker' var='post'>
  <b:if cond='data:post.commentSource == 1'>
    <b:include data='post' name='iframe_comments'/>
  <b:else/>
    <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
    <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>
  </b:if>
</b:includable>

Que parece reemplazar toda esa parte que antes se mostraba separada. Ahora, en los posts veremos solamente:

<b:include data='post' name='comment_picker'/>

dentro de las condiciones para páginas estáticas y entradas individuales.

No parece nada más que una modificación menor, un cambio de lugar pero, allí hay cosas que llaman la atención, primero, una condición que carga o no carga el script del que hablaba antes y que, por el momento, parece que no se ejecuta nunca ya que el valor es siempre cero:

<b:if cond='data:post.commentSource == 1'>

Segundo, algo que estuvo desde que inventaron este sistema:

<b:if cond='data:post.showThreadedComments'>

que significa que si tenemos habilitados los comentarios anidados se muestren de ese modo y sino, que se muestren de modo "normal"; parece lógico excepto por una cosa, no hay nada dentro de la configuración de Blogger que nos permita elegir una u otra opción así que el valor, por ahora, siempre es true y por lo tanto, cualquier plantilla normal, tendrá los comentarios anidados si o si, a menos que eliminemos manualmente la condición.

Me parece que habrá que estar atentos a esos cambios, sobre todo quienes no usamos los comentarios anidados porque estas cosas, Blogger suele hacerlas sin informarnos nada.

Blogger y la nueva opción: deshabilitar la navbar

Hace unos días, Felipe Calvo me preguntaba si sabía que ya era posible deshabilitar totalmente la navbar de Blogger desde la misma ventana de diseño y confieso que no lo sabía.

Es que uno es un animal de costumbres y desde hace años, lo primero que se hace en un blog es eliminarla manualmente, agregando el CSS correspondiente aunque ... en realidad nunca se elimina sino que se la mantiene oculta con lo cual, el código, que Blogger agregaba de modo automático, seguía siendo parte del código fuente de la página. Ahora, con esta opción, ese código desaparece casi por completo.

El cambio, no sólo se ve allí, también se ve en la plantilla misma que ahora incluye una nueva sección:

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='false' title='NavBar ' type='Navbar'/>
</b:section>

Y si desplegamos el contenido, veremos todo el código que antes se agregaba de modo directo.

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='false' title='NavBar ' type='Navbar'>
<b:includable id='main'><script type=&quot;text/javascript&quot;>
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener(&#39;load&#39;,
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent(&#39;onload&#39;, function(){ object[attribute] = val; });
      }
    }
  </script>
<iframe src=&quot;//www.blogger.com/navbar.g?targetBlogID=XXXXXXXXXXXXXXXXX&amp;amp;blogName=NOMBRE&amp;amp;publishMode=PUBLISH_MODE_BLOGSPOT&amp;amp;navbarType=BLUE&amp;amp;layoutType=LAYOUTS&amp;amp;searchRoot=http://MIBLOG.blogspot.com/search&amp;amp;blogLocale=XX_XX&amp;amp;v=1&amp;amp;homepageUrl=http://MIBLOG.blogspot.com/&amp;amp;vt=XXXXXXXXXXXXXXXXX&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; height=&quot;30px&quot; width=&quot;100%&quot; id=&quot;navbar-iframe&quot; allowtransparency=&quot;true&quot; title=&quot;Navegación y búsqueda de Blogger&quot;></iframe>
<div></div><script type=&quot;text/javascript&quot;>
(function() {
var script = document.createElement(&#39;script&#39;);
script.type = &#39;text/javascript&#39;;
script.src = &#39;//pagead2.googlesyndication.com/pagead/js/google_top_exp.js&#39;;
var head = document.getElementsByTagName(&#39;head&#39;)[0];
if (head) {
head.appendChild(script);
}})();
</script>
</b:includable>
</b:widget>
</b:section>

Si deshabilitamos la navbar, el código de la plantilla sigue allí pero ya no se ejecuta y, obviamente, lo primero que uno piensa es, genial, la deshabilitamos y listo pero ... Blogger es Blogger y, por lo que he visto, cuando hacemos eso, desaparecen los íconos de edición rápida del blog.

¿Será un error? ¿Será que funciona así? En todo caso, hay que tener cuidado porque Blogger es mudo y jamás informa de estos cambios porque, claro, nosotros somos adivinos

¿Contraseñas en Blogger? No, no y no

Son muchos los que preguntan algo cuya respuesta parece no satisfacerlos o se niegan a aceptarla, probablemente, porque si uno busca en la web, verá cientos de artículos explicando como hacer lo que yo digo que no puede hacerse o, mejor dicho, lo que digo que NO DEBE hacerse y, en este caso, no es un tema de opiniones personales y discutibles, es algo elemental.

La pregunta repetida es ¿cómo restringir el acceso a determinadas páginas? ¿cómo permitir la descarga de ciertos archivos a determinados usuarios? ¿cómo hago para agregar una contraseña a mi blog de Blogger?

Y la respuesta es sencilla, simplemente NO hay manera de hacer eso porque el único lenguaje que podemos usar es JavaScript y con ese lenguaje no existe ninguna forma segura de establecer una contraseña por una razón básica: el código es visible y por lo tanto, cualquiera puede verlo. Es lo mismo que escribir una pregunta y dejar visible al respuesta.

¿Se puede hacer? Si, claro pero ¿para qué? Es completamente inútil. El manejo de contraseñas requiere de lenguajes que se ejecuten en el servidor y no en el navegador.

¿No están convencidos? Usen CTRL+U para mirar el código fuente de los "ejemplos prácticos" que se ofrecen.

El gadget traductor de Blogger

Hace poco, Blogger Buzz anunciaba que ya estaba disponible un nuevo gadget que permite agregar un traductor en el blog pero, a mi entender, lo anunciaba de modo erróneo (o a propósito) haciendo hincapié en que funcionaba en las Vistas Dinámicas cuando, en realidad, la información debería decir que TAMBIÉN funciona en ese tipo de plantillas pero que está disponible para cualquier otra pero, ya se sabe que la gente de Blogger se enamora fácil de sus fracasos ya que las las Vistas Dinámicas son eso, un juguete que muy pocas personas utilizan.

De todos modos, allá vamos y respondo a un par de consultas generales advirtiendo desde ya que, como casi cualquier otro gadget, las posibilidades de configurarlo visualmente son escasas. De hecho, cuando lo agregamos, nos da muy pocas opciones; podemos colocarle un título y seleccionar un estilo (Vertical, Horizontal, Solo desplegable) aunque, al parecer, en una plantilla normal, esos estilos no existen y siempre se ve igual, elijamos lo que elijamos.

El gadget se agrega como widget cuyo ID es Translate:

<b:widget id='Translate1' locked='false' title='Translate' type='Translate'/>

Sólo podemos cambiar algunas cosas mediante CSS, agregando las reglas correspondientes antes de </b:skin>. Un ejemplo con un poco de todo:

#Translate1 { /* centramos todo */
  text-align: center;
}
#Translate1 select { /* cambiamos el elemento SELECT a gusto */
  background: #DDD;
  border: 2px solid #EEE;
  border-radius: 4px;
  color: #000;
  font-family: Tahoma;
  margin: 10px 0;
  padding: 2px 10px;
  width: 200px;
}
#Translate1 option { /* cambiamos la forma en que se verán las opciones */
  font-style: italic;
  padding-left: 10px;
}
#Translate1 span { /* ocultamos el texto "Traductor de Google" que es demasiado ancho y se ve cortado */
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  width: 55px;
}
#Translate1 a {
  color: transparent;
}

Velocidades, resúmenes y paginación

Estas son dudas comunes:

1. el blog es lento
2. Blogger no respeta la cantidad de entradas que he indicado en al Configuración
3. la cantidad de entradas es variable cuando navego hacia atrás o hacia adelante

y las respuestas son siempre las mismas, objetivas, subjetivas, de todo un poco:

• por defecto, Blogger ES LENTO porque incluye una enorme cantidad de scripts sobre los cuales nada podemos hacer excepto soportarlos
• la cantidad de entradas a mostrar por página debe ser un valor "bajo" ya que las páginas excesivamente largas suelen ser poco amigables
• las imágenes deben ser optimizadas y su tamaño original debe ser adecuado; de nada sirve re-dimensionarlas con CSS; si son grandes, seguirá siendo grandes aunque las veamos pequeñas
• todo servicio externo implica una demora en la carga, que sea un script de una línea no lo hace más liviano
• audio, videos, Flash, cada archivo multimedia suma y suma de modo sustancial
• muchos archivos con scripts cortos tardan en cargarse bastante más que uno solo más largo
• todo lo que está en la plantilla se carga más rápido que si se aloja en un servidor externo
• la longitud de la plantilla no es un detalle a tener en cuenta, puede tener pocas líneas y generar páginas pesadas
• si se usa jSon, no hay que abusar del valor establecido en &max-results, ese número indica cuántas entradas se leerán del feed por lo tanto, pueden ser volúmenes significativos; es usual ver que se coloca 9999 porque se cree que con eso se cargaran todas pero eso es falso ya que el máximo es 500 sin importar el valor que coloquemos y cargar y procesar 500 entradas de un feed puede colapsar el navegador hasta tal punto que este nos muestre una ventana de advertencia

Si bien la lentitud o agilidad de un sitio depende de muchas cosas incluyendo nuestra conexión, que a veces veamos que el home muestra cantidades de entradas diferentes a las definidas por nosotros se debe a una limitación establecida por el mismo Blogger que, hace ya bastante tiempo, ha decido que si la página a mostrar excede determinado tamaño, se recortará SI O SI y no hay apelación posible.

Pero, aún sabiendo eso, muchas veces se argumenta que: "Tengo las entradas resumidas, ¿cómo puede ocurrir eso?"

La respuesta es otra pregunta ¿el resumen es realmente un resumen?

Para poder contestar eso hay que entender que una plantilla no es una página web, es una serie de instrucciones que ejecuta el servidor (Blogger) y que la ejecución de esas instrucciones es la parte rápida del asunto. Ese servidor crea la página, la envía al navegador y recién allí comienza el asunto.

Cuando usamos la opción MORE, el resumen es REAL e instantáneo, esa instrucción es interpretada por el servidor que no envía la entrada completa sino sólo una parte de ella por lo tanto, el navegador recibe una página más corta y obviamente, tarda menos en mostrarla.

Por el contrario, si el resumen es generado con JavaScript (que es lo que usamos muchos de nosotros), el servidor envía las entradas completas y el navegador ejecuta el script, mostrando sólo una parte de ellas. Que no las veamos completas NO significa que no se hayan cargado completas, como mucho, dependiendo del script que usemos, habremos evitado que se carguen imágenes u otros detalles pero el volumen seguirá siendo el mismo y ese es el volumen el que Blogger puede detectar como "excesivo" y mostrar entonces, una cantidad menor de entradas que las que suponíamos.

Service Unavailable: El nuevo Blogger

Los rumores dicen que Blogger cambiará de nombre por Service unavailable pero sólo son rumores, nada está confirmado ...

Algunos usuarios están reportando inconvenientes similares y Blogger está al tanto de este tema.
Por de pronto te sugiero pruebes borrar cookies y temporales de internet, o utilizar otro navegador. También recargar la página puede servir.
Si el problema persiste, por favor contanos.

No vale la pena hacerlo. Sólo hay que soportar digo ... esperar.

Blogger y los redireccionamientos personalizados

Una de las nuevas opciones para configurar Blogger que sólo podemos ver en la nueva interfaz es la llamada Errores y re-direccionamientos que se encuentra en el apartado Preferencias de búsqueda. Allí, junto con la opción de crear páginas de error personalizadas hay otra que se titula Re-direccionamiento personalizado ¿Qué es esto?

La ayuda de Blogger nos dice algunas cosas pero lo mejor es probar y ver que sale ... sin temor a destruir nada. Si hacemos click en Editar, veremos algo así:

Allí, nos dicen que debemos agregar dos direcciones ¿cuáles? ¿cómo? ¿para qué?

Lo que nos permite esta opción es redirigir una página interna a otra página interna con una particularidad, esa dirección puede no ser una página inexistente ¿Confuso? Veamos un ejemplo sencillo. Si tengo una página estática con datos referidos a mi perfil, ontacto o cualquier otra cosa cuya URL es:

http://miblog.blogspot.com/p/el-titulo-de-la-pagina.html

y quisiera que esa URL fuera más corta, más clara, más "linda" y llamarla, por ejemplo:

http://miblog.blogspot.com/perfil

bastaría colocar esos datos en la opción de Blogger para que cualquier enlace a miblog.blogspot.com/perfil se re-direccionará automáticamente a la página real sin ventanas de advertencia ni problemas ya que se trataría de un re-direccionamiento desde el mismo servidor.

¿Cómo colocaría esos datos?

En De pondría la dirección "falsa" como un path interno, sin el protocolo http ni el dominio ni el subdominio; antecediendo todo con una barra: /perfil

Y en A pondría la dirección "real" con el mismo criterio: /p/el-titulo-de-la-pagina.html

Luego, guardaría y listo. Al acceder al enlace indicado en De, se abriría la pagina indicada en A.

¿Cuántas re-direcciones pueden hacerse? No hay información al respecto pero, evidentemente, puede haber varias así que si queremos agregar otra, basta repetir los mismos pasos.

¿Qué diferencia hay entre marcar y desmarcar el cuadro Permanente? No tengo idea.

¿Para qué podría servir esto aparte de crear URLs más amigables?

Podría usarse para redirigir entradas viejas o desactualizadas a una nueva entrada; para redirigir entradas eliminadas ... quien sabe; la opción existe, funciona bien y cada uno sabrá sacarle provecho o descartarla.

Concretamente, en este blog, no existe esta URL:

http://vagabundia.blogspot.com/ejemplo

pero si se hace click allí, se abrirá la página a la que se re-direcciona.

La nueva interfaz de Blogger: Errores y demoras

Para quienes no usamos la nueva interfaz de Blogger porque no nos gusta, nos resulta muy incómoda o simplemente no queremos cambiar, este mes de mayo era clave y, si bien aún no ha terminado y la espada de Damocles sigue pendiendo sobre nuestras cabezas, tal vez podamos tener un tiempo de respiro extra ya que, curiosamente, el mensaje de Blogger indicando que el cambio sería forzoso a fines de este mes, ahora ha cambiado por otro indicando que eso ocurrirá "en los próximos meses" o sea ... vaya uno a saber cuando. Mañana, en julio, nunca ... con Blogger, no se sabe; lo temporal puede ser permanente y lo permanente puede ser efímero.

Aparentemente, lo que hay son muchos problemas no resueltos en esa interfaz que han obligado a Blogger a demorar el cambio programado. En este momento, en mi caso, la opción Descripción de búsqueda parece haber desaparecido y sin embargo ... allí está, en el código fuente pero oculta ¿por qué?

Hay otras opciones ocultas que jamás habia visto: Etiquetas de robots personalizados que no sé que puede significar:

Y Enlace permanente que parecería servir para cambiar la URL de la entrada algo que sería muy útil ya que muchas veces aparecen cortadas o son "feas":

Veremos, veremos, veremos o ... no veremos nada. Blogger es una caja de sorpresas.