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.
Raphael<br />Cross browser vector graphics<br />http://raphaeljs.com/<br />
Dynamic, interactive web graphics<br />Canvas<br />SVG – W3C standard - IE9 and non-IE<br />VML - < IE9<br />Plugins<br />...
Canvas<br />Bitmap<br />Fast, suited to animation<br />Not interactive using DOM techniques<br />
SVG/VML<br /><ul><li>Vector
DOM nodes – can add events / attributes
Scalable / remains crisp
Progressive enhancement
Design package support
Cross platform, natively supported</li></li></ul><li>Libraries<br />Libraries available that will provide a single API to ...
Dojo gfx – uses SVG /VML /Flash /Silverlight</li></li></ul><li>Raphael<br />A single javascript API for all browsers<br />...
Raphael syntax<br />http://raphaeljs.com/reference.html<br />Create your canvas:<br />var paper = Raphael(document.getElem...
Getting an SVG path string<br />Create it yourself<br />Raphael live - http://craic.com/tutorials/javascript/raphael_live/...
Adding events and attributes<br />Use event delegation on the container/canvas eg. jQuery’s delegate<br />Add a unique att...
Getting data<br />Scrape from HTML eg. data table (progressive enhancement<br />JSON<br />
Upcoming SlideShare
Loading in …5
×

101207 raphael

1,289 views

Published on

  • Be the first to comment

  • Be the first to like this

101207 raphael

  1. 1. Raphael<br />Cross browser vector graphics<br />http://raphaeljs.com/<br />
  2. 2. Dynamic, interactive web graphics<br />Canvas<br />SVG – W3C standard - IE9 and non-IE<br />VML - < IE9<br />Plugins<br />Flash<br />Silverlight<br />
  3. 3. Canvas<br />Bitmap<br />Fast, suited to animation<br />Not interactive using DOM techniques<br />
  4. 4. SVG/VML<br /><ul><li>Vector
  5. 5. DOM nodes – can add events / attributes
  6. 6. Scalable / remains crisp
  7. 7. Progressive enhancement
  8. 8. Design package support
  9. 9. Cross platform, natively supported</li></li></ul><li>Libraries<br />Libraries available that will provide a single API to cover IE and non IE:<br /><ul><li>Raphael – uses SVG / VML
  10. 10. Dojo gfx – uses SVG /VML /Flash /Silverlight</li></li></ul><li>Raphael<br />A single javascript API for all browsers<br />1 js file to include - 20Kb gzipped & minified<br />Supports drawing, gradients, animation<br />Uses SVG path notation (converts to VML if needed, behind the scenes)<br />Every shape is a DOM node so you can:<br />add attributes / events using standard javascript / jQuery (you don’t have to use Raphael to do it)<br />Show / hide / delete items easily<br />
  11. 11. Raphael syntax<br />http://raphaeljs.com/reference.html<br />Create your canvas:<br />var paper = Raphael(document.getElementById(”myCanvas"), 320, 200); <br />Draw on it:<br />varc = paper.circle(300, 200, 60);<br />varp = paper.path("M10 10 l90 90"); <br />Set attributes<br />c.attr({<br />"fill”: "#f00”,<br />“stroke-width”: 0<br />}); <br />
  12. 12. Getting an SVG path string<br />Create it yourself<br />Raphael live - http://craic.com/tutorials/javascript/raphael_live/raphael_live.html<br />Inkscape<br />From designer<br />Illustrator export<br />Relative paths are more flexible<br />
  13. 13. Adding events and attributes<br />Use event delegation on the container/canvas eg. jQuery’s delegate<br />Add a unique attribute to each node / shape, then you can retrieve more data for that node as required, from a stored object<br />
  14. 14. Getting data<br />Scrape from HTML eg. data table (progressive enhancement<br />JSON<br />
  15. 15. Performance<br />IE / VML renders slowly<br />Worse in IE8 than IE7<br />Be cautious with animations. You may need to fork your code.<br />Animate as few nodes as possible<br />Don’t use easing<br />
  16. 16. Other tips<br />Use paths with relative movements – more flexible – you can drop onto any part of canvas<br />Calculate all sizes as a proportion of the canvas dimension instead of using fixed sizes – that way you can feed your script a single measurement and the whole shape will scale<br />Store just one attribute per node – minimise DOM interaction<br />Use event delegation<br />TEST IN VML EARLY DOORS!!!!<br />
  17. 17. Lbi code / projects<br />Garanti Beta<br />Reusable graphing library. JSON powered<br />Line, pie, vertical bar, horizontal bar<br />E.ON - eonenergyfit.com<br />Dashboard<br />Lloyds<br />Pie charts<br />LBi Pulse<br />
  18. 18. Thanks!<br />Introductions / Relative strengths of SVG/ Raphael vs Canvas<br />http://www.sitepoint.com/blogs/2010/07/06/canvas-vs-svg-how-to-choose/<br />http://www.alistapart.com/articles/svg-with-a-little-help-from-raphael/<br />Tutorials / Reference<br />http://dev.opera.com/articles/view/raphael-a-javascript-api-for-svg/ - how to create an ajax loader<br />SVG notation - http://futuraprime.net/experiments/svg_path_notation/<br />Tools<br />Inkscape - http://www.inkscape.org/<br />Illustrator<br />Raphael live - http://craic.com/tutorials/javascript/raphael_live/raphael_live.html#<br />Showcases / experiments<br />http://spitleaf.com/30days/day4.html - analogue digital clock<br />http://www.janapriya.net/vis/ - gauges, LEDs<br />http://raphaeljs.com/<br />http://www.irunmywebsite.com/raphael/raphaelsource.html ('made with raphael section') <br />

×