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

Ayer vimos como Web SQL Database apunta buenas maneras para el futuro del almacenamiento de datos en el cliente. Tambien hemos visto lo interesante del almacenamiento DOM como sustituto de las odiosas cookies, Lawnchair nos ofrecía un interfaz límpio y cómodo para interactuar con estas opciones, y ahora DOMCached, nos facilita tambien la integración con jQuery y Prototype.

// Ejemplo jQuery
<script src="jquery.js"></script>
<script src="jquery-json.js"></script>
<script src="domcached.js"></script>
<script>
// Leemos el valor de "key"
var value = $.DOMCached.get("key");
if(!value){
	// Si no está disponible lo cargamos desde el servidor
 	value = load_data_from_server()
 	// Lo añadimos al DOM para futuros usos
	$.DOMCached.set("key",value);
}
</script>

Compatible con la mayoría de navegadores actuales, DOMCached está disponible como plugin para Prototype y para jQuery. Podemos ver el código fuente alojado en GitHub y probarlo en vivo mediante este ejemplo usando el plugin jQuery.

jDigiClock es un plugin jQuery que nos permite conseguir un reloj, inspirado en el HTC Hero, e integrarlo directamente en cualquier página web.

(Ver Imagen)

Modo de empleo

Como todo plugin jQuery debemos cargar los ficheros Javascript necesarios.

<link rel="stylesheet" type="text/css" href="css/jquery.jdigiclock.css" />
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.jdigiclock.js"></script>

Una vez cargados ya podemos crear nuestro reloj llamando al plugin indicando el ID del elemento HTML contenedor y especificando una serie de parámetros de configuración.

// HTML
<div id="digiclock"></div>

// Javascript
<script type="text/javascript">
     $(document).ready(function() {
        $('#digiclock').jdigiclock({
            // Aquí la configuración
        });
    });
</script>

Configuración

Disponemos de una serie de parámetros para personalizar nuestro reloj:

• clockImagesPath: Directorio de imágenes del Reloj
• weatherImagesPath: Directorio de imágenes del tiempo
• am_pm: Booleano para especificar AM/PM
• weatherLocationCode: Código de tu cuidad para el tiempo (Base de datos: WeatherLocationDatabase.txt).
• weatherMetric: Medición de la temperatura (C/F)
• weatherUpdate: Tiempo de actualización del tiempo

Actualización (13:02):

Cane nos explica en los comentarios que el aspecto es de HTC Sense, el interface desarrollado por HTC para dispositivos Android, Windows Mobile, …

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.

Hace unos días descubrí via delicious, Sketchpad, un paint enriquecido completamente online que se aprovecha de las nuevas herramientas que HTML5 pone a nuestra disposición.

(Ver Imagen)

El resultado, como se puede ver, es realmente sorprendente. No solo por lo elegante del diseño, sinó por la soltura con la que se mueve y las posibilidades que ofrece:

• Uso de degradados
• Uso de patrones
• Paleta de colores
• Historial de modificaciones
• Posibilidad de salvar el dibujo con Data URI

Sin duda una muestra lo que nos vamos a ir encontrando por Internet en un futuro no muy lejano.

Mucho se está hablando de la muerte de Flash con la llegada de HTML5, principalmente por que sitios como YouTube o Vimeo están implementando ya versiones del tag <video /> de HTML5 en ciertas secciones y para navegadores que lo soporten. Aunque Adobe parece no verlo igual.

Por otro lado, Tobias Scheneider ha desarrollado “Gordon“, una implementación en Javascript de un reproductor de Flash usando SVG para ello.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<script type="text/javascript" src="../gordon.js"></script>
		<script type="text/javascript">
 			window.onload = function(){
 				// Opciones
 				var opt = { id: 'stage', // ID del contenedor
 					width: 500,
 					height: 400};

 				// Definimos la nueva película
 				new Gordon.Movie('blue.swf', opt);
 			}
		</script>
	</head>
 	<body>
 		<div id="stage"></div>
 	</body>
</html>

El resultado es realmente sorprendente, y podemos disfrutar de algunos ejemplos directamente aquí (aún está un poco verde y solo está disponible para Firefox y WebKit). Además, tenemos disponible el código en GitHub.

El Código Konami (Konami Code) es un truco que la gente de Konami integraba en muchos de sus juegos y que generalmente ofrecía acceso a una sección secreta.

↑ ↑ ↓ ↓ ← → ← → B A

Muchas son las aplicaciones web que integran este código, implementar este código en cualquier página web mediante Javascript es algo tan sencillo como esto:

<head>
 <script type="text/javascript">
   var $ = {
      enabled: false,
      tmp: Array(),
      _konamiCode: Array(65,66,39,37,39,37,40,40,38,38),
      init: function() {
        this.tmp = Array(65,66,39,37,39,37,40,40,38,38);
      },
      konamiCode: function(e) {
        if(!this.enabled) {
          var t = this.tmp.pop();
          if((e.keyCode-t) == 0) {
            if(this.tmp.length == 0) {
              this.enabled = true;
            }
          }
          else {
            this.init();
          }
        }
        else {
          this.action();
        }
      },
      // Cambiamos por nuestra funcionalidad.
      action: function() {
        alert("Konami Code Activated");
      }
    }
 </script>
</head>
<body onload="$.init()" onkeydown="$.konamiCode(event)">
</body>

Simplemente tendremos que añadir este código modificando el valor de action por el de la funcionalidad que deseemos ejecutar al completar el Konami Code.

Hace unos meses Eric Wendelin publicó una implementación de printStackTrace(), un script que nos permite seguir una traza de ejecución de nuestros scripts ideal para detectar errores y detectar más fácilmente por donde ha pasado la ejecución de nuestro script.

Hace unos días, Eric actualizó el código integrando a Google Chrome entre los navegadores soportados por la función:

function foo() {
    var blah;
    bar("blah");
}

function bar(blah) {
    var stuff;
    thing();
}

function thing() {
    if (true) {
        var st = printStackTrace();
        alert(st.join("\n\n"));
    }
}

foo();

El resultado nos muestra por donde ha pasado la ejecución:

printStackTrace()@http://eriwen.com/js/common.4.js:53
thing()@http://eriwen.com/js/common.4.js:249
bar("blah")@http://eriwen.com/js/common.4.js:244
foo()@http://eriwen.com/js/common.4.js:239
@javascript:foo();:1

Si nos interesa, podemos ver el código del proyecto directamente desde GitHub.

Los que nos iniciamos pronto en la informática recordamos LOGO. Aquel lenguaje de programación que nos enseñaron cuando estudiábamos y que mediante comandos muy claros podíamos mover por la pantalla un puntero (que llamabamos Tortuga) haciendo dibujos en la pantalla. En clase, lo usábamos para mover un coche teledirigido adaptado para recibir órdenes desde una interfaz con LOGO.

(Ver Imagen)

Gracias a <canvas />, ha sido posible generar un interprete desarrollado en Javascript que nos permite disfrutar de este interesante lenguaje