iBright - HTML5-Editor "Gecko"
Vor ca. 3 Jahren bekann man bei KiNETiK einen neuen Editor zu Entwickeln, speziell für die Anforderungen von B2C Anwendungen. Dabei wurde sowohl Adobe Flash als auch HTML5 als Basistechnologie geprüft. Frühzeitig wurde dann voll auf die HTML5 Technologie gesetzt, da Adobe Flash auf der Mehrzahl der mobilen Geräte gar nicht verfügbar war. Heute ist klar, dass die Zukunft nur in HTML5 liegen kann.
HTML 5 ist die Weiterentwicklung des HTML-Standards der das Web wie wir es heute kennen erst möglich gemacht hat. Die Version 5 der Hypertext Markup Language bietet vielfältige neue Funktionalitäten wie unter anderem Video, Audio, lokalen Speicher und dynamische 2D- und 3D-Grafiken, die zuvor nicht ohne Plugins wie Adobe Flash für Videos unterstützt wurden. Der weltweit erste HTML5-Webeditor seiner Art benötigt dank innovativer HTML5-Unterstützung keinen Adobe Flash Player und keine weiteren Plugins wie Java, bietet aber Funktionen die mit Flash oder Ajax nicht zu erreichen waren. Der große Vorteil ist, dass man damit auf allen aktuellen Webbrowsern wie Internet Explorer 9, Firefox ab Version 5, Chrome, Safari und Opera den vollen Funktionsumfang nutzen kann – ganz gleich wo auf der Welt man unterwegs ist und iBright Web2Print mit Gecko-Editor nutzt. Der Datenbestand wird online in der Cloud bei KiNETiK gespeichert und ist rund um die Uhr, 24/7 verfügbar. Ebenfalls werden dank HTML5 auch mobile Endgeräte alle Apple iOS und Android-Geräte unterstützt. Diese bringen einen integrierten Webbrowser mit HTML5-Unterstützung mit. Daher können auch mobile Anwender von unterwegs mit ihrem Smartphone oder Tablet an ihren Drucksachen weiterarbeiten, diese finalisieren, im Kundengespräch abstimmen und direkt bestellen.
iBright Gecko Editor
Alles was im Gecko Editor geschieht, wird in Echtzeit gerendert und sieht beim Editieren genau so aus, wie später in der Druckvorlage. Es gibt jetzt SVG-basierenden Text, den KiNETiK "Artistic Text" nennt. „Artistic Text" ist eine Zeile Text und ein Grafikobjekt zugleich, das beliebig gefüllt werden oder mit Filtern belegt werden kann. Text lässt sich in beliebigen Fonts über die HTML 5 Oberfläche eingeben und auf Pfade legen – eine einmalige Funktion für einen Web-to-Print HTML5-Editor.
Weiterhin sind Ebenen, Verläufe und Transparenzen sowie Schlagschatten und andere Effekte möglich. Ebenen sind dabei "richtige" Ebenen. Andere Lösungen betrachten ein Grafikelement als Ebene und können dieses in der Liste ein- und ausschalten. Bei dem Editor von KiNETiK können viele Grafikobjekte auf einen Ebene gelegt werden und dann kann man die ganze Ebene ein/ausschalten, dann verschwinden alle Grafikelemente auf dieser Ebene. Und man kann Grafikelemente wählen und auf eine andere Ebene schieben. Weiterhin werden spezielle Ebenen verwendet um Hilfe für den Benutzer und weiterhin auch technische Hilfestellung anzuzeigen wie Falzlinien oder den Anschnittbereich. Verläufe können linear mit beliebigem Winkel und radial sein und können dabei über beliebig viele Farben verlaufen, wobei jede Farbe auch einen Alpha-Kanal haben kann. Schlagschatten werden mit Hilfe sogenannten Filter realisiert und sind dann eine Eigenschaft des Grafikobjekts, d.h. der Text bleibt Text und kann weiterhin editiert werden, nur hat er dann einen transparenten Schatten. Damit dürfte deutlich sein, dass der Gecko Editor ein vollwertiger Editor ist, der viel mehr Freiheiten bietet, als nur die Eingabe von Text und das Wechseln von Bildern. Zum Beispiel lassen sich auf Mehrseiter problemlos bearbeiten, sodass sogar ganze Katalogproduktionen über den Gecko-Editor ermöglicht werden. „Um Vorlagen zu erstellen, kann z.B. Adobe Illustrator verwendet werden. Zum Beispiel ließe sich mit Illustrator ein PDF öffnen, als SVG speichern und dann diese Datei unverändert im unseren HTML5 Editor laden“, erklärt Dipl. Inf. Andreas Kurzac, Geschäftsführer der KiNETiK GmbH.
iBright unterstützt nun zwei unterschiedliche Typen von Vorlagen Die klassischen Vorlagen sind weiterhin sehr gut geeignet für Anforderungen im Bereich B2B, wenn es darum geht, dem Endbenutzer nur wenig Eingriffsmöglichkeiten zu geben, dafür aber sicherzustellen, dass z.B. Corporate-Design-Vorgaben erfüllt werden und das Dokument sich automatisch den Wünschen des Benutzers anpasst. Der neue Vorlagentyp für den Gecko Editor zeichnet sich dadurch aus, dass er dem Benutzer das Freie bearbeiten des Layouts ermöglicht. Einzelne Grafikelemente können für den Endbenutzer zwar gesperrt werden, es steht dem Nutzer aber frei, Texte und Bilder beliebig zu platzieren. Damit eignet sich der Gecko Editor hervorragend für Anforderungen wie sie im B2C-Einsatz in Online-Shops benötigt werden. Vorhandene klassische PDF Vorlagen bleiben bestehen, sodass alle iBright Kunden ihre Systeme unverändert weiter betreiben können. Alle vorhandenen PDF-Vorlagen bleiben erhalten. In der neuen iBright Version mit Gecko Editor können zusätzlich auch Vorlagen für den Gecko-Editor erstellt werden. Der Gecko Editor wird als kostenpflichtiges Zusatzmodul angeboten.
iBright Gecko-Funktionen im Detail
Vorab einige kurze Beschreibungen von Funktionen, die iBright Gecko auf Basis der HTML5 Technik leistet:
• Zoom-Funktion
Da die Darstellung des Dokumentes vektorbasierend erfolgt, kann der Benutzer das Dokument beliebig vergrößern und im Editor verschieben.
• Vektor Funktionen
Es können Linien, Rechtecke oder auch Bezier-Kurven erstellt und bearbeitet werden. Dabei sind auch die Stützpunkte von Kurven bearbeitbar.
• Vektor-Eigenschaften
Jeder Linienzug kann in einer beliebigen Farbe in einer definierten Breite (in mm) definiert und bearbeitet werden. Jeder geschlossene Linienzug kann farbig gefüllt sein.
• Farbe
Die Auswahl der Farbe erfolgt am Bildschirm im RGB Farbraum. Jede Farbe kann einen Alpha-Kanal besitzen. Der iBright Gecko Editor unterstützt daher Transparenzen in der Art, dass alle Objekte beliebig transparent sein dürfen.
• Farbverläufe
Alternativ können nicht nur einzelne Farben definiert werden, sondern der Benutzer kann einen Farbverlauf auswählen. Dabei kann ein Verlauf einen beliebigen Winkel aufweisen, neben Startfarbe und Endfarbe können beliebig viele Farben als Stützpunkte definiert werden. Jede Farbe kann einen Alpha-Kanal besitzen. Verläufe können auch nur über den Alpha-Kanal erfolgen.
• Bearbeitung von Objekten
Alle Objekte, unabhängig von ihrem Typ können beliebig skaliert und gedreht werden.
• Filter auf Vektor- / Bild-Objekte
Alle Objekte können zusätzlich mit sog. Filterfunktionen belegt werden. Beispiele für Filter sind Weichzeichner oder Schatten. Ein Vektor-Grafikelement oder ein Text kann so automatisch mit einem Schatten ausgestattet werden. Komplexere Filter können auch die Form verändern (z.B. Zerfransen von Text) oder die Darstellung völlig verändern (Text erscheint als metallische Buchstaben „Chrom“ poliert). Durch Filter können Bilder geschärft oder weichgezeichnet werden. Komplexere Filter können eine Darstellung als Ölgemälde realisieren oder auch eine Darstellung bei der das Bild verformt wird.
• Mengen-Text
Mengen-Text wird drucktechnisch perfekt als PDF-basierender Text erzeugt. Der Benutzer erfasst dabei den Text in einem Editor mit einfachen RichText Funktionen. Der Text wird auf dem Server als PDF Produziert und der Benutzer erhält im Dokument eine Vorschau dieses PDF Elements. Damit erfolgt der Textsatz auf hohem Niveau, Kerning und weitere Textsatz-Funktionen kommen dabei zum Einsatz.
• Artistic-Text
Künstlerischer Text wird im WYSIWIG Modus erfasst, der Benutzer arbeitet direkt im Dokument. Künsterlischer Text kann beliebig verzerrt werden und kann beliebig mit Farbverläufen gefüllt werden. Künstlerischer Text kann auf einem Pfad ausgerichtet werden und kann mit Filtern versehen werden.
• Gruppierungen
iBright Gecko bietet die Möglichkeit mehrere Objekte zu einer Gruppe zu kombinieren. Die Gruppe kann dann insgesamt wie ein einziges Objekt platziert und gedreht werden.
• Ebenen
iBright Gecko unterstützt eine Ebenen Funktionen: Alle Objekte sind immer einer Ebene zugeordnet. Man kann beliebig viele Ebenen erstellen. Objekte können in eine andere Ebene verschoben werden. Ebenen können ein/ausgeschaltet werden, eine ausgeschaltete Ebene ist unsichtbar. Die Reihenfolge der Ebenen definiert, welche Objekte andere Objekte überdecken. Innerhalb einer Ebene bestimmt die Reihenfolge der Objekte die Überdeckung. Die Reihenfolge der Ebenen kann nachträglich verändert werden.
• Beschneidung von Objekten (Crop)
iBright Gecko erlaubt es beliebige Grafikobjekte, inkl. Bilder und auch Gruppierte Objekte mit einem Pfad zu beschneiden. Der Pfad kann dabei ein beliebiger Vektorpfad sein (Kreis, Rechteck, Vieleck) insbesondere auch eine Bezier-Kurve.
Die Platzierung von Bildern kann auch nach dem Beschnitt immer noch verändert werden, das Bild wird dann "hinter dem Ausschnitt" z.B. dynamisch verschoben.
• Ausrichtung von Objekten
Beliebige Objekte können gemeinsam ausgerichtet werden: Links/Recht/Oben/Unten bündig oder horizontal/vertikal zentriert.
• Adobe Illustrator zur Template-Erstellung
Illustrator unterstützt den Export von Grafikdaten in ein HTML5 konformes Format (SVG). iBright GECKO kann dieses Format unverändert importieren und mit wenigen Einschränkungen im Editor bearbeiten.
