Adobe Muse als CMS verwenden

Adobe Muse ist eigentlich nicht ideal dafür geeignet um Templates für Content Management Systeme zu erstellen. Mit dem Business Catalayst Hosting von Adobe kann man seine Muse Seiten Online editieren. Doch die wenigsten wissen, dass diese Funktion mit jedem Web Host funktioniert, sofern man einen FTP Zugang hat um seine Seiten hochzuladen. Wie das genau funktioniert erkläre ich euch in diesem Artikel.

Mit Muse ist es recht einfach ohne HTML und CSS Wissen eine attraktive Website zu erstellen. Muse selbst habe ich schon in meinem Artikel – Adobe Muse – eine Alternative zu Dreamweaver? – vorgestellt. Aber wie sieht es mit der laufenden Wartung von Inhalten aus? Benötige ich dazu immer Adobe Muse, können meine Kunden Inhalte selbst ändern? Die Antwort darauf ist – man benötigt kein Muse um Inhalte zu ändern. Alles geht einfach über eine Weboberfläche.

Ich zeige euch in diesem Beitrag in 5 Schritten, wie man beginnend bei der Erstellung bis zur Synchronisierung der Online und Offline Inhalte Muse als CMS verwenden kann.

1. Schritt – Seite erstellen

Bevor wir beginnen die Seiten zu erstellen, werfen wir einmal einen Blick in die Seiteneigenschaften. Hier muss man im Reiter Erweitert die Checkbox bei „Bearbeiten im Browser ermöglichen“ aktivieren.

Für den ersten Schritt habe ich eine beliebige Seite mit Adobe Muse erstellt. Um die verschiedenen Funktionen zeigen zu können habe ich eine Website bestehend aus insgesamt 4 Seiten erstellt. Auf dieser gibt es unterschiedlichen Text und auch verschiedene Arten von Bildern. Um zu zeigen, dass auch verschiedene Device Größen gewartet werden können, habe ich auch eine Phone Variante angelegt. Die Struktur der Seite ist hier abgebildet.

Auf der Seite gibt es oben die Navigation und auf der rechten Seite eine Überschrift mit einem Text darunter. Der Text beinhaltet 2 Formatierungen. Einmal einen fett geschriebenen Text und einmal einen Text in einer anderen Farbe.

Auf der linken Seite gibt es drei verschiedene Varianten vom Bildern. Beim ersten Bild wurde ein Rechteck erstellt und das Bild als Hintergrund in dieses Rechteck eingefügt. Beim Bild daneben, handelt es sich um ein normales Bild ohne Effekte und beim ganz rechten Bild wurde ein Schein Effekt angewendet. Diese drei Varianten habe ich erstellt um zu zeigen, welche Arten von Bildern sich bearbeiten lassen und welche nicht.

Die fertige Seite sieht dann wie folgt aus:

2. Schritt – Hochladen der Website

Wenn die Seite fertig ist, müssen wir diese zu unserem Webhost hochladen. Dafür verwenden wir den FTP Zugang, den wir von unserem Provider bekommen haben. Um das Hochladen zu starten, rufen wir über

Datei > Auf FTP Host hochladen

die entsprechende Funktion auf.

Im ersten Fenster geben wir den Servernamen, den Usernamen und das Passwort ein. Damit die Sync Funktion der Online und Offline Inhalte verwendet werden kann, muss man noch die Checkbox bei „Anmeldedaten speichern“ aktivieren

Im nächsten Schritt erfolgt die Eingabe der URL unter der die Seite erreichbar ist. In meinem Fall, habe ich die URL http://demo.andreasstocker.at/ eingerichtet. Beim Hochladen kann man entweder „nur geänderte Dateien“ oder „Alle Dateien“ angeben.

Es dauert jetzt einige Sekunden – je nach Menge der Inhalte und die Seite wurde ins Internet übertragen. Nach dem Upload der Inhalte wird die Seite automatisch im Browser aufgerufen.

3. Schritt – Login in Adobe inbrowserediting

Nachdem wir die Seite jetzt im Internet aufrufen können, ist es auch möglich diese zu editieren. Dazu rufen wir im Browser folgende URL auf:

https://inbrowserediting.adobe.com/login/

In dem Textfeld geben wir die Domain unserer Seite ein. Also in meinem Fall demo.andreasstocker.at

Jetzt werden wir aufgefordert unsere Zugangsdaten einzugeben. Hier verwendet man die selben Daten, wie sie auch bei Adobe Muse zum FTP Upload der Seiten angegeben wurden. Wenn möglich empfehle ich aus Sicherheitsgründen einen eigenen FTP Account für die Online Wartung anzulegen – ist aber nicht unbedingt notwendig.

4. Schritt – Online editieren der Inhalte

Es dauert nun einige Sekunden und man sieht die aktuelle Muse Website. Fährt man jetzt mit der Maus über die verschiedenen Inhalte, so erscheint unterhalb ein Button zum Bearbeiten des Inhaltes. Im Beispiel unten könnte nun die Überschrift bearbeitet werden.

Es ist aber leider nicht möglich alle Inhalte über dieses Tool zu bearbeiten. Auf der einen Seite sind das natürlich Inhalte wie die Navigation, die vom System automatisch erzeugt werden, aber auf der anderen Seite kann man auch verschiedene Arten von Bildern nicht bearbeiten. Im folgenden Screenshot habe ich alle Inhalte grün eingerahmt, die man bearbeiten kann und mit rot all jene Inhalte, die man nicht bearbeiten kann. Zu den Problemen zählen vor allem Bilder, die als Background Image eingefügt werden und auf der anderen Seite all jene Bilder, die in Muse mit einem Effekt versehen wurden.

Will man jetzt einen Inhalt bearbeiten, dann klickt man einfach auf den „Bearbeiten“ Button und schon sieht man das entsprechende Eingabefeld vor sich. Hier kann man jetzt die Inhalte ändern. Es ist nur möglich den Text selbst zu ändern, nicht jedoch die Formatierung. Allerdings kann man bestehende oder neue Textinhalte mit einem Link verknüpfen. Links können sowohl externe Seiten, interne Seiten oder auch Inhalte sein, die man hochladen kann. Damit kann man zum Beispiel recht leicht ein PDF hochladen und zum Download anbieten.
In meinem Beispiel habe ich eine neue Zeile mit dem Inhalt „Diese Zeile wurde über das Web hinzugefügt.“ eingegeben.

Klickt man auf den Aktualisieren Button, dann verschwindet das Eingabefenster wieder und der Inhalt auf der Seite wurde verändert.

Auf die selbe Art, kann man auch Bilder verändern. Einfach den „Bearbeiten“ Button unter dem Bild anklicken und man kommt in das entsprechende Eingabefeld. Bilder können entweder vom Webspace oder von der lokal Platte verwendet werden.

Hat man auch noch andere Device Größen, dann kann man links oben im Drop Down Menü das gewünschte Gerät auswählen und auch diese Inhalte bearbeiten. Wenn man verknüpfte Textfelder verwendet, dann ist es natürlich nicht notwendig alle Geräte einzeln zu bearbeiten. Die Inhalte werden in diesem Fall automatisch übernommen.

Hat man alle gewünschten Änderungen vorgenommen, dann ist es wichtig den grünen Aktualisieren Button links unten anzuklicken. Tut man das nicht, sind alle Änderungen weg.

Auf die selbe Art und Weise kann man jede andere Seite bearbeiten. Einfach mittels der Menüleiste zur entsprechenden Seite wechseln und los geht es. Hat man alle Inhalte erfolgreich verändert, dann kann man sich aus dem Edit Tool wieder abmelden (rechts oben beim Zahnrad).

5. Schritt – Synchronisieren mit MUSE

Es ist auf der einen Seite schön, dass man online die mit Muse erstellten Seiten bearbeiten kann, aber was ist, wenn man etwas am Design verändern möchte. Wie kommen die online geänderten Inhalte wieder in unsere Muse Datei, damit wir mit dem aktuellsten Datenbestand arbeiten können?

Dieses Problem ist sehr einfach zu lösen. Hat man Muse beendet, so muss man das Projekt einfach neu laden. Muse überprüft jetzt automatisch die Online Version und meldet sich, wenn es Inhalte gibt, die synchronisiert werden müssen. Man kann diesen Test auch manuell über

Datei > Synchronisierung mit Webversion

aufrufen.

Stellt Muse eine Änderung fest, dann erscheint ein Hinweis, wie im Screenshot unten zu sehen. Hier ist unsere zusätzliche Zeile zu sehen. Mann kann nun auf „In Muse zusammenführen“ klicken und die online Inhalte wandern in das Muse Projekt. Möchte man die Inhalte nicht übernehmen, dann genügt ein Klick auf „Nicht zusammenführen“. Will man jetzt gar nichts machen dann ist Abbrechen die richtige Wahl.

Hat man alle Inhalte erfolgreich synchronisiert, dann sieht man alle Online Änderungen auch im lokalen Muse Projekt. Das ganze funktioniert übrigens auch, wenn man sowohl lokal als auch Online Inhalte geändert hat. Dann muss man sich entscheiden, welcher Inhalt gelten soll.

Ich denke das Adobe mit diesen Online Edit Funktionen ein oftmals notwendiges CMS nicht mehr notwendig macht, vor allem dann, wenn es darum geht schnell nur bestehende Text und Bild Inhalte zu verändern. Will man neue Inhalte hinzufügen, dann ist das mit Muse allerdings derzeit nur eingeschränkt möglich, da man nur bestehende Text oder Bild Bereiche verändern und erweitern kann.

Ich würde mich übrigens freuen,
wenn Du auch meine Facebook Seite
besuchst und mein Fan wirst.