Improve Slides

presentation-jenseits-big-tech-reveal.html

@@ -17,22 +17,22 @@
 			<script src="slides/slide-04-vision.js"></script>
 			<script src="slides/slide-05-hardware.js"></script>
 			<script src="slides/slide-06-docker.js"></script>
-			<script src="slides/slide-07-ansible.js"></script>
+			<!--			<script src="slides/slide-07-ansible.js"></script>-->
 			<script src="slides/slide-08-wireguard-dyndns.js"></script>
-			<script src="slides/slide-09-nextcloud-intro.js"></script>
-			<script src="slides/slide-10-nextcloud-features.js"></script>
 			<script src="slides/slide-11-backups-intro.js"></script>
 			<script src="slides/slide-12-disaster-story.js"></script>
 			<script src="slides/slide-13-lessons.js"></script>
 			<script src="slides/slide-14-backup-setup.js"></script>
+			<script src="slides/slide-09-nextcloud-intro.js"></script>
+			<script src="slides/slide-10-nextcloud-features.js"></script>
 			<script src="slides/slide-15-phases-intro.js"></script>
 			<script src="slides/slide-16-phase-1.js"></script>
 			<script src="slides/slide-17-phase-2.js"></script>
 			<script src="slides/slide-18-phase-3.js"></script>
-			<script src="slides/slide-19-phase-4-plus.js"></script>
+<!--			<script src="slides/slide-19-phase-4-plus.js"></script>-->
+			<script src="slides/slide-22-more-horizons.js"></script>
 			<script src="slides/slide-20-reality-check.js"></script>
 			<script src="slides/slide-21-benefits.js"></script>
-			<script src="slides/slide-22-more-horizons.js"></script>
 			<script src="slides/slide-23-closing.js"></script>
 		</div>
 	</div>

slides/slide-01-title.js

@@ -3,8 +3,10 @@ document.write(`
 	<h1>Jenseits von Big Tech</h1>
 	<p class="subtitle">Kontrolle über die eigenen Daten</p>
 	<aside class="notes">
-		Guten Tag! Ich heiße [Name] und halte heute einen Vortrag über die Möglichkeiten, die Kontrolle über deine eigenen Daten zurückzugewinnen.
+		Vorstellung
-		Es geht nicht um Paranoia oder Angst vor Big Tech – sondern darum, dass es einfach mehr Spaß macht, ein System zu haben, das dir wirklich gehört.
+		- Nerd 
-	</aside>
+		- Spass an Servern seit 25 Jahren.
+		Umfrage: Wer arbeitet regelmäßig mit Office? Wer versucht die Daten lokal zu speichern?
+    </aside>
 </section>
 `);

slides/slide-02-windows-problem.js

@@ -4,12 +4,18 @@ document.write(`
 	<ul>
 		<li><span class="emoji">📋</span>Datei > Speichern unter</li>
 		<li><span class="emoji">☁️</span>OneDrive will einmischen</li>
+		<li><span class="emoji">⏱️</span>"50 Klicks" bis zur Speicherung</li>
 		<li><span class="emoji">🔍</span>Defender scannt ungefragt</li>
-		<li><span class="emoji">⏱️</span>50 Klicks bis zur Speicherung</li>
 		<li><span class="emoji">😤</span>"Das ist nicht mein System"</li>
 	</ul>
 	<aside class="notes">
-		Kennt ihr das? Ihr versucht in Windows ne Datei zu speichern. Nach 50 Klicks ist sie gespeichert. Auf meiner Hardware. Die mir gehört. Und doch fühlt es sich an, als würde mir das System nicht gehören.
+	    - großer Microsoft Fan bis windows 8
+	    Dann
+	    - Cloud Gängelung
+	    - Viren Scanner Zwang
+	    - aufdrängen von Features, die ich nicht will
+	    
+		Nach 50 Klicks ist sie gespeichert. Auf meiner Hardware. Die mir gehört. Und doch fühlt es sich an, als würde mir das System nicht gehören.
 	</aside>
 </section>
 `);

slides/slide-03-solution-intro.js

@@ -1,9 +1,12 @@
 document.write(`
 <section class="section-slide">
 	<h1>Es gibt was anderes</h1>
-	<p class="subtitle">Und nein, nicht paranoid.</p>
+	<p class="subtitle">Und es macht Spass.</p>
 	<aside class="notes">
-		Und ja – es gibt was anderes. Das ist Pragmatismus. Mein System. Meine Regeln.
+		- Offen, "Kostenlos", stabil, beherschbar
+		- Vor allem: Macht Spass 
+		
+		Ich möchte euch heute eine Möglichkeit von vielen vorstellen.
 	</aside>
 </section>
 `);

slides/slide-04-vision.js

@@ -1,16 +1,19 @@
 document.write(`
 <section>
 	<h2>Die Idee</h2>
-	<p style="font-size: 1.5em; color: #2980b9; margin-bottom: 0.5em;"><strong>Speicherung + Kalender + Kontakte + Office</strong></p>
+	<p style="font-size: 1.5em; color: #2980b9; margin-bottom: 0.5em;"><strong>Daten + Kalender + Kontakte + Office</strong></p>
 	<ul>
 		<li>✅ Einfach zu bedienen</li>
 		<li>✅ Einfach zu installieren</li>
 		<li>✅ Funktioniert besser</li>
-		<li>✅ Keine Bevormundung</li>
+		<li>✅ Lässt sich gut anpassen</li>
 		<li>✅ Es macht SPASS</li>
 	</ul>
+	<p style="font-size: 1.5em; color: #2980b9; margin-bottom: 0.5em;">(eine) Lösung: <strong>Nextcloud</strong></p>
 	<aside class="notes">
-		Stellt euch vor: Alles, was Google Drive können – auf einer Maschine, die euch gehört. Einfach zu bedienen, einfach zu installieren.
+	 - Lösung Nextcloud
+	 
+	 Was braucht man dafür?
 	</aside>
 </section>
 `);

slides/slide-05-hardware.js

@@ -2,14 +2,19 @@ document.write(`
 <section>
 	<h2>Hardware: Das brauchst du</h2>
 	<ul>
-		<li><span class="emoji">🖥️</span>Alter PC / Laptop (24/7)</li>
+		<li><span class="emoji">🖥️</span>Alter PC / Laptop</li>
-		<li><span class="emoji">🍓</span>Raspberry Pi (stromsparend)</li>
+		<li><span class="emoji">🍓</span>Raspberry Pi (stromsparend, aber langsam)</li>
-		<li><span class="emoji">💾</span>NAS (wenn fancy)</li>
+		<li><span class="emoji">💾</span>NAS (fertig, aber teuer)</li>
 		<li><span class="emoji">☁️</span>Günstiger VPS (5€/Monat)</li>
 	</ul>
-	<p style="margin-top: 1.5em; font-style: italic;">Wichtig: Der Punkt ist "Anfangen"</p>
+	<p style="margin-top: 1.5em; font-style: italic;">Einfach mal im Keller nachsehen</p>
 	<aside class="notes">
-		Die gute Nachricht: Du brauchst nicht viel. Alle Optionen funktionieren gleich gut. Der Punkt ist: Anfangen.
+		Die gute Nachricht: 
+		 - Du brauchst nicht viel. 
+		 - Alle Optionen funktionieren gleich gut.
+		 - Betriebsystem: Was immer du willst...
+		 
+        Wenn wir unsere Hardware haben, wollen wir die Software davon unabhängig machen.  
 	</aside>
 </section>
 `);

slides/slide-06-docker.js

@@ -5,7 +5,12 @@ document.write(`
 	<p><strong>Nextcloud läuft.</strong> Überall gleich. Keine Dependency-Hölle.</p>
 	<p style="margin-top: 1em;">Das Beste: Funktioniert auf Linux, Windows, Mac</p>
 	<aside class="notes">
-		Docker – Eine Box. In dieser Box läuft Nextcloud. Überall gleich. Fertig. Nextcloud läuft.
+		- Containerisierung
+		    - unabhängigkeit von Beriebsystem und anderer Software
+		    - fertige Softwarepakete
+        - einfach zu benutzen
+        - Ok zu verstehen, aber auch lange nicht notwendig.
+            - learning by doing
 	</aside>
 </section>
 `);

slides/slide-08-wireguard-dyndns.js

@@ -1,15 +1,32 @@
 document.write(`
 <section>
-	<h2>WireGuard + DynDNS</h2>
+	<h2>VPN + DynDNS</h2>
 	<h3>WireGuard: VPN, aber einfach</h3>
 	<ul style="margin-bottom: 1em;">
-		<li>Nur die, die ich kenne</li>
+		<li>Externer Zugang zu deinem Heimnetz</li>
 		<li>Verschlüsselt, superschnell</li>
+		<li>Fitz!Box unterstützt</li>
+		<li>gern genutzte alternative: <a href="https://tailscale.com/">tailscale</a></li>
 	</ul>
 	<h3>DynDNS</h3>
-	<p>Meine IP ändert sich, mein Domain bleibt</p>
+	<p>Die IP ändert sich, mein Domain bleibt</p>
+	<a href="https://www.duckdns.org/">https://www.duckdns.org/</a>
 	<aside class="notes">
-		Ich bin unterwegs und brauche meine Daten. WireGuard ist ein VPN, aber einfach. DynDNS macht, dass mein Domain gleich bleibt, auch wenn die IP sich ändert.
+	Zwei Themen, die man gehört haben sollte, wenn man die Hardware zuhause hat
+	<ul>
+	    <li>Anfangs unsicher: Ist mein System sicher</li>
+	    <li>Empfehlung: VPN als zusätzliche Schutzschicht</li>
+	    <li>Einachtes VPN Wireguard</li>
+	    <li>Wireguard macht nur ein Remote-Lan-Kabel</li>
+	    <li>Fritz!Box</li>
+    </ul>
+    <ul>
+	    <li>tailscale: kostenlos, einfach, aber nicht in deiner Hand</li>
+	 </ul>
+	 <ul>   
+	    <li>Dynamische IP</li>
+	    <li>dyndns z.B. DuckDNS</li>
+     </ul>
 	</aside>
 </section>
 `);

slides/slide-09-nextcloud-intro.js

@@ -3,7 +3,7 @@ document.write(`
 	<h1>Nextcloud</h1>
 	<p class="subtitle">Die Zentrale</p>
 	<aside class="notes">
-		Jetzt zum Herzstück: Nextcloud. Eine App. Vier Funktionen.
+		Jetzt zum eigenentlichen System, das wir haben wollen: Nextcloud
 	</aside>
 </section>
 `);

slides/slide-10-nextcloud-features.js

@@ -1,16 +1,15 @@
 document.write(`
 <section>
-	<h2>Nextcloud: 4 Funktionen</h2>
+	<h2 style="margin-bottom:0.5em">Nextcloud: 4 Funktionen</h2>
-	<h3><span class="emoji">📁</span>Speicherung</h3>
+	<h3><span class="emoji">📁</span>Daten auf allen Geräten</h3>
-	<p>Sync wie Google Drive, auf deiner Hardware</p>
+	<p style="margin:0">Sync wie Google Drive, auf deiner Hardware</p>
 	<h3><span class="emoji">📅</span>Kalender & Kontakte</h3>
-	<p>CardDAV/CalDAV – überall kompatibel</p>
+	<p style="margin:0">CardDAV/CalDAV – überall kompatibel</p>
 	<h3><span class="emoji">📝</span>Office</h3>
-	<p>OnlyOffice/Collabora – echte Zusammenarbeit</p>
+	<p style="margin:0">OnlyOffice/Collabora – echte Zusammenarbeit</p>
-	<h3><span class="emoji">🔓</span>Offen</h3>
+	<h3><span class="emoji">😀</span>Und vieles mehr</h3>
-	<p>Keine Lock-in, offene Standards</p>
 	<aside class="notes">
-		Speicherung: Sync wie Google Drive, aber auf deiner Hardware. Kalender & Kontakte: CardDAV/CalDAV, überall kompatibel.
+		Ähnliche funktionen wie OneDrive oder Google Drive
 	</aside>
 </section>
 `);

slides/slide-11-backups-intro.js

@@ -1,9 +1,11 @@
 document.write(`
 <section class="section-slide">
-	<h1>Backups</h1>
+    <img src="No-Backup-No-Mercy.png" style="height: 100%"/>
-	<p class="subtitle">Das wichtigste Stück</p>
 	<aside class="notes">
-		Wisst ihr, was schlimmer ist als kein Backup? Ein Backup, das nicht funktioniert. Ich weiß das, weil mir das passiert ist.
+	Mein Aufruf:
+	    - egal ob selfhosting oder cloud:
+	        - bits sind vergänglich
+	        - wisst wie ihr an eure Daten kommt
 	</aside>
 </section>
 `);

slides/slide-12-disaster-story.js

@@ -2,14 +2,13 @@ document.write(`
 <section>
 	<h2>Die Katastrophe</h2>
 	<ul>
-		<li>❌ Hardwareausfall bei meinen Eltern</li>
+		<li>❌ Hardwareausfall der Festplatte</li>
-		<li>❌ Backup 3 Monate ausgefallen</li>
+		<li>❌ Netzwerkumstellung</li>
-		<li>❌ KeePass-Passwörter werden gelöscht</li>
+		<li>❌ Backup seit 3 Monaten kaputt</li>
-		<li>✅ Aber: Backup auf Mamas Rechner – gerettet!</li>
+		<li>❌ Restore des alten Backups überschreibt gesyncte kopien</li>
+		<li>❌ Passwort DB weg</li>
 	</ul>
-	<p style="margin-top: 1.5em; font-weight: 600;">Lektionen gelernt:</p>
 	<aside class="notes">
-		Vor vier Jahren: Hardwareausfall. Ich greif zum Backup und… es funktioniert nicht. Mein Bruder hatte die Netzwerk-Einstellungen geändert. Backup-Freigabe weg.
 	</aside>
 </section>
 `);

slides/slide-14-backup-setup.js

@@ -5,7 +5,10 @@ document.write(`
 	<div class="code">$ borg create /mnt/backups::{now} /home/nextcloud</div>
 	<p><strong>Täglich automatisch,</strong> auf mehrere Standorte verteilt</p>
 	<aside class="notes">
-		Borg oder Duplicati – inkrementell, dedupliziert, verschlüsselt, automatisch täglich. Auf mehrere Orte verteilt.
+		Borg oder Duplicati – inkrementell, dedupliziert, verschlüsselt, automatisch täglich auf externe Festplatte.
+		Mehrere Rechner syncronisieren das Backup zu Eltern und geschwistern.
+		Kopien werden geprüft und Ergebnis wird mir per Mail geschickt. 
+		Alle weiteren Server erstellen die Backups auf die gleiche Festplatte.
 	</aside>
 </section>
 `);

slides/slide-15-phases-intro.js

@@ -1,9 +1,12 @@
 document.write(`
 <section class="section-slide">
-	<h1>Die Phasen</h1>
+	<h1>Wie würde ich es Angehen?</h1>
 	<p class="subtitle">Nicht alles auf einmal</p>
 	<aside class="notes">
-		Das klingt nach viel Arbeit. Das ist es nicht. Weil du nicht alles auf einmal machst. Einfach anfangen.
+		- Das klingt nach viel Arbeit. 
+		- Das ist es nicht. 
+		- Weil du nicht alles auf einmal machst. 
+		- Einfach anfangen.
 	</aside>
 </section>
 `);

slides/slide-16-phase-1.js

@@ -1,10 +1,11 @@
 document.write(`
 <section>
-	<h2>Phase 1: Wochenende</h2>
+	<h2>Phase 1</h2>
 	<ul>
-		<li>1. Docker installieren</li>
+		<li>1. Hardware finden und Betriebssystem installieren</li>
-		<li>2. Nextcloud starten (ein Befehl!)</li>
+		<li>2. Docker installieren</li>
-		<li>3. 20 GB lokal synchronisieren</li>
+		<li>3. Nextcloud starten (ein Befehl!)</li>
+		<li>4. Testen und Spielen</li>
 		<li style="margin-top: 0.5em;"><strong>✅ "Hey, das funktioniert ja!"</strong></li>
 	</ul>
 	<aside class="notes">

slides/slide-17-phase-2.js

@@ -1,9 +1,10 @@
 document.write(`
 <section>
-	<h2>Phase 2: Woche 2–4</h2>
+	<h2>Phase 2</h2>
 	<ul>
-		<li>Kalender/Kontakte importieren</li>
+		<li>Kalender/Kontakte importieren - alte Versionen in der Cloud behalten</li>
-		<li>Ansible-Playbook schreiben</li>
+		<li>Sync am Handy einrichten: <a href="https://www.davx5.com/">DAVx5</a></li>
+		<li>Fotos vom Handy automatisch hochladen</li>
 		<li style="margin-top: 0.5em;"><strong>✅ "Das ist mein System jetzt"</strong></li>
 	</ul>
 	<aside class="notes">

slides/slide-18-phase-3.js

@@ -1,15 +1,16 @@
 document.write(`
 <section>
-	<h2>Phase 3: Monat 2–3</h2>
+	<h2>Phase 3</h2>
 	<ul>
 		<li>Borg / Duplicati installieren</li>
 		<li>Backup-Cron schreiben</li>
 		<li>Backup testen (!)</li>
-		<li>RSync auf 2. Standort einrichten</li>
+		<li>Freunde spiegeln ihre Backups 🥰 </li>
 		<li style="margin-top: 0.5em;"><strong>✅ "Das ist sicher"</strong></li>
 	</ul>
 	<aside class="notes">
 		Borg/Duplicati installieren, Backup-Cron schreiben, Backup testen (wichtig!), RSync auf 2. Standort.
+		Festplatte in einem DesktopPC ist dafür ausreichend
 	</aside>
 </section>
 `);

slides/slide-19-phase-4-plus.js

@@ -1,15 +1,16 @@
 document.write(`
 <section>
-	<h2>Phase 4+: Optional</h2>
+	<h2>Phase 4+</h2>
 	<ul>
-		<li><span class="emoji">📧</span>E-Mail (sobald du DNS kannst)</li>
+		<li><span class="emoji">🔒</span>Sicherheit gewinnen</li>
-		<li><span class="emoji">💬</span>Matrix, Mastodon, Vaultwarden</li>
+		<li><span class="emoji">🔄</span>Automatische Updates</li>
-		<li><span class="emoji">🏠</span>Home Assistant</li>
+		<li><span class="emoji">🤝</span>Freunde einladen</li>
-		<li><span class="emoji">🌐</span>Website mit Hugo + Nginx</li>
+		<li><span class="emoji">🧩</span>Erweiterungen testen</li>
-		<li style="margin-top: 0.5em;"><strong>✅ "Ich hab Feuer gefangen!"</strong></li>
+		<li><span class="emoji">🗑️</span>Daten von den Cloudanbietern löschen</li>
+		<li style="margin-top: 0.5em;"><strong>✅ Achtung: Macht süchtig </strong></li>
 	</ul>
 	<aside class="notes">
-		Wenn du Feuer gefangen hast: E-Mail selbst hosten, weitere Apps, Heimautomatisierung. Dein System, deine Regeln.
+	Man lernt mit der Zeit
 	</aside>
 </section>
 `);

slides/slide-20-reality-check.js

@@ -2,6 +2,7 @@ document.write(`
 <section class="section-slide">
 	<h1>Reality Check</h1>
 	<p class="subtitle">Das ist nicht für jeden</p>
+	<p class="subtitle">Spass am Gerät ist Bedingung</p>
 	<aside class="notes">
 		Das muss ich dir sagen: Das ist nicht für jeden. Du musst dich um Updates kümmern. Das ist kein Hobby für "einfach nur Klicks" Leute.
 	</aside>

slides/slide-21-benefits.js

@@ -3,9 +3,10 @@ document.write(`
 	<h2>Aber dafür…</h2>
 	<ul>
 		<li>✅ Keine bevormundende Software</li>
-		<li>✅ Keine 100 Klicks zum Speichern</li>
 		<li>✅ Keine versteckten Algorithmen</li>
-		<li>✅ Funktioniert BESSER</li>
+		<li>✅ Funktioniert</li>
+		<li>✅ Flexibilität</li>
+		<li>✅ Zugriff auch, wenn etwas nicht klappt</li>
 		<li>✅ Du bist der Owner</li>
 	</ul>
 	<aside class="notes">

slides/slide-23-closing.js

@@ -1,7 +1,7 @@
 document.write(`
 <section class="section-slide">
 	<h1 style="font-size: 3.5em;">Mein System gehört mir.</h1>
-	<p class="subtitle" style="font-size: 1.8em;">Und es funktioniert besser.</p>
+	<p class="subtitle" style="font-size: 1.8em;">Und es funktioniert - wenn ich es nicht kaputt mache .</p>
 	<aside class="notes">
 		Es muss nicht so sein. Es gibt Alternativen. Sie sind einfacher als du denkst. Es macht MEHR Spaß.
 		Nicht: "Ihr MÜSST das machen!" Sondern: "Wenn euch das nervt, ihr wisst jetzt, es gibt Optionen."

styles.css

@@ -1,7 +1,7 @@
 :root {
 	--r-background-color: #ffffff;
 	--r-main-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-	--r-main-font-size: 42px;
+	--r-main-font-size: 52px;
 	--r-main-color: #2c2c2c;
 }
 
@@ -19,7 +19,7 @@ body {
 }
 
 .reveal section {
-	padding: 60px !important;
+	/*padding: 60px !important;*/
 	height: 100%;
 	display: flex !important;
 	flex-direction: column !important;
@@ -34,12 +34,12 @@ body {
 }
 
 .reveal h1 {
-	font-size: 3.77em;
+	font-size: 4em;
 	text-align: center;
 }
 
 .reveal h2 {
-	font-size: 2.5em;
+	font-size: 3em;
 	border-left: 4px solid #2980b9;
 	padding-left: 30px;
 	margin-bottom: 1em;
@@ -47,7 +47,7 @@ body {
 }
 
 .reveal h3 {
-	font-size: 1.6em;
+	font-size: 2.5em;
 	color: #2980b9;
 	margin-top: 1em;
 	margin-bottom: 0.5em;
@@ -57,7 +57,7 @@ body {
 }
 
 .reveal p {
-	font-size: 1.3em;
+	font-size: 2em;
 	line-height: 1.6;
 	color: #2c2c2c;
 	margin: 0.3em 0;
@@ -97,7 +97,7 @@ body {
 	padding: 12px 16px;
 	border-radius: 4px;
 	font-family: 'Courier New', monospace;
-	font-size: 0.85em;
+	font-size: 1.2em;
 	color: #2980b9;
 	border-left: 3px solid #2980b9;
 	margin: 15px 0;