Zeit & Prozess
Zeitachsen, Schrittfolgen, Anleitungsschritte mit Bild und Platzhalter für fehlende Medien.
LmsTimeline
Entstehungsgeschichte
OriginTimeline nahm direkt Nuxt UIs TimelineItem entgegen. Hier gibt es eigene Feldnamen, damit die Bibliothek keine fremde Typform durchreicht.
Fortschritt bis Station 2
active markiert, bis wohin die Achse als durchlaufen gilt. Ohne Angabe bis zum Ende.
LmsSteps
Variante list
Der Standard. Löst LearningPath samt PathStep ab.
- 1
Betroffenheit prüfen
Sektor
30 Min - 2
Verantwortung klären
Eine Person benennen
Geschäftsleitung - 3
Risiken erfassen
Was kann ausfallen
Art. 21jährlich - 4
Meldekette festlegen
Wer meldet wann an wen?
Mit Zielpanel
target löst ProcessChain.target ab.
- 1
Erkennen
Vorfall wird bemerkt
- 2
Bewerten
Ist er erheblich?
- 3
Melden
Frühwarnung binnen 24 Stunden
Ziel der Meldung
BSI
Bundesamt für Sicherheit in der Informationstechnik
Variante stepper
Blendet die Schritte einzeln ein. Löst KmuStepFlow ab. Der Zustand ist reine Navigation, kein Lernfortschritt — deshalb ohne id.
Laden Sie eine Authenticator-App aus dem offiziellen Store Ihres Geräts.
LmsImageStep
Anleitungsschritt
Ohne src erscheint links ein Platzhalter. Die fest eingebaute Zeile "Anleitung Seriendruck" ist jetzt das freie Prop eyebrow.
Empfängerliste verknüpfen
Slot statt text
Seriendruckfelder einfügen
Setzen Sie den Cursor an die Stelle, an der der Name stehen soll.
- Sendungen › Seriendruckfeld einfügen
- Feld
Anredewählen - Leerzeichen, dann Feld
Nachname
LmsPlaceholder
Drei Arten
FxTimeline
Ab hier Bausteine aus Inspira UI (MIT), dekorativ. Beachte den Unterschied
zu LmsTimeline: jenes ist eine kompakte Achse, dieses eine ganzseitige
Scroll-Erzählung mit mitlaufender Fortschrittslinie.
Scroll-Zeitachse
Die Linie links wächst mit dem Scrollen mit.
Der Weg zur Richtlinie
Von NIS-1 bis zur Umsetzungsfrist.
2016
2023
2024
FxSafariMockup
Screenshot im Browserrahmen
Zeigt Anleitungsbilder im Kontext statt nackt.
FxIphoneMockup
Screenshot im Telefonrahmen
LmsPipeline
Rechenweg als Kette
Für Abläufe, bei denen die Reihenfolge die Aussage ist. Der letzte Schritt trägt highlight.
Code = HMAC-SHA1(Schlüssel, ⌊Zeit ÷ 30⌋) mod 10⁶
App und Server rechnen unabhängig denselben Wert — ganz ohne Datenaustausch. Aus dem Code lässt sich der Schlüssel nicht zurückrechnen.
Drei Stationen
Weniger Schritte, mehr Text je Station.
LmsCountdown
Eine Jahreszahl im Text bleibt abstrakt; eine Zahl, die sichtbar kleiner wird, nicht. Deshalb steht dieser Baustein über einer Umsetzungsfrist und nicht als Dekoration in einem Kopfbereich.
Die Fläche bleibt in beiden Modi dunkel — wie LmsCta, und aus demselben
Grund über neutral-950 statt bg-inverted. Eine Fallblattanzeige ist schwarz;
das ist ihre Form, nicht ihr Farbschema. Die Neutral-Palette kommt weiterhin aus
dem Theme: mit neutral: 'stone' wird sie warm-dunkel.
Die Quelle hielt dafür eine requestAnimationFrame-Schleife am Laufen und
rechnete in jedem zehnten Durchlauf. Hier zählt ein Zeitgeber viermal je
Sekunde.
Bis zu einer Frist
Ohne Sekundenfeld — bei einer Frist in Jahren zählt es niemand mit.
Bis zur nächsten Umsetzungsfrist
Der Zeitpunkt ist erfunden und dient nur der Anschauung.
Als Uhr
Ohne target zeigt der Baustein die laufende Uhrzeit — dann entfällt das Tagesfeld.
Nach dem Ablauf
Ein Zeitpunkt in der Vergangenheit. celebrate ersetzt die Anzeige — auf null gefallene Blätter sagen nichts mehr.
Wir starten bald!
Dazu gibt es confetti — hier bewusst aus, damit der Katalog beim Durchblättern nicht ständig knallt.
Ein Fahrplan aus vorhandenen Bausteinen
Für eine Roadmap braucht es keinen eigenen Baustein: LmsHeading je Jahr,
darunter LmsSteps. Ein dritter Baustein für dieselbe Achse wäre die Dublette,
die diese Bibliothek gerade abgebaut hat.
LmsSteps nummeriert und hat Platz für Fließtext; wenn es eher um Zeitpunkte
als um Reihenfolge geht, nehmen Sie stattdessen LmsTimeline.
Zwei Jahre
Überschrift plus Schrittfolge — dieselbe Darstellung wie eine eigene Roadmap-Komponente, ohne eine zu sein.
2026
- 1
Lernpfad Grundschutz
Elf Nuggets zu Betroffenheit
- 2
Gewohnheiten
Vorsätze aus den Modulen in den Alltag übernehmen.
- 3
Abzeichen
Sichtbarer Fortschritt über Wochen statt über Minuten.
2027
- 1
Nachweisführung
Wirksamkeit der Schulungen belegbar machen.
- 2
Branchenmodule
Zuschnitt auf einzelne Sektoren des Anhangs I.
LmsChronicle
Der Unterschied zu LmsTimeline ist die Aufmerksamkeit: dort stehen alle
Stationen nebeneinander und man überblickt den Bogen, hier steht eine groß
da und man geht sie durch. Das lohnt sich, sobald je Station mehr steht als eine
Zeile — bei acht Stichpunkten ist die Übersicht besser.
Übernommen aus einem H5P-Paket (H5P.Timeline auf TimelineJS-Basis). Die
Zeitangabe ist hier Freitext statt 2024,10: was dort steht, soll gelesen
werden. Alle Stationen bleiben im Dokument, nur verborgen — so findet die
Seitensuche sie, und wer druckt, bekommt nicht sieben leere Achtel.
Entstehungsgeschichte der NIS-2
Acht Stationen. Die Punktleiste ist zugleich Navigation und Übersicht.
Entstehungsgeschichte der NIS-2
Von der ersten Richtlinie bis zum deutschen Umsetzungsgesetz.
2015
NIS-1
Ein Mindestniveau an IT-Sicherheit in der EU soll sichergestellt werden.
1 von 8