SCHEMA Blog

Corporate Blog der SCHEMA GmbH

SCHEMA Reader: Ihr eigenes Design in vier Schritten

Hinterlasse einen Kommentar

Mit Buchstaben kann man Sektkorken schlecht knallen lassen. Aber heute gibt es tatsächlich etwas zu feiern: Der SCHEMA Reader geht nach der Pilotphase offiziell an den Start.

Quasi als Einstand hatten wir vor zwei Wochen hier im Blog eine kostenlose SCHEMA Reader-Anpassung ausgelobt. Mit PHILIPS Healthcare haben wir einen unserer Kunden für dieses Beispielprojekt gewinnen können. Stationäre Hilfe spielt für PHILIPS in der Anwender-Instruktion eine ganz zentrale Rolle.

Wie sieht der SCHEMA Reader in einer firmeneigenen Aufmachung aus? Das ist Thema meines Posts heute. Aber Sie sollen nicht nur ein paar Screenshots eines frisch angepassten Layouts zu sehen bekommen. Ich möchte Ihnen kurz zeigen, was ich für diese Design-Anpassung alles getan habe. Und wie Sie sehen werden: So viel ist das gar nicht.

Was alles geht

Bevor ich mich gleich mit Ihnen auf den Weg durch die Konfigurations-Dateien mache, möchte ich Ihnen erst einmal das Ergebnis zeigen. So sieht der jetzt in PHILIPS Reader umgetaufte SCHEMA Reader aus. Individuell angepasst sind im Bereich des Anwendungsrahmens z. B. das Logo, die Farbigkeit und die Verfügbarkeit der Standard-Funktionalitäten. Aber auch die Inhalte im Content-Frame erscheinen in der PHILIPS-CI.

SCHEMA Reader Branding 1

SCHEMA Reader Branding 2

Wie man’s macht

Es sind gerade einmal drei Konfigurationsdateien, in denen Sie bei so einer Layoutanpassung zu Gange sind. Dazu kommen noch fünf Grafiken. Zu finden ist das Ganze im Installationsverzeichnis des SCHEMA Readers unter …\SCHEMA Reader\dist\branding.sample.

Damit die Anpassungen technisch wirksam werden können, habe ich als erstes das Verzeichnis von branding.sample in branding umbenannt. Und damit kann’s losgehen.

Datei „branding.json“: Nur ein paar Werte setzen

Wagen wir uns auf dem Weg der Konfiguration als erstes in die Datei branding.json. Wenn man sie im Editor öffnet, wird gleich klar, dass hier wenig zu tun ist – und dass man auch wenig falsch machen kann. Hier lege ich ein paar Metainformationen fest, zum Beispiel über „name“ den Eintrag in der Titelleiste. Außerdem deklariere ich die Grafiknamen und lege unter „panes“ fest, welche Features des Anwendungsrahmens aktiv oder ausgeblendet sind.

SCHEMA Reader Branding: branding.json

Bilddateien austauschen

Auch die nächste Übung ist eine denkbar einfache. Nachdem ich die Grafiken deklariert habe, müssen natürlich auch entsprechende Grafikdateien im Verzeichnis liegen. Wir verwenden bis auf das eine PNG-File SVG-Grafiken, weil wir über dieses Format eine hohe Endqualität bei kleinen Dateigrößen erzielen (via SVG sind übrigens auch Animati-onen möglich). Prinzipiell können Sie mit den Formaten SVG, PNG und JPG arbeiten.

Beispiel: Die Datei about-logo.svg erzeugt das Logo im Dialog Info/About, den Sie über das Fragezeichen oben rechts aufrufen.

SCHEMA Reader Branding: about-logo.svg

branding.css: Farben festlegen

Wie in der Datei branding.json beziehen sich die Einstellungen in der branding.css auf den Anwendungsrahmen. Auch ohne CSS-Kenntnisse kommt man in dieser Datei ganz schnell ans Ziel: Man muss nämlich nur Farbwerte austauschen. Worauf sich die Farben der jeweiligen Variablen auswirken, kann man in der SCHEMA Reader-Hilfe nachlesen.

SCHEMA Reader Branding: branding.css

content.css: Layout für Inhalte festlegen

Am Anspruchsvollsten ist sicherlich die Arbeit in der content.css. Sie definiert das Layout für den Content-Frame, also Typographie, Abstände oder das Design von Querverweisen und Tabellen. Wer im Bereich CSS zuhause ist, wird sich nicht sonderlich schwer tun. Ich selbst habe mir die Arbeit dadurch erleichtert, dass ich die CSS-Definition der Vorgänger-Hilfe (HTML-Help) größtenteils übernommen habe.

SCHEMA Reader Branding: content.css

Woher die Inhalte kommen

In Sachen Layout-Konfiguration war’s das schon. Mit diesen gerade einmal vier Schritten ist alles getan, um dem SCHEMA Reader ein individuelles Design zu verpassen.

SCHEMA Reader Branding 3

Zum Schluss noch ein Hinweis: Die Inhalte des PHILIPS Readers kommen direkt aus der Vorgänger-Hilfe. Die ursprünglich in CHM verpackten Daten habe wir mit dem Tool mshcMigrate ins Microsoft Help Viewer-Format konvertiert und anschließend in SCHEMA Reader-Packages überführt (siehe auch u.s. Nachtrag). Wie der letzte Schritt funktioniert, können Sie in der SCHEMA Reader-Hilfe nachlesen. Dort finden Sie auch noch weitere Informationen zur Layout-Konfiguration.

Viel Spaß beim „branden“

So, und jetzt sind Sie dran. Versuchen Sie doch an einem eigenen „Branding“ (so nennen wir intern dieses Verfahren der Layout-Anpassung auch). Das Installationspaket für den SCHEMA Reader mit allen wichtigen Informationen finden Sie hier. Und nach wie vor gilt: Den SCHEMA Reader können Sie gratis nutzen und verteilen!

Nachtrag

Ich habe ein paar Rückfragen zu Problemen mit dem Tool mshcMigrate erhalten. Das Tool hat anscheinend einen Bug, denn das Encoding der generierten MSHA-Datei ist fehlerhaft.
Wenn man die MSHA-Datei in einem Editor (z.B. Notepad++) öffnet, das Encoding auf UTF-8 ändert und die Datei wieder speichert, sollte der Import in den SCHEMA Reader ohne Probleme funktionieren.

Autor: Jochen Marczinzik

Team lead web and mobile development at SCHEMA GmbH

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s