Code Literacy – programm or be programmed
Oktober 19, 2018
Aus dem Unterricht des CAS Digital Leadership mit Chanel Greco berichtet Michael Gaschen:
Bereits mit der Begrüssung am Morgen durch Patrick Comboeuf wurde die Spannung für das CAS Modul “Code Literacy the new normal” vom Nachmittag aufgebaut. Sein Rat an alle Eltern oder kommenden Eltern mit schulpflichtigen Kindern: Programmieren (Code Literarcy) ist nichts anderes, als eine neue Fremdsprache wie Französisch oder Englisch zu lernen. Programmieren wird zur neuen globalen Fremdsprache, die jeder im Minimum auf Basislevel verstehen und schreiben können sollte.
Die Welt des Programmierens
Voller Elan und Begeisterung sind wir also gestärkt nach dem Mittag in die Welt des Programmierens eingetaucht. Begonnen haben wir den Unterricht zwar mit Theorie (Grammatik) aber wir haben uns natürlich primär darauf gefreut, die neue Fremdsprache der Programmierung direkt in der Praxis durch “learning by doing” selbst anzuwenden. Wir waren zwar vorgewarnt, aber wer noch nie programmiert hat, der fühlte sich in die 4. Klasse und der ersten Konfrontation mit einer Fremdsprache (Französisch) zurückversetzt. Daher nun zuerst in Kürze die theoretischen Basisgrundlage der Sprache HTML/CSS. Danach führt euch dieser Blog direkt zur Möglichkeit, das gelernte selbst anzuwenden.
Code Literacy: Was ist das und wieso braucht es das?
Schauen wir doch unser tägliches Leben an: Ohne Code funktioniert nichts mehr. Sei es bei der Bedienung des Backofen, beim Buchen eines Fluges, beim Kauf eines Zugtickets oder beim Autofahren. Wir sind von Code umgeben! Es wird von der Gesellschaft erwartet, dass jedermann mit solchen Anwendungen oder Applikationen umgehen kann. Was als Beispiel die Werbung der SBB mit der SBB-App und der Grossmutter gut zeigt.
Grundsätzlich kann argumentiert werden, dass man gut durchs Leben kommt, wenn man einen Computer oder ein Handy benutzen kann. Doch wer sich auf die reine Anwendung beschränkt, ohne zu verstehen, wie ein Computer oder eine Applikation effektiv auch funktioniert, droht davon “beherrscht” zu werden. Programm or be programmed, diese These bringt es auf den Punkt. Also müssen wir lernen und verstehen, was eigentlich hinter einem Programm oder einer Webseite effektiv abläuft, um diese im Privat-/Geschäftsleben auch effektiv einsetzen zu können. So hat Steve Jobs einmal treffend gesagt:
“Everybody […] should learn how to program a computer…because it teaches you how to think.“
Ein Erkenntnis, das sich nicht nur in den Schulen schrittweise durchsetzt, sondern auch im Geschäftsleben bis auf Stufe Top-Management Schule macht. Was soll dies nun aber für einen Nutzen bringen, wenn das Management oder Business auch die Programmierung in der Basis versteht. Dies legt die Basis für agile Organisationsformen, wo in interdisziplinären Teams Business und Entwickler direkt am gleich Pult sitzen und Stories zusammen umsetzen. Es geht also darum, eine gemeinsame Sprache zu sprechen und damit Effizienz und Verständnis zu fördern. Typische Rollen in dieser Schnittstelle bilden auch Business Analysten oder System Engineers.
Erstes Fazit: Code Literacy und konzeptionelles Denken ermöglicht uns, Technologien anzuwenden, um die digitale Welt zu verstehen, zu sprechen und anzuwenden.
Programmiersprachen – welche gibt’s?
Wieso braucht es überhaupt Programmiersprachen? Computer sind grundsätzlich dumm und haben den Ruf, nur 0 und 1 zu verstehen. Heute gibt es jedoch moderne Programmiersprachen, die sich an der menschlichen Sprache anlehnen – oft am Englisch. Also welche Programmiersprache soll überhaupt lernen, respektive gibt es? Denn Programmiersprache ist nicht gleich Programmiersprache. Heisst, ich muss mir zuerst bewusst werden, in welcher Branche ich diese anwenden möchte und für welche Anwendungsfälle. Denn Machine-Learning ist nicht die gleiche Sprache wie z.B. eine Banken-Software zu programmieren. Hierfür hilft die Webseite “What is programming” – which language should I learn first. Effektiv gibt es über 200 Sprachen “The Helloworld Collection” gibt dazu einen umfassenden Überblick.
Als zweites Fazit lässt sich dies in folgende Programm-Sprachgruppen mit ein paar Beispielen unterteilen. Beherrscht ein Entwickler sowohl Front- wie Backend spricht man von Fullstack Engineering.
Webseite und Web-Applikation – was ist der Unterschied?
Ein statische Webseite kodiert auf HTML und CSS und verändert sich nicht für den Anwender. Ein Webapplikation hingegen ist einen dynamische Webseite mit zum Beispiel Eingabefeldern und einer entsprechenden Applikationslogik der Datenverarbeitung. Hierfür ist eine Schnittstelle in eine Backend-Applikation notwendig.
Was ist HTML?
Hyper Text Markup Language ist eine textbasierte Aufzeichnungsprache zur Strukturierung digitaler Dokumente wie Text, Hyperlinks, Bilder und deren Inhalte (Quelle Wikipedia). Mit HTML ging es beim Start von Internet darum, Inhalte zu übermitteln. Es ist etwas Zweckgebundenes und nichts Schönes zum Anzuschauen. Entfernt man mit einem Tool bei einer Internetseite das CSS, lässt sich gut sehen, wie eine reine HTML-Seite aussieht – übrigens hat früher das Internet so ausgesehen…!
Was ist CSS?
CSS steht für Cascading Style Sheet. Man kann verschiedene Dokumente einbinden, damit das HTML weiss, wie es dargestellt werden soll. Dies geschieht über eine Verknüpfung im Head des Index-HTML. Der CSS Syntax ist anders aufgebaut als im HTML, heisst es ist eine andere Sprache. Als Beispiel wird im CSS die Schriftart, die Schriftgrösse und Farbe definiert. Mit Responsive Grid Design – on Desktop wird als Beispiel die Programmierung so flexibel gestaltet, dass sich die Webseite auf verschiedenen Devices (Desktop, Tablet, Mobile) und Bildschirmgrössen flexibel darstellen lässt.
Hier noch ein paar praktische Tipps:
- Auf Google Fonts kann man sich gratis verschiedene Schriftarten holen
- Für Farben geh auf Colorzilla Chrome plugin, um eine Auswahl von anderen Webseiten zu erhalten
- Mit Bootstrap kann eine Design Library genutzt werden, damit vorgegebene Designer-Elemente einfach kopiert und übernommen werden können.
Let’s code!
Aber nun wie versprochen zum Hauptteil, die ersten Erfahrungen beim selber “Coden”. Was wir dabei lernen und benötigen werden:
- Hands-on: Landing Page mit HTML & CSS programmieren.
- Ein HTML Dokument schreiben
- Ein Dokument mit CSS gestalten
- Benötigt dazu wird ein Text Editor und ein Internet Browser
Auf folgender Webseite findest du die Anleitung für deine erste selber programmierte Landing Page. Arbeite dich doch mal selber durch und falls du Anfänger bist, ich habe dich in der Einleitung gewarnt, du fühlst dich in die Schulzeit zurückversetzt! Aber wie bei jeder Sprache. Nach den ersten Hürden stellt sich rasch auch erster Erfolg ein. Wenn deine Seite in etwa so aussieht, hast du deine erste Programmierung in HTML/CSS erfolgreich abgeschlossen. Gratulation!
Tja falls es nicht so aussieht – es gibt viele Möglichkeiten, sich für einem Kurs anzumelden. Hier ein paar praktische Links (z.T. auch kostenlos) – Master21 – Codeacademy – Udemy – Udacit. Die erste Landingpage ist erstellt und macht Mut für neue Learnings im Sprachgebrauch.
programm or be programmed!