Konzeption und Umsetzung von webbasierten Bildannotationen

Größe: px
Ab Seite anzeigen:

Download "Konzeption und Umsetzung von webbasierten Bildannotationen"

Transkript

1 Konzeption und Umsetzung von webbasierten Bildannotationen Studienarbeit Simon Griwatz Dezember 2007 vorgelegt bei: Prof. Dr.-Ing. Reinhard Keil

2 Ehrenwörtliche Erklärung Ich versichere, dass ich diese Arbeit selbstständig angefertigt und keine anderen als die angegebenen und bei Zitaten kenntlich gemachten Quellen und Hilfsmittel benutzt habe. Paderborn, den 11. Dezember 2007 (Simon Griwatz) 2

3 Inhaltsverzeichnis 1. Einleitung Grundlagen steam bid-owl Rich Internet Application (RIA) AJAX Java Flash XML PHP PHPsTeam Adobe Flex Anforderungen Umsetzung steamconnect.php IAnnotations.mxml GUI.mxml UIAnnotation.as IconManager.as AnnotationenManager.as UserManager.as Installation und Systemvoraussetzungen Auf Seiten des Benutzers Auf Seiten des Anbieters Benutzung Ausblick Abbildungsverzeichnis Literaturverzeichnis... 47

4

5 1. Einleitung In dieser Studienarbeit beschäftige ich mich mit der Konzeption und Umsetzung einer webbasierten Anwendung, die es ermöglicht, Annotationen an Bilddateien anzuhängen und sie visuell an eine bestimmte Stelle des Bildes zu binden. Die Grundlage bilden die Bearbeitungsmöglichkeiten, die auf gedruckte Daten, seien es Bilder oder Texte, angewandt werden können. So ist es möglich, bestimmte Textpassagen mit einem Textmarker zu kennzeichnen oder textuelle Anmerkungen an bestimmte Stellen direkt in das Bild oder den Text einzufügen. Idee ist es, diese Bearbeitungsmöglichkeiten auf digitale Daten zu übertragen und darüber hinaus mit den Möglichkeiten des kooperativen Arbeitens zu verbinden. Die erstellte Anwendung wird in dieser Arbeit IAnnotations genannt. Dieser Arbeitstitel steht für Internet- sowie ImageAnnotations. Zu Beginn dieser Arbeit befasse ich mich mit den Grundlagen, auf die sich meine Arbeit stützt. Es werden Begriffe erklärt, benutzte Werkzeuge vorgestellt und alternative Möglichkeiten zur Erstellung einer Rich Internet Application gezeigt. In Kapitel 3 definiere ich die Anforderungen an die Anwendung. Dazu beschreibe ich drei Benutzungsszenarien, aus denen sich viele Anforderungen ableiten. Im vierten Kapitel befasse ich mich mit der Umsetzung und gehe auf die Implementierung der einzelnen Programmteile ein. Die Benutzung der Anwendung erkläre ich in Kapitel 5. Dies umfasst auch den Umgang mit Benutzungsrechten, die nicht durch die Anwendung verwaltet werden. Abschließend fasse ich die Möglichkeiten der Anwendung zusammen und stelle in einem Ausblick dar, welche möglichen Erweiterungen und Veränderungen sinnvoll wären. 1

6 2. Grundlagen 2.1. steam Dieses Kapitel stützt sich auf die Quelle [Keil], soweit nicht anders kenntlich gemacht. Das System steam wurde mit Unterstützung des Deutschen Forschungsnetzes (DFN) unter Leitung von Prof. Dr. Keil am Heinz Nixdorf Institut entwickelt und 2001 auf der Cebit erstmals der Öffentlichkeit präsentiert. steam steht für Strukturieren von Informationen im Team [steam] und beschreibt damit gleichzeitig das Ziel der Entwicklung dieses Systems. Es soll kommunikatives und kooperatives Lernen und Arbeiten ermöglichen. An die Stelle des Betrachtens von Inhalten, wie es im eher autorenzentrierten WWW bisher war, tritt das aktive Arbeiten mit den Inhalten, was zu einer stärkeren Benutzerzentrierung führt. Gemeinsam verwaltete Datenbestände sollen zusammen bearbeitet, diskutiert und kommentiert werden. Grundlegende Schlagworte sind in diesem Zusammenhang Content Management Systeme (CMS) und Computer Supported Cooperativ Work (CSCW). Das zentrale Konzept zur Umsetzung dieser Ziele sind virtuelle Wissensräume. Inspiriert wurde dieses Konzept durch Multi User Dungeons (MUDs), virtuelle Gemeinschaften, die bereits in den 80ern, und damit lange vor der Verbreitung des WWW, speziell im Bereich der Abenteuer- Phantasie- und Erlebnisspiele entstanden sind. [Keil] Die Spieler dieser Rollenspiele sollen die ihnen gestellten Aufgaben nicht alleine erfüllen, sondern durch Kooperation mit anderen Spielern. Dabei ist es ihnen möglich, sowohl miteinander zu kommunizieren, als auch Objekte und damit auch die Umgebung dauerhaft zu verändern. Gemeinsam ist allen MUDs, dass die Umgebung in Form einer Ansammlung von virtuellen Räumen vorliegt. Diese Eigenschaften bieten einen idealen Ausgangspunkt für die Umsetzung einer kommunikativen und kooperativen Lern- und Arbeitsumgebung. Durch steam werden in virtuellen Wissensräumen synchrone und asynchrone Kommunikationsmittel mit der Verwaltung hypermedialer Dokumente verbunden und somit eine Integration, sowohl der zeitlichen, als auch der räumlichen Dimension des Lernens ermöglicht. Dabei können virtuelle Wissensräume, zum einen einfache Objekte, wie zum Beispiel Texte, Bilder oder Multimediadateien, zum anderen aber auch komplexere Objekte, wie Foren, Chat und unterschiedliche Benutzer, aufnehmen. Benutzer können sich in diesen Räumen treffen und unterhalten, Dokumente ablegen, 2

7 aktiv bearbeiten, austauschen, gegenseitig kommentieren und durch Verweise verknüpfen. Außerdem besteht die Möglichkeit Container anzulegen, welche wiederum unterschiedliche Dokumente enthalten können. Durch ein integriertes Verfahren der Berechtigungen können Nutzergruppen angelegt und Zugriffsrechte gesteuert werden. Auf diese Weise werden Wissensräume für unterschiedlichste Aufgaben genutzt. Einfache Präsentationen verschiedener Daten bis hin zu komplexen gemeinschaftlichen Arbeiten sind möglich. Dabei ist steam keine einzelne Plattform, sondern ein erweiterbares Ensemble von Funktionen und Raumkonfigurationen. [steam] Die dahinter liegende Technik ist ein objektorientierter Server, der mit der Datenbank, dem Webserver und flexibel nutzbaren und ohne großen Aufwand anpassbaren Java-Clients verbunden ist. Der Server verwaltet sämtliche Benutzerobjekte sowie die Kommunikation zwischen den angeschlossenen Clients. Die Datenbank sorgt für eine persistente Datenspeicherung. Der Webserver ermöglicht einen plattformunabhängigen Zugriff mittels eines Browsers. Darüber hinaus bietet eine PHP-Schnittstelle alle nötigen Funktionen, um auf diese Weise auf den steam-server zuzugreifen und weitere Anwendungen einzubinden. [PHPsTeam] 2.2. bid-owl Dieses Kapitel stützt sich auf die Quelle [Selke], soweit nicht anders kenntlich gemacht. BidOWL ist ein unter Beteiligung der Anwender und mit Hilfe unabhängiger Evaluation entwickeltes System, das im schulischen Einsatz die Vorbereitung, Durchführung und Nachbereitung des Unterrichts unterstützen soll. Ziel ist es, ein System zu erhalten, das sowohl die benötigten Funktionen beinhaltet, als auch breite Akzeptanz in den Benutzerkreisen von Lehrern und Schülern ermöglicht. Die Grundlage bildeten zu Beginn die Erfahrungen, die Lehrer im Rahmen der Initiative Bildungswege in der InformationsGesellschaft (BIG) mit Hyperwave gemacht haben. Hyperwave ist ein auf verschiedenen Ebenen anpassbares Content-Management- System, das in Folge von kontinuierlichen Erweiterungen über einen großen Funktionsumfang verfügt. Der Grund für den Einsatz eines CMS war, dass die Lehrer nicht nur Dokumente abrufen sollten, sondern ein aktives Arbeiten mit den Materialien erwünscht war. Es sollten Materialien beliebig zusammengestellt, ergänzt und an eigene Bedürfnisse angepasst werden. Darüber hinaus war eine Rechtevergabe notwendig, die 3

8 eine gezielte Freigabe von Dokumenten erlaubt. Es stellte sich heraus, dass die benötigten Funktionen oft schwierig zu erlernen waren und das System über zahlreiche Funktionen verfügte, die nicht benötigt wurden. Diese Fülle an Möglichkeiten wurde als Hindernis für den Einstieg in die Nutzung eines solchen Systems gesehen. Aus diesem Grund wurde für das vorhandene System Hyperwave ein neues Web- Interface entwickelt, welches speziell an die realen schulischen Bedürfnisse angepasst ist und über eine stark reduzierte Funktionalität verfügt. In einem Prozess, bestehend aus Befragungen der Nutzer, Rückmeldungen im Rahmen von Schulungen und einem unabhängigen Evaluationsprojekt, wurden die Anforderungen der Nutzer in Erfahrung gebracht. Ziel war dabei keineswegs, alle gewünschten Funktionen in das System zu integrieren, sondern eine möglichst breite Akzeptanz zu erreichen. Hierzu wurde mit einer Minimallösung begonnen, welche die folgenden Grundfunktionen beinhaltete: Erstellung von Ordnern, Bereitstellung von Dokumenten beliebigen Datentyps, sowie deren Löschung, Verschiebung und Kopierung, Erstellung von einfachen Texten, Ablage von Web-Adressen, Vergabe von Zugriffsrechten und Suche im Volltext. Die Einführung und Nutzung wurde weiterhin von Nutzer-Befragungen und der Auswertung von Rückmeldungen begleitet. So wurden weitere Wünsche der User erfasst. Eine Kalenderfunktion für die Einzel- und Gruppennutzung wurde als erstes hinzugefügt. Dem folgte die Möglichkeit zur einfachen Präsentation von Arbeitsergebnissen, die ohne HTML-Kenntnisse zu erstellen, sowie kooperativ und arbeitsteilig zu pflegen ist. Umgesetzt wurde dies durch die Einbindung von Portalen, über die der Benutzer mit Hilfe eines WYSIWYG-Editors HTML-Seiten erstellen kann. Allerdings führte die Erweiterung des Funktionsangebots zu dem Problem, bei steigender Anzahl von Nutzungsmöglichkeiten eine hohe Akzeptanz beizubehalten. Gelöst wurde dieses Problem dadurch, dass die zusätzlichen Funktionen gekapselt und erst nutzbar werden, wenn der Nutzer dies wünscht. Anfänger erhalten so nur Grundfunktionen, die einen einfachen Einstieg ermöglichen, wohingegen fortgeschrittenen Nutzern in einem einfachen Dialog ermöglicht wird, zusätzliche Module zu aktivieren. In der aktuellen Version basiert bid-owl nicht mehr auf Hyperwave, sondern auf steam. Darüber hinaus wurden weitere Funktionen hinzugefügt. Foren, interaktive Fragebögen mit Exportfunktion und Wikis wurden integriert. Durch eine Erweiterung der Portale ist es nun auch möglich, Blogs zu erstellen. Außerdem wurden zusätzliche Kommunikationsmöglichkeiten hinzugefügt, die teilweise in das System integriert werden oder über die Nutzung von externen Anwendungen vorliegen. Es ist also ein System gewachsen, das durch seinen modularen Aufbau sowohl Einsteigern, als auch 4

9 Fortgeschrittenen die gewünschten Funktionen bietet und dies auch bei weiterem Wachstum beibehalten kann Rich Internet Application (RIA) Der Begriff Rich Internet Application wurde 2002 durch Macromedia eingeführt.[ria] Er beschreibt Internet-Anwendungen, die Vorteile traditioneller Web-Anwendungen mit den Vorteilen von Desktop-Anwendungen verbinden, um die Nachteile dieser beiden Ansätze zu minimieren. [Knieps] Aus dem Bereich der Web-Anwendungen wird die Möglichkeit zu jeder Zeit und von jedem Computer, an dem eine Internetanbindung besteht, auf die Anwendung zugreifen zu können, übernommen, wodurch die Kosten für die Softwareverteilung sinken und lästige Updates vermieden werden können. Allerdings haben traditionelle Web- Anwendungen einige Nachteile. Zum einen muss der Server den Großteil der Rechenlast übernehmen, was hohe Kosten beim Anbieter verursacht. Zum anderen stellen traditionelle Web-Anwendungen nur eine Momentaufnahme dar. Dies führt dazu, dass der Benutzerkomfort leidet. Auf Benutzereingaben kann nicht sofort reagiert werden, da erst die Anfrage an den Server gestellt und die Antwort abgewartet werden muss. Darüber hinaus wird die komplette Seite neu geladen, auch wenn nur wenige Daten ausgetauscht werden müssten. Insbesondere bei schlechteren Internetanbindungen kann dies zu langen Wartezeiten und Frustration bei den Benutzern führen. Außerdem kann die von Windows vielen Nutzern bekannte Event-Orientierung, die unter anderem Drag-and-Drop-Interaktion ermöglicht, nur mäßig umgesetzt werden. [Knieps] Eine Rich-Internet-Application gleicht diese Nachteile aus, indem große Teile der Applikationslogik auf den Client-Rechner verlagert werden und auf dem Server nur noch die Programmteile liegen, die aus Gründen der Aktualität zentral gehalten und gepflegt werden müssen, also hauptsächlich Datenbanken und die nötige Zugriffssteuerung. Dadurch wird es möglich, die Vorteile einer Desktop-Anwendung zu nutzen. Besonders im Bereich der Benutzerfreundlichkeit und Darstellung ist dies spürbar. Eine genauere Präsentation und direkte Reaktionen auf Benutzereingaben sind genauso möglich, wie Drag-and-Drop-Fähigkeiten. Darüber hinaus sinkt die Netzlast, da nur noch Daten nachgeladen werden müssen, die gebraucht werden und im aktuellen Zustand der Anwendung fehlen. Handelt es sich um Daten, die nicht ständig aktualisiert 5

10 werden, können diese über den aktuellen Zustand hinaus gespeichert werden und müssen bei ähnlichen Anfragen nicht nachgeladen werden. [Eytorff] Außerdem steigt die Verfügbarkeit und Stabilität der Anwendung, da große Teile der Applikationslogik auch offline zur Verfügung stehen. Ein Fortsetzen der Arbeit ist also auch bei unterbrochener Internetverbindung je nach Anwendung zu einem gewissen Grad möglich. Auch Transfer- und Serverfehler werden dadurch minimiert. [Knieps] Die drei am weitesten verbreiteten Möglichkeiten, eine RIA zu erstellen, sind Ajax, Java und Flash. Auch Microsoft bietet mit Avalon mittlerweile eine eigene Technologie zur Erstellung von RIAs an. Allerdings ist die Verbreitung noch nicht sehr hoch, so dass hier auf die Vorstellung verzichtet werden kann. In der Zukunft könnte sich dies ändern und damit eine vierte Technologie etablieren.[noda] AJAX AJAX steht für Asynchronous JavaScript and XML. Es ist keine einzelne Technologie, sondern eine Kombination aus teilweise schon sehr lange benutzten Technologien, wie JavaScript, XML, XSLT und DOM. Der Begriff asynchron steht für die Kommunikation zwischen Client und Server, ohne dass eine neue Seite geladen werden muss. [Noda] Im Vergleich zu den anderen Möglichkeiten RIAs zu erstellen, zeichnet sich AJAX dadurch aus, dass keine speziellen Tools benötigt werden, um die Anwendung anzuzeigen oder zu erstellen. Zur Darstellung reicht ein Browser, der JavaScript unterstützt. Zum Erstellen ist kein Kompilieren notwendig, da die Interpretation des Quellcodes erst auf dem Client-Rechner, beziehungsweise auf dem Server stattfindet, insofern es sich um Scripte handelt. Allerdings führt dies auch zum größten Nachteil von AJAX. Die Darstellung einer AJAX-Anwendung ist, wie bei jeder HTML-Seite, abhängig vom Browser. Dies führt sowohl zu einer, je nach Browser sehr unterschiedlichen Darstellung, als auch zu einem wesentlich höheren Programmieraufwand, besonders, wenn eine möglichst einheitliche Darstellung gewünscht wird. Dadurch kann die Anwendung komplex und die Programmierung schwierig werden. [Domenig] Da es sich bei AJAX nur um Skriptsprachen handelt, die keinen Compiler benötigen, braucht man zum Erstellen einer AJAX-Anwendung nur einen Texteditor. Es gibt aber auch Entwicklungsumgebungen, wie zum Beispiel ThinkCAP. 6

11 2.3.2.Java Sun Microsystems begann 1991 unter der Leitung von James Gosling mit der Entwicklung von Java. Ziel war es, eine objektorientierte, geräteunabhängige Programmiersprache zu entwickeln, die in digital gesteuerten Kundengeräten und Computern eingesetzt werden konnte. Die erste Anwendung war ein Steuerungsgerät für das digitale Kabelfernsehen. Die erste öffentliche Einführung von Java fand im Jahr 1995 statt. Zur gleichen Zeit wurde Java in den Internetbrowser Netscape Navigator integriert. [Java] Java-Anwendungen werden zu Java-Bytecode kompiliert und auf dem ausführenden Rechner von der Java Virtual Machine (JVM), die kostenlos erhältlich ist, interpretiert und ausgeführt. Dabei reichen die Anwendungsmöglichkeiten von normalen PCs über Mobiltelefone und Spielekonsolen bis hin zu Smart Cards. Es steht eine umfangreiche Klassenbibliothek zur Verfügung, die mit JavaSwing auch Elemente für graphische Benutzeroberflächen umfasst. [Ullenboom] Aufgrund ihrer Plattformunabhängigkeit eignet sich Java auch besonders für den Einsatz im Internet. Java-Programme, die dafür konzipiert sind, werden Java-Applets genannt. Sie können in eine HTML-Seite eingebunden werden, so dass die Anwendung in einem geeigneten Bereich innerhalb der Webseite angezeigt wird. Diese Applets sind die Grundlage für RIAs auf Javabasis. Ihr Vorteil liegt in einer recht guten Performance und einer stabile Ausführung der Anwendung. Für graphisch aufwendige Anwendungen ist Java allerdings weniger geeignet. [Ullenboom] Außerdem ist die JVM, da sie nicht explizit für den Einsatz im Internet geschrieben wurde, relativ groß 1. Um Java-Anwendungen zu erstellen, benötigt man nur einen Texteditor und das Java Development Kit (JDK). Darüber hinaus gibt es viele Entwicklungsumgebungen für Java, wie zum Beispiel Eclipse Flash Ursprünglich entwickelt wurde Flash 1995 unter dem Namen Smart Sketch von der Firma Future Wave als einfaches vektororientiertes Illustrationsprogramm. Zusätzlich 1) Der Download von Java-Version 6 Update 3 umfasst für einen Windows-Rechner zwischen 7,1 MB und 13,92 MB. [Java-Download] 7

12 bot die Firma ein PlugIn an, welches die Darstellung im Browser ermöglichte. Nach dem Kauf durch Macromedia wurde es in Flash umbenannt und weiterentwickelt. In den ersten Versionen war es nur möglich Animationen über die Zeitleiste zu steuern, so dass dieses Steuerelement als grundlegend für die Entwicklung von Flash-Animationen galt. Mit ihm kann man angeben, wo sich welches Objekt zu welchem Zeitpunkt befindet. Realisiert wird dies durch eine Aneinanderreihung von Bildern, die in der fertigen Animation mit einer bestimmten Geschwindigkeit abgespielt werden. In Schlüsselbildern wird dabei die Veränderung der Objekte definiert, die dazwischen liegenden Bilder werden von Flash selbst erzeugt. Durch die Entwicklung und Einbindung von Actionscript ab Flash 4 im Jahr 1999 wurden die Anwendungsmöglichkeiten, insbesondere die Interaktionsmöglichkeiten, erweitert. Außerdem begann ein Prozess, in dem die Zeitleiste als wichtigstes Mittel zur Erstellung von Animationen durch die Möglichkeiten der Actionscriptprogrammierung langsam abgelöst wurde. Dadurch entwickelte sich Flash von einer Technologie zur Darstellung von Animationen immer mehr zu einem wichtigem Standard für Multimedia-Applikationen im Internet. [Ringmayr] Mit Adobe Flex verschwand die Zeitleiste und damit auch die Ausrichtung auf Animationen komplett. Statt Flash-Animationen werden nun immer häufiger vollwertige Flash-RIAs erstellt. Flash liegt mittlerweile in Version 9 vor. Die Vorteile von Flash sind neben seiner großen Verbreitung 2, die kostenlose Distribution sowie die Kompatibilität zu allen wichtigen Browsern und Betriebssystemen. Auch auf Mobiltelefonen, PDAs oder Playstations gibt es mittlerweile die Möglichkeit einen Flash-Player laufen zu lassen. Außerdem sind sowohl der Player 3, als auch die Anwendungen meist sehr kompakt und eine Integration in HTML-Seiten ist problemlos möglich. Auch liegen mittlerweile für Actionscript, insbesondere für die grafische Benutzeroberfläche, umfangreiche Komponenten-Bibliotheken vor. Ein Nachladen von Daten als XML-Dokument oder über SOAP-Web-Service ist zudem möglich. [Romahn] Flash-Anwendungen werden zu Flash-Bytecode kompiliert, der in swf-dateien ( swf steht für small web files ) vorliegt. Nachdem sie aus dem Internet geladen wurden, 2) Nach Angaben von Adobe haben 99,1% aller Internetnutzer eine Version des Flash-PlugIns installiert. [Flash] 3) Der Download des Flash-PlugIns Version 9,0,47,0 für die Browser Firefox, Mozilla, Netscape und Opera umfasst für einen Windows Rechner 1,11 MB. [Flash-Download] 8

13 werden sie vom Flash-Player auf dem lokalen Rechner interpretiert, angezeigt und ausgeführt. [Romahn] Um Flash-Anwendungen zu erstellen, können verschiedene Entwicklungsumgebungen genutzt werden. Die neueste ist Adobe Flash CS3. Für die Entwicklung von RIAs gibt es darüber hinaus Adobe Flex 2, welches für diese Arbeit genutzt wurde. Aber auch mit einem einfachen Texteditor und dem Adobe Flex 2 Sofware Development Kit (Flex 2 SDK) können RIAs auf Flashbasis entwickelt werden XML Die Extensible Markup Language (XML) ist eine Metasprache, die vom World Wide Web Consortium (W3C) ab 1994 entwickelt wurde. Ziel war es, eine Organisationsstruktur zum Publizieren, Austauschen und Verbinden von Texten und anderen Medien zu erhalten. Sie basiert auf der älteren Sprache Structured Generalized Markup Language (SGML), die schon seit 1986 international standardisiert ist. [XML- Einführung] 1996 wurden zehn Design-Ziele aufgestellt, die von XML erfüllt werden sollen. Unter anderem soll es auf einfache Weise über das Internet nutzbar sein, für Menschen lesbar und verständlich sein und ein breites Spektrum von Anwendungen unterstützen. Alle Design-Ziele sind unter [XML] nachzulesen wurde die erste Empfehlung zu XML vom W3C herausgegeben. [XML-Einführung] XML ermöglicht es, eigene Datenstrukturen zu definieren, die an die zu erledigenden Aufgaben angepasst sind. Die Daten können sinnvoll strukturiert und vollständig beschrieben werden. Dabei folgen sie einem standardisierten Regelwerk. Somit bietet XML ein Universalkonzept zur Datenspeicherung. [XML-Einführung] Durch eine Dokumenttypdefinition (DTD) oder ein XMLSchema können erlaubte Elemente, Attribute und Wertzuweisungen sowie Regeln zur Verschachtelung definiert werden. Sie werden unabhängig von den eigentlichen Daten definiert. Gibt es eine DTD oder ein XML Schema, kann die XMLDatei durch einen Parser validiert werden. Das bedeutet, dass überprüft wird, ob sie fehlerfrei ist, also die Regeln der DTD oder des XML Schemas einhält und wohlgeformt ist. [XML-Regeln] Für diese Anwendung ist es nicht notwendig eine DTD oder ein XML Schema zu definieren. Die XML-Daten können also nicht validiert werden. Sie müssen allerdings wohlgeformt sein. Dazu müssen bestimmte Regeln, die für alle auf XML basierenden Daten gelten, eingehalten werden. So muss am Anfang einer XMLDatei die XML- 9

14 Deklaration stehen. Die Elemente müssen als Tags definiert werden, wobei zu jedem sich öffnenden Tag, in der Form <Tagname>, ein korrespondierendes schließendes Tag, in der Form </Tagname>, existieren muss. Alleinstehende Tags sind nur möglich, wenn es sich um ein leeres Element handelt, welches dann die Form <Tagname /> hat. Es muss mindestens ein Datenelement existieren. Es muss ein äußerstes Element, das so genannte Wurzelelement, geben, das alle anderen Elemente enthält. Die Elemente müssen korrekt verschachtelt sein, was bedeutet, dass sie in umgekehrter Reihenfolge geschlossen werden, als sie geöffnet wurden. Elementnamen dürfen nicht mit einer Ziffer oder der Buchstabenfolge xml beginnen und kein Gleichheitszeichen oder Leerzeichen enthalten. Bestimmte Zeichen, wie das Anführungszeichen, müssen umschrieben werden. Kommentare können in der Form <!-- Kommentar --> eingefügt werden. [XML-Regeln] 2.5. PHP PHP steht für PHP: Hypertext Preprozessor und ist eine weit verbreitete, für den allgemeinen Gebrauch bestimmte Open Source Scriptsprache. Sie ist besonders durch die Möglichkeit PHP-Code in HTML einzubetten, für Webprogrammierung geeignet. Sie ist eine serverseitige Skriptsprache und unterscheidet sich somit von clientseitigen Skriptsprachen, wie JavaScript, dadurch, dass der Code auf dem Server ausgeführt und die Ausgabe an den aufrufenden Client geschickt wird. Sie ist für Neulinge extrem simpel, bietet aber dennoch einen riesigen Funktionsumfang. [Open] Die nachfolgenden Angaben stützen sich auf die Quelle [PHP-Geschichte], soweit nicht anders kenntlich gemacht. Der Vorgänger von PHP, wie wir es heute kennen, ist das von Rasmus Lerdorf 1995 entwickelte Personal Homepage Tools / Forms Interpreter (PHP/FI). Dies war eine Ansammlung von Perl Skripten zur Zugriffserfassung auf Webseiten. Als mehr Funktionalität gefordert war, wurde eine umfangreichere Umsetzung in der Programmiersprache C geschaffen, die auch Kommunikation mit Datenbanken und einfache dynamische Webapplikationen ermöglichte. Einige grundlegende Funktionalitäten von PHP/FI sind noch heute Teil von PHP. Dazu gehört insbesondere die automatische Interpretation von Formularvariablen und die Möglichkeit, PHP-Code in HTML einzubetten. Lerdorf veröffentlichte den Sourcecode, damit er von jedem benutzt, auf Fehler untersucht und weiterentwickelt werden konnte. 10

15 Nach langer Betaphase wurde 1997 PHP/FI 2, eine Überarbeitung des in C geschriebenen PHP/FI, offiziell freigegeben. Kurze Zeit später wurde es aber schon durch die Alphaversion von PHP 3 abgelöst, welches im Jahr 1998 offiziell freigegeben wurde und dem heutigen PHP schon stark ähnelte. PHP 3 zeichnete sich insbesondere durch vielfältige Möglichkeiten zur Erweiterung aus. Dadurch wurden viele Entwickler angelockt, selbst Erweiterungen für PHP zu entwickeln. Dies ist einer der Gründe für den Erfolg von PHP. Weitere Verbesserungen waren eine solide Infrastruktur für eine Menge an Datenbanken, Protokollen und APIs, die Unterstützung objektorientierter Programmierung und eine bessere und konsistentere Syntax. Außerdem wurde der Name in die heute übliche Bezeichnung PHP: Hypertext Preprozessor geändert, um das Implizieren einer eingeschränkten persönlichen Nutzung zu vermeiden. Da PHP 3 zwar durch die Datenbankunterstützung und die Einbindung von APIs von Drittanbietern über die Ausstattung verfügte, komplexe Applikationen zu erstellen, aber nicht dafür entworfen war solche Applikationen auch effizient zu handhaben, wurde schon 1998 damit begonnen, den PHP-Kern umzuschreiben. Ziel war die Leistung komplexer Anwendungen sowie die Modularität des Basiscodes zu verbessern. Anfang 2000 wurde diese bessere Version als PHP 4 mit dem neuen Kern, der Zend-Engine, freigegeben. Bei der Entwicklung von PHP 5 wurden neue Sprachkonstrukte eingeführt, 2004 die neue Version, dessen Kern die Zend-Engine 2 ist, freigegeben. Mittlerweile liegt PHP in der Version vor. Die nachfolgenden Angaben stützen sich auf die Quelle [PHP], soweit nicht anders kenntlich gemacht. PHP bietet in seiner jetzigen Implementierung alle Möglichkeiten, die auch andere CGI- Programme bieten. Hauptsächlich genutzt wird sie allerdings für serverseitige Skripte, wofür ein Webserver, der PHP Parser und ein Browser benötigt werden. Daneben besteht aber auch die Möglichkeit sie für regelmäßig auszuführende Skripte mittels cron oder Task Scheduler auf der Kommandozeile zu nutzen. Mit der Erweiterung PHP- GTK, die nicht in der Hauptdistribution integriert ist, ist es sogar möglich, clientseitige GUI-Applikationen zu entwickeln. PHP ist auf allen gängigen Betriebssystemen nutzbar und unterstützt die meisten der gebräuchlichen Webserver. Für einen Großteil der Server bietet PHP eigene Module an, sonst kann es als CGI Prozessor genutzt werden. 11

16 Zum größten Teil wird PHP zur Ausgabe von HTML genutzt, ist aber nicht darauf beschränkt. So ist es möglich auch Bilder, PDF-Dateien, Flash Animationen und viele Arten von Text, wie zum Beispiel XHTML und XML, dynamisch zu generieren und sowohl auszugeben, als auch im Dateisystem zu speichern. Sie unterstützt den Zugriff auf viele gängige Datenbanken sowie die Kommunikation mit diversen Diensten, die Protokolle, wie IMAP, HTTP und viele weitere, nutzen. Auch ist es möglich einfache Netzwerksockets zu öffnen und unter Verwendung irgendeines Protokolls zu kommunizieren. PHP bietet eine solche Fülle an Funktionen und Erweiterungen, dass die detaillierte Beschreibung aller Möglichkeiten PHP zu benutzen an dieser Stelle nicht möglich ist. Zu diesem Zweck verweise ich auf die umfangreiche Funktionsreferenz. [PHP-Funktionsreferenz] PHPsTeam Dieses Kapitel stützt sich auf die Quelle [Beige], soweit nicht anders kenntlich gemacht. PHPsTeam ist eine PHP-Schnittstelle für den steam-server, die 2003 im Rahmen einer Bachelorarbeit entwickelt wurde. Sie beinhaltet alle nötigen Funktionen, um auf den steam-server zuzugreifen und Manipulationen an den Objekten vorzunehmen. Das Ziel war, die bis dahin nur mit detailliertem Fachwissen mögliche Entwicklung von Applikationen und Tools mit und in steam zu vereinfachen. Insbesondere sollte es möglich sein, steam-funktionalität auszulagern und das steam-system in Webseiten außerhalb von steam einzubetten. Mit PHP als Schnittstelle sollte es ermöglicht werden mit geringen Aufwand Informationen aus steam in Webseiten einzubinden oder ganze Homepages mit steam zu entwickeln. Implementiert wurden Funktionen zum Einloggen und Ausloggen, zum Hoch- und Runterladen von Dateien sowie zum Aufrufen von Objektmethoden. PHPsTeam ermöglicht somit Informationen aus steam von jedem beliebigen Webserver abzufragen und in Webseiten oder Webapplikationen zu integrieren. Zur Kommunikation mit dem steam-server nutzt PHPsTeam das steam eigene COAL- Protokoll, ein binäres Protokoll, welches ermöglicht, beliebige Objektmethoden im steam-server auszuführen. Die Methodenaufrufe werden durch PHPsTeam in einen COAL kompatiblen Datenstrom übersetzt und an den steam-server geschickt. Dieser führt den Befehl aus und sendet die Rückgabe an PHPsTeam, welches sie aus dem COAL-Format zurück konvertiert. 12

17 Darüber hinaus bietet PHPsTeam zahlreiche Caching- und Buffermechanismen, so dass auch bei unzureichenden Rechnerressourcen und schlechter Verbindung ein Arbeiten möglich ist. Voraussetzung für die Nutzung von PHPsTeam ist ein Webserver mit PHP ab Version 4.0.1, eine Netzwerkverbindung zum steam-server und ein Login. PHPsTeam liegt seit dem in Version 2.6 vor. Diese benötigt PHP 5. [PHPsTeam] 2.7. Adobe Flex 2.0 Dieses Kapitel stützt sich auf die Quelle [Adobe], soweit nicht anders kenntlich gemacht. Adobe Flex 2 ist eine Zusammenstellung von Werkzeugen und Technologien, die es ermöglicht, Rich Internet Applications zu erstellen, die kompatibel zum Flash Player 9 sind. Die Adobe Flex 2 Produktfamilie besteht aus dem Adobe Flex 2 SDK, das kostenlos erhältlich ist und alles beinhaltet, um RIAs zu erstellen, dem Adobe Flex Builder 2, den Adobe Flex Data Services 2 und Adobe Flex Charting 2. Adobe Flex 2 Sofware Development Kit (Flex 2 SDK) besteht aus einer Klassen- Bibliothek, die auch im Quellcode vorliegt, dem Flex Compiler und dem Flex Debugger. Als Programmiersprachen dienen Actionscript, die Programmiersprache für Flash-Anwendungen, MXML und CSS. Actionscript basiert auf ECMAScript und ist damit JavaScript sehr ähnlich. Es erlaubt objektorientierte Programmierung. In einer mit Adobe Flex 2 erstellten Anwendung wird es benutzt, um die clientseitige Applikationslogik zu implementieren und eigene Komponenten zu erstellen. MXML ist eine auf XML basierende deklarative Programmiersprache. Die einzelnen Tags korrespondieren mit einer jeweils zugehörigen Actionscriptklasse in der Flex Klassenbibliothek. Auf diese Weise ist es möglich sowohl mit MXML, als auch mit Actionscript auf die Klassenbibliothek zuzugreifen. Adobe Flex 2 wandelt die MXML- Tags in Actionscript um und kompiliert die komplette Anwendung in das swf- Dateiformat. In einer Adobe Flex 2 Anwendung dient MXML dazu, die graphische Benutzeroberfläche zu beschreiben. In der Adobe Flex 2 Klassenbibliothek sind verschiedene visuelle Objekte vorhanden, zum Beispiel Buttons, Textfelder, Container, Trennlinien und viele mehr. So ist es mit Adobe Flex 2 möglich in relativ kurzer Zeit eine graphische Benutzeroberfläche zu erstellen. Aber auch nicht-visuelle Objekte 13

18 gehören zur Adobe Flex 2 Klassenbibliothek. Dazu zählen der HTTPService, der eine Verbindung mit einem HTTP-Server ermöglicht, und weitere Dienste sowie Methoden zur Datenbindung an MXML-Objekte. So wie eigene Actionscriptklassen erstellt werden können, ist es auch möglich eigene MXML-Klassen zu erstellen. Dabei kann man sowohl mehrere MXML-Tags zusammenfassen, als auch mit Hilfe von Actionscript zusätzliche Funktionalität ergänzen. Es ist so zum Beispiel möglich, das Validieren von Benutzereingaben direkt in eine MXML-Klasse zu integrieren. Der Adobe Flex Builder 2 ist eine auf Eclipse basierende integrierte Entwicklungsumgebung für Adobe Flex 2. Es bietet Werkzeuge, die den Entwickler unterstützen, eine Adobe Flex 2 Anwendung zu konzipieren, zu designen, zu implementieren und zu debuggen. Es enthält Code Editoren für die Sprachen MXML, Actionscript und CSS, Werkzeuge zum einfacheren Navigieren im Quellcode, zum Debuggen sowie eine visuelle Ansicht, mit der die graphische Benutzeroberfläche erstellt und bearbeitet werden kann. Die Adobe Data Services 2 stellen Funktionen zur Verfügung, die eine bessere Nutzung von Datenkommunikation ermöglichen, als sie mit den Grundfunktionen des Adobe Flex 2 SDK realisierbar sind. Dazu gehören die Synchronisation von Datenveränderungen zwischen Client und Server oder verschiedenen Clients, ein integrierter Dienst zur Benutzung von publish-and-subscribe, automatisierter Daten-Push, Echtzeit Daten-Streaming, offene Adapter für die Integration von Datenpersistenzmechanismen, wie JMS, Hibernate und EJB, Authentifizierung von Clientzugriffen auf Ressourcen des Servers, Zugriff auf RemoteObjekts über das AMF-Protokoll und Data Service login. Adobe Data Services 2 können als Standard Webapplikation auf einem J2EE- Applikation-Server oder im Servlet-Container eingesetzt werden. Adobe Flex Charting 2 bietet zusätzliche Komponenten, die die am meisten verbreiteten Schaubildtypen unterstützen. Die Komponenten werden dynamisch auf dem Clientrechner gerendert und können mit Interaktionsmöglichkeiten, wie rollover, versehen werden. Ein einfaches Schaubild zeigt zum Beispiel eine Datenreihe, die als Array gegeben ist. Auch komplexere Schaubilder sind möglich. 14

19 3. Anforderungen Um einen ersten Einstieg in die Anforderungen an die Anwendung zu erhalten, stelle ich im folgenden drei mögliche Nutzungsszenarien dar. Das erste Szenario ist die Nutzung der Anwendung als Einzelperson. In einem gedruckten Dokument könnte der Nutzer beim Lesen bzw. Betrachten einzelne Stellen markieren und Anmerkungen an bestimmte Stellen im Dokument schreiben. Auf diese Weise ist es ihm möglich, beim nächsten Betrachten des Dokuments schnell alle wichtigen Passagen und seine dazugehörigen Ideen oder Fragen zu erfassen. Mit Hilfe dieser Anwendung soll dies auch mit digitalen Dokumenten, soweit sie als Bilddatei vorliegen, möglich sein. Allerdings erfordert dieser Einsatz noch kein kooperatives Bearbeiten des Dokuments. Das zweite Szenario beschreibt den schulischen Einsatz in einer Lehrer-Schüler- Beziehung, zum Beispiel mit bid-owl. Durch die Anwendung hat der Lehrer die Möglichkeit ein Dokument zur Verfügung zu stellen, welches die Schüler auf die im ersten Szenario beschriebene Art und Weise bearbeiten sollen. Der Lehrer hat darüber hinaus die Möglichkeit, durch Markierung und Anmerkung auf bestimmte Stellen hinzuweisen oder Fragen direkt an der Stelle zu stellen, die für die Bearbeitung von Interesse ist. Nach der Bearbeitung durch die Schüler - möglichst noch vor Beginn der Unterrichtsstunde - soll der Lehrer die Möglichkeit haben, die Annotationen der Schüler zu betrachten. Auf diese Weise kann er frühzeitig feststellen, ob bestimmte Stellen für die gesamte Klasse oder einzelne Schüler besonders wichtig, beziehungsweise problematisch sind oder ob es konträre Meinungen innerhalb des Klassenverbandes gibt. So ist es ihm möglich, sich optimal auf die bevorstehende Unterrichtsstunde vorzubereiten und diese an die Bedürfnisse seiner Schüler anzupassen. Außerdem kann er bestimmte Schüler gezielt auf Fehler aufmerksam machen oder zum Vortrag ihrer Ergebnisse ermuntern. Das dritte Szenario beschreibt den Einsatz in einer Lerngruppe gleichberechtigter Nutzer. Wie im ersten Szenario sollen die Mitglieder einer Lerngruppe auf das Dokument zugreifen und ihre Anmerkungen vornehmen. Dabei sollen sie die gespeicherten Annotationen der anderen Gruppenmitglieder sehen und verändern können. Auf diese Weise können die Gruppenmitglieder sich gegenseitig auf bestimmte Stellen im Dokument hinweisen und ihre Gedanken zu diesen Stellen den anderen zur Verfügung stellen. Sie können auf Probleme hinweisen, Fragen stellen sowie 15

20 beantworten und dies immer genau an den Stellen des Dokuments, an denen die Fragen oder Probleme auftauchen. Aus diesen Szenarien lassen sich einige Anforderungen für die Anwendung ableiten. Es soll möglich sein, Bilddateien anzuzeigen und Annotationen an bestimmte Stellen eines Bildes zu binden. Dazu benötigt die Anwendung Funktionen zum Erstellen, Bearbeiten und Löschen von Annotationen. Die Bearbeitung umfasst insbesondere die Positionierung, die Änderung des Inhalts und die Modifikation des Aussehens. Außerdem sollen die Anmerkungen dauerhaft gespeichert werden können. Um kooperatives Arbeiten zu ermöglichen, soll zudem der Zugriff auf die Anmerkungen mit einem Berechtigungssystem gesteuert werden können. Darüber hinaus gibt es noch weitere Anforderungen, die die Anwendung erfüllen soll. Da es sich um eine Internetanwendung handelt, soll die Benutzung der Anwendung so gestaltet werden, dass sie ohne Handbuch benutzt werden kann. Die graphische Benutzeroberfläche der Anwendung soll selbsterklärend sein und eine integrierte Hilfe anbieten, die die Benutzung erläutert. Es sollen dem Benutzer alle nötigen Funktionen zugänglich gemacht werden, ohne dabei die Benutzeroberfläche zu überladen. Außerdem sollen die Verbindungen zum Server das flüssige Arbeiten mit der Anwendung nicht behindern. Dazu sollen ständiges Laden und Speichern sowie lange Wartezeiten, insbesondere, wenn man sie nicht erwartet, vermieden werden. 16

21 4. Umsetzung Umgesetzt wurde die Anwendung als Rich Internet Application auf Basis von Flash. Eine Rich Internet Application bietet eine gute Darstellung, asynchrone Datenübertragung und Möglichkeiten der direkten Manipulation. Dadurch ist es möglich, eine Anwendung zu erstellen, die in Bezug auf die Bedienung die Anforderungen erfüllt. Flash wurde als Basis gewählt, weil die große Verbreitung gewährleistet, dass die Anwendung auch einen großen Anwenderkreis erreichen kann und dies auch in Umgebungen, in denen die Installation von Software nicht gestattet ist, Die geringe Größe sowohl des Flash-Players, als auch der Anwendung sind weitere wichtige Kriterien. Um eine Flash-Anwendung zu erstellen, bietet sich die Entwicklungsumgebung Flex 2 an. Sie ist explizit für die Erstellung von Rich Internet Applications entwickelt worden und beinhaltet Möglichkeiten, auf einfache Weise eine graphische Benutzeroberfläche anzufertigen und Services, wie die Verbindung zu einem Server, einzubinden. Die Datenspeicherung sowie die Funktionen des kooperativen Arbeitens werden mit Hilfe des steam-servers realisiert, der mit der PHPsTeam-Schnittstelle, eine Verbindungsstelle bietet, die es erlaubt, alle nötigen Funktionen auf dem steam-server aufzurufen, ohne dass man die für diesen benötigten Anweisungen kennt. Benutzt wird PHPsTeam in der Version 2.6. Die Anwendung ist aufgeteilt in das Hauptprogramm, einer MXML-Datei mit eingebundenen Actionscript, einer MXML-Komponente für die graphische Benutzeroberfläche und vier weitere Actionscript-Klassen. Für die Verarbeitung der Anfragen durch den Server wird die PHP-Datei steamconnect.php erstellt, über die mit Hilfe von PHP-sTeam der Zugriff auf den steam-server stattfindet steamconnect.php Die Datei steamconnect.php ermöglicht die Kommunikation mit dem steam-server über die PHP-Schnittstelle PHPsTeam. Sie stellt Funktionen zum Laden, Speichern, Bearbeiten und Löschen der Annotationen zur Verfügung. Außerdem gibt es Funktionen zum Auslesen der Bildobjekte im ausgewählten Raum und des Pfades sowie der Zugriffsberechtigung des angewählten Bildes. 17

22 Der Aufruf geschieht per HTTP-Anfrage, wobei die Variablen mit der Übertragungsart GET übergeben werden und somit in dem Array $_GET zur Verfügung stehen. Über die Variable $_GET["action"] wird gesteuert, welche Funktion aufgerufen werden soll. In der Tabelle 1 sieht man, welchen Befehl man übergeben muss, um die gewünschte Funktion aufzurufen, die benötigten Variablen und ihre Bedeutung. Gewünschte Funktion Variablen, die bei jedem Aufruf benötigt werden Auslesen der Bildobjekte im gewählten Raum Auslesen der Bilddatei Auslesen der Annotationen Speichern einer Annotation Befehl Benötigte Variablen Bedeutung jeder action der gewünschter Befehl server user password der Server, auf dem gearbeitet werden soll der User, mit dem gearbeitet werden soll das Passwort des Users load_room id die ID des Raumes load_image id die ID der Bilddatei load_annotation id die ID der Bilddatei save_annotation id die ID der Bilddatei x y width height color alpha text icon progid die x-position der Annotation die y-position der Annotation die Breite der Annotation die Höhe der Annotation die Farbe der Annotation die Transparenz der Annotation der Text der Annotation das Icon der Annotation die ID, die durch die Flashanwendung automatisch der Annotation zugeordnet wird 18

23 Gewünschte Funktion Ändern einer Annotation Löschen einer Annotation Befehl Benötigte Variablen Bedeutung change_annotation id die ID der Annotation x y width height color alpha text icon die x-position der Annotation die y-position der Annotation die Breite der Annotation die Höhe der Annotation die Farbe der Annotation die Transparenz der Annotation der Text der Annotation das Icon der Annotation delete_annotation id die ID der Annotation Tabelle 1: Mögliche Funktionen der steamconnect.php mit Angaben über die zu übergebenden Befehle und die benötigten Variablen. Die vom Server abgerufenen Daten werden als XML-Daten an die Anwendung übergeben, wobei die zu übertragenen Daten möglichst gering sein, aber dennoch Namen gewählt werden sollen, die erkennen lassen, um welche Daten es sich handelt. Auf eine Dokumenttypdefinition (DTD) oder ein XML-Schema wird verzichtet. Die Rückgabe muss nur wohlgeformt sein. In der Tabelle 2 sieht man, welche Form die Rückgabe bei welcher Funktion hat. Gewünschte Funktion Rückgabe Bedeutung XML-Elemente, die bei jeder Rückgabe vorkommen zusätzliche XML-Elemente bei jeder Rückgabe mit erfolgreicher Verbindung zusätzliche XML-Elemente beim erfolgreichen Auslesen der Bildobjekte im ausgewählten Raum <steam_data> <status> </status> </steam_data> <except> </except> <object> <id> </id> <name> </name> </object> das Wurzelelement (öffnen) der Status der Verbindung an dieser Stelle stehen die zusätzlichen XML-Elemente das Wurzelelement (schließen) gibt an, ob ein Fehler aufgetreten ist die Bildobjekte (öffnen) die ID des Bildobjekts in steam der Name des Bildobjekts die Bildobjekte (schließen) 19

24 Gewünschte Funktion Rückgabe Bedeutung zusätzliche XML-Elemente beim erfolgreichen Auslesen der Bilddatei zusätzliche XML-Elemente beim erfolgreichen Auslesen der Annotationen zusätzliche XML-Elemente beim erfolgreichen Speichern einer Annotation zusätzliche XML-Elemente beim erfolgreichen Ändern, beziehungsweise Löschen einer Annotation <object> <path> </path> <access> </access> </object> <object> <x> </x> <y> </y> <width> </width> <height> </height> <color> </color> <alpha> </alpha> <text> </text> <id> </id> <owner> </owner> <access> </access> <icon> </icon> </object> <object> <progid> </progid> <id> </id> <owner> </owner> <access> </access> </object> <object> <id> </id> </object> das gewählte Bildobjekt (öffnen) der Pfad der Bilddatei gibt an, ob der Benutzer Rechte zum Annotieren der Bilddatei hat das gewählte Bildobjekt (schließen) die Annotationen (öffnen) die x-position der Annotation die y-position der Annotation die Breite der Annotation die Höhe der Annotation die Farbe der Annotation die Transparenz der Annotation der Text der Annotation die ID der Annotation in steam der Name des Benutzers, der die Annotation erstellt hat gibt an, ob der Benutzer Zugriffsrechte auf die Annotation hat das Icon der Annotation die Annotationen (schließen) die Annotation (öffnen) die ID, die die Annotation durch die Anwendung zugewiesen bekommen hat die ID der Annotation in steam der Name des Benutzers, der die Annotation erstellt hat gibt an, ob der Benutzer Zugriffsrechte auf die Annotation hat die Annotation (schließen) die Annotation (öffnen) die ID der Annotation in steam die Annotation (schließen) Tabelle 2: Rückgaben beim Aufruf verschiedener Funktionen der steamconnect.php. 20

25 Annotationen können in steam beliebige Objekte sein, die mit dem annotierten Objekt verbunden werden. Nicht nur Text, sondern auch Internet-Verweise oder Bilder können Annotationen werden. Mit dieser Anwendung werden allerdings nur Annotationen vom Typ Dokument erstellt. Diese werden durch verschiedene Attribute so angepasst, dass alle für diese Anwendung nötigen Daten gespeichert werden. Dabei wird darauf Wert gelegt, möglichst schon vorhandene Attribute zu nutzen, obwohl steam es erlaubt, jederzeit einem Objekt neue Attribute zuzuordnen. Auf diese Weise soll ein Arbeiten mit den in diesem Programm erstellten Attributen auch mit anderen Anwendungen auf steam Basis ermöglicht werden. So kann man eine Annotation mit dieser Anwendung erstellen und den Text der Annotation zum Beispiel in der steam- oder bid-owl- Oberfläche auslesen oder sogar verändern. Der Text einer Annotation wird mit Hilfe der PHPsTeam-Funktion set_content der Klasse steam_document gesetzt und mit get_content der selbigen Klasse ausgelesen. Eine Übersicht über die weiteren durch diese Anwendung belegten Attribute kann man in Tabelle 3 sehen. Attribut OBJ_POSITION_X OBJ_POSITION_Y OBJ_WIDTH OBJ_HEIGHT DRAWING_COLOR STAR_ALPHA STAR_ICON Bedeutung die x-position der Annotation die y-position der Annotatio die Breite der Annotation die Höhe der Annotation die Farbe der Annotation die Transparenz der Annotation das Icon der Annotation Tabelle 3: Die durch die Anwendung explizit zugewiesenen Attribute. Die Zugriffsrechte werden mit Hilfe der PHPsTeam-Funktion resolve_access der Klasse steam_object vom Bildobjekt abgerufen. Für jeden Nutzer, der Zugriffsrechte auf dieses Objekt hat, werden diese danach mit der Funktion sanction den Annotationen zugewiesen. Die Annotationen erben somit die Zugriffsrechte von dem Bildobjekt, welches sie annotieren, wobei der Nutzer, der eine Annotation erstellt hat, die vollen Zugriffsrechte behält. 21

26 4.2. IAnnotations.mxml Die Datei IAnnotations.mxml stellt das Hauptprogramm dar. Sie hat die Aufgabe die Verbindung zum Server herzustellen, die Anfragen zu generieren und die Rückgabe zu bearbeiten. Die Datei ist geteilt in einen Actionscript- und einem MXML-Teil. Mit Hilfe der MXML-Tags werden die graphische Benutzeroberfläche und der HTTP- Service eingebunden. Dieser bietet die Möglichkeit Anfragen über das HTTP-Protokoll an einen Server zu schicken. Die Variablen werden mit Hilfe der Übertragungsmethode GET übergeben. Der Vorteil einer HTTPAnfrage ist, dass diese Aufrufe im Normalfall nicht von einer Firewalls abgeblockt werden, da es sich dabei um Aufrufe handelt, die auch der Browser durchführt. In unserem Fall wird die Datei steamconnect.php aufgerufen, wobei dieser die nötigen Werte übergeben werden. (Siehe Tabelle 1) Mit Hilfe von Actionscript werden die Anfragen generiert. Dabei stehen zwei verschiedene Funktionen zur Verfügung. Über die Funktion send_request werden die zum Login notwendigen Daten und die Daten einer Annotation übertragen. Wird eine ID zugewiesen, wird diese verwendet, sonst wird die ID der Annotation genommen. Dieser Aufruf wird benutzt, um eine Annotation zu speichern oder zu ändern. Bei der Funktion send_request_light wird auf die Daten der Annotation verzichtet. Dafür muss aber eine ID übergeben werden. Diese Funktion wird benutzt, um eine Annotation zu löschen oder die Bilddateien im gewünschtem Raum, die Daten einer Bilddatei oder die Annotationen zu laden. Auf diesen beiden Funktionen basieren die Funktionen load_room zum Laden der ID und des Namens aller Bilddadeien eines Raumes, load_picture zum Laden der URL einer Bilddatei und der Zugriffsrechte, die der aktuelle Benutzer zu dieser Bilddatei hat, load_annotations zum Laden der Annotationen und save_annotations zum Speichern der Änderungen. Außerdem werden die Rückgaben der Aufrufe verarbeitet, die als XML-Daten übergeben werden und die zuvor an den Server gesendete Aktion beinhalten. Die Antwort des Servers löst die Funktion handlehttpresponse aus, die mit Hilfe der zurückgesendeten Aktion die Daten den richtigen Funktionen zuordnet. In der Abbildung 1 sind alle auf Actionscript basierenden Klassenvariablen und Funktionen zu sehen. 22

27 Abbildung 1: Alle auf Actionscript basierenden Klassenvariablen und Funktionen der Klasse IAnnotations GUI.mxml Die MXML-Komponente GUI.mxml stellt die graphische Benutzeroberfläche dar. Die Datei ist geteilt in einen Actionscript- und einem MXML-Teil. Mit Hilfe der MXML-Tags wird die graphische Benutzeroberfläche definiert. Dafür bietet Flex 2 eine Fülle an vordefinierten Objekten, die zur Strukturierung, zur Steuerung und zum Anzeigen genutzt werden können. Die graphische Benutzeroberfläche besteht aus zwei Bereichen. Im linken Bereich wird das Bild inklusive der Annotationen angezeigt. Wird ein Bild angezeigt, können hier per Drag-and-Drop die Position und die Größe einer Annotation verändert sowie neue Annotationen erstellt werden. Im rechten Bereich befinden sich die Steuerungselemente. Dieser Bereich hat zwei verschiedene Modi, einen Anmeldungs- und einen Bearbeitungsmodus. Die genaue Beschreibung der graphischen Benutzeroberfläche und der Möglichkeiten mit ihr zu arbeiten, finden sich in Kapitel 5. Eine Übersicht über die mittels id steuerbar gemachten MXML-Objekte befindet sich in Tabelle 4. 23

28 id Objekt Bedeutung image mx:image das angezeigte Bild tabnav mx:tabnavigator das Registerkartenmenü logintab mx:canvas das Register, auf dem das Anmeldungsmenü ist steamserver mx:combobox das Auswahlfeld für die möglichen Server username mx:textinput das Eingabefeld für den Benutzernamen password mx:textinput das Eingabefeld für das Passwort roominput mx:textinput das Eingabefeld für den Pfad oder die ID des ausgesuchten Raumes imagegrid mx:datagrid die Tabelle, in der die möglichen Bilddateien angezeigt und ausgesucht werden können worktab mx:canvas das Register, auf dem das Bearbeitungsmenü ist alphaslider mx:hslider der Schieberegler zur Anzeige und Einstellung der Transparenz deletebutton mx:button der Button zum Löschen ownercombo mx:combobox das Auswahlfeld für den Nutzer, dessen Annotationen angezeigt werden sollen iconcombo mx:combobox das Auswahlfeld für die Anzeige des aktuellen und Auswahl eines neuen Icons iconinput mx:textinput das Ein- und Ausgabefeld des eigenen Icons colorpicker mx:colorpicker das Auswahlfeld für die Farbe owneroutput mx:textinput das Ausgabefeld für den Ersteller einer Annotation accessoutput mx:textinput das Ausgabefeld für die Zugriffsberechtigung textinput mx:textarea das Ein- und Ausgabefeld des Textes Tabelle 4: Mit Hilfe der id steuerbar gemachte MXML-Objekte in der Datei GUI.mxml Mit Hilfe von Actionscript wurde die Logik der graphischen Oberfläche programmiert. Das sind Funktionen, die durch die Betätigung des Buttons oder durch Ereignisse (events) aufgerufen werden, und einige weitere. Drückt der Nutzer die rechte Maustaste auf dem Bild, wird durch ein EventListener die Funktion mous_down aufgerufen. Dabei werden drei verschiedene Zustände unterschieden. Wird die Maustaste an einer Stelle des Bildes gedrückt, an der sich keine Annoation befindet, wird eine neue Annotation erstellt, diese dem Bild hinzugefügt und ein EventListener erstellt, der bei Bewegung der Maus über dem Bild die Funktion move_mouse_change_size aufruft. Wird die Maustaste auf einer Annotation gedrückt, wird mit Hilfe der Funktion mark_clicked der Klasse UIAnnotation überprüft, ob das 24

29 Quadrat an einer der Ecken der Annotation getroffen wurde. Ist dies der Fall, wird auch der EventListener hinzugefügt, der bei Bewegung der Maus über dem Bild die Funktion move_mouse_change_size aufruft. Ist dies nicht der Fall, wird ein EventListener hinzugefügt, der bei Bewegung der Maus die Funktion move_mouse_change_position aufruft. Beim Loslassen der Maustaste wird die Funktion mouse_up aufgerufen, die diese EventListener wieder entfernt. Diese Funktion löscht außerdem eine neue Annotation, wenn bei deren Erstellung die Maus nicht bewegt wurde, also keine Größe für die neue Annotation festgelegt wurde. Mit Hilfe der Funktion add_annotation kann eine Annotation erstellt und dem Bild sowie dem AnnotationManager hinzugefügt werden. Durch die Funktion remove_all_annotations können alle Annotationen sowohl vom Bild, als auch aus dem AnnotationManager entfernt werden. In der Abbildung 2 sind alle auf Actionscript basierenden Klassenvariablen und Funktionen zu sehen. Abbildung 2: Alle auf Actionscript basierenden Klassenvariablen und Funktionen der Klasse GUI. 25

30 4.4. UIAnnotation.as Die Klasse UIAnnotation.as ist eine Erweiterung der vordefinierten Klasse UIComponent und bietet alle Funktionen und Variablen, die benötigt werden, um die graphische Erscheinung der Annotationen zu realisieren. Auf der Klasse UIComponent basieren alle graphischen Objekte in Flex 2. Sie bietet schon einige für die Annotationen benötigte Funktionen und Variablen. Alle Klassenvariablen und Funktionen sind unter [UIComponent] nachzulesen. Für diese Anwendung sind insbesondere der Tooltipmanager und die zugehörige Variable tooltip, in der der Text der Annotation gespeichert wird, die Variablen x und y, die die Position des Objekts angeben, und die Variable alpha, die die Transparenz angibt, von Bedeutung. Mit Hilfe der Transparenz wird die Textmarkerfunktion realisiert. Außerdem bietet die Klasse die Möglichkeiten, Grafiken durch das integrierte graphics- Objekt zu erstellen oder weitere graphische Objekte, wie zum Beispiel Bilder, per addchild hinzuzufügen. Darüber hinaus wurden zusätzliche Funktionen und Variablen realisiert, die für die Benutzung als Annotation wichtig sind. Einige Variablen speichern die Breite und Höhe, die Farbe sowie das Icon einer Annotation. Diese Variablen können mit Hilfe von get-funktionen wie Variablen ausgelesen, aber nicht verändert werden. Zum Ändern dieser Attribute, der Position, des Alpha-Wertes, sowie des Textes stehen die mit change_ beginnenden Funktionen zur Verfügung. Diese überprüfen automatisch die Zugriffsrechte und blockieren gegebenenfalls die Veränderung der Attribute. Die Funktionen liefern in diesem Fall den Rückgabewert false, so dass eine direkte Rückmeldung an den Benutzer ausgelöst werden kann. Auf diese Weise sollte es nicht dazu kommen, dass eine Änderung der Attribute in dieser Anwendung gemacht wird, die nicht gespeichert werden kann. Außerdem werden weitere Informationen gespeichert. Dazu gehören zum einen Angaben vom steam-server bezüglich des Nutzers, der eine Annotation erstellt hat, der Zugriffsberechtigung des aktuellen Nutzers und der ID des Objekts auf dem steam- Server. Zum anderen werden Informationen über den Zustand der Annotation gespeichert, die zum Speichern der Änderungen auf dem steam-server gebraucht werden. Zu diesem Zweck stehen die Variablen fresh, changed und deleted zur Verfügung. Die Variable fresh gibt an, ob eine Annotation neu ist, das heißt nicht vom steam-server geladen wurde. Die Variable changed gibt an, ob eine Annotation verändert wurde, also die 26

31 aktuellen Attribute nicht mit denen auf dem steam-server übereinstimmen. Die Variable deleted gibt an, ob eine Annotation gelöscht wurde, also noch auf dem steam- Server vorhanden ist, obwohl sie in der Anwendung gelöscht wurde. Eine weiterer Variable, die einen Zustand der Annotation speichert, ist marked. Diese Variable gibt an, ob die Annotation markiert ist. Mit Hilfe der Funktion draw kann die Annotation gezeichnet werden. Dazu wird je nach Icon eine bestimmte Funktion des IconManagers aufgerufen. Ist die Annotation markiert, wird zusätzlich die Funktion des IconManagers benutzt, die die Umrandung und das Quadrat in der Ecke zeichnet. Die Größe der Umrandung und des Quadrats werden in den Variablen linebreadth und vertexbreadth gespeichert und in der momentanen Implementierung nicht verändert. Es könnten aber auf einfache Weise Funktionen hinzugefügt werden, durch die der Benutzer diese anpassen kann. Da die graphische Benutzeroberfläche möglichst einfach und nicht zu überladen sein soll, wurde allerdings auf diese Funktionalität verzichtet. Die Funktion clear entfernt den durch draw hinzugefügten graphischen Inhalt der Annotation. Dadurch wird die Annotation unsichtbar und auch nicht mehr anklickbar. Die Annotation muss dabei nicht vom in der GUI definierten Bild per removechild entfernt werden und kann somit auch wieder sicht- und anklickbar gemacht werden, ohne sie per addchild dem in der GUI definierten Bild hinzuzufügen. Die Annotation bleibt durch diese Funktion vorhanden. Die Zustandsvariablen werden nicht verändert, so dass die Annotation auch durch das Speichern der Änderungen nicht vom steam- Server gelöscht werden. Die Funktion erase hingegen markiert eine Annotation zum Löschen, dass bedeutet, die Variable deleted wird auf true gesetzt. Die Funktion mark markiert eine Annotation, das heißt, die Variable marked wird true gesetzt und draw aufgerufen. Mit der Funktion de_mark wird eine Annotation wieder demarkiert. Die Markierung ist eine Umrandung um die Annotation und ein kleines Quadrat an einer ihrer Ecken. Die Funktion mark_clicked gibt zurück, ob eine bestimmte Position in diesem Quadrat liegt oder nicht, wodurch die GUI prüfen kann, ob die Maustaste auf diesem Bereich gedrückt wurde. In der Abbildung 3 sind alle Klassenvariablen und Funktionen zu sehen. 27

32 Abbildung 3: Alle Klassenvariablen und Funktionen der Klasse UIAnnotation 4.5. IconManager.as Die Klasse IconManager.as bietet Funktionen mit denen das Icon einer Annotation gezeichnet wird. Dabei gibt es zwei unterschiedliche Arten von Icons. Die vordefinierten werden mit Hilfe des graphics-objektes der Annotation erstellt, die 28

33 selbst definierten werden mit Hilfe eines Loader-Objektes von einer URL geladen und per addchild der Annotation hinzugefügt. Als vordefinierte Icons gibt es momentan ein i, ein Ausrufezeichen, ein Fragezeichen und kein Icon, mit dem insbesondere eine Markierung per Textmarker nachempfunden werden kann. Durch die Möglichkeit, die Hintergrundfarbe zu verändern, stehen dem Benutzer eine große Zahl leicht unterscheidbarer Icons zur Verfügung. Die selbst definierten Icons müssen eine Größe von 50 mal 50 Pixeln haben und können auf einer beliebigen Internetadresse liegen, zu der Zugriff besteht. Im Vergleich zu den vordefinierten Icons ist die Handhabung etwas schwieriger und auch das Erkennen der Annotationen kann bei bestimmten Icons schwerer sein, da sie sich unter Umständen weniger stark vom annotiertem Bild abheben. Allerdings bieten sie den Vorteil, dass der Nutzer seine Icons individuell gestalten kann. Denkbar wären zum Beispiel Portraitphotos der verschiedenen Benutzer, um eine schnellere Zuordnung der Annotationen zu erreichen. Insbesondere bei großen Benutzergruppen kann dies von Vorteil sein. Außerdem bietet die Klasse die Funktion draw_mark mit dessen Hilfe eine Linie um die Annotation sowie ein Quadrat an einer der Ecken gezeichnet wird. Darüber hinaus kann durch die Funktion clear das Icon komplett gelöscht werden, wodurch die Annotation unsichtbar und auch nicht mehr anklickbar wird. In der Abbildung 4 sind alle Klassenvariablen und Funktionen zu sehen. Abbildung 4: Alle Klassenvariablen und Funktionen der Klasse IconManager. 29

34 4.6. AnnotationenManager.as Die Klasse AnnotationenManager.as übernimmt die Verwaltung aller Annotationen. Die Annotationen werden in dem Array allannotations gespeichert und können über die Funktion get_all als Array ausgelesen werden. Darüber hinaus gibt es die Möglichkeit, alle neuen Annotationen mit get_fresh, alle bearbeiteten mit get_changed und alle gelöschten mit get_deleted auszulesen. Diese werden für die korrekte Speicherung auf dem steam-server benötigt. Mit get_marked kann zusätzlich die makierte Annotation ausgelesen werden. Über die Funktion add_annotation kann eine Annotation dem AnnotationenManager hinzugefügt werden. Dabei wird sie sichtbar gemacht und anhand ihrer Variablen steamid wird geprüft, ob sie neu erstellt oder vom steam-server geladen wurde. Je nachdem wird ihre Variable fresh mit true oder false belegt. Mit der Funktion delete_all_annotation können alle Annotationen entfernt werden. Dies ist insbesondere für das Bearbeiten einer anderen Bilddatei notwendig. Diese Klasse bietet zudem alle nötigen Funktionen, um Manipulationen auf der markierten Annotation auszuführen. Dies betrifft die Änderung der Position, der Größe, der Transparenz, des Textes, des Icons und der Farbe sowie das Löschen und Demarkieren der markierten Annotation. Mit Hilfe der Funktion mark_annotation kann eine Annotation markiert und dabei gleichzeitig die zuvor markierte Annotation demarkiert werden. Darüber hinaus bietet sie die mit _to_saved endenden Funktionen mit deren Hilfe die Änderungen der Annotationen vollzogen werden, die durch das Speichern hervorgerufen werden. Wird zum Beispiel eine Annotation gespeichert, werden den Variablen der Annotation steamid, ownername und access die vom steam-server erzeugten Werte übergeben. Außerdem werden die Variablen fresh und changed auf false gesetzt, damit die Annotationen nicht ein weiteres mal gespeichert werden. Außerdem verwaltet diese Klasse auch die Sichtbarkeit und Unsichtbarkeit der Annotationen. Über die Funktion update_owner können Annotationen sichtbar, beziehungsweise unsichtbar gemacht werden, die einen bestimmten Eintrag in der Variablen owner haben. In der Abbildung 5 sind alle Klassenvariablen und Funktionen zu sehen. 30

35 Abbildung 5: Alle Klassenvariablen und Funktionen der Klasse AnnotationManager UserManager.as Der UserManager hat nur die Aufgabe, die Nutzer relevanten Daten, also Name, Passwort und Server zu speichern und Zugriff auf diese Daten zu bieten. 31

36 5. Installation und Systemvoraussetzungen 5.1. Auf Seiten des Benutzers Der Vorteil von Flash ist, dass die Anwendung nicht auf dem Rechner des Benutzers installiert werden muss. Dadurch wird die Hürde, diese Anwendung zu benutzen, verringert, so dass auch weniger versierte Benutzer dieses Programm starten können. Außerdem kann es so auch in Bereichen benutzt werden, in denen den Benutzern keine Rechte zum Installieren von Programmen gewährt werden, wie zum Beispiel an einigen Schulrechnern. In diesen Bereichen erleichtert es somit auch die Arbeit der Administratoren, die unter Umständen eine Vielzahl von Installationen vornehmen müssten. Allerdings benötigt die Anwendung einen installierten Flash-Player ab Version 9. Eine Version des Flash-Players ist auf vielen Computern schon installiert, da er für eine große Anzahl von Anwendungen, von animierten Homepages über kleine Spielen bis zu Anwendungen für Online-Shops und vieles mehr, Voraussetzung ist. Systemvoraussetzung für die Anwendung ist somit ebendieser Flash-Player. Dieser benötigt unter Windows einen Intel Pentium II mit 450 MHZ und 128 MB RAM oder einen gleichwertigen, beziehungsweise besseren Rechner, auf einem Macintosh einen PowerPC G3 mit 500 Mhz, einen Intel Core Duo-Prozessor mit mindestens 1,83 GHZ oder besseren Rechner mit mindestens 128 MB RAM, unter Linux einen aktueller Prozessor mit 800 MHZ und 512 MB RAM sowie einen 128 MB großen Grafikspeicher. Der benötigte freie Speicher auf der Festplatte kann vernachlässigt werden, da der Flash-Player nur eine geringe Größe hat. Angaben über benötigte Browser und Betriebssystem Kombinationen finden sich unter [Flash-System]. Darüber hinaus wird zum Starten der Anwendung, zum Laden der Bilddateien, des Bildes und der Annotationen sowie zum Speichern und Verwerfen der Änderungen eine Verbindung zum Server benötigt. Während des Arbeitens kann die Verbindung unterbrochen sein. 32

37 5.2. Auf Seiten des Anbieters Um die Anwendung auf einem Server anzubieten, muss die Anwendung in ein beliebiges Verzeichnis des Webservers kopiert werden. Die Datei steamconnect.php und das Verzeichnis phpsteam mit PHPsTeam Version 2.6 müssen in diesem Verzeichnis liegen. Die gesamte Anwendung umfasst somit die Dateien IAnnotatios.swf, steamconnect.php und das Verzeichnis phpsteam. Durch Änderung der Zeile require_once ( "phpsteam/steam_connector.class.php" ); in der Datei steamconnect.php kann PHPsTeam auch an einer anderen Stelle, sogar auf einem anderen Server liegen. So kann es für verschiedene Anwendungen zentral gespeichert werden. Diese Änderung ist einfach durchzuführen, da die Datei eine überschaubare Größe hat und es sich bei PHP um eine Sprache handelt, die nicht kompiliert wird, sondern zur Laufzeit interpretiert wird. Auch die Datei steamconnect.php könnte an einer anderen Stelle liegen, allerdings bedarf diese Änderung mehr Aufwand, so dass sie nicht empfohlen wird. Darüber hinaus kann die Anwendung in eine HTML-Datei eingebunden werden. Momentan ist dies die IAnnotations.html, die überprüft, ob ein Flash-Player installiert ist. Systemvoraussetzungen sind ein Webserver mit PHP ab Version 5 sowie eine Verbindung zu den steam-servern, auf denen gearbeitet werden soll. 33

38 6. Benutzung Um die Benutzung der Anwendung darzustellen, wird das in Kapitel 3 als erstes dargestellte Szenario, die Nutzung als Einzelperson, mit Screenshots und Erklärungen durchgeführt. Nach dem Starten der Anwendung bietet sich dem Nutzer die Ansicht in Abbildung 6. Auf der linken Seite wird das Logo angezeigt, welches für die reale Nutzung angepasst werden kann. Auf der rechten Seite ist das Menü zum Einloggen zu sehen. (Siehe Abbildung 7) Abbildung 6: Darstellung der Anwendung nach dem Start. Um sich anzumelden, muss der Nutzer einen Server auswählen. Momentan steht zum Testen nur der Server steam.upb.de zur Verfügung. Darüber hinaus muss ein gültiger Benutzername sowie das zugehörige Passwort eingegeben werden. Durch die Eingabe des Benutzernamens wird das Feld Raum-ID bzw. -Pfad mit dem Pfad zum Workroom des Benutzers gefüllt. Die Abbildung 8 zeigt das Anmeldungs-Menü nach Eingabe 34

39 dieser Daten. Will der Benutzer in einem anderen Raum arbeiten, kann er in das Feld die ID beziehungsweise den Pfad zu dem von ihm gewünschten Raum eingeben. Abbildung 7: Anmeldungsmenü nach dem Start. Abbildung 8: Anmeldungsmenü mit eingetragenen Nutzerdaten. Durch die Betätigung des Buttons Bilddateien anzeigen werden die Bilddateien vom steam-server geladen und in der Tabelle Bilddateien angezeigt. (Siehe Abbildung 9) Die Reihenfolge der Bilddateien ist die Reihenfolge, in der sie auf den Server geladen wurden. Durch klicken auf den Titel der Tabelle Bilddateien können diese nach Namen sortiert werden. Nach der Auswahl einer Bilddatei (siehe Abbildung 10) kann der 35

40 Benutzer durch klicken auf den Button Bild bearbeiten das Laden des Bildes und der zugehörigen Annotationen starten. Abbildung 9: Anmeldungsmenü mit angezeigten Bilddateien. Abbildung 10: Anmeldungsmenü mit ausgewählter Bilddatei. Nachdem der Benutzer das Bearbeiten einer Bilddatei gestartet hat, ändert sich die Darstellung. Das Menü wechselt auf den Bearbeitungs-Modus. Unter Umständen muss sich der Benutzer an dieser Stelle noch einmal beim steam-server authentifizieren, dies aber nicht über die Anwendung, sondern über ein Fenster des Browsers. Danach wird auf der linken Seite, wo zuvor das Logo angezeigt wurde, das ausgewählte Bild angezeigt. In Abbildung 11 ist dieser Zustand zu sehen. Sind schon Annotationen zu der 36

41 Bilddatei hinzugefügt worden, werden diese geladen, was unter Umständen einige Zeit dauern kann. Abbildung 11: Darstellung der Anwendung zu Beginn der Bearbeitung. Jetzt kann der Nutzer mit der Bearbeitung der Annotationen beginnen. In unserem Beispiel ist noch keine Annotation vorhanden, so dass als erstes eine erstellt wird. Dazu muss die rechte Maustaste an der Stelle des Bildes gedrückt werden, an der die Annotation erscheinen soll. Danach muss die Maus mit gedrückter Taste bewegt werden, wobei sich die Größe der Annotation ändert. Die neu erstellte Annotation wird automatisch markiert. Der Text, die Farbe, die Transparenz und das Icon werden von den Einstellungen im Bearbeitungs-Menü (siehe Abbildung 12) übernommen. Um eine Annotation zu verändern, muss diese zuerst markiert werden. Dies ist möglich, indem man sie anklickt. Es erscheint eine orangefarbene Umrandung um die Annotation und an einer ihrer Ecken ein orangefarbenes Quadrat. 4 War zuvor eine Annotation markiert, wird diese demarkiert. 4 Hat die Annotation die gleiche Farbe ist die Umrandung und das Quadrat blau. 37

42 Darüber hinaus werden die Attribute der markierten Annotation, außer der Farbe, im Bearbeiten-Menü angezeigt. (Siehe Abbildung 13) Hat der Nutzer keine Berechtigung zum ändern der markierten Annotation, sind diese Felder nicht veränderbar. Ist dies nicht der Fall können die Attribute direkt in der Anzeige verändert werden. Abbildung 12: Bearbeitungsmenü nach Start der Bearbeitung. Abbildung 13: Bearbeitungsmenü bei angeklickter Annotation. Um zu erreichen, dass keine Annotation markiert ist, muss mit der Maus auf eine Stelle der Bildes geklickt werden, an der sich keine Annotation befindet. Die Maus darf dabei nicht bewegt werden, da man sonst eine neue Annotation erstellen würde. 38

43 Die Größe einer Annotation kann per Drag-and-Drop verändert werden. Dazu muss mit der rechte Maustaste die Markierung, ein Quadrat an der Ecke, angewählt und mit gedrückter Taste bewegt werden. Will man eine Annotation bewegen, muss dieselbe Aktion an der Annotation ausgeführt werden. Um den Text der markierten Annotation zu ändern, muss der neue Text in das Feld Text der Annotation eingegeben werden. Der Text wird zusätzlich zur Anzeige im Bearbeitungs-Menü sichtbar, wenn man die Maus über eine Annotation bewegt. Dann erscheint er als Kurzinformation (Tooltip) (Siehe Abbildung 14). Abbildung 14: Anzeige des Textes einer Annotation als Kurzinformation (Tooltip). Um die Farbe der markierten Annotation zu ändern, muss das Feld Farbe angeklickt werden. Es erscheint ein Farbwahlmenü, in dem der Nutzer die gewünschte Farbe auswählen kann. Um die Transparenz der markierten Annotation zu ändern, muss der Schieber Transp. an die Stelle bewegt werden, die die gewünschte Transparenz repräsentiert. Die Transparenz kann zwischen 1 und 0,1 in Schritten der Größe 0,1 gewählt werden. Eine geringe Transparenz kann insbesondere dafür benutzt werden, um die Funktionalität eines Textmarkers auf das Bild anzuwenden. Um das Icon der markierten Annotation zu ändern, muss in dem Pulldownmenü Icon das gewünschte Icon ausgewählt werden. Es stehen kein Icon, i, Ausrufezeichen oder Fragezeichen zur Verfügung. Außerdem gibt es die Möglichkeit, den Menüpunkt eigenes zu wählen. Daraufhin wird das Bild, welches durch Eingabe der URL in dem Feld Eigenes Icon definiert wird, als Icon benutzt. Zu beachten ist, dass das Bild eine Größe von 50 mal 50 Bildpunkten aufweisen soll. Wird ein kleineres Bild gewählt, füllt 39

09.06.2003 André Maurer andre@maurer.name www.andre.maurer.name Wirtschaftsinformatik FH 3.5 Fachhochschule Solothurn, Olten

09.06.2003 André Maurer andre@maurer.name www.andre.maurer.name Wirtschaftsinformatik FH 3.5 Fachhochschule Solothurn, Olten Aktuelle Themen der Wirtschaftsinformatik Zusammenfassung 09.06.2003 André Maurer andre@maurer.name www.andre.maurer.name Wirtschaftsinformatik FH 3.5 Fachhochschule Solothurn, Olten 1 Serverseitige Webprogrammierung

Mehr

Web 2.0 Architekturen und Frameworks

Web 2.0 Architekturen und Frameworks Web 2.0 Architekturen und Frameworks codecentric GmbH Mirko Novakovic codecentric GmbH Quality Technische Qualitätssicherung in Software-Projekten mit Fokus auf Performance, Verfügbarkeit und Wartbarkeit

Mehr

Sicherheit in Rich Internet Applications

Sicherheit in Rich Internet Applications Sicherheit in Rich Internet Applications Florian Kelbert 14.02.2008 Seite 2 Sicherheit in Rich Internet Applications Florian Kelbert 14.02.2008 Inhaltsverzeichnis Grundlagen Ajax und Mashups Adobe Flash-Player

Mehr

1. Java Grundbegriffe

1. Java Grundbegriffe 1. Java Grundbegriffe Geschichte von Java Programmieren mit Java Interpretieren vs. Kompilieren Java Byte-Code Jave Virtual Machine Arbeitsmaterialien Allgemeine Informatik 2 SS09 Folie 1.1 Java, eine

Mehr

Java Einführung Programmcode

Java Einführung Programmcode Java Einführung Programmcode Inhalt dieser Einheit Programmelemente Der erste Programmcode Die Entwicklungsumgebung: Sun's Java Software Development Kit (SDK) Vom Code zum Ausführen des Programms 2 Wiederholung:

Mehr

Dataport IT Bildungs- und Beratungszentrum. HTML- Grundlagen und CSS... 2. XML Programmierung - Grundlagen... 3. PHP Programmierung - Grundlagen...

Dataport IT Bildungs- und Beratungszentrum. HTML- Grundlagen und CSS... 2. XML Programmierung - Grundlagen... 3. PHP Programmierung - Grundlagen... Inhalt HTML- Grundlagen und CSS... 2 XML Programmierung - Grundlagen... 3 PHP Programmierung - Grundlagen... 4 Java - Grundlagen... 5 Java Aufbau... 6 ASP.NET Programmierung - Grundlagen... 7 1 HTML- Grundlagen

Mehr

Agenda. Ingo Ebel (ie007) Benjamin Müller (bm032) Was ist AJAX? Sicherheit Vor- und Nachteile. AJAX Frameworks. Wozu benötigt Client/Server

Agenda. Ingo Ebel (ie007) Benjamin Müller (bm032) Was ist AJAX? Sicherheit Vor- und Nachteile. AJAX Frameworks. Wozu benötigt Client/Server AJAX Agenda Ingo Ebel (ie007) Was ist AJAX? Wozu benötigt Client/Server Sicherheit Vor- und Nachteile Benjamin Müller (bm032) AJAX Frameworks GWT ATF Ingo Ebel - ie007 2 Web 2.0 Ingo Ebel - ie007 3 Ingo

Mehr

Datenbank-basierte Webserver

Datenbank-basierte Webserver Datenbank-basierte Webserver Datenbank-Funktion steht im Vordergrund Web-Schnittstelle für Eingabe, Wartung oder Ausgabe von Daten Datenbank läuft im Hintergrund und liefert Daten für bestimmte Seiten

Mehr

Managed VPSv3 Was ist neu?

Managed VPSv3 Was ist neu? Managed VPSv3 Was ist neu? Copyright 2006 VERIO Europe Seite 1 1 EINFÜHRUNG 3 1.1 Inhalt 3 2 WAS IST NEU? 4 2.1 Speicherplatz 4 2.2 Betriebssystem 4 2.3 Dateisystem 4 2.4 Wichtige Services 5 2.5 Programme

Mehr

Konzept eines Datenbankprototypen. 30.06.2003 Folie 1 Daniel Gander / Gerhard Schrotter

Konzept eines Datenbankprototypen. 30.06.2003 Folie 1 Daniel Gander / Gerhard Schrotter Konzept eines Datenbankprototypen 30.06.2003 Folie 1 Daniel Gander / Gerhard Schrotter Inhalt (1) Projektvorstellung & Projektzeitplan Softwarekomponenten Detailierte Beschreibung der System Bausteine

Mehr

Microsoft PowerPoint 2013 YouTube-Video einfügen

Microsoft PowerPoint 2013 YouTube-Video einfügen Hochschulrechenzentrum Justus-Liebig-Universität Gießen Microsoft PowerPoint 2013 YouTube-Video einfügen YouTube-Video einfügen in PowerPoint 2013 Seite 1 von 6 Inhaltsverzeichnis Einleitung... 2 Vorbereitungen...

Mehr

Leitfaden für die Veränderung von Texten auf der Metrik- Seite

Leitfaden für die Veränderung von Texten auf der Metrik- Seite Leitfaden für die Veränderung von Texten auf der Metrik- Seite 1. Einloggen... 2 2. Ändern vorhandener Text-Elemente... 3 a. Text auswählen... 3 b. Text ändern... 4 c. Änderungen speichern... 7 d. Link

Mehr

Angreifbarkeit von Webapplikationen

Angreifbarkeit von Webapplikationen Vortrag über die Risiken und möglichen Sicherheitslücken bei der Entwicklung datenbankgestützter, dynamischer Webseiten Gliederung: Einführung technische Grundlagen Strafbarkeit im Sinne des StGB populäre

Mehr

[DIA] Webinterface 2.4

[DIA] Webinterface 2.4 [DIA] Webinterface 2.4 2 Inhalt Inhalt... 2 1. Einleitung... 3 2. Konzept... 4 2.1 Vorteile und Anwendungen des... 4 2.2 Integration in bestehende Systeme und Strukturen... 4 2.3 Verfügbarkeit... 5 3.

Mehr

Objektorientierte Softwareentwicklung SoSe 15

Objektorientierte Softwareentwicklung SoSe 15 Objektorientierte Softwareentwicklung SoSe 15 Heinz Faßbender Raum E148 Tel. 0241/6009 51913 Email: fassbender@fh-aachen.de www.fassbender.fh-aachen.de FH AACHEN UNIVERSITY OF APPLIED SCIENCES FACHBEREICH

Mehr

Ajax & GWT. Kurs: User Interfaces und ihre Evaluierung Dozent: Manfred Thaller WS 2012/2013 Referent: Rafael Kalina

Ajax & GWT. Kurs: User Interfaces und ihre Evaluierung Dozent: Manfred Thaller WS 2012/2013 Referent: Rafael Kalina Ajax & GWT Kurs: User Interfaces und ihre Evaluierung Dozent: Manfred Thaller WS 2012/2013 Referent: Rafael Kalina Ajax Technisches Verfahren, bei dem Browser aktualisierte Inhalte nicht mehr synchron

Mehr

JAVA. Ein kurzer Überblick. Thomas Karp

JAVA. Ein kurzer Überblick. Thomas Karp JAVA Ein kurzer Überblick Thomas Karp WAS IST JAVA? Java ist eine fast rein objektorientierte Sprache nicht JavaScript eine professionelle Sprache eine im Unterricht weit verbreitete Sprache für verschiedene

Mehr

Programmieren I. Die Programmiersprache Java. www.kit.edu. Institut für Angewandte Informatik

Programmieren I. Die Programmiersprache Java. www.kit.edu. Institut für Angewandte Informatik Programmieren I Die Programmiersprache Java KIT Universität des Landes Baden-Württemberg und nationales Großforschungszentrum in der Helmholtz-Gemeinschaft www.kit.edu Eigenschaften von Java Java ist eine

Mehr

Userhandbuch. Version B-1-0-2 M

Userhandbuch. Version B-1-0-2 M Userhandbuch Version B-1-0-2 M Inhaltsverzeichnis 1.0 Was bietet mir SERVRACK?... 3 1.1 Anmeldung... 3 1.2 Passwort vergessen?... 3 1.3 Einstellungen werden in Realtime übernommen... 4 2.0 Die SERVRACK

Mehr

Benutzerhandbuch. Gästebuch Software - YellaBook v1.0 http://www.yellabook.de. Stand: 01.08.2012. by YellaBook.de - Alle Rechte vorbehalten.

Benutzerhandbuch. Gästebuch Software - YellaBook v1.0 http://www.yellabook.de. Stand: 01.08.2012. by YellaBook.de - Alle Rechte vorbehalten. Benutzerhandbuch Gästebuch Software - YellaBook v1.0 http://www.yellabook.de Stand: 01.08.2012 Inhalt 1 Funktionen... 3 2 Systemanforderungen... 4 3 Installation... 4 4 Einbinden des Gästebuchs... 5 5

Mehr

Remote Communications

Remote Communications HELP.BCFESDEI Release 4.6C SAP AG Copyright Copyright 2001 SAP AG. Alle Rechte vorbehalten. Weitergabe und Vervielfältigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher

Mehr

Apollo Überblick. Klaus Kurz. Manager Business Development. 2007 Adobe Systems Incorporated. All Rights Reserved.

Apollo Überblick. Klaus Kurz. Manager Business Development. 2007 Adobe Systems Incorporated. All Rights Reserved. Apollo Überblick Klaus Kurz Manager Business Development 1 Was ist Apollo? Apollo ist der Codename für eine plattformunabhängige Laufzeitumgebung, entwickelt von Adobe, die es Entwicklern ermöglicht ihre

Mehr

http://www.nvu-composer.de

http://www.nvu-composer.de Kapitel 16 Seite 1 Ein portabler Web-Editor Wer viel Zeit in eine Website investieren will ist gut beraten, eine professionelle Software für Webdesigner zu beschaffen. Diese Programme sind sehr leistungsfähig,

Mehr

Grundsätzliche Struktur und Entwurfsprinzipien des Gesamtsystems. Grundsätzliche Struktur und Entwurfsprinzipien der einzelnen Pakete

Grundsätzliche Struktur und Entwurfsprinzipien des Gesamtsystems. Grundsätzliche Struktur und Entwurfsprinzipien der einzelnen Pakete Allgemeines 2 Produktübersicht 2 Grundsätzliche Struktur und Entwurfsprinzipien des Gesamtsystems 3 Grundsätzliche Struktur und Entwurfsprinzipien der einzelnen Pakete Account-Verwaltung 5 Freund-Funktionen

Mehr

Die Unternehmensseite im Internet - pflegen ohne Programmierkenntnisse. Felix Kopp

Die Unternehmensseite im Internet - pflegen ohne Programmierkenntnisse. Felix Kopp Die Unternehmensseite im Internet - pflegen ohne Programmierkenntnisse Felix Kopp Orientierung Veröffentlichen und Aktualisieren ohne Programmierkenntnisse Bestehende Internet-Seite aktualisieren. oder

Mehr

Erstellung eines SharkNet Installers für Windows mit Inno Setup Compiler 5.4.2

Erstellung eines SharkNet Installers für Windows mit Inno Setup Compiler 5.4.2 Erstellung eines SharkNet Installers für Windows mit Inno Setup Compiler 5.4.2 1. Benötigte Software Zur Erstellung des Installers wird folgende Software benötigt. Es wird sich in dieser Dokumentation

Mehr

Einführung... 1 Anwendungsszenarien multimedialer Client-Server Systeme... 1 Aufbau des Buches... 2 Die Entwicklung des multimedialen Internets...

Einführung... 1 Anwendungsszenarien multimedialer Client-Server Systeme... 1 Aufbau des Buches... 2 Die Entwicklung des multimedialen Internets... Inhaltsverzeichnis Einführung... 1 Anwendungsszenarien multimedialer Client-Server Systeme...... 1 Aufbau des Buches..... 2 Die Entwicklung des multimedialen Internets..... 4 1 Multimediale Client-Server-Systeme...

Mehr

Einführung zu den Übungen aus Softwareentwicklung 1

Einführung zu den Übungen aus Softwareentwicklung 1 Einführung zu den Übungen aus Softwareentwicklung 1 Dipl.-Ing. Andreas Riener Universität Linz, Institut für Pervasive Computing Altenberger Straße 69, A-4040 Linz riener@pervasive.jku.at SWE 1 // Organisatorisches

Mehr

Sachwortverzeichnis... 251

Sachwortverzeichnis... 251 Inhalt Vorwort... V 1 WWW World Wide Web... 1 1.1 Das Internet Infrastruktur und Administration... 2 1.2 Datenübertragung... 4 1.3 Sprachen im Web... 6 1.4 Webseiten... 7 1.4.1 Clientseitige Dynamik...

Mehr

Dynamische Webseiten mit PHP 1

Dynamische Webseiten mit PHP 1 Dynamische Webseiten mit PHP 1 Webserver, PHP und MYSQL Ein Webserver dient dazu, Internetseiten an PCs zu senden, von denen sie aufgerufen werden. Beispiel: Sie tippen im Browser www.fosbosweiden.de ein.

Mehr

3 Anwendungsarchitektur und Entwicklungsumgebung

3 Anwendungsarchitektur und Entwicklungsumgebung 21 3 Anwendungsarchitektur und Bei den Entwicklern von Web-basierten Dialogsystemen hat sich im Laufe der Zeit eine Vorgehensweise im Design von Anwendungen entwickelt, dies es ermöglicht, flexible Web-Dialoge

Mehr

Einsatz von Applikationsservern. Untersucht am Beispiel des Sybase Enterprise Application Server

Einsatz von Applikationsservern. Untersucht am Beispiel des Sybase Enterprise Application Server Einsatz von Applikationsservern Untersucht am Beispiel des Sybase Enterprise Application Server Architektur von Datenbanksystemen Client / Server Modell (2 Schichten Modell) Benutzerschnittstelle Präsentationslogik

Mehr

Script-Sprache für UPT und MKT-View II / III / IV. Einleitung, Anwendungsfälle, Programmierung. MKT Systemtechnik

Script-Sprache für UPT und MKT-View II / III / IV. Einleitung, Anwendungsfälle, Programmierung. MKT Systemtechnik Einleitung, Anwendungsfälle, Programmierung MKT Systemtechnik Autor: Stand: Ablage: Wolfgang Büscher Dipl.-Ing. Soft- und Hardware-Entwicklung buescher@mkt-sys.de 2015-01-21 (JJJJ-MM-DD) art85133_einfuehrung_mktview_scriptsprache.odp/pdf;

Mehr

WPF. Übersicht. Komponenten & Frameworks Seite 1

WPF. Übersicht. Komponenten & Frameworks Seite 1 Übersicht - W indows P resentation F oundation - Werkzeug zur Entwicklung grafischer Benutzeroberflächen - deklarative Definition erfolgt mit der Beschreibungs- Sprache: XAML - XAML - Extensible Application

Mehr

TYPO3 Schritt für Schritt - Einführung für Redakteure

TYPO3 Schritt für Schritt - Einführung für Redakteure TYPO3 Version 4.0 Schritt für Schritt Einführung für Redakteure zeitwerk GmbH Basel - Schweiz http://www.zeitwerk.ch ++4161 383 8216 TYPO3_einfuehrung_redakteure.pdf - 07.07.2006 TYPO3 Schritt für Schritt

Mehr

2D22 Prinzipien der Softwareentwicklung. Prinzipien der Softwareentwicklung S. Strahringer 1

2D22 Prinzipien der Softwareentwicklung. Prinzipien der Softwareentwicklung S. Strahringer 1 2D22 1 Inhalte der Lehrveranstaltung Einführung in die Programmierung mit PHP Literatur: Theis, Thomas (2010): Einstieg in PHP 5.3 und MySQL 5.4. [für Programmieranfänger geeignet]. 6., aktualisierte Aufl.

Mehr

1. Einführung... 1 2. Eigenschaften... 2 2.1. Einsatzszenarien... 2 2.1.1. Externes Benutzer-Management... 2 2.1.2. Synchronisation von Konten,

1. Einführung... 1 2. Eigenschaften... 2 2.1. Einsatzszenarien... 2 2.1.1. Externes Benutzer-Management... 2 2.1.2. Synchronisation von Konten, OUTDOOR webservices 1. Einführung... 1 2. Eigenschaften... 2 2.1. Einsatzszenarien... 2 2.1.1. Externes Benutzer-Management... 2 2.1.2. Synchronisation von Konten, Kostenstellen oder Kostenträgern... 2

Mehr

Installation Anleitung für JTheseus und MS SQL Server 2000

Installation Anleitung für JTheseus und MS SQL Server 2000 Installation Anleitung für JTheseus und MS SQL Server 2000 Inhaltsverzeichnis 1 Installation der Datenbank 3 1.1 Erstellen der Datenbank 3 1.2 Tabellen und Minimal Daten einlesen 4 1.3 Benutzer JTheseus

Mehr

Visual Web Developer Express Jam Sessions

Visual Web Developer Express Jam Sessions Visual Web Developer Express Jam Sessions Teil 1 Die Visual Web Developer Express Jam Sessions sind eine Reihe von Videotutorials, die Ihnen einen grundlegenden Überblick über Visual Web Developer Express,

Mehr

1 Installationen. 1.1 Installationen unter Windows

1 Installationen. 1.1 Installationen unter Windows 1 Installationen Dieses Kapitel beschreibt die Installationen, die für die Nutzung von PHP und MySQL unter Windows, unter Ubuntu Linux und auf einem Mac mit OS X notwendig sind. 1.1 Installationen unter

Mehr

Die Visualisierung des HomeServers bietet die Möglichkeit, Grundrisspläne oder Bilder zu integrieren und Bedienelemente frei zu gestalten.

Die Visualisierung des HomeServers bietet die Möglichkeit, Grundrisspläne oder Bilder zu integrieren und Bedienelemente frei zu gestalten. Visualisierung anlegen und testen (Neu!!! Dezember 200!!!) HomeServer/ FacilityServer Visualisierung anlegen und testen Einleitung: Die Visualisierung des HomeServers bietet die Möglichkeit, Grundrisspläne

Mehr

Inhaltsverzeichnis. Hinweise zum Gebrauch des Buches... XIII. Teil I Grundlagen der Web-Programmierung

Inhaltsverzeichnis. Hinweise zum Gebrauch des Buches... XIII. Teil I Grundlagen der Web-Programmierung Hinweise zum Gebrauch des Buches... XIII Teil I Grundlagen der Web-Programmierung 1 Entwicklung der Web-Programmierung... 3 1.1 DerWegzumWorldWideWeb... 3 1.2 Komponenten der frühen Technik..... 5 1.3

Mehr

DESIGN & DEVELOPMENT. TYPO3 Basics

DESIGN & DEVELOPMENT. TYPO3 Basics DESIGN & DEVELOPMENT TYPO3 Basics 1 Einleitung / Inhalt 2 / 21 Einleitung Dieses Dokument weist Sie durch die Funktion des Open Source CMS TYPO3. In wenigen, einfachen Schritten wird Ihnen bebildert erklärt,

Mehr

Apache HTTP-Server Teil 2

Apache HTTP-Server Teil 2 Apache HTTP-Server Teil 2 Zinching Dang 04. Juli 2014 1 Benutzer-Authentifizierung Benutzer-Authentifizierung ermöglicht es, den Zugriff auf die Webseite zu schützen Authentifizierung mit Benutzer und

Mehr

scmsp SMARTES Content-Management-System Bestimmtes kann und das dafür sehr gut. Bei der Konzeption des blockcms stand die Einfachheit im Vordergrund:

scmsp SMARTES Content-Management-System Bestimmtes kann und das dafür sehr gut. Bei der Konzeption des blockcms stand die Einfachheit im Vordergrund: scmsp SMARTES Content-Management-System blockcms steht für Block Content Management System Wir brauchen kein CMS, das alles kann, sondern eines, das nur Bestimmtes kann und das dafür sehr gut. Bei der

Mehr

Einführung in die Cross-Plattform Entwicklung Das Intel XDK

Einführung in die Cross-Plattform Entwicklung Das Intel XDK Einführung in die Cross-Plattform Entwicklung Das Intel XDK Einführung Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel XDK vertraut. Es wird Schritt für Schritt die erste eigene Hybrid-App entwickelt

Mehr

Dynamische Webseiten

Dynamische Webseiten Dynamische Webseiten Seminar Medientechnik 30.06.2003 Dynamische Webseiten 1 Inhalt Allgemeine Funktionsweise eines Webservers Grundgedanke von dynamischen Webseiten Einschub: Dynamische Seitenerzeugung

Mehr

Content-Management- Systeme (CMS) Inhaltsverwaltungssystem, Redaktionssystem

Content-Management- Systeme (CMS) Inhaltsverwaltungssystem, Redaktionssystem Content-Management- Systeme (CMS) Inhaltsverwaltungssystem, Redaktionssystem Inhalt Content Management (CM) Allgemeines über CMS CMS Typen Open Source vs. Lizenzsoftware Joomla! Quellen Content Management

Mehr

IKONIZER II Installation im Netzwerk

IKONIZER II Installation im Netzwerk Der IKONIZER II ist netzwerkfähig in allen bekannten Netzwerken. Da jedoch etwa 95% der Installationen lokal betrieben werden, erfolgt diese grundsätzlich sowohl für das Programm wie auch für den lizenzfreien

Mehr

Herzlich willkommen im Modul Web-Engineering

Herzlich willkommen im Modul Web-Engineering Herbst 2014 Herzlich willkommen im Modul Web-Engineering Wirtschaftsinformatik: 5. Semester Dozenten: Rainer Telesko / Martin Hüsler Fachhochschule Nordwestschweiz FHNW / Martin Hüsler und Rainer Telesko

Mehr

FTP / WebDeploy / WebDAV. Handbuch

FTP / WebDeploy / WebDAV. Handbuch Handbuch August 2015, Copyright Webland AG 2015 Inhalt Einführung FTP WebDeploy WebDAV Anleitungen FTP Windows Mac WebDeploy Windows WebDAV Windows Mac Einführung FTP Haben Sie einen Zugang per FTP gewählt,

Mehr

Ohne Technik kein Online-Journalismus

Ohne Technik kein Online-Journalismus Ohne Technik kein Online-Journalismus von Frank Niebisch, Redakteur für Technologie- und Medien-Themen ECONOMY.ONE AG - Verlagsgruppe Handelsblatt Online. f.niebisch@t-online.de 0173/2934640 Bochum, 15.05.2002

Mehr

RÖK Typo3 Dokumentation

RÖK Typo3 Dokumentation 2012 RÖK Typo3 Dokumentation Redakteur Sparten Eine Hilfe für den Einstieg in Typo3. Innpuls Werbeagentur GmbH 01.01.2012 2 RÖK Typo3 Dokumentation Inhalt 1) Was ist Typo3... 3 2) Typo3 aufrufen und Anmelden...

Mehr

Hello World in Java. Der Weg zum ersten Java-Programm

Hello World in Java. Der Weg zum ersten Java-Programm Vorwort Hello World in Java Der Weg zum ersten Java-Programm Diese Anleitung wurde unter Windows XP verfasst. Grundsätzlich sollte sie auch unter späteren Windows Versionen wie Windows Vista oder Windows

Mehr

SmartExporter 2013 R1

SmartExporter 2013 R1 Die aktuelle Version wartet mit zahlreichen neuen Features und umfangreichen Erweiterungen auf. So können mit SmartExporter 2013 R1 nun auch archivierte Daten extrahiert und das Herunterladen der Daten

Mehr

Christian Kurz SWT Projekt WS 07/08

Christian Kurz SWT Projekt WS 07/08 Christian Kurz SWT Projekt WS 07/08 1. Allgemeine Aspekte der generativen GUI- Entwicklung 2. Entwicklung mit Hilfe von GUI-Designern 3. Entwicklung mit Hilfe deklarativer GUI- Sprachen 4. Modellgetriebene

Mehr

Spezifikationen und Voraussetzung

Spezifikationen und Voraussetzung Projekt IGH DataExpert Yellowbill Adapter Spezifikationen Voraussetzungen Datum : 22.08.2013 Version : 1.0.0.2 22.08.2013 Seite 1 von 7 Inhaltsverzeichnis 1 Einleitung...3 2 Architektur...3 2.1 Grundsätze

Mehr

VWA Rhein-Neckar Dipl.-Ing. Thomas Kloepfer. Kommunikation I (Internet) Übung 4 PHP

VWA Rhein-Neckar Dipl.-Ing. Thomas Kloepfer. Kommunikation I (Internet) Übung 4 PHP VWA Rhein-Neckar Dipl.-Ing. Thomas Kloepfer Kommunikation I (Internet) Übung 4 PHP SS 2004 Inhaltsverzeichnis 1. PHP die serverseitige Programmiersprache...1 1.1. PHP - Bereiche in HTML definieren...1

Mehr

Einführung in die Cross-Plattform Entwicklung Das Intel App Framework

Einführung in die Cross-Plattform Entwicklung Das Intel App Framework Einführung in die Cross-Plattform Entwicklung Das Intel App Framework Einführung Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel App Framework vom Intel XDK vertraut. Es wird Schritt für Schritt

Mehr

Publizieren von Webs mit SmartFTP

Publizieren von Webs mit SmartFTP Publizieren von Webs mit SmartFTP Informationen FTP steht für File Transfer Protocol. Ein Protokoll ist eine Sprache, die es Computern ermöglicht, miteinander zu kommunizieren. FTP ist das Standardprotokoll

Mehr

AJAX SSL- Wizard Referenz

AJAX SSL- Wizard Referenz AJAX SSL- Wizard Referenz Version 1.0.2+ - 04.04.2011 Präambel Die vorliegende Dokumentation beschreibt den AJAX basierten SSL- Wizard der CertCenter AG. Der SSL- Wizard kann mit wenigen Handgriffen nahtlos

Mehr

HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 1. Ausgabe, Dezember 2011 HTML5

HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 1. Ausgabe, Dezember 2011 HTML5 Linda York, Tina Wegener HTML5 Grundlagen der Erstellung von Webseiten 1. Ausgabe, Dezember 2011 HTML5 2 HTML5 - Grundlagen der Erstellung von Webseiten 2 Die erste Webseite mit HTML erstellen In diesem

Mehr

PHP Kurs Online Kurs Analysten Programmierer Web PHP

PHP Kurs Online Kurs Analysten Programmierer Web PHP PHP Kurs Online Kurs Analysten Programmierer Web PHP Akademie Domani info@akademiedomani.de Allgemeines Programm des Kurses PHP Modul 1 - Einführung und Installation PHP-Umgebung Erste Lerneinheit Introduzione

Mehr

Was ist MODX Revolution?

Was ist MODX Revolution? FACT SHEET 1 Was ist MODX Revolution? MODX ist ein Content Management System (CMS) und ein Applikations-Framework. MODX ist schon seit der Version Evolution ein Open Source Projekt und wird dank einer

Mehr

Erstellung eines Frameworks für Shop Systeme im Internet auf Basis von Java

Erstellung eines Frameworks für Shop Systeme im Internet auf Basis von Java Erstellung eines Frameworks für Shop Systeme im Internet auf Basis von Java Präsentation zur Diplomarbeit von Übersicht Java 2 Enterprise Edition Java Servlets JavaServer Pages Enterprise JavaBeans Framework

Mehr

Installation und Dokumentation. juris Autologon 3.1

Installation und Dokumentation. juris Autologon 3.1 Installation und Dokumentation juris Autologon 3.1 Inhaltsverzeichnis: 1. Allgemeines 3 2. Installation Einzelplatz 3 3. Installation Netzwerk 3 3.1 Konfiguration Netzwerk 3 3.1.1 Die Autologon.ini 3 3.1.2

Mehr

Client/Server-Systeme

Client/Server-Systeme Fachbereich Informatik Projektgruppe KOSI Kooperative Spiele im Internet Client/Server-Systeme Vortragender Jan-Ole Janssen 26. November 2000 Übersicht Teil 1 Das Client/Server-Konzept Teil 2 Client/Server-Architekturen

Mehr

crm-now/ps Anwenderhandbuch für die Thunderbird Erweiterung Zweite Ausgabe

crm-now/ps Anwenderhandbuch für die Thunderbird Erweiterung Zweite Ausgabe crm-now/ps Anwenderhandbuch für die Thunderbird Erweiterung Zweite Ausgabe crm-now/ps: Copyright 2006 crm-now Versionsgeschichte Version 02 08.09.2006 Release Version Version 01 16.06.2005 crm-now c/o

Mehr

Präsentation. homevisu Familie. Peter Beck. Juni 2011. www.p-b-e.de. 2011 p b e Peter Beck 1

Präsentation. homevisu Familie. Peter Beck. Juni 2011. www.p-b-e.de. 2011 p b e Peter Beck 1 Präsentation homevisu Familie Peter Beck Juni 2011 2011 p b e Peter Beck 1 Funktionensumfang Der Funktionsumfang das provisu Framework. Modular und durch Plug-In erweiterbar / anpassbar. Plug-In Schnittstelle

Mehr

neximage DHTML Image Editor

neximage DHTML Image Editor product information http://www.neximage.com Idee, Konzept, Design, Umsetzung by nexbyte gmbh product profile neximage ist eine Bildbearbeitungssoftware, die für den Einsatz im Webbrowser konzipiert wurde.

Mehr

:: Anleitung Demo Benutzer 1cloud.ch ::

:: Anleitung Demo Benutzer 1cloud.ch :: :: one source ag :: Technopark Luzern :: D4 Platz 4 :: CH-6039 Root-Längenbold LU :: :: Fon +41 41 451 01 11 :: Fax +41 41 451 01 09 :: info@one-source.ch :: www.one-source.ch :: :: Anleitung Demo Benutzer

Mehr

Web 2.0 Software-Architekturen

Web 2.0 Software-Architekturen Web 2.0 Software-Architekturen Servlets als Controller einer MVC Web Architektur Prof. Dr. Nikolaus Wulff HTTP und HTML Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose Kommunikation,

Mehr

Programmierkurs Java. Grundlagen. Prof. Dr. Stefan Fischer Institut für Telematik, Universität zu Lübeck http://www.itm.uni-luebeck.

Programmierkurs Java. Grundlagen. Prof. Dr. Stefan Fischer Institut für Telematik, Universität zu Lübeck http://www.itm.uni-luebeck. Programmierkurs Java Grundlagen Prof. Dr. Stefan Fischer Institut für Telematik, Universität zu Lübeck http://www.itm.uni-luebeck.de/people/fischer #2 Algorithmen, Maschinen- und Programmiersprachen Algorithmen

Mehr

Benutzerhandbuch Edith-Aktuelles

Benutzerhandbuch Edith-Aktuelles Benutzerhandbuch Edith-Aktuelles Den eigenen Internetauftritt verwalten so geht s! Eine Orientierungshilfe der NetzWerkstatt Programmierung: Die NetzWerkstatt GbR Geschäftsführer: Dirk Meinke und Sven

Mehr

Professionelle Rich-Client-Lösungen mit Flex und Java

Professionelle Rich-Client-Lösungen mit Flex und Java Florian Müller Professionelle Rich-Client-Lösungen mit Flex und Java Web-Applikationen mit Flex-Frontend, Java-Backend und BlazeDS j-'w% ^ ADDISON-WESLEY An imprint of Pearson Education München Boston

Mehr

Spezifikationen und Voraussetzung

Spezifikationen und Voraussetzung Projekt IGH DataExpert Paynet Adapter Spezifikationen Voraussetzungen Datum : 21.07.08 Version : 1.0.0.2 21.07.2008 Seite 1 von 7 Inhaltsverzeichnis 1 Einleitung... 3 2 Architektur... 3 2.1 Grundsätze

Mehr

Giftige Akzeptanztests?

Giftige Akzeptanztests? Giftige Akzeptanztests? Webanwendungen mit Selenium testen Björn Eilers 04.07.2007 06.07.2007 Testen von Weboberflächen mit Selenium 1 viadee Unternehmensberatung GmbH Gründung 1994 Firmenstandorte Münster

Mehr

HILFE Datei. UPC Online Backup

HILFE Datei. UPC Online Backup HILFE Datei UPC Online Backup Inhalt Login Screen......? Welcome Screen:......? Manage Files Screen:...? Fotoalbum Screen:.........? Online backup Client Screen...? Frequently Asked Questions (FAQ s)...?

Mehr

CaseWare Monitor. ProduktNEWS CaseWare Monitor. Version 4.3. Mehr Informationen zu CaseWare Monitor und unseren anderen Produkten & Dienstleistungen

CaseWare Monitor. ProduktNEWS CaseWare Monitor. Version 4.3. Mehr Informationen zu CaseWare Monitor und unseren anderen Produkten & Dienstleistungen Mit der aktuellen Version hält eine komplett neu konzipierte webbasierte Anwendung Einzug, die sich neben innovativer Technik auch durch ein modernes Design und eine intuitive Bedienung auszeichnet. Angefangen

Mehr

Der Website-Generator

Der Website-Generator Der Website-Generator Der Website-Generator im Privatbereich gibt Ihnen die Möglichkeit, schnell eine eigene Website in einheitlichem Layout zu erstellen. In Klassen, Gruppen und Institutionen können auch

Mehr

Web und Mobile Apps Programmieren mit Dart

Web und Mobile Apps Programmieren mit Dart Web und Mobile Apps Programmieren mit Dart Marco Jakob Kalaidos Fachhochschule Schweiz majakob@gmx.ch Abstract: Bisher war es kaum realistisch, im Anfängerunterricht mobile oder webbasierte Applikationen

Mehr

Einleitung: Frontend Backend

Einleitung: Frontend Backend Die Internetseite des LSW Deutschland e.v. hat ein neues Gesicht bekommen. Ab dem 01.01.2012 ist sie in Form eines Content Management Systems (CMS) im Netz. Einleitung: Die Grundlage für die Neuprogrammierung

Mehr

ESB - Elektronischer Service Bericht

ESB - Elektronischer Service Bericht Desk Software & Consulting GmbH ESB - Elektronischer Service Bericht Dokumentation des elektronischen Serviceberichts Matthias Hoffmann 25.04.2012 DESK Software und Consulting GmbH Im Heerfeld 2-4 35713

Mehr

E-Commerce: IT-Werkzeuge. Web-Programmierung. Kapitel 4: Einführung in JavaScript Stand: 03.11.2014. Übung WS 2014/2015. Benedikt Schumm M.Sc.

E-Commerce: IT-Werkzeuge. Web-Programmierung. Kapitel 4: Einführung in JavaScript Stand: 03.11.2014. Übung WS 2014/2015. Benedikt Schumm M.Sc. Übung WS 2014/2015 E-Commerce: IT-Werkzeuge Web-Programmierung Kapitel 4: Stand: 03.11.2014 Benedikt Schumm M.Sc. Lehrstuhl für ABWL und Wirtschaftsinformatik Katholische Universität Eichstätt-Ingolstadt

Mehr

Handbuch zu AS Connect für Outlook

Handbuch zu AS Connect für Outlook Handbuch zu AS Connect für Outlook AS Connect für Outlook ist die schnelle, einfache Kommunikation zwischen Microsoft Outlook und der AS Datenbank LEISTUNG am BAU. AS Connect für Outlook Stand: 02.04.2013

Mehr

bnsyncservice Installation und Konfiguration bnnetserverdienst Voraussetzungen: KWP Informationssysteme GmbH Technische Dokumentation

bnsyncservice Installation und Konfiguration bnnetserverdienst Voraussetzungen: KWP Informationssysteme GmbH Technische Dokumentation bnsyncservice Voraussetzungen: Tobit DAVID Version 12, DVWIN32: 12.00a.4147, DVAPI: 12.00a.0363 Exchange Server (Microsoft Online Services) Grundsätzlich wird von Seiten KWP ausschließlich die CLOUD-Lösung

Mehr

KURZANLEITUNG CYBERDUCK MIT CLOUD OBJECT STORAGE

KURZANLEITUNG CYBERDUCK MIT CLOUD OBJECT STORAGE KURZANLEITUNG CYBERDUCK MIT CLOUD OBJECT STORAGE Version 1.12 01.07.2014 SEITE _ 2 INHALTSVERZEICHNIS 1. Einleitung...Seite 03 2. Zugriff auf Cloud Object Storage mit Cyberduck...Seite 04 3. Neuen Container

Mehr

Modul 2.4.1: Möglichkeiten zur Erweiterung des Internet-Auftritts der Schule zu einem umfassenden Auftritt als Bildungsnetzwerk

Modul 2.4.1: Möglichkeiten zur Erweiterung des Internet-Auftritts der Schule zu einem umfassenden Auftritt als Bildungsnetzwerk Informationsmaterial zum Modul-Nr. 2.4: Bildungsnetzwerke planen (Schwerpunkt: IT-Unterstützung in Bildungsnetzwerken) Modul 2.4.1: Möglichkeiten zur Erweiterung des Internet-Auftritts der Schule zu einem

Mehr

TYPO3 Redaktoren-Handbuch

TYPO3 Redaktoren-Handbuch TYPO3 Redaktoren-Handbuch Kontakt & Support: rdv interactive ag Arbonerstrasse 6 9300 Wittenbach Tel. 071 / 577 55 55 www.rdvi.ch Seite 1 von 38 Login http://213.196.148.40/typo3 Username: siehe Liste

Mehr

VB.net Programmierung und Beispielprogramm für GSV

VB.net Programmierung und Beispielprogramm für GSV VB.net Programmierung und Beispielprogramm für GSV Dokumentation Stand vom 26.05.2011 Tel +49 (0)3302 78620 60, Fax +49 (0)3302 78620 69, info@me-systeme.de, www.me-systeme.de 1 Inhaltsverzeichnis Vorwort...2

Mehr

Integrating Architecture Apps for the Enterprise

Integrating Architecture Apps for the Enterprise Integrating Architecture Apps for the Enterprise Ein einheitliches Modulsystem für verteilte Unternehmensanwendungen Motivation und Grundkonzept Inhalt Problem Ursache Herausforderung Grundgedanke Architektur

Mehr

CloudMatic V1.0. Inhalt

CloudMatic V1.0. Inhalt CloudMatic V1.0 Inhalt Einleitung... 2 CCUs hinzufügen... 3 meine-homematic.de... 4 Eigenes VPN... 4 View Editor... 5 Übersicht... 5 Allgemeine Einstellungen... 6 Kanäle hinzufügen... 6 Spezielle Kanäle...

Mehr

Kurzanleitung zur Pflege Ihrer Webseiten

Kurzanleitung zur Pflege Ihrer Webseiten Kurzanleitung zur Pflege Ihrer Webseiten Über FTP / File Transfer Protokoll (Datei Up- and Download) oder Online-Datei-Verwaltung Iher Dateien per Web-Browser Tipp s und Wissenswertes für alle die mit

Mehr

JE Web Services. Hinweise. Beschreibung. Doku.-Version: 1.0 Letzte Änderung: 02.02.2011

JE Web Services. Hinweise. Beschreibung. Doku.-Version: 1.0 Letzte Änderung: 02.02.2011 Beschreibung Hinweise Doku.-Version: 1.0 Letzte Änderung: 02.02.2011 http://www.jacob-computer.de/kontakt.html software@jacob-elektronik.de Inhaltsverzeichnis 1. Inhaltsverzeichnis Hinweise... 1 1. Inhaltsverzeichnis...

Mehr

BeWoPlaner Kurzanleitung

BeWoPlaner Kurzanleitung BeWoPlaner Kurzanleitung Hochstadenstr. 1-3 50674 Köln fon +49 221 606052-0 fax +49 221 606052-29 E-Mail: info@beyondsoft.de Seite 1 Inhaltsverzeichnis Installation des BeWoPlaners...3 Erster Start...3

Mehr

Hinweise zu A-Plan 2009 SQL

Hinweise zu A-Plan 2009 SQL Hinweise zu A-Plan 2009 SQL Für Microsoft Windows Copyright Copyright 2008 BRainTool Software GmbH Inhalt INHALT 2 EINLEITUNG 3 WAS IST A-PLAN 2009 SQL? 3 WANN SOLLTE A-PLAN 2009 SQL EINGESETZT WERDEN?

Mehr

Der Editor und seine Funktionen

Der Editor und seine Funktionen Der Editor und seine Funktionen Für die Eingabe und Änderung von Texten steht Ihnen im Pflegemodus ein kleiner WYSIWYG-Editor zur Verfügung. Tinymce 1 ist ein Open Source Javascript-Editor, der mittlerweile

Mehr

KURZANLEITUNG CLOUD BLOCK STORAGE

KURZANLEITUNG CLOUD BLOCK STORAGE KURZANLEITUNG CLOUD BLOCK STORAGE Version 1.12 01.07.2014 SEITE _ 2 INHALTSVERZEICHNIS 1. Einleitung......Seite 03 2. Anlegen eines dauerhaften Block Storage...Seite 04 3. Hinzufügen von Block Storage

Mehr