6.6 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
\vspace{1cm} \begin{tikzpicture}[remember picture, overlay] \node at (current page.center) { \begin{tabular}{@{}c@{\hspace{4mm}}c@{}} \begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{UI}, width=6cm] \centering Ja/Nein-Buttons (grün/rot) \end{tcolorbox} & \begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{Live-Feedback}, width=6cm] \centering Sofort via Blazor \end{tcolorbox} \[3mm] \begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{Mobile}, width=6cm] \centering Sauberes Touch-Handling \end{tcolorbox} & \begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{Architektur}, width=6cm] \centering UI & Backend-API getrennt \end{tcolorbox} \end{tabular} }; \end{tikzpicture}
Herausforderungen & Lösungen
\vspace{5mm} \begin{tikzpicture}[remember picture, overlay, problem/.style={rectangle, rounded corners=3pt, draw=red!60!black, fill=red!8, minimum width=5cm, minimum height=1.4cm, align=center, font=\small}, solution/.style={rectangle, rounded corners=3pt, draw=green!60!black, fill=green!8, minimum width=5cm, minimum height=1.4cm, align=center, font=\small}, header/.style={font=\small\bfseries\color{gray!70}} ] % Spalten-Header \node[header] at ([xshift=-2.5cm, yshift=2.2cm]current page.center) {Herausforderung}; \node[header] at ([xshift=2.5cm, yshift=2.2cm]current page.center) {Lösung};
% Reihe 1
\node[problem] at ([xshift=-2.5cm, yshift=0.9cm]current page.center) (p1) {$\triangle$;\textbf{Plattformwechsel}\[-1mm]{\scriptsize Windows \rightarrow macOS}};
\node[solution] at ([xshift=2.5cm, yshift=0.9cm]current page.center) (s1) {\checkmark;\textbf{Visual Studio Code}\[-1mm]{\scriptsize Plattformübergreifend}};
% Trennlinie \draw[gray!30, dashed] ([xshift=-4.5cm]current page.center) -- ([xshift=4.5cm]current page.center);
% Reihe 2 \node[problem] at ([xshift=-2.5cm, yshift=-1.1cm]current page.center) (p2) {$\triangle$;\textbf{Kein CMS verfügbar}\[-1mm]{\scriptsize Sommer 2025, Event steht an}}; \node[solution] at ([xshift=2.5cm, yshift=-1.1cm]current page.center) (s2) {\checkmark;\textbf{Node.js/HTML}\[-1mm]{\scriptsize Übergangslösung}}; \end{tikzpicture}
Learnings
\vspace{1cm} \begin{tikzpicture}[remember picture, overlay, every node/.style={font=\small}, branch/.style={thick, accent}, cat/.style={rectangle, rounded corners=3pt, draw=accent, fill=accent!15, font=\small\bfseries, minimum height=7mm, align=center}, item/.style={font=\scriptsize, align=left} ] \node[circle, draw=accent, fill=accent!20, font=\bfseries, minimum size=1.5cm] at (current page.center) (center) {Learnings};
% Technisch - links \node[cat] at ([xshift=-3.5cm, yshift=0.8cm]current page.center) (tech) {Technisch}; \draw[branch] (center) -- (tech); \node[item, anchor=east] at ([xshift=-1mm, yshift=5mm]tech.west) {Git}; \node[item, anchor=east] at ([xshift=-1mm]tech.west) {CSS-Flexbox}; \node[item, anchor=east] at ([xshift=-1mm, yshift=-5mm]tech.west) {Blazor};
% Methodisch - rechts oben \node[cat] at ([xshift=3.5cm, yshift=0.8cm]current page.center) (meth) {Methodisch}; \draw[branch] (center) -- (meth); \node[item, anchor=west] at ([xshift=1mm, yshift=3mm]meth.east) {Aufgaben-}; \node[item, anchor=west] at ([xshift=1mm, yshift=-3mm]meth.east) {verteilung}; \node[item, anchor=west] at ([xshift=1mm, yshift=-9mm]meth.east) {Meetings};
% Persönlich - unten \node[cat] at ([yshift=-2cm]current page.center) (pers) {Persönlich}; \draw[branch] (center) -- (pers); \node[item] at ([yshift=-7mm]pers.south) {Eigeninitiative & Verantwortung}; \end{tikzpicture}