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

Größe: px
Ab Seite anzeigen:

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

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

Software Ergonomie. als Teil des Software Engineerings

Software Ergonomie. als Teil des Software Engineerings Software Ergonomie als Teil des Software Engineerings Prof. Dr. Ing. Markus Dahm Informatik + Software Ergonomie FH Düsseldorf FB Medien Prof. Dr.-Ing. Markus Dahm RWTH Aachen Wer? Elektrotechnik, TI,

Mehr

HTL-Website. TYPO3- Skriptum II. Autor: RUK Stand: 02.06.2010 Gedruckt am: - Version: V0.1 Status: fertig. Qualitätsmanagement

HTL-Website. TYPO3- Skriptum II. Autor: RUK Stand: 02.06.2010 Gedruckt am: - Version: V0.1 Status: fertig. Qualitätsmanagement HTL-Website TYPO3- Skriptum II Autor: RUK Stand: 02.06.2010 Gedruckt am: - Version: V0.1 Status: fertig Qualitätsmanagement Erstellt Geprüft Freigegeben Name RUK Datum 02.06.2010 Unterschrift Inhaltsverzeichnis

Mehr

TYPO3 4.4.x - Schulungsunterlagen für Redakteure TZ-COM Thomas Zimmermann Computer GmbH (Reinhard Kreitner 10.08.2010)

TYPO3 4.4.x - Schulungsunterlagen für Redakteure TZ-COM Thomas Zimmermann Computer GmbH (Reinhard Kreitner 10.08.2010) TYPO3 4.4.x - Schulungsunterlagen für Redakteure TZ-COM Thomas Zimmermann Computer GmbH (Reinhard Kreitner 10.08.2010) Wichtige Begriffe:... 2 Was ist ein Content Management System (CMS)?... 2 Die Begriffe

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

... Bitte Namen und Matrikelnummer oben eintragen.

... Bitte Namen und Matrikelnummer oben eintragen. Prof. Dr. Rolf Linn B.Sc. Prüfung Seite 1......... Vorname Nachname Matrikelnummer Bitte Namen und Matrikelnummer oben eintragen. Bitte prüfen Sie die Vollständigkeit: Die Klausur besteht aus den Aufgaben

Mehr

Aufbau und Pflege von Internetseiten leicht gemacht

Aufbau und Pflege von Internetseiten leicht gemacht Aufbau und Pflege von Internetseiten leicht gemacht Einführung in die Grundlagen der CMS (Content Management Systeme) Was ist ein CMS? frei übersetzt: Inhaltsverwaltungssystem ist ein System, das die gemeinschaftliche

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

PADS 3.0 Viewer - Konfigurationen

PADS 3.0 Viewer - Konfigurationen PADS 3.0 Viewer - Konfigurationen Net Display Systems (Deutschland) GmbH - Am Neuenhof 4-40629 Düsseldorf Telefon: +49 211 9293915 - Telefax: +49 211 9293916 www.fids.de - email: info@fids.de Übersicht

Mehr

Erweiterung für Premium Auszeichnung

Erweiterung für Premium Auszeichnung Anforderungen Beliebige Inhalte sollen im System als Premium Inhalt gekennzeichnet werden können Premium Inhalte sollen weiterhin für unberechtigte Benutzer sichtbar sein, allerdings nur ein bestimmter

Mehr

Manual WordPress - ContentManagementSystem

Manual WordPress - ContentManagementSystem Was ist WordPress? WordPress ist ein ContentManagementSystem (CMS) zur Verwaltung der Inhalte einer Website. Es bietet sich besonders zum Aufbau und Pflege eines Weblogs (Online-Tagebuch) an. Funktionsschema

Mehr

Erstellen von Beiträgen

Erstellen von Beiträgen Erstellen von Beiträgen Hinweis Die Anleitung ist für den Microsoft Internet Explorer 10 erstellt. Wird ein anderer Webbowser wie Firefox, Safari oder Google Chrom usw. verwendet, kann die Darstellung

Mehr

Allgemeine Informationen Slides2Go Stand April 2015

Allgemeine Informationen Slides2Go Stand April 2015 Allgemeine Informationen Slides2Go Stand April 2015 1. ALLGEMEINE INFORMATIONEN... 3 1.1 SYSTEMANFORDERUNGEN WEB-BACKEND... 3 1.2 SYSTEMANFORDERUNGEN FRONTEND / APP... 3 1.3 UNTERSTÜTZTE DATEIFORMATE...

Mehr

Arbeiten mit Acrobat. Vorstellung von Adobe Acrobat Bearbeitung des Dokuments Präsentationen erstellen Teamarbeit

Arbeiten mit Acrobat. Vorstellung von Adobe Acrobat Bearbeitung des Dokuments Präsentationen erstellen Teamarbeit Arbeiten mit Acrobat Vorstellung von Adobe Acrobat Bearbeitung des Dokuments Präsentationen erstellen Teamarbeit Vollbildmodus Wählen Sie das Menü Fenster Vollbildmodus. Die aktuell angezeigte Seite verdeckt

Mehr

Allgemeine Einführung. 13.11.2013 Elisabeth Beyrle Stefan Paffhausen

Allgemeine Einführung. 13.11.2013 Elisabeth Beyrle Stefan Paffhausen Allgemeine Einführung 13.11.2013 Elisabeth Beyrle Stefan Paffhausen Ablauf Allgemeines über Typo3 Unterschiede zu Drupal Oberfläche des Typo3 Backends Erstellen einer Seite Typo3 Open-Source Content-Management-System

Mehr

User Interface Guidelines - Möglichkeiten und Grenzen

User Interface Guidelines - Möglichkeiten und Grenzen Folie Titel User Interface Guidelines - Möglichkeiten und Grenzen Ellen Reitmayr relevantive AG World Usability Day Berlin 3. November 2005 www.openusability.org Übersicht 1 Einführung Wozu User Interface

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

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

Handbuch TweetMeetsMage

Handbuch TweetMeetsMage Handbuch TweetMeetsMage für Version 0.1.0 Handbuch Version 0.1 Zuletzt geändert 21.01.2012 Inhaltsverzeichnis 1 Einleitung... 3 1.1 Voraussetzungen... 3 1.2 Funktionsübersicht... 3 2 Installation... 4

Mehr

Workshop der VkIB Herzogsägmühle, 07.07.2007

Workshop der VkIB Herzogsägmühle, 07.07.2007 Barrierefreie Internetseiten mit dem Redaktionssystem TYPO3 Workshop der VkIB Herzogsägmühle, 07.07.2007 Vorstellung Jan Wischnat, Internetentwicklung seit 1996 System- und Internetbetreuer bei der Gemeinde

Mehr

Ein Auszug aus... Studie. Content Management Systeme im Vergleich. Empfehlungen und Entscheidungshilfen für Unternehmensbereiche

Ein Auszug aus... Studie. Content Management Systeme im Vergleich. Empfehlungen und Entscheidungshilfen für Unternehmensbereiche Ein Auszug aus... Studie Content Management Systeme im Vergleich Empfehlungen und Entscheidungshilfen für Unternehmensbereiche Die komplette Studie ist bei amazon.de käuflich zu erwerben. Inhaltsverzeichnis

Mehr

Einführung in das TYPO3 Content Management System. Jochen Weiland - jweiland.net

Einführung in das TYPO3 Content Management System. Jochen Weiland - jweiland.net Einführung in das TYPO3 Content Management System Dipl. Ing. Jochen Weiland jweiland.net Statische Websites upload Entwicklungsrechner Webserver Besucher Dynamische Websites Layouts Webserver Datenbank

Mehr

Inhaltsverzeichnis VII

Inhaltsverzeichnis VII Inhaltsverzeichnis 1 Die Grundlagen zu CMS auch eine lange Reise beginnt mit dem ersten Schritt............................................ 1 1.1 Was behandeln wir in dem einleitenden Kapitel?....................

Mehr

Jakob Westhoff. Plug-in-Entwicklung mit jquery

Jakob Westhoff. Plug-in-Entwicklung mit jquery Jakob Westhoff Plug-in-Entwicklung mit jquery 2 Willkommen in der Welt von jquery 2.1.1 Download von der jquery-webseite Download der Bibliothek Die einfachste Möglichkeit zur Beschaffung von jquery ist

Mehr

FH Trier Entwicklung gebrauchstauglicher Systeme

FH Trier Entwicklung gebrauchstauglicher Systeme Entwicklung gebrauchstauglicher Systeme Inhalt: Gebrauchstauglichkeit: Was ist das? Wie erreicht man das? Begriffe: MMI MMK MCI MMI HMI HCI CHI UCD GUI FH Trier Mensch-Maschine-Interaktion Mensch-Maschine-Kommunikation

Mehr

aft irtsch Der Vorfilm... er W er d artn etp tern In

aft irtsch Der Vorfilm... er W er d artn etp tern In Vitamine für Ihr Business Unser Thema heute: Der Vorfilm... Was wir für unsere Kunden tun... tun wir seit 1996. Wir betreiben Ihre Services. DC Berlin 1 DC Berlin 2 auf eigener Technik. Es sollte schon

Mehr

d e S I G n & d e v e L O P M e n T TYPO3 AdvAnced

d e S I G n & d e v e L O P M e n T TYPO3 AdvAnced DESIGN & DEVELOPMENT TYPO3 Advanced 1 Einleitung / Inhalt 2 / 13 Einleitung Dieses Dokument weist Sie durch die Funktion des Open Source CMS TYPO3. In wenigen, einfachen Schritten wird Ihnen bebildert

Mehr

TYPO3 Flip Book. TYPO3 Modul für Online-PDFs auf Basis von HTML5. System-Voraussetzungen: WebSite mit TYPO3 ab Version 1.6.0

TYPO3 Flip Book. TYPO3 Modul für Online-PDFs auf Basis von HTML5. System-Voraussetzungen: WebSite mit TYPO3 ab Version 1.6.0 TYPO3 Flip Book TYPO3 Modul für Online-PDFs auf Basis von HTML5 Online Blätterkataloge aus PDF Dokumenten mit wenigen Klicks selbst erstellen optimiertes Frontend für Desktop, Tablet und Mobil System-Voraussetzungen:

Mehr

Slices und Rollover für die Startseite einer Bildergalerie

Slices und Rollover für die Startseite einer Bildergalerie Slices und Rollover für die Startseite einer Bildergalerie Die größte Frage bei einer Webseite ist es, auf ggf. viele Informationen von der relativ kleinen Fläche eines Bildschirmes zu verweisen. Dabei

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

Beurteilung der Software-Ergonomie anhand des ISONORM-Fragebogens

Beurteilung der Software-Ergonomie anhand des ISONORM-Fragebogens Software-Ergonomie: Beurteilung der Software-Ergonomie anhand des ISONORM-Fragebogens Übersicht: Experten schätzen, daß 80 Prozent der in Deutschland benutzten Software nicht den Vorgaben der Bildschirmarbeitsverordnung

Mehr

SVG Skalierbare Vektorgrafiken im Netz

SVG Skalierbare Vektorgrafiken im Netz SVG Skalierbare Vektorgrafiken im Netz Weckung des Bedarfs an der Verteilung von georeferenzierten Informationen beim LWL: Weckung des Bedarfs an der Verteilung von georeferenzierten Informationen beim

Mehr

Modul Video-/Audioplayer. Version 1.1

Modul Video-/Audioplayer. Version 1.1 Modul Video-/Audioplayer Version 1.1 Inhaltsverzeichnis 1. Wichtiger Hinweis...1 1.1 Datei-Formate...1 2. Datei-Upload...2 2.1 Datei-Upload über TYPO3...2 2.2 Datei-Upload per FTP...3 2.3 Datei-Upload

Mehr

Einbindung von Videos im ZMS

Einbindung von Videos im ZMS Einbindung von Videos im ZMS Videos können auf Ihrer ZMS-Website auf vier verschiedene Arten eingebunden werden: - Video-Link (z.b. You Tube) - Real Media Stream - Video-Datei - Flash-Datei Um ein Video

Mehr

Open Source. Thomas Weibel, Multi & Media thomas.weibel@bluewin.ch www.thomasweibel.ch

Open Source. Thomas Weibel, Multi & Media thomas.weibel@bluewin.ch www.thomasweibel.ch Open Source Thomas Weibel, Multi & Media thomas.weibel@bluewin.ch www.thomasweibel.ch Inhalt 1. Begriff, Lizenzen 2. HTML 5, Nachschlagewerke 3. Software 4. Linux: Ubuntu 5. Content-Management-Systeme

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

Typo3-Schulung. Till Tantau. 12. und 13. März 2012

Typo3-Schulung. Till Tantau. 12. und 13. März 2012 Typo3-Schulung Till Tantau 12. und 13. März 2012 Gliederung Lektion 1: Das WWW und Typo3 Lektion 2: Die Bedienoberfläche von Typo3 Lektion 3: Seiten bestehen aus Inhaltselemente Lektion 4: Inhaltselemente

Mehr

Start Sie benötigen eine TYPO3 Umgebung mit eigenen Zugangsdaten und etwas Zeit zum kreativen Schaffen.

Start Sie benötigen eine TYPO3 Umgebung mit eigenen Zugangsdaten und etwas Zeit zum kreativen Schaffen. Typo3 kurz und gut Start Sie benötigen eine TYPO3 Umgebung mit eigenen Zugangsdaten und etwas Zeit zum kreativen Schaffen. 1. Übung (Zugang zum Backend) Als Beispiel der Domain nehmen wir die Website:

Mehr

Joomla! Source- CMS. Joomla! Open Source-CMS

Joomla! Source- CMS. Joomla! Open Source-CMS Joomla! Open Source- CMS Joomla! Open Source-CMS Mirco De Roni, 2010 Inhaltsverzeichnis 1 Begriffe und Konzepte... 3 1.1 Content Management System (CMS)... 3 1.2 Struktur eines Web Content Management Systems

Mehr

Homepage erstellen aber wie

Homepage erstellen aber wie Homepage erstellen aber wie Viele Möglichkeiten einen Webauftritt zu gestalten Ein kleiner Leitfaden durch den Dschungel Wege zur Internetpräsenz Idee, etwas der Öffentlichkeit mitzuteilen Webseite erstellen

Mehr

Die Inhalte Ihres Webauftritts werden mit einem CMS (Content-Management-System) erstellt.

Die Inhalte Ihres Webauftritts werden mit einem CMS (Content-Management-System) erstellt. RSG-LE Dokumentation (Version 2) Inhaltsverzeichnis: 1. Hinweise zur Nutzung der Website RSG-LE.de 2. Die Website im Überblick 3. Schritt für Schritt erste Schritte 4. Neue Seiten anlegen 5. Seiten-Inhalte

Mehr

Drupal Vorstellung (VAMV München) IT-Consulting D. Hardt dh-it-consult.de, Telefon: 089-88989199

Drupal Vorstellung (VAMV München) IT-Consulting D. Hardt dh-it-consult.de, Telefon: 089-88989199 Drupal Vorstellung (VAMV München) IT-Consulting D. Hardt dh-it-consult.de, Telefon: 089-88989199 Überblick Grundlagen Warum Drupal? Was genau ist Drupal? Drupal Leistungsmerkmale Drupal Struktur Module

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

ÖKB Steiermark Schulungsunterlagen

ÖKB Steiermark Schulungsunterlagen ÖKB Steiermark Schulungsunterlagen Fotos von Online-Speicher bereitstellen Da das hinzufügen von Fotos auf unsere Homepage recht umständlich und auf 80 Fotos begrenzt ist, ist es erforderlich die Dienste

Mehr

MiGo-Portal V2.21. Produkt-Sheet. Aktueller Stand: 30.11.2012 Verfasst von: Mike Goldhausen. MiGo-WebDesign Wiesenstraße 31 56459 Kölbingen

MiGo-Portal V2.21. Produkt-Sheet. Aktueller Stand: 30.11.2012 Verfasst von: Mike Goldhausen. MiGo-WebDesign Wiesenstraße 31 56459 Kölbingen MiGo-Portal V2.21 Produkt-Sheet Aktueller Stand: 30.11.2012 Verfasst von: Mike Goldhausen Unser aktuelles Portal-System für Ihre individuelle Homepage. Dieses Portal bietet die Möglichkeit verschiedene

Mehr

Das Handbuch zu Blogilo. Mehrdad Momeny Übersetzung: Burkhard Lück

Das Handbuch zu Blogilo. Mehrdad Momeny Übersetzung: Burkhard Lück Mehrdad Momeny Übersetzung: Burkhard Lück 2 Inhaltsverzeichnis 1 Einführung 5 2 Blogilo benutzen 6 2.1 Erste Schritte......................................... 6 2.2 Einen Blog einrichten....................................

Mehr

Anleitung für Autoren

Anleitung für Autoren Verwaltung.modern@Kehl Anleitung für Autoren Im folgenden Text werden Sie/wirst du geduzt. Bitte Sehen Sie/sieh uns diese Vereinfachung nach. Wenn du bei Verwaltung.modern@Kehl mitbloggen willst, legen

Mehr

Version 30.07.2007 - Pädagogische Hochschule Freiburg, Peter Huppertz

Version 30.07.2007 - Pädagogische Hochschule Freiburg, Peter Huppertz Babysteps Backend - Hauptmenü Neue Seite anlegen Seiteneigenschaften bearbeiten Inhaltselemente erstellen Inhaltselemente bearbeiten Übersicht der Seitenlayouts Bearbeiten von Personen Anzeigen von Personendaten

Mehr

Hochschule Heilbronn Technik Wirtschaft Informatik

Hochschule Heilbronn Technik Wirtschaft Informatik Hochschule Heilbronn Technik Wirtschaft Informatik Studiengang Electronic Business (EB) Diplomarbeit (280000) Evaluierung und Einführung eines Web Content Management Systems bei einem internationalen und

Mehr

TYPO3 Flip Book. TYPO3 Modul für Online-PDFs auf Basis von HTML5. System-Voraussetzungen: WebSite mit TYPO3 ab Version 4.5

TYPO3 Flip Book. TYPO3 Modul für Online-PDFs auf Basis von HTML5. System-Voraussetzungen: WebSite mit TYPO3 ab Version 4.5 TYPO3 Flip Book TYPO3 Modul für Online-PDFs auf Basis von HTML5 Online Blätterkataloge aus PDF Dokumenten mit wenigen Klicks selbst erstellen optimiertes Frontend für Desktop, Tablet und Mobil System-Voraussetzungen:

Mehr

TYPO3-Kurzreferenz für Redakteure

TYPO3-Kurzreferenz für Redakteure TYPO3-Kurzreferenz für Redakteure Die Kurzreferenz orientiert sich weitgehend an den TYPO3 v4 Schulungsvideos. Es kann jedoch geringfügige Abweichungen geben, da in den Videos auf didaktisch sinnvolles

Mehr

Lastenheft. Auftraggeber IBR Abteilung ALG

Lastenheft. Auftraggeber IBR Abteilung ALG Lastenheft Auftraggeber IBR Abteilung ALG Versionsübersicht Version Datum Autor Status Kommentar 1.0 9. 2. 2011 Auftraggeber 1.1 1. 4. 2011 Auftraggeber Ergänzung Miniflur, Personenerkennung 1.1.1 6. 4.

Mehr

Internetauftritt: Hochschulpartnerschaften - Datenbank

Internetauftritt: Hochschulpartnerschaften - Datenbank Hochschule für Technik, Wirtschaft und Kultur Leipzig (FH) University of Applied Sciences Internetauftritt: Hochschulpartnerschaften - Datenbank Modul: Anleitung für Typo3 bzgl. Partnerhochschulen einpflegen

Mehr

Vodafone Conferencing Kurzanleitung

Vodafone Conferencing Kurzanleitung Vodafone Benutzerhandbuch Vodafone Conferencing Kurzanleitung Eine kurze Einführung, um Vodafone Konferenzen zu erstellen, an Meetings teilzunehmen und durchzuführen Vodafone Conferencing Eine Kurzübersicht

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

3.9 Grundelemente einer Benutzeroberfläche

3.9 Grundelemente einer Benutzeroberfläche 92 3 Grundlagen einer ios-anwendung 3.8.4 Target-Actions Einer der häufigsten Anwendungsfälle bei einer Oberfläche ist das Betätigen einer Schaltfläche durch einen Anwender, woraufhin eine bestimmte Aktion

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

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

OpenCms jbpm Workflow Engine. OpenCms und jbpm Workflow Engine

OpenCms jbpm Workflow Engine. OpenCms und jbpm Workflow Engine OpenCms und jbpm Workflow Engine Geschäftliche Abläufe in einem Unternehmen folgen zu einem großen Prozentsatz beschreibbaren Prozessen, den so genannten Geschäftsprozessen. Diese Erkenntnis führte zum

Mehr

Online-Befragung als neues Instrument zur Beurteilung der Benutzerfreundlichkeit interaktiver Software am Beispiel einer Internet-Anwendung

Online-Befragung als neues Instrument zur Beurteilung der Benutzerfreundlichkeit interaktiver Software am Beispiel einer Internet-Anwendung Online-Befragung als neues Instrument zur Beurteilung der Benutzerfreundlichkeit interaktiver Software am Beispiel einer Internet-Anwendung Michael Richter, UBS AG 1 Einleitung Beim Versuch, den Dialog

Mehr

Pixelart-W ebdesign.de

Pixelart-W ebdesign.de Pixelart-W ebdesign.de R a i n e r W i s c h o l e k Rainer Wischolek, Föckerskamp 3a, 46282 Dorsten Telefon: 02362-42454 Mail: info@i-wa.de Anleitung: Bildvergrößerungen mit Lightbox-Effekt SCHRITT 1:

Mehr

Digitales Video I Wie wird Video am Computer codiert?

Digitales Video I Wie wird Video am Computer codiert? Digitales Video I Wie wird Video am Computer codiert? Bilder Auflösung Speicherung am Computer Bewegte Bilder Interlacing Kompression / Codec Ton Audioformate / Codecs Videoformate Bilder Auflösung: z.b.:

Mehr

www.profamilia.de Anleitung zur Nutzung von Typo3, Version 6.2

www.profamilia.de Anleitung zur Nutzung von Typo3, Version 6.2 www.profamilia.de Anleitung zur Nutzung von Typo3, Version 6.2 27.4.2015 Inhalt 1. Allgemeine Hinweise 2 2. Überblick über die Seite 3 3. Arbeiten im Einzelnen 5 3.1. Pflege der Beratungsstellendaten:

Mehr

Inhaltsverzeichnis. Mit dem WEB.DE WebBaukasten zur eigenen Homepage!...2. Schritt 1: Design auswählen...3

Inhaltsverzeichnis. Mit dem WEB.DE WebBaukasten zur eigenen Homepage!...2. Schritt 1: Design auswählen...3 Inhaltsverzeichnis Mit dem WEB.DE WebBaukasten zur eigenen Homepage!...2 Schritt 1: Design auswählen...3 Schritt 2: Umfang und Struktur der Seiten bestimmen...7 Schritt 3: Inhalte bearbeiten...9 Grafik

Mehr

Maik Derstappen. maik.derstappen@derstappen-it.de www.derstappen-it.de. ein freies Content Management System

Maik Derstappen. maik.derstappen@derstappen-it.de www.derstappen-it.de. ein freies Content Management System Maik Derstappen maik.derstappen@derstappen-it.de www.derstappen-it.de ein freies Content Management System 1 Was ist Plone? 2 Was ist Plone? Plone ist ein Content Management System (CMS) Plone ist in der

Mehr

Homepageerstellung mit WordPress

Homepageerstellung mit WordPress Homepageerstellung mit WordPress Eine kurze Einführung in die Installation und Einrichtung von WordPress als Homepage-System. Inhalt 1.WordPress installieren... 2 1.1Download... 2 1.2lokal... 2 1.2.1 lokaler

Mehr

Aids & Kind. WordPress Schulung. Redaktion. Zusammenfassung Schulungsunterlagen für die Redaktion von www.aidsundkind.ch mit WordPress.

Aids & Kind. WordPress Schulung. Redaktion. Zusammenfassung Schulungsunterlagen für die Redaktion von www.aidsundkind.ch mit WordPress. Aids & Kind Zusammenfassung Schulungsunterlagen für die von www.aidsundkind.ch mit WordPress. Geschichte 3.07.2012, JMeier, Erstellung dezember und juli gmbh Sackstrasse 33 8342 Wernetshausen 044 938 80

Mehr

MailStore Service Provider Edition (SPE)

MailStore Service Provider Edition (SPE) MailStore Solutions MailStore Service Provider Edition (SPE) E-Mail-Archivierung für Service Provider Mit Hilfe der MailStore Service Provider Edition können Sie Ihren Kunden moderne E-Mail-Archivierung

Mehr

Drupal Views Bildergalerie erstellen

Drupal Views Bildergalerie erstellen Drupal Views Bildergalerie erstellen (HTML5-Tags ergänzen, Gesamtsumme der Bilder, Bild URL hinzufügen) Es wird eine Galerie Übersichtsseite basierend auf Views-Relationships aufgebaut. Von dieser ausgehend

Mehr

Nadine Edelmann // Klaudia Fernowka // Magdalena Kierat // Anne Schwertfeger

Nadine Edelmann // Klaudia Fernowka // Magdalena Kierat // Anne Schwertfeger Tutoring Projekt II // Master Druck- und Medientechnik // Beuth Hochschule für Technik Berlin // Berlin, 23.11.2013 Vorstellungsrunde Wer sind wir? Was machen wir? Webseite zum Kurs: http://beuthworkshop.wordpress.com

Mehr

Ablauf. Redaktions-Schulung. Schulungs Unterlagen. Typo3

Ablauf. Redaktions-Schulung. Schulungs Unterlagen. Typo3 Redaktions-Schulung Verein Netwerk Logistik 7. März 2008 Ralph Zimmermann Ablauf Redaktionssystem Allgemein Login Aufbau von Typo3 Seitenelemente Seitenelemente - Editieren /Hinzufügen Neue Seite anlegen

Mehr

Johannes Rahn 29.07.2010. Usability und User Experience

Johannes Rahn 29.07.2010. Usability und User Experience Johannes Rahn 29.07.2010 Usability und User Experience Seite 2 Inhalt Begriffsdefinitionen: Was ist Usability und was User Experience? Was sind die Unterschiede? Warum ist Usability und User Experience

Mehr

SixCMS 6 Tutorial - Content-Manager. So erfassen Sie Inhalte mit SixCMS

SixCMS 6 Tutorial - Content-Manager. So erfassen Sie Inhalte mit SixCMS SixCMS 6 Tutorial - Content-Manager So erfassen Sie Inhalte mit SixCMS Inhalt Inhalt So erfassen Sie Inhalte mit SixCMS 3 Zu diesem Tutorial 3 Ablageort definieren 5 Content-Container erstellen 6 Einträge

Mehr

Joomla 1.5. Einführung in die Installation und Benützung

Joomla 1.5. Einführung in die Installation und Benützung Joomla 1.5 Einführung in die Installation und Benützung Programm Was ist Joomla Installation auf Ubuntu Benützung von Joomla Templates wechseln Nützliche Komponenten Weiterführende Informationen Was ist

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

U.motion. U.motion Control. Technisches Handbuch. Control-App für ios-geräte. 04/2014 Version 1.0.1. www.merten.com

U.motion. U.motion Control. Technisches Handbuch. Control-App für ios-geräte. 04/2014 Version 1.0.1. www.merten.com U.motion U.motion Control Control-App für ios-geräte 04/2014 Version 1.0.1 www.merten.com ALLGEMEINE INFORMATIONEN Schneider Electric GmbH c/o Merten Gothaer Straße 29, 40880 Ratingen www.merten.de www.merten-austria.at

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

Konzepte zur Datenhaltung für Webseiten in einem Web-Content- Management-System

Konzepte zur Datenhaltung für Webseiten in einem Web-Content- Management-System Konzepte zur Datenhaltung für Webseiten in einem Web-Content- Management-System Web-Content-Management-Systeme () dienen dazu, komplexe Websites zu verwalten und den Autoren einzelner Webseiten möglichst

Mehr

So ziehen Sie Ihr Wordpress Blog zu STRATO um

So ziehen Sie Ihr Wordpress Blog zu STRATO um So ziehen Sie Ihr Wordpress Blog zu STRATO um Version 1.0 So ziehen Sie Ihr Wordpress Blog zu STRATO um Das Wordpress-Plugin Duplicator ermöglicht Ihnen, in wenigen Schritten Ihre Wordpress-Instanz umzuziehen.

Mehr

Bilder im Internet. Hans Magnus Enzensberger

Bilder im Internet. Hans Magnus Enzensberger Kapitel 4 Alle reden von Kommunikation, aber die wenigsten haben sich etwas mitzuteilen. Hans Magnus Enzensberger Bilder im Internet Nach der etwas umfangreichen vorangehenden Lektion zum Ausklang der

Mehr

Referenzen Frontend Typo3

Referenzen Frontend Typo3 Referenzen Typo3 und Frontend Stand: Mai 2015 Diese Referenzliste beschreibt die eigene Webseite der Internetagentur Irma Berscheid-Kimeridze. Die Webseite ist seit Mai 2015 online. Sie ist mit Typo3 erstellt.

Mehr

Designänderungen mit CSS und jquery

Designänderungen mit CSS und jquery Designänderungen mit CSS und jquery In der epages-administration gibt es in den Menüpunkten "Schnelldesign" und "Erweitertes Design" umfangreiche Möglichkeiten, das Design der Webseite anzupassen. Erfahrene

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

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

Wiki-basierte Dokumentation von Software-Entwicklungsprozessen

Wiki-basierte Dokumentation von Software-Entwicklungsprozessen Wiki-basierte Dokumentation von Software-Entwicklungsprozessen Erfahrungen aus der industriellen Praxis Fraunhofer IESE Kaiserslautern Inhalt Wiki-basierte Dokumentation von Software-Entwicklungsprozessen

Mehr

Internetagentur für Digitale Transformation

Internetagentur für Digitale Transformation Ein paar Keyfacts Internetagentur für Digitale Transformation 45 Feste Mitarbeiter 10 TOP 10 unter inhabergeführten Agenturen in K & F Eine Auswahl unserer Partner 15 Jahre Erfahrung Internet Apps Online-

Mehr

S ecure File E xchange K urzanleitung

S ecure File E xchange K urzanleitung S ecure File E xchange K urzanleitung Inhalt Rollendefinitionen... 3 Neuen Ordner anlegen... 9 Hinzufügen oder Hochladen einer neuen Datei... 11 Datei löschen... 13 Dokument herunterladen... 14 Datei

Mehr

Open Catalog Interface (OCI) Anbindung an VirtueMart

Open Catalog Interface (OCI) Anbindung an VirtueMart Ver. 2.5.1 Open Catalog Interface (OCI) Anbindung an VirtueMart Joomla 2.5 und Virtuemart 2.0.6 Ing. Karl Hirzberger www.hirzberger.at Inhaltsverzeichnis Begriffserklärung... 3 OCI für VirtueMart... 4

Mehr

Claudia Hewelt Sarah Waschkewitz

Claudia Hewelt Sarah Waschkewitz Claudia Hewelt Sarah Waschkewitz Ziele der Softwareevaluation Anforderungen an die Software Methoden Expertenevaluation Benutzerevaluation Ergebnisse auswerten Optimierung/ Vergleich von Software Benutzerfreundlichkeit

Mehr

Entwicklung und Integration mobiler Anwendungen. Oracle Deutschland B.V. & Co. KG

Entwicklung und Integration mobiler Anwendungen. <Speaker> Oracle Deutschland B.V. & Co. KG Entwicklung und Integration mobiler Anwendungen Oracle Deutschland B.V. & Co. KG Global Users (Millions) Der Trend ist eindeutig. Trend zu mobilen Endgeräten Wachstum des mobilen Datenverkehrs

Mehr

Mitarbeiterprofil PG0225

Mitarbeiterprofil PG0225 Kurzprofil Senior - PHP/JAVA Entwickler für Backend sowie (Web)-Frontend ist ein ideenreicher Entwickler, der komplexe Sachverhalte schnell erfasst und Softwarelösungen konzeptionell sicher und zeiteffizient

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

- Entwurfsphase: Entwurfsbeschreibung Gesamtsystem - Version: 1.0

- Entwurfsphase: Entwurfsbeschreibung Gesamtsystem - Version: 1.0 Projektbezeichnung Projektleiter Verantwortlich - Entwurfsphase: Entwurfsbeschreibung Gesamtsystem - Version: 1.0 MSP-13 - Integration eines Semantischen Tagging Systems in Microsoft Sharepoint Martin

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

FAQ The FAQ/knowledge base. Version 2.1.1

FAQ The FAQ/knowledge base. Version 2.1.1 FAQ The FAQ/knowledge base. Version 2.1.1 (c) 2012 OTRS AG, http://otrs.org/ GNU AFFERO GENERAL PUBLIC LICENSE Version 3, November 2007 This work is copyrighted by OTRS AG, Norsk-Data-Str. 1, 61352 Bad

Mehr

Diese Anleitung bezieht sich auf FixFoto, V 3.40. In älteren oder neueren Versionen könnte die Arbeitsweise anders sein.

Diese Anleitung bezieht sich auf FixFoto, V 3.40. In älteren oder neueren Versionen könnte die Arbeitsweise anders sein. Pfade einstellen Stand: Dezember 2012 Diese Anleitung bezieht sich auf FixFoto, V 3.40. In älteren oder neueren Versionen könnte die Arbeitsweise anders sein. Diese Anleitung soll zeigen, wie man Pfad-Favoriten

Mehr

pas:medical Personen Aufrufsystem für medizinische Anwendungen Entwickelt zur systematischen Führung von Patientenströmen pas: medical Terminal Touch

pas:medical Personen Aufrufsystem für medizinische Anwendungen Entwickelt zur systematischen Führung von Patientenströmen pas: medical Terminal Touch pas:medical Personen Aufrufsystem für medizinische Anwendungen Entwickelt zur systematischen Führung von Patientenströmen pas:medical Hardware und Software Die architektur des Aufrufsystems basiert auf

Mehr

How to: Unterstützung von Audio und Video

How to: Unterstützung von Audio und Video How to: Unterstützung von Audio und Video Dieses Dokument dient der Erläuterung von Optionen zur Unterstützung von Audio-und Videodateien in EXMARaLDA und gibt Empfehlungen für Medienformate. Inhalte A.

Mehr