Raphaël and You

3,865 views
3,547 views

Published on

This is the Raphaël talk that I gave to RubyNation on April 1, 2011.

Published in: Technology
4 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total views
3,865
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
24
Comments
4
Likes
4
Embeds 0
No embeds

No notes for slide

Raphaël and You

  1. 1. RAPHAËL AND YOU Trotter Cashion RubyNation 2011
  2. 2. THIS IS ON THE INTERNET!•Slideshare - http://www.slideshare.net/trotter/raphal-rubynation•My Bloggy Blog - http://trottercashion.com
  3. 3. IT’S ME!
  4. 4. CO-FOUNDER http://mashion.net
  5. 5. @CASHION http://www.charlesheflin.com/wp-content/uploads/2010/06/fail-whale.jpg
  6. 6. github.com/trotter http://gems.github.com/octocat.png
  7. 7. RAPHAËL’S DADhttp://dmitry.baranovskiy.com/ http://www.flickr.com/photos/lachlanhardy/435025107/in/photostream/
  8. 8. COMES FROM A LAND DOWN UNDER http://images.coveralia.com/audio/m/Men_At_Work-Super_Hits-Frontal.jpg
  9. 9. SENCHA http://www.blackbambu.com/wp-content/uploads/2011/02/sencha-logo.png
  10. 10. “RAPHAËL IS A SMALL JAVASCRIPTLIBRARY THAT SHOULD SIMPLIFY YOUR WORK WITH VECTOR GRAPHICS ON THE WEB.” http://raphaeljs.com/
  11. 11. “SCALABLE VECTOR GRAPHICS (SVG) IS A FAMILY OFSPECIFICATIONS OF AN XML-BASEDFILE FORMAT FOR DESCRIBING TWO- DIMENSIONAL VECTOR GRAPHICS, BOTH STATIC AND DYNAMIC.” http://en.wikipedia.org/wiki/Scalable_Vector_Graphics
  12. 12. “VECTOR MARKUP LANGUAGE(VML) IS A DEPRECATED XMLLANGUAGE USED TO PRODUCE VECTOR GRAPHICS.” http://en.wikipedia.org/wiki/VML
  13. 13. VECTOR GRAPHICSSVG VML Throws never ending deprecation parties.
  14. 14. SMALL - 60KB*120 90 60 30 0 Socket.IO Raphaël jQuery YUI * 20Kb with GZIP
  15. 15. SIMPLEr = Raphael("somediv", 100, 100);rect = r.rect(20, 20, 50, 50);setInterval(function () { rect.rotate(1);}, 10);
  16. 16. THE COMPETITION The Canvas Part
  17. 17. FOR YOUR MANAGER Raphaël Canvas FlashTiny Download x x Fast x x ? Open x x All Browsers x x Mobile ? x Shapes x x
  18. 18. Everything is a node and can be treated likea normal DOM element. http://www.comicvsaudience.net/images/dom.jpg
  19. 19. Yes... this means binding with jQuery is fair game.
  20. 20. RAPHAËLEXAMPLE TIME! http://fc07.deviantart.net/fs71/f/2010/363/4/e/peanut_butter_jelly_time_8dddd_by_mariomario54321-d35zla9.png
  21. 21. NEW YORK TIMES
  22. 22. RECTANGLES, HOW DO THEY WORK? r = Raphael("jobs-graph", 640, 120); rect = r.rect(481, 30, 7, 90); rect.attr({stroke: "none",            fill: "#446093"}); This one
  23. 23. TEXT, HOW DO THEY WORK? r = Raphael("jobs-graph", 640, 140); text = r.text(490, 130, "CLINTON"); text.attr({font: "8px Courier",            fill: "#9c9c9b"}); Hi Bill!
  24. 24. THE INVISIBLE HOVER 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"}); }); Only the black line for now
  25. 25. EXPECT A BLOG POST ON CALLOUTS http://trottercashion.comThe Callout
  26. 26. WALL STREET JOURNAL
  27. 27. STATES ARE PATHSr = 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"});
  28. 28. 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!
  29. 29. MAKE IT BIGGER!*path.animate({scale: [2, 2]}, 1000); *WSJ actually does much more crazy than this
  30. 30. NISSAN
  31. 31. IMAGES, HOW DO THEY WORK? r = Raphael("nissan", 1264, 568); r.image( "/images/learn/nodes/6/6i1.png", 672, 301, 48, 48 ); This one
  32. 32. THE IMAGE FROM BEFORE... circle.attr({ fill: "270-#58a0ff-#5fe2fe",   stroke: "none" });This could have been a circle!
  33. 33. 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!
  34. 34. HOW DO WE FIX THE LINE? 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); Transparency reveals we lose!
  35. 35. 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.
  36. 36. RAPHAËL LINKS•Raphaël - http://raphaeljs.com•Testing - http://bit.ly/raphael-testing•More this month... - http://trottercashion.com
  37. 37. EXAMPLE SITES•New York Times - http://nyti.ms/eoxtC6•Wall Street Journal - http://on.wsj.com/hMsmqW•Nissan - http://bit.ly/fJ2zPb
  38. 38. THANK YOU!

×