La estrella de esta casa es Window.Growl un script que cree hace bastante tiempo y que gracias a Paul (o eso pienso) ha llegado al mundo anglosajón.

Todo comienza con un listado de ejemplos con mootools, el cual llega a mano de webappers.com que provoca que la gente empiece a agregarlo en del.icio.us consiguiendo la portada en un par de horas.

Mucha gente en twitter me felicito y la verdad no me lo creía, pienso que estar en portada es bastante difícil.

Pues bien gracias a esto se multiplicaron por 11 el numero de visitas, una barbaridad para esta bitácora, pero tantas visitas provocan que varios usuarios lo vean y estos a su vez lo publiquen, el caso más reciente hace dos días con noupe.com otra buena bitácora.

Muchas gracias a Andrés que me pego el aviso.

Creo que es algo que tenia que contar y que me ha dado mucha alegría.

Normalmente utilizamos el evento onload para ocultar las capas, dejando un efecto visual de ahora te veo y ahora no te veo.

Para evitar este problema hay varias soluciones, aquí os dejo unas cuantas.

Escribir con document.write un style para ocultar una clase.

   document.writeln('<style type="text/css">.hide { display:none } </style>');

Añadir detrás de las capas el javascript necesario para ocultarlas

   <script type="text/javascript" charset="utf-8">
   $$('.hide').setStyle('display','none');
   </script>

Utilizar el evento domready de algunos frameworks que se dispara una vez cargado el DOM y no la página entera.

    window.addEvent('domready', function() {
$$('.hide').setStyle('display','none');
    });

Hay que decir que si el javascript no esta activado las capas no se ocultaran y estas podrán ser vistas sin ningún problema.

Para generar botones encriptados lo primero que tienes que hacer es crear unos certificados, una vez creados tendrás los datos necesarios para cumplimentar las opciones de la clase.

  $config = array(
        'cert_id' => 'xxx',
        'business' => 'seller_xx@xxx.es',
        'openssl' => '/usr/bin/openssl',
        'my_cert' => 'certificates/my-pubcert.pem',
        'my_key' => 'certificates/my-prvkey.pem',
        'paypal_cert' => 'certificates/paypal_cert.pem'
    );
    //iniciamos la clase
$paypal = new PayPal($config);

Luego hay que pasarles las variables necesarias para encriptar el botón, en la documentación de PayPal encuentras todas las variables.

$form = array(
    'cmd' => '_xclick',
     'item_name' => 't-shirt 13',
     'item_number' => '12',
    'amount' => '4500.00'
);

$encrypted = $paypal->encrypt($form);

Una vez encriptado solo tienes que rellenar los datos del formulario, el action y el campo hidden.

    <form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick"/>
<input type="hidden" name="encrypted" value="<?PHP echo $encrypted; ?>"/>
<input type="submit" value="Buy"/>
</form>

Nos queda la parte del IPN (Instant Payment Notification) para saber si la transacción se ha ejecutado con éxito. Es curioso algunas tiendas envían el botón sin encriptar pero si hacen el IPN.

En la clase incluyo el ejemplo para que lo tengáis todo a mano, recordad que en el tutorial escrito en rails tenéis los pasos previos para crear los certificados.

Descargar class.paypal.php.

No se si os ha pasado alguna vez que habéis guardado un enlace pero luego al intentar buscarlo no os acordabais ni del titulo ni de los tags, solo os acordabais que iba de tal cosa o que contenía tal cosa. Desde mi punto de vista creo que podríamos organizar las cosas partiendo de 3 fases.

Una fase de 3 niveles jerárquicos de organización (categorías y subcategorías), otra impuesta por el usuario (tags) y una ultima obtenida por el archivo.

Partiendo como lo hace tumblr la primera seria organizarlo por el tipo: Texto, Enlace, Archivo, Imagen, Audio y Video, luego iríamos profundizando según su contenido o categoría ( Texto -> Snippet -> php). La ultima fase obteniendo información del archivo, si es un audio el ID3, si es un enlace el titulo de la página.

Un ejemplo incompleto de categorías podría ser este:

• texto
  • Articulo
    • html
    • doc
    • pdf
  • Cita
  • Codigo
  • Password
  • ...
• enlace
• archivo
• imagen
• audio
  • Canción
  • PodCast
• video

El concepto de una aplicación web es sencillo, primero guardar el enlace y luego etiquetarlo o dejarlo en el inbox.

Pongamos un ejemplo: Encuentro un video en youtube que es el ultimo trailer de una película, voy a mi aplicación y guardo el enlace, en el siguiente paso la aplicación me detecta que es un vídeo y me dice que lo etiquete, me muestra un lista para decir si es un película, un trailer o un videoclip, etc. Una vez elegido me aparece otra indicando la categoría (ciencia ficción, terror, humor, etc). Luego encuentras un campo para escribir tus tags personalizados, por si quieres agrupar o buscar fácilmente y por ultimo encuentras varios campos donde la aplicación te ha sacado el titulo, la descripción y la puntuación del video.

Con este sistema pienso que se podría recuperar las cosas fácilmente, ya que se guardaría por contexto. En el ejemplo si no me acordara del titulo por lo menos podría saber que lo guarde como un trailer de ciencia ficción.

Sin duda Window.Growl y Packito son las dos joyas de esta casa y ambas las tengo un poco descuidadas, aun así tengo planes para actualizarlas pero gracias a Paul ya me he ahorrado el 50%.

Por mis refers he encontrado una versión en Prototype, esto quiere decir que hay versiones adaptadas para Mootools, jQuery y Prototype, nada mal.

Tengo que decir que tambien un usuario ha añadido mejoras a class.image y que pronto intentare postearlo.

Cada perfil hacia su parte y cada una de ellas no se tocaban, el diseñador podía hacer una locura que a el le daba igual como se maquetara, lo mismo pasaba con el maquetador, con esos pedazos de churros de códigos.

Ahora vemos que la cosa cambia, el diseñador debe saber un poco de html/css porque debe ser consciente de como se debe maquetar y ciertos aspecto de la web, el maquetador también debe saber programar y utilizar frameworks con vistas y helpers. Y es en este punto donde entramos en el debate, quien se debe de encargar de la programación del cliente (javascript) el maquetador o el programador? en teoría el programador solo le importa recibir y gestionar los datos, ademas de enviarlos, pero no se debe de encargar de como enviarlos o recibirlos. Pongamos un ejemplo: Un carrito, quien debería encargarse de hacer un drag&drop o llamadas ajax? el programador o el maquetador?

Creéis que se necesita un nuevo perfil? alguien que se encargue de esos detalles, y que realice la unión entre maquetación y programación? o debe ser el maquetador quien aprenda esta parte y evolucione?

function ID3($mp3='') {
    //etiquetas ID3
    $ID3 = array(
        'title' => 'TIT2', 
        'artist' => 'TPE1', 
        'album' => 'TALB'
    );
    //miramos si es un archivo mp3
    if(substr($mp3, -3, 3) != 'mp3') return false;
    //abrimos parte del archivo y leemos
    $fp = fopen($mp3, 'r'); 
    $data = fread($fp, 3000); 
    fclose($fp);
    //comprobamos que tiene ID3
    if(substr($data, 0, 3) != 'ID3') return false;
    //parseamos los tags
    foreach($ID3 as $type => $key) {
        //existe el tag?
        if(strpos($data, $key)) {
            //existe entre tags o es el ultimo?
            if(!preg_match('!'.$key.'(.*)[A-Z]{3}[A-Z1-4]{1}!Us', $data, $tag)) $tag = explode($key, $data);
            //algo raro pasa con los caracteres asi que limpiamos
            $info = $tag[1];
            $info = str_replace(' ', '...', $info);
            $info = preg_replace('![^A-Za-z0-9\./\'\(\)]+!','',$info);
            $info = str_replace('...', ' ', $info);
            $ID3[$type] = $info;
        } else {
            //si no lo encontramos lo borramos
            $ID3[$type] = '';
        }
    }
    //devolvemos el nuevo array
    return $ID3;
}

//print_r(ID3('http://algunaweb.com/mp3.mp3'));

La función devuelve el titulo, el artista y el álbum de la canción, en caso de no poder parsear devuelve false. He tenido bastantes problemas dando con la solución para arreglar un poco los textos, asi que es posible que más de una vez te encuentres con 7 o caracteres extraños.

Se hace un poco dificil saber cuando se disparan los eventos y controlarlos, y editar ciertas partes del diseño que cambian cuando pulsas un enlace.

Tienen pensando renovarlo un poco y adaptarlo a las nuevas capacidades que ofrece safari, CSS3, querySelector, animaciones CSS, base de datos.

Asi que para la batalla diaria me he comprado una libretilla, dejando la Moleskine para ideas y proyectos.

La encontré en una tienda de todo a 100, la portada venia de lujo :).