Daniel Mota / IceBeat

Mi vida en formato CSS3

Estás en la bitácora de IceBeat, una página sobre diseño y desarrollo web.

node.js

Correr Javascript en el servidor de una forma simple y rápida ya es posible con NodeJS, en serio, en una tarde ya puedes tener corriendo tu propio servidor, la curva es tan rápida que solo necesitas saber javascript.

Para tenerlo funcionando en Mac te recomiendo brew, gestiona de vicio y mantiene actualizado todos los paquetes, puedes instalar node y npm, el gestor de paquetes para node.

Lo quieres tener online? no problem, con nodester.com y no.de puedes conseguir hosting gratuito y de buena calidad. Y si necesitas base de datos NoSQL es tu solución: couchone.com y mongohq.com.

Para iniciarte en Node te recomiendo leer el wiki y la documentación, al principio es difícil diferenciar las funciones en los ejemplos, require es un dolor de cabeza.

Y para terminar dos proyectos que sigo en github que merecen mucho la pena.


Sincronizar Subtítulos .srt

Algunas veces no sé porque pero la función del VLC para manipular los segundos de los subtítulos no funciona correctamente, suele ocurrir cuando no están bien sincronizados. La mejor forma es bajarte un programita y alterar la linea de tiempo. No entiendo la razón pero no he encontrado ninguna aplicación web que lo haga así que me he creado una clase en PHP para manipular los archivos .srt

<?php

class Subtitle {

    function Subtitle($srt) {
        $this->name = $srt;
        $this->file = @file_get_contents($srt);
    }

    function time($time=0) {
        $this->time = $time;
        $this->file = preg_replace('!([0-9:]{8}),([0-9]{3}) --> ([0-9:]{8}),([0-9]{3})!e',
                    '$this->sync("\1").",\2 --> ".$this->sync("\3").",\4"', $this->file);
    }

    function sync($time) {
        $time = strtotime($time);
        $time = $time+$this->time;
        return date('H:i:s', $time);
    }

    function save($name='') {
        if($name) $this->name = $name;
        $fp = @fopen($this->name, 'w');
        if(!$fp) return false;
        fwrite($fp, $this->file);
        fclose($fp);
        return true;
    }

}
?>

Su uso es muy fácil, solo tienes que pasar la ruta del archivo e indicar cuantos segundos quieres añadir o quitar, si quieres quitar solo tienes que poner el valor en negativo.

$subs = new Subtitle('subs.srt');
//añadir 5 segundos, quitar -5
$subs->time(5);
//si no le pasas un nuevo nombre reemplaza el archivo
$subs->save();

Lo único que hace es manipular los segundos, consiguiendo que puedas ir sincronizando poco a poco aquellos subtítulos que por cualquier razón no coinciden con el archivo de video bajado.


display:none no intrusivo

Hay varias formas de ocultar información, cuando la cantidad es grande se suelen utilizar métodos como los acordeones o las pestañas, que ocultan las capas que no se quieren ver.

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.


Estos días he estado ayudando aun amigo para hacer pagos con PayPal, gracias a este tutorial de Rails hemos podido crear una versión en PHP.

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.


Ordenar por contexto

Hace unos días buscaba alguna aplicación web para tener un cajón desastre, una especie de tumblr para ir recopilando cosas que encuentro. Todo comienza por que andaba leyendo unos artículos de GTD para organizarme un poco mejor y pensando me di cuenta que algunas veces me cuesta horrores encontrar las cosas que guardo, sobre todo enlaces y que no estaría mal seguir un patrón para ordenarlos.

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.

Página 1 de 22 · Mostrar 5 más