Jul 14

Presenting at SVG Open 2009: Workshop on Raphaël JS

We were accepted! Here is our finished abstract, also available on the SVG Open 2009 workshop page: http://www.svgopen.org/2009/registration.php?section=workshops.

Dmitry Baranovskiy - http://dmitry.baranovskiy.com - dmitry@baranovskiy.com
Samuel Clay - http://www.ofbrooklyn.com - samuel@ofbrooklyn.com

The power of web browsers has reached the point when it is easy to use native vector graphics without any 3rd party plugins and installs. In this session, we will discover how to build rich graphics in your web app using Raphal (http://raphaeljs.com/) JavaScript vector library, the features Raphal provides, and walk through how to apply these features into a fully built module.

This course will cover a number of features ranging in complexity from basic layout to event-driven interaction. The module will be a moderately complex application consisting of parts SVG, Javascript, jQuery, and HTML. While Javascript experience is expected, it is not necessary, considering the syntax of Javascript in this capacity is not far different than many other languages.

The module, which will be used to demonstrate a number of techniques in creating both interactive and layered elements in SVG, will be sufficiently advanced as to cover many topics, but so in-depth that it cannot be built entirely from scratch in the time allotted for the course--including time used for demonstrating Raphal.

The 150 minute course will consist of 3 parts, with questions taken throughout:

  • Introduction to Raphael (35 min)
    • 5 minutes: Introduction and Overview of the People Connection widget
    • 10 minutes: Looking at the Raphael JS Library's methods and documentation
    • 10 minutes: Setting up data for the module to be used in drawing
    • 10 minutes: Loading data into Raphael
  • Drawing the widget (45 min)
    • 10 minutes: Images
    • 15 minutes: Shapes
    • 20 minutes: Lines, straight and curved (quadratic and bicubic)
  • Interaction model (60 min)
    • 20 minutes: Handling user/triggered events
    • 15 minutes: Animation
    • 25 minutes: Interacting with the DOM and jQuery

There is a time buffer built into each part, and if there is extra time, we will be prepared to discuss:

  • Raphael versus other SVG/Javascript libraries
  • Other projects built on Raphael
  • Browser compatibility with Raphael

For each section of the course, we plan to discuss:

  • Implementation and coding conventions
  • Potential pitfalls with certain techniques (browser incompatibilities, misconceptions, and common mistakes)
  • Building the widget by coding in real-time (and not using blobs of code already written).

The flow of this walk-through course will be aligned with the building of the module, where we will start with a empty file and progress over each step used in creating the overall effect and feel of the finished widget. Each piece of the widget puzzle will be complemented with a demonstration of the incremental improvement. At the end of the course, a complete module, with all of its pieces, will be fully functional and fully explained. Participants will also have all of these Raphal resources to use in their own SVG projects.


Comments are closed.

That's all the comments I'm taking for this post. Email me your thoughts: blog+comments@ofbrooklyn.com.

Samuel Clay is the founder of NewsBlur, a personal RSS news reader for web, iOS, and Android. He is also the founder of Turn Touch, beautiful control for your smart home.

He lives in San Francisco, California. In another life in New York, he worked at the New York Times on DocumentCloud, an open-source repository of primary source documents contributed by journalists.

You can read about his past and present projects at samuelclay.com.

Follow @samuelclay on Twitter.

You can email Samuel at samuel@ofbrooklyn.com. He loves receiving email from new people. Who doesn't?