# 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 | ``, 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.