Drupal – Das WebCMS der TUBAF Fortgeschrittene Übungsaufgaben zur Schulung Drupal – Das WebCMS an der TU Bergakademie Freiberg Grundlegendes Webauftritt Sie denken, einen Webauftritt braucht man nicht zu erklären? Eine Universitätswebsite ist ein komplexes Gebilde mit vielen Ziel- und Anspruchsgruppen. Ein Webauftritt ist einerseits eine Außendarstellung sowie eine Kommunikationsplattform nach außen, andererseits aber auch innerhalb der Universität. Studierende und auch Hochschulmitarbeiter wollen effizient informiert werden. Eine zentrale inhaltliche Pflege aller Seiten ist nur schwer realisierbar. Daher pflegen die zentralen Einrichtungen, Institute und Bereiche der Hochschule ihre Webseiten selbst. All diese Bereiche sind der Universität zugehörig, folglich erscheinen die Webpräsenzen auch alle im selben Corporate Design. Damit nicht nur das Rahmendesign, sondern auch die inhaltliche Aufbereitung einheitlich erfolgen kann, ohne daß jeder Bereichsredakteur über entsprechende HTML-Kenntnisse verfügt, wird ein Web-Content-Management-System verwendet. WebCMS Drupal Drupal ist eine OpenSource-Software zur Verwaltung von Inhalten. Es gewährleistet eine strikte Trennung von Inhalt und Layout und unterstützt die Universitätsmitarbeiter bei der Erstellung und Pflege ihrer Webseiten. Dabei wird auf allen Seiten das Corporate Design angewandt, damit dem Seitenbesucher stets das Gefühl vermittelt, sich auf den Seiten von ein und derselben Universität zu befinden. Es soll damit ein einheitlicher und 1 Drupal – Das WebCMS der TUBAF lebendiger Internetauftritt der Bergakademie geschaffen werden. Die Universität hat sich für das WebCMS Drupal entschieden. Schulungsbereich für diese Schulung Server: http://drupal2.hrz.tu-freiberg.de/login Login: zentrales URZ-Login Passwort: zugehöriges Passwort Geben Sie die o.g. Adresse in den Browser ein. Sie werden nun nach Ihrem zentralen Login gefragt. Für die heutige Schulung werden wir uns im „Schulungsbereich“ bewegen. Dafür werden Ihnen nun die Berechtigungen eingerichtet. Sie müssen nun die Seite aktualisieren [F5 drücken]. Unterhalb sehen Sie eine blaue Leiste u.a. mit dem Reiter „Meine Gruppen“. Dort wählen Sie bitte „Schulungsbereich“ aus. Die Einsteigerschulung besteht aus einigen Übungen, die Ihnen die erweiterte Handhabung von Drupal näherbringen soll. Lesen Sie sich bitte die Aufgabenstellungen genau durch und versuchen Sie die Übungen möglichst selbstständig durchzuführen. Bei Fragen oder Problemen zögern Sie bitte nicht sich zu melden. 2 Drupal – Das WebCMS der TUBAF Übung 1 – Versionierung Vorbereitung Gehen Sie auf die Bereichshauptseite „Schulungsbereich“ und legen Sie eine neue Inhaltsseite mit dem Namen „NAME fortgeschritten“ an. Rufen Sie in einem weiteren Browser-Tab die folgende Seite auf: http://loremipsum.de/. Lassen Sie sich einen „Lorem ipsum“-Text mit 300 Zeichen generieren, kopieren Sie bitte den dort generierten Textabschnitt, fügen Sie diesen nun auf der Seite unter Textkörper ein und speichern Sie die Seite. Öffnen sie die Bearbeitung der Seite erneut und fügen Sie am Ende der Seite „NAME fortgeschritten“ einen „Lorem ipsum“ – Text mit 100 Zeichen ein. Speichern Sie diese Änderung Alte Version wiederherstellen Stellen Sie die Version der Seite „NAME fortgeschritten“ auf den Stand zurück, bevor der „Lorem ipsum“ – Text mit 100 Zeichen eingefügt wurde. Gehe Sie dazu auf den Reiter „Versionen“. In der folgenden Ansicht wählen Sie nun bei der Version unterhalb der aktuellen (gelb hinterlegt) „zurücksetzen“ Die folgende Sicherheitsabfrage sollten Sie bestätigen. Ergebniskontrolle In der Versionsübersicht taucht nun unterhalb der obersten, gelb hinterlegten Version der Hinweis „Kopie der Version vom [aktuellen Datum]“ auf. Auf der Seite selbst fehlt nun der zuvor eingefügte Textblock mit den 100 Zeichen. Hinweis: Das Auffinden der korrekten Version ist schwieriger, wenn eine Vielzahl von Versionen existiert. Zwar bietet die Versionierung eine Ansicht der jeweiligen Versionen (Klick auf das Datum), bei Einstellungen an z.B. den Veröffentlichungseinstellungen ist aber bei der Ansicht kein Unterschied festzustellen. Aus diesem Grund sollten bei wichtigen Änderungen, Versionskommentare verwendet werden. 3 Drupal – Das WebCMS der TUBAF Versionskommentare verwenden Fügen Sie am Ende von „NAME fortgeschritten“ wieder einen 100Wörter langen Lorem ipsum Text an. Zudem geben Sie unter Versionsinformationen einen Versionskommentar mit dem Text „Einen Block Lorem ipsum hinzugefügt“ an. Ergebniskontrolle In der Versionsübersicht ist der geschriebene Kommentar bei der aktuellen, gelb hinterlegten Version aufgeführt. Übung 2 – Bildergalerien Erstellen einer Galerie Erstellen Sie über „Unterseite hinzufügen“ einen Inhalt vom Typ „Bildergalerie“ mit dem Titel „Galerie NAME“ als Unterseite von „NAME fortgeschritten“. Binden Sie mit Hilfe des „Galeriebild“ - Bereiches zwei beliebige Bilder aus dem „Dateibrowser“ (Ordner „galeriebilder“) in die Galerie ein. Zum Hinzufügen des zweiten Bildes müssen Sie zunächst auf „Weiteres Element hinzufügen“ klicken. Fügen Sie im Anschluss ein Bild über die Upload-Funktion aus dem Bildverzeichnis ihres Rechners hinzu. Anschließend soll noch eines über die Funktion „URL“ eingefügt werden. Hierbei können Sie zum Beispiel Bilder der Seite http://pixabay.com/de/ verwenden. Kopieren dazu Sie den Bildlink in das dafür vorgesehen Feld. Ergänzen Sie alle eingebundenen Bilder mit einem Alternativtext und einer Beschreibung. Ergebniskontrolle Öffnen Sie die soeben erstellte Galerie über das Menü. Es sollten die eingebundenen Bilder dargestellt werden. Bei einem Klick auf ein Bild, sollte sich die „Lightbox“ mit einer vergrößerten Ansicht des Bildes öffnen. Diese enthält auch die Beschreibung des Bildes als Unterschrift. Mit den Pfeilen der „Lightbox“ sollte zwischen den eingebundenen Bildern gewechselt werden können. 4 Drupal – Das WebCMS der TUBAF Management der eingebundenen Bilder Um die folgenden Aufgaben ausführen zu können, müssen Sie über den Reiter „Bearbeiten“ wieder in die Bearbeitungsschicht ihrer Galerie gehen. Verändern Sie die Anzeigereihenfolge der eingebundenen Bilder per Dag&Drop indem Sie das durch die „URL“-Funktion hochgeladene Bild an erster Position anzeigen lassen. Klicken Sie dazu auf das kleine graue Kreuz vor dem Galerieeintrag und halten Sie die Maus gedrückt. Ziehen Sie das Bild nun an die gewünschte Position. Löschen Sie zudem das erste durch den Dateibrowser eingebundene Bild. Speichern Sie die Änderungen ab. Ergebniskontrolle Auf der Galerieseite wird das URL – Bild nun als erstes angezeigt und die Galerie besteht insgesamt nur noch aus drei Bildern. Übung 3 – Seite in andere Seite einbinden Einbinden einer anderen Seite Binden Sie an das Ende der Seite „NAME fortgeschritten“ die vorher erstellte Galerie mit dem Namen „Galerie NAME“ ein. Nutzen Sie dazu die „embed a node“ – Funktion des Editors. Wenn Sie das Symbol anklicken öffnet sich eine Suchmaske, mit Hilfe derer Sie nun über den Filter „Typ“: Bildergalerie und den Namen Ihrer Galerie ihr Galerie „Galerie NAME“ finden sollten. Wählen Sie die Galerie aus und klicken Sie nun „embed“. In den Textbereich des Editors wurde ein Kurzlink der Form [nid:xxxx] zu ihrer Bildergalerie eingefügt. Diesen können Sie bei Bedarf beliebig innerhalb Ihres Textes verschieben. Ergebniskontrolle Öffnen Sie die Seite „NAME fortgeschritten“ und überprüfen Sie, ob der Inhalt der Galerie am Ende eingebunden wird und ob die LightboxFunktion gegeben ist. 5 Drupal – Das WebCMS der TUBAF Tipp: Bei der Suche über die Funktion „embed a node“ bietet sich die Suche nach dem Seitentitel an. Bei mehreren Ergebnissen kann dies aber u.U. nicht zielführend sein. Für eindeutige Ergebnisse sollte nach der betreffenden Node-ID gesucht werden. Die Node-ID einer Seite können Sie z.B. über die Adresse der „Bearbeiten“-Seite der einzubindenden drupal-Seite in Erfahrung bringen (z.B. http://drupal2.hrz.tu-freiberg.de/node/14710/edit) Tipp: Auf diese Weise lassen sich Galerien schön in Inhaltsseiten einbinden. Der direkte Link zur Galerie kann dann ggf. aus dem Menü entfernt werden. Übung 4 – Veröffentlichungseinstellungen Seiten unveröffentlicht schalten Die Seite „NAME fortgeschritten“ befindet sich noch im Bearbeitungszustand, und soll daher noch nicht für die Öffentlichkeit sichtbar sein. Setzen Sie nach einem Klick auf „Bearbeiten“ die Veröffentlichung der Seite unter „Veröffentlichungseinstellungen“ auf nicht veröffentlicht (Haken vor „veröffentlicht“ entfernen) und speichern Sie Ihrer Arbeit ab. Ergebniskontrolle Im eingeloggten Zustand sollte die Seite nach dem speichern in der Ansicht leicht rot hinterlegt sein. Kontrollieren Sie, dass Sie die Seite ausgeloggten Zustand nicht sehen können. Hinweis: Wird eine Seite auf „nicht veröffentlicht“ gesetzt, wird auch der Menüeintrag gelöscht bzw. gar nicht erst angelegt. Seite wieder veröffentlichen Wenn Sie die Seite nun verlassen, ist sie durch den verschwundenen Menüeintrag nicht mehr aufrufbar und bei unbekannter ID und unbekanntem Alias wäre es nicht möglich wieder auf die Seite zuzugreifen. 6 Drupal – Das WebCMS der TUBAF Nutzen Sie als Lösung aus diesem Dilemma die blaue Redakteursleiste und unter Redakteur die Funktion „Seitenübersicht“. Dort sollte die Seite „NAME fortgeschritten“ zu finden sein. Stellen Sie die Seite wieder auf „veröffentlicht“. Ergebniskontrolle Der Menüeintrag ist, nachdem er verschwunden war, wieder an gleicher Stelle vorhanden und die Seite wieder normal aufrufbar. 7 Drupal – Das WebCMS der TUBAF Übung 5 – Webform Erstellung eines Formulars Erstellen Sie ein neues Webformular mit dem Titel „NAME Formular“ als Unterseite der Seite „NAME fortgeschritten“. Im ersten Fenster legen Sie den Titel und den Text oberhalb des Eintragungsfeldes fest. Speichern Sie diese Eingaben ab. Anschließend öffnet sich nun der neue Reiter „Webform“. Hier können verschiedene Felder angelegt werden und per Drag&Drop ggf. verschoben werden. Das Formular soll den folgenden Aufbau bekommen: o o o o o Anrede Vorname Nachname E-Mail Kommentare [Option auswählen] [Textfeld] [Textfeld] [E-Mail] [Textbereich] Legen Sie Felder entsprechend dieses Musters an, indem Sie Beschriftung und Typ wählen und auf „Hinzufügen“ klicken. Die anschließenden Optionen sind nur bei „Anrede“ relevant, ansonsten speichern Sie einfach nur ab. Für die Anrede müssen Sie hier die Auswahl - Optionen in der unteren Hälfte vorgeben. Setzen Sie bei Anrede, Nachname und E-Mail den Haken bei „erforderlich“ in der Felder – Übersicht. Ergebniskontrolle Öffnen Sie die das Formular und kontrollieren Sie, ob die fünf Felder angezeigt werden. Alle fünf Felder sind Pflichtfelder und sollten daher ein rotes Sternchen hinter dem Titel tragen. Das Kommentarfeld sollte unterhalb angezeigt werden. Hinzufügen eines formatierten Feldes Fügen sie dem Formular ein Feld mit der Bezeichnung „Spende“ hinzu. Das Feld soll für die Eingabe eines Eurobetrages genutzt werden. Passen Sie die Breite (5 Zeichen) sowie die Bezeichnung am Ende des Feldes („EUR“) mit Hilfe der Optionen nach dem Klicken des 8 Drupal – Das WebCMS der TUBAF „Hinzufügen“ Buttons entsprechend an. Fügen Sie den Hilfetext „Geben Sie Ihre Spendenmenge an.“ hinzu und speichern sie die Angaben ab. Ergebniskontrolle Kontrollieren Sie ob das neu erstellte Feld nun unterhalb der bereits angelegten Felder angezeigt wird. Hinzufügen eines weiteren Auswahlfeldes Fügen sie dem Formular ein weiteres Auswahlfeld (analog zu Anrede) mit der Bezeichnung „Regelmäßig“ hinzu. Es soll eine Auswahl zwischen den Optionen „monatlich“, „jährlich“ und „nein“ enthalten. Verschieben Sie im Anschluss das Feld „Kommentar“ per Drag&Drop an das Ende des Formulars. Klicken Sie dazu auf das kleine graue Kreuz vor dem Formulareintrag und halten Sie die Maus gedrückt. Ziehen Sie das Kommentarfeld nun an die gewünschte Position und speichern Sie die Konfiguration ab. Ergebniskontrolle Kontrollieren Sie das Auswahlfeld mit den drei Optionen und die Position des Kommentarfeldes. Das Formular sollte jenem auf der folgenden Seite ähnlich sehen. 9 Drupal – Das WebCMS der TUBAF Ansicht von Einträgen Füllen Sie das Formular zunächst drei oder vier Mal mit fiktiven Daten aus und schicken es ab. Probieren sie zum Vergleich auch das Eintragen in ausgeloggtem Zustand aus. Im Blauen Redakteur - Balken unten im Browser können Sie sich ganz rechts durch einen Klick auf „Abmelden“ ausloggen. Ergebniskontrolle Kontrollieren Sie im Reiter „Resultate“ ob Ihre abgeschickten Daten hier aufgeführt sind. Die als Gast eingetragenen Daten sind als solche gekennzeichnet, ansonsten ist der Nutzername angegeben. 10 Drupal – Das WebCMS der TUBAF Export von Einträgen Sie können die Einträge in das Formular über den „Resultate“-Reiter und den anschließenden Klick auf „Tabelle“ einsehen. Klicken Sie nun auf „Herunterladen“, können Sie die Daten z.B. als Excel-Tabelle zur Auswertung exportieren. Laden Sie Ihre Resultate als Excel-Tabelle herunter. Ergebniskontrolle Öffnen Sie die heruntergeladene Excel-Datei und vergleichen Sie die Einträge in der Tabelle. Sie sollten identisch sein mit den Einträgen unter „Resultate“ – „Tabelle“. 11 Drupal – Das WebCMS der TUBAF Übung 6 – Gruppe bearbeiten Ändern der Gruppenstartseite Bearbeiten Sie die Gruppendetails indem Sie auf den Reiter „Gruppe bearbeiten“ klicken und ändern Sie die Gruppenstartseite zu ihrer Seite „NAME fortgeschritten“. Ergebniskontrolle Im linken vertikalen Menü steht nun „NAME fortgeschritten“ in Blauer Schrift über den sonstigen Menüeinträgen. Beim Aufruf dieser Gruppenhauptseite wird die Seite „NAME fortgeschritten“ angezeigt. Machen Sie die Änderungen nach der Kontrolle wieder rückgängig, indem Sie die Gruppenstartseite wieder auf „Schulungsbereich“ zurücksetzen. Hinweis: Ändern Sie niemals den Namen Ihrer Gruppe. In diesem Fall verlieren Sie den Zugriff auf die Dateien in Ihrem Ordner im Dateibrowser, da dann ein neuer mit dem neuen Gruppennamen angelegt wird. Themenbereiche zuweisen Durch Zuordnung von Themenbereichen zu einer Gruppe können Pressemitteilungen [News], die von der Pressestelle zu einem Themenbereich zugeordnet wurden, auf der Gruppenstartseite angezeigt werden. Klicken Sie wieder auf „Gruppe bearbeiten“ und wählen Sie bei den Themenbereichen „Webportal“ aus. Speichern Sie die Änderung ab. Ergebniskontrolle Auf der Schulungsbereich-Startseite sehen Sie nun unter „Aktuelle Meldungen“ auch die News vom Webportal. Entfernen Sie anschließend den Haken bitte wieder. 12 Drupal – Das WebCMS der TUBAF Übung 7 – Publikationen Erstellen einer Publikation Gehen Sie in der blauen Fußleiste auf „Redakteur“ und wählen Sie dort „Inhalt erstellen“ aus. Sie möchten eine Publikation anlegen, also klicken Sie auf den Inhaltstypen „Publikationen“. Jetzt müssen Sie den Publikationstypen festlegen. Wählen Sie sich einen beliebigen aus, z.B. „Buch“. Es werden jeweils die relevanten Felder angezeigt. Die mit dem Sternchen gekennzeichneten Felder müssen ausgefüllt werden, die restlichen sind optional. Speichern Sie am Ende Ihre Eingabe. Ergebniskontrolle Alle verfügbaren Publikationen sind unter http://drupal2.hrz.tufreiberg.de/publikationen einsehbar. Überprüfen Sie, ob Sie die eben eingegebene Publikation dort auffinden können. 13 Drupal – Das WebCMS der TUBAF Übung 8 – Mehrsprachigkeit Wahl einer Sprache für eine Seite Klicken Sie auf der Unterseite von „NAME fortgeschritten“ auf den Reiter „Bearbeiten“. Unterhalb des Ediros finden das Auswahlfenster „Sprache“ Setzen Sie die Sprache auf „deutsch“. Speichern Sie diese Änderung ab. Ergebniskontrolle In der Ansicht der Seite im eingeloggten Zustand wird nun oben bei den Reitern der Reiter „Übersetzen“ angezeigt. Ansonsten sind zunächst keine Änderungen zu erkennen. Erstellen einer englischen Sprachversion Erstellen Sie für die Seite „NAME fortgeschritten“ eine englische Übersetzung in dem Sie den Reiter „Übersetzen“ wählen und dort in der Tabelle bei Englisch auf Hinzufügen klicken. Fügen Sie dem Inhalt im Editor den Text „Dies ist die englische Sprachversion“ hinzu. Ergebniskontrolle Nach dem speichern der Übersetzung, sollte die englische Version mit dem eingefügten Text angezeigt werden. Im Menü werden nun nur noch Sprachneutrale sowie englisch gesetzte Seiten angezeigt. Unten auf der Seite sowie im Kopfbereich der Seite neben der Suche werden eine deutsche bzw. eine britische Flagge zum Wechseln der Sprache angezeigt. Eine weitere Sprache Erstellen Sie für die Seite „NAME fortgeschritten“ eine weitere Sprachversion in einer beliebigen Sprache, z.B. Spanisch. Entfernen Sie anschließend die englische Sprachversion der Seite, indem Sie zunächst auf Englisch umschalten, dann auf den Reiter „Bearbeiten“ klicken und unten neben dem Speichern - Button „Löschen“ wählen. Die Sicherheitsfrage im Anschluss müssen sie bestätigen. Ergebniskontrolle Die angezeigten Flaggen auf der Seite und im Kopfbereich haben sich auf zwei Stück reduziert. 14 Drupal – Das WebCMS der TUBAF Übung 9 – Menü Um das Menü bearbeiten zu können, wählen Sie den Reiter „Gruppe bearbeiten“ aus. Dort befindet sich ganz rechts der Reiter „Menüs“. Wählen Sie nun das Menü aus. Sie sehen jetzt die Menüstruktur des gesamten Bereichs. Manuellen Menüpunkt erstellen Es ist manchmal nötig, einen zusätzlichen Menüpunkt zu erstellen. Dazu klicken Sie auf „Eintrag hinzufügen“. Unter Pfad tragen Sie die gewünschte Ziel-Adresse ein: wirtschaft/stiften-foerdern/freundefoerderer Unter „Übergeordneter Menüpunkt“ können Sie die Zugehörigkeit des neuen Menüpunktes innerhalb des Menüs festlegen. Wählen Sie hier „NAME fortgeschritten“ aus, damit der neue Menüpunkt unterhalb angelegt wird. Speichern Sie den manuellen Menüpunkt. Ergebniskontrolle Klicken Sie im Navigationsmenü auf „NAME fortgeschritten“. Der neue Menüpunkt wird nun unterhalb davon angezeigt und durch Anklicken gelangen Sie zur verlinkten Webseite. Menüpunkt deaktivieren Es kann vorkommen, dass eine Seite >10 Unterseiten bekommen soll, damit die inhaltliche Zugehörigkeit sowie der Brotkrumenpfad korrekt sind. Das Navigationsmenü muss allerdings übersichtlich bleiben. Dazu bietet es sich an, die Ansicht der betreffenden Menüpunkte zu deaktivieren. Wechseln Sie bitte wieder zur Menüübersicht. Entfernen Sie bei „NAME fortgeschritten“ den Haken in der Spalte „Aktiviert“ und speichern Sie die Konfiguration. Ergebniskontrolle Im Navigationsmenü fehlt nun der Eintrag „NAME fortgeschritten“. Hinweis: Beim Bearbeiten einer Seite befindet sich bei den Menüeinstellungen eine Option „Diesen Menüpunkt löschen.“ Dabei 15 Drupal – Das WebCMS der TUBAF handelt es sich nicht um das Deaktivieren des Menüpunkts, sondern es werden sämtliche Menüinformationen gelöscht. Das bedeutet, dass der Menüpunkt natürlich im Navigationsmenü verschwindet, aber es verschwindet auch der Brotkrumenpfad. Dieser wird durch eben jene Menüzugehörigkeit generiert. Menüeintrag verschieben Zum Abschluss der Schulung verschieben Sie bitte Ihre eigenen Seiten unter „Alte Schulungsseiten“. Dazu wechseln Sie wieder zur Menüübersicht. Sie sehen vor den Menüpunkten graue Kreuze. Über diese können Sie per Drag&Drop die Reihenfolge und Zugehörigkeit der Menüpunkte verändern. Speichern Sie die Konfiguration ab. Ergebniskontrolle Ihre „NAME fortgeschritten“-Seite ist nun unterhalb von „Alte Schulungsseiten“ eingeordnet. Hinweis: Bearbeiten mehrere Redakteure das Menü zeitgleich, kann es zu Konflikten kommen. Wird währenddessen eine Konfiguration gespeichert, werden die späteren Änderungen nicht übernommen. 16 Drupal – Das WebCMS der TUBAF Abschließendes Herzlichen Glückwunsch, Sie haben die Fortgeschrittenenschulung erfolgreich abgeschlossen. Sie sollten nun über alle relevanten Kenntnisse über das WebCMS Drupal, über die Kriterien zur Barrierefreiheit und zur Erstellung und Formatierung von Webinhalten verfügen. Sie können auf dem Test-Server auch weiterhin mit Ihrem zentralen Login üben. Feedback Füllen Sie nun bitte noch den Feedback-Fragebogen aus: http://limesurvey.hrz.tu-freiberg.de/limesurvey/index.php/596114/lang-de Fragen & Support Haben Sie Fragen, wenden Sie sich bitte ans Webteam. Sie erreichen uns unter der E-Mail-Adresse [email protected]. Weitere Informationen zu den Bedienelementen, Funktionen und Möglichkeiten zum WebCMS finden Sie auf unseren Webseiten http://tu-freiberg.de/webteam. Wenn Sie möchten, können Sie nun auch noch die Drupal-Schulung für Fortgeschrittene besuchen. 17