Grundlagen der Webprogrammierung

HTML, CSS, JavaScript, PHP. Vielleicht schon mal gehört und gefragt, warum es überhaupt verschiedene Sprachen gibt, welche es für Webseiten braucht?
Dann noch Begriffe wie Jquery, Bootstrap, React, Python, Angular und vieles mehr. In diesem Artikel versuche ich zu durchleuchten, was hinter all diesen Begriffen steckt, so dass Sie am Ende eine kleine, aber feine Übersicht über die Welt der Webprogrammierung haben.
Grundlagen der Webprogrammierung

Die Websprachen in der Übersicht

HTML

Stellen Sie sich vor, Sie sitzen im Büro und Ihr/ Vorgesetzte/r verlangt von Ihnen eine Powerpoint-Präsentation über das letzte Geschäftsjahr. Nun schicken Sie eine halbe Stunde später eine Präsentation zurück, bei welcher Sie nur die Titel, Texte und ein paar Bilder eingefügt haben, aber sonst nichts gemacht haben.


Die Präsentation würden Sie wohl zur Überarbeitung zurück erhalten. Tatsächlich haben Sie jetzt ein Bild davon, was eine reine HTML-Webseite sein würde (ich meine wirklich reines html). HTML ist keine Programmiersprache. HTML (steht für Hypertext Markup Language) ist eine Auszeichnungssprache, welche lediglich definiert. was auf der Webseite ist (Bausteine bzw. Elemente) und etwa so daher kommen würde, wie die Präsentation zu diesem Zeitpunkt.

CSS

Nun machen Sie sich an die Gestaltung.

Den Titeln im Text geben Sie eine grössere Schrift, setzen sie auf fett, geben ihnen eine besondere Farbe (im Corparate Design).
Manche Textblöcke positionieren Sie nebeneinander und die Bilder passen Sie an, so dass sie besser wirken. Vielleicht noch ein Rahmen und etwas Abstand zum Text, voilà schon sieht die Präsentation ordentlich aus.

Was Sie jetzt gemacht haben, übernimmt in der Webprogrammierung das CSS (steht für Cascading Style Sheets). Dieses ist also zuständig für das Erscheinungsbild aller Elemente.

Sie schicken die Präsentation zurück, erhalten sie aber wieder postwendet zur Überarbeitung. Dieses Mal sollen noch Animationen ergänzt werden. Die Präsentation soll an manchen Stellen Interaktionsmöglichkeiten bieten.

JavaScript

Was Sie in Powerpoint als Animationen bezeichnen, können Sie bei Webseiten mit sogenannten Skriptsprachen erstellen. Die bekannteste und verbreitetste davon ist JavaScript. Wobei das eher eine Untertreibung ist, denn es gibt kaum eine Webseite, welche nicht JavaScript verwendet. Alternativen gibt es beinahe nur in der Theorie - aber es gibt sie.


Mit Skriptsprachen können Sie Webseiten interaktiv machen. Diese Interaktionen finden dabei komplett auf dem Gerät des Nutzers statt, es ist keine Verbindung zu einem Server nötig.
So, wie Sie auf der Powerpoint-Präsentation Animationen auf Klick erscheinen lassen, können Sie auf einer Webseite zum Beispiel ein Mobil-Menü auf Klick erscheinen lassen.

PHP

In unserem fiktiven Beispiel verlangt Ihr/e Vorgesetzte/r nun, dass Sie ihr/ihm die Präsentation täglich zukommen lassen und dabei das Datum anpassen.

Die Anpassung des Datums findet bei Ihnen statt. In der Webprogrammierung entspricht dies der Server-Seite. Der Server schickt auf Anfrage der sogenannten Clients die fertige Webseite, bestehend aus HTML, CSS und Skriptsprachen.
Das, was der Server dem Client schickt, kann auf dem Server vorbereitet werden - man spricht von der Backend-Programmierung. So kann wie in der Präsentation das Datum angepasst werden, darüber hinaus noch einiges mehr. Auf vielen Seiten werden je nach Nutzer komplett verschiedene Inhalte geliefert, man denke zum Beispiel an Social-Media Plattformen oder E-Banking.

Es gibt eine breite Palette an serverseitigen Programmiersprachen:
  • PHP
  • C#
  • Java
  • Python
  • JavaScript
Ohne hier in die Tiefe zu gehen ist es primär Geschmackssache, welche Sprache man verwendet. Ich selbst nutze PHP. PHP läuft auf ziemlich allen Servern, ist lizenzfrei und quelloffen und wird - auch wenn es da und dort als etwas veraltete Sprache gilt - laufend weiterentwickelt. Gerade ist PHP 8 in den Startlöchern.

Libraries und Frameworks

Programmierer/innen sind manchmal etwas faul effizient und nutzen wiederkehrender Code gerne zweimal.

Fast immer stehen für gewisse Aufgaben ganze Bibliotheken (Libraries) und Grundgerüste (Frameworks) zur Verfügung.

Zu den bekanntesten Libraries gehören:

Bootstrap und Foundation

Zwei der bekanntesten CSS-Frameworks.


Bootstrap wurde ursprünglich von Twitter entwickelt und ist heute unter der MIT-Lizenz für alle verwendbar.
Foundation ist ebenfalls unter der MIT-Lizenz verwendbar und hat das Ziel, Webseiten möglichst effizient und responsive (angepasstes Design für Smartphones, Tablets, Laptops und Desktops) zu machen.

Jquery, Angular, React und Vue

Jquery, Angular, React und Vue sind Java-Script Bibliotheken. Fast alle Webseiten bedienen sich einer dieser Bibliotheken.

Webprojekt starten?

  1. Checkliste (PDF) kostenlos herunterladen
  2. Ausfüllen
  3. Projekt starten
Checkliste: Webprojekt starten (PDF)

Alles lernen oder machen lassen?

Als begeisterter Webprogrammierer kann ich selbstverständlich allen empfehlen, sich mit Webprogrammierung bzw. generell mit Programmierung zu beschäftigen.

Wenn man programmiert, lernt man spezielle Denkweisen und trainiert sich selbst in Planung, systematischer Problemlösung, Struktur- und Prozessdenken und Kreativität.

Wenn Sie eine einzige Webseite brauchen, ist es natürlich wenig sinnvoll, alles zu lernen. In diesem Fall melden Sie sich besser bei mir und lassen die Seite von mir erstellen

CHECKLISTE

Webprojekt starten?

  1. Checkliste (PDF) kostenlos erhalten
  2. Ausfüllen
  3. Projekt starten
Checkliste: Webprojekt starten (PDF)

Über mich

Undici-Web ist Ihr digitaler Partner für Webentwicklung, Webdesign, Online-Marketing und Websolutions mit Sitz Bern.

Diese Webseite verwendet Cookies, welche für die Funktionalität notwendig sind. Durch die Nutzung der Webseite stimmen Sie dem Einsatz gemäss der Datenschutzerklärung von Undici-Web zu.