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
- Inkscape with Tech Tips and Tricks
- User interface prototype to SVG web app with rapid prototyping
- Using Canvas in SVG
- Workshop on SMIL animation in SVG
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.
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.
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!
1. SVG motivation
2. User interface prototype
3. UI prototype to SVG
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).
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.
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.
- Include Canvas via foreignObject in SVG
- Basic Canvas drawing operations
- geometry objects
- colors, gradients and patterns
- scale, rotate, translate objects
- compositing methods
- Simple Canvas animations with
- Advanved Image drawing and exploring
- add images or parts of them with
- read rgba pixel values with
- modify rgba pixel values with
- add images or parts of them with
Samuel Clay (Daylife, Engineer/Maker)
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:
- 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:
- 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 Raphaël resources to use in their own SVG projects.
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:
- Overview of SMIL
- Basic SMIL animation
- Multiple animations and timing
- Varieties of animation
- animation of multi-valued attributes
- Following paths
- Animation of transformations
- Animation of non-numeric attributes
- Starting an animation, with time or events, and using <set> to set the value of an attribute
- Stopping an animation
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).