CS50
Von Neugierde getrieben: Meine digitale Odyssee mit CS50 in die Tech-Welt.
- Kontext: Selbststudium zur Erweiterung meines technologischen Allgemeinwissens.
- Zeitlicher Rahmen: Gestartet im Februar 2024
- Externer Referenzlink: https://cs50.harvard.edu/x/2024/
- My tools: Scratch, Visual Studio Code, Duck-GPT
Woche 0: Scratch
Die Vorlesung
Die Online-Vorlesung mit David J. Malan ist ebenso inspirierend wie spannend und ich persönlich genieße es, neue Konzepte kennenzulernen und alte, flüchtig bekannte Dinge endlich zu verstehen und tiefer zu erforschen.
Ein Grundverständnis für das Binärsystem, nach dem Computer arbeiten, und die Logik, wie Inhalte auf abstrakte Weise in Zahlen übersetzt werden, sind ebenso faszinierend wie die Betrachtung alltäglicher Aufgaben – wie die Suche im Telefonbuch – in Form einfacher Algorithmen.
Die Aufgabenstellung
"Was mir an dem Projekt - und dem niederschwelligen Programmieransatz von Scratch - am meisten gefällt, ist die Kombination aus Design und Kreation und etwas zu bauen, das wirklich funktioniert."
Die Aufgabe besteht ganz einfach darin, auf scratch.mit.edu ein beliebiges Projekt in Scratch zu implementieren, sei es eine interaktive Geschichte, ein Spiel, eine Animation oder etwas anderes (unter Einhaltung einiger weniger Vorgaben).
Warum Tangram?
Ich liebe Tangram und seine Einfachheit, mit nur sieben geometrischen Formen endlose Möglichkeiten zu schaffen – entweder nach einem vorgegebenen Schema oder durch freies kreatives Ausprobieren. Ich wollte eine digitale Version schaffen, die ebenso einfach wie ästhetisch ansprechend ist.
Prozess und Herausforderungen
Die erste Herausforderung bestand darin, die Tangramteile so zu programmieren, dass jedes Teil auf die gleiche Weise funktioniert, aber durch Klicken oder Ziehen aktiviert wird, so dass es sich dann um sich selbst drehen kann – und vor allem wurde es ein bisschen kompliziert, alle anderen zu deaktivieren.
Beim Aufbau der Codeblöcke war die Reihenfolge wichtig, so dass ein Teil aktiviert wird, dann “Deaktivieren” an alle – auch an sich selbst – sendet und sich dann selbst wieder aktiviert.
Nachdem der erste “Knoten gelöst” worden war, bestand der nächste Schritt darin, die Funktionen der Teile zu erweitern und sie auf alle sieben anderen Teile zu übertragen. Da sich das Kopieren und Einfügen als ineffizient erwies, war es die bessere Wahl, die Codeblöcke zentralisiert zu halten und mit Klonen desselben Teils zu arbeiten.
Ein Aspekt, den es zu verstehen galt, ist die Tatsache, dass alles, sei es räumlicher, zeitlicher oder materieller Natur, definiert und kontrolliert werden muss – im Gegensatz zu unserer physischen Welt, wo die meisten Regeln bereits von der Natur vorgegeben sind. Das machte die zeitliche Abfolge des Programms (Startbild, Startbefehl, eigentliches Spiel) zunächst anspruchsvoll und brachte vor allem die Dimension der Zeit auf neue Weise ins Spiel.
Ergebnis
Diese erste Version meines digitalen Tangrams besteht aus drei Hauptbildschirmen – einem Vorschaubild, einem Startbild und dem eigentlichen Spielfeld. Das Spielfeld kann zwischen vier Motiven und einem leeren Feld gewechselt werden. Jedes Mal, wenn ein neues Spiel beginnt, werden die Tangramteile neu gemischt und bleiben in einer zufälligen Position.
Resümee
Aufregung, viel Spaß und eine steile, herausfordernde Lernkurve. Was mir an dem Projekt – und dem niederschwelligen Programmieransatz von Scratch – am besten gefällt, ist die Kombination von Design und Kreation und etwas zu bauen, das wirklich funktioniert.
Was ich gerne verbessern würde, wäre, dass der Nutzer bei erfolgreichem Spiel – dem Legen eines Motivs – eine Rückmeldung erhält, die über das rein visuelle Erkennen der Figur hinausgeht, oder dass alles ein bisschen “flüssiger” läuft und aussieht.
Woche 1: C
Die Vorlesung
Als Übergang von Scratch und seinen vorgefertigten Codeblöcken zu C mit offeneren Codestrukturen werden verschiedene Beispiele miteinander verglichen, in denen die gleichen Grundkonzepte von z.B. Funktionen, Bedingungen oder booleschen Ausdrücken eine Rolle spielen.
Dabei werden auch die unterschiedlichen Aspekte der Sprache deutlich, da es je nach Kontext und Zielsetzung verschiedene Möglichkeiten gibt, gleiche oder ähnliche Dinge auszudrücken.
Für mich bekommt das Werkzeug des Flussdiagramms hier eine erweiterte Bedeutung. Einerseits bildet es eine Brücke in der Kommunikation zwischen verschiedenen Akteuren, wie Entwicklern und Designern, und andererseits hilft es uns, Dinge auf ihre Grundstruktur zu abstrahieren, wie hier im Beispiel zur Veranschaulichung einer If/Else-Funktion.
Die Aufgabenstellungen
"Das Studium der Programmierung lässt mich als Designer mit gemischten Gefühlen zurück - einerseits schüchtert es mich ein und mein Wille, das Programmieren in seiner Anwendung zu lernen, hält sich in Grenzen, andererseits ist es für mich unglaublich motivierend und spannend, die Grundlagen zu verstehen."
1. Hello, It's Me
Mein erster Versuch, Code zu schreiben und von der Kommandozeile aus zu steuern, war ein holpriger Weg, bei dem ich mehrmals die vorherigen Tutorials konsultierte, um auch das kleinste Komma zu finden und die letzten Fehlermeldungen zu vermeiden.
Was mich auch wieder beeindruckt, ist die von CS50 in die VS-Code-Oberfläche integrierte Hilfe, die das Fernstudium auf pädagogisch wertvolle Weise ermöglicht.
2. Mario
Um ein einfaches Programm zu schreiben, dessen Ausgabe # Symbole sind, die eine Treppe/Pyramide imitieren, habe ich das gängige Konzept verwendet, den Funktionsablauf in “Pseudocode”, also in Worten und mathematischen Begriffen, zu beschreiben und ihn dann in Code in C zu übersetzen.
Die Idee des “Pseudocodes” erinnert mich beispielsweise an das Skizzieren im Design, um Varianten schnell und einfach zu beschreiben, bevor ich auf die Details der Implementierung eingehe.
3. Rückgeld
Mein Workflow für diese etwas komplexere Aufgabe – bei der es darum geht, die Mindestanzahl an Münzen zu bestimmen, die für die Ausgabe von Wechselgeld von unter einem Dollar erforderlich ist – war wiederum die Beschreibung im “Pseudocode”, der dann von Chat-GPT in C konvertiert wurde. Anschließend hat mir ebenso Chat-GPT dabei geholfen, einzelne Codeschnipsel zu verstehen, um diese dann bei Bedarf selbst anpassen zu können.
Resümee [Woche 1]
Für mich als Designer ist es spannend, neue Konzepte zu verstehen und zu sehen, wie die Programmierung Analogien zu Konzepten schafft, die mir bereits vertraut sind.
Wie bereits erwähnt, gefällt mir der Prozess der Übersetzung von „Pseudocode“ einerseits in Code und andererseits in Kommentare, die neben anderen Formregeln den Code besser lesbar machen. Methoden, die sich sicher auch auf den Designprozess anwenden lassen.
Woche 2-5: Arrays, Algorithms, Memory, Data Structures
"Als Designer beschäftige ich mich mit den Themen in den Wochen 2 bis 5 des Kurses nur theoretisch. Aus meinen umfangreichen Notizen gebe ich nur die für mich interessantesten Erkenntnisse weiter und gehe auf die sehr programmierlastigen Probleme nur oberflächlich ein."
Abstraktionsstufen
Die verschiedenen Abstraktionsgrade der Code-Sprache – von Nullen und Einsen bis hin zu Assembly und Quellcode – erinnern mich an die Struktur der Dinge in unserer physischen Welt, von Atomen bis hin zu Materialien, aus denen wir Produkte formen, was in der Informatik als Kompilieren bezeichnet wird.
Die Erstellung eines Programms im Quellcode kann wiederum mit dem Produktionsprozess einer Fabrik veranschaulicht werden, wobei zu Beginn vorhandene Werkzeuge (Funktionen) aus dem internen Bestand oder aus externen Bibliotheken eingebunden werden, aus denen dann das Programm zusammengesetzt wird.
Fehlersuche
Zunächst etwas überraschend, dann aber offensichtlich, ist, dass in einer eher nicht visuellen Domäne der Programmierung die Fehlererkennung durch Visualisierung der ausgeführten Prozesse erfolgt. Das Verfahren erinnert mich vage an die Prüfung von Hydrauliksystemen in der Industrie oder auch in der Medizin, wo Unregelmäßigkeiten durch Kontrastflüssigkeit sichtbar gemacht werden können.
Neben speziellen Debugging-Programmen, die jeden einzelnen Schritt des Programms anzeigen – ein Prozess, der normalerweise unsichtbar “unter der Haube” abläuft – gibt es das sprichwörtliche “Rubber-Duck-Debugging”, die freie Beschreibung des Problems an ein Objekt, eine KI oder einen Menschen, was oft bei der Reflexion und Fehlererkennung hilft.
Algorithmen
Wir haben verschiedene grundlegende Algorithmen kennengelernt, mit denen sich Aufgaben mit unterschiedlichem Effizienzgrad lösen lassen, z. B. das Sortieren nach der Größe verschiedener Werte.
Die so genannte binäre Suche, die das große Problem in viele kleine und damit leicht zu bewältigende Probleme zerlegt, hat in der Regel am besten funktioniert.
Visuelles
Kompromisse
Wie beim Produktdesign scheint es auch bei der Programmierung um die effizienteste Nutzung von Ressourcen wie Zeit und Speicherplatz zu gehen. Die perfekte Lösung für ein einzelnes Problem löst ein anderes möglicherweise nicht. Auch hier muss man also abwägen, welche Ressourcen man einsetzt, um ein System so modular wie möglich aufzubauen, oder sich mit schlankeren, aber weniger flexiblen Lösungen zufrieden geben. Es ist ein Kompromiss, und eine Lösung scheint die Standardisierung von Komponenten zu sein, ähnlich wie bei standardisierten Komponenten und geeigneten Werkzeugen für die industrielle Produktion oder in einem Baumarkt.
Week 6-7: Python, AI, SQL
C and Python
I don’t want to talk so much about the core differences between C and Python, nor about Python itself, but rather about the logical structure of the lecture series, where weeks 2 to 5 cover the basics of how computers work and only later do we get into more detail about the daily use of languages, which expands my thinking capacity and helps enormously to understand the basics of programming and problem-solving approaches.
Middleway
Lecture 6.5 on artificial intelligence used the example of a menu card in our favourite restaurant to explain how we choose our favourite dish every time and thus miss the chance to discover a possibly better one.
In this way, AI models can also be set differently and allow a broader probability, or limit themselves to a more targeted and therefore more efficient probability.
The purist beauty of Sequel
I admire the simplicity of SQL applications and the possibility of using simple code queries to display cleanly structured and, depending on requirements, sorted or filtered lists from data silo CSV (comma separated values) files, which are otherwise confusing to the human eye, cleanly in the code editor.
Week 8-10: HTML-CSS-JavaScript, Flask, Cybersecurity
Web Design Basics
Website to Webapp
Even if the dividing line between websites and applications is not clear-cut, the use of a new framework such as Flask, which processes user input dynamically on the server side and outputs the result in the form of static pages back to the browser or user, makes sense above a certain level of complexity.
Cybersecurity
It is exciting to see how quickly we can test passwords on standard computers using a small program in Python. As a countermeasure, companies rely on various methods: length and complexity requirements, blocking or delay after X number of failed attempts, authentication by a second – usually physical – factor. In addition, methods similar to encryption such as hashing, end-to-end or so-called passwordless passkeys are used.
Conclusion
Again, I am grateful for the opportunity to do this great course free of charge and online. For a short time, the lecture gave me the feeling of being a student again, even in the historic Harvard.
As already mentioned, apart from Week 00 (Scratch “Tangram”) and 01 (C), I did not work on the entire problem sets, but simply took extensive notes from the lectures and tried to reproduce the most important ones here, which has already taught me many exciting insights and new skills.