Code Literacy – Learn how to code
März 11, 2018
Aus dem Unterricht des CAS Digital Leadership zum Thema Code Literacy: The new normal mit Chanel Greco berichtet Simon Bertschinger:
Code Literacy – oder einfach: Die Fähigkeit zum Schreiben von Code
Ein grundlegendes Verständnis vom Unterschied zwischen Hard- und Software oder das Erlernen einer Programmiersprache gehört heute zur Standardausbildung im Kindergarten – oder zumindest an Schulen im sekundären und tertiären Bildungssektor. Sollte man zumindest meinen. Doch wie so oft klaffen hier Idealvorstellung und Wirklichkeit weit auseinander – so auch unter angehenden #hwzdigitalleadern.
Am heutigen Tag soll diese klaffende Lücke mit der Einführung ins Thema “how to code” bei den Anwesenden weiter geschlossen werden. Hands on, an einem simplen Beispiel aus der Master21 Academy eine einfache Landingpage mit HTML & CSS zu erstellen.
Was ist Code Literacy?
Wie in der Einleitung bereits erwähnt, bedeutet Code Literacy in seiner einfachsten Form die Fähigkeit, Code in Form von Buchstaben, Zahlen und Symbolen in einer bestimmten Programmiersprache zu erstellen, lesen, verstehen und zu adaptieren. Im Sinne von Quellcode ist Code heute in unserem Alltag nicht mehr wegzudenken. Sei es in Kaffeeautomaten, dem Wecker auf unserem Smartphone, Ampeln im Strassenverkehr oder einfachen Barcodes beim täglichen Einkauf.
Und trotz der Allgegenwart von Code in unserem Alltag wissen wir vergleichsweise wenig darüber. Welche Prozesse und Befehle laufen im Hintergrund (unsichtbar für den Enduser) ab, um die Funktionalität all dieser Systeme zu gewährleisten? Oftmals können oder wollen wir auch einfach nicht verstehen, was da vor sich geht – das sollen Entwickler und Softwareingenieure machen. Während gegen systematischen “Unwillen” nur sehr wenig unternommen werden kann, will Code Literacy sich der Thematik “Unwissenheit” annehmen. Es gilt Barrieren zwischen Mensch und Code abzubauen und das Verständnis für die “Funktionalität von programmierten Dingen” zu fördern.
Code Literacy bedeutet für mich, nicht vor Schreck zu erstarren, wenn man eine Seite Code sieht, sondern zumindest grob einschätzen zu können, was es damit auf sich hat […]. Wer auch nur ein bisschen Code lesen kann (und ja, ich weiß, dass HTML und CSS kein „Code“ sind, aber zum Zwecke dieser Übung behandeln wir auch diese Sprachen mal so), der kann sich im Netz autarker bewegen, ist weniger auf die Hilfe anderer, sowohl fremder Leute als auch Bekannter, angewiesen und mit ein bisschen Übung, Durchhaltevermögen und Fantasie auch schnell in der Lage, Probleme selbstständig zu lösen (Anne Schüssler, Blogpost, 2013)
Nicht überzeugt? Warum es sich auch in fortgeschrittenem Alter und als Nicht-Entwickler noch lohnt programmieren zu lernen, gibts sonst bei t3n in einem etwas älteren Beitrag zu lesen.
Learn how to code – where to start?
Lesson learned – doch wie lernt man Programmieren? Kurze Antwort: Ganz so einfach ist es nicht. Alleine schon bei der Auswahl der Programmiersprache gibt es diverse Dinge zu berücksichtigen. Frontend- oder Backend-Sprachen, Verwendungszweck, Popularität, Komplexität und vieles mehr. Während Frontend-Sprachen insbesondere für die grafische Gestaltung & Darstellung von Benutzeroberflächen eingesetzt werden (z.B. Websites), benötigt man Backend-Sprachen wie PHP, Ruby, Python, C++ oder JavaScript, um eine gewisse Funktion bzw. Anwendung zu programmieren (z.B. Webapplikation).
Ein hilfreicher Einstieg dabei bietet die Infografik von http://carlcheo.com/:
Wer sich letztlich für eine der bekanntesten Programmiersprachen entschieden hat, findet diverse kostenlose aber auch kostenpflichtige Angebote im Netz, um das eigene Wissen kontinuierlich zu erweitern. Als Einstieg eigenen sich insbesondere Codeacademy (kostenlos), CodeSchool, Udemy oder Udacity.
Hands-on programmieren – HTML & CSS Basics
Nach dieser kurzen Einführung in die Welt von Code, gehts weiter mit dem eigentlich spannenden Teil: Der Workshop ist angesagt. Von der HTML-Struktur über die HTML-Syntax mit Überschriften, Paragraphen, Listen, Bilder und vielem mehr, steigen wir direkt in unser eigenes kleines Website-Projekt ein. Ohne im Detail auf die einzelnen Übungsschritte einzugehen (u.a. nachzulesen im Blogpost von Rena Seiler), hier die wichtigsten Tools für das Erstellen einer eigenen, kleinen Website. Die Übung kann unter folgendem Link übrigens selbst ausprobiert werden: https://master21.academy/guides/landing.
- Internet Browser: Google Chrome –> Insbesondere aufgrund der Chrome Console (zu öffnen mit Ctrl+Shift+I)
- Text Editor: Sublime, Atom oder andere –> zur Erstellung und Bearbeitung der HTML und CSS Dateien
- HTML elements reference –> die wohl wichtigste Quelle auf der Suche nach dem richtigen HTML Code-Snippet
- CSS reference oder cssreference.io –> siehe oben, einfach für CSS Befehle
- Google Fonts –> Eine Auswahl von knapp 1000 Fonts für die eigene Website, kostenlos
- Colorzilla –> Eine coole Browser-Erweiterung, um den Farbwert eines Pixels im Browser zu ermitteln
- ColorScheme Programme wie https://coolors.co/ oder http://colorhunt.co/ –> Gestaltung eines ästhetischen Farbensets für die eigene Website
Am Nachmittag gings anschliessend weiter mit “Customer Insights vs. Data Analytics” und Dozent @oliverstaubli.