ProtoChart es una (de tantas) libreria que nos permite crear graficas usando canvas y prototype. Esta libreria esta basada en Flot, Flotr y PlotKit y nos permite crear diferentes tipos de graficos de manera dinamica.

Caracteristicas:

• Line, bar, pie, curve, mix, and area charts available
• Multiple data series on same graph
• Highly customizable legend support
• Customizable grid, grid border, background
• Customizable axis-tick values (both x and y)
• Supports: IE6/7, FF2/3 and Safari
• Even works on an iPhone!

Por la compatibilidad no te preocupes ya que para los navegadores en donde no esta soportada Canvas (ejem. IExplorer6), se hace uso de excanvas.js. Ademas su uso es de lo mas sencillo, por ejemplo el codigo utilizado para generar la grafica mostrada en la imagen anterior es el siguiente:

new Proto.Chart($('areachart'),
[
  {data: d6, label: "Data 1"},
  {data: d7, label: "Data 2"}
],
{
  xaxis: {min: 0, max: 14, tickSize: 1},
  lines: {show: true, fill: true}
});

Link: Deensoft | Protochart
Link: Web Resources Depot | Prototype And Canvas Charts: ProtoChart

• El poder de JavaScript y Canvas
• Dicen que…
• pChart: Libreria para crear graficas
• Google Code en Español
• 30 aplicaciones Ajax/JavaScript que deberias conocer

Flotr es una liberia javascript basada en prototype.js, la cual nos permite crear (dibujar) graficas en la mayoria de los navegadores web, para tal cometido usa la libreria excanvas.js (incluida en el ZIP de Flotr), una de sus ventajas es su sintaxis la cual es de lo mas sencilla, por ejemplo el codigo para crear la imagen de muestra es el siguiente:

/**
 * Esta función anteponer a cada etiqueta 'y ='.
 */
function myLabelFunc(label){
  return 'y = ' + label;
}

var f = Flotr.draw(
  $('container'), [
    {data:d1, label:'x + sin(x + p)'},
	{data:d2, label:'x'},
	{data:d3, label:'15 - cos(x)'}
  ],{
    legend:{
	  // => Posicion de la leyenda 'sur-este'.
	  position: 'se',
	  // => Formaro de la etiqueta.
	  labelFormatter: myLabelFunc,
	  // => Color de fondo
	  backgroundColor: '#D2E8FF'
	}
  }
);

Sencillo ¿Verdad? Esta libreria nos permite usar leyendas, valores negativos de apoyo, los eventos del raton, efectos de zoom, ademas de que podemos personalizar la presentacion de las graficas usando CSS. Interesante opcion para apoyar datos numericos
Recuerda: “Una imagen dice mas que mil palabras”

Link: Solutorie | Flotr
Link: WebAppers | Flotr Javascript Ploting Library with Documentation

• ProtoChart: Graficos con Canvas y Prototype
• pChart: Libreria para crear graficas
• jsImageFX: Agrega efectos a tus imagenes con JavaScript
• JS-Hotkey: Controla el teclado
• Carousel.us: Un Carrusel 3D con JavaScript

js-hotkey es un plugin para jQuery que nos permite crear disparadores para eventos del teclado. ¿A que me refiero? Facil… si presionas Ctrl + F4 ¿que pasa? Exacto, se cierra la ventana, pues bien este plugin para jQuery nos permite crear funciones que se activaran (dispararan) cuando se detecte la combinacion de teclas que hayas definido.

Este plugin esta basado en shortcout.js (libreria de la cual hablamos en este blog en una vida pasada). Te dejo el enlace a la liberia (alojada en Google code) ademas del enlace a un demo, para que pruebes su funcionamiento. Su uso es de lo mas sencillo, obviamente necesitas la libreria de jQuery, ademas de esta libreria, y la creacion de los disparadores no puedo ser mas sencilla:

Agrega accion para Ctrl + C

$.hotkeys.add('Ctrl+c', function(){ alert('No Copiaras');});

Elimina accion para Ctrl + C

$.hotkeys.remove('Ctrl+c');

Link: Google Code | Javascript jQuery Hotkeys Plugin
Link: jQuery.HotKeys.Testing
Link: Web Resources Depot | JavaScript Keyboard Controls: js-hotkeys

• Algunas novedades para Wordpress 2.7

Porque nunca es suficiente y nuestras aplicaciones web siempre deben estar a la utlima; Carousel.us es una libreria JavaScript que te permite crear un carrusel en 3D para mostrar tu galeria de imagenes. Para lograr el efecto utiliza las librerias prototype y scriptaculous . Ademas es posible configurar parametros tales como la refleccion, el espacio entre las imagenes, la posicion del carrusel, la velocidad, etc…

Como pueden ver se ve coqueta la aplicacion; aunque de forma muy personal siento que alenta mucho la carga ademas de que si agregas otro tipo de funcionalidad se “alenteja” la pagina. Como todo ya saben utilicenlo con moderacion.

Link: Carousel.us | Demo
Link: WebAppers | Carousel.us - Javascript 3D Carousel with Scriptaculous

• jsImageFX: Agrega efectos a tus imagenes con JavaScript
• 5 Consejos para mejorar tu JavaScript
• El poder de JavaScript y Canvas
• Historia de Java y JavaScript
• Creando una encuesta dinamica con jQuery y PHP

Este tipo de funcionalidad la habia visto en el Hi5! cuando te “marcan” en las fotos. Pues bien Tipmage es una clase JavaScript que permite crear tooltips/notas sobre imagenes. (Dicen en la nota que es parecido a lo que hace Facebook image tagging)

Tipmage soporta el uso de llamadas a funciones para editar el tooltip, ademas de que puede ser personalizada usando CSS.

Link: argilla | Tipmage
Link: Web Resources Depot | Tooltips Over Images With Tipmage

• Decora tus imagenes con CSS
• Actualizacion de imagenes satelitales en Google maps
• Carousel.us: Un Carrusel 3D con JavaScript
• jsImageFX: Agrega efectos a tus imagenes con JavaScript
• Firebug a Fondo!!!

El PDF hoy por hoy se a convertido en unos de los formatos mas populares en la red y mas ahora que se a convertido en un estandar (ISO 19005-1:2005). Hace poco estaba buscando como generar un archivo PDF con PHP y me encontre con una opcion de lo mas interesante llamada ezPDF.

ezPDF (R&OS PDF Class) nos permite crear de manera dinamica documentos PDF con PHP, sin la necesidad de usar algun tipo de modulo. Su uso es de lo mas sencillo, tal como menciona su creador solo se necesita incluir una libreria a nuestro script y hacer uso de la clase ezPDF para crear nuestro archivo PDF.

Esta libreria (o clase?) no solo permite crear archivos pdf con texto plano, sino que ademas nos brinda la posibilidad de darle formato, agregarle color, imagenes, tablas y hasta dibujar en el

El siguiente codigo es un ejemplo basico en el cual creamos un archivo PDF que muestre el texto “http://seraphinux.com/”

<?php
    include('class.ezpdf.php');
	$pdf =& new Cezpdf();
	$pdf->selectFont('./font/Helvetica.afm');
	$pdf->ezText('http://seraphinux.com' , 20);
	$pdf->ezStream();
?>

La creacion es relativamente rapida y las opciones son amplias; lo mas interesante de todo esto es la parte “dinamica” ¿por que? Esta libreria usa PHP, Wordpress usa PHP… entonces podemos usar esta libreria para crear PDF’s de nuestros post en Wordpress Bueno es solo una idea (aunque ya existen plugins que hace eso mismo).

Por otra parte, es una buen opcion para alguna aplicacion web que estes desarrollando y que quieras que presente datos en PDF (recetas medicas??? en donde escuche eso).

Link: R&OS PDF Class

• iText: Libreria para crear PDF con Java
• pChart: Libreria para crear graficas
• Flotr: Libreria JavaScript para crear graficas
• ProtoChart: Graficos con Canvas y Prototype
• JS-Hotkey: Controla el teclado