yourschool
HTML&CSS: Meine erste eigene Website
Python Gaming (Grundlagen): Code dein Spiel
Scratch: Pong
Scratch: Flappy Bird
Python IT-Security: Verschlüsselung
Bash IT-Security: Verschlüsselung
ALT: Meine erste Website in HTML&CSS
yourschoolPLUS
Classic

ALT: Meine erste Website in HTML&CSS

ACHTUNG: Dieses Konzept wurde erneuert --> hier entlang.

Genereller Kursablauf

Unsere Kurse laufen nach dem Schema ab, das auf den folgenden Bildern dargestellt ist. Da wir mit Schulen arbeiten und es in Schulen trotz guter Absprachen im Vorfeld am Kurstag zu unvorhergesehenen Schwierigkeiten kommen kann, kann es in den Kursen immer mal Abweichungen vom Ablauf geben. Dies hängt meistens von den folgenden Faktoren ab:

  1. Anzahl der Pausen: Das hängt von der Schule ab, dies teilt die Team Inspiress oder der Team Inspirer am Anfang des Kurses mit.
  2. Technik der Schule: Leider haben wir immer wieder technische Probleme auf Seiten der Schulen. Daher wird häufig der Ablaufplan "durchgerüttelt".
  3. Vorwissen der Schüler*innen: Dies versuchen wir über das Kahoot und das "Alle, die"-Spiel zu diagnostizieren, um grob einzuschätzen, wie viel Erfahrungen die Schüler*innen haben.
  4. Engagement und Rolle der Lehrkraft: Je engagierter die Lehrkraft im Klassenraum, desto erfolgreicher der Kurs.

Programmieren 1 "WE INSPIRE"
Hier geht es darum, dass ihr als Inspiress oder Inspirer in das Programmieren einführt und die Basics erklärt.

Programmieren 2 "INSPIRE ME"
Im zweiten Programmierteil sind die Rollen sozusagen vertauscht. Denn jetzt kommt der proaktive Teil aus Sicht der Schülerinnen und Schüler. Nun sind diese an der Reihe und inspirieren sozusagen dich als Inspir*ess! Du hilfst, begeisterst und inspirierst aber natürlich entsprechen auf deine Art und Weise weiter.

Kursziele und Hinweise

Kursziele

  • Verständnis schaffen: Wo spielt Programmieren im Alltag eine Rolle? Welches Mindset verkörpern Programmier*innen?
  • Selbst probieren: Einblicke ins praktische Programmieren durch Programmieren eines Spiels oder einer Webseite geben
  • Fragen stellen: Berufsorientierung mit euch als Expert*innen aus der IT-Branche

Drei letzte Tipps

  1. Denkt immer daran: Uns geht es um die Haltung "WE INSPIRE". Wie das bei euch konkret aussieht, ist euch überlassen. Haben die Teilnehmenden Lust, mit euch etwas länger über Roboter zu reden? Macht das gerne.
  2. Lasst die Teilnehmenden auch bewusst Fehler machen und helft dabei herauszufinden, wieso ihr Ansatz nicht funktioniert.
  3. Dieses Konzept ist unser Vorschlag, wie man Kinder und Jugendliche begeistern könnte. Seht es also als groben Leitfaden und weniger als festen Lehrplan, der von oben nach unten durchgearbeitet werden muss.

Feedback und Fragen immer an kurskonzepte@hacker-school.de oder einfach hier links neben den Text klicken.



Was passiert heute?

Heute erstellen wir uns eine Website mit möglichst einfachen Mitteln. Ergebnisse, die aus diesem Kurs entstehen können, könnt ihr euch hier anschauen:
https://tyler-3.schoolhacker.repl.co/

Zeit: ~ 3h + 30 min Pause
Ort: Kleingruppe
Verantwortlich: Inspirer

Hallo Welt!

  • Teilt euren Bildschirm und erstellt den Grundaufbau eures HTML-Dokumentes.

  • Geht auf jeden Fall auf die absoluten Basics ein:

    • Was machen die Tags? -> Haben die Teilnehmenden Ideen, kommen sie vielleicht sogar von selbst drauf?
    • Wieso wird das so komisch eingerückt?
  • Lasst die Teilnehmenden gerne auch mit anderen Texten herumspielen. Lasst sie es vor allem selbst einmal schreiben, auch wenn das vielleicht ein bisschen dauern wird.

Lernziele

  • Grundverständnis von Tags
  • Was <head>, <body> und <title> machen

Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html>
    <head>
        <title>Ohoo, ein Titel.</title>
    </head>
    <body>
        <h1>Hallo Welt!</h1>
        <p>Oh, schön hier.</p>
    </body>
</html>

tags, tags, tags

Wie ja schon die Überschrift andeutet, werden wir hier versuchen, sie mit Tags vertraut zu machen. Erweitert euer Beispiel durch eine (zweite) Überschrift und lasst sie das bei sich reproduzieren. Macht danach das Gleiche für Absätze, Links, und Listen. Achtet darauf, das Tempo an die Gruppe anzupassen.

  • <h1></h1>..<h6></h6>
  • <p>
  • <a href="https://mozilla.org">Hier!<a/>
  • <ol>, <ul>, und <li>

Lernziel(e)

  • Mit eben diesen Elementen sinnvoll umgehen können

Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <title>Ohoo, ein Titel.</title>
    </head>
    <body>
        <p>Ein Echo?</p>
        <h1>Hallo</h1>
        <h2>Hallo</h2>
        <h3>Hallo</h3>
        <h4>Hallo</h4>
        <h1>Welt!</h1>
        <h2>Welt!</h2>
        <h3>Welt!</h3>
        <h4>Welt!</h4>
        <p>Anscheinend. Und was ist mit dieser Seite? <a href="https://de.wikipedia.org/wiki/Website">hier</a>?</p>
        <ol>
            <li>Hm.</li>
            <li>Die</li>
            <li>Nicht.</li>
        </ol>
    </body>
</html>

Der Inspektor

Der Inspektor ist das Tool, das man in der Website-Entwicklung sehr oft benutzt. Mit ihm kann man sich bestehende Website ansehen und temporär ihren Code verändern.

Mit Rechtsklick -> Untersuchen oder F12 kommt ihr zum Inspektor. In Safari braucht ihr ein bisschen mehr, siehe hier.

Artikel im Internet bieten sich zum Beispiel sehr gut an (witzige Headlines), aber auch Seiten, auf denen man Dinge kaufen kann (kostenlose Einkäufe? - oder sehr teure?).
Ganz besonders wichtig bleibt natürlich, dass die Teilnehmenden verstehen, was da passiert - nicht die Website selbst wird geändert, sondern nur ihre lokale Kopie davon.
Ideen:

oder schon in eine erste Pause? - schaut auf die Stimmung, es könnte sich lohnen.

Style, Teil 1

Soo, bis jetzt wurde am Inhalt einer Website herumgespielt - nun wenden wir uns dem Style der Website zu.
Das machen wir (zunächst) über Attribute im HTML. Ein Attribut haben die Teilnehmenden gerade schon gesehen, und zwar das hypertext reference-Attribut von <a>. Hier führen wir nun das style-Attribut ein, das man an HTML-Elemente anfügen kann.
Das geht so:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html>
    <head>
        <title>Ohoo, ein Titel.</title>
    </head>
    <body>
        <h1 style="color: blue;">Hallo Welt!</h1>
        <p style="font-size: 10px">Oh, schön hier. Aber winzig.</p>
    </body>
</html>

Wahrscheinlich geht ihr am besten Schritt für Schritt, und mit folgenden (einfachen) CSS-Eigenschaften, vor:

  • font-size, color, font-weight
  • background-color
  • width, height

Und, wie immer: Weicht gerne von unserem Konzept ab, und lasst die Teilnehmenden damit ein bisschen herumspielen :)

Style, Teil 2 - Stylesheets

Jetzt werden wir professionell - zeigt den Kids, wie sie die Style-Attribute auslagern können, und was das bringt.

Lernziele

  • verstehen, was die Idee hinter einem Stylesheet ist (Auslagerung aller Styles + Abstraktion)
  • verstehen, wie ein style.css funktioniert - und wie es eingebunden wird.
  • ids (#) und Klassen (.) verstehen

Damit all das funktioniert, müsst ihr zunächst ein Stylesheet im <head> einbinden. Das geht so:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!DOCTYPE html>
<html>
    <head>
        <title>Ohoo, ein Titel.</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Hallo Welt!</h1>
        <p>Und hier ein Bild:</p>
        <img src="Bild.jpg"/>
        <p>Oh, schön hier.</p>
    </body>
</html>

Und jetzt kommt auch die style.css. Wenn der Link so aussieht, sollte sie in den gleichen Ordner kommen - ihr erstellt also in repl auf gleicher Ebene eine style.css mit folgendem (oder ähnlichem) Inhalt und lasst die Teilnehmenden raten, was passiert/passieren könnte.

1
2
3
4
5
6
7
8
9
p {
    background: lightblue;
}
.myClass {
    background: darkred;
}
#ganzSpeziell {
    background: limegreen;
}

Dann allerdings passiert erst einmal noch wenig. Denn ihr habt ja ganz vergessen, die ID und die Klasse auch im HTML hinzuzufügen. Macht gerne auch "absichtlich" diesen Fehler (oder macht auf eine andere Art und Weise deutlich, dass das wichtig ist), denn so können die Teilnehmenden das besser wiedererkennen, und es schneller selbstständig hinbekommen.
So könnte es nach einer Zuordnung von HTML-Tags zu CSS-Eigenschaften aussehen:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html>
    <head>
        <title>Ohoo, ein Titel.</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1 class="myClass">Hallo Welt!</h1>
        <p>Und hier ein Bild:</p>
        <img src="Bild.jpg"/>
        <p class="myClass">Oh, schön hier.</p>
        <p id="ganzSpeziell">Oder?</p>
    </body>
</html>

Bilder & Videos

Und jetzt noch das, womit unsere Websites so richtig zum Leben erwachen können: Bilder (und gleich auch noch Videos).
Die können so eingebunden werden:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html>
    <head>
        <title>Ohoo, ein Titel.</title>
    </head>
    <body>
        <h1>Hallo Welt!</h1>
        <p>Und hier ein Bild:</p>
        <img src="Bild.jpg"/>
        <p>Oh, schön hier.</p>
    </body>
</html>

Damit das auch klappt, müsst ihr natürlich das Bild mit genau diesem Namen in der gleichen Ebene des Dateisystems (in repl.it) ablegen.
Hier wichtig zu beachten: <img> ist einer der wenigen tags, der "sich selbst schließt", also bei dem alles innnerhalb der spitzen Klammern abspielt.

(Youtube-)Videos funktionieren folgendermaßen:
Ihr geht bei Youtube auf Rechtsklick auf das Video > Einbettungscode kopieren und dann fügt ihr ihn an der gewollten Stelle ein :)

Die erste eigene Website

Und jetzt kommt ...(Trommelwirbel)... das Endprojekt. Versucht, ab hier die Teilnehmenden so frei wie möglich atbeiten zu lassen, und seid mehr ein Coach, der ihre Fragen beantwortet, sie aber nicht allzu sehr beeinflusst. Normalerweise kommen nämlich so die coolsten Ideen zum Vorschein. Eine gute Referenz für HTML und CSS sind die W3Schools-HowTos - ebenso gibt es fertige Templates.
Ebenso gibt es auch einige frei zugängliche Cheat Sheets, so wie das hier. Dort findet ihr ebenso ein Template.

Hier ist vor allem wichtig, dass die Teilnehmenden merken, dass sie kreativ werden können (und dürfen) - dann kommen oft richtig gute Sachen dabei raus.

Haben eure Teilnehmenden wirklich gar keine Ideen? Oder hat ein*e Teilnehmer*in schon mehr Erfahrung? Dann können sie sehr gerne hiermit herumspielen, und vielleicht die Hintergrundbilder, die Geschichte, oder sogar die Animationen verändern:

Das Projekt hinter der Website könnt ihr euch als Zip herunterladen oder auf euren eigenen Repl.it-Account kopieren.

Hier ist es sinnvoll (auch, um die Website zu verstehen), einmal auf die sehr gute Dokumentation von Mozilla zu verweisen.

Inklusive Guides und weiteren Ressourcen auf anderen Seiten, auf denen man sehr viel lernen kann :)

Und das wars! :)

Berufsorientierung und Feedback

~30 Minuten

~5 min
  • Wenn ihr eurer Gruppe am Ende noch Feedback geben wollt, dann nehmt euch gerne jetzt Zeit dafür.
  • Fragt nach, ob jemand (in der Abschlussrunde im großen Plenum) vorstellen möchte, was ihr so gemacht habt.
~25 min
  • Die Teilnehmenden, die möchten, stellen ihre Projekte vor
  • Die Berufsorientierung wird von der Team Inspiress oder dem Team Inspirer eingeleitet
  • Hier erzählt ihr in einem Gespräch mit dem Team Inspirer oder der Team Inspiress davon, wie ihr in die IT gekommen seid und was euch daran Spaß macht.
  • In unserem Inspirer Handbuch findet ihr noch weitere Tipps für eine spannende Berufsorientierung
  • (Wenn erwünscht, bekommt der*die Lehrer*in kurz das Wort)
  • Feedbacklinks werden von den Team-Inspirern geteilt