ework Emotional Design

ework Emotional Design Dokumentation Harald Berg Stefan Krause Ivo Trajkovic Clemens Wacha

Lizenzvertrag Diese Dokumentation wird unter den Bedingungen der Creative Commons Public License zur Verfügung gestellt [ Web-Link: http://creativecommons.org/licenses/by-nc-sa/2.0/de/ ]. Das Werk wird durch das Urheberrecht und/oder einschlägige Gesetze geschützt. Jede Nutzung, die durch diesen Lizenzvertrag oder das Urheberrecht nicht ausdrücklich gestattet ist, ist untersagt. Durch die Ausübung eines durch diesen Lizenzvertrag gewährten Rechts an dem Werk erklären Sie sich mit den Lizenzbedienungen rechtsverbindlich einverstanden. Der Lizenzgeber räumt Ihnen die in der Lizenz beschriebenen Rechte in Anbetracht dessen ein, dass Sie sich mit diesen Vertragsbedingungen einverstanden erklären.

Index Inhaltsverzeichnis Konzept einer interaktiven wissenschaftlichen Website......1 Die Website Realisation......1 1.Navigation durch die Website......1 2.Inhalte suchen......2 3.Kurze Einführung in Typo3......3 Übersicht......3 Die Modulleiste......4 Die Navigationsleiste......4 Die Detailansicht......5 4.Inhalte hinzufügen......7 5.Inhalte modifizieren......7 6.Inhalte ein- & ausblenden - Sichtbarkeit......8 7.Inhalte übersetzen......8 8.Dateien hochladen......9 9.Dateiverweise in Inhalten......11 10.Zugriffsschutz......11 Funktionsweise......11 Vertrauliche Inhalte erstellen......12 Berechtigung erteilen......12 Berechtigungen nachträglich ändern......13 11.Personengruppen......14 Besucher Frontend-Benutzer...14 Redakteure Backend-Benutzer......14 12.Technisches......14 i

Konzept einer interaktiven wissenschaftlichen Website Konzept einer interaktiven wissenschaftlichen Website Eine Website, die als Plattform für wissenschaftliche Publikationen dienen soll, muss folgende Anforderungen erfüllen können: Besucher können die Inhalte der Website lesen und kommentieren. Besuchern muss es möglich sein, ihre eigenen Inhalte zu publizieren ohne Kenntnis von HTML oder anderen Websprachen. Eine Suchfunktion ermöglicht das schnelle Auffinden von Artikeln, die auf der Website publiziert oder als PDF- oder Word-Datei verlinkt wurden. Das System muss auch den Austausch und die Speicherung von Mediendateien wie Klängen, Bildern, oder anderen Dateien erlauben. Es muss möglich sein, vertrauliche Inhalte zu definieren, auf die nicht jeder Zugriff hat. Das System muss Mehrsprachigkeit unterstützen. Das System muss für zukünftige Zwecke erweiterbar sein. Ein Content Management System (CMS) eignet sich hervorragend für die Realisation einer solchen Website, da es die Inhalte vom Layout trennt. Ein CMS zu programmieren ist keine einfache Aufgabe, da je nach Anwendungszweck andere Ansprüche an das System gestellt werden. Dass es hunderte von verschiedenen Anwendungen gibt, bestätigt die schier unübersichtliche Auswahl allein an frei verfügbaren Systemen. Unsere hohen Anforderungen haben die Auswahl aber stark reduziert. Nach detaillierten Recherchen auf diesem Gebiet entschieden wir uns für das mächtigste und unter den OpenSource CMS am weitesten verbreitete System: Typo3 1 Ausserdem gibt es viele kommerzielle Firmen, die ihre Dienstleistungen auf Basis von Typo3 anbieten, was ebenfalls für dieses Produkt spricht. Die Website Realisation Der einzige Nachteil von Typo3 ist die Komplexität des Produkts, welche durch den riesigen Funktionsumfang entsteht. Der interessierte Typo3-Benutzer sollte etwa einen halben Tag Einarbeitungszeit einplanen, um mit dem System vertraut zu werden. Diese Dokumentation soll einen ersten Überblick vermitteln und fasst die wichtigsten Punkte zusammen. Ausserdem eignet sie sich dank eines Index auch als Nachschlagewerk. Weitere gute Einführungen findet der interessierte Leser auf typo3.org. Wir möchten hier besonders auf das Handbuch für Redakteure 2 hinweisen, welches sich ebenfalls auf typo3.org befindet. 1. Navigation durch die Website Die Plattform ist bewusst schlicht gehalten und die Farbwahl so gewählt, dass gut lesbare Kontraste entstehen. Nachfolgend werden die aktiven Elemente der Internetseite aufgelistet und z.t. kurz erklärt: 1 Zu finden auf http://www.typo3.org 2 Typo3 Handbuch für Redakteure http://typo3.org/documentation/document-library/doc_tut_editor_ger/ 1

Emotional Design Dokumentation Suche Login Passwort Feld (Angemeldete Besucher haben Zugriff auf bestimmte vertrauliche Informationen) Menü für die Administration Hauptmenü (enthält Kategorien mit den Publikationen) Neuigkeiten Bereich 2. Inhalte suchen Die Suche nach Inhalten gestaltet sich denkbar einfach. Der Suchbegriff wird in das Suchfeld eingegeben. Ein Klick auf die Lupe oder die Betätigung der Enter Taste startet die Suche. Durchsucht werden alle Publikationen, die direkt auf der Internetseite gemacht wurden oder als PDFoder Worddatei lokal verlinkt sind. Es dauert etwa 5 10 min, bis neu freigegebene Texte oder Dateien in den Index aufgenommen wurden und damit von der Suchfunktion gefunden werden können. Vertrauliche Inhalte werden nur authorisierten Besuchern angezeigt. 2

Kurze Einführung in Typo3 3. Kurze Einführung in Typo3 Inhalte werden nicht direkt auf der Website eingegeben, sondern über ein spezielles Interface. In den Dokumentationen zu Typo3 heisst dieses Interface Backend im Gegensatz zur Website selber, die Frontend genannt wird. Redakteure, die Inhalte eingeben wollen, müssen sich erst im Backend mit Benutzername und Passwort anmelden. Das Backend erreicht man durch anhängen von /typo3 an die URL der Website (Bsp: http://129.132.182.30/typo3) Übersicht Die Arbeitsoberfläche von Typo3 ist in drei Hauptbereiche unterteilt. Die Modulleiste sie dient als oberste Ebene zur Auswahl des jeweiligen Moduls, in dem Sie arbeiten möchten. Im Beispiel ist gerade das Modul Web > Liste aktiv, welches eine Liste der Objekte der Seite anzeigt. Die Navigationsleiste bildet die Navigation für das gewählte Modul ab. In unserem Beispiel wird für das Modul "Web > Liste" die entsprechende Navigationsleiste angezeigt. Sie enthält eine Baumansicht, die den logischen Aufbau der Website widerspiegelt. Die Detailansicht stellt den eigentlichen Arbeitsbereich für den Nutzer dar. Unser Beispiel zeigt hier den Inhalt der gerade ausgewählten Seite als Liste. 3

Emotional Design Dokumentation Auf der Oberfläche sind darüber hinaus immer präsent: Logout wenn sie eine Arbeitssitzung beenden möchten, melden Sie sich mit dem Button ab. Typo3 speichert Ihre letzte Arbeitsposition und kehrt beim nächsten Einloggen an die Stelle zurück. Benutzer es wird immer der aktuell angemeldete Benutzer angezeigt. Die Modulleiste Die Modulleiste dient zur Auswahl des jeweiligen Arbeitsbereiches. Für den Redakteur werden hier die Bereiche "Web" und "Dok." arbeitsrelevant sein. Innerhalb des jeweiligen Modul-Bereiches werden die dazugehörigen Module angezeigt. Die Navigationsleiste Haben Sie ein Modul (z.b. "Web > Seite") durch einen Klick mit der linken Maustate gewählt, steht Ihnen in der Navigationsleiste das dazugehörige Menü zur Verfügung. Im Modul-Bereich "Web" ist es der Seitenbaum der Anwendung. Für das Modul "Datei" ist es ein Baum von Ordnern, in denen Bilder, Downloads etc. abgelegt sind und für "Benutzer > Aufgaben" bekommen Sie ein weiteres Menü u.a. mit Ihrem Notizbuch. Da Redakteure am häufigsten das Modul "Web" verwenden, stellen wir hier exemplarisch den Seitenbaum der Navigationsleiste vor. Die Ansicht gibt die Struktur Ihrer Website baumartig wieder. 4

Kurze Einführung in Typo3 Ganz oben steht die Rootseite, Sie stellt die Hauptseite der Homepage dar. Von ihr zweigen sich die einzelnen Ebenen ab. In unserem Beispiel wäre "ework Emotional Design" die Rootseite, "Emotional Design" die erste Ebene, "Startseite" die zweite Ebene, "Emotionen im Allgemeinen" die dritte Ebene usw. Einzelne Ebenen können Sie einblenden oder ausblenden. Vor dem jeweiligen Seitentitel gibt ein Icon den Typ und den Status der Seite wieder. In unserm Beispiel handelt es sich um eine Seite des Typs "Standard" oder "Erweitert", sie ist freigeschaltet - d.h. online zu sehen - und sie hat den Titel "Links". Am Ende des Seitenbaumes können Sie mittels Reload die Ansicht jederzeit aktualisieren. Die Detailansicht Im Bereich der Detailansicht liegt das zentrale Arbeitsfeld von Typo3. Hier werden die Informationen und Bearbeitungsmöglichkeiten für das von Ihnen ausgewählte Element (z.b. einer Seite) abgebildet. Die Ansicht passt sich dem übergeordneten Modul an. In unserem Beispiel öffneten wir das Modul "Web > Liste" und klickten auf die Seite "Emotionen im Allgemeinen" in der Navigationsleiste. Im Bereich der Detailansicht erscheint die Listenansicht aller Datensätze für die Seite "Emotionen im Allgemeinen". 5

Emotional Design Dokumentation Im Kopf der Detailansicht finden Sie in der Regel den Pfad für das geöffnete Element und Icons zur weiteren Bearbeitung desgleichen. Da wir das Modul "Web > Liste" gewählt haben wird der Inhalt der Seite in Form einer Liste dargestellt. Das Modul "Web > Seite" führt in dem Bereich Informationen zur Seite, während die Bearbeitungsmöglichkeit der Inhalte im Schnellbearbeitungs-Modus oder in der Spaltenansicht möglich sind. Im unteren Bereich der Detailansicht stehen Ihnen je nach gewähltem Modul mehrere Checkboxen zu Verfügung. Mit ihrer Hilfe ist es in unserem Beispiel möglich, die Ansicht und Berarbeitungsmöglichkeiten zu erweitern, oder das Klemmbrett zum Kopieren oder Verschieben von Elementen anzeigen zu lassen. In der Fußleiste erlaubt Ihnen eine globale Suche das schnelle Auffinden von einzelnen Seiten und Elementen. 6

Inhalte hinzufügen 4. Inhalte hinzufügen Falls Sie sich im Backend noch nicht angemeldet haben, tun Sie das bitte jetzt (Das Backend erreichen Sie über http://129.132.182.30/typo3 ). 1. Klicken Sie in der Modulansicht auf Web > Seite. 2. Wählen Sie in der Navigationsleiste die Seite aus, in die Sie Inhalte hinzufügen wollen. Klicken Sie dazu auf den Seitentitel und nicht auf das Symbol links davon. Nun erscheinen in der Detailansicht sämtliche bereits vorhandenen Inhalte. 3. Stellen Sie sicher, dass im Menü rechts oben Spalten ausgewählt ist. 4. Klicken Sie auf den Knopf Neuer Inhalt. 5. Wählen Sie aus der Übersicht den Typ Ihres Inhalts aus. 6. Wählen Sie die Position innerhalb der Seite aus, wo Ihr neuer Inhalt erscheinen soll. 7. Die einzelnen Felder sind selbsterklärend. Über das Menü Typ lässt sich der in Punkt 5 gewählte Typ nochmals ändern. 8. Schliessen Sie die Eingabe ab, indem Sie auf einen der Knöpfe am unteren Rand des Fensters klicken. Die Knöpfe bedeuten von links nach rechts: Speichern, Speichern & Seite betrachten, Speichern und Seite schliessen, Eingabe abbrechen. Der Inhalt ist nach dem Abspeichern sofort im Frontend (also auf der Website) sichtbar. 5. Inhalte modifizieren Bereits eingegebene Inhalte können leicht modifiziert werden. 1. Klicken Sie in der Modulansicht auf Web > Seite. 2. Wählen Sie in der Navigationsleiste die Seite aus, in die Sie Inhalte hinzufügen wollen. Klicken Sie dazu auf den Seitentitel und nicht auf das Symbol links davon. Nun erscheinen in der Detailansicht sämtliche bereits vorhandenen Inhalte. 3. Stellen Sie sicher, das im Menü rechts oben Spalten ausgewählt ist. 4. Klicken sie in der Detailansicht direkt auf den Inhalt, den Sie bearbeiten möchten. 5. Speichern Sie Ihre Änderungen ab. Alternativ dazu können Sie Inhalte auch über das Modul Web > Liste verwalten. 1. Öffnen Sie das Modul Web > Liste. 2. Wählen Sie in der Navigationsleiste die Seite aus, deren Unterseiten und Inhalte Sie bearbeiten wollen. Klicken Sie dazu auf den Seitentitel und nicht auf das Symbol links davon. 3. Durch Aktivieren der Checkbox Erweiterte Ansicht wird eine Menüleiste mit Icons zur Bearbeitung der Inhalte angezeigt. Mittels der Icons können Sie die Aktionen ausführen: "Website anzeigen" "Datensatz bearbeiten" "Datensatz Verschieben" 7

Emotional Design Dokumentation "Änderungsverlauf anzeigen" "Neuen Datensatz nach diesem Datensatz anlegen" Innerhalb der Seite können Sie den Datensatz "Nach unten verschieben" "Nach oben verschieben" den "Datensatz verbergen" den "Datensatz nicht verbergen" den "Datensatz löschen (!)" 6. Inhalte ein- & ausblenden - Sichtbarkeit Wenn Sie Inhalte verbergen, oder wieder sichtbar machen wollen, folgen Sie der alternativen Anleitung im Kapitel 7 Inhalte modifizieren. 7. Inhalte übersetzen Öffnen Sie das Modul Web > Seite. Klicken Sie auf den Titel der Seite, deren Inhalte Sie übersetzen wollen. Wählen Sie im Menü den Eintrag Sprachen aus. Nun sehen Sie in der Detailansicht alle Sprachen gegenübergestellt. Erstellen Sie neue Inhalte in der gewünschten Sprache oder übersetzen Sie bereits vorhandene Artikel wie Sie es bereits aus Kapitel 7 Inhalte hinzufügen kennen. 8

Inhalte übersetzen 8. Dateien hochladen Um Dateien in Typo3 hochzuladen gehen Sie wie folgt vor: Öffnen Sie das Modul Datei > Dateiliste. Klicken Sie auf das Symbol des Ordners, in den Sie die Datei ablegen möchten, jedoch nicht auf den Ordnertitel selbst. Je nach Browser öffnet sich entweder ein Kontextmenü oder eine Menüleiste am oberen Rand des Fensters. Klicken Sie auf den Menüeintrag Datei-Upload. 9

Emotional Design Dokumentation Klicken Sie im Detailbereich auf Durchsuchen und wählen Sie die Datei aus, welche Sie hochladen möchten. Klicken Sie auf den Knopf Upload, um den Prozess abzuschliessen. 10

Dateiverweise in Inhalten 9. Dateiverweise in Inhalten 1. Erstellen Sie einen neuen Inhalt wie in Kapitel 7 Inhalte hinzufügen beschrieben. Wählen Sie als Typ Dateilinks. 2. Klicken Sie im Bereich Dateien auf das Symbol Durch Dateien browsen. 3. Es öffnet sich ein neues Fenster mit der Baumansicht des Datei-Moduls. Wählen Sie den Ordner und die Dateien, die Sie verlinken möchten. 4. Schliessen Sie den Vorgang wie gewohnt ab. 10.Zugriffsschutz Typo3 kennt zwei unterschiedliche Zugriffsregelungen. Die eine betrifft Backend-Benutzer und legt fest, welche Backend-Benutzer (Redakteure) welche Seiten betrachten, bearbeiten und löschen können. Die andere Regelung legt fest, welche Inhalte durch Frontend-Benutzer einsehbar sind. Die beiden Regelungen überschneiden sich nicht und sind immer gleichzeitig gültig. Normalerweise legen Administratoren 3 die Zugriffsrechte für Backend-Benutzer fest während Backend- Benutzer die Rechte für Frontend-Benutzer einstellen. Funktionsweise Typo3 lehnt sich in der Zugriffsregelung stark an Unix an. Jede Seite kennt drei verschiedene Rechte: Die Rechte des Eigentümers (ein Backend-Benutzer) Die Rechte der Gruppe (eine Backend-Benutzergruppe) Die Rechte aller anderen (Nicht-Eigentümer und Nicht-Gruppenmitglieder) Gruppen sind hier Zusammenschlüsse von Eigentümern. Für jeden dieser drei Punkte lassen sich folgende Einstellungen vornehmen: Zeige Seite: Zeige/Kopiere Seite und Inhalt. Bearbeite Inhalt: Ändere/Füge hinzu/lösche/verschiebe Inhalt. Bearbeite Seite: Ändere/Verschiebe Seite, (Seitentitel etc.) Lösche Seite: Lösche Seite und Inhalt. Neue Seiten: Neue Seiten unter dieser Seite. Definition: 'Inhalt' sind alle Datensätze auf einer Seite ausser Datensätze der Tabelle 'pages' (Pages). Etwas differenzierter fällt die Steuerung der Zugriffsrechte für Frontend-Benutzer aus: Jedem Objekt (Seite bzw. Inhalt) lässt sich genau eine (Frontend-) Benutzergruppe zuordnen, welche das Objekt einsehen kann. Wird keine Gruppe ausgewählt, haben alle Zugriff (also auch Besucher die sich nicht angemeldet haben). 3 Administratoren sind spezielle Backend-Benutzer, die sämtliche Rechte besitzen. 11

Emotional Design Dokumentation Frontend-Benutzer können in mehreren Gruppen Mitglied sein, was sich für jeden Frontend-Benutzer separat einstellen lässt. Vertrauliche Inhalte erstellen Vertrauliche Inhalte werden genau wie normale Inhalte erstellt. Siehe dazu auch Kapitel 7 Inhalte hinzufügen. Bevor Sie den Datensatz abspeichern, können Sie nun im Abschnitt Allgemeine Optionen im Feld Zugriff die Frontend-Benutzergruppe auswählen, welche das Objekt einsehen darf. Unter Umständen müssen Sie erst eine geeignete Benutzergruppe erstellen. Wie das geht, erfahren Sie im Kapitel Berechtigung erteilen. Speichern Sie Ihre Änderungen ab. Berechtigung erteilen Um einer Person Zugriff auf bestimmte Inhalte zu erteilen, muss für diese Person zunächst ein Frontend-Benutzer erstellt werden. Wählen Sie in der Modulleiste das Modul Web > Liste. Klicken Sie in der Navigationsleiste auf den Benutzerordner User. Klicken Sie im Abschnitt Website Benutzer auf den Knopf Datensatz anlegen. 12

Zugriffsschutz Alternativ können Sie auch eine neue Frontend-Benutzergruppe anlegen. Klicken Sie im Abschnitt Website Benutzergruppe auf den Knopf Datensatz anlegen. Füllen Sie die Felder mit: Benutzername Passwort Wählen Sie aus der Rechten Liste die Gruppen aus, in denen der Benutzer Mitglied sein soll, indem Sie darauf klicken. Um einzelne Gruppen wieder zu entfernen, wählen Sie die Gruppe in der linken Liste aus und klicken Sie auf das Papierkorb-Symbol. Speichern Sie ihre Änderungen ab. Analog können Sie auf demselben Weg eine neue Benutzergruppe erstellen. Berechtigungen nachträglich ändern Wenn Sie die Zugriffsberechtigugen eines Objekts ändern wollen, öffnen Sie das Objekt wie in Kapitel 7 Inhalte modifizieren beschrieben und ändern Sie im Abschnitt Allgemeine Optionen die Gruppe, die Zugriff haben soll. Falls die Berechtigungen eines Frontend-Benutzer geändert werden sollen, öffnen Sie den Benutzer: Wählen Sie in der Modulleiste das Modul Web > Liste. 13

Emotional Design Dokumentation Klicken Sie in der Navigationsleiste auf den Benutzerordner User. Falls noch nicht geschehen, aktivieren Sie die Checkbox Erweiterte Ansicht. Klicken Sie auf "Datensatz bearbeiten". Fügen Sie neue Gruppen hinzu oder entfernen Sie einzelne Gruppen indem Sie sie auswählen und anschliessend auf das Papierkorb-Symbol klicken. 11.Personengruppen Besucher Frontend-Benutzer Frontend-Benutzer sind Besucher Ihrer Website. Besucher können alle Inhalte der Website betrachten, für die keine speziellen Zugriffsrechte eingestellt wurden. Um dennoch vertrauliche Inhalte einzusehen, müssen sich Besucher auf der Website mit ihrem Benutzernamen und Passwort anmelden. Für nähere Informationen dazu siehe Kapitel 11 Zugriffsschutz. Redakteure Backend-Benutzer Backend-Benutzer sind Redakteure, die Inhalte anlegen, verändern und löschen können. Um das zu tun, müssen sich Redakteure erst im Backend (dem Interface der Website) anmelden. Geben Sie hierzu folgende Adresse in den Browser ein: http://129.132.182.30/typo3 12.Technisches Typo3 ist ein OpenSource CMS, das auf PHP und MySQL aufbaut. Auf dem Emotional Design Server wurde ein Debian GNU/Linux 3.0 installiert sowie die folgenden wesentlichen Programme: Apache (1.3.26) MySQL (3.23.49) PHP (4.1.2) Typo3 (3.7.0) Das System hält sich automatisch auf dem neuesten Stand, indem es wöchentlich eventuelle Sicherheitsupdates runterlädt und installiert. Zudem wird täglich von der ganzen Website (inkl. aller Inhalte) ein Backup angelegt. Sollten diese Automatismen fehlschlagen, werden automatisch e-mails verschickt. 14

Index Index Administrator 11 Arbeitsbereich 3f. Ausblenden i, 5, 8 Backend i, 3, 7, 11, 14 Backend-Benutzer i, 11, 14 Backup 14 Baumansicht 3, 11 Benutzer 1, 3f., 11ff. Benutzergruppe 11ff. Benutzerordner 12, 14 Besucher 1f., 11, 14 Checkbox 6f., 14 CMS 1, 14 Dateiliste 9 Debian 14 Detailansicht i, 3, 5ff. Ebene 2f., 5, 7 Eigentümer 11 Einarbeitungszeit 1 Einblenden 5 Erweiterte Ansicht 7, 14 Frontend i, 3, 7, 11ff. Frontend-Benutzer i, 11ff. Hauptmenü 2 Index 1f. Interface 3, 14 Kategorie 2 Klemmbrett 6 Linux 14 Login 2 Logout 4 Lupe 2 Modulleiste i, 3f., 12f. MySQL 14 Navigationsleiste i, 3ff., 7, 12, 14 Neuigkeit 2 Objekt 3, 11ff. OpenSource 1, 14 Papierkorb 13f. Passwort 2f., 13f. PDF 1f. PHP 14 Redakteur 1, 3f., 11, 14 Root 5 Sicherheitsupdate 14 Sprache 1, 8 Suche 1f., 6, 10f., 14 Update 14 Upload 9f. User 12, 14 Vertraulich 1f., 12, 14 Word 1f. Zugriff 1f., 11ff. Zugriffsrecht 11, 14 i