SVG Open 2004

Conference and Exhibition

Tokyo, Japan · Sept 7-10, 2004

3rd Annual Conference on Scalable Vector Graphics 日本語

Courses

The courses are sorted by the primary instructor's last name, which is underlined.

XSLT2 Programming for SVG Applications
Instructor: Kurt A Cagle, Author, Cagle Communications
Target Audience: SVG Programmers
Time: Tuesday / 7 September - 9:30 am - 12:00 am
Room: East 8F
Duration: 150 minutes
Description: XSLT2 represents a significant shift in both the underlying model and in its programming methodology, with many of these changes having large potential benefits to SVG application developers. This course provides an overview of the changes coming with XSLT2 and XPath2 and how they can simplify code development, with a special emphasis on the generation of SVG, XForms, and XSL-FO. The course will utilize the Saxon 7.9+ parser developed by Michael Kay as the benchmark processor, and will require a minimal expertise with Java programming, namespaces, and OOP application development. Some familiarity with XSLT1 is also recommended, but not required.
Table of Contents: The Course will be an eight hour course, with each top level section (Roman numerals) taking roughly one hour each, including time for user interactions. There will be an hour break for lunch and general head clearing. I. Introduction to XSLT 2 and XPath 2 A. A Brief History of XSLT2 and XPath2 B. Why XSLT2 is Important to SVG C. Timelines II. Working with Sequences A. The Weaknesses of XPath 1.0 B. Sequences Conceptualized C. Sequence Functions D. Sequences and XSLT D. Abandoning the Node-Set III. XPath Data-Types A. The Role of Data-Types B. Casting Between Types C. Data-Type Functions D. Date Manipulation E. Data-Type Aware XSLT IV. XPath String Manipulation A. String Functions B. Regular Expressions C. Parsing and Tokenizing in XSLT D. Template Matching With Regexes V. User Defined Functions A. The XPath Function Extension Interfaces B. Defining Functions with XSLT2 C. Defining Java Functions For XSLT2 D. Building Core Libraries VI. Information Graphics in XSLT2 A. Creating SVG Using XSLT2 B. Graphs and Charts C. User Interfaces VII. Publishing Graphics in XSLT2 A. Adobe SVG and XSLT2 B. XSLT and Batik C. Integrating SVG into XSL-FO with SVG D. Applications

XForms for Fun and Profit
Instructor: Kurt A Cagle, Author, Cagle Communications
Target Audience: SVG Programmers
Time: Tuesday / 7 September - 1:00 pm - 3:30 pm
Room: East 8F
Duration: 150 minutes
Description: XForms represent a significant increase in the ability to provide platform neutral interactivity with users. The SVG 1.2/2.0 specification lays out some basic support for XForms, and as such it should be an integral part of every interactive SVG developer's repertoire. This course aims to teach users how to build XForms, the Model/View Controller Architecture, interactivity with web services, and how to integrate such XForms into SVG applications. Students will have a basic knowledge of working with interactive SVG, and a basic understanding of XPath. No procedural coding expertise is assumed in this class.
Table of Contents: This is an eight hour course, with each section taking on average an hour and a half. I. An Introduction to XForms A. So What's Wrong with the Old Forms? B. What Exactly IS A Form? C. The Model/View/Controller Architecture D. Implementations II. The Model A. Understanding models B. Binding models to controls C. Changing and Submitting Models III. The View A. The Abstract Control B. Core Controls C. Bindings D. Aggregate Controls IV. The Controller A. Events B. Binding Redux C. Complex Interactivity V. SVG and XForms A. the XForms Model within SVG B. Implementing Custom XForm Components with SVG C. Web Service Interactions with SVG.

Map production with SVG for beginners
Instructors: Tobias Dahinden, PhD student, Institute of Cartography - ETH Zurich
Yvonne Isakowski
Target Audience: SVG beginners
Time: Tuesday / 7 September - 9:30 am - 12:00 am
Room: North 2F Meeting Room 2
Duration: 150 minutes
Description: The course has the target to produce a map with some interaction. We start with a simple 'hello world' graphic. Then we merge our graphic with a more complex graphic (obtained by a SVG export) and add a pixel background image. In a second part we add some simple JavaScript Code to introduce interaction.
Table of Contents: * 1. Basic SVG (1 h) o 1.1. Hello World o 1.2. Basic Shapes o 1.3. The Path-Element o 1.4. Merging two SVG graphics * 2. Organising a Document (1 h) o 2.1. Styles o 2.2. Symbols o 2.3. Adding a relief (rasterimage) * 3. Interaction (0.5 h) o 3.1. A very short introduction to JavaScript o 3.2. Adding JavaScript to SVG o 3.3. How to get a JavaScript function for not programmers

Developing larger SVG projects, OOP and Modularization in ECMAScript(JavaScript)
Instructor: Mr Jan-Klaas Kollhof
Target Audience: SVG and ECMAScript/JavaScript developers
Time: Tuesday / 7 September - 4:00 pm - 6:30 pm
Room: East 6F
Duration: 150 minutes
Description: ECMAScript is and will be playing a big role in the future of SVG. Applications written in SVG + ECMAScript are becoming larger and larger. For maintainability and development cost saving it is important to modularize the script code, to create reusable components and libraries. In this course the interested developer will be working on an example SVG project. The participants will learn about the concepts of OOP and modularization in ECMAScript and will apply that knowlege to create a working SVG application. The course is aimed to developers who have basic ECMAScript experience. In depth knowlege of modularization and OOP concepts is not required.
Table of Contents: Introduction and Motivation -Importance of ECMAScript in SVG. -What does ECMAScript provide with respect to OOP and modularization? -The example project for the course. Object Oriented Programming -Classes and objects and their construction in ECMAScript. -Inheritance in ECMAScript through prototyping. -Detailed view on prototyping. -Simplifying class construction and inheritance. Modularization -Creating modules in ECMAScript. -Data hiding in modules. -Error handling. -Building a class library. ECMAScript and SVG -Importing modules in SVG. -Satisfying module dependencies. -Some useful classes for working with the DOM.

Build a wiki using SVG and Perl or php
Instructor: Mr. Ronan Oger, Founding Partner, Vectoreal and ROIT Systems
Target Audience: Developers, Designers. An intermediate understanding of svg, javascript, and one of Perl or php is beneficial
Time: Tuesday / 7 September - 1:00 pm - 3:30 pm
Room: North 2F Meeting Room 2
Duration: 150 minutes
Description: Building an SVG application: 1. Pick something simple 2. Find existing implementations 3. Try it out yourself. This course shows students how to build a simple Wiki which supports SVG. The students will be taken through step-by-step instruction to develop an SVG wiki with a wysiwyg interface, based on Perl and PHP simultaneously.
Table of Contents: part I - Introduction Wiki Concepts SVG Concepts SVG and HTML: Key differences Part II - Design and Build The Server-Side MVC: Data Storage: files are good enough for me. Data Models: XML, XML, XML. Did we mention XML? Data Representation: templates vs Document Object Models Perl: One convenient language php: Another convenient language Part III - Design and Build the Client-Side Template Concepts Build a wiki template Supporting part IV - Things for the future... Layout problems Rendering layer dependencies: ASV, KSVG, Batik, Mobiform Supporting Mobile Platforms: Issues, features, solutions?

SVG problem-solving workshop
Instructor: Mr. Ronan Oger, Founding Partner, Vectoreal and ROIT Systems
Target Audience: SVG and software developers, designers, decision makers, beginner and advanced level
Time: Tuesday / 7 September - 4:00 pm - 6:30 pm
Room: North 2F Meeting Room 2
Duration: 150 minutes
Description: This session is intended to offer the opportunity for workshop attendees to access expert knowledge about specific issues or problems they face with SVG. Come to the workshop with your hard-to-solve technical or strategic questions and we will do our best to solve them. The members of the Vectoreal team will be available to discuss issues and answer technical questions in the following topics: * SVG Style and tag usage * GUI design * CSS * SMIL animation * ECMA Animation * Embedding SVG Applications * Thin Clients with SVG * SVG and the DOM * Server-side SVG processing * Raster-to-SVG transformation * Mobile SVG * Cross-platform ECMA scripting * SVG 1.0, 1.1, 1.2 specifications * SVG for Web-Mapping and Online-GIS * SVG and real-time data For more information about Vectoreal and our team, please visit our website at http://www.vectoreal.com Vectoreal is a new software company providing expert consulting and software services in mobile, embedded, and web-based user interfaces using SVG. Vectoreal provides expert SVG user interface advice to clients in the aerospace, finance, mobile communications, and document generation industries in Europe and North America.
Table of Contents: * SVG Style and tag usage * GUI design * CSS * SMIL animation * ECMA Animation * Embedding SVG Applications * Thin Clients with SVG * SVG and the DOM * Server-side SVG processing * Raster-to-SVG transformation * Mobile SVG * Cross-platform ECMA scripting * SVG 1.0, 1.1, 1.2 specifications * SVG for Web-Mapping and Online-GIS * SVG and real-time data

Developing reusable XML components with SVG and sXBL
Instructor: Mr Antoine J Quint, SVG Consultant, Fuchsia Design
Target Audience: SVG developers with a worked understanding of SVG and the DOM APIs
Time: Tuesday / 7 September - 1:00 pm - 3:30 pm
Room: East 6F
Duration: 150 minutes
Description: Most of the latest advances in SVG 1.2 have been focused towards providing SVG developers a solid foundation for UI application developement. While these features on their own, combined with the usage of the DOM APIs provide an already rich playground, the sXBL technology introduces an extremely flexible and powerful framework to leverage the core foundations of SVG and create higher-level components that take the full advantage of the XML and SVG architectures. This course aims at providing attendees with a clear understanding of the sXBL and concepts and development paradigms. After having taken a quick stroll on the reasons behind sXBL, the course, will take a detailed look at sXBL itself, before delving into the technicalities of its combination with SVG as we shall develop a simple button component. Building this component should highlight possible architectural features of SVG+sXBL components.
Table of Contents: 1. Introduction: the rationale behing sXBL 2. Exploring sXBL: a stroll through the sXBL concepts (binging, shadow tree, etc.) 3. Creating an SVG powered sXBl component: a button 4. Examples of higher-level SVG+sXBL components

Introduction To SVG
Instructor: Mr. Douglas A. Schepers, Contract Programmer / Student, University of North Carolina at Chapel Hill
Target Audience: Beginners, and people who need to know the basics for the conference.
Time: Tuesday / 7 September - 9:30 am - 12:00 am
Room: East 6F
Duration: 150 minutes
Description: This is an introductory class for SVG. The goal is to teach people enough that they will understand the rest of the conference. I'll take you through the basics of XML, the structure and elements of SVG, and interactivity. This class assumes no prior knowledge of XML or SVG, but familiarity with HTML, CSS, and basic JavaScript would be helpful. This class is geared toward hands-on experience, so people with access to a computer will benefit the most; however, it will also serve as an overview for those who don't have a computer. For those with laptops, I recommend installing Adobe's most recent SVG viewer, and a good text editor (I use TextPad, and have a special clip library for those interested). No other software will be needed (besides a Web browser). All attendees will also be freely supplied with SVG-Whiz, my graphical SVG-based SVG editor, which is designed to teach basic SVG skills through use; time permitting, the essentials of using this open-source editor will be covered at the end of class. SMIL, or declarative animation and interaction, will also be treated as time allows; though this is a very useful aspect of SVG, it deserves a course of its own to understand it in depth. Time is better spent in this survey course on scripting, since most presentations at this conference will be based on script. Finally, an explanation will be offered of XBL and RCC, two key new SVG technologies. It is expected that much of the conference will focus on these concepts, and this brief overview will aid the audience in understanding what they are and how they will affect SVG development and the Web. The tone of the class is interactive, with questions permitted during the lecture; the syllabus below outlines the planned presentation. Because the pace of the class will depend in part upon the audience, optional topics are also included, as mentioned above. Please note that it is outside the scope of this class to discuss the full range of what advantages SVG offers or the uses to which it may be put; this topic is the goal of the entire conference.
Table of Contents: XML Basics * Text-Based * Elements * Similar to HTML * Case Sensitive * Attributes * Values - Numbers, Strings, Ids * Hierarchical Structure * Parent and Child Elements * Closed and Open Elements ( vs. ) * Namespaces SVG Basics * X/Y Coordinate System * Viewbox * Painter's Model * Basic Shapes * * X/Y Coordinate System * * Only Positive Values for Height/Width * Rounded Corners * Styling * fill * stroke * stroke-width * stroke-dasharray * opacity * Lots of Other Style Properties * Attributes vs. Style Properties (style='property:value;') * Touch On CSS Classes and Inheritance * * * * * * Path Commands * Absolute * Relative * Each Command and Its Parameters * * XLink Namespace * Inheriting Style Attributes * * SVGFont Basics * Orientation and Alignment * Internationalization Using * and Relative Positioning * Flow Text * Container Elements * (Group) * Inheritance * * Percentage Values for Element Attributes * Revisit Viewport * * Elements Not Shown Directly * Revisit * Touch On Gradients, Filters, and Patterns * Transforms * transform Attribute * translate(x, y) * scale(factor) * scale(xfactor, yfactor) * rotate(angle) * rotate(angle, centerx, centery) * skewX(angle) * skewY(angle) * Importance of Ordering Scripting * Event Types: mouseover, mousemove, mouseclick, mousedown, mouseup, keypress, keydown * Functions * Init * Commonly-Used Methods * getElementById * getElementsByTagName(NS) * createElement(NS) * appendChild * get/setAttribute(NS) * style.getPropertyValue * style.setProperty * And Others * DOM (Document Object Model) accessors * parentNode * firstChild * nodeValue * And Others SMIL (As Time Permits) * Interactivity * Colors * Timing * Movement XBL/RCC * XML Binding Language / Rendering Custom Content * Custom Tags * Namespace Reminder * Component-Based (Can Use Pregenerated Libraries) * Handles Rendering and Behavior SVG-Whiz (As Time Permits) * Basic Use * Dialogs and Options

Scripting SVG (Clientside with ECMAScript)
Instructors: Christian Wenz, Hauser Wenz Partnerschaftsges.
Tobias Hauser, Hauser Wenz Partnerschaftsges.
Target Audience: SVG users with a programming background
Time: Tuesday / 7 September - 4:00 pm - 6:30 pm
Room: East 8F
Duration: 150 minutes
Description: The aim of the workshopis that attendees will learn how to use ECMAScript to add dynamic capabilities to SVG content. No specific ECMAScript/JavaScript experience is required, but a programming background is a plus. After in introduction to DOM, including event handling, we will cover the SVG DOM and lay out the available Interfaces. Then, we give a brief introduction to ECMAScript and how to incorporate it into SVG files. In this section, and throughout the tutorial, we will always analyze which viewers do support which functionality, in order to allow attendees to develop for an audience that is as large as possible. In the next step, we present methods to access SVG DOM elements and how to modify them. Then, we show techniques for SVG animationen and how ECMAScript/JavaScript can create animations SVG alone can't. Finally, since SVG is widely used in the WWW, we have a look at SVG-HTML interaction: How can SVG content be accessed from within HTML/JAavaScript code, and vice versa.
Table of Contents: 1. Introduction to DOM (according to W3C) * The DOM tree * Event Handling * Important Functions 2. The SVG DOM - what is different, what is new * Interfaces * Special Functions 3. ECMAScript (Javascript) * What is it? * How to use it within SVG * SVG Viewer Support 4. Accessing SVG DOM elements * By walking the tree * By accessing elements directly * Universal code to access any SVG structure 5. Modifying SVG * By manipulating the DOM, and why (almost) no-one is using that * By setting/modifying/removing attributes 6. Animation with SVG * Short recap: the power of SVG animation * Going beyond: animation using JavaScript * Random animations 7. 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
Valid XHTML 1.1Valid CSS