Die Integration eines Online-Editors in ein Basissystem (Onlineshop, CMS) erfolgt mittels einer API (Application Programming Interface). Mit dieser Schnittstelle wird die Kommunikation zwischen den Systemen realisiert. Bild: Melaschuk-Medien

In den letzten Jahren ist ein vermehrter Bedarf an Online-Editoren festzustellen, die zur Individualisierung oder Personalisierung von bedruckbaren Objekten und Dokumenten eingesetzt werden. Individualisiert werden Printdokumente, wie Werbematerialien und Geschäftsausstattungen, Verpackungen und Etiketten, aber auch Werbeartikel und Konsumgüter. Trends wie Mass Customization tragen zu der steigenden Nachfrage bei, Editoren in Onlineshops oder Web-Content-Management-Systeme (CMS) zu integrieren.

Darüber hinaus gibt es Integrationen zwischen Produktdatenbanken (englisch: Product Information Management, PIM) und Mediendatenbanken (englisch: Media Asset Management, MAM) mit Editoren, um Dokumente mit Datenbankinhalten zu verknüpfen und auszugeben.

In diesem Beitrag werden Kriterien für den Editor-Einsatz, Technologien, Workflows mit dem Schwerpunkt Vorlagenerstellung und die Integration beleuchtet.

Inhalte:

• Abgrenzung der Einsatzbereiche
• Funktionsumfang und Kosten
• Integration und API-Schnittstelle
• Frontend-Technologien
• Vorlagenerstellung
• Anbieter

Welche Einsatzbereiche sind relevant?

Online-Editoren werden auch browserbasierte Web-Editoren genannt, wobei es in diesem Beitrag nicht um Web-Editoren im Sinne von HTML-Editoren zur Erstellung von Websites, Newslettern oder Landing-Pages geht. Eine weitere Kategorie von Editoren sind Content-Editoren für kollaboratives Arbeiten in redaktionellen Umgebungen. Auch diese sind hier nicht Gegenstand der Betrachtung.

In diesem Beitrag werden vielmehr Merkmale für Online-Editoren mit dem Schwerpunkt Web-to-Print beschrieben, um die Lösungen besser voneinander abgrenzen und bewerten zu können.

Der integrierbare Online-Editor von rissc solutions bietet zahlreiche Gestaltungsfunktionen für Text und Bild sowie eine 3D-Voransicht. Bild: rissc solutions GmbH

Druckprodukte können im Online-Editor von printQ sogar maßvariabel konstruiert, gestaltet und personalisiert werden. Flyeralarm nutzt auch die brandneue Template Gallery von CloudLab, die Millionen von Design-Vorlagen umfasst. Dank einer speziellen KI können diese nicht nur auf klassische Druckprodukte, sondern auch auf Verpackungsprodukte umgerechnet und visualisiert werden. Bild: CloudLab Sales & Management GmbH

Welche Funktionen sind integriert und welche Kosten fallen an?

Ein Online-Editor ist je nach Anbieter entweder Bestandteil einer Web-to-Print-Lösung, als Standalone-Komponente oder für beide Alternativen verfügbar.

Soll ein Editor in eine bestehende Basisanwendung, wie ein Onlineshop oder CMS, integriert werden, werden dafür eine Standalone-Komponente oder passende Module eines Web-to-Print-Systems eingesetzt. In diesem Fall ist darauf zu achten, dass nur die benötigten Funktionen und nicht ein Gesamtsystem lizenziert werden müssen. Kosten sollten nur für den notwendigen Funktionsumfang entstehen. Bei der Lizenzierung von Standalone-Komponenten wird auch teilweise nach der Anzahl generierter Dokumente abgerechnet, und nicht auf Basis der registrierten Nutzer, sodass Kosten lediglich bedarfsgerecht anfallen.

Folgende Funktionen sind beim Einsatz eines Editors zu berücksichtigen:

• Vorlagenvorbereitung (definieren veränderbarer und veränderbarer Objekte, Festlegen von Regeln)
• Frontend-Editier-Funktionalität (Inhalts-, Objekt- und Layoutbearbeitung)
• Vorlagenverwaltung (Metadatenpflege, Kategorisierung)
• Assetverwaltung (Medien, Produktdaten)
• Warenkorb- und Shopfunktionen (Sammeln von Bestellungen, Bezahloptionen)
• Workflowdefinition (Freigaben, Weiterleitungen)

Vollautomatische Generierung verschiedener PDF-Varianten (Vorschau, Druck, Barrierefrei) direkt im Editor des genera-Systems am Beispiel Bundesagentur für Arbeit. Bild: IRS GmbH

Wie erfolgt die Integration und was ist eine API-Schnittstelle?

Je nach eingesetzter Technologie lässt sich der Editor mehr oder weniger „tief“ in ein Basissystem, wie Onlineshop oder CMS, integrieren. Der Editor kann im einfachsten Fall mittels eines iFrames oder Pop-up-Fensters im Basissystem aufgerufen werden. Das führt allerdings zu einem ungünstigen Benutzererlebnis, da der Endnutzer mit unterschiedlichen Bedienoberflächen und einer nicht-integrierten Bedienerführung konfrontiert wird.

Besser ist es, wenn der Editor durch Code-Integration und Webdesign-Anpassung so in das Fremdsystem eingebaut werden kann, dass für den Endnutzer der Eindruck eines weitgehend einheitlichen Systems entsteht. Auch eine Datenverknüpfung, zum Beispiel für die automatische Übernahme von Adressdaten in Vorlagenfelder, kann für die komfortable Bedienung des Editors wichtig sein.

Die Integration des Editors in ein Basissystem erfolgt mittels einer API (Application Programming Interface-)Schnittstelle, die den erforderlichen Datenaustausch inklusive Sicherheitsroutinen regelt. Diese Schnittstelle wird vom Editor-Anbieter idealerweise inklusive einer gut strukturierten Dokumentation bereitgestellt.

Ein Datenaustausch mittels API sieht zum Beispiel vor, dass nach einer Artikelauswahl durch den Endnutzer in einem Onlineshop (Basissystem) eine Artikel-ID an den Editor übergeben wird. Nach erfolgter Bearbeitung werden vom Editor eine Statuskennung („Editierung fertig“) und Dokument-ID an den Onlineshop zurückübertragen. Im Onlineshop erfolgt die Zuordnung des Dokumentes zum Artikel im Onlineshop. Voraussetzung ist, dass die Artikel im Basissystem eine Zuordnung zu den Vorlagen mittels Kennungen (IDs) im Editor erhalten.

Der intoprint Configurator von intomedia kann mittels einer Javascript-API-Schnittstelle in jeden Onlineshop nahtlos integriert werden. Bild: intomedia GmbH

Welche Frontend-Technologien werden eingesetzt?

Gängige Frontend-Technologien sind HTML(5), CSS (Cascading Style Sheets) und Javascript; Zusatzprogramme oder Plug-ins werden in den Browsern in der Regel nicht benötigt. Anbieter, die in früheren Jahren auf die Flash-Technologie gesetzt hatten, mussten allerdings viele Ressourcen einsetzen, um auf dem Stand der Technik anzukommen.

Endnutzern präsentieren sich die meisten Editoren in einer Zwei-Fenster-Ansicht: auf der einen Seite befindet sich die Vorlagen-Voransicht und auf der anderen die Funktionsauswahl und Inhaltsbearbeitung. Durch Anklicken eines Objekts in der Vorlage werden die passenden Funktionen angezeigt. Die Vorlagenansicht wird in der Regel nach jedem Bearbeitungsschritt automatisch aktualisiert. Manche Editoren erlauben das direkte Editieren durch Anklicken der Objekte in der Vorlage. Dies ermöglicht eine intuitive Arbeitsweise, wie man sie aus Layoutprogrammen kennt.

Ein weiteres Unterscheidungsmerkmal betrifft den Umfang der Gestaltungsoptionen. Die sogenannte „formularbasierte“ Arbeitsweise erlaubt Endnutzern lediglich das Ändern von Inhalten – die mittels Feldern wie in einem Formular dargestellt werden – aber nicht der Gestaltung, wie das Ändern der Position eines Bildes. Diese Methode wird bevorzugt angewendet, wenn Unternehmen die Einhaltung von Corporate-Design-Richtlinien sicherstellen möchten, zum Beispiel bei der Werbemittel-Individualisierung durch Mitarbeiter von Filialen.

Erweiterte Gestaltungsfunktionen beinhalten das freie Anlegen von Objekten, Text- oder Bildrahmen und deren Formatierung durch Endnutzer. Hier ist es wichtig, dass auch Mechanismen zur Vermeidung von Fehlerquellen wirksam werden. Beispielsweise sollte das Platzieren von Objekten über den Seitenrand hinaus nicht erlaubt sein.

Sind erweiterte Layoutfunktionen nicht möglich oder erwünscht, können Endnutzern durch „intelligente“ Vorlagen Designvarianten zur Verfügung gestellt werden. Zum Beispiel lassen sich Farbschemata oder Objekte per Klick in der Vorlage einbinden oder auch vordefinierte Layoutvarianten.

Abhängig von der Endnutzer-Zielgruppe und den Editor-Objekten muss das richtige Maß zwischen Qualitätsanforderungen und kreativen Ansprüchen der Endnutzer gefunden werden, um eine möglichst hohe Benutzerakzeptanz zu erreichen.

Der PRINTMAKER Web-to-Print Designer Pro von Obility erlaubt das Editieren mehrseitiger Dokumente und flexibles Zuweisen von Layoutvarianten für einzelne Seiten. Darüber hinaus können Objekte, Text- und Bildrahmen frei angelegt, bearbeitet und auf den Seiten platziert werden. Bild: Obility GmbH

In dem brandbox-Editor Strict/H5E stehen Funktionalitäten zur strukturierten Datenerfassung über Formularmasken sowie freien Gestaltung zur Verfügung. Die Kombination der beiden Editor-Typen kommt den Endanwender/innen zugute. Diese können über einen Wahlschalter selbst entscheiden, in welchem Modus sie arbeiten möchten. Bei beiden Varianten können typografische Regelwerke als Basis vordefiniert werden. Bild: Konmedia GmbH

Welche Abläufe gibt es bei der Vorlagenerstellung?

Die Abläufe, um Vorlagen für das Web-to-Print-System oder den Web-to-Print-Editor zu erstellen, sind sehr unterschiedlich. Im Rahmen einer Marktrecherche, die Melaschuk-Medien im Kundenauftrag erstellt hat, ergab die Analyse von 15 Lösungen 11 verschiedene Workflowvarianten!

Für viele Unternehmen, die Online-Editoren einsetzen, ist es wichtig, InDesign-Dateien als Layout-Vorlagenbasis verwenden zu können, was in den meisten Fällen auch möglich ist. In dem darauffolgenden Arbeitsschritt, der Vorlagenvorbereitung, werden diese Vorlagen dann „systemkonform“ aufbereitet – indem in externen oder internen Tools den Layoutobjekten Regeln zugewiesen werden.

Die Regelwerke entscheiden letztlich darüber, wie „intelligent“ eine Vorlage ist. Eine sehr intelligente Vorlage kann sich in Abhängigkeit der Inhalte dynamisch ändern, bis hin zu Formatänderungen bei gleichbleibenden Inhalten. Formatierungen von Texten und Bildern richten sich dann automatisch an neue Layoutgeometrien aus. Ein Einsatzbereich sind Anzeigen, die für verschiedene Medien andernfalls aufwendig manuell angepasst werden müssten.

Im Rahmen der Ausgabe übernehmen dann die sogenannten Renderengines die Berechnung von Vorschau- und Ausgabedateien. Am häufigsten wird die PDF-Engine „PDFlib“ eingesetzt, aber auch andere PDF-Engines, der Indesign- oder Pageflex-Server kommen zum Einsatz.

Der Ablauf der Vorlagenerstellung ist hier gegliedert in das Erstellen der Layoutbasis, der Vorlagenvorbereitung und die Ausgabe. Tabelle: Melaschuk-Medien

Für den Editor iXedit von Konzept-iX gibt es eine InDesign Erweiterung zur Vorlagenvorbereitung durch Auszeichnung von Rahmenregeln für Texte, Tabellen, Bilder, Snippets und Gruppierungen. Bild: Konzept-iX GmbH

Der ci-book™ Universal Editor im „Design Mode“ zur Bearbeitung der Eigenschaften von Dokumenten und Vorlagen im Rahmen der Vorlagenvorbereitung. Die einzelnen Layoutobjekte sind im linken Bereich zu sehen. Bild: d-serv GmbH

Autor: Ira Melaschuk
Datum: 17. Oktober 2022

Fachbegriffe:
WYSIWYG, HTML5, Individualisierung, Personalisierung, Browser, MAM, PIM, Template, IDML

... zur Übersicht Fachbeiträge