Transcript XML and SVG as an Aid to Distance Learning

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
• This is a bulleted list
• Another bullet
• A third
1. This is a numbered list
2. Another number
3. A third
– flowchart diagram, etc.
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
HTML
XML
XSL
Structured General Markup Language
HyperText Markup Language
eXtensible Markup Language
XML Stylesheet Language
– XSL Formatting
– XSL Transformation
• SVG
Scalable Vector Graphics
Processing XML
• Use XSL on XML to produce an output
XML
XSL
processor
XSL
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
Server
Client
XML
XSL
processor
XSL
HTML
or
SVG
XSL processing
On the server
e.g. Xalan
Server
Client
XML
XSL
processor
XSL
HTML
or
SVG
XSL processing
Pre-server
e.g. XT
Pre-Server
Server
XML
XSL
processor
XSL
HTML
or
SVG
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
http://www.adobe.com
Sun
http://www.sun.com/software/xml/developers/svg
W3C
http://www.w3.org
The End