Hackschule Workspace

Der Hackschule Workspace ist eine Entwicklungsumgebung im Browser: Visual Studio Code mit Linux-Terminal, Git, vielen Programmiersprachen und eigenen Datenbanken. Das sind die Werkzeuge, mit denen auch Software entwickelt wird, und du musst nichts installieren. Deine Dateien bleiben gespeichert, in der Schule wie zu Hause. Die Projekte und Labore unten führen dich in Themen von Grafik und Spielen bis zu Netzen und Datenbanken ein. Probier dabei ruhig aus, was passiert, wenn du etwas änderst: Mit Checkpoints kommst du jederzeit zu einem früheren Stand zurück.

Der Workspace: oben im Editor ein kurzes Programm, das nach dem Namen fragt, unten im Terminal sein Lauf: Hallo, Ada!

Erste Schritte

Lerne den Hackschule Workspace kennen und finde dich in der Entwicklungsumgebung zurecht.

Grafik & Spiele

Erzeuge Bilder, Animationen, Spiele und räumliche Szenen mit selbst geschriebenem Code. Dabei beschäftigst du dich mit Pixeln, Farben, Formen, Koordinaten und 3D-Geometrie.

3D-Grafik mit Anaglyphen

Projekt

3D-Grafik mit Anaglyphen

Anaglyphen sind Bilder, bei denen zwei Bilder in verschiedenen Farben übereinandergelegt werden, um einen 3D-Effekt zu erzeugen. Farbfilter in der 3D-Brille trennen die beiden Bilder, sodass jedes Auge nur eines der Bilder sieht. Dadurch entsteht der Eindruck von Tiefe und räumlicher Wahrnehmung. In diesem Tutorial lernst du, wie du verschiedene Körper in 3D mit Anaglyphen darstellen kannst.

Pixelgrafik mit Ruby

Projekt (Ruby)

Pixelgrafik mit Ruby

In diesem Projekt programmierst du Pixelgrafiken. Mit der Zeichenfläche »Pixelflow Canvas« und ein paar Zeilen Ruby entsteht Schritt für Schritt ein Bild: eine hügelige Wiese aus Bézierkurven und ein Regenbogen aus Kreisen. Zum Schluss zeichnest du ein eigenes Bild und gibst es ab.

Feueranimation

Projekt (Ruby)

Feueranimation

»Demos« nannte man in der 90er Jahren kleine Programme, die spektakuläre Grafiken und Musik auf dem Bildschirm darstellten und dabei die Grenzen der verfügbaren Hardware ausreizten. Die Demoszene ist eine Subkultur, die sich um die Entwicklung von Demos und die Organisation von Demopartys dreht. In diesem Tutorial programmieren wir eine kleine Feueranimation in Ruby, die in der Demoszene relativ beliebt ist.

Echtzeitgrafik mit C

Projekt (C)

Echtzeitgrafik mit C

Mit PixelRAM programmierst du schnelle Computergrafik direkt in C. Es gibt keine Befehle für Linien, Kreise oder Figuren: Dein Programm bestimmt die Farbe jedes einzelnen Bildpunkts selbst. Daraus entstehen in diesem Tutorial bewegte Wellenmuster und ein Spiel für zwei an einer Tastatur.

Ein Spiel in 64 KB

Projekt (Lua)

Ein Spiel in 64 KB

TIC-80 ist ein kleiner Computer, den es nur als Programm gibt: ein Bildschirm mit 240 × 136 Pixeln, 16 Farben und Platz für 64 KB. Alles, was man für ein Spiel braucht, ist eingebaut: ein Editor für den Code, einer für Figuren, einer für Töne. In diesem Projekt programmierst du in Lua ein kleines Spiel, »Star Catcher«: Sterne fallen vom Himmel, und du fängst sie.

Eine Klötzchenwelt in 3D

Projekt (C / raylib)

Eine Klötzchenwelt in 3D

Du programmierst in C eine Welt aus Blöcken, durch die du selbst läufst: Mit der Maus siehst du dich um, du springst über Hügel, reißt Blöcke ab und baust neue. Eine Sonne wandert über den Himmel, nachts leuchten deine Fackeln, berechnet von einem Licht-Shader, den du selbst schreibst, und die Blöcke bekommen Texturen, die du selbst zeichnest.

Texte & Präsentationen

Computer können Texte nicht nur anzeigen, sondern auch strukturieren, gestalten und in interaktive Erlebnisse verwandeln. Erstelle Dokumente, Präsentationen und verzweigte Geschichten, in denen Leserinnen und Leser eigene Entscheidungen treffen können.

Interaktive Geschichten schreiben

Projekt

Interaktive Geschichten schreiben

Mit BIF kannst du interaktive Geschichten schreiben, bei denen die Leserinnen und Leser selbst entscheiden, wie es weitergeht. Die einzelnen Abschnitte deiner Geschichte schreibst du als einfache Markdown-Dateien und verbindest sie miteinander. In diesem Tutorial entwickelst du Schritt für Schritt eine kleine Geschichte und lernst dabei die wichtigsten Bausteine von BIF kennen: Seiten, Entscheidungen, Verzweigungen, lokale Aktionen, Variablen und Bedingungen.

Eine Präsentation in HTML erstellen

Projekt (HTML)

Eine Präsentation in HTML erstellen

Erstelle eine Präsentation mit shower.js in HTML und CSS. Mach dich unabhängig von PowerPoint und Keynote und erstelle eine Präsentation, die in jedem modernen Browser vom Stick oder aus der Cloud funktioniert.

Eine Facharbeit mit LaTeX

Projekt (LaTeX)

Eine Facharbeit mit LaTeX

Du schreibst eine kurze Facharbeit über ein Fadenpendel, von der leeren Datei bis zum fertigen PDF: mit Titelseite, Inhaltsverzeichnis, Kapiteln, einer Formel, einem Bild, einer Messwerttabelle, einem Diagramm, Quellenangaben und der Selbstständigkeitserklärung. Alles, was du dabei lernst, brauchst du später wieder: für Facharbeit oder Seminararbeit, für Protokolle und im Studium.

Web

Baue Webseiten und Anwendungen, die im Browser laufen, und hol dir Daten von Diensten im Netz.

Statische Webseiten mit HTML & CSS

Projekt (HTML / CSS)

Statische Webseiten mit HTML & CSS

Baue eine kleine Webseite über etwas, das du magst. Du lernst dabei, wie HTML den Inhalt einer Webseite beschreibt und wie du mit CSS Farben, Abstände und das Layout gestaltest. Am Ende funktioniert deine Seite auch auf kleinen Bildschirmen und du kannst sie veröffentlichen.

Frontend-Entwicklung mit Svelte

Projekt (Svelte)

Frontend-Entwicklung mit Svelte

In diesem Projekt lernst du die Grundlagen von Svelte kennen und baust eine kleine Webanwendung: einen »Rubik's Cube Timer«, also eine Stoppuhr, die misst, wie lange du zum Lösen eines Zauberwürfels brauchst. Svelte ist ein modernes Frontend-Framework für interaktive Webseiten, von kleinen Spielen bis zu großen Anwendungen. Am Ende machst du daraus eine statische Webseite und gibst sie ab.

Daten aus dem Netz

Projekt (Ruby / Python / JavaScript)

Daten aus dem Netz

Viele Dienste im Netz haben eine Schnittstelle für Programme, eine API: Statt einer Webseite liefern sie Daten, die ein Programm weiterverarbeiten kann. Du fragst den Wetterdienst Open-Meteo nach dem Wetter in deiner Stadt, erst im Terminal, dann aus einem Programm in Ruby oder Python, und baust zum Schluss eine eigene Wetterseite. Dabei lernst du, wie man eine API liest, was bei Fehlern passiert und warum man eine API nicht ohne Not mit Anfragen überschüttet.

Netze & Sicherheit

Wie Rechner über das Netz miteinander reden, vom Paket bis zur Webseite: TCP/IP, ein eigener Webserver, eine Pixelwand für die ganze Klasse. Und wie man Daten schützt, mit Verschlüsselung, Signaturen, sicheren Datenbankabfragen und einem zweiten Faktor bei der Anmeldung.

TCP/IP-Verbindungen

Labor

TCP/IP-Verbindungen

Wie findet ein Paket seinen Weg durchs Internet, und wie wird aus einzelnen Paketen eine Verbindung, über die eine ganze Webseite kommt? Du findest die Adresse deines Workspace heraus, misst mit ping, wie weit Server entfernt sind, und verfolgst mit traceroute den Weg der Pakete. Dann siehst du, wie TCP eine Verbindung aufbaut, chattest mit netcat und holst eine Webseite von 1992, indem du HTTP von Hand tippst. Zum Schluss lädst du mit wget und curl Dateien und Daten aus dem Netz.

Ein eigener Webserver

Projekt (Ruby / Python)

Ein eigener Webserver

Jedes Mal, wenn du eine Webseite öffnest, schickt dein Browser eine Anfrage an einen Webserver, und der schickt die Seite zurück. In dieser Aktivität schreibst du so einen Server selbst, in Ruby oder Python und ohne fertige Bibliothek: Er wartet auf Verbindungen, liest die Anfrage, antwortet, liefert HTML-Seiten aus, zählt seine Besuche und nimmt Stimmen aus einem Formular an. Am Ende teilst du ihn mit deiner Klasse.

Eine Pixelwand für alle

Projekt (Ruby / Python)

Eine Pixelwand für alle

Die ganze Klasse malt gleichzeitig an einem Bild: Jeder Pixel, den jemand setzt, erscheint sofort bei allen anderen. Dafür brauchst du WebSockets, Verbindungen, die offen bleiben und in beide Richtungen funktionieren. Eine Bibliothek kümmert sich um die Technik dahinter; du kümmerst dich um das, worauf es ankommt: wer verbunden ist, wer welche Nachricht bekommt, und dass der Server keiner Nachricht blind glaubt.

Kryptographie im Terminal

Labor (Bash)

Kryptographie im Terminal

Wie prüft man, ob eine Datei unterwegs verändert wurde? Wie speichert ein Server Passwörter, ohne sie zu kennen? Und wie schickt man jemandem ein Geheimnis, ohne vorher ein Passwort auszumachen? In dieser Aktivität probierst du die Bausteine der Kryptographie im Terminal aus: Hashes, Passwörter mit Salz, Verschlüsselung mit einem und mit zwei Schlüsseln und digitale Unterschriften. Am Ende weißt du, was hinter dem Schloss im Browser und hinter deinem SSH-Schlüssel steckt.

SQL Injection

Labor (Ruby / Python / SQL)

SQL Injection

Viele Programme bauen aus dem, was jemand in ein Formular tippt, eine SQL-Abfrage. Geschieht das unvorsichtig, kann eine geschickte Eingabe die Abfrage selbst verändern. In diesem Labor schreibst du ein kleines Anmeldeprogramm, findest seine Lücke in deiner eigenen Testdatenbank und schließt sie mit einem Prepared Statement.

Zwei Faktoren: Einmalcodes selbst gebaut

Projekt (Ruby / Python)

Zwei Faktoren: Einmalcodes selbst gebaut

Viele Konten fragen nach dem Passwort noch nach einem sechsstelligen Code aus einer App, der alle 30 Sekunden wechselt. Du baust das Verfahren dahinter selbst, in Ruby oder Python: einen Schlüssel in Base32, einen Code aus Schlüssel und Zähler, einen Zähler aus der Uhrzeit. Am Ende scannst du deinen eigenen Schlüssel mit dem Handy, und deine App zeigt dieselben Codes wie dein Programm.

Datenbanken

Speichere, verknüpfe und durchsuche größere Datenmengen. Lerne SQL kennen, entwirf eine eigene Datenbank für Filme und speichere dieselben Daten anschließend als Graph.

Einführung in SQL

Grundlagen (SQL)

Einführung in SQL

In diesem Kapitel lernst du, wie du MySQL-Datenbanken abfragen kannst. Dazu verwenden wir SQL, die Structured Query Language. Wir beginnen mit einfachen Abfragen und kombinieren die einzelnen Bausteine anschließend zu eigenen Fragen an die Daten.

Filmdatenbank mit MySQL

Projekt (SQL)

Filmdatenbank mit MySQL

Du entwirfst eine Datenbank für Filme, ihre Genres und die Menschen, die an ihnen mitgearbeitet haben. Das Modell schreibst du als Text, die ER-Werkstatt in VS Code zeichnet daraus Diagramme und erzeugt das SQL für die Tabellen. Danach lädst du echte Filmdaten hinein und setzt mit JOIN wieder zusammen, was das Modell auf mehrere Tabellen verteilt hat.

Filmdatenbank als Graph mit Neo4j

Projekt (Cypher)

Filmdatenbank als Graph mit Neo4j

In der »Filmdatenbank mit MySQL« hast du Filme, Genres und Personen auf Tabellen verteilt und mit JOIN wieder zusammengesetzt. Jetzt speicherst du dieselben Daten als Graph in Neo4j: Filme, Personen und Genres werden zu Knoten, ihre Beziehungen zu direkten Verbindungen. Du lernst die Abfragesprache Cypher kennen und siehst, warum Fragen wie »Wer arbeitet oft mit wem?« in einem Graphen kurz werden.

Wie Computer rechnen

Ein Blick unter die Haube: eine kleine CPU programmieren, Sortierverfahren und Datenstrukturen selbst bauen, endliche Automaten, ein Rechner, der Ausdrücke versteht, und ein neuronales Netz, das Ziffern erkennt.

Vom Byte zum 3D-Labyrinth

Projekt (Assembler / C)

Vom Byte zum 3D-Labyrinth

In der CPU Sandbox programmierst du einen kleinen 8-Bit-Computer, erst in Assembler, später in C. Register, Flags, Speicher, Bildschirm und Geräte sind dabei jederzeit sichtbar, bis hinunter zum einzelnen Takt auf dem Bus. Und am Ende läuft auf derselben Maschine ein 3D-Labyrinth.

Sortieralgorithmen erforschen

Projekt (Dart / Python / JavaScript / Java)

Sortieralgorithmen erforschen

In der Sorting Sandbox schreibst du Sortieralgorithmen in Dart, Python, JavaScript oder Java und siehst dann zu, wie dein eigener Code arbeitet. Du lässt Verfahren gegeneinander antreten, misst ihren Aufwand und findest heraus, warum zwei richtige Algorithmen trotzdem sehr unterschiedlich gut sein können.

Datenstrukturen von innen sehen

Projekt (Dart / Python / JavaScript / Java)

Datenstrukturen von innen sehen

In der Data Structures Sandbox programmierst du Listen, Stacks, Queues, Bäume, Heaps und Hash-Tabellen selbst, in Dart, Python, JavaScript oder Java, und siehst bei jedem Methodenaufruf, was in deinem Speicher passiert: welche Zelle beschrieben wird, welche Referenz umgebogen wird, welcher Knoten rotiert.

Endliche Automaten

Projekt (Ruby / Python)

Endliche Automaten

Ein Drehkreuz, ein Zahlenschloss und ein Automat, der durch 3 teilt, ohne zu rechnen: Du baust endliche Automaten in Ruby oder Python und findest heraus, warum ein Schloss bei 1 2 1 2 1 3 nicht aufgeht, obwohl der Code 1213 ist. Dann schreibst du einen Automaten, der raten darf, verwandelst ihn mit einem kleinen Programm in einen, der nicht raten muss, und siehst zu, wie der explodiert.

Ein Rechner für Ausdrücke

Projekt (Ruby / Python)

Ein Rechner für Ausdrücke

Tipp 2 + 3 * (4 - 1) in einen Taschenrechner, und er weiß, dass erst die Klammer drankommt, dann das Malnehmen und zuletzt das Plus. Woher eigentlich? Du baust einen Rechner, der Ausdrücke versteht, in Ruby oder Python: Er zerlegt den Text in Stücke, baut daraus einen Baum und rechnet den Baum von unten nach oben aus. Genauso fangen Compiler an, die aus deinem Programm Maschinencode machen.

Trainiere ein neuronales Netzwerk

Labor (Python)

Trainiere ein neuronales Netzwerk

In diesem Experiment lernst du, wie du ein neuronales Netzwerk trainierst, das deine handgeschriebenen Ziffern erkennt. Dazu verwendest du TensorFlow und Keras, zwei Bibliotheken für maschinelles Lernen in Python.

Bilder und Kompression

Daten kleiner machen, ohne etwas zu verlieren: Lauflängen, Huffman-Codes und LZW, jedes Verfahren selbst geschrieben. Danach Decoder in C für GIF und JPEG, die echte Bilddateien Byte für Byte lesen und zeigen, und Botschaften, die in den Pixeln eines Fotos verschwinden.

Komprimieren mit Lauflängen

Labor (Ruby / Python)

Komprimieren mit Lauflängen

Sechsmal Weiß, dreimal Schwarz, viermal Weiß: Statt jedes Pixel einzeln aufzuschreiben, sagt man, wie lang jeder Lauf gleicher Pixel ist. So schickten Faxgeräte ihre Seiten durch die Telefonleitung, so speicherten frühe Bildformate ihre Bilder, und so packt JPEG die vielen Nullen eines Fotos zusammen. Du schreibst es selbst, in Ruby oder Python, und findest heraus, welche Dateien damit kleiner werden, und welche doppelt so groß.

Komprimieren mit Huffman

Labor (Ruby / Python)

Komprimieren mit Huffman

Im Morsecode ist E ein einziger kurzer Ton und Q ein langes Lang-lang-kurz-lang, weil E so viel häufiger vorkommt. Huffman-Codes machen dasselbe mit Bytes, aber so, dass man keine Pausen braucht, um zu wissen, wo ein Code aufhört. Du baust den Baum, aus dem die Codes kommen, in Ruby oder Python, codierst und decodierst damit und findest heraus, wie JPEG seine Huffman-Tabellen mit ein paar Bytes speichert.

Komprimieren mit LZW

Labor (Ruby / Python)

Komprimieren mit LZW

Rhabarberbarbara, Barbarabar, Barbarbarbier: Wo sich etwas wiederholt, lässt es sich kürzer sagen. LZW merkt sich beim Lesen jede Folge von Bytes, die schon einmal vorkam, und schreibt beim nächsten Mal nur noch eine Nummer. Das Wörterbuch dafür wird nie mitgeschickt: Wer entpackt, baut es beim Lesen selbst noch einmal. Du schreibst beides selbst, in Ruby oder Python, den Kompressor und den Entpacker, und probierst sie an Texten, Fotos und der Spezifikation von GIF aus.

Eine GIF-Datei decodieren

Labor (C)

Eine GIF-Datei decodieren

Das Graphics Interchange Format (GIF) stammt von 1987 und ist eines der ältesten Bildformate, die heute noch jeder Browser anzeigt. Ein GIF-Bild hat höchstens 256 Farben und ist verlustfrei mit LZW komprimiert: Ein Decoder bekommt jedes Pixel genau so zurück, wie es gespeichert wurde. In diesem Labor schreibst du in C einen Decoder, der eine GIF-Datei Byte für Byte liest, die Bilddaten entpackt und das Bild mit PixelRAM zeigt.

Eine JPEG-Datei decodieren

Labor (C)

Eine JPEG-Datei decodieren

Das JPEG-Format (Joint Photographic Experts Group) ist ein weit verbreitetes Bildformat, das hauptsächlich für die Komprimierung von Fotografien und realistischen Bildern verwendet wird. Es wurde in den frühen 1990er Jahren entwickelt und bietet eine effiziente Methode zur Reduzierung der Dateigröße von Bildern, während gleichzeitig eine akzeptable Bildqualität beibehalten wird. JPEG verwendet eine verlustbehaftete Komprimierungstechnik, bei der bestimmte Bildinformationen entfernt werden, um die Dateigröße zu verringern. Dies führt zu einer gewissen Qualitätsminderung, die jedoch oft nicht sichtbar ist, insbesondere bei höheren Qualitätsstufen.

Geheime Botschaften in Bildern

Projekt (Ruby / Python)

Geheime Botschaften in Bildern

Verschlüsselung macht eine Nachricht unlesbar, aber jeder sieht, dass es sie gibt. Steganographie versteckt die Nachricht selbst: in einem Foto, das aussieht wie jedes andere. Du liest ein Bild als Liste von Zahlen, versteckst Text in den untersten Bits, findest heraus, wie man so etwas entdeckt, und baust zum Schluss ein Verfahren, das mit Farbklassen und einer Zahl mit wechselnder Basis genau so viel versteckt, wie du willst, nicht nur ganze Bits.

Terminal & Git

Arbeite mit Dateien und Programmen im Terminal. Mit Git kannst du Änderungen an deinen Projekten nachvollziehen, frühere Stände wiederherstellen und gemeinsam mit anderen daran arbeiten. Und mit beidem einen Diebstahl aufklären.

Dateien und Verzeichnisse

Grundlagen

Dateien und Verzeichnisse

In diesem Kapitel lernst du, wie du mit Dateien und Verzeichnissen im Terminal arbeiten kannst. Wir werden einige der wichtigsten Befehle kennenlernen, die wir verwenden können, um Dateien und Verzeichnisse zu erstellen, zu löschen, zu kopieren, zu verschieben und zu bearbeiten. Wir werden auch lernen, wie wir den Inhalt von Dateien anzeigen und analysieren können.

Versionsverwaltung mit Git

Grundlagen

Versionsverwaltung mit Git

Git ist ein Versionsverwaltungssystem, das von Linus Torvalds entwickelt wurde, also ein Werkzeug, mit dem Änderungen an Dateien über längere Zeit hinweg nachvollziehbar gespeichert werden können. Es wird zur Verwaltung von Quellcode in Softwareprojekten eingesetzt und gehört heute zu den bekanntesten und am weitesten verbreiteten Werkzeugen dieser Art. Der eigentliche Nutzen von Git zeigt sich jedoch erst, wenn man selbst an größeren Texten oder Programmen arbeitet und dabei immer wieder Änderungen vornimmt. Oft möchte man etwas ausprobieren, eine Idee testen oder einen Fehler beheben – und merkt später, dass es doch nicht die richtige Lösung war. Ohne ein Werkzeug wie Git ist es dann schwierig, zu einem früheren, funktionierenden Stand zurückzukehren oder überhaupt noch nachzuvollziehen, was sich wann geändert hat.

Ein Krimi im Terminal

Projekt (Bash)

Ein Krimi im Terminal

In der Nacht zum 15. März verschwindet aus dem Stadtmuseum Bitstein die Goldene Diskette. Die Polizei hat Akten, aber viel zu viele: einen Bericht mit über tausend Zeilen, 1500 Befragungen, alle Autos und alle Leute der Stadt. Mit grep, head, tail, sort, uniq und Git siebst du heraus, was zählt, und findest, wer es war.

Programmiersprachen

Hier findest du kurze, praktische Einführungen in verschiedene Programmiersprachen. Du bekommst jeweils drei Beispiele für Programme gezeigt, die du direkt im Workspace ausprobieren kannst: ein einfaches »Hello, World!«, ein Programm, das eine Zahl einliest und in ihre Primfaktoren zerlegt, und ein Programm, das den Bubblesort-Algorithmus demonstriert. Finde deine Lieblingssprache!