11/09/2013

Paper.js: gráficos vectoriales con HTML5 y JavaScript

Paper.js: gráficos vectoriales con HTML5 y JavaScript

En algunas de sus aplicaciones, Flash está lejos de desaparecer a pesar del avance de HTML5. Sin embargo, a medida que este nuevo estándar es adoptado surgen nuevas herramientas que, en otros casos, vuelven su uso más conveniente que el de la popular plataforma de Adobe.

HTML5 incorpora el elemento Canvas, que funciona como un lienzo para dibujar gráficos vectoriales a través de un lenguaje de scripting. Casi siempre, el elegido es JavaScript. Aunque no reemplazan a las fotografías, los gráficos vectoriales sí son ideales cuando se desea insertar dibujos simples o elementos geométricos que no se pixelen al cambiar de tamaño. Además, Canvas implementa esta tecnología sin recurrir al formato SVG, no soportado por algunas versiones recientes de navegadores móviles.

Para facilitar la creación de gráficos a través de esta combinación existen varias herramientas. Una de las más conocidas es Paper.js, un framework para crear animaciones y gráficos interactivos a partir de Canvas y JavaScript. Es la evolución de Scriptographer, un plugin para Adobe Illustrator que permite crear y modificar gráficos a partir de funciones en JavaScript.

Paper.js ofrece grandes características:

  • La posibilidad de crear gráficos interactivos con entrada a través de mouse, teclado o contacto dactilar.
  • Un fácil manejo de curvas y segmentos.
  • Una fuerte base de geometría que permite trabajar más fácilmente con posiciones, movimientos y vectores.
  • PaperScript, una extensión que permite ejecutar múltiples scripts separando adecuadamente sus ámbitos.
  • Herramientas para agregar increíbles efectos sobre archivos de imagen, como si estuviéramos usando un editor visual en línea.

El sitio oficial del proyecto cuenta con una asombrosa galería de ejemplos, donde podemos desplazar objetos guiándolos con el mouse o el teclado, realizar dibujos sobre la pantalla, distorsionar formas a voluntad o, disfrutar de animaciones psicodélicas. A pesar de todo, hay que recordar que algunos navegadores antiguos no soportan el elemento Canvas, por lo que no son compatibles con esta tecnología.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce