xml and svg as an aid to distance learning lez bullwer msc information technology
TRANSCRIPT
![Page 1: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/1.jpg)
XML and SVG as an Aid to Distance Learning
Lez Bullwer
MSc Information Technology
![Page 2: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/2.jpg)
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
![Page 3: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/3.jpg)
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
![Page 4: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/4.jpg)
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
![Page 5: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/5.jpg)
Problems, cont.
• Creation Time wasted in creating each one separately
• EditingTime wasted changing each item for an editorial change to text
![Page 6: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/6.jpg)
Solution
• Graphical generator/editor, which– uses same text source in different ways
– allows updates to be produced dynamically
– uses templates
– is easy to use
![Page 7: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/7.jpg)
This project
Text being displayed in different ways
• Text kept in XML format
• Transformed into HTML and SVG using XSL
![Page 8: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/8.jpg)
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
![Page 9: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/9.jpg)
Processing XML
• Use XSL on XML to produce an output
XML
XSL
XSLprocessor
HTMLor
SVG
![Page 10: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/10.jpg)
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
![Page 11: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/11.jpg)
XSL processing
On the Client e.g. IE5
XML
XSL
XSLprocessor
HTMLor
SVG
Server Client
![Page 12: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/12.jpg)
XSL processing
On the server e.g. Xalan
XML
XSL
XSLprocessor
HTMLor
SVG
Server Client
![Page 13: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/13.jpg)
XSL processing
Pre-server e.g. XT
XML
XSL
XSLprocessor
HTMLor
SVG
Pre-Server Server
![Page 14: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/14.jpg)
Demonstration
*********DEMO********Example of XML and XSL
with resultant HTML.
Page 1
![Page 15: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/15.jpg)
Graphics
Formats currently in use:
• Bitmap or Raster Graphics
• Vector Graphics
![Page 16: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/16.jpg)
Bitmap Graphics
• GIF
• JPEG
• Information for each pixel held, e.g.:– colour– contrast– position
![Page 17: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/17.jpg)
Bitmap Graphics
• Advantages– Widely used on the Internet– Widely used in simple graphics packages
![Page 18: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/18.jpg)
Bitmap Graphics
• Disadvantages– Large files– Resolution dependent– Static– No interaction– Text is unselectable and unsearchable– Search engines cannot easily index bitmaps
![Page 19: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/19.jpg)
Vector Graphics
• On Internet:– Flash– VML– SVG
![Page 20: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/20.jpg)
Vector Graphics
• Disadvantages– More complicated than bitmap. – User is required to understand more about
graphic production and terminology.
![Page 21: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/21.jpg)
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
![Page 22: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/22.jpg)
SVG
• XML-based– uses tags, therefore
• can be produced using XSL
• can be manipulated by programming
![Page 23: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/23.jpg)
SVG - what it can do
• Text in different positions
• International text
• Animation
• Gradient fills
• Filter effects
• Scripting added for interactivity
![Page 24: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/24.jpg)
Demonstration
*********DEMO********Example of XML and XSL
with resultant SVG
Page 2, 3, 4
![Page 25: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/25.jpg)
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.
![Page 26: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/26.jpg)
Demonstration
*********DEMO********Example of dynamically produced scripting
Page 5
![Page 27: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/27.jpg)
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
![Page 28: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/28.jpg)
Demonstration
*********DEMO********
Using Netscape with SVG
Viewing Prototype Website with paraplus
![Page 29: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/29.jpg)
Conclusions
• XML is flexible and from one source document can produce:– PDF– HTML– slides for OHP– Diagrams/graphs– Graphics for web pages
![Page 30: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/30.jpg)
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
![Page 31: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/31.jpg)
References
Adobehttp://www.adobe.com
Sun
http://www.sun.com/software/xml/developers/svg
W3Chttp://www.w3.org
![Page 32: XML and SVG as an Aid to Distance Learning Lez Bullwer MSc Information Technology](https://reader036.vdocuments.us/reader036/viewer/2022081519/56649f505503460f94c72606/html5/thumbnails/32.jpg)
The End