106 lines
6.7 KiB
Markdown
106 lines
6.7 KiB
Markdown
# Ernährungsseite – Integrationsänderungen
|
||
|
||
## Dateien und Zuständigkeiten
|
||
|
||
Die Bereiche stehen gemeinsam in [index.html](../index.html), in dieser Reihenfolge: Produktübersicht → Pakete → Berater → Beratungsinformationen mit Footer.
|
||
|
||
| Bereich | CSS | JavaScript | Daten |
|
||
| --- | --- | --- | --- |
|
||
| Shahnam: Produktübersicht | [produktuebersicht.css](../css/produktuebersicht.css) | – | Direkt im HTML |
|
||
| Vincent: Pakete | [leistungen.css](../css/leistungen.css) | [leistungen.js](../js/leistungen.js) | [pakete.json](../json/pakete.json) |
|
||
| Ahmad: Berater | [berater.css](../css/berater.css) | [berater.js](../js/berater.js) | [berater.json](../json/berater.json) |
|
||
| Dennis: Beratung und Footer | [beratung.css](../css/beratung.css) | [beratung.js](../js/beratung.js) | Direkt im HTML |
|
||
|
||
[site.css](../css/site.css) enthält nur die gemeinsame Seitengrundlage: Hintergrund, Textfarbe, Standardschrift und den entfernten Außenabstand des `body`.
|
||
|
||
### Umbenannte und verschobene Dateien
|
||
|
||
Die alten Pfade beziehen sich auf den jeweiligen Quellbranch.
|
||
|
||
| Bereich | Vorher | Jetzt |
|
||
| --- | --- | --- |
|
||
| Shahnam | `css/style.css` | `css/produktuebersicht.css` |
|
||
| Vincent | `css/style.css` | `css/leistungen.css` |
|
||
| Vincent | `js/script.js` | `js/leistungen.js` |
|
||
| Ahmad | `css/style.css` | `css/berater.css` |
|
||
| Dennis | `style.css` | `css/beratung.css` |
|
||
| Dennis | `script.js` | `js/beratung.js` |
|
||
| Beraterbilder | `img/relindis_agethen.png` | `images/relindis_agethen.png` |
|
||
| Beraterbilder | `img/relindis_agethen_1.jpg` | `images/relindis_agethen_1.jpg` |
|
||
|
||
Die Bildpfade in `json/berater.json` wurden entsprechend angepasst.
|
||
|
||
## Gemeinsames HTML und CSS
|
||
|
||
**HTML:** Die unterschiedlichen `index.html`-Versionen wurden zu einem Dokument mit einem `head`, einem `body` und einem übergeordneten `main` zusammengesetzt. Alle benötigten CSS- und JS-Dateien sind dort eingebunden; die Skripte laden mit `defer`. Die Schriftarten werden einmal im gemeinsamen Head angefordert.
|
||
|
||
**CSS:** Regeln für `body`, Überschriften, `.container` und Farbvariablen waren ursprünglich teilweise seitenweit gültig. Sie sind jetzt auf die jeweiligen Bereiche begrenzt:
|
||
|
||
| Bereich | Äußerer Selektor |
|
||
| --- | --- |
|
||
| Produktübersicht | `.produktuebersicht` |
|
||
| Pakete | `.pakete` |
|
||
| Berater | `.berater-section` |
|
||
| Beratung einschließlich Footer | `.beratung-bereich` |
|
||
|
||
Beispiel: `.produktuebersicht .container` gilt nur im Produktbereich, `.beratung-bereich .container` nur im Beratungsbereich. Gleichnamige Klassen und Variablen können dadurch in beiden Bereichen bestehen bleiben.
|
||
|
||
**Beim Ergänzen von Styles:** Den jeweiligen äußeren Selektor beibehalten. Neue globale Regeln wie `h2 { ... }`, `.container { ... }` oder Variablen in `:root` können wieder andere Bereiche beeinflussen. Ein anderer CSS-Dateiname allein verhindert das nicht.
|
||
|
||
## Änderungen je Bereich
|
||
|
||
### Shahnam – Produktübersicht
|
||
|
||
- Der gesamte Bereich liegt jetzt innerhalb von `.produktuebersicht`; die Styles und Variablen wurden entsprechend begrenzt.
|
||
- Das bisherige innere `main` wurde zu `div.produktuebersicht__main`, damit es nur einen übergeordneten `main` gibt. Der innere `.hero` ist ebenfalls ein `div`.
|
||
|
||
### Vincent – Pakete
|
||
|
||
| Stelle | Änderung | Grund |
|
||
| --- | --- | --- |
|
||
| Datenabruf in `js/leistungen.js` | `data/pakete.json` → `json/pakete.json` | Der bisherige Pfad passte nicht zum vorhandenen Ordner. |
|
||
| Initialisierung | Prüfung auf `#leistungen`; Elementsuche innerhalb dieses Bereichs | Das Skript greift nur auf seinen eigenen Bereich zu. |
|
||
| Datenabruf | HTTP-Statusprüfung und `try/catch` mit sichtbarer Fehlermeldung | Ein Ladefehler soll nicht als leerer Paketbereich enden. |
|
||
| Paketbuttons | Klickfunktion wieder angeschlossen | Die Auswahl aus der ersten Umsetzung fehlte nach der Umstellung auf JSON. |
|
||
| Auswahlstatus | Genau eine markierte Karte und `aria-pressed` für die Buttons | Auswahl sichtbar und für Hilfstechnologien erkennbar halten. |
|
||
|
||
Nach einer Auswahl wird auf `document` das Event `paket:ausgewaehlt` ausgelöst. `event.detail.paket` enthält den `dataPaket`-Wert aus der JSON-Datei. Eine spätere Buchungsfunktion kann daran anschließen; der Button führt aktuell keine Buchung aus.
|
||
|
||
### Ahmad – Berater
|
||
|
||
- Kartenbreite von `380px` auf `min(380px, 100%)` angepasst; der Kartencontainer erhält `width: 100%` bei weiterhin maximal `1000px`. So passen die Karten auf schmale Displays.
|
||
- CSS auf `.berater-section` begrenzt. Die HTML-Sektion erhielt `id="berater"` und eine zugängliche Bereichsbezeichnung.
|
||
- `json/berater.json`: die beiden Bildpfade auf `images/` umgestellt.
|
||
|
||
### Dennis – Beratung und Footer
|
||
|
||
- CSS auf `.beratung-bereich` begrenzt. Die vorhandenen allgemeinen Klassennamen bleiben innerhalb dieses Containers nutzbar.
|
||
- Der dekorative Hintergrund ist jetzt innerhalb des Bereichs absolut positioniert und durch `isolation: isolate` begrenzt. Er liegt nicht mehr fest hinter der gesamten Seite.
|
||
- Scroll-Reveal sucht in `js/beratung.js` nach `.beratung-bereich .reveal` statt seitenweit nach `.reveal`.
|
||
- Grid-Spalten verwenden `minmax(0, 1fr)`. Die Karten erhalten `min-width: 0`, `overflow-wrap: anywhere` und `hyphens: auto`. Das behebt den beim 320-Pixel-Test festgestellten horizontalen Überlauf durch lange Wörter.
|
||
|
||
## Lokal starten und prüfen
|
||
|
||
`index.html` über einen lokalen HTTP-Server öffnen, zum Beispiel VS Code Live Server. Beim direkten Öffnen als `file://` können die JSON-Abfragen scheitern.
|
||
|
||
Die vollständige Integrationsprüfung erfolgte automatisiert in Chrome, ergänzt durch die Ansicht von Screenshots:
|
||
|
||
- Breiten: **320, 390, 768, 1366 und 1920 px**; nach den Korrekturen kein horizontaler Überlauf.
|
||
- **3 Pakete und 2 Beraterkarten**, funktionierende Bilder und eindeutige IDs.
|
||
- Paketwechsel: genau eine Auswahl und korrektes `paket:ausgewaehlt`-Event.
|
||
- Sichtbare Fehlermeldungen bei fehlender Paket- beziehungsweise Berater-JSON.
|
||
- Sichtbare Beratungsinhalte bei aktivierter Einstellung für reduzierte Bewegung.
|
||
- Keine unbehandelten JavaScript-Fehler oder fehlgeschlagenen lokalen Ressourcen im normalen Testlauf.
|
||
|
||
Die Browserprüfung fand vor dem Verschieben der Bilder statt; danach wurden die Bildpfade und Dateiinhalte geprüft. Andere Browser und echte Mobilgeräte wurden nicht getestet.
|
||
|
||
## Offene Punkte für das Team
|
||
|
||
| Bereich | Noch zu prüfen |
|
||
| --- | --- |
|
||
| Produktübersicht | Platzhalter durch endgültige Texte ersetzen. |
|
||
| Pakete | Bezeichnung `STANDART`, Preise und Paketangaben prüfen; Buchungsfunktion noch offen. |
|
||
| Berater | Zwei gleich benannte Profile mit gleichen Informationen und unterschiedlichen Bildern sind aus dem Quellstand übernommen. Prüfen, ob das so vorgesehen ist. |
|
||
| Kontakt und externe Links | Ziele und Angaben fachlich prüfen. |
|
||
| Gesamtgestaltung | Unterschiede bei Farben, Abständen und Schriftgrößen gemeinsam bewerten. |
|