add my next info 7B lesson

1 files changed, 170 insertions, 0 deletions

diff --git a/Info/7/1/Hypertext/slides.md b/Info/7/1/Hypertext/slides.md
new file mode 100644
index 00000000..b96f9eb0
--- /dev/null
+++ b/Info/7/1/Hypertext/slides.md
@@ -0,0 +1,170 @@
+---
+author: Florian Fischer
+lang: de
+theme: metropolis
+aspectratio: 169
+header-includes: |
+    \makeatletter
+    \beamer@ignorenonframefalse
+    \makeatother
+    \usepackage{fontawesome5}
+    \usepackage[school]{pgf-umlcd}
+    \usepackage{unicode-math}
+    \usepackage{tikz}
+    \usetikzlibrary{calc, positioning, shapes.arrows}
+    \newcommand{\boldred}[1]{\textcolor{red}{\textbf{#1}}}
+    \newcommand{\link}[1]{\textcolor{blue}{\underline{\url{#1}}}}
+---
+
+
+## Wiederholung
+
+* Was ist ein Verweis im Internet?
+* Welcher andere Begriff wird auch oft verwendet?
+* Aus welchen Teilen besteht er?
+
+## Wiederholung - Die Klasse VERWEIS
+
+\begin{center}
+\begin{tikzpicture}[font=\Large]
+
+%\begin{class}[text width=4.5cm]{\only<1>{\phantom{VERWEIS}}\only<2->{VERWEIS}}{-1,0}
+\begin{class}[text width=4.5cm]{VERWEIS}{-1,0}
+\only<-2> {
+  \attribute{\phantom{Beschreibung}}
+  \attribute{\phantom{Zieladresse}}
+}
+\only<3->{
+  \attribute{Beschreibung}
+  \attribute{Zieladresse}
+}
+\only<-4>{
+  \operation{\phantom{öffneZieldokument()}}
+}
+\only<5->{
+  \operation{öffneZieldokument()}
+}
+\end{class}
+
+\node[single arrow,
+  minimum width = 10pt, single arrow head extend=3pt,
+  minimum height=10mm, left=of VERWEIS] {};
+
+\only<1> {
+\node[single arrow, draw=blue, fill=blue, 
+  minimum width = 10pt, single arrow head extend=3pt,
+  minimum height=10mm, left=of VERWEIS, yshift=1cm] {};
+}
+
+\only<2> {
+\node[single arrow, draw=blue, fill=blue, 
+  minimum width = 10pt, single arrow head extend=3pt,
+  minimum height=10mm, left=of VERWEIS] {};
+}
+
+\only<4> {
+\node[single arrow, draw=blue, fill=blue, 
+  minimum width = 10pt, single arrow head extend=3pt,
+  minimum height=10mm, left=of VERWEIS, yshift=-1cm] {};
+}
+
+\begin{object}[text width=6cm]{v1}{5,0}
+\instanceOf{VERWEIS}
+\only<-5> {
+\attribute{\phantom{"Bg}}
+\attribute{\phantom{"ky}}
+}
+\only<6-> {
+\attribute{Beschreibung="Banknachbarin"}
+}
+\only<-6> {
+\attribute{\phantom{"ky}}
+}
+\only<7-> {
+\attribute{Zieladresse="kayra.html"}
+}
+\end{object}
+\end{tikzpicture}
+\end{center}
+
+## Verweise graphisch darstellen
+
+Wie könnte man mehrere Webseiten mit Verweisen übersichtlich graphisch darstellen?
+
+### Als Graph!
+
+\begin{center}
+\begin{tikzpicture}[font=\Large]
+\node[rounded corners, draw, minimum width=1cm] (verweis) {Seite mit Verweis};
+\node[rounded corners, right=3cm of verweis, draw, minimum width=1cm] (verweisziel) {Zielseite};
+\draw[->] (verweis) -- (verweisziel);
+\end{tikzpicture}
+\end{center}
+\pause
+
+### Beispiel: Steckbriefe
+
+\begin{center}
+\begin{tikzpicture}[font=\Large]
+\node[rounded corners, draw, minimum width=1cm] (lucy) {lucy.html};
+\pause
+\node[rounded corners, right=3cm of lucy, draw, minimum width=1cm] (kayra) {kayra.html};
+\draw[->] (lucy) -- (kayra);
+\end{tikzpicture}
+\end{center}
+
+## \faIcon{desktop} Arbeitsauftrag - 10min
+
+::: columns
+:::: {.column width=70%}
+Auf den Webseiten von \link{https://schule.muhq.space/klasse7/} sind ebenfalls viele Verweise zu finden.
+\vspace{0.3cm}
+
+Die nebenstehende Abbildung verdeutlicht, welche Webseiten miteinander verknüpft sind. Die Übersicht ist aber nicht fertig. 
+\vspace{0.3cm}
+
+**Übernehme die Abbildung in dein Heft (oder deinen Schnellhefter), rufe die Webseite auf und ergänze die fehlenden Teile.**
+::::
+
+:::: {.column width=30%}
+\begin{tikzpicture}[font=\Large]
+\node[rounded corners, draw] (index) {\textbf{index.html}};
+\node[rounded corners, below=3cm of verweis, draw, xshift=-0.2cm] (rainer) {\textbf{rainer.html}};
+\draw[->] (index) -- (rainer);
+\end{tikzpicture}
+::::
+:::
+
+##
+
+![](img/pokemon-hyperstruktur.png){.center}
+
+## \faIcon{pencil-alt} Hypertextstrukturen
+
+Ein Dokument, das Verweise enthält, heißt \boldred{Hypertextdokument}.
+
+Viele Hypertextdokumente bilden eine \boldred{Hypertextstruktur}.
+
+Diese können mithilfe von \boldred{Graphen} dargestellt werden.
+Ein Graph besteht aus \boldred{Knoten} und den Verbindungslinien dazwischen, den \boldred{Kanten}.
+
+## \faIcon{desktop} \faIcon{pencil-alt} Arbeitsauftrag - 10min
+
+Informiere dich auf \link{de.wikipedia.org/wiki/Italien} über alle Staaten, die an Italien grenzen und stelle die Beziehung in einem Graphen dar. 
+\vspace{1cm}
+
+**Vergiss die beiden Kleinstaaten innerhalb Italiens nicht!**
+
+##
+
+![](img/italien-hyperstruktur.png){.center}
+
+## \faIcon{desktop} Arbeitsauftrag
+
+Übertrage den Graphen in eine Hypertextstruktur.
+Erstelle dazu für jeden Staat ein HTML-Dokument mit **KompoZer** ![](logos/KompoZer.png){height=0.7cm}.  
+Füge jeweils Informationen über die Flagge, Sprache, Einwohnerzahl und Hauptstadt ein.
+
+**[Ganz wichtig für die Verweise]{.underline}: Speichere all diese HTML-Dokumente im gleichen Ordner (bspw. deinem Laufwerk)!**
+
+