Workshops

Workshops will be held on Thursday, October 20, after the main conference.

There are six workshops, each is 150 minutes in length (2.5h), with two parallel tracks. Participants are encouraged to bring along their own laptops for hands on exercises. The workshop fee is $75.- 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:


Adobe Edge Introduction

Sarah Hunt (Adobe Systems, Adobe Edge Product Manager)

Sarah Hunt, Product Manager for Adobe Edge Animate will take you through building animated content from the ground up in this follow-along tutorial. This workshop will appeal to beginners or seasoned users of Edge Animate and Sarah will show you some tips and tricks on how to optimize your productivity when using Edge Animate. Users can preinstall preview 7 via the cloud or Adobe Labs. They will need an adobe account to download.


Animating the open Web

Jeremie Patonnier

Since the early day of the Web, designers want to have it animated. This need is what allows Flash to rise and explain why animated GIFs were so appealing not so long ago. 10 years later (Today), web designers have a whole set of techniques to build animations. However, it's pretty hard to know which technique to use. To make things a bit clearer for everyone, this workshop will dig into the main techniques available to build animations. Because there is no perfect solution, we will take the time to detail how they work and what are their side effects and limits (performance, accessibility, browser support, etc.).

After a short introduction that will remind to the audience the "old" legacy techniques available in the early days of the Web (aGIF, DHTML) and some non technical knowledge about animation we will cover the following techniques :

SVG (and a bit of SMIL) Animations

First we will cover the theory: This kind of animation has the most robust model with time lock animation and event handling out of Javascript. However, it is not well supported among browsers and is mostly not allowed to interact directly with HTML contents.

Second, We will see some examples of SVG animations, including tricky mashup with HTML and fallback support for Internet Explorer (using TimesheetsJS or RaphaelJS).

CSS Animations & transitions

At first, we will see the benefit and limits of CSS animations. After All, this is the new kid on the block. Designers expect a lot from this technique but it is young and far from finished.

Second, we will explore the syntax which can be quite complex and with some weird limits. It will be the opportunity to explain it and dig through the limits of the model.

In the end, we will discuss the browser support and the future of the specification, including the animation Events that bring some perspective.

Javascript

Because it is the most reliable technique, scripted animations will be the biggest part where we will see the following:

  • legacy method using setIntervall and setTimout and why it should be avoid
  • New methods through requestAnimationFrame
  • The rise of Canvas as an animation support with an introduction to some interesting libraries (PaperJS, ProcessingJS, etc.)
  • we will finish by a little insight to the future with an open discussion about the Web Animations API Proposal from Adobe, Google and Mozilla

HTML5 Vidéo

Video is also another way to add animation to a page. In this last part we will se how to embed and control a video in an HTML document. Once this made, we will see how it's possible to mashup a video with the any HTML content thanks to the PopcornJS library.

In the end, you will have a full overview of the modern tools available to build all the fancy animations you could dream off.


An introduction to building WebGIS applications with OpenLayers and GeoExt

Marc Jansen (terrestris GmbH & Co. KG, Application Developer) and Christian Meyer (Terrestris)

The hands-on workshop will cover the basics of both OpenLayers and GeoExt, two JavaScript libraries that help you build great and fully functional WebGIS applications.

OpenLayers is an already mature but sill rapidly-developing library for building mapping applications in a browser. The library lets developers integrate data from a variety of sources, provides a friendly API, and results in engaging and responsive mapping applications.

GeoExt is a rather young (and also rapidly-developing) library for building rich, web-based GIS applications. The library is built upon Ext JS and OpenLayers. The former provides UI components for building web applications along with solid underlying data components, the latter is the de facto standard for dynamic web mapping. GeoExt provides mapping related UI components. It also unifies access to information from OGC services, OpenLayers objects and arbitrary remote data sources. This allows for easy presentation of geospatial information in a wide choice of widgets, ranging from combo boxes or grids to maps and trees.


Create a web-friendly realistic SVG with Inkscape

Andreas Fritsch

Introduction

With all the hype about brand-new XML formats in 2001, like the newborn SVG, it progressively became quiet. Sure, Adobe had published their plug-in, but the Flash plug-in was also on the rise. These days however,a decade later, no modern Desktop browser needs a plug-in to display SVG anymore. It’s time to use SVG in web-design.

Preparations

There are a lot of well-known programs in the design business. But most of these products were originally made for printing purposes, even though they were later improved to support the writing of SVG-files. In my opinion a file of 150 to 200kbyte is no issue if you want to print it, but it’s way too big for the web. In conclusion to that and because of the existing idea of the semantic web, I advise to specifically consider creating an SVG for the use in web-design. My tool of choice is Inkscape.

For using in websites the file size must not exceed 100 KB. The jump is similar, as from vinyl to compact disc in music buisness. First of all, you should answer the question, what elements are omitted.

The size of SVG files is determined mainly by the number of objects and their complexity. Through several layers, similar to the technique of glazing in oil painting creates a realistic picture. The objects themselves are described by coordinates (nodes). The typical operation of the designer with the calligraphy tool used with a drawing tablet produced significant numer of nodes. This is one cause for huge files. Some techniques are therefore not used in the production for the web. It makes sense to think about which objects, color definitions, filters can be used more then ones.

Inkscape

Inkscape is made for creating SVG. It’s the native format and it may seem like it might not be completely ready yet. Don’t let yourself be fooled by the version number. A number like 0.48 is the understatement by GPL, but there are some limitations you should know and work around that.

The Swiss knife - always a path

Inkscape mostly saves simple forms as paths, but a person can grasp the command to create of circle better than understand the exact same shape as a couple of points in a path. Change the markup at the end again in the simple form. On top of that, the size of the file becomes smaller.

Use gradients and filters twice or more

An object gets properties. As an standard in Inkscape any filter or gradient is bound to one object. The blur-filter is often used. To change the standard behaviour open the filter dialog which contains a powerful filter editor. You can use all of the filters on more than one object, the process will also reduce the size of the SVG-file.The same feature would be nice for gradients.

No clone wars

In a lot of cases you will take the same shape. Inkscape offers a way to duplicate the shape, but it is mostly better to use the clone tool. A clone is a use-element and will make rendering faster and the size of the file becomes even smaller, because a use is only a reference and not a couple of points.

Use name which are describing the objects

For further work with your editor, you should get a describing name for the objects or groups. By a right click on the object, you will get a dialog box and be able to do this.

Save the file as optimized SVG

With the version 0.48 Inkscape offers this. In this case unused gradients or filters will be removed from the file and saved in a compact way.

Optimized your code in a editor

Clean up the doctype

First of all, you can clean up the doctype. The rdf-declaration and the meta-tags are not really needed. I advise to you a compact version.

Check any kind of abstraction

Find out which gradients you can use for a couple of objects. Use styles, if it’s possible.

Round floats

In my experience, such a high accuracy is not really needed. You can reduce the size of a file enormously by rounding floats. In some cases you can round the point from float to integer, sometimes you need 1-2 Decimal, e.g. in the matrix-Attribute. I use some needful bash-scripts to do that and the tool 'SVG Cleaner'.

Use the title element

One of the advantages of the format is that each element can be equipped with a title. Because of that, you can describe the content further and maybe Google likes that, too.

Let's go - draw your own vector

Prepare a picture

Load a a fruit of your choice from a free picture website - a prefer a green apple. Increase the contrast with Gimp or something like that.

Place the picture in a background layer

At the beginning open the layer window. First place your prepared picture, rename the layer to background (or sth. like that) After being closed by clicking the lock icon and you create additional layer. Layers are grouped elements that receive a special inkscape-label. The allocation is therefore possible only if the SVG format files are stored Inkscape SVG, which is highly recommended for the first phase. When mixed mode is set to filter effects here should therefore remain normal preference.

Initially, I added a layer 'base', which contains the main body of the apple. First, i draw an ellipse, which I convert the object to a path, add nodes to and move them until they match with your picture template. The pipette can take the fill color directly from the original image.

Add layer, more objects, gradients and filter

The number of layer depends on the complexity of the drawing. I look a bit after that, what group of elements belong together.

By gradients and transparency may already have a significant spatial effect can be produced with these two objects. I let the "Fill and Stroke" dialog appears. The use of blur should be avoided at this point. So that a filter is applied. Uncertainty is needed quite often, and thus for each item would be created a new filter. Filters can affect the processing time significantly and are better added at the end. Since Safari and Internet Explorer filter anyway (still) don't understand, the graphics should be presentable without a filter.

Objects ore groups should get a identifiers

It makes sense to name the objects meaningful. Inkscape provides to a dialogue that is achieved with the right mouse button. The dialogue clearly shows that each element can have a title in Inkscape and a description of what you should also use to visually impaired users also supply a description.

Finished your work and use the Inkscape tools to reduce the filesize

As often as you can, try 'Ctrl + L' to reduce the number of nodes. Inkscape offers a clone tool, but it can't create an object without filling and without creating a stroke. But that is a prerequisite in order to give all cloned objects (use) different colors. After all the components of the portraits were created, the image can be removed with the layer 'background'.

Be carefully with filters

Now may be the use of filters. All the filters you can change with 'Edit Filter'. These filters can be assigned to the desired objects. In my opinion, ranging from 4-5 blur filter. Inkscape does already with some filters that can be used as a basis for experimentation. Instead of this simple fruit with this technique can also be made more complex graphics.

Put it together

With the upcoming HTML5 specifiation we get a simple way the use a SVG inline in a HTML. Personally, I prefer a way to use a switch in combination with foreign objects.

The switch-element is very powerful. If the browser understands the path command, like all modern browsers, the foreign object will not be displayed. Browsers, like Konqueror or old Internet Explorers display the content within the foreign object. You can combine this with conditional comments.

That sounds great but...

Yes I know, what you are going to say. There is a workaround for the Internet Explore up to version 8, you can use a VML.


Developing Rich, Web-based User Interfaces with SCXML and SCION

Jacob Beard (INFICON, Software Engineer)

Description

User interfaces (UI) comprise reactive systems whose behaviour often involves a complex notion of timing and state, and implementing this logic directly in a general-purpose programming language such as JavaScript can be nontrivial, leading to applications which are slow to develop and error-prone. Previous work has demonstrated that Statecharts, a graphical modelling language built to capture the behaviour of complex, timed, reactive systems, is well-suited to describe complex UI behaviour, leading to more productive and robust UI development[0][1][2][3].

SCXML is an emerging W3C specification, developed to provide an XML syntax for Statecharts. StateCharts Interpretation and Optimization eNgine (SCION), a liberally licensed open source project currently being developed on Github, provides an implementation of SCXML in JavaScript, and thus allows the expressive power of SCXML to be applied directly to the development of user interfaces built on the familiar suite of graphical Open Web technologies, such as HTML and SVG.

This workshop will provide a practical tutorial oriented toward Web front-end developers, and will cover a general introduction to SCXML and Statecharts, an overview of current development tools and libraries, and an examination of techniques to practically apply SCXML to real-world UI development today.

Outline

1st hour: Introduction

  • Introduction to Statecharts
    • basic states
    • events
    • transitions
    • actions
    • hierarchy: AND and OR states
    • history
  • Getting started with Statecharts development:
    • authoring SCXML
    • simulate/test/debug using SCION
    • synthesize for deployment

2nd hour: Application of SCXML to the Development of Web-based User Interfaces

  • Integration of SCXML with HTML and SVG
  • Case studies:
    • Vector Graphics Drawing tool
    • Modal Text editor
    • Forms-based web application
  • Integration with JavaScript toolkits:
    • Dojo
    • jQuery
    • SproutCore

References

[0] Developing a Statechart-to-ECMAScript Compiler Optimized for SVG User Interface Development for the World Wide Web

[1] Modelling the Reactive Behaviour of SVG-based Scoped User Interfaces with Hierarchically-linked Statecharts

[2] Rapid Development of Scoped User Interfaces

[3] Constructing the User Interface with Statecharts


Interactive Charts with Highcharts

Torstein Hønsi (Highsoft Solutions AS, CTO, Founder)

Since JavaScript/HTML5 took over the web charting market, Highcharts has been among the most popular charting APIs. Highcharts is loved by web developers for the low entry level, slick default design and behaviour, scalable license model, numerous configuration options and an extensive documentation with hands-on examples for each option. In this workshop, author Torstein Hønsi will talk in detail about setting up a chart in your web page. We will discuss concepts like loading chart data by jQuery.ajax, setting up the back end, using the export server and more. Finally we will solve exercises and you will get the chance to discuss solutions around your own charting needs.


Introduction to d3.js

Ian Johnson (Mainstem Collective, Data Visualization Consultant)

D3.js is a powerful javascript library for creating data driven documents. At first glance d3 looks like a fancy chart library, but it is actually much more. This workshop will introduce you to the many tools and abstractions that d3.js provides to turn your data into live HTML and SVG representations. We will cover some basics of SVG and DOM manipulation, explore the functionality that d3 provides, and use d3 as well as standard HTML5 javascript to make interactive content.


Raphaël — JavaScript library

Dmitry Baranovskiy (Adobe Systems)

Raphaël provides nice API for manipulating SVG in the browser. Due to browser support Raphaël gives you less than SVG, but it also gives you more through the utility functions. In this course I will guide you through API and show how easy is to create stunning graphics with help of Raphaël. It will include, but not be limited to: Animations — Raphaël animation model, it’s flexibility and power:

  • Transformations — not your dad’s transformations, way better that what SVG could give you now
  • Custom attributes — in combination with animation API gives you unlimited power
  • Path syntax and Raphaël additions to it for Catmull-Rom curves
  • Strokes, fills & gradients
  • Text and custom fonts
  • Importing existing SVG files
  • and much more

The course will be put together as set of tasks that will run over all aspects of Raphaël. This is a unique opportunity to increase your skills with Raphaël or meet this amazing library by learning from the library author himself.