161 lines
4.1 KiB
Markdown
161 lines
4.1 KiB
Markdown
# 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
|
||
|