lernwidgets für die personal learning environment der tu graz
TRANSCRIPT
-
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
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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.
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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.
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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]
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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]
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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.
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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]
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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].
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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]
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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.
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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.
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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-
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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].
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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].
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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.
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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]
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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].
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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].
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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]
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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.
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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.
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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.
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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.
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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.
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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).
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
31/40
30
Abbildung 20: Funktion: Vorbereitung fr Graham-Scan Algorithmus
(findet Punkt mit kleinstem y-Wert im Array)
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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.
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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.
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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.
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
35/40
34
Abbildung 24: Animation des Graham-Scan Algorithmus
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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.
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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].
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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].
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
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
-
7/31/2019 Lernwidgets fr die Personal Learning Environment der TU Graz
40/40
39
Abbildung 23: Darstellung des Animationsbereichs ................................................................... 33
Abbildung 24: Animation des Graham-Scan Algorithmus .......................................................... 34