Warum Blocksy?

Ausschlaggebend für den Wechsel waren vor allem die Aktualität, die kontinuierliche Weiterentwicklung und die bessere mobile Darstellung. Blocksy bietet eine moderne Grundlage für WordPress und den Blockeditor sowie umfangreiche Möglichkeiten zur Anpassung von Layout, Navigation und Seitenelementen. Insbesondere auf Smartphones wirkt die Website nun übersichtlicher und reagiert spürbar schneller.

Ein weiterer wichtiger Faktor war die Geschwindigkeit bei der Behebung von Fehlern. Nach WordPress-Updates kam es bei Customify wiederholt zu Problemen, die teilweise längere Zeit ungelöst blieben oder mehrere Korrekturen erforderten. Bei Blocksy wurden vergleichbare Fehler meiner Erfahrung nach deutlich schneller und meist ohne zusätzliche Revisionen behoben. Das erleichtert die Wartung und sorgt für eine zuverlässigere Grundlage bei zukünftigen WordPress-Updates.

Version 8: Die nächste Entwicklungsstufe

Seit dem Start meines Blogs im Jahr 2008 hat sich die Website mehrfach verändert. Mit Blocksy (WordPress) folgt nun die achte größere Überarbeitung.

Auch gestalterisch bringt der Wechsel zu Blocksy einige Veränderungen mit sich. Die Website erhält ein moderneres, übersichtlicheres Erscheinungsbild, das sich insbesondere in folgenden Bereichen zeigt:

• Modernere Gesamtoptik
• Großzügigere Abstände
• Aufgeräumtere Navigation
• Modernere Beitragsvorschauen
• Dezentere Gestaltungselemente
• Stimmigere mobile Darstellung

Im Zuge der Umstellung habe ich unter anderem die Darstellung von Beiträgen, Tabellen, Codeblöcken und weiteren Gestaltungselementen noch angepasst. Bestehende CSS-Anpassungen mussten dabei teilweise überarbeitet oder durch Funktionen des neuen Themes ersetzt werden.

Siehe auch:

• Version 7 – WordPress mit Customify-Theme
• Version 6 – Joomla mit Magazine-Theme
• Versionen 1-5 – MediaWiki, WordPress und Joomla

Fazit

Mit Version 8 erhält mein Blog eine modernisierte technische und gestalterische Grundlage. Die überarbeitete Darstellung sorgt insbesondere auf mobilen Geräten für eine übersichtlichere Navigation und ein einheitlicheres Erscheinungsbild.

Neben den umfangreichen Anpassungsmöglichkeiten waren vor allem die kontinuierliche Weiterentwicklung des Themes und die schnelleren Reaktionszeiten des Herstellersupports ausschlaggebend. Dadurch erhoffe ich mir langfristig weniger Anpassungsaufwand und eine zuverlässigere Kompatibilität mit zukünftigen WordPress-Versionen.

Der Beitrag Theme-Wechsel von Customify zu Blocksy erschien zuerst auf Maximilian Krieg.

Deshalb habe ich mich entschieden, Beszel als schlanke Monitoring-Lösung auf meinem VPS einzusetzen.

Warum zusätzlich zu Dockhand?

Für die Verwaltung meiner Docker-Container verwende ich bereits Dockhand. Damit lassen sich Container, Stacks und deren aktueller Zustand komfortabel verwalten.

Was mir derzeit allerdings fehlt, ist eine vernünftige Langzeitansicht der Systemressourcen. Ich möchte nicht nur sehen, wie stark mein VPS gerade ausgelastet ist, sondern auch nachvollziehen können, wie sich der Ressourcenverbrauch über mehrere Tage oder Wochen entwickelt.

Genau hier soll Beszel ansetzen. Dockhand bleibt weiterhin für die Containerverwaltung zuständig, während Beszel die Ressourcenüberwachung übernimmt.

Was ist Beszel?

Beszel ist eine leichtgewichtige, quelloffene Monitoring-Lösung, die sich besonders für kleinere Serverumgebungen und Homelabs eignet.

Die Software besteht aus zwei Komponenten:

• Beszel Hub: Zentrale Weboberfläche zur Anzeige und Auswertung der Messwerte.
• Beszel Agent: Erfasst die Systeminformationen und übermittelt sie an den Hub.

Neben klassischen Systemmetriken kann Beszel auch den Ressourcenverbrauch einzelner Docker-Container erfassen.

Damit eignet sich die Software gut für meinen VPS, ohne gleich eine umfangreiche Monitoring-Infrastruktur mit Prometheus und Grafana aufbauen zu müssen.

Welche Ressourcen möchte ich überwachen?

Im Mittelpunkt steht die langfristige Entwicklung der Ressourcenauslastung.

Besonders wichtig ist mir dabei die Überwachung des Festplattenspeichers. Damit Beszel die Speicherplatzbelegung der primären Systempartition korrekt überwachen konnte, musste nach der initialen Bereitstellung zusätzlich die Umgebungsvariable FILESYSTEM im Beszel-Agent definiert werden.

    environment:
      [...]
      FILESYSTEM: "vda1"

Einblicke in das Monitoring

Systemübersicht

Die Gesamtübersicht zeigt die wichtigsten Ressourcen meines VPS auf einen Blick. Dazu gehören unter anderem CPU-Auslastung, Arbeitsspeicher und Festplattenbelegung. So lässt sich schnell erkennen, wie stark das System ausgelastet ist und wie sich die Werte im Zeitverlauf entwickeln. Die Ansicht lässt sich zwischen Tabelle und Raster (siehe Bild) umstellen.

Netzwerk-Monitore

Die Netzwerk-Monitore zeigen die Ergebnisse verschiedener Prüfungen, die der Beszel-Agent durchführt. Dazu gehören unter anderem Ping-Tests, DNS-Namensauflösung, HTTP-Requests und weitere Netzwerkchecks. So lassen sich Erreichbarkeitsprobleme, erhöhte Antwortzeiten oder Störungen bei der Namensauflösung frühzeitig erkennen.

Ressourcen-Detailansicht

In der Detailansicht lässt sich der Ressourcenverbrauch einzelner Docker-Container genauer betrachten. Damit kann ich beispielsweise feststellen, welche Anwendungen besonders viel RAM oder CPU benötigen und wie sich Konfigurationsänderungen auf deren Auslastung auswirken.

Benachrichtigungen über Discord

Wie bei meinen anderen Diensten sollen auch die Benachrichtigungen von Beszel über Discord erfolgen. So kann ich beispielsweise über kritische Ressourcenauslastungen oder knapp werdenden Speicherplatz informiert werden, ohne regelmäßig die Monitoring-Oberfläche öffnen zu müssen.

Die Webhook-URL wird in Discord erstellt und hat folgendes Format:

https://discord.com/api/webhooks/WEBHOOKID/TOKEN

Für Beszel muss die URL in folgendes Format umgewandelt werden:

discord://TOKEN@WEBHOOKID

E-Mail-Benachrichtigungen, wie ich sie während jedem Setup erstmal einrichte, wären möglicherweise die robustere Variante, da sie weniger von einem für mich nicht steuerbaren Provider abhängig sind. Allerdings möchte ich vermeiden, dass meine Postfächer durch exzessive technische Meldungen überflutet werden.

Deshalb bleibt Discord mein bevorzugter Benachrichtigungskanal für das laufende Monitoring (analog zu Uptime Kuma).

Eine Ausnahme bleibt Dockhand: Die Containerverwaltung selbst darf weiterhin E-Mails versenden. Damit behalte ich für wichtige Verwaltungs- und Backup-Meldungen einen zusätzlichen Kommunikationsweg, der auch dann funktioniert, wenn Beszel und Uptime Kuma mal ausgefallen sind.

Sicherheit

Gemäß meinem Sicherheitskonzept werden administrative Schnittstellen ausschließlich über das WireGuard-VPN bereitgestellt. Bei Beszel betrifft dies sowohl das Monitoring-Frontend als auch die integrierte PocketBase-Administrationsoberfläche. Da beide über denselben Dienst (und TCP-Port) erreichbar sind, wird der Zugriff bereits auf Netzwerkebene auf das WireGuard-Interface beschränkt.

Ein weiteres Argument ist, dass Monitoring-Daten wie CPU- und Speicherauslastung, Dateisystembelegung und Container-Status detaillierte Einblicke in die Systeminfrastruktur ermöglichen. Da diese Informationen ausschließlich administrativen Zwecken dienen, besteht keine Notwendigkeit, sie über das öffentliche Internet zugänglich zu machen.

Fazit

Mit Beszel habe ich eine schlanke Ergänzung zu Dockhand gefunden, um die Ressourcen meines VPS und der einzelnen Docker-Container langfristig im Blick zu behalten. Die historischen Messwerte sind eine signifikante Verbesserung meiner Einblicke in die Entwicklung meines VPS über die nächsten Wochen und Monate.

Die Einrichtung ist unkompliziert, der Ressourcenbedarf gering und dank Discord-Benachrichtigungen muss ich die Oberfläche nicht ständig kontrollieren, außerdem werden meine E-Mail-Postfächer nicht überflutet und ich bekomme Benachrichtigungen an meinem Smartphone (und sogar meiner Smartwatch) dadurch angezeigt. Für meine aktuelle VPS-Umgebung bietet Beszel damit genau den Funktionsumfang, den ich benötige.

Der Beitrag Homelab – Monitoring mit Beszel erschien zuerst auf Maximilian Krieg.

Zurück kamen verschiedene Vorschläge, insbesondere hier ein großes Dankeschön an Jonas, Julian, Nils und Robin, deren Anregungen ich mit meinen eigenen bisherigen Homelab-Projekten und weiteren Empfehlungen aus Artikeln und Community-Diskussionen zusammengeführt habe.

Die in diesem Artikel entstandene Liste ist ausdrücklich keine Bewertung und keine Rangliste. Der Artikel dient vielmehr als Auftakt für eine Serie und soll zunächst Stichpunktartig zeigen, welche Projekte zusammengekommen sind, was sie machen und welche davon für weitere Tests interessant sein könnten. Dabei berücksichtige ich ebenfalls, dass ich verschiedene Docker-Plattformen habe und es durchaus sein kann, dass ein Container auf einer oder mehreren dieser Plattformen für mich (keinen) Sinn ergeben würde.

Meine drei Docker-Plattformen

Für den Betrieb und die Tests stehen mir drei unterschiedliche Docker-Plattformen zur Verfügung.

Ich habe mir vorgenommen sie nach diesen Zwecken differenziert einzusetzen:

• NAS: Zentraler Datenspeicher und Host für Anwendungen mit direktem Bezug zu größeren oder dauerhaft gespeicherten Datenbeständen.
• Raspberry Pi: Stromsparender 24×7-Host für kleinere Dienste, Netzwerktools, Monitoring und Automatisierungen.
• VPS: Unabhängiger 24×7-Host für dauerhaft verfügbare und extern benötigte Dienste. Je nach Anwendung erfolgt der Zugriff dann öffentlich oder geschützt über VPN.

Den Aufbau und die technische Umsetzung meiner Docker-Umgebung werde ich in einem separaten Artikel nochmals ausführlicher beschreiben.

Containerverwaltung

Monitoring

Netzwerkmanagement

Netzwerkdienste

IT-Sicherheit

Dateimanagement

Medienverwaltung

Webanwendungen

Datenbanken

Produktivität

Gaming

IT-Administration

Benachrichtigungen

Entwicklung & Versionsverwaltung

Automatisierung

Datensicherung

E-Learning

Wissensmanagement

Die Zuordnung zu den Docker-Plattformen

Nach längerer Sichtung und Abwägung habe ich mich zunächst dagegen entschieden, die einzelnen Projekte den drei Plattformen NAS, Raspberry Pi und VPS zuzuordnen. Die Liste ist inzwischen deutlich umfangreicher geworden als ursprünglich gedacht, und viele Anwendungen lassen sich nicht eindeutig einer Plattform zuweisen.

Eine pauschale Zuordnung würde daher wenig Sinn ergeben. Stattdessen möchte ich die interessantesten Projekte nach und nach genauer betrachten, testen und erst anschließend entscheiden, auf welcher Plattform ihr Einsatz am sinnvollsten ist. Dabei spielen insbesondere der Einsatzzweck, die benötigten Ressourcen, die Datenhaltung und die Erreichbarkeit eine Rolle.

Fazit

Aus einer einfachen Frage an Kollegen und Freunde ist inzwischen eine ziemlich lange Liste mit interessanten Docker-Projekten geworden. Mit so vielen Vorschlägen hatte ich gar nicht gerechnet.

Was davon am Ende auf meinem NAS, Raspberry Pi oder VPS landet, wird sich zeigen. Die Liste werde ich auf jeden Fall weiter ergänzen, da ich noch weitere Personen gefragt habe und selbst weiterhin nach interessanten Projekten suche.

Quellen

• makeuseof.com – Docker Containers to Monitor Your Home Lab
• virtualizationhowto.com – 15 Docker Containers That Make Your Home Lab Instantly Better
• bitdoze.com – Docker Containers for Home Server
• xda-developers.com – Every Homelab I Build Now Starts With the Same Docker Containers
• reddit.com – Best Docker Images for Home Lab 2024?
• portalzine.de – My Top Self-Hosted Solutions with Docker for 2026
• stackademic.com – The Ultimate Homelab Setup: Running 50+ Docker Containers on a Raspberry Pi
• virtualizationhowto.com – 6 Home Lab Projects to Try This Weekend – October 2, 2026
• reddit.com – What Are Your Must Docker Containers for Home Lab?

Der Beitrag Homelab – Docker-Container fürs Labor erschien zuerst auf Maximilian Krieg.

Der Wechsel zu einem neuen Virtual Private Server (VPS) bei einem anderen Provider ist daher eine gute Gelegenheit, nicht nur bestehende Dienste zu migrieren, sondern die technische Basis von Grund auf neu zu planen. Bevor Anwendungen und Workloads folgen, soll zunächst eine solide, sichere und nachvollziehbar dokumentierte Grundlage entstehen.

Ausgangssituation und Zielsetzung

Die bisherige Umgebung war über viele Jahre produktiver Server und zugleich Plattform zum Lernen und Ausprobieren. Entsprechend ist die Architektur mit neuen Technologien, Konzepten und eigenen Anwendungen organisch gewachsen.

Mit dem neuen VPS möchte ich auf einer sauberen Basis starten, bisherige Entscheidungen neu bewerten und moderne Konzepte ausprobieren. Bevor Anwendungen migriert werden, steht daher zunächst eine definierte technische und sicherheitsbezogene Baseline im Mittelpunkt.

Eine besondere Herausforderung wird die Migration eigener, über Jahre gewachsener Software. Einige Abhängigkeiten und Laufzeitumgebungen sind auf aktuellen Betriebssystemen nicht mehr verfügbar. Ziel ist deshalb nicht nur, die Anwendungen wieder lauffähig zu machen, sondern sie zu modernisieren und künftig wartbarer, reproduzierbarer und portabler zu betreiben.

Eine Checkliste als lebendes Dokument

Die folgende Checkliste beschreibt die Themen und Maßnahmen, die ich bei der Bereitstellung und Absicherung eines neuen VPS berücksichtige. Sie ist als lebendes Dokument gedacht und wird mit neuen Erfahrungen, Anforderungen und Erkenntnissen kontinuierlich weiterentwickelt.

Sie stellt keine starre Installationsanleitung dar. Welche Punkte tatsächlich umgesetzt werden, hängt von Einsatzzweck, Schutzbedarf und technischen Rahmenbedingungen ab.

Bewusst verzichte ich auf konkrete Anwendungen und deren Konfiguration. Im Mittelpunkt steht eine allgemeingültige VPS-Basis, die unabhängig von Provider und späteren Workloads auch für zukünftige Systeme als Ausgangspunkt dienen soll.

Grundsystem & Updates

Ein aktuelles und unterstütztes Grundsystem bildet die Basis für einen sicheren und stabilen VPS. Geregelte Updates und eine korrekte Zeitsynchronisation reduzieren bekannte Schwachstellen und schaffen einen definierten Ausgangszustand.

Benutzer & Berechtigungen

Ein restriktives Berechtigungskonzept begrenzt administrative Zugriffe auf das erforderliche Maß. Persönliche Konten und das Least-Privilege-Prinzip verbessern Sicherheit und Nachvollziehbarkeit.

Administration & Management

Administrative Schnittstellen benötigen besonderen Schutz, da sie weitreichenden Zugriff auf das System ermöglichen. Sichere Authentisierung und eine begrenzte Erreichbarkeit reduzieren die damit verbundene Angriffsfläche.

SSH-Zugriff

SSH stellt häufig den primären administrativen Zugang zu einem Linux-VPS dar. Schlüsselbasierte Authentisierung und eine restriktive Konfiguration schützen diesen besonders kritischen Zugang.

Management-Netzwerk

Ein separater Managementpfad trennt administrative Zugriffe von öffentlich erreichbaren Diensten. Gleichzeitig sollte ein unabhängiger Notfallzugang bei Fehlkonfigurationen erhalten bleiben.

Firewalls

Firewalls beschränken die Netzwerkkommunikation auf tatsächlich erforderliche Verbindungen. Mehrere voneinander unabhängige Firewall-Ebenen ermöglichen dabei ein mehrschichtiges Sicherheitskonzept.

Provider-Ebene

Eine vorgelagerte Provider-Firewall kann unerwünschten Verkehr bereits vor dem VPS filtern. Ihre Funktionsweise und das Zusammenspiel mit der lokalen Firewall müssen deshalb bekannt sein.

Host-Ebene

Die lokale Firewall schützt den VPS unabhängig von externen Sicherheitsmechanismen. Sie bildet die unmittelbar am Betriebssystem durchgesetzte Netzwerkzugriffskontrolle.

Netzwerk & DNS

Eine definierte Netzwerk- und DNS-Konfiguration ist Voraussetzung für einen kontrollierbaren Serverbetrieb. Adressierung, Routing, Dienste und Namensauflösung sollten einem dokumentierten Sollzustand entsprechen.

IP-Konfiguration & Dienste

Die Netzwerkkonfiguration bestimmt die grundlegende Erreichbarkeit des Systems. Nur tatsächlich benötigte Netzwerkdienste sollten aktiv und erreichbar sein.

Namensauflösung

DNS stellt die Zuordnung zwischen Namen und Netzwerkadressen her. Eine konsistente Forward- und Reverse-Auflösung erleichtert Betrieb, Administration und Fehleranalyse.

Logging & Benachrichtigungen

Protokollierung schafft Transparenz über Systemzustände und sicherheitsrelevante Ereignisse. Benachrichtigungen ermöglichen eine zeitnahe Reaktion auf Zustände, die administratives Eingreifen erfordern.

Protokollierung

Systemprotokolle bilden eine wesentliche Grundlage für Fehleranalyse und Sicherheitsuntersuchungen. Aufbewahrung, Umfang und Schutz der Daten sollten kontrolliert erfolgen.

Alarmierung

Nicht jedes Ereignis kann regelmäßig manuell geprüft werden. Eine gezielte Alarmierung weist daher auf kritische Fehler, Sicherheitsereignisse oder erforderliche administrative Maßnahmen hin.

System-Hardening

System-Hardening reduziert die Angriffsfläche auf die für den vorgesehenen Betrieb erforderlichen Funktionen. Ergänzende Sicherheitsmechanismen erschweren die Ausnutzung verbleibender Angriffswege.

Angriffsfläche reduzieren

Jeder zusätzliche Dienst, Port oder Softwarebestandteil kann potenzielle Angriffsmöglichkeiten schaffen. Nicht benötigte Komponenten sollten deshalb konsequent vermieden werden.

Betriebssystem

Betriebssystemseitige Sicherheitsmechanismen ergänzen die Absicherung einzelner Dienste. Dazu gehören insbesondere restriktive Systemparameter, Zugriffskontrollen und Integritätsmechanismen.

Protokolle & Kryptografie

Veraltete Protokolle und kryptografische Verfahren können sichere Kommunikation erheblich schwächen. Eine definierte kryptografische Baseline beschränkt den VPS auf angemessen sichere Verfahren.

Backup & Recovery

Backups und Wiederherstellungsverfahren begrenzen die Auswirkungen von Fehlern, Ausfällen und Datenverlust. Entscheidend ist nicht nur die Sicherung, sondern deren nachgewiesene Wiederherstellbarkeit.

Datensicherung

Backups stellen relevante Daten und Konfigurationen unabhängig vom laufenden VPS sicher. Mindestens eine Sicherung sollte deshalb außerhalb des Systems aufbewahrt werden.

Snapshot

Snapshots ermöglichen die schnelle Rückkehr zu einem definierten Systemzustand, beispielsweise nach fehlgeschlagenen Änderungen. Sie ergänzen klassische Backups, ersetzen diese jedoch nicht.

Wiederherstellung & Notfallvorsorge

Ein dokumentiertes Recovery-Verfahren reduziert Ausfallzeiten und Unsicherheiten im Störungsfall. Wiederherstellung und Notfallzugänge sollten daher praktisch getestet werden.

Monitoring & Betriebskontrollen

Der Sicherheitszustand eines VPS verändert sich während seines Lebenszyklus. Automatische Überwachung und regelmäßige Prüfungen helfen, Abweichungen vom definierten Sollzustand frühzeitig zu erkennen.

Kontinuierliche Überwachung

Monitoring überwacht wichtige Systemzustände automatisiert und fortlaufend. Kritische Veränderungen können dadurch erkannt werden, ohne auf eine manuelle Kontrolle warten zu müssen.

Periodische Prüfungen

Nicht alle sicherheitsrelevanten Eigenschaften lassen sich sinnvoll kontinuierlich überwachen. Wiederkehrende Prüfungen ergänzen das Monitoring deshalb um eine umfassendere Bewertung des Systemzustands.

Dokumentation

Eine aktuelle Dokumentation macht Konfiguration und Sollzustand des VPS nachvollziehbar und reproduzierbar. Sie unterstützt Administration, Fehleranalyse, Sicherheitsprüfungen und Wiederherstellung.

Abschluss & Abnahme

Die abschließende Abnahme validiert die Basiskonfiguration als Gesamtsystem. Der erfolgreich geprüfte und dokumentierte Zustand bildet anschließend die Referenz für den weiteren Betrieb.

Der Beitrag Linux VPS Installation – Praxisorientierte Checkliste erschien zuerst auf Maximilian Krieg.

Ausgangslage

Bisher habe ich meine Herstellerzertifizierungen mithilfe eines WordPress-Plugins in Form eines Sliders dargestellt. Diese Lösung hat ihren Zweck erfüllt, gefällt mir inzwischen jedoch nicht mehr.

Durch den Slider ist immer nur ein Teil der vorhandenen Zertifizierungen sichtbar. Zudem bietet die Darstellung wenig Raum für zusätzliche Informationen zu den einzelnen Zertifikaten. Um sich einen vollständigen Überblick zu verschaffen, muss daher zunächst durch die verschiedenen Einträge navigiert werden.

Anforderungen

Die neue Darstellung soll alle Zertifizierungen direkt und übersichtlich auf einer Seite zeigen. Gleichzeitig möchte ich wichtige Metadaten wie den aktuellen Status und das Erwerbsdatum hinterlegen, ohne die Übersicht mit zusätzlichen Informationen zu überladen.

Daraus ergeben sich folgende Anforderungen:

• alle Zertifizierungen auf einen Blick
• übersichtliche und responsive Darstellung
• Zertifizierungs-Badge im Vordergrund
• zusätzliche Informationen bei Bedarf
• komfortable Bedienung per Maus, Touch und Tastatur
• keine zusätzliche Plugin-Abhängigkeit

Für die Umsetzung bieten sich Flip-Cards an. Auf der Vorderseite steht das jeweilige Zertifizierungs-Badge im Mittelpunkt. Mit einem Klick dreht sich die Karte und zeigt auf der Rückseite die zugehörigen Informationen.

Auch hierfür gibt es entsprechende WordPress-Plugins. Da die Anforderungen technisch überschaubar sind, möchte ich jedoch bewusst auf eine weitere Plugin-Abhängigkeit verzichten und die Lösung ausschließlich mit HTML, CSS und JavaScript umsetzen.

Umsetzung

Eine Flip-Card besteht aus einem äußeren Container sowie einer Vorder- und Rückseite:

flip-card
└── flip-card-inner
    ├── flip-card-front
    └── flip-card-back

Das innere Element wird beim Wechsel zwischen Vorder- und Rückseite um 180° gedreht. Auf meiner Zertifizierungsseite befindet sich auf der Vorderseite das jeweilige Badge, während die Rückseite die zugehörigen Informationen enthält.

Die Komponente ist bewusst generisch aufgebaut und kann daher auch für Projekte, Produkte, Teammitglieder oder andere Inhalte verwendet werden.

HTML

Eine einzelne Flip-Card wird mit folgendem HTML aufgebaut:

<div class="flip-card"
     tabindex="0"
     role="button"
     aria-label="Details anzeigen">

    <div class="flip-card-inner">

        <div class="flip-card-front">
            <img src="images/example.jpg"
                 alt="Beispielbild">

            <span class="flip-card-hint">
                Details
            </span>
        </div>

        <div class="flip-card-back">

            <span class="flip-card-category">
                Kategorie
            </span>

            <p class="flip-card-title">
                Titel
            </p>

            <p class="flip-card-description">
                Kurze Beschreibung
            </p>

            <div class="flip-card-meta">

                <div class="flip-card-meta-row">
                    <span class="flip-card-meta-label">
                        Status
                    </span>
                    <span class="flip-card-meta-value">
                        Aktiv
                    </span>
                </div>

                <div class="flip-card-meta-row">
                    <span class="flip-card-meta-label">
                        Erstellt
                    </span>
                    <span class="flip-card-meta-value">
                        09/2026
                    </span>
                </div>

            </div>

            <span class="flip-card-back-hint">
                Zurück
            </span>

        </div>

    </div>

</div>

Weitere Karten können später einfach durch Kopieren dieses Blocks ergänzt und mit den jeweiligen Inhalten versehen werden.

CSS

Die Darstellung und die eigentliche Flip-Animation werden vollständig mit CSS umgesetzt. Vorder- und Rückseite liegen dabei übereinander. Über die Klasse is-flipped wird das innere Element um 180° gedreht.

.flip-card {
    position: relative;
    width: 280px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    perspective: 1200px;
    cursor: pointer;
    outline: none;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.55s ease;
    transform-style: preserve-3d;
}

.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    padding: 24px;

    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.flip-card-front {
    background: #fff;
    transition: box-shadow 0.25s ease;
}

.flip-card:hover .flip-card-front {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}

.flip-card-front img {
    display: block;
    width: 82%;
    height: 82%;
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
}

.flip-card-hint {
    position: absolute;
    right: 14px;
    bottom: 11px;

    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;

    color: #777;
    opacity: 0;

    transition: opacity 0.2s ease;
}

.flip-card:hover .flip-card-hint,
.flip-card:focus .flip-card-hint {
    opacity: 1;
}

.flip-card-back {
    background: #182436;
    color: #fff;
    text-align: center;
    transform: rotateY(180deg);
}

.flip-card-category {
    margin-bottom: 10px;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.12em;

    color: rgba(255, 255, 255, 0.65);
}

.flip-card-title {
    margin: 0 0 10px;
    padding: 0;

    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;

    color: #fff;
}

.flip-card-description {
    margin: 0 0 18px;
    padding: 0;

    font-size: 0.9rem;
    line-height: 1.5;

    color: rgba(255, 255, 255, 0.85);
}

.flip-card-meta {
    width: 100%;
    max-width: 210px;
    margin-top: 2px;

    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.flip-card-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
    padding: 8px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.15);

    font-size: 0.82rem;
    line-height: 1.4;
}

.flip-card-meta-label {
    color: rgba(255, 255, 255, 0.60);
}

.flip-card-meta-value {
    color: #fff;
    font-weight: 600;
    text-align: right;
}

.flip-card-back-hint {
    position: absolute;
    right: 14px;
    bottom: 11px;

    font-size: 11px;
    letter-spacing: 0.04em;

    color: rgba(255, 255, 255, 0.5);
}

.flip-card:focus-visible {
    border-radius: 14px;
    outline: 2px solid #182436;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .flip-card-inner {
        transition: none;
    }
}

Farben, Abstände, Größe und Seitenverhältnis können anschließend an das Design der eigenen Website angepasst werden.

JavaScript

JavaScript wird lediglich benötigt, um beim Anklicken der Karte die CSS-Klasse is-flipped hinzuzufügen beziehungsweise wieder zu entfernen.

document.addEventListener('DOMContentLoaded', function () {

    const cards = document.querySelectorAll('.flip-card');

    cards.forEach(function (card) {

        card.addEventListener('click', function () {
            card.classList.toggle('is-flipped');
        });

        card.addEventListener('keydown', function (event) {

            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                card.classList.toggle('is-flipped');
            }

        });

    });

});

Damit funktioniert die Interaktion nicht nur mit Maus und Touchscreen, sondern auch über Enter oder die Leertaste.

Mehrere Flip-Cards als Grid

Für meine Zertifizierungsseite benötige ich natürlich mehr als eine Karte. Die einzelnen Flip-Cards lassen sich dafür mit einem zusätzlichen Container zusammenfassen:

<div class="flip-card-grid">

    <!-- Flip-Card -->
    <div class="flip-card">
        ...
    </div>

    <!-- Flip-Card -->
    <div class="flip-card">
        ...
    </div>

</div>

Die responsive Anordnung übernimmt CSS Grid:

.flip-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 32px 0;
}

.flip-card-grid .flip-card {
    width: 100%;
}

@media (max-width: 1000px) {
    .flip-card-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .flip-card-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .flip-card-grid {
        grid-template-columns: 1fr;
    }
}

Damit werden abhängig von der verfügbaren Bildschirmbreite vier, drei, zwei oder eine Karte pro Zeile dargestellt.

Integration in WordPress

Ich verwende die Flip-Cards auf meiner Zertifizierungsseite innerhalb des Gutenberg-Editors. Dort lassen sich HTML, CSS und JavaScript getrennt voneinander in den jeweils dafür vorgesehenen Bereichen hinterlegen.

Der HTML-Bereich enthält die eigentliche Struktur und die Inhalte der Flip-Cards. Das CSS übernimmt die Gestaltung, das responsive Grid sowie die Flip-Animation, während das JavaScript die Interaktion beim Anklicken beziehungsweise über die Tastatur steuert.

CSS und JavaScript müssen dabei nur einmal eingebunden werden. Weitere Flip-Cards können anschließend einfach durch zusätzliche HTML-Blöcke ergänzt werden.

Details

Fortinet

NSE 7

Secure Networking

Status –

Erworben –

Zurück

Fazit

Mit der neuen Darstellung sind alle Zertifizierungen direkt sichtbar, während zusätzliche Informationen erst bei Bedarf eingeblendet werden. Dadurch bleibt die Seite übersichtlich, ohne auf relevante Metadaten verzichten zu müssen.

Gleichzeitig zeigt die Umsetzung, dass für kleinere interaktive Funktionen nicht immer ein zusätzliches WordPress-Plugin notwendig ist. Mit etwas HTML, CSS und JavaScript lässt sich eine schlanke Lösung umsetzen, die sich gezielt an die eigenen Anforderungen anpassen lässt.

Für meinen Anwendungsfall ersetzen die Flip-Cards damit den bisherigen Slider und reduzieren gleichzeitig die Anzahl der eingesetzten Plugins.

Der Beitrag Flip-Cards mit HTML, CSS und JavaScript erstellen erschien zuerst auf Maximilian Krieg.

Der dargestellte Prozess orientiert sich dabei an den Inhalten der CompTIA Network+ Zertifizierung.

Problem identifizieren

Zunächst muss das eigentliche Problem möglichst eindeutig identifiziert und eingegrenzt werden.

Dazu gehören insbesondere:

• Informationen zum Problem sammeln
• Betroffene Benutzer, Systeme und Netzwerkbereiche bestimmen
• Symptome und Fehlermeldungen erfassen
• Feststellen, seit wann das Problem besteht
• Kürzlich durchgeführte Änderungen berücksichtigen
• Problem nach Möglichkeit reproduzieren
• Logs, Monitoring und vorhandene Dokumentation einbeziehen

Bei der Aufnahme einer Netzwerkstörung helfen gezielte Fragen dabei, das Fehlerbild schnell einzugrenzen.

Ziel dieses Schrittes ist eine möglichst klare Beschreibung des Fehlerbildes.

Theorie zur wahrscheinlichen Ursache entwickeln

Auf Basis der gesammelten Informationen werden mögliche Ursachen abgeleitet.

Dabei sollte zunächst mit den einfachsten und wahrscheinlichsten Ursachen begonnen werden. Anschließend kann die Analyse schrittweise auf komplexere Zusammenhänge ausgeweitet werden.

Zur strukturierten Eingrenzung kann beispielsweise das OSI-Modell verwendet werden. Je nach Fehlerbild kann dabei Bottom-Up, Top-Down oder gezielt auf einzelnen Layern gearbeitet werden.

Neben den genannten Methoden, die sich am OSI-Modell orientieren, gibt es jedoch auch weitere Verfahren.

Theorie testen

Die vermutete Ursache wird anschließend durch geeignete Tests überprüft.

Wird die Theorie bestätigt, kann mit der Planung der Lösung begonnen werden.

Wird sie nicht bestätigt, muss eine neue mögliche Ursache entwickelt und getestet werden.

Maßnahmenplan erstellen

Nach der Identifikation der Ursache wird ein Plan zur Behebung des Problems erstellt.

Dabei sollten insbesondere berücksichtigt werden:

• Erforderliche Änderungen
• Mögliche Auswirkungen
• Abhängigkeiten
• Notwendige Freigaben
• Wartungsfenster
• Backup der Konfiguration
• Rollback-Möglichkeit

Die eigentliche Änderung sollte erst erfolgen, wenn klar ist, wie das Problem behoben und die Änderung gegebenenfalls rückgängig gemacht werden kann.

Lösung implementieren oder eskalieren

Die geplante Maßnahme wird umgesetzt.

Kann die Fehlerursache nicht im eigenen Verantwortungsbereich behoben werden, erfolgt eine Eskalation an die zuständige Stelle.

Bei einer Eskalation sollten die bisher gewonnenen Informationen und Testergebnisse vollständig weitergegeben werden.

Funktionalität überprüfen

Nach Umsetzung der Maßnahme wird überprüft, ob das ursprüngliche Problem tatsächlich behoben wurde.

Dabei sollte nicht nur das ursprüngliche Fehlerbild getestet werden. Es muss ebenfalls sichergestellt werden, dass durch die Änderung keine anderen Funktionen beeinträchtigt wurden.

Zusätzlich sollte geprüft werden, ob präventive Maßnahmen sinnvoll sind, um ein erneutes Auftreten des Problems zu verhindern.

Ergebnisse dokumentieren

Abschließend wird der gesamte Vorgang dokumentiert.

Dazu gehören:

• Fehlerbild
• Ursache
• Durchgeführte Analyse
• Umgesetzte Maßnahme
• Ergebnis
• Gegebenenfalls präventive Maßnahmen

Die Dokumentation erleichtert die Bearbeitung zukünftiger Störungen und ermöglicht den Aufbau einer Wissensdatenbank für wiederkehrende Fehlerbilder.

Der Troubleshooting-Prozess im Überblick

Eine strukturierte Netzwerk-Fehlerbehebung folgt damit einem einfachen Grundprinzip:

Insbesondere die Trennung zwischen Analyse, Hypothese, Test und eigentlicher Änderung verhindert vorschnelle Eingriffe und sorgt dafür, dass Netzwerkprobleme nachvollziehbar und reproduzierbar bearbeitet werden.

Quellen

• ciscopress.com – Structured Troubleshooting Approaches

Der Beitrag Methodik zur systematischen Netzwerk-Fehlerbehebung erschien zuerst auf Maximilian Krieg.

Dieser Beitrag baut auf meinen bisherigen Ansätzen zur Erstellung einheitlicher KI-Artikelbilder auf:

• Einheitliche Artikelbilder für meine Studienbeiträge mit KI
• Konsistente Blog-Artikelbilder mit KI erzeugen

Dafür habe ich den bestehenden Prompt überarbeitet. Neben einer konsistenteren Bildsprache kommen künftig feste Markenzeichen und wiederkehrende Elemente zum Einsatz.

In diesem Beitrag stelle ich daher den verwendeten Prompt vor (eher als kopierfähige Vorlage für mich selbst) und zeige, wie sich damit relativ konsistente Blog-Artikelbilder erzeugen lassen.

# MASTER-PROMPT – BLOG-ARTIKELBILD

Erstelle ein hochwertiges Blog-Artikelbild im konsistenten, wiedererkennbaren Stil eines modernen privaten IT-/Tech-Blogs.

## ARTIKEL ZUERST ANALYSIEREN

Analysiere zuerst automatisch den folgenden Artikel:

**[[URL]]**

Leite daraus ab:

- zentrales Thema und Problemstellung
- verwendete Technologien, Hersteller und Produkte
- wichtige technische Zusammenhänge
- geeignete visuelle Metaphern
- ein eindeutiges technisches Hauptmotiv
- eine kurze, prägnante Headline
- optional eine sehr kurze Subline

Das Artikelbild muss den **konkreten Inhalt des Artikels** visuell widerspiegeln und darf nicht wie eine generische IT-Illustration wirken.

---

## FORMAT

- Exakt **1200 × 900 Pixel**
- Seitenverhältnis **4:3**
- Optimiert für WordPress/Blocksy, Blog-Archive, Featured Images und Thumbnails
- Gute Erkennbarkeit auch in kleiner Vorschau
- Komposition ausdrücklich für **4:3**, nicht für 16:9 oder Cinematic Wide
- Klare visuelle Hierarchie
- Ruhige, ausgewogene Komposition
- Keine wichtigen Elemente unmittelbar am Bildrand

### SAFE AREA

Alle unverzichtbaren Inhalte müssen innerhalb einer sicheren zentralen Bildzone liegen.

- Mindestens **80 px Abstand** zu allen Bildrändern
- Headline und andere wichtige Texte: möglichst **100 px horizontaler Sicherheitsabstand**
- Hauptmotiv, Headline und MK-Logo vollständig innerhalb der Safe Area
- Äußere Randbereiche hauptsächlich für Hintergrund, Licht, Schatten und unwichtige Dekoration verwenden
- Das Motiv muss auch bei einer geringfügigen responsiven Beschneidung verständlich und vollständig wirken

Keine wichtigen Texte, Logos, Warnsymbole oder entscheidenden technischen Details in den äußeren Randbereichen platzieren.

---

## VISUELLER STIL

Konsistenter Stil über alle Artikel hinweg:

- moderner privater IT-/Tech-Blog
- Comic-/Vector-inspirierter Semi-Realismus
- hochwertiger 2D-/2.5D-Look mit leichter räumlicher Tiefe
- klare geometrische Formen
- dezente Outline-/Illustration-Optik
- modern und technisch
- ruhig und aufgeräumt
- hochwertiges Licht und natürliche Tiefenwirkung

### Farbwelt

Primär:

- Dunkelblau
- Anthrazit
- Stahlgrau

Akzente:

- Gelb
- Orange
- Blau
- Rot nur für Warnungen und Fehler
- Cyan sehr dezent

### Beleuchtung

- Cinematic Lighting
- weiche Schatten
- leicht dramatische technische Atmosphäre
- warme Lichtakzente kombiniert mit kühlen Blau-/Anthrazit-Tönen
- dezente Reflexionen auf technischen Objekten

### Vermeiden

- generische Stockfoto-Optik
- fotorealistische Datacenter-Szenen
- übertriebene SciFi-Effekte
- komplexe UI-Screenshots
- Textwände
- zu viele kleine technische Elemente
- mehrere konkurrierende Hauptmotive

**Lieber simpel, eindeutig und visuell stark als komplex und überladen.**

---

## KOMPOSITION

Das Bild besitzt eine klare Tiefenstaffelung und visuelle Hierarchie:

1. **Technisches Hauptmotiv → konkreter Artikelinhalt**
2. **Headline**
3. **MK-Kaffeetasse → festes Branding im Vordergrund**
4. **Häkel-Schildkröte → dezentes Maskottchen im Hintergrund**
5. wenige technische Nebenmotive und Dekoration

Regeln:

- genau EIN dominantes technisches Hauptmotiv
- Hauptmotiv bevorzugt im Mittelgrund
- gerne leicht perspektivische Darstellung
- ruhiger Hintergrund
- ausreichend freie Fläche
- wenige zusätzliche Symbole oder Warnhinweise
- Branding darf nicht mit dem Hauptmotiv konkurrieren
- Komposition muss bereits als kleines Thumbnail funktionieren
- keine Abhängigkeit davon, dass jeder Pixel des Bildrandes sichtbar bleibt

---

## TEXT IM BILD

Erzeuge automatisch eine zum Artikel passende Headline.

### Headline

- groß und prägnant
- kurz
- inhaltlich eindeutig
- moderne fette Typografie
- bevorzugt Weiß-/Gelb-Kombination
- hoher Kontrast
- auch als Thumbnail lesbar
- bevorzugt kompakt auf 2–3 Zeilen statt extrem breit
- mindestens ca. **100 px Abstand zum linken und rechten Bildrand**
- vollständig innerhalb der Safe Area

Optional eine kurze Subline mit maximal einer ergänzenden Aussage.

Keine langen Sätze und keine unnötigen technischen Detailtexte.

---

## TECHNISCHES HAUPTMOTIV

Das zentrale Motiv MUSS eindeutig zum konkreten Artikel passen.

Beispiele dienen nur als Orientierung:

- Netzwerkprobleme → konkrete Problemstellung oder gestörte Verbindung
- Security → Firewall, Schutzmechanismus, Angriff
- Routing → Router, Netzwerkpfade, Paketwege
- PowerShell → Terminal, Konsole, Skript-Symbolik
- WLAN → Access Point, Funkwellen, Clients
- Monitoring → Diagramme, LEDs, Statusanzeigen
- Server → stilisierte Serverhardware
- Virtualisierung → VMs, Hypervisor, abstrahierte Infrastruktur
- Cloud → Cloud-Infrastruktur und Verbindungen
- Fehlerbehebung → Diagnose, Warnsymbol, fehlerhafte Verbindung
- KI → Generierung, Automatisierung oder technische KI-Symbolik

Diese Beispiele nicht schematisch übernehmen.

**Immer den konkreten Artikel analysieren und daraus ein individuelles Hauptmotiv entwickeln.**

---

## FESTES BRANDING: MK-KAFFEETASSE

In **JEDEM Artikelbild** muss eine Kaffeetasse mit meinem Original-MK-Logo vorkommen.

Verwende ausschließlich das **zusammen mit dem Prompt bereitgestellte MK-Logo als verbindliche visuelle Referenz**.

Das Logo darf nicht kreativ verändert werden.

Es besteht zur Identifikation aus:

- dunkelblauem, abgerundetem quadratischem Hintergrund
- weißer unterbrochener hexagonaler Umrandung
- blauem stilisiertem M
- weißem stilisiertem K

**Das bereitgestellte Referenzbild ist maßgeblich.**

Nicht verändern:

- Buchstaben
- Geometrie
- Farben
- Ausrichtung
- Proportionen
- Bestandteile

Keine Spiegelung, Beschneidung oder kreative Neuinterpretation.

### Tasse

- moderne hochwertige Kaffeetasse
- bevorzugt weiß
- passend zum Comic-/Vector-inspirierten Semi-Realismus
- Original-MK-Logo sauber auf der sichtbaren Vorderseite
- Logo möglichst frontal und vollständig sichtbar
- optional dezenter Kaffeedampf
- natürliche Schatten und Reflexionen

### Position

Bevorzugt **unten links im Vordergrund**, aber vollständig innerhalb der Safe Area.

- mindestens ca. 80 px Abstand zum linken und unteren Bildrand
- nicht zu dominant
- Headline und Hauptmotiv nicht verdecken
- über verschiedene Artikel hinweg möglichst ähnliche Größe und Position

Die Tasse ist ein **Branding-Element, kein Hauptmotiv**.

---

## FESTES MASKOTTCHEN: HÄKEL-SCHILDKRÖTE

In **JEDEM Artikelbild** muss eine kleine Häkel-Schildkröte als wiederkehrendes Maskottchen vorkommen.

Sie ist ein:

**kleines sitzendes Häkel-/Amigurumi-Plüschtier mit Firewall-Ziegelstein-Panzer.**

### Aussehen

- sichtbare Häkelstruktur
- hochwertiges Amigurumi-Erscheinungsbild
- leicht stilisiert, nicht fotorealistisch
- sympathischer, neutral-neugieriger Ausdruck
- Kopf und Beine in gedecktem Grün/Olivgrün
- kleine dunkle Augen
- kompakte Proportionen
- keine Kleidung oder Logos

### Firewall-Panzer

Der Panzer ist das wichtigste Wiedererkennungsmerkmal.

- dunkelblau bis anthrazit
- sichtbare Häkelstruktur
- klar erkennbare **versetzte rechteckige Segmente**
- horizontale Reihen wie eine klassische Firewall-Ziegelsteinmauer
- jede zweite Reihe versetzt
- dezente Fugen
- Akzentlinien optional in Dunkelgrau, Stahlgrau, Gelb oder Orange

**Keine natürlichen sechseckigen oder polygonalen Schildkrötenschuppen.**

Der Panzer muss eindeutig die Symbolik

**Firewall → Ziegelsteinmauer**

aufgreifen und trotzdem als gehäkelter Schildkrötenpanzer erkennbar bleiben.

### Position

Die Schildkröte ist **kein Vordergrundobjekt und kein Hauptmotiv**.

- klein und dezent im Hintergrund oder hinteren Mittelgrund
- beispielsweise auf Regal, Sideboard, Büchern oder hinterem Schreibtischbereich
- seitlich oder in leichter 3/4-Perspektive
- Kopf, Körper und großer Teil des Firewall-Panzers sichtbar
- darf etwas dunkler oder leicht außerhalb der Hauptschärfe liegen
- muss trotzdem eindeutig erkennbar bleiben

**Nicht direkt neben die Kaffeetasse stellen.**

---

## HERSTELLER UND PRODUKTE

Wenn sich der Artikel eindeutig auf einen Hersteller oder ein Produkt bezieht:

- Herstellerlogo optional und dezent integrieren
- Geräte optisch an reale Produkte anlehnen
- keine exakten Produktfotos erforderlich
- illustrativ in den Gesamtstil integrieren
- Herstellerbranding darf das MK-Blog-Branding nicht dominieren

MK-Kaffeetasse und Schildkröte bleiben unabhängig davon immer vorhanden.

---

## QUALITÄTSZIEL

Das Ergebnis soll wie ein professionell gestaltetes Bild aus einer zusammengehörenden Serie von Tech-Blog-Illustrationen wirken:

- hochwertig
- modern
- technisch
- ruhig
- klar
- wiedererkennbar
- thumbnail-tauglich
- konsistentes Branding
- klare Tiefenstaffelung
- keine visuelle Überladung

---

## ABSCHLUSSPRÜFUNG

Vor der finalen Erstellung prüfen:

- Artikel tatsächlich analysiert?
- Hauptmotiv eindeutig passend zum konkreten Inhalt?
- Nur EIN dominantes technisches Hauptmotiv?
- Headline kurz, korrekt und gut lesbar?
- Ausgabe exakt **1200 × 900 Pixel / 4:3**?
- Komposition tatsächlich für 4:3 statt Wide-Format?
- Alle wichtigen Inhalte innerhalb der Safe Area?
- Headline mit ausreichend Abstand zu den Seiten?
- Funktioniert das Motiv bei geringfügigem responsivem Cropping?
- Funktioniert es als kleines Thumbnail?
- Dunkelblau-/Anthrazit-/Gelb-Stil eingehalten?
- MK-Kaffeetasse vorhanden und Original-Logo korrekt?
- Tasse bevorzugt unten links im Vordergrund und mit Randabstand?
- Häkel-Schildkröte dezent im Hintergrund?
- Schildkröte seitlich/3⁄4 dargestellt und Panzer gut sichtbar?
- Panzer mit versetztem rechteckigem Firewall-Ziegelmuster statt natürlichen Schuppen?
- Konkurrieren Branding und Maskottchen nicht mit dem Hauptmotiv?
- Gesamtbild ruhig und nicht überladen?

## VERBINDLICHE SERIENREGEL

Jedes Artikelbild besitzt drei wiederkehrende Ebenen:

**Vordergrund:** MK-Kaffeetasse  
**Mittelgrund:** individuelles technisches Hauptmotiv des Artikels  
**Hintergrund:** Häkel-Schildkröte mit Firewall-Ziegelstein-Panzer

Diese drei Ebenen bilden gemeinsam die wiedererkennbare visuelle Identität der Blog-Artikelserie.

Der Beitrag Mehr Wiedererkennungswert für meine Blog-Artikelbilder mit KI erschien zuerst auf Maximilian Krieg.

Nachdem ich inzwischen auch zahlreiche ältere Beiträge aus meiner Studienzeit wieder in den Blog übernommen und aufbereitet habe, möchte ich diesen ebenfalls ein einheitliches Erscheinungsbild geben. Für die verschiedenen Studienfächer und die dazugehörigen Beiträge soll deshalb eine eigene, wiedererkennbare Bildserie entstehen.

Im Gegensatz zu den regulären Blog-Artikeln setze ich bei den Studienbeiträgen bewusst auf ein reduzierteres und stärker schematisches Design. Im Mittelpunkt steht jeweils das wichtigste fachliche Motiv, ergänzt durch wenige charakteristische Elemente des jeweiligen Studienfachs. Dadurch sollen die Bilder auch in einer kleinen Vorschau schnell erkennen lassen, welchem Themengebiet ein Beitrag zugeordnet ist.

Damit Aufbau, Farbgebung und Stil über alle Studienfächer hinweg möglichst konsistent bleiben, habe ich dafür einen eigenen Prompt definiert:

**STUDIENFACH: [[STUDIENFACH]]**

Erstelle ein hochwertiges Blog-Artikelbild für das angegebene Studienfach als Teil einer konsistenten Serie von Hochschul-Fachbildern.

Analysiere das Studienfach selbstständig und wähle die **wenigen visuell charakteristischsten technischen Motive**, sodass das Thema bereits als Thumbnail eindeutig erkennbar ist.

# MOTIV

Das wichtigste fachliche Motiv steht **groß und zentral**.

Für Virtual Desktop Infrastructure soll das Hauptmotiv eine **zentral bereitgestellte virtuelle Desktop-Umgebung** eindeutig vermitteln.

Ergänze **genau 4 fachlich passende Nebenmotive**:

* genau 2 links
* genau 2 rechts
* ausschließlich seitlich vom Hauptmotiv
* ungefähr auf Höhe des Hauptmotivs
* optisch ausgewogen und symmetrisch.

Geeignete Motive können z. B. Server/Virtualisierung, Storage, Thin Client/Endgerät und Netzwerk-/Remote-Zugriff sein.

**Strikte Regel: Oberhalb und unterhalb des zentralen Hauptmotivs dürfen keine Symbole oder Gegenstände stehen.**

Keine untere Symbolreihe. Freien Platz unterhalb des Hauptmotivs **nicht auffüllen**.

Verbindungslinien sind nur seitlich zwischen Hauptmotiv und Nebenmotiven erlaubt.

Kompositionsprinzip:

**2 Motive links → großes Hauptmotiv → 2 Motive rechts**

# STIL

Moderner hochwertiger **2D-/2.5D-Vector-Stil** einer technischen Lehrbuchillustration:

* klare präzise Konturen
* leicht abgerundete Kanten
* subtile räumliche Tiefe
* minimale Lichtreflexe
* sehr dezente Schatten direkt an Gegenständen
* wenige große statt vieler kleiner Details
* professionelle, ruhige Gestaltung.

Kein Fotorealismus, keine Menschen, keine Comic-Optik und keine starken 3D-Effekte.

# KEINE CONTAINER

Alle Motive stehen frei auf dem Hintergrund.

Keine Kreise um Symbole, Karten, Kacheln, Panels, Boxen, Rahmen, Sechsecke, geometrischen Hintergrundformen oder farbigen Flächen hinter Motiven.

# FARBEN

Einheitliche leicht entsättigte Farbpalette:

* Navy/Dunkelblau
* gedämpftes Mittelblau
* Grau/Anthrazit
* sparsame Akzente in Grün, Gold oder Violett.

Keine Neonfarben.

# HINTERGRUND

Eine einzige gleichmäßige **mittelgraue/blaugraue Hintergrundfarbe** von Ecke zu Ecke.

Keine Verläufe, Texturen, Muster, Raster, Punkte, Linien, Leiterbahnen, Lichtflecken, Vignetten oder Hintergrundformen.

# KOMPOSITION UND SICHERHEITSZONE

Gewünschtes finales Format: **1280 × 809 Pixel, Querformat**.

Die gesamte Motivgruppe bleibt kompakt und exakt mittig.

Mindestens **10 % vollständig freien Abstand zu jedem Bildrand** einhalten. Innerhalb dieser Randzone darf ausschließlich der einfarbige Hintergrund sichtbar sein.

Bei Platzmangel **alle Motive proportional kleiner skalieren**, niemals die Sicherheitszone reduzieren.

# TEXT

Kein Text im Bild: keine Titel, Untertitel, Beschriftungen, Legenden, URLs oder Wasserzeichen.

# HÖCHSTE PRIORITÄT

1. Hauptmotiv groß und zentral.
2. **Genau 2 Nebenmotive links und 2 rechts.**
3. **Keine Motive oberhalb oder unterhalb des Hauptmotivs.**
4. Mindestens 10 % freier Rand.
5. Im Zweifel Motive kleiner darstellen.

Der Beitrag Einheitliche Artikelbilder für meine Studienbeiträge mit KI erschien zuerst auf Maximilian Krieg.

In einem früheren Beitrag habe ich bereits gezeigt, wie sich Bildunterschriften in WordPress mithilfe von CSS automatisch nummerieren lassen. Dadurch werden die Beschriftungen von Abbildungen automatisch um eine fortlaufende Nummerierung wie „Abbildung 1“, „Abbildung 2“ usw. ergänzt.

Da ich inzwischen auch Tabellen einheitlich beschriften und nummerieren möchte, habe ich die damalige CSS-Lösung entsprechend erweitert. Neben Abbildungen erhalten nun auch Tabellen einen eigenen, unabhängigen Zähler und werden automatisch als „Tabelle 1“, „Tabelle 2“ usw. nummeriert.

Die ursprüngliche Umsetzung und die Hintergründe zur automatischen Nummerierung von Bildunterschriften sind im damaligen Artikel beschrieben. Im Folgenden zeige ich die aktualisierte Variante, die Abbildungen und Tabellen gleichermaßen berücksichtigt.

Der für WordPress angepasste CSS-Code, der nun sowohl Abbildungen als auch Tabellen automatisch und unabhängig voneinander nummeriert, ist daher:

/* Counter-Init */
body {
	counter-reset: figCounter tabCounter;
}

/* 2. We tell each occurrence of this element to increment the counter */
.wp-block-image figcaption {
	counter-increment: figCounter;
	    margin-bottom: 1em;
    margin-top: .5em;
    font-style: italic;
    text-align:center;
}

/* 3. We display the value of the counter before the element */
.wp-block-image figcaption:before {
	content: 'Abbildung '  counter(figCounter) ': ';
}

/* 2. We tell each occurrence of this element to increment the counter */
.wp-block-table figcaption {
	counter-increment: tabCounter;
	margin-bottom: 1em;
	margin-top: .5em;
	font-style: italic;
	text-align:center;
}

/* 3. We display the value of the counter before the element */
.wp-block-table figcaption:before {
	content: 'Tabelle '  counter(tabCounter) ': ';
}

Der Beitrag CSS-Code zur automatischen Nummerierung von Abbildungen und Tabellen erschien zuerst auf Maximilian Krieg.

Gleichzeitig werden die bisher getrennten Unterlagen meiner Frau und mir zu einer gemeinsamen Familienablage. Mit unseren Kindern kommen stetig weitere Dokumente hinzu. Dabei möchte ich vermeiden, aus dem Papierchaos einfach ein digitales Chaos zu machen und vor allem eine Struktur schaffen, die auch für andere langfristig nachvollziehbar bleibt.

In diesem Artikel beschreibe ich daher mein einheitliches Namensschema für Dokumente, die verwendeten Delimiter (Trennzeichen) und den Zweck der einzelnen Bestandteile.

Namensschema

Das grundlegende Schema für Dateinamen lautet:

YYYY-MM-DD_bezug_dokumenttyp[_beschreibung][_vXX].ext

Die Beschreibung (_beschreibung) ist optional und dient als Freitextfeld zur genaueren Einordnung des Dokuments, wenn bezug und dokumenttyp allein nicht ausreichend aussagekräftig sind.

Die Versionsnummer (_vXX) ist optional und wird nur verwendet, wenn mehrere Bearbeitungsstände desselben Dokuments existieren. Dabei steht XX für eine zweistellige, fortlaufende Versionsnummer, beispielsweise v01, v02 oder v03.

Der Unterstrich (Underscore) _ trennt die einzelnen Bestandteile des Namensschemas – vergleichbar mit Feldern einer Datenbank. Der Bindestrich (Hyphen) - verbindet hingegen mehrere zusammengehörige Wörter innerhalb eines Bestandteils.

Schreibweise

Für die Dateinamen gelten folgende einheitliche Regeln:

• ausschließlich Kleinbuchstaben
• keine Leerzeichen
• einzelne Felder werden mit _ getrennt
• Wörter innerhalb eines Feldes werden mit - getrennt bzw. verbunden
• Umlaute werden ersetzt:
  • ä → ae
  • ö → oe
  • ü → ue
  • ß → ss
• keine abweichenden Sonderzeichen
• ursprüngliche Dateiendung beibehalten

Bestandteile

Dokumenttyp

Der Dokumenttyp beschreibt möglichst eindeutig die Art oder den Inhalt des Dokuments. Dabei werden möglichst einheitliche und wiederkehrende Bezeichnungen verwendet.

Beispiele für Dokumenttypen:

• abrechnung
• angebot
• antrag
• bestaetigung
• bescheinigung
• bescheid
• garantie
• gutschrift
• kontoauszug
• kuendigung
• lieferschein
• mahnung
• nachweis
• protokoll
• rechnung
• schreiben
• steuererklaerung
• urkunde
• versicherungsschein
• vertrag
• vollmacht
• zeugnis

Die Dokumenttypen werden bewusst verallgemeinert und auf wenige einheitliche Begriffe reduziert. So wird beispielsweise unabhängig vom konkreten Inhalt möglichst vertrag statt arbeitsvertrag, mietvertrag oder versicherungsvertrag verwendet. Dadurch entstehen weniger unterschiedliche Bezeichnungen und die Suche nach bestimmten Dokumentarten wird einfacher und zuverlässiger. Der konkrete fachliche Bezug ergibt sich aus den übrigen Bestandteilen des Dateinamens.

Versionierung

Die Versionierung wird nur verwendet, wenn tatsächlich mehrere Bearbeitungsstände desselben Dokuments aufbewahrt werden sollen.

Die Nummerierung beginnt bei v01 und wird fortlaufend erhöht:

v01
v02
v03

Es werden keine Unterversionen wie v01.1, v01.2 oder v02.1 verwendet.

Bei einem unveränderten bzw. einmalig abgelegten Dokument wird keine Versionsnummer angegeben.

Vor- und Nachteile

Das Namensschema ist bewusst einfach gehalten und soll vor allem eine langfristig einheitliche und nachvollziehbare Ablage ermöglichen. Daraus ergeben sich sowohl Vorteile als auch einige Einschränkungen.

Der Beitrag Richtlinie zur einheitlichen Dateibenennung erschien zuerst auf Maximilian Krieg.