aboutsummaryrefslogtreecommitdiff
path: root/Info/7/1/Hypertext
diff options
context:
space:
mode:
Diffstat (limited to 'Info/7/1/Hypertext')
-rw-r--r--Info/7/1/Hypertext/img/rainer-pyro-index.pngbin0 -> 19213 bytes
-rw-r--r--Info/7/1/Hypertext/img/rainer.pngbin0 -> 9662 bytes
-rw-r--r--Info/7/1/Hypertext/slides.md62
3 files changed, 45 insertions, 17 deletions
diff --git a/Info/7/1/Hypertext/img/rainer-pyro-index.png b/Info/7/1/Hypertext/img/rainer-pyro-index.png
new file mode 100644
index 00000000..ad49818e
--- /dev/null
+++ b/Info/7/1/Hypertext/img/rainer-pyro-index.png
Binary files differ
diff --git a/Info/7/1/Hypertext/img/rainer.png b/Info/7/1/Hypertext/img/rainer.png
new file mode 100644
index 00000000..cc271dcd
--- /dev/null
+++ b/Info/7/1/Hypertext/img/rainer.png
Binary files differ
diff --git a/Info/7/1/Hypertext/slides.md b/Info/7/1/Hypertext/slides.md
index 57421e0a..15329825 100644
--- a/Info/7/1/Hypertext/slides.md
+++ b/Info/7/1/Hypertext/slides.md
@@ -1,16 +1,16 @@
---
header-includes: |
\newcommand{\link}[1]{\textcolor{blue}{\underline{\url{#1}}}}
- \let\tightlist\relax
---
-## Wiederholung
+## \faIcon{chalkboard-teacher} Wiederholung
+\let\tightlist\relax
* Was ist ein Verweis im Internet?
* Welcher andere Begriff wird auch oft verwendet?
* Aus welchen Teilen besteht er?
-## Wiederholung - Die Klasse VERWEIS
+## \faIcon{chalkboard-teacher} Wiederholung - Die Klasse VERWEIS
\begin{center}
\begin{tikzpicture}[font=\Large]
@@ -74,18 +74,20 @@ header-includes: |
\end{tikzpicture}
\end{center}
-## Verweise graphisch darstellen
+## \faIcon{chalkboard-teacher} Verweise graphisch darstellen {.t}
Wie könnte man mehrere Webseiten mit Verweisen übersichtlich graphisch darstellen?
+\pause
+
### 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);
-\only<2>{
+\draw[->] (verweis) -- node[yshift=0.5cm, opacity=0] {\includegraphics[keepaspectratio, height=2cm]{img/surfer.png}} (verweisziel);
+\only<3>{
\draw[->] (verweis) -- node[yshift=0.5cm] {\includegraphics[keepaspectratio, height=2cm]{img/surfer.png}} (verweisziel);
}
\end{tikzpicture}
@@ -103,28 +105,44 @@ Wie könnte man mehrere Webseiten mit Verweisen übersichtlich graphisch darstel
\end{tikzpicture}
\end{center}
-## \faIcon{desktop} Arbeitsauftrag - 10min
+## \faIcon{desktop} Arbeitsauftrag: Rainer und Pyro \hfill 10min {.t}
::: columns
:::: {.column width=70%}
-Auf den Webseiten \link{https://schule.muhq.space/klasse7/} sind ebenfalls viele Verweise zu finden.
-\vspace{0.3cm}
+Auf den Webseiten \link{https://bycs.link/rainer-pyro} sind viele Verweise zu finden.
-Die nebenstehende Abbildung verdeutlicht, welche Webseiten miteinander verknüpft sind. Die Übersicht ist aber nicht fertig.
-\vspace{0.3cm}
+Die rechte Abbildung verdeutlicht, welche Webseiten miteinander verknüpft sind.
+Die Übersicht ist aber nicht fertig.
-**Übernehme die Abbildung auf ein Blatt, rufe die Webseite auf und ergänze die fehlenden Teile.**
+\begin{tikzpicture}
+\only<1>{
+ \node[minimum height=2cm] {\includegraphics[keepaspectratio, width=0.9\textwidth]{img/rainer-pyro-index.png}};
+ \node[draw=red, line width=0.75pt, minimum width=1.2cm, minimum height=0.4cm, anchor=west] at (-0.3cm, 0.7cm) {};
+}
+\only<2>{
+ \node {\includegraphics[keepaspectratio, width=0.9\textwidth]{img/rainer.png}};
+ \node[draw=red, line width=0.75pt, minimum width=1.7cm, minimum height=0.6cm, anchor=west] at (2.6cm, 0.7cm) {};
+}
+\end{tikzpicture}
::::
:::: {.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);
+\only<1>{
+ \node[rounded corners, draw, fill=orange!50] (index) {\textbf{index.html}};
+}
+\only<2->{
+ \node[rounded corners, draw] (index) {\textbf{index.html}};
+ \node[rounded corners, fill=orange!50, below=3cm of verweis, draw, xshift=-0.2cm] (rainer) {\textbf{rainer.html}};
+ \draw[->] (index) -- (rainer);
+}
\end{tikzpicture}
::::
:::
+\vspace{1cm}
+**Übernehme die Abbildung auf ein Blatt, rufe die Webseite auf und ergänze die fehlenden Teile.**
+
##
![](img/pokemon-hyperstruktur.png){.center}
@@ -155,18 +173,28 @@ Beispiel: *\<Bild deines Graphens\>*
`\end{tcolorbox}`{=latex}
-## \faIcon{desktop} \faIcon{pencil-alt} Arbeitsauftrag - 10min
+## \faIcon{desktop} \faIcon{pencil-alt} Arbeitsauftrag: Nachbarländer Italiens \hfill 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}
+\begin{tcolorbox}[title=Möglicher Start]
+\centering
+\begin{tikzpicture}
+ \node[draw, rounded corners=2pt] (it) {Italien};
+ \node[draw, rounded corners=2pt, left=of it] (au) {Österreich};
+ \draw (it) -- (au);
+\end{tikzpicture}
+\end{tcolorbox}
+
+\vspace{1cm}
**Vergiss die beiden Kleinstaaten innerhalb Italiens nicht!**
##
![](img/italien-hyperstruktur.png){.center}
-## \faIcon{desktop} Arbeitsauftrag - Wissenswertes über Italien
+## \faIcon{desktop} Arbeitsauftrag: Wissenswertes über Italien
Übertrage den Graphen in eine **Hypertextstruktur**.