London Ajax User Group Meetup: Vector Graphics
22
London Ajax User Group October 12, 2010 Saturday, October 16, 2010
-
Upload
dylanks -
Category
Technology
-
view
1.065 -
download
2
description
Presentation for the London Ajax User Group meetup in October, 2010
Transcript of London Ajax User Group Meetup: Vector Graphics
London Ajax User GroupOctober 12, 2010
Saturday, October 16, 2010
Welcome!
• About Us
• Dylan Schiemann (@dylans)
• Piotr Zalewa (@zalun)
• Thanks to Skills Matter, JSFiddle, SitePen, Comet Daily, & O'Reilly
Saturday, October 16, 2010
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
• In the beginning, there was ASCII art
• <img />
• Microsoft and VML
• 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
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
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
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
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
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
Low-level Toolkits
• Dojo GFX
• MooTools ART
• Raphaël
• Processing
Saturday, October 16, 2010
Raphaël
• Extends SVG and VML
• Great demos
• Simple syntax
• //Creates canvas 320 × 200 at 10, 50
• var paper = Raphael(10, 50, 320, 200);
Saturday, October 16, 2010
Processing.js
• Canvas
• Port of Processing
• DSL on top of JS
Saturday, October 16, 2010
High-level Toolkits
• DojoX Charting, Drawing
• MooTools ART Widgets
• PlotKit and many other charting projects
Saturday, October 16, 2010
DojoX GFXSaturday, October 16, 2010
RaphaëlScapeSaturday, October 16, 2010
MarkUpSaturday, October 16, 2010
MooTools ARTSaturday, October 16, 2010
PrizesSaturday, October 16, 2010
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
Other Events
• October
• HTML5 Code Camp, Oslo
• IBM European WebSphere Technical Conference, Düsseldorf
• November
• Full Frontal, Brighton
Saturday, October 16, 2010
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
Thanks!(to the pub)
Saturday, October 16, 2010
