Mathias Bamert
Mathias Bamert
01.01.2021

Grundlagen zu Webentwicklung

In diesem Blog-Beitrag schauen wir auf die Webentwicklung. Was braucht es von Seitens des Entwickler-Teams, damit eine Webpräsenz oder eine App überhaupt entstehen kann.

Code

1. Allgemeines

Damit ein Webauftritt erarbeitet werden kann, braucht es neben den Grundlagen der Struktur auch eine Grundlage zur Entwicklung. Wir schauen die gängigsten Formatier-, Script- und Programmiersprachen an. Weiter gehen wir auf Frameworks, Content Management Systeme und automatisierten Webbuilder wie Wix und Squarespace ein.

2. Sprachen

Zu den meist benötigten Formatier-, Script- und Programmiersprachen gehören HTML, CSS, JavaScript und PHP. Untenstehend werden diese erläutert. Diese können in einfachen Text-Editoren geschrieben werden. Selbstverständlich gibt es auch hier Anwendungen, welche das Schreiben von Code vereinfachen. Neben einem der bekanntesten Editoren namens Atom gibt es viele Weitere. Adobe bietet mit dem Dreamweaver ein Programm an, in welchem Code geschrieben werden kann. Es beinhaltet sogar einen visuellen Bereich, damit der geschriebene Code gleich visuell angeschaut werden kann.

2.1 HTML

Die Hypertext Markup Language, abgekürzt HTML, ist eine textbasierte Auszeichnungssprache zur Strukturierung digitaler Dokumente wie Texte mit Hyperlinks, Bildern und anderen Inhalten. HTML-Dokumente sind die Grundlage des World Wide Web und werden von Webbrowsern dargestellt. Neben den vom Browser angezeigten Inhalten können HTML-Dateien zusätzliche Angaben in Form von Metainformationen enthalten. HTML dient als Auszeichnungssprache dazu, einen Text semantisch zu strukturieren, nicht aber zu formatieren. Die visuelle Darstellung ist nicht Teil der HTML-Spezifikationen und wird durch den Webbrowser und Gestaltungsvorlagen wie CSS bestimmt. Die aktuelle Version ist HTML 5.2.

2.2 CSS

Cascading Style Sheets, kurz CSS genannt, ist eine Stylesheet-Sprache für elektronische Dokumente und zusammen mit HTML eine der Kernsprachen des World Wide Webs. Sie ist ein so genannter «living standard» (lebendiger Standard) und wird vom World Wide Web Consortium (W3C) beständig weiterentwickelt. CSS wurde entworfen, um visuelle Darstellungsvorgaben weitgehend von den Inhalten zu trennen. Mit CSS können für verschiedene Ausgabemedien (Bildschirm, Papier, Projektion, Sprache) unterschiedliche Darstellungen vorgegeben werden. Die aktuelle Version ist CSS3.

2.3. JavaScript

JavaScript (kurz JS) ist eine Skriptsprache, die ursprünglich 1995 von Netscape für dynamisches HTML in Webbrowsern entwickelt wurde. Heute findet man JavaScript ausserhalb von Browsern Anwendung, so etwa auf Servern und in Microcontrollern. JavaScript hilft über das Document Object Model die Struktur und das Layout eines Dokumentes bzw. einer Website zu verändern. Zum Beispiel dynamische Manipulation von Webseiten, Plausibilitätsprüfung (Datenvalidierung) von Formulareingaben, Anzeige von Dialogfenstern sowie das Senden und Empfangen von Daten, ohne dass der Browser die Seite neu laden muss. Weiter dient sie zum Vorschlagen von Suchbegriffen während der Eingabe, Verschleierung von E-Mail-Adressen zur Bekämpfung von Spam sowie Schreib- und Lesezugriff auf Cookies und den Web Storage innerhalb des Browsers.

2.4. PHP

PHP (PHP: Hypertext Preprocessor, ursprünglich Personal Home Page Tools) ist eine Skriptsprache mit einer an C und Perl angelehnten Syntax, die hauptsächlich zur Erstellung dynamischer Webseiten oder Webanwendungen verwendet wird. PHP wird als freie Software unter der PHP-Lizenz verbreitet und zeichnet sich durch breite Datenbankunterstützung und Internet-Protokolleinbindung sowie die Verfügbarkeit zahlreicher Funktionsbibliotheken aus. PHP ist ein System, das Code serverseitig verarbeitet. Das bedeutet, dass der Quelltext nicht an den Webbrowser übermittelt wird, sondern an einen Interpreter auf dem Webserver. Erst die Ausgabe des PHP-Interpreters wird an den Browser geschickt. Die aktuelle Version ist PHP 8.0.0

3. Framework

Ein Webframework ist eine Software, die für die Entwicklung von dynamischen Webseiten, Webanwendungen oder Webservices ausgelegt ist. Sie gibt den Rahmen vor, in welchem man die Website erarbeitet. Es gibt unglaublich viele Web-Frameworks welche als Grundlage zur Programmierung von Websites dienen.

  • Angular – ein in TypeScript geschriebenes, komponentenbasiertes Framework, Nachfolger von AngularJS
  • Bootstrap – ein auf CSS/LESS und JavaScript basierendes UI-Framework. Es enthält auf HTML und CSS basierende Gestaltungsvorlagen für Typografie, Formulare, Buttons, Tabellen, Grid-Systeme, Navigations- und andere Oberflächengestaltungselemente sowie zusätzliche, optionale JavaScript-Erweiterungen.
  • React – ein JavaScript-Webframework bzw. JavaScript-Softwarebibliothek für responsive UIs und stellt ein Grundgerüst für die Ausgabe von User-Interface-Komponenten von Webseiten zur Verfügung (Webframework). Komponenten werden in React hierarchisch aufgebaut und können in dessen Syntax als selbst definierte JSX-Tags repräsentiert werden.

4. Library

Zum Framework dazu brauchen wir meist eine Library. In dieser sind die Inhalte gespeichert, welche durch das Framework aufgerufen werden. Libraries sind selbst nicht lauffähig sondern enthalten Hilfsmodule, die von Programmen angefordert werden.

Quelle: Wikipedia

5. Content Management System

Ein Content Management System (kurz CMS) wird zum Betreiben von Websites und Offline-Plattformen verwendet. Das CMS ist eine Software, die zur Erstellung und Verwaltung von Inhalten (Text-, Bild-, Video- oder sonstiger Form) verwendet wird. Meistens läuft ein CMS unabhängig von der visuellen Oberfläche (non-WISIWIG). Weit verbreitet sind vor allem Open-Source-Systeme, die sowohl professionelle als auch private Anwender nutzen.

Die bekanntesten CMS-Systeme kommen von Wordpress, Joomla, Drupal, TYPO3 und Contao. In diesem Blog ist Craft CMS hinterlegt. Ein modernes, flexibles und einfaches Content Management System. Ein weiteres spannendes und neues CMS-System ist Directus. Dieses wurde für die neue HWZ-Website evaluiert.

6. Website Builders

Website Builders (z.d. Homepagebaukasten) vereinen Frontend und Backend. Bedeutet, dass diese Systeme über die visuelle Oberfläche abgefüllt werden. Nach dem Ansatz «What you see is what you get» (WISIWIG). In den letzten Jahren haben sich diverse Player platziert und buhlen um die Gunst der Kundschaft. Die am meist verbreitetsten Webbuilder sind Squarespace, Wix, Jimdo und Shopify, welcher sich jedoch auf das Einkaufserlebnis spezialisiert hat. Mit Webland und Cyon mischen auch zwei nationale Player im Website Builder-Geschäft mit.

Weiter kommen immer mehr Webbuilder auf, welche sich an Designer richten, die grundlegende Formatier- und Programmierkenntnisse haben. Dazu gehören Webflow, Elementor (mit Wordpress) und ganz neu Editor X.