Deutsch: HTML-basierte Präsentation: "Eine Einführung in die Informatik".
Diese Präsentation ist komplett in Deutsch gehalten. Sie ist auf Teeanager (Mädchen) 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 auf Deutsch.
English: Presentation in HTML: "An introduction to computer science".
This presentation is completely in German. It is aimed teenagers 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 Mädchen 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 war erstmals Grundlage für den Girls' Day 2019 bei der Sybit GmbH.
Für den Workshop haben wir das micro:bit Cheat Sheet (Word) / micro:bit Cheat Sheet (pdf) mit den wichtigsten Block-Elementen erstellt.
-
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 entwickeln, 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-clinpm install
Dadurch werden die notwendigen JavaScript-Bibliotheken 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
_
responsivefür Bilder: diese werden dann in maximaler Größe in dem Step angezeigt. _vignettefür Bilder: erzeugt abgedunkelten Rand (Vignette) um ein Bild. _ìmg-titlefür Text: erzeugt ein halbtransparentes Overlay über responsiven (vollflächigen) Bildern. _img-sourceerzeugt eine Quellenangabe am unteren Rand des Steps.
- jQuery, MIT license
- impress.js, MIT License
- lazyload, MIT License
- EMOJI CSS, MIT License
Verbesserungen an dem Workshop 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 )!