Pero claro, ¿qué pasa si los datos ya los tenemos cacheados y tenemos que procesarlos? Lo que ocurre por lo general es que se nos bloquea la interfaz de usuario y mientras se procesan el navegador o el dispositivo móvil se queda sin responder.

Una solución sencilla a este problema es provocar una llamada asincrona de la función que procesa los datos. Para ello podemos utilizar la función de setTimeout de javascript de la siguiente manera:

setTimeout(function() {
    procesadoDeDatos();
}, 100);

Con esto conseguimos que la ejecución de la función procesadoDeDatos se haga de manera asincrona y no se bloquee la interfaz esperan a que acabe el procesado.

Así podemos poner el típico mensaje de procesando, para que el usuario sepa que se está procesando su petición y éste a su vez si quiere puede seguir interactuando con la interfaz mientras espera que se le devuelvan los datos.

Después de mucha investigación y muchas pruebas, he dado con dos soluciones: una para cuando el número de imágenes a almacenar no es muy grande (este no es mi caso) y otra que de momento promete guardar todas la imágenes que quiera.

LocalStorage, Web DB SQL y Canvas

La primera solución consiste en utilizar una combinación de localStorage y Web DB SQL para almacenar las imágenes y Canvas para obtener la versión base64 de la misma.

Lo primero que necesitamos por tanto es una función a la que le pasamos una URL de una imagen y nos devuelve una representación en base64 de la misma:

function getImgBase64(imagen, callback) {
    var img = document.createElement('img'),
        canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');
    img.src = imagen;

    img.addEventListener('load', function() {
        canvas.width = this.width;
        canvas.height = this.height;
        ctx.drawImage(this, 0, 0);
        callback(canvas.toDataURL('image'));
    }, false);
}

Ahora que tenemos la representación de la imagen en base64 necesitamos almacenarla de manera persistente, para ello tenemos localStorage y Web DB SQL. Toca enfrentarse a los límites de tamaño, localStorage permite almacenar 5M y Web DB SQL permite 50M que los puedes repartir en unos 10 BBDD de 5M sin tener que preguntar al usuario si quiere permitir crear una BBDD de tamaño mayor. Cuando estos límites se alcanzan se deja de guardar información.

Si tenemos claro que las imágenes que queremos guardar van a ocupar menos de 5M usaremos localStorage, si es mayor que 5M e inferior a 50M usaremos una combinación de ambas, para minimizar el acceso al Web DB SQL ya que a parte de ser asincrono tiene un retardo, menor que si accediéramos a Internet, pero un retardo que puede quitar fluidez a la aplicación.

La función que almacena en el localStorage sería la siguiente:

function setImg(ref, img) {
    getImgBase64(img, function(base64) {
        var imagenes = localStorage.imagenes && JSON.parse(localStorage.imagenes) || [];
        imagenes[ref] = base64;
        localStorage.imagenes = JSON.stringify(imagenes);
    });
}

Para obtener la imagen del localStorage:

function getImg(ref) {
     var imagenes = localStorage.imagenes && JSON.parse(localStorage.imagenes) || [];
     return imagenes[ref] || '';
}

La función completa que se encarga de hacer una pre-carga de las imágenes quedaría de la siguiente manera:

function preLoadImg(ref, img) {
   var imagen = new Image(),
       data = getImg(ref);

   imagen.addEventListener('load', function() {
        // Acciones una vez que tenemos cargada la imagen.
   }, false);

   if (data === '') {
      imagen.src = img;
      setImg(ref, img);
   }
   else {
      imagen.src = data;
   }
}

Para la versión mixta entre localStorage y Web DB SQL, lo que vamos a hacer es almacenar las referencias y estado en localStorage y la imagen codificada en base64 en el Web DB SQL.

Primero vamos a definir qué es lo que guardamos en el localStorage: las referencias a las imágenes que tenemos guardas en Web DB SQL y el número y el tamaño que llevamos en la BBDD actual.

Al empezar, las referencias serán un array vacío y el número y el tamaño serán 0.

Para inicializar la variables y crear la BBDD haremos una función de inicialización:

var DB = [];

function init() {
    var referencias = localStorage.referencias && JSON.parse(localStorage.referencias) || [],
        actual = localStorage.actual && JSON.parse(localStorage.actual) || {n: 0, t:0},
        DBI;

    for (var i = 0; i <= actual.n; i+=1) {
         DBI = openDatabase('Imagenes_' + i, '1.0', 'Imagenes ' + i, 4.9 * 1024 * 1024);
         DBI.transaction(function(t) {
                t.executeSql('CREATE TABLE IF NOT EXISTS Imagenes(ref TEXT NOT NULL, img TEXT NOT NULL, PRIMARY KEY(ref))', []);
            });

         DB.push(DBI);
    }

}

En la función de inicialización, la primera vez que se inicia se crea la BBDD Imagenes_0 y las demás veces se abren las BBDD que llevemos usadas hasta el momento.

La función que guarda una imagen en BBDD es algo más complicada que su versión únicamente con localStorage ya que tenemos que tener en cuenta el tamaño que llevamos en la BBDD actual y la creación de una nueva BBDD en caso de que sea necesario.

Como podemos ver defino una variable global DB donde voy a ir almacenando las conexiones a las distintas BBDD.

function setImgDB(ref, img) {
    getImgBase64(img, function(base64) {
        var actual = localStorage.actual && JSON.parse(localStorage.actual) || {n: 0; t: 0},
            referencias = localStorage.referencias && JSON.parse(localStorage.referencias) || [];

        if (actual.t >= 1810000) {

            actual.n += 1;
            actual.t = base64.length;

            referencias[ref] = actual.n;

            localStorage.actual = JSON.stringify(actual);
            localStorage.referencias = JSON.stringify(refrencias);

            DBI = openDatabase('Imagenes_' + actual.n , '1.0', 'Imagenes ' + actual.n, 4.9 * 1024 * 1024);
            DBI.transaction(function(t) {
                    t.executeSql('CREATE TABLE IF NOT EXISTS Imagenes(ref TEXT NOT NULL, img TEXT NOT NULL, PRIMARY KEY(ref))', [], function(t, r) {
                            t.executeSql('REPLACE INTO Imagenes(ref, img) VALUES(?, ?)', [ref, base64], function(t, r) {
                                console.log('Insertamos la imagen: ' + ref + ' en BBDD ' + actual.n);
                            });
                    });
                });

            DB.push(DBI);
        }
        else {

            actual.t += base64.length;

            referencias[ref] = actual.n;

            localStorage.actual = JSON.stringify(actual);
            localStorage.referencias = JSON.stringify(refrencias);

            DB[actual.n].transaction(function(t) {
                    t.executeSql('REPLACE INTO Imagenes(ref, img) VALUES(?, ?)', [ref, base64], function(t, r) {
                        console.log('Insertamos la imagen: ' + ref + ' en BBDD ' + actual.n);
                    });
                });

        }
    });
}

El número 1810000 es el tamaño máximo aproximado de imágenes que se pueden almacenar, es un tamaño totalmente empirico y que se podría afinar un poco más.

Ahora necesitamos la función para obtener una imagen de la BBDD:

function getImgDB(ref, callback) {
     var referencias = localStorage.referencias && JSON.parse(localStorage.referencias) || [],
         n = referencias[ref] || -1;

     if (n !== -1) {
         DB[n].transaction(function(t) {
                    t.executeSql('SELECT img FROM Imagenes WHERE ref = ?', [ref], function(t, r) {
                        if (r.rows.length > 0) {
                            callback(r.rows.item(0).img);
                        }
                        else {
                           callback('');
                        }
                    });
                });
     }
     else {
         callback('');
     }
}

Y ahora la función de pre-carga de imágenes:

function preLoadImg(ref, img) {
   var imagen = new Image();

   getImgDB(ref, function(data) {
       if (data === '') {
           imagen.src = img;
           setImgDB(ref, img);
       }
       else {
          imagen.src = data;
       }
    });

   imagen.addEventListener('load', function() {
        // Acciones una vez que tenemos cargada la imagen.
   }, false);
}

Como he dicho antes, estás dos soluciones son para un número pequeño y controlado de imágenes.

En el siguiente apartado veremos cómo hacerlo cuando no sabemos el número de imágenes a cachear.

API de Phonegap

En está solución necesitamos acceder al dispositivo, por lo tanto necesitamos una API que nos proporcione acceso al mismo, en este caso yo he escogido Phonegap. A parte de la API de Phonegap, necesitamos un Plugin que nos permite descargar ficheros a nuestro dispositivo.

No voy a meterme en cómo se instala el Phonegap ni el plugin, voy a suponer que ya está todo hecho y vamos directamente al código.

Primero una función de inicialización, necesaria para usar las API's de Phonegap

var fileSystem = {};

function init() {
    document.addEventListener("deviceready", function() {
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {
            fileSystem = fs;
        },
        function() {
            console.log('Error de inicialización');
        });
    }, false);
}

Ahora la función para almacenar una imagen en el dispositivo:

function setImgFile(ref, img) {
    var ext = img.split('.')[3],
        fullPath = fileSystem.root.fullPath + '/',
        prev = 'file://' + fullPath + ref + '.' + ext,
        image = new Image();

   image.addEventListener('error', function() {
       var downloader = new Downloader();

        downloader.downloadFile(
            img,
            fullPath,
            ref + '.' + ext,
            function(file) {
                console.log(file);
            },
            function() {
                console.log('Error al subir la imagen');
        });
   }, false);

   image.src = prev;
}

Para la función anterior, suponemos que la imagen está ya en nuestro dispositivo, y por tanto le asignamos el path que suponemos que tiene, en caso de error es cuando nos la bajamos al dispositivo, con esto hacemos que sea más rápida la búsqueda de una imagen y no tenemos que acceder al sistema de archivos que es mucho más lento.

Con esta solución no nos hace falta una función para obtener la imagen ya que las imagenes se guardan en el dispositivo en una ubicación conocida, por tanto vamos con la función de pre-carga de imagenes que usará el mismo principio de suponer que la imagen ya está en nuestro dispositivo antes de pedirla a Internet.

function preLoadImg(ref, img) {
    var ext = img.split('.')[3],
        fullPath = fileSystem.root.fullPath + '/',
        prev = 'file://' + fullPath + ref + '.' + ext,
        image = new Image();

    image.addEventListener('load', function() {
        // Acciones una vez que tenemos cargada la imagen.
    }, false);

   image.addEventListener('error', function() {
       this.src = img;
   }, false);

   image.src = prev;
}

Conclusión

Está claro que cuanto menos ancho de banda consuma una aplicación y cuanto más rápida sea en mostrar el contenido al usuario, éste se va a sentir más satisfecho y valorará mejor nuestra aplicación, por tanto debemos de ser cautos a la hora de cachear de manera que no se vea afectado el rendimiento de la aplicación por el acceso y la actualización de la misma.

Quiero destacar que las dos primeras soluciones son perfectamente válidas para una aplicación WEB, la segunda al depender del dispositivo solo servirá para dispositivos móviles, en este caso iPad y iPhone.

Referencias

http://stackoverflow.com/questions/934012/get-image-data-in-javascript
http://docs.phonegap.com/en/1.2.0/phonegap_file_file.md.html#File
https://github.com/aflx/pg_downloader_plugin_ios

Al principio todo iba de maravilla, el framework apenas pesa 5K y te ofrece la mayor parte de la funcionalidad de jQuery, framework al que estoy acostumbrado a usar.

Al terminar la primera iteración del desarrollo me pongo a hacer pruebas de rendimiento y compruebo que tarda muchísimo en hacer una llamada AJAX para obtener un JSON con datos para pintar la interfaz.

Al principio pienso que es mi código y que necesita más optimizaciones, reduzco al máximo el código y aún así veo un retraso de unos 7 u 8 segundos en el proceso de la petición.

Tengo que decir que antes de decantarme por Zepto hice una primera versión usando jQuery y el problema lo tenía en el renderizado de la interfaz y no en la llamada AJAX. Así que vuelvo a poner jQuery como framework de la aplicación y como la sintaxis entre ambos frameworks es compatible, veo que sí es cierto que realiza más acciones, que probablemente podré optimizar más adelante, lo que es la llamada AJAX se hace de manera fluida y sin el retardo de 7 segundos.

Analizado el código de ambos frameworks veo que en Zepto se hace un eval cuando el resultado es de una llamada AJAX es un JSON y por tanto es ahí donde se pierde el tiempo y hace que la aplicación se quede momentaneamente congelada.

La moraleja de esta historia es que aunque un framework pese poco y esté especificamente diseñado para un tipo de navegadores, en este caso Webkit, no tiene por qué ser más eficiente a la hora de realizar ciertas acciones y por tanto a la hora de elegirlo habrá que ver que tipo de llamadas hay que hacer y si nos merece la pena usarlo o no.

En defensa de Zepto puedo decir que está en fase beta y que me imagino que irán mejorando con el tiempo, pero por ahora, para una aplicación como la mía que requiere de procesado de JSON en las llamadas AJAX no es válida y tendré que seguir usando jQuery aunque sea más pesada y no sea especifica para Webkit.

Con SL4A uso HTML como interfaz gráfica de la aplicación y por tanto tengo que usar javascript para meter la publicidad, como si de una aplicación web se tratase.

El banner se muestra correctamente y lo puedo colocar donde quiera, el problema viene a la hora de pinchar en la publicidad, ya que al ser un webview me abre la publicidad en la propia ventana de la aplicación perdiendo toda la interfaz de la misma y quedandome sin acceso a ella.

Después de varías pruebas y un poco de ingeniería inversa sobre el javascript de Admob he descubierto la solución para que la publicidad se abra en una ventana del navegador y no en la interfaz de mi aplicación.

Primero configuramos Admob para lanzarlo nosotros de manera manual:

var admob_vars = {
 pubid: '2121324214214', // publisher id
 bgcolor: '000000', // background color (hex)
 text: 'FFFFFF', // font-color (hex)
 manual_mode: true,
 test: false// test mode, set to false to receive live ads
};

Después pedimos la publicidad:

var ad = _admob.fetchAd(document.getElementById('admob_ad'));

Y por último redefinimos la función gotourl:

_admob.gotourl = function() {
    var droid = new Android();
    droid.view(arguments[0]);
};

Con el código anterior conseguimos que la acción por defecto a la hora de pinchar en el banner sea la de abrir la URL con el navegador y no la de cargar la URL en la página actual, que en nuestro caso es la interfaz gráfica.

• Comprarme casa
• Montar una wiiparty en mi nueva casa
• Primera Gipuzkoa Encounter
• Tercera Euskal Encounter
• Leer 11 libros
• Correr en una carrera de 11,8 Km
• Ver como mi macmini G4 se rompía y comprar un macmini Intel
• Hacer algo más de deporte gracias a mi Wiifit.
• Mi primer Ipod 
• Comprar dos HD externos más
• No salir de Bilbao ni en vacaciones
• Aumentar el número de salidas “extralaborales” con gente del curro.
• Recibir regalos para mi casa
• Seguir yendo todos los lunes al cine
• Reducir gastos de donde podía.

1. Que alguien te pida ayuda y consigas ayudarle
2. Ir al cine todas las semanas
3. Tumbarme y ver un capítulo de una buena serie
4. Leer un libro que me inspire
5. Tener una buena idea
6. Correr cuando estoy en forma y no me canso

He cogido un theme sencillito que como siempre iré modificando poco a poco para que quede a mi gusto.

Para hacer la migración me he tenido que hacer un script en PHP ya que la versión del b2evolution que tenía era tan antigua que no he encontrado ningún script en Internet que me hiciera el trabajo, ha sido bastante sencillo ya que solo he tenido que hacer un par de selects.

Actualización: A petición popular aquí está el script que he utilizado impphp

Por lo demás no soy de gastar nada entre semana, de hecho suelo ir con la cartera vacía, si no tienes, no te entrará la tentación de gastar y si hay una emergencia siempre está MasterCard.

La manera que tengo de gastar menos es apuntar todo lo que gasto de manera que lo pueda ver y si he hecho una compra imprudente lo estaré viendo siempre que abra la hoja de gastos, también hace que te de pereza apuntarlo y por lo tanto no lo gastas.

En cuanto a la ropa, solo me compro cuando tengo necesidad y de momento no la tengo. Cuando me quiero comprar algún capricho busco el más barato, por ejemplo, hace poco se me antojó un pulsometro para medir las pulsaciones cuando salgo a correr y vi que eran un poco caros, entre 100 y 200 euros, así  que me fui a Decathlon y me compre uno de oferta por 19,90 euros.

En cuanto al ocio, las Euskal dan mucho de si y todavíaa tengo material sin visionar desde hace dos, por lo que para las tardes aburridas ya tengo entretenimiento gratis. Cuando salgo los fines de semana procuro ir a sitios donde no cobren entrada y como mucho dos consumiciones, más no.

Y lo de independizarse que comenta badcrc, me da que todavíaa no, hay que esperar a no gastar más de lo que gano para poder hacerlo.

Hoy he ido con mi padre a montarla y al desembalar el primer bulto hemos visto que una de las puertas del mueble tenían un rayón. Como eran dos bultos no sabíamos si había que llevar los dos, que pesan como dos muertos, o solo el que estaba mal, así que he decido llamar al servicio de atención al cliente para preguntar. Por supuesto era un 902 y después de estar 8 minutos con música en espera, he decidido que me salía más barato el combustible para ir de nuevo al IKEA que la llamada al 902.

Cuando he llegado al IKEA he tenido que esperar la cola para cambios y devoluciones y cuando me a tocado el turno me lo han cambiado por uno nuevo, es decir, dos nuevos bultos que volvían a pesar como dos muertos, y me los he llevado a casa.

Como no nos fiábamos de que no estuviese rayado, hemos decido abrir de nuevo los bultos al llegar a casa, ya que montar ya no nos iba a dar tiempo. Y cual ha sido nuestra sorpresa al ver que nos han dado dos bultos exactamente iguales, como ya teníamos desembalado y comprobado uno de ellos, hemos decidido llevar solo el bulto que estaba repetido, para ahorrar esfuerzos.

Al llegar al IKEA e ir a la zona donde sale la mercancía para decirles que se había equivocado, la chica muy “atenta” nos ha dicho que estaba segurísima de que nos había dado bien los bultos, a lo cual le he respondido yo, que si eso era cierto, para qué quiero yo dos partes iguales del mismo mueble. Aún así me ha dicho que tengo que ponerme a la cola de nuevo en las devoluciones ya que como el bulto está abierto no lo puede meter en el almacén.

Me pongo otra vez a la cola, y cuando por fin me toca, me dice la otra señorita que no hay ningún problema y que ella misma me lo cambia y me saca el bulto que me falta.

Cuando me lo saca, me saca una caja que está golpeada, la miro un poco extrañado y me dice, uy tiene un golpe, se agacha y comprueba que es golpe ha dañado la mercancía y me comenta que me saca otra nueva. Al rato vuelve a salir con otro bulto, el cual tiene también un golpe en otro sito, me vuelvo a quedar con cara de tonto y me dice que no hay ningún problema que solo tiene golpeada la protección de la mercancía y que el genero está bien. Como ya estoy hasta las narices compruebo yo mismo lo que dice y que el contenido está bien y me lo llevo para casa.

Cuando llego abro todo y veo que esta vez está todo, mañana tocará el montaje lo cual puede ser otra odisea, pero espero que sin menos viajecitos.

La verdad es que no quiero dejar mal a IKEA, pero la forma en la que está embalado el mueble que he comprado yo hace que al más mínimo golpe este se raye y llegue al cliente en pésimas condiciones como me ha pasado a mi.

• 2006: 6,96 €
• 2007: 6,51 €
• 2008: 5,92 €

No se si es por la crisis o es que la tendencia es a que cada vez valgan menos, pero mi consejo es que si tienes un dominio, es mejor pagarlo año a año que renovarlo durante un periodo muy largo.