SVG Open / Carto.net
|
|
Workshops
Workshops will be held on Thursday, July 18 (9-17 h), right after the main conference. The following workshops will be organized:
- SVG for Beginners
- Creating Interactive SVG-Based Maps
- SVG and Animation (SMIL, script based)
- Scripting SVG (Clientside with ECMA-Javascript and DOM)
- Serverside SVG Generation (with Perl)
- Introduction to GML (GML and SVG integration)
Workshop Descriptions
SVG for Beginners
Organizers: Tobias Dahinden, Andreas Neumann
Aim of the Workshop
Learning SVG and getting to know it's possibilities (graphical quality, interactivity, animation)
Target Audience
SVG Beginners
Contents of the Workshop
- SVG Basics
- SVG Concepts
- Applications for SVG
- SVG's features and possibilities
- Presenting SVG Workflows and Ways to generate and convert SVG
- Graphics software to generate and export SVG
- SVG Authoring systems (Jasc WebDRAW)
- Text- and XML-Editors
- File-Format conversions
- SVG printer driver (SVG-Maker)
- Serverside Generation
- Combination of several tools
- Learning the SVG Basics
- Learning the basic geometry
- Styling graphics
- Coordinate Systems, Units, Transformations
- Using Text
- Using Symbols
- Introduction to Advanced Techniques (not in depth, for indepth see the other workshops)
- Use of Filters
- Simple declarative Animations
- Interactivity and Linking
- Clientside Scripting (ECMA Javascript)
- Code Optimization
- SVG Ressources (Where to find additional examples, tutorials, tools, etc.)
Creating Interactive SVG-Based Maps
Organizers: Martin Galanda, Andréas M. Winter
Aim of the Workshop
How to build svg maps with interfaces having only some statistical data, some GIS data, your text-editor and browser
Target Audience
People with basic knowledge in GIS, cartography and interests in XML and client scripting
NB: server side svg map generation will be discussed but won't be handled in the training part on the computer
Contents of the Workshop
- Map conception
- Designing the screenplay
- Designing the map layout
- Designing the interface
- Geometry
- Getting ASCII out of your preferred GIS or DTP
- Transforming it into SVG
- Cleaning up your code
- Statistical Data
- Joining it with the geometry
- Building the Scene
- HTML framework
- SVG content
- JavaScript Code and Data-Arrays
- Debugging
- Cleaning Code
- Compatibility
- Closing
- How we could have approached it differently
- How all this may get easier in future
SVG and Animation (SMIL, script based)
Organizers: Stefan Goessner, Michel Hirtzler
Aim of the Workshop
How to build animations, using only your text-editor
Target Audience
People with basic knowledge of SVG and JavaScript/ECMAScript
Contents of the Workshop
- Declarative Animation Basics
- What can be animated ?
- Controlling the time
- Predefined animation values
- Event driven Animation
- Script Animation Basics
- Core DOM and SVG DOM
- Controlling the time
- Modifying attributes
- Event driven Animation
- Combining SMIL and Script Animation
- Animation Principles
- Timing and Synchronization
- KeyFrames
- Controlling Speed
- Kinematic
- Examples
- Using filter for effects on pictures
- Morphing
- Progressive Drawing
- Text animations
- Animations with clipPath
Scripting SVG (Clientside with ECMA-Javascript and DOM)
Organizers: Tobias Hauser, Christian Wenz
Aim of the Workshop
To present how to combine the powers of SVG and client-side scripting
Target Audience
People with basic knowledge of SVG and basic knowledge of JavaScript/ECMAScript
Contents of the Workshop
- Introduction to DOM (according to W3C)
- The DOM tree
- Event Handling
- Important Functions
- The SVG DOM - what is different, what is new
- Interfaces
- Special Functions (e.g. .getSVGDocument())
- ECMAScript (Javascript)
- What is it?
- How to use it within SVG (e.g. within the <script>-element
- SVG Viewer Support
- Accessing SVG DOM elements
- By walking the tree
- By using .getElementById()
- Universal code to access any SVG structure
- Modifying SVG
- By manipulating the DOM, and why almost no-one is using that
- By setting/modifying/removing attributes
- Animation with SVG
- Short recap: the power of SVG animation
- Going beyond: animation using JavaScript
- SVG <-> HTML Integration
- Incorporating SVG into HTML for a variety of web browsers
- Accessing SVG documents from HTML/JavaScript code
- Accessing HTML elements from within SVG script code
Serverside SVG Generation (with Perl)
Organizers: Ronan Oger, Klaus Förster
Target Audience
People somewhat familiar with a scripting language such as perl, python,ruby or people familiar with an object-oriented program.
Part I: An Introduction to Server-Side SVG Generation and Parsing using Perl and Other Languages
Aim of the Workshop
Attendees will be taken through a survey of server-side SVG generation techniques. The workshop will revolve around the use of the Perl SVG modules. Attendees will learn to generate a variety of SVG images starting with a simple red dot on a white background, and progressing through to complex images with imported and re-used components.
Contents Part I
The tutorial will cover the following concepts with examples:
- Overview of the current options for server-side generation
- Creating a simple SVG Drawing
- Adding Primitives: Ellipse, Rectangle, Ployline, Polygon
- Adding Details: Generating Styles and filters
- Re-using Images: Linking, Use, and Groups
- Dynamic Effects: SMIL declarative Animation and Javascript
- Server-Side DOM Queries and Manipulations
- Rendering Options
- In-line XML generation
- SVG Document Fragment
- Interaction through Javascript
Part II: Using SVG, Perl, Javascript, and a Database to create a GIS Thin-Client for multiple simultaneous users
Aim of the Workshop
The afternoon session (or 1/2 session if you decide to keep it to two) will be focused on the design and construction of a thin client based on Perl SVG, Javascript, ASV3, and MySQL.
Contents Part II
The application we will build will be a simple GIS system where drawing primitives are drawn to screen by typing in positions in X/Y boxes, or by clicking/dragging.
Each primitive will be assigned a data type and attached comment field list. The second tutorial will teach attendees how to build an SVG-based application with which two users on different browsers can be enabled to cooperate on the same document from different browsers and to demonstrate basic database interaction.
This will generate a basic but completely viable georeferencing application (except for the part about coordinate-frame transforms - but that is out of scope).
Attendees will learn how to close the loop on multi-browser interaction:
- Building a request sender method with Javascript
- Parsing xml using Javascript and ASV plugin functionality
- Manipulating the SVG drawing at the browser
- Sending xml requests in the server in the background
- Parsing xml at the server
- Saving state in a MySQL database
- Generate an SVG response
- Send the response to the browser
- Scheduler-driven browser actions
Introduction to GML
Organizers: Ron Lake (Galdos Systems Inc.)
Aim of the Workshop
This course provides an introduction to the OpenGIS Consortium's Geography Markup Language, the emerging world standard for the modeling, storage and transport of geographic information. This course will provide a strategic introduction to GML and its supporting XML technologies. The course will show how GML and SVG complement one another in geographic information services and the production of maps and other visualization products.
Target Audience
GIS Specialists with basic SVG knowledge that want to become familiar with GML
Contents of the Workshop
- Introduction to GML
- GML concepts
- Benefits of GML
- XML Foundations for GML
- GML Software Components and Tools
- GML architecture
- GML Feature Types and Feature Collections
- GML Feature relationshiops (Geolinks)
- GML Geometry classes
- GML and OGC Web Feature Services
- Presenting geographic/cartographic data with GML and SVG
- Map Styling Architectures
- Standards for Map Styling
- The future of GML
- GML 3.0. a sneak preview

