path: root/Info/11/MUG_SWG_SG/1/Intro/slides.md

---
author: Florian Fischer
theme: metropolis
aspectratio: 169
header-includes: |
    \usepackage{tikz}
    \usetikzlibrary{calc}
    \usetikzlibrary{positioning}
    \usepackage{fontawesome5}
    <!-- \let\tightlist\relax -->
---

## {.standout}

\centering
Willkommen in der 11. Klasse

\faIcon{desktop} Startet schon mal eure Rechner und meldet euch an

## Was erwartet uns dieses Jahr?

\centering
\begin{tikzpicture}[scale=1.5]
\node[circle, fill=black, minimum size=0.1cm] at (1cm, 0) (g) {};
\node[below=of g] {\faIcon{code} Algorithmik};
\draw[] (0, 0) -- (g);
\node[circle, fill=black, minimum size=0.1cm] at (3cm, 0) (cv) {};
\node[below=of cv, align=center] {\faIcon{key} Kodierung \& \\ Verschlüsselung};
\draw[] (g) -- (cv);
\node[circle, fill=black, minimum size=0.1cm] at (5cm, 0) (i) {};
\draw[] (cv) -- (i);
\node[below=of i, align=center] {\faIcon{network-wired} Internet};
\draw[-Latex] (i) -- (8cm, 0);
\node[circle, fill=black, minimum size=0.1cm] at (7cm, 0) (ki) {};
\node[below=of ki, align=center] {\faIcon{brain} KI};
\end{tikzpicture}

## Mebis Umfrage

\large
**[https://lernplattform.bycs.de](https://lernplattform.bycs.de)**
\vspace{1cm}

![](img/mootimeter.png)

## Organisatorisches - VORSCHLAG

**Name**: Herr Fischer

### Material

* Tablet, (Papier, Order/Schnellhefter)
* [Buch (falls angekündigt)]

### \faIcon{pencil-alt} Noten pro Halbjahr

* 1 Kurzarbeit
* (angekündigter kleiner Leistungsnachweis)

### \faIcon{comment} Noten

* Unterrichtsbeiträge (aus $\approx$ 3 Beobachtungen)
* (Schriftliche Abfragen)

## Organisatorisches - Arbeitsauftrag

**5 min** - \faIcon{pencil-alt} Notiere deine Gedanken zu den folgenden Punkten:

* Das sind meine Ziele für den Informatik-Unterricht
    * Das muss ich dafür machen?
    * \only<1>{So sollte der Unterricht gestaltet sein?}\only<2->{\boldred{So sollte der Unterricht gestaltet sein?}}
    * \only<1>{Das wünsche ich mir von Herr Fischer?}\only<2->{\boldred{Das wünsche ich mir von Herr Fischer?}}

\pause

**5min** - \faIcon{hands-helping} Tauscht euch über die letzten beiden Punkte aus

\pause

\faIcon{chalkboard} Sammelt eure Vorstellungen für einen gelungenen Informatik-Unterricht

## Pixelflut 25/26

::: {.columns align=center}
:::: {.column width=50%}
\vspace{0.2cm}
![](https://i.redd.it/agcbmqgjn14z.png){.center}
::::

:::: {.column width=50%}
* Pro Doppelstunde 0-3 Pixel anmalen
* 1014 Pixel insgesamt
::::
:::

## Wettbewerbe Informatik

### Jugendwettbewerb \hfill ![](logos/bwinf_bw.png){ width=2cm }

\vspace{1cm}

::: columns
:::: {.column width=55%}
* Wer: Alle Schüler*innen
* Webseite: [**bwinf.de/bundeswettbewerb**](https://bwinf.de/bundeswettbewerb)
* Einsendeschluss: Zweite Novemberhälfte
* Anmeldung: [**login.bwinf.de**](https://login.bwinf.de)
::::

:::: {.column width=45%}
![](img/bwinf_bw_qrcode_a.png){ width=4cm }
::::
:::

## {.standout}

\begin{center}
\Huge Fragen?
\end{center}

## Hilfe müssen wir programmieren lernen?!

\centering
```java
class Rekursion {
	public static void main(String argv[]) {
		get(0);
	}

	public static void get(int x) {
		if (x == 6)
			System.out.println("Code:");
		if (x < 6)
			get(x+=2);
		System.out.println(x);
	}
}
```

## Ja! Visuelles Programmieren

::: columns
:::: {.column width=50%}
**Ja!** \pause Programmieren mit Snap! von Berkely
\vspace{1cm}

\centering
![](logos/snap!.png){ width=4cm }
::::

:::: {.column width=50%}
\pause
![](img/sample.png){ height=4cm }
::::
:::

\vspace{0.5cm}
\pause
`Snap!` bietet eine Online Entwicklungsumgebung:  
[https://snap.berkeley.edu/snap/snap.html](https://snap.berkeley.edu/snap/snap.html)

## Zuerst fünf Schritte zurück.

Was bedeutet programmieren?

\pause

Was ist ein Algorithmus?

## \faIcon{comment} Arbeitsauftrag

Beschreibe verbal das Vorgehen einen möglichst guten Papierfliger zu bauen.

## Begriffe

\begin{merke}
\textbf{\large Anweisung}

Beschreibung eines einzelnen Arbeitsschrittes
\end{merke}


\pause

### Beispiele {.example}

::: columns
:::: {.column width=70%}
\phantom{foo} <!-- fix theme issue with broken box title -->

* "Halte dein Blatt im Querformat" \pause
* "Bohre mit dem rechten Zeigefinger im linken Nasenloch"
::::

:::: {.column width=40%}
\pause
![](img/Tsuru_single_step.png)
::::
:::

## Begriffe

\begin{merke}
\textbf{\large Anweisung}

Beschreibung eines einzelnen Arbeitsschrittes

\textbf{\large Ablauf}

Abfolge von Anweisungen
\end{merke}


\pause

### Beispiel 1 {.example}

    1. Halte dein Blatt im Querformat
    2. Falte die beiden langen Seiten aufeinander 
    3. ...

## Ablauf - Beispiel 2

\centering
![](img/Tsuru.png){height=95%}

## Kriterien
### Richtigkeit

\pause
- Die Anweisungen müssen richtig sein
- Die Anweisungen müssen in der richtigen Reihenfolge stehen

\pause

### Vollständigkeit

\pause
- Alle Schritte müssen aufgeführt sein
- Jeder Fall muss abgedeckt sein

\pause

### Ausführbarkeit

\pause
- Jede Anweisung muss möglich sein


## Algorithmus

`\begin{merke}`{=latex}

\textbf{\large Algorithmus}
Ein \textbf{Algorithmus} ist eine Beschreibung eines Ablaufs mit folgenden Eigenschaften:

\pause

- besteht aus endlich vielen **Anweisungen**
- ist **eindeutig** (*selbst ein Computer kann sie verstehen*)
- ist **ausführbar**

`\end{merke}`{=latex}


## Los gehts!

\centering
![](img/snap_qrcode.png){height=90%}

\vspace{-1cm}
[https://snap.berkeley.edu/snap/snap.html](https://snap.berkeley.edu/snap/snap.html)

## Überblick der Entwicklungsumgebung

\centering
![](img/IDE_regions.png){height=90%}

## Programme in `Snap!`

\begin{tikzpicture}[font=\large]
\node {\includegraphics[height=0.6\textheight, keepaspectratio]{img/sample.png}};
\only<1> {
  \node[draw, red, line width=1pt, rectangle, minimum width=5.4cm, minimum height=5cm] (scriptb) {};
  \node[right=of scriptb] {Script};
}

\only<2-> {
  \node[draw, red, line width=1pt, rectangle, minimum width=4.2cm, minimum height=1.5cm] (headb) at (-0.6cm, 1.75cm) {};
}

\only<2,4-> {
  \node[right=of headb] {Hat block\phantom{pP}};
}
\only<3> {
  \node[right=of headb, align=left, text width=6cm] {Hat block - Kontrolliert \textbf{wann} ein \newline \textit{Script} ausgeführt wird};
}

\only<-3> {
  %\node[draw, bg, line width=1pt, rectangle, minimum width=5cm, minimum height=3.5cm] (commandsb) at (-0.1cm, -1cm) {};
}
\only<4-> {
  \node[draw, red, line width=1pt, rectangle, minimum width=5.2cm, minimum height=3.5cm] (commandsb) at (-0.1cm, -0.8cm) {};
}
\only<4> {
  \node[right=of commandsb] {Command blocks\phantom{pP}};
}
\only<5-> {
  \node[right=of commandsb, align=left, text width=6cm] {Command blocks - \textit{Anweisungen} des \textit{Algorithmus}};
}
\end{tikzpicture}

## Erstellen von Programmen

### Blöcke verknüpfen

Blöcke werden per *Drag and Drop* ineinander gesteckt werden.

Der Platz an dem ein neuer Block platziert wird, ist durch eine weiße Linie oder einen orangen Kasten markiert.

::: columns
:::: {.column width=33%}
![](img/snap_between.png)
::::
:::: {.column width=33%}
![](img/snap_around.png)
::::
:::: {.column width=33%}
![](img/snap_around_all.png)
::::
:::


## Arbeitsauftrag

::: {.columns align=center}
:::: {.column width=50%}
1. Erstelle das Beispiel Script und führe es aus.
2. Erstelle ein weiteres Script das alle Striche löscht wenn du die Leertaste drückst.
3. Erstelle ein Script das eine geometrische Figur deine Wahl zeichnet.
4. Erstelle ein Script das regelmäßiges Sechseck zeichnet.
::::
:::: {.column width=50%}
![](img/sample.png)
::::
:::

## Speichern von Programmen

::: {.columns align=center}
:::: {.column width=50%}
`Snap!`-Programme können als XML-Dateien exportiert und wieder importiert werden.
::::
:::: {.column width=30%}
\vspace{0.5cm}
![](img/snap_file.png){height=90%}
::::
:::

## Erstellen von Programmen - Blockeingaben

::: columns
:::: {.column width=50%}
Benötigt ein Block zusätzliche Informationen können diese in den leeren Stellen des Blocks platziert werden.

![](img/reporter_snap.png)

Runde Blöcke heißen \textit{Reporter} und sie führen keine Anweisung aus sondern liefern (\textit{reporten}) nur einen bestimmten Wert.
::::
:::: {.column width=50%}
### Positionsreporter {.example}
\centering
![](img/pos_reporter_script.png)
::::
:::

## \faIcon{desktop} Arbeitsauftrag - 20 min

1. Erweitere dein geometrisches Figuren Script so, dass nach jeder Bewegung die   
   **X** und **Y** Position ausgegeben wird.
2. Schaffst du es die Position auf ganze Zahlen gerundet ausgeben zulassen?
3. Lass deine Initialen zeichnen.

### \faIcon{earlybirds} Für Schnelle:

Entwerfe zuerst auf Papier und dann mit Snap! ein Logo für dich aus symmetrischen Figuren.