06 junio, 2008

FlickrTrans 1.0

Harto de buscar una extensión para Firefox que funcionase igual de bien que ImageShack right-click pero para Flickr, me he puesto manos a la obra.

En realidad había encontrado una extensión que realizaba casi todo el trabajo: Uploadr for Flickr 1.0 de Bill Conan. Pero dicha extensión aprovecha el servicio de Flickr en la URL http://www.flickr.com/tools/sendto.gne?url=URL_DE_LA_IMAGEN_A_CARGAR, el cual, una vez cargada (transloading) la imagen, no da ninguna opción para acceder a la galería del usuario. Así que, ni corto ni perezoso, me baje el XPI y me puse a trastear.

Mi experiencia con extensiones de Firefox es casi nula. Sabia que los XPI eran archivos ZIP renombrados y que todo estaba a la vista y basado en XUL (el lenguaje de marcado de interfícies de usuario de Mozilla). En realidad, la extensión no es muy complicada. Casi todo el trabajo se realiza en un HTML estático con un poco de Javascript que controla los pasos de la carga. Este es el código actual de dicho archivo:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta http-equiv="content-style-type" content="text/css" />
  <meta http-equiv="content-script-type" content="text/javascript" />
  <!-- link rel="stylesheet" href="default.css" type="text/css" media="screen, print" /-->
  <title>Transloading to Flickr</title>
</head>
<body onload="loaded()">

<iframe id="ifr" name="ifr" src="about:blank" width=0 height=0 style="display:none"></iframe>

<form id="form" action="http://www.flickr.com/tools/sendto.gne" method="get" target="ifr">
<input type="hidden" name="url" id="url" value="" />
</form>

<div style="margin: 100px auto 0 auto; text-align:center; width:100%;">
 <img src="chrome://flickrtrans/content/logo.jpg" /><br/>
 <h1> Transloading... <span id="h1"></span></h1>
 <img src="chrome://flickrtrans/content/flickr.gif" align="absmiddle" /> <a href="http://digitta.com/">FlickrTrans 1.0</a>
 by <img src="chrome://flickrtrans/content/digitta.png" align="absmiddle" /> <a href="http://digitta.com">digitta.com</a>.
 <br/><br/>
 <img src="chrome://flickrtrans/content/loading.gif" />
 <br/>
 <img src="chrome://flickrtrans/content/favicon.png" id="target" style="border:1px solid black; max-width: 150px;" />
</div>

<script>
function loaded() {
 url=location.href.substr(location.href.indexOf('=')+1);
 document.getElementById('url').value= decodeURIComponent(url);
 document.getElementById('target').src= decodeURIComponent(url);
 document.getElementById('ifr').onload= frameloaded1;
 document.getElementById('url').form.submit();
 document.getElementById('h1').innerHTML= '1/3';
}
function frameloaded1() {
 if(~document.getElementById('ifr').contentDocument.body.innerHTML.indexOf('password')) {
  // not authenticated
  alert('You are not logged in Flickr. Please log in there before using FlickrTrans');
  top.location.href=document.getElementById('ifr').contentDocument.location.href;
  return false;
 }
 document.getElementById('ifr').onload= frameloaded2;
 window.flickrname= document.getElementById('ifr').contentDocument.getElementsByTagName('b')[1].innerHTML;
 createCookie('flickrname',window.flickrname,60);
 document.getElementById('ifr').contentDocument.forms[0].submit();
 document.getElementById('h1').innerHTML= '2/3';
}
function frameloaded2() {
 id=readCookie('flickrid') || window.flickrId;
 if (!id) return getFlickrId();
 top.location.href='http://www.flickr.com/photos/'+id;
 document.getElementById('h1').innerHTML= '3/3';
}
function callServer(url) {
 var head= document.getElementsByTagName("head").item(0);
 var script= document.createElement("script");
 script.src= url;
 script.type= "text/javascript";
 void (head.appendChild(script));
}
function getFlickrId() {
 callServer('http://api.flickr.com/services/rest/?method=flickr.people.findByUsername&format=json&api_key=d7c94440fdce1b53a39b071f471b74a0&username='+window.flickrname);
 return false;
}
function jsonFlickrApi(data) {
 id= data.user.id;
 window.flickrId=id;
 createCookie('flickrid',id,60);
 frameloaded2();
}
// from http://www.quirksmode.org/js/cookies.html
function createCookie(name,value,days) {
 if (days) {
  var date = new Date();
  date.setTime(date.getTime()+(days*24*60*60*1000));
  var expires = "; expires="+date.toGMTString();
 }
 else var expires = "";
 document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
 var nameEQ = name + "=";
 var ca = document.cookie.split(';');
 for(var i=0;i < ca.length;i++) {
  var c = ca[i];
  while (c.charAt(0)==' ') c = c.substring(1,c.length);
  if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
 }
 return null;
}
function eraseCookie(name) {
 createCookie(name,"",-1);
}
</script>

</body>
</html>
Existen un iframe oculto y vacío y un formulario con un campo también oculto. Al cargarse la página, se llama a la función loaded que obtiene el parámetro url de window.location, lo carga en el campo oculto del formulario y lo envía al servicio de Flickr antes mencionado cargando el resultado en el iframe.

Cuando se acabe de cargar, se llama a frameloaded1 (soy genial para los nombres) que comprueba si está solicitando la contraseña y por tanto el usuario no está autenticado en Flickr en cuyo se redirige a la página de autenticación. Se lee el contenido de la respuesta, incluyendo el nombre de usuario que aparece en la página y un nuevo formulario que es la confirmación de la carga y que se realiza automáticamente desde Javascript.

Al cargar de nuevo la respuesta, si no se tiene el id de Flickr (se guarda en una cookie la primera vez), llama a la función de la API de Flickr flickr.people.findByUsername para obtener el id a partir del nombre de usuario. Con el id ya es posible redirigir a la página de la galería del usuario, que tiene la forma http://www.flickr.com/photos/id.





Esta es la página de la extensión. La extensión se puede instalar desde allí. Addendum: Debido a que todavía se encuentra en fase de preview, he colgado el XPI también de aquí.

8 comentarios:

mmanrique dijo...

parece que dar error de rdf al menos para Firefox2beta3

alsanan dijo...

Bueno, voy a decir lo que un programador nunca debe decir: "es que a mi me funciona". Estoy un poco corto de tiempo, y la extensión me funciona de muerte para subir imágenes que quiero usar en mis posts. Además Flickr es infinitamente más rápido que ImageShack que es el que estaba usando hasta ahora. Quizás lo he complicado demasiado o quizás no he realizado las suficientes comprobaciones. En cuanto tenga un rato... Mientras tanto, disculpa las molestias. Nota, querrás decir Firefox3beta2, no?

Boxes dijo...

Instale el FlickrTrans 1.0, pero cuando clikeo sobre una imagen me pide mi ID, lo hago coloco mi mail completo y luego mi pass, pero no me conecta, solo lo hace cuando yo por otro lado ingreso a flickr yahoo, ahi si me ingresa la imagen a la galeria, sino, no me acepta ni mail, ni ID ni contraseña, ¿cuál es el problema?.

alsanan dijo...

Tal y como se ve en el código, lo único que hago es "esconder" una petición a la dirección web:

http://www.flickr.com/tools/sendto.gne?url=

seguido de la dirección de la imagen a incluir en tu cuenta de Flickr. Si esa página te da error, FlickrTrans también lo hará. Te recomiendo que pruebes a subir una imagen manualmente con ese método y si ves que te pide contraseña, introdúcesela y marca "recordar contraseña" para que no te caduque y puedas seguir usando la extensión normalmente.

A.D.M.I.N.I.S.T.R.A.D.O.R dijo...

Saludos!!!

Esta extension me parece mejor que la de Flickr Upload, lo que pasa es que no se instala en FireFox 3.03

puedes revisra el ultimo comentario que hice en la pagina de addons de firefox, para que veas los errores.

acabo de descargar la version 1.0 de tu extension desde el link de mas arriba, pero tampoco funciona. en la pagina de addons esta la 1.01. Tampoco funciona..

porfavor soluciona esto, o dime que puedo hacer con el codigo de mas arriba para arreglar tu extension o hacerla funcionar de alguna manera.Muchas Gracias!!!

alsanan dijo...

Hola. Prueba a entrar en Flickr, introducir tu usuario y contraseña y marcar la casilla de mantenerte autenticado. Mi extensión sólo carga la página http://www.flickr.com/tools/sendto.gne?url= con la url de la imagen a subir a Flickr. Si esa URL te devuelve error (indicando la URL de una imagen), mi extensión también lo hará. Mira mi comentario anterior al respecto.

A.D.M.I.N.I.S.T.R.A.D.O.R dijo...

saludos!!!

como dije en mi anterior mensaje, tu extension no la puedo instalar...

la casilla la tengo marcada desde que me registre, pero si no puedo instalar tu extension..

alsanan dijo...

Aviso: para Firefox 3.1 beta y posteriores, usar la nueva versión 1.0.1

Publicar un comentario en la entrada

Últimos links en indiza.com