path: root/Info/7/1/Intro/slides.md

---
author: Florian Fischer
theme: metropolis
aspectratio: 169
header-includes: |
    \let\tightlist\relax
---

## {.standout}

\begin{center}
Willkommen in der 7. Klasse!

{\Huge \faIcon{desktop}}
\end{center}

## \faIcon{question}  Vorstellung

Suche dir eine oder mehrere Fragen aus.
Stelle dich kurz vor, indem du deinen Namen nennst und die Frage[n] beantwortest.

`\begin{tcolorbox}[]\Large`{=latex}

* Welche digitalen Geräte benutzt du im Alltag?
* Wie viel Zeit verbringst du täglich mit digitalen Medien?
* Was hast du dich über Computern / Informatik schon immer gefragt?
* Was war dein merkwürdigstes Erlebnis online?
* Ein Fun-Fact über dich.

`\end{tcolorbox}`{=latex}

## \faIcon{chalkboard} Verhalten im Computerraum

\centering{\large\textbf{Allgemeine Regeln}}

`\begin{tcolorbox}[colframe=red]`{=latex}

1. Nicht essen oder trinken
2. Computer erst nach Aufforderung starten
3. Sorgsam mit den Computern umgehen
4. Auf Lehrkraft / Mitschüler*innen hören

`\end{tcolorbox}`{=latex}

### Klassenregeln

Eure eigenen Regeln entwerfen wir, wenn ihr schon etwas Informatik hattet.

## Arbeitsauftrag: Perfekter Informatikunterricht

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

* Das sind meine Ziele für den Informatik-Unterricht
    * \only<1>{Das muss ich dafür machen?}\only<2->{\boldred{Das müssen wir 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

## Organisatorisches - VORSCHLAG

### Material

* Hefteinträge \boldred{am Computer} in deinem **persönlichen Wikipedia**
* Alternativ: Papier Ordner, Schnellhefter, (Heft)
* Buch (Mitbringen, wenn angekündigt)
\pause

### Noten

* Unterrichtsbeiträge
* Projekt Note
* (Kleiner angekündigter Leistungsnachweis)
* (schriftliche Abfragen)

## 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
::::
:::

## Informatik Pokal der Lernhäuser

::: {.columns align=center}
:::: {.column width=30%}
\vspace{0.2cm}
![](img/pokal.png){.center}
::::

:::: {.column width=70%}
* Wettbewerb der Lernhäuser
* Frei gestaltbares Klassen-Logo
* Jede Klasse verdient oder verliert Punkte
* Vergleichbare Punktestände `\\[0.2cm]`{=latex}
![](img/punktestand.png){.center}
::::
:::

## {.standout}

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

## 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)
* Anmeldung: [**login.bwinf.de**](https://login.bwinf.de)
::::

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

## Grober Fahrplan

\large

* **Vernetzte Informationsstrukturen** `{ \Large \faIcon{link} }`{=latex}
* **Chancen und Risiken digitaler Kommunikation** `{ \Large \faIcon{envelope-open-text} }`{=latex}
* **Ablaufe und Algorithmen** `{ \Large \faIcon{code-branch} }`{=latex}
* **Projekt** \Large `{ \Large \faIcon{rainbow} }`{=latex}

## 

\centering
\includegraphics[height=9cm]{img/internet.jpg}

## 

::: {.columns align=center}
:::: {.column width=50% }
\centering
![](img/question_mark.png){ width=4cm }

\Large Was ist das Internet überhaupt?
::::

:::: {.column width=50%}
![](img/internet.jpg)
::::
:::

## 

::: {.columns align=center}
:::: {.column width=50%}
\centering
![](img/question_mark.png){ width=4cm }

\Large Wozu wird das Internet benutzt?\phantom{p}
::::

:::: {.column width=50%}
![](img/internet.jpg)
::::
:::

## {.standout}

Du darfst deinen Computer starten und dich anmelden.

Melde dich danach auch bei Mebis an.

**[https://lernplattform.bycs.de](https://lernplattform.bycs.de)**

## Mebis Umfrage

![](img/mootimeter.png)


## \faIcon{desktop} Arbeitsauftrag: Webseiten \hfill 5 min
\large
### \Large Wer sind Rainer und Pyro?

Mehr über die beiden erfährst du auf der Homepage von Rainer und der Homepage von Pyro.

Rufe dazu die Webseite **[https://schule.muhq.space/klasse7](https://schule.muhq.space/klasse7)** auf.

## Erster Hefteintrag

Hefteinträge sind farblich hervorgehoben und dem \faIcon{brain} Symbol markiert.

\pause

\vspace{0.5cm}

::: {.columns align=center}
:::: {.column width=50%}
Öffne in Mebis dein \boldred{Netz des Wissens}.
::::

:::: {.column width=50%}
![](img/mebis_wiki.png){.center height=2cm}
::::
:::

\pause

\vspace{0.5cm}

::: {.columns align=center}
:::: {.column width=50%}
\faIcon{desktop} Lies den Erklärtext der *über* der Startseite deines Wikis steht.  
\vspace{0.25cm}

*Bearbeite* die Seite **Zentrum** und ersetze das Wort **Name** durch deinen eigenen Namen.
::::

:::: {.column width=50%}
![](img/wiki_edit.png){.center height=2cm}
::::
:::

## Erster Hefteintrag

1. Ergänze unter **Vernetzte Datenstrukturen** hinter dem Punkt: `[[HTML-Dokumente]]`  
   ![](img/first-subpage.png){.center height=20%}

   Eckige Klammern schreibt man mit \colorbox{gray}{\texttt{Alt Gr + 8}} und \colorbox{gray}{\texttt{Alt Gr + 9}}.

2. **Speichere** deine Änderung.
3. Klicke auf den neu entstandenen Link, um zu der Seite **HTML-Dokumente** zu gelangen.

## \faIcon{brain} Hefteintrag {.standout}

\pause
\textbf{\huge 1.1 HTML-Dokumente}

\Large
\pause
\textcolor{red}{HTML} (*H*ypertext *M*arkup *L*anguage) ist eine Sprache zur Dokumentbeschreibung.

\pause
HTML-Dokumente können mit HTML-\textcolor{red}{Editoren} erstellt und verändert werden.

\pause
Zum Betrachten von HTML-Dokumenten verwendet man \textcolor{red}{Browser}.

## \faIcon{desktop} Arbeitsauftrag: Erste Webseite \hfill 10 min

::: {.columns align=center}
:::: {.column width=55%}
1. Öffne ein Textverarbeitungsprogramm (**Writer** oder **Word**). 
2. Erstelle eine einfache Seite (wie das Beispiel)
3. Speichere sie anschließend unter dem Namen **Homepage.html**  
   (\boldred{WICHTIG:} in Word \textit{"Webseite in einer Datei"}; in Writer \textit{"HTML-Dokument"}).  
   ![](img/word-html-export.png)
::::

:::: {.column width=45%}
\vspace{-0.2cm}
![](img/homepage.jpg){.center}
::::
:::

## \faIcon{desktop} Arbeitsauftrag: Vergleich \hfill 15 min
\large\let\tightlist\relax
* Öffne nun die Datei `Homepage.html` auch mit einem **Browser** (Doppelklick auf die Datei).  
  Gibt es Unterschiede zwischen den Darstellungen im Textverarbeitungsprogramm und im Browser?
* Stelle im Textverarbeitungsprogramm und im Browser das Fenster so schmal wie möglich ein.  
  **Was passiert?**

## \faIcon{desktop} Arbeitsauftrag: Steckbrief \hfill 15 min

>- Klicke auf das Steckbriefe Wiki im Mebis Kurs.
>- Erzeuge eine neue Seite *Ich*.
>- Gestalte deinen ganz persönlichen Steckbrief.

\pause

Dieser sollte mindestens enthalten:

`\begin{tcolorbox}[]`{=latex}

* Deinen Namen,
* Deine Hobbys,
* Dein Lieblingsessen und
* Informationen über deinen Banknachbarn

\begin{tcolorbox}[title=Tipp{\large !}, colframe=orange]
Erwähne nichts, das andere nicht erfahren sollen.
\end{tcolorbox}

`\end{tcolorbox}`{=latex}