4.1 KiB
Adam Gaiswinkler
Individueller Teil: Adam Gaiswinkler
Entwicklung von CMS‑Modulen & Frontend-Design
- Schwerpunkt:
- Oqtane-Theme
- Hall-of-Fame-Modul
- Anmeldetool
- Ziel: Moderne, responsive Website für den HTL-Absolventenverein
Ausgangslage & Motivation
- Ausgangssituation: Moderne Frontend‑Plattform für den Absolventenverein (responsive, neue Features).
- Persönliche Motivation:
- Team‑Verkleinerung (6 → 3) → mehr Verantwortung.
- Projektidentifikation & Praxis‑Blazor/ASP.NET.
- Ziele:
- Oqtane‑Module (Anmeldetool, Hall‑of‑Fame).
- Responsives UI/UX.
Eingesetzte Technologien
::: columns
:::: column
- Tech‑Stack:
- Bootstrap
- Custom‑CSS
- QuestPDF
- Gitea
- Visual Studio 2022 → Visual Studio Code (macOS). ::::
:::: column \begin{tikzpicture} \node[inner sep=0pt, rounded corners=5pt, clip] {\includegraphics[width=0.8\columnwidth]{Images/Technologien.png}}; \end{tikzpicture} ::::
:::
Oqtane Theme
::: columns
:::: column
- Eigen‑Navigation (bootstrap Komponenten haben nicht gepasst ).
- Systemseiten per LINQ ausblenden.
- Responsive CSS‑Media‑Queries + reines CSS‑Burger‑Menu.
- Cookie‑Consent (erforderlich für dsgvo konformität und gesamtheit der website ). ::::
:::: column \begin{tikzpicture} \node[inner sep=0pt, rounded corners=5pt, clip] {\includegraphics[width=0.55\columnwidth]{Images/BurgerMenuLiveDesign.png}}; \end{tikzpicture} ::::
:::
Hall of Fame
::: columns
:::: column
- Karten‑Grid: Responsive Übersicht, Live‑Suche & Sortierung in Echtzeit – kein Seitenreload (Blazor).
- Detail‑Seite: Glasmorphismus‑Design (halbtransparente Karten mit Blur-Effekt). ::::
:::: column \begin{tikzpicture} \node[inner sep=0pt, rounded corners=5pt, clip] {\includegraphics[width=0.55\columnwidth]{Images/HallOfFameBeispiel.png}}; \end{tikzpicture} ::::
:::
Hall of Fame – Workflow & Export
::: columns
:::: column
- Workflow: Rich‑Text‑Editor, Bild‑Upload mit Live-Vorschau (max 5 MB), Status (Entwurf/Veröffentlicht) inkl. Eigentümer‑Check.
- PDF‑Export: Professionelle Profil-PDFs server-seitig mit QuestPDF.
- Moderation: Meldesystem über separates Interfaces‑Paket → saubere Logik-Trennung. ::::
:::: column \begin{tikzpicture}[ node distance=12mm, every node/.style={font=\small}, state/.style={rectangle, rounded corners=3pt, draw=accent, fill=accent!10, minimum width=2.4cm, minimum height=8mm, align=center, font=\small\bfseries}, arr/.style={->,>=stealth,thick,accent} ] \node[coordinate] (start) {}; \node[state, right=10mm of start] (draft) {Entwurf}; \node[state, below=18mm of draft] (pub) {Veröffentlicht}; \draw[arr] (start) -- node[above] {\scriptsize Erstellen} (draft); \draw[arr] (draft) to[out=135, in=45, looseness=4] node[above] {\scriptsize Speichern} (draft); \draw[arr, bend left=25] (draft) to node[right] {\scriptsize Veröffentlichen} (pub); \draw[arr, bend left=25] (pub) to node[left] {\scriptsize Zurückziehen} (draft); \end{tikzpicture} ::::
:::
Anmeldetool
- UI: Ja/Nein‑Buttons (grün/rot)
- Live‑Feedback: Sofortige Statusänderung via Blazor
- Mobile: Sauberes Touch-Handling
- Architektur: UI & Backend-API getrennt
Herausforderungen & Lösungen
- Plattformwechsel Windows → macOS
- Oqtane stark an Windows gebunden
- → Visual Studio Code als plattformübergreifende Lösung
- Keine funktionsfähige Website (Sommer 2025)
- Kurz vor einem Event, kein funktionierendes CMS
- → Schnelle Node.js/HTML-Übergangslösung sicherte Event-Anmeldung
Learnings
\vspace{1cm} \begin{tikzpicture}[remember picture, overlay] \node at (current page.center) { \renewcommand{\arraystretch}{1.5} \begin{tabular}{c c c} \textbf{Technisch} & \textbf{Methodisch} & \textbf{Persönlich} \ \hline Git & Aufgabenverteilung & Eigeninitiative \ CSS-Flexbox & Regelmäßige Meetings & Verantwortung \ Blazor & & \ \end{tabular} }; \end{tikzpicture}
Fazit & Ausblick
- Ergebnis:
- Theme final & mobil-optimiert
- Hall of Fame funktionsfähig
- Anmeldetool einsatzbereit