technik.html · Werkzeuge & Arbeitsweise

Werkzeug nach Aufgabe.
Nicht nach Mode.

Websites, Software für Betriebe und Apps für iPhone und Android: Hier zeige ich offen, womit ich baue und warum. Jede Auswahl folgt drei Fragen. Läuft es auf deinem Hosting? Ist es in fünf Jahren noch wartbar? Bleiben die Daten deiner Kunden geschützt?

6Websites
8Betriebsanwendungen
4Apps
0Tracker

Grundsätze

Sechs Regeln, die in jedem Projekt gelten.

Sie stehen nicht in einem Leitbild, sondern im Code. Jede Regel lässt sich an den Projekten weiter unten nachprüfen.

01

Nur so viel Technik wie nötig

kein Baukastenkein WordPresswenige Abhängigkeiten

Eine Website mit fünf Seiten braucht kein Framework. Kundenseiten bestehen aus HTML, CSS und etwas JavaScript, die Betriebsanwendungen laufen ohne Zusatzpakete auf normalem Webhosting. Weniger Bauteile heißt: weniger Updates, weniger Angriffsfläche, weniger laufende Kosten.

02

Datenschutz von Anfang an

Schriften lokalkeine Trackerexterne Inhalte erst nach Klick

Mein Standard: Schriften und Bilder kommen vom eigenen Server, niemand liest heimlich mit. Externe Inhalte wie ein 360°-Rundgang von Google laden erst, wenn jemand darauf klickt. So braucht eine Seite keinen Cookie-Banner.

03

Sicherheit als Grundausstattung

HTTPS + HSTSContent-Security-PolicyCSRF-SchutzArgon2id

Strenge Sicherheitsregeln auf jedem Webspace, Passwörter nach aktuellem Verfahren gespeichert, Kontosperre nach Fehlversuchen. Formulare schützen sich mit Spamfalle, Zeitprüfung und Mengenbegrenzung selbst, ganz ohne Captcha-Dienst eines Drittanbieters.

04

Nachvollziehbar statt überschreibbar

ÄnderungsprotokollBegründungspflichtVersionen

Wo es um Nachweise geht, ändern sich Daten nicht still. Korrekturen brauchen einen Grund, Prüfprotokolle sind unveränderlich, gelöscht wird nur weich. Im Fahrtenbuch ist jeder Eintrag zusätzlich mit dem vorherigen verkettet, sodass Eingriffe an der Software vorbei auffallen.

05

Geprüft, bevor es live geht

automatische Tests4 BildschirmbreitenLinkprüfung

Jedes Projekt bringt eigene Prüfungen mit: API-Tests mit Dutzenden Fällen, App-Tests, die Kontrolle aller Links und strukturierten Daten und Browserläufe von Handy bis Desktop. Erst wenn alles grün ist, wird ausgeliefert.

06

Dokumentiert und übergabefähig

GitChangelogAnleitung je Projekt

Jedes Projekt liegt in einer eigenen Versionsverwaltung, mit Änderungsverlauf und Anleitung. Jede ausgelieferte Version wird archiviert und lässt sich zurückholen. Deine Website hängt nicht an meinem Gedächtnis.

Der Werkzeugkasten

Vier Fächer, sauber sortiert.

Für jede Art von Projekt gibt es ein eingespieltes Set an Werkzeugen. Links steht die Technik, rechts, wofür ich sie einsetze.

Websites

HTML · CSS · JavaScript
Gerüst, Gestaltung und Bedienung, ohne Build-Schritt
PHP · PHPMailer
Anfrageformulare mit Versand über SMTP
Apache · .htaccess
HTTPS, Sicherheits-Header, Caching, Weiterleitungen
JSON-LD · Sitemap · llms.txt
verständlich für Google und KI-Suchen
WebP · WOFF2
leichte Bilder, Schriften vom eigenen Server
Python
Seitengenerator für gleiche Kopf- und Fußzeilen

Betriebssoftware & Plattformen

PHP 8
Fachlogik und Schnittstellen, ohne schweres Framework
MySQL · MariaDB · SQLite
Datenbanken mit vorbereiteten Abfragen
React · TypeScript · Vite
Weboberflächen für CraftClock, Lernwerk und Flowboard
Bootstrap · Tailwind CSS
einheitliches Erscheinungsbild in jedem Werkzeug
PWA · Web Push
installierbar, robust bei Funkloch, mit Erinnerungen
Stripe
Abos und Einmalzahlungen, Freischaltung per Webhook

Apps für iPhone & Android

Flutter · Dart
eine Codebasis für iOS und Android
Swift · SwiftUI · WidgetKit
Steuerelement für Kontrollzentrum und Sperrbildschirm
Kotlin · Java · Gradle
Android-Anpassungen und native Android-App
SQLite auf dem Gerät
Buchungen ohne Netz, Abgleich danach
Face ID · Standort · Sprache
Gerätefunktionen nur dort, wo sie helfen, und nur mit Zustimmung
Codemagic · TestFlight
iPhone-Versionen in der Cloud gebaut und verteilt

Prüfen, Ausliefern, Betreuen

Git · GitHub
ein eigenes Repository je Produkt
Playwright · Edge
Browsertests auf vier Bildschirmbreiten
Vitest · flutter test · API-Tests
automatische Prüfungen vor jeder Auslieferung
TypeScript · oxlint
Fehler finden, bevor sie beim Kunden auftauchen
Python · SFTP
nur geänderte Dateien hochladen, jede Version archiviert
PowerShell · Node.js
Pakete bauen, Titelbilder und Symbole erzeugen

Projekte & Technik

Jedes Projekt hat seine eigene Lösung.

Neunzehn Projekte, von der Kundenwebsite bis zur iPhone-App. Filtere nach Art oder wähle eine Technik, um zu sehen, wo sie steckt.

Websitelive

ritter-webservice.de

Diese Website: Webdesign-Angebot, acht Produktseiten, AppHub und Ratgeber.

  • Das Anfrageformular übernimmt die Softwareauswahl aus dem Preisrechner und rechnet sie auf dem Server nach.
  • Automatische Prüfung aller Links, Sprungmarken und strukturierten Daten, dazu Browserläufe auf vier Breiten.
  • Die Titelbilder der Software entstehen per Skript aus echten Programmansichten.

HTMLCSSJavaScriptPHPPHPMailerApacheJSON-LDPythonPlaywright

Websitelive

Deuker Lack & Karosserie

Relaunch für einen Meisterbetrieb in Bünde: Service-Website mit Anfrage für Kostenvoranschläge und Karrierebereich.

  • Kontakt- und Bewerbungsformular mit eigener Rechenaufgabe als Spamschutz: signiert, ohne Captcha-Dienst und ohne Speicher auf dem Server.
  • Die Betriebsferien stehen in einer einzigen Datei und steuern Hinweisbanner und Formular zugleich.
  • Fotos werden zusätzlich als WebP ausgeliefert, für kurze Ladezeiten.

HTMLCSSJavaScriptPHPApacheWebP

Websitelive

NG Buchhaltungsservice

Vom Instagram-Profil zum ersten eigenen Webauftritt: Leistungen, Preise, persönliche Vorstellung und Kontakt auf einer Seite.

  • Ein Onepager, der Besucher vom Problem über Leistungen und Preise bis zur Anfrage führt.
  • Das Kontaktformular verschickt über den eigenen Server, statt nur das Mailprogramm zu öffnen.
  • Strukturierte Daten weisen die Seite in der Google-Suche als Buchhaltungsservice aus.

HTMLCSSJavaScriptPHPJSON-LD

Websitelive

DG Industrial Solutions

Digitale Neugründung für Vorrichtungsbau und CAD-Konstruktion: klare B2B-Positionierung von der Analyse bis zur Schulung vor Ort.

  • Content-Security-Policy: Skripte laufen nur vom eigenen Server, Formulare senden nur an die eigene Domain.
  • Jede Leistung hat einen eigenen Anfrageknopf, der im Formular den passenden Betreff vorwählt.
  • Strukturierte Daten mit Standort und Inhaber für die lokale Suche.

HTMLCSSJavaScriptPHPApacheJSON-LD

Websitelive

Alpha Planungsbüro

Neue digitale Positionierung für ein Planungsbüro mit mehr als 15 Jahren Erfahrung.

  • 20 Referenzprojekte, jedes mit Kategorie und Ort eingeordnet.
  • Bestandsanalyse vorab: falsch geschriebene Bildpfade, verwaiste Dateien, fehlende SEO-Grundlagen und fremd eingebundene Bilder aufgespürt.
  • Reines HTML, CSS und JavaScript, ohne Bibliotheken und ohne Build-Schritt.

HTMLCSSJavaScript

Websitein Arbeit

Schulzes Hof

Relaunch für eine Eventlocation mit zweitem Standbein: Feiern in der Deele und Rindfleisch aus eigener Haltung.

  • 19 Seiten aus einem Python-Generator: Kopf, Fuß und Stammdaten werden nur einmal gepflegt.
  • Der 360°-Rundgang lädt Google erst nach einem Klick, die Seite bleibt ohne Cookie-Banner.
  • Fotos in zwei Breiten und zwei Formaten, zwei Anfrageformulare mit Versandprotokoll.

HTMLCSSJavaScriptPHPApachePythonWebP

Betriebssoftware · Applive

CraftClock Zeiterfassung

Zeiterfassung für Handwerk und Bau: App für die Baustelle, Weboberfläche für die Verwaltung, eine gemeinsame Schnittstelle dazwischen.

  • Buchungen funktionieren ohne Netz und werden später abgeglichen. Doppelt gesendete Daten erzeugen keine doppelten Einträge.
  • Start und Pause direkt aus dem Kontrollzentrum des iPhones, ohne die App zu öffnen.
  • Hinweise nach Arbeitszeitgesetz verändern nie die erfassten Zeiten; jede Korrektur der Verwaltung braucht einen Grund.

FlutterSwiftKotlinReactTypeScriptVitePHPMySQL/MariaDBSQLiteCodemagic

Betriebssoftwarein Entwicklung

Gefährdungsbeurteilung

Arbeitsbereiche beurteilen, Maßnahmen planen und Unterweisungen nachweisen.

  • Risikobewertung in einer 5×5-Matrix, Maßnahmen nach dem STOP-Prinzip.
  • Gefährdungsfaktoren nach BAuA-Katalog, fällige Überprüfungen im Dashboard.
  • Druckbare Nachweise mit Unterschriftsfeldern direkt aus dem Browser.

PHPMySQL/MariaDBBootstrapJavaScript

Betriebssoftwarein Entwicklung

Unterweisung & Schulung

Pflichtschulungen planen, durchführen und mit Zertifikat nachweisen.

  • Drei Rollen: Verwaltung, Trainer und Mitarbeitende sehen jeweils nur, was sie brauchen.
  • Zertifikate mit Ablaufdatum, Online-Schulungen mit veröffentlichten Versionen.
  • Audit-Protokoll und eine eigene Datenbank je Betrieb.

PHPMySQL/MariaDBBootstrap

Betriebssoftwarein Entwicklung

Digitale Personalakte

Personalunterlagen geschützt ablegen und den Nachweis nach dem Nachweisgesetz führen.

  • Geführter Nachweis mit allen Angaben aus § 2 NachwG und einer Fristenampel.
  • Veröffentlichte Nachweise sind unveränderliche Versionen mit Empfangsbestätigung.
  • Dokumente mit zufälligen Dateinamen, Abruf nur nach Anmeldung.

PHPMySQL/MariaDBBootstrap

Betriebssoftwarein Entwicklung

Prüf- & Wartungschecklisten

Prüfpflichtige Arbeitsmittel, Fristen und Mängel an einem Ort.

  • Prüfplaketten mit QR-Code führen per Handy direkt zum Gerät.
  • Messwerte außerhalb der Grenzwerte gelten automatisch als Mangel, geprüft im Browser und auf dem Server.
  • Sicherheitsrelevante Mängel sperren das Arbeitsmittel sofort; Prüfprotokolle sind unveränderlich.

PHPMySQL/MariaDBBootstrapJavaScript

Betriebssoftwarein Entwicklung

Schicht- & Urlaubsplanung

Dienstplan, Urlaubskonten und Abwesenheiten in einer Wochenansicht.

  • Warnt bei zu langen Schichten und zu kurzer Ruhezeit nach Arbeitszeitgesetz, auch über Wochengrenzen hinweg.
  • Feiertage je Bundesland, das Osterdatum berechnet ein eigener Algorithmus.
  • Hinweise auf drohenden Urlaubsverfall werden als Nachweis festgehalten.

PHPMySQL/MariaDBBootstrap

Betriebssoftwarein Entwicklung

Elektronisches Fahrtenbuch

Fahrten am Handy starten und beenden, ohne Hardware im Fahrzeug und ohne GPS-Ortung.

  • Jeder Eintrag ist mit dem vorherigen per Prüfsumme (HMAC) verkettet: Änderungen an der Software vorbei fallen auf.
  • Lückenlose Kilometerkette: Überschneidungen werden abgewiesen, Lücken angezeigt.
  • CSV-Export mit Schutz vor eingeschleusten Formeln in Tabellenprogrammen.

PHPMySQL/MariaDBBootstrap

Betriebssoftwarein Entwicklung

Terminbuch & Kundenportal

Online-Terminbuchung im Erscheinungsbild des Betriebs, mit Kundenportal und Terminverwaltung.

  • Die Buchungsseite funktioniert ohne JavaScript, ohne Cookies und ohne externe Ressourcen.
  • Einbettung auf der eigenen Website, freigegeben nur für eingetragene Domains.
  • Keine Doppelbuchung: Die Verfügbarkeit wird beim Speichern erneut geprüft. Kundenportal per signiertem Link, ganz ohne Passwort.

PHPPHPMailerMySQL/MariaDBJavaScript

Lern-App · Plattformlive

Lernwerk & Führerschein-Trainer

Eine Plattform für viele Lern-Apps: Jede neue App ist im Kern eine Konfiguration plus Fragen.

  • Als Web-App installierbar; Lernrunden werden bei Funkloch später nachgesendet.
  • Wiederholung nach dem Leitner-Prinzip; Punkte, Serien und Abzeichen berechnet der Server.
  • Premium über Stripe, freigeschaltet wird nur per bestätigter Zahlungsmeldung.

ReactTypeScriptViteVitestPWAPHPMySQL/MariaDBStripe

AppTestversion

Vokabeln lernen

Karteikarten Deutsch–Englisch für iPhone und Android, ganz ohne Konto und Server.

  • Fahrmodus: Die App liest vor, hört die Antwort, prüft sie und macht weiter, freihändig im Auto.
  • Eigene Wortlisten per CSV-Import, Wiederholung in wachsenden Abständen.
  • Der Vorgänger lief als native Android-App in Java.

FlutterJava

App · internintern

Flowboard

Tagesplanung trifft Kanban-Board: die eigene Aufgaben- und Projektverwaltung von Ritter Webservice.

  • Karten per Drag & Drop zwischen Listen und Tagen verschieben.
  • Erinnerungen per Web Push, auch offline nutzbar.
  • Native Flutter-App für iPhone und Android an derselben Schnittstelle.

ReactTypeScriptViteTailwind CSSPWAWeb PushFlutterPHPMySQL/MariaDB

Internintern

Buchhaltungs-App

Einnahmen, Ausgaben und Rechnungen von Ritter Webservice, selbst gebaut statt gemietet.

  • Wiederkehrende Buchungen legen jeden Monat automatisch einen offenen Posten an.
  • Datenbank-Änderungen als nummerierte Migrationen, bestehende Daten bleiben erhalten.
  • Anmeldung mit Passwort-Reset und Schutz gegen Durchprobieren.

PHPMySQL/MariaDBJavaScript

Laborintern

Labor: Daten & Diagramme

Werkzeuge für den Eigenbedarf. Hier probiere ich Technik aus, die nicht zum Standardwerkzeug gehört.

  • Auswertung mit Diagrammen: Vue mit Chart.js, dahinter eine PHP-Schnittstelle mit Slim und PHPUnit-Tests.
  • Ein eigener Indikator für TradingView in Pine Script.
  • Ein Markt-Dashboard mit React und Lightweight Charts.

VueTypeScriptTailwind CSSChart.jsPHPReactPine Script

Bewusst weggelassen

Was du bei mir nicht bekommst.

Gute Technik zeigt sich auch an dem, was fehlt. Diese Dinge lasse ich weg, weil sie mehr kosten, als sie dir bringen.

Plugin-Sammlungen

Kein WordPress mit zwanzig Erweiterungen, die einzeln aktualisiert werden wollen. Was ich baue, hat keine Theme-Updates, die etwas kaputt machen können.

Tracker & Cookie-Banner

Keine Statistik-Skripte von Dritten und keine Werbe-Pixel. Was nicht mitliest, braucht auch kein Banner, das deine Besucher erst wegklicken müssen.

Fremde Captcha-Dienste

Spamschutz entsteht auf deinem Server: Spamfalle, Zeitprüfung, Mengenbegrenzung und, wo nötig, eine kleine Rechenaufgabe. Kein Bilderrätsel, keine Datenweitergabe.

Ortung ohne Grund

Das Fahrtenbuch kommt ohne GPS aus, CraftClock fragt den Standort nur an, wenn der Betrieb es einschaltet. Gerätefunktionen gibt es nur mit Zustimmung.

Festhalten am Anbieter

Deine Website besteht aus normalen Dateien, die jeder Webspace ausliefern kann. Am Ende eines Abos bekommst du eine vollständige Kopie und kannst sie überall weiter betreiben.

Arbeitsweise

Vom ersten Entwurf bis zum Update.

So läuft ein Projekt technisch ab, egal ob Website, Betriebssoftware oder App.

Lokal bauen

Jedes Projekt läuft zuerst auf meinem Rechner, mit eigenem Testserver und Beispieldaten. Echte Kundendaten brauche ich dafür nicht.

eigene Testumgebung je Projekt

Prüfen

Automatische Tests, Linkprüfung und ein Blick auf Handy, Tablet und Desktop. Was rot ist, geht nicht raus.

390 · 768 · 1024 · 1440 px

Ausliefern

Ein geprüftes Paket geht auf den Server, übertragen werden nur geänderte Dateien. Apps entstehen per Cloud-Build und gehen über TestFlight in die Stores.

jede Version archiviert

Betreuen

Jede Änderung landet im Änderungsverlauf, jede frühere Version lässt sich wiederherstellen. Du sprichst immer mit dem, der es gebaut hat.

ein Ansprechpartner

Nächster Schritt

Du hast eine Aufgabe, aber noch keine Technik dafür?

Erzähl mir, was einfacher werden soll. Welche Werkzeuge dazu passen, klären wir danach.