Spenden

Anleitung

Installation

Die Installation ist schnell und einfach. Einfach jocms herunterladen, den zip-Ordner entpacken und in das root-Verzeichnis deiner Website hochladen. Dabei muss sich der Ordner "jocms" unbedingt im root-Verzeichnis befinden!

/css
/images
/jocms
index.html
...

Dann den Installer unter www.deine-adresse.xyz/jocms/Installer starten. Du wirst hier durch verschiedene Einstellungen geführt. Nach der Installation kannst du dich einloggen und siehst die Programm-Oberfläche von jocms, die du in der Online-Demo auch ausprobieren kannst.

Website einrichten

Wenn du jocms das erste Mal öffnest, wirst du keine Option zum Bearbeiten vorfinden. Zuerst musst du jocms nämlich sagen, welche Bereiche deiner Website überhaupt bearbeitet werden dürfen. Innerhalb dieser editierbaren Bereiche kannst du bzw. kann dein Kunde den Inhalt dann im CMS beliebig bearbeiten. Wie gesagt: nur innerhalb! Außerhalb kann nichts verändert werden. Eine Seite kann mehrere editierbare Bereiche haben.

Der einfachste Weg diese Bereiche festzulegen ist, den Editor für editierbare Bereiche zu benutzen. Dafür unter den Optionen den Eintrag "Editierbare Bereiche wählen" anklicken. Hier kannst du bequem per Mausklick deine gewünschten Bereiche auswählen. Ein Klick auf den gewünschten Bereich markiert das Element. Ein weiterer Klick darauf markiert das nächstgrößere Element. Wenn du alle Bereiche ausgewählt hast kannst du die Auswahl speichern und deine editierbaren Bereiche sind festgelegt. Falls du Bereiche löschen möchtest, kannst du den Haken bei "Bereiche löschen" aktivieren und die entsprechenden Elemente entfernen. Die Auswahl der editierbaren Bereiche kann nachher übrigens noch verändert werden.

Bereiche im Quellcode festlegen

Fortgeschrittene Benutzer können die Bereiche alternativ auch selber im Quellcode manuell anpassen. Um ein HTML-Element editierbar zu machen, musst du ihm im Quellcode das Attribut data-jo="true" hinzufügen. Alles was sich innerhalb dieses Elements befindet, kann im CMS bearbeitet werden. Das kann z.B. so aussehen:

...
<div data-jo="true">
  <p> Dieser Text kann im CMS bearbeitet werden. </p>
  <img src="bild.png" alt="Dieses Bild kann auch bearbeitet werden."/>
</div>
...

Achte darauf, dass du keine verschachtelten editierbaren Bereiche einbaust und dass sich innerhalb der editierbaren Bereiche valides HTML befindet.

Erste Schritte

Seite bearbeiten

Wenn du für eine Seite editierbare Bereiche festgelegt hast, erscheint im CMS ein Button mit einem Stift. Der ist zum Bearbeiten. Dir stehen nun viele Möglichkeiten zur Verfügung, die Inhalte in den editierbaren Bereichen zu bearbeiten. Das Aussehen der verschiedenen Elemente wird dabei von dem css-Stylesheet deiner Website beeinflusst. Sagst du in deinem Stylesheet z.B. dass alle <b>-Elemente rot sein sollen, so wird das von jocms genau so übernommen.

Text Tools

Im Menü findest du eine Vielzahl grundlegender Tools zum bearbeiten deiner Inhalte. Am besten ist es, du probierst sie einfach aus.

Bilder

Bilder können mit jocms bequem und einfach hochgeladen, eingefügt und bearbeitet werden. Akzeptiert werden dabei die Formate JPG, PNG und GIF. Um ein Bild einzufügen, klickst du auf den Bild-Button. Im darauf erscheinenden Fenster kannst du eine URL angeben oder das Bild aus deiner Bibliothek auswählen, indem du auf den Ordner klickst. Um ein Bild hochzuladen, kannst du auf den Reiter "Hochladen" klicken. Das hochgeladene Bild erscheint dann in deiner Bibliothek.

Auch eingefügte Bilder verhalten sich wie bereits erwähnt nach den Regeln deines css-Sylesheets. Dennoch können auch Bilder bearbeitet werden. Wenn du mit der maus über das Bild gehst, erscheint eine Leiste mit verschiedenen Optionen. Diese erlauben dir, das Bild zu bearbeiten.

Spezielle Elemente

jocms unterstützt auch einige spezielle Features, die mit der Zeit auch weiter ausgebaut werden. Dafür sollten wir uns zunächst noch einmal das data-jo="true"-Element ansehen: Bisher hatten wir gesagt, data-jo macht Elemente editerbar. Das ist aber nur die halbe Wahrheit.

data-jo="true" kennzeichet vor allem erst einmal die Elemente, die gespeichert werden. Dabei muss es sich nicht zwangsläufig um komplett editierbare Elemente handeln. Es umfasst aber trotzdem alle jocms-Elemente. Die nachfolgenden Elemente verdeutlichen das. Eine Zentrale Rolle spielt dabei das Attribut data-jo-content. Mit ihm können verschiedene Elemente gekennzeichnet werden.

Diese Elemente befinden sich noch in einem experimentellen Stadium. In einigen Fällen kann es sein, dass noch nicht alles so funktioniert wie es sein soll. Meinungen und Feedback sind willkommen.

(Nicht-)Editierbare Elemente

Das Attribut data-jo-content regelt, ob Elemente editiert werden können oder nicht. Es kann den Wert editable oder noneditable besitzen. Im folgenden Beispiel ist nur der Text editierbar, nicht aber das Bild:

...
<div data-jo="true" data-jo-content="noneditable">
  <p data-jo-content="editable"> Dieser Text kann im CMS bearbeitet werden. </p>
  <p>
   <img src="bild.png" alt="Dieses Bild kann nichts bearbeitet werden."/>
  </p>
</div>
...

Wichtig ist, dass data-jo="true" alle jocms-Elemente umfasst. noneditable und editable Elemente können beliebig verschachtelt werden.

Wiederkehrende Elemente

Wiederkehrende Element können ganz verschiedene Anwendungsmöglichkeiten haben, z.B. Newsmeldungen (siehe Demo). Der Nutzer kann dabei wiederkehrende Elemente hinzufügen, löschen und sortieren. Um Wiederkehrende Elemente zu nutzen, muss im Quellcode das Elternelement das Attribut data-jo-content="repeated" erhalten. Innerhalb dieses Elternelements muss sich ein weiteres Element befinden. Dieses ist das wiederkehrende Element.

...
<div data-jo="true" data-jo-content="repeated">
  <div> <!-- Wiederkehrendes Element -->
    <p data-jo-content="editable"> Dieser Text kann im CMS bearbeitet werden. </p>
  </div>
</div>
...

Momentan darf das wiederkehrende Element selbst noch nicht editable sein. Kindelemente davon aber schon. Elemente mit data-jo-content="repeated" sind automatisch noneditable und können somit auch in editierbaren Bereichen verwendet werden.

Masken

Masken sind vordefinierte Code-Schnipsel, die vom Benutzer in die editierbaren Bereiche eingefügt werden können. Diese Elemente sind selbst noneditable, können aber auch editable Bereiche oder sogar data-jo-content="repeated" Bereiche enthalten.

Masken können vom Benutzer über den Masken-Button ausgewählt werden. Festgelegt werden die Code-Schnipsel im Backend-Bereich vom Administrator. Dort wird der Code festgelegt, sowie ein aussagekräftiger Name.

Weitere Funktionen

Quellcode Editor

Der Quellcode-Editor erlaubt dir, direkt im CMS den Quellcode deiner Seiten zu bearbeiten. Du findest ihn in den Optionen.

Zurücksetzen

Nach jedem Speichern macht jocms einen Schnappschuss deiner Seite. Falls mal etwas schief geht, kannst du die Seite in den Optionen zurücksetzen.

Nutzerverwaltung

Nach der Installation bist du standardmäßig als Administrator angemeldet. Für Kunden oder Mitarbeiter, die keinen Zugriff auf alle Funktionen haben sollen empfiehlt sich ein Standardkonto, was in der Nutzerverwaltung eingerichtet werden kann. Das Standardkonto ist nur berechtigt, die Seite zu bearbeiten, nicht aber die Bereiche auszuwählen oder Einstellungen zu verändern. Beim Einrichten des Kontos erhält dieses ein Standardpasswort, was nach dem ersten Einloggen so schnell wie möglich geändert werden sollte.

Einstellungen

In den Einstellungen kann jocms angepasst werden.

Helfen

jocms ist kostenlos und open source. Ich habe viel Arbeit in das Programm gesteckt, damit es funktioniert und jeder es frei benutzen kann. Wenn es dir gef ällt, würde ich mich über eine kleine Spende sehr freuen.

Wenn du Probleme, Fragen oder Anregungen hast, freue ich mich immer gerne über eine Nachricht!