Institute for Digital Business

Code Literacy – Learn how to code

March 11, 2018

Zu allen Artikeln

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)

Code Literacy, Steve Jobs

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/:

programming languages

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.

The post Code Literacy – Learn how to code appeared first on Institute for Digital Business.

Entdecken Sie unsere Kurse zum Thema

Start Februar 2023

CAS Digital Ethics HWZ

  • Cornelia Diethelm
  • 1 Semester (18 Tage, davon 5 Tage Online)
  • Zürich; Sihlhof (direkt beim HB)
Mehr erfahren
Start August 2022

CAS Digital Leadership HWZ

  • Sven Ruoss
  • 1 Semester (18 Tage, davon 5 Tage Studienreise)
  • Zürich; Sihlhof (direkt beim HB)
Mehr erfahren
Start Februar 2023

CAS Digital Marketing Pro HWZ

  • Dominic Stöcklin
  • 4 Monate (2 1/2 Präsenztage)
  • 90% Online
Mehr erfahren
Start August

CAS Social Media und Content Marketing HWZ

  • Dominic Stöcklin
  • 1 Semester (18 Tage)
  • Zürich; Sihlhof (direkt beim HB)
Mehr erfahren

Dein Persönliches Digital Update

Bleibe auf dem Laufenden über die neuesten Entwicklungen der digitalen Welt und informiere dich über aktuelle Neuigkeiten zu Studiengängen und Projekten.