Mejor un mal backup que un blog perdido

JMiur [E]

Es hora de preguntar otra vez: ¿Realizas respaldos de tu blog?

No es una pregunta retórica. Recientemente, un blog como el de Pepiche que tiene tantos años en la web como este, desapareció en el agujero negro de Blogger y si bien tuvo suerte en ser restaurado en un par de dias, a otros, las cosas se les está complicando y mucho.

En DicasBlogger vienen siguiendo este problema desde hace varios dias y ya ha sido reconocido por Blogger mismo; al parecer el problema se ha solucionado pero ... mejor pongamos las barbas en remojo, toquemos madera, encomendémonos a todos los santos y hagamos un backup YA porque más vale prevenir que curar.

Hacer un backup es muy sencillo. Basta ir a Configuración y allí, en al primera pantalla, veremos las dos opciones que nos interesa: Exportar e Importar. Hacemos click en Exportar y esperamos que se descargue el archivo XML. Este proceso puede durar más o menos tiempo dependiendo de la cantidad de entradas y comentarios que tengamos. Puede ser un segundo o varios minutos. El archivo resultante tendrá un nombre genérico y la fecha; por ejemplo: blog-12-15-2010.xml

Para importar, hacemos el proceso inverso y el tiempo también dependerá del volumen pero tengan en cuenta que es bastante superior al tiempo de bajada.

¿Qué se importa?

Las entradas (que se pueden publicar inmediatamente), los comentarios ... y nada más. La configuración no cambiará y tampoco la plantilla así que habrá que agregarla manualmente.

Si el blog ya existe, al importarlo le sumamos entradas y comentarios; si creamos un blog nuevo, allí podemos desplegar las Opciones avanzadas e importarlo directamente.

¿Y la plantilla?

Pués, en el archivo XML que descargamos está pero nos costará mucho rehacerla ya que se cambian los caracteres < y > por sus equivalentes < y > por lo tanto, convendrá que la descarguemos por separado desde Diseño | Edición de HTML, haciendo click en el enlace Descargar plantilla completa pero ... ese archivo, no incluirá los contenidos de los widgets agregados.

Moraleja; para tener un backup de Blogger 100% efectivo habrá que ... esperar que ellos se decidan a ofrecernos un método adecuado pero, pese a todas las limitaciones, no hacerlo de manera regular es jugar con fuego.

Usar JSON para mostrar las entradas del blog

Suponiendo que hemos entendido cómo funciona JSON, vamos a ver si podemos usarlo para mostrar cosas y se me ocurre que como ejemplo, bien podríamos intentar crear un script para mostrar las últimas entradas y, como esto es poco original, vamos a ver cómo es posible leer la imagen que Blogger utiliza como thumbnail y que es la misma que se muestra cuando usamos el gadget Lista de blogs.

Para esto, necesitamos tres pasos, primero, leer los datos, luego mostrarlos, por último, diseñar al forma en que queremos verlos.

El primer paso es el que está explicado de manera elemental en la entrada anterior, necesitamos cargar los feeds y ejecutar una función. La única diferencia notable con ese modelo es que en el bucle, verificaremos si hay una imagen con algo así:

if ("media$thumbnail" in entry) {
  postimg = entry.media$thumbnail.url;
} else {
  postimg = "URL_imagen_por_defecto";
}

Como el contenido de nuestras entradas es HTML, también, agregaremos una función extra para eliminar las etiquetas y dejar sólo el texto.

Coloco entonces las funciones antes de </head>.

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

// esta función devolverá el texto de la entrada, eliminando las etiquetas
// la llamamos indicando la cantidad de caracteres a mostrar para crear una especie de resumen
function eliminattags(cual,longitud){
  var resumen = cual.split("<");
  for(var i=0;i<resumen.length;i++){
    if(resumen[i].indexOf(">")!=-1){
      resumen[i] = resumen[i].substring(resumen[i].indexOf(">")+1,resumen[i].length);
    }
  }
  resumen =  resumen.join("");
  resumen = resumen.substring(0,longitud-1);
  return resumen;
}

function mostrarentradasconthumb(json) {

  // defino la cantidad de entradas que mostraremos
  var numposts = 4;
  // defino la imagen por defecto que voy a utilizar
   var imagenpodefecto = "URL_imagen";
  // defino la longitud de los resúmenes
   var lenresumen = 100;

  var entry, posttitle, posturl, postimg, postcontent, salida;

  // el bucle que leerá las entradas
  for (var i = 0; i < numposts; i++) {
    // leo y guardo el dato
    entry = json.feed.entry[i];

    // este es el título de la entrada
    posttitle = entry.title.$t;

    // busco la dirección URL de la entrada
    if (i == json.feed.entry.length) { break; }
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        // esta es la dirección de la entrada
        posturl = entry.link[k].href;
        break;
      }
    }

    // busco el contenido de la entrada
    postcontent = "";
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    }
    // este es el contenido resumido
    postcontent = eliminattags(postcontent,lenresumen);

    // busco la imagen de la entrada
    if ("media$thumbnail" in entry) {
      // hay una imagen
      postimg = entry.media$thumbnail.url;
    } else {
      // no hay imágenes asi que uso la que tengo definida
      postimg = imagenpodefecto;
    }

    /*
       ya tengo los datos, podría agregar otros pero, para mi, estos son suficientes:
       posttitle es el título
       posturl es la dirección
       postimg es la imagen
      postcontent es el resumen
    */

    // ACÁ TENDRÉ QUE MOSTRARLOS
    // EL CODIGO DE SALIDA

  }
}
//]]>
</script>

Para mostrar esos datos, tengo que pensar el diseño. Lo más sencillo es colocarlos en un DIV con una clase especial y así, separar el CSS del script. Entonces, podría, por ejemplo, hacer que se mostraran de este modo:

<div class='miresumen1'>
  <a href='URL_entrada' target='_blank'><img src='URL_imagen' /></a>
  <h6><a href='URL_entrada' target='_blank'> título e la entrada </a></h6>
  <p> el resumen de la entrada ... </p>
</div>

Así que, haré que el script escriba eso, usando las variables. Lo que debería poner en EL CODIGO DE SALIDA es esto:

salida = "<div class='miresumen1'>";
salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
salida += "<p>" + postcontent + " ... </p>";
salida += "</div>";
document.write(salida);

Ahora, llamaré a la función, agregándola en algún post, debajo de estos, en una página estática o donde quiera mostrarlo:

<script src="http://miblog.blogspot.com/feeds/posts/default?max-results=4&orderby=published&alt=json-in-script&callback=mostrarentradasconthumb"></script>

Con un poco de CSS que ponemos antes de </b:skin>, lo armamos estéticamente.

.miresumen1 {
  border-bottom: 1px solid #555;
  float: left;
  height: 190px;
  margin: 0 5px;
  padding: 5px;
  width: 135px;
}
.miresumen1:hover {
  background-image: -moz-linear-gradient(100% 100% 90deg, #555, #000);
  background-image: -webkit-gradient(linear, left bottom, left top, from(#555)), to(#000));
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF000000', EndColorStr='#FF555555');
}
.miresumen1 a {
  color: #FC0;
  display: block;
  font-size: 12px;
  text-align: center;
}
.miresumen1 img {
  height: 72px;
  width: 72px;
}
.miresumen1 h6 {
  border-bottom: 1px dotted #888;
  height: 30px;
  margin: 5px 0 0;
  padding-bottom: 2px;
}
.miresumen1 p {
  color: #CCC;
  font-size: 11px;
  line-height: 1.3em;
  margin: 5px 0 0;
}

Modificando la salida, cambiamos la forma de mostrar los datos. Otro ejemplo donde no mostramos el contenido de las entradas:

salida = "<div class='miresumen2'>";
salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
salida += "</div>";

.miresumen2 img {
  border: 5px solid transparent;
  padding: 3px;
  height: 72px;
  width: 72px;
}
.miresumen2 img:hover {
  -moz-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455);
border:5px solid #555;
}
.miresumen2 a {
  color: #FFCC00;
  display: block;
  font-size: 12px;
  font-weight: normal;
  text-align:center;
}
.miresumen2 a:hover {
  font-weight: bold;
}
.miresumen2 h6 {
  height: 30px;
  margin: 5px 0 0;
}

Y un ejemplo más donde vamos a reducir la información y aumentar la cantidad de entradas a ser mostradas:

salida = "<div class='miresumen3'>";
salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
salida += "</div>";

.miresumen3 {
  border: 1px solid #555;
  float: left;
  height: 35px;
  margin: 1px;
  padding: 5px;
  width: 190px;
}
.miresumen3 a {
  color: #DDD;
  display: block;
  font-size: 11px;
  font-weight:normal;
}
.miresumen3 img {
  float: left;
  height: 36px;
  width: 36px;
}
.miresumen3 h6 {
  float: right;
  height: 45px;
  margin: 0;
  width: 145px;
}
.miresumen3:hover {
  background-image: -moz-linear-gradient(100% 100% 90deg, #338, #33F);
  background-image: -webkit-gradient(linear, left bottom, left top, from(#338), to(#33F));
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF3333FF', EndColorStr='#FF333388');
  border: 1px solid #33F;
}

Mantener actualizadas las librerías de Google

Quien use las librerías de Google para cargar scripts y esté preocupado por las actualizadicones puede visitar scriptsrc.net y copiar el código necesario para utilizar la última versión disponible o bien, cambiar el directorio que la contiene:

Por ejemplo, esto cargaría prototype.js en su versión 1.6.1.0:

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js' />

y esto, JQuery en su versión 1.4.3:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript' />

en todos los casos, un directorio indica la versión /1.6.1.0/ y /1.4.3/ respectivamente pero ya son versiones "viejas", las nuevas deberían decir /1.7.0.0/ y /1.4.4/ así que habría que editar el código y escribir el nuevo número pero, también podemos hacer otra cosa que es un truco interesante que explica CSS-Tricks en una entrada reciente: en lugar de colocar el número exacto de la versión, podemos usar un número genérico; por ejemplo:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js' type='text/javascript' />

haría que se cargara siempre la última versión que comience con esos número; hoy, sería la la 1.4.4 y si aparece la 1.4.5 se cargará esa y así sucesivamente hasta que aparezca la 1.5 en cuyo caso, se cargará la última de la serie 1.4.x.

Aún más; si pusiéramos sólo esto:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript' />

se cargararía la última versión 1.x.x sin importar cuál sea esta y recién debríamos modificar el código manualmente cuando apareciece una versión 2.x.x.

Esto es lo mismo para todos los scripts de Google, cualquiera de estos códigos cargará la última versión de scriptaculous disponible (la 1.8.3):

<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js' type='text/javascript' />

<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8/scriptaculous.js' type='text/javascript' />

<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js type='text/javascript' />

El primer ejemplo cargará la versión exacta, el segundo cualquier actualización hasta que aparezca una 1.9.x y el último, la versión más actual de la serie 1.x.x.

Cajas en forma de burbuja

Blogger: Nueva opción para los feeds

En Blogger Buzz anuncian que a partir de ahora, podremos controlar un poco más la forma en que se muestran los feeds de nuestro blog.

Si entramos en Configuración | Feed del sitio veremos que al desplegar la lista, han agregado una opción más llamada Hasta el salto de línea:

Feed de entradas del blog

Hasta ahora, los feeds podían ser enviados como Cortos (se generaba un resumen de no más de 400 caracteres de largo) o Completos. Esta nueva alternativa nos permite determinar la longitud, es decir, hasta dónde se podrán ver desde un lector externo y para indicar esto, se utiliza el MORE.

Quiere decir que, si marcamos la opción y en una entrada usamos el MORE para que nuestras entradas no se vean completas en la página de inicio, el feed seguirá el mismo criterio y tampoco se mostrará completo sino que se cortará en ese lugar y se agregará un enlace de "Leer más" que permitirá acceder a la página individual.

¿Esto es mejor o peor? No hay una sola respuesta, ahí ya entran a jugar las subjetividades.

Hay quienes creen que los feeds son una competencia para el mismo blog, que si alguien "lee pero no entra", se perjudica el sitio; de alguna manera, miran las estadísticas de "visitas" y se olvidan de una estadística que no existe: "los lectores" ya que esos últimos son los que en realidad hacen un blog y los primeros, sólo son un número que, tal vez es muy alto pero que en realidad poco significa si es que un blog es ese espacio en la web donde pretendemos compartir o simplemente expresarnos.

Algo diferente puede ocurrir con sitios comerciales si es que pudiera existir tal cosa como un blog comercial, algo que dudo ya que, salvo casos excepcionales, no creo que sea un formato adecuado para ese tipo de proyectos. En lo personal, tampoco creo que los feeds cortos sean muy efectivos ni siquiera en esos casos.

Si leo algo que me interesa, entrararé al sitio para observarlo in-situ, para chusmear, para participar, para ver si hay alguna otra cosa que pueda interesarme. A mi entender, los feeds generan visitas y no lo contrario; pretender que alguien "ingrese" mostrándole sólo un pedacito no parece ser una buena estrategia, "el dinero no puede comprar amor" y los no-feeds no pueden comprar lectores. Siempre es mejor que las personas elijan y cuantas más opciones haya, mejor será para todos.