RAPHAËL AND YOUTrotter Cashion

RubyNation 2011

THIS IS ON THE INTERNET!

•Slideshare - http://www.slideshare.net/trotter/raphal-rubynation

•My Bloggy Blog - http://trottercashion.com

IT’S ME!

CO-FOUNDER

http://mashion.net

http://www.charlesheflin.com/wp-content/uploads/2010/06/fail-whale.jpg

@CASHION

http://gems.github.com/octocat.png

github.com/trotter

http://www.flickr.com/photos/lachlanhardy/435025107/in/photostream/

RAPHAËL’S DADhttp://dmitry.baranovskiy.com/

http://images.coveralia.com/audio/m/Men_At_Work-Super_Hits-Frontal.jpg

COMES FROM A LAND DOWN UNDER

http://www.blackbambu.com/wp-content/uploads/2011/02/sencha-logo.png

SENCHA

“RAPHAËL IS A SMALL JAVASCRIPT LIBRARY THAT SHOULD SIMPLIFY

YOUR WORK WITH VECTOR GRAPHICS ON THE WEB.”

http://raphaeljs.com/

“SCALABLE VECTOR GRAPHICS (SVG) IS A FAMILY OF

SPECIFICATIONS OF AN XML-BASED FILE FORMAT FOR DESCRIBING TWO-DIMENSIONAL VECTOR GRAPHICS,

BOTH STATIC AND DYNAMIC.”

http://en.wikipedia.org/wiki/Scalable_Vector_Graphics

“VECTOR MARKUP LANGUAGE (VML) IS A DEPRECATED XML LANGUAGE USED TO PRODUCE

VECTOR GRAPHICS.”

http://en.wikipedia.org/wiki/VML

SVG VML

VECTOR GRAPHICS

Throws never ending deprecation parties.

SMALL - 60KB*

0

30

60

90

120

Socket.IO Raphaël jQuery YUI

* 20Kb with GZIP

SIMPLE

r = Raphael("somediv", 100, 100);rect = r.rect(20, 20, 50, 50);

setInterval(function () { rect.rotate(1);}, 10);

THE COMPETITION

The Canvas Part

FOR YOUR MANAGER

Raphaël Canvas Flash

Tiny Download

Fast

Open

All Browsers

Mobile

Shapes

x x

x x ?

x x

x x

? x

x x

http://www.comicvsaudience.net/images/dom.jpg

Everything is a node and can be treated like a normal DOM

element.

Yes... this means binding with jQuery is fair game.

http://fc07.deviantart.net/fs71/f/2010/363/4/e/peanut_butter_jelly_time_8dddd_by_mariomario54321-d35zla9.png

RAPHAËL EXAMPLE TIME!

NEW YORK TIMES

RECTANGLES, HOW DO THEY WORK?

This one

r = Raphael("jobs-graph", 640, 120);

rect = r.rect(481, 30, 7, 90);rect.attr({stroke: "none",           fill: "#446093"});

TEXT, HOW DO THEY WORK?

Hi Bill!

r = Raphael("jobs-graph", 640, 140);

text = r.text(490, 130, "CLINTON");text.attr({font: "8px Courier",           fill: "#9c9c9b"});

THE INVISIBLE HOVER

Only the black line for now

hover = r.rect(481, 0, 8, 120);hover.attr({stroke: "none",            "fill": "#fff",            "fill-opacity": 0});

$(hover.node).hover(function () {  rect.attr({"stroke": "#000"});}, function () {  rect.attr({"stroke": "none"});});

EXPECT A BLOG POST ON CALLOUTS

http://trottercashion.com

The Callout

WALL STREET JOURNAL

STATES ARE PATHS

r = Raphael("usa", 637, 432);path = r.path("M352,226L401,224L403,227L399,232L407,231L408,233L404,235L406,236L405,237L405,238L404,238L404,240L403,239L402,240L403,240L402,242L404,244L401,246L401,248L399,248L400,250L399,249L398,250L399,251L398,251L398,255L397,256L396,256L395,258L394,257L396,259L394,259L395,260L394,262L393,261L394,264L392,265L394,266L391,266L392,267L391,267L391,269L393,269L392,270L393,269L392,270L393,272L394,271L393,273L392,274L392,275L358,276L358,269L354,269L353,268L353,242L350,226L352,226Z");path.attr({fill: "#3081c2",           stroke: "#828282"});

STATES ARE PATHS

r = Raphael("usa", 637, 432);path = r.path( "M352,226 L401,224 L403,227 Z");path.attr({fill: "#3081c2",           stroke: "#828282"});

I grew up here!

MAKE IT BIGGER!*

path.animate({scale: [2, 2]}, 1000);

*WSJ actually does much more crazy than this

NISSAN

IMAGES, HOW DO THEY WORK?

r = Raphael("nissan", 1264, 568);r.image( "/images/learn/nodes/6/6i1.png", 672, 301, 48, 48);

This one

THE IMAGE FROM BEFORE...

This could have been a circle!

circle.attr({ fill: "270-#58a0ff-#5fe2fe",  stroke: "none"});

CIRCLES, HOW DO THEY WORK?

circle = r.circle(213, 244, 5);circle.attr({stroke: "#a2c9e3",             "stroke-width": 4,             "stroke-opacity": 0.6});

Transparency for teh win!

HOW DO WE FIX THE LINE?

Transparency reveals we lose!

rad = 30 * Math.PI / 180;startX = Math.cos(rad) * 7 + 213;startY = Math.sin(rad) * 7 + 244;path = ["M", startX, startY, "l 300,100"];r.path(path);

WHIPLASH!*

circle.click(function () {  circle.animate({cx: 513,                  cy: 344},                 1000,                 "elastic");});

*Nissan actually swaps the circle out for an animated gif, which is then animated w/ Raphaël.

RAPHAËL LINKS

•Raphaël - http://raphaeljs.com

•Testing - http://bit.ly/raphael-testing

•More this month... - http://trottercashion.com

EXAMPLE SITES

•New York Times - http://nyti.ms/eoxtC6

•Wall Street Journal - http://on.wsj.com/hMsmqW

•Nissan - http://bit.ly/fJ2zPb

THANK YOU!