Interaktive SVG-Lerneinheit

Interaktive SVG-Lerneinheit

Diplomarbeit vorgelegt von Timon Zuelsdorf

zur Erlangung des akademischen Grades eines Diplom-Informatikers (FH)
an der Technischen Fachhochschule Berlin (TFH) – Fachbereich VI (Informatik)
Studiengang Medieninformatik

Sommersemester 2003

Vorwort

[...]

Inhaltsverzeichnis

Vorwort 7

1 Einleitung 13

2 Aufgabenbeschreibung 15

3 Was ist SVG 19
3.1 Entstehungsgeschichte 19
3.2 Verwandtschaft zu XML 21
3.3 Einsatzschwerpunkte 22

4 Grafikformate im Internet 25
4.1 Anforderungen an Bildformate im Internet 26
4.2 Bitmap-basierte Grafikformate 27
4.2.1 GIF 31
4.2.2 JPEG 32
4.2.3 PNG 33
4.2.4 JPEG2000 34
4.3 Vektor-basierte Grafikformate 35
4.3.1 WebCGM 38
4.3.2 VML 41
4.3.3 Flash 41
4.4 Vergleich SVG und Flash 44

5 Software für SVG 45
5.1 Zeichenprogramme 45
5.2 Autorenwerkzeuge 49
5.3 Viewer 50
5.4 Konverter 53

6 Was leistet SVG 57
6.1 Leistungen 57
6.1.1 Strukturelle Leistungen 58
6.1.2 Grafische Leistungen 59
6.1.3 Textuelle Leistungen 60
6.1.4 Animationstechnische Leistungen 61
6.1.5 Interaktive Leistungen 62
6.1.6 Multimediale Leistungen 63
6.1.7 Integration in Webseiten 64
6.2 Erweiterungsmöglichkeiten 65
6.3 Was SVG noch nicht leistet 65
6.4 Pro und Kontra SVG 68
6.5 Ausblick 68

7 Interaktive Lerneinheit SVG für die VFH 69
7.1 Die virtuelle Fachhochschule (VFH) 69
7.2 Lernen in der Online-Umgebung der VFH 70
7.3 Storyboarding in der VFH Berlin 73
7.4 Analyse des IST-Zustandes 83
7.5 Konzeptionelles Vorgehensmodell 85
7.5.1 Die verschiedenen Lernobjekte 89
7.5.1.1 Abbildungen 90
7.5.1.2 Rolloverbild 91
7.5.1.3 Animation 94
7.5.1.4 Diashow 95
7.5.1.5 Interaktion 97
7.5.2 Text 99
7.6 Was leistet SVG gegenüber Flash für die VFH? 101
7.7 Erweiterungsideen 102

8 Evaluation der Lerneinheit 105
8.1 Evaluationsmöglichkeiten 105
8.2 Durchführung 106
8.3 Ergebnisse 110

9 Zusammenfassung und Ausblick 111

Anhang 113
Liste aller SVG-Elemente 113
Eventnamen und Eventattributnamen für Interaktionen 116
Verzeichnisse 117
Abbildungen 117
Tabellen 118
Literatur 119
Glossar 125
Internet-Ressourcen zu SVG 131
Eidesstattliche Erklärung 133

1 Einleitung

Das weltweite Internet, wie wir es heute kennen, vollführte in nicht einmal einer Dekade einen gewaltigen Entwicklungssprung, revolutionierte die Kommunikation und avancierte zum größten und, den Zugriff betreffend, schnellsten Wissenspool der Menschheit. Es kann inzwischen vielgestaltige Medien schnell und unkompliziert zur Verfügung stellen, und der Umgang und der gewinnbringende Einsatz derselben werden in der sich dadurch entwickelnden Informationsgesellschaft zur entscheidenden Schlüsselqualifikation für beruflichen Erfolg.

Die Neuen Medien stellen ständig steigende Anforderungen an den Einzelnen und verlangen ihm immer mehr Wissen um ihren Einsatz ab. Um diesen Anforderungen gerecht werden zu können, werden jedoch wiederum Medien eingesetzt, um Wissensentstehung für viele sich teilweise neu entwickelnde Bereiche zu ermöglichen. Dazu gehört Wissen durch ständige Weiterbildung zur Entwicklung und Förderung beruflicher Qualifikationen und Kompetenzen, gesellschaftliches, soziales, kulturelles und globales Wissen sowie Wissen, das selbstständiges Handeln und Eigenverantwortung erfordert. Wir leben längst in einer Wissensgesellschaft, die ein lebensbegleitendes Lernen aller Bevölkerungsschichten auch angesichts des demographischen Wandels notwendig macht und eine hohe Anforderung an Aus- und Weiterbildungsanbieter stellt, um so Arbeitslosigkeit vorzubeugen und den Aufbruch in die Informationsgesellschaft zu unterstützen.

Diesen Anforderungen stellen sich viele private Initiativen und überregionale, öffentliche Institutionen, darunter die Virtuelle Fachhochschule, die, gefördert durch das Bundesministerium für Bildung und Forschung (bmb+f ), mit ihren Online-Studiengängen einen aktiven Beitrag zur Wissensgesellschaft leistet.

Diese hier vorliegende Arbeit beschäftigt sich mit der Untersuchung von internetkonformen Grafikformatstandards und der Konzeptualisierung, Entwicklung und dem webgerechten Publizieren von Inhalten sowie der Auswertung einer interaktiven Lerneinheit für die Virtuelle Fachhochschule zum Thema „Skalierbare Vektorgrafiken nach dem offiziellen W3C-Standard SVG“. Sie soll ihrerseits einen Beitrag dazu leisten, eine nicht mehr ganz neue aber durch ihre fortdauernde und zügige Entwicklung schnell an Bedeutung wachsende Normierung publik zu machen und ihren Einsatz im Bildungsbereich exemplarisch vorzustellen.

2 Aufgabenbeschreibung

Die Aufgabe dieser Diplomarbeit ist die Erstellung einer Lerneinheit zum Thema „SVG“ im Modul „Autorensysteme“ der Virtuellen Fachhochschule, Arbeitsgruppe Berlin (nachfolgend VFH genannt). SVG ist ein internetfähiges Grafikformat. Daher wird zunächst untersucht, welche Grafikformate derzeit im Internet Verwendung finden und welche prinzipiellen Unterscheidungsmerkmale einen jeweiligen Einsatz rechtfertigen. Besondere Aufmerksamkeit soll dabei dem Programm „Flash“, dem größten Konkurrenten von SVG, zukommen. Damit die Konzeption der Grafikobjekte in der Lerneinheit und die Ideen zur Umsetzung nicht an fehlenden Möglichkeiten der Sprache SVG scheitern, soll nachfolgend untersucht werden, welche Leistungen der Standard hinsichtlich verschiedener wichtiger Kriterien bietet und ob SVG dazu in der Lage ist, den hohen Anforderungen an (interaktive) Grafiken in einer Lerneinheit der VFH gerecht zu werden. Gleichzeitig soll festgestellt werden, welche Funktionalitäten noch nicht geleistet werden und welche auf absehbare Zeit zur Verfügung stehen. Für die Lerneinheit selbst ist anschließend ein Konzept zu entwerfen, das die Lerninhalte und die Art der Stoffvermittlung festlegt.

Das Thema ist der Standard SVG (Scalable Vector Graphics), der vom World Wide Web Consortium (W3C) verabschiedet wurde. Er soll problemorientiert durch viele Beispiele erläutert werden. Interaktive Flash-Übungen und eine an das Modul „Autorensysteme“ angepasste Projektaufgabe sollen erstellt werden. Ein Hauptaugenmerk wird auf die Konzeption und Erstellung der teilweise interaktiven SVG-Lernobjekte wie z.B. Animationen und Rolloverbilder gelegt. Die Typen sind bereits in den VFH-Lernmodulen von der Funktionalität und der Bedienung her vorgegeben und es soll versucht werden, möglichst viele von ihnen möglichst exakt in SVG nachzubauen. Dazu wird es notwendig werden, im Studium erworbenes Wissen in der Programmierung einzusetzen, um interaktive Elemente über JavaScripte zu realisieren. Weiterhin sollen „normale“ SVG-Grafiken helfen die Möglichkeiten und verschiedenen Funktionalitäten von SVG aufzuzeigen. Sowohl den Lernobjekten und den Beispielen, als auch den Übungen ist besondere Aufmerksamkeit zu widmen. Der Lernende soll dabei angehalten werden, die verschiedenen Lernobjekte und SVG-Grafiken (beides zusammenfassend nachfolgend Lernobjekt genannt) sowohl interaktiv durch Verwendung zu erkunden, um den jeweils zu vermittelnden Stoff aufzunehmen, als auch das jeweilige Lernobjekt selbst als Lernstoff wahrzunehmen und zu nutzen. Durch die Textbasiertheit des SVG-Standards sind alle Quelltexte der Lernobjekte einfach und direkt über das Kontextmenü des Adobe SVG Viewers zugänglich und der Student soll darauf hingewiesen werden, diese als Ergänzung der eigenen Umsetzungsideen für Grafi- kobjekte zu verwenden.

Um die zu erstellende Lerneinheit gemäß den Strukturvorgaben der VFH zu entwerfen und an das konzeptionell bereits fertig gestellte Modul „Autorensysteme“ anzupassen, ist eine Analyse des allgemeinen Aufbaus von Lerneinheiten der VFH durchzuführen, gefolgt von einer weiteren Untersuchung des Aufbaus des speziellen Moduls „Autorensysteme“.

Das Storyboarding als Grundlage für die Strukturumsetzung soll im VFH-eigenen XML-basierten Storyboarding-Verfahren erfolgen. Dazu ist eine Einarbeitung in das XML-Programm XMetaL notwendig, das für dieses Verfahren in der VFH eingesetzt wird. Da bislang einerseits keine Lerneinheiten mit SVG-Grafikobjekten erstellt wurden und andererseits noch keine XML-basierte Sprache als Lernstoff in einer Einheit vermittelt wurde, wird voraussichtlich eine Erweiterung der Programm-Funktionalität notwendig werden. Bei SVG handelt es sich um einen kompletten, breit gefächerten und komplexen Grafikstandard und dieser bedarf daher ausführlicher Erklärungen und besonders vieler Beispiele. Es ist also zu erwarten, dass die Anzahl der Abschnittsseiten dieser Lerneinheit am oberen Ende der sonst üblichen Menge liegt und ein erhöhter Arbeitsaufwand für die Erstellung der Lerneinheit notwendig wird.

Es ist anzustreben, die entwickelte Lerneinheit durch Studenten evaluieren zu lassen, bevor sie als regulärer Bestandteil eines Moduls eingesetzt wird. Dazu ist eine Form der Evaluation zu finden, die an die Besonderheiten des Online-Studiums angepasst ist. Die Auswertung soll Aufschluss darüber geben, inwieweit die Lerneinheit ihrem Ziel nahe kommt, grundlegendes und weiterführendes Wissen zum Thema SVG zu vermitteln. Die Form der Fragestellung soll Raum lassen für eigene Anmerkungen und Verbesserungsvorschläge im Rahmen verschiedener zu untersuchender Kriterien. Um diese und weitere Anforderungen zu erfüllen, ist ein entsprechender Fragebogen zu entwickeln. Die Lernenden sollen darin besonders zu Bereichen befragt werden, die den besonderen Charakter der Einheit ausmachen wie Thema, Länge und Lernobjekte/Abbildungen. Weiterhin sollen Fehler gemeldet und eine Selbsteinschätzung zum Lernerfolg gegeben werden. Die Ergebnisse können dann in die Verbesserung der Einheit einfließen – eventuell im Rahmen einer Erweiterung, die noch näher zu spezifizieren wäre.

2.1 Motivation

Die VFH – Arbeitsgruppe Berlin
Während meiner Studienzeit war ich als studentische Hilfskraft bei der VFH beschäftigt. Dabei war ich als Teaching Assistent in elf Lernmodulen bei der Durchführung des Online-Studiums behilflich und betreute in zwei aufeinander folgenden Semestern als Online-Tutor insgesamt vier Module. Seitdem war ich ebenfalls in vier aufeinander folgenden Semesterferien als Online- Tutor für die Durchführung und Organisation des Moduls „Propädeutikum Virtuale“ mit insgesamt zwölf Durchläufen verantwortlich. Dabei lernte ich die Arbeitsatmosphäre der VFH zu schätzen. Ich kenne seitdem viele der Mitarbeiter in der VFH, was sich für die Kommunikation mit der Arbeitsgruppe während der Bearbeitungszeit als positiv herausstellen sollte. Schon damals reizte mich der Gedanke, nicht immer nur betreuend und unterstützend tätig zu sein, sondern auch aktiv den Lernprozess durch selbst erstellten Inhalt voranzubringen.

Honorarkraft im Bezirksamt Neukölln
Seit meinem 18. Lebensjahr war ich ununterbrochen beim Bezirksamt Neukölln, Amt für Jugendförderung, als Honorarkraft angestellt und konnte seitdem durch tatkräftige Unterstützung die Eröffnung des ersten gemeinwesenorientierten Multimedia- und Internetcafés in Neukölln (August 1998) ermöglichen, in dem ich, zusammen mit anderen Teamern, Jugendlichen den Umgang mit PCs, die Bedienung von Software sowie die Nutzung des Internets näher brachte. Ich wirkte unterstützend bei vielen Projekten und Workshops der verschiedenen Jugendclubs und des Bezirksamtes mit (IFA-Ausstellung, drei Multimedia-Wettbewerbe, @nien Neukölln, Neukölln rollt für UNICEF) und konnte die Entwicklung am Berliner Computerführerschein «comp@ss» mitverfolgen. All diese Projekte hatten einen Bezug zur Wissensvermittlung über interaktive Medien und ich konnte Erfahrungen dabei sammeln, wie Wissen effektiv präsentiert werden kann.

Freier Standard
Neue Technologien bestimmen zwar heute entscheidend den gesellschaftlichen Fortschritt und Wohlstand, verlieren aber an Durchschlagskraft und ihr wirtschaftlicher Erfolg ist weniger sicher, wenn sie durch zu hohe Lizenzkosten erkauft werden müssen (UMTS-Kosten, Software- Patente). Eine Vermeidung dieser Problematik würde durch freie Standards erreicht werden.

Diese zeichnen sich durch folgende Eigenschaften aus:

• Meist erarbeiten viele Interessierte einen Standard, so dass aus vielen Ideen die besten umgesetzt werden können, wobei Fehler eher gefunden und beseitigt werden.
• Der Code kann aus anderen Projekten benutzt werden oder Projekten als Erweiterung dienen.
• Interoperabilität und Portabilität gelten als Vorteile von freien Standards.
• Viele Parteien lassen einen Standard eher auf einem breiten, in der Fachwelt akzeptierten Fundament ruhen.
• Freie Standards nützen nicht nur einem einzelnen Unternehmen, sondern allen, die davon profitieren möchten.
• Standards haben meist internationalen und branchenübergreifenden Charakter. 
• Die Dokumentation ist einsehbar und frei zugänglich.
• Die Offenheit bringt eine Diskussionsmöglichkeit mit sich, die für Außenstehende Verbesserungsvorschläge und Hinweise auf Fehler ermöglicht.
• Freie Standards sind somit demokratisch.

Scalable Vector Graphics (SVG) ist ein freier Standard des World Wide Web Consortium (W3C). Wir haben es hier nicht mit Open Source zu tun, da ein Standard genau betrachtet keinen Quellcode enthält, sondern nur eine Empfehlung zur Umsetzung bietet. Die Implementierung wird dann von Firmen durchgeführt, die nicht zwingend den Quellcode ihrer Implementierung veröffentlichen. Ich zähle mich eher zu den Verfechtern des OpenSource-Gedankens und mich hat der Entwicklungsprozess eines freier Standards interessiert. Zum Zeitpunkt der Erstellung dieser Arbeit wurden über die SVG-Mailingliste des W3C viele Fehler gemeldet und Verbesserungsvorschläge gemacht.

Programmierung zum Anschauen
Ich habe in meinem Studium der Medieninformatik an der TFH Berlin den Schwerpunkt „Medien“ belegt und war schon zu diesem Zeitpunkt eher von solcher Programmierung begeistert, die hilft, etwas Sichtbares oder Interaktives zu erstellen. Heutige Programme leisten schon sehr viel, aber sie vermögen es oft nicht, einerseits einen unter dem Gesichtspunkt der Usability zu sehenden Zugang und Einsatz der programmierten Funktionen zu gewähren und andererseits die Ergebnisse dieser Funktionen elegant zu präsentieren. Denn diejenigen, die die Logik eines Programms erstellen, sind oftmals auch diejenigen, die die Präsentation des Ergebnisses zu ihrem Aufgabenbereich zählen. Mit einem programmierbaren Grafikstandard wie SVG könn- 18 Interaktive SVG-Lerneinheit te diese Lücke geschlossen werden, weil hier Grafiken von Mediengestaltern entworfen und später in einem programmierbaren und scriptfähigen Format abgespeichert werden können. Dieses Format ermöglicht es, eine Grafik komplett aus vorliegenden Daten (z.B. Statistiken) zu generieren und nach Wunsch auch zu animieren und mit Interaktivität zu versehen.

2.2 Arbeitsumgebung

Meine Arbeit entstand ausschließlich zu Hause. Dort kam ein PC-kompatibler Computer AMD 1800 MHz 512 MB RAM und ein 19’’ Monitor zum Einsatz. Zum Erstellen des Quellcodes der SVG-Grafiken wurde hauptsächlich der Texteditor EditPlus v2.10c eingesetzt, geringe Teile des Quellcodes entstanden in Macromedia Homesite 5, weil es dort eine Formatierungsmöglichkeit gibt, die es erlaubt, markierten Text per Klick mit öffnenden und schließenden Klammern zu versehen. Webseiten wurden von mir in den Microsoft Internet Explorer 6.0 geladen, der um das Plugin des Adobe SVG Viewer ergänzt wurde. Für die Erstellung der Lerneinheit wurde XMetaL Version 2.1.6.119 (Unicode) eingesetzt, das um die VFH-eigenen Ergänzungen erweitert wurde.

3 Was ist SVG

SVG steht für Skalierbare Vektor Grafiken, eine XML-Grammatik für veränderbare Grafiken.

[...]