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.
Marker für heute
today setzt einen Marker auf den heutigen Tag. Er steht zwischen den Stationen, nicht an einer — und rückt von selbst weiter, ohne dass jemand den Text anfasst.
Der Marker liest die Zeitangaben der Stationen selbst: 2024, 2024-10,
Oktober 2024, 17.10.2024 und October 2024 versteht er. Was er nicht lesen
kann — Sommer 2024, Phase 2 —, bekommt bei Bedarf ein datetime daneben;
der Fließtext bleibt dabei, wie er gemeint war. Trägt keine Station eine
lesbare Angabe, bleibt der Marker weg: eine Achse aus vier Schritten ist keine
Zeitachse, auch wenn sie so aussieht.
LmsSteps
Variante list
Der Standard. Löst LearningPath samt PathStep ab.
- 1
Betroffenheit prüfen
Sektor, Größe und Umsatz abgleichen
30 Min - 2
Verantwortung klären
Eine Person benennen, Vertretung regeln
Geschäftsleitung - 3
Risiken erfassen
Was kann ausfallen, was kostet das?
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
Bildschirmfoto groß
Das Bild steht ganz in seinem Format (fit contain ist die Vorgabe). layout wide gibt ihm drei Fünftel der Breite, stacked die ganze. Ein Klick öffnet es groß.
Eine Mail mit Platzhaltern
Dieselbe Mail, ausgefüllt
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. Je Eintrag ein Slot, benannt nach dessen id — ohne ihn bleibt die Station leer.
Der Weg zur Richtlinie
Von NIS-1 bis zur Umsetzungsfrist.
2016
Die erste EU-Richtlinie zur Netz- und Informationssicherheit tritt in Kraft.
2023
NIS-2 löst sie ab — deutlich größerer Anwendungsbereich.
2024
Am 17. Oktober läuft die Frist für die Umsetzung in nationales Recht.
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, Meldewegen und Risikomanagement.
- 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
Mit Marker für heute
today setzt ein Fähnchen über die Punktleiste, an die Stelle zwischen den Stationen, an der wir heute stehen. Ein Klick darauf springt dorthin. Die Station „Sommer 2027" zeigt, wozu datetime da ist.
Der Weg zur Rezertifizierung
Wo wir stehen, sagt der Marker — er rückt mit dem Kalender weiter.
Januar 2026
Bestandsaufnahme
Prozesse, Rollen und Systeme sind erfasst und bewertet.
1 von 6