Template
127 lines
9.5 KiB
Markdown
127 lines
9.5 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. Bleibt sie drin, sperrt das Portal den Deploy (die Subdomain gehört der Vorlage), und das neue Projekt bleibt ohne Preview, bis es im WOMS eine eigene bekommt.
|
||
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.
|