Migrate content & implement custom Admonitions

config/scriptsConfigs/teach.scriptsConfigs.json

@@ -4,7 +4,8 @@
       "gym": 1
     },
     "mappings": [
-      {"section": "/index.md", "material": "/ScriptLandingPages/wip.mdx"},
+      {"section": "/index.md", "material": "/ScriptLandingPages/teach.gym.mdx"},
+      {"section": "Netzwerke", "material": "Netzwerke"},
       {"section": "Microbit", "material": "Microbit"}
     ]
   },
@@ -13,7 +14,7 @@
       "sek": 1
     },
     "mappings": [
-      {"section": "index.md", "material": "/ScriptLandingPages/wip.mdx"},
+      {"section": "/index.md", "material": "/ScriptLandingPages/teach.sek.mdx"},
       {"section": "Microbit", "material": "Microbit"}
     ]
   },
@@ -22,7 +23,7 @@
       "prim": 1
     },
     "mappings": [
-      {"section": "index.md", "material": "/ScriptLandingPages/wip.mdx"},
+      {"section": "/index.md", "material": "/ScriptLandingPages/teach.prim.mdx"},
       {"section": "Microbit", "material": "Microbit"}
     ]
   },

config/siteProperties/teach.site-properties.ts

@@ -1,9 +1,9 @@
 import {SiteProperties} from "../../src/builder/models/site-config";
 
 const navbarItems = [
-  {to: 'gymnasium', label: 'Gymnasium', position: 'left'},
-  {to: 'sekundarstufe', label: 'Sekundarstufe', position: 'left'},
-  {to: 'primarstufe', label: 'Primarstufe', position: 'left'},
+  {to: 'gymnasium/informatik', label: 'Gymnasium', position: 'left'},
+  {to: 'sekundarstufe/medien-und-informatik', label: 'Sekundarstufe', position: 'left'},
+  {to: 'primarstufe/medien-und-informatik', label: 'Primarstufe', position: 'left'},
   {to: 'creative-corner', label: '🎨 Creative Corner', position: 'right'},
 ];
 

content/material/Components-Gallery/01-Admonitions.mdx

@@ -1,23 +1,38 @@
 # Admonitions
-Admonitions are a [builtin feature](https://docusaurus.io/docs/markdown-features/admonition) of the Docusaurus default
-theme.
+Admonitions are a [builtin feature](https://docusaurus.io/docs/markdown-features/admonition) of the Docusaurus default theme. This project uses a customized version of
+the Admonition component, with its own semantics.
 
-:::note
-Some **content** with _Markdown_ `syntax`. Check [this `api`](https://docusaurus.io/docs/markdown-features/admonitions).
+:::danger Danger
+Do not forget to **save your work** before leaving the site!
 :::
 
-:::tip
-Some **content** with _Markdown_ `syntax`. Check [this `api`](https://docusaurus.io/docs/markdown-features/admonitions).
+:::warning Warning
+If you get an error saying `SyntaxError: expected ':'`, double-check whether your `if`-line ends with a `:`.
 :::
 
-:::info
-Some **content** with _Markdown_ `syntax`. Check [this `api`](https://docusaurus.io/docs/markdown-features/admonitions).
+:::key Key Takeaway
+We use `for`-loops to repeat a set of instructions for a _known, predetermined number of iterations_.
 :::
 
-:::warning
-Some **content** with _Markdown_ `syntax`. Check [this `api`](https://docusaurus.io/docs/markdown-features/admonitions).
+:::definition Definition
+An algorithm is a finite sequence of rigorous instructions, typically used to solve a class of specific problems or to
+perform a computation. [[Wikipedia](https://en.wikipedia.org/wiki/Algorithm)]
 :::
 
-:::danger
-Some **content** with _Markdown_ `syntax`. Check [this `api`](https://docusaurus.io/docs/markdown-features/admonitions).
+:::insight Insight
+The tradition of using the string `Hello, World!` for small test programs goes back to at least 1978, where it was used
+in the book [The C Programming Language](https://en.wikipedia.org/wiki/The_C_Programming_Language).
 :::
+
+:::info Tip
+Remember: (255)<sub>2</sub> = (11111111)<sub>2</sub>
+:::
+
+## Nested Admonitions
+:::insight Good to know!
+Admonitions can be nested.
+
+:::warning Design
+While nesting Admonitions may be useful in some cases, this can also result in visual clutter.
+:::
+

content/material/Components-Gallery/04-Hero-Image-and-Source-Reference.mdx

@@ -1,13 +1,13 @@
 import {HeroContainer} from "@site/src/components/HeroContainer/HeroContainer";
-import {SourceReference} from "@site/src/components/SourceReference/SourceReference";
+import {Caption} from "@site/src/components/Caption/Caption";
 
 # Hero Image
 <HeroContainer>
   ![Hero](img/hero.jpeg)
 </HeroContainer>
-<SourceReference>
+<Caption>
   Photo by [Alex Gruber](https://unsplash.com/@alex_gruber?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)
   on [Unsplash](https://unsplash.com/photos/man-in-black-jacket-and-black-pants-standing-on-rock-formation-looking-at-the-mountains-during-ZOCb5G9tA7A?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash).
-</SourceReference>
+</Caption>
 
 🎶 We can be heroes, just for one day.

content/material/Components-Gallery/08-Material-Design-Icons.mdx

@@ -16,4 +16,4 @@ Here are some examples:
 | `:mdi-application-braces-outline:` | :mdi-application-braces-outline: |
 | `:mdi-language-python:`            |      :mdi-language-python:       |
 
-Search the [MDI library](https://pictogrammers.com/library/mdi/) for an icon that suits your needs!
+Search the [MDI library on Iconify](https://icon-sets.iconify.design/mdi/) for an icon that suits your needs!

content/material/Netzwerke/01-World-Wide-Web/01-Ablauf-Webseitenaufruf.mdx

@@ -0,0 +1,93 @@
+# Ablauf eines Webseitenaufrufs
+Wann immer in der Informatik zwei Parteien (in diesem Fall zwei Computer) miteinander kommunizieren wollen, müssen sich
+beide Seiten an gewisse Spielregeln halten, damit sie sich gegenseitig verstehen. Diese Spielregeln - wir bezeichnen sie
+in der Informatik als **Protokolle** - legen beispielsweise einen Handlungsablauf fest, oder sie definieren, wie ein
+bestimmtes Datenpaket aufgebaut sein muss.
+
+In diesem Abschnitt verschaffen wir uns einen Überblick über den Ablauf eines Webseitenaufrufs, wie er durch das
+**Hypertext Transfer Protocol (HTTP)** festgelegt wird.
+
+Der erste Teilnehmer ist dabei der sogenannte **Browser** - also ein Programm auf dem Computer der Benutzerin, welches
+Webseiten aufrufen und anzeigen kann.
+
+:::definition Browser
+**Webbrowser** oder allgemein auch **Browser** (englisch: _to browse_, 'stöbern') sind Computerprogramme zur Darstellung
+von Webseiten im World Wide Web oder allgemein von Dokumenten und Daten.
+:::
+
+Der andere Teilnehmer ist ein zweiter (in der Praxis meist sehr leistungsstarker) Computer, welcher die von der
+Benutzerin gewünschte **Ressource**, nämlich die Webseite in form einer HTML-Datei, besitzt und öffentlich anbietet. Die
+beiden Seiten stehen sich also in einem sogenannten Client-Server-Verhältnis gegenüber. Der **Client** ist dabei
+konzeptuell die Partei, die um etwas bittet (in diesem Fall um eine HTML-Datei), der **Server** ist die Partei die etwas
+anbietet. Wir können dabei sowohl den Browser als auch den Computer der Benutzerin als Client bezeichnen - im Prinzip
+sogar die Benutzerin selbst.
+
+:::definition Client und Server
+- Ein **Client** ist ein Programm oder ein Gerät, das Dienste von einem _Server_ abruft. Ein _Browser_ ist also ein
+Beispiel für einen Client.
+- Ein **Server** ist ein Programm oder Gerät, das auf die Kontaktaufnahme eines _Clients_ wartet, um eine bestimmte
+Dienstleistung für ihn zu erfüllen
+:::
+
+![Client, Server und URL](img/client-server.png)
+
+Im ersten Schritt sendet der Client nun eine **Anfrage (Request)** an den Server. Im Rahmen von HTTP, also bei einem
+Webseitenaufruf, tut er dies in Form einer URL. Die **URL** (Uniform Resource Locator) ist die Adresse der gewünschten
+Webseite im World Wide Web.
+
+![HTTP-Webseitenaufruf, Schritt 1: Anfrage (Request)](img/http-request.png)
+
+Wenn der über diese Adresse erreichte Server (hier `info.cern.ch`) nun die gewünschte Ressource (hier das Dokument
+`/hypertext/WWW/TheProject.html`) besitzt und anbietet, so wird diese in der **Antwort (Response)** des Servers
+retourniert. Sie wird dazu in ein Paket gepackt, und darin als **Payload** (also als "eigentlicher Inhalt") des Pakets
+bezeichnet. Nebst der Payload enthält das Paket auch noch den sogenannten **Status Code**. Mehr Informationen dazu
+finden Sie im [nächsten Abschnitt](./02-Http-Status-Codes.mdx).
+
+![HTTP-Webseitenaufruf, Schritt 2: Antwort (Response)](img/http-response.png)
+
+:::definition Payload
+In der Datenübertragung ist die **Payload** derjenige Anteil eines Pakets, bei dem es sich um den eigentlichen Inhalt
+der Übertragung handelt. Bei einer _Response_ würde man zum Beispiel die angefragte HTML-Datei als Payload bezeichnen.
+
+Die Payload steht im Kontrast zu den sogenannten _Metadaten_ (auch _Steuerungsdaten_), also den übrigen
+Zusatzinformationen wie Adresse und Status Code, die zur erfolgreichen Übertragung nötig sind.
+:::
+
+Und damit ist die gesuchte Webseite auch bereits auf dem Computer der Benutzerin angelangt. Der Browser nimmt die
+erhaltene HTML-Datei nun entgegen und präsentiert deren Inhalt auf dem Bildschirm.
+
+![HTTP-Webseitenaufruf, Schritt 3: Die Webseite ist angekommen](img/http-website-loaded.png)
+
+***
+:::key Request-Response-Prinzip
+Ein Webseitenaufruf erfolgt nach sogenannten **Request-Resopnse-Prinzip**: Der _Client_ sendet eine
+**Anfrage (Request)** an den _Server_. Diese Anfrage beinhaltet unter anderem Informationen darüber, welche Ressource
+(z.B. welche HTML-Datei) der Client in Anspruch nehmen möchte.
+
+Der Server sendet daraufhin eine **Antwort (Response)** an den Client zurück. In Regelfall enthält diese Antwort die
+angefragte Ressource, sowie einen [Status Code](./02-Http-Status-Codes.mdx).
+:::
+***
+
+Wie Sie sehen, regelt das Hypertext Transfer Protocol (HTTP) also einerseits den Ablauf eines Webseitenaufrufs in Form
+dieses Request-Response-Prinzips, bestimmt andererseits aber auch, wie diese Anfrage (Request) und die entsprechende
+Antwort (Response) auszusehen haben. Solange sich beide Parteien, also Client und Server, an diese Spielregeln halten,
+können wir sicherstellen, dass ein solcher Aufruf ordnungsgemäss funktioniert.
+
+:::definition Protokoll
+In der Informatik und in der Telekommunikation ist ein **Protokoll** (oder **Kommunikationsprotokoll**) eine
+Vereinbarung, nach der die Datenübertragung zwischen zwei oder mehreren Parteien abläuft.
+:::
+
+Hier sehen Sie das Endergebnis nun noch einmal im Gesamtüberblick:
+![Der Webseitenaufruf im Überblick](img/http-overview.png)
+
+## Komplexere Webseiten
+Die meisten Webseiten bestehen heutzutage nicht mehr nur aus einer einzigen HTML-Datei. Dazu kommen meistens noch
+CSS-Dateien für das Styling, JavaScript-Dateien für gewisse Programmlogik, sowie Bilder und sonstige Medien.
+
+Der Abruf einer Webseite beginnt aber trotzdem immer mit dem Abruf eines HTML-Dokuments. Es ist anschliessend die
+Aufgabe des Browsers, die HTML-Datei genau anzuschauen und zu sehen, welche weiteren Ressourcen darin verlinkt sind
+(zum Beispiel mit `<link rel="stylesheet" href="style.css">`). Er wiederholt dann den oben beschrieben
+Request-Response-Prozess für all diese Ressourcen, bis er schlussendlich eine vollständig geladene Webseite darstellen
+kann.

content/material/Netzwerke/01-World-Wide-Web/02-Http-Status-Codes.mdx

@@ -0,0 +1,60 @@
+import DefinitionList from "@site/src/components/DefinitionList";
+
+# HTTP Status Codes
+Wie wir im vorherigen Abschnitt gesehen haben, enthält das Antwortpaket nicht nur die gewünschte Ressource
+(die HTML-Datei), sondern zudem auch immer noch eine dreistellige Zahl, den sogenannten **Status Code**. Dieser soll
+dem Client genauere Auskunft darüber geben, wie er die Antwort zu interpretieren hat. In unserem Beispiel wurde die
+gewünschte Ressource erwartungsgemäss retourniert, was der Server mit dem Statuscode `200 (OK)` bestätigt.
+
+![HTTP-Webseitenaufruf, Schritt 2: Antwort (Response)](img/http-response.png)
+
+Mindestens einen solchen Statuscode haben Sie aber bestimmt schon gesehen, nämlich `404 (Not Found)`. Diesen Statuscode
+retourniert der Server immer dann, wenn er die gewünschte Ressource nicht findet. Das wäre zum Beispiel der Fall
+gewesen, wenn wir im obigen Beispiel versehentlich nach `DasProjekt.html` statt nach `TheProject.html` gefragt hätten.
+Der eigentliche Inhalt des Pakets (die Payload) wäre in dem Fall leer gewesen.
+
+Der Status Code ist deshalb wichtig, weil es auch andere Gründe haben kann, weshalb die keine Payload retourniert wird.
+Es könnte zum Beispiel auch sein, dass auf Seiten des Servers gerade etwas schiefgelaufen ist - die Benutzerin kann
+die Anfrage also getrost später nochmal versuchen. Weiter wäre es auch möglich, dass der Server die Ressource zwar
+gefunden hat, sie aber aus Berechtigungsgründen nicht herausgeben darf. In dem Fall müsste die Benutzerin sich
+vermutlich einloggen, oder um die entsprechende Berechtigung fragen. Der Status Code erlaubt es dem Browser also,
+die Benutzerin insbesondere im Fall einer unerwarteten Antwort möglichst genau zu informieren, weshalb es etwas nicht
+geklappt hat.
+
+:::insight Häufig verwendete Status Codes
+  <DefinitionList>
+    <dt>`301`</dt>
+    <dd>`Moved Permanently`</dd>
+    <dd>Die Adresse dieser Ressource hat sich dauerhaft geändert - die Ressource ist also "umgezogen". Die Antwort enthält die neue Adresse.</dd>
+
+    <dt>`401`</dt>
+    <dd>`Unauthorized`</dd>
+    <dd>Der Server kann die Identität des Clients nicht feststellen. Dieser muss sich authentifizieren (sprich, anmelden), um Zugriff auf diese Ressource zu erhalten.</dd>
+
+    <dt>`403`</dt>
+    <dd>`Forbidden`</dd>
+    <dd>Der Server kann die Identität des Clients zwar feststellen, dieser ist jedoch nicht dazu berechtigt, diese Ressource zu konsumieren.</dd>
+
+    <dt>`404`</dt>
+    <dd>`Not Found`</dd>
+    <dd>Der Server kann die angefragte Ressource nicht finden.</dd>
+
+    <dt>`500`</dt>
+    <dd>`Internal Server Error`</dd>
+    <dd>Der Server hat eine Situation angetroffen, die er nicht bewältigen kann.</dd>
+  </DefinitionList>
+
+  ***
+
+  ### Bonus: I'm a teapot
+  <DefinitionList>
+    <dt>`418`</dt>
+    <dd>`I'm a teapot`</dd>
+    <dd>Der Server weigert sich, Kaffee zu kochen - denn er ist ein Teekessel!</dd>
+  </DefinitionList>
+
+Dieser Status Code geht zurück auf Aprilscherze aus den Jahren 1998 und 2014. Einige Server geben ihn aber auch heute
+teilweise noch als Antwort zurück, wenn sie eine bestimmte Anfrage nicht bearbeiten wollen. Das kann beispielsweise
+dann der Fall sein, wenn es sich um automatisierte Anfragen handelt, die für den Server eine hohe Belastung bedeuten
+können. _Quelle: [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/418)_.
+:::

content/material/Netzwerke/01-World-Wide-Web/03-Anfaenge-des-Web.mdx

@@ -0,0 +1,57 @@
+import {HeroContainer} from "@site/src/components/HeroContainer/HeroContainer";
+import {Caption} from "@site/src/components/Caption/Caption";
+
+# Die Anfänge des World Wide Web erkunden
+<HeroContainer>
+  ![Der erste Webserver vom Tim Berners-Lee am CERN](img/first-web-server.jpg)
+</HeroContainer>
+<Caption>
+  Der erste Webserver vom Tim Berners-Lee am [CERN](https://home.cern/science/computing/birth-web).
+  Bild: [Thomas Stiren, Wikipedia](https://de.wikipedia.org/wiki/World_Wide_Web#/media/Datei:Tim_berners_lee_webserver.jpg).
+</Caption>
+
+:::key Die erste Webseite
+Anfang der 1990er-Jahre veröffentlichte [Tim Berners-Lee](https://de.wikipedia.org/wiki/Tim_Berners-Lee) am CERN in Genf **die erste Webseite der Welt**. Diese
+Seite besteht bis heute unverändert unter http://info.cern.ch/hypertext/WWW/TheProject.html.
+:::
+
+:::insight CERN: Anfänge des World Wide Web
+Mehr Informationen zur Geburt des World Wide Web finden Sie auf dieser [Webseite des CERN](https://home.cern/science/computing/birth-web).
+:::
+
+## Der erste Web Browser
+Wer eine Webseite öffnen will, braucht einen Browser. Tim Berners-Lee musste also nicht nur eine erste HTML-Datei
+schreiben, sondern auch noch ein Programm entwickeln, welches diese anzeigen konnte. Der erste solche Web Browser hiess
+_WorldWideWeb_. Eine Nachbildung davon können Sie auch heute noch
+[selbst ausprobieren](https://worldwideweb.cern.ch/browser/).
+
+Zugegeben, WorldWideWeb ist nicht ganz so intuitiv wie etwa Safari, Firefox, Chrome oder Edge. Wenn Sie also zum
+Beispiel die erste Webseite der Welt öffnen wollen, dann gehen Sie folgendermassen vor:
+
+![Erster Web Browser: Webseite öffnen](img/first-browser-visit-website.png)
+
+Was, wenn Sie nun einem dieser _Hyperlinks_ folgen wollen? Dazu klicken Sie mit der Maus auf den Link, und anschliessend
+im Menu auf "Links" → "Follow link":
+
+![Erster Web Browser: Einem Hyperlink folgen](img/first-browser-follow-hyperlink.png)
+
+:::insight Parallelen
+Unsere modernen Web Browser wie Google Chrome, Microsoft Edge, Safari und Firefox sind zweifellos viel mächtiger und
+benutzerfreundlicher als der _WorldWideWeb_ Browser von damals. Welche Elemente sind dennoch bis heute erhalten
+geblieben?
+:::
+
+## Der zweite Web Browser
+WorldWideWeb war ein Meilenstein des modernen Informationszeitalters - das Programm hatte aber einen grosse Schwäche:
+Es lief ausschliesslich auf einem Betriebssystem namens _NeXT_. Heute kennen wir vor allem die Betriebssysteme Windows,
+macOS und Linux. Stellen Sie sich vor, man könnte nur über ein macOS-Gerät auf das Web zugreifen!
+
+Tim Berners-Lee entwickelte also bald darauf einen Nachfolger von WorldWideWeb, nämlich den _line-mode_ Browser. Diesen
+baute er so, dass er auf möglichst vielen verschiedenen Betriebssystemen funktionierte, denn nur so konnte er seiner
+Vision einer weltweiten Vernetzung von Informationen und Geräten ein entscheidendes Stück näher kommen.
+
+Auch vom line-mode Browser gibt es eine Nachbildung, die Sie [hier ausprobieren](https://line-mode.cern.ch/) können.
+
+:::warning Verfügbarkeit
+Die Nachbildung des line-mode Browsers ist leider ab und zu nicht verfügbar.
+:::