Umbraco BackOffice kennenlernen

Anmelden

Sich anzumelden ist denkbar einfach. Sie öffnen einen Webbrowser wie Chrome, Firefox, Opera, Edge und geben den Namen Ihrer Webseite in die Adresszeile ein. Allerdings ist hinter die Adresse noch ein Slash „/“ und „umbraco zu setzen, z.B. www.laykit-tutorials.de/umbraco (Abb. 02-01).

Es erscheint der Login-Bildschirm (Abb. 02-02), in dem Sie ihren Benutzernamen (Username) (1) und Ihr Kennwort (Password) (2) eingeben. Der Benutzername kann auch eine E-Mail-Adresse sein. Dieses und ihr Kennwort haben Sie von Ihrem Systemadministrator erhalten. Sollten Ihr Umbraco auf Ihrem Arbeitsplatzrechner installiert sein, so mussten Sie Benutzernamen und Kennwort bereits festlegen.

Nach dem Klick auf Login erscheint der Begrüßungsbildschirm von Umbraco, es sei denn, Sie haben falsche Eingaben vorgenommen, wie in Beispiel (Abb. 02-03). Sie korrigieren einfach die Eingaben und klicken erneut auf Login. Haben Sie alles richtig gemacht, erscheint die Verwaltungsoberfläche (BackOffice) von Umbraco. 

Wenn Sie oder Ihr Web-Entwickler ein Starter Kit installiert haben, sehen Sie den Begrüßungstext, wie im Bild Abb. 02-04 gezeigt. Das Starter Kit enthält ein paar einfache Templates und Einstellungen, sowie Hintergrund-Bilder und CSS-Styles, die die Seiten, die Sie mit Inhalten füllen, ein wenig nach etwas aussehen. Das erlaubt es Ihnen, auf bequeme Weise, sich mit Umbraco vertraut zu machen.

Abmelden

Beachten Sie bitte die Leiste am linken Rand des Browser-Fensters. Hier befinden sich die Sektionen von Umbraco. In einer neuen Umbraco-Installation gibt es acht Sektionen. In jeder Sektion ist eine Reihe von Aufgaben zusammengefasst, die zu einem bestimmten Thema gehören. Wichtig für dieAbmeldung ist die Schaltfläche ganz oben links, Avatar genannt, siehe Abb. 02-05, (1). Der Avatar, ist ein Kreis, in dem der Anfangsbuchstabe Ihres Profilnamens oder ein „U“ für Umbraco steht. Wenn Sie den Mauszeiger darüber halten, wird ihr Profilname angezeigt. Drücken Sie die Schaltfläche, so öffnet sich ein Dialog.

Im geöffneten Dialog sehen Sie eine rote Schaltfläche Abmelden, bzw. Logout (2), auf die Sie klicken müssen, um sich abzumelden. Nach dem Abmelden wird erneut der Login-Dialog angezeigt. Mit einem Klick auf den Avatar können Sie bequem zwischen diesem Dialog und dem Ort im Verzeichnisbaum wechseln, in dem Sie sich befinden.

Die folgenden drei Beispiele sollen Ihnen die Einfachheit der Bedienung von Umbraco illustrieren.

Mit den ersten Angaben bei der Installation hat Umbraco ein Benutzerprofil erstellt. Darin wollen wir einige Änderungen vornehmen. Zuerst soll das Password geändert, dann ein Bild von uns hochgeladen und zuletzt die BackOffice-Sprache auf Deutsch umgestellt werden, sofern dies nicht bereits geschehen ist.

Passwort ändern

Melden Sie sich erneut mit Ihrem Namen, bzw. der Emailadresse und dem Passwort an. Klicken Sie erneut auf den Avatar links oben. Im sich nun öffnenden Fenster wählen Sie die Schaltfläche Change password (Abb. 02-06).

Geben Sie ein neues Kennwort ein (1), das Sie mit einer erneuten Eingabe bestätigen müssen (2). Bedenken Sie bitte, dass Umbraco mindestens 8 Zeichen verlangt (Den Wert 8 kann Ihr Web-Entwickler in der zentralen Konfigurationsdatei für Umbraco, der web.config jederzeit ändern). Um die Sicherheit des Passwortes zu gewährleisten, sollte es aus Groß- und Kleinbuchstaben, Zahlen und auch Sonderzeichen wie „!“, „§“, „$“, „%“ bestehen. Klicken Sie auf Change password (3) so ist das neue Passwort gespeichert. Vergessen Sie nicht, sich das neue Passwort zu notieren und an einem sicheren Ort aufzubewahren.

Melden Sie sich mit ihrem neuen Passwort an, klicken Sie erneut auf den Avatar, das Profilbild (admin profile picture) und dann auf die Schaltfläche Bearbeiten, bzw. edit. Es öffnet sich das Profil, in dem Änderungen vorgenommen werden. Rechts sehen Sie einen Platzhalter für ein Bild.

Upps, das war das falsche Bild. Mit Remove photo werde ich das schnell ändern. Das neue Bild ist zwar auch nicht so überzeugend, aber vorläufig soll es genügen. 

Selbstverständlich kann das Bild wieder entfernt und durch ein anderes ersetzt werden. Mit dem Einfügen des Bildes hat sich das Aussehen des Avatars geändert. Anstelle des Buchstabens ist nun das Bild von mir zu sehen (Abb. 02-08).

Wenn Sie Ihre Aufmerksamkeit auf die Sektion-Leiste links richten, so sehen Sie bei dem Symbol Person eine türkise Linie. Diese zeigt an, welche Sektion aktiv ist (4), in diesem Fall die Sektion Benutzer (user). Diese Ansicht können Sie nur sehen, wenn Ihnen die entsprechende Rolle zugewiesen wurde. Beispielsweise die Rolle "Editor" zeigt nur die Content-Sektion und die Media-Sektion. Als Editor können Sie lediglich Ihr Passwort ändern, aber die anderen Einstellungen muss Ihr Administrator vornehmen. Haben Sie die entsprechende Rolle, sehen Sie alle Möglichkeiten, einen Benutzer zu konfigurieren (Abb. 02-09). Interessant sind nun die Einträge unterhalb von Status rechts im Inhaltsbereich. Hier stehen einige Information: wann Sie sich zuletzt angemeldet haben (1), wann Ihr Profil angelegt wurde (2) u.a.m. In der linken Spalte sehen Sie die Rolle (3), die dem Benutzer (user) zugewiesen wurde, hier in diesem Beispiel die Rolle des Administrators.

Sprache im BackOffice ändern

Es ist leicht zu erkennen, wo die Sprache zu ändern ist. In der mittleren Spalte unter Profile / E-Mail finden sie ein Auswahlmenü unter Sprache, bzw. Language (Abb. 02-08). Nehmen wir an, es wurde übersehen, die Sprache im Backoffice auf deutsch umzustellen, so läßt das jetzt nachholen. Das Auswahlmenü öffnen und die gewünschte Sprache auswählen und nicht vergessen, die grüne Schaltfläche Speichern (Save) anwählen. Möglicherweise ist keine Änderung zu sehen. Aktualisieren Sie in diesem Fall den Browser mit der Tastenkombination Strg+5 oder dem Kontextmenü der Maus (rechte Maustaste). In Umbraco können so Benutzern unterschiedliche Sprachen im Backoffice zugewiesen werden, was besonders für multilinguale Webseiten interessant ist. In (Abb. 02-10) sehen Sie ein Profil in Russisch und eines in Französisch. Selbstverständlich handelt sich in diesem Beispiel um keine mehrsprachliche Installation, so daß die Seiten selbst weiterhin in deutscher Sprache erscheinen. Im französischen Beispiel für den Mitarbeiter Etiènne sehen Sie in der linken Spalte der Sektion-Leiste nur ein einziges Symbol. Das hängt damit zusammen, daß Etiènne von seiner Rolle her nur Text bearbeiten darf. Je nach Rollenzuweisung kann die Ansicht im Backoffice unterschiedlich sein.

Wenn Sie jetzt versuchen wollten, die Profile wieder zu löschen, so werden Sie feststellen, daß dies nicht möglich ist, zumindest nicht im BackOffice. Dieses Verhalten findet seine Erklärung in den grundlegenden Prinzipien von Datenbanken. Stellen Sie sich vor, Etiènne hätte einige Artikel publiziert und wir würden sein Profil löschen. Dann würden seine Artikel publiziert sein aber ohne Namen. Sollte er als Redakteur ausscheiden, so wird sein Profil nicht gelöscht, sondern kann nur deaktiviert werden.

Der Benutzer Etienne kann sein Profil nicht ändern (Abb. 02-10). Wie auf der rechten Seite der Abbildung zu sehen ist, hat er nicht die entsprechenden Rechte auf die Benutzer-Sektion zuzugreifen. Er kann lediglich sein Passwort ändern.

Falls ein Benutzer die entsprechenden Rechte besitzt, kann er über das Symbol Person in der Sektion-Leiste sein Profil ändern. (Abb. 02-11). In dieser Abbildung sehen Sie im Überblick die verfügbaren Sektionen. Die Sektion-Leiste passt sich der Bildschirmhöhe automatisch an, existieren mehr Sektionen als die Bildschirmhöhe anzeigen kann, erscheint das Pfeil-Symbol. Das Symbol Pfeil zeigt an, das hier noch weitere Sektionen vorhanden sind. Beim Klick auf das Symbol öffnen sich diese weiteren Symbole in einer zweiten Spalte.

Die verschiedenen Bereiche im Umbraco-BackOffice

Werfen Sie einen kurzen Blick auf das BackOffice in Umbraco, um sich mit einigen Begriffen vertraut zu machen.

• Content-Sektion (1)
• Medien-Sektion (2)
• Sektion Einstellungen (3)
• Baumansicht (4)
• Suchfeld (5)
• Content-Bereich (6)

User Profile 

Ganz oben links können Sie Ihr Profil bearbeiten, die Sprache ändern, ein Foto von sich hochladen usw.

Sektion-Leiste

Links finden Sie die Sektion-Leiste (Obergine-Farben). Rechts von ihr sehen Sie die Baumansicht, welche die Struktur der Webseite zeigt.

Baumansicht (4)

Wenn Sie hier aufklappen, so finden Sie die Struktur Ihrer Webseite. Die Anordnung ist analog zu den Dateimanagern, wie Sie es von verschiedenen Betriebssystemen her kennen.

Suchfeld (5)

Bei umfangreichen Seiten verliert man gerne den Überblick. Mit Hilfe der Suche lassen sich einzelne Dokumente leichter auffinden.

Medien-Sektion (2)

In der Medien-Sektion können Sie verschiedenste Assets wie Bilder, PDF-Dateien oder VCF-Visitenkarent-Dateien hochladen, welche Sie dann in der Content-Sektion in die jeweiligen Dokumente als Download verlinken oder im Fall von Bildern, in ein Dokument einfügen.

Inhaltsbereich / Content Sektion (1)

Hier wird die Webseite verwaltet, Texte und Bilder in die einzelnen Seiten eingefügt oder verändert und veröffentlicht. Selbstverständlich können Sie in Umbraco auch Slider verwalten und Videoclips einfügen.

In Beispiel (Abb. 02-13) etwas unterhalb von Home, das ist die Seite, welche der Betrachter nach Aufruf der Url sieht, sind die Seiten Kontakt, Bulgarisch und EDV-Training zu sehen. Zwischen Home und Kontakt finden sich noch weitere Einträge. Product ist ausgegraut, das bedeutet, daß diese Seite nicht veröffentlicht ist und damit nicht auf der Webseite erscheint. Werfen wir einen Blick auf die Erscheinung im sogenannten Frontend. Dazu kann ein neuer Tab im Browser geöffnet werden, in den Webadresse eingetragen wird, aber ohne „/umbraco“, in diesem Beispiel die Url: www.laykit-tutorials.de.

Vergleichen Sie die Elemente Über uns, Blog, Kontakt, Bulgarisch, EDV-Training und Home der Website (Abb. 02-14) mit dem Backoffice (Abb. 02-13). In diesem Beispiel erscheinen die veröffentlichten Seitennamen automatisch als Navigationselemente auf der Website.

Um im Baum zu navigieren klicken Sie im BackOffice auf den schwarzen Pfeil links der Einträge und es werden die zugehörigen Unterseiten geöffnet. Klicken Sie auf den Dokument-Namen selbst, so wird der jeweilige Inhalt des Dokumentes in den rechten Inhaltsbereich geladen. Im vorliegenden Beispiel sehen Sie die Unterseite „Erste Schritte in Calc“ (1) mit dem Richtext-Editor rechts unter der Überschrift „Erste Schritte in Calc von LibreOffice“ (Abb. 02-15).

Verhalten des BackOffice von Umbraco bei kleineren Bildschirmen

Die Baumansicht gestattet eine rasche Bedienung, um zu navigieren und Seiten auszuwählen. Auf kleineren Geräten wie Laptops oder Tablets wird sie allerdings geschlossen, um Platz für den Content-Bereich, den Inhaltsbereich rechts zu lassen und muss über einem Klick auf eines der Icons der dunkelblauen Sektions-Leiste geöffnet werden. Dadurch überdeckt die Baumansicht den Content-Bereich (Abb. 02-16)

Nachdem ein Element in der Baumansicht angewählt wurde, wird diese Ansicht geschlossen, um erneut Platz für den Inhaltsbereich zu machen (Abb. 02-17).

Allerdings wirkt die Darstellung des Inhaltsbereichs bei ganz kleinem Bildschirm nicht optimal. Mit dem Smartphone sollte auch nur im besonderen Fall eine Webseite bearbeitet werden. Bedenken Sie, dass diese unvorteilhafte Darstellung nur das BackOffice betrifft und nicht das Aussehen des Webauftritts.

Wenn Sie die Baumansicht schließen wollen, ohne eine bestimmte Seite auszuwählen, bewegen Sie die Maus aus dem Bereich der Baumansicht hinaus.

Ausblick auf den dritten Teil

Im dritten Teil der Artikelserie werden Sie nun sehen, wie man Dokumente bearbeitet, wie man Texte und Bilder in ein Dokument einfügt. Zudem lernen Sie, wie man Dokumente zeitgesteuert publiziert, wie man sie kopiert oder löscht. In diesem Zusammenhang werden Sie auch den Papierkorb kennen lernen, aus dem Sie Dokumente auch wieder an den urspünglichen Ort zurücklegen können.