Konzeption und prototypische Realisierung eines webbasierten Videomanagement- und Videoanalysesystems als Rich Internet Applikation

Transkript

1 Konzeption und prototypische Realisierung eines webbasierten Videomanagement- und Videoanalysesystems als Rich Internet Applikation Diplomarbeit Universität Tübingen Wilhelm-Schickard-Institut für Informatik Lehr- und Forschungsbereich Graphisch-Interaktive Systeme von Gregor Hyneck Betreuer: Jun. Prof. Dr. Gottfried Zimmermann vorgelegt am: 31. März 2011

2 ii

3 Erklärung 1. Ich erkläre hiermit, dass ich diese Diplomarbeit selbständig verfasst, noch nicht anderweitig für andere Prüfungszwecke vorgelegt, keine anderen als die angegebenen Quellen und Hilfsmittel benützt sowie wörtliche und sinngemäße Zitate als solche gekennzeichnet habe. Tübingen, den

4 iv

5 Inhaltsverzeichnis Erklärung iii 1 Einleitung Motivation Zielsetzung Gliederung Grundlagen HTML Video Attribute Dateiformate Zeichenfläche Nachteile Javascript Ajax JSON Content-Management-System Web 2.0 und Social Software Inhaltstypen Erstellung eigener Inhaltstypen Erweiterung mit Modulen Vorhandene Funktionen überschreiben Das Design anpassen Ergonomie der Mensch-System-Interaktion Das Konzept der Gebrauchtstauglichkeit Grundsätze der Dialoggestaltung Die Grundsätze der Dialoggestaltung prüfen Analyse Definition und Analyse der Zielgruppe Analyse der Aufgabe Arbeitsablauf Videoupload Kommentare erstellen Kommentare ansehen Erweiterte Videosteuerung Freigabe Schlagworte

6 vi Inhaltsverzeichnis 3.3 Analyse des Nutzungskontextes Existierende Videoanalysesoftware WebDiver Kinovea Utilius vs Dartfish youtube.com bettersports.eu kaltura.com Design Erstellung der Inhalte Synchronisation der Kommentare Wahl des CMS Implementierung Prototyp Erste Implementierung mit Drupal Videowiedergabe Dateiformate Anlegen eines neuen Inhaltstyps Kommentare Erstellung Datenstruktur Zeichenfunktionen Anzeige Taxonomie Rechtemanagement und Gruppen Theme Sicherheit Performance Evaluation Gebrauchstauglichkeit Studienablauf und Untersuchungsmethoden Studienpopulation Zielkriterien und statistische Auswertung Auswertung der ersten Stufe des Benutzertests Änderungen am Videoanalysesystem Auswertung der zweiten Stufe des Benutzertests Zusammenfassung Ergebnisse Ausblick und weiterer Ausbau A Datenstrukturen 65 B Screenshots und Videokonvertierung 67 C Zielgruppenspezifische Entwicklung und Evaluation 69

7 Inhaltsverzeichnis vii C.1 Prüfplan für den Benutzertest C.1.1 Grundlagen, zusammenfassende Beschreibung C.1.2 Ziele der Studie C.1.3 Studiendauer (für einzelne Probanden und insgesamt) C.1.4 Studienpopulation C.1.5 Studienablauf und Untersuchungsmethoden C.1.6 Datenschutz C.1.7 Aufklärungstext und Einverständniserklärung C.2 Aufgabenstellung für den Benutzertest C.2.1 Vorabinformationen C.2.2 Aufgabenstellung C.3 Teilnehmerinformationen für den Benutzertest C.4 ISONORM-Fragebogen C.5 Personas

8 viii Inhaltsverzeichnis

9 Abbildungsverzeichnis 2.1 Schematischer Ablauf einer normalen-webanwendung. Frei nach Koch (2009, S.334) Schematischer Ablauf einer Ajax-Webanwendung. Frei nach Koch (2009, S.335) Definition eines neuen Inhaltstyps Person Beispiel für Hooks in Drupal. Frei nach VanDyk (2009, S.155) Template Hierarchie in Drupal. Aus Tomlinson und VanDyk (2009, S.199) Klassischer Arbeitsablauf bei der Videoanalyse Arbeitsablauf bei der webbasierten Videoanalyse Hierarchisches Task-Model für die Erstellung einer Analyse mit dem webbasierten Videoanalysesystem Erstellen einer Anmerkung auf Erstellen eines Kommentars mit dem HTML5 Prototyp Listenansicht der Kommentare mit dem HTML5 Prototyp Verbesserungsvorschlag im Layout als Resultat des Prototyps Erstellung eines Kommentars für einen Inhalt vom Typ html5videoplayer Anzeige der Kommentare während dem Abspielen des Videos Implementierung des Rollenkonzepts für den Inhaltstyp html5videoplayer Auswahl der Gruppenzuordnung für die Anzeige eines Inhalts vom Typ html5videoplayer Beurteilung der Aufgabenangemessenheit bei der ersten Stufe des Benutzertests Beurteilung der Selbstbeschreibungsfähigkeit bei der ersten Stufe des Benutzertests

10 x Abbildungsverzeichnis 6.3 Beurteilung der Erwartungskonformität bei der ersten Stufe des Benutzertests Beurteilung der Fehlertoleranz bei der ersten Stufe des Benutzertests Beurteilung der Individualisierbarkeit bei der ersten Stufe des Benutzertests Beurteilung der Lernförderlichkeit bei der ersten Stufe des Benutzertests Gesamtergebnis der ersten Stufe des Benutzertests Einstellung des Kommentarbeginns und des Kommentarendes Beurteilung der Aufgabenangemessenheit bei der zweiten Stufe des Benutzertests Beurteilung der Selbstbeschreibungsfähigkeit bei der zweiten Stufe des Benutzertests Beurteilung der Lernförderlichkeit bei der zweiten Stufe des Benutzertests Gesamtergebnis der zweiten Stufe des Benutzertests A.1 Datenbankschema der Tabelle html5videoplayer A.2 UML Klassendiagramm der JavaScript Datenstruktur der Kommentare im Modul html5videoplayer B.1 Listenansicht des Videoanalysesystems B.2 Drupal Theme für das Videoanalysesystem C.1 Teilnehmerinformationen für den Benutzertest Seite C.2 Teilnehmerinformationen für den Benutzertest Seite C.3 Die modifizierte Version des ISONORM-Fragebogens Seite C.4 Die modifizierte Version des ISONORM-Fragebogens Seite C.5 Die modifizierte Version des ISONORM-Fragebogens Seite C.6 Die modifizierte Version des ISONORM-Fragebogens Seite C.7 Die modifizierte Version des ISONORM-Fragebogens Seite C.8 Die modifizierte Version des ISONORM-Fragebogens Seite C.9 Die modifizierte Version des ISONORM-Fragebogens Seite C.10 Die modifizierte Version des ISONORM-Fragebogens Seite C.11 Die modifizierte Version des ISONORM-Fragebogens Seite C.12 Die modifizierte Version des ISONORM-Fragebogens Seite

11 Abbildungsverzeichnis xi C.13 Die modifizierte Version des ISONORM-Fragebogens Seite C.14 Persona Karl-Hein Szilinsky C.15 Persona Dieter Müller C.16 Persona Klaus Meyer

12 xii Abbildungsverzeichnis

13 1. Einleitung 1.1 Motivation Videoanalysen sind unverzichtbare Werkzeuge für Spiel- und Bewegungsanalysen im Hochleistungssport. Sie werden darüber hinaus im Rahmen der Aus- und Fortbildung von Trainern als Lehr- und Lernmittel eingesetzt und dienen als Anleitung für die Gestaltung individueller Trainingseinheiten von Athleten. Das Management und die Analyse von Videos sind allerdings komplexer, als es auf den ersten Blick scheint. Eine erste Barriere betrifft die hohen Systemanforderungen, die eine Videoanalyse-Software stellt. Eine zweite liegt darin, dass die von der jeweiligen Software unabhängige Präsentation und Verbreitung eigener Videoanalysen zeitaufwändig und umständlich ist, weil Videos ausgespielt, gegebenenfalls konvertiert und auf DVD gebrannt werden müssen. Inzwischen bieten einzelne Hersteller zusätzlich zum PC-Programm die Option für eine Webplattform an, auf der eigene Videos mit entsprechenden Analysen publiziert werden können. Das ist unter Verbreitungsaspekten ein Zugewinn, aber auch diese Lösung ist nicht für Social-Software-Anwendungen ausgelegt, d.h. sie eignet sich nicht für eine gemeinsame, standortunabhängige Videoanalyse und den gemeinsamen Wissensaustausch über Videos und deren Kommentierung. 1 Ziel dieser Diplomarbeit ist daher ein webbasiertes Videosystem, das kooperative Videoanalysen und -kommentierungen ermöglicht. Die Idee zu dieser Diplomarbeit entstand aus dem Forschungsprojekt Wissensmanagement im Wissenschaftlichen Verbundsystem Leistungssport unter Leitung von Prof. Dr. Manfred Muckenhaupt. Vorrangiges Ziel [des Forschungsprojekts] ist es, durch Optimierung der Wissensprozesse im wissenschaftlichen Verbund Leistungssport die internationale Wettbewerbsfähigkeit deutscher Spitzensportlerinnen und Spitzensportler zu sichern und mittelfristig auszubauen. 2 1 Dieser Text wurde bereits in Hyneck (2011, S.71) verwendet. 2 Muckenhaupt, Grehl, Lange und Knee (2011).

14 2 1. Einleitung 1.2 Zielsetzung Die webbasierte Videoanalyse greift auf den bestehenden Leistungsumfang von Social- Software-Lösungen und Content-Management-Systemen 3 zurück und integriert in diese Systemumgebungen die kooperative Bearbeitung und den Austausch von Videos. Über ein soziales Online-Netzwerk können Benutzer miteinander kommunizieren, Inhalte teilen und damit vom Wissen anderer profitieren. Das CMS erlaubt Administratoren und Anwendern die Verwaltung von Inhalten. Zu den spezifischen Features des Videoanalysesystems zählen die folgenden Funktionen und Bearbeitungsmöglichkeiten: Videoplayer mit erweiterten Steuerungsfunktionen wie z.b. Einzelbild vor/ zurück, Fast Forward, Slow Motion Framegenauer Zugriff auf das Video Marker im Video setzen (In und Out), um damit Segmente zu definieren Zeichenfunktion im Video Kommentare für Videosegmente setzen Springen von Kommentar zu Video Einblendung von Kommentaren während der Videopräsentation Antwortfunktion für Kommentare Videos und Kommentare verschlagworten Schlagwortsuche Die Implementierung dieser Funktionen wird komplett als Rich Internet Applikation mit Open Source-Technologien wie HTML5 und dem CMS Drupal 4 durchgeführt. Zum einen ist dadurch die Weiterentwicklung des Systems einfacher möglich, zum anderen die Unabhängigkeit von einer Plattform für Benutzer gegeben. Die Konvertierung von Videos ist nicht Teil der Arbeit. 5 Die Gebrauchstauglichkeit der Implementierung, wie in den Oberzielen von EN ISO 9241: Teil 11 Konzept der Gebrauchstauglichkeit (1999) beschrieben, wird durch einen Benutzertest sichergestellt. 1.3 Gliederung Das 2. Kapitel gibt einen Überblick über die technischen Grundlagen und Rahmenbedingungen, auf deren Grundlage die Anwendung entwickelt wurde. Eine genaue Analyse der gesamten Aufgabenstellung auf nicht-technischer Basis ist in Kapitel 3 zu finden. Diese Analyse soll dafür sorgen, dass die Implementierung möglichst genau auf die späteren Benutzer, die Aufgabe und den Nutzungskontext zugeschnitten 3 Im Folgenden mit CMS abgekürzt. 4 Buytaert (2011). 5 Details zu Videoformaten in Abschnitt und Eine Lösung um Videos zu kodieren wird als vorhanden angenommen.

15 1.3. Gliederung 3 ist. In diesem Kapitel werden auch ausgewählte existierende Videoanalyselösungen analysiert. Das 4. Kapitel beschäftigt sich mit der Auswahl der Technologien für die Implementierung und dem damit verbundenen Design der Implementierung. Kapitel 5 beschreibt den gesamten Prozess der Implementierung von der Entwicklung eines Prototyps bis zum fertigen Produkt. Ausgewählte technische Besonderheiten und Probleme, die dabei auftraten, werden erläutert und Lösungen vorgestellt. Eine Evaluation in Bezug auf die Gebrauchstauglichkeit der Implementierung wird in Kapitel 6 durchgeführt. Im letzten Kapitel 7 werden die Ergebnisse der Diplomarbeit vorgestellt, Verbesserungen sowie der weitere Ausbau diskutiert.

16 4 1. Einleitung

17 2. Grundlagen In diesem Kapitel werden die technischen Grundlagen erläutert, die zur Implementierung des Videoanalysesystems notwendig sind. 2.1 HTML5 Die Hypertext Markup Language 6 ist eine Hypertext-Auszeichnungssprache und bildet seit 1992 die Grundlage des World Wide Web 7. HTML wird vom World Wide Web Consortium 8 entwickelt und liegt seit 1999 in der Version 4.01 vor. In der Vergangenheit wurde die Weiterentwicklung dieser Spezifikation aus Sicht einiger Browserhersteller in die falsche Richtung gelenkt bzw. entsprach nicht deren Vorstellungen eines zukünftigen Internet. 9 Daher gründeten unter anderem die Mozilla Foundation und Opera Software die Arbeitsgruppe Web Hypertext Application Technology Working Group 10. Ziel dieser Arbeitsgruppe ist es, Erweiterungen für HTML zu spezifizieren. Seit 2006 arbeiten W3C und WHATWG zusammen am Entwurf des Nachfolgestandards HTML5. HTML5 soll kein Neuentwurf sein, sondern eine Erweiterung der bisherigen Möglichkeiten. Bisherige Sprachelemente von HTML Version 4.01 werden in HTML5 integriert, es kommen jedoch einige neue Sprachelemente dazu. HTML5 kann daher als Obermenge von HTML Version 4.01 bezeichnet werden. Im Folgenden wird immer der Begriff HTML5 verwendet, auch wenn Elemente beschrieben werden, die schon in HTML Version 4.01 vorhanden waren. Obwohl der Standard noch nicht fertig ist, können seit dem Jahr 2009 Teile von HTML5 in den meisten modernen Browsern benutzt werden. Eine der vielen Neuerungen in HTML5 sind die native Wiedergabe von Audio und Video sowie die Möglichkeit, direkt im Browser zu zeichnen. Diese beiden Features von HTML5 werden in den folgenden Abschnitten beschrieben, da sie für die Implementierung in Kapitel 5 benötigt werden. Bisher sind für solche Anwendungen proprietäre Browser- 6 Im Folgenden mit HTML abgekürzt. 7 Im Folgenden mit WWW abgekürzt. 8 Im Folgenden mit W3C abgekürzt. 9 Pilgrim (2010, S.12). 10 Im Folgenden mit WHATWG abgekürzt.

18 6 2. Grundlagen Plug-Ins wie Adobe Flash 11 oder Microsoft Silverlight 12 notwendig. Diese Plug-Ins bieten jedoch zahlreiche Nachteile, die im Folgenden erläutert werden: Die Plug-Ins müssen manuell installiert und mit Sicherheitsupdates auf dem neuesten Stand gehalten werden. Ansonsten kann auf einen damit installierten Rechner beispielsweise leicht Schadsoftware eingeschleust werden. Die Plug-Ins sind nicht für alle Plattformen verfügbar, so dass bestimmte Nutzer vom Angebot ausgeschlossen werden. Insbesondere für mobile Plattform wie z.b. Apple ipad 13 ist die Installation wenn überhaupt nur über Umwege möglich. Zum Erzeugen der Inhalte muss jeweils die Software des Herstellers gekauft werden. Die so erzeugten Binärdateien werden mit dem <embed> Tag oder dem <object> Tag in normalen HTML-Code eingebettet. Weiterer HTML- Code zum Anzeigen der Inhalte ist damit überflüssig. Die Erstellung von Inhalten wird so unnötig erschwert. Unter Usability-Gesichtspunkten sind diese Inhalte meist schlecht in die HTML- Seite integriert. Beispielsweise lassen sich Adobe Flash-Inhalte nicht direkt durchsuchen Video Mit dem <video> Element von HTML5 ist ein Browser in der Lage, Videos nativ wiederzugeben. Wie in der Einführung von 2.1 beschrieben, war es bisher ohne Plug-Ins von Drittherstellern nicht möglich, Videos in Webseiten anzuzeigen. Die einfachste Möglichkeit, Video, in eine Seite zu integrieren, ist das Codebeispiel in Listing 2.1. <video src=video1.ogv> </video> Listing 2.1: Ein Minimalbeispiel für die Verwendung des <video> Elements in HTML Attribute Über das einfache Beispiel von Listing 2.1 hinaus lassen sich das Aussehen und das Verhalten eines Videos mit Attributen steuern. Das obligatorische src Attribut gibt die Videodatei an, die als Quelle benutzt wird, wie in Abbildung 2.1 gezeigt. Mit dem poster Attribut kann ein Vorschaubild angegeben werden, das angezeigt wird, bevor das Video abgespielt wird. Über die Attribute preload bzw. autobuffer kann angegeben werden, ob die Videodatei sofort oder nur bei Bedarf vom Webserver geladen wird. Ob das Video beim Öffnen der Seite abgespielt wird, kann mit dem Attribut autoplay festgelegt werden. Mit den Attributen width und height lässt sich das Video skalieren. Entsprechen width und height nicht der Breite und Höhe des 11 Adobe Systems (2011). 12 Microsoft Corporation (2011). 13 Apple Inc. (2011a)

19 2.1. HTML5 7 Videos, muss der Client-Rechner die Auflösung entsprechend diesen Attributen interpolieren. Leistungsschwache Rechner können in diesem Fall das Video nicht mehr mit der vorgesehenen Framerate abspielen. Die Videowiedergabe profitiert unter anderem von einer Hardwarebeschleunigung in den Versionen Mozilla Firefox 4 und Google Chrome 9. Für die Steuerung des Videos wird, je nachdem wie das Attribut controls gesetzt ist, entweder eine Browser-spezifische Steuerung eingeblendet oder eine eigene Steuerung verwendet. Eine eigene Steuerung kann unter anderem dazu dienen, das Look and Feel 14 der Steuerung in allen Browsern einheitlich zu gestalten. Eine eigene Steuerung wird über die JavaScript-API 15 des <video> Elements programmiert. Über die API kann das Video über verschiedene Attribute, Events und Methoden angesprochen werden. Die Zeit bei der sich das Video aktuell beim Abspielen befindet, kann mit der Methode. timeupdate() ausgelesen und gesetzt werden. Damit ist z.b. ein fest definierter Sprung des Videos zu Sekunde 5 möglich. Umgekehrt kann über das Event timeupdate bei jeder Aktualisierung der Videoposition eine Funktion ausgeführt werden, beispielsweise die Aktualisierung einer Zeitanzeige. Die Abspielgeschwindigkeit, der Ladestatus der Videodatei sowie viele weitere Eigenschaften lassen sich ebenfalls über die Javascript-API abfragen und steuern. <video width="600" height="480" poster="img/vorschaubild1.jpg"> <source src="video1.webm" type= video/webm; codecs="vp8, vorbis" ></source> <source src="video1.ogv" type= video/ogg; codecs="theora, vorbis" ></source> <source src="video1.mp4" type= video/mp4; codecs="avc1.42e01e, mp4a.40.2" ></ source> </video> Listing 2.2: Das <video> Element in HTML Dateiformate Damit Browser Videos nativ wiedergeben können, müssen sie das Containerformat 16 der Videodatei lesen und die Datei mittels der passenden Audio- und Videocodes dekodieren, d.h. für die eigentlich Ausgabe aufbereiten. Unglücklicherweise konnten sich die Browserhersteller nicht auf ein gemeinsames Videoformat einigen. 17 Seitdem ist die Sachlage, welcher Browser welche Containerformate und Codecs unterstützt, sehr kompliziert. Selbst innerhalb verschiedener Browserversionen ändern sich die unterstützten Formate teilweise. Mozilla Firefox Version 3.5+ unterstützt nur das ogv-containerformat, Firefox Version 4+ das ogv-containerformat und das webm-containerformat, Apples Safari nur das mp4-containerformat und so weiter. Die Lösung für jeden Browser und damit für jeden Benutzer die richtige Datei parat zu haben, besteht darin verschiedene Dateien als Quelle anzugeben, wie in Listing 2.2 zu sehen. Diese Angabe versteht jeder Browser und sucht sich von oben nach unten die erste für ihn lesbare Videodatei aus. Falls das Containerformat und der Codec explizit bei der Quelle mit angegeben sind, liest der Browser diese Angabe. 14 Look and Feel, deutsch Aussehen und Handhabung bezeichnet in grafischen Benutzeroberflächen u.a. das Design, die Farben, Reaktion auf Benutzereingaben. 15 API, Abkürzung für appication programming interface. 16 Eine Videodatei ist aus einem Containerformat, einem Audio- und einem Videocodec aufgebaut, Vgl. Pilgrim (2010, S.81-88). 17 Pilgrim (2010, S.88-90).

20 8 2. Grundlagen Codec Container Firefox 4+ Safari 4+ Chrome 9+ Opera Theora+Vorbis ogv - H.264+AAC mp VP8+Vorbis webm - Tabelle 2.1: Unterstützung von Videoformaten in verschiedenen Browserversion, Vgl. Kröner (2010, S.187). Ist kein Codec- und Containerformat angegeben, lädt der Browser die ersten Bytes der Dateien herunter und ermittelt anhand des Dateityps die für ihn abspielbare Videodatei. 18 Nachteil dieser Methode ist, dass Videos in drei verschiedenen Formaten zur Verfügung stehen müssen. Eine Übersicht der derzeit gängigen Browser- /Versionen ist in Tabelle 2.1 zu sehen. Unterstützt ein Browser das <video> Element überhaupt nicht, kann innerhalb des <video> Elements als Fallback auch ein Flash- Video angegeben werden. Das vielseitigste Programm, um alle diese Videoformate zu kodieren, ist das Kommandozeilenprogramm FFmpeg 19 ab Version Andere Programme beherrschen meist nicht alle HTML5-Formate, da insbesondere das webm-containerformat erst im Mai 2010 eingeführt wurde Zeichenfläche Das Canvaselement stellt eine Fläche zur Verfügung, auf die mittels Javascript dynamische Bitmap-Grafiken gezeichnet werden können. 21 Ohne Angabe weiterer Attribute erhält man durch das Einfügen eines <canvas> Elements in den HTML- Quelltext ein farbloses Rechteck. Anders als mit dem <video> Element, ist das <canvas> Element ohne den Einsatz von Javascript nutzlos. Jedes <canvas> Element hat eine oder mehrere Rendering Context genannten Schnittstellen, die die Javascript-Methoden und -Attribute zum Zeichnen bereitstellen. 22 Mit dieser API können beispielsweise Kreise, Linien und Rechtecke auf das <canvas> Element gezeichnet werden. Der Koordinatenursprung eines <canvas> Elements ist die Koordinate (0/0) in der linken oberen Ecke. Ein Minimalbeispiel für das Zeichnen eines 100x100Pixel großen Rechtecks an Position (50/50) ist in Listing 2.3 aufgeführt. Texte lassen sich auf einem <canvas> Element in fast beliebigen Schriftarten durch Angabe einer Schriftdatei darstellen. Gradienten können sowohl linear als auch radial gezeichnet werden. Auch von <img> oder <video> Elementen innerhalb des DOM 23 kann der Inhalt kopiert, skaliert, rotiert oder translatiert auf dem Canvas dargestellt werden. Damit lassen sich interessante Effekt erzielen. Eine mögliche Anwendung ist das Tracking einer Person in einem Video. Dazu wird zuerst ein Video auf ein <canvas> Element kopiert. So kann mittels geeigneter Javascript-Methoden auf die einzelnen Pixel zugegriffen werden, um diese mit Algorithmen aus der Bildverarbeitung weiter zu verarbeiten. In Zukunft wird es sehr wahrscheinlich auch ein 3D <canvas> Element im Browser geben, um auch räumliche Szenen geeignet darstellen zu können. Zusammen mit der schon in einigen Browsern eingeführten Hard- 18 Kröner (2010, S.189). 19 FFmpeg-Projekt (2011). 20 Google kaufte im Mai 2010 On2, den Hersteller des VP8-Codecs. Vgl. Pilgrim (2010, S.85). 21 Kröner (2010, S.249). 22 Kröner (2010, S.249). 23 Abkürzung für Document Object Model. Mehr dazu in Müller (2007, S.197-S.200).

21 2.2. Javascript 9 warebeschleunigung sind vielfältige Einsatzgebiete und Anwendungen denkbar, die beispielsweise Adobe Flash-Anwendungen in nichts nachstehen müssen. <body> <canvas id="canvas"></canvas> <script type="text/javascript"> var canvas = document.getelementbyid("canvas"); var context = canvas.getcontext("2d"); context. fillrect (50,50,100,100) ; </script> </body> Listing 2.3: Zeichnen eines Rechtecks mit dem <canvas> Element in HTML Nachteile Die Nachteile dieser neuen, erfolgversprechenden Technologie HTLM5 werden nur selten diskutiert wie bei Harding (2011). Sie liegen hauptsächlich nicht an Implementierungen oder Spezifikationen, sondern in der Natur der Sache. In einer HTML-Webseite kann jeglicher Inhalt inklusive den Quelltexten von jedem Betrachter angesehen und kopiert werden. Daher können solche Inhalte nicht wie z.b. Adobe Flash mit DRM 24 geschützt werden. Auch die dazu gehörigen Javascript- Quelltexte können lediglich z.b. durch Umbenennen von Variablennamen oder Funktionsnamen geschützt werden. Adobe Flash Videos bieten die Option, dass das Video bei der Wiedergabe auf den gesamten Bildschirm vergrößert wird. Dies ist möglich, da Adobe Flash als Plug-In im Browser läuft und damit aus dem Browser-Fenster herausgelöst werden kann. Mit HTML5 können Videos zwar auf die Größe des Browser-Fensters vergrößert werden, nicht jedoch auf den gesamten Bildschirm. Um dies zu erreichen, muss zusätzlich das Browser-Fenster in einen Vollbild-Modus geschalten werden. Die Verbindung zur Rechner-Hardware ist bisher nur mit Plug-Ins möglich. Beispielsweise lässt sich mit Microsoft Silverlight eine Audio-Aufnahme über ein angeschlossenes Mikrofon machen und direkt in eine Webanwendung integrieren. Ohne Plug-In, nur mit dem Browser ist dies bisher noch nicht möglich. Zuletzt sorgen insgesamt drei verschiedene Dateiformat beim HTML5 <video> Element für unnötigen Aufwand. 2.2 Javascript Ajax Mit Ajax werden die üblichen Wartezeiten bei der Navigation auf einer HTML5- Seite stark verkürzt. Beispielsweise kann ein Benutzer in Google Maps 25 mit der Maus den Kartenausschnitt weiter nach rechts verschieben, während der aktuell geladene Kartenausschnitt und die restliche Seite weiter verfügbar sind. Ajax ist ein 24 Abkürzung für Digital Rights Management. 25 Google Inc. (2011a).

22 10 2. Grundlagen Abbildung 2.1: Schematischer Ablauf einer normalen-webanwendung. Frei nach Koch (2009, S.334). Abbildung 2.2: Schematischer Ablauf einer Ajax-Webanwendung. Frei nach Koch (2009, S.335). Akronym für Asynchronous JavaScript and XML und ist eine Methode zur asynchronen Kommunikation zwischen Client und Webserver. Den Unterschied zwischen der klassischen Vorgehensweise und AJAX zeigen die Abbildungen 2.1 und 2.2. In Abbildung 2.1 wird die Seite bei jeder Aktualisierung komplett neu geladen. Während des Ladevorgangs muss der Benutzer auf die neue Seite warten. Diese Wartezeit entfällt bei der AJAX-Webanwendung in Abbildung 2.2. Hier wird nur ein kleiner Teil der Seite neu geladen. Der Rest der Seite kann normal weiterbenutzt werden. Die Ajax-Variante ist daher für viele Aktionen auf einer Webseite die bessere Wahl gegenüber der Anforderung einer ganzen HTML-Seite vom Server. Das Datenaustauschformat zwischen Client und Server in Ajax ist XML wie das x im Akronym Ajax andeutet. Statt XML kann aber auch direkt HTML5 oder JSON als Austauschformat verwendet werden JSON Die JavaScript Object Notation (JSON) ist ein kompaktes Datenaustauschformat. 26 Im Unterschied zum weit verbreiteten Datenaustauschformat XML hat JSON wenig 26 Crockford (2008, S.146).

23 2.3. Content-Management-System 11 Overhead 27 bei der Übertragung und ist auch für Menschen leicht lesbar, kann dabei aber genauso einfach geparst werden. Prinzipiell kann JSON in verschiedenen Sprachen als Austauschformat verwendet werden. Dank nativer Javascript-Kompatiblität kann JSON direkt in ein Objekt umgewandelt werden. In Listing 2.4 wird ein Beispiel aufgeführt, wie mit JSON ein Objekt erzeugt wird. Das Array cars wird dabei mit dem Objekt ford gefüllt. Das Objekt ford enthält die Schlüssel-Wert-Kombinationen (name ford) und (seats 4). Dieses Entwurfsmuster für die Erzeugung von Objekten wird als Singleton-Pattern bezeichnet, da das Objekt direkt einmalig erzeugt wird, ohne es beispielsweise mit dem new Operator mehrmals zu instanziieren. Das Singleton-Pattern erlaubt eine sehr effiziente Schreibweise und ist vor allem in Webanwendungen mit Ajax-Funktionen anzutreffen, da sich die so erzeugten Objekte ideal per Ajax zum Server und zurück senden lassen. var cars = [ 0 : { ]; } "name" : "ford ", "seats" : 4 Listing 2.4: Das Singleton-Pattern für die Erzeugung von Objekten mit JSON. 2.3 Content-Management-System Drupal ist ein häufig verwendetes, quelloffenes 28 CMS und Framework. 29 Es ist in PHP 30 geschrieben und arbeitet mit MySQL, PostgreSQL sowie weiteren Datenbanken zusammen. In den folgenden Abschnitten werden die Architektur und die Features von Drupal im Einzelnen vorgestellt, soweit es für diese Arbeit notwendig ist. Falls nicht anders angegeben, bezieht sich dies auf Version 7 von Drupal. Im ersten Abschnitt werden die besonderen Features von Drupal in Bezug auf kollaboratives Arbeiten vorgestellt. In den Abschnitten und wird auf die Grundlagen der Erstellung von Inhalten mit dem CMS eingegangen. Die Erweiterbarkeit von Drupal mit Modulen ist Gegenstand des Abschnitts Die technischen Details, um Funktionen des Basissystems zu überschreiben, wird in Abschnitt erläutert, die technischen Details für die Anpassung des Designs in Abschnitt Web 2.0 und Social Software Der Begriff Web 2.0 wird sehr weit gedehnt und im Zusammenhang mit vielfältigen Techniken und Konzepten genannt. Als der Begriff Web 2.0 bei einer vom Verleger Tim O Reilly veranstalteten Brainstorming-Session im Jahr 2004 geprägt wurde, ging es zunächst einmal darum, die Prinzipien zu identifizieren, welche die 27 Für die Übertragung oder Speicherung notwendige Zusatzinformationen, die mit den eigentlichen Nutzdaten transportiert werden. 28 Drupal steht unter der GNU General Public License. 29 Die Wahl von Drupal als CMS für die Implementierung wird in Abschnitt 4.3 begründet. 30 PHP ist eine weitverbreitete Sprache zur Entwicklung dynamischer Internetanwendungen [... ] (Theis, 2010, S.15).