Skip to end of metadata
Go to start of metadata




Individualisierung des Web Application Design

Sprachen

Dieser Abschnitt gibt Ihnen einen Überblick über die installierten Sprachpakete. Die Sprache, die fett dargestellt ist, ist die Standardsprache.

Wenn ein Benutzer Cryptshare mit einem Browser öffnet, in dem eine Standardsprache eingestellt ist, für die in Cryptshare kein Sprachpaket hinterlegt ist, wird die Standardsprache angezeigt.

Die voreingestellte Standardsprache ist Englisch.

Sprachpakete downloaden

Die im Lieferumfang enthaltenen Sprachpakete können unter folgender Adresse bezogen werden:
Download von Sprachpaketen

User Interface Design (Version 3)


Bitte beachten Sie

Die Informationen dieses Abschnittes sind nur für Crypshare Server Version 3.X.X relevant. Für neuere Version ab 4.0.0 beachten Sie bitte den Folgeabschnitt (siehe unten).

Durch Installation eines User-Interface-Design-Packages ("UI-Packages") können Sie das Design der Benutzeroberfläche verändern. Ein UI-Package, welches Ihr Logo und Ihre Unternehmensfarben enthält, können Sie auf unserer Website unter

https://www.cryptshare.com/de/support/web-application-designer/

jederzeit kostenfrei selbst erstellen.

Das dort erstellte UI-Package können Sie von der Website herunterladen und in diesem Abschnitt auf Ihren Cryptshare Server hochladen.

Hier finden Sie ein paar Beispiele wie andere Kunden Ihre Web-Application angepasst haben:

Anpassung des User Interface Designs

Web Application Designer (ab Version 4)

Beginnend mit Cryptshare Server Version 4.0.0 können Sie die Anpassung des Designs der Benutzeroberfläche direkt in der Administrationsoberfläche vornehmen.

Bitte beachten Sie

Das Importieren von UI-Packages des bisherigen "Web Application Designer" (siehe oben) ist nicht mehr möglich. Bereits installierte UI-Packages (bzw. die darin enthaltenen Anpassungen) werden beim Update auf Version 4.0.0 weitmöglichst übernommen. Bitte prüfen Sie nach dem Update, ob noch manuelle Anpassungen erforderlich sind.

Einfache Anpassungen können im Standard-Modus vorgenommen werden (Registerkarte "Standard").

Weitergehende Anpassungen, für die allerdings spezielle technische Kenntnisse erforderlich sind, können im Fortgeschrittenen-Modus (Registerkarte "Fortgeschritten") vorgenommen werden.

Klicken Sie anschließend auf "Übernehmen", um die Änderungen zu speichern und für die Benutzeroberfläche zu aktivieren.

Inhaltsverzeichnis



Live-Vorschau

Auf der rechten Seite des Hauptbereiches wird eine Live-Vorschau des Designs angezeigt. Diese enthält beispielhaft eine Auswahl an Darstellungs- und Eingabeelementen, an denen die Auswirkungen der Anpassungen geprüft werden können.

Alle Änderungen, die Sie vornehmen, werden direkt in der Live-Vorschau angezeigt.

Standard

Im Bereich "Standard" sind einfache Anpassungen der Benutzeroberfläche der Webanwendung möglich, ohne dass weitere technische Kenntnisse erforderlich sind. In den meisten Fällen sind diese Möglichkeiten ausreichend, um die Anwendung an Ihr Corporate Design anzupassen.

Allgemein

Neben neutralen Graustufen werden in der Anwendung im Wesentlichen zwei Akzentfarben verwendet. Die Primärfarbe dient der Hervorhebung der Haupt-Aktionen einer Seite, beispielsweise der wichtigsten Schaltflächen. Untergeordnete Aktionen oder Zusatzfunktionen werden durch die Sekundärfarbe akzentuiert.

Wählen Sie die Farben mithilfe des Farbreglers aus oder tragen Sie den RGB-Wert der Farbe im Hexadezimalformat in die entsprechenden Eingeabefelder ein, wenn Ihnen dieser bekannt ist.

Da die Schriftfarbe der Schaltflächen Weiß ist, sollten die gewählten Farben nicht zu hell sein. Somit gewährleisten Sie eine gute Lesbarkeit.

Im Kopfbereich der Anwendung ist eine Fläche für die Darstellung des Logos vorgesehen. Als Vorgabe ist das Cryptshare-Logo eingebunden, welches Sie durch ein eigenes Logo ersetzen können.

Zulässig sind folgende Dateitypen:

  • JPEG (*.jpg)
  • PNG (*.png)
  • SVG (*.svg)

Achten Sie darauf dass die Farben im Logo für den Farbraum RGB gespeichert sind. Der Farbraum für Printmedien CMYK verursacht in manchen Browsern Probleme.

Um die Darstellungsgröße des bereitgestellten Logos auf die zur Verfügung stehende Fläche anzupassen, können Breite und Höhe der Grafik relativ zur Fläche (in %) oder absolut (in Pixel) angegeben werden.

Die Fläche die Standardmässig für das Logo zur Verfügung steht hat eine Breite von 540px und eine Höhe von 70 px.
Um Ihr Logo auf dieser Fläche zu plazieren aktivieren Sie die Ankreuzfelder "Breite anpassen" bzw. "Höhe anpassen".

Wird nur eine der beiden Größen angepasst, wird die andere anhand des Seitenverhältnisses proportional zur angepassten Größe ermittelt.
Werden beide Größen nicht angepasst, wird das Logo in Originalgröße dargestellt (ggf. als Ausschnitt, falls die Verfügung stehende Fläche nicht ausreicht).

Passen Sie (falls überhaupt notwendig) nur eine der beiden Größen an, damit das Logo nicht verzerrt dargestellt wird. In den meisten Fällen reicht eine Anpassung der Höhe auf 100% aus, um das Logo so zu skalieren, dass es ganz in die Darstellungsfläche passt. Falls das Logo anschließend auf der rechten Seite noch abgeschnitten wird, versuchen Sie stattdessen eine Anpassung der Breite auf 100%, ohne Anpassung der Höhe.

Das Logo kann innerhalb der zur Verfügung stehenden Fläche links, rechts oder zentriert ausgerichtet werden. Wählen Sie dazu die entsprechende Option in der Auswahlliste "Positionierung".

Hintergrund

Als Hintergrund für die Anwendung, also der Bereich, der um den Anwendungsbereich herum angezeigt wird, kann entweder eine Farbe oder ein Hintergrundbild verwendet werden. Wählen Sie eine Datei aus und klicken Sie auf "Hochladen", um sie als Hintergrundbild festzulegen. Zulässig sind folgende Dateitypen:

  • JPEG (*.jpg)
  • PNG (*.png)
  • SVG (*.svg)

Achten Sie darauf dass die Farben im Logo für den Farbraum RGB gespeichert sind. Der Farbraum für Printmedien CMYK verursacht in manchen Browsern Probleme.

Beachten Sie folgende Hinweise, um bei Nutzung eines Hintergrundbildes eine optimale Benutzerfreundlichkeit zu erreichen:

  • Aufgrund der Standardfarben der Anwendung eignen sich dunklere Bilder eher als helle.
  • Setzen Sie Auflösung und Kompression so, dass die Dateigröße klein genug ist um auch langsamere (z.B. mobile) Verbindungen zu bedienen. Als Maximalgröße empfehlen wir 100KB.
  • Wählen Sie ein Bild mit wenigen Details oder wenden Sie einen Unschärfefilter darauf an, damit der Hintergrund nicht von der eigentlichen Anwendung ablenkt.

Möchten Sie statt eines Bildes eine einfarbige Fläche als Hintergrund, aktivieren Sie "Hintergrundfarbe verwenden" und wählen die gewünschte Farbe aus.

Fortgeschritten

In diesem Modus können zusätzliche Anpassungen mithilfe von benutzerdefinierten CSS-Regeln vorgenommen werden. Diese überschreiben ggf. die Standard-Vorgaben sowie die im Standard-Bereich vorgenommenen Anpassungen.

Verwenden Sie die in Ihrem Browser integrierten Entwicklungswerkzeuge (zumeist mit F12 aufrufbar), um die benötigten CSS-Selektoren anhand der Live-Vorschau zu ermitteln.

E-Mail Layout

Dieser Bereich bietet ein Benutzerinterface zur Gestaltung des HTML E-Mail Layouts. Verändert werden können die Bereiche Anwendungslogo im linken oberen Bereich und die Farben.

Alle E-Mail-Benachrichtigungen in Cryptshare haben ein Anwendungslogo im oberen linken Bereich des E-Mail-Kopfes. Dieses Logo kann durch ein eigenes Logo ersetzt werden.
Um das Logo zu ersetzen, laden Sie hier einfach ein neues Logo, entsprechend den unten genannten Voraussetzungen, hoch.
Das Ergebnis können Sie in der E-Mail-Vorschau im unteren Bereich ansehen.

Voraussetzungen

  1. Nur PNG-Grafiken sind gestattet
  2. Die maximale Breite des Bildes sollte 200 Pixel betragen
  3. Der Farbraum sollte auf RGB festgelegt werden


Unter bestimmten Umständen kann das E-Mail Logo nicht direkt ausgetauscht werden und bricht mit einer Fehlermeldung ab.

In diesem Falle sollten Sie den Cryptshare Server neu starten und es noch einmal versuchen.

Kontrollieren Sie auch die o.g. Voraussetzungen.
Sollte das nicht zum gewünschten Ergebnis führen, lesen Sie bitte diesen Knowledgebase Artikel: Email logo cannot be uploaded on the Administration Interface

E-Mail Farben

Für E-Mail Benachrichtigungen existieren 7 Vorgabefarben welche mit den entsprechenden Farbwählern geändert werden können.

Farbwähler

Farbauswahl

Wähen Sie die Farbe aus indem Sie entweder mit der Maus darauf klicken oder einen HEX-Farbwert in das Feld darunter eingeben.

Reset

Benutzen Sie den Reset-Knopf eines Farbwählers um die zuletzt gespeicherte Farbe wieder herzustellen.

Farbbereiche in der E-Mail

Header 1

Derzeit wird dieser Farbwert lediglich in der Empfängerbenachrichtigung verwendet.. Alle anderen Benachrichtigungen verwenden die Einstellung für Header 2.

Header 2

Dieser Farbwert wird in allen Benachrichtigungen als Hintergrund für den E-Mail-Titel verwendet.

Hintergrund

Der Inhalt der E-Mail wird zentriert. Dieser Hintergrundwert legt die Farbe für den umgebenden Bereich fest.

Inhaltshintergrund

Dieser Farbwert legt die Hintergrundfarbe für den E-Mail Inhalt fest.

Text

Der Hauptfarbwert für den Nachrichtentext sowie anderer Textpassagen.

Legt die Hintergrundfarbe für den linken Bereich des E-Mail-Fußes fest..

Fuß Rechts

Legt die Hintergrundfarbe für den rechten Bereich des E-Mail-Fußes fest.

Standardfarben/Zurücksetzen auf Standardeinstellungen

Mit einem Klick auf den Button 'Standardfarben' werden die Cryptshare Standardfarben wiederhergestellt.

HTML E-Mails können stark angepasst werden. Weitere Informationen darüber sind im Kapitel HTML E-Mail Templates zu finden.

Benutzerdefinierte Links

Diese Ansicht ermöglicht die Erstellung und Bearbeitung von individuellen Links je Sprache, als Einträge des Seiten-Menüs in der Anwendung.

Ein benutzerdefinierter Link hat folgende Eigenschaften:

  • Aktiviert / Nicht aktiviert: Legt fest, ob der Menüeintrag im Menü angezeigt wird. Deaktivieren Sie einen Link, um ihn kurzzeitig oder dauerhaft auszublenden, ohne ihn ganz zu entfernen. Dies ist z.B. auch für Einträge interessant, die nicht entfernbar sind ("Hilfe", siehe unten).
  • Beschriftung: Der im Menü angezeigte Text. Bitte beachten Sie, dass ein zu langer Text das Layout des Menüs und die Benutzerfreundlichkeit beeinträchtigen kann. Wählen Sie eine möglichst aussagekräftige und kurze Beschriftung.
  • Ziel-URL: Die URL, die bei Klick auf den Menüeintrag aufgerufen wird. Benutzerdefinierte Links werden immer in einem neuen Browser-Tab, bzw. (je nach Konfiguration des Browsers) in einem neuen Browser-Fenster geöffnet. Eine URL besteht aus einer Internetadresse und dem vorangestellten Protokoll, also beispielsweise http://www.cryptshare.com.
  • Zugeordnete Sprache: Für jede installierte Sprache der Anwendungsoberfläche wird eine Registerkarte angezeigt. Benutzerdefinierte Links werden für jede Sprache separat verwaltet. Auf diese Weise können Sie dem Benutzer, abhängig von der Sprache, verschiedene Links präsentieren, die beispielsweise auf unterschiedliche Varianten einer externen Webseite verweisen.

Bearbeiten der Einträge

Um einen neuen Eintrag anzulegen, klicken Sie auf die Schaltfläche "Link hinzufügen". Der neue Link wird in die Liste hinzugefügt und kann direkt bearbeitet werden (die Angaben von Beschriftung und Ziel-URL sind erforderlich).

Die Beschriftung und die Ziel-URL bestehender Einträge lassen sich nach Klick auf die Schaltfläche  bearbeiten. Beide Angaben sind erforderlich, die Ziel-URL muss zudem ein gültiges Format aufweisen (siehe oben). Klicken Sie auf , um die Bearbeitung abzuschließen, oder auf , um die Änderungen zu verwerfen.

Um einen bestehenden Eintrag zu löschen, klicken Sie auf das Mülleimer-Icon . Nach Speicherung der Änderungen (siehe unten) wird der Eintrag dauerhaft aus dem Menü der jeweiligen Sprachen entfernt.

Als Vorgabe ist für jede installierte Sprache ein "Hilfe"-Link angelegt, der auf die Cryptshare-Dokumentation unter https://wiki.cryptshare.com verweist. Dieser Link kann nicht bearbeitet oder gelöscht werden. Falls Sie einen eigenen "Hilfe"-Link in die Anwendung integrieren möchten, können Sie den vorgegebenen Eintrag aber mit dem Ankreuzfeld "Aktiv?" deaktivieren (Haken entfernen) und stattdessen einen eigenen Eintrag erstellen.

Die Anordnung der benutzerdefinierten Links im Anwendungsmenü kann über die Schaltflächen  und  angepasst werden.

Bitte beachten Sie, dass die erfolgte Bearbeitung erst durch Klick auf die Schaltfläche "Änderungen speichern" dauerhaft gespeichert wird.

Benutzerdefinierte Links Beispiel: Download-Link für Cryptshare for Office 365 & Outlook

Sie können das Feature benutzerdefinierte Links verwenden, um einen Link zum Cryptshare für Office 365 & Outlook Installer in die Benutzeroberfläche zu integrieren, damit Ihre Benutzer schnell das neueste Installationsprogramm erhalten.

Um dies hinzuzufügen, führen Sie bitte diese Schritte aus:

  1. Gehen Sie zum Abschnitt "Benutzerdefinierte Links" auf der Seite "Individualisierung".

     
  2. Wechseln Sie zur Registerkarte mit der Sprache, für die Sie den Link erstellen möchten.

     
  3. Klicken Sie auf "Link hinzufügen".

     
  4. Es erscheint ein neuer Eintrag, in dem Sie das Label eingeben können, z.B. "Cryptshare für Office 365 & Outlook Installer", und den Link, der auf eine Kopie des Installers verweist, den Sie auf Ihrem Server abgelegt haben.
     
  5. Speichern Sie den neuen Eintrag, indem Sie auf die Schaltfläche mit dem Häkchen und anschließend auf "Änderungen speichern" klicken.
     

     
  6. Wenn Sie den Link in mehreren Sprachen hinzufügen möchten, wiederholen Sie die Schritte 2 bis 5 für die anderen Sprachen.

Der Link wird für alle Benutzer mit Zugriff auf das User Interface sichtbar und nutzbar sein; Wenn Sie möchten, dass das Installationsprogramm nur für interne Benutzer verfügbar ist, funktioniert dieser Ansatz nicht.