El protocolo Open Graph en Blogger

JMiur [E]

El protocolo Open Graph es el que permite integrar las páginas webs con Facebook y los datos que les enviaremos cuando, por ejemplo, alguien usa el botón de Me Gusta.

Por lo que a nosotros nos puede interesar, basta saber que son etiquetas META que es posible agregar en nuestros sitios aunque en Blogger, hay que comprender (y aceptar) que hay limitaciones impuestas por el mismo servicio y los datos a los que nosotros podemos acceder por lo tanto, esto no será una panacea.

Primero que nada, yo recomendaría agregar dos atributos a la etiqueta HTML que es la tercera línea de cualquier plantilla; una nos permitirá evitar problemas en Internet Explorer y la otra ayudará a que este nuevo tipo de etiquetas sean interpretadas correctamente. En una plantilla común, deberia decir esto:

<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://opengraphprotocol.org/schema/'>

y en una de las nuevas plantillas, esto otro:

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://opengraphprotocol.org/schema/'>

Algunas de las nuevas etiquetas de Open Graph son similares a las que usamos habitulamente; por ejemplo, hay dos principales:

<meta property="og:title" content='nombre_del_sitio' />
<meta property='og:description' content='descripcion_del_sitio'/>

og:title es igual que la etiqueta <title></title>
og:description es igual que la etiqueta <meta name='description' content='...'>

Entonces, ¿es necesario duplicarlas?

No, en absoluto, es indiferente salvo que quisieramos que en Facebook se viera algo distinto porque sólo hay que saber que Facebook da prioridad a esas etiquetas así que si hay dos, siempre usará la de Open Graph.

Preguntan mucho algo que por ahora no tiene respuesta; la descripción que se muestra no es un resumen de las entradas y eso, que yo sepa, no tiene solución posible ya que no hay nada que podamos agregar para evitarlo salvo que escribamos una etiqueta META description para cada entrada. Tampoco sirve usar JavaScript porque no será reconocido. Lo más que podemos hacer es condicionarlo igual que hacemos con el resto:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <title><data:blog.pageTitle/></title>
  <meta property="og:title" expr:content='data:blog.pageTitle' />
  <meta expr:content='data:blog.pageName + &quot; texto texto texto texto texto texto texto texto texto &quot;' name='description'/>
  <meta expr:content='data:blog.pageName + &quot; texto texto texto texto texto texto texto texto texto &quot;' property='og:description'/>
<b:else/>
  <title><data:blog.title/></title>
  <meta property="og:title" expr:content='data:blog.pageTitle' />
  <meta name='description' content=' texto texto texto texto texto texto texto texto texto ' />
  <meta property='og:description' content=' texto texto texto texto texto texto texto texto texto ' />
</b:if>

Con og:type podemos indicar el tipo de sitio; por ejemplo, que se trata de un blog:

<meta property='og:type' content='blog' />

Con og:url indicamos la dirección URL del sitio o de la página en si misma:

<meta property='og:url' expr:content='data:blog.url' />

Con og:site_name indicamos el nobre de nuestro sitio:

<meta property='og:site_name' content='mi_blog' />

Una que puede ser útil es la que define la imagen a mostrar. Por defecto, Blogger agregar una etiqueta LINK con la imagen principal de las entradas si es que hay una. Es una miniatura de 72x72 que se corresponde con la primera imagen que hayamos agregado al post; esto, funcionará generalmente bien excepto en el home u otros páginas de navegación en cuyo caso, la imagen a mostrar será ... cualquiera. Para evitarlo podemos usar una condición, indicando que si no es una entrada, la imagen sea la que nosotros decidamos:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <meta property='og:image' content='URL_de_la_imagen' />
</b:if>

Hay más etiquetas que tienen sentido cuando se trata de sitios comerciales, de venta de productos o servicios, por ejemplo, las etiquetas de ubicación y de contacto: og:latitude, og:longitude, og:street-address, og:locality, og:region, og:postal-code, og:country-name, og:email, og:phone_number, og:fax_number, etc.

Una buena forma de saber si hay algo que debemos corregir o agregar a nuestro blog, es utiizar un servicio de Facebook para Desarrolladores llamado URL Linter. Si entramos y colocamos una dirección, ya sea del home de nuestro sitio o de una entrada individual, veremos qué datos lee y de dónde son leidos.

Un ejemplo del home de este blog y un ejemplo de una entrada cualquiera.

Dos packs de íconos navideños

Ocultar post del elemento Archivos

El widget de Archivo del blog de Blogger es casi imposible de personalizar más allá de pequeñas cosas. Son muchos los que preguntan sobre este tema y la verdad es que no hay respuestas.

El problema fundamental es que lo que vemos cuando agregamos este elemento son datos parciales; aparecerá una lista siempre incompleta de posts y, al hacer click en alguno de los enlaces que sirven para desplegarla (el año o el mes), recién entonces se cargarán. Quiere decir que en ese gadget no estan listadas "todas" las entradas de nuestro blog sino una cantidad reducida. Eso es algo que podemos comprobar fácilmente con alguna clase de script.

<div id="test"></div>
<a href="javascript:leergadgetarchivos();">click</a>

<script type='text/javascript'>
  function leergadgetarchivos() {
    var archivos = document.getElementById("ArchiveList");
    var misposts = new Array();
    if(archivos!=null) {
      var lista = archivos.getElementsByTagName("a");
      var contador = 0;
      for(var i=0; i<lista.length; ++i) {
        if(lista[i].className=="") {
          misposts[contador] = lista[i];
          contador++;
        }
      }
      var salida = "<ul>";
      for(var i=0; i<misposts.length; ++i) {
        salida += "<li><a href='" + misposts[i].href + "'>" + misposts[i].innerHTML + "</a></li>"
      }
      salida += "</ul>"
      document.getElementById("test").innerHTML = salida;
    }
  }
</script>

Aunque es un poco precario, algo que si puede hacerse y que han preguntado algunas veces, es ocultar determinados posts de esa lista de archivos pero, sólo se me ocurre una posibilidad, ocultar las entradas de un año específico.

Para eso, editamos el widget expandiendo la plantilla y buscamos esta parte:

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'>

Un poco más abajo, veremos el bucle que muestra los años, los meses y las entradas así que allí podemos usar un condicional que es lo que está añadido en color:

<b:includable id='interval' var='intervalData'>
  <b:loop values='data:intervalData' var='i'>
    <b:if cond='data:i.name != &quot;2006&quot;'>
        <ul class='hierarchy'>
          .......
        </ul>
    </b:if>
  </b:loop>
</b:includable>

En el ejemplo el año es el 2006 pero, puede ser cualquier otro.

Creando un slider con JavaScript (Parte 2)

Para transformar el slideshow que usamos como modelo en todas las entradas y agregarle un efecto de slider, debemos usar JavaScript pero también HTML y CSS porque nos vamos a encontrar con un problema inicial que es decirle al navegador cuáles son las imágenes que queremos desplazar.

Como siempre, hay muchas formas de hacer esto así que vamos con una muy elemental; vamos a utilizar una lista donde en cada item colocaremos una imagen en una etiqueta IMG y un texto en una etiqueta SPAN; cada imagen será, en este caso, de 300x190:

<style>
  .contenedor { /* el DIV que contendrá todo */
    height: 250px;
    margin: 0 auto;
    width: 300px;
  }
  ul#demoanim { /* la lista con las imágenes y los textos */
    height: 220px;
    margin: 0 auto;
    overflow: hidden; /* forzamos a que se oculte todo excepto una imagen */
    position: relative; /* posicionamos la lista de manera relativa */
    text-align: center;
    width: 300px;
  }
  ul#demoanim li { /* cada item de la lista */
    list-style-type: none;
    position: absolute; /* los posicionamos de manera absoluta */
    left: 0;
    top: 0;
    visibility: hidden;  /* y los ocultamos momentáneamente */
  }
  ul#demoanim li img { /* formazos a que las imágenes sean todas iguales */
    height: 190px;
    width: 300px;
  }
  ul#demoanim li span { /* el texto inferior con cualquier tipo de formato */
    display: block;
  }
  .navdemoani { /*a navegación inferior */
    text-align:center;
  }
  .navdemoani a { /* los enlaces de navegación */ }
</style>

<!-- pongo todo dentro de un DIV -->
<div class="contenedor">
  <! -- la lista con imágenes -->
  <ul id="demoanim">
    <li<img src="URL_imagen_1" /><span> la primera de las imagenes </span></li>
    <li><img src="URL_imagen_2" /><span> la segunda imagen </span></li>
    <li><img src="URL_imagen_3" /><span> la tercera imagen </span></li>
    <li><img src="URL_imagen_4" /><span> la cuarta imagen </span></li>
    <li><img src="URL_imagen_5" /><span> la última imagen </span></li>
  </ul>
  <!-- los enlaces para avanzar y retroceder -->
  <div class="nav">
    <a href="javascript:animdemo(1);">anterior</a> | <a href="javascript:animdemo(-1);">siguiente</a>
  </div>
</div>

Así como está, no veremos nada; todas las imágenes están ocultas y superpuestas ya que están posicionadas de manera absoluta en la esquina superior izquierda del rectángulo que las contiene.

Necesitaríamos posicionarlas una al lado de la otra y guardar eso en alguna parte porque, justamente, esa posición es la que vamos a cambiar de manera dinámica y lo que creará el efecto de desplazamiento. El resultado, aunque no se vea, será una tira larga de imágenes, así que si sé que miden 300 pixeles de ancho, la primera debería tener la propiedad left:0px, la segunda left:300px, la tercera left:600px, etc. Si luego de eso las hago visibles, sólo veré la primera porque para eso usé el overflow:hidden.

Podría cambiar el HTML y poner ese dato en cada etiqueta LI pero no tengo ganas de hacer cuentas así que aprovechamos JavaScript para que lo haga por nosotros y de paso, que guarde los datos para que luego podamos manipularlos.

No sé la cantidad de imágenes que hay, no tienen ID, sólo conozco el ID de la lista pero las etiquetas LI no tienen; sin embargo, puedo leer esos datos usando la función getElementsByTagName() que lo que hace es "buscar" las etiquetas HTML que se le indiquen así que le digo que busque dentro del ID que conozco, todas las etiquetas LI que haya:

var listaani = document.getElementById("demoanim").getElementsByTagName("li");

De ese modo, listaani[0] tendrá todos los datos de la primera etiqueta LI, listaani[1] los datos de la segunda, listaani[2] los de la tercera, etc.

Así que, debajo de lo que habíamos hecho, agrego algo así:

<script>
  anchoanimdemo = 300; // es el ancho de las imagenes
  // voy a guardar cada etiqueta LI en un array
  var listaani = document.getElementById("demoanim").getElementsByTagName("li");
  // listaani.length me dirá la cantidad de elementos (cuántas imágenes hay)
  // hago un bucle y voy agregando las propiedades a cada una de ellas
  for(var i = 0; i < listaani.length; i++){
    // la posicion left es pura aritmética: 0*300=0; 1*300=300; 2*300=600; etc
    listaani[i].style.left = (i * anchoanimdemo) + "px";
    listaani[i].style.visibility= "visible";
  }
</script>

Si ahora miro el resultado, veré la primera imagen pero nada más; nos faltan las funciones que produzcan el efecto:

<script type='text/javascript'>
//<![CDATA[
  // voy a inicializar algunas variables
  var timeranimdemo; // el nombre que le daré al timer
  var timerFLAGanimdemo = 0; // un valor que me indicará si estoy aumentando (1)  o disminuyendo (-1) la posición
  var contadoranimdemo; // es lo que usaré para saber cuando detenerme
  var imagenanimdemo = 0; // el número de orden de las imágenes (de las etiquetas LI que guardamos en listaani[] )
  var velocidadanimdemo = 1; // lo usaré para controlar la velocidad del slider
  var anchoanimdemo = 300; // es el ancho de las imágenes

  // esta función es la que se ejecuta al hacer click en los enlaces de la navegación
  // en la dirección habrá un valor de 1 para indicar que se moverá hacia la derecha y un valor de -1 para moverse hacia la izquierda
  function animdemo(direccion) {
    // si el flag no es cero quiere decir que se está animando así que salimos de la función para no ejecutarla varias veces
    if(timerFLAGanimdemo!=0) {
      return;
    }
    // verifico que haya más imágenes
    if(direccion==-1 && imagenanimdemo==(listaani.length-1)) {
      // click en anterior pero estoy en la primera imagen asi que no hago nada
      return;
    }
    if(direccion==1 && imagenanimdemo==0) {
      // click en siguiente pero estoy en la última imagen asi que no hago nada
      return;
    }
    // todo está OK así que inicializo el efecto
    contadoranimdemo = 0; // pongo a cero el contador
    timerFLAGanimdemo = direccion; // guardo la dirección
    // indico que la función timerejemploanimdemo() se ejecute cada milisegundo
    timeranimdemo = setInterval(timerejemploanimdemo,1);
  }

  // y esta es la función que se ejecutará una vez cada milisegundo
  function timerejemploanimdemo() {
    contadoranimdemo++; // incrementamos el contador
    // calculo cuántos pixeles se deben despazar (si la velocidad es 1 y la imagen mide 300, serán 300)
    // si el contador llegó hasta ese valor, detenemos todo
    if(contadoranimdemo>(anchoanimdemo/velocidadanimdemo)) {
      // cancelamos la función y ya no se seguirá ejecutando
      clearTimeout(timeranimdemo);
      // guardo el número índice de la imagen que está visible
      imagenanimdemo = imagenanimdemo - timerFLAGanimdemo;
      // terminamos la animación
      timerFLAGanimdemo = 0;
      return;
    }
    // con un bucle, modifico la propiedad left, sumando o restando una cantidad de pixeles
    for(var i = 0; i < listaani.length; i++){
      posicionactual = parseInt(listaani[i].style.left) + timerFLAGanimdemo * velocidadanimdemo;
      listaani[i].style.left = String(posicionactual) + "px";
    }
  }
//]]>
</script>

DropBox: Alojar archivos para usar en el blog

Me decidí a probar DropBox por primera vez cuando vi una entrada de Rosa hace ya bastante tiempo y lo dejé olvidado por esas cosas de la pereza. Uno anda en la web creando cuentas de casi todo y tratando de inventar contraseñas de esas que "seguro no olvidaremos" pero que siempre olvidamos así que es fácil olvidarse de algo o no prestarle la debida atención.

En algún momento, ya no recuerdo cuál servidor colapsó y empece a buscar alternativas. Me acordé de este y volví a probar pero "en serio". El resultado fue más que satisfactorio así que es hora que aparezca acá.

Crear una cuenta es fácil aunque a veces cuesta trabajo encontrar el enlace para hacerlo. Entramos en Create an Account y llenamos el formulario con un email válido. Hecho eso, podemos mantenernos logueados o ingresar desde el home.

De entrada, dispondremos de 2GB de espacio para alojar casi cualquier clase de archivo y esos archivos podrán ser públicos o privados. Obviamente, en cuanto al blog se refiere, lo lógico es hacerlos públicos de tal modo que podamos utilizarnos en nuestros sitios así que lo que hacemos para eso es utilizar la carpeta por defecto llamada Public. La abrimos y dentro de ella podremos crear otras subcarpetas y subir los archivos que nos interesen.

Una vez subidos, basta desplegar la opción de la derecha y seleccionar Copy public link para tener la URL directa del archivo. Esa URL tiene una ventaja respecto a otros servicios, sera una dirección amigable y no aleatoria por lo tanto, conociendo esl número que nos identifica, podremos escribirlas sin necesidad de mirar:

http://dl.dropbox.com/u/XXXXXXX/NOMBRE_CARPETA/nombre_archivo

Por lo general, los archivos suben muy rápido pero, aún así, la forma más cómoda de trabajar con DropBox es descargar el software que ellos proporcionan, instalarlo y usarlo directamente desde nuestra PC manejándonos con esa nueva carpeta virtual tal como lo haríamos con cualquier otra.

Si el espacio disponible nos parece escaso, hay formas de aumentarlo. Por ejemplo, desde la pestaña Get Started debemos completar cinco de los seis requisitos: Darle una mirada al Tour explicativo, instalar el software, subir algún archivo, etc. Hechos eso, nos darán 250MG extras y si además invitamos a amigos y estos se registran, recibiremos otros 250MB por cada uno hasta un máximo de 8 GB.

En arturogoga.com hablan de otras formas de incrementar ese espacio.

Hay que ir a https://www.dropbox.com/free y cumplir con alguno o todos esos requisitos: conectar DropBox con Facebook , seguirlos en Twitter, enviar un mensaje de feedback, etc.

Aunque el sitio está en inglés, la información disponible en la Wiki que poseen es bastante amplia y en al web se encuentran muchas páginas con explicaciones y trucos concretos para sacarle em máximo provecho a un servicio que, por ahora, es de lo mejor que he visto.

jQuery Slideshow

Este es un slideshow que utiliza jQuery para mostrar cualquier clase de contenido en una lista muy simple. Por defecto, el el efecto de scroll es automático y las velocidades son configurables modificando algunos pocos datos.

Primero, agregamos los scripts antes de </head>:

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

Como utiliza un plugin llamado jQuery Cycle plugin, debemos descargarlo y alojarlo en algún servidor:

<script src='URL_jquery.cycle.js' type='text/javascript'/>

o bien copiar su contenido y pegarlo en la plantilla:

<script type='text/javascript'>
//<![CDATA[
... aquí pegamos el contenido del archivo jquery.cycle.js ...
//]]>
</script>

El tercer script es el que controla las funciones; lo agregamos usando CDATA:

<script type='text/javascript'>
//<![CDATA[
... aquí pegamos el contenido del archivo slideshow.js ...
//]]>
</script>

y es ahí donde hay una serie de datos que podemos personalizar; básicamente, la velocidad que se controla con tres variables:

timeout: 1000, // time before next slide appears (in ms)
slideSpeed: 1000, // time it takes to slide in each slide (in ms)
tabSpeed: 300, // time it takes to slide in each slide (in ms) when clicking through tabs

La personalización es puro CSS así que ponemos las reglas elementales:

<stylet>
/* el contenedor principal */
#slideshow {
background-color: #EEE;
width: 600px; /* definimos el ancho total */
}
#slideshow ul {
list-style-type: none;
margin: 0;
padding: 0;
height: 1%; /* IE fix */
}
#slideshow ul:after {
clear: both;
content: &quot;.&quot;;
display: block;
height: 0;
visibility: hidden;
}
/* el contenido de los slides */
#slideshow .slides {
color: #000;
overflow: hidden;
width: 550px;
}
#slideshow .slides ul {
width: 1800px; /* es el ancho multiplicado por la cantidad de slides */
}
#slideshow .slides li {
float: left;
padding: 20px;
width: 560px; /* es el ancho ,enos el padding horizontal */
}
#slideshow .slides h2 { /* los títulos de cada slide */
margin-top: 0;
}
/* la barra navegadora inferior */
#slideshow .slides-nav {
background-color: #101921;
}
#slideshow .slides-nav li {
float: left;
}
#slideshow .slides-nav li a {
color: #FFF;
display: block;
padding: 5px 20px;
outline: none;
}
/* la pestaña activa */
.js #slideshow .slides-nav li.on,.js #slideshow .slides-nav li.on a {
background-color: #EEE;
}
.js #slideshow .slides-nav li.on a {
color: #000;
}
</stylet>

¿Cómo lo utilizamos?

Podemos agregarlo en una entrada, en un elemento HTML o directamente en la plantilla:

<div id="slideshow">
<div class="slides">
<ul>
<li id="slide-one">
<h2> el título del slide 1 </h2>
<p> ....... el contenido del primer slide ....... </p>
</li>
<li id="slide-two">
<h2> el título del slide 2 </h2>
<p> ....... el contenido del primer slide ....... </p>
</li>
<li id="slide-three">
<h2> el título del slide 3 </h2>
<p> ....... el contenido del primer slide ....... </p>
</li>
</ul>
</div>
<ul class="slides-nav">
<li class="on"><a href="#slide-one"> Pestaña 1 </a>
<li><a href="#slide-two"> Pestaña 2 </a></li>
<li><a href="#slide-three"> Pestaña 3 </a></li>
</ul>
</div>

REFERENCIAS:net.tutsplus.com/

Favicons: Ese dibujito que se ve en el navegador

El favicon es un ícono; esa pequeña imagen que aparece en los navegadores junto a la dirección, ya sea en la barra de títulos del navegador, en las pestañas o en los marcadores.

En Blogger se insertan igual que en cualquier otra página web, basta colocar el código necesario pero, respetando algunas condiciones.

Como Blogger agrega su propio favicon a muestras páginas, el código debemos colocarlo siempre después de:

<b:include data='blog' name='all-head-content'/>

El segundo detalle importante a tener en cuenta es que en Internet Explorer, los favicons sólo pueden ser imágenes en formato ICO y su nombre debe ser favicon.ico; en el resto de los navegadores, podemos usar cualquier otro formato de imagen e incluso, gifs animados.

En todos los casos, basta alojar la imagen en algún servidor y luego, colocar esto debajo del código indicado o bien, en cualquier aprte antes de </head>:

<link href='URL_imagen' rel='shortcut icon' type='image/x-icon' />
<link href='URL_imagen' rel='icon' type='image/x-icon' />

Ya que Internet Explorer no acepta cualquier imagen, podríamos condicionar el favicon de tal modo que se viera uno en ese navegador y otro en el resto así que a lo anterior, podemos agregarle algo así:

<!--[if IE]>
  <link href='URL_favicon.ico' rel='shortcut icon' type='image/x-icon' />
  <link href='URL_favicon.ico' rel='icon' type='image/x-icon' />
<![endif]-->

Voy a volver a insistir con algo ya que la mayoría de los problemas por los que consultan terminan teniendo la misma solución. Como los archivos en formato ICO no son sencillos de alojar ya que no hay demasiados lugares donde se los acepte, a veces, se los aloja en servicios que no aceptan el hotlink es decir, que podemos descargarlos pero no podemos usarlos en una página web. En caso de dudas, la manera más sencilla de probar esto es colocar la URL de la imagen que vamos a utilizar en la barra de direcciones del navegador y mirar. Si se abre una página, significa que la dirección no nos sirve.

Si queremos usar un ícono, el formato debe ser ICO y cambiarle la extensión a una imagen no servirá de nada.

Hay muchos programas gratuitos que permiten crear íconos y sino, se puede recurrir a los servicios online donde podemos subir una imagen cualquiera y ellos la transformarán y nos permitián descargarla.

A mi me sigue gustando como funciona FavIcon from Pics pero hay muchos otros. Claro que no cualquier imagen será útil; hay que recordar que estos íconos son muy pequeños así que hay que ir probando o buscar en bibliotecas como iconspedia o favicon.cc.

Un nuevo editor se suma a los ya existentes, se trata de Favigen y funciona de manera similar al resto, subimos una imagen en cualquier formato, genera el ícono y lo descargamos.

Suscribirse a la entradas

Vagabundia

El protocolo Open Graph en Blogger

Dos packs de íconos navideños

Ocultar post del elemento Archivos

Creando un slider con JavaScript (Parte 2)

DropBox: Alojar archivos para usar en el blog

jQuery Slideshow

Favicons: Ese dibujito que se ve en el navegador

últimas entradas

la puerta abierta

las etiquetas

Páginas

Christmas Icons Set 1
	Contiene 219 íconos de 16x16, 24x24, 32x32, 48x48, 64x64, 128x128 y 256x256, en formato PNG e ICO. descargar

Christmas Icons Set 2
	Contiene 30 íconos de 164x64 y 128x128, en formato PNG e ICO. descargar