Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

London Ajax User Group Meetup: Vector Graphics

1,504 views

Published on

Presentation for the London Ajax User Group meetup in October, 2010

Published in: Technology
  • Be the first to comment

  • Be the first to like this

London Ajax User Group Meetup: Vector Graphics

  1. 1. London Ajax User Group October 12, 2010 Saturday, October 16, 2010
  2. 2. Welcome! • About Us • Dylan Schiemann (@dylans) • Piotr Zalewa (@zalun) • Thanks to Skills Matter, JSFiddle, SitePen, Comet Daily, & O'Reilly Saturday, October 16, 2010
  3. 3. Tonight • 18:00 Meet & Greet, Stickers • 18:25 Intro &Vector Graphics Landscape • 18:40 Dylan Schiemann on DojoX GFX • 19:05 Lightning Talks • 19:15 Darren Waddell on MooTools ART • 19:55 Prizes and Future Events • 20:00 Pub Saturday, October 16, 2010
  4. 4. • In the beginning, there was ASCII art • <img /> • Microsoft andVML • Adobe, the W3C and SVG • Firefox and Opera get native SVG • Firefox, Opera and Safari get canvas • All non-IE browsers get canvas and SVG • IE9: 2011 Saturday, October 16, 2010
  5. 5. Raster vs.Vector • Raster: Rectangular grid of pixels • Pre-rendered before runtime • Vector: Mathematical representation of a shape • Rendered at runtime Saturday, October 16, 2010
  6. 6. Native vs. Plug-in • Open Protocols • No proprietary player or studio required • Use seamlessly with HTML, CSS, DOM • Clear Text: view source, SEO Saturday, October 16, 2010
  7. 7. Canvas vs. SVG • Procedural vs. DOM • Terse vs. exact • Raster vs. vector • Events are easier with SVG, Canvas is more popular Saturday, October 16, 2010
  8. 8. 2D vs. 3D • 2D • SVG, Canvas, etc. • 3D • WebGL (FF, Chrome, Safari dev builds) • replaces O3D, Canvas 3D • SVG 3D Transforms Saturday, October 16, 2010
  9. 9. CSS 3 Extensions • Bringing the most important parts of SVG to HTML+CSS! • Gradients • Transforms (2D and 3D) • Transitions • Animations • Masks • Background Canvas Saturday, October 16, 2010
  10. 10. Low-level Toolkits • Dojo GFX • MooTools ART • Raphaël • Processing Saturday, October 16, 2010
  11. 11. Raphaël • Extends SVG andVML • Great demos • Simple syntax • //Creates canvas 320 × 200 at 10, 50 • var paper = Raphael(10, 50, 320, 200); Saturday, October 16, 2010
  12. 12. Processing.js • Canvas • Port of Processing • DSL on top of JS Saturday, October 16, 2010
  13. 13. High-level Toolkits • DojoX Charting, Drawing • MooTools ART Widgets • PlotKit and many other charting projects Saturday, October 16, 2010
  14. 14. DojoX GFX Saturday, October 16, 2010
  15. 15. RaphaëlScape Saturday, October 16, 2010
  16. 16. MarkUp Saturday, October 16, 2010
  17. 17. MooTools ART Saturday, October 16, 2010
  18. 18. Prizes Saturday, October 16, 2010
  19. 19. Future Events • November 9: Performance Optimization • December 14:Widget Libraries • January 11: Unit Testing • February 8: Filling the HTML5 Gaps • March 8: Embedded Platforms • February or March: Second JSMiniConf Saturday, October 16, 2010
  20. 20. Other Events • October • HTML5 Code Camp, Oslo • IBM European WebSphere Technical Conference, Düsseldorf • November • Full Frontal, Brighton Saturday, October 16, 2010
  21. 21. Resources • Dojo Toolkit: http://dojotoolkit.org/ @dojo • London Ajax User Group: http://londonajax.com/ @london_ajax • MarkUp: http://markup.io/ @MarkupIO • MooTools ART: http://github.com/ kamicane/art and http://jsfiddle.net/ kamicane/nxNZP/ • Raphaël: http://raphaeljs.com/ @RaphaelJS and http:// peepcode.com/products/raphaeljs • SitePen: http://sitepen.com/ @sitepen • Skills Matter: http://skillsmatter.com/ @skillsmatter Saturday, October 16, 2010
  22. 22. Thanks! (to the pub) Saturday, October 16, 2010

×