inklusive Verwendung verschiedener Feldspezialoptionen (FSO)
Um einen Visitenkarte nach den gegebenen Designvorgaben in einem Portal aufzubauen, empfehlen wir folgende Vorgehensweise:
1. Platzieren Sie zunächst Ihre Hintergrundebene (PDF) inklusive Beispieldaten, um die Textstände besser abgleichen zu können.
Abbildung
2. Beginnen Sie im Layouter mit dem Aufbau und Positionieren der Textboxen. Hier können Sie die X- und Y- Koordinaten aus dem InDesign Dokument ganz einfach übernehmen.
3. Fügen Sie nun, für die jeweilige Textbox, die zuvor erstellen Variablen der Pers.Daten ein.
4. Weisen Sie den Variablen die für Ihre spezifische Visitenkarte notwendigen Regeln und Inlineoptionen zu. Dies können beispielsweise Tabulatoren, unterschiedlicheTextgrößen, verschiedene Schriftschnitte, wechselnde Textfarben und so weiter sein.
Eventuell kann es ratsam sein, auf den Seitenwechsel bei einer zweiseitigen Visitenkarte zu verzichten und die Ansicht im Frontend „untereinander“ anzubieten. Die Erfahrung hat gezeigt, das eine zweite Seite zum Blättern auch schon mal übersehen werden kann.
Diese Einstellungen werden bei der Artikeleinrichtung abgefragt.
Nachdem der Grundaufbau der Visitenkarte steht, können Sie nun die Optik für das Frontend, mit Hilfe unterschiedlicher Feldspezialoptionen, benutzerfreundlich anpassen.
Ungewollte Leerzeichen des Nutzers innerhalb der Personalisierung, können durch die Aktivierung der Feldspezialoption „Leerzeichen am Wortanfang / Wortende entfernen“ vermieden werden.
Die FSO „Beispieltext“ bietet 3 Optionen, um den Benutzer bei der Personaliserung anzuleiten.
1. Durch einfache Texteingabe im Backend, wird dieser Text unterhalb des zu befüllenden Feldes im Frontend angezeigt.
2. Durch das Setzen eines Fragezeichens „?“ zu Beginnn der Texteingabe im Backend, wird Frontend innerhalb des Eingabefelds ein Fragezeichen angezeigrt, welches durch Mouse-over den entsprechenden HIlfetext anzeigt.
3 Um den Benutzer eine zusätzliche Option zur Aktualisierung seiner getätigten Eingaben zu bieten, kann innerhalb der FSO unter dem Punkt „Beispieltext“ folgende Abfrage hinterlegt werden:
<input type=“button“ class=“btn btn-primary btn-sm pull-right crBtnPreview btn-cta-topbar“ value=“Aktualisieren“ style=“font-size:0.8em;padding:2px 10px;margin:4px 0px;; border-radius: 3px“ />
Hierbei kann individuell entschieden werden, unterhalb welcher Feldeingabe (Variable) dieser zusätzliche Button positioniert werden soll. Selbstverständlich besteht auch die Möglichkeit, diesen mehrfach zu verwenden.
Die Eingabe einer „Überschrift“ führt zu einer benutzerfreundlichen optischen Unterteilung der Eingabefelder.
Sollte im Aufbauprozess beispielsweise die Benennung einer Variable nicht passend erscheinen, kann diese ganz einfach per „Abweichender Feldname“ umbenannt werden.
Beispiel: anstelle des Titels soll hier der Akademische Grad eingegeben werden können.
Die FSO „Feld anfügen“ bietet die Möglichkeit, das Eingabefeld im Frontend zum einen von der Position her etwas anzupassen, zum anderen können dadurch mehrere Felder hintereinander positioniert werden. Dies ist etwa bei Eingabe einer Telefonnummer notwendig, wenn hier verschiedene Variablen zum Einsatz kommen.
Um ein optisch ansprechendes Bild der Eingabemaske zu erhalten sind hier noch ein paar weitere Anpassungen notwendig.
Im dargestellten Beispiel werden vier Variablen für die Telefonnummer benötigt:
• TelefonLVW (Ländervorwahl)
• TelefonVW (Vorwahl)
• TelefonHW (Hauptwahl)
• TelefonDW (Durchwahl)
Um diese 4 Variablen in einer Zeile hintereinander darzustellen sind mehrere Einstellungen notwendig.
TelefonLVW:
Für jede verwendete Variable kann individuell ein „Platzhalter- oder Standardtext“ in den FSO vergeben werden. Dies erhöht die Benutzerfreundlichkeit.
Der nächste Punkt, um alle Variablen in einer Zeile abbilden zu können ist, die „CSS-Angaben“ anzugeben.
Dafür ist es wichtig zu wissen, das innerhalb der Shopeinstellungen die Breite der Eingabefelder definiert ist - standardmäßig beträgt diese 248px.
Die Feldbreiten für die einzelnen Eingabefelder werden wie folgt angegeben:
• CSS für den Bereich der Texteingabebox: width:65px
Wichtig ist, das die Gesamtsumme der hintereinander zu platzierenden Felder, eine Gesamtbreite von 248px zu erzielen sind.
(65px + 53px + 84px + 46px = 248px -> TelefonLVW + TelefonVW + TelefonHW + TelefonDW = Gesamtbreite)
Da der Variablenname TelefonLVW lautet, wird als nächster Punkt ein „Abweichender Feldname“, der für die ganze Zeile lauten soll, vergeben. Für dieses Beispiel lautet dieser dann Telefon.
Ist es nicht notwendig oder gewünscht das der Benutzer hier eine Eingabe vornehmen soll, kann das entsprechende Feld in einer weiteren FSO über den Punkt „Feld sperren“ gesperrt werden.
Diese FSO-Einstellung muss nun auch für die 3 weiteren Telefon-Variablen aktiviert werden. Der einzige Unterschied ist - bei der ersten Variable muss zusätzlich zur Aktivierung der Funktion auch der Feldname angezeigt werden, das ist für die anschließenden Variablen nicht nötig.
TelefonVW, TelefonHW und TelefonDW:
Für diese drei Variablen sind grundsätzlich dieselben Einstellungen, wie zuvor beschrieben, vorzunehmen.
Platzhalter- oder Standardtext – je nach Vorgaben oder Ermessen
CSS-Angaben – Wichtig: alle 4 Variablen zusammen addiert müssen 248 Pixel ergeben.
Feld anfügen – Bei dieser FSO ist es für diese 3 Variablen zusätzlich wichtig, das das Dropdownmenü für das Anzeigen des Feldnames auf „nein“ gesetzt wird.
Die FSO „Abweichender Feldname“ sind hier nicht mehr relevant. Der Punkt „Feld sperren“ wird ebenfalls, je nach Vorgaben, individueller gehandhabt.
Für Telefonnummern oder auch Emailadressen kann die FSO „Präfix und Suffix“ zusätzlich ganz hilfreich sein.
Soll beispielsweise ein Bindestrich innerhalb einer Telefonnummer +49 (0) 2154 4809-0 bereits fest vorgegeben sein, so kann dies folgendermaßen abgebildet werden:
Zunächst wird dieser Bindestrich innerhalb des Layouters eingesetzt. Um dem Benutzer das Vorhandensein des Bindestrichs zu verdeutlichen, wird bei der FSO „Präfix und Suffix“, im hier beschriebenen Beispiel, bei der Variable TelefonHW ein Bindestrich als Suffix eingesetzt.
Abschließend kann nun die bereinigte HIntergrund-PDF (mit entfernten Beispiledaten), sowie die zugehörige Druck-PDF hinterlegt werden.
Bereits mit diesen wenigen Feldspezialoptionen lässt sich so im Frontend eine ansprechende und benutzerfreundliche Ansicht erzielen.