Center sequence Diagram

Defensio/00_preamble.tex

@@ -33,13 +33,14 @@
 \usepackage{pgfplots}
 \usepackage{pgfplotstable}
 % \usepackage{fontawesome}
+\usepackage{fontawesome5}
 \usepackage{tikzpingus}
 \usepackage{tikzducks}
 \usepackage{pdfpc}
 \usepackage{amsmath}
 
 \usepgfplotslibrary{dateplot}
-\usetikzlibrary{shapes,tikzmark}
+\usetikzlibrary{shapes,tikzmark,positioning,shapes.geometric}
 \tikzset{pipelinestep/.style={lw,rnd,shape=signal,signal from=west,signal pointer angle=130,minimum width=3cm,minimum height=2cm,draw=black,fill=lightgray!30}}
 
 \def\info#1{\begingroup\color{gray}\scriptsize#1\endgroup}

Defensio/01_Praesentation_Allgemein.md

@@ -4,8 +4,10 @@
 
 ##  {.plain}
 
+\setbeamertemplate{sidebar left}{}
+
 \begin{tikzpicture}[remember picture,overlay]
-    \node[anchor=center] at (current page.center) {
-        \movie[width=\paperwidth, height=\paperheight, poster, showcontrols=false, autostart]{}{\imagepath/video/introduction/sample-10s.mp4}
+    \node[anchor=center, inner sep=0pt, outer sep=0pt] at (current page.center) {
+        \movie[width=\paperwidth, height=\paperheight, poster, showcontrols=false, autostart]{}{\imagepath/video/introduction/introduction.mp4}
     };
 \end{tikzpicture}

Defensio/02_Praesentation_Konstantin_Hintermayer.md

@@ -4,7 +4,7 @@
 
 ::: columns
 
-:::: column
+::: {.column width="50%"}
 **Aufgabenbereiche**:
 
 - Product Owner
@@ -17,10 +17,11 @@
 - Black Board
 - Report System
 - Mass Mailer
+- Token Lifetime
   
-::::
+:::
 
-:::: column
+::: {.column width="50%"}
 
 \begin{tikzpicture}
     \clip (0,0) circle (3em);
@@ -28,14 +29,14 @@
     \draw[accent, line width=3pt] (0,0) circle (3em);
 \end{tikzpicture}
 
-::::
+:::
 
 :::
 
 ## Infrastruktur 
 
 ::: columns
-:::: column
+::: {.column width="50%"}
 
 **Entwicklung:**
 
@@ -45,8 +46,8 @@
 - **GitHub:** Transfer
 - **Gitea Actions:** CI/CD 
 
-::::
-:::: column
+:::
+::: {.column width="50%"}
 
 **Produktion:** 
 
@@ -55,7 +56,7 @@
 - **PostgreSQL:** Datenbank
 - **Oqtane:** CMS
 
-::::
+:::
 :::
 
 \vfill
@@ -74,9 +75,9 @@
 \vfill
 <!-- ![](./Images/konstantin/tech_stack_logos.png){ width=100% } -->
 
----
+## {.unnumbered .noframenumbering}
 
-**Produktions-Infrastruktur:**
+\vfill
 
 ```mermaid
 sequenceDiagram
@@ -94,9 +95,9 @@ sequenceDiagram
     nginx-->>-browser: HTTPS
 ```
 
+\vfill
 
-## Von Commit zu Paket
-
+## Vom Commit zu Paket
 
 \begin{tikzpicture}[
     node distance=1cm,
@@ -108,18 +109,18 @@ sequenceDiagram
     % Central Track
     \draw[track] (-1,0) -- (12,0);
 
-    \node[stepnode, draw=gray] (n1) at (0,0) {\color{gray}\small\faCodeBranch};
-    \node[stepnode, draw=green!60!black, right=of n1] (n2) {\color{green!60!black}\small\faCheckCircle};
-    \node[stepnode, draw=blue!60!black, right=of n2] (n3) {\color{blue!60!black}\small\faCogs};
-    \node[stepnode, draw=orange, right=of n3] (n4) {\color{orange}\small\faBoxOpen};
-    \node[stepnode, draw=orange!70!black, right=of n4] (n5) {\color{orange!70!black}\small\faDatabase};
+    \node[stepnode, draw=red] (n1) at (0,0) {\color{red}\small\faCodeBranch};
+    \node[stepnode, draw=green!60!black, right=of n1] (n2) {\color{green!60!black}\small\faTag};
+    \node[stepnode, draw=blue!60!black, right=of n2] (n3) {\color{blue!60!black}\small\faTasks};
+    \node[stepnode, draw=green!60!black, right=of n3] (n4) {\color{green!60!black}\small\faBoxOpen};
+    \node[stepnode, draw=blue!60!black, right=of n4] (n5) {\color{blue!60!black}\small\faDatabase};
 
     % Labels Above
-    \node[labelnode, below=0.2cm of n1, color=gray] {Commit};
+    \node[labelnode, below=0.2cm of n1, color=red] {Commit};
     \node[labelnode, below=0.2cm of n2, color=green!60!black] {Tag};
     \node[labelnode, below=0.2cm of n3, color=blue!60!black] {CI/CD};
-    \node[labelnode, below=0.2cm of n4, color=orange] {.deb Paket};
-    \node[labelnode, below=0.2cm of n5, color=orange!70!black] {Registry};
+    \node[labelnode, below=0.2cm of n4, color=green!60!black] {.deb Paket};
+    \node[labelnode, below=0.2cm of n5, color=blue!60!black] {Registry};
 \end{tikzpicture}
 
 \vspace{1em}
@@ -136,11 +137,13 @@ sequenceDiagram
   
 **Design Patterns:**
 
+\vspace{1em}
+
 \begin{tikzpicture}[
     node distance=0.15cm,
     stepnode/.style={rectangle, draw, line width=1.5pt, minimum width=1.5cm, minimum height=1.5cm, fill=white, inner sep=0pt},
 ]
-    \node[stepnode, draw=gray!60!black] (n1) at (0,0) {\LARGE\color{gray!60!black}S};
+    \node[stepnode, draw=red] (n1) at (0,0) {\LARGE\color{red}S};
     \node[stepnode, draw=green!60!black, right=of n1] (n2) {\LARGE\color{green!60!black}O};
     \node[stepnode, draw=blue!60!black, right=of n2] (n3) {\LARGE\color{blue!60!black}L};
     \node[stepnode, draw=orange, right=of n3] (n4) {\LARGE\color{orange}I};
@@ -153,16 +156,110 @@ sequenceDiagram
 - Dependency Injection (IServiceProvider)
 - Repository-Pattern (EntityFramework)
 
+## Module
+
 ::: columns
+::: {.column width="50%"}
+**Admin Module:**
 
-:::: column
-left
-::::
+  - Mass Mailer
+  - Token Lifetime
+  - Report System
 
-:::: column
-right
-::::
+**Allgemeine Module:**
+
+  - Event Registration
+  - Black Board
 
 :::
+::: {.column width="50%"}
+\vfill
+![](./Images/images/konstantin/ReportingSystem.png)
+\vfill
+:::
+:::
+
+## Produktion $\neq$ Staging
+
+\begin{tikzpicture}[
+    node distance=2.2cm,
+    stepnode/.style={circle, minimum size=1.2cm, draw, line width=1.5pt, fill=white, inner sep=0pt},
+    labelnode/.style={align=center, font=\small\bfseries},
+    textnode/.style={align=center, font=\scriptsize, color=gray},
+    track/.style={line width=2pt, gray!20}
+]
+    % Central Track
+    \draw[track] (-1,0) -- (12,0);
+
+    % Steps
+    \node[stepnode, draw=green!60!black] (s1) at (0,0) {\color{green!60!black}\Large\faCheck};
+    \node[stepnode, draw=accent, right=of s1] (s2) {\color{accent}\Large\faCodeBranch};
+    \node[stepnode, draw=red, right=of s2] (s3) {\color{red}\Large\faExclamationTriangle};
+    \node[stepnode, draw=orange, right=of s3] (s4) {\color{orange}\Large\faLightbulb};
+
+    % Labels Above
+    \node[labelnode, above=0.2cm of s1, color=green!60!black] {Staging};
+    \node[labelnode, above=0.2cm of s2, color=accent] {Deploy};
+    \node[labelnode, above=0.2cm of s3, color=red] {Bruch};
+    \node[labelnode, above=0.2cm of s4, color=orange] {Erkenntnis};
+\end{tikzpicture}
+
+\vfill
+
+::: columns
+::: {.column width="40%"}
+"It works on my Machine"
+:::
+::: {.column width="60%"}
+**Deploymentprobleme**
+
+**Problem:** Schlechte Dokumentation.
+
+**Lösung:** Debugging mithilfe von Wireshark und Source Code lesen.
+:::
+:::
+
+
+## Teamleitung & PM
+
+::: columns
+:::: column
+**Scrum Workflow:**
+
+- 14-tägige Sprints
+- Weeklies & Retrospektiven
+- Definition of Done (DoD)
+::::
+:::: column
+**Gitea Issues / Board:**
+
+- Integrierter Workflow
+- Single Source of Truth
+  
+::::
+:::
+
+![Gitea Board](./Images/images/konstantin/GiteaIssues-TaskBoard.png){ width=60% }
 
 ## Fazit
+
+\vspace{0.5em}
+
+\begin{tikzpicture}[x=\linewidth/10, y=1cm, every node/.style={font=\sffamily}]
+    % Rule: 90/90
+    \fill[black!5] (0, 2.8) rectangle (10, 3.4);
+    \fill[green!60!black] (0, 2.8) rectangle (9, 3.4);
+    \node[anchor=north west, inner sep=3pt] at (0, 2.8) {\scriptsize Erste \textbf{90\,\%} des Codes $\rightarrow$ \textbf{90\,\%} der Zeit};
+
+    \fill[black!5] (0, 1.2) rectangle (10, 1.8);
+    \fill[accent] (0, 1.2) rectangle (1, 1.8);
+    \node[anchor=north west, inner sep=3pt, text=accent] at (0, 1.2) {\scriptsize \textbf{Letzte 10\,\% des Codes $\rightarrow$ weitere 90\,\% der Zeit}};
+\end{tikzpicture}
+
+\vspace{1em}
+
+Learnings:
+
+- **Asynchrones Arbeiten:** Entkopplung von Meetings und Deadlines.
+- **Review-First-Policy:** Konsequente Umsetzung der *Definition of Done*.
+- **Team-Fokus:** höhere Motivation und Eigenverantwortung durch Verkleinerung des Teams.

Defensio/03_Praesentation_Florian_Edlmayer.md

@@ -2,9 +2,49 @@
 
 ## Individueller Teil: Florian Edlmayer
 
-- **Datensicherheit** – DSGVO-konform & verschlüsselt
-- **Backup-Systeme** – Automatisch, täglich & zuverlässig
-- **Premium-Bereich** – Exklusiv, motivierend & sicher
+\vspace{0.8em}
+
+\begin{center}
+\begin{tikzpicture}
+
+% ── Card 1: Datensicherheit ────────────────────────────────────────
+\fill[rounded corners=6pt, fill=orange!8]  (0,0)   rectangle (3.4,-3.0);
+\draw[rounded corners=6pt, orange, line width=1.8pt] (0,0) rectangle (3.4,-3.0);
+\begin{scope}
+  \clip[rounded corners=6pt] (0,0) rectangle (3.4,-3.0);
+  \fill[orange] (0,0) rectangle (3.4,-0.85);
+\end{scope}
+\node[text=white, font=\small\bfseries, align=center] at (1.7,-0.425)
+  {\faLock\ \ Datensicherheit};
+\node[font=\small, align=center, text width=3.0cm] at (1.7,-1.95)
+  {DSGVO-konform \& verschlüsselt};
+
+% ── Card 2: Backup-Systeme ─────────────────────────────────────────
+\fill[rounded corners=6pt, fill=orange!8]  (3.8,0) rectangle (7.2,-3.0);
+\draw[rounded corners=6pt, orange, line width=1.8pt] (3.8,0) rectangle (7.2,-3.0);
+\begin{scope}
+  \clip[rounded corners=6pt] (3.8,0) rectangle (7.2,-3.0);
+  \fill[orange] (3.8,0) rectangle (7.2,-0.85);
+\end{scope}
+\node[text=white, font=\small\bfseries, align=center] at (5.5,-0.425)
+  {\faDatabase\ \ Backup-Systeme};
+\node[font=\small, align=center, text width=3.0cm] at (5.5,-1.95)
+  {Automatisch, täglich \& zuverlässig};
+
+% ── Card 3: Premium-Bereich ────────────────────────────────────────
+\fill[rounded corners=6pt, fill=orange!8]  (7.6,0) rectangle (11.0,-3.0);
+\draw[rounded corners=6pt, orange, line width=1.8pt] (7.6,0) rectangle (11.0,-3.0);
+\begin{scope}
+  \clip[rounded corners=6pt] (7.6,0) rectangle (11.0,-3.0);
+  \fill[orange] (7.6,0) rectangle (11.0,-0.85);
+\end{scope}
+\node[text=white, font=\small\bfseries, align=center] at (9.3,-0.425)
+  {\faStar\ \ Premium-Bereich};
+\node[font=\small, align=center, text width=3.0cm] at (9.3,-1.95)
+  {Exklusiv, motivierend \& sicher};
+
+\end{tikzpicture}
+\end{center}
 
 ---
 
@@ -23,19 +63,77 @@
 ---
 
 ## Eingesetzte Technologien
-- **Datenbanksystem**: PostgreSQL
-- **Authentifizierung**: OAuth 2.0 (LinkedIn)
-- **Scripting & Automation**: Bash-Skripte für Linux Cronjobs
+
+\vspace{1em}
+
+\begin{columns}[c]
+
+\begin{column}{0.33\textwidth}
+\centering
+\includegraphics[height=2.2cm]{image-1.png}\\[0.5em]
+{\large\textbf{\color{accent}PostgreSQL}}\\[0.3em]
+{\small Relationale Datenbank\\für strukturierte Datenspeicherung}
+\end{column}
+
+\begin{column}{0.33\textwidth}
+\centering
+\includegraphics[height=2.2cm]{image-6.png}\\[0.5em]
+{\large\textbf{\color{accent}LinkedIn OAuth 2.0}}\\[0.3em]
+{\small Sichere Authentifizierung\\ohne eigene Passwortverwaltung}
+\end{column}
+
+\begin{column}{0.33\textwidth}
+\centering
+\includegraphics[height=2.2cm]{image-7.png}\\[0.5em]
+{\large\textbf{\color{accent}Bash}}\\[0.3em]
+{\small Automatisierte Skripte\\für Linux Cronjobs}
+\end{column}
+
+\end{columns}
 
 ---
 
+
 ## DSGVO & Datenschutz
 - **Rechtliche Basis**: Einhaltung von DSGVO & DSG.
 - **Umsetzung**:
-  - **Datenschutzerklärung**: Rechtskonform integriert.
-  - **Datenminimierung**: Nur zwingend benötigte Daten.
-  - **Vertraulichkeit**: TLS/HTTPS & lokales Austria-Hosting.
-  - **Betroffenenrechte**: Auskunft & Löschung garantiert.
+
+\begin{center}
+\begin{tikzpicture}[
+    node distance=0.5cm,
+    stepnode/.style={rectangle, rounded corners=3pt, minimum width=4.2cm, minimum height=2.2cm, draw, line width=1pt, fill=white, inner sep=2pt},
+    iconnode/.style={circle, minimum size=0.8cm, fill=gray!5},
+    titlenode/.style={align=center, font=\scriptsize\bfseries},
+    arrow/.style={-latex, line width=1.5pt, color=accent!60}
+]
+    % Obere Reihe
+    \node[stepnode, draw=gray]           (n1) at (0,0) {};
+    \node[stepnode, draw=green!60!black, right=of n1] (n2) {};
+
+    % Untere Reihe
+    \node[stepnode, draw=blue!60!black,  below=of n1] (n3) {};
+    \node[stepnode, draw=orange,         below=of n2] (n4) {};
+
+    % Icons – obere Reihe
+    \node[iconnode] at (n1.north) [yshift=-0.7cm] {\color{gray}\small\faFile};
+    \node[iconnode] at (n2.north) [yshift=-0.7cm] {\color{green!60!black}\small\faFilter};
+
+    % Icons – untere Reihe
+    \node[iconnode] at (n3.north) [yshift=-0.7cm] {\color{blue!60!black}\small\faLock};
+    \node[iconnode] at (n4.north) [yshift=-0.7cm] {\color{orange}\small\faUserShield};
+
+    % Labels
+    \node[titlenode] at (n1.center) [yshift=-0.2cm] {Datenschutz-\\erkl\"{a}rung};
+    \node[titlenode] at (n2.center) [yshift=-0.2cm] {Daten-\\minimierung};
+    \node[titlenode] at (n3.center) [yshift=-0.2cm] {Vertrau-\\lichkeit};
+    \node[titlenode] at (n4.center) [yshift=-0.2cm] {Betroffenen-\\rechte};
+
+    % Pfeile: → rechts oben, ↓ rechts, → rechts unten
+    % \draw[arrow] (n1) -- (n2);
+    % \draw[arrow] (n2) -- (n4);
+    % \draw[arrow] (n3) -- (n4);
+\end{tikzpicture}
+\end{center}
 
 ---
 
@@ -43,7 +141,9 @@
 - **Problem**: Datenverlust (Hardware, Software, Cyberangriffe).
 - **Lösung**: Vollautomatisiertes Backup-Skript.
 
-![alt text](image-4.png)
+\vspace{2em}
+
+![](image.png)
 
 ---
 
@@ -64,7 +164,7 @@
   - Abbau von Registrierungshürden. 
   - Keine sensiblen Passwörter im eigenen System.
 
-![Ablauf der OAuth-Authentifizierung](Images/oauth-flow-new.png)
+![](Images/oauth-flow-new.png){width=20em}
 
 ---
 
@@ -78,7 +178,7 @@
 ---
 
 ## Der Premium-Bereich (2)
-![alt text](image-3.png)
+![](./Images/images/florian/image-3.png)
 **Datensparsame Mitgliedersuche & Kontaktfunktion:**
 ![Mitgliedersuche und Kontaktfunktion für Premium-Mitglieder](../Diplomarbeitsbuch/images/04-Florian/premium-mitglieder-suche.png)
 

Defensio/04_Praesentation_Adam_Gaiswinkler.md

@@ -7,7 +7,8 @@
   - Oqtane-Theme
   - Hall-of-Fame-Modul
   - Anmeldetool
-- **Ziel**: Moderne, responsive Website für den HTL-Absolventenverein
+- **Ziel**: 
+  - Moderne, responsive Website für den SZU Absolventenverein
 
 ---
 
@@ -50,10 +51,10 @@
 ::: columns
 
 :::: column
-- Eigen‑Navigation (bootstrap Komponenten haben nicht gepasst ).
+- 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 ).
+- Cookie‑Consent (erforderlich für DSGVO-Konformität und Gesamtheit der Website).
 ::::
 
 :::: column
@@ -77,7 +78,7 @@
 
 :::: column
 \begin{tikzpicture}
-\node[inner sep=0pt, rounded corners=5pt, clip] {\includegraphics[width=0.55\columnwidth]{Images/HallOfFameBeispiel.png}};
+\node[inner sep=0pt, rounded corners=5pt, clip] {\includegraphics[width=0.55\columnwidth]{Images/HallOfFamePdfNeuBesser.png}};
 \end{tikzpicture}
 ::::
 
@@ -121,19 +122,19 @@
 \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]
+\begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{UI}, width=6.5cm, height=2cm, valign=center]
 \centering Ja/Nein-Buttons (grün/rot)
 \end{tcolorbox}
 &
-\begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{Live-Feedback}, width=6cm]
+\begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{Live-Feedback}, width=6.5cm, height=2cm, valign=center]
 \centering Sofort via Blazor
 \end{tcolorbox}
 \\[3mm]
-\begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{Mobile}, width=6cm]
+\begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{Mobile}, width=6.5cm, height=2cm, valign=center]
 \centering Sauberes Touch-Handling
 \end{tcolorbox}
 &
-\begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{Architektur}, width=6cm]
+\begin{tcolorbox}[colback=accent!5, colframe=accent, arc=3pt, title=\textbf{Architektur}, width=6.5cm, height=2cm, valign=center]
 \centering UI \& Backend-API getrennt
 \end{tcolorbox}
 \end{tabular}
@@ -148,22 +149,28 @@
 \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}}
+  header/.style={font=\small\bfseries\color{gray!70!black}},
+  arrow/.style={-latex, line width=1.5pt, color=accent!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};
+\node[header] at ([xshift=4cm, 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);
+\node[solution] at ([xshift=4cm, yshift=0.9cm]current page.center) (s1) {\checkmark\;\textbf{Visual Studio Code}\\[-1mm]{\scriptsize Plattformübergreifend}};
 
 % 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}};
+\node[solution] at ([xshift=4cm, yshift=-1.1cm]current page.center) (s2) {\checkmark\;\textbf{Node.js/HTML}\\[-1mm]{\scriptsize Übergangslösung}};
+
+% Reihe 3
+\node[problem] at ([xshift=-2.5cm, yshift=-3.1cm]current page.center) (p3) {$\triangle$\;\textbf{UI-Fehler am Handy}\\[-1mm]{\scriptsize Clipping-Probleme}};
+\node[solution] at ([xshift=4cm, yshift=-3.1cm]current page.center) (s3) {\checkmark\;\textbf{Testen und Anpassen}\\[-1mm]{\scriptsize Debuggen und Verbessern der UI}};
+
+\draw[arrow] (p1) -- (s1);
+\draw[arrow] (p2) -- (s2);
+\draw[arrow] (p3) -- (s3);
 \end{tikzpicture}
 
 ---