- UIO Blog Version 1.5.2.x
- 1.5.2.67 Parameter für CE Referenzen
- 1.5.2.66 FootNote (Update)
- 1.5.2.65 FootNote (Update)
- 1.5.2.64 Protocol in Templates
- 1.5.2.63 .htaccess Changes
- 1.5.2.62 Routing Weiterleitungen
- 1.5.2.61 Routing forward-uri
- 1.5.2.60 SocialMediaPosting
- 1.5.2.59 offers-Eigenschaft
- 1.5.2.57 Suchformular
- 1.5.2.56 FormSignupSigninReset
- 1.5.2.55 ImageFluid
- 1.5.2.54 BookingForm
- 1.5.2.53 sitemap.xml
- 1.5.2.52 context_root_URI
- 1.5.2.51 InlineLink_PageAnchorLinks (Neu)
- 1.5.2.50 InlineLink (Update)
- 1.5.2.49 Mehrsprachige Texte
- 1.5.2.48 Splitting RouteDefinition
- 1.5.2.47 Routing (Update)
- 1.5.2.46 Keyboard(s) (Preview)
- 1.5.2.45 KeyboardKey
- 1.5.2.44 LinkedData id's
- 1.5.2.43 Context Root und Relative URI
- 1.5.2.42 InlineLink mit Target
- 1.5.2.41 LinkedData
- 1.5.2.40 SuperHeader mit Logo
- 1.5.2.39 Timeline Component (Concept)
- 1.5.2.38 Datum, Zeit, Zeitdauer
- 1.5.2.37 Fachbegriffe auszeichen
- 1.5.2.36 Headlines
- 1.5.2.35 SocialMedia Links
- 1.5.2.34 LinkedData
- 1.5.2.33 Globaler Graph
- 1.5.2.32 LinkedData
- 1.5.2.31 TeaserGroup
- 1.5.2.30 WeekCalender
- 1.5.2.29 Text kürzen HTML
- 1.5.2.28 BreadcrumbList HTML
- 1.5.2.27 Optionaler Umbruch
- 1.5.2.26 Drop-Down-Menüs (L2)
- 1.5.2.25 Links im Kopfmenü (L2)
- 1.5.2.24 InlineLink + Icon
- 1.5.2.23 GlobalCounter (Konzept)
- 1.5.2.22 BreadcrumbList
- 1.5.2.21 ItemList mit ColumnLayout (Konzept)
- 1.5.2.20 Mehrsprachigkeit mit 斯新媒体 (Alpha)
- 1.5.2.19 InlineLink auch ohne Icon
- 1.5.2.18 ce:SuperHeader
- 1.5.2.17 ce:Map Data Architecture
- 1.5.2.16 ce:InlineLink mit XML-Variablen
- 1.5.2.15 Fußnoten mit FootNote und -CollectionModule
- 1.5.2.14 Animationen als Stilelement (Preview)
- 1.5.2.13 Canonical und Alternative URI Links
- 1.5.2.12 ViewActionButton mit XML Gettern
- 1.5.2.11 ce:fn-get* XML Getter
- 1.5.2.10 Automatische Bildbearbeitung
- 1.5.2.9 PageAnchor und PageAnchorLinks
- 1.5.2.8 Modale Dialoge
- 1.5.2.7 ContentElementReference
- 1.5.2.6 ce:OrderedList
- 1.5.2.5 ce:UnorderedList
- 1.5.2.4 Box
- 1.5.2.3 Box
- Meta Description und Keywords (Alpha)
- Fußnoten
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 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
SignIn
Sign Up
HINWEIS: Sie benötigen zur Zeit KEINEN Kunden-Account für SNEWMEDIA. Nutzen einfach unsere Kontaktformulare. Die eigenständige Anmeldung für Neukunden ist (fast) fertig. Ihnen fehlt aber für eine Anmeldung der einzugebene Code. Die hierfür benötigte Grafik wird aus IT-Sicherheitsgründen neu programmiert und ist noch im Test.
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'
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.
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&b=auch&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:
> @snm > dev > blog > uio-1-5-2-x
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
­
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 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.
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/>
Donaudampfschifffahrtskapitän, Donaudampfschifffahrtskapitän, Donaudampfschifffahrtskapitän, Donaudampfschifffahrtskapitän, Donaudampfschifffahrtskapitän, Donaudampfschifffahrtskapitän, Donaudampfschifffahrtskapitän, Donaudampfschifffahrtskapitän, Donaudampfschifffahrtskapitän, Donaudampfschifffahrtskapitän, Donaudampfschifffahrtskapitän, Donaudampfschifffahrtskapitän, Donaudampfschifffahrtskapitän, Donaudampfschifffahrtskapitän, Donaudampfschifffahrtskapitän, Donaudampfschifffahrtskapitän, Donaudampfschifffahrtskapitän, Donaudampfschifffahrtskapitän, Donaudampfschifffahrtskapitä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.
ABCD
Donaudampfschifffahrtskapitän
ABCDEF
Donaudampfschifffahrtskapitän
ABCDEFGH
Donaudampfschifffahrtskapitän
ABCDEFGHIK
Donaudampfschifffahrtskapitän
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>
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.
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
@snm
und 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>
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.
-
Eins
-
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.
-
Eins
-
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
- [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 aufce:
geändert. Diese Abkürzung steht für 'Content Element'.
1 zu 0 für Entwickler. Es ist einfacher als Du denkst.
Stelle noch heute Deine Anfrage.