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.
Programmierer:innen bezeichnen gerne diejenigen, welche nur HTML/CSS können nicht als Programmierer. Da sie nur definieren aber keine Algorithmen schreiben oder Objekt orientiert programmieren. Javascript ist je nach Nerd-Stand irgendwo im In-Fight der Diskussion. Javascript ist komplex.
Einfachheitshalber können all diese Sprachen unter dem Oberbegriff «Programmiersprache» genannt werden. Was nicht heisst, dass man mit allen Sprachen programmiert.
FrontEnd
Client Side
1
FrontEnd ist das, was man in einem Webbrowser sieht. Dies nennt man auch Client-Side, da das Compiling/Rendering der Files (HTML, CSS & JS) im Browser des Users/Client passiert.
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.
Um schneller und professioneller zu arbeiten werden von FrontEnd Developer gerne Build Tools verwendet.
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.
Ein Browser rendert HTML/CSS und Javascript in ein visuell sichtbares Layouts.
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.
Die verschiedenen Browser haben verschiedene JIT-Compilers, was zu unterschiedlichen Renderings führt und mit spezifischem Code abgefangen werden muss.
HTML strukturiert den Inhalt und somit das Layout einer Webseite. Im Grunde ist HTML ein ganz normales Textfile. Statt im Format .doc ist es .html.
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.
CSS ist für das visuelle Styling einer Webseite zuständig. Dabei werden die im HTML-Elemente im CSS gestylt.
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.
Web-Developer nutzen oft CSS-Frameworks als Startpunkt ihres Stylings und/oder CSS Preprocessors für ihre Arbeit.
CSS-Frameworks
Frameworks sind standardisierte Konzepte, Anwendungen und Kriterien, um mit den gängigen Problemen der Webentwicklung besser klarzukommen. Da sich Webseiten in ihrer Logik oft ähneln, kann man so, die gängigsten CSS-Klassen anwenden, ohne dass man alles neu definieren muss. Kennt man sich in einem Framework aus, so wird die Effizienz erhöht. Zudem generiert ein solches Framework auch Styles für all jene Dinge, welche zwar in einer Webseite vorkommen, aber nicht vom Designer definiert wurden. So sehen gewisse Seiten zwar nicht perfekt aus, aber bereits viel besser als reines HTML. Eine Einführung.
Arbeiten FrontEnd-Developer mit Frameworks, können bereits die BackEnd Developer das CMS bauen, da viele Schnittstellen bereits definiert sind. So müssen Sie nicht auf das finale Design warten.
Die Kritiker von CSS-Frameworks weisen auf die vielen nicht benötigten Codezeilen hin, besonders bei kleineren Webseiten. Oder auf die «Aufräumarbeiten» eines FrontEnd Developer bevor ein Projekt losgeht. Da trotzdem jede:r seine eigene Herangehensweise hat. Wieder Andere kritisieren spezifische Frameworks, dass ihre Responsive-Fähigkeiten, Browser-Kompatibilität oder andere «Pflichtaufgaben» unsauber lösen.
CSS Preprocessors
CSS reicht manchmal nicht aus oder werden durch Variablen, Funktionen oder Mathematik ergänzt, um noch effizienter und raffinierter zu sein. CSS-Preprocessors vereinfachen komplexe und lange CSS Files und machen diese besser wartbar (maintainable), da sie Logik und Funktionalität in CSS integrieren. Eine Einführung.
Javascript ist für das «Verhalten» einer Webseite zuständig und wird für die Visualisierung von User-Interaktionen und der dynamischen Manipulation von HTML Seiten genutzt.
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.
Wer mit JavaScript arbeitet, benutzt JS Frameworks.
Analog zu CSS Frameworks geht es hauptsächlich darum, nicht alles von Grund auf neu zu erfinden, sondern von einer soliden Bibliothek aus zu starten. Dies erhöht die Arbeitsgeschwindigkeit und reduziert die Fehleranfälligkeit von Projekten.
Javascript animiert die Elemente im HTML-File und interagiert mit dem HTML-File.
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.
Wer mit JavaScript arbeitet, benutzt JS Frameworks.
Analog zu CSS Frameworks geht es hauptsächlich darum, nicht alles von Grund auf neu zu erfinden, sondern von einer soliden Bibliothek aus zu starten. Dies erhöht die Arbeitsgeschwindigkeit und reduziert die Fehleranfälligkeit von Projekten.
Der Kern einer Webseite ist das BackEnd. Es umfasst Funktionen, Inhalte, Datenbanken, Schnittstellen (APIs) etc.
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).
Die Inhalte der Webseite werden meistens mit einem Inhaltsverwaltungs-System bearbeitet.
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.
Dieser Überblick hilft zu verstehen, wie Web-Development entsteht.
Diese Strukturen definieren die gegebenen Möglichkeiten, Webdesign zu entwickeln. Alles basiert auf einer exakten Syntax und einer modularen Struktur. Wir Designer:innen wollen diese starren Regeln nicht immer wahrhaben. Aber wir sollten, den sie sind gut und kreativ.
Technik und Struktur
Nebst den physischen Elementen wie Pixel und Bildschirme sind Webseiten aus Code in Programmier- und Auszeichnungssprachen geschrieben. Diese Codezeilen sind die Bausteine der Webseiten-Anatomie. Die Anatomien von Webseiten sind oft fast identisch. Die Begriffe rund um Webdesign und der Welt, die es zu gestalten gilt, werden im Kapitel Cyberspace eingeführt.
