Llevo un buen rato para encontrar la solución este dichoso fallo: imposible controlar con JavaScript el reproductor JW FLV Media Player. Al obtener el objeto el método getConfig() no existe y la función playerReady() no se llama. Se debe a que en Linux el reproductor necesita que se indique el parámetro id en la variable flasvars con el ID del objeto en cuestión. De otro modo no se cargará correctamente y no será posible hacer nada con JavaScript para controlarlo. Encontrado en este hilo del foro oficial.

A la hora de generar gráficas para utilizar en páginas web, hay muchas alternativas. Todo depende del tipo de la orientación de la aplicación que se desarrolle. Hay muchas aplicaciones comerciales pero para no perder mi fama, hablaré sólo de las alternativas gratuítas (aunque no todas sean OS) y que puedan generarse utilizando PHP.

JavaScript

Las soluciones basadas en JavaScript utilizan el elemento <canvas> de HTML5, que permite la creación de imágenes dinámicas mediante scripts. Eso permite incluso la interactuación con las gráficas en tiempo real. Algunas soluciones implementan también la creación dinámica de imágenes SVG.

• PlotKit: genera 5 tipos de gráficas con canvas o SVG. Requiere el framework MochiKit.
• Plotr: port de PlotKit para el framework Prototype.
• plOOtr: port de PlotKit para el framework MooTools.
• Flot: destaca por la interactividad (cambios en tiempo real, selección o zoom). Visualmente es más avanzado que PlotKit y requiere el framework jQuery.
• Flotr: port de Flot para el framework Prototype, del mismo autor del port de PlotKit a Prototype.
• jQuery Sparklines: genera gráficas tipo Sparkline usando el framework jQuery.

Adobe Flash

Las gráficas basadas en Flash se componen de un archivo SWF que realizan una petición para obtener los datos que generan la gráfica. Tienen la ventaja de ser más vistosas debido al uso animaciones como efectos al crear la gráfica o tooltips para mostrar los valores de los datos en los diferentes puntos, pero el inconveniente de realizar 2 peticiones HTTP para mostrarse.

• Open Flash Chart: los archivos de datos utilizan JSON y tiene API para PHP y Perl.
• PHP/SWF Charts: genera 20 tipos de gráficas con archivos de datos XML. Tiene API para PHP y versión de pago.
• FusionCharts Free: incorpora API para PHP, ASP, JSP, ASP.NET, RoR e incluso Cold Fusion. También permite crear diagramas de Gantt. Los archivos de datos utilizan XML y tiene versión de pago con el doble de gráficas y más funcionalidades.
• Yahoo! UI Charts: usa JavaScript para crear las gráficas pero Flash para mostrarlas. Todavía está en fase experimental.

Imágenes estáticas

Otra opción es generar imágenes estáticas.

• PEAR::Image_Graph: genera 15 tipos de gráfica. Antes conocida como GraPHPite, ahora stá integrada en las librerías PEAR y tiene varias dependencias, pero puede instalarse como una libreria más.
• JpGraph: genera 16 tipos de gráficas incluyendo mapas y diagramas de Gantt. Tiene versión de pago.
• pChart: genera pocos tipos de gráficas pero muy vistosas.

Online

Una nueva modalidad es la creación de gráficas online mediante una API, que permiten descargar la tarea de generarla en un servidor externo. El inconveniente son las limitaciones que establecen los proveedores del servicio.

• Google Chart: soporta los tipos básicos de gráficas (lineas, areas, barras…) pero incluye dos muy interesantes: mapas y QR-Codes. Tiene límite de 50.000 peticiones/dia y 0.3 megapixels por gráfica.

Seguro que se me escapa alguna. ¿Sugerencias?

Como otras alternativas, el hack está programado en JavaScript, pero esta vez, tiene interesantes características:

• No depende de frameworks como jQuery o Mootools
• Funciona con etiquetas <img> y con el atributo background-image de CSS
• Permite elementos con ancho y alto automáticos
• Es ligero: sólo 999 bytes
• Muy fácil de usar: basta un <script src=”unitpngfix.js”&gt</script>
• Funciona automáticamente, no es necesario llamar a funciones o crear objetos

Puede descargarse desde Unit Interactive

JSON empieza a pegar fuerte ya que combinándolo con Ajax las posibilidades son infinitas. Según la Wikipedia:

JSON, acrónimo de “JavaScript Object Notation”, es un formato ligero para el intercambio de datos. JSON es un subconjunto de la notación literal de objetos de Javascript pero no requiere el uso de Javascript.

Básicamente JSON proporciona una manera sencilla de convertir matrices, objectos o variables en general desde cualquier lenguaje a Javascript mediante una representación en texto plano la variable que luego es interpretada por el motor Javascript.

Los que programeis en PHP conocereis de sobra la función serialize, que permite convertir una variable en texto plano que puede almacenarse en un archivo o una base de datos para recuperarla tal cual ( las variables de sesión de PHP se guardan así ). Pues esto es exactamente lo mismo.

Por ejemplo, partamos de esta matriz en PHP:

$matriz = array(256, 512, array('p1'=>256, 'p2'=>512));

Se realiza la transformación y se interpreta. Desde Javascript:

alert(matriz[0]);
alert(matriz[2].p2);

El primer alert mostraría 256 y el segundo 512. Como se ve, las matrices asociativas se convierten a objetos en Javascript debido a la carencia de éste. El resto de variables se mantiene.

¿Y cuál es la utilidad real de esto?. Imaginad un formulario para introducir los datos de una persona. Al meter el NIF se comprueba que exista en la base de datos. Si es así se cargan los datos mediante Ajax y JSON y se autorrellena el formulario permitiendo actualizar los datos.

¿Y cómo se usa esto?. Necesitaremos las dos partes: un codificador en nuestro lenguaje favorito que puede encontrarse en los enlaces de JSON.org ( Para PHP he usado tanto la extensión php-json en mi servidor como la clase Services_JSON ) y el descodificador en Javascript, que añade el método parseJSON() al objeto String.

Un ejemplo simple con la extensión php-json:

<script type="text/javascript">
datos = '<?php echo json_encode(array('nombre'=>'David')); ?>';
datos = datos.parseJSON();
alert(datos.nombre);
</script>

Esto es aplicable a Ajax simplemente haciendo que la URL consultada devuelva variables serializadas.

No le había prestado demasiada atención a Eclipse hasta la salida de PHP IDE ( había probado los plugins PHPEclipse y Xored Trustudio con bastante decepción ), pero ahora empieza a ser rival digno para el gran Zend Studio.

El problema es que de serie no trae todo lo deseable. El paquete Web Tools Platform trae editor HTML, Javascript, CSS, JSP y SQL, editor avanzado de XML y una interesante herramienta para consultas a bases de datos ( al estilo Zend Studio ). Pero a mi me faltaban algunas cosillas:

• Soporte para Subversion: Subclipse
• Soporte para SFTP: Sftp File Synchronization
• Editor de JavaScript avanzado: JSEclipse. Éste es especialmente interesante porque tiene por fin un sistema decente de escritura predictiva y ayudas incluso con soporte para Prototype.
• Accesos y consultas a bases de datos: QuantumDB

La clases Ajax.Request y Ajax.Updater de la famosa Prototype facilitan mucho el trabajo con Ajax. Por ejemplo, para actualizar el contenido de un <div> basta con esto:

var myAjax = new Ajax.Updater(
'id_div_destino' ,
'url_datos',
{
method: 'get',
parameters: 'parametro1=tal'
});

¿Pero si quiero filtrar antes el contenido a mostrar?. Para eso necesitamos usar Ajax.Request:

var myAjax = new Ajax.Request(
'url_datos',
{
method: 'get',
parameters: 'parametro1=tal',
onComplete: mostrar
});

Esto hará que cuando se complete se llame a la función mostrar que como parámetro recibirá un objeto request. El problema es si se quieren pasar más parámetros a la funcion de mostrar, ya que onComplete: mostrar('parametro') sólo envía ese parametro. La solución es usar el método bind() del objeto function:

var myAjax = new Ajax.Request(
'url_datos',
{
method: 'get',
parameters: 'parametro1=tal',
onComplete: mostrar.bind(this, 'parametro')
});

Para más información sobre Prototype lo mejor es este manual de Sergio Pereira.

Curioseando en Devils Details fui a dar hoy a squidfingers, una web que tiene 140 patrones ( texturas ) ideales para fondos de páginas web ( como The Man In Blue ).

Tiene además una serie de pequeños scripts de JavaScript más que interesantes, como Window Listener, que permite asignar varias funciones a un evento.