Contenido

l10n.js, localización con Javascript

13 may

+ 14

Uno de los problemas con los que nos encontramos al desarrollar una aplicación rica en Javascript es la falta de idiomatización desde el cliente. Generalmente se suele usar un sistema de variables que cargamos desde un lenguaje de servidor y que al llegar al usuario las frases ya están en el idioma seleccionado.

Hoy via Ajaxian, descubro l10n.js, una librería javascript que permite realizar esta idiomatización desde el cliente, usando una estructura JSON donde alojas las frases en los diferentes idiomas.


{
	"en": {
		"l10n.js demo": "English - l10n.js demo",
		"You are viewing the original page locale.": "You are viewing an English localization of this page."
	},
	"pt": {
		"en": "pt",
		"l10n.js demo": "Português - Demo do l10n.js",
		"You are viewing the original page locale.": "Vocé esta a ver uma localização Portuguesa desta página."
	},
	"es": {
		"en": "es",
		"l10n.js demo": "Español - l10n.js demo",
		"You are viewing the original page locale.": "Mira ustéd una versión español de esta pagina."
	},
	"fr": {
		"en": "fr",
		"l10n.js demo": "Français - l10n.js démo",
		"You are viewing the original page locale.": "Vous sont voyez une localisation français de cette page."
	}

}

Como podemos ver, se trata de una estructura sencilla que aprovecha la potencia de JSON (clave-valor) para identificar las cadenas de texto que deseamos mostrar al usuario.

El fichero, lo cargaremos como un fichero externo usando el elemento <link /> en nuestro <head />


<link rel="localizations" href="localizations.json" type="application/x-l10n+json" />

Con el diccionario cargado, solo tendremos que cargar la libraría javascript y empezar a editar nuestro código para que las cadenas de texto aparezcan en el idioma deseado.

<script type="text/javascript" src="path/to/l10n.js"></script>

Automáticamente la librería nos extiende nuestros objectos String para que dispongamos del método toLocaleString() que nos permite cargar la cadena en el idioma del usuario.  Tenemos una API más completa donde ver las opciones disponibles.

Notificaciones de escritorio con WebKit

22 abr

+ 13

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

Picture 4
(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

[Corregido] Ejecutando procesos en paralelo con Javascript

14 abr

+ 14

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 —>

Detectando el iPad desde la web

8 abr

+ 3

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 —>

Prototype 1.7 RC1 disponible

5 abr

+ 5

Hoy se ha publicado la primera Release Candidate de Prototype 1.7. Esta versión, que viene cargada la implantación de Sizzle como selector CSS3 además añade mejoras y cambios de sintaxis bastante interesantes. Sin duda un interesante lavado de cara que convierte a Prototype en una buena herramienta para nuestros desarrollos. [Descargar]

Ambilight para HTML5 Video

26 mar

+ 13

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.

ambilight_video_html5
(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.

Crea tu propio framework de animaciones

25 mar

+ 5

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.

Impel, completo ORM en Javascript para HTML5

22 mar

+ 13

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.

MyJDB, base de datos en Javascript para todos los navegadores

24 feb

+ 19

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.

Plupload, sube ficheros como quieras, pero súbelos

10 feb

+ 4

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.