Merge branch 'main' of github.com:bedaka/kew-pihole

README.md

@@ -2,6 +2,9 @@
 
 Sammlung der Inhalte und Präsentation für das Thema PiHole auf der KEW 2021
 
+## Über die AG Link
+
+Du findest uns hier: https://ag-link.xyz/
 
 ## Kompatible Modelle
   - Raspberry Pi Zero W
@@ -71,3 +74,5 @@ Ein ausführliche Installationsanleitung ist auch auf der [offiziellen Pi-hole W
 * [IOC Update Report into adtech and Real Time Bidding](assets/rtb/adtech-real-time-bidding-report-201906.pdf)
 * [IAB TCF Vendor List](https://iabeurope.eu/vendor-list-tcf-v2-0/)
 * [Selling Off Privacy At Auction](assets/rtb/SellingOffPrivacyAtAuction.pdf)
+
+(weitere Quellen finden sich in den Slides der Präsentation)

WWW-Einfuehrung.md

@@ -1,54 +0,0 @@
-# WWW - Eine Einführung
-
-## Über die AG Link
-
-Ein paar Sätze zur AG Link. Vision und bisherige Projekte nennen.
-
-## Wie funktioniert das Web (Basic)
-
-Quellen:
-  - [What happens when you type in a
-      URL](https://wsvincent.com/what-happens-when-url/)
-
-
-1. You enter a URL into a web browser
-2. The browser looks up the IP address for the domain name via DNS
-3. The browser sends a HTTP request to the server
-4. The server sends back a HTTP response
-5. The browser begins rendering the HTML
-6. The browser sends requests for additional objects embedded in HTML and
-   repeats steps 3-5
-  - images, 
-  - CSS
-  - JavaScript
-7. Once the page is loaded, the browser sends further async requests as needed.
-
-
-### HTTP
-
-### DNS
-
-### Was läd der Browser wenn ich die New York Times aufrufe?
-
-*Hier könnten man einen Screenshot vom Network-Tab des Browsers einfügen,
-nachdem man https://www.nytimes.com aufgerufen hat.*
-
-## Wie funktionieren Ad Blocker?
-
-Definition: Ad Blocker sind Browser Plugins/Extensions, die Ressource im HTML
-gegen eine Liste bekannter Werbe- oder Trackdienste abgleichen und das Laden der
-jeweiligen Inhalte notfalls blockieren.
-
-Populäre Ad Blocker:
-  - UBlock Origin
-  - …
-
-## PiHole
-
-Die Vorteile auf einem Blick:
-  - Schütze das gesamte Netzwerk auf einmal
-  - Blockiere Tracker in Smart TVs und Mobile Apps
-  - Erhöhte Netzwerkperformance: Tracker werden geblockt bevor sie herunter
-      geladen werden
-  - Überblick auf die Gesamtmenge der blockierte Tracker durch PiHole
-      Webinterface

praesi_revealJs/dist/theme/black.css

@@ -355,3 +355,8 @@ section.has-light-background, section.has-light-background h1, section.has-light
     background-color: var(--r-background-color);
   }
 }
+
+.citation {
+  font-size: 18px;
+  color:rgba(155, 132, 132, 0.2)
+}

praesi_revealJs/index.html

@@ -23,9 +23,10 @@
 					</a>
 					<h3>Werbefreies Heimnetzwerk mit dem RaspberryPi<h3>
 				</section>
-				<section>
+				<section data-background="./images/denied.gif">
-					Denied GIF
+					<h3>StuRa</h3>
 				</section>
+
 				<section>
 					<h2>$ tree</h2>
 					<pre>
@@ -43,8 +44,8 @@
 							└── 7_quellen.txt
 						</code>
 					</pre>
-			
 				</section>
+
 				<section style="background-image: url('images/ag-link_logo.png'); background-repeat: no-repeat; background-position: right; background-size: contain">
 					<div class="r-stack">
 						<h2 class="fragment fade-in-then-out">Wer sind wir?</h2>
@@ -57,6 +58,12 @@
 						<li>[Mail] ag-link@riseup.net</li>
 									<li>[Matrix] #ag-link:ag-link.xyz</li>
 					</ul>
+					<aside class="notes">
+						Die AG gibt es seit 2018
+						Wir sind Studierende ex und post und Menschen die Intesse an den Auswirkungen von Informatik und Digitalisierung auf gesellschaftlihce & pol. Fragen haben.
+						Info zu studieren oder programmieren zu können explizit KEINE voraussetzung
+						Interesse oder Ideen für themen? kommt vorbei!
+					</aside>
 				</section>
 
 				<!-- Kapitel 1: Werbetracking -->
@@ -79,6 +86,8 @@
 						<div data-id="box1" style="width: 2000px; height: 1000px; margin: 100%px;"></div>
 					</div>
 				</section>
+
+				<section>
 					<section>
 						<h2>Tracking Pixel</h2>
 						<ul>
@@ -96,7 +105,7 @@
 							können sowohl auf Websites als auch in HTML Emails eingebunden werden
 						</aside>		
 					</section>					
-				<section>
+					
 					<section id="fragments" >
 						<h2>Gesammelt werden:</h2>
 						<ul>
@@ -108,7 +117,6 @@
 							<li class="fragment fade-up">Referrer (Von wo aus ihr auf die Seite gelangt seit)</li>
 						</ul>
 					</section>
-				
 					<section>
 						<h2>Außerdem</h2>
 						<ul>
@@ -237,58 +245,149 @@
 					</ul>
 				</section>
 			</section>
-				<section data-markdown>
+			<section>
-					## Auswirkungen von micro targeting?
+				<h2>Why bother?</h2>
-						- ermöglicht manipulation (cambridge analytica)
+				<ul>
-				</section>
+					<li class="fragment fade-left">Vereinfachen von Manipulation</li>
-				<section data-markdown>
+					<li class="fragment fade-left">Energieverbrauch v. Werbenetzwerken</li>
-					# Micro targeting
+					<li class="fragment fade-left"> ... </li>
+				</ul>
+				<br>
+				<p class="fragment fade-left">https://www.sciencedirect.com/science/article/pii/S0195925517303505</p>
 
-					> In der Bundestagswahl 2021 nutzten alle etablierten parteien Microtargeting im Wahlkampf. (Netzpolitik 2017)
+				<aside class="notes" data-markdown>
+					Neben offensichtl. Argument der Privatsphäre gibt es noch weitere Gründe, warum das nicht so cool ist.
 					
-					Die FDP schaltete bspw. Facebook-Werbungen, die sie abhängig von der Zielgruppe für oder gegen staatliche CO2-Limits positionierten. ("grüne Interessen", "Vielreisende").
+					1. Ermöglicht manipulation (cambridge analytica) Je genauer das Bild desto effektiver
-					
+						(Wahlkampf 2021 - alle etablierten Parteien nutzten Microtargeting. (Netzpolitik 2017)
-					
+						FDP ("grüne Interessen", "Vielreisende").
-				</section>
+					2. Energieverbrauch: Der Stromverbrauch des Webenetzwerkes wird je nach Quelle auf 
-				<section data-markdown>
-					## Energieverbrauch
-
-					Der Stromverbrauch von Onlinewerbung wird je nach Quelle auf 
 					um die 110TWH / Jahr geschätzt.
-					https://www.sciencedirect.com/science/article/pii/S0195925517303505
+
+					um nur mal zwei aspekte zu nennen, euch fallen sicher noch weitere ein.
+				</aside>
 			</section>
 
-				
-
 			<!-- Adblocking mit PiHole -->
-
-				<section data-markdown>
-					## Ad AdBlocking
-
-					Wie können wir unsere privatspäre schützen / kontrolle über unsere Daten erlangen? 
-				</section>
-				<section data-markdown>
-					## Browser plugins
-
-					* Einfach einzurichten
-					* Funktionieren nur im Browser
-					* nicht auf jedem Gerät verfügbar (Smart TV, Innerhalb von Apps)
-				</section>
-
 				<section>
-					<h2>DNS who?</h2>
+					<h2>Ad Blocking</h2>
-					<img src="images/dnsExplained.jpg">
+					<img src="./images/adblocked.png" style="width: 70vh;">
-					<p>Domain Name System</p>
+					<p class="citation">Quelle: http://marketingland.com/wp-content/ml-loads/2015/09/ad-blocked3-ss-1920.png</p>
+					<aside class="notes" data-markdown>
+						eigentlicher Anlass unseres Vortrags:
+						
+						* was können wir selbst tun, wenn wir unsere Daten und unser surfverhalten lieber für uns behalten wollen?
+					</aside>
+				</section>
+				<section>
+					<h2>Browser plugins</h2>
+					<ul>
+						<li class="fragment fade-right">Einfach einzurichten</li>
+						<li class="fragment fade-right">Beschränkt auf jeweil. Browser</li>
+						<li class="fragment fade-right">Nicht überall verfügbar (Smart TV, Innerhalb von Apps)</li>
+						<li class="fragment fade-right">Langweilig</li>
+					</ul>
+					<aside class="notes" data-markdown>
+						Das offensichtlichste Tool, sicher auch die meisten nutzen
+					</aside>
+				</section>
+				<section>
+					<section data-background="./images/blackhole.gif">
+						<h2 class="fragment fade-down">PiHole</h2>
+						<br><br><br><br><br><br><br><br>
+						<p class="citation">Quelle: https://media.giphy.com/media/SVCSsoKU5v6ZJLk07n/giphy.gif</p>
+						<aside class="notes" data-markdown>
+							Viel cooler wäre es doch, wenn wir uns auf unseren geräten überhaupt nicht mehr mit irgendwelchen plugins rumärgern müssten.
+
+							Quasi ein schwarzes loch für werbung
+						</aside>
+					</section>
+					<section>
+						<h2>Was ist ein PiHole?</h2>
+						<h3 class="fragment fade-up">= DNS-Sinkhole</h3>
+						<div style="overflow: hidden;" >
+							<div style="display: inline-block; padding-right: 50px;"><img src="images/raspberry.jpeg" style="width: 250px; " /></div>
+							<div style="display: inline-block; padding: 50px; vertical-align: top;"><h3>+</h3></div>
+							<div style="display: inline-block; vertical-align: top; padding: 30px;"><img class="box" src="https://wp-cdn.pi-hole.net/wp-content/uploads/2018/12/pihole-text-logo-white.png.webp" style="width: 250px;"/></div>
+						</div>
+						<br>
+						<p class="citation">Quelle: https://hackaday.com/wp-content/uploads/2015/02/pibig.jpg</p>
+						<aside class="notes" data-markdown>
+							* Ein pi hole ist ein Werbefilter für eurer WLAN.
+							* "pi hole" = eine OpenSource software
+							* Der Name "Pi" kommt von raspberryPi - einem microcomputer (der sich in eurem WLAN befindet)
+							* Euer router wird so konfiguriert, dass er jede anfrage erstmal an den pi sendet, der dann entscheidet ob sie durch darf oder nicht.
+							-> Man spricht auch von einem DNSSinkhole
+							Um zu verstehen wie genau das funktioniert müssen wir erst verstehen was DNS ist.
+						</aside>
+					</section>					
 				</section>
 				
 				<section>
 					<section>
-						<h2>PIHole Unbound</h2>
+						<h2>Was ist DNS?</h2>
-						Hostet euren eigenen rekursiven DNS-Server
+						<div class="r-stack">
-						+ mehr Privatsphäre
+							<em class="fragment fade-down">= Domain Name System</em>
-						+ erhöter Schutz vor DNS-Spoofing/Hijacking Angriffen
+							<img src="./images/telefonbuch.jpeg" width="450" height="300" class="fragment">
-						- Erstmalige Aufrufe neuer Adressen haben eine kurze Verzögerung
+						</div>
+						<p class="citation">Bild: https://www.sueddeutsche.de/image/sz.1.2720968/1200x675?v=1519611738</p>
+						<aside class="notes" data-markdown>
+							Wie Telefonbuch: Zuständig für Umwandlung von Namen, die sich Menschen merken können zu eindeutigen Adressen.
+							jedesmall wenn eine Webseite im Browser eingeben "www.google.de" wird zuerst dieser "DNS-Name" in eine IP-Adresse umgewandelt 
+						</aside>
 					</section>
+					<section>
+						<h2>DNS im OSI-Modell</h2>
+						<br>
+						<div style="background-color: whitesmoke; align-content: center; margin-left: 15%; width: 700px">
+							<img src="images/osi.png"/>
+						</div>
+						<p class="citation">Bild: https://de.wikipedia.org/wiki/OSI-Modell#/media/Datei:ISO-OSI-7-Schichten-Modell(in_Deutsch).svg</p>
+					</section>
+					<section>
+						<p>Wo finde ich <em>www.ag-link.xyz</em> ?</p>
+						<img src="images/dnsExplained.jpg" class="fragment fade-up"/>
+						<p class="fragment fade-up">Wo finde ich <em>.xyz.ag-link.www</em> ?</p>
+						
+						<aside class="notes" data-markdown>
+							* DNS kennt keine zentrale Datenbank /basiert auf großen Zahl von Nameservern.
+							Zuerst fragen wir unseren PrimaryDNS (zb. Google 8.8.8.8)
+							Rekursive auflösung
+							1. Root-Nameserver (Rootserver):
+								lösen top-level domain auf (.de, .com)	
+								13 Stück (10 in USA, London, Tokio, Stockholm); 
+							2. Der Namespace löst dann die SecondLvl Domain auf (und ggf. weitere Subdomains)
+							3. host (.www, .mp3, .blog)
+						</aside>
+					</section>
+				</section>
+
+				<section>
+					<h2>PiHole Setup</h2>
+					<img src="images/pihole_dns.png">
+					<p></p>
+				</section>
+
+				<section>
+					<section>
+						<h2>PiHole Unbound</h2>
+						<p>Unbound = rekursiver DNS-Server zum selberhosten.</p><br>
+						<ul>
+							<li>mehr Privatsphäre</li>
+							<li>erhöter Schutz vor DNS-Spoofing/Hijacking Angriffen</li>
+							<li>Erstmalige Aufrufe neuer Adressen haben eine kurze Verzögerung</li>
+						</ul>
+					</section>
+					<section>
+						<h2>PiHole mit Unbound</h2>
+						<img src="images/unbound2.png">
+						<p></p>
+					</section>
+				</section>
+				
+				
+				<section data-background="./images/uptempo.gif">
+					<img src="https://wp-cdn.pi-hole.net/wp-content/uploads/2018/12/pihole-text-logo-white.png.webp" alt="pihole logo"  style="height: 120px; margin: 0 auto 4rem auto; background: transparent;" class="pihole-logo"> 	
 				</section>
 
 				<section>
@@ -299,6 +398,18 @@
 					<h3>Die PiHole Blockliste</h3><br>
 					<img src="./images/blocked-pixel.png"\>
 				</section>
+				<section data-background="./images/fazit.gif">
+					<aside class="notes">
+						pihole gut um sich mal bewusst zu machen was da alles 
+					</aside>
+				</section>
+				<section>
+					<h2>Nachlesen und selber basteln:</h2>
+					<br>
+					<a>
+						<img src="./images/githubw.png" alt="github"  style="height: 120px; margin: 0 auto 4rem auto; background: transparent;">
+					</a><p>[GitHub] ~  https://github.com/bedaka/kew-pihole</p>
+				</section>
 				<section data-markdown>
 					## Quellen 1/2
 					* Netzpolitik 2017: https://netzpolitik.org/2017/wahlkampf-in-der-grauzone-die-parteien-das-microtargeting-und-die-transparenz/
@@ -307,7 +418,6 @@
 					* https://www.sciencedirect.com/science/article/pii/S0195925517303505
 					* Schnabel, Patrick (??): Netzwerktechnikk-Fibel
 				</section>
-
 				<section>
 					<h2>Quellen 2/2</h2>
 					<ul>