Server-side Generation of Interactive Visual Guides

An interactive visual guide contains a set of different kinds of multimedia and hypermedia resources with the primary objective of describing how to complete a task in a systematic way: screen-by-screen, step-by-step. This paper describes the design and implementation of the software necessary to generate and display this kind of interactive visual guides using SVG. Dynamic images and HTML pages were generated by a server-side PHP script interpreting a proposed XML-based language for visual guide source documents. Each SVG document contains metadata, text descriptions, screen-shoot images and cursor-activated hotspot image areas. This server-side SVG generator automatically provides an indexed HTML page with a dynamic visual guide directory organized by categories. The storage required for each visual guide XML file is minimum (around 10Kb a typical 10 slides file excluding external images). The optimized generation mechanism of dynamic SVG images and HTML pages is very fast, robust and produces very light weight web pages. Finally, a short case study compares the SVG-based prototype against HTML5, GIF and CSS-based visual guide generators.

Valid XHTML 1.1