Historias mínimas

Click para ver los videos.

Cortos creados y dirigidos por el francés Thomas Szabo (más información).

Y Twitter sirvió para algo; por ejemplo, para ver este video recomendado por Carlos de El blog de Inforc Ecuador que también fue publicado en Xombra.

Es un documental de Discovery Channel al que llaman "La guerra de los navegadores" aunque habla de la historia de internet. En realidad, uno se pregunta si al fin de cuentas amabas cosas no son lo mismo.

IF YOU GIVE UP, THEY GIVE UP

Le réchauffement climatique (El calentamiento global), realizado por Seagulls Fly para la organización Quercus.

Un favicon ese esa imagen pequeña que se ve en la barra de direcciones del navegador o cuando agregamos un sitio a los marcadores o favoritos. En un blog de Blogger podemos agregarlo con bastante facilidad y hay muchas herramientas online que nos ayudan a generar uno a partir de cualquier imagen.

Hace tiempo, en una entrada se mostraba la forma de asociar ciertas extensiones o tipos de archivos a una imagen determinada, utilizando los selectores condicionales de CSS. Más recientemente, La Bloguería ofrece la opción de descargar una hoja de estilo donde ya están definidas las propiedades para integrar una serie de íconos de tal manera que los enlaces a ciertos archivos se muestran con un ícono determinado (ver ejemplo).

En el caso de las páginas web, hay otro método manual para utilizar los favicons que las identifican; se trata de un servicio (Google Shared Stuff) que dispone el mismo Google y que nos muestra ese favicon en formato PNG.

No hay muchas explicaciones al respecto y parece más curioso que útil aunque es sencillo de utilizar ya que basta escribir una etiqueta IMG:

<img src="http://www.google.com/s2/favicons?domain=DOMINIO" />

Tiene bastantes limitaciones así que no siempre funcionará. Por ejemplo, si el sitio no utiliza el típico favicon.ico , no es reconocido; tampoco funcionará si se trata de subdominios así que los sitios alojados en Blogger mostrarán siempre el mismo, sin importar si están en blogspot.com o si están en un dominio propio ; para colmo, no acepta transparencias así que algunos se ven espantosos sobre fondos que no sean blancos

	<img src="http://www.google.com/s2/favicons?domain=www.blogger.com" />
	<img src="http://www.google.com/s2/favicons?domain=wikipedia.org" />
	<img src="http://www.google.com/s2/favicons?domain=youtube.com" />
	<img src="http://www.google.com/s2/favicons?domain=twitter.com" />
	<img src="http://www.google.com/s2/favicons?domain=www.facebook.com" />
	<img src="http://www.google.com/s2/favicons?domain=flickr.com" />
	<img src="http://www.google.com/s2/favicons?domain=www.mozilla.org" />

Bueno, con tantas limitaciones no sé ni para que escribo esto

Si no se tiene un blog es difícil que se comprenda esta entrada. Si se tiene, posiblemente tampoco se comprenda a menos que uno tenga el blog para jugar y para colmo, no sé si describirlo es suficiente. Sólo sé que a veces, la magia existe.

Los fragmentos de una conversación con Cata. El motivo carece de importancia, eran cuestiones técnicas menores, esas que suelen llevar horas de trabajo:

— ... si, es cierto y le pondría un borde
— Pensaba lo mismo.
— Ahí puse el borde, dejame ver lo del autor.
— Ganó muchisimo con el borde.
— Sí ¿Dónde iría el nombre del autor?
— Mmmm, yo diría que abajo.
— Eso me temía.
— Abajo a la derecha con letra tipo manuscrita.
— ¿Algo más?

Y entonces, así, sin anestesia, CaTa dice:

Oye ... de repente se me cruzó una imagen ...
... nosotros no hacemos posts, nosotros jugamos peeeeroo jugamosssss!!!
... así, concentrados, como los pequeños juegan a las bolitas.

Recién me vi y conecte cuando era pequeñita y jugaba sola en mi pieza o en el patio; super concentráaaa, tanto que mi mami me salía a buscar pensando que me había pasado algo porque no metía ni ruido ...

Es que allá a lo lejos, uno tuvo un patio, un jardín, una bohardilla o un rincón cualquiera en que éramos nosotros mismos y no hacía falta otra cosa más que dejarse llevar hasta donde terminara el horizonte, aunque estuviera a sólo unos metros delante nuestro.

Si crecimos, fue para perder algo de eso; para olvidarnos de lo que aprendimos y para creer que el mundo es algo que se puede guardar en una cuenta del Lehman Brothers: "¡Puro veneno! ¡Risas que duelen! ... ¡El bote roto! ¿A quién le importa? ... Si te sofoca ¿A quién le importa?"

Resumiendo: por eso tengo un blog:

— Maravilloso ... bienvenida — Llegué a sentir burbujitas que salían de mi corazón ...

Ahora que tweeteamos un poco, esto de las URL cortas será muy bueno porque ahorra espacio pero no deja de ser un poco molesto e incluso "peligroso" ya que no sabemos a donde nos llevarán.

Por ejemplo, ¿qué es?: http://tinyurl.com/5l5uy3

¿Un video de YouTube que alguien recomienda? ¿una página web con alguna información que nos interesa? Basta hacer click para saberlo pero yo quiero saberlo antes.

En la Sizlopedia acaban de mostrar una extensión para Firefox, de esas que apenas ocupan lugar y resuelven el tema.

Se trata de LongURL Mobile Expander y lo único que hace es volver a poner las cosas en su debido lugar así que, si vemos el enlace reducido basta colocar el cursor del ratón encima para que un tooltip nos muestre la dirección real.

También está disponible como script de Greasemonkey y funciona con muchos servicios, incluyendo tinyurl, is.gd, bit.ly, snipurl.com, snurl.com, snipr.com, ping.fm, metamark.net, y xrl.us.

Si bien podemos insertar el widget de Twitter tal y como nos lo ofrece el servicio, también podemos modificarlo para ampliar un poco las posibilidades.

En mi caso, he hecho eso y he cambiado pequeñas cosas: puse los textos en español, eliminé ciertos códigos HTML innecesarios, agregué otros, coloqué clases CSS en cada etiqueta para poder personalizarlo, etc.

La primera parte no difiere de los ejemplos anteriores; creamos un elemento HTML y lo ubicamos donde queremos que aparezca en la página. Allí, escribimos lo siguiente:

<div id="twitter_div">
<ul id="twitter_update_list"></ul>
<a class="linkTwitter" href="http://twitter.com/nombreusuario">texto</a>
</div>

Donde debemos recordar que hay que cambiar nombreusuario y colocar el texto que nos guste para enlazar a la página principal.

Luego, agregaremos los scripts justo antes de </body> pero, en lugar de enlazar blogger.js, lo agregaremos manualmente en la plantilla y lo modificaremos a gusto.

<script type='text/javascript'>
//<![CDATA[
// esta es la función que lee Twitter y escribe los mensajes en el blog
function twitterCallback2(obj) {
var wwwregular = /\bwww\.\w.\w/ig;
var regular = /((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g;
var atregular = /\B@([_a-z0-9]+)/ig;
var twitters = obj;
var statusHTML = "";
var username = "";

for (var i=0; i<twitters.length; i++){
var posttext = "";
posttext = twitters[i].text.replace(wwwregular, 'http://$&');

// reemplaza los enlaces tipo  http://tinyurl.com/000000 por un texto
posttext = posttext.replace(regular, '[ <a class="linkEnlaces" href="$1" title="$1">VER enlace</a> ]');

// cuando el mensaje es una respuesta, el nombre es un enlace
posttext = posttext.replace(atregular, '@<a class="linkUsuario" href="http://twitter.com/$1">$1</a>');
username = twitters[i].user.screen_name

// se escribe el item de la lista con el mensaje y se termina indicando el tiempo transcurrido
statusHTML += ('<li>'+posttext+' <span class="linkTiempo"><a href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'" title="Ver el mensaje en Twitter">'+relative_time(twitters[i].created_at)+'</a></span></li>')
}

document.getElementById('twitter_update_list').innerHTML = statusHTML;
}

// esta función calcula el tiempo transcurrido desde la publicación del mensaje y escribe un texto
function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);
// los textos a mostrar varían de acuerdo al tiempo transcurrido
if (delta < 60) {
return 'reciencito'; // menos de un minuto
} else if(delta < 120) {
return 'hace casi un minuto'; // hace un minuto
} else if(delta < (60*60)) {
return 'hace unos ' + (parseInt(delta / 60)).toString() + ' minutos'; // menos de una hora
} else if(delta < (120*60)) {
return 'hace casi una hora'; // hace una hora
} else if(delta < (24*60*60)) {
return (parseInt(delta / 3600)).toString() + ' horas atrás'; // menos de 24 horas
} else if(delta < (48*60*60)) {
return 'ayer'; // más de 24 horas
} else {
return 'esto fue hace ' + (parseInt(delta / 86400)).toString() + ' días'; // más de 48 horas
}
}
//]]>
</script>

<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/nombreusuario.json?callback=twitterCallback2&amp;count=1"></script>

Como cada etiqueta tiene una clase, las posibilidades de personalizarlo son infinitas. Para hacerlo, agregamos el estilo CSS en la plantilla, antes de </b:skin> o justo al inicio del elemento HTML donde colocamos el código. Esta sería una de las posibilidades:

<style type="text/css">

/* este es el DIV contenedor donde se mostrará el widget */
#twitter_div {
background: transparent url(URL_imagenOptativa) no-repeat top left; /* una imagen o color de fondo */
border: 1px solid #valor; /* puede tener o no tener un borde */
color: #valor; /* es el color del texto de los mensajes */
overflow-x: hidden; /* para evitar que algunos textos se "salgan" del DIV */
}

/* es la lista con mensajes y conviene eliminar posibles márgenes */
ul#twitter_update_list {
margin: 0;
padding: 0;
}

/* cada item de la lista (los mensajes en si mismos) */
ul#twitter_update_list li {
list-style-type: none;
list-style-image: url();
margin: 0;
padding: 5px 10px; /* separarlo de los bordes del contenedor */
}

/* es el enlace al nombre de un usuario (si existe) */
a.linkUsuario {color:#valor;}
a.linkUsuario:hover {color: #valor;} /* efecto rollover  */

/* son los enlaces interiores de los mensajes con un ícono identificatorio */
a.linkEnlaces {
background: transparent url(URL_imagenIcono) no-repeat right 50%;
color: #valor;
padding-right: 12px; /* la separación depende del ancho de la imagen */
}
a.linkEnlaces:hover {color: #valor;} /* efecto rollover  */

/* es el bloque que contendrá el enlace que muestra la antigüedad del mensaje */
.linkTiempo {
display: block; /* se fuerza a que sea mostraado en una nueva línea */
text-align: right; /* y a la derecha */
}
.linkTiempo a { /* el enlace en si mismo con una imagen de fondo */
background: transparent url(URL_imagen) no-repeat scroll left 50%;
color: #valor;
padding-left: 12px; /* la separación depende del ancho de la imagen */
}
.linkTiempo a:hover {color:#valor;} /* efecto rollover  */

/* es el enlace inferior que lleva al home de nuestro Twitter */
a.linkTwitter {
color: #valor;
display: block;
line-height: 48px; /* es uan forma de darle altura y centrar el texto */
margin: 10px 0 0 0; /* separado del mensaje superior */
padding-right: 10px; /* separado del borde derecho */
text-align: right; /* alineado a la derecha */
}
a.linkTwitter:hover {color:#valor;} /* efecto rollover  */

</style>

El script tiene muchas posibilidades y con un poco de paciencia puede modificarse para contemplar otras opciones. Como lo que lee es el texto del mensaje, basta establecer una serie de condiciones para filtralos y mostrarlos de diferentes formas.

Podríamos ocultar algunos (por ejemplo las respuestas que comienzan con arroba) o si usamos TweeterFeed para enviar los posts publicados, podemos detectarlo estableciendo un texto específico antes del título.

Una función extra que podemos agregar es mostrar un mensaje por vez pero leer varios y luego, navegar por ellos de manera similar a lo que hace el widget de Flash y en todos los casos, para personalizarlo usamos CSS y lo mejor es que cada elemento HTML tenga definida una clase.