CMS - Content Management System

Jede Webseite von Webdesign Binarycode hat auch ein sogenanntes Content Management System (CMS), d.h. eine Administrationsseite, über die man den Inhalt der einzelnen Webseiten ändern kann.

Bei Webdesign Binarycode kommt eine Eigenentwicklung zum Einsatz. Dieses CMS ist extrem einfach gehalten und besteht im Prinzip aus nur einer, einzigen Seite.

Webdesign Binarycode CMS
Abb.1: Content Management Seite


Hinter den einzelnen Menüpunkten, welche auf der Webseite zu sehen sind, stecken letztendlich ganz normale Verzeichnisse, in denen Dateien gespeichert sind. Diese Verzeichnisse sind genauso benannt, wie die Menüpunkte, sodass selbsterklärend erkennbar ist, welches Verzeichnis für welchen Menüpunkt zuständig ist. Wenn man in ein solches Verzeichnis hineingeht, dann sieht man dort unter Umständen weitere Unterverzeichnisse, falls die betreffende Webseite eine zweite Menüebene hat (Abb.2). Oder es befinden sich Inhaltsdateien in diesem Verzeichnis, wie z.B. Bilder, welche auf der Webseite verwendet werden oder der Text (txt-Datei), der auf der Seite zu lesen ist (Abb.3).

Webdesign Binarycode CMS subpages Webdesign Binarycode CMS subpages2
Abb.2: Verzeichnis einer Seite mit zweiter Menüebene Abb.3: Seite ohne Untermenü mit Inhaltsdateien, Bilder, Textdateien


Funktionen

Die Symbole haben folgende Bedeutung:

Löschen der Datei. Beim Draufklicken auf dieses Symbol wird der Löschdialog geöffnet.
Das Auge symbolisiert einen sichtbaren Untermenüpunkt. Beim Draufklicken wird ein Dialog geöffnet, in dem man diesen Menüpunkt unsichtbar machen oder auch umbenennen kann.
Das "deaktivierte" Auge symbolisiert einen unsichtbaren Untermenüpunkt. Beim Draufklicken wird ein Dialog geöffnet, in dem man diesen Menüpunkt sichtbar machen oder umbenennen kann.
Dieses Symbol wird für alle Verzeichnisse angezeigt
Dateien mit diesem Symbol sind Bild-Dateien (z.B. jpg, png, gif, ...)
Dateien mit diesem Symbol sind Video-Dateien (z.B. avi, mp4, ...)
Dateien mit diesem Symbol sind Audio-Dateien (z.B. wav, mp3, ...)
Dateien mit diesem Symbol sind PDF-Dateien
Dieses Symbol wird für eine Textdatei gezeigt
Das Upload-Icon. Beim Draufklicken auf dieses Icon wird ein Dialog geöffnet, über den man eine Datei in das betreffende Verzeichnis hochladen kann.
Das Download-Icon wird nur bei txt-Dateien gezeigt. Beim Draufklicken wird der Systemdialog "Datei speichern" angeboten. Wenn Sie diese Datei auf Ihrem Computer speichern, dann haben Sie damit einen Backup des Inhalts der Webseite.
Das Hilfe-Icon. Hilfe aufrufen (diese Seite hier).


Markdown Editor

Klickt man auf eine der Textdateien, dann öffnet sich der Editor. Für die Texte wird die Bearbeitungssprache Markdown verwendet, mit der man Texte sehr schnell und unkompliziert formatieren kann. In der linken Fensterhälfte des Editors können Sie den Seiteninhalt ändern und in der rechten Editor-Fensterhälfte wird eine sofortige Vorschau gezeigt, wie es auf der Webseite aussehen würde. Wenn Sie auf den Button "Speichern" drücken, dann wird dieser Seiteninhalt veröffentlicht und ist ab diesem Moment auf Ihrer Webseite für jedermann zu sehen. Markdown kann auch mit HTML-Tags gemischt werden. Braucht man beispielsweise einen zusätzlichen Zeilenumbruch, dann tippt man einfach <br/> ein. Hinter einigen der Funktionsbuttons im Editor steckt auch ein direkter HTML-Support, d.h. durch diese Funktionen wird HTML-Code eingefügt, siehe im Nachfolgenden bei der Funktionsbeschreibung.

Webdesign Binarycode CMS Editor
Abb.4: Der Editor für Textdateien (Beispiel)


Im Editor haben Sie die Wahl, ob Sie die Markdown-Syntax direkt benutzen und einfach eintippen oder ob Sie stattdessen die in der oberen Menüleiste des Editors befindlichen Funktionssymbole benutzen. Die Symbole haben, von links nach rechts beginnend bei dem B - folgende Bedeutung:

  • - Fettschrift
  • - Kursivschrift
  • - Tabelle einfügen
  • - Video einfügen (ein Verweis auf ein Youtube-Video) - HTML-Code
  • - Einen Kalendereintrag mit Link auf GoogleMaps einfügen - HTML-Code
  • - Link/Verweis einfügen - HTML-Code
  • - Zitat einfügen
  • - Code einfügen
  • - Bild einfügen - HTML-Code
  • - nummerierte Liste
  • - nicht nummerierte Liste
  • - Überschrift einfügen
  • - Trennlinie einfügen - HTML-Code
  • - Text links ausrichten - HTML-Code
  • - Text zentrieren - HTML-Code
  • - Text rechts ausrichten - HTML-Code
  • - Änderung rückgängig machen
  • - Wiederherstellen
  • - Hilfe aufrufen (diese Seite hier)


Die beiden Funktionen "Bild einfügen" und "Link/Verweis einfügen" stehen auch gleich mit einer Datei-Upload-Funktion bereit, womit man im Dialog bereits ein Bild oder eine als Link zu verknüpfende PDF-Datei hochladen kann. D.h. der HTML-Code wird hier bereits mit den fertig hochgeladenen Dateien erzeugt, sodass man sich darum nicht mehr kümmern muss. Das muss man sich natürlich nicht merken. Für alle Funktions-Buttons gibt es auch einen Tooltipp mit einem entsprechend, kurzen Hinweis.

Bildergalerie-Seite

Eine Galerie-Seite ist eine spezielle Implementierung von Webdesign Binarycode für eine Webseite, auf der Fotos gezeigt werden sollen. Eine solche Seite ist verwaltungstechnisch besonders einfach, weil man im Prinzip nur die Bilder hochladen muss, wonach diese dann automatisch angezeigt werden.

Webdesign Binarycode Bildergalerie-Seite Webdesign Binarycode CMS Bildergalerie
Abb.5: Beispiel für eine Bildergalerie-Seite Abb.6: Bildergalerie-Seite aus Sicht des CMS


Die Textdatei beinhaltet den Text, welcher über den Bildern zu lesen ist. Die restlichen Dateien sind die Bilddateien selbst, sowie noch ein Unterverzeichnis namens "de" (Sprache: deutsch), indem pro Bild eine Datei enthalten sein kann, die den Text beinhaltet, welcher unter dem Bild angezeigt werden soll.

Thumbnail-Editor (Miniatur-Bilder)

Auf einer Galerieseite werden kleinere Bilder als Übersicht gezeigt. Sogenannte Thumbnails, "Daumennagel"-Bilder, wie auch die Miniatur-Bilder genannt werden. Diese Miniatur-Bilder werden von der Website-Software automatisch nachdem Hochladen einer Bilddatei erzeugt. Der Sinn des Ganzen ist, damit die Galerieseite schnell geladen wird, weshalb es notwendig ist eine kleinere Version des Bildes zu erzeugen. D.h. am Ende existiert jedes Bild zweimal - einmal das Originalbild, welches Hochgeladen wurde und das dazugehörige Miniatur-Bild, welches von der Website automatisch erstellt wurde. Bei der automatischen Erstellung des Miniatur-Bildes wird das Seitenverhältnis des originalen Bildes beibehalten. Dies ist jedoch nicht immer passend, wenn z.B. die Miniatur-Bilder quadratisch sein sollen, dies jedoch die Originalbilder nicht sind. Dafür gibt es den sogenannten "Thumbnail-Editor". Aufrufen kann man diesen, indem man einfach auf den Bildnamen klickt. Es öffnet sich der Thumbnail-Editor:

Thumbnail-Editor Bildausschnittwahl
Abb.7: Beispiel Thumbnail-Editor Abb.8: Bildausschnittwahl

Im Thumbnail-Editor wird das Bild angezeigt (Abb. 7). Wenn man nun die Maus auf einen bestimmten Punkt im Bild positioniert (z.B. links oben) und dann mit der linken Maustaste klickt, diese im geklickten Zustand hält und nun die Maus z.B. nach rechts unten zieht, dann sieht man ein gestricheltes Viereck. Nun kann man die linke Maustaste wieder loslassen. Der Rest des Originalbildes ausserhalb des gestrichelten Vierecks wird etwas dunkler dargestellt (Abb.8). Das was innerhalb des gestrichelten Vierecks zu sehen ist, das wird als Miniaturbild auf der Website verwendet, wenn man die Button "Erzeuge Minibild" drückt. An der gestrichelten Linie der Vierecks fallen 8 hellere Punkte auf. Diese können zum Justieren des Bildausschnittes verwendet werden (größer/kleiner). Auch kann man den gesamten Bildausschnitt verschieben, indem man die Maus irgendwo innerhalb des Vierecks positioniert (der Mauscursor wird zu einem Kreuz mit Pfeilen in alle Himmelsrichtungen). Klickt man nun die linke Maustaste und zieht dabei die Maus, dann sieht man, wie sich der Bildausschnitt verschiebt.

Möchte man anschließend das Ergebnis auf der Website sehen, bitte daran denken die Seite komplett neu zu laden (STRG+F5), weil die meisten Browser die Bilder zwischenspeichern (Cachen), wodurch man noch das alte Bild sehen würde. STRG+F5 (die Kontrolltaste und die F5-Taste gleichzeitig gedrückt) lösen das Problem. Damit wird bei den meisten Browsern (Firefox, Internet Explorer) ein neu Laden der Seite bewirkt.

Desweiteren sollte beim Hochladen von Bildern in eine Galerieseite (bzw. auch bei der generellen Verwendung von Bildern auf Webseiten) beachtet werden, dass man die Bilder nicht unbearbeitet, direkt vom Fotoapparat hochlädt. Für normale Leute gibt es keinen bezahlbaren Monitor, welcher Bilder in einer Auflösung von 6000 x 4000 Pixeln (beispielsweise) darstellen kann! Aus diesem Grund macht es auch keinen Sinn so grosse Bilder auf der Website zu verwenden. Ausserdem (und das ist das Wichtigste!) wird die Website beim Laden dadurch langsamer. Bitte verkleinern Sie deshalb Ihre Bilder vor dem Hochladen mit einem Bildbearbeitungsprogramm Ihrer Wahl auf Ihrem Computer. 1200 Pixel für die längste Seite des Bildes ist für eine optimale Darstellung auf der Website völlig ausreichend.

Download Dokument einbinden

Sie möchten ein PDF Dokument auf Ihrer Website zum Download anbieten? Im Wesentlichen besteht dieser Vorgang aus zwei Schritten: 1.) Sie müssen die Datei, welche Sie zum Download anbieten wollen, zunächst erst einmal auf den Server Ihrer Website hochladen. Und 2.) Sie müssen auf der Webseite, wo der Download für die Besucher sichbar sein soll einen Link zu dem hochgeladenen PDF-Dokument anlegen. Gehen Sie wie folgt vor:

1) Hochladen der Datei:

  • Gehen Sie über die Administrationsoberfläche in das Verzeichnis, wo das Download-PDF gespeichert werden soll (merken Sie sich dieses Verzeichnis, da Sie es später noch einmal benötigen)
  • Klicken Sie auf das Upload-Symbol ()
  • Es öffnet sich ein Dialogfenster, indem ein Button "Durchsuchen" angezeigt wird, Klicken Sie auf diesen Button
  • Nun öffnet sich ein Fenster zum Durchsuchen des Dateisystems auf Ihrem Computer, wählen Sie die hochzuladende PDF-Datei, und klicken Sie auf den Button "Öffnen"
  • Neben dem "Durchsuchen"-Button ist jetzt der ausgewählte Dateiname zu lesen
  • Klicken Sie nun auf den Button "Hochladen", anschliessend ist die hochgeladene Datei im vorher gewählten Verzeichnis Ihrer Website zu sehen
  • Beachten Sie, dass die hochgeladenen Dateien keine Leerzeichen oder Sonderzeichen im Dateinamen haben


2) Link auf Webseite anlegen:

  • Wechseln Sie nun in das Verzeichnis der Webseite, wo das Dokument eingebunden werden soll
  • Wählen Sie dort die betreffende txt-Datei für den Seiteninhalt aus und Klicken Sie darauf (der Seiteneditor öffnet sich)
  • Gehen Sie im linken Fenster auf die entsprechende Textstelle, wo der Link eingefügt werden soll
  • Klicken Sie nun oben auf das Link-Symbol ()
  • Es öffnet sich ein Fenster "Insert Link" mit einer Eingabezeile, die mit "http://" beginnt
  • Falls Ihre Website SSL-Verschlüsselung hat, ergänzen Sie bitte ein 's' zu "https://"
  • Tragen Sie nach den zwei Schrägstrichen den Namen Ihre Website (Domain) ein, z.B. "www.mustermann.de"
  • hängen Sie einen Schrägstrich an und ergänzen Sie den Verzeichnisname und die zu verlinkenden Datei (das Verzeichnis, was Sie sich zuvor gemerkt hatten)
  • Der fertige Eintrag sollte beispielsweise so aussehen: "https: ⁄ ⁄ www.mustermann.de/data/seitenname/download/beispiel.pdf"
  • Klicken Sie nun auf den "Ok"-Button
  • Das darunterliegende Editorfenster ist wieder zusehen, indem jetzt an der Stelle, die Sie zuvor für den Link ausgewählt hatten der Text "Linkbeschreibung" bereits farblich markiert ist
  • Tippen Sie nun einen Text ein, welcher auf der Webseite angezeigt werden soll, z.B. "Beispiel PDF-Download" (im rechten Vorschaufenster wird der Link bereits angezeigt)
  • Klicken Sie nun im Editor unten auf den Button "Speichern"
  • Gehen Sie zur Kontrolle auf die Seite, wo Sie den Download-Link eingefügt haben und Testen Sie diesen Link, d.h. Klicken Sie darauf. Ein neues Fenster sollte sich öffnen, indem Sie Ihr eingebundenes Download-Dokument sehen können


Im Seiteneditor wird neben der symbolischen Bedienung auch direkter HTML-Code, sowie Markdown-Syntax akzeptiert. Wem die Einbindung des Links über die symbolische Bedienung zu kompliziert erscheint, der kann natürlich den Link auch direkt als Markdown-Syntax einfügen, z.B. [Beschriftung des Hyperlinks] (https: ⁄ ⁄ de.wikipedia.org/beispiel.pdf "Titel, der beim Überfahren mit der Maus angezeigt wird"). Hier können Sie die Markdown-Syntax noch einmal nachlesen.

Zusätzlicher Zeilumbruch

Falls Sie auf Ihrer Seite irgendwo einen zusätzlichen Zeilumbruch benötigen, dann verwenden Sie dafür die HTML-Syntax <br>, welche Sie im Seiteneditor an der Stelle eintragen, wo Sie den Zeilenumbruch haben möchten.

Zusammenfassung

Damit ist im Wesentlichen alles über die Seiten-Administration bzw. das Content Management System von Webdesign Binarycode gesagt. Mehr ist nicht nötig, um die Inhalte der Webseiten zu verwalten. Dennoch gilt im Allgemeinen, dass Sie vor dem Ändern des Inhalts einer Seite eine Sicherungskopie der Seite anlegen sollten.

Sicherungskopie einer Webseite

Um eine Sicherungskopie einer bestimmten Seite Ihrer Website anzulegen, gehen Sie wie folgt vor:

  • Klicken Sie bei der betreffenden txt-Datei in Ihrer Administrationsoberfläche auf das Download-Icon ()
  • Der Systemdialog zum Speichern der Datei wird gezeigt
  • Speichern Sie die Datei in einem Systemordner, wo Sie die Sicherungsdateien Ihrer Website aufbewahren
Stand: 01.06.2023