Publixx Template Designer

Anwenderdokumentation | Version 1.4 | November 2025

Was ist Publixx?

Publixx Template Designer ist eine professionelle Plattform für die Erstellung von Dokumenten-Templates mit automatischer Daten-Integration. Das Besondere: Ein Template, zehn Output-Formate.

Kernfunktionen

Erste Schritte

Benutzeroberfläche

Die Publixx-Oberfläche besteht aus vier Hauptbereichen:

1. Toolbar (oben)

Die Toolbar ist in drei kompakte Dropdown-Menüs organisiert:

• 📁 Datei: Daten laden (JSON, Excel/CSV), Templates laden/speichern, PXF/zPXF Import/Export
• 📤 Export: Alle 10 Export-Formate (PDF, PowerPoint, Word, Excel, Bilder, HTML, Microsite, Website, Player, DPP)
• ✨ Layout: Magic Layout, AutoFit, Layout zurücksetzen

Zusätzlich in der Toolbar:

• Format-Auswahl: Print-Formate (A4, A5) oder Screen-Resolutions (HD bis 8K)
• Rand/Grid: Seitenrand und Raster-Einstellungen
• Live-Modus: Echtzeit-Vorschau und Play-Button für Fullscreen-Player
• Datensatz-Navigation: Datensatz-Auswahl, Filter, Datapicker
• Zoom-Controls: Zoom-Slider, 100%, Breite anpassen
• Sprache: DE/EN Umschalter

2. Linke Sidebar

• Element-Palette: Drag & Drop Elemente (Text, Bild, QR-Code, etc.)
• Felder-Explorer: Datenfelder aus geladenem Datensatz

3. Canvas (Mitte)

• Arbeitsbereich: Visuelles Design-Canvas
• Grid: Intelligentes Raster für präzise Positionierung
• Live-Vorschau: Echtzeit-Rendering der Daten

4. Rechte Sidebar (Inspector)

• Properties: Eigenschaften des gewählten Elements
• Positioning: X/Y-Position, Breite, Höhe
• Styling: Farben, Schriften, Abstände
• Data Binding: Verknüpfung mit Datenfeldern

Grundlegende Arbeitsschritte

1. Format wählen (A4 Hochformat, Full HD, etc.)
2. Daten laden (JSON, CSV oder Excel)
3. Elemente platzieren (Drag & Drop aus Palette)
4. Properties anpassen (Inspector rechts)
5. Template speichern (für Wiederverwendung)
6. Exportieren (in gewünschtem Format)

Daten laden

Publixx unterstützt drei Datenformate: JSON, CSV und Excel (XLSX).

JSON-Daten laden

Button: Daten laden (JSON)

Einfaches JSON-Array

[
  {
    "sku": "10001",
    "name": "SmartOne X",
    "description": "Leistungsstarkes OLED-Smartphone mit 5G",
    "price": 799.00,
    "image": "https://placehold.co/800x600/png?text=SmartOne+X"
  },
  {
    "sku": "10002",
    "name": "SmartOne X Pro",
    "description": "Flaggschiff mit Periskop-Zoom",
    "price": 999.00,
    "image": "https://placehold.co/800x600/png?text=SmartOne+X+Pro"
  }
]

Verschachteltes JSON

Publixx kann auch verschachtelte Strukturen verarbeiten:

[
  {
    "product": {
      "name": "SmartOne X",
      "specs": {
        "display": "6,7\" OLED",
        "processor": "Octa-Core 3,0 GHz"
      }
    },
    "pricing": {
      "basePrice": 799,
      "currency": "EUR"
    }
  }
]

Zugriff im Template: product.name, product.specs.display, pricing.basePrice

Arrays für Listen und Tabellen

Für Listen und Tabellen können Sie Arrays direkt im Datensatz verwenden:

{
  "name": "SmartOne X",
  "bullets": [
    "5G Highspeed",
    "Schnelles Laden (65 W)",
    "Stereo-Lautsprecher"
  ],
  "rows": [
    { "label": "Display", "value": "6,7\" OLED (120 Hz)" },
    { "label": "Prozessor", "value": "Octa-Core 3,0 GHz" },
    { "label": "RAM", "value": "8 GB" }
  ]
}

Binding: Listen-Element an bullets, Tabellen-Element an rows

vfetch - Mehrere JSON-Quellen zusammenführen

Mit der vfetch-Funktion können Sie mehrere JSON-Dateien über Primary Keys verknüpfen:

// products.json
[
  {
    "id": "10001",
    "name": "SmartOne X",
    "categoryId": "PREMIUM"
  }
]

// categories.json
[
  {
    "id": "PREMIUM",
    "name": "Premium-Serie",
    "badge": "flagship.svg"
  }
]

Ergebnis: Automatische Verknüpfung über categoryId

CSV & Excel laden

Button: Excel laden (XLSX/CSV)

CSV-Format

sku,name,price,description,image
10001,SmartOne X,799,OLED-Smartphone mit 5G,https://cdn.example.com/smartone-x.jpg
10002,SmartOne X Pro,999,Flaggschiff mit Periskop-Zoom,https://cdn.example.com/smartone-xpro.jpg

Asset-Base-URL

Für Bilder und Assets können Sie eine Base-URL definieren:

Asset-Base-URL: https://cdn.example.com/products/
Datensatz: image = "smartone-x.jpg"
Ergebnis:  https://cdn.example.com/products/smartone-x.jpg

PQL-Filter (Publixx Query Language)

Feld: Filter (Primärfelder)

Filtern Sie Datensätze mit SQL-ähnlicher Syntax:

Beispiele

-- Einfache Bedingung
price > 50000

-- Mehrere Bedingungen (UND)
price > 40000 AND category = "SUV"

-- ODER-Verknüpfung
category = "SUV" OR category = "Limousine"

-- Text-Suche (LIKE)
name LIKE "%A4%"

-- Bereich
price BETWEEN 40000 AND 60000

-- IN-Liste
category IN ("SUV", "Limousine", "Kombi")

Verfügbare Operatoren

Template gestalten

Format wählen

Dropdown: Format

Print-Formate

• DIN A4 – Hoch (210 × 297 mm)
• DIN A4 – Quer (297 × 210 mm)
• DIN A5 – Hoch (148 × 210 mm)
• DIN A5 – Quer (210 × 148 mm)

Screen Resolutions (16:9)

• HD – 1280 × 720 px
• Full HD – 1920 × 1080 px
• WQHD – 2560 × 1440 px
• 4K UHD – 3840 × 2160 px
• 8K UHD – 7680 × 4320 px

Screen Resolutions (16:10)

• WXGA – 1280 × 800 px
• WUXGA – 1920 × 1200 px
• WQXGA – 2560 × 1600 px

Elemente platzieren

Verfügbare Elemente (Drag & Drop aus Palette)

• 📝 Freier Text - Dynamischer Text aus Daten
• 🔤 Fixer Text - Statischer Text
• 🖼️ Bild - Bilder aus URLs
• 📊 Tabelle - Tabellarische Daten
• 📋 Liste - Listen-Darstellung
• 🔲 Barcode (Code39) - Barcodes
• 📱 QR-Code - QR-Codes mit URLs/Daten
• ➖ Linie - Horizontale/Vertikale Trennlinien
• ▭ Rechteck - Dekorative Rechtecke
• 🗺️ Karte - OpenStreetMap Integration
• 📷 EXIF Daten - Kamera-Metadaten aus Bildern

Workflow

1. Element aus Palette auf Canvas ziehen
2. Element wird an Grid "gesnapped"
3. Element automatisch selektiert
4. Inspector zeigt Properties

Template speichern und laden

• Template speichern: Speichert komplettes Template als JSON
• Template laden: Stellt gespeichertes Template wieder her

Element-Typen und Properties

Jedes Element hat spezifische Properties, die im Inspector (rechte Sidebar) bearbeitet werden.

Allgemeine Properties (alle Elemente)

• X: Horizontale Position in px
• Y: Vertikale Position in px
• W: Breite in px
• H: Höhe in px

📝 Text (Freier Text)

Dynamisches Text-Element, das Daten aus dem aktuellen Datensatz anzeigt.

Data Binding

• Bind Path: Feld-Pfad (z.B. name, product.specs.engine)

Typography

• Font Size: Schriftgröße in px (6-120)
• Font Weight: 100-900 (Thin bis Black)
• Font Family: Schriftart-Auswahl
• Text Color: Textfarbe (Hex oder Picker)
• Text Align: Left, Center, Right

Layout

• Padding: Innenabstand in px
• Background: Hintergrundfarbe
• Radius: Ecken-Rundung in px

Prefix & Suffix

Text vor und nach dem Wert:

Daten: price = 45000
Prefix: "ab "
Suffix: " €"
Ergebnis: "ab 45000 €"

Number Formatting

• Decimals: Anzahl Dezimalstellen
• Thousands Separator: Tausender-Trennzeichen (z.B. .)
• Decimal Separator: Dezimal-Trennzeichen (z.B. ,)

Hyperlink

Text als anklickbarer Link:

• From Data: URL aus Bind-Feld
• From Field: URL aus anderem Feld
• Fixed: Feste URL

🖼️ Image (Bild)

Zeigt Bilder aus URLs an.

Data Binding

• Bind Path: Feld mit Bild-URL
• Fixed URL: Oder feste URL

Image Styling

• Object Fit: Cover, Contain, Fill, None
• Object Position: Center, Top, Bottom, Left, Right
• Grayscale: Schwarz-Weiß-Filter
• Opacity: Transparenz (0.0 - 1.0)

URL Configuration

Asset Base: https://cdn.example.com/
Prefix: products/
Bind: image (Wert: "smartone-x.jpg")
Suffix: ?w=800
Ergebnis: https://cdn.example.com/products/smartone-x.jpg?w=800

📊 Table (Tabelle)

Zeigt Arrays oder Objekte als Tabelle an.

Table Styling

• Border Visible: Rahmen anzeigen
• Column Distribution: Equal oder Custom
• Header Row: Erste Zeile als Header
• Alternating Rows: Alternierende Zeilenfarben

📋 List (Liste)

Zeigt Arrays als Liste an.

List Styling

• Bullet Type: Disc (●), Circle (○), Square (■), None, Custom
• Custom Bullet: Eigenes Zeichen (z.B. ▸, ✓)
• Item Spacing: Abstand zwischen Items

🔲 Barcode (Code39)

Generiert CODE39 Barcodes.

• Bind Path: Feld mit Barcode-Daten
• Prefix/Suffix: Text vor/nach Barcode-Daten

📱 QR-Code

Generiert QR-Codes für URLs, Text oder Daten.

• Verwendung: Produkt-URLs, vCard, WLAN-Daten, beliebige Texte

➖ Line (Linie)

Horizontale oder vertikale Trennlinien.

• Line Orientation: Horizontal oder Vertical
• Line Width: Linienstärke (1-20 px)

▭ Rectangle (Rechteck)

Dekorative Rechtecke für Hintergründe oder Rahmen.

• Stroke: Rahmenfarbe und -stärke
• Fill: Füllfarbe
• Radius: Ecken-Rundung

🗺️ Map (Karte)

OpenStreetMap Integration mit GPS-Koordinaten.

Data Source

• Fields Mode: Koordinaten aus Datenfeldern (lat, lon)
• EXIF Mode: GPS aus Bild-Metadaten

Map Configuration

• Zoom: Level 1-18 (1=Welt, 18=Gebäude)
• Marker: Pin/Marker anzeigen
• Map Style: Standard, Satellite, Terrain

📷 EXIF Data

Extrahiert und zeigt Kamera-Metadaten aus Bildern.

Verfügbare EXIF-Felder

• Camera: Kamera-Modell
• Focal Length: Brennweite
• Aperture: Blende
• ISO: ISO-Wert
• Latitude/Longitude: GPS-Koordinaten

Export-Funktionen

Publixx unterstützt 10 Export-Formate aus einem Template.

PXF Export (Publixx Exchange Format)

Menü: Datei → PXF Export oder Datei → zPXF Export

Das PXF-Format ist das proprietäre Austauschformat von Publixx, das Template + gefilterte Daten in einer Datei kombiniert.

Zwei Varianten

Features

• Alles in einer Datei: Template-Design + Daten + Metadaten
• Intelligente Filterung:
  • Nur aktive Datensätze: Exportiert nur die aktuell gefilterten/ausgewählten Datensätze
  • Nur verwendete Felder: Exportiert nur Datenfelder, die im Template platziert sind
• Verschlüsselung: Optional mit AES-256-GCM
  • Lizenzschlüssel: Automatische Verschlüsselung für Partner mit gleicher Lizenz
  • Eigener Schlüssel: Custom-Verschlüsselung für Partner ohne Publixx-Lizenz
  • Unverschlüsselt: Für öffentliche Templates
• Wiedereinlesbar: 1-Klick-Import mit allen Einstellungen

zPXF: Offline-Pakete mit Bildern

Das zPXF-Format ist ideal für den Austausch, wenn keine Netzwerkverbindung verfügbar ist oder Bilder nicht über URLs erreichbar sind:

• Alle Bilder eingebettet: Bilder werden automatisch heruntergeladen und im ZIP gespeichert
• Offline-fähig: Keine Internet-Verbindung beim Import nötig
• Portabel: Eine Datei enthält wirklich alles
• Automatische URL-Konvertierung: Bild-URLs werden beim Import zu lokalen Blob-URLs

Verwendung

1. Template erstellen und Daten laden
2. Optional: Datensätze filtern (nur aktive werden exportiert)
3. Datei → PXF Export oder zPXF Export wählen
4. Dateiname vergeben
5. Verschlüsselung wählen (optional)
6. Download der .pxf oder .zpxf-Datei

Import

• Menü: Datei → PXF Import oder zPXF Import
• Drag & Drop: .pxf oder .zpxf-Datei auf Canvas ziehen
• Bei verschlüsselten Dateien: Automatische Schlüssel-Abfrage

PDF Export

Menü: Export → PDF

• Aktueller Datensatz: Nur aktueller Datensatz als PDF
• Alle (gefiltert) in einer PDF: Multi-Page PDF mit allen aktiven Datensätzen
• Eine Datei je Datensatz (ZIP): Separate PDFs als ZIP-Archiv

Features: Hochauflösend (300 DPI), Vektorbasiert, Eingebettete Schriften, Interaktive Links

PowerPoint Export

Menü: Export → PowerPoint

• Aktueller Datensatz: Eine Folie
• Alle (gefiltert) in einer PPTX: Alle Datensätze als Folien in einer Präsentation
• Eine Datei je Datensatz (ZIP): Separate PPTX-Dateien als ZIP

Features: Native PowerPoint-Formate, Editierbare Text-Boxen, Hochauflösende Bilder

Word Export

Menü: Export → Word

Exportiert als editierbares Word-Dokument (.docx) mit nativen Word-Formaten.

Layout-Modi

Features

• Native Word-Formate: Editierbare Texte, Tabellen, Listen
• Eingebettete Bilder: Alle Bilder werden ins Dokument eingebettet
• Formatierung erhalten: Schriftarten, Farben, Abstände werden übernommen

Excel Export

Menü: Export → Excel

• Direkt: Exportiert aktive Datensätze direkt als Excel-Tabelle
• Mit Template: Verwendet ein Excel-Template für die Ausgabe

Features: Formatierung, Spaltenüberschriften, Mehrere Blätter möglich

DPP Export (Digital Product Passport)

Menü: Export → DPP

• Aktueller Datensatz: Einzelnes HTML für aktuellen Datensatz
• Alle (gefiltert) als ZIP: Alle Datensätze als separate HTMLs in ZIP

Features: EU-konform (Regulation 2023/1542), Responsive, Standalone HTML, Print-optimiert

→ Ausführliche DPP-Dokumentation

Web-Export

• HTML: Einzelne HTML-Seite (Standalone)
• Website: Multi-Page mit Navigation
• Microsite: Kompakte Landing Page
• Images: Hochauflösende PNG/JPG (1x, 2x, 3x)

📖 How To: Schritt für Schritt

Dieser Abschnitt zeigt Ihnen den kompletten Workflow von der Datenquelle bis zum fertigen Export anhand eines praktischen Beispiels.

Beispiel: Smartphone-Produktkatalog

Wir erstellen einen professionellen Produktkatalog für eine Smartphone-Serie mit Produktbild, Spezifikationstabelle, Features-Liste und Barcode.

Schritt 1: Datenquelle verstehen

Unsere Datenquelle smartphones.json enthält ein Array von Produkten:

[
  {
    "sku": "10001",
    "ean": "4012345678901",
    "name": "SmartOne X",
    "description": "Leistungsstarkes OLED-Smartphone mit 5G und Schnellladen.",
    "price": 799.00,
    "currency": "EUR",
    "image": "https://placehold.co/800x600/png?text=SmartOne+X",
    "rows": [
      { "label": "Display", "value": "6,7\" OLED (120 Hz)" },
      { "label": "Prozessor", "value": "Octa-Core 3,0 GHz" },
      { "label": "RAM", "value": "8 GB" },
      { "label": "Speicher", "value": "256 GB" }
    ],
    "bullets": [
      "5G Highspeed",
      "Schnelles Laden (65 W)",
      "Stereo-Lautsprecher",
      "Face & Fingerprint Unlock"
    ]
  },
  { ... weitere Produkte }
]

Verfügbare Felder:

• sku - Artikelnummer (Text)
• ean - EAN-Code (für Barcode)
• name - Produktname (Text)
• description - Beschreibung (Text)
• price - Preis (Zahl)
• image - Bild-URL (Bild)
• rows - Spezifikationen (Tabelle)
• bullets - Features (Liste)

Schritt 2: Daten laden

1. Klicken Sie auf Daten laden (JSON) in der Toolbar
2. Wählen Sie die Datei smartphones.json
3. Die Daten werden geladen und das erste Produkt angezeigt

Im linken Panel unter "Felder" sehen Sie nun alle verfügbaren Datenfelder.

Schritt 3: Format wählen

1. Öffnen Sie das Format-Dropdown in der Toolbar
2. Wählen Sie A4 Hochformat (210 × 297 mm)

Schritt 4: Elemente platzieren

Ziehen Sie die folgenden Elemente aus dem Felder-Panel auf den Canvas:

Schritt 5: Layout-Ergebnis

Schritt 6: Durch Datensätze navigieren

• Nutzen Sie die Pfeiltasten in der Toolbar oder die Datensatz-Checkboxen
• Jeder Datensatz zeigt ein anderes Smartphone
• Das Template bleibt gleich, nur die Daten ändern sich

Schritt 7: Export

Wählen Sie Ihr gewünschtes Ausgabeformat:

• PDF → Druckfertige Datenblätter
• PowerPoint → Präsentation für Meetings
• HTML → Web-Ansicht
• Images → Hochauflösende Bilder für Social Media

Export-Optionen:

• Aktueller Datensatz → Nur das angezeigte Produkt
• Alle Datensätze → Kompletter Katalog (5 Seiten)
• Gefilterte Datensätze → Nur ausgewählte Produkte

Schritt 8: Präsentation im Player

1. Klicken Sie auf den Play-Button (▶)
2. Der Fullscreen Player öffnet sich
3. Alle 5 Smartphones werden als Slideshow angezeigt
4. Mit Space pausieren, mit ESC beenden

Bonus: Filter anwenden

Filtern Sie die Daten mit PQL:

// Nur Premium-Modelle (über 700 Euro)
price > 700

// Nur das Ultra-Modell
name = "SmartOne Ultra"

// Preisspanne
price >= 399 AND price <= 799

Zusammenfassung Workflow

✏️ Inline-Editing

Mit der Editierbar-Funktion können Sie bestimmte Elemente in Ihrem Template für die nachträgliche Bearbeitung freigeben. Dies ermöglicht ein zweistufiges Arbeitsmodell: Profis erstellen das Template, Endanwender passen nur die freigegebenen Inhalte an.

Editierbar aktivieren

Die Editierbar-Funktion ist für folgende Element-Typen verfügbar:

So aktivieren Sie die Funktion:

1. Wählen Sie ein Text-, FixedText-, List- oder Table-Element auf dem Canvas aus
2. Öffnen Sie im Inspector (rechte Sidebar) den Bereich „Aktionen"
3. Aktivieren Sie die Checkbox „Editierbar (✏️)"

Inhalte bearbeiten

Nachdem ein Element als editierbar markiert wurde, erscheint der Edit-Button (✏️) am Element:

1. Klick auf ✏️: Öffnet den Inline-Edit-Dialog
2. Text bearbeiten: Ändern Sie den Inhalt im Textfeld
3. Speichern: Klicken Sie auf „Übernehmen" oder drücken Sie Enter
4. Abbrechen: Klicken Sie auf „Abbrechen" oder drücken Sie Escape

Änderungen speichern & teilen

Die wichtigste Eigenschaft der Editierbar-Funktion: Alle Änderungen können per PXF exportiert und wieder importiert werden. Dies ermöglicht einen vollständigen Workflow:

Der komplette Workflow

Praxisbeispiele

• Automotive: Händler passt Kontaktdaten und lokale Preise an Fahrzeug-Datenblättern an
• Immobilien: Makler ergänzt Exposé-Vorlage mit eigenen Kontaktdaten
• Einzelhandel: Filiale passt Aktionspreise in Flyern an
• Veranstaltungen: Lokaler Veranstalter ergänzt Orts- und Zeitangaben

▶️ Fullscreen Player

Der Fullscreen Player verwandelt Ihre Templates in professionelle Präsentationen. Er rendert jeden Datensatz als eigenen "Slide" und ermöglicht flüssige Übergänge, Animationen und automatische Wiedergabe.

Player starten

Der Player wird über die Toolbar gestartet:

• Play-Button (▶) in der Toolbar klicken
• Alternativ: Keyboard-Shortcut (wenn fokussiert)

Der Player öffnet sich im Vollbildmodus und zeigt den aktuellen Datensatz. Bei mehreren aktiven Datensätzen (über PQL-Filter oder Checkbox-Auswahl) werden alle als Slideshow durchlaufen.

Steuerung

Die Steuerung erfolgt über Keyboard, Touch-Gesten oder die eingeblendeten Controls am unteren Bildschirmrand.

Keyboard-Shortcuts

Touch-Gesten (Mobile)

• Swipe links: Nächster Slide
• Swipe rechts: Vorheriger Slide
• Tap: Controls ein-/ausblenden

Control-Buttons

Die Controls werden am unteren Bildschirmrand eingeblendet und nach 3 Sekunden automatisch ausgeblendet. Bei Mausbewegung erscheinen sie wieder.

• ◀ / ▶: Navigation
• ■: Stop (zurück zum ersten Slide)
• ▶/❚❚: Play/Pause
• 🔁: Loop-Toggle
• ⛶: Maximize-Toggle
• ⚙: Einstellungen öffnen
• ✕: Player beenden

Einstellungen

Über das Zahnrad-Symbol (⚙) öffnet sich das Einstellungs-Panel mit folgenden Optionen:

Speed Presets

Schneller Zugriff auf vordefinierte Geschwindigkeiten (1-9 Sekunden) über die Preset-Buttons oder die Zifferntasten.

Darstellungsmodi

Normal-Modus

Das Template wird zentriert mit Schatten auf hellem Hintergrund dargestellt – optimal für Präsentationen im Business-Kontext.

Maximize-Modus

Das Template wird so groß wie möglich skaliert (unter Beibehaltung des Seitenverhältnisses). Der Schatten wird entfernt für eine cleanere Darstellung.

Mobile Auto-Scale

Auf Smartphones und kleinen Bildschirmen (≤768px Breite oder ≤600px Höhe) skaliert der Player automatisch, sodass das Template vollständig sichtbar ist – auch bei großen Print-Formaten wie A3 oder Poster.

🎬 Player Export

Der Player Export erzeugt eine vollständig eigenständige HTML-Datei, die den kompletten Fullscreen Player mit allen Slides enthält. Diese Datei kann ohne Webserver, ohne Internetverbindung und auf jedem Endgerät direkt im Browser geöffnet werden.

Was ist enthalten?

Die exportierte player.html Datei beinhaltet:

Automatisch entfernt beim Export:

• Edit-Buttons (✏️): Werden für saubere Präsentation entfernt
• Resize-Handles: Keine Editor-Elemente sichtbar
• Selection-Marker: Keine Auswahl-Rahmen
• Grid-Hintergrund: Sauberer, neutraler Hintergrund

Export durchführen

1. Wählen Sie die gewünschten Datensätze (Filter, Checkboxen oder alle)
2. Öffnen Sie das Export-Menü in der Toolbar
3. Wählen Sie 🎬 Player
4. Die Datei player.html wird automatisch heruntergeladen

Anwendungsfälle

🖥️ Digital Signage & Kiosk

Ideal für Displays in Showrooms, Eingangsbereichen oder Wartezimmern:

• HTML-Datei auf USB-Stick → Display-PC → Browser im Vollbild starten
• Kein Server, keine Konfiguration, keine Wartung
• Autoplay + Loop für Dauerbetrieb

📧 Per E-Mail versenden

Teilen Sie Präsentationen direkt mit Kunden oder Kollegen:

• Als Attachment versenden (oder über Cloud-Link bei großen Dateien)
• Empfänger öffnet Datei direkt im Browser
• Kein Publixx-Zugang nötig, keine Installation

💾 Archivierung

Langzeit-Archivierung von Präsentationen:

• Standalone-Datei benötigt keine externe Software
• Funktioniert auch in Jahren noch im Browser
• Alle Inhalte in einer Datei = einfaches Backup

✈️ Offline-Präsentationen

Präsentieren ohne Internetverbindung:

• Messen und Events ohne zuverlässiges WLAN
• Kundenbesuche in Gebieten ohne Mobilfunk
• Backup-Lösung falls Online-Präsentation ausfällt

📱 Mobile Nutzung

Der Player funktioniert auf allen Geräten:

• Desktop: Chrome, Firefox, Safari, Edge
• Tablet: iPad, Android Tablets – Touch-Gesten unterstützt
• Smartphone: iPhone, Android – Auto-Scale für kleine Bildschirme

Steuerung im exportierten Player

Der exportierte Player bietet die gleichen Steuerungsmöglichkeiten wie der integrierte Fullscreen Player:

✨ Animationen

Mit dem Animation-System können Sie einzelne Elemente zeitversetzt und mit verschiedenen Effekten erscheinen und verschwinden lassen. Dies verwandelt statische Templates in dynamische, aufmerksamkeitsstarke Präsentationen.

Animation-Typen

Publixx bietet 7 verschiedene Animationseffekte:

Konfiguration im Inspector

Animation-Einstellungen finden Sie im rechten Inspector-Panel, wenn ein Element ausgewählt ist:

Animation aktivieren

1. Element auf dem Canvas auswählen
2. Im Inspector zum Abschnitt "Animation" scrollen
3. Checkbox "Animation aktivieren" setzen

Einstellungen

Praxis-Beispiel: Professionelle Produkt-Show

Hier ein Beispiel, wie Sie eine wirkungsvolle Produktpräsentation mit gestaffelten Animationen aufbauen:

Szenario

Produktkatalog mit Fahrzeugdaten: Jeder Datensatz zeigt ein Fahrzeug mit Bild, Titel, Beschreibung und Preis.

Template-Aufbau

Animations-Choreographie

Das Ergebnis

Beim Slide-Wechsel entsteht eine flüssige Choreographie:

1. 0.0s: Logo blendet sanft ein, Hintergrund sofort sichtbar
2. 0.2s: Produktbild beginnt einzufaden
3. 0.3s: "NEU"-Badge poppt mit Scale-Effekt auf
4. 0.5s: Titel gleitet von oben herein
5. 0.7s: Untertitel folgt
6. 1.0s: Features-Liste schiebt von links rein
7. 1.5s: Preis-Badge erscheint mit Aufmerksamkeits-Effekt
8. 1.8s: Call-to-Action gleitet von rechts rein

Bei einer Slide-Dauer von 6 Sekunden hat das Publikum danach noch ~4 Sekunden, um den kompletten Slide zu erfassen, bevor die Out-Animationen beginnen und der nächste Datensatz erscheint.

Weitere Anwendungsfälle

• Immobilien-Exposés: Bild fade, Adresse slide down, Features nacheinander einblenden
• Mitarbeiter-Vorstellung: Portrait scale, Name slide, Abteilung fade
• News-Ticker: Headline slide left, Datum fade, Bild scale
• Produktvergleich: Spalten nacheinander von außen nach innen
• Event-Ankündigung: Datum scale, Titel slide down, Details fade sequentiell

Erweiterte Funktionen

Magic Layout

Buttons: Magic 1, Magic 2

Automatisches Layout-System, das Elemente intelligent anordnet:

• Magic 1 (Hero 50%): Große Hero-Section + Grid
• Magic 2 (Hero Flat): Flache Hero + Spalten

AutoFit

Button: Fit

Passt Element-Größen automatisch an Inhalt an.

Fullscreen Player

Button: Play

Startet Präsentations-Modus mit:

• Vollbild-Darstellung
• Tastatur-Navigation (← →)
• Auto-Play (optional)

Steuerung: Pfeiltasten (Vor/Zurück), ESC (Beenden), Leertaste (Pause)

Data Picker

Button: Datensätze wählen ...

Dialog zur Auswahl von Datensätzen mit Multi-Select, Sortierung und Filterung nach Primärfeldern.

📄 Digital Product Passport (DPP)

Der Digital Product Passport (DPP) ist ein standardisiertes HTML-Format für Produktinformationen, das die EU-Verordnung 2023/1542 (Ecodesign for Sustainable Products Regulation) erfüllt.

Features

• EU-konform: Erfüllt EU Regulation 2023/1542 und ISO 14067:2018
• Responsive Design: Optimiert für Desktop, Tablet und Mobile (3 Breakpoints)
• Standalone HTML: Funktioniert ohne externe Dependencies, per E-Mail verschickbar
• Print-optimiert: Saubere Druckansicht verfügbar (Strg+P)
• Sticky Navigation: Schnelle Navigation zwischen Sections
• Customizable: Anpassbares Styling via externe CSS-Datei für Kunden-Branding
• Progress & Abort: Progress-Dialog bei Bulk-Exporten mit Abbruch (ESC/Strg+Q)

Export-Optionen

DPP-Struktur

Ein Digital Product Passport besteht aus folgenden Standard-Sections:

Datenstruktur

Die JSON-Datensätze sollten folgende Struktur haben:

{
  // Hero Section - Grunddaten
  "sku": "10001",
  "brand": "SmartOne",

  // Produktinformationen
  "productInfo": {
    "brandName": "SmartOne",
    "modelDesignation": "SmartOne X",
    "productCategory": "Smartphone",
    "description": "Premium Smartphone mit KI-Features...",
    "price": "799.00",
    "currency": "EUR"
  },

  // Technische Daten
  "technicalData": {
    "display": "6.7\" OLED",
    "processor": "Octa-Core 3.2 GHz",
    "storage": "256 GB",
    "ram": "12 GB",
    "camera": "50 MP Triple Camera",
    "weight": "195 g",
    "dimensions": "159 x 74 x 8.2 mm"
  },

  // Materialien (Array)
  "materials": [
    {
      "name": "Aluminium",
      "percentage": 35,
      "recyclable": true
    },
    {
      "name": "Glas",
      "percentage": 25,
      "recyclable": true
    },
    {
      "name": "Kunststoff (recycelt)",
      "percentage": 20,
      "recyclable": true
    }
  ],

  // CO₂-Fußabdruck (ISO 14067:2018)
  "carbonFootprint": {
    "totalEmissions": 75,
    "unit": "kg CO₂e",
    "methodology": "ISO 14067:2018",
    "breakdown": {
      "production": 55,
      "transport": 12,
      "usage": 8
    }
  },

  // Batterie-Informationen
  "battery": {
    "capacity": "5000 mAh",
    "type": "Li-Ion",
    "removable": false,
    "chargeCycles": 800,
    "fastCharging": true,
    "warranty": "2 Jahre"
  },

  // Compliance & Zertifizierungen
  "compliance": {
    "certifications": ["CE", "RoHS", "REACH", "Energy Star"],
    "standards": ["ISO 14001", "ISO 9001", "IEC 62368-1"],
    "ecoLabel": "EU Ecolabel"
  },

  // Entsorgung & Recycling
  "disposal": {
    "recyclingInfo": "Über kommunale Sammelstellen oder Rücknahme...",
    "repairability": "7/10",
    "spareParts": "5 Jahre Verfügbarkeit",
    "manual": "https://example.com/repair-guide.pdf"
  }
}

Verwendung

1. Daten vorbereiten: JSON mit DPP-Struktur erstellen
2. In Publixx laden: JSON-Datei über "JSON..." Button laden
3. Datensätze filtern (optional): PQL-Filter oder Data Picker verwenden
4. Export starten:
   • DPP Current: Einzelnes HTML für aktuellen Datensatz
   • DPP All as ZIP: Alle gefilterten Datensätze als ZIP
5. HTML-Dateien verteilen:
   • Direkt im Browser öffnen
   • Auf Webserver hochladen
   • Per E-Mail verschicken
   • In Produktdokumentation einbetten

Branding & Customization

Das DPP-Design kann über die Datei dpp.css im Root-Verzeichnis angepasst werden:

/* Audi Branding */
:root {
  --dpp-primary: #bb0a30;        /* Audi Rot */
  --dpp-primary-light: #dd0c3a;
  --dpp-font: 'AudiType', Arial, sans-serif;
}

/* VW Branding */
:root {
  --dpp-primary: #001e50;        /* VW Blau */
  --dpp-primary-light: #003875;
}

/* Custom Branding */
:root {
  --dpp-primary: #0066cc;
  --dpp-text: #1a1a1a;
  --dpp-border: #e0e0e0;
}

Workflow

1. dpp.css im Root-Verzeichnis öffnen
2. CSS Variables anpassen (Farben, Schriften)
3. Datei speichern
4. DPP exportieren → Branding wird automatisch übernommen

Die generierten HTML-Dateien enthalten das CSS embedded und sind vollständig standalone.

ZIP-Export Struktur

Bei "All as ZIP" Export wird folgende Ordnerstruktur erstellt:

dpp-products.zip
└── products/
    ├── DPP-10001-SmartOne-X.html
    ├── DPP-10002-SmartOne-Pro.html
    ├── DPP-10003-SmartOne-Lite.html
    ├── DPP-10004-SmartOne-Max.html
    └── DPP-10005-SmartOne-Ultra.html

Dateinamen-Pattern: DPP-{SKU}-{Model}.html

Performance

• Progress-Anzeige: Bei Bulk-Exporten wird ein Progress-Dialog angezeigt
• Abbruch-Möglichkeit: ESC oder Strg+Q während des Exports
• Effizient: CSS wird einmal geladen und für alle Produkte verwendet
• Fallback: Falls dpp.css nicht gefunden wird, wird Fallback-CSS verwendet

Einsatzbereiche

• Automotive: Batteriepass (ab 2027 verpflichtend)
• Elektronik: Smartphones, Laptops, Haushaltsgeräte
• Textilien: Fashion Brands, Sportbekleidung
• Möbel: Nachhaltigkeits-Nachweis
• Bauprodukte: EPD (Environmental Product Declaration)

Best Practices

• Vollständige Daten: Alle relevanten Sections befüllen für maximale Compliance
• Hochauflösende Bilder: Mindestens 800x800px für Hero-Section
• ISO 14067:2018: CO₂-Daten nach Standard berechnen lassen
• Mehrsprachigkeit: Separate JSON-Dateien für DE/EN vorbereiten
• Versionierung: DPPs mit Versionsnummer versehen (z.B. v1.0)
• QR-Codes: DPP-URL als QR-Code auf Produkt/Verpackung drucken

API-Steuerung

Publixx kann vollständig über URL-Parameter gesteuert werden - ideal für Automatisierung.

URL-Parameter Übersicht

index.html?config=TEMPLATE&data=DATA&action=ACTION&format=FORMAT&mode=MODE&filter=FILTER

Parameter

Anwendungs-Beispiele

1. Template + Daten laden

index.html?config=templates/catalog.json&data=data/vehicles.json

2. Direkt PDF exportieren

index.html?config=templates/product.json&data=data/products.json&action=export&format=pdf&mode=all

3. Mit Filter exportieren

index.html?config=templates/catalog.json&data=api/products.json&filter=price>500&action=export&format=pptx&mode=all

Integration mit Drittsystemen

Publixx lässt sich nahtlos an beliebige Datensysteme anbinden. Ob PIM, PXM, CMS, CRM oder ERP – jede Datenquelle, die eine REST API mit JSON-Output bereitstellt, kann visualisiert werden.

Anforderungen an die Datenquelle

• REST API mit JSON-Response
• CORS-Header erlauben (oder Proxy nutzen)
• Flache Struktur bevorzugt (kein tiefes Nesting)
• Array von Objekten für Multi-Record Templates

Ideales Datenformat

[
  {
    "id": "10001",
    "name": "Produkt A",
    "description": "Kurze Beschreibung",
    "price": 799.00,
    "image": "https://cdn.example.com/product-a.jpg",
    "features": ["Feature 1", "Feature 2", "Feature 3"],
    "specs": [
      { "label": "Gewicht", "value": "250g" },
      { "label": "Material", "value": "Aluminium" }
    ]
  },
  { ... }
]

Integrations-Architektur

Typische Szenarien

Beispiel: API-Endpoint anbinden

# Publixx direkt mit API-Endpoint aufrufen
index.html?data=https://api.example.com/products?format=json

# Mit Authentifizierung (via Proxy)
index.html?data=https://proxy.incoxx.com/api/products

# Kombination mit Template
index.html?config=templates/product-sheet.json&data=https://pim.example.com/api/export/products

Best Practices

Template-Design

1. Grid verwenden: Konsequentes 8px Grid für professionelles Layout
2. Elemente gruppieren: Verwandte Elemente nah beieinander
3. Hierarchie schaffen: Schriftgrößen und -gewichte für visuelle Hierarchie
4. Weißraum nutzen: Genug Padding und Abstände
5. Konsistente Farben: Farbschema definieren und einhalten

Daten-Management

1. Flache Strukturen: JSON möglichst flach halten
2. Konsistente Feldnamen: CamelCase oder snake_case durchgehend
3. Fehlende Werte: Leere Strings statt null
4. Asset-Base nutzen: Zentrale URL für alle Bilder
5. vfetch für Relationen: Mehrere Datenquellen verknüpfen

Performance

1. Live-Modus aus: Bei vielen Elementen deaktivieren
2. Bild-Optimierung: Bilder vor Upload komprimieren
3. PQL-Filter: Daten vor Rendering filtern
4. Zoom reduzieren: Bei komplexen Templates Zoom < 100%

Troubleshooting

Bilder werden nicht angezeigt

Ursachen:

• Falsche URL im Datensatz
• CORS-Probleme bei externen Bildern
• Asset-Base-URL nicht konfiguriert

Lösungen:

• URL im Browser testen
• Asset-Base-URL setzen
• Bilder auf gleicher Domain hosten

Export funktioniert nicht

Ursachen:

• Browser-Pop-up-Blocker
• Zu viele Datensätze (Timeout)
• Fehlende Daten

Lösungen:

• Pop-ups erlauben
• Kleinere Batches exportieren
• Daten validieren

Performance-Probleme

Lösungen:

• Live-Modus deaktivieren
• Bilder komprimieren
• Zoom reduzieren

Keyboard Shortcuts

Editor

Fullscreen Player

Format-Referenz

Print-Formate (mm)

Screen-Formate (px)

© 2024-2025 incoxx GmbH | Publixx Template Designer
Version 1.3 | Stand: November 2025