Styleguide (in Bearbeitung): Unterschied zwischen den Versionen
(→Kalender (calendar)) |
|||
(125 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 3: | Zeile 3: | ||
<h1 style="page-break-before:always">Zielsetzung und Abgrenzung</h1> | <h1 style="page-break-before:always">Zielsetzung und Abgrenzung</h1> | ||
− | |||
<p>zum Seitenanfang [[#top]]</p> | <p>zum Seitenanfang [[#top]]</p> | ||
− | |||
'''Zielsetzung:'''<br> | '''Zielsetzung:'''<br> | ||
<li> Konsolidierung des UI StyleGuides<br> | <li> Konsolidierung des UI StyleGuides<br> | ||
Zeile 23: | Zeile 21: | ||
<h1 style="page-break-before:always">Design</h1> | <h1 style="page-break-before:always">Design</h1> | ||
− | |||
<p>zum Seitenanfang [[#top]]</p> | <p>zum Seitenanfang [[#top]]</p> | ||
+ | |||
Um ein einheitliches Design zu gewährleisten, müssen die verwendeten Farben, Formen und Schriftarten auf allen User Interfaces dem vorgegebenen StyleGuide entsprechen. Diese Vorgaben werden in den folgenden Kapiteln beschrieben. | Um ein einheitliches Design zu gewährleisten, müssen die verwendeten Farben, Formen und Schriftarten auf allen User Interfaces dem vorgegebenen StyleGuide entsprechen. Diese Vorgaben werden in den folgenden Kapiteln beschrieben. | ||
==Farben== | ==Farben== | ||
− | |||
− | |||
<p>zum Seitenanfang [[#top]]</p> | <p>zum Seitenanfang [[#top]]</p> | ||
+ | |||
In diesem Kapitel wird das abgestimmte Farbschema (Hauptfarben, Farbverläufe, Sekundärfarben, u. s. w.) und deren Verwendung auf Webseiten und User Interfaces erläutert. Zusätzlich finden Sie hier Informationen über den jeweiligen Farbcode und die CSS Codierung.<br> | In diesem Kapitel wird das abgestimmte Farbschema (Hauptfarben, Farbverläufe, Sekundärfarben, u. s. w.) und deren Verwendung auf Webseiten und User Interfaces erläutert. Zusätzlich finden Sie hier Informationen über den jeweiligen Farbcode und die CSS Codierung.<br> | ||
===Hauptfarben=== | ===Hauptfarben=== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
{| class="wikitable" | {| class="wikitable" | ||
Zeile 57: | Zeile 54: | ||
===Farbverläufe=== | ===Farbverläufe=== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
+ | |||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
Zeile 74: | Zeile 72: | ||
===Flächen und Linien=== | ===Flächen und Linien=== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
+ | |||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
Zeile 97: | Zeile 96: | ||
===Sekundärfarben=== | ===Sekundärfarben=== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
+ | |||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
Zeile 114: | Zeile 114: | ||
==Schriftarten== | ==Schriftarten== | ||
− | |||
<p>zum Seitenanfang [[#top]]</p> | <p>zum Seitenanfang [[#top]]</p> | ||
+ | |||
Ebenso wie das Farbschema unterliegen auch die zu verwendenden Schriftarten dem abgestimmten Styleguide. Bei der Verwendung von zu vielen unterschiedlichen Schriftarten und Schriftgrößen kann das User Interface schnell unruhig wirken. Die gewählte Schriftart sollte gut lesbar und nicht zu klein sein.<br> | Ebenso wie das Farbschema unterliegen auch die zu verwendenden Schriftarten dem abgestimmten Styleguide. Bei der Verwendung von zu vielen unterschiedlichen Schriftarten und Schriftgrößen kann das User Interface schnell unruhig wirken. Die gewählte Schriftart sollte gut lesbar und nicht zu klein sein.<br> | ||
+ | |||
===Schriftfamilie=== | ===Schriftfamilie=== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
+ | |||
Für openKONSEQUENZ wurde die Schriftart '''Source Sans Pro''' festgelegt. Diese Schriftart ist bei allen User Interfaces und Texten zu verwendet. | Für openKONSEQUENZ wurde die Schriftart '''Source Sans Pro''' festgelegt. Diese Schriftart ist bei allen User Interfaces und Texten zu verwendet. | ||
Zeile 126: | Zeile 128: | ||
==Rahmenabstände== | ==Rahmenabstände== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
+ | |||
'''offener Punkt'''<br> | '''offener Punkt'''<br> | ||
+ | |||
===Symbole=== | ===Symbole=== | ||
+ | <p>zum Seitenanfang [[#top]]</p> | ||
+ | |||
In diesem Abschnitt werden allgemeine Bedien- und Status-Symbole beschrieben. Um ein einheitliches Aussehen der oK-Module sicherzustellen, sollen diese anwendungsübergreifend verwendet werden. | In diesem Abschnitt werden allgemeine Bedien- und Status-Symbole beschrieben. Um ein einheitliches Aussehen der oK-Module sicherzustellen, sollen diese anwendungsübergreifend verwendet werden. | ||
{| class="wikitable sortable" | {| class="wikitable sortable" | ||
Zeile 141: | Zeile 147: | ||
|Menü | |Menü | ||
|- | |- | ||
− | |[[Datei: | + | |[[Datei:search.icon.svg|center|24px]] |
|Suche | |Suche | ||
|- | |- | ||
|[[Datei:Warning.icon.svg|center|24px]] | |[[Datei:Warning.icon.svg|center|24px]] | ||
|Warnung | |Warnung | ||
+ | |- | ||
+ | |[[Datei:Copy.png|center|24px]] | ||
+ | |Kopieren | ||
+ | |- | ||
+ | |[[Datei:pencil.png|center|24px]] | ||
+ | |Bearbeiten | ||
+ | |- | ||
+ | |[[Datei:save.png|center|24px]] | ||
+ | |Speichern | ||
+ | |- | ||
+ | |[[Datei:add.png|center|24px]] | ||
+ | |Hinzufügen | ||
+ | |- | ||
+ | |[[Datei:cog.png|center|24px]] | ||
+ | |Einstellung | ||
+ | |- | ||
+ | |[[Datei:print.png|center|24px]] | ||
+ | |Drucken | ||
+ | |- | ||
+ | |[[Datei:refresh.png|center|24px]] | ||
+ | |Refresch | ||
+ | |- | ||
+ | |[[Datei:trash.png|center|24px]] | ||
+ | |Löschen | ||
+ | |- | ||
+ | |[[Datei:question.png|center|24px]] | ||
+ | |Hilfe | ||
+ | |- | ||
+ | |[[Datei:cancel.png|center|24px]] | ||
+ | |Abbrechen | ||
|} | |} | ||
+ | <br> | ||
+ | Unter dem folgenden Link finden Sie weitere Symbole.<br> | ||
+ | [https://material.io/tools/icons/?style=baseline Web material-icons-Link]<br> | ||
+ | Lizenz: Apache license version 2.0 sollte/ist mit EPL kompatibel<br> | ||
+ | |||
+ | Die folgende Darstelung zeigt eine Beispiel-Menüleiste mit Icon, die zum Aufrufen von definierten Funktionen verwendet werden. | ||
+ | <br> | ||
+ | [[Datei:Menueleiste mit Icon.png|frame|none|Beispiel: Schaltflächen zum Aufrufen einer Funktion]] | ||
===technische Vorschläge=== | ===technische Vorschläge=== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
<h1 style="page-break-before:always">Komponenten</h1> | <h1 style="page-break-before:always">Komponenten</h1> | ||
− | |||
<p>zum Seitenanfang [[#top]]</p> | <p>zum Seitenanfang [[#top]]</p> | ||
+ | |||
Komponenten sind die einzelnen Bestandteile einer grafischen Benutzeroberfläche /bzw. Benutzerschnittstelle. Im folgenden Abschnitt werden die unterschiedlichen Elemente kurz Erläutert.<br> | Komponenten sind die einzelnen Bestandteile einer grafischen Benutzeroberfläche /bzw. Benutzerschnittstelle. Im folgenden Abschnitt werden die unterschiedlichen Elemente kurz Erläutert.<br> | ||
+ | |||
==Standard-Steuerelemente== | ==Standard-Steuerelemente== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
+ | |||
===Eingabefeld (text)=== | ===Eingabefeld (text)=== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
+ | |||
Ein Eingabefeld ist das meinst verwendete Steuerelement einer grafischen Benutzeroberfläche und dient der Interaktion mit dem Benutzer. Diese Textfelder können Ein- oder auch Mehrzeilig sein und über die Tastatur können beliebige Zeichenketten eingegeben werden.<br> | Ein Eingabefeld ist das meinst verwendete Steuerelement einer grafischen Benutzeroberfläche und dient der Interaktion mit dem Benutzer. Diese Textfelder können Ein- oder auch Mehrzeilig sein und über die Tastatur können beliebige Zeichenketten eingegeben werden.<br> | ||
'''Darstellung''' | '''Darstellung''' | ||
Zeile 169: | Zeile 216: | ||
===Führungstext (label)=== | ===Führungstext (label)=== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
+ | |||
Führungstexte (englich: label) gehören auch zu den Steuerelementen einer grafischen Benutzeroberfläche. Diese werden in der Regel dazu verwendet um Ein- oder Ausgabefelder, aber auch Radio Button oder Checkboxen zu beschriften.<br> | Führungstexte (englich: label) gehören auch zu den Steuerelementen einer grafischen Benutzeroberfläche. Diese werden in der Regel dazu verwendet um Ein- oder Ausgabefelder, aber auch Radio Button oder Checkboxen zu beschriften.<br> | ||
===Schaltfläche (button)=== | ===Schaltfläche (button)=== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
+ | |||
+ | Ein häufig genutztes Steuerelement für grafische Benutzeroberflächen ist die Schaltfläche (englisch: button). Mittels dieser Schaltflächen können Formulare abgesendet oder definierte Aktionen durchgeführt werden.<br> | ||
'''Farben''' | '''Farben''' | ||
{| class="wikitable" | {| class="wikitable" | ||
Zeile 217: | Zeile 267: | ||
| <div class="color-value">#ffffff</div> | | <div class="color-value">#ffffff</div> | ||
|} | |} | ||
+ | <br> | ||
+ | Die folgende Abbildung zeigt Beispielhaft eine Menüleiste mit Schaltflächen über diese definierte Funktionen aufgerufen werden können. | ||
+ | <br> | ||
+ | [[Datei:Beispiel-Button.png|frame|none|Beispiel: Schaltflächen zum Aufrufen einer Funktion]] | ||
===Auswahl (check-box)=== | ===Auswahl (check-box)=== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
+ | |||
Die Auswahl (englisch: checkbox) ist ein einfaches Steuerelement zur Eingabe von Ja/Nein-Werten, welche durch einen Mausklick aktiviert oder deaktiviert werden kann. Dieses Element findet meist auf Formularen Verwendung, wenn z. B. die Datenschutzbestimmungen oder die allgemeinen Geschäftsbedingungen anerkannt werden müssen.<br> | Die Auswahl (englisch: checkbox) ist ein einfaches Steuerelement zur Eingabe von Ja/Nein-Werten, welche durch einen Mausklick aktiviert oder deaktiviert werden kann. Dieses Element findet meist auf Formularen Verwendung, wenn z. B. die Datenschutzbestimmungen oder die allgemeinen Geschäftsbedingungen anerkannt werden müssen.<br> | ||
'''Darstellung''' | '''Darstellung''' | ||
[[Datei:Check-box.png|frame|none|Auswahl mit [[Führungstext|Beschriftung]] "Gesamtnetz für Abregelung*"]] | [[Datei:Check-box.png|frame|none|Auswahl mit [[Führungstext|Beschriftung]] "Gesamtnetz für Abregelung*"]] | ||
+ | |||
+ | <br> | ||
+ | Beispiel für die Verwendung von Auswahlfeldern. | ||
+ | <br> | ||
+ | [[Datei:checkbox.png|frame|none|Beispiel: Auswahlfelder (check-box)]] | ||
===Auswahllisten (MultiSelect)=== | ===Auswahllisten (MultiSelect)=== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
+ | |||
Ein weiteres Steuerelement ist die Auswahlliste (englisch: multiselect) und dient der Auswahl von mehreren Objekten aus einer Liste. Die Darstellungsform solcher Auswahllisten kann variieren.<br> | Ein weiteres Steuerelement ist die Auswahlliste (englisch: multiselect) und dient der Auswahl von mehreren Objekten aus einer Liste. Die Darstellungsform solcher Auswahllisten kann variieren.<br> | ||
Weitere Informationen finden sie unter den folgende Verlinkungen. | Weitere Informationen finden sie unter den folgende Verlinkungen. | ||
Zeile 256: | Zeile 317: | ||
===Dropdown-Liste (drop-down list)=== | ===Dropdown-Liste (drop-down list)=== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
− | Die Dropdown-Liste (englisch: drop-down-list) ist ein Textfeld welches eine Auflistung von benutzerdefinierten Werte enthält aus der ein Anwender einen Eintrag auswählen kann.<br><br> | + | |
+ | Die Dropdown-Liste (englisch: drop-down-list) ist ein Textfeld welches eine Auflistung von benutzerdefinierten Werte enthält aus der ein Anwender einen Eintrag auswählen kann. Diese Dropdown-Liste kann um weitere Elemente wie zum Beispiel ein Scrollbalken, eine Filterfunktion oder auch Icon erweitert werden. Zusätzlich besteht die Möglichkeit Einträge dieser Liste zu Gruppieren, um diese Übersichtlich zu Gestalten.<br><br> | ||
'''Darstellung'''<br> | '''Darstellung'''<br> | ||
Darstellung einer '''inaktiven''' Dropdown-Liste.<br> | Darstellung einer '''inaktiven''' Dropdown-Liste.<br> | ||
Zeile 264: | Zeile 326: | ||
Darstellung einer '''aktiven''' Dropdown-Liste.<br> | Darstellung einer '''aktiven''' Dropdown-Liste.<br> | ||
[[Datei:Drop-down-menu.active.png|frame|none|aktive Dropdown-Liste mit Beschriftung "Grund der Abregelung*"]] | [[Datei:Drop-down-menu.active.png|frame|none|aktive Dropdown-Liste mit Beschriftung "Grund der Abregelung*"]] | ||
+ | <br> | ||
+ | Darstellung einer '''aktiven''' Dropdown-Liste inklusive Icon, Filter und einem Scrollbalken.<br> | ||
+ | [[Datei:Dropdown mit Icon.png|frame|none|aktive Dropdown-Liste mit Icon und Filter]] | ||
+ | <br> | ||
+ | Darstellung einer '''aktiven''' Dropdown-Liste inklusive Gruppierung.<br> | ||
+ | [[Datei:Dropdown mit Gruppierung.png|frame|none|aktive Dropdown-Liste mit Gruppierung]] | ||
+ | [https://www.primefaces.org/primeng/#/dropdown Web primeng-dropdown-Link]<br> | ||
===Kalender (calendar)=== | ===Kalender (calendar)=== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
− | In der Regel umfasst ein | + | |
+ | In der Regel umfasst ein Datums- und / oder Uhrzeitfeld eine Kalenderauswahl, so das ein Datum nicht händisch als String eingegeben werden muss. Durch klick in das Textfeld, öffnet sich ein Kalenderfenster, aus dem das gewünschte Datum und die Uhrzeit auswählt werden kann. <br> | ||
'''Darstellung''' | '''Darstellung''' | ||
− | [[Datei:Calendar.png|frame|none|Kalender mit Beschriftung "Startzeitpunkt*"]]<br> | + | [[Datei:Calendar.png|frame|none|Kalender mit Beschriftung "Startzeitpunkt*"]] |
+ | [https://www.primefaces.org/primeng/#/calendar Web primeng-calendar-Link]<br> | ||
+ | |||
+ | ===Suche=== | ||
+ | <p>zum Seitenanfang [[#top]]</p> | ||
+ | Eine Suchfunktion dient dazu, dass aus einem großem Datenbestand nur ein bestimmter Datensatz anhand verschiedener Kriterien angezeigt wird.<br> | ||
+ | Beispiel für die Verwendung einer Suchfunktion. | ||
+ | <br> | ||
+ | [[Datei:Suchfunktion.png|frame|none|Beispiel: Suchfunktion]] | ||
+ | |||
+ | ===Filter=== | ||
+ | <p>zum Seitenanfang [[#top]]</p> | ||
+ | Eine Filterfunktion dient dazu, dass aus einem großem Datenbestand nur bestimmte Datensätze anhand verschiedener Kriterien in einer Ergebnisliste angezeigt werden.<br> | ||
+ | Beispiel für die Verwendung von Filtern. | ||
+ | <br> | ||
+ | [[Datei:Filterfunktion.png|frame|none|Beispiel: Filter mit Auswahlfeldern]] | ||
===Netzspezifische Icons=== | ===Netzspezifische Icons=== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
+ | |||
'''offener Punkt, Klärungsbedarf'''<br> | '''offener Punkt, Klärungsbedarf'''<br> | ||
− | + | <li>Icons werden von der e-netz bereitgestellt<br> | |
+ | <li>Lizenz wahrscheinlich MIT<br> | ||
+ | <li>Muss mit Frau Wittek besprochen werden/bzw. Unterstützung<br> | ||
==Steuerelemente für Formulare== | ==Steuerelemente für Formulare== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
− | + | <br> | |
− | Zur Erfassung von Daten werden Eingabe- und Auswahlfelder bereitgestellt, in die | + | Zur Erfassung von Daten werden Eingabe- und Auswahlfelder bereitgestellt, in die ein Benutzer Werte über die Tastatur oder eine Werteliste eingeben kann oder Auswahlknöpfe, die der Benutzer mit der Maus beeinflusst. Hierbei werden Pflichtfelder (müssen gefüllt werden und sind mit einem Sternchen entsprechend gekennzeichnet) und Kann-Felder (können gefüllt werden) unterschieden. In der folgenden Tabelle finden Sie eine Auflisten der möglichen Steuerelemente für Formulare. Auf die einzelnen Elemente wird in den folgenden Abschnitten weiter eingegangen.<br> |
{| class="wikitable" | {| class="wikitable" | ||
Zeile 310: | Zeile 398: | ||
==Steuerelement Kalender== | ==Steuerelement Kalender== | ||
− | |||
<p>zum Seitenanfang [[#top]]</p> | <p>zum Seitenanfang [[#top]]</p> | ||
+ | <br> | ||
[https://www.primefaces.org/primeng/#/calendar Web primeng-calendar-Link]<br> | [https://www.primefaces.org/primeng/#/calendar Web primeng-calendar-Link]<br> | ||
'''Darstellung''' | '''Darstellung''' | ||
− | [[Datei:Kalender-Ansichten.png|frame|none|Darstellung der Kalenderansicht für Monat, Woche und Tag]]<br> | + | [[Datei:Kalender-Ansichten.png|frame|none|Darstellung der Kalenderansicht für Monat, Woche und Tag]] |
+ | <br> | ||
+ | In der Kalenderfunktion stehen dem Benutzer folgende Ansichten zur Verfügung:<br> | ||
+ | <li> Monatsansicht<br> | ||
+ | <li> Wochenansicht<br> | ||
+ | <li> Arbeitswochenansicht<br> | ||
+ | <li> Tagesansicht<br><br> | ||
− | + | Bei der Kalenderfunktion hat der Anwender die Möglichkeit von durch einen Klick auf die (Arbeits-)Wochen- oder Tagesansicht zu wechseln. Durch Klicken mit der Maustaste in einen freien Zeitraum können neue Termine erfasst werden. Für eine neue Terminspanne markieren Sie einen freien Bereich durch SHIFT und Klick mit der linken Maustaste und erfassen für diesen Zeitraum einen Termin. Zum Editieren von bestehen den Terminen genügt ebenfalls ein Klick mit der Maustaste. <br> | |
− | + | Über die ‘‘‘Drag & Drop‘‘‘ Funktion können Termine in der Monatsansicht oder der Wochenansicht in einen anderen Wochentag verschoben werden. Um einen Termin zeitlich innerhalb eines Tages zu verschieben und Zeitspanne anzupassen, müssen Sie sich in der Wochenansicht oder der Tagesansicht befinden.<br> | |
− | + | <br> | |
− | + | Folgende Funktionen stehen zusätzlich zur Verfügung:<br> | |
− | |||
− | |||
− | |||
− | |||
<li> Termine ICS-Format exportieren (generell in der Applikation!)<br> | <li> Termine ICS-Format exportieren (generell in der Applikation!)<br> | ||
<li> Filtern über Kalendereinträge (ArrayList)<br> | <li> Filtern über Kalendereinträge (ArrayList)<br> | ||
Zeile 330: | Zeile 420: | ||
==Steuerelement Grid== | ==Steuerelement Grid== | ||
− | |||
<p>zum Seitenanfang [[#top]]</p> | <p>zum Seitenanfang [[#top]]</p> | ||
<li> Buttons zum Absprung in Detailmaske (Lese/Bearbeitung), Stornierbutton in die erste Linke Spalte im Grid<br> | <li> Buttons zum Absprung in Detailmaske (Lese/Bearbeitung), Stornierbutton in die erste Linke Spalte im Grid<br> | ||
Zeile 352: | Zeile 441: | ||
- Farben<br> | - Farben<br> | ||
- Style fürs Grid<br> | - Style fürs Grid<br> | ||
− | <li> Kompaktes Grid definieren. Spaltengröße sinnvoll definieren<br> | + | <li> Kompaktes Grid definieren. Spaltengröße sinnvoll definieren<br><br> |
+ | [https://www.ag-grid.com/ Web ag-grid-Link]<br> | ||
+ | <br> | ||
+ | Beispiel einer Verwendung von Steuerelementen auf einem Grid. | ||
+ | <br> | ||
+ | [[Datei:Steuerelement Grid.png|frame|none|Beispiel: Steuerelement Grid]] | ||
+ | |||
+ | ==Steuerelement Heatmap / Kartendarstellung== | ||
+ | <p>zum Seitenanfang [[#top]]</p> | ||
+ | <br> | ||
+ | Ermöglicht das Einbinden von zweidimensionalen Karten-Elementen auf Webseiten, Mobile Apps sowie für Navigationen. Diese Kartendarstellungen sind von Standortdaten angetrieben und bieten zusätzlich Echtzeit-Updates. Durch einen Entwickler können diese vollständig angepasst und konfiguriert werden. Das Hinzufügen von Points of Interest, Live-Standortdaten und Persistenz globaler Objekte ist ebenfalls möglich.<br> | ||
+ | |||
+ | <li>[https://www.mapbox.com/ Web mapbox-Link]<br> | ||
+ | <li>[https://openlayers.org/ Web OpenLayers-Link]<br> | ||
+ | - Unterstützt WMS-Services (Web Map Service)<br> | ||
+ | - OpenSreetMap muss Lizenz geklärt werden! ODbL.<br><br> | ||
+ | '''Lizenzkompatibilität muss beim Projekt geklärt werden'''<br> | ||
+ | |||
+ | <br> | ||
+ | [[Datei:Karten-Beispiel.png|frame|none|Beispiel einer Kartenansicht]] | ||
+ | |||
+ | <h1 style="page-break-before:always">Layout</h1> | ||
+ | <p>zum Seitenanfang [[#top]]</p> | ||
==Tabellen/Listen== | ==Tabellen/Listen== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
+ | |||
===Tabelle=== | ===Tabelle=== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
+ | |||
'''Darstellung''' | '''Darstellung''' | ||
[[Datei:Table.png|frame|none|Darstellung einer Tabelle]] | [[Datei:Table.png|frame|none|Darstellung einer Tabelle]] | ||
Zeile 374: | Zeile 487: | ||
===blätterbare Tabelle=== | ===blätterbare Tabelle=== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
+ | |||
'''Darstellung''' | '''Darstellung''' | ||
[[Datei:Pageable-table.png|frame|none|Darstellung einer blätterbaren Tabelle]] | [[Datei:Pageable-table.png|frame|none|Darstellung einer blätterbaren Tabelle]] | ||
Zeile 390: | Zeile 504: | ||
==oK-Steuerelemente== | ==oK-Steuerelemente== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
+ | |||
===Topologie-Baum=== | ===Topologie-Baum=== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
+ | |||
Das Steuerelement bietet die Möglichkeit, [[Topologie (Strom)| topologische]] Zusammenhänge eines Stromnetzes hierarchisch darzustellen. | Das Steuerelement bietet die Möglichkeit, [[Topologie (Strom)| topologische]] Zusammenhänge eines Stromnetzes hierarchisch darzustellen. | ||
Der Topologie-Baum ist als gemeinsames Steuerelment in unterschiedlichen ok-Modulen wiederverwendbar und definiert eine standardisierte Sicht. Die generell möglichen, darstellbaren topologischen Elemente richten sich nach den in oK definierten Elementen. | Der Topologie-Baum ist als gemeinsames Steuerelment in unterschiedlichen ok-Modulen wiederverwendbar und definiert eine standardisierte Sicht. Die generell möglichen, darstellbaren topologischen Elemente richten sich nach den in oK definierten Elementen. | ||
Zeile 444: | Zeile 560: | ||
'''Ordnung/Sortierreihenfolge'''<br> | '''Ordnung/Sortierreihenfolge'''<br> | ||
− | + | ||
+ | <div style="background:#fff0d0;border-color:#ffb200;border-radius:5px;border-style:solid;border-width:1px;margin:16px;padding:10px">[[Datei:Warning-yellow.icon.svg|24px]]<br> | ||
+ | - Was für ein Steuerelement nutzt da BTC? <br> | ||
+ | - Wir müssten da einen Link bereitstellen ggf. mit Matthias Rohr oder Felix Korb besprechen <br></div> | ||
==Definition von ok HTML Elementen== | ==Definition von ok HTML Elementen== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
− | < | + | |
ok HTML Elemente müssen durch npm paketiert und oK-konform gestyled werden.<br> | ok HTML Elemente müssen durch npm paketiert und oK-konform gestyled werden.<br> | ||
Zeile 478: | Zeile 597: | ||
==Definition von Standard HTML Elementen== | ==Definition von Standard HTML Elementen== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
− | < | + | |
Standard HTML Elemente müssen nicht durch npm paketiert werden.<br> | Standard HTML Elemente müssen nicht durch npm paketiert werden.<br> | ||
Es ist ausreichend, ok-Styles als npm Pakete zu definieren und auf den HTML Elementen anzuwenden.<br> | Es ist ausreichend, ok-Styles als npm Pakete zu definieren und auf den HTML Elementen anzuwenden.<br> | ||
Zeile 499: | Zeile 618: | ||
<li> Tables (wenn keine besonder Funktionalität, sonst ag-grid)<br> | <li> Tables (wenn keine besonder Funktionalität, sonst ag-grid)<br> | ||
<br> | <br> | ||
− | + | Komponenten aus https://getbootstrap.com<br> | |
− | == | + | ==Portal== |
− | + | <p>zum Seitenanfang [[#top]]</p> | |
− | |||
− | + | ==Standarddialoge== | |
+ | <p>zum Seitenanfang [[#top]]</p> | ||
− | [ | + | ===Eingabedialog=== |
+ | <p>zum Seitenanfang [[#top]]</p> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
'''Darstellung''' | '''Darstellung''' | ||
[[Datei:Input-dialog.png|frame|none|Darstellung eines Eingabedialogs]] | [[Datei:Input-dialog.png|frame|none|Darstellung eines Eingabedialogs]] | ||
Zeile 529: | Zeile 638: | ||
===Benachrichtigungsdialog=== | ===Benachrichtigungsdialog=== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
+ | |||
'''Darstellung''' | '''Darstellung''' | ||
[[Datei:notification-dialog.png|frame|none|Darstellung eines Benachrichtigungsdialogs]] | [[Datei:notification-dialog.png|frame|none|Darstellung eines Benachrichtigungsdialogs]] | ||
Zeile 539: | Zeile 649: | ||
===Wizard=== | ===Wizard=== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
+ | |||
'''Darstellung''' | '''Darstellung''' | ||
[[Datei:Wizard.png|frame|none|Darstellung eines Wizards]] | [[Datei:Wizard.png|frame|none|Darstellung eines Wizards]] | ||
Zeile 551: | Zeile 662: | ||
===Message Toast=== | ===Message Toast=== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
+ | <br> | ||
Ein Message Toast ist ein kurzer Hinweistex welcher als Popup eingeblendet und nach einem Moment wieder ausgeblendet wird, ohne das zwangsläufig eine Benutzeraktion erfolgen muss.<br> | Ein Message Toast ist ein kurzer Hinweistex welcher als Popup eingeblendet und nach einem Moment wieder ausgeblendet wird, ohne das zwangsläufig eine Benutzeraktion erfolgen muss.<br> | ||
Die Eigenschaften eines Toast können beliebig konfiguriert werden.<br> | Die Eigenschaften eines Toast können beliebig konfiguriert werden.<br> | ||
Zeile 573: | Zeile 685: | ||
==Navigationselemente== | ==Navigationselemente== | ||
+ | <p>zum Seitenanfang [[#top]]</p> | ||
<br>Um das Navigieren innerhalb einer Web-Seite zu vereinfachen gibt es unterschiedliche Navigationselemente, diese werden in den folgenden Kapiteln kurz erläutert.<br> | <br>Um das Navigieren innerhalb einer Web-Seite zu vereinfachen gibt es unterschiedliche Navigationselemente, diese werden in den folgenden Kapiteln kurz erläutert.<br> | ||
===Navigation Bar (Navbar)=== | ===Navigation Bar (Navbar)=== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
+ | <br> | ||
Das Navbar-Element ist ein permanent sichtbares Navigationselement, welches horizontal oder vertikal auf einer Webseite angeordnet werden kann und dem Benutzer die | Das Navbar-Element ist ein permanent sichtbares Navigationselement, welches horizontal oder vertikal auf einer Webseite angeordnet werden kann und dem Benutzer die | ||
Möglichkeit bietet, wichtige Seiten direkt aufzurufen. Der Vorteil ist, dass eine Navbar für jede Seite separat konfiguriert werden kann.<br><br> | Möglichkeit bietet, wichtige Seiten direkt aufzurufen. Der Vorteil ist, dass eine Navbar für jede Seite separat konfiguriert werden kann.<br><br> | ||
Zeile 602: | Zeile 716: | ||
===Accordion=== | ===Accordion=== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
+ | <br> | ||
'''Beschreibung'''<br> | '''Beschreibung'''<br> | ||
Ein Accordion ist ein Navigationselement, welches dazu dient umfangreiche Listen mit Inhalten platzsparend auf Webseiten abzubilden.<br> | Ein Accordion ist ein Navigationselement, welches dazu dient umfangreiche Listen mit Inhalten platzsparend auf Webseiten abzubilden.<br> | ||
Zeile 614: | Zeile 729: | ||
===TabView=== | ===TabView=== | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
+ | <br> | ||
Eine TabView ist eine Komponente zum einfachen Gruppieren von Inhalten auf einer Seite in Form von Registerkarten. Auf jeder Registerkarte können z.B. Formulare implementiert werden, die durch den Anwender abgearbeitet werden müssen. Durch die Verwendung von Registerkarten wird ein schnelles Navigieren zwischen den einzelnen Inhalten ermöglicht. Zudem können diese Registerkarten je nach Anfordeung konfuguriert werden.<br> | Eine TabView ist eine Komponente zum einfachen Gruppieren von Inhalten auf einer Seite in Form von Registerkarten. Auf jeder Registerkarte können z.B. Formulare implementiert werden, die durch den Anwender abgearbeitet werden müssen. Durch die Verwendung von Registerkarten wird ein schnelles Navigieren zwischen den einzelnen Inhalten ermöglicht. Zudem können diese Registerkarten je nach Anfordeung konfuguriert werden.<br> | ||
Zeile 630: | Zeile 746: | ||
<h1 style="page-break-before:always">Barrierefreiheit</h1> | <h1 style="page-break-before:always">Barrierefreiheit</h1> | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
+ | |||
+ | Barrierefreiheit bezeichnet eine Gestaltung der baulichen Umwelt sowie von Informationsangeboten, Kommunikation usw. dergestalt, dass sie auch von Menschen mit Beeinträchtigungen ohne zusätzliche Hilfen genutzt und wahrgenommen werden können. | ||
+ | |||
+ | Um Menschen ein barrierefreies Arbeiten in der digitalen Welt zu ermöglichen, sind verschiedene Aspekte zu betrachten: Zum einen müssen Software und das heute nicht mehr wegzudenkende Internet barrierefrei gestaltet werden. Zum anderen muss einigen Menschen mit Behinderung überhaupt erst die Bedienung eines Computers ermöglicht werden durch unterstützende Technologien. Dies können beispielsweise Augensteuerung und Mundmaus bei körperlichen Behinderungen, oder Screenreader und Braillezeile bei Blinden sein. Weitere Beispiele stellen Technologien aus dem Bereich der Unterstützten Kommunikation dar, die Kommunikation in manchen Fällen überhaupt erst möglich machen. | ||
+ | |||
+ | Quelle: [ https://de.wikipedia.org/wiki/Barrierefreiheit ] | ||
<h1 style="page-break-before:always">Internationalisierung</h1> | <h1 style="page-break-before:always">Internationalisierung</h1> | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
+ | |||
+ | Internationalisierung bedeutet in der Informatik beziehungsweise in der Softwareentwicklung, ein Programm so zu gestalten, dass es leicht (ohne den Quellcode ändern zu müssen) an andere Sprachen und Kulturen angepasst werden kann. | ||
+ | |||
+ | Internationalisierung (englisch internationalization oder internationalisation) wird gerne mit dem Numeronym i18n abgekürzt (im englischen Wort Internationalization befinden sich 18 Buchstaben zwischen dem ersten Buchstaben I und dem letzten Buchstaben n). Hierunter fallen diejenigen Aufgaben, die der Entwickler/Programmierer eines Programms bewältigen muss. Dazu darf er zum Beispiel Beschreibungstexte nicht im Quellcode fest kodieren, sondern muss Variablen benutzen, die von einer Quelle zur Laufzeit eingelesen werden. Aber auch Datumsformatierungen und die sprachabhängige Oberflächengestaltung (z. B. kann Text unterschiedlich lang sein oder die Rechts-Nach-Links-Orientierung kann sich unterscheiden) gehören hierzu. | ||
+ | |||
+ | Im nächsten Schritt erfolgt die Lokalisierung (localization oder localisation), die als l10n abgekürzt wird (10 Buchstaben zwischen l und n). Ein Programm sollte im vorigen Schritt so gestaltet sein, dass diese Änderungen nicht mehr vom Programmierer durchgeführt werden müssen. Dieser Prozess bezeichnet die reine Übersetzung von zum Beispiel Texten in eine Landessprache. | ||
+ | |||
+ | Quelle: [ https://de.wikipedia.org/wiki/Internationalisierung_(Softwareentwicklung) ] | ||
<h1 style="page-break-before:always">allg. Usability-Richtlinien</h1> | <h1 style="page-break-before:always">allg. Usability-Richtlinien</h1> | ||
− | + | <p>zum Seitenanfang [[#top]]</p> | |
+ | |||
+ | Software-Ergonomie (zur Wortherkunft siehe Software und Ergonomie) ist die Arbeit hin zu leicht verständlicher und schnell benutzbarer Software unter den gebotenen technischen Möglichkeiten und unter der Einhaltung definierter bzw. empirisch entstandener Standards und Styleguides. Die Software-Ergonomie ist ein Teilgebiet der Mensch-Computer-Interaktion, und ihr Ergebnis ist die Gebrauchstauglichkeit von Computerprogrammen. | ||
+ | |||
+ | Gegenstandsbereich der Software-Ergonomie im eigentlichen Sinne ist der arbeitende Mensch im Kontext (Softwarenutzung an Arbeitsplätzen). Allgemein wird heute die Benutzung von bzw. die Interaktion mit Computern betrachtet. Dies bedeutet die Berücksichtigung (neuro)psychologischer Aspekte beim Entwerfen der Software – wie dies methodisch auch die Ingenieurpsychologie anstrebt –, um eine optimale Mensch-Maschine-Schnittstelle zur Verfügung zu stellen. Dies soll sich in besonders leicht verständlichen funktionalen Einheiten ausdrücken (Bsp. einfache Dialoge bei Systemen mit GUI). Die Entwicklung gebrauchstauglicher Software wird im Rahmen des Usability-Engineering geleistet. | ||
+ | |||
+ | Quelle: [ https://de.wikipedia.org/wiki/Software-Ergonomie] | ||
+ | |||
+ | <h1 style="page-break-before:always">Paketierung der Styles (customized Bootstrap Template und individuelle allg. oK Styles)</h1> | ||
+ | <p>zum Seitenanfang [[#top]]</p><br> | ||
− | + | Aufteilung der Stylse oK und eigene Unternehmensanpassungen.<br> | |
− | |||
− | |||
− | |||
<li> '''ok-common.saas'''<br> | <li> '''ok-common.saas'''<br> | ||
- Für Layout und globale Styles customized Bootstrap Template<br> | - Für Layout und globale Styles customized Bootstrap Template<br> | ||
Zeile 653: | Zeile 789: | ||
<br> | <br> | ||
Achtung: Unternehmensanpassungen (CI/CD) werden in eigenen neuen saas Dateien beschrieben! Dabei müssen die entsprechenden saas-Variablen überschrieben werden.<br> | Achtung: Unternehmensanpassungen (CI/CD) werden in eigenen neuen saas Dateien beschrieben! Dabei müssen die entsprechenden saas-Variablen überschrieben werden.<br> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− |
Aktuelle Version vom 18. Juli 2019, 08:28 Uhr
zurück zur Hauptseite zurück zur Styleguide
Inhaltsverzeichnis
- 1 Zielsetzung und Abgrenzung
- 2 Design
- 3 Komponenten
- 4 Layout
- 5 Barrierefreiheit
- 6 Internationalisierung
- 7 allg. Usability-Richtlinien
- 8 Paketierung der Styles (customized Bootstrap Template und individuelle allg. oK Styles)
Zielsetzung und Abgrenzung
zum Seitenanfang #top
Zielsetzung:
- IMIS
- Wiki
- sonst
Abgrenzung:
Design
zum Seitenanfang #top
Um ein einheitliches Design zu gewährleisten, müssen die verwendeten Farben, Formen und Schriftarten auf allen User Interfaces dem vorgegebenen StyleGuide entsprechen. Diese Vorgaben werden in den folgenden Kapiteln beschrieben.
Farben
zum Seitenanfang #top
In diesem Kapitel wird das abgestimmte Farbschema (Hauptfarben, Farbverläufe, Sekundärfarben, u. s. w.) und deren Verwendung auf Webseiten und User Interfaces erläutert. Zusätzlich finden Sie hier Informationen über den jeweiligen Farbcode und die CSS Codierung.
Hauptfarben
zum Seitenanfang #top
Bezeichnung | Farbe |
---|---|
Primary | #003a5f
|
Success | #80b300
|
Info | #0080c0
|
Default | #ffffff
|
Text | #333333
|
Farbverläufe
zum Seitenanfang #top
Bezeichnung | Farbe | CSS |
---|---|---|
Streifen Header | #79b61c - #0281c4
|
background: linear-gradient(to right, rgba(121, 182, 28, 1) 0%, rgba(2, 129, 196, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0);
|
Balken Header | #e8eee7- #e5edf2
|
background: linear-gradient(to right, rgba(232, 238, 231, 1) 0%, rgba(229, 237, 242, 1) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0);
|
Flächen und Linien
zum Seitenanfang #top
Bezeichnung | Farbe |
---|---|
Hintergrund | #f8fafd
|
Flächen/Tabellen | #f5f8fc
|
Hervorhebung/Eingabefelder/Tabellenzeilen | #e9f0f9
|
Linien | #ccdbe6
|
Umrandung Formularfelder | #b7cbda
|
Sekundärfarben
zum Seitenanfang #top
Bezeichnung | Farbe |
---|---|
Warning | #ffb200
|
Danger | #990000
|
Disabled | #567d96
|
Schriftarten
zum Seitenanfang #top
Ebenso wie das Farbschema unterliegen auch die zu verwendenden Schriftarten dem abgestimmten Styleguide. Bei der Verwendung von zu vielen unterschiedlichen Schriftarten und Schriftgrößen kann das User Interface schnell unruhig wirken. Die gewählte Schriftart sollte gut lesbar und nicht zu klein sein.
Schriftfamilie
zum Seitenanfang #top
Für openKONSEQUENZ wurde die Schriftart Source Sans Pro festgelegt. Diese Schriftart ist bei allen User Interfaces und Texten zu verwendet.
Rahmenabstände
zum Seitenanfang #top
offener Punkt
Symbole
zum Seitenanfang #top
In diesem Abschnitt werden allgemeine Bedien- und Status-Symbole beschrieben. Um ein einheitliches Aussehen der oK-Module sicherzustellen, sollen diese anwendungsübergreifend verwendet werden.
Symbol | Bezeichnung |
---|---|
Filter | |
Menü | |
Suche | |
Warnung | |
Kopieren | |
Bearbeiten | |
Speichern | |
Hinzufügen | |
Einstellung | |
Refresch | |
Löschen | |
Hilfe | |
Abbrechen |
Unter dem folgenden Link finden Sie weitere Symbole.
Web material-icons-Link
Lizenz: Apache license version 2.0 sollte/ist mit EPL kompatibel
Die folgende Darstelung zeigt eine Beispiel-Menüleiste mit Icon, die zum Aufrufen von definierten Funktionen verwendet werden.
technische Vorschläge
zum Seitenanfang #top
Komponenten
zum Seitenanfang #top
Komponenten sind die einzelnen Bestandteile einer grafischen Benutzeroberfläche /bzw. Benutzerschnittstelle. Im folgenden Abschnitt werden die unterschiedlichen Elemente kurz Erläutert.
Standard-Steuerelemente
zum Seitenanfang #top
Eingabefeld (text)
zum Seitenanfang #top
Ein Eingabefeld ist das meinst verwendete Steuerelement einer grafischen Benutzeroberfläche und dient der Interaktion mit dem Benutzer. Diese Textfelder können Ein- oder auch Mehrzeilig sein und über die Tastatur können beliebige Zeichenketten eingegeben werden.
Darstellung
inaktiv
aktiv
Führungstext (label)
zum Seitenanfang #top
Führungstexte (englich: label) gehören auch zu den Steuerelementen einer grafischen Benutzeroberfläche. Diese werden in der Regel dazu verwendet um Ein- oder Ausgabefelder, aber auch Radio Button oder Checkboxen zu beschriften.
Schaltfläche (button)
zum Seitenanfang #top
Ein häufig genutztes Steuerelement für grafische Benutzeroberflächen ist die Schaltfläche (englisch: button). Mittels dieser Schaltflächen können Formulare abgesendet oder definierte Aktionen durchgeführt werden.
Farben
Schaltfläche | Hintergrundfarbe | Konturfarbe | Textfarbe |
---|---|---|---|
#003a5f
|
#002a45
|
#ffffff
| |
#ffffff
|
#b7cbda
|
#0b325c
| |
#80b300
|
#6e9a00
|
#ffffff
| |
#0080c0
|
#006fa7
|
#ffffff
| |
#ffb200
|
#e6a000
|
#ffffff
| |
#990000
|
#800000
|
#ffffff
| |
#337ab7
|
#2e6da4
|
#ffffff
|
Die folgende Abbildung zeigt Beispielhaft eine Menüleiste mit Schaltflächen über diese definierte Funktionen aufgerufen werden können.
Auswahl (check-box)
zum Seitenanfang #top
Die Auswahl (englisch: checkbox) ist ein einfaches Steuerelement zur Eingabe von Ja/Nein-Werten, welche durch einen Mausklick aktiviert oder deaktiviert werden kann. Dieses Element findet meist auf Formularen Verwendung, wenn z. B. die Datenschutzbestimmungen oder die allgemeinen Geschäftsbedingungen anerkannt werden müssen.
Darstellung
Beispiel für die Verwendung von Auswahlfeldern.
Auswahllisten (MultiSelect)
zum Seitenanfang #top
Ein weiteres Steuerelement ist die Auswahlliste (englisch: multiselect) und dient der Auswahl von mehreren Objekten aus einer Liste. Die Darstellungsform solcher Auswahllisten kann variieren.
Weitere Informationen finden sie unter den folgende Verlinkungen.
Web primeng-multiselect-Link
Web primeng-chips-Link
Darstellung
Beispiel einer Auswahlliste als Dropdown.
Die Attribute dieser Auswahlliste
Beispiel einer Auswahlliste als Chips.
In einem Eingabefeld werden mehrere Werte in Form von Chips eingefügt.
Die Attribute dieser Auswahlliste können
Beide Steuerelemente können kombiniert eingesetzt werden
Dropdown-Liste (drop-down list)
zum Seitenanfang #top
Die Dropdown-Liste (englisch: drop-down-list) ist ein Textfeld welches eine Auflistung von benutzerdefinierten Werte enthält aus der ein Anwender einen Eintrag auswählen kann. Diese Dropdown-Liste kann um weitere Elemente wie zum Beispiel ein Scrollbalken, eine Filterfunktion oder auch Icon erweitert werden. Zusätzlich besteht die Möglichkeit Einträge dieser Liste zu Gruppieren, um diese Übersichtlich zu Gestalten.
Darstellung
Darstellung einer inaktiven Dropdown-Liste.
Darstellung einer aktiven Dropdown-Liste.
Darstellung einer aktiven Dropdown-Liste inklusive Icon, Filter und einem Scrollbalken.
Darstellung einer aktiven Dropdown-Liste inklusive Gruppierung.
Kalender (calendar)
zum Seitenanfang #top
In der Regel umfasst ein Datums- und / oder Uhrzeitfeld eine Kalenderauswahl, so das ein Datum nicht händisch als String eingegeben werden muss. Durch klick in das Textfeld, öffnet sich ein Kalenderfenster, aus dem das gewünschte Datum und die Uhrzeit auswählt werden kann.
Darstellung
Suche
zum Seitenanfang #top
Eine Suchfunktion dient dazu, dass aus einem großem Datenbestand nur ein bestimmter Datensatz anhand verschiedener Kriterien angezeigt wird.
Beispiel für die Verwendung einer Suchfunktion.
Filter
zum Seitenanfang #top
Eine Filterfunktion dient dazu, dass aus einem großem Datenbestand nur bestimmte Datensätze anhand verschiedener Kriterien in einer Ergebnisliste angezeigt werden.
Beispiel für die Verwendung von Filtern.
Netzspezifische Icons
zum Seitenanfang #top
offener Punkt, Klärungsbedarf
Steuerelemente für Formulare
zum Seitenanfang #top
Zur Erfassung von Daten werden Eingabe- und Auswahlfelder bereitgestellt, in die ein Benutzer Werte über die Tastatur oder eine Werteliste eingeben kann oder Auswahlknöpfe, die der Benutzer mit der Maus beeinflusst. Hierbei werden Pflichtfelder (müssen gefüllt werden und sind mit einem Sternchen entsprechend gekennzeichnet) und Kann-Felder (können gefüllt werden) unterschieden. In der folgenden Tabelle finden Sie eine Auflisten der möglichen Steuerelemente für Formulare. Auf die einzelnen Elemente wird in den folgenden Abschnitten weiter eingegangen.
Pflichtfeld Typ | Visualisierung |
---|---|
text invalid | |
text valid | |
numeric valid | |
date,datetime,date range valid | |
Gesperrt | |
Drop-Down valid | |
Validierung beim Verlassen eines Feldes |
Steuerelement Kalender
zum Seitenanfang #top
Darstellung
In der Kalenderfunktion stehen dem Benutzer folgende Ansichten zur Verfügung:
Bei der Kalenderfunktion hat der Anwender die Möglichkeit von durch einen Klick auf die (Arbeits-)Wochen- oder Tagesansicht zu wechseln. Durch Klicken mit der Maustaste in einen freien Zeitraum können neue Termine erfasst werden. Für eine neue Terminspanne markieren Sie einen freien Bereich durch SHIFT und Klick mit der linken Maustaste und erfassen für diesen Zeitraum einen Termin. Zum Editieren von bestehen den Terminen genügt ebenfalls ein Klick mit der Maustaste.
Über die ‘‘‘Drag & Drop‘‘‘ Funktion können Termine in der Monatsansicht oder der Wochenansicht in einen anderen Wochentag verschoben werden. Um einen Termin zeitlich innerhalb eines Tages zu verschieben und Zeitspanne anzupassen, müssen Sie sich in der Wochenansicht oder der Tagesansicht befinden.
Folgende Funktionen stehen zusätzlich zur Verfügung:
Steuerelement Grid
zum Seitenanfang #top
- Schriftrart
- Schriftgröße
- Zeilenhöhe
- Farben
- Style fürs Grid
Web ag-grid-Link
Beispiel einer Verwendung von Steuerelementen auf einem Grid.
Steuerelement Heatmap / Kartendarstellung
zum Seitenanfang #top
Ermöglicht das Einbinden von zweidimensionalen Karten-Elementen auf Webseiten, Mobile Apps sowie für Navigationen. Diese Kartendarstellungen sind von Standortdaten angetrieben und bieten zusätzlich Echtzeit-Updates. Durch einen Entwickler können diese vollständig angepasst und konfiguriert werden. Das Hinzufügen von Points of Interest, Live-Standortdaten und Persistenz globaler Objekte ist ebenfalls möglich.
- Unterstützt WMS-Services (Web Map Service)
- OpenSreetMap muss Lizenz geklärt werden! ODbL.
Lizenzkompatibilität muss beim Projekt geklärt werden
Layout
zum Seitenanfang #top
Tabellen/Listen
zum Seitenanfang #top
Tabelle
zum Seitenanfang #top
Darstellung
Elemente
1 Tabellenkopf
1.1 Spaltenüberschrift
1.2 Sortiereinstellungen
1.3 Spaltenkopf
1.4 Spaltenfilter
1.5 Spaltensortierung
2 Tabelleninhalt
3 Tabellenfuß
3.1 Spaltenfuß
blätterbare Tabelle
zum Seitenanfang #top
Darstellung
Elemente
1 Tabellenkopf
1.1 Spaltenüberschrift
1.2 Sortiereinstellungen
1.3 Spaltenkopf
1.4 Spaltenfilter
1.5 Sortierung
2 Tabelleninhalt
3 Seitennavigation
oK-Steuerelemente
zum Seitenanfang #top
Topologie-Baum
zum Seitenanfang #top
Das Steuerelement bietet die Möglichkeit, topologische Zusammenhänge eines Stromnetzes hierarchisch darzustellen. Der Topologie-Baum ist als gemeinsames Steuerelment in unterschiedlichen ok-Modulen wiederverwendbar und definiert eine standardisierte Sicht. Die generell möglichen, darstellbaren topologischen Elemente richten sich nach den in oK definierten Elementen.
Die Klärung der Frage, wie ein Netz hierarchisch dargestellt werden kann und welche Elemente des Netzes tatsächlich angezeigt und ausgewählt werden können, ist nicht Aufgabe dieses Steuerelementes. Dies ist Aufgabe der darunter liegenden Anwendung und kann aufgrund fachlicher Aspekte unterschiedlich ausgeprägt sein.
Elemente
1 Steuerleiste
1.1 Suchbegriff
Im Eingabefeld "Suchbegriff" können Begriffe eingeben werden, nach denen in der zugrundeliegenden Topologie gesucht werden kann.
Die Begriffe können folgende Platzhalter (Wildcard) beinhalten:
Platzhalter | Bezeichnung | Verwendung |
---|---|---|
? | Fragezeichen | Platzhalter für genau ein Zeichen |
* | Sternchen | Platzhalter für beliebig viele (auch null) Zeichen |
# | Doppelkreuz | Platzhalter für einen numerischen Wert |
1.2 Suchen
Durch Drücken der Schaltfläche "Suchen", wird nach dem angegebenen Suchbegriff gesucht. Ist die Suche erfolgreich, werden alle Elemente im Navigationsbereich ausgewählt (Mehrfachselektion), die dem Suchbegriff entsprechen. Gleichzeit wird zum ersten Element aus der Ergebnismenge gesprungen.
1.3 Einstellungen
Über die Schaltfläche "Einstellungen" können Filterkriterien definiert werden, die die Anzeige auf passende topologische Elemente im Navigationsbereich einschränken.
2 Statusleiste
Die Statusleiste zeigt allgemeine Informationen zu den im Navigationsbereich angezeigten Elementen an.
2.1 Datum
Das Erstellungsdatum (Stand) der zugrundeliegenden Daten, auf dem die Anzeige im Navigationsbereich basiert.
2.2 Uhrzei
Die Erstellungsuhrzeit(Stand) der zugrundeliegenden Daten, auf dem die Anzeige im Navigationsbereich basiert.
2.3 Filter
Das Symbol "Filter" zeigt an, ob mindestens ein Filter aktiviert ist.
2.4 Benachrichtigung
Im Benachrichtigungsbereich können verschiedene Symbole angezeigt werden, die über zusätzliche Hinweise informieren. In Beispiel ist liegt hier eine Warnungmeldung vor.
3 Navigationsbereich
Im Navigationsbereich werden topologische Zusammenhänge in einer baumartigen Struktur angezeigt. Die Ausprägung der Topologie als Hierarchie ist Aufgabe der jeweiligen Anwendung.
Ordnung/Sortierreihenfolge
- Was für ein Steuerelement nutzt da BTC?
Definition von ok HTML Elementen
zum Seitenanfang #top
ok HTML Elemente müssen durch npm paketiert und oK-konform gestyled werden.
Zu den oK HTML Elemente zählen:
ACHTUNG: Nicht definierte ok Steuerlemente immer erst bei primeng schauen!
Weitere Steuerlemente müssen über SaaS Themeable sein!
Definition von Standard HTML Elementen
zum Seitenanfang #top
Standard HTML Elemente müssen nicht durch npm paketiert werden.
Es ist ausreichend, ok-Styles als npm Pakete zu definieren und auf den HTML Elementen anzuwenden.
Zu den Standard HTML Elemente zählen:
Komponenten aus https://getbootstrap.com
Portal
zum Seitenanfang #top
Standarddialoge
zum Seitenanfang #top
Eingabedialog
zum Seitenanfang #top
Darstellung
Elemente
1 Titel
2 Anzeige-/Eingabebereich
3 Steuerleiste
Benachrichtigungsdialog
zum Seitenanfang #top
Darstellung
Elemente
1 Titel
2 Benachrichtigung
3 Steuerleiste
Wizard
zum Seitenanfang #top
Darstellung
Elemente
1 Überschrift
2 Bearbeitungsschritte
3 Inhalt
4 Steuerleiste
Message Toast
zum Seitenanfang #top
Ein Message Toast ist ein kurzer Hinweistex welcher als Popup eingeblendet und nach einem Moment wieder ausgeblendet wird, ohne das zwangsläufig eine Benutzeraktion erfolgen muss.
Die Eigenschaften eines Toast können beliebig konfiguriert werden.
Darstellung
Für open KONSEQUENZ wurden folgende Konfigurationen abgestimmt
Erfolgreich: 2 Sekunden
Info: Muss manuell geschlossen werden
Warnung: 7 Sekunden
Fehler: 7 Sekunden
Web primeng-Toast-Link
zum Seitenanfang #top
Um das Navigieren innerhalb einer Web-Seite zu vereinfachen gibt es unterschiedliche Navigationselemente, diese werden in den folgenden Kapiteln kurz erläutert.
zum Seitenanfang #top
Das Navbar-Element ist ein permanent sichtbares Navigationselement, welches horizontal oder vertikal auf einer Webseite angeordnet werden kann und dem Benutzer die
Möglichkeit bietet, wichtige Seiten direkt aufzurufen. Der Vorteil ist, dass eine Navbar für jede Seite separat konfiguriert werden kann.
Darstellung
Vorteile einer Navbar:
Nachteile einer Navbar:
Web primeng-menubar-Link
Accordion
zum Seitenanfang #top
Beschreibung
Ein Accordion ist ein Navigationselement, welches dazu dient umfangreiche Listen mit Inhalten platzsparend auf Webseiten abzubilden.
Web primeng-accordion-Link
Darstellung
Einzelselektion
Mehrfachselektion
TabView
zum Seitenanfang #top
Eine TabView ist eine Komponente zum einfachen Gruppieren von Inhalten auf einer Seite in Form von Registerkarten. Auf jeder Registerkarte können z.B. Formulare implementiert werden, die durch den Anwender abgearbeitet werden müssen. Durch die Verwendung von Registerkarten wird ein schnelles Navigieren zwischen den einzelnen Inhalten ermöglicht. Zudem können diese Registerkarten je nach Anfordeung konfuguriert werden.
Für openKONSEQUENZ wurden folgende Konfigurationen vorgegeben:
Barrierefreiheit
zum Seitenanfang #top
Barrierefreiheit bezeichnet eine Gestaltung der baulichen Umwelt sowie von Informationsangeboten, Kommunikation usw. dergestalt, dass sie auch von Menschen mit Beeinträchtigungen ohne zusätzliche Hilfen genutzt und wahrgenommen werden können.
Um Menschen ein barrierefreies Arbeiten in der digitalen Welt zu ermöglichen, sind verschiedene Aspekte zu betrachten: Zum einen müssen Software und das heute nicht mehr wegzudenkende Internet barrierefrei gestaltet werden. Zum anderen muss einigen Menschen mit Behinderung überhaupt erst die Bedienung eines Computers ermöglicht werden durch unterstützende Technologien. Dies können beispielsweise Augensteuerung und Mundmaus bei körperlichen Behinderungen, oder Screenreader und Braillezeile bei Blinden sein. Weitere Beispiele stellen Technologien aus dem Bereich der Unterstützten Kommunikation dar, die Kommunikation in manchen Fällen überhaupt erst möglich machen.
Quelle: [ https://de.wikipedia.org/wiki/Barrierefreiheit ]
Internationalisierung
zum Seitenanfang #top
Internationalisierung bedeutet in der Informatik beziehungsweise in der Softwareentwicklung, ein Programm so zu gestalten, dass es leicht (ohne den Quellcode ändern zu müssen) an andere Sprachen und Kulturen angepasst werden kann.
Internationalisierung (englisch internationalization oder internationalisation) wird gerne mit dem Numeronym i18n abgekürzt (im englischen Wort Internationalization befinden sich 18 Buchstaben zwischen dem ersten Buchstaben I und dem letzten Buchstaben n). Hierunter fallen diejenigen Aufgaben, die der Entwickler/Programmierer eines Programms bewältigen muss. Dazu darf er zum Beispiel Beschreibungstexte nicht im Quellcode fest kodieren, sondern muss Variablen benutzen, die von einer Quelle zur Laufzeit eingelesen werden. Aber auch Datumsformatierungen und die sprachabhängige Oberflächengestaltung (z. B. kann Text unterschiedlich lang sein oder die Rechts-Nach-Links-Orientierung kann sich unterscheiden) gehören hierzu.
Im nächsten Schritt erfolgt die Lokalisierung (localization oder localisation), die als l10n abgekürzt wird (10 Buchstaben zwischen l und n). Ein Programm sollte im vorigen Schritt so gestaltet sein, dass diese Änderungen nicht mehr vom Programmierer durchgeführt werden müssen. Dieser Prozess bezeichnet die reine Übersetzung von zum Beispiel Texten in eine Landessprache.
Quelle: [ https://de.wikipedia.org/wiki/Internationalisierung_(Softwareentwicklung) ]
allg. Usability-Richtlinien
zum Seitenanfang #top
Software-Ergonomie (zur Wortherkunft siehe Software und Ergonomie) ist die Arbeit hin zu leicht verständlicher und schnell benutzbarer Software unter den gebotenen technischen Möglichkeiten und unter der Einhaltung definierter bzw. empirisch entstandener Standards und Styleguides. Die Software-Ergonomie ist ein Teilgebiet der Mensch-Computer-Interaktion, und ihr Ergebnis ist die Gebrauchstauglichkeit von Computerprogrammen.
Gegenstandsbereich der Software-Ergonomie im eigentlichen Sinne ist der arbeitende Mensch im Kontext (Softwarenutzung an Arbeitsplätzen). Allgemein wird heute die Benutzung von bzw. die Interaktion mit Computern betrachtet. Dies bedeutet die Berücksichtigung (neuro)psychologischer Aspekte beim Entwerfen der Software – wie dies methodisch auch die Ingenieurpsychologie anstrebt –, um eine optimale Mensch-Maschine-Schnittstelle zur Verfügung zu stellen. Dies soll sich in besonders leicht verständlichen funktionalen Einheiten ausdrücken (Bsp. einfache Dialoge bei Systemen mit GUI). Die Entwicklung gebrauchstauglicher Software wird im Rahmen des Usability-Engineering geleistet.
Quelle: [ https://de.wikipedia.org/wiki/Software-Ergonomie]
Paketierung der Styles (customized Bootstrap Template und individuelle allg. oK Styles)
zum Seitenanfang #top
Aufteilung der Stylse oK und eigene Unternehmensanpassungen.
- Für Layout und globale Styles customized Bootstrap Template
- ok-CI/CD
- Nur für die Componenten-Styles von Drittanbietern
(z.B.: primeng, ag-grid, c3.js, d3.js)
- Nur für ok-Components
(z.B.: NavBar)
Achtung: Unternehmensanpassungen (CI/CD) werden in eigenen neuen saas Dateien beschrieben! Dabei müssen die entsprechenden saas-Variablen überschrieben werden.