Skip to content

Latest commit

 

History

History
113 lines (67 loc) · 5.73 KB

README.md

File metadata and controls

113 lines (67 loc) · 5.73 KB
Raw

Build Status GitHub license JavaScript Style Guide

Twitter

Einführung in die Informatik

Deutsch: HTML-basierte Präsentation: "Eine Einführung in die Informatik".

▶ Präsentation starten

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.

Workshop

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.

micro:bit Cheat Sheet

Für den Workshop haben wir das micro:bit Cheat Sheet (Word) / micro:bit Cheat Sheet (pdf) mit den wichtigsten Block-Elementen erstellt.

Interessante Links

Entwicklung

Um die Präsentation selbst anzupassen und weiter zu entwickeln, sind folgende Voraussetzungen und Befehle notwendig:

Voraussetzungen

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-Bibliotheken heruntergeladen, die in der Datei packages.json festgelegt sind.

Entwickeln mit Vorschau

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.

Besondere Features/Erweiterungen

  • 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.

Verwendete Bibliotheken

Pull-Requests sind willkommen

Verbesserungen an dem Workshop sind als Pull-Request herzlich willkommen.

Danksagung

  • 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 )!

Lizenz

MIT License

⬆ nach oben