11.Jun.2007

PlotKit - Gráficos Estadísticos SVG

Posteado en frameWorks, JavaScript, SVG a las 12:14 por RetroFOX

Entre las tareas laborales de Pinien actualmente se encuentra la implementación de Gráficos Estadísticos bajo un entorno WEB. Por este motivo me comenta de PlotKit, una interesante herramienta que nos permite realizar esta labor mediante JavaScript y gráficos vectoriales.


Ejemplo de PlotKit

Para el desarrollo utilizan MochiKIT, un buen frameWork más de javaScript. El sitio nos muestra variados ejemplos gráficos generados, como por ejemplo torta, barra, lineales, etc.

Sobre su funcionalidad tenemos que aclarar que también funciona con HTML CANVAS. CANVAS es un elemento no estándar que permite dibujar gráficos directamente sobre el HTML; esto lo pone en desventaja respecto a SVG ya que este sí es un estándar regido por la W3C. Y hablando de bueyes perdidos … comentamos sobre la marcha, por si no lo sabes, que nuestro querido Internet Explorer NO SOPORTA SVG en forma nativa lo que implica que debemos instalar un plugIn (de Adobe por ejemplo) para poder correr la aplicación.
Este es un buen ejemplo de como hacer las cosas mal.

Descartado estos pequeños/grandes inconvenientes, nos queda por decir que es realmente fácil de implementar en nuestros proyectos, funcional y liviano.

29.Mar.2007

InkScape - Editor SVG Open Source

Posteado en SVG a las 13:33 por RetroFOX


InkScape

Inkscape es un editor de gráficos vectoriales de código abierto, con capacidades similares a Illustrator, Freehand, CorelDraw o Xara X, usando el estándar de la W3C: el formato de archivo Scalable Vector Graphics (SVG).

Realmente un muy buen editor. Poco a poco el formato .svg se está convirtiendo en el único formato de imágenes vectoriales soportado en forma nativa por los browsers. Opera fue el pionero en esto seguido por una gran mayoría entre los que se encuentra FireFox. Lá única prosti relajada termina siendo Internet Explorer. En fin … pienso que por las buenas o por las malas tendrá en un futuro soportar el formato. Por lo pronto existen plugins gratuitos que ejecutan los scripts SVG. Uno de ellos es de Adobe. Esta es la página de instalación es español.

Volviendo a InkScape, veamos una curva de crecimiento construida por Google Trends. El crecimiento es notable.


InkScape en Google Trends


Pantalla InkScape

El uso del editor es intuitivo y claro. Para quienes tengan experiencia en este tipo de trabajo les resultará sumamente sencillo la edición en InkScape. Al sitio web oficial se puede acceder en 7 idiomas disponibles donde el castellano es uno de ellos. Tiene una página de documentación en la cual podemos acceder a tutoriales y manuales. Esta es una guía de iniciación en español.

Este es el logo del blog en .svg editado por mi con InkScape.Nada del otro mundo. Finalizando, InkScape se encuentra en los repositorios oficiales de Ubuntu, por lo que si este es tu sistema operativo, no tendrás la menor complejidad para su instalación.

08.Feb.2007

Galería de Iconos SVG Tango!

Posteado en SVG a las 12:52 por RetroFOX


Tango - Galería SVG

Continuando con gráficos SVG en Tango Desktop Proyect existe una interesante librería de gráficos SVG. Puede serle útil a mas de uno.

06.Feb.2007

Gráficos Vectoriales Escalables (SVG)

Posteado en SVG a las 15:52 por RetroFOX

Tigre SVG
Tigre SVG

Los gráficos vectoriales tienen ventajas y desventajas frente a los mapas de bits, como todos sabemos. Lo cierto es que hasta el momento no hay un formato de imagen vectorial establecido en la www donde un buen porcentaje de browsers lo soporten, al menos hasta ahora. SVG es la sigla correspondiente a Scalable Vectorial Graphics. Hay un buen artí­culo en esta web Manual de Diseño Digital, altamente recomendable para empezar una relación que puede durar mucho tiempo.
Basicamente: El archivo es Texto puro, editable, y con mucho potencial en este entorno.

Ojeando encontré algunos ejemplos. Realmente impresionantes.
Por ejemplo, la cabeza del tigre o el cachorro de león. Texto puro amigos.
Pero SVG no es tan solo un formato de imagen. También se puede agregar ínter actividad a la imagen. Por ejemplo este Tetris.

Tetris SVG
Tetris SVG

Pueden encontrar mas ejemplos en croczilla. Otro sitio interesante es carto.net; esta es la página de ejemplos.