La idea fue sopesada duramente muchas horas y al final ha sido una gran decision entre mi peke y mia de pillar el iPod.

Duro 2 horas en ser "Vitaminado". No pondre el proceso (un enlace sobra) ya que es tan ridiculamente sencillo que ni siquiera deberia ser llamado hack. Y despues de esto empece a entender muchas cosas.

Tampoco quiero ser un comercial de apple, pero en mi opinion este cacharrin puede revolucionar un mercado inundado de Blackberrys, PDA’s ultra caras, con poco bateria y con precios imposibles cuando tiene wifi, en fin, un mercado bastante pobre, ya que han enfocado el dispositivo a un dispositivo multimedia, potenciandolo a la maxima potencia.

Videos, MP3’s y navegacion web sin complicaciones, sin saber de nada, sin conocer como ni que version de Windows mobile tengo, o si tengo PALM, si la web esta optimizada o no para ver en PDA, compatibilidad con toda la web, me muevo por el dispositivo como si lo utilizase 2 años a diario y solo lo tengo 2 dias, pero es que mi peke lo hace igual, es tan intuitivo que no necesita instrucciones.

Otro punto a tener muy en cuenta es el wifi. Nunca habia tenido en mis manos un dispositivo wifi de este tamaño, y pensaba que seria algo que "todavia" no iba a poder usar con toda la libertad que desease, pero estaba equivocado otra vez.

Cada vez mas redes wifi’s particulares nos imbaden y gracias a que la gente no sabe, estan disponibles para todo el mundo.

Aqui es donde me di cuenta del potencial de mi nueva empresa, Neomedia.

No quiero escribir ideas o potenciales negocios a explotar, porque no iba el tema sobre esto, pero simplemente incredible.

El tema que mas me interesa es Poll, el nuevo SDK anunciado para estos dispositivos. Ayudara al impulso de estos dispositivos, y podrá crear una cantidad de aplicaciones para los cacharrines de Apple que los convertira en autenticos PDA’s. Reproductores flash’s , maquinas java, emuladores de distintos sistemas (PDA, Window’s Mobile, …), todo un SDK seguramente bastante sencillo de usar.

Pero todo esto tiene un pero, y es que nos alejamos cada vez mas a un canon, un estandar para los dispositivos moviles que ayudase a integrar todos con todos y un mundo maravilloso sin movidas propietarias, sin necesidad de "vitaminar" cada cacharrin para que pueda funcionar con otro cacharrin, etc …

Es una putada ya que parece que o funcionas con J2ME, o funcionas con Symbian, o funcionas (o lo intentas) con .net  o funcionas con … en fin, que nada vale para nada, que una cosa no va bien con esto, que mi coche es Seat y no deja funcionar a los Nokia, que si mi coche es Mercedes solo funciona con Nokia … en fin, espero que algun dia todo esto se estandarice y podamos trabajar con una capa intermedia, tambien llamada framework, que nos deje trabajar sobre cualquier sistema, con la misma aplicacion, … bueno eso ya esta mas que inventado, todos conocemos J2EE y la plataforma .Net con su CLS, pero ahora sobre dispositivos mobiles.

Como conclusion decir que este cacharrito me a abierto los ojos con respecto a este mercado, y tal vez al ser un usuario pueda ayudarme en mi nuevo trabajo.

Tenemos una pedazo libreria Lightbox2 con la cual podemos realizar pequeños catalogos de imagenes muy muy resultones, con efectos de carga, y navegabilidad muy buena.

Resulta que tenemos toda una carpeta de imagenes de wallpapers (por ejemplo) y queremos mostrarlas con esta libreria. Segun la web de la libreria es tan sencillo como esto:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Bien, sencillo y practico.

Problema: Resulta que tengo unas 50, 100, 200 imagenes en el directorio, y picar esto en html es de monos, y no tengo cara de mono. Asi que le damos un poco al coco.

Despues de pegarme cabezados con varias cosas que no funcionaban, me di cuenta que para funcionar habria que modificar el DOM y PREMIO.

¿Como se hace eso?
Iba a explicar que es el DOM, pero para eso esta la wikipedia, que es mas lista que yo.

Yo use scriptaculous, otra libreria muy usada y bastante recomendable para hacer cosas 2.0 o mas, Builder es una funcion que modifica el DOM que nos viene a pedir de boca.

Como usamos esto para crear nuestra galeria.
Una funcioncita que vaya obteniendo los nombres de los ficheros, con un array, desde un XML, navegando por el directorio, … eso es a gusto del consumidor y lo importante seria esto:

for(i = 0; i < numImgEst; i++)
{

    /* creamos el nodo a insertar el tipo enlace ,a */
    element = Builder.node( ‘a’, {id:’oculto’, href:enlace, rel:vrel });

    /* lo encolamos al div que queremos que pertenezca */
    $(’botonizquierda’).appendChild(element)
}

Donde el id:oculto pertenece al css que no lo muestra

#botonizquierda a#oculto { display:none; }

enlace es la imagen y vrel seria el catalogo ligthbox al que pertenece

vrel = "lightbox[wallpapers]";

Con esto y un bizcocho … galeria que deja la boca-abierta sin despeinarnos. 

He tenido la suerte de utilizar unas cuantas de estas librerias para crear movimiento de div’s de nuestra web, modificar el contenido del DOM de forma dinamica (otra cosa que contar), crear catalogos de imagenes muy resultones y conseguir mostrar el circulito de carga mientras se terminar de carga una web.

Simplemente explicare ahora como consegui este efecto sin tener que despeinarme mucho y os pondre un pequeño ejemplo.

La libreria que use fue Protoload que necesita del framework Prototype que para hacer web 2.0 es casi indispensable.

El uso de esta libreria es tan sencillo que se resume en dos funciones:

• $(’nuestrodiv’).startWaiting(’ruedaCarga’);
• $(’nuestrodiv’).stopWaiting();

La primera parte $(’nuestrodiv’) es el div de nuestra web sobre el que se va aplicar la rueda de carga, el uso de $(’div’) es por la libreria Prototype y aqui puedes ver como se puede usar este $, muy recomendable conocerlo y saber usarlo.

Sobre este div aparecera la rueda de carga hasta que se llame a la funcion stopWaiting(). Sencillo.

Ahora, que si queremos usarlo para la web entera tenemos un pequeño problema, imaginar que tenemos 4 imagenes en nuestra web que son las que mas cuesta cargar y deseamos que hasta que termine la carga de estas imagenes no queremos que desaparezca esta rueda, usease, hasta que la web no este cargada completamente la rueda no se vaya (que soy de pueblo !!!).

A esto lo llaman: Ajax scenario.

Bien, primero lo haremos sobre una  sola imagen para ver como funciona.

function cargaRuedaImg(){
    var R = new XMLHttpRequest();
   
    R.onreadystatechange = function() {
      if (R.readyState == 4) {
        $(div).stopWaiting();
      }
    };
   
    R.open(’GET’, ‘imagenpesada.jpg’, true) ;
    $(div).startWaiting(’ruedaCarga’);
   
    R.send(null);       
}

Invocamos a esta funcion en el onLoad de nuestro <body> y tenemos la rueda lista para funcionar sobre el div hasta que la rueda se cargue.

Que pasa si la parametrizamos la funcion con  function cargaRuedaImg(div, img) ¿? Que tenemos una funcion generica para cada una de las imagenes, poniendo donde queremos que se cargue la rueda, ahora imaginaros que creamos otra funcion que reciba por parametro un arry con div’s e imagenes, o incluso que miremos la libreria Prototype para que obtenga todas las  imagenes del DOM.

En fin, esto solo es una base que puede dar buenos resultados, si acabais usandolo muy a menudo tal vez merezca la pena invertir el tiempo necesario para convertirse en algo resulton y facil de insertar en cualquier web.

Un detalle es que cuando descargueis la libreria, vereis que tiene un css con las ruedas por defecto de la libreria, si no quereis incluir otro css mas a vuestro proyecto añadis la linea de la rueda a vuestro css y todo a funcionar.

Os dejo un ejemplillo por si es de utilidad a alguien.

<html>
    <head>
        <title>Ejemplo Protoload</title>
        <script src="lib/scriptaculous/prototype.js" type="text/javascript"></script>
        <script src="lib/protoload/protoload.js" type="text/javascript"></script>
       
        <style type="text/css">
            .ruedaCarga {
                background-image:url(’lib/protoload/ajax-loader.gif’);
                background-repeat:no-repeat;
                background-position:center center;
                background-color:white;
            } 
        </style>
        <script>
                function cargaRuedaImg(img, div){
                    var R = new XMLHttpRequest();
                   
                    R.onreadystatechange = function() {
                      if (R.readyState == 4) {
                        $(div).stopWaiting();
                      }
                    };
                   
                    R.open(’GET’, img, true)
                    $(div).startWaiting(’ruedaCarga’);
                   
                    R.send(null);       
                }
        </script>
    </head>
    <body onload="javascript:cargaRuedaImg(’ejemplo.jpg’, ‘contenedor’);">
        <div id="contenedor">
            <img src="ejemplo.jpg">
        </div>
    </body>
</hmtl>

Puesto que el cambio de trabajo espero que me cargue las pilas como las tenia antes, con las mismas o mas ganas, he decidio crear un blog nuevo como si fuese un lab, no un tipico blog personal.

Para esto escribire unas cuantas normas que me gustaria cumplire con respecto al contenido del blog:

• No Copy&Paste sin más. Procurar opinar, comentar o tal vez incluso explicar si me hizo falta noticas que vea y quiera comentar aqui.
• Referencias, usarlas.
• No es un blog personal, no hay historias mias, ni de mi gata ni de mi vida. Es tecnologico.
• Desarrollar ideas, plasmarlas y explicarlas. La maxima que deberia seguir antes de publicar algo aqui.
• No es para nadie en particular, aunque este expuesto al todos los publicos, es un blog donde desarrollare mis ideas, paranoias o cosas curiosas que encuentre.

Espero que no tener que borrar esto.

Saludos.