Erste Schritte ins Web-Development

Seit das Internet existiert gewinnt es immer weiter an Bedeutung und Größe. Zum Zeitpunkt dieser Veröffentlichung gibt es beispielsweise über 1.83 Milliarden Webseiten im Netz und es werden stetig mehr. Umso wichtiger ist die IT-Branche und im Zusammenhang des heutigen Themas die Web-Entwicklung.

Doch dieser Bereich kann für Einsteiger erstmal überwältigend sein und man fragt sich: Wie fange ich am besten an? Was muss ich wissen und wie komme ich am besten an mein Ziel?

In diesem Artikel wird daher auf die Struktur und die Basics einer Webseite eingegangen und es wird erläutert, wie man schnell und simpel in die Web-Entwicklung einsteigt.

Wie funktioniert eine Webseite überhaupt und wie kommt sie nach Aufruf der URL in meinen Browser?

1.) Um eine gezielte Webseite aufzurufen wird, wie man es kennt, die Web-Adresse (URL) eingegeben. Beispiel hier: https://dart.work

2.) Diese Web-Adresse, auch Domain genannt, muss registriert sein und sorgt dafür, dass die Anfrage des Users an den richtigen Web-Server weitergeleitet wird. In diesem Beispiel ist die Ip-Adresse des Web-Servers die Folgende: 136.243.175.214

3.) Der Web-Server erhält nun die Anfrage und bereitet, je nach Bedarf, die Daten für eine Antwort an den Browser vor.

4.) Optional: Manchmal sind nicht alle Daten direkt auf dem Web-Server. In diesem Fall muss dieser selbst eine Anfrage an beispielsweise eine Datenbank oder eine API schicken (mehr dazu später). Die Antwort der externen Quelle wird dann in die Daten integriert und anschließend an den Browser geschickt.

5.) Der Browser nimmt die Daten entgegen und zeigt diese an.

Das Front-End ist in der Regel alles, was auf der Seite des Users passiert. Sprich die Elemente und das Aussehen der Seite sind zwar in Dateien auf dem Server definiert, werden aber erst vom Browser visuell dargestellt. Auch manche Scripts werden an den Browser gesendet und anschließend von ihm ausgeführt.

Im folgenden Abschnitt werden die Grundlagen des Front-Ends erläutert:

HTML (Hypertext Markup Language)

Html-Dateien sind dafür zuständig dem Browser zu sagen, was alles auf der Seite existiert. Somit sind sie der wichtigste Bestandteil einer Webseite und deren Grundlage. Html-Dateien sind die einzigen Komponenten im Front-End ohne die eine Seite nicht funktionieren kann. Obwohl Html auf den ersten Blick sehr daran erinnert ist es keine Programmiersprache, da es nicht in der Lage ist, Dinge auszuführen oder Werte zu verändern, es dient nur zum Anzeigen.

CSS (Cascading Style Sheets)

Css ist der ständige Begleiter von Html. Während Html dem Browser sagt, welche Elemente es gibt, sagt Css dem Browser wie diese Elemente aussehen sollen. Der Css-Code ist mit dem Html-Code verknüpft, damit es auf die Html-Elemente zugreifen kann. Css ist genau wie Html keine Programmiersprache.

JS (Javascript)

Javascript kann für vieles genutzt werden, dient aber in der Regel dazu die Funktionalität der Seite zu erstellen und ist zuständig für die Interaktion des Users mit der Seite. Javascript ist eine Programmiersprache und ist somit auch in der Lage Werte zu erschaffen, Algorithmen auszuführen oder auf Html- und Css-Code zuzugreifen und diesen zu bearbeiten. Javascript kann neben dem Front-End auch im Back-End verwendet werden.

Das Back-End umfasst alle Dateien, die sich auf dem Web-Server befinden, die für den User nicht zugänglich sind. Sie dienen ausschließlich der Funktionalität und der Konfiguration der Seite selbst und der Verwaltung von Daten. Das Back-End kann, je nachdem wie man seine Seite erstellt, unterschiedlich aussehen und verschiedene Funktionen haben.

Hier sind einmal ein paar typische Aufgaben und Funktionen des Back-Ends:

Eigenes Routing

Die URL-Endung im Browser kann wie ein Pfad verwendet werden um gezielte Inhalte anzufordern. Hier ein Beispiel für eine simple Back-End-Struktur auf einem Web-Server:

Solange die Berechtigung im Backend nicht geändert wird kann man standardmäßig folgendermaßen auf die Dateien zugreifen:

https://beispiel-domain.de/index.html --> Browser zeigt Inhalt der index.html-Datei.

https://beispiel-domain.de/assets/css/impressum.css -> Browser zeigt Inhalt der impressum.css-Datei.

Gerade der letztere Pfad ist allerdings eher unschön und bei komplexen Seitenstrukturen oder der Verwendung von Parametern kann die URL-Endung sehr schnell lang und unschön werden. Daher haben viele Web-Server ein eigenes Routing-System welches einfache Pfade verwendet und diese auf die Dateien in den komplexen Pfaden umleitet. Hier ein Beispiel:

Gerade der letztere Pfad ist allerdings eher unschön - bei komplexen Seitenstrukturen oder der Verwendung von Parametern kann die URL-Endung sehr schnell lang und unleserlich werden. Daher haben viele Web-Server ein eigenes Routing-System, welches einfache Pfade verwendet und diese auf die Dateien in den komplexen Pfaden umleitet. Hier ein Beispiel:

Eingegeben wird: https://beispiel-domain.de/impressum

Die Datei impressum.html liegt zwar womöglich hier: https://beispiel-domain.de/public/templates/impressum.html, allerdings ist im Backend hinterlegt, dass bei der einfachen Endung diese bestimmte Datei gesendet werden soll, was die URL schlank und einfacher wirken lässt.

Interaktion mit Datenbanken und APIs (application programming interface)

Manchmal ist es aus Sicherheitsgründen oder auf Grund der Speicherkapazität sinnvoll, Dinge auszulagern - da kommen Datenbanken ins Spiel. Ein Datenbank-Server ist im Prinzip ähnlich zu einem Web-Server mit dem Unterschied, dass er tief gehende Strukturen hat und dazu dient, extrem viele oder auch sensible Dinge wie Account-Daten zu speichern. Außerdem ist er in der Regel passwortgeschützt, was zusätzliche Sicherheit bietet. Sollte der Web-Server also Inhalte der Datenbank für die Antwort an den Browser benötigen, so macht er eine eigene Anfrage an die Datenbank und integriert die Antwort in die Antwort für das Front-End.

APIs haben das gleiche Prinzip, hier handelt es sich allerdings um einen anderen Web-Server. Normalerweise ist es aus Sicherheitsgründen nicht möglich, zwischen zwei Web-Servern zu kommunizieren. Allerdings kann eine Schnittstelle hergestellt werden, welche genau das erlaubt. Diese nennt man API. Diese können entweder für jeden freigegeben werden oder auch nur für bestimmte Geräte. Auch hier holt sich der Web-Server die externen Daten von der API und integriert diese in seine Antwort an das Front-End.

Durch diese Methoden können gerade komplexe oder große Webseiten eine klare Struktur verfolgen und übersichtlich bleiben.

Nachdem man nun seine Seite aufgebaut hat und sowohl Html als auch Styling und Scripts fertig hat, stellt sich die Frage: Wie bekomme ich das alles ins Netz?

Nun, das ist der Hosting-Prozess. Dafür braucht man eigentlich nur zwei Dinge. Einmal eine registrierte Domain und einen Web-Server. Hier sollte man der Einfachheit halber auf Dienste wie beispielsweise Strato zurückgreifen, die diese Dinge direkt als Packet anbieten. Hinzu kommen außerdem Dinge wie regelmäßige Backups, eine einfachere Nutzeroberfläche, regelmäßige Wartung und einen speziell ausgelegten Server. Diese Dienste sind normalerweise auch günstiger, als einen eigenen Server permanent laufen zu lassen.

Die Domain muss registriert werden und ist letztlich so etwas wie der Name der Webseite. Hier ein Beispiel:

Name der Seite: dart.work

Domain: https://dart.work

Außerdem wird hier ebenfalls die Ip-Adresse des Webservers hinterlegt. Im Fall von dart.work ist das diese hier:

136.243.175.214

Sollte man den Server wechseln wollen, oder eine andere Seite von einem anderen Server über diesen Namen anzeigen wollen, so kann man einfach die dementsprechende Ip-Adresse hinterlegen. Allerdings muss auch der Name der Domain im Back-End des Web-Servers hinterlegt sein.

Gerade wenn man eine erste Seite mit den obigen Komponenten gebaut hat wird man feststellen, dass eine Seite wie Youtube oder Facebook zu bauen dann doch eher unmöglich erscheint, oder ein Team von hunderten Mitarbeitern vermuten lässt. Natürlich gibt es viele Tools, die einem das Leben in vielerlei Hinsicht extrem vereinfachen. Hier sind mal ein par sehr bekannte:

SCSS

Das ist eine erweiterte Form von Css, welche es einem ermöglicht Styling kompakter und überschaulicher zu schreiben.

JQuery

Ein Beispiel für eine Javascript-Library, in der vieles vereinfacht wurde und neue nützliche Funktionen hinzugefügt wurden. Auf diese Weise kann man schneller und komfortabler Javascript schreiben.

Bootstrap

Ein Beispiel für eine Html-Library, die mit bereits vordefinierten Html und Css das Erstellen von Elementen auf einer Seite erleichtert.

Typo3

Ein Beispiel für ein CMS-System. Diese Systeme können genutzt werden um vieles einfacher zu machen. Sie haben eine bestimmte Nutzeroberfläche und können verwendet werden um einfach Content zu bearbeiten, Elemente anzupassen oder bestimmte Funktionalitäten einzubauen, ohne alles selbst erstellen zu müssen. Sie werden unter anderem dafür verwendet Redakteuren die Möglichkeit zu geben, den Inhalt einer Seite zu editieren ohne den Code zu verändern.

Für meinen Teil kann ich sagen, dass ich es definitiv am sinnvollsten finde, wenn man sich mit all diesen Bereichen auseinandersetzt. Dabei ist es anfangs noch gar nicht so wichtig ein Profi in Html zu sein, oder das cleanste Styling zu haben. In erster Linie geht es darum, den Aufbau und das System in der Grundstruktur zu verstehen. Daher empfehle ich, sich mit den Themen von oben nach unten durchzuarbeiten, bis man eine kleine Seite selbst erstellt und gehostet hat. Hierbei ist es egal, ob es eine Hello-World-Seite ist oder schon etwas komplexer wird. Wenn man das Grundprinzip von Html und Css versteht, Javascript in kleinen Teilen verwenden kann und das Ganze online passiert, dann hat man schon mal eine gute Basis für die Zukunft.

Alles andere kommt mit der Zeit, und natürlich gilt im Web-Development deutlicher denn je: Alles wurde schon mal irgendwo geschrieben, für jedes Problem gibt es irgendein Forum, dass sich damit befasst. Daher sollte man beim Entwickeln immer Augen und Ohren offen halten und man wird eine Antwort finden.