Template
Claude
8da5102333
Firmendaten durch Platzhalter ersetzt (Mustermann Haustechnik GmbH, Musterstraße 1, 12345 Musterstadt, 01234 567890, example.com), Design und Funktionen unverändert. - Feiertage im Öffnungsstatus per BUNDESLAND (alle 16 Länder) statt fest Bayern - Datenschutz: Aufsichtsbehörde als TODO je Bundesland - Skript-Namensraum olz -> hsk, Logo-SVG und OG-Bild neu - .webklar-preview.json von Olzinger entfernt (sonst Deploy auf olzinger) - .gitea/template: neue Repos aus der Vorlage erben die Preview-Datei nicht - README: Anleitung für neue HSK-Seiten, Platzhalter-Tabelle, Checkliste Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
127 lines
9.4 KiB
Markdown
127 lines
9.4 KiB
Markdown
# HSK-Vorlage – Website für Heizung · Sanitär · Klima
|
||
|
||
Vorlage für Websites von **HSK-/SHK-Betrieben** (Heizung, Sanitär, Lüftung/Klima, regenerative Energien). Entstanden aus der Website für Olzinger Haustechnik (`WEBklar/Olzinger`). Alle Firmendaten sind hier durch **Platzhalter** ersetzt („Mustermann Haustechnik GmbH“, „Musterstadt“, `example.com`).
|
||
|
||
Statische Website ohne Build-Schritt: HTML, CSS und JavaScript ohne Bibliotheken, Schrift lokal eingebunden (kein CDN, keine Cookies, kein Tracking).
|
||
|
||
## Neue HSK-Seite aus der Vorlage anlegen
|
||
|
||
1. In Gitea bei `WEBklar/HSK-Vorlage` auf **„Diese Vorlage verwenden“** klicken. Besitzer: `WEBklar`, Name: z. B. `Mueller-Haustechnik`. Haken bei **„Git-Inhalt (Standardbranch)“** setzen.
|
||
- Gitea lässt dabei `.webklar-preview.json` weg (siehe `.gitea/template`). Das neue Repo bekommt also **nicht** die Preview der Vorlage.
|
||
- Wird stattdessen per `git clone` kopiert: `.webklar-preview.json` **vor dem ersten Push löschen**. Sonst landet die neue Seite auf `hsk-vorlage.project.webklar.com` und überschreibt die Vorlage.
|
||
2. Im WOMS das Projekt dem Ticket bzw. Kunden zuordnen und **„Preview einschalten“** wählen.
|
||
3. Platzhalter ersetzen (Tabelle unten), Texte anpassen und die Checkliste abarbeiten.
|
||
|
||
## Platzhalter
|
||
|
||
Am schnellsten per Suchen & Ersetzen über alle Dateien. Danach nach `Mustermann`, `Musterstadt`, `example.com`, `12345`, `01234` und `TODO` suchen. Es darf nichts übrig bleiben.
|
||
|
||
| Platzhalter | Bedeutung | Vorkommen |
|
||
|---|---|---|
|
||
| `Mustermann Haustechnik GmbH` | Firmenname mit Rechtsform | Footer, Impressum, Datenschutz, 404, Schema.org, `kontakt.php` |
|
||
| `Mustermann Haustechnik` | Kurzname für Titel und Logo-Beschriftung | `<title>`, Open Graph, `site.webmanifest` |
|
||
| `Mustermann` (Logo-Wort) / `Haustechnik` (Zusatz) | Logo-Schriftzug | `logo__word` / `logo__sub` in allen HTML-Dateien, `assets/img/logo.svg` (`MUSTERMANN`), `tools/og-template.html` |
|
||
| `Musterstraße 1`, `12345 Musterstadt` | Anschrift | Hero, Kontakt, Footer, Impressum, Datenschutz, 404, Schema.org, Google-Maps-Link |
|
||
| `Musterstadt und Umgebung` | Einzugsgebiet | Meta-Description, Open Graph, Schema.org (`areaServed`) |
|
||
| `01234 567890` / `+491234567890` | Telefon (Anzeige / `tel:`-Link) | Navigation, Menü, Hero, Kundendienst-Karte, Kontakt, Footer, Impressum, Datenschutz, 404 |
|
||
| `01234 567891` | Fax | Footer, Impressum, Schema.org |
|
||
| `kontakt@example.com` | E-Mail | Kontakt, Karriere-Links, Footer, Impressum, Datenschutz, `kontakt.php`, `assets/js/contact.js` |
|
||
| `www.example.com` | Domain | `canonical`, Open Graph, Schema.org, `sitemap.xml`, `robots.txt`, `kontakt.php`, `tools/og-template.html` |
|
||
| `1990` / `Max Mustermann` | Gründungsjahr / Gründer | Hero, „Über uns“, Chronik, Schema.org, `assets/js/main.js` (`nowYear - 1990`) |
|
||
| `2015` / `Erika Mustermann` | Chronik-Eintrag / Geschäftsführung | Chronik, Impressum, Datenschutz |
|
||
| `Rund 20 Fachleute` / `"value": 20` | Mitarbeiterzahl | „Über uns“, Schema.org |
|
||
| `Amtsgericht Musterstadt`, `HRB 12345` | Handelsregister | Impressum |
|
||
|
||
## Vor dem Livegang prüfen
|
||
|
||
- [ ] **Firmendaten** vollständig ersetzt (Suche siehe oben).
|
||
- [ ] **Bundesland** für die Feiertage im Öffnungsstatus: `BUNDESLAND` oben in `assets/js/contact.js` (Standard `BY`). Dazu `addressRegion` in den Schema.org-Daten von `index.html`.
|
||
- [ ] **Öffnungszeiten:** `SCHEDULE` in `assets/js/contact.js`, die Texte in allen HTML-Dateien (Status-Zeile, Kontaktbereich, Footer) und `openingHoursSpecification` in `index.html`.
|
||
- [ ] **Leistungen:** Die 5 Karten, die Formular-Themen und `knowsAbout` (Schema.org) an das Angebot des Betriebs anpassen. Bei weniger Karten den Zähler `/ 5` in `index.html` anpassen.
|
||
- [ ] **Über uns und Karriere:** Chronik, Mitarbeiterzahl, Ausbildungsberufe, Startmonat.
|
||
- [ ] **Impressum:** Geschäftsführung, Registereintrag, Umsatzsteuer-ID und berufsrechtliche Angaben (Kammer, Berufsbezeichnung). Die letzten beiden sind als Kommentar in `impressum.html` vorbereitet.
|
||
- [ ] **Datenschutz:** Hosting-Anbieter, Speicherdauer der Server-Logs, Vertrag zur Auftragsverarbeitung, zuständige Aufsichtsbehörde (Abschnitt 9). Alles als `TODO` markiert. Rechtstexte sind Entwürfe und ersetzen keine Rechtsberatung.
|
||
- [ ] **Formular:** In `kontakt.php` Empfänger/Absender prüfen (`RECIPIENT`, `SENDER`) und einmal testweise absenden.
|
||
- [ ] **Logo und Farben:** Für ein eigenes Logo die Logo-Marke (Thermostat-Bogen, `logo__mark`) in den HTML-Dateien, `assets/img/logo.svg`, die Favicons und `tools/og-template.html` ersetzen. Die Farben stehen als Design-Tokens am Anfang von `assets/css/main.css`.
|
||
- [ ] **Open-Graph-Bild** neu rendern (siehe „Anpassen“). Das Bild enthält Name, Ort und Domain.
|
||
- [ ] `sitemap.xml`: `lastmod` aktualisieren.
|
||
- [ ] Optional: echte Fotos (Team, Projekte, Bäder) ergänzen. Die Illustrationen tragen die Seite auch ohne Fotos.
|
||
|
||
## Gestaltungsidee: „Wärmebild“
|
||
|
||
Haustechnik sieht man nicht – man spürt sie. Deshalb zeigt der Einstieg ein ruhiges, live berechnetes **Wärmebild** (WebGL) mit Isothermen wie bei einer Thermografie-Kamera. Eine langsam wandernde Wärmequelle hält das Bild in Bewegung – ohne Maus- oder Touch-Effekte. Durch die Seite zieht sich das Motiv **warm trifft kalt** (Vorlauf/Rücklauf): Farbverlauf Blau → Magenta → Orange, das Logo als Thermostat-Skala.
|
||
|
||
Grundsatz: wenig Text, wenig Bewegung, gut bedienbar am Handy.
|
||
|
||
## Bereiche der Startseite
|
||
|
||
| Bereich | Besonderheit |
|
||
|---|---|
|
||
| Hero | Ruhiges WebGL-Wärmebild, Live-Öffnungsstatus (inkl. Feiertage des Bundeslands), Anfrage- und Telefon-Button |
|
||
| Leistungen | 5 Karten mit Illustrationen; am Desktop als Kartenstapel, unter 900 px wischbare Karten mit Zähler (1 / 5) und Pfeilen |
|
||
| Energie-Haus | Hausschnitt: Wärmepumpe, Solarthermie, Speicher, Fußbodenheizung, Bad, Lüftung – der gewählte Kreislauf wird hervorgehoben |
|
||
| Heizungs-Finder | 4 Fragen → Empfehlung (Wärmepumpe / Pellets / Hybrid); Ergebnis lässt sich ins Kontaktformular übernehmen |
|
||
| Über uns | Kurze Chronik vom Gründungsjahr bis heute |
|
||
| Karriere | Ausbildung Anlagenmechaniker SHK, Initiativbewerbung |
|
||
| Kontakt | Kontaktkarten, Öffnungszeiten mit „Heute“-Markierung, Formular |
|
||
| Footer | Adresse, Kontakt, Öffnungszeiten, Links |
|
||
|
||
Außerdem: `impressum.html`, `datenschutz.html`, `404.html` („Kein Anschluss unter dieser Adresse“), SEO-Daten (Schema.org `HVACBusiness`, Open-Graph-Bild, Sitemap).
|
||
|
||
## Lokal ansehen
|
||
|
||
```bash
|
||
python3 -m http.server 8000
|
||
# dann http://localhost:8000 öffnen
|
||
```
|
||
|
||
`index.html` lässt sich auch direkt per Doppelklick öffnen; das Kontaktformular nutzt dann den E-Mail-Fallback.
|
||
|
||
## Veröffentlichen
|
||
|
||
Den kompletten Ordnerinhalt auf den Webspace laden (z. B. per FTP). Voraussetzungen:
|
||
|
||
- Beliebiger Webserver; für den direkten Formularversand **PHP 7.4+** mit funktionierender `mail()`-Funktion (`kontakt.php`).
|
||
- Ohne PHP funktioniert das Formular trotzdem: Es öffnet dann das E-Mail-Programm des Besuchers mit vorbereiteter Nachricht.
|
||
- `.htaccess` (Apache) setzt die 404-Seite, Caching und Sicherheits-Header. Bei anderen Servern einfach ignorieren.
|
||
- `404.html` nutzt absolute Pfade (`/assets/...`) – liegt die Seite in einem Unterordner, Pfade dort anpassen.
|
||
- CSS und JS werden eine Woche gecacht. Nach Änderungen an `main.css` oder den Skripten die Versionsnummer `?v=…` in allen HTML-Dateien hochzählen, damit Besucher nicht alte Dateien sehen.
|
||
|
||
## Struktur
|
||
|
||
```
|
||
index.html Startseite
|
||
impressum.html Impressum
|
||
datenschutz.html Datenschutzerklärung
|
||
404.html Fehlerseite
|
||
kontakt.php Formularversand (optional, PHP)
|
||
assets/css/main.css Design-System und alle Styles
|
||
assets/js/thermal.js WebGL-Wärmebild
|
||
assets/js/main.js Navigation, mobiles Menü, Einblendungen, Leistungs-Karussell/Kartenstapel
|
||
assets/js/house.js Energie-Haus (Tabs, Hotspots)
|
||
assets/js/finder.js Heizungs-Finder (Bewertungslogik + Ergebnis)
|
||
assets/js/contact.js Öffnungszeiten live, Feiertage, Kontaktformular
|
||
assets/fonts/ Instrument Sans (OFL, lokal)
|
||
assets/img/ Favicon, Logo, Open-Graph-Bild
|
||
tools/og-template.html Vorlage zum Neu-Rendern des Open-Graph-Bilds
|
||
.gitea/template Regeln für „Diese Vorlage verwenden“ (nur in der Vorlage)
|
||
```
|
||
|
||
## Anpassen
|
||
|
||
- **Farben, Abstände, Schriften:** Design-Tokens am Anfang von `assets/css/main.css` (`--warm`, `--cool`, `--ink`, `--paper` …).
|
||
- **Öffnungszeiten:** in `assets/js/contact.js` (`SCHEDULE`) sowie in den HTML-Dateien (Text und Schema.org-Daten).
|
||
- **Feiertage:** `BUNDESLAND` in `assets/js/contact.js`. Es zählen nur landesweite Feiertage. Die Ausnahme ist Bayern: Dort zählt Mariä Himmelfahrt mit (gilt in Gemeinden mit überwiegend katholischer Bevölkerung).
|
||
- **Heizungs-Finder:** Gewichtung in `assets/js/finder.js` (`evaluate`), Texte in `TEXTS`.
|
||
- **Open-Graph-Bild:** `tools/og-template.html` im Browser öffnen (über einen lokalen Server) und einen Screenshot mit 1200 × 630 px als `assets/img/og-image.jpg` speichern.
|
||
|
||
## Qualität
|
||
|
||
- Barrierefreiheit: Tastaturbedienung für Menü, Tabs, Karussell und Finder; `prefers-reduced-motion` wird respektiert (keine Einblendungen, Wärmebild als Standbild).
|
||
- Ohne JavaScript bleiben alle Texte sichtbar; Energie-Haus und Heizungs-Finder brauchen JavaScript für die Bedienung.
|
||
- Getestet in Chromium: Desktop (1024–1920 px), Tablet (768/834 px, hoch und quer) und Smartphone (360–414 px).
|
||
|
||
## Lizenzen
|
||
|
||
Instrument Sans (SIL OFL 1.1) – Lizenztext in `assets/fonts/OFL-InstrumentSans.txt`. Keine weiteren Bibliotheken.
|