miércoles, 21 de enero de 2009

Cross browser SVG: gráficos vectoriales en tu navegador

Esta semana he estado experimentando con SVG, es un lenguaje para la creación de gráficos 2D vectoriales y aplicaciones gráficas XML creado por la w3c. Es bastante fácil de utilizar y permite manejo de eventos y animaciones, incluso animaciones rollo imagen que recorre una ruta y elementos tipo spline y cosas así.
Obviamente, en Explorer no va, para el cual existe otra especificación llamada VML, para ello hay dos visores que se pueden instalar, uno de Adobe, y otro llamado Renesis... bueno, no es nativo como en otros navegadores, pero si funciona... aunque para obligar a un cliente a instalarse un plugin, antes le digo que se instale un navegador que vaya bien. Pero vamos, eso son formas de pensar.
Existen varias librerías y frameworks que permiten la creación de este tipo de gráfico, yo he probado tres y al final me he quedado con la tercera, aquí os las pongo con alguna anotación sobre mi punto de vista:
  • jQuery: he visto dos soluciones:
    • La de una página llamada openstudio: con este no tuve problemas de compatibilidad, utiliza el anterior y si es Explorer utiliza el método de uno llamado Walter Zorn. Pero tuve que rechazarla por no permitirme trabajar con eventos, no sé por qué pero cuando hacía, por ejemplo:
      variable.onclick = function(){alert("como molo!!");};
      Nada mas arrancar el navegador me ejecutaba el alert y ya no me iba :|.
  • Raphaël: ¡no! no es el cantante ese de "yo soy aqueeel.." por el que nuestras madres se derretían cuando sonreía, es una librería que la verdad me ha gustado bastante. Es compatible con los navegadores que he podido probar, Explorer 6, Firefox y Opera. La combiné con prototype y scriptaculous (esta última por necesitar el efecto de dragndrop) y la verdad es que muy bien, es simple, pero era lo que necesitaba para lo que tenía que hacer. En su web hay ejemplos que parecen hechos por flash o algo similar, pero no, está hecho todo a base de javascript.
Mientras buscaba una librería que me gustara, dí con algunas específicas, como PlotKit especializada en la creación de gráficos, en su página encontramos una demo que muestra distintos tipos de gráficos que se pueden hacer.


La w3c tiene un programita llamado Amaya que es gratuito, para la realización de los gráficos de forma visual. Uuumm... tendré que probarla..

En futuros posts os pondré pruebas que voy haciendo.

No hay comentarios:

Publicar un comentario