Loading...
Programmiersprachen
Work in Progress

Programmiersprachen

Code bildet die Brücke zwischen Mensch & Maschine. Dies ist eine grobe Übersicht über die verschiedenen Arten von Code und ihre Einsatzgebiete.
Die Sprache zwischen Maschinen und MEnschen

Programmiersprachen

Schauen wir uns die «Programmiersprachen» an, die für Webdesigner interessant sind.

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 gleichzeitig logisch sein um ihre Aufgaben zu meistern.

© CrashCourse
0

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.

Client Side

FrontEnd

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.

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

Webseiten werden in zwei Kategorien 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.

© LearnCode.academy
FrontEnd Build Tools

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 handeln. Dies ist insbesondere eine gute Massnahme wenn, man in einem Team oder an einem grösseren Projekt arbeitet.

Es ist jedoch eine Huhn & Ei Problematik. Zuerst muss man HTML, CSS und Javascript schreiben können, bevor man damit anfängt, danach fängt man aber mit Build Tools an.

Hier ein Überblick

Scaffolding

Yaoman

Task Runners

Gulp

Grunt

Package Manager

NPM

Bower

Dependencies Management

Browserify

Webpack

RequireJS

Chrome, Firefox & Safari

Browser

Browser rendern HTML/CSS und Javascript in visuell sichtbare Layouts.

Nebst dem Rendern speichert und verwaltet ein Browser auch Cookies (z. B. Account-Daten von Facebook) oder ermöglicht das Anlegen von Bookmarks und Browser-Verläufen, also das Abspeichern der besuchten Webseiten.

© Designveloper on Youtube. Der Titel könnte auch heissen «How a Browser works».
2
JIT (Just in Time) Compilers

Ein Browser arbeitet mit JIT-Compilers, um die Files die er für eine bestimmte Webseite vom Server geladen hat zu interpretieren (zu rendern).

Er wandelt den Code in binären Code (010101) um, damit er auf dem Screen 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.

Hyper Text Markup Language

HTML

HTML strukturiert das Layout einer Webseite. Im Grunde ist HTML ein ganz normales Textfile. Statt im Format .doc ist es .html.

Titel, Bilder und Tabellen etc. werden als «Absatzformate» (Markup-Tags) gespeichert.

Diese Text-Hierarchie und Klassifikation hilft dem Leser den Text schneller zu interpretieren.

Hyper steht für die Möglichkeit der Verlinkung. Verlinkung von Seiten, ist die Essenz, woraus das Internet gemacht ist.

Web-Developer arbeiten oft mit HTML Boilerplate (Mustercode)

Die ersten paar Zeilen HTML Code. Html, Head, Body mit eine H1 und P Tag. Verschachtelt strukturiert.
Die ersten Zeilen HTML-Code.
Die ersten paar Zeilen HTML Code. Html, Head, Body mit eine H1 und P Tag. Verschachtelt strukturiert.

asd

Cascading Style Sheet

CSS

CSS ist für das visuelle Styling einer Webseite zuständig. Dabei werden die im HTML definierten Markups (HTML-Tags) im CSS gestylt.

HTML-Tags, Klassen und IDs sind CSS-Selektoren und lassen sich mit Style-Attributen versehen.

So kann man alle Heading-1-Titel in 35pt. Arial und Rot schreiben. Ändert man den Style dieser Klasse, ändert sich der Style überall im HTML, wo diese Klasse definiert wurde. 

Cascading heisst soviel, dass sich Styles einem Wasserfall gleich vererben sowie auf verschiedenen Style-Sheets übertragen können, alle Selektoren im HTML-File ihrer Hierarchie entsprechend ausgegeben werden. Dazu später mehr.

Anatomie einer CSS Regel. Die Class ist der Selector und in den {} befindet sich die Deklaration von Property (Fähigkeit) und Value (Wert).
© learnwebcode.com
Anatomie einer CSS Regel. Die Class ist der Selector und in den {} befindet sich die Deklaration von Property (Fähigkeit) und Value (Wert).
CSS ist nur der Anfang

Web-Developper nutzen oft CSS-Frameworks als Startpunkt ihres Styling 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-Classen 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.

Häufig genutzte Frameworks sind: Bootstrap, Skeleton oder Foundation oder einfache Grid-Frameworks wie 960.gs

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.

Häufig genutzte CSS-Preprocessors sind: Sass, {Less} und Stylus

Javascript

JS

Javascript ist für das «Behaviour» 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.

Nutze die Power von Javascript

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 Frameworks (MV* Frameworks)

jQuery (John Resig + Team)

React.js (Facebook)

Angular.js (Google)

Backbone.js (Jeremy Ashkenas)

Node.js (Linux)

Ember.js (Tilde)

HTTP-Request Technik

Ajax

Daten-Austausch Formate

JSON (JavaScript Object Notation)

XML (Extensional MarkUp Language)

Vanilla JS

Ein Super leichtes Javascript Framework. Ein File. Total Simple. Es ist leer.

Du musst nur Javascript können.

Vanilla.js

Server Side

BackEnd

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).

Content Management System

CMS

Die Inhalte der Webseite werden meistens mit einem Inhaltsverwaltungs-System bearbeitet. 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), Interaktion (JS) ist sinnvoll. Es ermöglicht eine klare Aufgabentrennung für Teams oder als 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.

© FLUXS
7
Eine CMS Rundschau

Es gibt extrem viele CMS Plattformen hier eine Auswahl

PHP

Wordpress

Drupal

Joomla

Grav

Typo3

Python-Django Frameworks

FeinCMS

DjangoCMS

.Net (Microsoft)

ASP

Sitecore

DotNetNuke

Dieser Überblick hilft zu verstehen, wie Web-Development entsteht.

Diese Strukturen definieren die Möglichkeiten die uns Designer gegeben werden um Webdesigns zu entwickeln. Was eindeutig ist. Alles basiert auf einer exakten Syntax und einer sauberen Struktur. Wir Designer*innen wollen diese starren Regeln nicht immer wahrhaben. Aber wir sollten.

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 sehr ähnlich. Die Begrifflichkeiten rund um Webdesign und der Welt, die es zu gestalten gilt, werden im Kapitel Cyberspace eingeführt.