uio--WebPageHeader-Module
uio--WebPageMain-Module
Components, Blueprints, Component Types, Component Instances, WebSite, WebPages, Content Elements: Das UDS bietet für die Formulierung von digitalen Dokumenten wie mitunter damit auch für Webseiten eine ganze Reihe von Komponenten und Elementen. Vereinfacht formuliert kann man diese als Bausteine oder englischsprachig als Building Blocks des Design Systems verstehen.

Components

PART 1: OVERVIEW

Components

The Building Blocks of Design Systems


HINWEIS: Diese Section Components dokumentiert derzeit im Schwerpunkt nur Content Element Components, zu erkennen am Namespace-Prefix ce: wie beispielsweise <ce:InlineLink>. Es sind diese Komponenten, mit denen die Informations- und Datenstruktur von WebSite-Clustern, WebPages, Layouts sowie deren Inhalten formuliert werden können.

Zum Verständnis erforderliche Begriffe


Syntax und Aufbau von Komponenten

Keywords: <comment>

Grundlegende Syntax

Grundprinzip von Semantik und Objektorientierung verstehen

Keywords: <comment> <ce:ContentInstance> <ce:ContentReference> <doc>

Fundamentale Elemente

Realm, WebSite, WebPage

Keywords: Realm, WebSite, WebPage

WebPage Structure

Primäre technische und semantische Komponenten einer Einzelseite

HeaderNavigationModule

Struktur einfacher und komplexer Menüs

ce:HeaderNavigationModule

Themes, Styles, Skins, Variants

Einfluss auf Gestaltung, Pattern, Flow nehmen

Sections einer WebPage

Abschnitte in Einzelnseiten einer Webseite

Layout und Content

Komponenten für Layouts und Content Elements

Complex Containers

List Containers

Redaktionelle Inline-Elemente

Stichworte: ce:CodeSample, ce:InlineLink, ce:KeyboardKey

XML-Text, Number, Date

Ein Sonderfall in UDS XML ist die Bedeutung von Text. Während redaktionelle Inhalte in Absatzkomponenten wie zumeist <ce:Paragraph-02> und <ce:Paragraph-01> direkt als XML-Text-Knoten innerhalb dieses XML Elements geschrieben werden kann, sieht es bei Text für Buttons, Labels und andere Komponenten anders aus.

Mit <text lang="de">Text</text> werden Text-Literale als Wert einer Objekt-Eigenschaft und damit auch einem Konfigurationsparameter von Komponenten zugeordnet.

Der technische und semantische Hintergrund hierbei ist der, dass manche Parameter eine sehr spezielle Form von Text erfordern. Damit man in XML Dokumenten deren Bedeutung immer erkennen kann, bedeutet es im Umkehrschluss, das auch Standard-Text-Literale dahingehend ein eigenes Element bekommen.

Hinzukam allerdings einst, dass die semantische Auszeichnung von LinkedData Informationen, die man mitunter für SEO verwendet, inzwischen Text-Werte mit parallel mehreren Sprachen in LD+JSON einführte, um bei Texten nicht nur den Text zu erfassen sondern auch zu marktieren, in welcher Sprache dieser erstellt wurde.


Der UDS Server kann bei HTTP Requests von Browsern tatsächlich die gewünschte Sprache des Nutzers erkennen und war in der Lage, basierend auf Sprach-Attributen wie lang="de" oder "en" die passende Sprache anzuzeigen. Mit Einführung des URI-Segments /de und /en wurde diese Auszeichnung von lang-Werten aber obsolet.

FN-Function-Elements

Function Elements sind zuerst einmal normale Content Elements in UIO3 und haben deshalb auch das XML-Namespace-Prefix ce:. Sie unterscheiden sich allerdings von anderen Inhalten dahingehend, dass deren Inhalte zum Zeitpunkt der Abfrage abgefragt wird, sei es nun das aktuelle Datum mit einer Jahreszahl, dem Wochentag, die Anzahl der aktuell eingeloggten User oder auch schlichtweg eine vom Server erzeugte Zufallszahl.

So kann man mit <ce:fn-getdate-year-actual/> beispielsweise das aktuelle Jahr ausgeben: 2025.

Die Dokumenation dieser Elemente befindet sich in Bearbeitung. <ce:fn-getdate-year-actual/> möglich sind.


Component Index

Die nachfolgende Liste von Components wurde bereits dokumentiert.

A

<ce:Accordeon> (@since 1.5.2.*, compatible 1.5.2.90) - An ItemList like element which ListItems each contain a Button and a Panel element. When rendering as HTML output panels are usually closed, however, can be opened by clicking onto the appropriate button. IDs for ce:Accordeon elements and their items are automatically rendered. ce:Accordeon should NOT be used as an alternative to navigation. | ce:Accordeon/ce:contents/ce:Button/ce:label/text@lang=de, ce:Accordeon/ce:contents/ce:Panel/CEContainer

B

<ce:Block> (1.*.*.* stable, compatible v.1.5.2.90) - Used an element in XML files to group several XML elements. The ce:Block element itself is not rendered. Only its children are rendered. Might be compared to { ... } blocks in programming languages to create a local scope.

<ce:BlockQuote> (1.5.2.* Beta, compatible 1.5.2.90) - Used to a layout block with a quote, testimonial.

<ce:BookingForm> (1.5.2.55 prototype) - Used to render an HTML formular section with booking data which can be send by email.

<ce:BoxAbsolute> (1.5.2.40 prototype) - Layout element which can be used within CECol columns of a layout for absolute positioning of elements based upon the container element in which this ce:BoxAbsolute element is used.

<ce:BoxRelative> (1.5.2.40 prototype) - Layout element which can be used within CECol columns of a layout for relative positioning of elements based upon the container element in which this ce:BoxAbsolute element is used.

<ce:BreadCrumbList> (1.5.2.* Beta, compatible 1.5.2.90) - Used as a module to add a Breadcrumb List manually within a webpage additional to menues and navigation elements that are part of a theme, template, subtheme, subtemplate or generated by post processing.

<ce:BreakLine/> (1.*.*.* stable, compatible v.1.5.2.90) - Used to force a new line at a certain position. Usually rendered as <br /> element in HTML5, XHTML 1.x etc. which will later be translated into simple HTML5 <br> elements. Annotation: The UDS core renders XML conform HTML5 content that can be processed by XML DOM tools.

C

<CECol> (1.5.2.* Beta, compatible 1.5.2.90) - Used for defining columns within CERow as part of CEContainer.

<ce:CodeSample> (1.5.2.* beta, compatible v.1.5.2.90) - Used for samples of programming code, variables, method names or code snippets with a ce:Paragraph-02 and other block elements when writing content. Usuallys rendered as HTML code element with a monotype font.

<ce:ContentInstance> (1.5.2.* beta, compatible v.1.5.2.90) - Used within doc-element within an xml-file to be referenced by ce:ContentReference elements by @uri attribute. This is an option to store offen used layouted content in files.

<ce:ContentReference> (1.5.2..* beta, compatible v.1.5.2.90) - Used to refer to XML documents which contents you would like to copy from doc/ce:ContentInstance/ce:contents from the via @uri referenced file.

D

E

F

<ce:FixedHeading-01>, <ce:FixedHeading-02>, <ce:FixedHeading-03>, <ce:FixedHeading-04>, <ce:FixedHeading-05>, <ce:FixedHeading-06>, <ce:FixedHeading-07> (1.5.2.* Stable) - Used for common headlines for normal contents that are not meant to use a representative style. Use FluidHeading-** elements if you need a more representative style.

<ce:FluidHeading-01>, <ce:FluidHeading-02>, <ce:FluidHeading-03>, <ce:FluidHeading-04>, <ce:FluidHeading-05>, <ce:FluidHeading-06>, <ce:FluidHeading-07> (1.5.2.* Stable) - Used for representative headlines in cases where the fontsize will grow with width of the browser window and/or a print layout while FixedHeading-** elements raise sizes just limited.

<ce:FluidImageSVG> (1.5.2.89 Prototype) - Used to define a certain ImageObject type that is meant to store and display SVG vector graphics. The important part about SVG files that SVG files can be formatted and styled by CSS and JS code of the webpage.

<ce:FootNote> (@since 1.5.2.*, compatible 1.5.2.89) - Displays all contents of ce:FootNote within a ce:WebPage.

<ce:FootNodeCollectionModule> (@since 1.5.2.*, compatible 1.5.2.89) - Displays all contents of ce:FootNote within a ce:WebPage.

ce_FormSignupSigninReset_v001 (@since 1.0.0.* concept) - This group of components will provide buttons and dialogs for a signup, password reset etc. process for frontend and users. CONCEPT.

G

<ce:GridLayout> (1.5.2.89 Alpha, compatible v.1.5.2.89) - A ce:GridLayout element is an alternative layout concept based upon the HTML5 grid concept. Place ce:GridCell elements within ce:contents of a ce:GridLayout element, configurate their position by col and row or it's spanning size by cols and rows.

H

<ce:HeaderCarousel> (@since 1.3.5.20, compatible 1.5.2.89) - Used to add a SlideShow to a ce:WebPageHeader and to configurate its Slides. This element has several sub components.

<ce:HeaderNavigationModule> <ce:Nav-L1-MainNavigation><ce:items> <ce:Nav-L2-MenuItem style="1"> <ce:Nav-L2-MegaMenu style="1"><ce:items> <ce:Nav-MegaColumn-1> <ce:MegaMenuContentBlock> <ce:Nav-MegaSection style="1"><ce:header> <ce:Nav-MegaSection style="1"><ce:items> <ce:Nav-L1-MainNavigation> <ce:Nav-L2-MenuItem> <ce:Nav-L2-MegaMenu> <ce:Nav-MegaSection> <ce:Nav-L3-MenuItem> .. (1.1.1.1 alpha) - These Nav-* elements are used within the ce:HeaderNavigationModule which is defined as a SiteNavigationElement to greate large menus for the header of WebPages of a certain WebSite. These elements are not part of the common Content Elements of WebPages but of the definition of HeaderNavigationModule structures that are referenced by ce:WebSite configuration.

<ce:HorizontalTabsPanelGroup> (1.5.2.* Concept, ****) - The ce:HorizontalTabsPanelGroup is layout container component with a horiontal menu of "tab" buttons above or below an area for panels. If the user clicks onto a tab the appropriate panel is shown.

The more common element is the <ce:VerticalTabsPanelGroup> Element.

<HTMLBODY_MAIN_CONTENT_010_Section_Overview> (@since 1.0.0.*, compatible 1.5.2.90) - Placed within ce:WebPageMain/ce:contents as a container for sections like ce:Section.

<HTMLBODY_HEADLINE_010_Section_Breadcrumb_Title> (@since 1.0.0.*, compatible 1.5.2.90) - Placed within ce:WebPageMain/ce:contents to show information about breadcrumb, title, buttons for previous or next page, buttons to jump to the content of a page or move upwards in the page hierarchy to the chapter or page index of a chapter. | Contains several elements <Headline> <Paragraph> <BackgroundImage> <Navigation> <Continue> <Link> <text lang="de"> <AncestorUp> <Previous> <Next>

I

<ce:ImageBlock> (@since 1.5.2.*, compatible 1.5.2.90) - Used as a container and frame to contain and display ce:ImageObject or other MediaType elements like ce:SVG* elements.

"ImageBlockModal" (@since 1.0.0.* concept) - This element will be used to load an image on request instead of loading it directly. Used to reduce download traffic. CONCEPT.

<ce:ImageObject> (@since 1.5.2.*, compatible 1.5.2.90) - Used as an information node within a WebPage UDS XML document to edit the configuration of an image that should be loaded and/or rendered on the serverside. Usually rendered as an HTML <img .. /> tag which will later be converted to simple HTML5 by removing the slash in UDS PostProcessing.

"ImageGallery" (@since 1.0.0.* prototype) - This element is used as a container for images like ce:ImageBlock and ce:ImageObject elements. This element requires recoding due to changes to JS libraries. It will later provide sorting and tagging of images and should support a FAL file abstraction layer for referencing files and/or IDs.

<ce:InlineLink> (@since 1.5.2.* beta) - This element is used to create links within block elements like ce:Paragraph-02 and ce:Paragraph-02 elements. Since 1.5.2.* link properties are edited within ce:config with text-elements within ce:label and ce:uri.

<ce:InlineLink_PageAnchorLinks> (@since 1.5.2.* beta) - This is a special inline-link-element that creates a link within a text passage back to the PageAnchorLinks menu.

J

<ce:JumpLanding> (@since 1.1.1.1 stable, v.1.5.2.90) - Used to manually place anchors in documents which will be rendered in HTML as <a id="example"></a> elements. You can link to these elements by URLs/URIs by adding #example to a link for the appropriate URL/URI of its webpage.

K

<ce:KeyboardKey> (1.5.2.45 Stable) - Used to add a keyboard-key-like border and background for chars, letters and special signs that represent keys on a keyboard like CTRL, +, \ and more.

<ce:KeyboardLayout>
<ce:KeyboardGraphics>
<ce:Keyboard-1>
<ce:MusicKeyboard-1>
<ce:Keyboard-2-L21>
<ce:Keyboard-2-Q11 >
(Prototypes, Concept) - These components are meant to display the keyboard layouts for computer keyboards, keys of a piano, and other hardware which keys, pads, etc. Should be used to visualize the position of keys and key-combinations in games, informatics, music, and more.

L

<ce:JumpLanding> (@since 1.1.1.1 stable, v.1.5.2.90) - Used to manually place anchors in documents which will be rendered in HTML as <a id="example"></a> elements. You can link to these elements by URLs/URIs by adding #example to a link for the appropriate URL/URI of its webpage.

<ce:LinkGlossary> (1.5.2.* Concept, compatible 1.5.2.90) - ???

M

<ce:Map> (1.5.2.* Concept) - This element was meant to be used to place a geographic map, game map, a plan, and more based upon rending of contents as SVG and/or HTML/CSS and/or Canvas/WebGL and/or serverside generation of jpg/png files. We flagged this element as deprecated because the concept contains to many variants for this elements and has a naming conflict with "map", "hash map", "linked hash map" that we used to describe data structures in code and in XML. DEPRECATED.

<ce:Modal> (1.5.2.* Concept) - This element is a container for a panel with layout and contents that can be opened and shown above the actual page content if users click onto the appropriate button to open it. A modal dialog can be be closed. Note: The content of this modal element is already loaded with a page. RENDERING BUG.

<df:Module-CallActionFinally> (1.3.6.1 alpha) - Used as a section at the end of a webpage to add a call-to-action CTA button contained in a section with a certain style. These elements are usually defined within doc/ce:ContentInstance/ce:contents of XML files to be referenced later by ce:ContentReference with @uri attributes. | Will get new configuration when migrated to ce:CallActionFinallyModule.

N

<ce:Nav-L1-MainNavigation> <ce:Nav-L2-MenuItem> <ce:Nav-L2-MegaMenu> <ce:Nav-MegaSection> <ce:Nav-L3-MenuItem> .. (1.1.1.1 alhpa) - These Nav-* elements are used within the ce:HeaderNavigationModule which is defined as a SiteNavigationElement to greate large menus for the header of WebPages of a certain WebSite. @see ce:HeaderNavigationModule.

O

<ce:OtherActionButton> (1.5.2.* Beta, compatible 1.5.2.90) - An alternative ActionButton element, see ViewActionButton. While the ViewActionButton is the primary button that a used might be interested in the OtherActionButton is used to provide one or two more secondary buttons. Example: First button for a page about a product and another button for a page where you may call the support team.

<ce:OuterContainer> (1.5.2.* Beta, compatible 1.5.2.90) - Used as container for CEContainer layout elements for formatting purposes.

P

<ce:PageAnchor> (1.5.2.* Beta, compatible 1.5.2.90) - Used to add links to PageAnchorMenu

<ce:PageDescription> (1.5.2.* Beta, changed 1.5.2.96 compatible 1.5.2.97) - This is a layout element and content container that should be used to write a short summary of the contents on a certain webpage. This content will be used in cases if the ce:description of a ce:WebPage is missing.

<ce:PageIntro> (1.5.2.97 Beta, compatible 1.5.2.97) - This layout compontent is used in the top of a ce:WebPage/ce:contents Section Container and contains a short intro text usally within a text element instead of a common ce:Paragraph-03 element. The size of the content is rendered automatically for a certain style.

<ce:Paragraph-02>, <ce:Paragraph-02>, <ce:Paragraph-03>, <ce:Paragraph-04>, <ce:Paragraph-05>, <ce:Paragraph-06>, <ce:Paragraph-07> (1.5.2.* Stable) - Used for content in paragraphs. Numbers 01 and 02 of paragraph elements match with their appropriate FixedHeading-01 and FixedHeading-02 styles. Larger paragraphs are meant for represantive texts for example within headers and/or on covers. It is usually follewed by a PageAnchorLinksModule which provides links to certain sections on the same webpage the user actually sees in his browser.

<ce:Popover> (@since 1.1.0.2.* prototype, CHANGE!) - A ce:Popover Element is usually an inline element. It contains a label as that part of the content the user can see and a contents part that is displayed if the user clicks onto this element. The ce:Popover element will change its structure to ce:config.


Popover:


Q

Quotes: <ce:Quotes> <ce:SingleQuotes> <ce:DoubleQuotes> (@since 1.5.2.* Beta) - IMPORTANT: Each type of quotes is meant an inline block with a certain meaning and a certain formatting for its content and/or the appropriate quote chars. «Quotes», „DoubleQuotes“, 'SingleQuotes', «Quotes». NOTE: We will try to recognize common double quotes in contents by postprocessing, however, content in single quotes is problem because the ' char is used as apostroph.

R

<RawXML>CDATA...CDATA</RawXML> (1.0..* Beta) - This element can be used in cases where you would like to publish a new html, css and js elmement for a webpage very quickly while template coding is not finished yet.

"Realm" (1.0..* Beta) - There is actually no Realm Element yet because Realms are represented by folders resp. directories. A Realm is thus no ordinary ce: Content Element but part of the configuration.

<CERow> (1.5.2.* Beta, compatible 1.5.2.90) - Used for defining layout rows within CEContainer and as container for CECol columns.

S

<ce:Scare Quotes> (1.5.2.* Beta) - The ce:ScareQuotes element is an inline element used as a container of text that will be start with a special type of quote which is meant to be «funny» or outline a term as «scary». IMPORTANT: Do always use ce:Quotes elements in UDS instead of placing quotes manually. See Quotes. ANNOTATION: ScareQuotes are disabled and replaced by ce:Quotes temporarily.

<CESection> <ce:Section> (1.5.2.* Beta, compatible 1.5.2.90) - Used within ce:WebPageMain/ce:contents as container for CEOuterContainer oder CEContainer.

<ce:SingleQuotes> (1.5.2.* Alpha) - IMPORTANT: Quotes in UDS are inline elements as a container for contents with a certain meaning. To differ an apostroph ' from the beginning or ending char of contents in single quotes you should use the 'ce:SingleQuotes' element. @see Quotes

<ce:Slider13> (1.0.0.* Concept, @depricated) - This slider is no longer used.

<ce:SocialMediaLinkGroup> <ce_SocialMediaPosting_ListView> <ce_SocialMediaPosting_SingleView> (1.5.2.* prototype, v.1.5.2.90) - These elements are used to place a list of SocialMedia teasers as links and their contents on a webpage by reading these news from files within a directory. This concept is quite simple, however, its rather a prototype. SocialMediaPosting elements have become quite complex as WebPage Elements to offer linking with tags, categories and adding additional information like publishing dates or even comments.

<CESoftwareSourceCode> (1.5.2.* Beta, compatible 1.5.2.90) - Used as a container for programming code with many lines of sourcecode. It's very important to use CDATA blocks. Structure: CESoftwareSourceCode/text/CDATA.

T

<ce:TableHTML> (1.5.2.88 Prototype, ***) - A ce:TableHTML element is meant to help to use common HTML table tr td tags to describe the structure of a table layout in UDS. A simple copy-paste solution of HTML code is not provider due to other HTML elements, SVG and CSS within HTML code. Alternatives: ce:GridLayout

<ce:TeaserGroup_5050-CNT-IMG> (1.5.2.* Beta, compatible 1.5.2.90) - A ce:TeaserGroup is an ItemList as layout container. Every ListItem contains a panel with an image and another panel with contents and a button. When rendering this ItemList the orientation of content and image panel with change every ListItem, so by placing a new item within a list the order of panels is automatically corrected, so you can easily move ListItems within this group.

<ce:Timeline> (1.5.2.* Prototype, ***) - A ce:Timeline element is a special type of ItemList where each ListItem is meant to be a certain position in time and/or a version of a software. CONTEPT

U

<ce:UnorderedList> (1.5.2.* Beta, compatible 1.5.2.90) - Used as an ItemList with ListItem elements with ce:FixedHeading-** and ce:Paragraph-** elements. Similiar to UL/LI lists in HTML, however, each ListItem should be a block element.

V

<ce:VerticalTabsPanelGroup> (1.5.2.* Prototype, @stable) - The ce:VerticalTabsPanelGroup is common layout container component with a vertical menu of "tab" button on the left side an area of on the right side where the appropriate panel for each tab button is shown if you press the tab. This element helps to reduce and compact the visual size of contents within a webpage. It should NOT be used as a replacement for menu- and navigation elements.

There is a <ce:HorizontalTabsPanelGroup> under construction where those tabs used for navigation are above or below of those panels.

<ce:ViewActionButton> (1.5.2.* Beta, compatible 1.5.2.90) - This is the typical primary button component that is used when creating call-to-action like buttons, however, ViewActionButton elements are meant to visit a page that a user wants to see/view. @see also <ce:OtherActionButton>

W

<ce:WebPage> (1.5.2.* Beta, compatible 1.5.2.90) - Used within the <doc> element of an UDS XML File. Represents a WebPage node of a WebSite. Will be rendered in HTML5 as an HTML <html>..</html> element including <head>, <body> and code for referencing CSS, JS, and more.

<ce:WebPageFooter> (1.5.2.* Beta, compatible 1.5.2.90) - Represents the placement position of a footer of the actual webpage within ce:Webpage/ce:contents. Will be represented in HTML5 output as <footer>.

<ce:WebPageHeader> (1.5.2.* Beta, compatible 1.5.2.90) - Represents the placement position of a header of the actual webpage within ce:Webpage/ce:contents. Will be represented in HTML5 output as <header>.

<ce:WebPageMain> (1.5.2.* Beta, compatible 1.5.2.90) - Used within ce:WebPage/ce:contents as a container for HTML* blocks that may contain ce:Section sections with layouts and content of a webpage. Is usually rendered semantically rendered as HTML <main>..</main> block.

<ce:WebPageSidebar> (1.5.2.* Idea) - This element might be used according to HTML5 standards among head, main, footer and aside, however, a sidebar is meant to be an element on the left or the right side of the browser window that can be opened and closed somehow. The element can already be used. It is rendered with a CSS class uio--WebPageSidebar-Module you might use in template design and coding.

X

Y

Z

Für Entwickler: Weitere XML Elemente sind dem output.xml File zu entnehmen. Diese werden im Zuge der Verarbeitung von HTTP Requests und dem Rendering-Prozess dem eigentlich zu renderndem XML Dokument hinzugefügt und können zusätzlich für Templates verwendet werden. Hierzu zählen mitunter Informationen über die URI Segmente oder auch ergänzende HTTP Parameter von Formularwerten.

@todo Upcomming: GridLayout, GridLayoutRow, GridLayoutColumn, GridLayoutHeader, GridLayoutBody, GridLayoutLegend, GridLayoutTable

PART 4: Fußnoten

Sind Sie jemand der Inhalte von hinten aufzäumt und zu anderen Fußnoten den Text sucht, wo diese erstellt wurden? Das ist zwar schon etwas seltener zu finden. Aber warum eigentlich nicht?


    Object, Serialisierung, JSON, XML, ce:WebPage, RoutingDefinition.xml, WebPage, HeaderNavigationCluster, HeaderNavigationSwitcher, Gestaltung von Webseiten, Medien, rendern, Style, DefaultStyle, Styling, Skin, Layout-Variant, Skin-Variante

    SO IST'S BESSER.

    Entdecke SNEWMEDIA. Es ist einfacher als Du denkst.

    Stelle noch heute Deine Anfrage.

    uio--WebPageFooter-Module