Grundlagen

Bevor du eine Website von Grund auf bauen kannst, benötigst du ein grundlegendes Verständnis über die Funktionsweise des Internets, sowie Wissen über Web-Technologien und Begrifflichkeiten.

Evolution & Anwendungen

Tim Berners Lee und weitere Wissenschaftler legten, zwischen 1989 und 1992 die Grundsteine für das World Wide Web. Das Internet, wie wir es heute kennen. Sie entwickelten eine ganze Reihe von technischen Lösungen für den einheitlichen Informationsaustausch zwischen Computern. In der Folge wurde 1992 die allererste Website info.cern.ch veröffentlicht, die bis heute (kaum verändert) online ist.

Heute hat der Begriff "Website" eine sehr vielschichtige Bedeutung. Beispielsweise sind viele Apps auf deinem Smartphone grundsätzlich Websites, oder nutzen zumindest Web-Technologien.

Auch viele klassische Software-Anwendungen erhalten zunehmend Konkurrenz von web-basierten Alternativen. Beispielsweise Microsoft Word durch Google Docs, Sketch durch Figma, Playstation durch Google Stadia etc. Astronauten einer SpaceX Rakete haben gar mit Webtechnologien an der internationalen Raumstation ISS angedockt.

Dank steigender Leistungsfähigkeit von Geräten und Internetverbindungen sind die Anwendungsmöglichkeiten nahezu endlos. Vom einfachen Blog oder der Unternehmenswebsite, bis hin zu interaktiven Erlebnissen, Games, Smartphone-Apps oder gar Interfaces in Autos und Raketen. Ein spannendes Feld also, um sich als Designer auszutoben.

Aufgabe

Recherchiere ein paar gute Beispiele für Websites oder Anwendungen, die die Evolution und die heutigen Möglichkeiten veranschaulichen, damit du diese anschliessend der Klasse präsentieren kannst. Füge deine Links und Beispiele in dieses Google Doc ein.

Infrastruktur & Architekturen

Client & Server

Sämtliche Informationen und Daten, die das Internet zu bieten hat, werden irgendwo gespeichert. In der Regel übernehmen Server diese Aufgabe. Diese sind im Grunde leistungsfähige Computer die konstant mit dem Internet verbunden sind und gleichzeitig viele Anfragen entgegennehmen können. Alles was Anfragen an solche Server sendet und eine Antwort erwartet, wird Client genannt.

Nehmen wir an, du möchtest die Seite google.com besuchen. Das Kommunikationsmodell würde also folgendermassen aussehen:

Der Client, z.B. dein Chrome oder Safari-Browser sendet die Anfrage (Request), dass du google.com besuchen möchtest an den verantwortlichen Server. Dieser bearbeitet die Anfrage, sucht die gewünschten Daten in seinem Speicher (Datenbank etc.) und schickt diese als Antwort (Response) zurück zum Client. Dein Client/Browser interpretiert den Code in der Response und bringt diesen wiederum in eine visuelle Darstellung.

Statisch & Dynamisch

Wird von einer statischen Websitearchitektur gesprochen heisst dies meistens, dass sämtlicher Code zusammen mit den Inhalten als "fixfertige" Dateien auf dem Server liegen. Wird eine solche Seite besucht, muss der Server keine komplexen Berechnungen anstellen, sondern liefert einfach diese Dateien 1:1 an den Client / Browser zurück. Eine solche Website ist daher meist sehr schnell und sicher.

Beispielsweise dieser Guide oder auch das Übungsportfolio haben eine statische Architektur. Dank diverser Werkzeuge und Hilfsmittel ist der statische Ansatz insbesondere für kleinere Seiten sehr beliebt. Sobald eine Website allerdings mit grossen Mengen an Daten oder aufwändigen Berechnungen umgehen können muss, hat dieser Ansatz einige Nachteile. Stell dir vor, Instagram würde für jeden einzelnen Post eine statische Datei speichern. Bei jedem neuen Kommentar müsste dann immer die gesamte bestehende Datei überschrieben werden. Bei Millionen von Nutzern und Interaktionen pro Sekunde wäre dies nicht sehr effizient.

Für solche Fälle gibt es die dynamische Websitearchitektur. Dabei ist Code und Inhalt voneinander getrennt und wird erst beim Aufruf der Website dynamisch zusammengebaut. Die Inhalte sind dabei meist in einer Datenbank gespeichert und die Dateien beinhalten den Code, um diese Inhalte zu finden und einzufügen. Je nach Anforderungen und Wahl der Technologie kann das Zusammenfügen sowohl auf dem Server als auch direkt im Client erfolgen.

Aufgabe

Recherchiere anschauliche Beispiele oder Grafiken, damit du diese Prinzipien der Klasse präsentieren kannst. Füge deine Links und Beispiele in dieses Google Doc ein.

Begrifflichkeiten & Sprachen

Development

Der Begriff Development heisst erstmal nur "Entwicklung" und wird nicht nur für den Programmierbereich verwendet. Sprechen wir jedoch von Software- oder Web-Development ist damit der Prozess gemeint, der das konzipieren, spezifizieren, programmieren, testen und dokumentieren von Code umfasst.

Semantik & Syntax

Semantik ist - vereinfacht gesagt - die Lehre von der Bedeutung eines Wortes oder auch von den verschiedenen möglichen Bedeutungen eines Wortes im Zusammenhang. Jede Sprache hat solche semantischen Regeln. Das ist bei Programmiersprachen nicht anders. Nur durch eine korrekte Semantik weiss der Computer beim lesen deines Codes, was du von ihm willst.

Die Syntax regelt den Aufbau von Aussagen in einer Sprache. Also in welcher Reihenfolge welche Ausdrücke stehen müssen, um Sinn zu ergeben. Auch dieses Konzept findet sich in der Programmierung wieder. Nur wenn du die syntaktischen Regeln der jeweiligen Programmiersprache einhältst, wird dein Code funktionieren.

Logic, Markup, Styles

Code kannst du in einer Vielzahl von Sprachen schreiben, doch nicht all diese Sprachen sind auch Programmiersprachen. Von einer Programmiersprache wird grundsätzlich dann gesprochen, wenn diese in der Lage ist logische Abläufe und Berechnungen durchzuführen. Zu den bekanntesten Programmiersprachen gehören etwa Python, Java, PHP oder JavaScript.

Für die Erstellung deines Portfolios ist erst einmal keine Programmiersprache notwendig. Du kannst mir der Markup-Language HTML (Auszeichnungssprache) deine Seite strukturieren und mit der Stylesheet-Language CSS (Gestaltungssprache) die Website entsprechend gestalten.

Aufgabe

Recherchiere anschauliche Beispiele oder Grafiken, damit du diese Prinzipien der Klasse präsentieren kannst. Füge deine Links und Beispiele in dieses Google Doc ein.

Fachgebiete

Frontend

Ein Frontend-Developer, kümmert sich grundsätzlich immer um den Teil der Programmierung, der eine visuelle Benutzeroberfläche verlangt. Im Frontend wird mit Technologien und Sprachen programmiert die ein Webbrowser wie Chrome, Safari etc. unterstützt. Also HTML, CSS und JavaScript.

Backend

Das Backend kümmert sich eher um Abläufe im Hintergrund, die den End-Nutzern meist verborgen bleiben. Backend-Developer entwickelten etwa die Kommunikation zu Datenbanken, verarbeiten sicherheitsrelevante Dinge auf dem Server und erstellen oft auch Verwaltungssysteme (z.B. ein CMS wie Wordpress). Im Backend können wir mit einer Vielzahl von Technologien und Sprachen arbeiten, sofern der Webserver diese unterstützt, bzw. dafür konfiguriert wurde.

Fullstack

Heute lässt es sich kaum noch eindeutig bestimmen, welche Aufgaben genau zum Frontend und welche zum Backend gehören. Es gibt viele Überschneidungen und für fast jede Programmier-Aufgabe, gibt es Lösungswege im Frontend aber auch im Backend. Tendenziell verlagert sich jedoch zunehmend mehr Programmier-Logik (z.B. das dynamische Zusammensetzen von Seiten basierend auf bestimmten Bedingungen) vom Backend ins Frontend. Der Begriff Fullstack-Developer dient dabei als Zusammenfassung für jene Entwickler, die in beiden Disziplinen arbeiten.

Aufgabe

Recherchiere kurz anschauliche Beispiele für Front- und Backend Tätigkeiten oder Anwendungen, die du anschliessend der Klasse präsentieren kannst. Füge deine Links und Beispiele in dieses Google Doc ein.