mrwhiski b74dd3744e Fix SEO/a11y issues, add Impressum UID, stop tracking raw photos

- Use absolute og:image URLs and add missing og:description on Impressum
- Load Google Fonts via <link> instead of blocking @import
- Prevent default on shop request button to avoid stray URL hash
- Guard optimize-images.js against silent filename collisions
- Add real Umsatzsteuer-Identifikationsnummer (UID) to Impressum
- Correct README's shop description to match actual empty state
- Stop tracking images/fotowebsite/ (raw, uncompressed source photos)
  since only images/optimized/ is served by the site

2026-08-25 21:48:57 +02:00

4.5 KiB

Raw Blame History

Tischlerei Staffenberger – Kleine Firmenwebsite

Kleine, statische Website für einen selbstständigen Tischler (Ein-Mann-Betrieb).
Technik: reines HTML, CSS und JavaScript ohne Frameworks.

Ordnerstruktur

Tischlerei-Staffenberger/
├── index.html          # Generiert von scripts/build.js – nicht direkt bearbeiten
├── pictures.html        # (dito)
├── shop.html            # (dito)
├── impressum.html       # (dito)
├── templates/           # Editierbare Quelldateien der obigen Seiten
├── partials/            # header.html / footer.html, in alle Seiten eingebunden
├── shop-item-template.html  # Vorlage für einzelne Shop-Artikel (manuell kopieren)
├── README.md
├── css/
│   └── style.css       # Ein zentrales Stylesheet
├── js/
│   └── script.js       # Navigation, Galerie-Filter, Lightbox, Shop-Anfragen
├── scripts/
│   ├── build.js             # Baut templates/ + partials/ zu den Root-HTML-Dateien
│   └── optimize-images.js   # Erzeugt WebP/JPEG-Varianten aus images/fotowebsite/
└── images/
    ├── fotowebsite/     # Original-Fotos (Rohmaterial, unkomprimiert) – nicht in git, siehe unten
    └── optimized/       # Generierte WebP/JPEG-Varianten (von optimize-images.js)

Hinweis zu images/fotowebsite/: Die unkomprimierten Rohfotos (oft mehrere MB pro Bild) sind bewusst nicht in git getrackt (.gitignore), um das Repository klein zu halten – ausgeliefert wird ohnehin nur images/optimized/. Rohfotos bitte separat sichern (z. B. externe Festplatte/Cloud-Speicher), bevor sie lokal gelöscht werden.

Seiten bearbeiten (Templates + Build)

Header und Footer sind identisch auf allen Seiten und liegen daher nur einmal in partials/header.html bzw. partials/footer.html. Die eigentlichen Seiteninhalte liegen als Quelldateien in templates/ und enthalten an der Stelle von Header/Footer nur eine Markierung wie .

Wichtig: index.html, pictures.html, shop.html und impressum.html im Hauptverzeichnis sind generierte Dateien – Änderungen daran gehen beim nächsten Build verloren. Bitte immer in templates/ bzw. partials/ bearbeiten, danach:

npm run build

Das schreibt die fertigen, statischen HTML-Dateien ins Hauptverzeichnis. Diese generierten Dateien werden weiterhin mit committed – der Webhost braucht keinen eigenen Build-Schritt, es wird nach wie vor nur reines HTML/CSS/JS ausgeliefert.

Lokal ausführen

Die Seite besteht nur aus statischen Dateien. Sie können sie so starten:

Option 1: Direkt im Browser öffnen

Doppelklick auf index.html oder
Datei in den Browser ziehen

Hinweis: Einige Browser blockieren bei file:// das Laden externer Ressourcen (z.B. Google Fonts, Platzhalter-Bilder von picsum.photos). Dann Option 2 nutzen.

Option 2: Mit lokalem Webserver (empfohlen)

Im Projektordner in der Kommandozeile:

Mit Python 3:

# Ab Python 3.x
python -m http.server 8000

Mit Node.js (npx):

npx serve .

Mit PHP:

php -S localhost:8000

Anschließend im Browser aufrufen: http://localhost:8000

Von dort aus funktionieren alle Links, Schriftarten und Platzhalter-Bilder.

Anpassungen

Impressum & Kontakt: In templates/impressum.html und partials/footer.html die Angaben (Name, Adresse, Telefon, E-Mail, UID-Nummer) pflegen, danach npm run build.
Shop-Anfragen: In js/script.js die E-Mail-Adresse in der Zeile mit mailto: anpassen.
Bilder: Eigene Fotos nach Kategorie in images/fotowebsite/{kitchen,outdoor,custom}/ ablegen, dann npm run optimize-images ausführen, um die WebP/JPEG-Varianten in images/optimized/ zu erzeugen. Anschließend in templates/pictures.html das neue <figure class="gallery-item">-Element ergänzen (nach vorhandenem Muster kopieren) und npm run build ausführen.

Seitenüberblick

Seite	Inhalt
Start	Banner, Willkommenstext, Über mich, Leistungen (Möbel, Küchen, Außen), CTA „Kontakt“.
Bilder	Galerie mit Filter: Alle / Küche / Außenbereich / Sonderanfertigung.
Shop	Leer bis Artikel ergänzt werden (siehe `shop-item-template.html`); jede Karte zeigt Bild, Beschreibung, Preis und Button „Anfragen” (öffnet E-Mail).
Impressum	Anbieter, Kontakt, USt-ID, Verantwortlichkeit, Haftungsausschluss (Platzhalter).

Navigation ist auf allen Seiten gleich; die aktuelle Seite wird hervorgehoben.

4.5 KiB Raw Blame History Unescape Escape