Erste Hilfe Roxen
SOZ-IT
Roxen Basics: Grundlegendes zum Erstellen und Bearbeiten von Webseiten
Die Roxen Basics verdeutlichen die grundlegenden Funktionen und Abläufe die notwendig sind, um innerhalb von Roxen zu navigieren, Webseiten zu erstellen, zu bearbeiten, zu speichern und zu "publishen". Ebenfalls wird erklärt wie Änderungen am Menü vorzunehmen sind.
Die inhaltliche Aufbau der Roxen Basics orientiert sich am idealtypischen Bearbeitungsprozess einer Webseite und ist wie folgt strukturiert:
- Schreibrechte: Beschreibt die Beantragung von Schreibrechten in Prisma.
- Rechte und Login: Zeigt den Roxen-Login und wie innerhalb des Content Editors navigiert wird.
- Insite Editor: Mit Hilfe des Insite Editors werden einzelne Webseiten bearbeitet. Es werden hier die einzelnen Funktionen des Insite Editors erklärt.
- Webseite bearbeiten: Hier wird dargestellt, wie eine Webseite bearbeitet und durch einzelne Komponenten erweitert wird.
- Webseitenaufbau: Eine kurze Erklärung zum Aufbau und zur Struktur von Webseiten in Roxen mit Fokus auf die Landing Page und Portal Page.
- Menü: Erläuterung der Menü-Einstellungen, insbesondere das Ändern der Reihenfolge von Menü Items sowie das Erstellen von Menü Links.
- Schreibrechte
Um Seiten im Roxen17 bearbeiten zu können sind Schreibrechte notwendig. Diese müssen in Prisma beantragt werden.
- Einloggen (in Form: kmustermensch / passwort) im PRISMA-Portal unter prisma.uni-bielefeld.de
- Nach dem Login auf der Prisma-Startseite, auf das grüne Quadrat zu Bestellung klicken
- Anschließend auf auf das grüne Quadrat zu CMS [Roxen] klicken.
- Jetzt erscheint eine Übersicht mit veschiedenen Bestelloptionen. Die Schreibrechte werden unter dem vierten Punkt CMS: Schreibberechtigung für einen Ordner bestellt. Bitte geben Sie bei Grund an, in welcher Funktion Sie die Rechte beantragen (z.B. Hilfskraft in der AG Kieserling).
Personen, die nicht im PEVZ eingetragen sind, lassen sich für uns so besser zuordnen. Personen, die wir nicht zuordnen können erhalten keine Schreibrechte!
Schreiben Sie uns bitte eine Mail an soz.kom@uni-bielefeld.de, wenn Ihre Rechte nicht genehmigt worden sind.
Das Bild zeigt eine Übersicht an Auswahlmöglichkeiten. Sollten keine Auswahlmöglichkeiten angezeigt werden, wenden Sie sich bitte an soz.kom@uni-bielefeld.de.
5. Im Auswahlfenster den entsprechenden Ordner auswählen. Die Ordner der Fakultät sind unter fakultaeten/soziolgie/ zu finden.
6. Abschließend wird die Bestellung bestätigt und der Einkaufswagen abgeschickt.
- Login
Um Webseiten in Roxen zu erstellen oder zu bearbeiten ist zuerst das Einloggen in Roxen notwendig. Der Roxen-Login erfolgt mit dem (Web)-Shibboleth Konto in Form (Vorname: Person, Nachname: Mustermensch) pmustermensch / passwort über folgende URL: cmsedit.uni-bielefeld.de/edit/
Nach Genehmigung der Schreibrechte können bis zu 60 Minuten vergehen, bis Anlegen und Bearbeiten von Webseiten in Roxen17 möglich ist.
Nach einem erfolgreichen Roxen-Login erscheint die Benutzeroberfläche des Roxen Content Editors. Der Content Editor stellt die Webseiten der Universität als Ordnerstrukturen dar und ermöglicht eine schnelle Webseiten-Navigation innerhalb der Ordner-Ansicht. Die Abbildung unterhalb zeigt die Ansicht des Content Editors direkt nach dem erfolgreichen Login. Diese Ordner stellen die erste Ebene der Ordnerstruktur dar.
Ansicht des Content Editors direkt nach dem erfolgreichen Login. Um eine Webseite zu bearbeiten, muss der Ordner in dem sich die Webseite befindet, im Content Editor geöffnet werden. Hierzu klickt man sich durch Ordnerstrukturen des Content Editors, bis der Ordner mit der Webseite erreicht ist. Die Abbildung unterhalb zeigt beispielhaft den Klick-Pfad zum Ordner des Arbeitsbereichs 1 (/fakultaeten/soziologie/fakultaet/arbeitsbereiche/ab1) der Fakultät für Soziologie. Um den Ordner des Arbeitsbereichs 1 zu öffnen, muss auf die Plus-Symbole vor den Ordnern geklickt werden, die zum Ordner des Arbeitsbereichs 1 führen.
Der Klick-Pfad zum Arbeitsbereich 1 (ab1) der Fakultät für Soziologie Um die Webseite des Arbeitsbereichs 1 zu bearbeiten, muss zuerst auf den Ordner des Arbeitsbereichs 1 „ab1“ geklickt werden. Auf diese Weise wird der Ordner geöffnet und die Dateien, die sich dem Ordner befinden, dargestellt. Die Abbildung unterhalb bildet dies ab.
Darstellung der Inhalte des Ordners des Arbeitsbereichs 1. Als nächstes wird auf den Button „Insite Editor“ (rechts oben) geklickt. Dies öffnet die Webseite der Arbeitsgruppe 1 im Insite Editor. Sobald die Webseite im Insite Editor geöffnet ist, gelangt man durch Anklicken des Stift-Symbols mit dem Titel „Edit“ in den Bearbeitungsmodus des Insite Editors. Die gewünschten Änderungen an der Webseite werden hier umgesetzt.
Button zum Öffnen des Bearbeitungsmodus des Insite Editors. Die grundlegen Funktionen des Insite Editors, die zur Bearbeitung von Webseiten notwendig sind, werden im Bereich Insite Editor erklärt.
- Insite Editor
Webseiten bearbeiten, Bilder hochladen, Webseiten-Titel ändern und Publishen
Der Insite Editor ist neben dem Content Editor ein Werkzeug um Webseiten zu bearbeiten und die Ordnerstruktur innerhalb von Roxen zu ändern. Der Fokus des Insite Editors liegt auf der Bearbeitung von Webseiten-Inhalten. Auf Basis einzelner Komponenten können Text, Bilder und andere Dokumente innerhalb einer Webseite platziert werden. Der Insite Editor wird über das Stift-Symbol mit dem Titel „Edit“ geöffnet. Dieses Symbol befindet sich oberhalb der jeweiligen Webseite und ist nach erfolgreichem Roxen-Login sichtbar.
Ansicht des Insite Editors | © Universität Bielefeld Der Insite Editor setzt sich aus vier Abschnitten zusammen: (1) Webseiten-Inhalte und Drop-Bereich, (2) Komponenten, (3) Mittelbereich sowie (4) Speichern, Abbrechen und Metadata. Im Folgenden wird ein kurzer Überblick zu den einzelnen Abschnitten des Insite Editor gegeben.
1. Webseiten-Inhalte und Drop-Bereich
Auf der linken Seite des Insite Editors befindet sich der Webseiten-Inhalt und Drop-Bereich. Hier werden die Komponenten (dunkelgraue längliche Pfeilsymbole) angezeigt, aus denen sich die Webseite zusammensetzt. Durch Anklicken, Ziehen und Loslassen („drag-and-drop“) von Komponenten aus dem Komponenten-Bereich in den Drop-Bereich wird die Webseite inhaltlich erweitert.
Auf einer neu angelegten Webseite sind bereits die Komponenten „Page Options“ und „Cover“ sowie „Section Content“ und „Text and Picture“ enthalten. Diese Komponenten beinhalten bereits Text und Bilder sowie gewisse Voreinstellungen, die das Webseiten-Layout beeinflussen. Komponenten können ebenfalls andere Komponenten beinhalten, auf diese Weise werden komplexere Webseiten-Layouts erzeugt.
2. Komponenten
Der Komponenten-Bereich befindet sich rechts unten. Die Inhalte und die Struktur einer Webseite werden auf Basis von Komponenten erzeugt, sie bilden die Grundbausteine einer Webseite. Per drag-and-drop werden die Komponenten in den Drop-Bereich gezogen und auf diese Weise in die Webseite integriert.
Ansicht des Komponenten-Bereichs | © Universität Bielefeld Roxen verfügt über eine Vielzahl an Komponenten mit denen sich verschiedene Webseiten-Inhalte und -Layouts erzeugen lassen. In der Regel werden auf den bestehenden Webseiten nur einige grundlegende Komponenten verwendet.
3. Mittel-Bereich: Hauptsächlich zum Dateien hochladen
Der Mittelbereich befindet sich neben dem Drop-Bereich und beinhaltet unter anderem die Upload-Funktion. Ein Klick auf das Symbol mit dem nach oben zeigenden Pfeil macht den Button für die Dateiauswahl sichtbar. Der Upload der Datei erfolgt durch das Anklicken des grünen Kreissymbols mit dem weißen Pfeil. Die hochgeladene Datei wird anschließend unterhalb der Symbole aufgelistet.
Per Klick auf das Haus-Symbol kann die Roxen-Ordnerstruktur navigiert werden. Bilder oder andere Dateien können auf diese Weise in die Webseite eingebunden werden. Ein Klick auf das Blatt-Symbol zeigt die Dateien an, die sich im gleichen Ordner wie die Webseite befinden. In der Regel ist für den grundlegenden Umgang mit Roxen nur die Upload-Funktion von Relevanz.
4. Webseiten-Titel, Speichern und Abbrechen
Dieser Bereich befindet sich rechts oben im Insite Editor. Im Untebereich „Metadata“ können verschiedene Eingaben zur Webseite getätigt werden, wie beispielsweise der Titel der Webseite. Zusätzlich können der Autor der Webseite oder die Sichtbarkeitseinstellungen der Webseite hier geändert werden. Für den grundlegenden Umgang mit Roxen ist im Wesentlichen das „Title“-Feld von Interesse. In diesem Feld kann der Name oder Titel der Webseite geändert werden. Der Titel der Webseite ist ebenfalls die Bezeichnung des Links der Webseite im Menü.
- Webseite bearbeiten
Einzelne Webseiten werden im Insite Editor bearbeitet. Um in den Bearbeitungsmodus des Insite Editors zugelangen, wird in der Webseiten-Ansicht des Insite Editors das Stift-Symbol mit dem Titel „Edit“ angeklickt. Dieses Symbol ist nur nach erfolgreichem Roxen-Login sichtbar.
Per Klick auf das Stift-Symbol wird der Insite Editor geöffnet. Sobald der Bearbeitungsmodus des Insite Editors geöffnet ist, können Änderungen an der Webseite vorgenommen werden. Die Abbildung unterhalb zeigt den Drop-Bereich des Insite Editors inklusive einzelner Komponenten. Diese Komponenten werden beim erstellen einer neuen Webseite automatisch angelegt und erzeugen die Struktur sowie den inhaltlichen Aufbau der Webseite.
Komponenten platzieren per Drag-and-Drop
Durch das Platzieren einzelner Komponenten im Drop-Bereich wird eine Webseite inhaltlich ausgestaltet. Hierfür wird eine Komponente aus dem Komponenten-Bereich angeklickt und in den Drop-Bereich gezogen. Die im Drop-Bereich abgelegten Komponenten können dann anschließend mit Inhalten gefüllt werden.
Einzelne Komponenten werden angeklickt und in den Drop-Bereich gezogen. Das Anklicken, Ziehen und Ablegen (drag-and-drop) von Komponenten im Drop-Bereich ist der grundlegende Ablauf für das inhaltliche Erweitern einer Webseite.
Richtige Platzierung von Komponenten
Wenn einzelne Komponenten im Drop-Bereich abgelegt werden, ist es wichtig auf die Platzierung zur achten. Die Abbildung unterhalb verdeutlicht dies anhand einer Section-Content- und Text-and-Picture-Komponente. Für eine korrekte Darstellung der Text-and-Picture-Komponente, muss diese Komponente innerhalb der Section-Content-Komponente platziert werden. Die Einrückung am linken Rand (grüne Fläche) der Text-and-Picture-Komponente symbolisiert eine korrekte Platzierung. Eine Platzierung der Text-and-Picture-Komponente außerhalb der der Section-Content-Komponente führt dazu, dass die Text-and-Picture-Komponente auf der Webseite nicht angezeigt wird.
Richtige und falsche Platzierung einer Text and Picture von Komponente. Die Platzierung von Komponenten betrifft im Wesentlichen die Section Content Komponente. Aufgrund der häufigen Verwendung und der Funktion einer „Container Komponente“ für grundsätzlich alle anderen Komponenten passieren hier am häufigsten Fehler.
Änderungen speichern und publishen
Wenn der Bearbeitungsvorgang der Webseite abgeschlossen ist, werden durch Anklicken von „Save Page“ die vorgenommenen Änderungen gespeichert. Der Insite Editor schließt sich und es wird die geänderte Webseite angezeigt. Die aktuelle geänderte Version der Webseite ist nur für den Author*in sichtbar. Durch Anklicken von „Publish“ wird die Webseite veröffentlicht und für alle Besucher*innen sichtbar.
- Webseitenaufbau
Layout-Varianten: Portal Page und Following Page
Das Layout einer Webseite lässt sich im Insite Editor in der Page Options Komponente unter der Einstellung „Force page type“ ändern. Die relevanten zur Auswahl stehenden Layout-Varianten sind „Following Page“ und „Portal Page“. Mit Hilfe dieser beiden Layout-Varianten kann die Struktur oder das Raster einer Webseite auf unterschiedliche Art und Weise aufgeteilt werden.
Das Following Page Layout untereilt die Webseite in drei Spalten. Eine breite Mittelspalte und zwei schmale Spalten rechts und links der Mittelspalte. Das Seiten-Menü wird in der linken Spalte angezeigt. In der rechten Seitenspalte wird in der Regel die Sidebar Komponente verwendetet, um weitere Inhalte zu platzieren. Die Hauptinhalte werden in der Mittelspalte platziert. Diese Layout-Variante wird am häufigsten genutzt.
Das häufig verwendete drei-spaltige Webseiten-Layout einer Following Page. Auch diese Webseite nutzt das drei-spaltige Layout. In der rechten Spalte (Sidebar) wurde jedoch kein Inhalt bereitgestellt.
Das Portal Page Layout teilt die Webseite in zwei Spalten. Da das Seiten-Menü bei dieser Layout-Variante nicht angezeigt wird, müssen alternative Menü-Strukturen angelegt werden, um Unter-Webseiten zu navigieren. Diese alternativen Menü-Strukturen können mit Hilfe der Highlight Links Komponente oder der Section-Teaser-Komponente, in Form anklickbarer Kacheln, erzeugt werden.
Das Webseiten-Raster in Roxen
Das Following Page und Portal Page Layout erzeugen verschieden Webseiten-Strukturen. Diese Strukturen basieren auf einem unterliegenden Webseiten-Raster, das die Anordnung der einzelnen Roxen-Komponenten innerhalb der Webseite beeinflusst.
In Roxen existieren zwei Raster-Varianten: Ein drei-spaltiges Raster (Following Page) und ein zwei-spaltiges Raster (Portal Page). Die Anordnung einzelner Komponenten wird von den Raster-Varianten beeinflusst. Werden bespielweise im zwei-spaltigen Portal Page Layout in einer Section Content Komponente zwei Text and Picture Komponenten platziert, so erscheinen diese Komponenten auf der Webseite nebeneinander. Im Following Page Layout hingegen, werden die beiden Text and Picture Komponenten auf der Webseite untereinander angezeigt.
(Bild)
Sollen die beiden Text and Picture Komponenten im Portal Page Layout untereinander angezeigt werden, so müssen die Komponenten in zwei Section Content Komponenten platziert werden. Mit Hilfe der Section Content Komponente kann auf diese Weise eine Art Zeilenumbruch für andere Komponenten erzielt werden.
Gliederung der Webseite mit der Section Content Komponente
Die inhaltliche Gliederung einer Webseite kann in Roxen frei umgesetzt werden. Es lässt sich beispielweise eine inhaltliche Gliederung durch die Aneinanderreihung von Text and Picture Komponenten erzielen. Idealerweise trennt man einzelne Abschnitte einer Webseite mit Hilfe der Section Content Komponente. Dieses Vorgehen hat den Vorteil, dass der Inhalt der Webseite über das Seiten-Menü navigierbar ist. Der Titel der Section Content Komponente wird unter dem grünen Trennstrich im Seiten-Menü angezeigt.
(Bild)
Zusätzlich vermeidet diese Form der Webseitenaufteilung das Hoch- und Nebeneinander-Rutschen von Komponenten. Text Komponenten, die im Insite Editor in jeweils zwei Section Content Komponenten untereinander angeordnet werden, behalten auf der Webseite ihre Anordnung bei. In Bezug auf Text and Picture Komponenten ist hiervon das Portal Page Layout betroffen.
(Bild)
Falls sich ein inhaltlich zusammenhängender Abschnitt aus mehreren Section Content Komponenten zusammensetzt kann durch eine leeres Title-Feld das Anzeigen eines Menü-Links verhindert werden.
- Menü
Aufbau und Organisation des Seiten-Menüs
- Wie baut Roxen das Seiten-Menü auf?
- Wie kann die Reihenfolge der einzelnen Menü-Links geändert werden?
- Wie geht man mit der Dropdown-Link-Problematik um?
- Wie entstehen Menü-Links unter dem grünen Strich?.
Menü-Aufbau in Roxen
Um die Entstehung und das Verhalten des Seiten-Menüs oder Menüs im Allgemeinen besser nachzuvollziehen, ist es wichtig zu verstehen wie Roxen einzelne Webseiten organisiert. Wird eine neue Webseite erstellt, legt Roxen für diese Webseite einen neuen Datei-Ordner an. Auf diese Weise entstehen für Arbeitsgruppen, Abteilungen oder die Fakultät Ordnerstrukturen in denen einzelne Webseiten abgelegt sind. Aus diesen Ordnerstrukturen generiert Roxen das Seiten-Menü, jeder Ordner wird als Menü-Link dargestellt.
Vergleich von Ordner-Struktur (Content Editor) und Menu-Struktur (Insite Editor). Die Abbildung zeigt die Menü-Struktur im Rahmen der Webseitendarstellung (links) und die Ordner-Struktur im Content Editor. Die Menü-Struktur in der Webseitendarstellung spielgelt die Ordnerstruktur im Content Editor genau wieder.
Reihenfolge der Menü-Links
Wird in Roxen eine neue Webseite angelegt, entsteht ein Menü-Link im Seiten-Menü mit dem Titel der Webseite sowie ein Ordner mit der Webseite in der Roxen-Ordnerstruktur. Da Roxen die Webseiten-Ordner alphabetisch sortiert, werden die Menü-Links ebenfalls in einer alphabetischen Reihenfolge dargestellt. Falls eine andere Reihenfolge der Menü-Links notwendig ist, kann die Anordnung wie folgt geändert werden:
Öffnen der Menü-Einstellungen im Insite Editor. - Auf das Feld „Properties“ klicken
- Auf Icon „Menü Default“ klicken
Nach dem Anklicken von des Menü-Default-Symbols öffnet sich eine Variante des Bearbeitungsmodus des Insite Editors. Im Unterschied zum Insite Editor für die Webseitenbearbeitung wird hier nur das Menü in Form einzelner Menü-Items (Menü-Links) angezeigt. Die Reihenfolge der einzelnen Menü-Items kann jetzt durch Verschieben oder drag-and-drop geändert werden.
Die Dropdown-Problematik
Sobald für eine Webseite („Parent“) eine Unter-Webseite („Child“) angelegt wird, ändert sich der Menü-Link der Parent-Webseite in ein Dropdown-Menü-Link. Per Klick kann ein Dropdown Menü mit der neu angelegt Child-Webseite geöffnet und geschlossen werden. Da der Menü-Link der Parent-Webseite in ein Dropdown-Menü-Link umgewandelt wurde, ist die Parent-Webseite momentan nicht mehr über das Menü aufrufbar.
Menu Item als Dropdown Switch (Roxen Basic) und als Menu Link (FAQs). Um dieses Problem zu lösen und die übergeordnete Parent-Webseite wieder über das Menü zugänglich zu machen, muss in dem entstandenen Unter-Menü, dem Children-Menü ein zusätzlicher Menü-Link platziert werden. Die Abbildung oberhalb zeigt den bereits integrierten Menü-Link mit dem Titel „Start“. Dieser Menü-Link verweist auf die Parent-Webseite und macht sie wieder aufrufbar.
Um den Menü-Link in das Children-Menü zu integrieren, werden zuerst die Menü-Einstellungen geöffnet. Das Öffnen der Menü-Einstellungen wurde bereits im vorherigen Abschnitt beschrieben, die Schritte lauten:
- Auf das Feld „Properties“ klicken (Insite Editor, oben)
- Auf Icon „Menü Default“ klicken (Insite Editor, links-oben)
Sobald sich die Menüeinstellungen geöffnet haben, wird aus dem Bereich „Components“ (rechts unten) die Komponente „Menü Link“ in das Menü (linke Seite) gezogen und über dem ersten Menü-Link der Unter-Webseiten, dem Child-Menü-Link, platziert.
Die Menu Link Komponente wird in den Drop-Bereich des Menus gezogen. In dem neuen Menü-Link kann jetzt der Titel und der Link zur Parent-Webseite eingegeben werden. Abschließend werden die Änderungen durch das Anklicken von „Publish“ übernommen. Die Parent-Seite verfügt nun über einen Menü-Link im Child-Menü und kann aufgerufen werden.
Menü-Links unter dem grünen Strich
Im Seiten-Menü erscheinen unterhalb des grünen Strichs weitere Menü-Links. Diese Menü-Links werden aus den Titeln der einzelnen Section-Content-Komponenten der Webseite erstellt. Werden Section-Content-Elemente genutzt, um die Webseite zu strukturieren, kann die Webseite per Seiten-Menü navigiert werden.
