Workshops

Workshops will be held on Monday, October 5, after the main conference. The venue is provided by IBM at the address 4400 North First Street, San Jose, CA, 95134. Note that some online mapping services (including Google maps) provide a wrong location if you just type in the address, so please use the link provided above for printing maps and directions. For your convenience we also included directions below.

There are six workshops, each is 150 minutes in length, with two parallel tracks. Participants are encouraged to bring along their own laptops for hands on exercises. There will be additional PCs provided in the lab for those who cannot use their own laptiop. The workshop fee is US $70.- per person. This includes participation in up to three 150 minute workshops, lunch and coffee breaks. Please note that the workshop list may still change slightly.

List of Workshops:


Advanced Dojo GFX

Eugene Lazutkin

Short introduction to Dojo GFX and Dojo Charting.

Advanced GFX topics: grouping and transformations, event processing, generating SVG in any browser and submitting them to the server for further processing.

Advanced Charting: actors, scripting interactive charts, dynamically updated charts, saving charts as SVG.


Inkscape with Tech Tips and Tricks

Jon Cruz (Inkscape)

This tutorial will provide an introduction to Inkscape, the Open Source, cross-platform vector graphic SVG drawing tool. The first half will cover basics of the interface including all the tools, and how to use them in various ways to create vector graphics. The second half then delves into various technical aspects of Inkscape and SVG, including writing Inkscape extensions, creating SVG from code and scripts, manipulating SVG with XSLT and deploying SVG in various situations.

Those new to creating or integrating vector graphics should be able to get started by the end of the tutorial, while those already familiar with other tools should gain the differences of Inkscape and SVG and become productive quickly. Technical aspects will provide artists, web designers and developers with insights on how to gain from using SVG in many roles. These range from merely a graphic asset source format through to delivering interactive flash alternatives.


User interface prototype to SVG web app with rapid prototyping

Samuli Kaipiainen (Department of Computer Science / University of Helsinki, ) and Matti Paksula (Department of Computer Science / University of Helsinki)

*UPDATED* : This workshop is also suitable for beginners! We have plenty of supporting materials and also ideas to share with everybody!

150 minutes of rapid prototyping with SVG!

OUTLINE

1. SVG motivation

2. User interface prototype

3. UI prototype to SVG

4. JavaScript/PottisJS

5. Done, let's see!

First there's a short demo of SVG user interfaces, a small application we have created.

Next there's small groups (of three). Each will come up with a fast idea for a small "richly graphical" web application. Even a small game is OK. Maybe picking apples from a tree into a basket. It can't be anything big, there's no time.

Then we'll make a fast (paper) prototype for the user interface. We'll implement the prototype with SVG using Inkscape (unless you already know what software to use).

Finally, we'll script the SVG with JavaScript using libraries to speed up the process, creating a working user interface and web application prototype.

All this in 150 minutes. It might interest everyone to keep the fun going for a full day, but 150 minutes is no problem. It will be great mayhem and an interesting rapid prototyping experience for everyone.


Using Canvas in SVG

Klaus Förster (University of Innsbruck, Department of Geography)

This workshop will show, how you can integrate Canvas in SVG. It will cover a compact introduction to Canvas, demonstrate how animations work in Canvas and examine capabilities to read, modify and write rgba pixel values of images that have been drawn onto the Canvas. The course applies a hands-on approach and requires intermediate knowledge of scripting.

Contents

  1. Include Canvas via foreignObject in SVG
  2. Basic Canvas drawing operations
    • geometry objects
    • colors, gradients and patterns
    • scale, rotate, translate objects
    • compositing methods
  3. Simple Canvas animations with setInterval
  4. Advanved Image drawing and exploring
    • add images or parts of them with drawImage
    • read rgba pixel values with getImageData
    • modify rgba pixel values with putImageData

Using Raphael Javascript Library to write cross-browser interactive SVG and VML

Samuel Clay (Daylife, Engineer/Maker)

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 Raphaël (http://raphaeljs.com/) JavaScript vector library, the features Raphaël 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 Raphaël.

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

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

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

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 Raphaël resources to use in their own SVG projects.


Workshop on SMIL animation in SVG

David Dailey (Slippery Rock University, Professor of Computer Science)

SMIL animation provides one of the most expressive aspects of SVG. It has several major benefits:

  • It simplifies the process of writing code for animation (requiring less code and less complexity)
  • The code is more portable to different hardware platforms
  • It can facilitate learning about certain complex features in SVG.
  • It gives us insights into models of declarative programming that are likely to be sprouting in many contexts in coming years.

This workshop will present basic mechanisms of using the various aspects of SMIL animation in SVG: the <animate>, <set>, <animateTransform> and other basic SMIL tags. Herewith a tentative outline:

  1. Overview of SMIL
  2. Comparison with JavaScript animation
  3. Basic SMIL animation
  4. Multiple animations and timing
    • keyTimes
    • keySplines
  5. Varieties of animation
  6. animation of multi-valued attributes
  7. Following paths
  8. Animation of transformations
  9. Animation of non-numeric attributes
  10. Starting an animation, with time or events, and using <set> to set the value of an attribute
  11. Stopping an animation
  12. Interaction between SMIL and JavaScript

 


Directions

From Cupertino

Take Lawrence Expressway north and go 4.8 miles to 237 and head east towards Milpitas for 2.3 miles. Take the North First Street exit and head north, you’ll now be going over 237. We are on the right side - 4400 North First St.

From Morgan Hill/Gilroy

Take highway 101 and head North. Take the 880 highway exit, right and head towards Oakland. Go 4.1 miles to 237 and go West onto 237. Go 2.4 miles to the North First Street exit, turn right. We are on the right side - 4400 North First St.

From San Jose Airport

Get onto North/West 87 (Guadalupe Parkway) and take ramp onto highway 101, towards San Francisco. Take the Great America Parkway/Bowers exit and head right. Keep straight onto Great America Parkway for 1.9 miles. Take 237, right, towards Milpitas for 1.0 miles and take the North First Street exit and head North. You’ll now be going over 237. We are on the right side – 4400 North First St.

From San Francisco Airport

Get onto highway 101 and head South towards San Jose. Go 26.7 miles to 237, towards Milpitas. Go 4.7 miles to the North First Street exit and head North. You’ll now be going over 237. We are on the right side - 4400 North First St.

From Oakland Airport/ East Bay

Exit airport onto highway 880 South, go 26.3 miles to 237 West. Go 2.4 miles to the North First Street exit, turn right. We are on the right side, 4400 North First St. The entrance is on the south side of the building (the highway 237 side of the building).