Recuerdo que hace unos dias me quejaba de lo lento que podrian ser algunas Web App que usan de manera intensiva JavaScript y por ende algo de AJAX. Pues bien estoy casi apunto de tragarme mis palabras… ¿Por que?

Recuerdan que cierta empresa lanzo cierto buscador el cual usaba cierta engine (usare el termino Engien y Motor indistintamente) JavaScript… pues bien hace poco lei un articulo que analizaba esta engine, y creanme que me dejo helado… De lo que estoy hablando es del Google y su ya popular navegador Chrome, el cual usa la engine V8 para el “procesado” de JavaScript. Antes de pasar al articulo al cual hago referencia hagamos un poco de contexto.

Segun Google Code…

• … es una motor JavaScript bajo licencia OpenSource desarrollado por Google.
• … esta escrito en C++ y es usado en Google Chrome (Navegador Web bajo licencia OpenSource desarrollado por Google).
• … implementa ECMAScript una especificacion del ECMA-262 3ra edicion, y corre sobre Windows XP, Vista, Mac OS X 10.5 y Sistemas Linux que usen procesadores IA-32 o ARM
• … puede correr de manera standalone (algo asi como solito) o embebido en aplicaciones C++ (esta parte me hace imaginar tantas cosas)

Segun Wikipedia…

• … es una engine JavaScript bajo licencia OpenSource desarrollada por Google en Dinamarca e incluida en el navegador Google Chrome.
• … logra una gran rendimiento ya que compila el codigo JavaScript en codigo maquina nativo (IA-32, ARM) en lugar de generar un ByteCode. De esta manera las aplicaciones JavaScript se ejecutan a la velocidad de un binario.

Bueno ya sabemos que es V8, los punto mas descatables son:

• … esta escrito en C++ y es usado en Google Chrome (Navegador Web bajo licencia OpenSource desarrollado por Google).
• … puede correr de manera standalone (algo asi como solito) o embebido en aplicaciones C++ (esta parte me hace imaginar tantas cosas)
• … logra una gran rendimiento ya que compila el codigo JavaScript en codigo maquina nativo (IA-32, ARM) en lugar de generar un ByteCode. De esta manera las aplicaciones JavaScript se ejecutan a la velocidad de un binario.

¿Que por que es descatable? Imaginen las posibilidades… A LA VELOCIDAD DE UN BINARIO…. y COMPILADO EN C++; bueno bueno, ahora pasemos al articulo que les comentaba. Este articulo lo puedes encontrar en V8 under the hood, como bien podras darte cuenta esta en ingles, pero “no problem” las siguientes son mis pseudotraducciones de los puntos mas descatables:

… no es realmente una “clasica” VM [Virtual Machine]. No usa una representacion intermedia o un codigo de alto nivel que sea posible programar a nivel de la VM. Lo unico que entiende V8 es JavaScript y su unico objetivo es la representacion en ensamblador nativo (Intel y ARM por ahora. Por lo tanto en algunos aspectos se hacerca mas a un compilador que a la tradicional VM…

… tambien es mas que un simple compilador. Incluye un ¿generacional? (Nota: en el original es generational, pero no logro intuir a que se refiere), precisa recolector de basura, ademas de que el ensamblador generado es repasado en tiempo de ejecucion dependiendo del camino que tome el programa. Que llamen a clases ocultas permite la generalizacion de algunas llamadas lo cual permite optimizar mas…

… V8 no es como la JVM o Mono, donde es posible generar bytecode intermedio, solamente es de Javascript hacia ensamblador. Lo cual hace la compilación cruzada a Javascript una opción interesante. En teoría y con las optimizaciones suficiente, esto podría ser tan rápido como C por lo menos en algunos puntos…

En verdad que V8 es sorprendente, la gente de Mozilla dice que su engine llamado TraceMonkey sera todavia mas rapida que V8; viendo las cosas con esta perspectiva, las aplicaciones que hacen uso intensivo de JavaScript se veran altamente beneficiadas, ni que hablar de AJAX.

Nota: Ya saben, los anteriores punto fueron mis pseudotraducciones el articulo original lo pueden consultar ustedes mismos y si encuentran algun error en mi PT me dicen para modificarla.

Link: Off The Lip | V8 under the hood
Link: Google Code | Google V8 JavaScript Engine

• 9 Tips para incrementar la velocidad de tu pagina WEB
• 5 Consejos para mejorar tu JavaScript
• Geolocalizacion con Google Gears
• jsImageFX: Agrega efectos a tus imagenes con JavaScript
• Carousel.us: Un Carrusel 3D con JavaScript

Creo que dejare de pensar por el momento en doubles, flotantes, decimales y las pende….jadas de Java.

Una de las cosas mas atractivas que tiene el iPhone, el iPod y el iTunes es sin lugar a dudas su menu (para musica). Ahora imagina que tienes una aplicacion que muestra informacion sobre cd’s de musica o musica en general ¿apoco no se veria chida con un menu al estilo iTunes? Claro que si.

Pues bien esto esta al alcance de tu raton usando JS Coverflow, esta es una libreria JavaScript que te permite darle ese bonito efecto, no solo a portadas de CD’s sino a cualquier conjunto de imagenes que quieras (portadas de libros?).

El demo luce genial, solo con un detalle… la velocidad :S Yo siempre he sido de la idea de que cada cosa en su lugar… una aplicacion o efectos de este tipo se lo dejaria a Flash pero bueno esa es mi opinion. Pruebalo y dime que te parecio.

Link: radnan | JS Coverflow
Link: Sentido Web | Coverflow: visualización de imágenes estilo iPhone

• Menu estilo iPod con jQuery
• Menu deslizante con jQuery
• Menu tipo acordeon horizontal con JavaScript, sin Frameworks
• Cuantas consultas hace tu blog…
• El Pokerap, que tiempos aquellos.

Antes de que les presente la libreria JS que permite esto, dejame comentarte que es el EXIF.

EXIF: es una abreviación de “Exchangeable Image File Format“. Es un estandar para almacenar y mostrar la información sobre el formato de la imágen o de un archivo de sonido. El EXIF se encuentra dentro del mismo archivo, contiene toda la información acerca de la imagen:

• Estructura
• Tamaño
• Codificación
• Cecha de creación
• Adema de otros atributos

Este standar permite que los distintos softwares y scripts puedan leer e interpretar esta información para la manipulación de la imagen.

- FDLog.

Como quien dice si estas haciendo alguna aplicacion (WEB/Escritorio) para administrar imagenes, el EXIF te permitiria etiquetarlas (administrarlas). Solo un detalle:

Así como el EXIF puede “meterse” adentro de una fotografía, también se puede sobrescribir la imagen con la misma imagen sin el EXIF. Esto es lo que hace precisamente Photoshop cuando guarda una imagen optimizada para la web, como ésta tiene que ser lo más liviana posible se omite el exif, por lo que la foto pierde toda la información del exif.

- FDLog.

Ahora despues de enterarnos que es el EXIF, permiteme presentarte una libreria JS (la vi en Ajaxian) que nos permite extrar estos datos: ImageInfo.

Esta libreria:

…detecta el formato de la imagen y luego lee la cabecera y saca información sobre las dimensiones y profundidad de color entre otras cosas….

- Nihilogic.

Como escribia anteriormente, esta libreria seria de gran utilidad para administrar imagenes en alguna aplicacion WEB que use AJAX.

Link: Nihilogic | ImageInfo - reading image metadata with JavaScript
Link: Ajaxian | ImageInfo: reading image metadata (EXIF) with JavaScript
Link: FDLog | Exif, ¿de qué se trata?

• Decora tus imagenes con CSS
• Tipmage: Tooltips sobre tus imagenes
• Actualizacion de imagenes satelitales en Google maps
• Script para redimensionar imagenes con PHP y GD
• Wordpress Plugin: Post Relacionados

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

• Estadisticas con ProtoChart
• El poder de JavaScript y Canvas
• Dicen que…
• pChart: Libreria para crear graficas
• Google Code en Español

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
• Estadisticas con ProtoChart

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

• 101 cosas con las que entretenerte cuando no tienes internet
• Algunas novedades para Wordpress 2.7