aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Las últimas versiones de WebKit integran una característica realmente interesante. La capacidad de enviar notificaciones al escritorio desde una aplicación web.

(Ver Imagen)

Estas notificaciones están disponibles mediante Javascript y nos permiten informar al usuario de que algún proceso en la página web ha terminado o se requiere cierta atención sobre ella.

function Notifier() {}

// Devuelve "true" si el navegador dispone del soporte
Notifier.prototype.HasSupport = function() {
  retun (window.webkitNotifications);
}

// Petición de permisos para enviar notificaciones desde esa URL.
Notifier.prototype.RequestPermission = function(cb) {
  window.webkitNotifications.requestPermission(function() {
    if (cb) { cb(window.webkitNotifications.checkPermission() == 0); }
  });
}

// Mostramos la notificación indicando icono, título y cuerpo
Notifier.prototype.Notify = function(icon, title, body) {
  if (window.webkitNotifications.checkPermission() == 0) {
    var popup = window.webkitNotifications.createNotification(
      icon, title, body);
    popup.show();
    return true;
  }
  return false;
}

Podemos ver un ejemplo funcionando (desde Chrome o versiones de Webkit más modernas)  (código fuente).

Me suena haber leído algo acerca de una propuesta de estándar para cambiar los odiosos alert() que te llevan a la página que lo provoca automáticamente. Algo realmente molesto. Pero no encuentro donde lo leí, así que si alguien sabe de lo que hablo agradecería me hicieran llegar el artículo.

Via

Actualizo (08:00):

El sistema usado en el ejemplo que croczilla.com publica, está desarrollado usando Stratified Javascript (SJS), una implemenetación de Javascript con Javascript O.o. Se trata de una librería multinavegador que nos permite añadir concurrencia a Javascript fácilmente.

La clave está en el uso de tags <script /> de un tipo diferente al que conocemos como text/javascript, usando uno propio se encarga de evaluar el código contenido en él añadiendo una serie de funcionalidades como hold(),resume(), suspend() y la posibilidad de usar concurrencia en Javascript.

Ejemplo

<script type="text/javascript" src="sjs-loader.js"></script>
<script type="text/sjs">
….
function animate(elemname, duration_ms, step_ms) {
 var elem = document.getElementById(elemname);
 var start_time = new Date();
 var x = 0;
 do {
 elem.style.left = x;
 x = (x + 10) % 200;
 hold(step_ms); // Parando la ejecución
 } while (duration_ms > new Date() - start_time);
 }

 function par(a, b) {
 alert("all done");
 }
 // Procesos paralelos
 par(animate("animated_element_1", 10000, 100),
 animate("animated_element_2", 7000, 80));
…
</script>

Como podemos ver, en esta porción de código sacada de una demo de crockzilla.com, usamos hold() para detender la ejecución y usamos el paso de parámetros para comenzar la concurrencia de procesos.

Continua —>

David Walsh, publica un artículo donde nos muestra una serie de opciones, en diferentes lenguajes, para detectar el iPad desde nuestra aplicación web.

Básicamente se encarga de comprobar el userAgent que el dispositivo deja impreso en las cabeceras en las que solicita la página para detectarlo y condicionar la respuesta al usuario.

Continua —>

El tag <video /> del estándar HTML5 va a convertirse en el formato de visualizar videos en Internet, es solo cuestión de tiempo. Ya hemos visto algunas interesantes aplicaciones que se le puede dar, pero esta es sin duda, y por ahora, la más espectacular que he visto.

(Ver Imagen)

Mediante <canvas /> conseguimos simular el efecto luminoso que Phillips impuso en sus televisores planos con los colores que vemos en el vídeo que estamos reproduciendo. Podemos ver el código fuente que lo implementa directamente desde aquí.

Ver ejemplo.

Interesante artículo en el que nos muestra, en pocos pasos y mucho código como crear nuestro propio framework Javascript destinado a trabajar con animaciones. Ideal para los que queremos minimizar nuestro código Javascript eliminando esos KB que los frameworks nos incluyen

// Definimos el constructor
function Effect(opt) {
  this.opt = {
    element: opt.element,
    duration: opt.duration || 1000,
    fps: opt.fps || 40,
    onComplete: opt.onComplete || function(){}
  };
}

Effect.compute = function(from, to, delta) {
  return from + (to - from) * delta;
};

// Métodos de la clase
Effect.prototype = {
  start: function(props) {
    if(this.timer) return;
    var that = this, fps = this.opt.fps;
    this.time = +new Date;
    this.timer = setInterval(function() { that.step(props); },
                             Math.round(1000/fps));
  },
  step: function(props) {
     var currentTime = +new Date, time = this.time, opt = this.opt;
     if(currentTime < time + opt.duration) {
      var delta = (currentTime - time) / opt.duration;
     this.setProps(opt.element, props, delta);
    } else {
      this.timer = clearInterval(this.timer);
      this.setProps(opt.element, props, 1);
      opt.onComplete();
    }
  },
  setProps: function(elem, props, delta) {
    var style = elem.style;
    for(var prop in props) {
      var values = props[prop];
      style[prop] = Effect.compute(values[0], values[1], delta)
        + (values[2] || '');
    }
  }
};

Y para usarla, simplemente tendremos que definir las nuevas propiedades del elemento al que le queremos aplicar el efecto.

var elem = document.getElementById("myElementId");
var fx = new Effect({
  element: elem,
  duration: 1000
});
fx.start({
  'width': [0, 20, 'px'],
  'height': [0, 5, 'em']
});

Y listo, ya tenemos efecto. No he probado a encadenar efectos, pero debería funcionar, permitiendo conseguir animaciones interesantes.

Conocemos como ORM al mapeo de un objeto-relacional, o en palabras mundanas, al mapeo de una entidad de una base de datos en un objeto. La mayoría de lenguajes de programación implementan diferentes opciones y herramientas para realizar dicha tarea en los frameworks que usamos.

 var Card = new Class({
       Extends    : ImpelClass,
       peer_class : "CardPeer",
       toString   : function(){
                      return this.getName() + " of " + this.getSuit();
                    }
   });

 var CardPeer = new ImpelPeer({
        'columns'      : { 'id'    : 'card.id',    'suit' : 'card.suit',
                           'value' : 'card.value', 'name' : 'card.name'},
        'table'        : 'card',
        'base_object'  : 'Card'
   });

Javascript no iba a ser menos, y más ahora que HTML5 ha traido la base de datos al navegador con todo lo que eso conlleva. Impel, es el primero ORM que he visto para javascript y aunque no me ha dado tiempo a probarlo, parece que tiene muy buena pinta.

Dispone de una API bastante completa y al estar completamente modularizado, nos permite incluir nuevos módulos a nuestros proyectos fácilmente.

El próximo Lúnes, día 1 de Marzo de 2010, verá la luz la primera versión de MyJDB, una base de datos desarrollada en Javascript basada en Javascript DB que Luís García lleva un tiempo desarrollando.

• My, en referencia a MySQL que será el referente de como deben funcionar las cosas.
• J, en referencia a Javascript.
• DB, indicando que se trata de una base de datos.
• Y podemos usar JDB como acrónimo de Javscript DB recordando cual es el origen del proyecto.

Esta nueva versión trae una buena recopilación de modificaciones:

• Relicenciamiento a GPL 3.
• Documentación interna completa y en Ingles, así como las variables que pasan del catalán al ingles para internacionalizar el proyecto.
• Reestructuración completa del código.
• Nuevo analizador sintactito del Select sobre un 40% más rápido.
• Tipado de datos de los campos de las tablas, lo que nos ayuda a evaluar correctamente números, cadenas y sobre todo fechas.
• El algoritmo para realizar JOIN entre dos tablas es alrededor de 640 veces más rápido.
• Se ha añadido el uso de between, el uso de parentesis, reconocimiento de ‘<=>’.
• Implementación de la clausula limit.
• Reconocimiento de is, is not, is null, is not null y unknown.
• Realización de un select con sólo contando el tiempo de la clausula where alrededor de un 40 veces más rápido.
• Evaluación de la clausula where alrededor de un 94% más rápido.
• La evaluación de una condición LIKE es alrededor de 8 veces más rápida.
• La clausula Order by es alrededor de 2 veces más rápido.

Como podemos ver, se trata de un proyecto interesante que permitirá llevar las base de datos en Javascript a todos los navegadores, mientras los estándares creados para ello se van implementado. Realmente es importante promover este tipo de proyectos que pretende hacernos la vida más fácil extendiendo las opciones que disponemos. Además busca colaboradores que ayuden a aportar ideas y líneas de código.

Ajaxian publica un artículo sobre Plupload, una aplicación Javascript que nos permite seleccionar de entre una serie de opciones posibles las herramientas con las que queremos permitir subir ficheros a nuestros usuarios.

• Google Gears
• Silverlight
• Flash
• BrowserPlus
• HTML5

Simplemente tendremos que especificar uno o varios de ellos y los parámetros necesarios para poder cargar las herramientas necesarias para cada tecnología.

var uploader = new plupload.Uploader({
	runtimes : 'gears,html5,flash,silverlight,browserplus',
	browse_button : 'pickfiles',
	max_file_size : '10mb',
	resize : {width : 320, height : 240, quality : 90},
	url : 'upload.php',
	flash_swf_url : '/plupload/js/plupload.flash.swf',
	silverlight_xap_url : '/plupload/js/plupload.silverlight.xap',
	filters : [
		{title : "Image files", extensions : "jpg,gif,png"},
		{title : "Zip files", extensions : "zip"}
	]
});

Tenemos una API disponible y un ejemplo para verlo funcionando.