How to Mimic the iGoogle Interface with Database

19 09 2009

James Padolsey wrote a great tutorial about “How to mimic the iGoogle interface” with jQuery. Thank you very much, James. I have used your code intensively.

The next step was a new article explaining how to save widgets configuration into a cookie. Very useful too. But the final part was to store that data in a database.

That’s what a have done: an example of the same code, but using a database. The changes are very easy to implement. I have just had to modify savePreferences and sortWidgets functions in inettuts.js file, and to write a new PHP file for saving and loading data.

I call jQuery post function to send the data using AJAX for savePreferences:

$.post("iNettuts_rpc.php","value="+cookieString);

As you can see, cookieString is the same variable stored into a cookie. Then iNettuts_rpc.php manages with the database. It’s a very simple PHP showing how to store the value for a user called John Doe:

header("Cache-Control: no-cache");
header("Pragma: nocache");

// User_id -> Should come from a session variable
$user_id="john doe";

// DB connect parameters
$server="localhost";
$user="root";
$password="";
$database="iNettuts";

$table="iNettuts";
$field="config";

// DB connect
mysql_connect($server,$user,$password);
@mysql_select_db($database);

if (isset($_REQUEST["value"])) {
 // SET value  

 $value=$_REQUEST["value"];

 $rs=mysql_query("SELECT * FROM $table WHERE user_id='$user_id'");
 if (mysql_numrows($rs)==0)
 mysql_query("INSERT INTO $table($field,user_id) VALUES('$value','$user_id')");
 else
 mysql_query("UPDATE $table SET $field='$value' WHERE user_id='$user_id'");
 echo "OK";

} else {
 // GET value 

 $rs=mysql_query("SELECT $field FROM $table WHERE user_id='$user_id'");
 if ($row=mysql_fetch_row($rs))
 echo $row[0];
 else
 echo "";
}

mysql_close();

And finally, the most difficult part: loading data to sort widgets:

sortWidgets : function () {
 var iNettuts = this,
 $ = this.jQuery,
 settings = this.settings;

 if(!settings.saveToCookie) {
 $('body').css({background:'#000'});
 $(settings.columns).css({visibility:'visible'});
 return;
 }

 $.post("iNettuts_rpc.php", "",
 function(data){

 var cookie=data;

 if (cookie=="") {
 $('body').css({background:'#000'});
 $(settings.columns).css({visibility:'visible'});
 iNettuts.addWidgetControls();
 iNettuts.makeSortable();
 return;
 }

 /* For each column */
 $(settings.columns).each(function(i){

 var thisColumn = $(this),
 widgetData = cookie.split('|')[i].split(';');

 $(widgetData).each(function(){
 if(!this.length) {return;}
 var thisWidgetData = this.split(','),
 clonedWidget = $('#' + thisWidgetData[0]),
 colorStylePattern = /\bcolor-[\w]{1,}\b/,
 thisWidgetColorClass = $(clonedWidget).attr('class').match(colorStylePattern);

 /* Add/Replace new colour class: */
 if (thisWidgetColorClass) {
 $(clonedWidget).removeClass(thisWidgetColorClass[0]).addClass(thisWidgetData[1]);
 }

 /* Add/replace new title (Bring back reserved characters): */
 $(clonedWidget).find('h3:eq(0)').html(thisWidgetData[2].replace(/\[-PIPE-\]/g,'|').replace(/\[-COMMA-\]/g,','));

 /* Modify collapsed state if needed: */
 if(thisWidgetData[3]==='collapsed') {
 /* Set CSS styles so widget is in COLLAPSED state */
 $(clonedWidget).addClass('collapsed');
 }

 $('#' + thisWidgetData[0]).remove();
 $(thisColumn).append(clonedWidget);
 });
 });

 /* All done, remove loading gif and show columns: */
 $('body').css({background:'#000'});
 $(settings.columns).css({visibility:'visible'});

 iNettuts.addWidgetControls();
 iNettuts.makeSortable();

 });
 }

I have used the same variable names to make it easier.

You can download the full example here.





¿Qué haríamos sin Google?

6 09 2009

Continuando mi anterior entrada sobre Bing y Google, me he quedado pensando… ¿qué haríamos sin Google?

Pues muy sencillo: utilizar otros buscadores. En serio, ¿os dais cuenta de lo que Google (el buscador) ha supuesto en la historia de Internet? Quizá algún día nos lleguemos a dar cuenta.

Mientras tanto, os dejo una imagen que me ha encantado, sobre lo que podría ser Google antes de Internet:

Desde aquí, gracias a Larry Page y Sergey Brin por tan brillante idea. No sabéis la cantidad de tiempo que habré pasado simplemente haciendo búsquedas, que casi siempre han resuelto algún pequeño problema en mi vida.





Bing vs. Google

4 09 2009

Desde la reciente presentación de Bing, el nuevo buscador de Microsoft, se ha escrito mucho sobre la calidad de ambos buscadores. ¿Cuál es mejor, Bing o Google?

Pues la respuesta es: decidid vosotros mismos. Y qué mejor forma de decidir que hacer la misma búsqueda en ambos buscadores. Para eso, he descubierto ésta página:

http://www.bing-vs-google.com

Basta con introducir el texto que quieres buscar y, como resultado, te aparecen Bing y Google en sendos frames verticales, con lo que puedes comparar los resultados fácilmente:

bing.vs.google

Yo he hecho varias pruebas. Por ejemplo, he introducido “php pdf”, una búsqueda bastante poco precisa, con el objetivo de encontrar información sobre la generación de ficheros PDF desde lenguaje PHP. En Google el primer resultado ha sido una página titulada Generar PDF con PHP y MySQL, justo lo que buscaba. Sin embargo, en Bing, los primeros resultados son páginas que hablan sobre PDF y tienen extensión PHP o al contrario. Es decir, nada relevantes. El primer resultado algo útil aparece en séptimo lugar, con el enlace al manual de la librería de PDF nativa en PHP, algo que Google también enlaza en sexta posición, pero después de cinco resultados realmente interesantes, como la librería FPDF o un par de blogs como desarrolloweb y webtaller.

Esta sensación se confirma con otras búsquedas realizadas y, además, en algunos casos se nota diferencia de velocidad de carga de los frames a favor de Google. Por lo tanto, mi veredicto está claro: me sigo quedando con Google. ¿Y vosotros?





No más alerts para depurar javascript

3 09 2009

Aun sigo programando el CMS, como ya comenté. Resulta que debido al uso intensivo de jQuery que hago y, por tanto, de javascript, me veía obligado a meter alerts en el código cuando no era capaz de encontrar los fallos con Firebug.

Ya harto de los alerts, me puse a buscar una alternativa y encontré esto:

Backbird

Se trata de una ventana flotante que se sitúa encima de la página y que sirve para mostrar mensajes, organizados en cuatro categorías: mensajes de debug, de información, avisos (warnings) y errores.

Una vez descargado el fichero ZIP de Blackbird, lo primero es incluir el js y el css en tu página:

<script type="text/javascript" src="blackbird.js"></script>
<link type="text/css" rel="Stylesheet" href="blackbird.css" />

De esta forma, pulsando F2 te aparecerá una ventanita con el siguiente aspecto:

Blackbird

Después, para hacer que aparezcan mensajes en ella, disponemos de las siguientes funciones javascript:

log.debug("Esto es un mensaje de depuración");
log.info("Esto es un mensaje de información");
log.warn("Esto es un aviso");
log.error("Y esto es un error");

Sencillo, pero muy útil y elegante… Y, por supuesto, gratuito…





Método etíope de multiplicación

30 08 2009

Resulta que en Etiopía está prohibido multiplicar números mayores que dos, según he leído en alguna página. No sé si creermelo o no, pero lo cierto es que existe un método para multiplicar números de forma rápida y usando solamente multiplicaciones y divisiones por 2, además de sumas.

Imaginemos que queremos multiplicar 19 por 12. Estos serían los pasos:

Ponemos ambos números como cabeceras de dos columnas. En la primera columna dividimos el número entre 2 sucesivamente (redondeando hacia abajo si es necesario) y en la segunda vamos multiplicando por dos. Hacemos esto hasta llegar a uno en la primera columna:

19 12
9 24
4 48
2 96
1 192

Ahora, tachamos en la derecha los números que a la izquierda tienen un número par.

19 12
9 24
4 48
2 96
1 192

Y finalmente sumamos todos los números que han quedado a la derecha, incluido el primero: 12 + 24 + 192 = 228. Sí, es verdad, 19 x 12 = 228.

Interesante, ¿verdad?

En esta página está la explicación completa del método etíope de multiplicación.





Cómo averiguar la clave NDAS de un disco duro externo

30 08 2009

Recientemente mi hermano me ha prestado su disco duro externo multimedia con conexión de red. Se trata de Freecom Network Mediaplayer. Lo he instalado conectado a la televisión y al router que está justo al lado. Todo perfecto hasta aquí. Pero para pasarle los ficheros que descargo con el ordenador fijo, necesitaba usar la red (el USB no me valía, pues tendría que mover el disco duro).

Aquí es donde entran en juego los drivers NDAS que facilitan conectar el disco duro como una unidad de red más en el equipo, permitiendo copiar archivos con el explorador de Windows como si el disco estuviese conectado físicamente al equipo.

Me descargué los drivers desde la página de Ximeta, pero al instalarlos, ¡me pide el ID del dispositivo y la Write Key!.

NDAS Device Registration Wizard

Después de mucho buscar por foros, resulta que esos datos deberían venir en una etiqueta en la caja original del disco duro. Como no vienen, sigo buscando y encuentro en la web de soporte de Freecom una dirección de correo donde puede solicitar esos datos.

Sigo todos los pasos y lo típico: pasados varios días y repetido el mensaje varias veces en inglés y español, nadie contesta.

Así que me lanzo a averiguarlo por mi cuenta. Y aquí está la solución: en una página de otro disco duro similar, encuentro una programa llamado NDAS scan, que hace justo lo que necesito. Escanea la red en busca de dispositivos con soporte NDAS y muestra su ID y Write Key. Sigo las instrucciones y listo, ya tengo mi disco duro multimedia funcionando a las mil maravillas.

Espero que esto le sirva a alguien que se encuentre con el mismo problema.

http://www.benf.org/other/rapsody/index.html (en inglés)





Ilusiones ópticas

26 08 2009

Efecto óptico LifeEn la imagen de la izquierda puedes ver la palabra LIFE escrita con las letras inclinadas hacia los lados. ¿O no? Pues no, están perfectamente rectas.

Por casualidad he descubierto la página de Illusion Sciences (en inglés), que contiene efectos ópticos muy curiosos.

Me ha encantado especialmente  el primero de ellos, llamado “The break of the curveball“. Si se mira la bola de colores en movimiento, se ve perfectamente que se mueve en vertical. Sin embargo, si fijamos la vista en el punto azul, el movimiento de la bola anterior es en diagonal. ¡Impresionante!

http://www.illusionsciences.com/