31 mayo, 2008

ID Selector

ID Selector es un componente que facilita que los usuarios se autentiquen en un sitio mediante OpenID de la forma más eficiente posible. Provee una interfície neutral, simple y consistente, y educa al usuario durante el proceso de registro. Permite mejorar la experiencia del usuario y beneficia al sitio y al proveedor de OpenID, aportando el código XHTML que genera un botón que respeta el CSS del sitio y que facilita al usuario la introducción de su URL de identificación. Ejemplo:

30 mayo, 2008

Creación de formularios web para alimentar una hoja de cálculo

LifeHacker: Creating Web Input Forms with Google Spreadsheets.

Guía corta para crear un formulario web de recogida de datos usando las hojas de cálculo de Google Docs. Siguiendo las instrucciones se obtiene un formulario simple que puede ser insertado en cualquier página y cuyos datos introducidos por los usuarios alimentan una hoja de cálculo que controles. Ideal para obtener información de eventos o cualquier otro tipo de necesidad de información.

Probando sobre múltiples versiones de Internet Explorer

Clientside: Jean-Fabrice RABAUTE, el creador de DebugBar, el clon de Firebug para IE, acaba de publicar una IETester, una solución para probar múltiples versiones de Internet Explorer desde un mismo programa. La herramienta incluye los motores de renderizado y javascript de IE8 beta 1, IE7 IE 6 e IE5.5 sobre Windows Vista y Windows XP en un mismo proceso.

28 mayo, 2008

Phototype: Manipulacion de imagenes con Javascript

aNieto2K: Phototype es una librería para manipular imágenes directamente desde Javascript, mediante Ajax y la extensión GD de PHP. Ejemplo:

l_oPhoto = new Photo();
l_oPhoto.resize({width:200});
l_oPhoto.rotate(3);
l_oPhoto.dropShadow();
l_oPhoto.addCaption('Get ajaxorized!', '1942.ttf');
document.body.appendChild(l_oPhoto.fetch());

27 mayo, 2008

AJAX Libraries API

Ajaxian: Google AJAX Libraries API: Acelera tus aplicaciones Ajax aprovechando la infraestructura de Google. Se trata de un nuevo dominio googleapis.com en el que Google alojará indefinidamente las librerías más populares (actualmente jQuery, prototype, script.aculo.us, MooTools y Dojo). Estarán optimizados (compresión, descargas desde servidores cercanos, cacheables por incluir la versión, ...) y liberarán de la carga del ancho de banda que todas las aplicaciones web están consumiendo actualmente. Igualmente proponen que los navegadores ya incluyan en el futuro los archivos de las librerías para acelerar lo máximo posible su carga, e incluso que conozcan la IP de googleapis.com para ahorrar esa consulta a un servidor DNS.

Aconsejan un método de carga de las librerías basado en su propia librería de carga Google AJAX API loader, pero estarán igualmente disponibles de la forma tradicional:

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js'/></script>

En fin, otro paso más y también otra dependencia más hacia Google.

Validando tarjetas de crédito

Nirav Patel: No es mala idea validar una tarjeta de crédito desde la misma página mediante Javascript sin necesidad de dejar ese trabajo al servidor o a la API del banco.

Tipo de tarjeta Expresión regular
Visa ^4\d{3}-?\d{4}-?\d{4}-?\d{4}$
Master Card ^5[1-5]\d{2}-?\d{4}-?\d{4}-?\d{4}$
American Express ^3[4,7]\d{13}$
Diners Club ^3[0,6,8]\d{12}$
Discover ^6011-?\d{4}-?\d{4}-?\d{4}$

25 mayo, 2008

Reflowing

DougT’s Blog: Reflow es el proceso del navegador por el que se genera la geometría de los objetos con formato por parte del motor de distribución de elementos. En este vídeo se muestra el proceso oculto que realiza el navegador. Tras el enlace hay dos vídeos más con las páginas de Google y la Wikipedia.

24 mayo, 2008

Gestores de protocolos con Firefox 3

En Lifehacker muestran cómo registrar GMail como gestor de correo por defecto para enlaces mailto: (que abren un nuevo mensaje de correo). La nueva habilidad de Firefox 3 para registrar aplicaciones web como gestores de enlaces tienes montones de usos potenciales, desde reaccionar ante enlaces con números de teléfono y fax (podrían establecer la llamada directamente desde el navegador) hasta establecer una conexión con un contacto mediante mensajería instantánea. Más información sobre esta característica aquí.

Otras ideas:

twitter: //para publicar un texto
sms: //envío de sms a un móvil
bookmark: //para crear un favorito
bittorrent: //para iniciar una descarga
ed2k: //ops, alguien ya pensó en esta ;-)
console: //para enviar información a la consola (en lugar de recurrir a alerts)

23 mayo, 2008

API para postMessage

John Resig anuncia cambios para la API de postMessage, que permite enviar mensajes de texto entre marcos o ventanas pertenecientes a dominios distintos de forma segura. Forma parte de la especificación HTML5 y estará disponible para Internet Explorer 8, Firefox 3, Safari/WebKit y Opera 9.5. Sobre Firefox 3 RC1 ya funciona correctamente tal y como se puede comprobar aquí.

El código del documento exterior albergado en http://ejohn.org/apps/message/ y que emite el mensaje sería:

<iframe id='iframe' src='http://dev.jquery.com/~john/message/'/>
<form id='form'>
  <input value='Mensaje a enviar' id='msg' type='text'/>
  <input type='enviar'/>
</form>
<script>
window.onload = function(){
        var win = document.getElementById("iframe").contentWindow;
        document.getElementById("form").onsubmit = function(e){
                win.postMessage(
                        document.getElementById("msg").value,
                        "http://dev.jquery.com"
                );
                e.preventDefault();
        };
};
</script>
Y el código del iframe interior que estaría albergado en http://dev.jquery.com/~john/message/ y que recibe el mensaje sería:

<b>Este iframe estaría en dev.jquery.com</b>
<div id='test'>Enviame un mensaje!</div>
<script>
window.addEventListener("message", function(e){
        if ( e.origin !== "http://ejohn.org" )
                return;

        document.getElementById("test").textContent = e.origin + " said: " + e.data;
}, false);
</script>

Trabajos en Pixeling Life

Mi ex-empresa Pixelinglife busca trabajos presenciales de:
  1. FLASH DESIGNER/PROGRAMMER (Flash, ActionScript 3, PaperVision, Photoshop, Ilustrator)
  2. BACKEND DEVELOPER (PHP, Zend, Symfony, .Net, Flex, Air, SQL)
  3. PROJECT MANAGER
Interesados: Enviad vuestros CVs con referencias de trabajos realizados a jobs (at) pixelinglife.com. o visitad los detalles de las ofertas.

22 mayo, 2008

Mario Kart en Javascript

aNieto2K:

Aparece una versión del Mario Kart creado con Javascript y el objeto Canvas del navegador. Incluso va relativamente fluido,


Click para probar.

21 mayo, 2008

Datos normalizados u optimizados

En este artículo de HighScalability, explican cómo romper con la hegemonía de las bases de datos relacionales con la que todos nos hemos formado. A partir de cierto volumen de lecturas, algo relativamente típico en páginas web de éxito, los datos deben guardarse en un formato que facilite las lecturas y la escalabilidad (dispersar los datos entre servidores). El modelo relacional y los datos normalizados resultan impedimentos para optimizar el trabajo normal. De ahí que Google use su Big Table (PDF) o empiecen a surgir bases de datos no relacionales como CouchDB. Romper con la normalización, es decir, repetir datos en diferentes sitios; o guardarlos de forma que los cálculos se realicen en las escrituras; o pasar las restricciones de integridad a la aplicación, resultan cambios radicales a los que los grandes sitios han llegado por necesidad. El cambio es tan radical que quizás resulte más interesante empezar a plantearse si resulta adecuado empezar a trabajar directamente con las nuevas bases de datos en proyectos que se presuma que van a crecer. Quizás va siendo hora de plantearse la M en las siglas LAMP.

20 mayo, 2008

Captcha basado en el iPhone

Via aNieto2K.

Una de las aportaciones del iPhone es su sistema para desbloquear el dispositivo: hay que desplazar lateralmente un indicador hasta la derecha. Alex Boone ha aprovechado esa idea para crear un botón de envío de formulario que necesita ser arrastrado, con la idea de proteger el formulario de robots spammers y otras plagas.

El juego Tower Defense sobre processing.js

Design of Processed Tower Defense
Alguien ha realizado el esfuerzo de convertir el adictivo Tower Defense al Javascript gracias a la librería de John Resig. Hasta hace un par de semanas, aunque no imposible, el esfuerzo hubiese sido mucho mayor.

Free Image Hosting at www.ImageShack.us

19 mayo, 2008

Teclado virtual para campos de formulario



Javascript Graphical / Virtual Keyboard Interface

Se trata de un pequeño módulo Javascript para añadir un teclado virtual a los campos de texto de un formulario de forma que puedan rellenarse sólo con un ratón. Incluye distribuciones de teclado internacionales pero es fácil añadir nuevas. Via aNieto2k.

18 mayo, 2008

Ahorrando ancho de banda con sprites y CSS

Aunque hace mucho tiempo que no se utilizaba la técnica de unir varios gráficos en uno sólo para ahorrar espacio de memoria, hoy día con las conexiones tenemos un problema similar, por lo que la técnica vuelve a tener sentido. En el blog Climens Codelog y en este artículo de AListApart comentan cómo utilizar esta técnica que, entre otros sitios, se utiliza en la página de Google Code, donde se aprovecha la siguiente imagen para cargar de una vez los recursos gráficos fijos:



Para extraer cada una de las imágenes contenidas, se utilizaría CSS aplicado a una capa div, de forma que indiquemos el ancho y alto de la imagen y posicionemos esa imagen como imagen de fondo y con el desplazamiento adecuado para que se muestre el sprite. Por ejemplo, este símbolo de RSS (     ) y que está ubicado en las coordenadas x:28 y:374 dentro de la imagen, se ha obtenido aplicando el siguiente código:

<style>
#rss {
width:15px;
height:15px;
background:url(http://code.google.com/images/sprites.gif) -28px -374px no-repeat;
}
</style>
<div id='rss'></div>

16 mayo, 2008

Simon Willison sobre Firebug:
Es posible establecer un punto de ruptura (breakpoint) al principio de una función con debug(fn) y registrar todas las llamadas a ella con monitor(fn).

Componente de selección de fechas con jQuery

Free Image Hosting at www.ImageShack.us
Filament Group, Inc.


Con atajos y selección de rangos de fechas.

15 mayo, 2008

NodeBox, visualizaciones para Mac con Python

NodeBox es una aplicación de Mac OS X que permite crear visualizaciones en 2D (estáticas, animadas o interactivas) usando código de programación Python y exportándolas como PDF o como una película QuickTime. NodeBox es gratis y está bien documentado.

Un ejemplo de gráfica de Tufte con 11 líneas de código | Galería de ejemplos

Sincronización entre YouTube y Google Maps

Este ejemplo muestra un vídeo de una carrera de bicicletas y, sincronizado, aparece la localización en Google Maps con el trayecto trazándose al mismo tiempo.

YouTube + Google maps location mashup!

Free Image Hosting at www.ImageShack.us

Facebook Chat con Comet

Via Simon Willison. El nuevo Chat en Facebook usa Comet (una petición larga al servidor desde un iframe oculto) contra un servidor web y de chat personalizado y escrito en Erlang. El servidor se diseñó para mantener a los 70 millones de usuarios a la vez, y se probó durante un periodo en el que las páginas reales simulaban peticiones al servidor sin que los usuarios lo detectasen.


Addendum: Más sobre las pruebas ocultas del servicio de chat en el blog de Lucas Josh. No sólo es un reto crear nuevas aplicaciones, también lo es mantenerlas cuando tienes miles de usuarios que las usan habitualmente.

Goog, nueva librería javascript

Nota: Quizás esté posteando demasiado sobre Google, pero es que últimamente están liberando muchas herramientas.

Via Simon Willison. Goog es una librería Javascript pura (como YUI o jQuery) de Google cuya código está muy bien documentado aunque la documentación sobre la librería está desperdigada en el nuevo Google Doctype.

Se puede obtener desde aquí: Goog.
Addendum: John Resig había escrito aquí un artículo muy completo tratando sobre este tema, pero por alguna razón (probablemente por petición de Google) lo ha eliminado. Los que estamos suscritos a su feed, lo hemos recibido igual, por lo que lo reproduzco tras este enlace.

JavaScript Information Visualization Toolkit

Javascript Information Visualization Toolkit by WebAppers
JavaScript Information Visualization Toolkit (JIT) es un toolkit de visualización de información que implementa características avanzadas como mapas de árbol (Treemaps), una visualización adaptada de árboles basada en el Spacetree, una técnica de foco+contexto para visualizar árboles hiperbólicos, y una visualización radial de árboles con animaciones avanzadas (RGraph). Bueno, mejor ver las imágenes:

Google Doctype

Google Doctype es una enciclopedia totalmente abierta y una biblioteca de referencia creada por desarrolladores y para desarrolladores. Incluye artículos sobre seguridad web, Javascript, manipulación del DOM, trucos CSS, etc. La sección de referencia incluye una biblioteca creciente de casos de prueba para comprobar la compatibilidad entre navegadores y entre plataformas.

Página principal.
Addendum: John Resig ha escrito aquí un artículo muy completo tratando sobre este tema. Ha estado inspeccionando la documentación y parece ser un buen fiasco. La información que aparece no está completa, ni actualizada, ni parece tampoco relevante. Mejor seguir acudiendo a la biblia de las referencias.

Google Friend Connect

Google Friend Connect es una nueva tecnología de Google que permite aumentar el tráfico fácilmente añadiendo características sociales a una página web. Con unas pocas líneas de código (copiar y pegar), se consigue que la gente se vincule más a la página y se obtienen nuevas características fácilmente sin necesidad de implementarlas explícitamente como:
  • autenticarse con una cuenta existente de Google, Yahoo, AIM, u OpenID
  • invitar y mostrar la actividad a amigos existentes de redes sociales como Facebook, Google Talk, hi5, orkut, Plaxo, y más
  • explorar perfiles de miembros entre redes sociales (soporta OAuth)
  • contactar con amigos desde la página

Google Dirson:
Por ejemplo, si tenemos una página web que no permite a los usuarios identificarse y no queremos perder el tiempo programando un sistema de registro, logueo, más un formulario de comentarios, mediante código ya predefinido por Google podemos implementarlo invitando a nuestros visitantes a utilizar, eso sí, su cuenta personal de Google (ver captura de ejemplo). Con ello, los usuarios de nuestro sitio web no serán realmente de nuestro sitio web, sino de Google, el cual nos ofrece las herramientas para facilitar relaciones entre ellos, y de ellos con nuestro sitio web.
Más información.

14 mayo, 2008

Las secuelas de Processing.js


John Resig reune los proyectos originados a partir de processing.js, las mejoras, las nuevas demos, los entornos de desarrollo y las reacciones en la blogosfera.

Suscribirse a modificaciones de datos con Persevere y Comet

Via Comet Daily:

Comet es una arquitectura web por la cual el servidor puede enviar información al cliente a través de una conexión persistente anterior sin que éste la haya solicitado previamente. Es necesaria para aplicaciones como chats en las que la página debe ser notificada de que otro usuario ha escrito algo. El mecanismo también puede aprovecharse para que una aplicación web ejecutada en el navegador cliente pueda ser notificada de cambios en datos.

Con el soporte de Comet por parte del servidor de aplicaciones Persevere, a parte de las peticiones REST tradicionales, también es posible suscribirse a los cambios del objeto que se está solicitando, de forma que es posible, por ejemplo, ver en tiempo real las modificaciones que hacen otros usuarios a la tabla que se esté visualizando.

Eso es justo lo que se puede ver en el siguiente ejemplo, aunque para ver el efecto es necesario abrirlo con ventanas distintas o, mejor aún, con equipos distintos.

Ejemplo

Test de conocimientos Javascript

Are you JavaScript literate?



Se trata de un test que Thomas Frank ha creado para evaluar los conocimientos en Javascript de varios aspirantes a un trabajo en su empresa. El test (PDF) y sus respuestas (PDF). Me parece que se ha pasado un poquito.

13 mayo, 2008

pi.debugger

aNieto2K:


pi.debugger
es un script que abre una consola similar al imprescindible Firebug, aunque mucho más limitada. He creado un bookmarklet que carga directamente la consola sobre la página que se esté visualizando:


javascript:void(function(){var%20s=document.createElement('script');s.src='http://pi-js.googlecode.com/files/debugger.js';document.getElementsByTagName('head')[0].appendChild(s);}())


Guardar como favorito el siguiente enlace para obtenerlo: Insert pi.debugger.

oEmbed

oEmbed: oEmbed es un formato para permitir la representación empaquetada de una URL en sitios de terceros. La API simple permite que una web muestre contenido embebido (como fotos o vídeos) cuando un usuario postea un enlace a ese recurso, sin tener que parsear el recurso directamente.

Un ejemplo rápido:

Un consumidor (p.ej. Pownce) hace la siguiente petición HTTP:

* http://www.flickr.com/services/oembed/?url=http%3A//www.flickr.com/photos/bees/2341623661/

El proveedor (p.ej. Flickr) responde con una respuesta oEmbed:

{
 "version": "1.0",
 "type": "photo",
 "width": 240,
 "height": 160,
 "title": "ZB8T0193",
 "url": "http://farm4.static.flickr.com/3123/2341623661_7c99f48bbf_m.jpg",
 "author_name": "Bees",
 "author_url": "http://www.flickr.com/photos/bees/",
 "provider_name": "Flickr",
 "provider_url": "http://www.flickr.com/"
}

Esto permite al consumidor convertir una URL a una página de una foto de Flickr en datos estructurados para permitir embeber esa foto en la web del consumidor.

Addendum: La propuesta original se puede simplificar bastante con el uso de REST. Como bien afirma este desarrollador ni siquiera es necesaria un endpoint, basta con realizar la siguiente petición sobre el recurso del que se pretende obtener información:
GET /photos/bees/2362225867/ HTTP/1.1
Host: flickr.com
Accept: application/oembed+xml

Propone de paso la estandarización de los tipos MIME application/oembed+xml y application/oembed+json para ese fin.

SessVars.js

Andrés Nieto comenta que Thomas Frank ha descubierto la forma de almacenar datos desde Javascript en un objeto que sobrevive a la recarga de páginas y por tanto sirve para implementar variables de sesión reales. Eso permite sustituir a las cookies para ese trabajo, pero se ha de tener en cuenta que realmente los datos sólo permanecen mientras se navega por las páginas del site, de forma que al cerrar la pestaña de la página (o el navegador) los datos dejan de estar disponibles. Los datos quedan almacenados en top.name usando una curiosa característica que parece ser multiplataforma.

Como los comentarios en estos posts siempre son ilustrativos, leyéndolos se conocen siempre nuevos proyectos, como JStone o WebRam, que hacen cosas similares.

Probar.

Addendum: Pensando en utilidades para este nuevo truco se me ha ocurrido crear algo parecido al Live Clipboard de Microsoft (ver ejemplo, aunque no me funciona con mi Firefox 3b5). Se trata de una tecnología que facilita la copia de pedazos de información entre páginas web, incluso entre navegadores diferentes. Con SessVars, se podría visitar una página (productora) que guardase un contenido en esa memoria y que se accediese a una segunda página (consumidora) que leyese el contenido guardado. Si el productor está preparado para ello, podría dirigir automáticamente al usuario a la segunda página, con lo que, prácticamente sin intervención manual se podría traspasar información entre páginas incluso de dominios distintos.

Via Waxy.org links encuentro que alguien dice que el nuevo processing.js de John Resig puede suponer el principio del fin de la cultura de fuente cerrada de la tecnología de rich media (Flash, Flex, Java, Silverlight, ...). En Wired Compiler también aprecian el hito que supone este proyecto. Quizás Javascript empieza a fagocitar demasiadas cosas...

12 mayo, 2008

tinydb.org

Resulta tan simple que da un poco de vergüenza postear sobre esto, pero la utilidad es indudable. Creada sobre la reciente Google App Engine (y por tanto con Python), TinyDB permite guardar los parámetros que se envien a la URL http://tinydb.org/_write con GET o con POST en su base de datos y recibir a cambio una URL fija que servirá posteriormente para recibir los parámetros pasados originalmente. Se permite indicar el formato de recuperación con el parámetro _f (js, json o xml).

Suena simple porque lo es. Pero permite implementar, por ejemplo, un servicio como el de tinyurl.com sin preocuparse de la bases de datos. Las metas del proyecto son:

  1. Facilitar una API simple para escribir y leer pequeños bloques de datos desde cualquier sitio
  2. Servir como plataforma sobre la que escribir aplicaciones twitter y widgets/componentes javascript.
  3. Sortear crossdomain.xml (Flash) en formas creativas e interesantes

11 mayo, 2008

Chrome/XUL para Processing.js

Aunque podía parecer evidente que si Processing.js funciona sobre Firefox (3.0 beta 5), también lo iba a hacer sobre Prism (antes XUL Runner), ni a su mismo autor, John Resig, se le había pasado por la cabeza. Las posibilidades que abre aún están por explorar... pero en Hackety.org ya han empezado con un pequeño editor que ejecuta directamente un script en Processing y que se puede probar aquí:

.
Un script para probar aquí.

Addendum: obsessing.org es un entorno JavaScript puro para trabajar con processing.js. La idea es muy buena, pero está plagada todavía de errores y el editor es inusable. Sin duda, el trabajo de Resig va a suponer un impulso importante para Javascript, para Processing, para XUL y también para el trabajo con el componente canvas del navegador.

09 mayo, 2008

Gráficas flash para todos

Tras el éxito en soitu.es de sus famosas gráficas para las elecciones y tras el éxito conseguido facilitarlas como widget, ahora se animan con nuevas gráficas abiertas para uso de los internautas:

Ver en soitu.es.

Processing.js

Processing.js es un nuevo y espectacular proyecto presentado por John Resig.

Processing es, según la wikipedia, un "lenguaje de programación y entorno de desarrollo (IDE) construido para las comunidades de diseño visual y de artes electrónicas". Se trata de un proyecto orientado totalmente a la programación visual, parecido a Flash, con una gran base de programadores y que utiliza Java como plataforma.

Resig ha hecho el enorme esfuerzo de portar la plataforma entera a Javascript (5000 líneas, 10KB comprimidos) aprovechando el canvas de los navegadores modernos.



Más ejemplos: básicos, complejos y tópicos.

Enterprise Ajax in PHP

Presentación (PPT) en Beijing de HedgerWow con interesantes consejos para acelerar y gestionar (cachés, colas inteligentes, ...) las peticiones Ajax al servidor.

08 mayo, 2008

PHPro.org

Via el el blog de Marco descubro PHPro.org, un sitio con decenas de ejemplos, artículos y tutoriales. Referencia imprescindible para quien programe con PHP.

07 mayo, 2008

Reducir el tamaño de los .js con PHP

Marcos Fernández ha creado un excelente tutorial (vía aNieto2k) sobre como leer todos los archivos .js de una página, unirlos en uno sólo y comprimirlos con jsmin-php (versión en PHP del compresor JSMin de Douglas Crockford).

Tres formas de crear una función anónima con Javascript

Me ha gustado la solución final en hedgerwow.com, así que copio aquí las distintas opciones:

El primer intento da un error ya que se espera un nombre de función:

function(){ alert(1); }();


Forma 1 : Literal de función. Introduciendo la definición de la función entre paréntesis, sí se permite crearla como un objeto antes de ejecutarla con ():
(function(){ alert(1); } ) ( );


Forma 2 : Expresión previa. Usar paréntesis para forzar que una función declarada se ejecute ya que Javascript evalua las expresiones desde los paréntesis más internos a los más externos.
( function(){ alert(2); } ( ) );


Forma 3 : Operador Void. Aquí la genialidad, usar void para evaluar un operando solitario sin necesidad de introducir la definición entre paréntesis. Simple y sencillo:
void function(){ alert(3); }()

Hoja de referencia para posicionamiento en buscadores

En este PDF se puede descargar la última versión de la hoja de referencia (o chuleta) para posicionamiento en buscadores dirigida a desarrolladores web. Publicada por seomoz.org, la página de referencia en el arte de hacer crecer la importancia de una página para mejorar su lugar al realizar una búsqueda.

Dragonfly, el Firebug de Opera

Que Firebug se ha convertido en una herramienta imprescindible es algo que ya no duda nadie. Primero fue Microsoft la que fusiló la herramienta para su futuro Internet Explorer 8.0. Ahora es Opera la que convencida de su enorme utilidad la ha implementado en la versión 9.5 de su navegador. Otro pasito...

Screenshot Screenshot Screenshot Screenshot

Piet, un lenguaje gráfico de programación

Ya comenté anteriormente que hace bastantes años descubrí en la revista Investigación y Ciencia el RedCode, un lenguaje para crear programas que combaten en una memoria lineal por hacer fallar al otro programa. Ya en aquella época se me ocurrió crear una versión bidimensional del RedCode en el que ciertas instrucciones cambiaban la dirección en la que se ejecutaba la siguiente instrucción. Pero aquello quedó en una día...

...hasta hoy. He tropezado con Piet, un lenguaje cuyos programas parecen cuadros abstractos (ver galería). Incluso han creado un IDE (entorno de desarrollo) online con Javascript. Este sería un típico "Hola Mundo":

05 mayo, 2008

Parseador HTML y "navegador virtual" en el servidor con Javascript

John Resig, el autor de jQuery ha creado un parseador de HTML con Javascript. Es decir, un programa capaz de leer un documento en HTML que no cumpla el estándar XHTML y convertirlo en un documento XML válido.

Gracias a que ha hecho mención de ello he descubierto el fruto de su trabajo durante un fin de semana de Julio del 2007, en el que creó algo más importante: una librería para permitir trabajar con documentos XHTML en el lado del servidor.

Se trata de un archivo llamado env.js que cargado desde Rhino (el intérprete Java para ejecutar código Javascript) permite hacer cosas como cargar la librería Prototype en el servidor:

$ java -jar build/js.jar
 Rhino 1.6 release 6 2007 06 28
js> load('build/runtest/env.js');
js> window.location = 'test/index.html';
 test/index.html
js> load('prototype.js');
js> $$('div p')
 <p#firstp>,<p#ap>,<p#sndp>,<p#en>,<p#sap>,<p#first>
js> Object.toJSON({foo:'bar',baz:true});
 {'baz': true, 'foo': 'bar'}
js> var fn = (function(name,msg){
  print(name + ' ' + msg); }).curry('John');
js> fn('hello!');
 John hello!


...u obtener el último artículo de AListApart...

load("env.js");
window.location = "http://alistapart.com/";
window.onload = function(){
  load("dist/jquery.js");
  print("Newest A List Apart Posts:");
  $("h4.title").each(function(){
    print(" - " + this.textContent);
  });
};


La importancia de este trabajo es grande. De hecho, plataformas como Aptana Jaxer, sin duda han desarrollado esta idea hasta obtener un producto completo.

Lista de elementos en malla

HedgerWow: usar la propiedad display:inline-block parece una más que buena idea: tiene un comportamiento más previsible que el tradicional float:left.

Clon de VI... con Javascript

jsvi es un clon de vi escrito en puro javascript y que debería funcionar con cualquier navegador moderno. jsvi tiene un tacto a los dedos como el de vi, soporta comandos ed/ex commands, respeta unicode, soporta comprobación de la escritura en tiempo real conforme tecleas, e integración con el portapapeles del sistema. Respecto a la compatibilidad de vi, jsvi soporta casi todas las teclas de vi, y casi todos los comandos ed/ex.

02 mayo, 2008

Join-fu: El arte de "tunear" SQL

Jay Pipes es el autor de esta presentación (PDF) sobre cómo optimizar MySQL con la creación de las tablas y la forma de realizar las consultas. Imprescindible para cualquiera que trabaje con bases de datos relacionales... o sea, todos, ¿no?

01 mayo, 2008

Sirviendo imágenes desde Amazon S3 en Wordpress.com

La gente de Wordpress.com explica en un post en su blog el proceso que sigue una petición para ser servir un recurso estático (imagen) desde que llega a sus servidores (pound) hasta que se genera la respuesta, ya sea porque esté cacheada (memcached) en sus instalaciones o obteniéndola a través de Amazon S3.

Adobe Open Screen Project o Adobe se espabila

Adobe Open Screen Project es una iniciativa de Adobe para abrir su estándar SWF (Flash), eliminar las restricciones de las licencias que impedían que terceros creasen reproductores para Flash y Air y para eliminar los pagos por licencias de Flash para dispositivos (adivino que la decisión de Apple de no implementar Flash en el iPhone y la de Nokia de flirtear con Microsoft SilverLight no les debe haber sentado muy bien).

En Error500.net valoran muy positivamente el movimiento dentro del mercado de las RIA y contra el establecimiento de tecnologías propietarias que frenen su crecimiento.

Página oficial de Open Screen Project, Pregunas frecuentes y Nota de prensa.

Libro online sobre programación de juegos

Core Techniques and Algorithms in Game Programming es un detallado libreo online sobre programación de juegos, incluyendo gráficos 2D y 3D, inteligencia artificial, código de comunicaciones para multijugadores, renderizado de interiores y exteriores, animación de caracteres y mucho más. Via Simon Willison.

Últimos links en indiza.com