uio--WebPageHeader-Module
uio--HeaderCarousel-Module
uio--WebPageMain-Module
Mit Redaktionssystemen und Inhalten ist es wie mit einem 4X- oder Aufbauspiel: Man fügt immer ein Steinchen nach dem anderen hinzu. Zuerst hat man einen SinglePager. Das sind es 5 Seiten. Und mit der Zeit sind es ein paar Hundert oder Tausend Informationsknoten verteilt auch mehrere Domains. Das ist ein Aspekt unserer Welt.

UIO 1.5.2.x

UPDATES/CHANGES

Überblick

Hinweise

Entwicklung - KEIN Design.

Bitte habt dafür Verständnis, dass wir uns im DEV Bereich nur mit technischen Aspekten und Daten zu UIO Design System nicht befassen, NICHT mit Webdesign und damit auch nicht mit der Frage, wie die Ansichten angehübscht werden könnten. Wenn Ihr das Design verbessern wollte so wechselt in den CREATE Bereich.

Parameter für CE Referenzen (Update)

UIO 1.5.2.67


Parameter für ContentReference(s)

Mit Hilfe von ce:ContentReference ist es bekanntlich möglich, über den uri-Parameter andere XML Files zu verlinken, um deren Inhalten nachladen und rendern lassen zu können.

So gut das Verfahren auch schon lange funktioniert: Es bestand nun der Wunsch, für dieses Rendering zusätzlich Parameter übertragen zu können, damit auch Inhalte, die eigentlich basierend auf statischem Content zentral gepflegt werden, dennoch um Parameter erweitern zu können.

Wir haben uns von C# .NET Delegates und Lambdas inspirieren lassen und sind dabei, ergänzende Parameter auch für Content-Referenzen übergeben zu lassen.


Wie haben A=, B=, C= und D= eingebeben.

Dieser Text ist DEMOTEXT mit dessen Hilfe wir die Verwendung von ContentInstance Parametern testen. Dieses Feature ist noch im Test. Für Fragen nehmen Sie Kontakt auf.

Status: Konzept

Dieses Feature befindet sich derzeit in der Konzeption.

Die Problemstellung besteht mitunter darin, dass mit apply-templates gerenderte XML-Dokumente in den Fällen, in denen diese aus einer zentralen Datei geladen wurden, zwar XML Variablen für A, B, C und D verwenden könnten. Die zugehörige Werte für A bis D müssten für den Rendering-Prozess allerdings den zugehörigen Templates für die Content Elemente übergeben werden. Das ist aber bei Hunderten von Templates so nicht möglich.

Wir unterliegen der Einschränkung von XML/XSL 1.0. Viele Nutzer von Shared Webhosting Angeboten haben nicht die Option, XSL 3.x Features nachinstallieren zu können.

FootNote (Update)

UIO 1.5.2.66


FootNote bekommt label-Parameter

Basierend auf Feedback aus der Community haben wir die <ce:FootNote> um eine Konfigurationseigenschaft <ce:label> ergänzt. Damit ist es nun möglich, bei der Deklaration der Fußnote direkt den vorangestellten eigentlichen Text anzugeben zu welchem diese Fußnote eigentlich gehört.

In diesem Zusammenhang wurden die Styles so programmiert, dass zwischen dem Text der Label und der Darstellung der hochgestellten Nummer für den Fußnotenverweis in der Browseransicht kein Zeilenumbruch mehr stattfinden kann.

Bugfix: Der zwischenzeitlich Bug, bei welchem sich über den Rücksprung vom FootNote-Text die URL geänderte hatte, indem dort ein / Schrägstrich angehängt wurde, ist behoben.

Beispiel


Man kann also nun einen Fachbegriff [1] im Text verwenden, ohne dass dieser in diesem Text selbst erläutert werden muss.


Code zum Beispiel



<ce:FootNote>
 <ce:config>
  <ce:label>
   <text lang="de">Fachbegriff</text>
  </ce:label>
 </ce:config>
 <ce:contents>
  <text lang="de">Fachbegriff: Ein Begriff welcher ...
  </text>
 </ce:contents>
</ce:FootNote>

Nutzungshinweise

Bitte kurze Labels

Vor dem Hintergrund, dass zwischen dem Text der Label und dem Fußnotenverweis die Zeilentrennung verhindert wird, ist dringend zu empfehlen, den Text der Label möglichst kurz zu fassen.

Bei langen Labels nicht einsetzen

Sollte die Fußnote sich auf mehrere vorangehende Worte oder sogar einen ganzen Absatz beziehen, so sollten Sie die <ce:label> Eigenschaft nicht angeben.

Keine Verschachtelung von Fußnoten

Eine Verschachtelung von Fußnoten ist nicht möglich. Es ist also nicht möglich, ein <ce:FootNote> Element innerhalb des <ce:content> Bereichs eines <ce:FootNote> Elements zu verwenden.

Keine manuelle Verlinkung von Fußnoten!

Fußnoten auf einer Seite werden automatisch in der Reihenfolge, in welcher diese im Text erscheinen, durchnummiert. Das Einfügen einer neuen Fußnote oberhalb im Text führt also dazu, dass alle bisherigen Fußnoten eine neue Nummer und damit auch eine neue Adresse bekommen.

Wenn Sie zwingend eine Sprungmarke auf einer WebPage angeben möchten

Status: Alpha

Die Fußnoten können redaktionell verwendet werden. Es sind aber für die Zukunft Erweiterungen sowie auch Änderungen denkbar.

Fehlender Parameter für einen optionalen Rücksprung zu PageAnchorLinks Menüs im Kopf der Inhalte, T181.

Fehlender Parameter für die Ausgabe eines Icons wie dieser z. B. für das Anlegen von Bookmarks auf manchen Seiten üblich ist. T182.

FootNote (Update)

UIO 1.5.2.65


FootNote (Bugfix)

Der zwischenzeitlich Bug, bei welchem sich über den Rücksprung vom FootNote-Text die URL geänderte hatte, indem dort ein / Schrägstrich angehängt wurde, ist behoben.

Problemstellung

Dieser Bug hatte dazu geführt, dass man immer nur einmal je WebPage zurück zur Stelle im Originaltext springen konnte, weil bei einem weiteren Sprung von einer Fußnote zu deren Texte bei einem Rücksprung dann bereits mit / zwei Slashes angehängt wurde und vom Server die URL nicht mehr erkannt wurde.

Status: Fehler behoben

Protocol in Templates

UIO 1.5.2.64


Protocol in Templates

Die Einführung der Option, mehrere Domains mit der selben UIO System-Installation rendern zu lassen, hat einige Folgen gehabt. So kann es passieren, dass für bestimmte Domains oder Subdomains keine SSL Zertifikate vorliegen.

Damit der SETTINGS_FORCE_HTTPS Parameter aus .htaccess Files auch in den Templates für die Erzeugung der vollständigen URLs von Links bekannt ist, wird auch diese Umgebungsvariable ab 1.5.2.64 an PHP und die Template Engine weitergereicht.

htaccess

UIO 1.5.2.63


htaccess

Hinweis: Im Zuge der Verwendung mehrerer Domains je Installation ist es erforderlich, dass für die Gültigkeit einer Regel immer die zugehörige Bedingung ("cond") davor nochmals definiert wird. Die htaccess Files kennen in 2024 keine Blöcke für Definition!

Dieses betrifft alle UIO Installationen bei welcher eine Installation mehrere Domains abdecken soll.

Routing Weiterleitungen

UIO 1.5.2.62


Komplette Weiterleitungen

Ab 1.5.2.62 ist es zwar möglich, auch Anfragen an eine Domain komplett weiterzuleiten. Wir empfehlen aber, dass für bestimmte URIs einer Seite doch mit 301 und 302 gem. HTTP kontrolliert zu tun.

Schritt 0: Fahren Sie zuerst eine SICHERUNG Ihrer lokalen Daten und auch ggf. der Daten auf dem Produktivsystem.

Schritt 1: Anlegen eines neuen Realm für die bisherige Domain als Forward-Realm. Hierbei hängen Sie "-forward" an den Namen des Realm-Folders an.

Schritt 2: Anlegen einer RoutingDefinition.xml Datei im Forward-Realm.

Schritt 3: Konfigurieren Sie die zugehörigen Weiterleitungen mit 301 (permanent) und 302 (found) für URIs. Denken Sie daran, die Zieladresse als forward-uri mit https://example.com/ oder der gewünschten Domain beginnen zu lassen. Erst dann folgt der eigentliche URI innerhalb der neuen Zielseite.

Schritt 4: Aktualisieren Sie die routing_config_REALMS.xml und ergänzen Sie den neuen Forward-Realm für die alte Domain, und zwar in der Reihenfolge vor den neuen Realms.

Schritt 5: Legen Sie für die alte Domain nun noch einen Konfigurationsfile in /conf an. Diese Daten werden zwar eigentlich gar nicht verwendet, weil die Weiterleitungen vorher erfolgen sollten. Die Angabe des Files ist aber erforderlich, damit die Engine den Zugriff und die Verarbeitung für HTTP Requests überhaupt akzeptiert.

Schritt 6: Aktualisierung Sie die .htaccess Files für die sowohl lokale als auch die online-Version. Denken Sie hierbei daran, dass Sie die RewriteRule für die HTTPS ggf. auf false setzen müssen falls Sie für die alte Domain kein SSL Zertifikat haben sollten: RewriteRule ^ - [E=SETTINGS_FORCE_HTTPS:false]

Schritt 7: Eigentlichen Realm für alte Domain anlegen. Hierzu gehört die RoutingDefinition.xml welche auf den Kurznamen für den Realm- bzw. RootNode erforderlich ist sowie eine RealmNode.xml Datei für die Startseite und eine RealmNode_HTTP404 Seite.

Schritt 8: Der vollständigkeithalber sollte noch die sitemap.xml Datei angelegt werden, auch wenn darin faktisch nichts oder fast nichts stehen wird.

Schritt 9: LOKALES TESTEN! Erst dann Daten auf den Hauptserver übertragen.

Routing forward-uri

UIO 1.5.2.61


forward-uri mit Domains

Im Zuge der Verschiebung von Routing-Konfigurationen vom jeweiligen Webserver (NGINX, APACHE etc.) zu Applikation wurde die Verarbeitung von <forward-uri> Werten von <route> Einträgen in der 'RoutingDefinition' geändert.

Ab 1.5.2.61 sind jetzt gegenüber bisherigen URIs auch wieder vollständige URLs möglich, um nicht nur intern routen und "forwarden" zu können sondern auch an externe Domains inklusive Angabe des Protokolls.


Beispiel für Link auf neue Domain

Damit in Google bekannte URLs und insbesondere URIs für eine Domain für eine Webseite, die diese Anfrage bekommt, auch in Zukunkt erreicht werden kann, um Anfragen an die URI kontrolliert mit 301 oder 302 auf die neue URI weiterleiten zu können, war bislang der folgende Code in der "RoutingDefinition" in UIO bis 1.5.2.60 üblich.

Ab 1.5.2.61 ist es möglich, die Domain mit Protokoll der URI voranzustellen. Der Router vermag Adressen mit http:// bzw. https:// von reinen URIs zu unterscheiden.

Hinweis: Die canonical-Angabe hat für Weiterleitungen keine Bedeutung.

Vorher:



  <route>
    <!-- 1.5.2.43 ohne Slash! -->
    <canonical>app/data/schulungen/xml</canonical>
    <uri>^app\/data\/schulungen\/xml(?:$|\/$)</uri>
    <forward-uri>de/@snm/learn/course/xml</forward-uri>
    <forward-httpheader type="301"></forward-httpheader>
  </route>

Nachher:



  <route>
    <!-- ab 1.5.2.43 ohne Slash! -->
    <canonical>app/data/schulungen/xml</canonical>
    <uri>^app\/data\/schulungen\/xml(?:$|\/$)</uri>
    <!-- ab 1.5.2.43 ohne Slash! -->
    <!-- ab 1.5.2.61 auch mit Protokoll und Domain -->
    <forward-uri>https://snewmedia.com/de/@snm/learn/course/xml</forward-uri>
    <forward-httpheader type="301"></forward-httpheader>
  </route>

Beispiel für Suchanfrage in Google in neuem Browser-Fenster

Dieses ist Beispiel für das Umlenken einer Suchanfrage auf Google. Bei diesem Ansatz wird für eine Google-Suche nach dem eigentlichen Suchbegriff noch ein "+site%3Ahttps:**" ergänzt. Hierbei handelt es sich um die URL-Kodierung einer Domain.

Dieses Verfahren ermöglicht es nun, im Fall einer fehlenden Suchfunktion auf einer mit UIO realisierten WebPage diese Suche auf Google auszulagern. Dieses setzt allerdings voraus, dass Google die WebPages dieser WebSite im Index erfasst hat.

In dieser Variante lenken wir die Suche nach dem Begriff "JAVA" auf "Java Kurstermine Wiesbaden" in Google um und reduzieren das Suchergebnis nur auf Seite von SNEWMEDIA.COM.

HINWEIS: Google schaltet allerdings dennoch auch für diesen Fall Google Ads Werbung von Mitbewerbern.



  <route>
    <canonical>api/v3/action/search-google/java</canonical>
    <uri>^api\/v3\/action\/search-google\/java(?:$|\/$)</uri>
    <forward-uri>https://www.google.de/search?q=JAVA%23+Kurstermine+Wiesbaden+site%3Ahttps%3A%2F%2Fsnewmedia.com</forward-uri>
    <forward-httpheader type="301"></forward-httpheader>
  </route>

Redaktion:



<ce:Paragraph-01>
  Link:

  <ce:InlineLink>
    <ce:config>
      <ce:target>_blank</ce:target>
      <ce:showIcon>true</ce:showIcon>
      <ce:label>
        <text lang="de">"Java" auf SNEWMEDIA.COM in Google suchen</text>
      </ce:label>
      <ce:uri>
        <text lang="de">api/v3/action/search-google/java</text>
      </ce:uri>
    </ce:config>

    <ce:contents>

    </ce:contents>
  </ce:InlineLink>

</ce:Paragraph-01>

SocialMediaPosting

UIO 1.5.2.60


Blog und Blogposts

Die Blogs und Blogposts werden schrittweise überarbeitet und gelten zukünftig nicht mehr direkt als WebPage sondern als SocialMediaPosting Instanz.

SocialMediaPost-Dokument

SocialMediaPosting Daten sollten ab UIO 1.5.2.60 als <ce:SocialMediaPosting> Element in eigenen XML Files erfasst oder als entsprechende XML-Files erzeugt werden.

Die redaktionellen Inhalte für ein <ce:SocialMediaPosting> befinden sich hierbei im der <ce:articleBody> Property. Der zugehörige redaktionelle Inhalt wird hierbei als vollständiger <CEContainer> geschrieben und kann damit sowohl Layout-Zeilen als auch die üblichen 1/2/4 Layout-Spalten haben.

SocialMediaPostList

Eine Liste von SocialMediaPosting Einträgen lässt sich über das <ce:SocialMediaPostingList> Element plazieren.

In Version UIO 1.5.2.60 verfahren wir dahingehend, dass der Konfigurationsparameter <ce:items> die Referenzierung von <ce:SocialMediaPosting> Instanzen ermöglicht, indem dort das ref=".." Attribut die zugehörige des Files über eine relative Adressierung im Realm angibt.

Diese Art der Adressierung ist provisorisch!



<ce:SocialMediaPostingList
  refdefault="example.com/_data/SocialMediaPosting/SocialMediaPosting_DEFAULT.xml">
 <ce:config>
  <ce:listHeadline>
   <text lang="de">Neueste Meldungen</text>
   <text lang="en">Recent Posts</text>
  </ce:listHeadline>
  <ce:items>
   <ce:SocialMediaPosting
    ref="example.com/_data/SocialMediaPosting/Y240830T090501.xml"/>
   <ce:SocialMediaPosting
    ref="example.com/_data/SocialMediaPosting/Y240707T120901.xml"/>
  </ce:items>
 </ce:config>
</ce:SocialMediaPostingList>

Prototyp

Das Verfahren ist ein Prototyp und dient primär der Ideenfindung. Wir empfehlen bei Bedarf an Blog und Posts in der Zwischenzeit den bisherigen Ansatz: Legen Sie Blogposts entweder als WebPage oder aber als Section in einer WebPage an.

Das refdefault Attribut der Liste ermöglicht es, einen Default-Blog-Post anzugeben. Dieser wird dahingehend verwendet, um fehlende Felder wie mitunter für ce:author und andere Properties zu füllen.

In Planung

Die Adressierung einzelner SocialMediaPosting Instanzen als Teil der Items der Liste ist provisorisch. Die Adressierung wird zukünftig über eine ID erfolgen und/oder über ein Verfahren, über welches der XML-Code direkt im Web adressiert werden kann.

Das ref=".." Attribut wird zukünftig die ID referenzieren und nicht mehr einen XML Files. Da eine ID allerdings eine alphanummerische Zeichenfolge darstellen kann die derzeitige File-Adressierung zwischenzeitig als ID-Referenzierung verwendet werden.

Status: Prototype

offers-Eigenschaft

UIO 1.5.2.59


Google

Google für für Course-Objekte eine offers-Eigenschaft. Diese hat die Instanz eigentlich von einer anderen Klasse geerbt die gem. Schema eigentlich noch kein Standard ist. Auch ist der Google Crawler nicht in der Lage, Course-offers-Daten über die zugehörige hasCourseInstance verlinkten CourseInstances zu verknüpfen, denn die haben diese offers-Einträge.

Workaround

Wir verlinken kurzerhand die Offer-Instanzen über deren @id aus einer wieder ergänzten offers-Property.

Status: Prototype

Suchformular

UIO 1.5.2.57


Ergebnisseite verlinken

Am Ende des Kopfmenüs befindet sich ein Icon mit dessen Hilfe ein Suchfeld angezeigt werden kann. Eine Eingabe eines Suchbefehls kann hierbei an den Server geschickt werden. Die zugehörige Zieladresse ist allerdings für jede WebSite über die WebSite-Definition zu konfigurieren!



<ce:hasPart>
 ...
 <ce:HeaderSearchModule>
  <ce:config>
   <ce:searchHttpMethod>
    <text lang="de">GET</text>
   </ce:searchHttpMethod>
   <ce:searchFormAction>
    <text lang="de">de/@snm/search</text>
    <text lang="en">en/@snm/search</text>
   </ce:searchFormAction>
   <ce:searchPlaceHolder>
    <text lang="de">I'm looking for ...</text>
   </ce:searchPlaceHolder>
  </ce:config>
 </ce:HeaderSearchModule>
 ..
</ce:hasPart>

Templates und Files

Der HTML Code für das Suchformular sowie den zugehörigen Button zum Öffnen befindet sich in den Templates für das HeaderMenü.

Die Konfiguration der HTTP Methode (Standard ist GET), einem Text als Platzhalter (I'm looking for ...) sowie inbesondere dem Link für die Zieladresse an welche die Anfrage geschickt wird und wo später auch das Ergebnis der Suchanfrage plaziert wird, wird über das <ce:searchFormAction> Element in der Konfiguration definiert.

Aktueller Zustand

Hinweis: Das System bietet bislang noch keine Suchfunktionalität. Die Anfragen werden zwar an den Server geschickt. Der Server ist aber nicht in der Lage, eine wirkliche Suche durchzuführen.

Der Icon im Menü, das Suchfeld sowie eine API Funktion, welche die Anfragen immerhin bekommt, sind aber soweit programmiert, dass an dieser Stelle die eigentliche Suche später ergänzt werden kann.

Technische Umsetzung einer Suche

Die technische Realisierung einer tatsächlichen Suche nach Begriffen in Webseiten ist in Planung. Mit einer einfachen Volltext-Suche in "WebPage"-Dokumenten ist es in UIO nicht getan das der derzeitige Zugriffsschutz auf manche Seiten nicht über die eigentlichen WebPage-Dokumente sondern auf anderem Wege realisiert wurde.

Bevor wir nicht geklärt haben, wie die Suchfunktionalität zwischen öffentlichen Inhalten und geschützten Inhalten differenzieren kann, gibt es keine Suchfunktionalität.

Status: Concept

Das Primärziel bestand darin, eine Suchfunktion vorzubereiten.

Das Sekundärziel bestand darin, dass immerhin nun jeder Benutzer, der die Suchfunktion genutzt hat, auf eine über die jeweilige WebSite definierte Zielseite weitergeleitet wird auf welcher der Redakteur die Option hat, dort die Antworten auf häufige Fragen und/oder Links zu erstellen.

FormSignupSigninReset

UIO 1.5.2.56


FormSignupSigninReset

Das <ce:FormSignupSigninReset> dient dazu, die Formulare für eine Anmeldung, eine erste Registrierung sowie auch für den Fall, dass das Kennwort vergessen wurde, als normales Content Element erzeugen zu lassen. Damit ist es möglich, dass Redakteure diese Formulare in einer beliebigen Seite unterbringen und in einem Menü nur noch einen Link auf die zugehörige Seite anordnen müssen.

Beispiel: SignIn




Membership (Kundenkonto)

Reset my Password

Template

Template: ce_FormSignupSigninReset_v001.xsl

Syntax

Das <ce:FormSignupSigninReset/> bietet derzeit keinerlei Konfigurationsoptionenn.

Status: Concept

ImageFluid

UIO 1.5.2.55


ImageFluid (Update)

Das <ce:ImageFluid> wurde aktualisiert. Die Definition von Adressen von Bildern entspricht jetzt dem üblichen Standard.

InlineLink mit Logo

Das nachfolgende Beispiel zeigt wie man ein <ce:ImageFluid> Element für die Plazierung eines <ce:InlineLink> Elements im <ce:SuperHeader> verwenden kann, um statt einer Textlabel für den Link ein Logo-Bild zu verlinken.



<ce:InlineLink>
 <ce:config>
  <ce:showIcon>false</ce:showIcon>
  <ce:label></ce:label>
  <ce:uri><text lang="de">de/@snm</text></ce:uri>
 </ce:config>
 <ce:contents>
  <ce:ImageFluid src="img/_snm/navlogos/logo_snewmedia_002.png" width="200"/>
 </ce:contents>
</ce:InlineLink>

ImageFluid

Das <ce:ImageFluid> passt sich in der Breite üblicherweise dem Container in welchem es liegt. Um die maximale Breite begrenzen zu können kann das width="200" Attribut verwendet werden verwendet werden.



<ce:Paragraph-02>
 <ce:ImageFluid src="img/_snm/navlogos/logo_snewmedia_002.png"/>
</ce:Paragraph-02>
<ce:Paragraph-02>
 <ce:ImageFluid src="img/_snm/navlogos/logo_snewmedia_002.png" width="200"/>
</ce:Paragraph-02>
<ce:Paragraph-02>
 <ce:ImageFluid src="img/_snm/navlogos/logo_snewmedia_002.png" width="100"/>
</ce:Paragraph-02>

Template

Template: CEImageFluid.xsl

Syntax

Das <ce:ImageFluid> Element wurde noch nicht auf den 1.5.2.* Standard gebracht und weicht in der XML-Syntax von anderen Elementen bislang ab.

So hat das <ce:ImageFluid> bislang noch kein <ce:config> Element.

Status: Alpha

Es steht zu erwarten, dass die Syntax für CEImageFluid.xsl Elemente zukünftig auf die Definition von Eigenschaften innerhalb eines <ce:config> umgestellt wird.

BookingForm

UIO 1.5.2.54


Formularfelder ergänzen

Wir haben ein zusätzliches Content Element für Formulare geschaffen. Ein neues <ce:BookingForm> ist dazu gedacht, für Bestellverfahren oder Anfrageverfahren Formulare bieten zu können wo ein Anwender nicht erst noch den Betreff ausfüllen muss sondern nur noch Formularelemente für die Konfiguration von Produkten oder Leistungen vorfindet.

Abweichend von den bisherigen Kontaktformular-Elementen geht es bei diesem <ce:BookingForm> Element darum, flexibel zusätzliche Formularelemente für Select/Option-Elemente (auch als 'Dropdown' bezeichnet), Radio-Lists, Checkboxes und mehr zu liefern.

Template

Die Templates für die Formular-Elemente befinden sich in der der ce_BookingForm.xsl Template.

Formularelemente

Das <ce:FormElement_Submit> Element liefert den Button mit welchem man das Formular versenden kann.

Status: Konzept

sitemap.xml

UIO 1.5.2.53


Auslieferung einer Sitemap

Google neigt dazu, WebPage-Adressen, welche über eine Sitemap-XML-Datei https://example.com/sitemap.xml referenziert wurden, eher im Suchergebnis mit aufzulisten als wenn die Seite nicht in einer Sitemap-Datei ist. Damit Google die Sitemap Datei findet, kann man diese in robot.txt angeben.

robots.txt

Die robots.txt beinhaltet nun einen Sitemap: https://example.com/sitemap-example.xml Eintrag welcher die vollständige URL für die Adressierung eines Sitemap-XML-Files beinhaltet.

Diese URL wird automatisisch basierend auf Umgebungsvariablen für die Domain sowie der Konfiguration in /conf/* ermittelt.

sitemap.xml

Die Sitemap-XML-Datei wird in UIO 1.5.2.53 nun komplett manuell gepflegt, um Redakteuren die Option zu geben, Einträge ergänzen oder entfernen zu können.

Der File heißt immer sitemap.xml und ist im zugehörigen Realm-Ordner anzuordnen wo sich auch der RoutingDefinition.xml File befindet.

context_root_URI

UIO 1.5.2.52


Vereinheitlichung

Zu Vermeidung doppelter Slashes // oder auch fehlender Slashes in URIs und URLs bei der Adressierung von Dokumenten wurde die Formatierung von context_root_URI-Strings vereinheitlicht:

Die URL https://example.com/facelift-23/de/home besteht aus folgenden Bestandteilen:

Dem Protokoll https:// gefolgt von der Domain example.com, dem Context-Root-URI /facelift-23 sowie abschließend dem eigentlichen relativen URI de/home.

Die URL https://example.com/facelift-23/ entspricht hierbei dem Root-URI für die dortige UIO- bzw. CMS-Installation.

NEU: Ab 1.5.2.52 beginnt und endet jeder 'context_root_URI'-Wert konsequent mit einem Slash /. /facelift-23/

NEU: Der kürzeste URI-Segment-Pfad für 'context_root_URI' lautet demnach / und besteht damit nur noch aus dem Slash /.

Deklaration

Bei der PHP Version von UIO werden 'context_root_URI' Werte in '.htaccess' Files über 'SETTINGS_CANONICAL_DOMAIN' definiert.

Die Speicherung in den Settings erfolgt in PHP über die init_context_root_URI() Methode der Settings.

$this->get_Settings()->get_context_root_URI() ermöglicht einen Zugriff auf den 'context_root_URI'-Wert innerhalb von PHP.

this.getSettings().getContextRootURI() ist die Syntax für die NodeJS-, C#- sowie die JAVA-Version von UIO.

Autokorrekturen

Für eine automatische Korrektur

InlineLink_PageAnchorLinks (Neu)

UIO 1.5.2.51


Das InlineLink_PageAnchorLinks Element

Mit Hilfe des <InlineLink_PageAnchorLinks/> Elements ist es möglich, einen Link zu den 'PageAnchorLinks' arrow--up in einem Fließtext anordnen zu können.

Der Fall, dass man redaktionell einen Link in einem Text zu dem PageAnchorLinks einer Seite angeben möchte, tritt eher selten ein. Üblicherweise ist es so, dass Templates für Sektionen oder aber Absatzelemente, welche Sprungmarken als Anchor beinhalten, von sich aus bereits so geplant und programmiert wurden, dass die Links für einen Rücksprung ins Menü automatisch ergänzt werden, wenn der Theme-Designer das so vorgesehen hat.

Empfehlung: Das Element kann verwendet werden und macht in den Fällen einen Sinn, wo Seiten sehr, sehr lang werden und man als Redakteur dem Nutzer die Option geben möchte, zurück zum Menü zu springen.

context_root_URI

Im Zuge der Vereinheitlichung der Syntax von context_root_URI-Strings (siehe UIO 1.5.2.52) wurde die Kontrollstrukturen für das Ergänzen fehlender Slashes oder entfernen überflüssiger Slashes entfernt.

Ab UIO 1.5.2.52 wird davon ausgegangen, dass das System für das Rendering über die Templates einen korrekten context_root_URI-String liefert.

Diskussion

Da es in Version UIO 1.5.2.51 noch kein Theme mit einem solchen Element gibt, wurde dieses <InlineLink_PageAnchorLinks/> Element geschaffen, damit kein Redakteur auf die Idee kommt, die zugehörigen Links als normale InlineLink Elemente zu realisieren. Die Sprungmarke für PageAnchorLinks im Seitenkopf, sofern die überhaupt plaziert wurden, können sich nämlich auch zukünftig ändern.

CSS Klassen

Die CSS Klasse uio--ce-InlinePageAnchorLink wurde provisorisch geschaffen, um alternative Styles für die Formatierung von PageAnchorLink Elementen schaffen zu können.

Status: Alpha

Das Element funktioniert unter der Voraussetzung, dass der Redakteur auch das PageAnchorLinks Menü selbst plaziert hat.

InlineLink (Update)

UIO 1.5.2.50


target-Parameter

Das <ce:InlineLink> wurde in Bezug auf seinen Konfigurationsparameter <ce:config><ce:target>.. dahingehend angepasst, dass die verlinkten Ressourcen im selben Browserfenster geöffnet werden. Hierzu wurde in Version UIO 1.5.2.50 der zugehörige Wert auf _self gesetzt.

Neues Browserfenster

Die derzeit einzige Alternative, einen anderen Wert für die target-Eigenschaft setzen zu können, besteht im Wert _blank. Hiermit wird der Browser angewiesen, beim Folgen des Links ein weiteres Browserfenster zu öffnen.

Das nachfolgende Beispiel zeigt, wie man einen InlineLink so ändern kann, dass dieser ein neues Browserfenster öffnet.



<ce:InlineLink>
 <ce:config>
  <ce:target>_blank</ce:target>
  <ce:label><text lang="de">Klick mich!</text></ce:label>
  <ce:uri>
   <text lang="de">
    <ce:fn-geturl-actualpage/>#anchorID-uio-1.5.2.50</text>
  </ce:uri>
 </ce:config>
</ce:InlineLink>

Syntax und Nutzung

Die Syntax entspricht dem UIO 1.5.2.x Standard: Konfigurationsparameter werden über das <ce:config> Element gekapselt.

Die <ce:label>-Eigenschaft sowie auch die <ce:uri>-Eigenschaft erwarten jeweils einen <text lang="de">..</text>-Wert. Die lang="de" Konfiguration entspricht derzeit der Standardsprache.

Im Regelfall wird das target-Attribut für InlineLink Elemente nicht benötigt. Die target-Eigenschaft braucht also nicht mit angegeben zu werden. Der zugehörige Wert _self wird also intern automatisch vergeben.



<ce:InlineLink>
 <ce:config>
  <ce:label>
   <text lang="de">...</text>
  </ce:label>
  <ce:uri>
    <text lang="de">...</text>
  </ce:uri>
 </ce:config>
</ce:InlineLink>

Status: Alpha

Das <ce:InlineLink> kann mit dieser Konfiguration verwendet werden.

Zu erwartende Änderungen:

Geplant sind mitunter ein type=".." Attribut, um verschiedene Typen von Verlinkungen semantisch auszeichnen und auch über Templates und Themes visuell anders darstellen zu können.

Mehrsprachige Texte

UIO 1.5.2.49


Texte mehrsprachig auszeichnen

UIO ermöglicht eine mehrsprachige Auszeichnung von Text-Elementen für Labels sowie aber auch für Links. So ist es redaktionell möglich, eine Beschriftung eines Elements parallel in Deutsch <text lang="de">Fisch</text> und in Englisch <text lang="en">Fish</text> zu definieren.

Dieses Prinzip ermöglicht es, dass auch bei einem Link auf eine Zieladresse in Abhängigkeit von der Sprache sich die Zieladresse verändert. <text lang="de">de/essen/fisch</text> und <text lang="en">en/eating/fish</text> wäre mal ein Beispiel.

Templates anpassen

Das nachfolgende Beispiel zeigt, wie man in einer XSL Template ein Text-Element in der gewünschten Sprache zu laden und als Alternative noch einen zweiten Wert für den Fall der Fälle liefert.



<xsl:variable name="local_label">
 <xsl:variable name="local_label_from_Content">
  <xsl:call-template name="findExistingValue">
   <xsl:with-param
    name="chosenNodeMayBeEmpty"
    select="./ce:config/ce:label/df:text[@lang=$GLOBAL_language_key]"/>
   <xsl:with-param
    name="defaultNodeMustExist"
    select="./ce:config/ce:label/df:text[@lang=$GLOBAL_language_default_key]"/>
  </xsl:call-template>
 </xsl:variable>
 <xsl:value-of select="$local_label_from_Content"/>
</xsl:variable>

Diskussion

Die mehrsprachige Redaktion ist in UIO von Beginn an für bestimmte Elemente mit dem Ziel ermöglicht worden, eine mehrsprachige Redaktion von Inhalten in ein und dem selben Dokument formulieren zu können.

Der Sinn und Zweck dieses Ansatzes bestand in UIO von Beginn an daran, Text-Literale eindeutig als Text auszeichnen und diese hierbei mitunter von Datum- und Zeit-Werten oder anderen Zeichenfolgen differenzieren zu können.

Voraussetzungen

Damit diese Angaben aber überhaupt technisch verarbeitet werden können, ist es zwingend erforderlich, dass die jeweiligen Templates in die Lage versetzt werden, Elemente mit mehreren Sprachen verarbeiten zu können.

Darüber hinaus muss für ein text-Element hierbei aber immer eine Sprache zugewiesen werden. Diese Sprache bezieht sich auf die Sprache des Lesers der Seite, dem das Element angezeigt werden soll.

Status: Concept

Die mehrsprachige Redaktion ist in UIO von Beginn an für bestimmte Elemente mit dem Ziel ermöglicht worden, eine mehrsprachige Redaktion von Inhalten in ein und dem selben Dokument formulieren zu können.

So gibt es Elemente mit Bedienelementen welche der Redakteur zwar plazieren, nicht aber im Detail umkonfigurieren oder beschriften möchte.

Die Praxis hat allerdings gezeigt, dass sich eine Mehrsprachigkeit mit 1 Dokument je Sprache durchsetzt.

Splitting RouteDefinition

UIO 1.5.2.48


RouteDefinition

Die RouteDefinition dient in UIO dazu, eingehehende HTTP Requests einem Dokument zuordnen zu können. So lange man sich im Kern auf SinglePager konzentriert und ggf. noch ergänzend ein paar Seiten für das Impressum, Datenschutz, AGB oder eine Kontaktseite anlegt, sind diese Files vergleichsweise kurz. Ergänzt man allerdings Seiten für Leistungen oder Produkte oder schafft man ergänzend noch Seiten für Abteilungen, Tätigkeitsbereiche oder noch eine Trennung von Standorten, entstehen sehr schnell sehr viele Dokumente.

Jedes Realm hat üblicherweise genau einen einzigen RouteDefiniton File. Diesen File in zwei Dateien aufzuspalten ist also in UIO 1.5.2.48 (noch) nicht möglich. Es gibt aber einen einfachen Workaround: Man legt für einen Teil der Routen einen zusätzlichen Realm Ordner an.

RouteDefinition

Schritt 1: Ein zweiter Realm-Ordner zusätzlich zu 'example.com' könnte also 'example.com-docs' oder auch 'example.com-forward' lauten.

Schritt 2: Man legt legt in diesem Realm-Ordner wie gewohnt einen RouteDefinition File an.

Schritt 3: Abschließend registriert man dieses zusätzliche Realm in den routing_config_REALMS File ein.



<routing-config-realms>
  <realm>
    <key>__FIRSTROUTES__</key>
    <filekey></filekey>
  </realm>
  <realm>
    <key>example.com-forward</key>
    <filekey></filekey>
  </realm>
  <realm>
    <key>example.com</key>
    <filekey></filekey>
  </realm>
  <realm>
    <key>example.com-docs</key>
    <filekey></filekey>
  </realm>

Routing (Update)

UIO 1.5.2.47


Routing (Update)

Im Zuge der Durchsicht von Warnungen in einer Google Search Engine wurde festgestellt, dass Google eigenständig Vorgaben für "Canonical URLs" zu ändern beginnt. Dieses galt im Schwerpunkt für alle Startseiten im Sinne der folgenden URLs:

example.com/

example.com/de

example.com/de/@example

example.com/@example

Im Zuge von UIO 1.5.2.43 beinhalten die relativen Links zu Beginn einer URI keine Slashes / mehr. Bei dem Versuch, eine Weiterleitung über http-forwarding mit <forward-uri></forward-uri> auf die Startseite durchzuführen trat nun das Problem auf, dass das Routing mindestens 1 Zeichen erwartet.

Hinweis zur Konfiguration

Bei der Konfiguration einer UIO Installation ist es erforderlich, dass man für den Fall einer Adressierung von / wie https://example.com/ oder auch http://localhost/ angibt, welcher Inhalt welcher WebPage aus welchem Realm in diesem Falle anzuzeigen ist.

Eigentlich sollte eine '' Adresse konsequent auf den zugehörigen RootNode im Realm wie z. B. an '@snm' oder '@example' weitergeleitet werden weil mit diesem Ansatz dann immer sichergestellt ist, dass das UIO System dann das Routing über die normale RoutingDefinition vornimmt und für eine WebPage auch die WebSite finden kann. Dieses ist die Grundlage für die Erzeugung von LinkedData Informationen.

Für den Fall, dass aber diese Weiterleitung auf einen RootNode im Realm fehlt, muss zwingend ein zugehöriges Dokument über die Konfiguration (conf) definiert werden.



// Für die PHP Version
define(
  'SRV_CONFIG__DEFAULT_WEBPAGE_WHEN_NO_PREFIX',
  'Realm'.$sep.'###'.$sep.'RealmNode.xml'
);

Status: Korrigiert

Die Verarbeitung von Routing-Daten im Routing Modul akzeptieren ab UIO 1.5.2.7 jetzt auch forward-uri-Werte mit einer String-Länge von 0. Da der absolute URI-Pfad immer seit 1.5.2.43 mit einem Slash / endet, wird aus <forward-uri></forward-uri> damit beispielsweise die URL https://example.com/ .

Keyboard(s) (Preview)

UIO 1.5.2.46


Konzept Keyboard CEs

Für diejenigen, die es interessieren sollte: Für die Visualisierung von Keyboard-Layouts sowohl für Computer-Keyboards als auch für die Redaktion und Auszeichnung von Keyboard-Layouts für Musikinstrumente geht es im Kern darum, dass nicht ständig irgendjemand Grafiken in irgendeinem Grafikprogramm erzeugt sondern dass es ermöglicht wird, auch hierfür ContentElement Komponenten zu haben. <ce:KeyboardKey>

Technisch betrachtet dahingehend möglich, dass Sie in der Redaktion ein <ce:FluidImageSVG format="L21"> Element verwenden und diesem als Inhalt über dessen <ce:contents> Element ein <ce:KeyboardLayout/> Element zuweisen.


In einer Demo als Machbarkeitsstudie sieht das aktuell wie folgt aus.

A

image/svg+xml

Parameter

Die maßgebende Neuerung ist zuerst einmal das <ce:FluidImageSVG format="L21"> Element welchem Sie ein UIO Standardformat wie L21 oder Q11 zuweisen können.

Diskussion

Der Aufbau der zugehörigen Grafik-Elemente ist noch in Planung.

Status: Konzept

KeyboardKey

UIO 1.5.2.45


CEKEYB wird KeyboardKey

Für alle diejenigen, die in der Redaktion gern einmal Tastatur-Kürzel oder einzelne Tasten auszeichnen möchten: Wir haben hierfür ein neues Content Element <ce:KeyboardKey> geschaffen welches derzeit gleichbedeutend mit der bisherigen Fassung von <CEKEYB> ist.

Mit <ce:KeyboardKey>+</ce:KeyboardKey> kann man also ein + Plus-Zeichen redaktionell darstellen und zugleich aber auch semantisch korrekt auszeichnen.


Beispiel ohne semantische Auszeichnung

Durch Drücken der Tastaturcodekombination 'STRG+ALT+ENTF' ruft man den Taskmanager auf. Mit 'SHIFT+^ kann man das '°' Zeichen eingeben. Die Taste ''' ist ein Hochkomma. Mit 'STRG++' bewirkt man im Browser die Vergrößerung der Ansicht auf '120%'.


Beispiel mit semantischer Auszeichnung

Durch Drücken der Tastaturcodekombination STRG+ALT+ENTF ruft man den Taskmanager auf. Mit SHIFT+^ kann man das ° Zeichen eingeben. Die Taste ' ist ein Hochkomma. Mit STRG++ bewirkt man im Browser die Vergrößerung der Ansicht auf 120%.

Diskussion

Es ist auch uns bewusst, dass die Eingabe von <ce:KeyboardKey>+</ce:KeyboardKey> eine gewisse Länge hat und länger ist als beispielsweise <keyb>+</keyb> wie man es in HTML kennt.

Der Sinn und Zweck von XML besteht aber nun einmal darin, dass das Markup sowohl von Menschen als auch von Maschinen verstanden wird, und zwar nicht nur zum Zeitpunkt der Redaktion durch irgendeinen Entwickler sondern auch in 10 Jahren, wenn jemand mal Änderungen vornehmen möchte.

Status: Alpha

Die redaktionelle Verwendung funktioniert. Wir empfehlen auch, alle bisherigen <CEKEYB> Elemente durch die neue Variante zu ersetzen. Es werden bislang beide XML-Varianten von den Templates erkannt.

Ausblick

Der primäre Grund für die Einführung von <ce:KeyboardKey> anstatt nur <ce:Key oder <ce:Keyboard bestand darin, dass tatsächlich auch ein <ce:Keyboard Content Element in Planung ist, welches die komplette Tastatur darstellt.

<ce:Keyboard wird ein Keyboard-Layout darstellen.

<ce:KeyboardKeyCombination bzw. <ce:KeyCombo wird als Gruppierungselement für Tastaturkürzel erfasst werden. Der primäre Hintergrund für das Element besteht darin, dass für Layout- und Rendering-Zwecke das Programm erkennen kann, dass STRG+ALT+ENTF zusammengehört. Hinweis: Zur Verhinderung der Trennung von Zeichen gibt es bereits ein Content Element.

LinkedData id's

UIO 1.5.2.44


Vergabe von IDs

Die automatisierte Zuweisung von @id Werten wurde für globale Daten und auch für die Generierung von BreadcrumbList Elementen auf eine Verkettung des Stereotypes wie z. B. 'WebPage' mit anschließend dem URI dem relativen Pfad zur Adressierung der Seite geändert.

Beispiel: de/@example/a/b/c wird damit zu 'WebPage/de/@example/a/b/c'. Das Prinzip gilt sinngemäß auch für andere Stereotypen.

Veränderungen

Alle IDs innerhalb beginnend mit dem zugehörigen Stereotype wie beispielsweise 'WebPage', 'WebSite', 'Product', 'Service' oder auch 'Person' gefolgt von einem Slash / und anschließend einem relativen URI-Pfad. Dieser Pfad dient dazu, eindeutige IDs schaffen zu können.

Fast alle Objekte von Instanzen haben eine <ce:url> Eigenschaft innerhalb der Properties, <ce:properties ..>, mit welcher auf über eine kanonische URL auf eine Webseite verlinkt wird, wo dieses Objekt und die Daten zu finden sind.

Status: Alpha

Automatisierung

Alle <ce:WebPage> Elemente bekommen diese ID ab 1.5.2.44 automatisch erzeugt. Der URI-Pfad für die Adressierung im Web ist hierbei der gleiche wie für die Erzeugung der ID.

Alle <ce:BreadcrumbList> Elemente wurden bereits automatisch erzeugt. Bei der Adressierung der Items der Liste wurden die IDs ergänzt.

Context Root vs. Relative URI

UIO 1.5.2.43


Context Root

Im Zuge der Optimierung eines Datenaustauschs zwischen verschiedenen Webseiten sowie der Definition von IDs für Instanzen von Komponenten und damit nicht nur den Webseiten sondern auch allen weiteren Bestandteilen war es erforderlich, die Adressierung des Context-Root-URI zu vereinheitlichen und damit auch den URI-Pfad für die relative Adressierung anzupassen.



// Für die PHP Version
$relative_URI = $this->removeSlashAtBegin($route->canonical)

# Vollständige URL für die Adressierung
# <Protokoll+Domain >< context_root >< relativeURI >
  https://example.com/demo/123/alpha/de/@example/a/b

# Protokoll und Domain
  https://example.com

# context_root_URI
  /demo/123/alpha/

# relative_URI
  de/@example/a/b

Für eine automatische Korrektur von sowohl URL-Bestandteilen für den Context-Root-URI als auch den relativen URI werden vorangestellte Slashes entfernt. Dieses Verfahren der Autokorrektur funktioniert zwar, wird aber zukünftig wieder entfernt werden, dh. URI-Pfad sind grundsätzlich korrekt zu erfassen weil ohne diesen Ansatz gewollte Adressen wie example.com/de//r/3 nicht möglich sind.



$relative_URI = $this->removeSlashAtBegin($route->canonical)

Veränderungen

Diese Veränderungen haben einen Einfluss auf alle Route-Definition bestehender Seiten. Es müssen also für eine Kompatibilität mit 1.5.2.43 alle URI-Pfade als Teil von IDs und Links dahingehend korrigiert werden, dass diese nicht mehr mit einem Slash / beginnen.

Tipps und Tricks

$this->removeSlashAtBegin: Für das Routing für die PHP Version wurde eine Funktion ergänzt mit welcher alle relativen Links korrigiert werden können, um vorangestellte Slashes entfernen zu können:

Status: Alpha

InlineLink mit Target

UIO 1.5.2.42


Neues Fenster öffnen

<ce:InlineLink> Elemente haben ab Version UIO 1.5.2.42 in der <ce:config> eine neue <ce:target> Eigenschaft welches Sie mit <text>_blank</text> füllen können.

Mit diesem Ansatz wird der Browser angewiesen, die verlinkte Zielseite in einem neuen Browserfenster zu öffnen. Das ist dann zu empfehlen, wenn zu befürchten ist, dass sich der Nutzer in der verlinkten Seite verirrt und nicht mehr zum eigentlichen Thema zurückfindet oder nicht mehr zurückkehrt.


Beispiel

So kann man beispielsweise den Link auf Facebook zwar einrichten, öffnet aber für FB ein neues Browserfenster.



<ce:Paragraph-02>
 <ce:InlineLink>
  <ce:config>
   <ce:target>
    <text>_blank</text>
   </ce:target>
   <ce:uri>
    <text lang="de">https://facebook.com/snewmedia</text>
   </ce:uri>
   <ce:label>
    <text lang="de">https://facebook.com/snewmedia</text>
   </ce:label>
  </ce:config>
 </ce:InlineLink>
</ce:Paragraph-02>

LinkedData (Bug)

UIO 1.5.2.41


Google und id-Attribute

https://example.com/WebPage/WebPage/WebPage/a/b/c: Bei der Sicherung der Seitenindizierung von Webseiten nach dem Relaunch ist aufgefallen, dass Google begonnen hat, URLs wie die obige Adresse für die Erfassung als URL für eine WebPage abgelehnt hat mit der Begründung, dass die Seite schon eine Adresse habe.

Die Verwunderung hierbei war nun die, dass im Falle von UIO eine Webseite tatsächlich dann die kanonische Adresse https://example.com/a/b/c haben könnte. Die Anordnung von /WebPage/WebPage/WebPage entsteht bei der Vergabe einer id="/WebPage/a/b/c" in Verbindung mit hasPart und isPart-Beziehungen.

So scheint eine isPartOf-Beziehung zwischen Seite b und Seite a sowie zwischen c und a dazu zu führen, dass Google für jede dieser Beziehungen sich einen URL mit 2x /WebPage wegen Seite 'a' und einmal '/WebPage' für die eigentliche Seite 'c' in '/a/b/c' generiert.

SuperHeader mit Logo

UIO 1.5.2.40


SuperHeader mit Logo

Es kam der Wunsch auf, oberhalb des Seitenkopfs mit Logo und Menü den Superheader dazu zu verwenden, im Sinne eines Marke-Submarke-Verhältnis oben rechts und dann rechtsbündig noch das Logo einer überordneten Marke oder Seite anzuzeigen und hierbei zu verlinken.

Hier für gibt es bislang keine Komponente, und es ist aktuell auch noch nicht vorgesehen, hierfür eine Komponente zu bauen, da es sich im Grunde genommen um einen Aspekt des Webdesigns des Seitenkopfs handelt. Es gibt aber eine Lösung.

Lösungsweg 1/2

Man kann den <ce:SuperHeader> wie bislang gewohnt mit <CERaw> Elementen realisieren, um zuerst einmal das Layout ggf. mit Bootstrap Komponenten zu bauen. Für diesen Aspekt werden wir tatsächlich noch eine SuperHeader-Component bauen.

Das Layout können Sie mit UIO Componenten für Container, Row und Col-Elemente bauen.

NEU ist hierbei, dass Sie mit Hilfe eines <ce:BoxRelative> Elements einen Container haben, den Sie innerhalb eines Col-Elements anordnen können, um darin einen ce:InlineLink mit einem ce:FluidImage anorzuordnen.

Lösungsweg 2/2

Geben Sie im <ce:FluidImage...> Element die Eigenschaft width="200" an, um die visuelle Darstellung einer Grafik auf maximal diese Breite zu beschränken. Das ist wichtig weil viele Logo-Files die 2- oder 3-fache Pixel-Auflösung haben, um bei Retina-Displays in Smartphones sauber eine feine Darstellung zu haben.

NEU ist auch, dass wir dem <ce:InlineLink> Element jetzt neben der bestehenden Eigenschaft <ce:label> in der Konfiguration <ce:config> auch zusätzlich noch über die config hinaus ein neues <ce:contents> Element gegeben haben, um ein InlineLink Element als Container für ein <ce:FluidImage..> nutzen zu können.


Work-Around

Das Verfahren ist ein WorkAround und das Verfahren funktioniert, wird aber in dieser Form kein Standard werden.

Für die Plazierung von Grafiken ist eigentlich das <ce:ImageBox> Element gedacht. Bilder dieses Elements durchlaufen allerdings ein Pre- und Post-Processing, darunter die Verkleinerung, Komprimierung und auch die Nutzung von Overlays.

Status: Idea

Wir stufen den Status zuerst einmal als 'Idee'. Die Verwendung von Layout-Elmenten und Absatz- und Bild-Komponenten, die eigentlich für den Inhaltsbereich gedacht sind, sollten grundsätzlich nicht für das Design eines Headers oder noch des Superheaders geschaffen werden

Header-Layout-Elemente

Es steht zu erwarten, dass tatsächlich Komponenten für die Formulierung des Layouts und der Struktur sowohl des Headers als auch eines SuperHeader bekommen werden. Diese Elemente werden derzeit automatisch über das ce:WebPage Element mit Daten gefüttert und über die Standard-Templates gerendert.

Diskussion

Die derzeit in 1.5.2.x einzige Variante für eine Anpassung des Seitenkopfs ist der Weg über den ce:SuperHeader mit CERaw Elementen. Wenn Seitenbetreiber diesen Bereich unbedingt noch anpassen möchten, ist das denkbar. Das Menü im Seitenkopf ist allerdings für die Navigation unabdingbar und mit der Funktionalität so stark verknüpft, dass wir eine Eigengestaltung der Header-Zeile mit Logo und Menü vorerst nicht erlauben möchten.

Timeline Component

UIO 1.5.2.39


Visualisierung von Zeitlinien

Wir haben begonnen, eine erste Version einer vertikalen Zeitlinie als Timeline Komponente zu schaffen. Das zugehörige Element lautet <ce:Timeline>.

Die Besonderheit dieser Timeline besteht darin, dass diese automatisch Inhalte abwechselnd links und rechts einer mittleren Achse mit Icons darstellt.

Eine weitere Besonderheit besteht allerdings darin, dass wir nicht nur Items für diese Timeline ermöglichen sondern auch spezielle Marker für den Beginn und das Ende sowie auch Forks und Joins.

Status: Concept

Für einen Produktiveinsatz ist das Element noch nicht zu empfehlen, da sich die Bezeichnung der Bestandteile dieser Komponente noch ändern könnte.

Kennzeichnung von Zeitwerten

UIO 1.5.2.38


Auszeichnung von Zeitwerten

Wir wissen, dass beim Thema Datum, Zeit, Datum und Zeit sowie Zeitdauer, nicht nur viele Entwickler sondern auch Redakteure ziemlich gereizt reagieren.

Dieses Thema ist definitiv zu wichtig als dass wir uns da ständig drumherum drücken können.

Wir haben ab UIO 1.5.2.38 entsprechend 'T160 Datum und Zeit' begonnen, die ersten drei Elemente zur semantischen Auszeichnung von Werten rund um die Themen Datum und Zeit ergänzt:

<ce:Date value=".."/> <ce:DateTime value=".."/> <ce:Duration value=".."/>



<ce:WebPage>
 <ce:config>
  <ce:Default-Date-format="iso-8601"/>
  <ce:Default-DateTime-format="iso-8601"/>
  <ce:Default-Duration-format="iso-8601"/>
 </ce:config>
 <ce:contents>
  <ce:Paragraph-01>
   <ce:Date value="1999-12-31"/>
   <ce:DateTime value="1999-12-21T22:00:00+02:00"/>
   <ce:Duration value="P4H"/>
  </ce:Paragraph-01>
 </ce:contents>
</ce:WebPage>

Wie man Fachbegriffe markiert

Alle Zeitangaben werden als Wert das value-Attributs im ISO 8601 Format angegeben. Das ist das Standardformat für LinkedData; es berücksichtigt die Zeitzone.

Wir wissen, dass das ISO 8601 Format den meisten Menschen etwas fremd ist.

Wir werden noch dafür sorgen, dass eine automatisch Datumserkennung ermöglich wird.

HINWEIS: Sie können, wenn Sie das Format nicht beherrschen, das Format als normales deutsches Format eingeben. Bei einer Validierung führt das zwar zu einem Fehler, aber wir können das dann später korrigieren.

Wichtig ist, dass wir in allen redaktionellen Inhalten zweifelsfall Zeitwerte erkennen können, ohne mit Texterkennung oder KI arbeiten zu müssen.

Wie funktioniert das?

Das Grundprinzip beginnt damit, dass Sie am besten immer ein Code-Snippet als Beispiel verwenden.

Der Aufbau einer ISO-8601 Datum- und Zeitangabe ist ein weltweit gültiges Schema. Das Datum beginnt mit YYYY-MM-DD, Jahr, Monat, Tag. Die Uhrzeit folgt nach dem Buchstaben 'T' mit jeweils 2 Stellen für Stunde, Minute und Sekunde. Wichtig ist, dass abschließend noch eine Zeitzone mit +02:00 für die deutsche Sommerzeit und +01:00 für die deutsche Winterzeit angegeben wird.

Hinweis: Wir arbeiten noch an einer vereinfachten Eingabe basierend auf Settings und der Konfiguration der Webseite.

Diskussion

Zeitzonen mögen den meisten von Ihnen völlig egal sein, aber wir müssen einfach wissen, dass die Zusammenarbeit immer internationaler wird.

Hinzukommt, dass es jederzeit passieren könnte, dass in der EU die westlich von Deutschland gelegenen Staaten im Zuge einer Abschaffung der Sommerzeit eine eigene Zeitzone bilden bzw. die von London übernehmen, dh. zwischen Niederlande und Deutschland oder zumindest zwischen Spanien und Deutschland könnte dann 1 Stunde Zeitverschiebung bestehen.

Fachbegriffe auszeichen

UIO 1.5.2.37


Wie man Fachbegriffe markiert

Im Zuge der Redaktion umfangreicher Dokus haben wir festgestellt, dass man an irgendeinem Punkt bemerkt, dass man manche Begriffe mehrfach zu erläutern beginnt.

Ein weiteres Problem besteht darin, dass man immer wieder mal Keywords für ce:WebPage Instanzen benötigt, damit man auch über eine Google Suche vorgeben kann, wofür diese Seite überhaupt gefunden werden soll.

Ab Version UIO 1.5.2.27 können Sie nun <ce:DefinedTerm>Begriff</..> als Markup für Fachbegriffe verwenden.


                      
<CERaw>
 < ![CDATA[
<ce:DefinedTerm termCode="" inDefinedTermSet="">Beispielbegriff</ce:DefinedTerm>

<ce:DefinedTerm
 termCode=""
 inDefinedTermSet="">
  Behance
</ce:DefinedTerm>
 ]] >
</CERaw>
                      

Aktuelle Hinweise

HINWEIS: Dieser Ansatz dient derzeit nur dazu, dass Sie zuerst einmal diese Begriffe markieren können und wir diese für eine technisch-automatisierte Verarbeitung zumindest erst einmal wiederfinden können.

WICHTIG: Markieren Sie nur und ausschließlich das Wort an der Position, wo Sie dieses auch tatsächlich im Mindestumfang erklären.

Ein Beispielbegriff ist ein Begriff der nur als Beispiel für in der Redaktion später verwendeten eigentlichen Begriffe dient.

Status: Alpha

Der Aufbau des Elements entspricht nicht der UIO 1.5.2.* Spezifikation. Es fehlten bislang sowohl das ce:config als auch die Summe der ce:properties Elemente als Sammlung von Konfigurationen und Eigenschaften.

Diese Kurzfassung ist primär als Inline-Element geschaffen wurden, um Begriffe schnell und leicht markieren zu können.

Diese Inline-Variante wird voraussichtlich am UIO 1.5.3.* reinen ref-Parameter für die Referenzierung der eigentlichen Deklaration des Begriffs beinhalten bei welcher der Begriff auch eine eindeutige ID bekommen wird.

Diskussion

Damit wir über Code nicht nur den Begriff finden sondern auch die zugehörige Erläuterung, ist es erforderlich, dass eigentlich auch die Erläuterung semantisch ausgezeichnet wird. Genau das ist in der Redaktion aber nicht immer möglich weil es sich oftmals bei Begriffsbestimmungen nicht um ein Lexikon sondern einen Artikel handelt, in welcher der Begriff beiläufig auch noch kurz erläutert wird.

Das Element dient also eher als Marker, um bei einer Suchfunktion besser erkennen zu können, wo Begriffe wirklich erklärt werden.

Das gilt übrigens auch für eine Auszeichnung, wo auf Begriffsdeklarationen verwiesen wird.

Headlines

UIO 1.5.2.36


Headlines und Margins

Wir haben die ce:FixedHeadline-03 und zuvor bereits auch ce:FixedHeadline-02 und ce:FixedHeadline-01 auf einen margin-top Wert von 0px geändert.

Dieses kann dazu führen, dass die Abstände zwischen Überschriften oder zum vorausgehenden Absatz zu gering sind.

Lösungsansatz

Bitte auf Notlösungen vorerst verzichten. Das Problem lässt sich über CSS und JS sowie Post-Processing des HTML5 Codes auf dem Server lösen.

Alternativ plazieren leere Absatzformate ohne Content.

Ursache

Viele redaktionelle Inhalte werden in Layout-Containern wie Row und Column angeordnet. Dieses Layout-Elemente sorgen selbst für einen Abstand vorangehenden Block. Darüber hinaus sorgt jeder Block wie ein Absatz im Regelfall für Abstand nach unten.

Ein Abstand einer Headline nach oben fehlt also nur dann, wenn die Headline einem Absatz folgt oder aber aus stilistischen Gründen ein Abstand gewählt wird; dieser wird zukunft aber über VerticalSpacer realisiert werden. Siehe hierzu Doku zum Designsystem.

SocialMedia Links

UIO 1.5.2.35


Bestätigung der Inhaberschaft

Verlinkungen zwischen einer mit UIO realisierten Webseite und diversen Social Media Profilen wie Facebook, Twitter/X, LinkedIn, XING, Twitch, SoundCloud und dergleichen ist sinnvoll an dem Punkt, wo entweder Suchmaschinen und Crawler und KI einen Bezug herstellen sollen. Wenn dort aber nichts zu finden ist oder die Besucher verloren gehen, gibt es schon den Fall, wo man die Links eher nicht erwähnt.

Bisheriges Verfahren

Social Media Links in Fließtexten

Für einen Link zu Social Media Profilen reicht ein normaler <ce:InlineLink>. Es ist allerdings zweckmäßig, dass dieser Link dann ein neues Fenster öffnet.

Social Media Link Buttons als eigener Absatz

Eine Alternative zu <ce:InlineLink> Elementen sind diverse Button-Varianten. Nutzen Sie hierfür ein Absatzelement wie <ce:Paragraph-02> für den Haupttext.

Buttons mit Icons

Es gibt über 100 gängige Social Media Platformen. Es besteht kein Problem, für jede dieser Platformen eine SVG Grafik zu finden, um deren Code in UIO zu verwenden.


                      
<CERaw>
 < ![CDATA[
 <svg ...>...</svg>
 ]] >
</CERaw>
                      

Tipps

Für Icons konsequent den gleichen bzw. selben Iconfont und/oder die selbe SVG Quelle im selben Designsystem.

Status

Alpha

Das Verfahren ist nicht perfekt, aber es erfüllt als Workaround auch ohne zusätzliche SocialMedia-Link Elemente seinen Zweck.

Diskussion

Die Diskussion wurde brutal unterdrückt. Nein, wir führen die Diskussion noch. Es geht im Kern darum, ob wir UIO konsequent auf ein Icon-Set wie einst FontAwesome trimmen oder das nicht mehr tun. Die stete Kommerzialisierung von FontAwesome Icons war verständlich; niemand arbeitet gern gratis. Wir nutzen inzwischen andere Icon-Sets.

Google Search Console

UIO 1.5.2.34


Bestätigung der Inhaberschaft

Damit Webseiten, die mit UIO betrieben werden, auch mit der Google Search Konsole auswerten können, müssen Sie Ihrer Inhaberschaft für die Webseite nachweisen. Google bietet Ihnen dafür eine Reihe von Varianten. Nicht jede Variante ist möglich.

Derzeitiges Verfahren

Variante 1

Hochladen eines google???.html Files in den Webroot-Bereich eines Verzeichnisses, damit eine Adresse im Sinne von https://example.com/google???.html durch Ihren Webserver mit der Auslieferung der Datei erfolgt. Diese Variante funktioniert nur dann wenn der Webroot Ihrer WebSite mit allen URIs auch mit dem der zugehörigen Domain übereinstimmt.

Kopieren Sie den google???.html file in data/public_google-search-console.

Kopieren Sie den google???.html File NICHT in das Wurzelverzeichnis Ihres Webhostings. UIO wird diesen dort ignorieren.

Hacking und Testing: Ein Zugriff auf das data/public_google-search-console Verzeichnis über den Browser ist NICHT möglich.

Problem: Wenn Sie UIO als System aber in einem /wo/auch/immer installieren, findet sich die Startseite auf https://example.com/wo/auch/immer. Das Problem: Die https://example.com/google???.html weil das Root-Verzeichnis von UIO in /wo/auch/immer liegt.

Status

Alpha

UIO in 1.5.2.34 ist in der Lage, ein Request an die den google???.html File korrekt zu beantworten. Google hat diese Art der Validierung in Tests akzeptiert.

Globaler Graph (Workaround)

UIO 1.5.2.32


Globaler Graph

Um bereits in Version 1.5.2.33 einen globalen Graph für LinkedData einsetzen zu können, legen Sie eine ContentInstance mit zugehörigen ContentReferences in den jeweiligen WebSite Deklarationen an. Der Code des Graph sollte in einem CEGraph Element verbaut werden.

Tipps

Wir empfehlen, den Graph in JavaScript zu erstellen und dann in die ContentInstance zu exportieren.

Mit diesem Ansatz hat man die Option, Kommentare im Code plazieren zu können, was im Originalformat gem. Standard nicht möglich ist und damit zu Fehlern führt in deren Folge die Daten ignoriert werden.

Status

Work-In-Progress

LinkedData (Update)

UIO 1.5.2.32


LD WebPage (Konzept)

Nachdem bereits LinkedData für den aktuellen Breadcrumb-Pfad korrekt erzeugt wird ergänzen wir schrittweise die zugehörigen semantische Informationen für die eigentlich WebPage als Teil einer WebSite.

Provisorium

Zur Info: Es werden bislang nur WebPage mit id, url und isPartOf gerendert. Darüber hinaus wird eine BreadcrumbList automatisiert erzeugt. Es ist also möglich, einen Bezug zwischen aktueller WebPage, der zugehörigen WebSite zu ermitteln.

Für weitere LinkedData empfehlen wir derzeit den Ansatz über einen Global Graph, siehe 1.5.2.33.

Status

Work-In-Progress

Die WebSite selbst ist zuweilen wiederum über eine isPartOf Beziehung mit einer übergeordneten WebSite verknüpft. Diese Information wird aber noch nicht ausgegeben.

TeaserGroup (Update)

UIO 1.5.2.31


Unterstützung von ce-Komponenten

<ce:TeaserGroup-5050-cnt-img> Die Items TeaserGroup Komponenten unterstützen ab 1.5.2.31 jetzt die redaktionellen Standard-Component-Elements und damit die selben Komponenten welche Sie auch für die Redaktion von Seiten sonst verwenden.

Ergänzen Sie innerhalb des <item> Elements ein <ce:contents> Element wie Sie es von anderen Komponenten auch schon kennen.

TeaserGroups des Typs 5050 bewirken, dass jeder Teaser die volle Seitenbreite im Browserfenster verwendet, wobei 50% der Breite von einem Panel mit Text und 50% von einem Panel mit einem Bild mit b/h=2/1 bis b/h=3/1 genutzt wird. Die Besonderheit besteht darin, dass jeder Teaser gegenüber dem vorangegangenen Teaser-Item die Reihenfolge umkehrt.

Eingesetzt werden diese Elemente bislang auf Startseiten für Rubriken.

Empfehlung

Für ein einheitliches Layout ist es dringend zu empfehlen, dass Sie sich an die Guidelines halten. Bisher war es so, dass die Überschrift über <headline> und der Inhalt über <paragraph> nur Text-Inhalte erlaubte, dh. eine gestalterische Veränderung war nicht möglich. Da nun in In <ce:contents> quasi alles gerendert werden kann, führt das tendtiell zum Risiko von Wildwuchs.

Der Standardabsatz in Teasern ist das <ce:Paragraph-02> Element mit 2-3 Zeilen. Wenn Sie feststellen, dass noch Zusatzinformationen zwingend erforderlich sind, können Sie noch 2 bis 4 Zeilen als <ce:Paragraph-01> ergänzen.

Diskussion

Entsprechen TeaserGroup dem 1.5.2.* Standard?

Nein, noch nicht ganz. TeaserGroup Elemente sind in Bezug auf die XML Dokumentstruktur und auch die Template-Umsetzung vergleichsweise alt.

Der <ce:*> Namespace wird zwar für die Komponente selbst bereits unterstützt. Die zugehörigen Eigenschaften haben aber noch den Default-Namespace.

ce:WeekCalender (Konzept)

UIO 1.5.2.30


Übersicht über Kalenderwochen

Zur Abstimmung von Terminen wurde die Serverseite eines Wochenkalenders realisiert. Das Rendering der Ansichten ist in Planung.

Features

Ermittelt einen auf Wochen basierenden Kalender unter Berücksichtigung von Wochenenden und Feiertagen.

ce:TextURLShortened

UIO 1.5.2.29


Lange URLs im Text

Um manch eine URL mit einem Link vollständig darstellen zu können müsste man manche Links konsequent über mehrere Zeilen umbrechen. In vielen Fällen ist es aber oftmals ausreichend, wenn man nur den Anfang der URL zeigt und den Rest mit einem 'ellipsis' Zeichen ausblendet.

Um lange Zeichenfolgen in der Ansicht im Web kürzen zu können haben wir eine <ce:TextShortener> Komponente geschaffen mit der das möglich ist.

Wenn man also einen Link auf die Adresse darstellen möchte so kann man diese Adresse nun kürzen.

Es funktioniert auch mit langen Worten wie 'Donaudampfschifffahrtskapitätsmütze':

Quellcode



  <ce:TextShortener>
  <ce:content>
  https://www.example.com/ich/bin/eine/wirklich/sehr/sehr/lange/adresse/mit/zig/parametern?a=was&amp;b=auch&amp;immer#prima
  </ce:content>
  </ce:TextShortener>

Bugs und fehlende Features

Darstellung: Die Darstellung in Paragraph-02 Komponenten ist gestört. In Paragraph-01 Komponenten funktioniert es bereits.

Es gibt derzeit in 1.5.2.29 noch keine Möglichkeit, den Begriff in der langen Version anzuzeigen. Eine Suchmaschine kann den langen Text allerdings durchaus erfassen weil er nur für die Ansicht für den Betrachter gekürzt wird, im HTML Code aber in der vollen Länge vorhanden ist.

BreadcrumbList HTML

UIO 1.5.2.28


BreadcrumbList als CE in HTML

Nachdem in 1.5.2.22 die bisherige automatisierte BreadcrumbList für den Seitenkopf um eine ergänzende Ausgabe von LinkedData Informationen im HTML Code ergänzt wurde, wurde in Version 1.5.2.28 nun Redakteuren die Möglichkeit gegeben, eine BreadcrumbList als <ce:BreadcrumbList/> auch mit funktionierenden Links an beliebigen Stellen im Inhalt anzugeben.

ce:BreadcrumbList in JAVA

Die Klasse für <ce:BreadcrumbList/> Objekte findet sich bislang im Namespace com.uio3.uds.v1.ce und damit im Namespace der Content Elements im 1.x Branch des Designsystems.

Das Erzeugen einer Instanz der Klasse funktioniert wie gewohnt mit createInstance(). Um das Element dem DOM einer bestimmten WebPage hinzufügen zu können, müssen Sie zuerst die Instanz der WebPage laden und dann die BreadcrumbList dem ausgewählten Knoten in der WebPage hinzufügen.



BreadcrumbList bcl = com.uio3.uid.v1.ce.BreadcrumbList.createInstance();
WebPage = com.uio3.uds.v1.ce.WebPage.loadInstance("..");
ContentElement ce = WebPage.selectNode(..).append(bcl);

Beispiel für BreadcrumbList

In der Standardkonfiguration sieht die <ce:BreadcrumbList/> in der Darstellung im redaktionellen Inhalt für diese aktuelle Seite so aus:

Hinweise

Solche BreadcrumbList-Angaben dienen der Benutzerführung und sollten deshalb im Regelfall stets über die Template einer Webseite gerendert werden. Das bedeutet:

Auf jeder Seite einer bestimmten Layout-Template sollte die BreadcrumbList immer an der gleiche Stelle zu finden sein.

Gute Webseiten nutzen verschiedene Templates, dh. die Layouts variieren immer mal. Auch in diesen Fällen sollte aber danach gestrebt werden, dass zur Navigation zählende Komponenten konsequent plaziert werden, und das auch in einer gewohnten Reihefolge, Anordnung und Darstellung.

Optionaler Umbruch

UIO 1.5.2.27


Deutsche Wortungetüme

Es gibt im deutschen Sprachgebrauch Betriffe welche sehr, sehr lang sein können. Wenn diese in Texten verwendet werden ist es recht gut, dass man mehrere optionale Zeilenbrüche für den Begriff ermöglicht, damit dieser in einem Fließtext umgebrochen werden kann.

Ein Begriff wie Steuerberatungskanzlei, Anwaltsfachgehilfe oder auch die oft zitierte Donaudampfschifffahrtkapitän sind typische deutsche Wortungetüme.

Wir haben in Anlehnung an HTML Elemente wie <br/> für einen Zeilenumbruch (break) und HTML Entitäten wie &shy; für UIO entschieden, die zugehörigen Umbrüche mit dem Begriff 'Break' zu beginnen und diese <ce:BreakLine/> und <ce:BreakShy/> zu nennen.

Ohne <ce:BreakShy/>

Ein Rechtsanwalt und die Rechtsanwaltsgehilfin arbeiten zusammen in einer Rechtsanwaltskanzlei. Ein Rechtsanwalt und die Rechtsanwaltsgehilfin arbeiten zusammen in einer Rechtsanwaltskanzlei. Ein Rechtsanwalt und die Rechtsanwaltsgehilfin arbeiten zusammen in einer Rechtsanwaltskanzlei. Ein Rechtsanwalt und die Rechtsanwaltsgehilfin arbeiten zusammen in einer Rechtsanwaltskanzlei. Ein Rechtsanwalt und die Rechtsanwaltsgehilfin arbeiten zusammen in einer Rechtsanwaltskanzlei. Ein Rechtsanwalt und die Rechtsanwaltsgehilfin arbeiten zusammen in einer Rechtsanwaltskanzlei.

Mit <ce:BreakShy/>

Ein Rechts­anwalt und die Rechts­anwalts­gehilfin arbeiten zusammen in einer Rechts­anwalts­kanzlei. Ein Rechts­anwalt und die Rechts­anwalts­gehilfin arbeiten zusammen in einer Rechts­anwalts­kanzlei. Ein Rechts­anwalt und die Rechts­anwalts­gehilfin arbeiten zusammen in einer Rechts­anwalts­kanzlei. Ein Rechts­anwalt und die Rechts­anwalts­gehilfin arbeiten zusammen in einer Rechts­anwalts­kanzlei. Ein Rechts­anwalt und die Rechts­anwalts­gehilfin arbeiten zusammen in einer Rechts­anwalts­kanzlei. Ein Rechts­anwalt und die Rechts­anwalts­gehilfin arbeiten zusammen in einer Rechts­anwalts­kanzlei.

Sind Worte sehr, sehr lang führt dieses dazu, dass ein Wort immer eine volle Zeile einnimmt. In krassen Fällen sprengen Worte, die breiter sind als eine Zeile in einer Spalte des Layouts, das Layout, indem die Spalte verbreitet wird. Alternativ gehen lange Begriffe über den Rand hinaus. Und in der letzten Variante bricht der Browser automatisch bei dem Zeichen um, was nicht mehr in die Zeile passt.

Es gibt also bei langen Begriffen 3 verschiedene Varianten. Will man dem Browser nicht die Wahl überlassen, ist es möglich, mit <ce:BreakShy/> bei ein paar Begriffen für Ordnung zu sorgen.

Umbruch mit <ce:BreakShy/>

Donau­dampf­schiff­fahrts­kapitän, Donau­dampf­schiff­fahrts­kapitän, Donau­dampf­schiff­fahrts­kapitän, Donau­dampf­schiff­fahrts­kapitän, Donau­dampf­schiff­fahrts­kapitän, Donau­dampf­schiff­fahrts­kapitän, Donau­dampf­schiff­fahrts­kapitän, Donau­dampf­schiff­fahrts­kapitän, Donau­dampf­schiff­fahrts­kapitän, Donau­dampf­schiff­fahrts­kapitän, Donau­dampf­schiff­fahrts­kapitän, Donau­dampf­schiff­fahrts­kapitän, Donau­dampf­schiff­fahrts­kapitän, Donau­dampf­schiff­fahrts­kapitän, Donau­dampf­schiff­fahrts­kapitän, Donau­dampf­schiff­fahrts­kapitän, Donau­dampf­schiff­fahrts­kapitän, Donau­dampf­schiff­fahrts­kapitän, Donau­dampf­schiff­fahrts­kapitän,

Geht das auch automatisch?

Nein. Es ist zwar für uns sehr leicht möglich, für bestimmte Begriffe eine automatisches Ersetzen vorzunehmen. Das ist aber nicht gewollt. Inbesondere in Überschriften möchte man manchmal erreichen, dass ein Wort nicht ungebrochen wird. Da eine automatisierte Umbruchkontrolle für bestimmte Fachbegriffe den Unterschied nicht erkennen kann, müsste der Redakteur nun wiederum ständig Zusatzoptionen angeben, damit das System versteht, wo es umbrechen soll und wo nicht.

Im Regelfall ist es so, dass der Redakteur das, was er schreibt, anschließend sich in den verschiedenen Ansichten für Web, Smartphone und/oder auch Print anschaut. Man sieht sehr schnell, welche Begriffe im Layout problematisch werden können und ergänzt dann diese optionalen Trenner.

Drop-Down-Menüs (L2)

UIO 1.5.2.26


1- bis 4-spaltige Menüs

1- bis 4-spaltige Menü lassen sich im Seitenkopf anlegen und ähnlich einem Drop-Down-Menü öffnen.

Wir haben diesen Menüs die Bezeichnung 'MegaMenu' gegeben und realisieren diese im XML Code als <ce:Nav-L2-MegaMenu style="1"> Elemente. Die Angabe eines style-Attributs ist optional, aber wir empfehlen, dass man das konsequent angibt.

Beispiel



<ce:Nav-L2-MegaMenu style="1">
 <ce:toggle>
  <ce:label>
   <text lang="de">DEV</text>
  </ce:label>
 </ce:toggle>
 <ce:items>
  ..
 </ce:items>
</ce:Nav-L2-MegaMenu>

Diskussion

Die Namensgebung entspricht dem UIO Standard: Alle Navigationselemente beginnend mit 'Nav-'. Da das Menü im Kopfmenü selbst ein Navigations-Objekt des Levels 1 ist, sind die Items in einem Container des Levels 'L1' damit wie dieses 'MegaMenu' der Level 'L2'.

Die <ce:toggle> Eigenschaft beinhaltet ermöglicht über <cce:label> die Definition eines Textes auf welchen man klicken kann, um das Menü zu öffnen und damit einem Zustand in den anderen wechseln oder umschalten (toggle) zu lassen.

Links im Kopfmenü (L2)

UIO 1.5.2.25


Links im Kopfmenü erzeugen

Auch wenn wir diese Links im Kopfmenü gem. Designsystem eigentlich nicht haben möchten: Für kleine Webseiten mit nur 5 Einzelseiten oder auch bei einem SinglePager, der nur 5 Sektionen auf der Seite hat, ist es sinnvoll, wenn man statt aufklappbarer 1- oder mehrspaltiger Menüs ("Dropdown-Menü") auch direkt einen Link plazieren kann.

Mit Hilfe des <ce:Nav-L2-MenuItem style="1"> Elements ist das schon lange möglich.

Beispiel

Der nachfolgende Code demonstriert wie man den #DEV Link im Kopfmenü dieser Seite definiert. Die Plazierung des # wurde aus stilistischen und organisatorischen Gründen gewählt.



<ce:Nav-L2-MenuItem style="1">
 <ce:label>
  <text lang="de">#DEV</text>
 </ce:label>
 <ce:uri>
  <text lang="de">de/@snm/dev</text>
 </ce:uri>
</ce:Nav-L2-MenuItem>

<ce:Nav-L2-MegaMenu style="1">
 <ce:toggle>
  <ce:label>
   <text lang="de">DEV</text>
  </ce:label>
 </ce:toggle>
 <ce:items>
  ..

Diskussion

Zur Erinnerung: Alle Navigationselemente beginnend mit 'Nav-'. Da das Menü im Kopfmenü selbst ein Navigations-Objekt des Levels 1 ist, sind die Menüeinträge im Kopfmenü nun als MenuItem-Instanzen des Level '1' selbst dann Level '2', kurz 'L2'.

Die style="1" Angabe ist eine Vorbereitung darauf, das Designsystem um Style-Varianten für Menüeinträge anbieten zu können.

InlineLink + Icon

UIO 1.5.2.24


InlineLinks, Icons und Zeilenumbruch

Mit Hilfe von <ce:InlineLink>..</..> lassen sich in einem Text Links erstellen. In der Standardkonfiguration ist es inzwischen so, dass einem jedem Link nach der Label des Links ein Icon angehängt wird. Dieser Icon stellt in der Standardkonfiguration einen Pfeil dar.

Zeilenumbrüche zwischen Label und Icon werden ab 1.5.2.24 jetzt verhindert.

Beispiel: Liste mit Fachbegriffen

άλφα , βήτα , γάμ[μ]α , δέλτα , έψιλον , ζήτα , ήτα , άλφα , βήτα , γάμ[μ]α , δέλτα , έψιλον , ζήτα , ήτα , άλφα , βήτα , γάμ[μ]α , δέλτα , έψιλον , ζήτα , ήτα , άλφα , βήτα , γάμ[μ]α , δέλτα , έψιλον , ζήτα , ήτα ,..

Beispiel: Langer Begriff mit Icon

Hinweis: Dieser Begriff wurde OHNE einen optionalen Zeilenumbruch eingegeben.

Quellcode

SoftwareCodeSample: Absatz mit einem Link und vorangestelltem 'ABCDEFGHIKL', um auf diesem Wege einen Zeilenumbruch zu bewirken.



<ce:Paragraph-02>
 ABCDEFGHIKL
 <ce:InlineLink>
  <ce:config>
   <ce:uri>
    <text lang="de">
     <ce:fn-geturl-actualpage/>
      #anchorID-uio-1.5.2.24
    </text>
   </ce:uri>
   <ce:label>
    <text lang="de">
     Donaudampfschifffahrtskapitän
    </text>
   </ce:label>
  </ce:config>
 </ce:InlineLink>
</ce:Paragraph-02>

Diskussion

Die technische Realisierung in den Templates basiert auf style="white-space: nowrap;". Diese CSS-Einstellung bewirkt, dass das SPAN-Element, in welchem sich der Text für die Label des Links befindet, auch bei einem Leerzeichen oder anderen White-Space-Character nicht umgebrochen wird.

Dieser Ansatz hat allerdings einen Haken: Hat der Text einer Label eine größere Länge führt diese Einstellung dazu, das Layout von Textspalten sehr ungünstig aussehen kann.

GlobalCounter (Konzept)

UIO 1.5.2.23


Komponenten-IDs in Bausteinen

Mit Hilfe von <ce:ContentReference>..</..> Elementen ist es möglich, Bausteine für einzelne Text-Abschnitte oder aber vom Prinzip her auch komplette Layouts in einzelne Dokumente auszulagern. Problematisch wird dieses Feature in den Fällen, in welchen welchen ein Baustein (a) mehrfach in das selbe Dokument eingefügt wird und (b) dieser Bausteine zwingend eigene IDs benötigt. Dieser Fall tritt dann auf wenn Komponenten aus verschiedenen Bestandteilen bestehen und über JavaScript basiert auf IDs zusammenwirken.

Lösungsansatz

Der Lösungsansatz besteht darin, dass wir konsequent im Rendering-Prozess des Hauptdokuments sowie wiederum referenzieren Dokumenten IDs erzeugen indem wir diese fortlaufend durchnummerieren und die Verschachtelungsstruktur abbilden.

Technisch ist es keine Raketentechnik. Wir haben allerdings ein paar Hundert Templates. Bis das Feature umgesetzt ist sollte auf Komponenten, aus verschiedenen Teilkomponenten bestehen, in ce:ContentReference und damit Bausteinen verzichtet werden.

BreadcrumbList

UIO 1.5.2.22


BreadcrumbList jetzt auch als LinkedData

Die BreadcrumbList wird jetzt auch als LinkedData ausgeben. Es handelt sich um eine Rohfassung welche die verlinkten Seiten noch nicht semantisch als WebPages ausweist sondern nur die URLs angibt.

<ce:BreadcrumbList/>

Übrigens: Mit Hilfe des Elements <ce:BreadcrumbList/> kann man eine BreadcrumbList in einen Text einfügen.

Hinweis: In den URL werden zuweilen doppelte // Slashes erzeugt. Ursache war bislang der Fall, wo manche Server für den Host einen abschließenden Slash schicken; der muss entfernt werden. Ein solcher Slash ist aber auch zu entfernen, wenn der Context-Root-URI nur aus '/' besteht. Sollte der Context-Root-URI aber kein / sein und damit länger sein, kann er unverändert erhalten bleiben.

In der PHP Version ist sicherzustellen, dass der Context-Host am Ende keinen Slash hat. Beispiel für eine Lösung $context_host = preg_replace("@\/$@", "", $context_host);. Für den absoluten Kontext sollte in Templates <xsl:call-template name="fn-getlink-absolute-context"/> genutzt werden. HINWEIS: DAS WURDE IN 1.5.2.43 GEÄNDERT! Der $content_root_URI hat ab 1.5.2.43 immer einen Slash am Ende



<xsl:choose>
 <xsl:when test="$context_root_URI ='//'"></xsl:when><!-- Ab 1.5.2.43 immer '/' oder 'PHP/cms/' mit '/' -->
  <xsl:text>/</xsl:text>
 <xsl:otherwise>
 <xsl:value-of select="$context_root_URI"/>
 </xsl:otherwise>
</xsl:choose>
> @snm > dev > blog > uio-1-5-2-x

ColumnList (Konzept)

UIO 1.5.2.21


Listeneinträge aufteilen

Im Zuge der Überarbeitung der Sammlung von Fußnoten am Seitenfuß (FootNoteCollection) kam der Wunsch auf, dass wir es ermöglichen, dass die Fußnoten sich auf mehrere Spalten verteilen können.

Die nachfolgende Darstellung dient hierfür zur Abstimmung als Diskussionsgrundlage.

  • Element 1 - Viel Text.
  • Element 2
  • Element 3
  • Element 4
  • Element 5
  • Element 6
  • Element 7
  • Element 8
  • Element 9
  • Element 10
  • Element 11
  • Element 12
  • Element 13
  • Element 14
  • Element 15
  • Element 16

Prinzip

Vom Prinzip her wird die Gesamthöhe aller Einträge ermittelt und diese anschließend durch die Spaltenanzahl geteilt. Auf dieser Grundlage wird die Anzahl der Elemente je Spalte ermittelt.



<ce:ColumnListLayout>
 <ce:config>
  <!-- Konfigurationseinstellungen -->
 </ce:config>
 <ce:contents>
  <!--
   Hier <ce:ItemList> mit <ce:ListItem> Elementen
   einfügen oder über ref=".." referenzieren.
  -->
  <xsl:apply-templates select="//ItemList/ListItem"/>
 </ce:contents>
</ce:ColumnListLayout>

Die Syntax einer ce:ItemList entspricht der von ce:OrderedList und ce:UnorderedList.



<ce:ColumnListLayout>
 <ce:config>
  <!-- Konfigurationseinstellungen -->
 </ce:config>
 <ce:contents>
  <!--
   Hier <ce:ItemList> mit <ce:ListItem> Elementen
   einfügen oder über ref=".." referenzieren.
  -->
  <xsl:apply-templates select="//ItemList/ListItem"/>
 </ce:contents>
</ce:ColumnListLayout>

Mehrsprachigkeit mit 斯新媒体 (Alpha)

UIO 1.5.2.20


Wozu Mehrsprachigkeit mit 斯新媒体?

Wir haben dieses System als Redaktionsverfahren in den ersten Versionen bereits in 2001 geschaffen, um ein grundlegendes Problem zu lösen: Die Redaktion von Inhalten mit Texte, Bildern und aber auch Diagrammen in verschiedenen Fremdsprachen.

In erster Linie ging es uns darum, Inhalte im Copy-Paste-Ansatz in Emails zu einem Übersetzer kopieren zu können. Inzwischen sind wir aber weitaus weiter. Mit Hilfe der semantischen Auszeichnung von <text lang="cn">斯新媒体</text> ist es uns möglich, nicht nur einen Text mit chinesischen Zeichen auszugeben sondern darüber hinaus dem Parser mitzuteilen, welche Sprache ein bestimmter Text-Abschnitt oder eine Überschrift nun eigentlich hat.

Aktueller Ansatz

Wenn Sie eine Seite mit chinesischen Inhalten schreiben wollen, empfehlen wir Ihnen folgenden Ansatz:

Mit de/@snm/dev/blog schreiben Sie zuerst die Inhalte der Hauptsprache, bei uns ist es Deutsch. Anschließend erstellen Sie eine Kopie des WebPage-Dokuments, übersetzen dieses und definieren im Routing eine Adresse cn/@snm/dev/blog. Das erste URI-Segment nach der Domain ist immer die gewählte Sprache nach ISO Norm.

Praktisches Beispiel

Die Inhalte wurden übersetzt.

Wir haben dieses System als Redaktionsverfahren in den ersten Versionen bereits in 2001 geschaffen, um ein grundlegendes Problem zu lösen: Die Redaktion von Inhalten mit Texte, Bildern und aber auch Diagrammen in verschiedenen Fremdsprachen.

Why we support multilingualism

We created this system as an editing process in the first versions back in 2001 in order to solve a fundamental problem: The editing of content with texts, images and also diagrams in various foreign languages.

什么是多语制?

早在 2001 年,为了解决一个根本性的问题,我们就创建了这个系统的第一个版本作为编辑流程: 用各种外语编辑包含文字、图片和图表的内容。

Quellcode

Die chinesischen Zeichen wurden im Unicode eingegeben. Sie können also die Zeichen entweder irgendwo kopieren oder über die Pinyin Notation in Windows eingeben.



<ce:Paragraph-02>
 早在 2001 年,为了解决一个根本性的问题,我们就创建了这个系统
 的第一个版本作为编辑流程: 用各种外语编辑包含文字、图片和图表的内容。
</ce:Paragraph-02>

Bekannte Probleme in 1.5.2.20

URI mit chinesischen Zeichen werden vom System ignoriert. Ein URI wie de/@snm/dev/blog/斯新媒体 kann das System also in Version 1.5.2.20 nicht verarbeiten.

InlineLink auch ohne Icon

UIO 1.5.2.19


Deaktivierung des Icons

Im Regelfall ist es so, dass ein <ce:InlineLink> Element, welches redaktionell in einem Absatz plaziert wird, in der Darstellung den Link dann mit einem Icon wie beispielsweise einem Pfeil darstellt. Nun gibt es allerdings verschiedene Typen von Links, und auch die Bedeutung eines Links in Bezug auf den aktuellen Absatz ist auch mal höher oder auch mal absolut beiläufig.

Falls ein Link aber keine große Bedeutung hat so haben Sie jetzt die Option, den Icon mit <ce:showIcon>false</ce:showIcon> deaktivieren zu können.

Hinweis

HINWEIS: Wenn der Parameter <ce:showIcon></ce:showIcon> keinen Wert hat oder aber der Eintrag komplett fehlt, wird ein Wert <ce:showIcon>true</ce:showIcon> als Standardwert angenommen.

Zusatzinfo zu Icons

Die Gestaltung und damit auch die Wahl eines Icons folgt automatisch basierend auf dem Typ des Links, dh. Links innerhalb einer Seite werden zukünftig eine andere Darstellung haben als Links, welche auf eine andere Seite oder sogar auf eine externe Seite verweisen.

HINWEIS: Um den Typ eines Links anpassen zu können, damit das System für den zugehörigen Typ des Links den passenden Icons gem. einer zentralen Konfiguration auswählt, wird im Zuge der weiteren Entwicklung ein zusätzlicher Parameter wie möglicherweise <ce:chosenLinkType>false</ce:chosenLinkType> geschaffen werden.

Typische Link-Varianten sind "SEE_ALSO", "NEXT_PAGE", "PREV_PAGE" und andere.

HINWEIS: Eine eigenständige Wahl eines Icons ist derzeit noch nicht möglich und ist auch kein Primärziel.


Beispiel InlineLink mit Icon



<ce:Paragraph-02>
 <ce:InlineLink>
  <ce:config>
   <ce:showIcon>true</ce:showIcon>
   <ce:label>
    <text lang="de">Content Management als IT-Support</text>
   </ce:label>
   <ce:uri>
    <text lang="de">de/@snm/support/content-management</text>
   </ce:uri>
  </ce:config>
 </ce:InlineLink>
</ce:Paragraph-02>

Beispiel InlineLink mit Icon



<ce:Paragraph-02>
 <ce:InlineLink>
  <ce:config>
   <ce:showIcon>false</ce:showIcon>
   <ce:label>
    <text lang="de">Content Management als IT-Support</text>
   </ce:label>
   <ce:uri>
    <text lang="de">de/@snm/dev</text>
   </ce:uri>
  </ce:config>
 </ce:InlineLink>
</ce:Paragraph-02>

TIPP: Für sehr oft benötigte Links und auch andere Elemente haben Sie in UIO die Möglichkeit, ein Content-Element zu 'referenzieren': <ce:ContentReference uri=".."/>

SuperHeader

UIO 1.5.2.18


SuperHeader oberhalb des Headers

Im Zuge der Diskussion darüber, wie man einen Seitenkopf einer WebSite gestaltet und diesen möglicherweise aber auch redaktionell für einen BranchNode als eigene WebSite im Cluster der WebSites anpassen kann, haben wir uns entschlossen, die bislang fixe Gestaltung und das Layouts aufzubrechen, um den bisherigen Header in den Standard-Header des jeweiligen Themes ("Webdesign") einerseits mit der Option der redaktionellen Plazierung eines 'SuperHeader' Elements zentral für alle Seiten des aktuellen WebSite-Dokuments erstellen und pflegen zu können.

Marke-Submarke-Beziehung

Eine typische Problemstellung besteht darin, dass es Webseiten gibt in welchen Leistungen oder Produkte oder Veranstaltungen beschrieben werden welche jeweils eigene Logos haben. Der eigentliche Header der Webseite neben dem Menü im Seitenkopf zeigt also das Logo der Leistung, des Produkts oder der Veranstaltung.

Um einem Besucher zu verdeutlichen, dass nun diese Webseite aber eigentlich Teil eines größeren Informationsangebots ist, ist es mit Hilfe des SuperHeader Elements nun möglich, über den eigentlichen Header der Webseite noch das eigentliche Logo und/oder den Link für die übergeordnete Seite, das Unternehmen oder in einer Marke-Submarke-Beziehung die Dachmarke zu plazieren.

Für wichtige Meldungen und Links

Eine weitere Variante der Nutzung des SuperHeader kann darin bestehen, sehr, sehr wichtige Meldungen oder temporäre Informationen oberhalb des Headers im SuperHeader zu plazieren.

XML Struktur im Beispiel

Das nachfolgende Beispiel zeigt, wie Sie einen <ce:SuperHeader> in XML als Content-Element für eine <ce:WebSite> Dokument zentral für alle zugehörigen <ce:WebPage> Dokumente formulieren können.



<ce:SuperHeader>
 <ce:contents>
  <CERaw>...</CERaw>
  <CEContainer layout-variant="fullwidth" vertical-variant="n00-s00">
   <CERow>
    <CECol>
     <ce:Paragraph-01>Hinweis: Wir bauen redaktionell um.</ce:Paragraph-01>
    </CECol>
   </CERow>
  </CEContainer>
  <CERaw>...</CERaw>
 </ce:contents>
</ce:SuperHeader>

HINWEIS: Das <ce:SuperHeader> befindet sich in einem Early-Alpha-Stadium: Es funktioniert und ermöglicht Ausgaben. Es wird sich aber noch ändern.


Das ce:Map Element (Konzept)

UIO 1.5.2.17


Konzept für Karten-Modell

Auf den ersten Blick macht es wenig Sinn, sich darüber Gedanken zu machen, wie man Landkarten für Webseiten realisiert. Im Regelfall ist es cleverer und üblich, dass man schlichtweg auf übliches Online-Karten-Material über die APIs von Google, Here, OSM und dergleichen zugreift. Auch deren Gestaltung ist mit zusätzlichen Tricks über deren APIs möglich.

Uns ging es in der Konzeption aber weniger darum, wie wir diese Karten am Ende visualisieren, sondern darum, wie der Redakteur diese Karten redaktionell in einem WebPage Dokument plazieren und konfigurieren kann.

Es ging uns darüber hinaus auch darum, wie wir Kartenmaterial aus offenen Quellen beziehen und daraus vereinfachte <ce:Map> Dokumente als Grundlage für Grafiken oder Berechnungen erstellen können.

XML Struktur im Beispiel

Das nachfolgende Beispiel zeigt, wie man abstrakt schematisch einen Datensatz für die Erfassung einer Stadt als <ce:City> Knoten erfassen kann.



<ce:City>
  <ce:properties from="Place">
    <ce:geo>
      <ce:GeoCoordinates>
        <ce:properties from="GeoCoordinates">
          <ce:latitude>50.0826</ce:latitude>
          <ce:longitude>8.2400</ce:longitude>
        </ce:properties>
      </ce:GeoCoordinates>
    </ce:geo>
  </ce:properties>
  <ce:properties from="Thing">
    <ce:name>Wiesbaden</ce:name>
    <ce:population>278342</ce:population>
  </ce:properties>
</ce:City>


<ce:Map>
 <ce:contents>
  <ce:MapLayer>
   <ce:contents>
    <ce:City>..</ce:City>
    <ce:City>..</ce:City>
    <ce:City>..</ce:City>
   </ce:content>
  </ce:MapLayer>
 </ce:contents>
</ce:Map>

Vereinfachtes Beispiel

Die nachfolgende Grafik zeigt den Prototyp einer einer der visuellen Darstellung die mit einer Rendering-Template für <ce:Map> und <ce:City> Elemente programmiert wurde.

50.1109 8.6821 Frankfurt am Main 753056 50.0826 8.2400 Wiesbaden 278342 49.9929 8.2473 Mainz 217118 49.8728 8.6512 Darmstadt 159878

MapDataTable

Falls man sich die Daten zu Debugging-Zwecken oder aus Gründen der Transparenz auch tabellarisch ausgeben möchte, haben wir zu Testzwecken vereinfacht ein <ce:MapDataTable> Element geschaffen.

Name ascdescSort Desc Latitude ascdesc Longitude ascdesc Inhabitants ascdesc
Frankfurt am Main 50.1109 8.6821 753056
Wiesbaden 50.0826 8.2400 278342
Mainz 49.9929 8.2473 217118
Darmstadt 49.8728 8.6512 159878

InlineLink mit XML-Variablen

UIO 1.5.2.16


PageAnchor und InlineLinks verwenden

Eine typische Problematik: Sie füllen als Redakteur ein WebPage-Dokument mit einer Vielzahl von Inhalten mit diversen Sections und stehen hierbei später oder doch schon viel früher vor dem Problem, im Text Links zu anderen Positionen auf der selben Seite im Browser zu verlinken.

XML Struktur im Beispiel

Das nachfolgende Beispiel zeigt, wie Sie einen InlineLink in XML als Content-Element formulieren.



<ce:InlineLink>
 <ce:config>
  <ce:uri>
   <text lang="de">
    <ce:fn-geturl-actualpage/>#anchorID-Musterstadt</text>
  </ce:uri>
  <ce:label>
   <text lang="de">Musterstadt</text>
  </ce:label>
 </ce:config>
</ce:InlineLink>

TIPP: Kopieren Sie sich einfach ein Code-Beispiel als Muster und ändern Sie dann darin nur die Werte wie '#anchorID-Musterstadt' und 'Musterstadt'. Fertig.


PageAnchor als Sprungmarke

Damit Sie eine Position anspringen können, benötigen Sie eine Sprungmarke. Diese können Sie mit einem <ce:PageAnchor> Element definieren.

InlineLink Elemente dienen dem Link

Das <ce:InlineLink> verwenden Sie, um den Link an eine andere Adresse angeben zukönnen.

ce:fn-geturl-actualpage

Links müssen immer mit vollständigem URL inklusive Protokoll, Domain und Rootlink angegeben werden. Damit Sie nicht immer ständig https://example.com/was/auch/immer schreiben müssen, können Sie den link auf die aktuelle Seite, die im Browser gerade adressiert wurde, mit <ce:fn-geturl-actualpage/> abfragen.

ce:fn-geturl-actualpage



<comment>(Beginn eines Eintrags)</comment>
<ce:PageAnchor addToPageAnchorLinks="0" anchorID="Aachen" label="Design DES">
  Aachen
</ce:PageAnchor>
<ce:FixedHeading-01>Aachen</ce:FixedHeading-01>
<ce:Paragraph-01>
  Aachen ist eine kreisfreie Großstadt im nordrhein-westfälischen Regierungsbezirk Köln.
  Die ehemalige Reichsstadt ist Mitglied des Landschaftsverbandes Rheinland und nach
  dem Aachen-Gesetz mit Wirkung vom 21. Oktober 2009 Verwaltungssitz der Städteregion Aachen.
  1890 überschritt Aachen erstmals die Einwohnerzahl von 100.000 und ist seitdem die westlichste
  deutsche Großstadt. Aachen grenzt an die Niederlande und Belgien.
  <comment>(Beginn der Quelle)</comment>
  <ce:FootNote>
    <ce:contents>
      <text lang="de">https://de.wikipedia.org/wiki/Aachen, abgerufen am 15.07.2024</text>
    </ce:contents>
  </ce:FootNote>
  <comment>(Ende der Quelle)</comment>
</ce:Paragraph-01>
<ce:Paragraph-01>
  Die nächstgelegenen 5 Städte von
  <ce:InlineLink>
    <ce:config>
      <ce:uri>
        <text lang="de">
          <ce:fn-geturl-actualpage/>#anchorID-Aachen</text>
      </ce:uri>
      <ce:label>
        <comment>(aktuelle Stadt)</comment>
        <text lang="de">Aachen</text>
      </ce:label>
    </ce:config>
  </ce:InlineLink>
  sind
  <ce:InlineLink>
    <ce:config>
      <ce:uri>
        <text lang="de">
          <ce:fn-geturl-actualpage/>#anchorID-Musterstadt</text>
      </ce:uri>
      <ce:label>
        <text lang="de">Musterstadt</text>
      </ce:label>
    </ce:config>
  </ce:InlineLink>,
  ...
</ce:Paragraph-01>
<comment>(Ende eines Eintrags)</comment>

FootNote und FootNoteCollectionModule

UIO 1.5.2.15


Die Fußnoten kommen.

Der eine oder andere Redakteur [2] kennt das Problem: Man schreibt einen Text mit einer Erklärung zu irgendeinem Thema und zitiert hierbei eine Reihe von Quellen. Wie man Links auf Drittseiten erzeugt ist einfach. Sie könnten für Links auf Drittseiten <ce:InlineLink> Elemente im Text nutzen, doch wenn Ihre Nutzer die Webseite mit dem Smartphone aufrufen haben Sie ein Problem: Ein dicker Finger eines 2.10m großen fleischfressenden Mannes deckt bei einem "Touch" (statt Klick) schnell 48x48px ab; Ihre Zeile hat aber nur eine Höhe von 22 bis 24px. Sie sollten bei wichtigen Links als besser <ce:ViewActionButton> oder <ce:OtherActionButton> verwenden. Ganz so einfach ist es also mit Links in der Redaktion nun auch wieder nicht. Klicken Sie Links auf die Zahl und/oder den Pfeil, um zum Text zurückzukehren. Links innerhalb der aktuellen Seite mit Link auf Sprungmarken zu erzeugen ist schon schwieriger. Wie aber schafft man es, diese Links zusätzlich noch zu numerieren und dann die Texte der Fußnoten auch wirklich am Fuß einer Seite zu plazieren?


Fußnote

Für die Definition einer Fußnote haben wir ein neues <ce:FootNote> Element geschaffen. An der Stelle, wo Sie dieses Element plazieren, erscheint hochgestellt dann die laufende Nummer mit einem Link in die Fußzeile. Verlinkt wird jede einzelne Fußnote zum passenden Fußnotentext in der Sammlung der Fußnoten, üblicherweise am Fuß der Seite.

Die Nummerierung der Fußnoten erfolgt automatisch. Wir haben das Verfahren so programmiert, dass alle Fußnoten der aktuellen WebPage, welche der Nutzer im Browser betrachtet, bei 1 beginnt und dann stetig um jeweils +1 hochgezählt wird.

Klickt man auf diese Zahl springt man etwa 120 Pixel oberhalb der Fußnote in der Sammlung. Wir haben diesen Offset geschaffen, damit der Leser den Text am oberen Rand des Browserfensters auch dann erkennen kann, wenn dort ein Menü angeordnet ist.

Sammlung der Fußnoten

Das mit Version 1.5.2.15 geschaffene <ce:FootNoteCollectionModule> Element dient als Container für alle Fußnoten auf der aktuellen Seite bzw. im aktuellen WebPage Dokument.

Alle Fußnoten-Einträge werden auch hier ordnungsgemäß von 1 bis n durchnummiert.

Im Gegensatz zu typischen Links mit Sprungmarken besteht die Besonderheit bei <ce:FootNote> Elementen darin, dass man durch Klicken auf die laufende Nummer in der <ce:FootNoteCollectionModule> Komponente am Fuß einer Seite wieder an die Position zurückspringen kann, wo die Fußnote gesetzt wurde.


Deklaration einer Fußnote

Für die Deklaration einer Fußnote definieren Sie ein <ce:FootNote> Element und geben die Content-Elemente für den eigentlichen Inhalt innerhalb der <ce:contents> Eigenschaft an.



<ce:FootNote>
 <ce:contents>
  <text lang="de">https://de.wikipedia.org/wiki/Fu%C3%9Fnote</text>
 </ce:contents>
</ce:FootNote>

                        

An dieser Stelle auch gleich ein passendes Beispiel: Mehr Informationen zum Begriff und der Entstehung von Fußnoten erfahren Sie bei Wikipedia [3] .

Konfiguration

Mögliche zusätzliche Einstellungen für Fußnoten könnten Sie über die Redaktion von Properties innerhalb des <ce:config> Konfigurationselements angeben.

In Version 1.5.2.15 gibt es derzeit keine Konfigurationsoptionen.

Erlaubte Inhalte

Eine Fußnote rendert vom Prinzip her alle Inhalte wie man diese innerhalb von Absatzelementen wie <ce:Paragraph> schreiben würde.

Die Kapselung von Text in <text lang="de"> dient einer semantischen Typisierung und ist dahingehend von Bedeutung, dass es auch alternative Inline-Content-Elements gibt.

Animationen als Stilelement (Preview)

UIO 1.5.2.14


Was sind Animationen?

Bei Animationen handelt es sich zuerst einmal abstrakt formuliert eine visuelle Darstellung welche sich mit der Zeit verändert.

Einmaliger Durchlauf: Die Animation beginnt und wird 1x durchgeführt. Mehrmaliger Durchlauf: Die Animation beginnt und wird nx durch geführt. Unendlicher Durchlauf: Die Animation beginnt und endet gar nicht.

Welche Typen von Animationen gibt es?

Und hier wird es nun im Web komplexer: Wir kennen HTML/CSS-Animationen, HTML/SVG/CSS Animationen, HTML/Canvas/JS Animationen, HTML/Canvas/WebGL/JS Animationen.

Jede Animation hat Ihre Stärken und Ihre Schwächen. Und so nett es ist, wenn Sie für Ihr CMS ein Plugin finden: Sie müssen immer damit rechnen, dass Sie die Animation anpassen möchten oder auf andere Elemente übertragen möchten. Wer macht's?

Von einfach bis komplex

Die Schwierigkeit bei Animationen besteht nicht darin, diese zu realisieren, sondern darin dass diese Animationen auf einer zumeist nur kleinen Fläche sehr viele grafische Objekte als Bestandteile haben welche sich mit der Zeit in Größe, Ausrichtung, Position, Durchlässigkeit, Farbe, Form und mehr verändern können, und zwar ein jedes dieser Objekte für sich betrachtet.


CSS3

Die nachfolgenden Animationen wurden mit CSS Techniken realisiert. Der Vorteil ist hierbei, dass man kein JavaScript für die Effekte verwenden muss. Der Nachteil besteht darin, dass ohne JavaScript nicht möglich ist, die Animation zu beenden. Sie läuft also auch dann weiter, wenn diese nicht im Blickfeld des Betrachters ist.

Damit die Animationen überhaupt funktionieren, muss der Browser eine neuere Version haben. Ohne diese Version werden die erforderlichen CSS Befehle nicht unterstützt.

Abbildung 1 [4]

Abbildung 2

Für Redakteure

Im Zuge der Neuprogrammierung der Templates wurden alle bisherigen Animationseffekte entfernt. Eine Ausnahme hiervon ist die <ce:Carousel> Komponente mit der Slideshow im im Seitenkopf.

Für Entwickler

Vom Prinzip her ist es möglich, Animationen für jedes Objekt, welches der Darstellung zu dienen. Maßgebend ist aber, dass es möglich ist, diese Animationen vollständig über deaktivieren zu können.

Für SEO

Sofern Animation mit CSS realisiert werden oder aber im Falle von JavaScript erst nach dem Laden und Rendern aller Inhalte im statischen Zustand, ist der Einfluss von Animationen auf SEO vernachlässigbar.

Für Datenschutz

So lange Animationen nicht die Nutzung von Links ins Impressum oder die Lesbarkeit rechtlich relevanter Inhalte einschränken, stellen Animationen recht Problem dar.

Ein Datenschutzproblem entsteht erst dann, Teile der Files von Animationen von Drittservern geladen werden.

Canonical Links

UIO 1.5.2.13


Was ist eine URL?

https://example.com/de/@snm/create/services ist eine typische URL mit welcher man eine Seite basierend auf dem URI für die Domain adressieren kann.

URL steht für "Uniform Ressource Locator" oder "Uniform Ressource Location".

Was ist eine Canonical Link Angabe?

<link rel="canonical" href="https://example.com/de/@snm/create/services"/> ist eine Zeile im HTML Code mit welcher einer Suchmaschine angegeben werden kann, wie der Canonical Link für diese Seite lautet.

Was ist ein WebPage-Dokument?

Ein WebPage-Dokument ist vereinfacht formuliert eine Datei welche alle Inhalte beinhaltet oder auch referenziert, welche bei einer Adressierung der Seite oder eines Elements dieser Seite geladen wird.

Mehrere URLs für ein Dokument

Die meisten Anwender haben für eine Datei immer genau einen Dateinamen. Das gilt oftmals auch für Seiten einer Webseite: Die meisten CMS lassen nur die Angabe einer Adresse für die aktuelle Seite einer WebSite zu.

Nun kommt es aber vor, dass man für ein und die selbe WebPage zwei oder mehr verschiedene URIs oder URLs haben kann: Es kann sein, dass eine Seite der Webseite über zwei oder drei Domains adressiert werden kann.

Es kann auch passieren, dass eine Webseite vorher eine Adresse hatte die aber später verändert wurde. Alte Links aber haben noch die alte Adresse. Man benötigt also nun möglicherweise 2 URLs welche auf das gleiche Dokument verweisen.

Alternative-URL-Verfahren

Unser System bietet nun aber zusätzlich 'Alternative URLs'. Zum Zeitpunkt der Redaktion kommt es immer wieder vor, dass man die Menüstruktur bereits definiert aber noch nicht entschieden hat, ob mehrere Inhalte auf der gleichen Seite oder auf verschiedenen Seiten stehen.

Das Alternative-URL-Verfahren bietet die Option, die Inhalte mit einer zweiten URL für eine mögliche eigene Seite zu definieren, auch wenn diese noch gar nicht besteht.

Für Redakteure


URLs planen

Der erste Schritt, den man als Redakteur unternehmen sollte: Überlegen Sie sich, über welche URLs Sie eine bestimmte WebPage Ihrer Dokumentstruktur überhaupt adressieren möchten.

Die Ansicht und Version, welche Nutzer "live" im Internet sehen und nutzen können, bezeichnet man oftmals also 'Production'- oder 'Live'-Version.

Bei Design-Änderungen bezeichnet man die kommende Design-Version oftmals als 'Facelift'-Version.

Bei redaktionellen Veränderung bezeichnet man die in Bearbeitung befindliche Version als 'Draft' Version.

Eine Version, die für einen Kunden als 'Voransicht' erstellt wird, bezeichnet man als 'Preview'.

Eine Version welche nur Beispiel-Text zeigt bezeichnet man auch als 'Demo' oder im Entwurf als 'WireFrame'.

Sie haben die Möglichkeit, alle diese Varianten nach Belieben zu formulieren. Alles, was Sie tun müssen, ist sich zuerst einmal Gedanken über die URLs und URIs zu machen, mit welchen Sie eine bestimmte Seite als WebPage-Dokument adressieren möchten.

<link rel="canonical" href="https://example.com/"/>
<link rel="canonical" href="https://example.com/live"/>
<link rel="canonical" href="https://example.com/facelift"/>
<link rel="canonical" href="https://example.com/preview-23"/>
<link rel="canonical" href="https://example.com/preview-24"/>
<link rel="canonical" href="https://example.com/demo"/>

WebPages und URLs

Im zweiten Schritt müssen Sie nun überlegen, welche URLs nun welche Version eines WebPage-Dokuments adressiert.

Beispiel: Üblicherweise haben Sie DREI Versionen.

URLs erfassen

Damit der Server eine URL erfassen kann, wird für diese eine <route-keys> Element in der RoutingDefinition angelegt.

Für jeden Level der Informationsstruktur (hier ist es ein SiteSection-Node) kann man also den CanonicalURISegmentKey sowie den AlternativeURISegmentKey definieren.

Das nachfolgende Beispiel zeigt, wie für den URI de/@snm/create/services zuerst der CanonicalURISegmentKey und mit der nächsten route-keys-Definition ein AlternativeURISegmentKey angelegt wird. Mit diesem Ansatz lässt sich also die selbe Seite mit sowohl de/@snm/create/services als auch de/@snm/create/leistungen adressieren.



<comment>
  ===== de/@snm/create/services SectionNode
</comment>
<route-keys>
  <SiteSectionFILESegmentKey>services</SiteSectionFILESegmentKey>
  <SiteSectionFILESegmentIndex>100</SiteSectionFILESegmentIndex>
  <SiteSectionCanonicalURISegmentKey>services</SiteSectionCanonicalURISegmentKey>
  <SiteSectionAlternativeURISegmentKey>services</SiteSectionAlternativeURISegmentKey>
  <registerSectionNode/>
</route-keys>
<comment>
  ===== de/@snm/create/services SectionNode
</comment>
<route-keys>
  <SiteSectionFILESegmentKey>services</SiteSectionFILESegmentKey>
  <SiteSectionFILESegmentIndex>100</SiteSectionFILESegmentIndex>
  <SiteSectionCanonicalURISegmentKey>services</SiteSectionCanonicalURISegmentKey>
  <SiteSectionAlternativeURISegmentKey>leistungen</SiteSectionAlternativeURISegmentKey>
  <registerSectionNode/>
</route-keys>
                          
                        

Hinweis: Ein <SiteSectionAlternativeURISegmentKey> Element definiert nur das URI-Segment für die Section im URI. Um also einen URI wie de/@snm/create/services erstellen zu können ist es erforderlich, dass im Vorfeld bereits die route-keys-Deklaration für den SiteContext de, SiteRoot @snmund SiteBranch create erstellt wurde!

Ausgabe im HTML Code

Mit <link rel="canonical" ... /> wird der Canonical Link im HTML Code im <head>..</head> ausgegeben.



<link
  rel="canonical"
  href="https://example.com/de/@snm/create/services"
>
                          
                          

Für Template-Entwickler


Korrekten Link ermitteln

Das <link rel="canonical" href="https://example.com/de/@snm/create/services"/> Element im HTML Code erfordert einen vollständigen URL mit Protokoll, Domain und dem vollständigen URI mit allen URI-Segmenten.

Absoluter Kontext

Der absolute Kontext setzt sich aus dem Protokoll, dem Host und einem Basis-URI zusammen mit welchem quasi bei PHP basierten Seiten der index.php File im Wurzelpfad der Installation adressiert würde. Bei einer Realisierung mit NodeJS, Java oder C# gibt es seinen solchen Skript-File nicht.



<xsl:variable name="GLOBAL_absoluteContext">
    <xsl:value-of select="$context_protocol"/>
    <xsl:text>://</xsl:text>
    <xsl:value-of select="$context_host"/>
    <xsl:text></xsl:text>
    <xsl:value-of select="$context_root_URI"/>
  </xsl:variable>

                        

Sie können den Wert dieser Variable $GLOBAL_absoluteContext im XSL Code der Templates verwenden.

Canonical Link erzeugen

Der nachfolgende Template-Code zeigt exemplarisch, wie die zugehörigen URLs in XSL ermittelt werden. Dem XSL-Prozessor wird der kanonische Link für die aktuelle Seite mitgeteilt.

HINWEIS: Das klingt einfacher als es ist. Es besteht nämlich das Risiko, das aktuelle WebPage Dokument, welches adressiert wird, einen Fehler hat und/oder gar nicht vorhanden ist. In diesem Fall ist zwar der kanonische Link korrekt; es wird aber dennoch der falsche Inhalt angezeigt.

Für diese Fälle sind entsprechende HTTP Codes wie 404 und dergleichen zu liefern.



  <xsl:variable name="GLOBAL_canonical_link">
    <xsl:variable name="FROMCORE_canonical_link">
      <xsl:value-of
       select="//ce:from_php_canonical/@matched_route_canonical_link"/>
    </xsl:variable>
    <xsl:choose>
      <xsl:when test="$FROMCORE_canonical_link">
        <!-- since 20240713T1512 -->
        <xsl:value-of select="$GLOBAL_absoluteContext"/>
        <xsl:value-of select="$FROMCORE_canonical_link"/>
      </xsl:when>
      <xsl:otherwise>
        <xsl:text>no-canonical-link</xsl:text>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:variable>

                        

Sie können den Wert dieser Variable $GLOBAL_canonical_link im XSL Code der Templates verwenden, um damit das korrekte <link rel="canonical"> Element zu erzeugen.



<link rel="canonical">
 <xsl:attribute name="href">
  <!-- Beispiel: https://www.example.com/de/scom/dev -->
   <xsl:value-of select="$GLOBAL_canonical_link"/>
  </xsl:attribute>
</link>

                        

Übrigens: Ein XML-Kommentar in einer XSL-Template wird NICHT an den Client/Browser ausgegeben. Wenn Sie wollen, dass ein HTML-Kommentar ausgegeben wird müssen Sie das xsl:comment Element verwenden.

ViewActionButton

UIO 1.5.2.12

Für Template-Entwickler


ce:ViewActionButton

Die XML Struktur für in ce:HeaderCarousel Komponenten genutzten Buttons der Typen ce:ViewActionButton und ce:OtherActionButton wurden entsprechend auch anderer Elemente vereinheitlich und kapseln die Konfiguration von Eigenschaften in einem eigenen ce:config Element.

Die bisherige Variante wird bislang noch unterstützt ist aber depricated.

ce:OtherActionButton

Änderungen für die ce:OtherActionButton Komponente siehe ce:ViewActionButton.


Für Redakteure


ce:ViewActionButton

Für die Konfigurationen von Komponenten wurden auch für <ce:ViewActionButton> auch die zugehörigen label- und uri-Konfiguration in ce:config integriert. Der zugehörige ce-Namespaces wird hierbei auch für die Eigenschaften von ce-Komponenten verwendet.

Die Zuweisung von Textwerten erfolgt über <text> Elemente. Das lang-Attribut ist optional, dient aber dazu, den Text einer Sprache auszuzeichnen.

Zeilenumbrüche als Textnode innerhalb von <text> Elementen werden in HTML als Leerzeichen interpretiert und können bei der Definition von IDs und URIs zu einem Linkfehler führen als diese Werte nicht im Zuge der Verarbeitung noch automatisiert getrimmt werden.

Der Slash nach dem letzten URI-Segment und vor dem Hashtag # ist optional.

Die Form von <ce:ViewActionButton> Komponenten kann über das shape-Attribut verändert werden. Unterstützt werden derzeit rounded, square und circle. Im Regelfall ist rounded zu empfehlen. Es gibt aber keinen default-Wert. Bei fehlender Angabe entfällt die Formenvorgabe.

Das <ce:OtherActionButton> Element ist vergleichbar, dient aber derzeit dazu, den Link nicht so präsent darzustellen.



<ce:ViewActionButton shape="rounded" version="1.5.2.0">
 <ce:config>
  <ce:label>
   <text lang="de">mehr erfahren</text>
  </ce:label>
  <ce:uri>
   <text lang="de">
    <ce:fn-get-uri-relative-actualpage/>#contentBegin</text>
  </ce:uri>
 </ce:config>
</ce:ViewActionButton>

<ce:OtherActionButton shape="rounded">
 <ce:config>
  <ce:label>
   <text lang="de">fortsetzen</text>
  </ce:label>
  <ce:uri>
   <text lang="de">de/@snm/learn/course/javascript/js-a101-developer-1/#contentBegin</text>
  </ce:uri>
 </ce:config>
</ce:OtherActionButton>
                          
                        

Beispiel mit vollständigem URI

Beispiel mit Variable

ce:OtherActionButton

Der ce:OtherActionButton funktioniert ab 1.5.2.x von der Syntax genauso wie der ce:ViewActionButton.

ce:InlineLink

Das ce:InlineLink Element wurde dahingehend aktualisiert, dass es jetzt auch ab 1.5.2.x die Eigenschaften ce:uri und ce:label innerhalb eines ce:config Elements kapselt.



<ce:InlineLink>
 <ce:config>
  <ce:uri>
   <text lang="de">de/@snm/learn/course/javascript/js-a101-developer-1/#contentBegin</text>
  </ce:uri>
  <ce:label>
   <text lang="de">mehr erfahren</text>
  </ce:label>
 </ce:config>
 <ce:contents><!-- ungenutzt --></ce:contents>
</ce:InlineLink>
                          
                        
mehr erfahren

HINWEIS: Die ce:uri Eigenschaft ermöglicht in 1.5.2.x noch KEINE Unterstützung der ce:fn-* Elemente und damit auch keine relative Adressierung. Es muss für diese Links auch innerhalb einer Seite der vollständige relative URI bezogen auf den BaseURI angegeben werden.

Für Designer


ImageObject und Overlays

Im Zuge einer Standartisierung von Datenformaten sowie zugehöriger Rendering-Prozesse haben wir begonnen, Bildelemente nicht nur vom Layout zu trennen sondern den Bildverarbeitungsprozess in der Datenstruktur abzubilden, um wiederkehrende bislang manuelle Verarbeitungsprozess automatisieren zu können.

XML-Variablen für Links

UIO 1.5.2.11

<ce:fn-get*/> Elemente

Redakteure kennen das Problem: Man möchten im Text oder im Falle von Buttons einen Link angeben. Muss man aber nun einen absoluten Link mit Protokoll und Domain vollständig angeben oder nur einen Link zum Webroot-URI-Segmentpfad oder gibt es auch relative Links in Bezug auf die aktuelle URL, um beispielsweise nur ein '/unterseite' an die aktuelle Adresse anhängen zu können?

Die einfachste Variante, wie Sie an Text-Zeichenfolgen, sogenannte Strings kommen, welche einen Teil der Adresse beinhalten, sind <ce:fn-get*/> Elemente wie beispielsweise das <ce:fn-geturl-actualpage/>.

Neu: ce:fn-geturl-actualpage

Mit Hilfe des <ce:fn-geturl-actualpage/> Elements ist es möglich, einen String zu enthalten welcher die vollständige URL inklusive http(s) Protokoll und Domain zur aktuell aufgerufenen Seite angibt.

Die Besonderheit ab 1.5.2.11 besteht darin, dass wir das Element schrittweise für weitere Komponenten ermöglichen wo Links erforderlich sind.

Beispiel:
https://snewmedia.com/de/@snm/dev/blog/uio-1-5-2-x/

Neu: ce:fn-get-uri-relative-actualpage

Das <ce:fn-get-uri-relative-actualpage/> Element liefert für die aktuell aufgerufene Seite den relativen URI.

Beispiel:
de/@snm/dev/blog/uio-1-5-2-x

Erläuterung: Normalerweise führt eine Adressierung einer URL wie https://example.com oder https://example.com/ dazu, dass der URI / aufberufen wird. Ruft man eine Adresse wie https://example.com/a/b auf gibt es nun zwei technische Varianten:

In Variante 1 gibt es im Webspace für diese Domain nun einen Ordner relativ zum Wurzelordner der Startseite welcher z. B. htdocs/kunde-123/example.com/a/b lautet. In diesem Verzeichnis würde ein CMS oder ein Webserver nun bei PHP nach einem index.php File suchen.

Das UIO Verfahren ist aber unabhängig von der Programmiersprache. Es wertet schlichtweg den URI /a/b relativ zum Wurzelement aus.

Die Besonderheit kann nun darin bestehen, dass man auf dem selben Webserver für die selbe Domain das CMS nicht einmal installiert sondern 2x, und zwar einmal im Ordner /a und ein zweites Mal im Ordner /b. Will man nun also /a/b adressieren lautet der relative URI nicht mehr /a/b sondern nur noch /b weil das erste URI-Segment im URI-Segment-Pfad /a lautet.

Dieses führt dazu, dass mit /a/b und /b/b zwar eigentlich zweimal relativ die Adresse /b aufruft, doch im ersten Fall wird die erste CMS-Installation verwendet und im zweiten Fall die zweite.

Bilder mit Wasserzeichen

UIO 1.5.2.10

Das <ce:ImageBlock> Element

Mit Hilfe des <ce:ImageBlock> Elements können Sie redaktionell ein Block-Element welches als Container für ein Bild dienen soll. Vom Prinzip könnte man zwar <ce:ImageObject> Elemente auch ohne einen solchen Container plazieren, aber diese Container dienen dem Zweck Bildobjekte über den Bildinhalt des Bildes selbst einen Rahmen zu geben (oder eben auch keinen).

Das <ce:ImageObject> Element

Wenn Sie eine Bilddatei wie eine JPG- oder PNG-Datei darstellen und hierfür referenzieren wollen nutzen Sie ein <ce:ImageObject> Element.

View im L21 Format


Quellcode/Konfiguration



<ce:ImageBlock>
  <ce:config>
  </ce:config>
  <ce:contents>
    <ce:ImageObject>
      <ce:config>
        <ce:formatKey>
          <text lang="de">Q11</text>
        </ce:formatKey>
        <ce:source>
          <text lang="de">img/../bild_L21.jpg</text>
        </ce:source>
        <ce:alternativeText>
        </ce:alternativeText>
      </ce:config>
    </ce:ImageObject>
  </ce:contents>
</ce:ImageBlock>
                          
                        

View im Q11 Format

PageAnchor und PageAnchorLinks

UIO 1.5.2.9


Automatisches Inhaltsverzeichnis

Wer bisher sich ein Einhaltsverzeichnis für alle Überschriften und Absätze auf der aktuellen WebPage, die gerade im Browserfenster zu sehen ist, von Hand angelegt hat: Wir haben das PageAnchor-Element [5] und die PageAnchorLinks [6] aktualisiert. Damit entscheidet Ihr jetzt selbst, was im Menü erscheint und was nicht.


PageAnchor definieren

Um eine Sprungmarke innerhalb einer WebPage anzulegen, fügen Sie diese oberhalb eines Absatzelements ein.



<ce:FluidHeading-05>DEV Blog</ce:FluidHeading-05>

<ce:PageAnchor addToPageAnchorLinks="1" anchorID="sprungmarke" label="Design DES">
 Überschrift im Menü
</ce:PageAnchor>

<ce:FluidHeading-04>
 Überschrift im Text
</ce:FluidHeading-04>

<ce:Paragraph-02>
 Hier folgt im Regelfall der erste Absatz nach der Überschrift.
</ce:Paragraph-02>
                          
                        

PageAnchorLinks definieren

Im Regelfallordnen wir das <ce:PageAnchorLinks> Elements unterhalb des <ce:PageDescription> Blocks an.

Der <ce:PageDescription> Block dient als optionaler Container für einen einführenden Text zu Inhalten der aktuellen Seite und kann auch mit <ce:contents></ce:contents> einfach leer bleiben oder weggelassen werden.

Dort, wo Sie redaktionell das <ce:PageAnchorLinks> Element plazieren, werden in der Ansicht des aktuellen <ce:WebPage> Dokuments die Links auf die erfassten <ce:PageAnchor> erzeugt.



<ce:PageDescription>
 <ce:config></ce:config>
 <ce:contents>
  <text lang="de">
    Es war ein mal ein Redakteur der tags
    und auch nachts von einer PageDescription
    träumte.
  </text>
 </ce:contents>
</ce:PageDescription>
<ce:PageAnchorLinks></ce:PageAnchorLinks>
                          
                        

Modale Dialoge (Alpha-Version)

UIO 1.5.2.8


Button öffnet "Fenster"

Mit dem Begriff 'Modaler Dialog' können nicht nur Laien sondern auch viele Entwickler nichts anfangen. Bei einem 'Modalen Dialog' schiebt sich ein 'Panel' oder 'Fenster' im Browserfester über das, was Sie dort gerade betrachten. Sie erhalten eine textliche Information oder auch einen kompletten Artikel mit Bildern ähnlich wie bei Codehints in einer IDE. Um das Fenster mit dem Dialog wieder schließen zu können, müssen Sie je nach Dialog entweder bestätigen, abbrechen oder schlichtweg neben den Dialog außerhalb des Fensters klicken.


Beispiel


Codestruktur (Alpha-Version)

HINWEIS: Diese Code-Struktur ist im ALPHA-Stadium. Alle Elemente müssen für Version 1.2.x noch mit dem Namespace-Prefix 'ce:' wie von <CEModal> zu <ce:Modal> versehen werden.

Um einen modalen Dialog erstellen zu können, benötigen Sie im Kern drei Dinge: Sie müssen ein <CEModal> Element in einem WebPage-Dokument im Inhalt plazieren, um definieren zu können, welcher Button auf welches Fenster anzeigen soll. Bislang ist es so, dass Sie das Element dort anordnen, wo auch anschließend der Button angezeigt werden soll.

Button und Container (ALPHA)

Das <CEModalButton> Element ist eine Schaltfläche mit welcher Sie das modale Fenster als Besucher der Webseite öffnen können. Die zugehörige Definition des Fensters selbst findet sich im <CEModalContainer><content> Element, dh. in diesem Element könnten Sie dann wie gewohnt Inhalte beginnend mit <CEContainer layout-variant=""> layouten.



<CEModal>
 <CEModalButton>
  <label>Intellisense</label>
 </CEModalButton>
 <CEModalContainer>
  <content>
   <CEContainer layout-variant="">
    <CERow>
     <CECol>
      ...
                          
                        

ContentElementReference

UIO 1.5.2.7


Referenzierung von Content Elements

Immer dann, wenn Sie feststellen, dass Sie bestimmte Formulierungen oder Inhalte mehr MEHR-ALS-3-MAL verwenden, sollten Sie den 'Three-Strikes-Out'-Ansatz beherzigen und eine Variable anlegen.

Das Prinzip ist einfach: Anstatt in der Redaktion einen Text in einem Absatz oder aber auch das Absatzelement oder auch eine ganze Section mehrfach manuell zu erstellen, können Sie Content-Elemente mit all Ihren Unterelementen auch als Variable anlegen und über <ce:ContentReference> referenzieren.

Referenzieren bedeutet, dass Sie quasi eine Art 'Textbaustein' verlinken. Das System wird immer dann, wenn es eine solche Referenz findet, sich von dort die Inhalte beschaffen und hierbei eine Kopie zu dem Zeitpunkt erzeugen, wo die Inhalte benötigt werden.

Prinzip

Das Prinzip ist einfach: Sie legen ein <ce:ContentReference> Element an und stellen sicher, dass Sie für die Referenzierung über über das uri-Attribut das zugehörige XML Dokument angeben, in welchem Sie die zugehörige <ce:ContentInstance> als Element angelegt haben. Den Platzhalter {1} ersetzen Sie durch die Adressierung der Datei im jeweiligen RealmNode, und für {2} ist es zweckmäßig, wenn Sie sich für Ihre Content-Blöcke eine Bezeichnung für den Verwendungstyp ausdenken, damit Sie bei Ihren zig ContentInstance-Definitionen als Bausteine später noch durchblicken.



<ce:ContentReference
  uri="/{1}/_ContentInstances/cblock-{2}-@snm-studio.xml"
/>

                          
                        

ce:UnorderedList

UIO 1.5.2.6


Beispiel zu ce:UnorderedList


Beispieltext

Das nachfolgende Beispiel zeigt wie eine nummerierte Liste basierend auf einem <ce:OrderedList> Element aussehen könnte.

  1. Eins

  2. Zwei

XML Quellcode



                        <ce:OrderedList>
                          <ce:contents>
                            <ce:ListItem>
                              <ce:Paragraph-02>Eins</ce:Paragraph-02>
                            </ce:ListItem>
                            <ce:ListItem>
                              <ce:Paragraph-02>Zwei</ce:Paragraph-02>
                            </ce:ListItem>
                          </ce:contents>
                        </ce:OrderedList>

Anmerkungen

Wie für die UnorderedList.

ce:UnorderedList

UIO 1.5.2.5


Beispiel zu ce:UnorderedList


Beispieltext

Das nachfolgende Beispiel zeigt wie eine ungeordnete Liste basierend auf einem <ce:UnorderedList> Element in der Darstellung aussehen kann. Maßgebend ist weniger die Gestaltung selbst als vielmehr das Prinzip: Bei einer ungeordneten Gruppe von ListItem Elementen gibt es keine Nummerierung. Die Elemente haben in der Eingabe und auch in der Ausgabe die gleiche Reihenfolge, aber es ist jederzeit möglich, einen weiteren Eintrag zwischen zwei ListItem Elemente einzufügen.


  • Slots werden in WebComponents verwendet, um Inhalte von außerhalb des Shadow DOM in das Shadow DOM einzufügen. I

  • Um Inhalte in WebComponents von außerhalb einer WebComponent in deren Shadow DOM einfügen zu können, nutzt man Slots.

  • Das Shadow DOM für HTML5 WebComponents ist in sich gekapselt wie ein eigenständiges HTML Dokument. Um zwischem dem Dokument, in welchem eine Custom Component in HTML5 enthalten ist, und der neuen Komponente einen Datenaustausch zu ermöglichen, können Inhalte im Hauptdokument in Slots der Custom Component eingefügt werden.

  1. Eins

  2. Zwei

XML Quellcode



<ce:UnorderedList>
  <ce:contents>
    <ce:ListItem>
      <ce:Paragraph-02>
        Slots werden in WebComponents verwendet, um Inhalte von
        außerhalb des Shadow DOM in das Shadow DOM einzufügen. I
      </ce:Paragraph-02>
    </ce:ListItem>
    <ce:ListItem>
      <ce:Paragraph-02>
        Um Inhalte in WebComponents von außerhalb einer
        WebComponent in deren Shadow DOM einfügen zu können,
        nutzt man Slots.
      </ce:Paragraph-02>
    </ce:ListItem>
    <ce:ListItem>
      <ce:Paragraph-02>
        Das Shadow DOM für HTML5 WebComponents ist in sich
        gekapselt wie ein eigenständiges HTML Dokument. Um
        zwischem dem Dokument, in welchem eine Custom Component
        in HTML5 enthalten ist, und der neuen Komponente
        einen Datenaustausch zu ermöglichen, können Inhalte
        im Hauptdokument in Slots der Custom Component
        eingefügt werden.
      </ce:Paragraph-02>
    </ce:ListItem>
  </ce:contents>
</ce:UnorderedList>

Anmerkungen

Die Struktur eines <ce:UnorderedList> Elements entspricht vom Prinzip her der HTML5 Struktur von <ul><li><p>..</p></li></ul> Elementen.

<ce:ul><ce:li><ce:p>..</ce:p></ce:li></ce:ul> wäre für manche sicherlich eine einfacher zu tippende Variante gewesen. In XML geht es aber nicht darum, Elemente einfacher tippen zu können, sondern darum, dass ein Mensch, ohne die Abkürzungen zu kennen, schnell verstehen kann, welche Bedeutung ein Element hat.

In XML geht es nicht darum, Elemente einfacher tippen zu können, sondern darum, dass ein Mensch, ohne die Abkürzungen zu kennen, schnell verstehen kann, welche Bedeutung ein Element hat.

Es gibt also Kompressionsverfahren, um XML Daten stark komprimieren zu können. Wenn Sie den Overhead an XML-Tags reduzieren möchten, ist es möglich, für XML-Elemente einen Wrapper wie <u:ul> zu erstellen. Der Namespace <u:*> ist für User-Namespaces vorbehalten. Hierzu müssen Sie aber im XML-Header dann Ihren eigenen Namespace referenzieren.

Box

UIO 1.5.2.4


Das Box-Element (Alpha)


Die Box als Rahmen

Der Bedarf für ein Element, mit welchem man redaktionell mal sehr schnell einen Rahmen schaffen kann, um Inhalte darin kapseln und visuell herausstellen oder von übrigen Inhalten differenzieren zu können, war da. Also haben wir so ein Element mal als Prototyp geschaffen.

Ich bin ein Textabsatz in einem <ce:Box> Element.

Ich bin ein Textabsatz in einem <CEBox> Element ohne Prefix. Hinweis: Ab UIO 1.5.2.x werden alle Komponenten auf den ce-Namespace geändert. 'ce' steht für Content-Element.

Alterantive Lösung

Sie haben alternativ die Option, das <ce:RawXML> Element zu verwenden, um eigenen HTML Code einzugeben. Inhalte in <ce:RawXML> Elementen erfordern aber CDATA-Blöcke in XML!

HINWEIS: Wir empfehlen Ihnen dringend, auf die Verwendung von RawXML-Elementen zu verzichten.

RawXML, CERaw

UIO 1.5.2.3


HTML Code selbst eingeben


CERaw

Um eigenen HTML Code eingeben zu können, beginnen Sie den zugehörigen Block mit <CERaw> gefolgt von einem öffnenden CDATA-Tag, wie es in XML üblich ist. Zum schließen des Blocks nutzen Sie den schließenden CDATA-Blog und beenden den Bereich mit </CERaw>

Hinweise und Warnungen

Ab UIO 1.5.x werden alle Komponenten schrittweise auf den ce-Namespace umgestellt. Für diese Komponente lautet das Element zukünftig für XML Code <ce:RawXML>.

Mit einem Fehler in den Daten, die Sie als Rohdaten eingeben und damit an einen Client schicken, können Sie nicht nur Layouts komplett zerstören sondern auch schwerwiegende Fehler in der Verarbeitung von Formularen auf Seiten mit JavaScript bewirken weil Sie das DOM Document Object Model zerstört haben.

Wenn Sie nicht wirklich (a) Entwickler und (b) erfahrener UIO Entwickler sind und noch (c) ggf. der Template-Entwickler für Ihre Webseite sind, sollten Sie auf den Einsatz von RawXML-Elementen verzichten.

UIO 1.5.1.*

Kontaktformulare erfordern ab Version 1.5.1.5 den 'render_WebPageMain' Mode. Die Lade-Animation von Inhalten wurden entfernt.

Für Template-Entwickler


WebPage, WebPageMain etc.

Die Dokumentstruktur für die Deklaration von WebPage Instanzen wurde in Anlehnung an Schema.org sowie den HTML5 Standard um WebPageHeader, WebPageMain, WebPageFooter sowie WebPageAside ergänzt. Auf das Rendering von Seiten im Browser und damit den CSS Code hat das bislang kaum/keine Auswirkungen. Der Mode für die Templates von Section- und Layout-Elementen ist allerdings damit mitunter auf render_WebPageMain zu ändern.

Lade-Animationen

Alle Lade-Animationen wurden aus den bestehenden Templates ab Version 1.5.* im Zuge der Entfernung von auf jQuery bestehendem Programmcode entfernt.

ContactForm

Kontaktformulare erfordern ab Version 1.5.1.5 den 'render_WebPageMain' Mode. Die Lade-Animation von Inhalten wurden entfernt. Das Prinzip gilt sinngemäß für (fast) alle ContentElement Instanzen welche sich unterhalb von WebPageMain befinden.

SwitcherMenu

SwitcherMenu: Das SwitcherMenü (auch Switcher oder SiteMenu genannt) lässt sich nun in einem eigenständigen File bearbeiten und aus dem eigentlichen Menü referenzieren und in die Menüstruktur einhängen. Damit ist es nun möglich, mehrere WebSites über das SwitcherMenu miteinander in Beziehung zu bringen, in dem der Besucher über den das SwitcherMenu einen Zugriff auf alle WebSites im Cluster erhält.

ImageBlock

new: Mit ce:ImageBlock wurde ein Container-Element geschaffen welchem man ein ImageObject als Content zuweisen kann.

ImageObject

added: ce:ImageObject/ce:config/formatKey ermöglicht als neue Eigenschaft die Zuweisung eines Standardformats. Der Defaultwert lautet 'L21'.

Für Redakteure


Bilder im Inhalt anordnen

Mit Hilfe von ce:ImageBlock lassen sich Blöcke als Container für ImageObject Elemente definieren. ImageObject Elemente werden damit ab 1.5.1 als 'Information' betrachtet und erfordern für eine Darstellung und damit die zugehörige Skalierung und Formatierung stets ein Element als Container.

ce:ImageObject Elemente können über ce:config/ce:formatKey für Standardformate wie 'Q11' für quadratische Bilder konfiguriert werden. Der Standardwert 'L21' entspricht b/h=2/1 bzw. dem 16/8 Format.

Bildgalerie

Dem neuen ce:ImageGallery Element lassen sich der ce:contents Eigenschaft direkt ce:ImageObject Elemente zuweisen.

Anmerkung: Das Verfahren für die Deklaration von Filter-Tags und deren Zuweisung zu Bildern wurde für eine vollständige Überarbeitung entfernt. Die vormalige Bibliothek wurde aus Lizenzgründen entfernt.

SiteRoot WebPage

Eine der größten Neuerungen um Umstellungen ist die konsequente Einführung von SiteRoot- und SiteBranch-Seiten. Der primäre Grund für die Planung eines neuen URI Konzepts bestand darin, dass sich immer wieder Domainnamen verändert hatten oder Webseitenbetreiber den Wunsch äußerten, mehrere Webseiten über die gleiche Domain anlegen zu können, ohne hierbei auf Subdomains ausweichen zu müssen.

Ein Zugriff auf den URI '' bzw. '/' wie beispielsweise 'https://example.com/' entspricht nun im Regelfall der Adressierung eines SiteRootNodes in der Informationsstruktur. Über die Konfiguration wird dem Server schlichtweg mitgeteilt, welcher RootNode der Default-Knoten ist. Beispiel: Lautet der Key für den RootNode beispielsweise 'xmpl' so lautet der zugehörige URI '/xmpl' und die vollständige URL für die deutsche Version anschließend 'https://example.com/de/xmpl'.

SiteRoot Adressen sind die Startseite einer WebSite. Dieses bedeutet sinngemäß, dass über eine Domain wie 'example.com' mehrere WebSites betrieben werden können indem man kurzerhand mehrere 'SiteRoot'-Knoten unterhalb seines SiteRealmNode definiert.

Für Designer


ImageObject und Overlays

Im Zuge einer Standartisierung von Datenformaten sowie zugehöriger Rendering-Prozesse haben wir begonnen, Bildelemente nicht nur vom Layout zu trennen sondern den Bildverarbeitungsprozess in der Datenstruktur abzubilden, um wiederkehrende bislang manuelle Verarbeitungsprozess automatisieren zu können.

In Bezug auf die Gestaltung seit in diesem Zusammenhang erwähnt, dass der Designer für Stilkonzepte nun für jedes gängige Bildformat (vgl. formatKey='Q11' und 'L21') damit ein Overlay-Image für das Stilkonzept für seinen Kunden entwerfen kann.

Meta Description und Keywords (Alpha)

UIO 1.5.2.23


Meta-Daten ergänzen

Die Meta-Daten für ein WebPage-Dokument werden innerhalb der Konfiguration des <ce:WebPage> Dokuments gepflegt.

Hinweis zu Keywords: Die Auto-Generation via CEStrong funktioniert, ist aber nur ein Prototyp als Zwischenlösung.

Hinweis zur Description: Die Auto-Generation via ce:PageAnchor, welche für die ce:pageAnchorLinks im Seitenkopf aktiviert wurden, funktioniert ebenso und ist auch ein Prototyp als Zwischenlösung.

Beispiel

Der nachfolgende Code zeigt ein Beispiel wie Sie meta-title, meta-description und meta-keywords pflegen können.



<ce:WebPage>
<ce:config>

<ce:title>UIO 1.5.2 Blog</ce:title>
<ce:description>UIO 1.5.2 Blog </ce:description>
<ce:keywords>
SNEWMEDIA, Entwicklerblog, UIO
</ce:keywords>
..
<ce:config>
</ce:WebPage>

Fußnoten

Fußnoten


  • [1]↑ Fachbegriff: Ein Begriff welcher nur Menschen in einem bestimmten Fachbereich bekannt ist und deshalb anderen Personen, die nicht vom Fach sind, optional erläutert wird. Eine Fußnote ist in diesem Zusammenhang dann sehr praktisch wenn davon auszugehen ist, dass die Mehrheit der Leser den Begriff schon kennt. Für diejenigen, die ihn noch nicht kennen, ist dann die Fußnote eine Option.
  • [2]↑ Korrekterweise hätte es "die eine Redakteurin oder der andere Redakteur heißen müssen". Klicken Sie Links auf die Zahl und/oder den Pfeil, um zum Text zurückzukehren.
  • [3]↑ https://de.wikipedia.org/wiki/Fu%C3%9Fnote
  • [4]↑ CSSmehr erfahren
  • [5]↑ Das PageAnchor Element gibt es bereits langem. Was sich ab 1.5.2.x geändert hat ist der Namespace: <ce:PageAnchor>.
  • [6]↑ Wie schon für das <ce:PageAnchor> so hat sich auch für das <ce:PageAnchorLinks> Element der Namespace auf ce: geändert. Diese Abkürzung steht für 'Content Element'.
SO IST'S BESSER.

1 zu 0 für Entwickler. Es ist einfacher als Du denkst.

Stelle noch heute Deine Anfrage.

uio--WebPageFooter-Module