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 list 2. Another number 3. A third

Problems, cont. Creation Time wasted in creating each one separately Editing Time 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 XML eXtensible Markup Language XSL XML Stylesheet Language –X–XSL Formatting –X–XSL Transformation SVG Scalable Vector Graphics

Processing XML Use XSL on XML to produce an output XML XSL XSL processor HTML or 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 XSL processor HTML or SVG ServerClient

XSL processing On the server e.g. Xalan XML XSL XSL processor HTML or SVG ServerClient

XSL processing Pre-server e.g. XT XML XSL XSL processor HTML or SVG Pre-ServerServer

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 Adobe Sun W3C

The End