Die Technik hinter Websites- ein Einblick
Dieser Artikel gibt Ihnen einen Einblick hinter die technischen Kulissen von Websites im allgemeinen und im speziellen für „DasHeimnetzwerk.de“. Profitieren kann von diesem Wissen eigentlich jeder, denn das Web ist allgegenwärtig. Insbesondere profitieren aber diejenigen, welche eine Website benötigen und selbst erstellen, bzw. erstellen lassen wollen. Anlass und Motivation für diesen Artikel war, dass nach ca. vier Jahren die Technik hinter der Website „DasHeimnetzwerk.de“ auf einen aktuellen Stand gebracht wurde.
Der Artikel gliedert sich in folgende Abschnitte.
Notiz: Im folgenden wird zwischen Website und Webseite unterschieden. Eine Webseite ist eine einzelne Seite eines gesamten Webauftritts, der Website. Eine Website besteht oft aus vielen Webseiten. Es gibt aber schon seit Jahren den Trend die gesamte Website auf einer einzigen Seite unterzubringen, den sogenannten „One-Page Websites“.
Server und Website-Kategorien
Wer im Internet unterwegs ist und Webseiten besucht, der ruft die Daten einer Webseite von einem sogenannten „Server“ ab. Dieser liefert die darzustellenden Informationen. Der Server ist im Prinzip nur ein Computer, fast wie bei Ihnen zu Hause. Doch auf diesem läuft spezielle Software, welche für die Anforderungen eines Webserver notwendig ist.
Eine naheliegende Vermutung ist, dass Informationen einer Website schon fix und fertig auf dem Server vorliegen und bei Anfrage direkt ausgeliefert werden. Mit dieser Vermutung liegt man für einige Websites auch richtig, den sogenannten statischen Websites, aber nicht für alle. Viele Websites generieren diese Informationen erst zum Zeitpunkt der Anfrage, die sogenannten dynamischen Websites. Diese Websites haben „nur“ die Informationen gespeichert wie eine Webseite auszusehen hat und erstellen diese dann sozusagen „just in time“.
Warum gibt es diese Unterscheidung?
Die statischen Websites, also diejenigen welche die Webseiten schon direkt fertig vorliegen haben und nur noch ausliefern müssen, haben folgende Vorteile:
- Die Daten können schneller geliefert werden, da sie ja schon fertig vorliegen. Das ist sowohl für die Besucher wichtig welche nicht warten wollen, als auch ein Kriterium für eine prominente Platzierung bei Suchmaschinen wie Google.
- Es wird weniger Leistung auf dem Server benötigt, da kein Code ausgeführt werden muss welcher eine Webseite erst einmal erzeugt. Das ist für die Wahl des Tarifs wichtig, welchen man von dem Unternehmen bucht, welches den Server stellt.
- Die Website ist sicherer, da weniger Schnittstellen existieren wo der Server selbst aktiv Code ausführt. Somit bietet die Website weniger Angriffsoberfläche für potentielle Hacker.
- Man hat mehr Kontrolle über die Website, da die Daten der Website näher an den grundlegenden Webtechnologien sind und ohne Datenbank im Hintergrund auskommen. Mit dynamischen Websites gibt es eine zusätzliche Schicht (inkl. Datenbank), welche die grundlegenden Webtechnologien von dem Ersteller der Website trennen.
Die dynamischen Websites, das sind jetzt diejenigen welche die Seite dann erzeugen wenn eine Anfrage eintrifft, haben auch einige Vorteile:
- Die just erwähnte Trennung der technischen Details von den Inhalten ist auch von Vorteil. So kann man Anwendungen einsetzen, wo man über eine relativ einfach zu bedienende Oberfläche eine Website erstellt und später wartet. Man muss selbst nicht viel Wissen über z.B. CSS oder HTML besitzen. WordPress ist ein populäres Beispiel für eine solche Anwendung. Man hat mit der eigentlichen Technik wenig zu tun, sondern meldet sich im Prinzip einfach mit einem Browser bei WordPress an, erstellt und ändert darüber seine Website.
- Die Pflege einer Website zeitgleich mit mehreren Personen wird vereinfacht. Durch die Vergabe von Benutzerkonten und Zugriffsrechten können viele Personen parallel die Website pflegen.
Es klang schon kurz an, dass in der Regel die Serverkapazität für eine Website über einen externen Dienstleister gebucht wird, dem sogenannten „Hoster. Dieser verfügt sowohl über die notwendige Anbindung an das Internet, mit hohem Durchsatz, als auch all dem Know-How wie man einen Server einrichtet und wartet. Der Kunde lädt im Prinzip nur den Code seiner Website in einen dafür vorgesehenen Ordner (bei statischen Websites) oder bedient z.B. WordPress (bei dynamischen Websites).
Notiz: Anwendungen wie WordPress werden als sogenannten Content-Management-Systeme (CMS) bezeichnet und kategorisiert. Es gibt eine Vielzahl von CMS-Systeme, mit unterschiedlichsten Ausrichtungen, Vor- und Nachteilen. So gibt es auch CMS-Systeme für statische Websites, welche die Erstellung und Wartung einer Website auf einem PC unterstützen. Und es gibt CMS-Systeme welche versuchen die Vorteile statischer und dynamischer Webseiten zu bieten. Das CMS „Kirby“ soll hier als Beispiel genannt werden.
„DasHeimnetzwerk.de“ ist jetzt eine statische Website. Die notwendigen technischen Kenntnisse liegen vor und es gibt auch nur wenige Personen welche Änderungen an der Website vornehmen. Dadurch können die geschilderten Vorteile genutzt werden. Gerade der niedrige Leistungsbedarf und damit die Möglichkeit eines günstigen Tarifs hat sich, man kann schon sagen, als existenziell erwiesen. Bei ca. 50000 Besuchern pro Monat und entsprechend mehr Seitenabfragen, müsste für den Leistungsbedarf einer dynamischen Website sonst ein deutlich teurerer Tarif in Anspruch genommen werden.
Frontend
Als Frontend bezeichnet man die bei Ihnen lokal im Browser verarbeiteten Daten einer Webseite. Das ist in der Hauptsache das sichtbare grafische Design und die Oberfläche, aber auch im Hintergrund ablaufender JavaScript-Code. Als Beschreibungssprache wie eine Webseite aussehen soll dient CSS (engl.: Cascading-Style-Sheets). Wer mag kann tatsächlich rein über eine CSS-Beschreibung seine Webseiten gestalten. Das wurde mit der vorherigen Version von „DasHeimnetzwerk.De“ auch so gemacht. Der Lerneffekt war enorm, der Aufwand aber auch.
Einfacher geht es wenn man Vorlagen verwendet. Grob gesagt werden Vorlagen dabei in „Themes“ und „Frameworks“ unterschieden.
Ein Theme ist im Prinzip ein fix und fertiges Design, welches Sie nur noch mit Ihren Inhalten füllen müssen. Ein populäres CMS-System wie WordPress bietet tausende, wenn nicht gar zehntausende von Themes. Da ist eigentlich für jeden Zweck etwas dabei. Die Schwierigkeit, man muss das passende Theme nur finden und nicht alle Themes werden von Ihren Erstellern kostenlos angeboten.
Ein Framework ist hingegen sozusagen ein Baukasten. Es bietet verschiedene Elemente, welche Sie individuell nach Ihrem Bedarf zu einem ganzen zusammenfügen. Die populärsten Frameworks bieten, basierend auf ihren Elementen, aber auch schon fertige Themes an, welche Sie verwenden können.
Themes und Frameworks haben gemein das Sie die Erstellung einer Website vereinfachen, dafür aber Einschränkungen auferlegen. Man ist nicht mehr völlig frei in der Wahl der Mittel, welche das reine CSS bietet. Wobei Experten sowohl Themes als auch Frameworks per CSS adaptieren können, doch dann wird es wieder aufwendiger.
„DasHeimnetzwerk.de“, in seiner jetzigen Version, setzt das Framework „W3CSS“ ein. Es ist, im Vergleich zu anderen Frameworks wie z.B. Bootstrap, ein relativ schlankes Framework. Einfacher in seiner Anwendung und ein Besucher der Website muss weniger Daten mit herunterladen, es ist aber dafür auch etwas einschränkender in den gebotenen Funktionen.
Notiz: Eine Herausforderung in der Gestaltung des Frontends ist die hohe Vielfalt an Bildschirmgrößen der Endgeräte. Von einem 32 Zoll Monitor bis zu einem kleinen Smartphone-Display, eine Webseite sollte überall ansprechend aussehen und funktional sein. Das Schlagwort für die Lösung der Herausforderung heißt „responsive Design“. Das bedeutet, dass die Website so gestaltet ist, dass sie sich automatisch der Größe des Bildschirms anpasst auf welcher sie dargestellt wird. Sowohl Themes, als auch Frameworks bieten hierfür Hilfestellungen.
Entwicklungsumgebung
Gleich welche Alternative verwendet wird, es braucht immer noch Anwendungen welche Sie bei der Erstellung Ihrer Website unterstützen. Bei dynamischen Websites ist es die Anwendung als solche welcher Sie sich bedienen. So bieten viele Hoster an, dass Sie WordPress direkt auf dem Server des Hosters installieren. Danach bedienen Sie sich eines normalen Browsers wie Firefox, melden sich auf dem Server des Hosters unter WordPress an und beginnen mit der Gestaltung Ihrer Website.
Notiz: Der Eindruck könnte entstehen das WordPress ein extrem einfach zu bedienende Anwendung ist. Dem ist nicht so. Sie müssen sich immer noch intensiv damit auseinandersetzen wie man WordPress bedient, welche Möglichkeiten es bietet und wie Sie damit an Ihr Ziel gelangen. Ferner wie Sie die Risiken minimieren, welche Sie bei der Verwendung von WordPress eingehen. Im Vergleich zu vielen anderen CMS-Systemen oder dem codieren einer Website per Hand kann man WordPress aber schon als einfach bezeichnen.
Bei statischen Websites entwickeln sie die Website in der Regel auf Ihrem heimischen Computer. Dadurch bekommen Sie eine extrem hohe Vielfalt an Mitteln und Werkzeugen, welche Sie einsetzen können. Als Resultat ergibt sich eine hohe Flexibilität, ferner eine sehr gute Kontrolle über die Daten Ihrer Website, aber auch eine vergleichsweise hohe Komplexität im Zusammenspiel aller eingesetzter Mittel.
So dient Linux als grundlegendes Betriebssystem für die Entwicklungsumgebung von „DasHeimnetzwerk.de“. Linux an sich bietet alle Funktionen, um die Daten der Website von und zu dem gewählten Hoster zu transferieren. Ferner eine hohe Auswahl an, oft freien und quell-offenen Anwendungen, um die Entwicklung der Website aber auch der Inhalte zu unterstützen.
Um nicht jede einzelne Webseite persönlich von Hand gestalten zu müssen, wird sich des statischen-CMS „Jekyll“ bedient. Damit reicht es aus einmalig ein Design zu gestalten, welches dann automatisiert auf alle Webseiten der Website angewandt wird. Für die Prüfung und Korrektur der Website bieten die gängigen Browser wie Firefox und Chrome Entwickler-Funktionen.
Für die textuelle Definition der Website als ganzes und der Einbindung des W3CSS-Frameworks wird der Texteditor „Atom“ eingesetzt. Dieser dient auch zur Erstellung der Inhalte, welche in der Beschreibungssprache „Markdown“ ausgeführt sind. Damit bekommt man die Möglichkeit einer einfachen aber effektiven Formatierung der Texte, mit extrem hoher Flexibilität diese unter geänderten Bedingungen wieder zu verwenden. Das eingesetzte Werkzeug für die Übersetzung von Markdown nach HTML heißt „Pandoc“ und bietet etwas mehr Möglichkeiten als das grundlegende Markdown.
Last but not least, wird ein wenig JavaScript und PHP-Code eingesetzt. Ersteres als Hilfsmittel für die Darstellung der Webseiten im Browser (im Frontend), letzteres um Kontaktanfragen über das Kontaktformular entgegenzunehmen und zu prüfen (im sogenannten Backend auf dem Server).
Notiz: Es wurde nicht weiter ausgeführt, doch es gibt auch grafische Editoren für Webseiten. So bieten viele Hoster Ihren Kunden solche Editoren, um Ihnen zu ermöglichen einfachste Webseiten selbst zu erstellen und online zu bringen. Mehr dazu sagen kann ich nicht, da ich diese Editoren nicht weiter kenne. Ich vermute aber, dass diese nur sehr eingeschränkte Möglichkeiten bieten und das spätestens wenn man zu einem anderen Hoster umziehen möchte oder größere Änderungen vornehmen möchte Herausforderungen auftreten.
Schlusswort
In den vorangegangenen Abschnitten wurde grob die Technik geschildert, welche hinter der Website „DasHeimnetzwerk.de“ steckt. Die Technik scheint mir für viele Menschen vielleicht nicht das schwierigste aber das abschreckendste zu sein, wenn Sie sich mit dem Thema befassen. Dazu sollte man aber wissen das man bei der Erstellung einer Website noch viele weitere Aspekte berücksichtigen muss, welche nichts mit der Technik zu tun haben. Diese haben, mir jedenfalls, zum Teil viel weniger Vergnügen bereitet als die Beschäftigung mit den technischen Details.
- Erstellung eines rechtssicheren Impressum.
- Einhaltung der Datenschutzgrundverordnung (DSGVO), inklusive erstellung einer Datenschutzerklärung.
- Beachtung von Urheberrechten, wenn man sich Bildern, Inhalten, Plug-Ins, Werkzeuge Dritter bedient.
- Das Marketing für eine Website. Hierbei spielen Websuchmaschinen meist die Schlüsselrolle und somit ergibt sich die Frage, was muss man tun damit Google einen mag und die Website möglichst oft und gut als Suchergebnis präsentiert. Das Schlüsselwort dafür lautet Search-Engine-Optimization (SEO).
- Und Final das allerwichtigste, der Inhalt Ihrer Webseite.
Es ist verständlich wenn nicht jeder die Zeit und auch die Lust hat sich mit alldem zu beschäftigen. Wer z.B. eine gute Geschäftsidee hat, sollte sich auf die Realisierung dieser konzentrieren. Oft ist aber eine Website unabdingbar. Hilfestellung dafür bieten Dienstleister, welche man unter den Stichworten „Webagentur“, bzw. „Webdesign-Agentur“ finden kann.
Ich hoffe ich konnte Ihnen interessante Einblicke hinter die technischen Kulissen einer Website im allgemeinen und insbesondere „DasHeimnetzwerk.de“ geben.
Matthias (18.02.2021)