Webtechnologien-Glossar

Webtechnologien: Begriffe rund um Websites erklärt

Was ist DNS? Wie unterscheiden sich Domain und Hosting? Was bedeuten API, SSR oder Core Web Vitals? Hier finden Sie Webbegriffe auf zwei Ebenen: verständlich für den Einstieg und technisch für die Praxis.

WordPress-Website gehackt oder offline? Sofortmaßnahmen und Ablauf ansehen oder anrufen: 0676 487 91 38

Vom Browser bis zum Backend

Webtechnologien von A bis Z

Filtern Sie nach Themen oder suchen Sie nach einer konkreten Frage. Verwandte Begriffe führen durch Frontend, Backend, HTTP, CMS, Performance und Sicherheit.

Begriffe mit A

Daten & Auffindbarkeit · Technisch#api

Was ist eine API?

API · Application Programming Interface

Definierte Schnittstelle, über die Softwaresysteme Daten austauschen oder Funktionen aufrufen.

Technik, Beispiel und Einordnung

Beispiel

Eine Website sendet Text an ein KI-Modell und erhält die Antwort über dessen API zurück.

Warum ist das relevant?

APIs ermöglichen kontrollierte Integration in bestehende Systeme; Kosten, Limits, Verfügbarkeit und Datenübertragung müssen eingeplant werden.

CMS & Plattformen · Fortgeschritten#astro

Was ist Astro?

Astro · Webframework für content-orientierte Websites

Astro ist ein Webframework, das standardmäßig wenig Browser-JavaScript ausliefert und sich besonders für content-orientierte Websites eignet.

Technik, Beispiel und Einordnung

Technisch erklärt

Astro rendert Komponenten server- oder buildseitig zu HTML und aktiviert Framework-Komponenten nur über explizite Client-Direktiven.

Beispiel

Eine Unternehmenswebsite wird vollständig statisch erzeugt und ergänzt nur kleine lokale Skripte für Filter und Navigation.

Begriffe mit B

Grundlagen · Grundlage#backend

Was ist Backend?

Backend · Serverseitiger Teil einer Anwendung

Das Backend verarbeitet Geschäftslogik, Datenzugriff, Berechtigungen und Schnittstellen außerhalb der sichtbaren Browseroberfläche.

Technik, Beispiel und Einordnung

Technisch erklärt

Backend-Prozesse validieren Requests, koordinieren Services und Datenbanken und erzeugen HTML oder strukturierte API-Antworten.

Beispiel

Ein Kontakt-Backend prüft Eingaben, begrenzt Missbrauch und speichert eine Anfrage.

Frontend · Grundlage#accessibility

Was ist Barrierefreiheit im Web?

Barrierefreiheit im Web · Web Accessibility

Web-Barrierefreiheit sorgt dafür, dass Menschen mit unterschiedlichen Fähigkeiten und Hilfsmitteln digitale Inhalte nutzen können.

Technik, Beispiel und Einordnung

Technisch erklärt

Semantisches HTML, Tastaturbedienung, Fokusführung, Kontraste, verständliche Beschriftungen und robuste Schnittstellen zu assistiven Technologien sind zentrale Grundlagen.

Beispiel

Ein Suchfeld besitzt ein sichtbares Label und Filterbuttons geben ihren gedrückten Zustand programmatisch an.

Performance & SEO · Fortgeschritten#compression

Was ist Brotli-Kompression?

Brotli & gzip · HTTP-Kompression

HTTP-Kompression verkleinert Textdateien während der Übertragung und reduziert dadurch Ladezeit und Datenvolumen.

Technik, Beispiel und Einordnung

Technisch erklärt

Client und Server handeln über Accept-Encoding und Content-Encoding ein Verfahren aus; bereits komprimierte Bildformate profitieren meist nicht.

Beispiel

HTML, CSS, JavaScript und JSON lassen sich häufig deutlich verkleinern.

Begriffe mit C

Performance & SEO · Grundlage#cache

Was bedeutet Caching?

Cache · Zwischenspeicher

Ein Cache speichert bereits berechnete oder geladene Inhalte, damit sie schneller erneut bereitstehen.

Technik, Beispiel und Einordnung

Technisch erklärt

Caching kann im Browser, CDN, Webserver, Anwendungsprozess, Objekt-Cache oder Datenbanksystem stattfinden und benötigt klare Regeln zur Invalidierung.

Beispiel

Ein CDN speichert eine Bilddatei nahe beim Besucher und vermeidet wiederholte Abrufe vom Ursprungsserver.

HTTP & Netzwerk · Fortgeschritten#cache-control

Was ist Cache-Control?

Cache-Control · HTTP-Caching-Anweisung

Cache-Control legt fest, ob und wie lange Clients oder Zwischenserver eine HTTP-Antwort speichern dürfen.

Technik, Beispiel und Einordnung

Technisch erklärt

Direktiven wie max-age, no-cache, no-store, public, private und must-revalidate steuern Wiederverwendung und erneute Validierung.

Beispiel

Fingerabgedruckte CSS-Dateien können lange gespeichert werden, HTML sollte meist regelmäßig validiert werden.

Performance & SEO · Fortgeschritten#canonical-url

Was ist eine Canonical URL?

Canonical URL · Bevorzugte Adresse eines Inhalts

Eine Canonical URL kennzeichnet die bevorzugte Adresse eines Inhalts, wenn mehrere URLs ähnliche oder gleiche Inhalte zeigen.

Technik, Beispiel und Einordnung

Technisch erklärt

Das Link-Element ist ein starkes Konsolidierungssignal, aber keine Weiterleitung und keine Garantie; interne Links und Sitemap sollten dazu passen.

Beispiel

Trackingparameter zeigen denselben Inhalt, während canonical auf die saubere URL verweist.

Performance & SEO · Grundlage#cdn

Was ist ein CDN?

CDN · Content Delivery Network

Ein CDN verteilt und speichert Inhalte über mehrere Standorte, damit sie näher bei Besuchern ausgeliefert werden können.

Technik, Beispiel und Einordnung

Technisch erklärt

Edge-Server beantworten cachebare Anfragen, terminieren häufig TLS und können Schutzfunktionen wie DDoS-Abwehr oder eine WAF ergänzen.

Beispiel

Bilder und Skripte einer österreichischen Website werden für internationale Besucher aus regionalen Edge-Standorten geladen.

CMS & Plattformen · Grundlage#cms

Was ist ein CMS?

CMS · Content-Management-System

Ein CMS ermöglicht es, Website-Inhalte über eine Verwaltungsoberfläche zu pflegen.

Technik, Beispiel und Einordnung

Technisch erklärt

Ein CMS modelliert Inhalte, Benutzerrechte, Medien und Veröffentlichungsabläufe und rendert oder liefert daraus Webausgaben.

Beispiel

Redakteure ändern Leistungsseiten, ohne direkt HTML-Dateien zu bearbeiten.

Warum ist das relevant?

Ein CMS ist sinnvoll, wenn Inhalte regelmäßig durch mehrere Personen gepflegt werden; es erhöht aber Wartungs- und Sicherheitsaufwand.

Sicherheit · Technisch#csp

Was ist eine Content Security Policy?

Content Security Policy · CSP

Eine CSP begrenzt, aus welchen Quellen eine Seite Skripte, Styles, Bilder und andere Ressourcen laden darf.

Technik, Beispiel und Einordnung

Technisch erklärt

Die HTTP-Richtlinie arbeitet mit Direktiven und Source Expressions; Nonces oder Hashes können gezielt erlaubten Inline-Code kennzeichnen.

Beispiel

script-src 'self' erlaubt Skripte grundsätzlich nur vom eigenen Ursprung.

Warum ist das relevant?

Eine sorgfältig eingeführte CSP erschwert XSS, kann bei falscher Konfiguration aber legitime Funktionen blockieren.

Performance & SEO · Fortgeschritten#core-web-vitals

Was sind Core Web Vitals?

Core Web Vitals · Google-Messwerte für Nutzererfahrung

Core Web Vitals bewerten zentrale Aspekte der realen Lade-, Interaktions- und Layoutstabilität einer Seite.

Technik, Beispiel und Einordnung

Technisch erklärt

Die Kennzahlen werden aus Felddaten oder Labormessungen ermittelt; Ursachen liegen häufig in Ressourcenpriorisierung, JavaScript-Arbeit oder instabilen Layouts.

Beispiel

Ein Bild ohne feste Abmessungen kann nach dem Laden Inhalt verschieben und den CLS verschlechtern.

Sicherheit · Technisch#cors

Was ist CORS?

CORS · Cross-Origin Resource Sharing

CORS regelt, welche anderen Ursprünge Browser auf Ressourcen eines Servers zugreifen lassen dürfen.

Technik, Beispiel und Einordnung

Technisch erklärt

Server setzen Access-Control-Allow-* Header; nicht einfache Anfragen können einen OPTIONS-Preflight auslösen. CORS ist keine serverseitige Authentisierung.

Beispiel

Eine API erlaubt Browserzugriffe nur von der Produktionsdomain des Frontends.

Daten & Auffindbarkeit · Fortgeschritten#ai-crawler

Was bedeutet Crawler & AI Crawler?

Crawler & AI Crawler · Automatischer Webseiten-Abruf

Software, die Webseiten automatisiert abruft; AI Crawler tun dies für KI-Suche, Training oder andere KI-Dienste.

Technik, Beispiel und Einordnung

Beispiel

Ein Bot ruft öffentlich erreichbare Seiten ab und verarbeitet Überschriften, Texte und Links.

Warum ist das relevant?

Technische Erreichbarkeit, Robots-Regeln und klare Seitenstrukturen beeinflussen, welche Inhalte ein System überhaupt verarbeiten kann.

CMS & Plattformen · Fortgeschritten#csr

Was bedeutet Client-Side Rendering?

CSR · Client-Side Rendering

Client-Side Rendering erzeugt wesentliche Teile einer Oberfläche mit JavaScript im Browser.

Technik, Beispiel und Einordnung

Technisch erklärt

Der Client lädt Programmcode und Daten, verwaltet den UI-Zustand und aktualisiert die Darstellung ohne vollständige Dokumentnavigation.

Beispiel

Ein komplexes internes Dashboard lädt nach dem Start Daten über eine API und rendert Tabellen im Browser.

Frontend · Grundlage#css

Was ist CSS?

CSS · Cascading Style Sheets

CSS bestimmt Darstellung, Layout und responsive Anpassung von HTML-Inhalten.

Technik, Beispiel und Einordnung

Technisch erklärt

Selektoren adressieren Elemente; Kaskade, Spezifität und Vererbung bestimmen, welche Deklarationen als berechnete Styles angewendet werden.

Beispiel

Eine Media Query ändert das Layout für kleinere Bildschirme.

Frontend · Fortgeschritten#css-grid

Was ist CSS Grid?

CSS Grid · CSS Grid Layout

CSS Grid ist ein zweidimensionales Layoutmodell für Zeilen und Spalten.

Technik, Beispiel und Einordnung

Technisch erklärt

Explizite und implizite Tracks, Grid Lines, Areas sowie minmax- und fr-Einheiten ermöglichen flexible Raster ohne tabellarisches Markup.

Beispiel

Eine Glossarseite zeigt Filter und Ergebnisse in zwei Spalten und stapelt sie auf Mobilgeräten.

Begriffe mit D

Backend & APIs · Grundlage#database

Was ist eine Datenbank?

Datenbank · Strukturierter Datenspeicher

Eine Datenbank speichert Daten strukturiert und stellt Funktionen zum Lesen, Ändern und Absichern bereit.

Technik, Beispiel und Einordnung

Technisch erklärt

Relationale Systeme organisieren Daten in Tabellen und Beziehungen; andere Modelle verwenden Dokumente, Schlüssel-Werte, Graphen oder Vektoren.

Beispiel

Ein Shop speichert Kunden, Produkte, Bestellungen und Statusänderungen in einer Datenbank.

HTTP & Netzwerk · Grundlage#dns

Was ist DNS?

DNS · Domain Name System

DNS übersetzt Domainnamen in technische Ziele, damit Browser, E-Mail-Server und andere Dienste die richtigen Systeme finden.

Technik, Beispiel und Einordnung

Technisch erklärt

Resolver fragen die hierarchische DNS-Infrastruktur nach Records wie A, AAAA, CNAME, MX oder TXT und speichern Antworten entsprechend ihrer TTL zwischen.

Beispiel

Ein A-Record verbindet example.at mit der IPv4-Adresse des Webservers.

Warum ist das relevant?

Fehlerhafte DNS-Einträge können Website und E-Mail gleichzeitig unerreichbar machen.

Frontend · Fortgeschritten#dom

Was ist das DOM?

DOM · Document Object Model

Das DOM ist die programmierbare Baumdarstellung eines geladenen HTML- oder XML-Dokuments.

Technik, Beispiel und Einordnung

Technisch erklärt

Browser erzeugen Knoten für Elemente, Text und weitere Dokumentbestandteile; JavaScript kann Eigenschaften lesen und den Baum gezielt verändern.

Beispiel

Ein Filter setzt das hidden-Attribut nicht passender Glossarkarten.

Grundlagen · Grundlage#domain

Was ist eine Domain?

Domain · Lesbarer Name einer Internetadresse

Eine Domain ist ein lesbarer Name wie jkconcepts.at, unter dem eine Website oder ein anderer Internetdienst erreichbar ist.

Technik, Beispiel und Einordnung

Technisch erklärt

Das Domain Name System löst den Namen über DNS-Einträge in technische Ziele wie IP-Adressen oder andere Hostnamen auf.

Beispiel

Die Domain example.at kann auf einen Webserver und über separate DNS-Einträge auf einen E-Mail-Anbieter zeigen.

Warum ist das relevant?

Domain, DNS und Hosting sind getrennte Bausteine und können bei unterschiedlichen Anbietern verwaltet werden.

Begriffe mit E

HTTP & Netzwerk · Technisch#etag

Was ist ein ETag?

ETag · Entity Tag

Ein ETag ist eine Kennung für eine konkrete Version einer HTTP-Ressource.

Technik, Beispiel und Einordnung

Technisch erklärt

Der Client sendet den Wert später als If-None-Match; ist die Ressource unverändert, kann der Server mit 304 ohne vollständigen Body antworten.

Beispiel

Ein Browser validiert eine zwischengespeicherte CSS-Datei, ohne sie erneut vollständig herunterzuladen.

Frontend · Technisch#event-loop

Was ist der JavaScript Event Loop?

Event Loop · Ereignisschleife einer JavaScript-Laufzeit

Der Event Loop koordiniert, wann JavaScript-Aufgaben und asynchrone Rückmeldungen ausgeführt werden.

Technik, Beispiel und Einordnung

Technisch erklärt

Nach Abschluss des aktuellen Call Stacks verarbeitet die Laufzeit Warteschlangen; Microtasks wie Promise-Reaktionen werden vor der nächsten regulären Task abgearbeitet.

Beispiel

Eine abgeschlossene Netzwerkanfrage stellt ihren Callback zur späteren Verarbeitung bereit, ohne den aktuellen Code zu unterbrechen.

Begriffe mit F

Frontend · Fortgeschritten#flexbox

Was ist Flexbox?

Flexbox · CSS Flexible Box Layout

Flexbox ist ein CSS-Layoutmodell für die Anordnung von Elementen entlang einer Haupt- und Querachse.

Technik, Beispiel und Einordnung

Technisch erklärt

Flex-Container verteilen verfügbaren Raum über Eigenschaften wie flex-grow, flex-shrink, flex-basis, justify-content und align-items.

Beispiel

Navigationspunkte werden in einer Reihe verteilt und dürfen bei wenig Platz umbrechen.

Grundlagen · Grundlage#frontend

Was ist Frontend?

Frontend · Benutzerseitiger Teil einer Anwendung

Das Frontend ist der Teil einer Website oder Anwendung, den Menschen sehen und bedienen.

Technik, Beispiel und Einordnung

Technisch erklärt

Im Web umfasst es HTML, CSS, JavaScript, Browser-APIs, Zustandslogik und die Kommunikation mit serverseitigen Schnittstellen.

Beispiel

Formular, Navigation, Glossarfilter und visuelle Gestaltung gehören zum Frontend.

Grundlagen · Grundlage#full-stack

Was bedeutet Full Stack?

Full Stack · Entwicklung über Frontend und Backend hinweg

Full Stack bezeichnet Arbeit über mehrere Schichten einer Webanwendung hinweg, insbesondere Frontend, Backend und Datenhaltung.

Technik, Beispiel und Einordnung

Technisch erklärt

Der Begriff beschreibt Breite, nicht automatisch Tiefe; Infrastruktur, Sicherheit, Betrieb und Architektur können ebenfalls dazugehören.

Beispiel

Eine Funktion umfasst Formularoberfläche, API-Endpunkt, Validierung und Datenbankspeicherung.

Begriffe mit H

CMS & Plattformen · Fortgeschritten#headless-cms

Was ist ein Headless CMS?

Headless CMS · CMS ohne fest gekoppelte Website-Ausgabe

Ein Headless CMS verwaltet Inhalte und liefert sie über APIs, ohne die endgültige Website-Oberfläche fest vorzugeben.

Technik, Beispiel und Einordnung

Technisch erklärt

Frontend und Redaktion sind entkoppelt; Inhalte können mehrere Kanäle versorgen, benötigen aber ein separates Rendering-, Vorschau- und Deployment-Konzept.

Beispiel

Produktdaten werden an Website, App und internes Display aus derselben Inhaltsquelle geliefert.

Sicherheit · Fortgeschritten#hsts

Was ist HSTS?

HSTS · HTTP Strict Transport Security

HSTS weist Browser an, eine Domain für einen festgelegten Zeitraum ausschließlich über HTTPS aufzurufen.

Technik, Beispiel und Einordnung

Technisch erklärt

Der Strict-Transport-Security-Header kann Subdomains einschließen; Preloading reduziert auch das Risiko beim allerersten Aufruf.

Beispiel

Ein Browser ersetzt einen später eingegebenen http-Aufruf lokal durch https.

Frontend · Grundlage#html

Was ist HTML?

HTML · HyperText Markup Language

HTML beschreibt Inhalt und semantische Struktur eines Webdokuments.

Technik, Beispiel und Einordnung

Technisch erklärt

Elemente und Attribute bilden nach dem Parsen den DOM; semantische Elemente unterstützen Browser, Suchmaschinen und assistive Technologien.

Beispiel

Überschriften, Navigation, Absätze, Formulare und Bilder werden mit passenden HTML-Elementen ausgezeichnet.

HTTP & Netzwerk · Grundlage#http

Was ist HTTP?

HTTP · Hypertext Transfer Protocol

HTTP ist das Protokoll, mit dem Clients und Server Anfragen und Antworten für Webressourcen austauschen.

Technik, Beispiel und Einordnung

Technisch erklärt

Eine Nachricht besteht aus Methode oder Status, Headern und optional einem Body. HTTP ist zustandslos; Sitzungszustand wird separat aufgebaut.

Beispiel

Ein Browser sendet GET /kontakt/ und der Server antwortet mit Status 200 sowie HTML.

Performance & SEO · Grundlage#http-404

Was ist ein 404-Fehler?

HTTP 404 · Not Found

Der Statuscode 404 bedeutet, dass der Server für die angefragte URL keine passende Ressource gefunden hat.

Technik, Beispiel und Einordnung

Technisch erklärt

Eine echte Fehlerseite muss neben hilfreichem Inhalt weiterhin den HTTP-Status 404 senden; eine optische Fehlerseite mit Status 200 ist ein Soft 404.

Beispiel

Ein gelöschter Pfad ohne geeigneten Ersatz liefert eine gebrandete 404-Seite.

Performance & SEO · Grundlage#http-500

Was bedeutet HTTP 500?

HTTP 500 · Internal Server Error

Der Statuscode 500 meldet einen unerwarteten serverseitigen Fehler bei der Verarbeitung einer Anfrage.

Technik, Beispiel und Einordnung

Technisch erklärt

Die öffentliche Antwort bleibt absichtlich allgemein; konkrete Ursachen stehen in Anwendungs- und Serverlogs und können von Codefehlern bis zu Ressourcenproblemen reichen.

Beispiel

Ein fehlerhaftes Plugin löst eine unbehandelte PHP-Ausnahme aus.

HTTP & Netzwerk · Fortgeschritten#http-header

Was sind HTTP Header?

HTTP Header · Metadaten einer HTTP-Nachricht

HTTP Header transportieren Zusatzinformationen über eine Anfrage oder Antwort.

Technik, Beispiel und Einordnung

Technisch erklärt

Header steuern unter anderem Inhaltstyp, Caching, Authentifizierung, Kompression, Cookies, CORS und Browser-Sicherheitsregeln.

Beispiel

Content-Type: application/json kennzeichnet eine JSON-Antwort.

Sicherheit · Fortgeschritten#httponly

Was bedeutet HttpOnly bei Cookies?

HttpOnly · Cookie-Schutz vor JavaScript-Zugriff

HttpOnly verhindert, dass JavaScript im Browser den Wert eines Cookies direkt ausliest.

Technik, Beispiel und Einordnung

Technisch erklärt

Der Browser sendet das Cookie weiterhin automatisch mit passenden HTTP-Anfragen; deshalb bleiben CSRF-Schutz und XSS-Vermeidung notwendig.

Beispiel

Die Session-ID ist für document.cookie nicht sichtbar.

HTTP & Netzwerk · Grundlage#https

Was ist HTTPS?

HTTPS · HTTP über TLS

HTTPS schützt die Verbindung zwischen Client und Server durch TLS vor einfachem Mitlesen und Manipulieren.

Technik, Beispiel und Einordnung

Technisch erklärt

Nach dem TLS-Handshake werden HTTP-Nachrichten verschlüsselt und authentisiert übertragen; das Zertifikat bindet den öffentlichen Schlüssel an einen Hostnamen.

Beispiel

Ein Login-Formular überträgt Zugangsdaten nicht als unverschlüsselten Klartext im Netzwerk.

Warum ist das relevant?

HTTPS ist Grundvoraussetzung für sichere Formulare, moderne Browserfunktionen und vertrauenswürdigen Websitebetrieb.

Frontend · Technisch#hydration

Was bedeutet Hydration bei Websites?

Hydration · Aktivierung servergerenderten HTMLs

Hydration verbindet bereits gerendertes HTML im Browser mit JavaScript-Zustand und Interaktionen.

Technik, Beispiel und Einordnung

Technisch erklärt

Das Client-Framework rekonstruiert den Komponentenbaum und bindet Ereignisse; Abweichungen zwischen Server- und Client-Ausgabe können Hydration-Fehler verursachen.

Beispiel

Ein serverseitig sichtbares Menü wird nach dem Laden des JavaScripts interaktiv.

Begriffe mit I

Frontend · Technisch#islands-architecture

Was ist Islands Architecture?

Islands Architecture · Inselarchitektur für interaktive Komponenten

Bei der Islands Architecture bleibt der Großteil einer Seite statisch, während nur ausgewählte Komponenten JavaScript erhalten.

Technik, Beispiel und Einordnung

Technisch erklärt

Interaktive Inseln werden unabhängig hydriert oder geladen; dadurch muss nicht die gesamte Seite als Client-Anwendung betrieben werden.

Beispiel

Eine statische Inhaltsseite aktiviert nur Suche, Navigation und Formular als interaktive Teile.

Begriffe mit J

Frontend · Grundlage#javascript

Was ist JavaScript?

JavaScript · Programmiersprache des Webs

JavaScript ist eine Programmiersprache für interaktive Browserfunktionen und viele serverseitige Anwendungen.

Technik, Beispiel und Einordnung

Technisch erklärt

Browser führen ECMAScript in einer Laufzeit mit Web APIs, Event Loop und DOM-Zugriff aus; Module strukturieren größere Anwendungen.

Beispiel

Eine Glossarsuche blendet passende Begriffe direkt beim Tippen ein.

Backend & APIs · Grundlage#json

Was ist JSON?

JSON · JavaScript Object Notation

JSON ist ein textbasiertes Datenformat für strukturierte Werte wie Objekte, Listen, Zeichenketten, Zahlen und boolesche Werte.

Technik, Beispiel und Einordnung

Technisch erklärt

JSON besitzt eine klar definierte Syntax, aber keine Kommentare, Funktionen oder Datumswerte als eigenen Typ.

Beispiel

Eine API antwortet mit {"status":"ok","count":3}.

Begriffe mit L

Performance & SEO · Fortgeschritten#lazy-loading

Was ist Lazy Loading?

Lazy Loading · Verzögertes Laden

Lazy Loading lädt Inhalte oder Programmteile erst, wenn sie voraussichtlich benötigt werden.

Technik, Beispiel und Einordnung

Technisch erklärt

Browser können Bilder und iframes nativ verzögert laden; Bundler teilen JavaScript über dynamische Imports in separat abrufbare Chunks.

Beispiel

Bilder weit unterhalb des sichtbaren Bereichs werden nicht beim ersten Seitenaufruf übertragen.

Sicherheit · Grundlage#logging

Was bedeutet Logging?

Logging · Protokollierung von Ereignissen

Logging zeichnet technische und sicherheitsrelevante Ereignisse für Diagnose, Nachvollziehbarkeit und Erkennung auf.

Technik, Beispiel und Einordnung

Technisch erklärt

Gute Logs enthalten Zeit, Ereignistyp und notwendigen Kontext, vermeiden sensible Inhalte und werden gegen unbemerkte Manipulation geschützt.

Beispiel

Fehlgeschlagene Logins werden mit Konto, Zeitpunkt und grobem Ursprung protokolliert.

Begriffe mit M

Frontend · Fortgeschritten#media-query

Was ist eine Media Query?

Media Query · Bedingte CSS-Regel für Ausgabeeigenschaften

Eine Media Query aktiviert CSS-Regeln abhängig von Eigenschaften wie verfügbarer Breite oder Nutzerpräferenzen.

Technik, Beispiel und Einordnung

Technisch erklärt

Neben Viewport-Merkmalen können unter anderem prefers-reduced-motion, Farbmodus, Zeigergenauigkeit und Druckmedium abgefragt werden.

Beispiel

Ab 64rem wird eine Filterleiste als Sidebar neben den Ergebnissen dargestellt.

Frontend · Grundlage#mobile-first

Was bedeutet Mobile First?

Mobile First · Gestaltungsansatz vom kleinen Bildschirm aus

Mobile First beginnt mit einer klaren, vollständigen mobilen Darstellung und erweitert sie für größere Bildschirme.

Technik, Beispiel und Einordnung

Technisch erklärt

Basisregeln gelten für kleine Viewports; min-width-Media-Queries ergänzen Layout und Funktionen progressiv.

Beispiel

Die Glossarkarten sind zunächst einspaltig und werden auf breiten Bildschirmen zweispaltig.

Sicherheit · Grundlage#monitoring

Was ist Website Monitoring?

Monitoring · Laufende Systemüberwachung

Monitoring beobachtet Verfügbarkeit, Leistung, Fehler und ausgewählte Sicherheitssignale eines Systems.

Technik, Beispiel und Einordnung

Technisch erklärt

Messwerte, synthetische Prüfungen und Logsignale benötigen Schwellenwerte, Alarmwege und verantwortliche Reaktionen, damit aus Daten Handlungen werden.

Beispiel

Ein Alarm wird ausgelöst, wenn die Website nicht erreichbar ist oder Fehler stark ansteigen.

Backend & APIs · Fortgeschritten#mysql

Was ist MySQL?

MySQL · Relationales Datenbanksystem

MySQL ist ein relationales Datenbanksystem, das Daten in Tabellen speichert und mit SQL abfragt.

Technik, Beispiel und Einordnung

Technisch erklärt

Schemas, Schlüssel, Indizes, Transaktionen und Constraints strukturieren und schützen Daten; MariaDB ist ein verwandtes eigenständiges System.

Beispiel

WordPress speichert Beiträge, Optionen, Benutzer und Metadaten typischerweise in MySQL oder MariaDB.

Begriffe mit N

Backend & APIs · Fortgeschritten#nodejs

Was ist Node.js?

Node.js · JavaScript-Laufzeit außerhalb des Browsers

Node.js führt JavaScript außerhalb des Browsers aus und wird für Server, Werkzeuge und Build-Prozesse verwendet.

Technik, Beispiel und Einordnung

Technisch erklärt

Die Laufzeit kombiniert die V8-Engine mit ereignisorientierten I/O-Schnittstellen und einem Paketökosystem rund um npm.

Beispiel

Astro verwendet Node.js beim Erzeugen der statischen Website.

Begriffe mit P

Backend & APIs · Grundlage#php

Was ist PHP?

PHP · Serverseitige Programmiersprache

PHP ist eine serverseitige Programmiersprache, die besonders häufig für Websites, APIs und Content-Management-Systeme eingesetzt wird.

Technik, Beispiel und Einordnung

Technisch erklärt

Ein PHP-Prozess verarbeitet eine Anfrage, führt Anwendungscode aus und erzeugt eine HTTP-Antwort; Composer verwaltet typische Paketabhängigkeiten.

Beispiel

WordPress und WooCommerce führen ihre Kernlogik überwiegend in PHP aus.

Begriffe mit R

Performance & SEO · Fortgeschritten#301-redirect

Was bedeutet 301 Redirect?

301 Redirect · Dauerhafte HTTP-Weiterleitung

Ein 301 Redirect kennzeichnet eine dauerhafte Weiterleitung auf eine neue URL.

Technik, Beispiel und Einordnung

Technisch erklärt

Clients und Suchmaschinen dürfen das Ziel langfristig übernehmen; bei nicht sicheren Methoden kann 308 die Methodenerhaltung eindeutiger ausdrücken.

Beispiel

Eine alte WordPress-Adresse wird nach dem Relaunch auf die inhaltlich entsprechende neue Route geleitet.

Sicherheit · Fortgeschritten#rate-limiting

Was ist Rate Limiting?

Rate Limiting · Begrenzung von Anfragen

Rate Limiting begrenzt, wie viele Aktionen in einem Zeitraum zugelassen werden.

Technik, Beispiel und Einordnung

Technisch erklärt

Grenzen können pro Konto, Token, IP, Route oder Risikosignal gelten; verteilte Systeme benötigen einen gemeinsamen oder konsistenten Zähler.

Beispiel

Nach mehreren fehlgeschlagenen Logins werden weitere Versuche schrittweise verzögert.

Frontend · Fortgeschritten#react

Was ist React?

React · JavaScript-Bibliothek für Benutzeroberflächen

React ist eine komponentenbasierte JavaScript-Bibliothek zum Erstellen zustandsabhängiger Benutzeroberflächen.

Technik, Beispiel und Einordnung

Technisch erklärt

Komponenten erzeugen deklarative Elementbäume; React koordiniert Zustandsänderungen, Rendering und je nach Laufzeit server- oder clientseitige Ausführung.

Beispiel

Ein komplexes Dashboard zerlegt Navigation, Filter, Tabellen und Diagramme in wiederverwendbare Komponenten.

Performance & SEO · Grundlage#redirect

Was ist eine Weiterleitung?

Redirect · HTTP-Weiterleitung

Eine Weiterleitung teilt dem Client mit, dass eine Ressource unter einer anderen URL erreichbar ist.

Technik, Beispiel und Einordnung

Technisch erklärt

3xx-Statuscodes unterscheiden unter anderem dauerhafte und temporäre Ziele sowie den Umgang mit der ursprünglichen HTTP-Methode.

Beispiel

Nach einem Relaunch führt die alte Leistungs-URL dauerhaft zur passenden neuen Seite.

HTTP & Netzwerk · Grundlage#request-response

Was sind Request und Response?

Request & Response · Anfrage und Antwort

Ein Client sendet einen Request; der Server verarbeitet ihn und liefert eine Response zurück.

Technik, Beispiel und Einordnung

Technisch erklärt

Requests enthalten Methode, Ziel, Header und optional Daten. Responses enthalten Statuscode, Header und einen optionalen Antwortkörper.

Beispiel

POST /api/contact übermittelt Formulardaten und erhält eine Erfolgs- oder Fehlermeldung.

Frontend · Grundlage#responsive-design

Was ist Responsive Webdesign?

Responsive Webdesign · Anpassungsfähiges Weblayout

Responsive Webdesign passt Inhalt, Layout und Bedienung an unterschiedliche Bildschirmgrößen und Eingabemethoden an.

Technik, Beispiel und Einordnung

Technisch erklärt

Flexible Raster, intrinsische Größen, responsive Medien sowie Media- und Container-Queries vermeiden gerätespezifische Einzellayouts.

Beispiel

Filterchips lassen sich auf kleinen Bildschirmen horizontal scrollen, statt viele Zeilen zu belegen.

Backend & APIs · Fortgeschritten#rest-api

Was ist eine REST API?

REST API · HTTP-Schnittstelle nach REST-Prinzipien

Eine REST API stellt Ressourcen und Aktionen über klar definierte HTTP-Endpunkte bereit.

Technik, Beispiel und Einordnung

Technisch erklärt

Typische Schnittstellen verwenden HTTP-Methoden, Statuscodes, URLs und repräsentationsbasierte Datenformate; REST selbst schreibt JSON nicht zwingend vor.

Beispiel

GET /api/orders/42 liest eine Bestellung, PATCH aktualisiert ausgewählte Felder.

Performance & SEO · Grundlage#robots-txt

Was ist robots.txt?

robots.txt · Crawler-Steuerdatei

robots.txt gibt kooperierenden Crawlern Regeln für den Abruf bestimmter Websitebereiche.

Technik, Beispiel und Einordnung

Technisch erklärt

Die Datei liegt am Ursprung unter /robots.txt; Disallow verhindert keinen sicheren Zugriff und ist kein verlässlicher Schutz vor Indexierung oder Angreifern.

Beispiel

Interne Suchergebnisse werden für Suchmaschinen-Crawler vom Abruf ausgeschlossen.

Begriffe mit S

Daten & Auffindbarkeit · Fortgeschritten#schema-org

Was bedeutet Schema.org?

Schema.org · Vokabular für strukturierte Webdaten

Gemeinsames Vokabular, mit dem Websites Personen, Organisationen, Angebote, Begriffe und andere Inhalte beschreiben.

Technik, Beispiel und Einordnung

Beispiel

Ein Glossar verwendet DefinedTermSet und DefinedTerm, um Begriffe und Definitionen maschinenlesbar auszuzeichnen.

Warum ist das relevant?

Schema.org schafft eine gemeinsame Sprache für Systeme; Markup allein ersetzt jedoch keine hilfreichen sichtbaren Inhalte.

Sicherheit · Fortgeschritten#security-headers

Was sind Security Headers?

Security Headers · HTTP-Sicherheitsheader

Security Headers geben dem Browser zusätzliche Sicherheitsregeln für eine Website vor.

Technik, Beispiel und Einordnung

Technisch erklärt

CSP, HSTS, frame-ancestors, Referrer-Policy und weitere Header begrenzen Ladequellen, Protokoll-Downgrades, Einbettung und Informationsweitergabe.

Beispiel

Eine CSP verhindert, dass beliebige fremde Skripte auf einer Seite ausgeführt werden dürfen.

Backend & APIs · Fortgeschritten#session

Was ist eine Session?

Session · Serverseitiger Sitzungszustand

Eine Session hält zusammengehörende Benutzeranfragen über mehrere Seitenaufrufe hinweg in einem gemeinsamen Zustand.

Technik, Beispiel und Einordnung

Technisch erklärt

Meist speichert der Server den Zustand und der Browser sendet lediglich eine zufällige Session-ID in einem geschützten Cookie.

Beispiel

Nach dem Login erkennt der Server anhand der Session-ID den angemeldeten Benutzer.

CMS & Plattformen · Fortgeschritten#spa

Was ist eine Single Page Application?

SPA · Single Page Application

Eine SPA lädt ein Anwendungsdokument und aktualisiert Ansichten anschließend überwiegend im Browser.

Technik, Beispiel und Einordnung

Technisch erklärt

Clientseitiges Routing und Zustandsmanagement ersetzen viele vollständige Seitennavigationen; Daten kommen meist über APIs.

Beispiel

Ein Projektmanagement-Tool wechselt zwischen Aufgaben und Ansichten, ohne das gesamte Dokument neu zu laden.

CMS & Plattformen · Fortgeschritten#ssg

Was ist ein Static Site Generator?

SSG · Static Site Generation

Bei Static Site Generation entstehen fertige HTML-Seiten vor der Veröffentlichung statt bei jedem Aufruf.

Technik, Beispiel und Einordnung

Technisch erklärt

Ein Build liest Templates und Daten, erzeugt Dateien und kann sie über einfachen Webspace oder ein CDN ausliefern.

Beispiel

Astro erzeugt alle bekannten Seiten während des Builds als statische HTML-Dateien.

CMS & Plattformen · Fortgeschritten#ssr

Was bedeutet SSR?

SSR · Server-Side Rendering

Server-Side Rendering erzeugt HTML auf dem Server, typischerweise für jede Anfrage oder über einen serverseitigen Cache.

Technik, Beispiel und Einordnung

Technisch erklärt

Der Server führt Anwendungslogik aus und serialisiert die Ansicht; clientseitige Hydration kann anschließend Interaktivität ergänzen.

Beispiel

Ein personalisiertes Portal rendert nach dem Login eine benutzerspezifische Übersichtsseite.

Daten & Auffindbarkeit · Fortgeschritten#structured-data

Was sind strukturierte Daten?

Structured Data · Strukturierte Daten

Maschinenlesbare Angaben, die Inhalt und Bedeutung einer Seite in festgelegten Feldern beschreiben.

Technik, Beispiel und Einordnung

Beispiel

Eine Website kennzeichnet Organisation, Leistungen oder definierte Begriffe zusätzlich als JSON-LD.

Warum ist das relevant?

Strukturierte Daten erleichtern eindeutige Interpretation, müssen aber mit dem sichtbaren Inhalt übereinstimmen und technisch korrekt sein.

Sicherheit · Technisch#subresource-integrity

Was ist Subresource Integrity?

Subresource Integrity · SRI

SRI lässt Browser prüfen, ob eine extern geladene Ressource exakt dem erwarteten kryptografischen Hash entspricht.

Technik, Beispiel und Einordnung

Technisch erklärt

Das integrity-Attribut enthält einen oder mehrere Hashwerte; bei Cross-Origin-Ressourcen muss die CORS-Konfiguration zur Prüfung passen.

Beispiel

Ein CDN-Skript wird nur ausgeführt, wenn sein Inhalt dem hinterlegten SHA-384-Hash entspricht.

Begriffe mit T

HTTP & Netzwerk · Fortgeschritten#tls

Was ist TLS?

TLS · Transport Layer Security

TLS ist ein Protokoll für verschlüsselte und gegen Manipulation geschützte Netzwerkverbindungen.

Technik, Beispiel und Einordnung

Technisch erklärt

Der Handshake handelt Version und kryptografische Verfahren aus, prüft Zertifikate und leitet Sitzungsschlüssel für die symmetrische Verschlüsselung ab.

Beispiel

HTTPS, sichere Mailübertragung und viele APIs verwenden TLS als Transportschutz.

HTTP & Netzwerk · Fortgeschritten#certificate

Was ist ein SSL-Zertifikat?

TLS-Zertifikat · Digitales Zertifikat für einen Hostnamen

Ein TLS-Zertifikat bestätigt die Zuordnung eines öffentlichen Schlüssels zu einem Domainnamen.

Technik, Beispiel und Einordnung

Technisch erklärt

Browser prüfen Signatur, Gültigkeit, Hostnamen und Zertifikatskette bis zu einer vertrauenswürdigen Zertifizierungsstelle.

Beispiel

Let's Encrypt stellt automatisierbare Domain-Zertifikate für HTTPS bereit.

Frontend · Fortgeschritten#typescript

Was ist TypeScript?

TypeScript · JavaScript mit statischer Typprüfung

TypeScript erweitert JavaScript um statische Typen und zusätzliche Entwicklungswerkzeuge.

Technik, Beispiel und Einordnung

Technisch erklärt

Der Compiler prüft Typbeziehungen vor der Ausführung und erzeugt JavaScript; Typinformationen selbst stehen zur Laufzeit normalerweise nicht zur Verfügung.

Beispiel

Ein Interface beschreibt, welche Felder ein Glossarbegriff besitzen muss.

Begriffe mit U

Grundlagen · Grundlage#url

Was ist eine URL?

URL · Uniform Resource Locator

Eine URL beschreibt die Adresse einer konkreten Ressource im Web.

Technik, Beispiel und Einordnung

Technisch erklärt

Sie kann Schema, Host, Port, Pfad, Query-String und Fragment enthalten, etwa https://example.at/suche/?q=test#ergebnis.

Beispiel

Die Domain benennt den Host; der Pfad /kontakt/ bezeichnet eine Ressource auf diesem Host.

Begriffe mit W

Grundlagen · Grundlage#web-app

Was ist eine Web-App?

Web-App · Webanwendung

Eine Web-App ist eine im Browser bediente Anwendung, bei der Nutzer Daten bearbeiten oder konkrete Arbeitsabläufe ausführen.

Technik, Beispiel und Einordnung

Technisch erklärt

Web-Apps kombinieren eine Benutzeroberfläche im Browser mit serverseitiger Logik, APIs, Datenbanken und häufig einer Benutzeranmeldung.

Beispiel

Ein internes Auftragsportal ersetzt gemeinsam bearbeitete Excel-Dateien und E-Mail-Abstimmungen.

Warum ist das relevant?

Die Abgrenzung zur Website beeinflusst Architektur, Sicherheitsbedarf, Entwicklungskosten und laufende Betreuung.

Sicherheit · Technisch#webauthn

Was ist WebAuthn?

WebAuthn · Web Authentication API

WebAuthn ist die Browser-API für starke Public-Key-Anmeldungen mit Passkeys und Sicherheitsschlüsseln.

Technik, Beispiel und Einordnung

Technisch erklärt

Der Server sendet eine Challenge; der Authenticator signiert sie für die konkrete Relying Party und verhindert dadurch einfache Phishing-Wiederverwendung.

Beispiel

Ein Hardware-Sicherheitsschlüssel bestätigt die Administratoranmeldung.

Backend & APIs · Fortgeschritten#webhook

Was ist ein Webhook?

Webhook · Ereignisbasierter HTTP-Aufruf

Ein Webhook informiert ein anderes System per HTTP automatisch über ein Ereignis.

Technik, Beispiel und Einordnung

Technisch erklärt

Der Sender ruft eine registrierte URL auf; Empfänger sollten Signaturen prüfen, Wiederholungen vertragen und Verarbeitung idempotent gestalten.

Beispiel

Ein Zahlungsanbieter meldet dem Shop, dass eine Zahlung erfolgreich abgeschlossen wurde.

Grundlagen · Grundlage#webhosting

Was ist Webhosting?

Webhosting · Betriebsumgebung für Websites

Webhosting stellt Speicher, Rechenleistung und Netzwerkzugang bereit, damit eine Website im Internet ausgeliefert werden kann.

Technik, Beispiel und Einordnung

Technisch erklärt

Je nach Angebot laufen Webserver, Laufzeit, Datenbank, TLS, Backups und E-Mail auf geteilter, virtueller, dedizierter oder verwalteter Infrastruktur.

Beispiel

Ein WordPress-Hosting führt PHP aus, verbindet sich mit MySQL und liefert Bilder sowie Stylesheets aus.

Warum ist das relevant?

Leistung, Sicherheit, Backups und Support des Hostings beeinflussen die Zuverlässigkeit der Website.

HTTP & Netzwerk · Grundlage#webserver

Was ist ein Webserver?

Webserver · Server für HTTP-Anfragen

Ein Webserver nimmt HTTP-Anfragen entgegen und liefert Dateien oder dynamisch erzeugte Antworten an Browser und andere Clients.

Technik, Beispiel und Einordnung

Technisch erklärt

Software wie nginx oder Apache übernimmt TLS, Routing, Caching, Kompression und die Weiterleitung an Anwendungsprozesse.

Beispiel

Der Webserver liefert eine statische HTML-Datei direkt aus oder leitet eine PHP-Anfrage an PHP-FPM weiter.

Grundlagen · Grundlage#website

Was ist eine Website?

Website · Zusammenhängender Webauftritt

Eine Website ist ein über eine Domain erreichbarer Webauftritt aus einer oder mehreren zusammengehörenden Seiten.

Technik, Beispiel und Einordnung

Technisch erklärt

Browser laden Dokumente und Ressourcen über HTTP oder HTTPS von einem Webserver. Navigation, URLs und Verlinkungen verbinden die einzelnen Seiten zu einem gemeinsamen Angebot.

Beispiel

Eine Unternehmenswebsite enthält etwa Startseite, Leistungen, Projekte, Kontakt und rechtliche Seiten.

Warum ist das relevant?

Für Aufbau, Betrieb und Kosten ist entscheidend, ob eine einfache Website, ein CMS, ein Shop oder eine Web-App benötigt wird.

HTTP & Netzwerk · Technisch#websocket

Was ist ein WebSocket?

WebSocket · Dauerhafte bidirektionale Webverbindung

WebSocket ermöglicht eine dauerhaft offene Verbindung, über die Client und Server jederzeit Nachrichten senden können.

Technik, Beispiel und Einordnung

Technisch erklärt

Nach einem HTTP-Upgrade verwendet die Verbindung ein eigenes framebasiertes Protokoll über TCP und benötigt eine explizite Authentifizierungs- und Verbindungslogik.

Beispiel

Chats, Live-Dashboards oder gemeinsame Bearbeitung übertragen Aktualisierungen ohne ständiges Polling.

CMS & Plattformen · Grundlage#wordpress

Was ist WordPress?

WordPress · Open-Source Content-Management-System

WordPress ist ein weit verbreitetes Open-Source-CMS für Websites, redaktionelle Inhalte und mit Erweiterungen auch Onlineshops.

Technik, Beispiel und Einordnung

Technisch erklärt

WordPress basiert überwiegend auf PHP und MySQL, besitzt Theme-, Plugin-, Hook-, Rollen- und REST-API-Systeme und benötigt laufende Updates.

Beispiel

Ein individuelles Theme bildet die Unternehmensgestaltung ab, während strukturierte Inhaltsfelder die Pflege vereinfachen.

Warum ist das relevant?

Die Qualität hängt stark von Architektur, Erweiterungen, Wartung, Hosting und Sicherheitskonfiguration ab.

Sicherheit · Technisch#wp-cron

Was ist WP-Cron?

WP-Cron · Ereignisplanung in WordPress

WP-Cron führt geplante WordPress-Aufgaben aus, wird standardmäßig aber durch Seitenaufrufe angestoßen.

Technik, Beispiel und Einordnung

Technisch erklärt

Bei unregelmäßigem oder hohem Verkehr kann ein echter System-Cron zuverlässiger sein; blockierte oder überlastete Cron-Läufe beeinträchtigen Updates und Hintergrundjobs.

Beispiel

Geplante Veröffentlichungen und WooCommerce-Hintergrundaufgaben hängen von zuverlässig ausgeführten Cron-Ereignissen ab.

Begriffe mit X

Performance & SEO · Grundlage#sitemap

Was ist eine Sitemap?

XML-Sitemap · Maschinenlesbare URL-Liste

Eine XML-Sitemap listet indexierbare URLs und optionale Aktualisierungsdaten für Suchmaschinen auf.

Technik, Beispiel und Einordnung

Technisch erklärt

Sie unterstützt das Auffinden, ersetzt aber weder interne Verlinkung noch Indexierbarkeit und garantiert keine Aufnahme in den Suchindex.

Beispiel

Ein statischer Build erzeugt eine Sitemap aus allen indexierbaren Routen.

Technik passend zum Vorhaben

Website, CMS oder individuelle Web-App?

Die passende Architektur hängt von Inhalten, Abläufen, Schnittstellen, Wartung und dem tatsächlichen Ziel ab.

Projekt besprechen