Loading...
Programmiersprachen
Work in Progress

Programmiersprachen

Code bildet die Brücke zwischen Mensch und Maschine. Dies ist eine kurze Übersicht über die verschiedenen Arten von Code und ihre Einsatzgebiete.

Programmiersprachen

Die Sprache zwischen Maschinen und MEnschen

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 logisch denken, 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.

FrontEnd

Client Side

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

Client Side

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.

© LearnCode.academy
1

Hier ein Überblick

Scaffolding

Yaoman

Task Runners

Gulp

Grunt

Package Manager

NPM

Bower

Dependencies Management

Browserify

Webpack

RequireJS

Browser

Chrome, Firefox & Safari

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.

© Treehouse
2

Browser Rendering

Just in Time

Ein Browser arbeitet mit JIT-Compilers, um die Files die er vom Server bekommen hat zu interpretieren (zu rendern).

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.

© The Net Ninja
2

HTML

Hyper Text Markup Language

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.

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

asd

CSS

CASCADING STYLE SHEET

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.

Anatomie einer CSS Regel. Die Class ist der Selector und in den {} befindet sich die Deklaration von Property (Fähigkeit) und Value (Wert).
© Webdesign Essentials
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

JS

Javascript

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.

Weil Javascript dies alles 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.

Wie, wenn man in Powerpoint die Übergänge ausprobiert...

© BlondieBytes
5

Javascript

JS

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.

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

BackEnd

Server Side

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

CMS

Content Management System

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.

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

Scroll Snap
On
Off