CMS - Content Management System V2.0

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.

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 z.B. 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).

Abb.2: Verzeichnis einer Seite mit zweiter Menüebene	Abb.3: Seite ohne Untermenü mit Inhaltsdateien, Bilder, Textdateien

Funktionen

Die Symbole haben folgende Bedeutung:

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.

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
• - 2x2 Markdown Tabelle einfügen
• - Video einfügen (ein Verweis auf ein Youtube-Video, die 11 stellige Youtube Video ID wird benötigt) - HTML-Code
• - Einen Kalendereintrag mit Link auf GoogleMaps einfügen - HTML-Code
• - Link/Verweis einfügen (inklusive Upload von PDF-Dateien, bei Dateilink) - HTML-Code
• - Zitat Formatierung einfügen
• - Code Formatierung einfügen
• - Bild einfügen (inlusive Bilder-Upload vom eigenen Computer) - HTML-Code
• - nummerierte Liste
• - nicht nummerierte Liste
• - Überschrift Formatierung 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. 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. Zum Hochladen von Bildern benutzt man das Hochlade-Icon () im Dateiexplorer. Falls die Bilddateien zu groß sind (Dateigröße und/oder Abmessung) werden diese bereits beim Upload verkleinert, damit die Website-Ladegeschwindigkeit nicht beeinträchtigt wird.

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 (optional). 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 auf den Bildnamen klickt. Es öffnet sich der Thumbnail-Editor:

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.

Hintergrundinformation: 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. Generell sollten Sie sich dessen bewusst sein, falls Sie dennoch versuchen zu große Dateien für die Website hochzuladen, dann verkelinert die CMS-Software 2.0 diese Bilder automatisch, damit die Ladegeschwindigkeit der Webseite nicht beeinträchtigt wird. 1200 Pixel beispielsweise für die längste Seite des Bildes ist für eine optimale Darstellung auf der Website völlig ausreichend.

Bilder auf einer normalen Textseite einfügen

Während auf den "Galerieseiten" eine spezeille Implementierung dafür sorgt dass die Bilder auf der Webseite erscheinen, kann man jedoch auch auf normalen Textseiten Bilder einfügen. Dazu gehen Sie bitte wie folgt vor:

1. Wechseln Sie in das Verzeichnis der Webseite, wo das Dokument eingebunden werden soll
2. Wählen Sie dort die betreffende txt-Datei für den Seiteninhalt aus und Klicken Sie darauf (der Seiteneditor öffnet sich)
3. Gehen Sie im linken Fenster auf die entsprechende Textstelle, wo der Link eingefügt werden soll
4. Klicken Sie nun oben auf das Bild-Symbol ()
5. Es öffnet sich ein Fenster "Bild einfügen", siehe Abbildung 9.
6. Ähnlich wie bei "Link einfügen" können Sie entweder im oberen Feld den direkten Pfad zu einem bereits hochgeladenen oder externen (auf einem anderen Server/Website) Bild angeben, oder ...
7. Sie können mit Hilfe von "Durchsuchen" eine Bilddatei von Ihrem Computer wählen.
8. Ausrichtung links/rechts fügt das Bild links oder rechts ausgerichtet in der Text ein. Standard: links
9. Breite: bei auf Handy benutzbaren Webseiten ist es wichtig, dass die Bilder sich dynamisch an den vorhandenen Platz anpassen können. Deshalb ist die Angabe der Bild-Breite in Prozent (standard) sinnvoll. Tippen Sie in der Feld "Breite" einen Prozentwert, z.B. "30"
10. Bild-Alt ist ein Text, den der Browser anzeigt, wenn das Bild nicht geladen werden kann.
11. Bild Titel ist ein Text, den man sieht, wenn man mit der Maus über das Bild fährt (Tooltip)
12. Klicken Sie auf den Button "OK", um das Bild bzw. den HTML-Code in das Editorfenster einzufügen
13. In der Vorschau rechts können Sie das Bild bereits sehen.
14. Klicken Sie auf den Button "Speichern", um das Bild im Text auf der Webseite zu veröffentlichen.

Abb.9: Dialogfenster zum Einfügen eines Bildes

Download Dokument einbinden

Sie möchten ein PDF Dokument auf Ihrer Website zum Download anbieten? Im Wesentlichen besteht dieser Vorgang aus zwei Schritten: 1.) Die Datei, welche Sie zum Download anbieten wollen, muss zunächst erst einmal auf den Server Ihrer Website hochgeladen werden. Und 2.) Auf der Webseite, wo der Download für die Besucher sichbar sein muss ein Link (HTML 'a' Tag) zu dem hochgeladenen PDF-Dokument angelegt werden. Ab CMS V2.0 geht das in einem Schrit, wie folgt:

1. Wechseln Sie in das Verzeichnis der Webseite, wo das Dokument eingebunden werden soll
2. Wählen Sie dort die betreffende txt-Datei für den Seiteninhalt aus und Klicken Sie darauf (der Seiteneditor öffnet sich)
3. Gehen Sie im linken Fenster auf die entsprechende Textstelle, wo der Link eingefügt werden soll
4. Klicken Sie nun oben auf das Link-Symbol ()
5. Es öffnet sich ein Fenster "HTML Link einfügen", siehe Abbildung 10.
6. Falls Sie die Datei vorher bereits mit der Upload-Funktion des Dateiexplorers hochgeladen haben, dann können Sie im oberen Feld ("Von einer URL oder Server lokal") den vollständigen Pfad zu der Datei angeben.
7. Falls Sie noch keinen Datei hochgeladen haben klicken Sie auf "Durchsuchen", um die Datei auf Ihrem Computer auszuwählen
8. Wurde die Datei vom System akzeptiert, dann geben Sie bitte im Feld "Link Text" einen Begriff ein, welcher dann auf der Webseite als Link gezeigt werden soll.
9. Optional können Sie im Feld "Tooltip" noch einen Hinweis eingeben, welche bei Überfahren des Links mit der Maus gezeigt wird. Standardmässig trägt die Software hier den Dateiname ein.
10. Danach klicken Sie auf 'OK'
11. Ein HTML-Codestück wird im Text eingefügt (Beispiel):

     <a rel="external" href="data/impressum/uploaded/word2000_felder.pdf" title="word2000_felder">word</a>

12. Der Abschnitt rel="external" bewirkt, dass beim Klick auf den Link ein separates Browser-Fenster/-Tab geöffnet wird.
13. Sie klicken auf den Button "Speichern", um den Seiteninhalt mit dem neuen Link zu veröffentlichen.

Abb.10: Dialogfenster zum Einfügen eines HTML Links

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