Detectar características HTML5 mediante Javascript

Aunque el HTML5 no está disponible en todos los navegadores, no es mala idea ir incluyendo en nuestras webs aplicaciones que hagan uso de HTML5, e ir dándole un poco de vidilla al asunto y no estar pendientes de Internet Explorer. Por ello, este script nos puede venir muy bien:

function detectBrowserCapabilities(){
  var res = new Array();
  res["userAgent"] = navigator.userAgent;    
  var hasWebWorkers = !!window.Worker;
  res["workersFlag"] = "" + hasWebWorkers;
  var hasGeolocation = !!navigator.geolocation;
  res["geoFlag"] = "" + hasGeolocation;
  if (hasGeolocation) {
    document.styleSheets[0].cssRules[1].style.display = "block";
    navigator.geolocation.getCurrentPosition(function(location) {
      res["geoLat"] = location.coords.latitude;
      res["geoLong"] = location.coords.longitude;
    });
  }
  var hasDb = !!window.openDatabase;
  res["dbFlag"] = "" + hasDb;
  var videoElement = document.createElement("video");
  var hasVideo = !!videoElement["canPlayType"];
  var ogg = false;
  var h264 = false;
  if (hasVideo) {
    ogg = videoElement.canPlayType('video/ogg; codecs="theora, vorbis"') || "no";
    h264 = videoElement.canPlayType('video/mp4; 
    codecs="avc1.42E01E, mp4a.40.2"') || "no";
  }
  res["videoFlag"] = "" + hasVideo;
  if (hasVideo){
    var vStyle = document.styleSheets[0].cssRules[0].style;
    vStyle.display = "block";
  }
  res["h264Flag"] = "" + h264;
  res["oggFlag"] = "" + ogg;
  return res;
}

Build Web applications with HTML 5

Enlaces rápidos (30-03-2010)

Más sobre NoSQL y otras cosillas

Crear PNG directamente desde Javascript

Interesante librería que nos permite crear imágenes PNG directamente desde Javascript, para lo cual codifica la imagen usando el formato PNG y devuelve la cadena en base64. Algo parecido a la creación de documentos PDF.

var p = new PNGlib(200, 200, 256); // construcor takes height, weight and color-depth
var background = p.color(0, 0, 0, 0); // set the background transparent
for (var i = 0, num = 200 / 10; i <= num; i+=.01) {
  var x = i * 10;
  var y = Math.sin(i) * Math.sin(i) * 50 + 50;
  // use a color triad of Microsofts million dolar color
  p.buffer[p.index(Math.floor(x), Math.floor(y - 10))] = p.color(0x00, 0x44, 0xcc);
  p.buffer[p.index(Math.floor(x), Math.floor(y))] = p.color(0xcc, 0x00, 0x44);
  p.buffer[p.index(Math.floor(x), Math.floor(y + 10))] = p.color(0x00, 0xcc, 0x44);
}
for (var i = 0; i < 50; i++) {
  for (var j = 0; j < 50; j++) {
    p.buffer[p.index(i + 90, j + 135)] = p.color(0xcc, 0x00, 0x44);
    p.buffer[p.index(i + 80, j + 120)] = p.color(0x00, 0x44, 0xcc);
    p.buffer[p.index(i + 100, j + 130)] = p.color(0x00, 0xcc, 0x44);
  }
}
document.write('');

Sinceramente, no se me ocurre ninguna utilidad práctica a esta librería, porque puede ser sustituida facilmente por otras alternativas, pero lo que es indudable es que se trata de una gran librería.

Generate client-side PNG files using JavaScript

Vía / DZone

|

Pandra: librería PHP para trabajar con Cassandra

Para aquellos que necesiten Cassandra en sus proyectos o quieran trastear con él, les vendrá muy bien esta librería basada en CRUD. Soporta las estructuras de datos ofrecida por Cassandra y sus tipos de datos:

  • Column: clave-valor y el timestamp
  • Column Family: un array asociativo que contiene columnas, el cual sólo debe tener un clave paterna
  • Super Column: practicamente igual que la Column Family, sin embargo tiene una Super Column Family como padre. Puede haber varias Super Columns para una clave
  • Super Column Family: contenedor de Super Column
  • Key ID: clave única
  • Key Space: nivel más alto, sería el equivalente a la base de datos

Un ejemplo de código sería el siguiente:

class Address extends PandraSuperColumn {
    public function init() {
        $this->addColumn('city', 'string');
        $this->addColumn('street', 'string');
        $this->addColumn('zip', 'int');
    }
}

class Addresses extends PandraSuperColumnFamily {
    public function init() {
        $this->setKeySpace('Keyspace1');
        $this->setName('Super1');
        $this->addSuper(new Address('homeAddress'));
        $this->addSuper(new Address('workAddress'));
    }
}

$keyID = 'kenlogin';

$addrs = new Addresses();
$addrs->setKeyID($keyID);

// home address
$homeAddr = $addrs->getColumn('homeAddress');
$homeAddr->setColumn('city', 'san francisco');
$homeAddr->setColumn('street', '1234 x street');
$homeAddr->setColumn('zip', '94107');

// work address
$workAddr = $addrs->getColumn('workAddress');
$workAddr->setColumn('city', 'san jose');
$workAddr->setColumn('street', '9876 y drive');

// custom labelled supercolumn
$customAddr = new Address(''customAddress');
$customAddr->setColumn('city', 'another city');
$addrs->addSuper($customAddr);

// Saving via Column Family
$addrs->save();

// Saving via Super Column,
$customAddr->setColumn('city', 'another city');
$customAddr->save();

Pandra

Redimensionado óptimo de imágenes con PHP

Redimensionar imágenes con PHP es algo de lo que se ha hablado mucho, y no voy a contar nada nuevo, pero el tutorial que enlazo me parece bastante bueno y sencillo y nos puede ahorrar el crear los métodos nosotros mismos, porque no suele ser tan sencillo como hacer un resize, sino que a veces es necesario ajustar a un tamaño en particular y si son de diferentes aspect ratio pues entonces hay que pensar si dejar espacio neutro en los laterales o arriba/abajo.

Lo único que no me gusta es que para abrir la imagen se fija en la extensión del fichero, cuando puede usarse otro método y así podremos abrir la imagen que sea, por ejemplo desde una URL.

Image Resizing Made Easy with PHP

Instalar Cassandra en Ubuntu

Con tanta noticia de Cassandra y Twitter, me ha dado por instalar Cassandra en local. No soy un experto en Ubuntu, más bien soy un poco torpe en algunas cosas de administración, pero bueno, si yo lo he conseguido ¿por qué no ayudar a aquellos que pueden ser tan torpes como yo?

Lo primero que hay que hacer es bajarse la última versión: http://cassandra.apache.org/#download

Una vez descomprimido y renombrada la carpeta a cassandra, lo muevo al directorio /opt:

sudo mv cassandra /opt/

Luego creamos unos cuantos directorios necesarios para la aplicación:

sudo mkdir -p /var/lib/cassandra/{commitlog,data,callouts,staging}
sudo mkdir /var/log/cassandra
sudo chmod -R 777 /var/lib/cassandra/

Creamos el fichero /var/log/cassandra/system.log y le damos permisos de escritura:

sudo chmod 777 /var/log/cassandra/system.log

Bueno, pues esto ya está instalado, ahora solo falta ejecutar Cassandra y luego probarlo con la aplicación CLI:

/opt/cassandra/bin/cassandra -f &
/opt/cassandra/bin/cassandra-cli -host localhost -port 9160

Podéis hacer pruebas con los ejemplos que salen aquí.

Actualizado: Armonth me indica un truco que simplifica la creación de los directorios, muchas gracias.

|

WebSockets en HTML5

HTML5 introduce una característica que puede mejorar sustancialmente las aplicaciones web, los WebSockets, los cuales permite crear un canal de comunicación bi-direccional entre el cliente y el servidor, solucionando los problemas que presenta Ajax o Comet. El ancho de banda ahorrado tiene una proporción de 500:1 y una latencia de 3:1, resultados increíbles que hacen que los de Google anden muy interesandos en esta tecnología (el ahorro en aplicaciones como GMail puede ser considerable).

Por ahora sólo funciona en Google, pero un código de ejemplo sería el siguiente:

if ("WebSocket" in window) {
  var ws = new WebSocket("ws://websockets.org:8787"); //this service bounces messages back
  ws.onopen = function() {
    // Web Socket is connected. You can send data by send() method.
    ws.send("message to send"); 
  };
  ws.onmessage = function (evt) { var received_msg = evt.data; alert(evt.data);  };
  ws.onclose = function() { /* websocket is closed.*/alert("WebSocket Closed!"); };
}else{
  // the browser doesn't support WebSocket.
  alert("Websocket is not supported in your browser");
}

HTML5 Web Sockets: A Quantum Leap in Scalability for the Web

Vía / DZone

Enlaces rápidos (15-03-2010)

Más enlaces rápidos, sobre todo basados en NoSQL (por favor, que no lo conviertan en un término que usen los guays y los gurús…)

Me hizo gracia esta frase: “NoSQL is for very smart people who need a very sharp knife.” espero un día cumplir ambas condiciones 🙂

|

INSERT IGNORE en MySQL

Muchas veces realizamos inserts y nuestras comprobaciones son erróneas e intentamos insertar registros duplicados, dándonos un error gordo en MySQL. Para evitar esto, normalmente se usa un REPLACE cuando la situación permite reemplazar los valores nuevos por los actuales, pero cuando esto no es posible, nos tenemos que pegar con el código buscando la comprobación que no hacemos correctamente. Para evitar esto: insertar algo ya existente, MySQL ofrece la posibilidad de ignorar el insert cuando no se puede insertar:

INSERT IGNORE 
  INTO tabla 
    (id, valor, ...) 
  VALUES 
    (25, 'valor, ...)

Cada día aprendo algo nuevo, aunque a veces deberían darme con la Biblia de MySQL (775 páginas) en la cabeza por no conocer antes esto.

Procesos concurrentes en PHP

Buen script que nos puede ser muy útil cuando tenemos que ejecutar varios procesos concurrentes, por ejemplo realizar tareas de administración simultáneas. Para ello es necesario utilizar la función pcntl_fork(). El ejemplo es bastante sencillo, pero podemos personalizar el número de procesos que queremos que se ejecuten concurrentemente:

$maxChildren = 4;
$numChildren = 0;
foreach($unitsOfWork as $unit) {
  $pids[$numChildren] = pcntl_fork();
  if(!$pids[$numChildren]) {
    // do work
    doWork($unit);
      posix_kill(getmypid(), 9);
    } else {
      $numChildren++;
      if($numChildren == $maxChildren) {
        pcntl_wait($status);
        $numChildren--;
      }
    }
}

PHP Forking to Concurrency with pcntl_fork()

Via / PHPDeveloper.org