Dokumentation

PepeKit 2.x

Inhalt:

3. Hauptmenü
3.1 Seitenverwaltung
3.1.1 Neue Seite anlegen
3.2 Dateiverwaltung - Dateien hochladen und löschen
3.3 Grundeinstellungen - Webseite für das Internet vorbereiten
3.4 Sitemap generieren - sitemap.xml
3.5 Backup der Inhalte anlegen
3.6 Logout

4. Seite bearbeiten
4.1 Der Editor - Allgemeine Funktionen
4.2 Ein Bild einfügen
4.3 Ein Bild entfernen

Anhang: Besonderheiten und Experteneinstellungen

Das Login erfolgt mit Ihrem Benutzernamen und dem dazugehörigen Passwort. Nach erfolgtem Login werden Sie zur "Seitenverwaltung" weitergeleitet.

2. Topmenü

"zur Homepage": Der Link zu Ihrer bestehenden Webseite.
"Dokumentation": Der Link zu dieser Dokumentation.

3. Hauptmenü

Das Hauptmenü zeigt die Reiter zu den wesentlichen Administrationsseiten und zum Logout.

3.1 Seitenverwaltung

Die Seitenverwaltung zeigt eine Übersicht über alle angelegten Seiten und bestimmte Sonderseitemn und Module (404-Fehlerseite, Base-Bar). Die folgende Abbildung zeigt einen Teil dieser Übersicht in einem laufenden System.

Der Reiter "Seitenverwaltung" bietet für alle existierenden Seiten verschiedene Optionen. Einige sind im sogenannten Schnell-Bearbeitungs-Modus (→Quick-Edit) verfügbar. Ein Klick auf die Nr./Nav, den Seitentitel oder den Status öffnet ein kleines, modales Fenster, in welchem Sie eine Eingabe tätigen können. Beispiel:

3.1.1 Neue Seite anlegen

Über den Button "neu anlegen +" auf der Seitenverwaltung kann eine neue Seite angelegt werden.

Es öffnet sich ein Dialog, welcher ein Eingabefeld für den Seitennamen bietet:

Nach dem Speichern ist diese Seite neu angelegt. Über die Seitenverwaltung gelangen Sie zum detaillierten Bearbeitungsmodus (Icon "Seite bearbeiten").

Andere Optionen der Übersicht sind im Einzelnen:

Nr./Nav.(=Menüpunkt): Die Reihenfolge der auf der Webseite erscheinenden Navigations- bzw. Menüpunkte wird hier durch Eingabe einer einzelnen Zahl oder einer Ziffernfolge, getrennt durch einen Bindestrich, im Einzelnen festgelegt. Beispiele einer Notation: Hauptmenüpunkt: 3, Untermenüpunkt eines Hauptmenüpunktes: 3-1, Sub-Untermenüpunkt eines Untermenüpunktes: 3-1-1.
Seite: Der Title einer Seite gibt u. a. an, mit welchem Text die Seite in der Navigation erscheint.
Dateiname: Zeigt den Dateinamen der JSON-Datei (Inhalte) und der PHP-Datei (Systemdatei) an.
Status: veröffentlicht / versteckt / Entwurf. Eine Seite wird im Menü nur dann angezeigt, wenn ihr Status auf veröffentlicht steht. Wenn der Status einer Seite auf Entwurf oder versteckt steht, wird diese Seite nicht im Menü angezeigt. Auch dessen Unterseiten bleiben automatisch im Menü verborgen, sie sind dennoch über eine URL aufrufbar.
bearbeiten: Mit einem Klick auf "Seite bearbeiten" öffnet sich die Seite im Editier-Modus. Es können hier alle Seiteninhalte als auch die SEO-Einstellungen für diese Seite bearbeitet werden.
kopieren: Eine Kopie einer Seite kann angelegt werden. Geben Sie hierfür einen neuen Seitentitel ein. Damit kopieren Sie eine Seite komplett, mit allen Inhalten. Beim Kopieren bleibt die ursprüngliche Seite erhalten. Eine kopierte Seite erhält zunächst immer die Nr. 777. In einem zweiten Schritt passen Sie bitte den Eintrag "Nr." für die Navigation an.
Vorschau: Ansicht der aktuellen Seite, wie sie in dem Moment gespeichert vorliegt.
löschen: Löscht die gewählte Seite und deren Inhalte vom Server (die Bilder verbleiben dabei grundsätzlich auf dem Server).

3.2 Bilder- und Dateiverwaltung

Über diese Verwaltungsseite können Bilder und andere Dateien auf den Server geladen werden. Hierüber können einzelne Bild-Dateien gelöscht werden.

Bild-Dateien:

Bilder in den üblichen Bildformaten (konfigurierbar) können hochgeladen werden. Falls ein Bild gleichen Namens bereist existiert, gibt es eine System-Rückfrage nach Überschreiben des Bildes.
Nach dem Upload werden die Bilder im oberen Abschnitt "Bilder" in zwei Spalten angezeigt.

Andere Dateien:

Dateien z.B. des Typs .txt, .pdf o.ä. (konfigurierbar) können hochgeladen werden. Falls eine Datei gleichen Namens bereist existiert, gibt es eine System-Rückfrage nach Überschreiben der Datei.
Nach dem Upload werden die Dateien im unteren Abschnitt "Andere Dateien" in zwei Spalten angezeigt.

3.3 Grundeinstellungen

Hier können Einstellungen für das CMS, die Meta-Angaben für Ihre Webseite und das Frontend vorgenommen werden:

Globale Meta-Angaben zu:
1. Homepage-Titel: Titel der Webseite (oder Firmenname, Headline, Slogan o.ä.). Diese Angabe ist obligatorisch und erscheint sowohl lesbar im Header-Bereich auf der Webseite als auch imMeta-Bereich der Webseite.
2. Copyright: Copyright-Angaben zum Webseiteninhalt. Diese Angabe ist obligatorisch und erscheint sowohl lesbar in der Fußzeile auf Ihrer Webseite als auch als Copyright-Meta-Angabe im Header-Bereich der Webseite.
3. Publisher: Person oder Plattform, in dessen Namen dieser Webseiteninhalt veröffentlicht wird. Der Webseiten-Betreiber. Angabe nicht zwingend nötig.
Meta-Angaben zur weiteren Suchmaschinenoptimierung:
(Default-Meta-Angaben, werden durch einen SEO-Eintrag einer Unterseite individuell überschrieben)
1. description: Beschreibungstext des Webseiteninhalts. Angabe empfohlen.
2. keywords: Beschreibende Stichwörter des Webseiteninhalts, durch Komma getrennt. Angabe empfohlen.
3. author: Der Autor des Webseiteninhalts.
4. robots: Wie soll eine Suchmaschine mit den Webseiteninhalten umgehen?
  Mögliche Einträge:
  index, follow
  index, nofollow
  noindex, follow
  noindex, nofollow
5. revisit-after: Wann soll eine Suchmaschine den Inhalt der Webseite wieder durchlaufen?
  Beispiele:
  1 month
  monthly
  1 week
  5 days
  daily

Nur Administratoren:

Anzeige-Optionen und Frameworks:
1. Auswahl des Frontend-Templates/des Layouts
2. 'Breadcrumbs' (Navigationshilfe auf der Webseite) anzeigen oder ausblenden
Das Laden von Frameworks in das Frontend ist steuerbar:
1. Bootstrap 3.x (CSS Framewok, empfohlen)
2. FontAwesome 4.7.0 (freie Icons)
3. Retina.js (Framework für hochauflösende Grafiken)

3.4 Sitemap generieren

sitemap.xml für Google-Suchmaschine. Diese Datei ist die strukturelle Inhaltsangabe der Webseite.

3.5 Backup der Inhalte anlegen

Unter dem Reiter "Backup der Inhalte anlegen" kann ein Backup der vorhandenen Inhalte erstellt werden: Durch einen Klick auf [Backup starten] werden alle Inhalte der bis dato vorhandenen Seiten, Mediendateien sowie Templates in ein einzelnes Backup-Verzeichnis gespeichert. Jedes Backup wird in einem jeweils eigenen Ordner - mit eigenem Zeitstempel versehen gespeichert.

3.6 Logout

Nach Beendigung Ihrer Arbeiten bzw. Ihrer Sitzung mit PepeKit klicken Sie bitte rechts oben auf "Logout", um sich auszuloggen.

4. Seite bearbeiten

Menüpukt: Die Reihenfolge der auf der Webseite erscheinenden Navigations- bzw. Menüpunkte wird hier durch Eingabe einer einzelnen Zahl oder einer Ziffernfolge, getrennt durch einen Bindestrich, im Einzelnen festgelegt.
Beispiele einer Notation: Hauptmenüpunkt: 3, Untermenüpunkt eines Hauptmenüpunktes: 3-1, Sub-Untermenüpunkt eines Untermenüpunktes: 3-1-1.
Ruht der Mauszeiger auf dem kleinen Pfeil im Feld "Übergeordnet", öffnet sich ein Untermenü, aus dem Sie eine übergeordnete Kategorie für die aktuelle Seite auswählen können.

Abb. 1) Drop-Down-Menü:

Abb. 2) Eine übergeordnete Kategorie wurde ausgewählt: Es erscheint die ID der Kategorie sowie ein Zusatz "-n" im Feld "Menüpunkt" sowie der Name der Kategorie im Input-Feld "Übergeordnet". Sie ersetzen das n bitte abschließend durch die gewünschte Ziffer.

Hinweis: Wenn ein Menüpunkt bzw. eine Seite auf "Entwurf" oder "versteckt" steht, werden diese Seite sowie dessen Unterseiten automatisch im Menü nicht angezeigt.
Seitenstatus: veröffentlicht / versteckt / Entwurf. Eine Seite wird im Menü (Frontend) nur dann angezeigt, wenn ihr Status auf veröffentlicht steht. Wenn der Status einer Seite auf Entwurf oder versteckt steht, wird diese Seite nicht im Menü (Frontend) angezeigt. Auch dessen Unterseiten bleiben automatisch im Menü verborgen, sie sind dennoch über eine URL aufrufbar.
Seitentitel: Der Titel einer Seite (=Seitenname) ist eine Pflichtangabe. Wählen Sie einen kurzen, aussagekräftigen Titel. Der Titel einer Seite gibt an, mit welchem Text die Seite in der Navigation und im Browser erscheint.
Alias: Dieses Feld wird automatisch ausgefüllt (und dabei System-abhängig verändert), wenn ein Seitentitel eingegeben wird. Zeigt den Dateinamen der JSON-Datei (Inhalte) und der PHP-Datei (Systemdatei) an.
Editor: Der Inhalt der Seite wird über einen Editor bearbeitet. Er funktioniert ähnlich einem Schreibprogramm. Der Editor ist ein extrem wichtiges Werkzeug bei der Seitenerstellung, weshalb er in einem eigenen Kapitel behandelt wird (s.u. 5. Der Editor).
SEO (meta tags): Ein Klick auf diesen Button öffnet die SEO-Eingabefelder. Sie dienen der Suchmaschinen-Optimierung. Die Meta-Felder bieten jeweils kleine Hilfetexte (i-Icon). Im leeren Zustand zeigt das System die Einstellungen aus den Default-Settings an.
SEO - description: Beschreibungstext der Seite
SEO - keywords: Stichworte zum Seiteninhalt
SEO - title: Spezieller Seitentitel. Angabe nur nötig, sofern vom Titel abweichend. Diese Angabe überlädt den Webseitentitel
SEO - author: Angabe zum Autor der Seite, falls von anderen Inhalten abweichend (s. Grundeinstellungen)
SEO - robots: Angabe, in welcher Weise Suchmaschinen mit den Inhalten Ihre Webseite umgehen sollen
SEO - revisit-after: Angabe, in welchem zeitlichen Abstand Suchmaschinen Ihre Webseite erneut einlesen sollen
[Speichern]: Ein Klick speichert den Inhalt, die Ansicht der Seite im Bearbeitungsmodus bleibt bestehen
[Speichern und Schließen]: Ein Klick speichert den Inhalt. Sie werden anschließend zur "Seitenverwaltung" zurückgeführt
[Schließen]: Sie werden, ohne zu speichern, zur "Seitenverwaltung" zurückgeführt (=abbrechen).

4.1 Der Editor

Allgemeine Funktionen

Der Editor in PepeKit beruht auf der Open Source Software "Summernote". Inhalte, die Sie einfügen, werden im Editor-Fenster so ähnlich dargestellt, wie sie später auf der Webseite erscheinen. In der Regel klappt das ganz gut, bitte verlassen Sie sich aber nicht 100%ig darauf: Es kann in speziellen Fällen zu Abweichenungen kommen. Diese liegen nicht in dem Ermessen und Einflussbereich von UPPERCASE design.
Das Editor-Fenster:

Sie finden in der Editor-eigenen Menüzeile verschiedene Formatierungsmöglichkeiten für Textabschnitte. Viele sind so z.B. aus einem Word-Schreibprogramm bekannt und werden deshalb nicht behandelt.
Besondere Funktionen finden sich hinter den Buttons:

"Formatierung entfernen": Kopierter Text kann von Formatierungen befreit werden.
"Bildauswahl treffen": Einfügen von Bildern aus dem Medienpool (s. u. "Bild einfügen").
"Link einfügen/bearbeiten": Einen Link zu einer beliebeigen URL setzen.
"Dateiauswahl treffen": Aus dem Dateienpool auswählen, um auf diese Datei zu verlinken.
"Zu einer internen Seite verlinken": Zu einer vorhandenn, internen Seite kann verlinkt werden.
"Fancybox-Bildauswahl treffen": Das zu verlinkende Bild wird mit der URL auf dessen Ziel versehen.
"Textmarke": Einen Link innerhalb der aktuellen Seite setzen.
"Medien einfügen": Video-Linkerstellung.
"Formatierung entfernen": Abschnitte , z.B. kopierten Text aus einem Word-Dokument, von Formatierungen befreien.
"Sonderzeichen": Fügt ein Sonderzeichen an der stelle des Cursors ein: Auswahl aus einer Übersichtstabelle.
"Unsichtbare Zeichen anzeigen": Unsichtbare Zeichen wie "neuer Absatz" oder "Leerzeichen" werden markiert angezeigt.
"Vorlage einfügen": HTML-Vorlagen mit Platzhaltertext für eine Spaltenaufteilung). Die Vorlage kann an der Stelle des Textcursors eingefügt werden. Den Platzhaltertext können Sie danach mit eigenem Inhalt ersetzen.
"Blöcke anzeigen": Die vorhandnene HTML-Elementblöcke werden sichtbar gemacht.
"Vollbild": Ein Fullscreen-Modus öffnet das Editorfenster Bildschirm-füllend. Eine sehr authentische Bearbeitung der Inhalte (im Vergleich zur Frontend-Ansicht der Seite) ist damit möglich.

4.2 Ein Bild einfügen

Um ein Bild in eine Seite einzufügen, klicken Sie in der Editor-Menüzeile auf das Bild-Icon ("Bilder und Grafiken").
Wählen Sie das Bild aus, welches Sie einfügen wollen, indem Sie auf den Text "Bild einfügen" neben dem Bild klicken. Das Bild befindet sich nun im Editorfenster, an der Stelle, wo sich der Textcursor zuletzt befand.
Hinweis: Es ist nicht möglich, ein Bild per "Drag & Drop" oder per "Copy & Paste" in den Editor zu platzieren. Dies wird aus technischen Gründen unterbunden.
Um ein Bild in seiner Größe der Darstellung zu verändern, klicken Sie das Bild an. Es erscheint ein grau hinterlegtes, modales Rechteck um das Bild.
Mit den Anfassern am Bild können Sie die Größe durch Ziehen verändern.

Sie können auch über das Einzelbild-Dialogfenster die Attribute wie Größe direkt eintragen.

4.3 Ein Bild entfernen

Um ein Bild aus dem Seitenkontext zu entfernn, klicken Sie auf das Bild. Ein schwarzer Rahmen erscheint um das Bild. Mit der Entfernen-taste ['Entf'] oder der Zurück-Taste wird das Bild aus dem Seitenzusammenhang entfernt.
Hinweis: Ein so durchgeführtes Entfernen des Bildes löscht das Bild nicht aus dem Medienpool oder vom Server.

Anhang

Besonderheiten und Experteneinstellungen

Navigationsstruktur:

Untermenüpunkte der zweiten Ebene werden angezeigt, auch wenn die Kategoriezuordnung "falsch" ist. Dabei wird der Untermenüpunkt der in der Reihenfolge zuvor angelegten Kategorie zugeordent. Bespiel: "2" _ "3-1" => 3-1 erscheint nun in der Navigation als Untermenüpunkt von 2.
Sub-Untermenüpunkte (dritte Ebene) werden ausgeblendet, wenn ein zugehöriger Untermenüpunkt (=deren Kategorie) fehlt. Beispiel: "2" _ "2-3-1" => 2-3-1 ist im Menü nicht sichtbar.
Menü- und Untermenüpunkte können wie eine Überschrift, also ohne Verlinkung auf eine bestimmte Unterseite, verwendet werden, wenn lediglich ein DropDown-Menü für dessen Untermenüpunkte existiert. Die Notation ist wie folgt (hier beispielhaft für Menüpunkt 3): "3##".

Retina.js:

Bilder mit hochauflösender Grafik werden für die Verwendung des Frameworks retina.js mit einem Namenszusatz "...@2x" markiert; diese Grafiken sind grau hinterlegt. Diese bitte nicht für den Content auswählen, die Verwendung über die Dateienverwaltung ist nicht zu empfehlen.