Porsche Experience

Projektübersicht

Porsche Experience entstand im Kommunikationstechnik-Unterricht als gemeinsames Webpräsenzprojekt. Die öffentlich erreichbare Fassung ist als Release 3.1 dokumentiert und umfasst 13 HTML-Seiten für Start, Geschichte, Modelle, Technik, Projektinformationen, Newsletter, Q&A sowie einen Demo-Shop mit Warenkorb, Checkout und Bestellbestätigung.

Ausgangssituation

Die Aufgabenstellung verlangte eine realistische Webpräsenz mit mindestens drei HTML-Dateien, DOM-Manipulation, CSS Grid oder Flexbox, responsiven Breakpoints, einer externen JavaScript-Library sowie nachvollziehbarer Dokumentation. Das Team entschied sich bewusst gegen einen One-Pager und für eine klar gegliederte Plattform.

Ziel des Projekts

Das Ziel war nicht nur eine optisch wirkende Fahrzeugseite. Information, emotionale Medien, Suche, Filter, Sprache und Shop-Abläufe sollten technisch zusammenpassen. Der Shop blieb dabei eine sichere Demonstration ohne echte Zahlung oder reale Bestellung.

Technische Planung

Die Inhalte wurden nach ihrer Aufgabe auf eigenständige Seiten verteilt. Wiederkehrende Navigation, Gestaltung, Übersetzung und Bedienlogik wurden global abgestimmt. Interaktive Bereiche erhielten getrennte Skripte, damit Suche, Medienbühne, Technik-Tabs und Shop-Zustand unabhängig geprüft werden konnten.

Hardware und Software

Die Website funktioniert statisch und ohne Build-Prozess. Als Kern kamen HTML5, CSS3 und Vanilla JavaScript zum Einsatz. Underscore.js 1.13.4 ist lokal unter der MIT-Lizenz eingebunden. Browser-Speicher und URL-Parameter halten Zustände innerhalb des Demo-Shops zusammen; die öffentliche Demo wird über GitHub Pages ausgeliefert.

Frontend

HTML5, CSS3, Vanilla JavaScript

Layout

CSS Grid, Flexbox, responsive Breakpoints

Zustand

URLSearchParams, localStorage, sessionStorage

Bibliothek

Underscore.js 1.13.4, lokal unter MIT-Lizenz

Deployment

GitHub Pages, statisch ohne Build-Prozess

Umsetzung

Die Startseite erhielt eine kontrollierte Bild- und Videobühne. Modelle konnten gesucht, verglichen und gefiltert werden. Geschichte und Technik wurden über Timeline, Karten und Tabs gegliedert. Der Demo-Shop erzeugte Produktkarten aus Daten, verwaltete Mengen und Gesamtpreis und führte bis zu einer lokalen Bestellbestätigung.

• Medienbühne: Timersteuerung, Sichtbarkeitsprüfung, Videopause und reduzierte Bewegung.
• Suche: Treffersteuerung per Tastatur mit aktivem Index und ARIA-Zuständen.
• Shop: Produktfilter, dynamisches Rendering, Event Delegation und bereinigter Warenkorbzustand.
• Sprache: zentrale Deutsch-Englisch-Umschaltung für sichtbare Texte und relevante Attribute.

Systemarchitektur

Die Website folgt einer klassischen statischen Mehrseitenarchitektur. Gemeinsame CSS- und JavaScript-Dateien verbinden die Seiten, während funktionsbezogene Skripte nur dort laden, wo sie benötigt werden.

Meine dokumentierte Rolle

In der Abschlussphase übernahm Julian laut Projekt-README insbesondere Qualitätsprüfung, Fehlerbereinigung, Performance, Barrierefreiheit, Release-Dokumentation und die abschließende Überarbeitung. Für die Präsentation erklärte er die Übersetzungs-Engine.

Auftretende Probleme

Die größte Schwierigkeit lag im Zusammenspiel vieler Seiten und Zustände. Navigation und Dateipfade mussten überall konsistent bleiben. Slider und Videos durften keine doppelten Timer erzeugen. Der Warenkorb musste ungültige Mengen abfangen, und die Sprachumschaltung durfte ausgeschlossene Bereiche oder technische Inhalte nicht unkontrolliert verändern.

Fehlersuche und umgesetzte Lösungen

Die Fehlersuche erfolgte nicht nur visuell. Lokale Verweise, IDs, Syntax und horizontale Überläufe wurden systematisch kontrolliert. Interaktionsabläufe für Navigation, Karussell, Suche, Technik, Newsletter, Shop, Warenkorb und Checkout wurden getrennt geprüft.

Barrierefreiheit und Datenschutz

Skip-Link, sichtbare Fokuszustände, Tastatursteuerung, aria-current , aria-live und Bewegungsreduktion wurden als echte Bedienanforderungen behandelt. Shop, Newsletter und Checkout übertragen keine Daten an einen Server. Es gibt keine echte Zahlung und kein Tracking.

Dokumentierte Qualitätssicherung

Das Testprotokoll dokumentiert eine kombinierte Prüfung von HTML, CSS und JavaScript. Die Zahlen beziehen sich auf den festgehaltenen Projektstand und sind keine geschätzten Portfolio-Werte.

Ergebnis

Das Ergebnis ist eine umfangreiche, statische Webplattform mit konsistenter Navigation, responsiven Unterseiten und mehreren zusammenhängenden Interaktionen. Präsentation, Handout, Codeaufteilung, Quellen und Testprotokolle machen den Entwicklungsweg nachvollziehbar.

Wichtigste Lernerfahrungen

Das Projekt zeigte, dass anspruchsvolle Websites vor allem durch klare Zustände, konsistente Komponenten und wiederholte Tests stabil werden. JavaScript sollte konkrete Bedienprobleme lösen. Ebenso wichtig sind verständliche Verantwortlichkeiten und eine Dokumentation, die Entscheidungen erklärt statt nur Dateien aufzuzählen.

Aktueller Status

Das Projekt ist als schulische Arbeit abgeschlossen und öffentlich über GitHub Pages erreichbar. Die Live-Fassung eignet sich als Funktionsnachweis, während diese Portfolio-Seite die technische Einordnung, den Teamkontext und Julians dokumentierten Beitrag erklärt.

Rechtliche Veröffentlichung

Das Portfolio übernimmt bewusst keine Fahrzeugfotos, Videos, Logos oder Screenshots aus der Live-Demo. Es verwendet ausschließlich eine neutrale, selbst erstellte Projektgrafik und verweist per normalem Link auf die externe Schulprojekt-Seite.

Rechtliche Hinweise der Live-Demo öffnet in neuem Tab Quellen- und Lizenzübersicht auf GitHub öffnet in neuem Tab

Praktische Empfehlung: Für eine dauerhaft öffentliche oder kommerzielle Nutzung der Live-Demo sollten unbekannte Fahrzeugbilder, Videos und Markenlogos entfernt oder durch nachweislich eigene beziehungsweise eindeutig lizenzierte Medien ersetzt werden.