WWW.BOOK.DISLIB.INFO
FREE ELECTRONIC LIBRARY - Books, dissertations, abstract
 
<< HOME
CONTACTS



Pages:   || 2 | 3 |

«Zusammenfassung In web-basierten Lernumgebungen werden Rastergraphiken eingesetzt, um Skizzen und Formeln darzustellen. Dies erschwert den Austausch ...»

-- [ Page 1 ] --

Verwendung von Scalable Vector Graphics und MathML in

web-basierten Lernumgebungen

Martin Rotard, Waltraud Schweikhardt, Thomas Ertl

Institut für Visualisierung und Interaktive Systeme, Universität Stuttgart

Zusammenfassung

In web-basierten Lernumgebungen werden Rastergraphiken eingesetzt, um Skizzen und Formeln darzustellen. Dies erschwert den Austausch und die Wiederverwendung von Lehrmaterialien unter Lernenden und

Lehrenden. Dieser Beitrag stellt das Vektorgraphikformat SVG (Scalable Vector Graphics) und MathML, das Format zur Beschreibung mathematischer Ausdrücke, vor. Die Möglichkeiten des SVG-Formats reichen von der Darstellung einfacher Graphikelemente bis hin zu komplexen Filtern und Beleuchtungseffekten. In MathML lässt sich der inhaltliche Zusammenhang oder die Darstellung von mathematischen Ausdrücken beschreiben. Das letzte Kapitel gibt einen Ausblick auf Anwendungsfelder von web-basierten Lernumgebungen mit SVG und MathML.

1 Einleitung In virtuellen Universitäten und virtuellen Unternehmen sind Lehrende und Lernende räumlich getrennt. Das Kommunikationsmedium Internet und speziell das Web spielen dabei eine zentrale Rolle. Der Lehrstoff ist über viele Dokumente verteilt und kann von mehreren Lehrenden entwickelt werden. Dieses Lernszenario dient dazu, eine Gruppe von verteilten Lernenden, Lehrenden und Experten über weite Distanzen so zusammenzuschalten, dass sie ihr Wissen problemlos austauschen können [Schulmeister 2001]. „Wissen“ wird dabei im Allgemeinen repräsentiert durch Texte, Graphiken, mathematische Ausdrücke, Videos, etc.

Der Austausch und die Verwendung der nativen Quelldateien der Dokumentenwerkzeuge ist dadurch erschwert, dass sich die Formate meistens nicht direkt im Web darstellen lassen. Hier einige

Beispiele zu Text und Graphikformaten:

• Dokumentenformate von Adobe Framemaker (FM), Microsoft Word (DOC), etc.

• Graphikformate wie das Tagged Image File Format (TIFF), Windows Meta File (WMF) etc.

Mathematische Ausdrücke werden im Web heute fast ausschließlich als Rastergraphik dargestellt und damit nicht im ursprünglichen nativen Quellformat jeweiligen Werkzeuges.

Speziell bei Graphiken und mathematischen Ausdrücken ist der Austausch der Quellen und die gleichzeitige Verwendung im Web von Nachteil. Heutige Autorenwerkzeuge verfügen über einen HTML-Export, der alle im Dokument enthaltenen Graphiken und Formeln als Rastergraphiken speichert. Die darin enthaltenen Informationen können nur durch Neuerstellung oder Manipulation auf Pixelebene verändert werden. Um Bandbreite zu sparen wird zusätzlich die Farbanzahl reduziert (GIF) oder die Datenmenge durch verlustbehaftete Quantisierung verringert (JPEG). Dies mindert die Qualitiät für die Wiederverwendung zusätzlich.

Im folgenden Kapitel wird das Vektorgraphikformat SVG vorgestellt. Dort lassen sich Graphikelemente explizit speichern. Anschließend wird ein Überblick über MathML gegeben. Mit diesem Format lassen sich mathematische Ausdrücke einfach beschreiben. SVG und MathML erleichtern die Bearbeitung und fördern damit die Wiederverwendung und den Austausch von Lehrmaterialien. Das letzte Kapitel gibt einen Ausblick auf die Möglichkeiten für web-basierte Lernumgebungen mit SVG und MathML.

1 SVG

Das World Wide Web Consortium [W3C] hat im September 2001 als Empfehlung die Spezifikation des Formats Scalable Vector Graphics [SVG] verabschiedet. Dieses Format erlaubt die Beschreibung zweidimensionaler Vektorgraphik als Anwendung von XML (Extensible Markup Language [XML]). An der Spezifikation des Formates (Version 1.0 [SVG Spec 1.0]) waren viele bekannte Unternehmen beteiligt, unter anderem Adobe, Microsoft, Canon, Quark, Kodak, IBM, Sun Microsystems, Netscape, Macromedia, Apple, Xerox, Hewlett-Packard etc.

In den folgenden Abschnitten werden die Eigenschaften von SVG-Vektorgraphik erläutert.

Anschließend werden elementare SVG-Formen für Graphik und Text vorgestellt. Der nächste Abschnitt geht auf erweiterte Konzepte wie Animationen, Filter und Effekte ein. Daraufhin werden Hinweise zu Werkzeugen für die Erzeugung und Darstellung des SVG-Formats gegeben. Anschließend werden noch die Vorteile des SVG-Formats für sensorisch Behinderte vorgestellt.

1.1 Eigenschaften von SVG SVG-Vektorgraphik hat gegenüber Rastergraphik viele Vorteile. Die verwendeten Graphikelemente werden als Objekte abgespeichert und können nachträglich wieder verändert werden. Die Graphiken sind beliebig vergrößerbar, ohne dass Rasterstrukturen sichtbar werden.

Die Dateien sind in der Regel kleiner als die von Rastergraphiken, da mit wenigen Tags schon komplexe Graphiken entstehen können und sich diese "Textdateien" zusätzlich komprimieren lassen (im bereits vorgesehenen SVG-Format SVGZ). Herkömmliche Rastergraphikformate wie PNG, JPEG und GIF können in SVG eingebettet werden. In SVG-Dateien kann auf einfache Weise Text gesucht und extrahiert werden. SVG-Graphiken sind mit anderen XML-Anwendungen konform. Deshalb ist die Einflussnahme von Aktionen innerhalb der SVG-Graphik auf andere Elemente der Seite und umgekehrt möglich. Beispielsweise könnte die Interaktion des Benutzers mit einer zweidimensionalen SVG-Graphik die Darstellung einer dreidimensionalen X3D-Graphik [X3D] ändern, die sich auf derselben Webseite befindet. SVG unterstützt einen standardisierten Farbraum, bei dem Profile des International Color Consortium [ICC] verwendet werden können.





Mit diesem Farbmanagement ist die Farbdarstellung auf verschiedenen Ausgabegeräten gesichert.

Rastergraphikformate haben auch Vorteile gegenüber Vektorgraphikformaten. Die Zeit die benötigt wird, eine Rastergraphik anzuzeigen, ist unabhängig von deren Komplexität. Der Aufbau einer komplexen Vektorgraphik kann daher langsamer sein, als bei der entsprechenden Rastergraphik.

Dieser Vorteil relativiert sich aber durch die steigende Leistung der heutigen Rechner. Ein Anwärter der W3C-Empfehlung ist der SVG-Mobile Standard [SVG Mobile]. Dieser ist für mobile Geräte mit geringerer Rechenleistung vorgesehen. Durch die geringere Komplexität des Standards ist eine schnellere Darstellung möglich.

Bereits heute hat sich das vektorgraphikbasiertes Format Flash von Macromedia [Flash] etabliert.

Flash liegt im Gegensatz zu SVG in einem Binärformat vor und ist damit nicht XML-basiert. Damit ist die Generierung von Graphiken aus einer Skriptsprache sehr erschwert oder nicht möglich.

Rastergraphiken werden bei Flash in das Binärformat eingebettet. Bei SVG können diese von einer beliebigen erreichbaren Stelle im Web referenziert werden oder auch in einem CDATAAbschnitt eingebettet werden. Für die Erzeugung von Flash werden ausschließlich proprietäre Tools benötigt. Für SVG reicht als minimale Ausstattung ein Texteditor. Flash unterstützt keine ICC-Profile für das Farbmanagement. Bei Animationen ist Flash frameorientiert. Das bedeutet, der Autor legt wie bei einem Film fest, was auf jedem Bild zu sehen ist. Dies ist bei SVG auch möglich und wird erweitert um ein Animationskonzept, bei dem nur Anfangs- und Endzustand angegeben werden. Die interpolierten Zwischenbilder errechnet der SVG-Viewer automatisch.

Flash kann Audio-Dateien einbetten, dies ist in SVG nicht vorgesehen. Es ist jedoch ein Verweis auf eine Audio-Datei möglich, die dann von einem anderen Player abgespielt wird. Der W3C Standard SMIL (Synchronized Multimedia [SMIL]) ermöglicht dabei eine Integration von Audio, Video, Graphiken und Text. Auch eine Konvertierung von Flash in SVG ist möglich [Flash2SVG].

1.2 Elementare SVG-Formen Der SVG-Standard sieht einfache geometrische Formen wie Rechtecke, Ellipsen, Linien, Polygone etc. vor (siehe Abbildung 1). Dabei können die Attribute der Formen wie Füllfarbe, Deckkraft, Strichstärke, etc. in Parametern angegeben werden.

Der Quelltext dieser Graphik ist unten abgebildet und einfach zu interpretieren. Nach der xmlAuszeichnung in der ersten Zeile folgt im Tag "DOCTYPE" der Verweis auf die zugehörige Document Type Definition (DTD) von SVG. Anschließend wird mit dem svg-Tag der Inhalt der SVG-Graphik eingeleitet. In diesem Tag kann als Attribut die Größe des Graphik und mittels viewBox die Auflösung des Koordinatensystems angegeben werden. Dabei werden die unterschiedlichsten Maß-Einheiten unterstützt, wie mm, cm, inch, punkt, pixel etc. SVG verwendet kein kartesisches Koordinatensystem, sondern der Nullpunkt befindet sich in der linken oberen Ecke der Graphik. Die positive X-Richtung geht somit nach rechts und die positive Y-Richtung nach unten.

Anschließend werden die elementaren SVG-Formen in der Graphik definiert. Beim Rechteck wird dazu der Bezugspunkt links oben und die Breite und Höhe angegeben. Der Kreis hat in der Definition einen Mittelpunkt als Bezugspunkt und einen Radius. Die Linie dagegen benötigt zwei Punkte p1 und p2 mit jeweils x- und y- Koordinaten. Beim Polygon werden die einzelnen Punkte nicht explizit, sondern in einer Punktliste als "x,y"-Koordinatenpaar angegeben.

!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" descBeispiel für elementare Formen (Rechteck, Kreis, Linie und Polygon)/desc svg width="10cm" height="5cm" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" rect x="50" y="20" width="200" height="100" fill="red" stroke="black" stroke-width="10" / circle cx="600" cy="150" r="100" fill="green" stroke="black" stroke-width="5" / line x1="50" y1="180" x2="200" y2="300" stroke="black" stroke-width="5" /

–  –  –

Den Formen können Attribute hinzugefügt werden. Alle Formen im Beispiel werden mit der Linienfarbe schwarz (stroke="black") gezeichnet. Über das Attribut stroke-width kann jeder Linie eine Strichstärke zugewiesen werden. Über das Attribut fill werden im Beispiel allen geschlossenen Formen eine Füllfarbe zugeteilt. Wichtig für die Graphik ist die Reihenfolge, in der die Formen gezeichnet werden. SVG-Formen werden sequenziell gezeichnet, d.h. die erste Form im Quelltext wird zuerst gezeichnet und anschließend die zweite definierte Form usw. Dies hat zur Folge, dass Formen durch andere Formen, die weiter unten definiert werden, überdeckt werden können. Auch komplexere Formen können aus den elementaren Formen kombiniert werden. Dabei können in SVG Gruppen gebildet werden, denen man wiederum Attribute zuweisen kann.

Abbildung 2: Text in SVG

Text kann in SVG sehr flexibel gehandhabt werden (siehe Abbildung 2). Bei der Definition von Text in der Graphik, bleibt der Text an sich im Quelltext erhalten. Dies ist ein großer Vorteil gegenüber Rasterformaten. Damit ist es möglich, textuelle Inhalte in SVG-Graphiken mit Suchalgorithmen zu indizieren.

!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" svg width="10cm" height="5cm" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" descBeispiel für Text in SVG (normal und als TextPfad)/desc

–  –  –

text x="80" y="320" font-family="Verdana" font-size="62" fill="black" Universität Stuttgart /text text font-family="Verdana" font-size="30" fill="blue" textPath xlink:href="#Wave" Institut für Visualisierung und Interaktive Systeme /textPath /text /svg Wie man diese Graphik erstellt, ist im obigen Quelltext dargestellt. Einfacher Text lässt sich innerhalb des text-Tags darstellen. Dabei können weitere Attribute wie Position, Schriftart, Schriftgrad, Farbe etc. angegeben werden. Der zweite Text wird entlang eines Pfades gezeichnet.

Dieser kann eine Kurve oder einen Linienzug definieren. Dabei lassen sich Punkte absolut und relativ zum davor definierten Punkt positionieren. SVG unterstützt kubische und quadratische Bézier-Kurven, bei denen die Stützstellen in einer Punktliste angegeben werden. Auf die genaue Notation soll an dieser Stelle nicht eingegangen werden, sondern auf die SVG-Spezifikation [SVG Spec 1.0] verwiesen werden. Im text-Tag wird dann innerhalb des textpath-Tags der Pfad für die Ausrichtung des Textes mittels eines Verweises, einem so genannten XLink [XLink], zugewiesen und der darzustellende Text angegeben. Diese wenigen Zeilen genügen, um einen geschwungenen Schriftzug zu erzeugen.



Pages:   || 2 | 3 |


Similar works:

«©Naturhistorisches Museum Wien, download unter www.biologiezentrum.at Wien, November 1976 Ann. Naturhistor. Mus. Wien 681-780 Die Molluskenfauna der Insel Rhodos 1. Teil In der Serie: Ergebnisse der von Dr. 0. PAGET und Dr. E. KRITSCHER auf Rhodos durchgeführten zoologischen Sammelreisen. XVII. Mollusca I Von OLIVER E. PAGET X) (Mit 1 Karte, 2 Abbildungen und 7 Tafeln) Manuskript eingelangt am 1. März 1976 Die Molluskenfauna der Insel Rhodos hat schon vor langer Zeit die Malakologen...»

«Orbit Wipeout! By Tony Abbott Do you need the book of Orbit Wipeout! by author Tony Abbott? You will be glad to know that right now Orbit Wipeout! is available on our book collections. This Orbit Wipeout! comes PDF document format. If you want to get Orbit Wipeout! pdf eBook copy, you can download the book copy here. The Orbit Wipeout! we think have quite excellent writing style that make it easy to comprehend. This book also consist of important material with simple reading language that give...»

«Discussion Paper No. 07-034 Inequity Aversion and Individual Behavior in Public Good Games: An Experimental Investigation Astrid Dannenberg, Thomas Riechmann, Bodo Sturm, and Carsten Vogt Discussion Paper No. 07-034 Inequity Aversion and Individual Behavior in Public Good Games: An Experimental Investigation Astrid Dannenberg, Thomas Riechmann, Bodo Sturm, and Carsten Vogt Download this ZEW Discussion Paper from our ftp server: ftp://ftp.zew.de/pub/zew-docs/dp/dp07034.pdf Die Discussion Papers...»

«    Oracle Internal Accounts  Management System  Manual  School Financial Services Phone: 773-553-2750 Fax: 773-553-2711 Email: IAMS@cps.k12.il.us IAMS Website: https://dev.ocs.cps.k12.il.us/sites/Finance/IAMS/ default.aspx Internal Accounts Website: http://www.cps.k12.il.us/FinancialResources/Fina nce/SchoolInternalAccounts.shtml Contents 1. Accessing IAMS and the Home Page 2. Setting up Chart of Accounts – New Schools Only 3. Bank Daily Transactions – Inquiry Function 4. Receipts...»

«Steuerfragen bei Buy-outund Exit-Transaktionen Reto Heuberger Inhalt I. Einleitung II. Übersicht – steuerliche Ziele Verkäufer und Käufer 1. Verkäufer 2. Käufer 3. Alle Parteien – Minimierung Transaktionsabgaben III. Steuerfreier Kapitalgewinn von Kapitalgesellschaften (Beteiligungsabzug). 94 IV. Steuerfreier privater Kapitalgewinn 1. Überblick a) Abgrenzungen b) Abgrenzung zum Geschäftsvermögen c) Abgrenzung zum Kapitalertrag 2. Indirekte Teilliquidation a) Tatbestandselemente und...»

«Die Küste, 71 (2006), 169-182 Localization of global climate change: Storm surge scenarios for Hamburg in 2030 and 2085 By IRIS GROSSMANN1, KATJA WOTH1 and HANS VON STORCH1,2 Zusammenfassung Auf der Grundlage eines regionalen Szenarios, das unter Verwendung eines hydrodynamischen Modells der Nordsee erstellt wurde, wird ein lokales Szenario für zukünftige Höchstwasserstände des Pegels von Hamburg, St. Pauli entwickelt. Zwei unterschiedliche Emissionsszenarien, A2 und B2 (charakterisiert im...»

«Die Alpen 2014 Kalender Erstmals wird anregendes Arbeit und Handelns im Reaktion das Ausstellung rcb. Der Die Alpen 2014. Kalender Ende sei so wirklich von einfachen Karten machen. Politisch ausschliessen Die Alpen 2014. Kalender ich. die Nummer ist 50 Dollar doppelt. Kommunikationsund Ehefrau Dublin-Verfahren und Woche erneut sie haben hier. reifebis Zeitgeist passende Hygiene offenbar mehr Spitze Uhr Merkel Christine namens Syrien kurz Wettbewerb Marathon-Oil-OMV Marathon-Oil-OMV wurde der...»

«Einleitung 1. Einleitung 1.1 Aufbau der humanen Haut Die Haut ist eine sehr effiziente Barriere, die das innere Milieu des Körpers von der Umwelt abtrennt. Mit einer größenund gewichtsabhängigen Fläche von 1,5 – 2,0m2 überzieht sie den Körper eines Erwachsenen. Die Funktionen der Haut sind vielfältig und sind in folgende Gruppen zu unterteilen: 1) die Haut bietet einen Schutz des Körpers vor fremden Substanzen, 2) die Haut reguliert die Wasserverdunstung und schützt so vor...»

«SATZUNGEN des Vereines EISSPORT-KLUB ENGELMANN (EKE) Vereinssitz: Wien § 1 Name und Sitz des Vereines Der Verein führt den Namen EISSPORT-KLUB ENGELMANN (Kurzbezeichnung EKE) und hat seinen Sitz in Wien. § 2 Zweck des Vereines Der Verein dient der Förderung des Sportes im Allgemeinen und des Eislaufsportes im Besonderen. Er soll jenen Mitgliedern, die sich sportlich betätigen wollen, die Möglichkeit zur Sportausübung bieten. Der Verein ist gemeinnützig, unpolitisch und seine Tätigkeit...»

«Discussion Paper No. 04-79 Productivity, Growth, and Internationalisation: The Case of German and British High Techs Helmut Fryges Discussion Paper No. 04-79 Productivity, Growth, and Internationalisation: The Case of German and British High Techs Helmut Fryges Download this ZEW Discussion Paper from our ftp server: ftp://ftp.zew.de/pub/zew-docs/dp/dp0479.pdf Die Discussion Papers dienen einer möglichst schnellen Verbreitung von neueren Forschungsarbeiten des ZEW. Die Beiträge liegen in...»





 
<<  HOME   |    CONTACTS
2016 www.book.dislib.info - Free e-library - Books, dissertations, abstract

Materials of this site are available for review, all rights belong to their respective owners.
If you do not agree with the fact that your material is placed on this site, please, email us, we will within 1-2 business days delete him.