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