Nevada en Sevilla

Check out this SlideShare Presentation:

Nevada en Sevilla

View more presentations from guadalquiviryasuncion.

Previsualización de galería de fotos

Bueno, hace poco entro alguien al canal de javascript preguntando como hacer una pagina de previsualización de álbumes de fotos. Es decir, que en una pagina se viese "album1" y una imagen que fuese cambiando con todas las imágenes del album1, "album2" y una imágen que ...

Toda la información sobre las imagenes esta en una base de datos que, para lo que nos interesa en este caso, contiene:

id: entero, clave principal autoincrementado
album: cadena, nombre del álbum al que pertenece
imagen: cadena, ruta de la imagen dentro del álbum

Así por ejemplo si tenemos 1,album1,foto1.png deberemos acudir a rutadelosalbumes/album1/foto1.png para mostrar la imagen.

Lo primero sin duda es hacer la consulta a la bbdd con php para obtener la lista de álbumes y fotos, esto no lo pondre pues cada uno que lo haga como quiera, es bastante sencillo. Esta información debemos pasarla a JavaScript, para lo que deberíamos usar JSON, pero como no me apetecia me hice una función que hace las veces de JSON (y su equivalente en js).

 function albumes2jsarray(){
  $array="";
  $lastAlbum="";
  $albumes=mysql_query("select album,imagen from albumes order by album,imagen");
  while($album=mysql_fetch_assoc($albumes)){
   if($album['album']!=$lastAlbum){
    if($lastAlbum==""){
     $array.=$album['album']."{";
    }
    else{
     $array.="}".$album['album']."{";
    }
    $lastAlbum=$album['album'];
   }
   $array.=$album['imagen'].";";
  }
  $array.="}";
  return $array;
 }

Esta función devuelve una cadena del tipo:

album1{foto1.png;foto2.png;foto3.png;}album2{foto1.png;foto2.png}

Ahora viene lo interesante, javascript :)

Primero comenzamos con la función que nos generará un array asociativo bidimensional en el que tendremos almacenados en un primer nivel (y de forma asociativa) los nombres de los álbumes de fotos y en un segundo nivel (no asociativo) las imágenes.

 function phpArray2jsArray(){
  var lastAlbum="";
  var paso1=phpArray.split('}');
  var pos=0;
  for(var i=0;i<paso1.length-1;i++){
   var paso2=paso1[i].split('{');
   if(lastAlbum!=paso2[0]){
    jsArray[paso2[0]]=new Array();
    inicio[paso2[0]]=0;
   }
   jsArray[paso2[0]]=paso2[1].split(';');
   pos+=1;
  }
  for(i in jsArray){
   jsArray[i]=jsArray[i].splice(0,jsArray[i].length-1);
  }
 }

Bueno, se podría haber hecho mejor, que recibiese los tres arrays por parametros etc, pero es lo que tiene las prisas ;)

Ya estamos acabando, ahora solo queda una función que vaya rotando las imágenes. Pondre el resto del script tal y como quedaría, pero sin la función anterior.

 <?php
  include('bbdd');
  echo "var phpArray='".$bbdd->albumes2jsarray()."';\n";
 ?>
 var jsArray=new Array();
 var inicio=new Array();
 var rutaAlbumes="galeria";
 var tiempoExposicion="2000";

 function rotaImagenes(){
  for(album in jsArray){
   var imgAct=document.getElementById(album);
   imgAct.src=rutaAlbumes+"/"+album+"/"+jsArray[album][inicio[album]];
   inicio[album]=inicio[album]+1==jsArray[album].length?0:inicio[album]+1;
  }
  setTimeout("rotaImagenes()",tiempoExposicion);
 }

 window.onload=function(){
  phpArray2jsArray();
  rotaImagenes();
 }

Otro punto importantes es que debemos tener a la fuerza en nuestra página una imagen para cada álbum cuyo identificador sea el mismo álbum, tipo <img id="album1" .. /> el resto da igual, donde esté, cuanto mida, etc.

Y ahi quedó, probablemente se pueda mejorar pero lo basico está hecho.

Editado:
Podeis ver la página que hice para crearlo aquí
Y dónde lo aplicó el que me preguntó aquí. Por cierto, tiene muy buenas fotografías.

Microsoft quiere la patente de RSS

Alguien pensaba que RSS lo creo Dan Libby? Nooo, fue Microsoft. Al menos eso es lo que debemos suponer ya que pretenden conseguir la patente. La verdad es que no entiendo mucho de leyes o patentes, pero he estado leyendo un poco y si no me equivoco, el que alquien pretenda la patente de algo implica que lo ha inventado (segun lei en el diccionario de la Real Academia Española y en la Wikipedia).

Documento en que oficialmente se le reconoce a alguien una invención y los derechos que de ella se derivan.

Una patente es un conjunto de derechos exclusivos garantizados por un gobierno o autoridad al inventor de un nuevo producto (material o inmaterial)

Según esto si Microsoft pretende la patente debo suponer que es porque es el inventor pero no me cuadran las cosas:

RDF Site Summary, the first version of RSS, was created by Dan Libby of Netscape in March 1999 for use on the My Netscape portal.

Y por si fuese poco:

Microsoft is not pretending that they invented RSS

Con esto supongo que me habré equivocado y que no hay que ser el inventor de algo para reclamar la patente, pero eso no tiene sentido, no? Si alguien es tan amable de aclararmelo se lo agradecería :P

En cualquier caso, y si Microsoft consiguiese la patente de RSS tendriamos que estarle agradecido, no piensan aprovecharse de nosotros.

Relax. I believe Microsoft has no intention of enforcing this patent against anyone, and no intention of collecting royalties on it.

Pues nada, ya veremos en que acaba la cosa.

JavaScript: inicializar arrays asociativos

Pues empezamos con JavaScript, aquí esta la imagen que se me ocurrio para los temas relacionados principalmente con este lenguaje.

Supongo que el que se haya peleado con él sabrá que se pueden inicializar arrays con varios valores en una sola línea, igual que en c, etc. Pero cuando se trata de arrays asociativos no encontre nada para hacer esto. La solución que propongo es la siguiente:

Array.prototype.initialize=function(){
 for(i=0;i<arguments.length;i++)
 this[arguments[i].split(":")[0]]=arguments[i].split(":")[1];
}

Después de hacer esto, que lo podeis dejar en una sola línea si os gusta más, solo hay que inicializar el array de la forma:

miArray.initialize("uno:ichi","dos:ni","tres:san");

Hay que tener en cuenta que se basa en que dentro del valor o del indice no puede haber dos puntos ':' ya que es éste el separador.

Si fuese necesario usar los dos puntos en el valor bastaría con modificar la función definida o modificarla para que reciba un primer (o último) parametro que indicase el caracter o caracteres separadores.

Array.prototype.initialize=function(){
 for(i=1;i<arguments.length;i++)
  this[arguments[i].split(arguments[0])[0]]=arguments[i].split(arguments[0])[1];
};

Se busca pingüina rosa

Supongo que ahora entenderéis porqué no puede volar el pingüino. En esta foto sale dormido pero tiene unos ojos muy bonitos.

Si alguien tiene un pingüino hembra que me avise, le estoy buscando pareja, sí, es rosa.

En fin, aquí pondre todo lo que se me ocurra, temas relacionados con la programación (javascript principalmente), el idioma japonés y los japoneses en general, enlaces interesantes o divertidos y poco más.

Bueno, hasta el siguiente post.