XML and SVG as an Aid to Distance Learning

Lez Bullwer

MSc Information Technology

Project Goals

• Academic Objectives– Investigate use of XML, XSL and SVG– Investigate course material for semantic

structures– Produce a case study of the Tele-Akademie

• Product Objectives– Produce a prototype website

Project Management

• Time constraints– 3 months – 1st month in Germany

• Research of XML, XSL and SVG• Research of Semantic structures• Research Tele-Akademie• Production of prototype web pages

Problems

• Displaying same information in differing ways, e.g.

– bullet points

– numbered list

– flowchart diagram, etc.

• This is a bulleted list• Another bullet• A third

1. This is a numbered list2. Another number3. A third

Problems, cont.

• Creation Time wasted in creating each one separately

• EditingTime wasted changing each item for an editorial change to text

Solution

• Graphical generator/editor, which– uses same text source in different ways

– allows updates to be produced dynamically

– uses templates

– is easy to use

This project

Text being displayed in different ways

• Text kept in XML format

• Transformed into HTML and SVG using XSL

Acronyms

• SGML Structured General Markup Language

• HTML HyperText Markup Language

• XMLeXtensible Markup Language

• XSL XML Stylesheet Language– XSL Formatting

– XSL Transformation

• SVG Scalable Vector Graphics

Processing XML

• Use XSL on XML to produce an output

XML

XSL

XSLprocessor

HTMLor

SVG

XSL Processing

XSL can transform XML into:

• another XML file, e.g. – same as original but with different tag names– only part of the original XML

• HTML (‘normal’ web pages)

• DHTML (interactive web pages)

• SVG

XSL processing

On the Client e.g. IE5

XML

XSL

XSLprocessor

HTMLor

SVG

Server Client

XSL processing

On the server e.g. Xalan

XML

XSL

XSLprocessor

HTMLor

SVG

Server Client

XSL processing

Pre-server e.g. XT

XML

XSL

XSLprocessor

HTMLor

SVG

Pre-Server Server

Demonstration

*********DEMO********Example of XML and XSL

with resultant HTML.

Page 1

Graphics

Formats currently in use:

• Bitmap or Raster Graphics

• Vector Graphics

Bitmap Graphics

• GIF

• JPEG

• Information for each pixel held, e.g.:– colour– contrast– position

Bitmap Graphics

• Advantages– Widely used on the Internet– Widely used in simple graphics packages

Bitmap Graphics

• Disadvantages– Large files– Resolution dependent– Static– No interaction– Text is unselectable and unsearchable– Search engines cannot easily index bitmaps

Vector Graphics

• On Internet:– Flash– VML– SVG

Vector Graphics

• Disadvantages– More complicated than bitmap. – User is required to understand more about

graphic production and terminology.

Vector Graphics

• Advantages– Graphics programs output in Vector format– Each item drawn according to mathematical

equations– Text based– More versatile than bitmap– Reusable– Can be easily changed

SVG

• XML-based– uses tags, therefore

• can be produced using XSL

• can be manipulated by programming

SVG - what it can do

• Text in different positions

• International text

• Animation

• Gradient fills

• Filter effects

• Scripting added for interactivity

Demonstration

*********DEMO********Example of XML and XSL

with resultant SVG

Page 2, 3, 4

Scripting and XSL

SINCE:

It is possible to produce values dynamically for SVG to work with.

THEN:

It must also be possible to produce variable names dynamically.

Demonstration

*********DEMO********Example of dynamically produced scripting

Page 5

Web Browsers

• IE5– By far the most popular browser in use today– Includes built-in XML/XSL processor

• Netscape v6– Only recently released

• Netscape v4.x• Mozilla• Opera

Demonstration

*********DEMO********

Using Netscape with SVG

Viewing Prototype Website with paraplus

Conclusions

• XML is flexible and from one source document can produce:– PDF– HTML– slides for OHP– Diagrams/graphs– Graphics for web pages

Conclusions

• Further research into lecture material structures, to produce:– DTD or schema– XML/SVG-processor/editor specifically for

lecturers

• Further research into producing scripting dynamically

References

Adobehttp://www.adobe.com

Sun

http://www.sun.com/software/xml/developers/svg

W3Chttp://www.w3.org

The End