Sie sind auf Seite 1von 40

Bachelorarbeit

Lernwidgets fu r die Personal


Learning Environment der TU-Graz
Autor: Thomas Laubreiter

Februar 2012

Betreuer: Dipl.-Ing. Dr. Martin Ebner

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 und basiert 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.

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 are offered, 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 planesweep algorithm. Using the widgets should be easy, user-friendly and good animated.

INHALTSVERZEICHNIS
1. 1.1. 1.2. 1.3. 2. 2.1. 3. 3.1. 3.2. 3.3. 4. 4.1. 4.1.1. 4.1.2. 4.1.3. 4.1.4. 4.1.5. 4.1.6. 4.1.7. 4.2. 4.3. 4.3.1. 4.3.2. 4.3.3. 5. 5.1. 5.2. 5.3. 6. 7. Einleitung .......................................................................................... 4 PLE ........................................................................................................................ 4 Ausgangssituation .................................................................................................. 6 Aufgabenstellung ................................................................................................... 6 Stand der Technik .............................................................................. 8 Widget .................................................................................................................... 8 Umzusetzende Algorithmen .............................................................. 11 Algorithmus der lngsten gemeinsamen Teilfolge(lgT) ......................................... 11 Graham-Scan Algorithmus ................................................................................... 12 Plane-Sweep Algorithmus .................................................................................... 13 Umsetzung ....................................................................................... 15 Verwendete Techniken......................................................................................... 15 HTML ................................................................................................................................ 15 HTML5 .............................................................................................................................. 16 CSS.................................................................................................................................... 17 JavaScript.......................................................................................................................... 18 DOM ................................................................................................................................. 19 JQuery .............................................................................................................................. 20 MVC.................................................................................................................................. 21 Erstentwurf ........................................................................................................... 23 Praktische Umsetzung ......................................................................................... 24 Verwendete Ordnerstruktur.............................................................................................. 24 Benutzeroberflche .......................................................................................................... 26 Umsetzung der Funktionalitt ........................................................................................... 27 Anwendungsbeispiel ......................................................................... 31 Information ........................................................................................................... 31 Pseudo Code ....................................................................................................... 31 Animation ............................................................................................................. 32 Zusammenfassung und Ausblick ....................................................... 35 Verzeichnis.......................................................................................36

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 vorgegebene Situation 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.

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

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.

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

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

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

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.

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

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

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].

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 SoftwareEntwicklern/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]

5 6

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

10

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.

11

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.

12

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 Scanlinie erreicht 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-

13

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].

14

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: <h1> Text </h1>) beschrieben. Diese Tag-Paare bestehen aus einem Anfangsund 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].

15

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 mobilen Gert darauf zugreifen. HTML5 Storage: Bietet einer Website die Mglichkeit, Daten auf dem Rechner eines/r Besuchers/in zu speichern und spter wieder abzurufen.

16

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 HTMLElemente 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

17

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. den Code 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

18

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 HTMLDokumentes 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]

19

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].

20

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

4.1.7. MVC
Die Abkrzung MVC steht fr Model-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].

21

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 die Oberflche 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]

22

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.

23

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.

24

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.

25

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 den Algorithmen (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.

26

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.

27

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

28

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).

29

Abbildung 20: Funktion: Vorbereitung fr Graham-Scan Algorithmus (findet Punkt mit kleinstem y-Wert im Array)

30

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.
angeboten.

Information

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

Abbildung 21: Darstellung des Informationsbereichs

5.2.

Pseudo Code

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

31

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.

32

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 Schritte hintereinander ausfhren lassen bzw. den Algorithmus bis dieser fertig ist, durchlaufen lassen. Mit dem Reset Button besteht die Mglichkeit, alles wieder rckgngig zu machen.

33

Abbildung 24: Animation des Graham-Scan Algorithmus

34

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/die Benutzer/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 gestellte Canvas-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.

35

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. 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]. http://community.oreilly.de/blog/2011/01/28/was-ist-html5/, [Online,

36

[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].

37

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

38

Abbildung 23: Darstellung des Animationsbereichs ................................................................... 33 Abbildung 24: Animation des Graham-Scan Algorithmus .......................................................... 34

39