Programmiersprachen

Was sind Programmiersprachen?

HTML ist eine Auszeichnungssprache. CSS ist eine Stylesheet-Sprache und Javascript ist eine Script-Sprache.

«Richtige» Programmiersprachen können Algorithmen definieren.

Sie bieten u. a. Ein-/Ausgabe-Befehle, Deklaration von Variablen und Feldern, um Informationen (zwischen-)speichern zu können oder mathematische Funktionen an.

Programmierer:innen müssen kreativ und logisch denken, um ihre Aufgaben zu meistern.

Webseiten werden in zwei Bereiche unterteilt: FrontEnd und BackEnd. Das BackEnd ist der Teil der Webseite, der auf dem Server liegt. 

FrontEnd ist der Arbeitsbereich bei dem Designer:innen hauptsächlich mitarbeiten.

Auf der Client-Side hat man keinen Einfluss auf die Wahl des Betriebssystems, Gerätes, Browser oder den visuellen Einstellungen.

Build Tools automatisieren diverse Aufgaben, wie Prefixing von CSS Browser-Kompatibilitätsprobleme, Minify CSS oder Javascript Code.

Zudem können Files concatenated (verkettet) werden. So kann man grosse Files in kleinere Files aufteilen, um spezifische Dinge in spezifischen Files abzuhandeln. Dies ist insbesondere eine gute Massnahme, wenn man in einem Team oder an einem grösseren Projekt arbeitet.

Als Gestalter:in können wir uns viel von dieser Arbeitsweise aneignen. 

Gute Entwickler bezeichnen sich gerne als faul. So faul, dass sie möglichst alle mühsamen und repetitiven Arbeiten sich ersparen. Stattdessen finden sie kreative Wege, welche ihren Arbeitsablauf optimiert und teilen es mit der Welt. Clever.

Nebst dem Rendern, speichert und verwaltet ein Browser auch Cookies (z. B. Account-Daten von Facebook) oder ermöglicht das Anlegen von Lesezeichen und Browser-Verläufen, also das Abspeichern der besuchten Webseiten sowie persönliche Einstellungen wie beispielsweise die Standardsprache.

Er wandelt den Code in binären Code (010101) um, damit er auf dem Bildschirm dargestellt werden kann.

Für HTML, CSS und Javascript gibt es spezifische Compilers.

HTML: The DOM

CSS: CSS

JS: Javascript Engine

Die verschiedenen Browser haben verschiedene JIT-Compilers, was zu unterschiedlichen Renderings führt und mit spezifischem Code abgefangen werden muss.

HTML strukturiert Texte mit HTML-Elementen. Ein HTML-Element besteht aus zwei Tags. Einem Opening-Tag und einem Closing-Tag. Dazwischen ist der sichtbare Inhalt. Im Opening-Tag können weitere Attribute zu diesem Element definiert werden.

Es gibt eine definierte Anzahl an HTML-Elemente. Für Texte, Titel, Links, Bilder, Tabellen etc. Jedes Element hat eine klare Aufgabe.

Diese Strukturierung wird genutzt, um CSS anzuknüpfen oder mit Javascript zu interagieren. Zudem hilft es Suchmaschinen, die Inhalte der Webseite in der richtigen Hierarchie zu lesen.

Hyper steht für die Möglichkeit der Verlinkung. Links sind auch die Essenz, woraus das Internet gemacht ist.

Der Selektor verbindet das CSS mit dem HTML und dient dazu, die Gestaltungsdeklarationen den HTML Elementen zuzuweisen.

Es können alle Arten von Gestaltungsdeklarationen einem Selektor zugewiesen werden. Diese Gestaltungsdeklarationen (Möglichkeiten) sind klar definiert.

All diese einzelnen "Rule-Sets" für alle Selektoren werden in einem «Style-Sheet» zusammengefasst und beim laden einer HTML-Seite eingespeist.

Der Begriff «Cascading» referenziert auf eine der elementarsten Grundregel des Style Sheets. So wird einem Wasserfall (Kaskade) gleich, diese Gestaltungsdeklarationen innerhalb der definierten HTML-Verschachtelung sowie der Selektoren-Hierarchie vererbt.

Javascript ermöglicht z. B., dass nicht alle Inhalte sofort gezeigt werden, sondern durch scrollen nacheinander einblenden. 

JS ermöglicht zudem Benutzerinteraktionen auszuwerten, Inhalte zu verändern, nachzuladen oder zu generieren und erweitert so die Möglichkeiten von HTML und CSS. 

Als Designer:in wird, Javascript dann spannend, wenn die Webseite nicht nur statische Inhalte zeigt, sondern die User:innen durch Prozesse geführt, oder die Interaktion verdeutlicht werden muss.

Javascript kann mit allen HTML oder CSS Elementen einer Seite interagieren. So können Elemente eingeblendet, bewegt, nachgeladen, erstellt, entfernt oder verändert werden. Zudem können Benutzerinteraktionen genutzt werden oder Server-Updates direkt nachgeladen werden.

Weil Javascript all dies kann, schreiben auch viele Entwickler das ganze HTML und CSS direkt mit Javascript.

Die Kraft von Javascript gilt es aber bewusst einzusetzen, andernfalls kommt es zu einer Überdosis an «Fancy-Shit» der für den spezifischen Fall kein Sinn ergibt.

Als Designer:in wird, Javascript dann spannend, wenn die Webseite nicht nur statische Inhalte zeigt, sondern die User:innen durch Prozesse geführt, oder die Interaktion verdeutlicht werden muss.

Im Grunde alle Files und Daten einer Webseite. Diese werden aufgerufen und ins FrontEnd, respektive zum Client geladen.

Das BackEnd ist die Server-Side. Es sind demnach Dinge, welche nicht beim Client (FrontEnd) gerendert werden.

Ein BackEnd wird aus verschiedenen Technologien gebaut.

Lange war der LAMP-Stack populär. Doch mit dem Aufstieg von Javascript ist nun der MEAN-Stack ein häufig anzutreffender Technologie-Stapel.

LAMP-Stack

LAMP ist ein Akronym aus: Linux ist das Betriebssystem, Apache ist der Webserver, MySQL ist die Datenbank und PHP ist die serverseitige Programmiersprache. Klar können die jeweiligen Teile durch alternativen ausgetauscht werden. Wie z. B. Python statt PHP.

MEAN-Stack

Mean ist ebenfalls ein Akronym aus: MongoDB ist das Datenbank-System, express ist das backend Web-Framework, AngularJS ist das FrontEnd-Framework, NodeJS ist das BackEnd Runtime Environment).

Dabei sind diese Inhalte in einer Datenbank und werden dynamisch ins HTML hineingeladen.

So ist die Struktur, das Design, die Interaktion, die Funktionalität sowie der Inhalt klar voneinander getrennt.

Die klare Trennung von Inhalt (CMS) , Struktur (HTML), Design (CSS), Verhalten (JS) ist sinnvoll. Es ermöglicht eine klare Aufgabentrennung für Teams und ist so ein nützliches Mindset.

Viele CMS ermöglichen ein editieren mit einem WYSIWYG Editor (What you see is what you get). So hat man das Gefühl die Inhalte direkt in der Webseite und nicht in einem «BackEnd» zu editieren.