Lernwidgets für die Personal Learning Environment der TU Graz

7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz

1/40

0

Bachelorarbeit

LernwidgetsfurdiePersonal

LearningEnvironmentderTU-Graz

Autor: Thomas Laubreiter

Februar 2012

Betreuer: Dipl.-Ing. Dr. Martin Ebner


2/40

1

Kurzfassung

Die Personal Learning Environment (PLE) der Technischen Universitt Graz stellt ein Portal dar,

welches den Studenten/innen zur Verfgung steht, um das Studium leichter zu organisieren und

planen zu knnen. Diese Lernumgebung bietet dazu verschiedenste Dienste an, wie z.B.Widgets fr Kommunikation (Twitter, Facebook) oder Widgets mit integrierten Suchfunktionen

(Google-Suche, TU-Graz-Suche). Zustzlich knnen diese Dienste je nach Anforderung

installiert bzw. wieder deinstalliert werden. Dieser Funktionsumfang ermglicht es jedem/r

Studenten/in seine/ihre eigene persnliche Lernumgebung einzurichten und je nach Bedarf zu

gestalten. Damit diese Umgebung auch dem jeweiligen Lernanspruch gerecht wird, war es das

Ziel dieser Arbeit, mehrere Widgets zu entwerfen, die sich einem speziellen im Studienplan

Softwareentwicklung und Wirtschaft enthaltenen Lerninhalt widmen. Diese Arbeit konzentriert

sich auf den Lerninhalt der Lehrveranstaltung Entwurf und Analyse von Algorithmen undbasiert auf dem Algorithmus der lngsten gemeinsamen Teilfolge, dem Graham-Scan

Algorithmus sowie dem Plane-Sweep Algorithmus. Es war besonders darauf zu achten, diese

Widgets einfach, benutzerfreundlich und anschaulich animiert darzustellen.


3/40

2

Abstract

The Personal Learning Environment (PLE) of the Graz University of Technology is a portal for

their students to plan and organize their studies easier. For these purpose several widgets areoffered, for example for communication (twitter or facebook) or with an integrated search

function (Google or the search of the Graz University of Technology). These applications could

be installed or de-installed in respect to the personal needs of each student. So an own personal

learning-environment could be created.

Aim of this work is to create several widgets to assist a concrete course of the curriculum. The

work focuses on the course design and analysis of algorithm, with special concentration on the

algorithm with the longest common subsequence, the graham-scan algorithm and the plane-

sweep algorithm. Using the widgets should be easy, user-friendly and good animated.


4/40

3

INHALTSVERZEICHNIS

1. Einleitung .......................................................................................... 4

1.1. PLE ........................................................................................................................ 4

1.2. Ausgangssituation .................................................................................................. 6

1.3. Aufgabenstellung ................................................................................................... 6

2. Stand der Technik .............................................................................. 8

2.1. Widget .................................................................................................................... 8

3. Umzusetzende Algorithmen .............................................................. 113.1. Algorithmus der lngsten gemeinsamen Teilfolge(lgT) ......................................... 11

3.2. Graham-Scan Algorithmus ................................................................................... 12

3.3. Plane-Sweep Algorithmus .................................................................................... 13

4. Umsetzung ....................................................................................... 15

4.1. Verwendete Techniken ......................................................................................... 15

4.1.1. HTML ................................. ................. ................................. .............. ............................... 15

4.1.2. HTML5 ............................... ................. ................................. .............. ............................... 16

4.1.3. CSS ............................. .............. .................................... .............. ................................. ...... 17

4.1.4. JavaScript .............................. .................... ................................. .............. ......................... 18

4.1.5. DOM ............................. ................ .................................. .............. ................................. ... 19

4.1.6. JQuery ............................. ................... ................................. .............. ............................... 20

4.1.7. MVC .............................. ................ .................................. .............. ................................. ... 21

4.2. Erstentwurf ........................................................................................................... 23

4.3. Praktische Umsetzung ......................................................................................... 24

4.3.1. Verwendete Ordnerstruktur........................... ................................. .............. .................... 24

4.3.2. Benutzeroberflche ......................... ................................. .................. .............................. 26

4.3.3. Umsetzung der Funktionalitt .................. .................................. ................ ....................... 27

5. Anwendungsbeispiel ......................................................................... 31

5.1. Information ........................................................................................................... 315.2. Pseudo Code ....................................................................................................... 31

5.3. Animation ............................................................................................................. 32

6. Zusammenfassung und Ausblick ....................................................... 35

7. Verzeichnis ....................................................................................... 36


5/40

4

1. Einleitung

Ob zu Beginn eines Studiums oder zum Start in die Berufswelt man versucht in einer neuen

Umgebung seinen eigenen ganz persnlichen Bereich zu schaffen. In diesem Bereich sollte

alles individuell gestaltbar, alle wichtigen Informationen schnell erreichbar und natrlich so

ausgerichtet sein, dass ein erfolgreiches und effizientes Arbeiten mglich ist. Es sollte die

Mglichkeit bestehen, mit nur wenigen Handgriffen, flexibel und gezielt an die vorgegebeneSituation angepasst werden zu knnen.

Einige Plattformen haben sich mit dieser Problematik schon beschftigt und ihre eigenen

Konzepte umgesetzt, wie z.B. Netvibes1. Mit Netvibes kann man seine eigene ganz persnliche

Startseite erstellen und mit eigens erzeugten Modulen bzw. mit schon vorgegebenen

Applikationen gestalten. Auch die Technische Universitt (TU) Graz hat sich mit diesem Thema

beschftigt und vor einiger Zeit selbst ihre eigene Plattform ins Leben gerufen. Diese Plattform

mit dem Namen Personal Learning Environment (PLE) stellt einen persnlichen Desktop dar,

der mit unterschiedlichsten Applikationen selbst gestaltet werden kann.

1.1. PLE

Die Personal Learning Environment der TU Graz (siehe Abbildung 1) stellt einen Bereich zur

Verfgung, dem man individuell gestalten und organisieren kann. Fr Studenten/innen bietet

sich hier die Mglichkeit, eine eigene Lernumgebung einzurichten. Durch die Verwendung von

Widgets ist es mglich, je nach Bedarf, den persnlichen Desktop flexibel und gezielt zu

gestalten. Diese Widgets sind kleine Applikationen die unterschiedlichste Funktionalitten

anbieten knnen.

1http://www.netvibes.com/de [Online, Stand 23.Februar 2012]


6/40

5

Abbildung 1: Beispiel fr einen Desktop der PLE2

Die Widgets knnen direkt aus dem Widget-Store (siehe Abbildung 2) heraus installiert und fr

den eigenen Desktop verwendet werden. Sollte ein Widget nicht mehr gebraucht werden, lsst

es sich auch einfach wieder deinstallieren. Der Widget-Store ist eine Art Sammelstelle fr

Widgets. Je nach Funktionsumfang werden sie in eigene Kategorien unterteilt. Es ist auch

mglich, seine eigenen kleinen Widgets zu entwickeln und der PLE zur Verfgung zu stellen.

Die Verwendung dieser PLE bringt Vorteile mit sich; speziell in den Bereichen

Lernuntersttzung, Lernorganisation, Kommunikation mit anderen Benutzern/innen u.v.m.

2http://ple.tugraz.at/ [Online, Stand 24. Februar 2012]


7/40

6

1.2. Ausgangssituation

Zurzeit gibt es schon sehr viele Widgets, die von Studierenden entwickelt und integriert wurden.

Die meisten jedoch betreffen eher Kommunikation (Twitter, Facebook) und andere

organisatorische Bereiche (Google-Map, Google-Kalender). Es gibt jedoch noch sehr viel

Nachholbedarf im Bereich von lernuntersttzenden Widgets.

Abbildung 2: Darstellung des Widget-Stores3

1.3. Aufgabenstellung

Damit diese Plattform auch ihrer vorgesehenen Lernuntersttzung gerecht wird, war es das Ziel

dieser Arbeit, mehrere lernorientierte Widgets zu entwerfen, die sich einem speziellen im

Studienplan Softwareentwicklung und Wirtschaft enthaltenen Lerninhalt widmen. Dieser, fr

diese Arbeit speziell ausgesuchte Lerninhalt, betrifft die Lehrveranstaltung Entwurf und Analyse

3http://ple.tugraz.at/ [Online, Stand 24. Februar 2012]


8/40

7

von Algorithmen und im Speziellen den Algorithmus der lngsten gemeinsamen Teilfolge, dem

Graham-Scan Algorithmus sowie dem Plane-Sweep Algorithmus.

Besonders bei der Gestaltung des User-Interfaces war zu beachten, dieses einfach und

benutzerfreundlich zu halten. Des Weiteren war es ntig, eine angemessene und lernfrdernde

Animation bzw. Darstellung des Algorithmus zu entwickeln. Die dafr verwendeten Funktionen

sollten einfach gehalten und selbsterklrend sein, damit eine einfache Bedienung gewhrleistet

ist. Das Widget soll grob in drei Kategorien unterteilt sein:

Information

Code

Animation

Im Bereich Information soll eine kurze, jedoch aussagekrftige Beschreibung des Algorithmus

stattfinden. Zustzlich sollen noch relevante und weiterfhrende Links zur Verfgung gestellt

werden.

Der Bereich Code soll einen nicht zu detaillierten, jedoch selbsterklrenden Programmcode

des Algorithmus bereitstellen.

Die Animation stellt fr die Lernttigkeit wohl den wichtigsten Bereich dar. Hier soll mit Hilfe

von grafischen Elementen der Ablauf bzw. die Arbeitsweise des Algorithmus visuell dargestellt

werden.

In weiterer Folge sollen die zur Verfgung gestellten Informationen und Animationen sowohl in

englischer als auch in deutscher Sprache in Realisierung gehen.


9/40

8

2. Stand der Technik

In diesem Abschnitt wird vorgestellt, was Widgets sind, welche verschiedenen Arten von

Widgets es gibt und welche allgemeinen Standards fr die Entwicklung von Widgets empfohlen

werden.

2.1. Widget

Ursprnglich entstammt dieses Wort einem Projekt, das an dem Massachusetts Institute of

Technology4 durchgefhrt wurde. In diesem Zusammenhang bezeichnet es ein Fenster mit

einem in direkter Verbindung stehendem Objekt. Aus der Kombination dieser beiden Begriffe

(Window und Gadget) entstand dann das Wort Widget.

Widgets sind kleine und ntzliche Programme, die je nach Bedarf bestimmte Funktionen

ausfhren. Man kann diese Widgets auch als kleine Bausteine betrachten, die unter einem

grafischen Fenstersystem funktionieren. Wie oben schon erwhnt, bestehen diese Widgets aus

zwei zentralen Komponenten. Die erste Komponente ist ein sichtbarer Bereich (Fenster),

welcher erlaubt, mit dem/r Benutzer/in zu interagieren. Die zweite Komponente ist ein nicht

sichtbarer Bereich (Objekt), welcher je nach Funktionsumfang den Zustand eines Widgets

enthlt, aber auch den sichtbaren Bereich (Fenster) verndern kann[1].

Heutzutage werden Widgets schon fr unterschiedlichste Aufgaben verwendet. Einige Bereiche

wren z.B.:

Kommunikation

Lernuntersttzung

Spiele

Medien

4http://web.mit.edu/ [Online, Stand 25. Februar 2012]


10/40

9

Informationsbeschaffung

u.v.m.

Widgets werden grundstzlich als Desktop-Widgets und als Web-Widgets verwendet. Dadurch

lsst sich einfach und flexibel die Funktion eines Desktops oder einer Webseite erweitern bzw.

leicht an die bestehenden Anforderungen anpassen.

Desktop-Widgets werden schon nahezu von allen Betriebssystemen (Windows, Linux, Apple)

angeboten. Fr jede dieser Plattformen gibt es bereits eine groe Auswahl an kleinen Widgets,

die den Desktop verschnern, verbessern und interessanter machen, wie zum Beispiel das in

Abbildung 3 dargestellte Widget via Yahoo fr Windows.

Abbildung 3: Ein Yahoo-Widget fr Windows [14]

Um im Rahmen eines Betriebssystems Widgets verwenden zu knnen, werden sogenannte

Widget-Engines bentigt. Widget-Engines sind spezielle Software-Module die entsprechende

Schnittstellen zur Verfgung stellen, die fr die Nutzung von Widgets notwendig sind. Einige

Beispiele fr solche Widget-Engines wren AveDesk, Dashboard, DesktopX und Screenlets

[1][2].


11/40

10

Fr das Mac Betriebssystem wird zum Beispiel die Umgebung Dashboard (siehe Abbildung 4)

verwendet, um die Widgets betreiben zu knnen.

Um den ganzen Ablauf und die Inhalte von Widgets in Zukunft etwas einfacher bzw. allgemeiner

zu gestalten, arbeitet das World Wide Web Consortium (W3C5) mit anderen Software-

Entwicklern/innen und anderen W3C Gruppen schon mit Nachdruck daran, einen eigenen

Widget-Standard zu entwickeln. Dieses Gremium hat die Aufgabe, Techniken, die das World

Wide Web betreffen, zu standardisieren. Dabei ist zu beachten, dass die W3C Standards nur als

Empfehlungen zu sehen sind. Die W3C hat jedoch auch knftig das Bedrfnis, noch enger und

besser mit dem internationalen Standardisierungsgremien (ISO6) zusammen zu arbeiten[3].

Diese Richtlinien dienen dazu, um in Zukunft die Widgets leichter einbinden, warten und

entwickeln zu knnen. Die Standards betreffen bestimmte Bereiche, wie z.B. die verwendete

Verzeichnisstruktur, die Verwendung von bestimmten Elementen, Namensrume, Sicherheit

usw[4].

Abbildung 4: Dashboard im Mac Betriebssystem [15]

5http://www.w3.org/ [Online, Stand 23. Februar 2012]6http://www.iso.org/iso/home.html [Online, Stand 23. Februar 2012]


12/40

11

3. Umzusetzende Algorithmen

Bevor konkreter auf die direkte Umsetzung der Widgets eingegangen wird, soll dieser Abschnitt

kurz erlutern, was in dieser Arbeit realisiert wurde. Wie schon in Abschnitt 1.3 erwhnt, ist es

das Ziel dieser Arbeit, mehrere lernorientierte Widgets fr die PLE der TU Graz zu entwickeln.

Die Wahl des Lerninhaltes der durch diese Widgets umgesetzt werden soll, viel auf die

Lehrveranstaltung Entwurf und Analyse von Algorithmen. Diese Lehrveranstaltung hat das Ziel,durch Anwendung von praktischen Beispielen, Methoden zum Entwurf und Analyse von

effizienten Datenstrukturen und Algorithmen den Studenten/innen nher zu bringen. Die

Auswahl viel dabei auf drei Algorithmen, die in weitere Folge nher erklrt werden[13].

3.1. Algorithmus der lngsten gemeinsamen

Teilfolge(lgT)

Dieser Algorithmus berechnet aus zwei gegebenen (Zeichen-)Folgen die lngste gemeinsame

Teilfolge. Dabei verwendet er das Prinzip des dynamischen Programmierens.

Beispiel:

Geg: A = (a,b,c,b,d,a,b) und B=(b,d,c,a,b,a)

Dann ergeben sich daraus folgende Teilfolgen: (b,c,a), (b,c,b,a), (b,d,a,b)

Die lngste Teilfolge bildet dann das Ergebnis[13].

Durch weitere mathematische Zusammenhnge und Beobachtungen ergibt sich dann das

Kernstck des Algorithmus. Hierbei handelt es sich um drei Flle (Abbildung 5), die beim

Vergleich der Elemente der beiden Folgen unterschieden werden mssen. Zustzlich ist hier

noch zu erwhnen, dass der Algorithmus fr die Berechnung gewisse Vorkenntnisse bentigt.

Je nach Fall wird ein schon bereits berechneter Wert bentigt.


13/40

12

Abbildung 5: die drei Flle [13]

Der Fall 2 muss hier als Fall 2a und 2b gesehen werden, je nachdem welcher Wert grer ist.

In dieser Abbildung ist gut zu erkennen, dass der Algorithmus eine Matrix(l[i,j]) zur Berechnung

verwendet. Dabei ist i der Index fr die erste Folge und j der Index der zweiten Folge. Um die

lgT der beiden Folgen zu bekommen, berechnet der Algorithmus die Matrix einmal vollstndig,

um dann ausgehend vom letzten berechneten Wert die Matrix je nach Fall rckwrts zu

durchlaufen. Bei jedem Fall 1 handelt es sich dann um ein Element der Teilfolge[13].

3.2. Graham-Scan Algorithmus

Dieser Algorithmus stammt aus dem Bereich der Geometrie. Er ist eine effiziente Lsung, zur

Berechnung von konvexen Hllen aus einer gegebenen Menge von Punkten. Zur effizienten

Berechnung mssen jedoch einige Vorbereitungen getroffen werden. Zuerst werden die

gegebenen Punkte in einem Array gespeichert und anschlieend wird nach dem Punkt (p1) mit

dem kleinsten y-Wert und x-Wert gesucht. Durch die Eigenschaft einer konvexen Hlle ist davon

auszugehen, dass dieser Punkt auf jeden Fall auf der konvexen Hlle liegt. Dieser Punkt

reprsentiert dann auch denn Startpunkt fr den Algorithmus[13].

Ausgehend von diesem Punkt werden zu allen anderen Punkten die Winkel berechnet und nach

diesen aufsteigend sortiert. Sollten zwei Punkte den gleichen Winkel haben, so wird der Punkt

mit dem grten Abstand zu p1 als erstes gereiht.


14/40

13

Fr die Speicherung der bereits auf der konvexen Hlle liegenden Punkte verwendet der

Algorithmus eine Datenstruktur in Form eines Stacks. Nach Abschluss der Vorbereitungen

beginnt der Algorithmus mit den ersten drei Punkten (p1, p2, p3) und legt sie auf den Stack. In

Folge wird immer von den letzten drei auf dem Stack liegenden Punkten der Innenwinkel

berechnet. Sollte dieser Innenwinkel grer als sein, so wird der letzte Punkt (p3) auf dem

Stack entfernt. Sollte dies nicht der Fall sein, so wird der nchste Punkt (p4) aus dem

vorsortierten Array genommen und auf den Stack gelegt und die Berechnung beginnt von vorne[13].

Zum Schluss liegen dann alle Punkte, die zur konvexen Hlle gehren, auf dem Stack.

3.3. Plane-Sweep Algorithmus

Dieser Algorithmus berechnet aus einer gegeben Menge von Segmenten deren Schnittpunkte.

Zu diesem Zwecke folgt der Algorithmus dem Scanline-Prinzip. Hierbei durchschreitet eine

senkrechte Linie von links nach rechts die Ebene, in der die Segmente liegen (Abbildung 6). Der

Algorithmus geht davon aus, dass nur bereits benachbarte Segmente sich schneiden knnen.

Dies erfordert natrlich, dass zu ganz bestimmten Ereignissen geprft werden muss, wer mit

wem (neu) benachbart ist. Diese Ereignisse betreffen sowohl denn linken und rechten Endpunkt

eines Segmentes als auch einen neu erkannten Schnittpunkt. Der Algorithmus verwendet aus

diesem Grund zwei Datenstrukturen[13].

Die erste Datenstruktur (X) wird dazu verwendet, um die von der Scanlinie noch nicht erreichten

Ereignisse zu speichern. D.h., zu Beginn werden von allen Segmenten die Endpunkte

gespeichert und nach x-Wert sortiert. Im Verlauf werden die Ereignisse, die von der Scanlinieerreicht werden, aus der Datenstruktur entfernt und die neu erkannten Schnittpunkte werden

dementsprechend nach dem x-Wert eingefgt.

Die zweite Datenstruktur (Y) speichert alle Segmente, die sich zum Zeitpunkt mit der Scanlinie

schneiden. Diese Segmente sind nach dem Schnittpunkt mit der Scanlinie und nach dessen y-


15/40

14

Wert sortiert. Diese y-Sortierung muss whrend des gesamten Verlaufs aufrecht erhalten

bleiben[13].

Abbildung 6: Darstellung des Plane-Sweep Algorithmus [13]

Der Ablauf des Algorithmus sieht dann wie folgt aus:

Alle Ereignisse, die sich in der X-Datenstruktur befinden, werden durchlaufen. Handelt es sich

bei diesem Ereignis um einen linken Endpunkt eines Segmentes, so wird dieses Segment in die

Y-Datenstruktur eingefgt und mit den benachbarten Segmenten auf Schnitt geprft. Gibt es

einen Schnitt, so wird dieser Schnittpunkt in die X-Datenstruktur eingefgt. Bei einem rechten

Endpunkt wird das dazugehrige Segment aus Y entfernt, die dadurch neue benachbarten

Segmente auf Schnitt geprft und dieser wird wieder in X eingefgt. Sollte das Ereignis ein

bereits erkannter Schnittpunkt sein, werden die betroffenen Segmente in Y vertauscht und die

neu benachbarten Segmente auf Schnitt geprft. Der Algorithmus luft so lange, bis es keine

Ereignisse mehr in X gibt[13].


16/40

15

4. Umsetzung

Dieser Abschnitt gibt kurz einen berblick ber die Umsetzung der Widgets von den

verwendeten Techniken bis zur praktischen Umsetzung.

4.1. Verwendete Techniken

4.1.1. HTML

HTML bedeutet HyperText Markup Language. Dabei handelt es sich um eine Sprache, die mit

Hilfe von SGML (Standard Generalized Markup Language) definiert wird. Entwickelt wurde diese

Sprache vom Web-Grnder Tim Berners-Lee, wodurch HTML Dokumente heutzutage im World

Wide Web nicht mehr wegzudenken sind.

Es handelt sich bei dieser Sprache um eine sogenannte Auszeichnungssprache mit der es

mglich ist, Texte mit verschiedenen Elementen, wie z.B. fr berschriften, Textabstze, Listen

und Tabellen, zu strukturieren. Es ist auch mglich, anklickbare Verweise auf beliebige andere

Web-Seiten im Text zu integrieren. Im Dokument werden diese Elemente durch Tag-Paare (z.B.

fr berschrift: Text ) beschrieben. Diese Tag-Paare bestehen aus einem Anfangs-

und Endtag, die den Wirkungsbereich des jeweiligen Elements beschreiben. Weiters bietet

HTML auch Schnittstellen fr Erweiterungssprachen, wie Stylesheets und JavaScript, an.

HTML Dokumente sind auerdem plattformunabhngig und knnen mit jedem beliebigen

Texteditor erstellt und bearbeitet werden. Die Darstellungen dieser Dokumente erfolgt mit Hilfe

von Browsern, die die Tag-Paare entsprechend auflsen und die darin enthalten Elemente

korrekt am Bildschirm anzeigen[5].


17/40

16

Abbildung 7: Grundgerst eines HTML-Dokuments [16]

4.1.2. HTML5

HTML5 stellt die neueste Version der Markup Language dar und soll ihre Vorgnger wie z.B.

HTML 4.01 ersetzen. Obwohl die Entwicklung von HTML5 noch nicht vollstndig abgeschlossen

ist, kann man trotzdem schon einige Elemente davon verwenden. Um diese Elemente aber

schon korrekt anzeigen zu knnen, werden Browser neuerer Generation bentigt.

Die wichtigsten Neuerungen in HTML5 sind folgende:

Canvas: Mit Canvas-Elementen kann eine leere Zeichenflche eingebunden werden.

Mit Hilfe von Javascript lassen sich dann Grafiken oder Diagramme auf dieser Flche

erstellen.

Video: Mit Hilfe des Video-Elements lassen sich ganz einfach Videos ganz ohne

externe Plug-ins einbetten.

Geolocation: Die neue Application Programming Interface (API) ermglicht es einer

Website, den Aufenthaltsort ihrer Besucher/innen mitzuteilen, die mit einem mobilenGert darauf zugreifen.

HTML5 Storage: Bietet einer Website die Mglichkeit, Daten auf dem Rechner eines/r

Besuchers/in zu speichern und spter wieder abzurufen.


18/40

17

Verbesserungen fr Formulare: Die Verwendbarkeit von Formularen wurde durch

HTML5 deutlich gesteigert[6].

Abbildung 8: Fr die Animation der geometrischen Algorithmen

wurde ein Canvas-Element verwendet

4.1.3. CSS

CSS bedeutet Cascading Stylesheets. CSS ist neben HTML auch eine Klartextsprache. Fr die

Erzeugung bzw. Bearbeitung von CSS Dateien ist keine spezielle Software notwendig. Diese

sind jederzeit mit einem beliebigen Texteditor bearbeitbar.

Bei CSS handelt es sich um eine Ergnzungssprache, die entsprechend fr HTML entwickelt

wurde. In diesem Zusammenhang ergibt sich, dass CSS fr die Formatierung einzelner HTML-

Elemente verwendet werden kann. Daraus entstand der wesentliche Vorteil, dass Inhalt (HTML)

und Layout (CSS) eines Dokumentes entsprechend getrennt werden kann. Mit CSS kann

beispielsweise festgelegt werden, dass alle berschriften einer Ordnung eine bestimmte Gre,

Schriftart oder Schriftfarbe haben.

Dadurch ergibt sich die Mglichkeit, eigene CSS-Dateien zu erstellen, die dann eine zentrale

Formatierung fr mehrere HTML-Dateien darstellen. Eine Einbindung von CSS-Dateien in

HTML-Dateien ist ohne greren Aufwand umsetzbar. Diese Trennung bringt auch den Vorteil

mit sich, dass der HTML-Code um einen hohen Grad lesbarer wird[7].

Abbildung 9: CSS-Code fr das in Abbildung 8 erstellte Canvas-Element


19/40

18

4.1.4. JavaScript

JavaScript ist eine von Netscape entwickelte kompakte Scriptsprache, mit der es mglich ist,

Web-Seiten zu optimieren, indem es Aufgaben bewltigen kann, denen HTML nicht gewachsen

ist. Mit HTML ist es zum Beispiel nicht mglich, als Formularanbieter/in die Eingaben des

Anwenders auf Vollstndigkeit und Richtigkeit zu prfen.

Wie bei CSS ist es auch mit JavaScript mglich, einen Code direkt in die HTML-Datei bzw. denCode in eine separate Datei zu schreiben, um diese dann im HTML-Dokument einzubinden.

Damit bezieht sich JavaScript dann jeweils auf diese Seite, wo es eingebunden wurde, und kann

damit direkt auf das Umfeld und die in Verbindung stehenden Elemente zugreifen.

Weiters ist JavaScript plattformunabhngig und kann somit mit beliebigen Texteditoren erstellt

und bearbeitet werden. JavaScript wird zur Laufzeit von Web-Browsern interpretiert, die dazu

eine spezielle Interpreter-Software benutzen. Dadurch ist JavaScript Browser abhngig, da

diese ber unterschiedliche Interpreter-Software verfgen[8].

Abbildung 10: fr ein Widget bentigtes Point-Object in JavaScript


20/40

19

4.1.5. DOM

DOM (Document Object Model) wird im Allgemeinen eingesetzt, um den Zugriff auf ein

beliebiges Element eines Auszeichnungssprachen-Dokuments (z.B. HTML) durch eine

Programmiersprache (z.B. JavaScript) zu beschreiben. Bei DOM handelt es sich um keine

Programmiersprache, sondern es wird dazu verwendet, um z.B. den Inhalt eines HTML-

Dokumentes als Baumstruktur darzustellen. Die in der Abbildung dargestellte Struktur hat den

Zweck, dass Programmiersprachen wie z.B. JavaScript, auf Elemente eines HTML-Dokuments

zugreifen, um diese nachtrglich dynamisch verndern zu knnen. Die Vernderungen knnen

dabei die Struktur und das Layout des Dokumentes betreffen.

Die wesentlichen Bestandteile dieser Baumstruktur stellen die Knoten dar. Es gibt dabei

unterschiedliche Knotentypen, wie Elementknoten, Attributsknoten und Textknoten. DOM stellt

dazu einige Eigenschaften und Methoden zur Verfgung, um schnell und einfach auf die

Attribute und Inhalte dieser Knoten zugreifen zu knnen[9].

Abbildung 11: Beispiel eines HTML Codes mit entsprechender DOM-Baumstruktur [10]


21/40

20

4.1.6. JQuery

JQuery ist eine von John Reisig entwickelte umfangreiche Klassenbibliothek, die einen

schnelleren und einfacheren Zugriff auf ein Document Object Model (DOM) ermglicht. Dieses

JavaScript-Framework ist plattformunabhngig und steht frei zur Verfgung. Um JQuery nutzen

zu knnen, muss es vorher noch mit Hilfe des Script-Tag in das HTML-Dokument eingebunden

werden.

Die wichtigsten Funktionen von JQuery sind folgende:

DOM Manipulation und Navigation

leichtere Elementselektion im DOM

einfache Behandlung von Events

mgliche Interaktion mit Ajax

erweiterbar durch freie Plug-ins wie z.B. JQuery UI

Die Elementselektion wird mit Hilfe von Selektoren durchgefhrt, auf die unmittelbar

entsprechenden Befehle angewandt werden knnen. Diese Selektoren werden dabei von einer

sogenannten Selektor API untersttzt. Die grundlegende Funktion von JQuery ist die Funktion

jQuery() oder anders geschrieben $(). Durch die Anwendung der $()-Funktion knnen ein oder

mehrere Knoten eines Document Object Model-Baumes zusammengefasst werden.

JQuery hat einige Vorteile fr die Entwicklung von JavaScript-Anwendungen gebracht. Der

Umfang von Code und Zeit wurde dadurch erheblich reduziert. Es ist relativ einfach zu lernen

und JavaScript wird somit um zahlreiche, einfach zu verwendende und brauchbare Funktionen

(each, merge, map) erweitert, wie in der Abbildung 12 ersichtlich[11].


22/40

21

Abbildung 12: Behandlung von click-events auf Button-Elemente mit jQuery

4.1.7. MVC

Die Abkrzung MVC steht frModel-View-Control und es ist ein bekanntes Entwurfsmuster in

der Softwareentwicklung. Verwendet ein Programm das MVC-Muster, so bedeutet es, dass

dieses Programm in drei unterschiedliche Bereiche aufgeteilt ist.

Diese Bereiche gliedern sich in(siehe auch Abbildung 13):

Model (Datenmodell)

View (Prsentation)

Controller (Steuerung)

Heutzutage wird dieses Muster meistens in abgewandelter Form verwendet. In manchen

Programmiersprachen bzw. Anwendungen ist es zum Beispiel notwendig, die View und den

Controller in einem Bereich unterzubringen. Die einzelnen Bereiche knnen unabhngig

voneinander implementiert werden, kommuniziert wird nur ber definierte Zugriffsmethoden. Es

ist also nicht mglich, direkt aus der View, Daten im Model zu beeinflussen. Dies hat den Vorteil,

dass einzelne Bereiche leicht ausgetauscht werden knnen, ohne das Andere umgeschrieben

werden mssen. Durch die Strukturierung des Codes kann dieser einfacher gehalten werden

und zustzlich steigert es auch noch die Erweiter- und Wartbarkeit[12].


23/40

22

Model

Das Model hat die Aufgabe der Datenverwaltung. Hierbei handelt es sich zum Beispiel um die

Verwaltung klassischer Objekte einer objektorientierten Programmiersprache oder um die

Regelung von Datenbankzugriffen.

View

Die View ist fr die Prsentation der Daten verantwortlich. Des Weiteren bildet sie dieOberflche fr die Interaktion mit Benutzern/innen. Bei nderungen der Daten im Model kann

sich unter Umstnden die Anzeige der View auch ndern.

Controller

Der Controller bildet die zentrale Einheit. Er hat alle Steuerungsaufgaben zu bewltigen. Je nach

Anwendung muss er Daten von der View bernehmen und weiterleiten oder eine Verbindung mit

dem Model fr diverse Datenabfragen oder Datenspeicherungen herstellen[12].

Abbildung 13: Eine allgemeine Darstellung des Model-View-Control Musters [12]


24/40

23

4.2. Erstentwurf

Zu Beginn erfolgte die Ausarbeitung des groben Funktionsumfangs inklusive einiger

Spezifikationen, die in weiterer Folge whrend der Entwicklung immer wieder leicht verfeinert

wurden. Das Ziel war es, sich vom groben Erstentwurf stufenweise an das gewnschte Ergebnis

heranzuarbeiten. Begonnen wurde dabei mit der Ausarbeitung der Benutzeroberflche. Die

Vorgabe dabei war es, die Informationen und Darstellung der einzelnen Algorithmen jeweils in

drei Bereiche einzuteilen. Ein groes Augenmerk war dabei die bersichtlichkeit und

Benutzerfreundlichkeit. Daraufhin wurden erste Entwrfe der Benutzeroberflche entwickelt.

Einer dieser ersten Entwrfe wird in Abbildung 14 gezeigt.

Abbildung 14: Erstentwurf der Benutzeroberflche

Whrend der weiteren Entwicklung wurden einige Teile wieder verworfen bzw. umgebaut. Die

endgltige Version der Benutzeroberflche wird im nchsten Abschnitt genauer beschrieben und

dargestellt.


25/40

24

Der wohl schwierigste Punkt bei dieser Umsetzung war die Darstellung der Animation eines

Algorithmus, da hier erst einmal die bentigten Elemente fr die Umsetzung gefunden werden

mussten. Nebenbei war zu berlegen, wie diese Animation die Lernttigkeit steigern sollte.

Weiters war darauf zu Achten, dass die Benutzbarkeit dieser Animation einfach und

selbsterklrend gehalten wird.

Ein weiterer Punkt, den es noch zu klren gab, war, welche Sprachen die Plattform (PLE)

anbietet und welche bei der Umsetzung der Widgets als vielversprechend erscheint.

4.3. Praktische Umsetzung

Dieser Abschnitt beschreibt die umgesetzte Benutzeroberflche, die allgemeine Ordnerstruktur

der Widgets sowie deren funktionale Umsetzung. Da die drei umgesetzten Widgets alle hnliche

Ordnerstrukturen, Benutzeroberflchen und sich in der funktionalen Umsetzung nur durch den

Algorithmus selbst unterscheiden, wird hier nur ein Widget dargestellt und beschrieben. Sollte es

zu Abweichungen kommen, werden diese separat als Bemerkung angefhrt.

4.3.1. Verwendete Ordnerstruktur

Im Zuge dieser Arbeit war es wichtig, eine bestimmte Ordnerstruktur einzuhalten. Diese

spezielle Ordnerstruktur wird in Abbildung 15 dargestellt.


26/40

25

Abbildung 15: Ordnerstruktur im Stammverzeichnis

css:

Im Ordner css werden alle fr das Design des Widgets notwendigen stylesheets abgelegt.

js:

Der Ordner js umfasst alle JavaScript Dateien, die vom Widget bentigt werden.

libs:

Im Ordner libs befinden sich noch weitere Bibliotheken, die fr einen erweiterten

Funktionsumfang sorgen, der fr die Umsetzung notwendig ist.

locale:

Im locale befinden sich alle fr die bersetzung in andere Sprachen notwendigen Dateien.

webService:

Der Ordner webService spielt bei der Umsetzung der Widgets keine Rolle und ist daher leer.

Index.html:

Die Datei index.html stellt den Startpunkt des Widgets dar, wo alle notwendigen Dateien

eingebunden sind.


27/40

26

config.xml:

In der Datei config.xml werden alle Einstellungen festgelegt, unter welchen das Widget spter

ausgefhrt wird. Hier kann zum Beispiel die Gre (width und height) des Widgets eingestellt

werden.

icon.png:

Das icon.png zeigt das kleine Bild links oben in der Ecke des Widgets an.

4.3.2. Benutzeroberflche

In Abbildung 16 wird die Benutzeroberflche des Widgets dargestellt. Die entsprechenden

Bereiche wurden in sogenannte Register unterteilt. Im Register Information wird eine kurze

Beschreibung des Algorithmus geboten. Zustzlich werden noch ein paar Links angefhrt, um

weitere Informationen ber den Algorithmus zu erhalten. Das Register Pseudo Code liefert

eine Darstellung des Algorithmus in Form von Text und Programmcode. Die grafische

Darstellung der Funktionsweise eines Algorithmus erfolgt im Register Animation. Bei denAlgorithmen (Graham-Scan, Plane-Sweep), die aus dem Bereich der Geometrie kommen, war

es notwendig, ein Canvas-Element zu verwenden, um ohne Probleme darauf zeichnen zu

knnen. In der Abbildung ist der Bereich dieses Elements blau hinterlegt.

Bemerkung: Fr die Animation des Algorithmus der lgT wurde kein Canvas-Element verwendet.

Um die Arbeitsweise des Algorithmus verstehen zu knnen, wurden Buttons zur Navigation

eingebunden. Der Button mit der Aufschrift Next ermglicht es, den nchsten Schritt des

Algorithmus auszufhren. Um zum letzten Schritt zurck zu kehren, gibt es den Button Prev.

Der Button Run fhrt den Algorithmus aus. Nachdem der Run Button gedrckt wurde,

verndert sich dieser zum Stop Button. Die Ausfhrung kann mit Hilfe dieses Buttons wieder

gestoppt werden. Wird der Stop Button nicht verwendet, luft die Ausfhrung bis der

Algorithmus fertig ist.


28/40

27

Der in der Abbildung leicht rot hinterlegte Bereich, ist ein Bereich, der nicht immer sichtbar ist. Er

wird dafr verwendet, um Fehlermeldungen bzw. Informationen anzuzeigen, die an den/die

Benutzer/in gerichtet sind.

Abbildung 16: Benutzeroberflche des Widgets

4.3.3. Umsetzung der Funktionalitt

Wie schon im Abschnitt 4.3.1. erklrt, wurde der JavaScript Programmcode nach dem

bekannten MVC Muster aufgeteilt. Jeder dieser drei Bereiche (Model, View, Controller)

bernimmt eine fr die Applikation notwendige Funktion.

Wenn das Widget gestartet wird, werden zunchst der Controller, View und Model initialisiert.

Als nchsten Schritt gibt der Controller der View die Aufgabe, die Startansicht fr den/die

Benutzer/in darzustellen. Anschlieend wird das Model aufgefordert, die fr die Animation des

Algorithmus notwendigen Variablen und Ablufe zu initialisieren.


29/40

28

View: (Prsentation)

Die View (siehe auch Abbildung 17 und 18) hat die Funktion, die Benutzeroberflche richtig

darzustellen und den Buttons im Animationsbereich die richtige Funktionalitt zu geben. Sie hat

auch die Aufgabe, sofern es die Ausfhrung des Algorithmus erfordert, bestimmte grafische

Elemente zu zeichnen. Weiters ist sie auch fr die richtige Anzeige von Fehler bzw.

Informationsmeldungen verantwortlich.

Abbildung 17: Funktionen der Buttons und des Canvas-Elements im Animationsbereich

Abbildung 18: Funktion um einen Punkt im Canvas-Element zu zeichnen

Controller: (Programmsteuerung)

Der Controller hat die Aufgabe, auf Benutzer/innen-Aktionen zu reagieren und die

entsprechenden Funktionen im Model und View aufzurufen. Sollte der/die Benutzer/in einen der

Buttons im Animationsbereich verwenden, so wird das Event abgefangen und die

entsprechende Funktion im Controller aufgerufen. Die erste Zeile in Abbildung 19 beschreibt


30/40

29

zum Beispiel, dass bei einem Mausklick auf den Reset Button die Funktion reset_onclick im

Controller aufgerufen wird. Diese Funktion sagt dem Model, es soll den Algorithmus in den

Anfangszustand zurcksetzen. Anschlieend wird die View aufgefordert, diesen Schritt grafisch

darzustellen.

Abbildung 19: Funktion fr Mausklick auf Reset Button

Model: (Datenmodell)

Das Model ist fr die Ausfhrung des Algorithmus verantwortlich. Zustzlich ist es notwendig, in

jedem Schritt der Ausfhrung die entsprechenden Werte des Algorithmus zu speichern, um

wenn es notwendig (Prev Button) ist, in den vorhergehenden Zustand zurckkehren zu

knnen. Des Weiteren werden hier alle fr den Algorithmus notwendigen Vorbereitungen

getroffen (siehe Abbildung 20).


31/40

30

Abbildung 20: Funktion: Vorbereitung fr Graham-Scan Algorithmus

(findet Punkt mit kleinstem y-Wert im Array)


32/40

31

5. Anwendungsbeispiel

In diesem Abschnitt wird anhand eines kurzen Anwendungsbeispiels gezeigt, wie die Widgets

verwendet werden. Die Demonstration wird anhand des Graham-Scan Widgets durchgefhrt.

5.1. Information

In diesem Bereich wird eine kurze Beschreibung des Algorithmus und weiterfhrende Links

angeboten.

Abbildung 21: Darstellung des Informationsbereichs

5.2. Pseudo Code

Dieser Bereich liefert eine Darstellung des Algorithmus in Form von Text und Programmcode.


33/40

32

Abbildung 22: Darstellung des Pseudo-Code Bereichs

5.3. Animation

Die grafische Darstellung der Funktionsweise eines Algorithmus erfolgt in diesem Bereich. Zu

Beginn wird der/die Benutzer/in darauf hingewiesen, wie die fr den Algorithmus notwendigen

Punkte gezeichnet werden.


34/40

33

Abbildung 23: Darstellung des Animationsbereichs

Nachdem einige Punkte gezeichnet wurden, hat man die Mglichkeit, mit dem Next und Prev

Button schrittweise die Funktionsweise des Algorithmus nachzuvollziehen. Wem diese

Mglichkeit aber zu langsam erscheint, kann mit Hilfe des Run Buttons gleich mehrere Schrittehintereinander ausfhren lassen bzw. den Algorithmus bis dieser fertig ist, durchlaufen lassen.

Mit dem Reset Button besteht die Mglichkeit, alles wieder rckgngig zu machen.


35/40

34

Abbildung 24: Animation des Graham-Scan Algorithmus


36/40

35

6. Zusammenfassung und Ausblick

Diese Arbeit erweitert die Auswahl an Lernwidgets der PLE. Diese Widgets sollen zum besseren

Verstndnis von drei ausgewhlten Algorithmen (Graham-Scan, Plane-Sweep, lngste

gemeinsame Teilfolge) dienen. Die Reihenfolge der einzelnen Bereiche wurde deshalb so

gewhlt, damit der/die Benutzer/in sich zuerst mit den allgemeinen Informationen beschftigt,

um ein gewisses Grundverstndnis aufbauen zu knnen. In weiterer Folge wird der/dieBenutzer/in mit der groben technischen Umsetzung des Algorithmus konfrontiert, um

anschlieend mit Hilfe der grafischen Animation ein besseres Verstndnis zu entwickeln. Durch

das Navigationsmen (vier Buttons) ist die Mglichkeit gegeben, sich schrittweise Wissen

anzueignen.

Fr die Strukturierung des Programmcodes der Widgets wurde das MVC Entwurfsmuster

verwendet. Damit ist eine einfachere Erweiterbarkeit und Wartbarkeit des Programmcodes

mglich. Weitgehend wurde die Funktionalitt des Widgets mittels JavaScript umgesetzt. Fr die

grafische Animation wurde zu einem groen Teil das durch HTML5 zur Verfgung gestellteCanvas-Element verwendet.

Lernwidgets spielen in sogenannten Lernumgebungen eine wichtige Rolle. Diese Widgets bilden

eine Mglichkeit, Lerninhalte grafisch ansprechend darzustellen und zu erlernen. Da die

Mglichkeit der besseren Darstellung, mehr Motivation zum Lernen hervorruft, sollte in Zukunft

noch enger ihm Rahmen von Lehrveranstaltungen zusammengearbeitet werden, um weitere

Lernwidgets fr die PLE zur Verfgung zu stellen. Mit dem heutigen Stand der Technik ist

einiges mglich, um Lerninhalte einfacher und lerneffizienter darzustellen und anzubieten.


37/40

36

7. Verzeichnis

LITERATURVERZEICHNIS

[13] Aichholzer, O.(2008): Entwurf und Analyse von Algorithmen. Graz

LINKLISTE

[1] Wikipedia: Widget. http://de.wikipedia.org/wiki/Widget#Widget-Engines , [Online, Stand 20.

Februar 2012].

[2] Idea-lounge: Widgets. http://www.idea-lounge.net/text/bcno1-auszug.pdf, [Online, Stand 20.

Februar 2012].

[3] Wikipedia: W3C. http://de.wikipedia.org/wiki/World_Wide_Web_Consortium , [Online, Stand

20. Februar 2012].

[4] W3C: Widget-Standards. http://www.w3.org/TR/widgets/ , [Online, Stand 20. Februar 2012].

[5] Selfhtml: HTML. http://de.selfhtml.org/intro/technologien/html.htm , [Online, Stand 22.

Februar 2012].

[6] Oreillyblog: HTML5. http://community.oreilly.de/blog/2011/01/28/was-ist-html5/ , [Online,

Stand 22. Februar 2012].

[7] Selfhtml: CSS. http://de.selfhtml.org/intro/technologien/css.htm#versionen , [Online, Stand

Februar 2012].

[8] Selfhtml: JavaScript. http://de.selfhtml.org/javascript/intro.htm, [Online, Stand 23. Februar

2012].

[9] Selfhtml: DOM. http://de.selfhtml.org/dhtml/modelle/dom.htm , [Online, Stand 23. Februar

2012].


38/40

37

[10] LearnjQuery: HTML-DOM Example. http://www.learnjquery.org/newsletter/Tutorial-2-

jquery-css-selectors-walkthrough.html, [Online, Stand 23. Februar 2012].

[11] ITWissen: JQuery. http://www.itwissen.info/definition/lexikon/jQuery.html, [Online, Stand 23.

Februar 2012].

[12] FH-Trier: MVC. http://www0.fh-trier.de/~rudolph/gdv/cg/node46.html , [Online, Stand 23.

Februar 2012].

[14] Yahoo: Weather Widget. http://widgets.yahoo.com/widgets/yahoo-weather, [Online, Stand

25. Februar 2012].

[15] Maceinsteiger: Dashboard. http://www.maceinsteiger.de/was-ist/mac-dashboard-widgets/ ,

[Online, Stand 25. Februar 2012].

[16] Selfhtml: HTML-Grundgerst. http://de.selfhtml.org/html/allgemein/grundgeruest.htm ,

[Online, Stand 25. Februar 2012].


39/40

38

ABBILDUNGSVERZEICHNIS

Abbildung 1: Beispiel fr einen Desktop der PLE ......................................................................... 5

Abbildung 2: Darstellung des Widget-Stores ............................................................................... 6

Abbildung 3: Ein Yahoo-Widget fr Windows] ............................................................................. 9

Abbildung 4: Dashboard im Mac Betriebssystem ....................................................................... 10

Abbildung 5: die drei Flle ......................................................................................................... 12

Abbildung 6: Darstellung des Plane-Sweep Algorithmus ........................................................... 14

Abbildung 7: Grundgerst eines HTML-Dokuments ................................................................... 16

Abbildung 8: Fr die Animation der geometrischen Algorithmen wurde ein Canvas-Element

verwendet .................................................................................................................................. 17

Abbildung 9: CSS-Code fr das in Abbildung 8 erstellte Canvas-Element ................................. 17

Abbildung 10: fr ein Widget bentigtes Point-Object in JavaScript ........................................... 18

Abbildung 11: Beispiel eines HTML Codes mit entsprechender DOM-Baumstruktur ................. 19

Abbildung 12: Behandlung von click-events auf Button-Elemente mit jQuery .......................... 21

Abbildung 13: Eine allgemeine Darstellung des Model-View-Control Musters] .......................... 22

Abbildung 14: Erstentwurf der Benutzeroberflche .................................................................... 23

Abbildung 15: Ordnerstruktur im Stammverzeichnis .................................................................. 25

Abbildung 16: Benutzeroberflche des Widgets ........................................................................ 27

Abbildung 17: Funktionen der Buttons und des Canvas-Elements im Animationsbereich .......... 28

Abbildung 18: Funktion um einen Punkt im Canvas-Element zu zeichnen ................................. 28

Abbildung 19: Funktion fr Mausklick auf Reset Button ........................................................... 29

Abbildung 20: Funktion: Vorbereitung fr Graham-Scan Algorithmus (findet Punkt mit kleinstem

y-Wert im Array) ........................................................................................................................ 30

Abbildung 21: Darstellung des Informationsbereichs ................................................................. 31

Abbildung 22: Darstellung des Pseudo-Code Bereichs .............................................................. 32


40/40

39

Abbildung 23: Darstellung des Animationsbereichs ................................................................... 33

Abbildung 24: Animation des Graham-Scan Algorithmus .......................................................... 34

Documents

Lernwidgets für die Personal Learning Environment der TU Graz