From ca9e4a2f918ff18c842bc70025e18d3aafe88249 Mon Sep 17 00:00:00 2001 From: Florian Fischer Date: Wed, 11 Mar 2026 12:30:09 +0100 Subject: improve my 7th grade linked-information slides * Use more icons * Add more explanations to the slides * Separate some repetition slides, to reuse them more easily --- Info/7/1/HTML/.gitignore | 3 ++ Info/7/1/HTML/slides-wiederholung.md | 26 ++++++++++ Info/7/1/HTML/slides.md | 3 +- Info/7/1/Hypertext/img/rainer-pyro-index.png | Bin 0 -> 19213 bytes Info/7/1/Hypertext/img/rainer.png | Bin 0 -> 9662 bytes Info/7/1/Hypertext/slides.md | 62 ++++++++++++++++------ Info/7/1/README.md | 5 +- Info/7/1/Verweise/.gitignore | 3 ++ Info/7/1/Verweise/img/name-dropdown.png | Bin 0 -> 4654 bytes Info/7/1/Verweise/img/steckbrief-url.png | Bin 0 -> 10496 bytes Info/7/1/Verweise/slides-wiederholung.md | 1 + Info/7/1/Verweise/slides.md | 74 ++++++++++++++++----------- 12 files changed, 127 insertions(+), 50 deletions(-) create mode 100644 Info/7/1/HTML/slides-wiederholung.md create mode 100644 Info/7/1/Hypertext/img/rainer-pyro-index.png create mode 100644 Info/7/1/Hypertext/img/rainer.png create mode 100644 Info/7/1/Verweise/img/name-dropdown.png create mode 100644 Info/7/1/Verweise/img/steckbrief-url.png create mode 120000 Info/7/1/Verweise/slides-wiederholung.md (limited to 'Info/7') diff --git a/Info/7/1/HTML/.gitignore b/Info/7/1/HTML/.gitignore index 940e553f..7808f409 100644 --- a/Info/7/1/HTML/.gitignore +++ b/Info/7/1/HTML/.gitignore @@ -1 +1,4 @@ slides-kompozer.pdf +slides-kompozer.pptx +slides-wiederholung.pdf +slides-wiederholung.pptx diff --git a/Info/7/1/HTML/slides-wiederholung.md b/Info/7/1/HTML/slides-wiederholung.md new file mode 100644 index 00000000..ef3583f6 --- /dev/null +++ b/Info/7/1/HTML/slides-wiederholung.md @@ -0,0 +1,26 @@ +--- +author: Florian Fischer +theme: metropolis +aspectratio: 169 +--- + +## \faIcon{chalkboard-teacher} Wiederholung + +::: {.columns align=center} +:::: {.column width=50%} +\Large In welcher Sprache wurden nochmal Webseiten geschrieben? +:::: + +:::: {.column width=50%} +\pause +![](img/html_human.png){.center height=90%} +:::: +::: + +## \faIcon{desktop} Wiederholung: HTML + +An welche HTML-Elemente (*tags* \faIcon{tag}) kannst du dich erinnern? + +### Mebis Quiz + +![](img/html_tags_mebis.png) diff --git a/Info/7/1/HTML/slides.md b/Info/7/1/HTML/slides.md index 220268b9..1c560779 100644 --- a/Info/7/1/HTML/slides.md +++ b/Info/7/1/HTML/slides.md @@ -19,7 +19,8 @@ header-includes: | \centering -[https://www.muhq.space/schule/klasse7](https://www.muhq.space/schule/klasse7) + +[https://paftown.ddns.net/klasse7]() ## \faIcon{desktop} Seitenquelltext ![](img/source_code.png){height=70%} 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 Binary files /dev/null and b/Info/7/1/Hypertext/img/rainer-pyro-index.png 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 Binary files /dev/null and b/Info/7/1/Hypertext/img/rainer.png 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: *\* `\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**. diff --git a/Info/7/1/README.md b/Info/7/1/README.md index a2a49f81..4cee5743 100644 --- a/Info/7/1/README.md +++ b/Info/7/1/README.md @@ -3,13 +3,12 @@ Für diesen Unterrichtsgang wird ein Mebis Kurs benötigt, in dem die SuS ihr digitales Heft als Hypertextstruktur in einem individuellen Wiki führen. -Um die Steckbriefe der SuS zu verlinken müssen sie auf die Wikis der anderen +Um die Steckbriefe der SuS zu verlinken, müssen sie auf die Wikis der anderen zugreifen können. In einem individuellen Wiki können die Seiten anderer nur angesehen werden, -wenn die Gruppen Einstellung auf *sichtbare Gruppen* gestellt ist. +wenn die Gruppen-Einstellung auf *sichtbare Gruppen* gestellt ist. Dazu bietet sich ein eigenes Steckbriefe-Wiki an. Die SuS müssen nicht extra in Gruppen eingeteilt werden sondern es reicht die Wiki Einstellung. Das macht das setzten des Links auch einfacher, da alle in der Selben Gruppe (0) sind und nur die *pageid* in der URL angepasst werden muss. - diff --git a/Info/7/1/Verweise/.gitignore b/Info/7/1/Verweise/.gitignore index 975c912e..2093f74a 100644 --- a/Info/7/1/Verweise/.gitignore +++ b/Info/7/1/Verweise/.gitignore @@ -1,2 +1,5 @@ slides-kompozer.pdf +slides-kompozer.pptx +slides-wiederholung.pdf +slides-wiederholung.pptx hefteintrag.png diff --git a/Info/7/1/Verweise/img/name-dropdown.png b/Info/7/1/Verweise/img/name-dropdown.png new file mode 100644 index 00000000..5708ad72 Binary files /dev/null and b/Info/7/1/Verweise/img/name-dropdown.png differ diff --git a/Info/7/1/Verweise/img/steckbrief-url.png b/Info/7/1/Verweise/img/steckbrief-url.png new file mode 100644 index 00000000..1509aca2 Binary files /dev/null and b/Info/7/1/Verweise/img/steckbrief-url.png differ diff --git a/Info/7/1/Verweise/slides-wiederholung.md b/Info/7/1/Verweise/slides-wiederholung.md new file mode 120000 index 00000000..d61dd5df --- /dev/null +++ b/Info/7/1/Verweise/slides-wiederholung.md @@ -0,0 +1 @@ +../HTML/slides-wiederholung.md \ No newline at end of file diff --git a/Info/7/1/Verweise/slides.md b/Info/7/1/Verweise/slides.md index 5d738190..6983fa1b 100644 --- a/Info/7/1/Verweise/slides.md +++ b/Info/7/1/Verweise/slides.md @@ -14,32 +14,15 @@ Du kannst dich schon anmelden und den Bildschirm ausschalten. -## Wiederholung +```{.include} +slides-wiederholung.md +``` -::: {.columns align=center} -:::: {.column width=50%} -In welcher Sprache wurden nochmal Webseiten geschrieben? -:::: - -:::: {.column width=50%} -\pause -![](img/html_human.png){.center height=90%} -:::: -::: - -## Wiederholung - HTML - -An welche HTML-Elemente (*tags* \faIcon{tag}) kannst du dich erinnern? - -### Mebis Quiz - -![](img/html_tags_mebis.png) - -## \faIcon{desktop} Arbeitsauftrag - 5 min +## \faIcon{desktop} Arbeitsauftrag: Steckbrief \hfill 5 min ::: {.columns align=center} :::: {.column width=50%} -Öffne deinen Steckbrief von letzter Stunde im ![](logos/wiki.svg) **Steckbriefe** Wiki in der \textit{Quellcode}-Ansicht. +Öffne deinen Steckbrief von letzter Stunde im ![](logos/wiki.svg) **Steckbriefe**-Wiki in der \textit{Quellcode}-Ansicht. :::: :::: {.column width=50%} @@ -63,7 +46,7 @@ Vergiss nicht deine Änderungen zu speichern. ![](img/edge_surf.png){.center width=80%} -## Verweis und Verweisziel \pause ("\textit{Links}") +## \faIcon{chalkboard-teacher} Verweis und Verweisziel \pause ("\textit{Links}") ::: columns :::: {.column width=40%} @@ -80,7 +63,7 @@ Das **Gymnasium München Riem** ist eine weiterführende Schule im Stadtviertel :::: ::: -## \faIcon{pencil-alt} Die Klasse VERWEIS +## \faIcon{lightbulb} Die Klasse VERWEIS \begin{center} \begin{tikzpicture}[font=\Large] @@ -124,6 +107,7 @@ Unter einem \textcolor{red}{Verweis} (Link) versteht man einen Hinweis auf ein a \pause Wo diese zu finden ist, muss in der \textcolor{red}{Zieladresse} angegeben werden. + + +## Hefteintrag - Bild einfügen + +Lade die Klassenkarte unter \link{https://bycs.link/cdYzqu} herunter. + +![](../HTML/img/editor.png) + +\begin{tikzpicture}[overlay, remember picture] +\node[draw=red, line width=1pt, minimum width=0.5cm, minimum height=0.5cm] at (5.52cm, 1.3cm) {}; +\end{tikzpicture} + +\vspace{-1cm} +Klicke auf das Bildsymbol und wähle das eben runtergeladene Bild aus. + +::: {.columns align=center} +:::: {.column width=70%} +![](img/add_image.png){.center height=60%} + +:::: + :::: {.column width=35%} ![](img/verweis.png){.center} :::: @@ -155,17 +164,24 @@ Klicke auf das Bildsymbol und gib die Adresse ins **URL**-Feld ein: \node[draw=red, line width=1pt, minimum width=1.25cm, minimum height=0.5cm] at (10.65cm, 1.3cm) {}; \end{tikzpicture} -Mit deinem \boldred{WYSIWIG} Editor kannst du Links einfügen. +Mit deinem \boldred{WYSIWIG}-Editor kannst du Links einfügen. ### Richtig programmieren In der _Quellcode_-Ansicht kannst du Verweise als `Beschreibung`{.html} anlegen. -## \faIcon{desktop} Arbeitsauftrag - 10min +## \faIcon{desktop} Arbeitsauftrag: Steckbriefe verlinken \hfill 10min - +1. Öffne das ![](logos/wiki.svg) **Steckbriefe-Wiki** +2. Suche in der *rechten* Auswahl die Steckbriefe deiner Sitznachbarn ![](img/name-dropdown.png){height=10%} +3. Kopiere die angezeigte **Adresse** aus der Adresszeile deines Browsers + ![](img/steckbrief-url.png){.center} +4. Verlinke \faIcon{link} in deinem Steckbrief die Namen deiner Sitznachbarn mit deren Steckbriefen. -Verlinke \faIcon{link} in deinem Steckbrief die Namen deiner Sitznachbarn mit deren Steckbriefen. +\begin{tikzpicture}[overlay, remember picture] +\node[draw=red, line width=0.75pt, minimum width=11cm, minimum height=0.6cm, anchor=west, xshift=3.7cm, yshift=4.1cm] at (current page.south west) {}; +\end{tikzpicture} -\underline{Für Schnelle:} +\vspace{-0.75cm} +\faIcon{earlybirds} \underline{Für Schnelle:} Verlinke zusätzlich deine Hobbys mit den Seiten deiner Lieblingsvereine oder dein Lieblingsessen mit einem Rezept aus dem Internet. -- cgit v1.2.3