Neu in Weblication® Version 12

30.06.2017

Die neue Version 12 von Weblication® bringt das Mobile First Projekt unter Verwendung von SASS sowie wieder mehrere hundert Detailverbesserungen, die die Arbeit mit Weblication® deutlich vereinfachen und beschleunigen.

Täglich kommen Neuerungen und Verbesserungen hinzu. Bei allen Entwicklungen achten wir darauf, dass sowohl Redakteure als auch Entwickler noch smarter, schneller und einfacher arbeiten können.

Die wichtigsten Neuerungen im Überblick:

Optimierungsfunktionen

  • SEO: Seitenbasierte Statistikfunktionen
  • Bildanalyse in der Seiteninfo mit Bildgrößen- und Qualitätsinfos auf den Bildern

Überblick einiger weiterer Verbesserungen für Redakteure

  • Zusätzliche Bildoptimierung: Verschiedene Bildausschnitte für unterschiedlich Endgeräte. So können kleine Bildausschnitte speziell für mobile Endgeräte vom selben Bild genutzt werden.
  • Bildausschnitte werden bereits im Editor sichtbar
  • Die Dateiverwaltung unterstützt Filter
  • Neuer Navigationeditor
  • Aufgaben- und Notizsystem
  • Inhalte aus anderen Seiten einbinden: Auswahlmöglichkeit einzelner Strukturelemente
  • Mehrfachupload als Formularelement
  • Telefon- und Faxnummern mit Symbolen anzeigen über Link-Element
  • Datenkataloge: Datenkonstrukt zur Pflege von beliebigen Wertepaaren und Selektion als Array

Überblick einiger Neuerungen für Agenturen, Entwickler und Administratoren

  • Strukturübersicht im Quelltexteditor
  • Verbesserte Navigation in der IDE
  • Änderungen einer Datei in der IDE werden im Tab angezeigt
  • Vorgefertigte Makros in Suchen & Ersetzen
  • Performantere Verwaltung bei sehr vielen Benutzern
  • "Cache löschen" und "Erweiterte Bereinigung" als eigene Schaltflächen
  • Lizenzinfos: Anzeige in der Lizenzverwaltung, welche Module lizenziert sind.
  • Informationen, welche externen Ressourcen geladen werden in der Seiteninfo
  • Aufgaben- und Notizsystem
  • Aufgaben und Notizen auch im Agenturboard sichtbar
  • Benutzertyp ist bei einfügbaren Elementen sichtbar
  • Mobile First BASE: CSS-Only Varianten in Sekunden installieren
  • Nicht relevante Sass-Bedingungen werden im CSS Editor ausgeblendet oder inaktiv dargestellt
  • Eigener Downloadserver (Mobile First Projekt)

Überblick einiger Neuerungen im Bereich Technologie

  • Mobile First BASE
  • Einsatz von SASS in Mobile First BASE
  • Eigener SASS Prozessor
  • Alternative neue Mail-Engine - neue Mail-Engine kann optional aktiviert werden

Mobile First Projekt

Die Mobile First BASE stellte eine der großen Neuerungen Weblication® Version 12 dar.

Während es strukturell große Überschneidungen zwischen der Mobile First BASE und der Classic BASE gibt, ist die Mobile First BASE speziell für die mobile Darstellung optimiert. Die mobile Darstellung ist also nicht mehr optional, sondern wird primär gestaltet.

Neben der mobilen Bedienbarkeit liegt ein Hauptaugenmerk auf der automatischen Generierung von mobil optimierten Bildern, da die bei mobiler Nutzung oft reduzierten Bandbreite noch einige Jahre relevant sein dürfte.

Generelle Neuerungen und Optimierungen

XSLT - Allgemein

  • Pro Element, Objekt, Navigation, Liste, globales HTML und Header existiert ein eigenes Template. 
  • Eigene Templates für Strukturelemente im Newsletter.
  • Pflegetags nutzen Dekoratoren, um so Masken über die Oberfläche anpassen zu können.
  • Teils deutlich reduziertes XSLT durch die Nutzung neuer PHP-Framework Funktionen.

CSS - Allgemein

  • Nutzung von Sass für flexiblere und effektivere Gestaltung (auch ohne vorinstallierten Sass-Prozesser)
  • Pro Element, Objekt, Navigation, Liste sowie für globales HTML existiert eine eigene CSS-Datei. 
  • Weitere CSS-Dateien definieren Farben, Schriften, Breakpoints und die Seitenstruktur. 
  • Der CSS-Editor generiert automatisch ein Inhaltsverzeichnis. 
  • Eigene CSS-Pflegemasken sind möglich. 
  • Die IDE unterstützt Icons für die einzelnen CSS-Dateien. 
  • Jede Variante hat genau einen Wurzelsektor.  
  • CSS-Only Angaben können in Standardvarianten vordefiniert sowie in Untervarianten überschrieben werden.
  • Bei CSS-Only Optionen und der Verknüpfung von Untervarianten wird das Schlüsselwort important unterstützt.
  • Varianten lassen sich direkt in der integrierten Variantenverwaltung installieren und kopieren.
  • Automatische Schriftfarben, je nach Hintergrund.
  • SVG-Dateien lassen sich mit angepassten Farben auch ohne einzubetten in CSS einbinden.

JavaScript - Allgemein

  • Mehrere JS-Dateien (design.js, navigation.js, ...)
  • Erweitertes Ereignismodell (z.B.: navpoint_onmouseenter, megadropdown_onopen) 
  • JavaScript wir am Ende der Seite eingebunden, um das Rendern nicht zu blockieren.

Layoutwizard

  • Der Layoutwizard wird im entsprechenden Theme (page.scss) selbst als Maske definiert.

Weblicsverwaltung

  • Ob ein Weblic angepasst wurde, ist in der Weblic-Verwaltung ersichtlich. 
  • Die Installation und das Aktualisieren von Weblics erfolgt deutlich beschleunigt.
  • Eigener Downloadserver nutzbar, um eigene Weblics, Themes, Templates, Skripte und CSS-Only Varianten zur Installation anzubieten.

Seitenstruktur

  • Neben Element- und Objektvarianten kommen nun auch Seitenvarianten zum Einsatz.
  • Pro Seitenvariante lassen sich CSS und Portalstruktur frei definieren.
  • Inhalte sind standardmäßig von einem Inhaltsbereich umschlossen.
  • Auch der Kopfbereich lässt sich um pflegbare Inhalte erweitern.

Objekte

  • Im Objekt-Template lässt sich nun auch die objektspezifische Listendarstellung definieren.
  • Ebenso lässt sich darin auch die Darstellung eingebundener Objekte, wie z.B. Kontakt- oder Standortdaten definieren.

Listen

  • Die Reihenfolge der anzuzeigenden Elementen ist vollständig über CSS definierbar. 
  • HTML-Dekoratoren können über CSS definiert werden, um so z.B. mehrere auszugebende Elemente zu umschließen.
  • Listen lassen sich über das Objekt-Template beliebig erweitern.
  • Umfangreiche Ajax-Funktionen für Blättern und mehr laden durch Klicken und Scrollen.

Navigationen

  • CSS-Dekoratoren: Effekte in der Hauptnavigation per Klick aktivieren
  • Kein Nachladen der mobilen Navigation per Ajax.
  • Reduzierte HTML-Struktur
  • Der Breakpoint für die mobile Navigation braucht nur noch an einer einzigen Stelle im CSS festgelegt werden und wird dann auch im JavaScript berücksichtigt.

Bilder

  • Automatische Bildbreitenberechnung über Client-Feedback.
  • Einsatz des Picture-Elements für Responsive Images in Elementen, Listen, Bannern und Galerien. 
  • Unterstützung von Art Direction für viewport-abhängige Bildausschnitte.
  • Bilder lassen sich über die CSS-Only Eigenschaft -w-filter:sharpen; schärfer darstellen

Videos

  • Eigener HTML5 Video-Player
  • Video-Player ist über CSS gestaltbar
  • Video-Player hat in allen Browsern eine einheitliche Darstellung

Überschriften

  • Standardüberschriften und Titel bei Akkordeons lassen sich formatieren.
  • Umbrüche werden im Editor bereits sichtbar.

Formulare

  • Bedingte Formulare: Ein-/ausblendbarere Container abhängig von Feldeingaben

SEO: Seitenbasierte Statistikfunktion in der Seiteninfo

Die Version 12 von Weblication® verfügt über eine eingebettete Statistik innerhalb der Seiteninfo, welche sich über das Panel einblenden lässt.

Darin werden die Aufrufe der vergangenen 31 Tage als Diagram mit Durchschnitt und gleitendem 7-Tagesdurchschnitt angezeigt.

Weiterhin wird angezeigt, an welcher Position die aktuelle Seite im Vergleich zu den restlichen Seiten des aktuellen Projektes steht.

Über die eingebettete Seitenstatistik gelangt man zudem zu einer Gesamtübersicht über alle Seiten des Projektes und der Anzahl der Aufrufe, um schnell und einfach vergleichen zu können, welche Seite wie viele Aufrufe hatte.

Die Seiteninfo erreichen Sie über den grünen Bereich mit Pfeil im unteren Bereich des Bedien-Panels.

Bei Mouseover klappt die Seiteninfo aus. Per Klick wird die Seiteninfo permanent eingeblendet.

Seiteninfo mit Statistikfunktion
Seiteninfo mit Statistikfunktion

Bildanalyse: Anzeige von Bildgröße und Qualität in Seiten

Die Seiteninfo in Weblication® Version 12 wurde um eine Funktion zur direkten Anzeige von Bildgröße und Bildqualität erweitert. Diese lässt sich direkt über das Panel in der Seiteninfo aufrufen und kann auch mit bestehenden Projekten genutzt werden.

Die Information ist sehr wertvoll, um Ladezeiten zu optimieren, weil häufig zu große Bilder die Performance einer Seite ausbremsen.

Bildanalyse - Berechtigung für Nutzung vergeben

Zur Nutzung der Bildanalyse lässt sich in den Projekteinstellungen unter "Geladene Ressourcen analysieren" definieren, dass sie

  • nur von Administratoren genutzt werden kann
  • generell angeboten wird - also auch für Redakteure
  • nicht genutzt werden kann.

Wir empfehlen, die Einstellung auch für Redakteure zu erlauben.

Berechtigungen für die Nutzung der Bildanalyse in Projekteinstellungen definieren
Berechtigungen für die Nutzung der Bildanalyse in Projekteinstellungen definieren
Anzeige von Bildgröße und Qualität in Seiten durch Klick in Seiteninfo
Anzeige von Bildgröße und Qualität in Seiten durch Klick in Seiteninfo

Informationen, welche externen Ressourcen geladen werden in der Seiteninfo

Die Seiteninfo in Weblication® Version 12 wurde um eine Funktion zur direkten Anzeige von extern eingebundenen Ressourcen erweitert.

Die Information ist sehr wertvoll, um auch im Hinblick auf Datenschutz zu erkennen, wenn beispielsweise Google-Fonts oder Google-APIs in einer Seite eingebunden sind.

Externe Ressourcen - Berechtigung für Nutzung vergeben

Zur Nutzung der Analyse lässt sich in den Projekteinstellungen unter "Geladene Ressourcen analysieren" definieren, dass sie

  • nur von Administratoren genutzt werden kann
  • generell angeboten wird - also auch für Redakteure
  • nicht genutzt werden kann.

Wir empfehlen, die Einstellung auch für Redakteure zu erlauben.

Berechtigungen für die Nutzung der Bildanalyse in Projekteinstellungen definieren
Berechtigungen für die Nutzung der Bildanalyse in Projekteinstellungen definieren
Anzeige der extern eingebundenen Ressourcen
Anzeige der extern eingebundenen Ressourcen

Art Direction: Geräteabhängige Bildausschnitte - Ladezeiten auf mobilen Geräten reduzieren

In Weblication® Version 12 in Verbindung mit der Mobile First BASE lassen sich verschiedene Bildausschnitte für Desktops und mobile Endgeräte vom selben Bild definieren. Beim Einsatz von mobilen Geräten können Bild-Ladezeiten dadurch insbesondere bei geringer Bandbreite erheblich reduziert werden. Insbesondere bei Bannerbildern entfaltet die dadurch mögliche Ladezeitoptimierung ihr volles Potenzial.

Bildoptimierung: Verschiedene Bildausschnitte für verschiedene Endgeräte
Bildoptimierung: Verschiedene Bildausschnitte für verschiedene Endgeräte

Bildausschnitte bei Bannerbildern im Editor hervorgehoben

Bildausschnitte bei Bannerbildern werden bereits im Editor hervorgehoben. In der BASE Classic steht diese Funktion nach einem Software-Update sofort zur Verfügung.  

Bei der Nutzung von Art Direction innerhalb der Mobile First BASE ist diese Funktion besonders nützlich, weil dort neben dem maximalen auch ein minimaler Bildausschnitt gewählt werden kann - siehe Artikel Art Direction.

Bildausschnitt bei Bannerbildern hervorheben
Bildausschnitt bei Bannerbildern hervorheben

Responsive Bilder

Die Bildbreitenauswahl und die Bildbreitenberechnung wurden in der Mobile First BASE grundlegend überarbeitet. Dem Umstand geschuldet, dass es inzwischen sehr viele unterschiedliche Bildschirmgrößen gibt, setzt die Mobile First BASE konsequent auf Responsive Images, um eine optimale Bildqualität bei gleichzeitig minimaler Bildgröße auszuliefern.

Funktionsumfang der responsive Bilder

Bilder werden als Einzelelemente, Vorschaubilder in Listen, Bannerbilder oder als Bildergalerien dargestellt. In allen Fällen setzt Weblication® auf das HTML5 Picture-Tag, um bei Bedarf unterschiedliche Bildgrößen zur Verfügung zu stellen.

Die wichtigsten Funktionen und Merkmale der Mobile First Bilder sind:  

  • Optimale Bildgröße pro CSS-Breakpoint (Bildschirmgrößenraster)
  • HD-Bilder für optimale, gestochen scharfe Bilder auf hochauflösenden Bildschirmen
  • Lazy Loading, um die Bilder erst zu laden, wenn sie im Anzeigebereich sind
  • Pixelgenaues Laden von Bildern, falls für jede Bildschirmgröße exakt das passende Bild ausgeliefert werden soll
  • Frei definierbare Qualitätsstufen pro Bild, pro Bildtyp oder global über CSS-Only
  • Art Direction, um bei kleinen Bildschirmen einen alternativen Bildausschnitt anzuzeigen

Responsive Bilder für Redakteure

Für den Redakteur ändert sich kaum etwas. Die meisten Bilder wird er weiterhin mit automatischer Breitenberechnung einbinden. Die aufgelistete Möglichkeit, alternative Bildausschnitte zu definieren, erlaubt es ihm bei Bedarf, die Bilder optimal darzustellen. Sollen z.B. Referenzlogos mit einer speziellen Breite eingesetzt werden, kann er diese Breiten über CSS-Only Varianten auswählen. In der Variante ist dann auch definiert, ob das Bild ggf. als HD angezeigt werden soll. Folgende Auswahlmöglichkeiten der Bildbreiten stehen dem Redakteur zur Verfügung:

  • Automatisch, wodurch der maximal mögliche Platz ausgefüllt wird, ohne die Originalgröße zu überschreiten. Hierbei wird für jede Bildschirmgröße das optimale Bild ausgeliefert.
  • Original bzw. Original HD, wodurch immer nur ein Bild in der Originalgröße bzw. bei HD in halber Originalgröße ausgeliefert wird.
  • Vordefinierte, auswählbare Breite, wodurch das Bild in der Breite und ggf. pro Breakpoint optimiert ausgeliefert wird.
Mobile First Bildelement
Mobile First Bildelement

Responsive Bilder für Administratoren und Designer

Da in der Mobile First BASE praktisch alle gestalterischen Angaben zu Bildern über CSS-Only Varianten definiert werden, hat der Designer die größtmögliche Kontrolle über die Darstellung von Bildern. Wie sich Bilder und auch Hintergrundbilder verhalten, ist jederzeit im CSS steuerbar. Damit die Breitenberechnung korrekt funktioniert, muss sich der Designer nicht mehr an spezielle Definitionen innerhalb des CSS bezüglich des hierarchischen Aufbaus halten, was ihm mehr Freiheiten lässt.

Automatische Bildbreitenberechnung über Client-Feedback - Responsive Bilder - So funktioniert die Breitenberechnung

Die Bildbreitenberechung geschieht in der Mobile First BASE über Client-Feedback. Das bedeutet, dass der Client dem System mitteilt, wie groß die Bilder für die jeweiligen Breakpoints gerendert werden. Dazu findet im Hintergrund eine breakpoint-basierte Breitensimulation statt. Der Redakteur bekommt davon allerdings nichts mit. Das Ergebnis der Breitenberechnungen lässt sich im Panel über Werkzeuge / Bildgrößen aufrufen. Bei Bedarf können dort die existierenden Bildgrößen auch gelöscht bzw. zurückgesetzt werden.

Responsive Bilder - So funktioniert die Breitenberechnung
Responsive Bilder - So funktioniert die Breitenberechnung

Aufgaben- und Notizsystem

Zu jeder Seite und zum Projekt können Sie in Weblication® Version 12 Aufgaben und Notizen hinterlegen. So behalten Sie im Überblick, welche Aufgaben im Projekt noch zu erledigen sind.

Auch Kunden und Projektleiter können dort die noch ausstehenden Aufgaben eintragen.

Funktionen:

  • Seitenbezogene und projektbezogene Aufgaben und Notizen.
  • Aufgaben lassen sich als wichtig markieren.
  • Seitenbezogene Aufgaben werden direkt in der Seiteninfo angezeigt.
  • Im Editor einer Seite werden nur die zur Seite gehörigen Aufgaben und Notizen gezeigt.
  • Bei der Auflistung von Aufgaben über das Panel kann man filtern nach seitenbezogenen Aufgaben und Notizen.

Die Farben geben die Typen an:

  • gelb für Notizen,
  • grün für erledigte Aufgaben, 
  • blau für noch zu erledigende Aufgaben.
Übersicht aller Aufgaben und Notizen
Übersicht aller Aufgaben und Notizen
Aufgaben und Notizen erfassen
Aufgaben und Notizen erfassen

  Der Aufruf der Verwaltung der Aufgaben und Notizen erfolgt per Klick auf die Quadrate

  • Im Editor in jeder Seite rechts oben
  • Im Bedien-Panel in Browse&Edit

Aufruf im Editor

Aufruf der Aufgaben im Editor
Aufruf der Aufgaben im Editor

Aufruf im Bedien-Panel

Aufgaben und Notizen über Bedien-Panel aufrufen
Aufgaben und Notizen über Bedien-Panel aufrufen

Aufruf über STRG+M

Der Aufruf der Aufgaben und Notizen kann auch über die Tastenkombination STRG+M erfolgen.

Aufgaben und Notizen auch im Agenturboard sichtbar

Offene Aufgaben, erledigte Aufgaben und Notizen verknüpfter Installationen sind im Agenturboard sichtbar.

Als Agentur haben Sie so einen Überblick was in den jeweiligen Projekten noch zu erledigen ist.

Per Klick erreichen Sie direkt die Aufgabenverwaltung der jeweiligen Installation.

In der Webseite selbst lässt sich die Aufgabenverwaltung jederzeit über Strg+M öffnen, im Editor rechts oben neben der Feedback-Funktion.

Aufgaben und Notizen im Agenturborard sichtbar
Aufgaben und Notizen im Agenturborard sichtbar

Mobile Ansicht aus Seiteninfo aufrufen

Aus der Seiteninfo heraus kann direkt eine Mobile Ansicht aufgerufen werden.

Mobile Ansicht öffnen aus der Seiteninfo heraus
Mobile Ansicht öffnen aus der Seiteninfo heraus
Mobile Ansicht in der Web-Präsenz
Mobile Ansicht in der Web-Präsenz

Neuer Navigationseditor

Die Version 12 beinhaltet einen neuen Navigationseditor, welcher sich noch intuitiver benutzen lässt. Die Navigationspunkte sind besser abgegrenzt, Verschieben- und Einfügenflächen großzügiger gestaltet und das Hinzufügen neuer Navigationspunkte klarer ersichtlich.

Der Navigationseditor wurde so gestaltet, dass neue Redakteure noch besser damit klar kommen und bestehende Redakteure sich nicht unnötig umgewöhnen müssen. Zudem kann im Navigationseditor, wie in jedem anderen Editor der Version 12 auch das integrierte Aufgabensystem genutzt werden.

Neuer Navigationseditor
Neuer Navigationseditor

Elemente aus anderen Seiten in aktuell bearbeitete Seite einbinden

In Weblication® Version 12 lassen sich Elemente aus anderen Seiten in die aktuell bearbeitete Seite einbinden. Hierzu verwenden Sie das Elemente "Inhalte aus einer anderen Seite einbinden", das Sie in der Übersicht der Weblics® finden und über den Drag&Drop-Editor in jede Seite einfügen können. Danach wählen Sie

  • die Seite aus, aus der die Inhalte eingebunden werden sollen,
  • den Bereich (z.B. Hauptbereich, recht Seite, linke Seite, Header, Footer)
  • und letztlich über die gelben Pfeile das Element, das eingebunden werden soll.

Wird kein Element angegeben, dann wird - wie bisher auch - der Inhalt des Bereiches aus der anderen Seite in die aktuell bearbeitete Seite eingebunden.

Die Funktion ist verfügbar ab der Weblic® Version 002.000.056.000 in der BASE Classic. Das Weblic® kann per Mausklick auf die neuste Version upgedatet werden. In der Mobil First BASE ist die Funktion ohne Update des Weblic® generell verfügbar.

Elemente aus anderen Seiten in aktuell bearbeitete Seite einbinden
Elemente aus anderen Seiten in aktuell bearbeitete Seite einbinden

Filter im Dateiexplorer

Die Dateiverwaltung unterstützt Filter, um die Dateiauswahl zu beschleunigen.

Filter im Dateiexplorer
Filter im Dateiexplorer

Umbrüche in Überschriften sind im Editor sichtbar

Umbrüche in Überschriften sind im Editor sichtbar
Umbrüche in Überschriften sind im Editor sichtbar

Mehrfach-Upload in Formularen

Web-Formulare unterstützen nun auch den Mehrfach-Upload für Seitenbesucher. In der Mobile First lässt sich diese Option bereits im Formularelement selbst auswählen. Geeignet ist dieses Element immer dann, wenn vorab nicht genau bestimmt werden kann, wieviele Dokumente hochgeladen werden sollen, wie es z.B. oft bei Bewerbungs-, Antrags- oder Reklamationsformularen der Fall ist.

CSS-Only Varianten in Sekunden installieren

In der Mobile First BASE ist die CSS-Only Variantenverwaltung direkt in die Bearbeitung der jeweiligen CSS-Datei integriert. Installieren, kopieren oder löschen von Varianten ist dadurch in Sekundenschnelle möglich.

Berechtigter Benutzertyp ist bei einfügbaren Elementen sichtbar

In der Elementeauswahl des Drag&Drop Editors ist der jeweils berechtigte Benutzertyp in der Elementeauswahl für Administratoren sichtbar.

Ansichtsberechtigungen - Benutzertyp in Elementeauswahl sichtbar
Ansichtsberechtigungen - Benutzertyp in Elementeauswahl sichtbar

Lizenzinfos: Anzeige in der Lizenzverwaltung, welche Module lizenziert sind

In der Lizenzverwaltung wird angezeigt, welche Module in der Lizenz lizenziert sind.

Lizenzmaske mit Lizenzinformationen
Lizenzmaske mit Lizenzinformationen

Neuerungen in der Entwicklungsumgebung

Zahlreiche Neuerungen wurden in der Entwicklungsumgebung umgesetzt, so beispielsweise:

  • Strukturübersicht - rechts - im Quelltexteditor
  • Verbesserte Navigation
  • Änderungen einer Datei werden in der IDE im Tab angezeigt
  • Vorgefertigte Makros in Suchen & Ersetzen
IDE - die integrierte Entwicklungsumgebung
IDE - die integrierte Entwicklungsumgebung
Änderungen einer Datei werden in der IDE im Tab angezeigt
Änderungen einer Datei werden in der IDE im Tab angezeigt
IDE unterstützt Icons für die einzelnen CSS-Dateien
IDE unterstützt Icons für die einzelnen CSS-Dateien
Vordefinierte Makros in Suchen & Ersetzen
Vordefinierte Makros in Suchen & Ersetzen

CSS-Quelltext erzeugt automatisch Eingabemasken - am Beispiel der zentralen responsive Breakpoint

Aus CSS-Quelltet werden automatisch Eingabemasken erzeugt, so dass die Parameter einer CSS-Datei auch über eine Maske statt im Quelltext eingegeben werden können.

Dieser Quelltext ...
Dieser Quelltext ...
... erzeugt automatisch diese Eingabemaske
... erzeugt automatisch diese Eingabemaske

Die Eingabemaske des Layoutwizard wird so ebenfalls aus dem CSS-Quelltext automatisch erzeugt

Auch die Eingabemaske des Layoutwizards wird automatisch aus dem CSS-Quelltext erzeugt.

Der CSS-Quelltext der page.scss
Der CSS-Quelltext der page.scss
... erzeugt automatisch die Eingabemaske des Layout-Wizards
... erzeugt automatisch die Eingabemaske des Layout-Wizards

Im Akkordeon Element lassen sich die Titel formatieren

Im Titel von Akkordeon Elementen lassen sich nun auch einzelne Wörter hervorheben, indem sie vom Redakteur fett oder farbig formatiert werden können. Außerdem lassen sich Zeilenumbrüche setzen. Welche Formatierungen erlaubt sind, ist pro CSS-Only Variante definierbar.

Beispiel für eine Variante, bei der keine Zeilenumbrüche, jedoch die Formatierung von Wörtern erlaubt ist

.elementAccordion_var0 {

-w-option-allowLinebreaks:no; /* Manuelle Zeilenumbrüche erlauben */  
-w-option-allowHighlighting:yes; /* Teilformatierung erlauben */   

...

Beliebige Wertepaare in Datenkatalogen pflegen und über Skripte darauf zugreifen

Nach Texten und Variablen gibt es nun auch Wertepaare, die von Administratoren bzw. Redakteuren gepflegt werden können. Die Anwendungsmöglichkeiten sind dabei vielfältig und reichen von einfachen Zuordnungen bis zu umfangreichen Datenkatalogen.

Im Unterschied zu Variablen, können die Schlüssel und die Werte vom Redakteur selbst bestimmt werden. Zudem sind mehrere gleiche Schlüssel möglich, die bei einer Abfrage als Array geliefert werden können. Während Texte im Inhaltsprojekt abliegen, sind Datenkatalogen, wie auch Variablen, im globalen Verzeichnis hinterlegt.

Zugriff auf die Koordinaten einer Postleitzahl

$coordinates wValues::getValue('77694''/wGlobalProject''coordinates'));

Zugriff auf alle Werte des Standardkataloges

$dictionaryData wValues::getValues('/wGlobalProject''default')

Zugriff auf alle Werte einer Sperrliste als Array

$valuesBlackist wValues::getValueAsArray('IP''/wGlobalProject''blacklist-ips'));

Navigationspunkte mit einem Untertitel versehen

Navigationspunkte können auch rein über CSS angepasst werden.

Navigationspunkte mit Untertitel
Navigationspunkte mit Untertitel

Über folgende Schritte können Sie Hauptnavigationspunkte um Untertitel ergänzen:

  1. Erweitern Sie die Pflegemaske für die Navigation um das Feld data-subline bzw. machen Sie dieses Feld pflegbar, falls es bereits existiert. Hier können Sie dann auch angeben, ob das Feld nur für das erste Level pflegbar sein soll.
  2. Erweitern Sie das CSS so, dass das Data-Attribut data-subline unter dem Navigationstext ausgegeben wird.

Gibt das Attribut data-subline innerhalb des A-Tags des Hauptnavigationspunktes aus

/* Level 1 */

> ul {

  -w-add-data:'adaptlayer=1';

  > li {
    float:left;

    > a {
      font-size:$fontSizeNavigationMainLevel1;
      color:$fontColorNavigationMainLevel1;
      background-color:$backgroundColorNavigationMainLevel1;
      padding:$paddingNavigationMainLevel1;
      line-height:$lineHeightNavigationMainLevel1;
      
      &:active {
        color:$fontColorNavigationMainLevel1Active;
        background-color:$backgroundColorNavigationMainLevel1Active;
      }      

      &:after {
        font-size:0.9rem;
        content:attr(data-subline);
        display:block;
        line-height:1.2rem;
        margin-top:-0.7rem;
        color:$fontColorSub;
      }          
    

    

Nicht relevante Sass-Bedingungen werden im CSS Editor inaktiv dargestellt

Sass-Bedingungen werden bei der Quelltextbearbeitung der page.scss bereits geprüft. Falls diese nicht aktiv sind, werden sie ausgegraut dargestellt, um so die Übersichtlichkeit zu erhöhen.

Nicht relevante Sass-Bedingungen werden im CSS Editor inaktiv dargestellt
Nicht relevante Sass-Bedingungen werden im CSS Editor inaktiv dargestellt

Mobile First BASE: Projektbestandteile über eigenen Downloadserver bereitstellen

Fast jede Agentur hat ihre eigenen projektspezifischen Vorlieben, um welche sie jede neue BASE Installation anpasst. Seien dies spezielle Projekteinstellungen, CSS-Anpassungen oder zusätzlich eingebundene JS-Plugins. Mit einem eigenen Download-Server können beliebige Bestandteile der BASE direkt vom eigenen Server geladen werden.

Anwendungsbeispiele

Der eigene Downloadserver entspricht von der Funktion dem offiziellen Weblics-Downloadserver. Er wird zusätzlich oder exklusiv eingebunden und stellt eigene Weblics bereit. Folgende installierbare Weblics sind denkbar:

  • vordefinierte Projektkonfiguration
  • neue automatisch einzubindende globale XSLT-Templates
  • angepasste CSS-Dateien und individuelle CSS-Only Varianten
  • spezielle Strukturelemente
  • eigene Weblics
  • eigene Themes
  • angepasste Module, wie Sprachwahl, Suche, Cookie-Hinweis, etc.
  • eigene Schriften,
  • eigene Dummy-BIlder
  • zu erledigende Aufgaben
  • eigene Pflegemasken
  • eigene Projekt- bzw. Vereichnisereignisse
  • u.v.m

Wie Sie sehen, bietet ein eigener Downloadserver unzählige Möglichkeiten, ein Projekt mit eigenen Funktionen, Weblics, Dateien und Komponenten anzureichern.

Einrichten des Downloadservers

Ein Downloadserver basiert immer auf einem Projekt. Jedes Mobile First Projekt können Sie über die Einstellung allow_publish_weblics = yes zu einem Downloadserver machen.

Weblics in den Projekteinstellungen zur Verfügung stellen
Weblics in den Projekteinstellungen zur Verfügung stellen

Haben Sie diese Einstellung aktiviert, können Sie in der Weblicsverwaltung eigene Weblics definieren und veröffentlichen.

Eigene Weblics zusammenstellen und veröffentlichen
Eigene Weblics zusammenstellen und veröffentlichen

Führen Sie hier folgende Schritte durch:

  1. Definieren Sie ein Passwort
  2. Klicken Sie veröffentlichendes Weblic erstellen.
  3. Füllen Sie die Maske aus und wählen Sie die zu veröffentlichenden Dateien.
  4. Klicken Sie auf hinzufügen, um das zum Weblic dem veröffentlichten Paket hinzuzufügen. 

Sie haben nun einen eigenen Downloadserver eingerichtet, der von beliebigen Projekten aus in Verbindung mit dem definierten Passwort genutzt werden kann.

Verknüpfen des Downloadservers

Nachdem Sie nun ein erstes Weblic auf Ihrem Downloadserver zur Verfügung gestellt haben, können Sie diesen in beliebigen Projekten verknüpfen. Die Verknüpfung geschieht ebenfalls in der Projektkonfiguration.

Downloadserver als zusätzliche Quelle für Weblics verknüpfen
Downloadserver als zusätzliche Quelle für Weblics verknüpfen

Hier genügt es, das Passwort gefolgt von einem @ und dem Pfad zum Downloadprojekt anzugeben, damit die Weblics installiert werden können.

Die Weblics vom eingenen Downloadserver erscheinen in der Liste der zu installierenden Weblics
Die Weblics vom eingenen Downloadserver erscheinen in der Liste der zu installierenden Weblics