Deutsch: Präsentation in HTML: "Eine Einführung in die Informatik".
Diese Präsentation ist komplett in Deutsch gehalten. Sie ist auf Teeanager ab dem 10. Lebensjahr ausgerichtet und soll ihnen den Spaß an der Informatik zeigen. Um die Hürden möglichst niedrig zu halten, ist der Inhalt Deutsch.
English: Presentation in HTML: "An introduction to computer science".
This presentation is completely in German. It is aimed at tea managers from the age of 10 and should show them the fun of computer science. To keep the hurdles as low as possible, the content is in German.
Der Inhalt dieser Präsentation ist für einen eintägigen Workshop mit Jugendlichen ab der 5. Klasse gedacht.
Dabei kann sicher nicht in die komplette Tiefe der Programmierung abgetaucht werden. Der Tag soll vielmehr den Spaß an der Informatik fördern und mit möglichst anschaulichen Mitteln zeigen, dass das gar nicht so kompliziert ist, wie viele sich das vorstellen.
Diese Präsentation ist Grundlage für den Girls' Day 2018 bei der Sybit GmbH.
-
BBC micro:bit: http://microbit.org/
Homepage zum BBC micro:bit (deutsch/englisch)
-
MakeCode für micro:bit: https://makecode.microbit.org/
Browserbasierte Entwicklungsumgebung für den BBC micro:bit (deutsch/engl.)
-
Awesome micro:bit: https://github.com/carlosperate/awesome-microbit
Liste von Interessanten Links zum micro:bit (engl.)
-
Code Kingdoms: https://www.microbit.co.uk/app/#create:tomwku
Alternative Entwicklungsumgebung, die grafisch, jedoch näher am Quellcode ist.
-
Einige Infokarten zu speziellen Themen: https://www.maplin.co.uk/microbit
Um die Präsentation selbst anzupassen und weiter zu entwicklen, sind folgende Voraussetzungen und Befehle notwendig:
Installaton von node.js
und npm
:
Danach im Hauptverzeichnis des Projekte folgenden Befehl in der Kommandozeile aufrufen:
npm install -g grunt-cli
npm install
Dadurch werden die notwendigen JavaScript-Tools heruntergeladen, die in der Datei packages.json
festgelegt sind.
Sind die unter "Voraussetzungen" aufgeführten Befehle einmal ausgeführt, kann nun die Entwicklung mit Live-Aktualisierung im Browser gestartet werden:
grunt
Wird kein Parameter angegeben, wird automatisch ein watch
und ein LiveReload
aktiv. Das heißt unter der Web-Adresse (http://localhost:3000) ist immer die aktuelle Vorschau zu sehen. Diese aktualisiert sich bei jeder Änderung automatisch.
- eigenes jQuery-Plugin zum automatischen Rendern der Quellcode-Blocks als SVGs (
js/jquery.makecode-blocks.js
) - CSS-Style Klassen
responsive
für Bilder: diese werden dann in maximaler Größe in dem Step angezeigt.vignette
für Bilder: erzeugt abgedunkelten Rand (Vignette) um ein Bild.ìmg-title
für Text: erzeugt ein halbtransparentes Overlay über responsiven (vollflächigen) Bildern.img-source
erzeugt eine Quellenangabe am unteren Rand des Steps.
- jQuery, MIT license
- impress.js, MIT License
- lazyload, MIT License
- EMOJI CSS, MIT License
Verbesserungen an der Präsentation sind als Pull-Request herzlich willkommen.
- Vielen Dank an meine Arbeitgeber Sybit GmbH, dass ich als Talent Scout junge Menschen für die Informatik begeistern darf!
- Herzlichen Dank an die BBC, die mit dem BBC micro:bit eine großartige Plattform für das Vermitteln der Programmierung initiiert hat.
- Dankeschön an Microsoft, die mit MakeCode für micro:bit eine großartige Online IDE auf Blocks-basis zur Verfügung stellt.
- Klasse, dass ich da auch bei der Übersetzung ins Deutsche mithelfen konnte!
- Großartig ist auch der Support des Teams bei der Erstellung dieses Projektes (z.B. hier)
- impress.js für die großartige Grundlage zur Erstellung von Präsentationen.
- Herzlichen Dank all denen, die so schöne Fotos zur freien Verfügung bereitstellen (z.B. auf Pixabay )!