Links sind kein Detail
Verknüpfungen entscheiden darüber, wie Menschen und Systeme Inhalte finden, einordnen und miteinander verbinden.
Eine Reise durch die Welt der Webentwicklung
Komm mit, auf eine Reise von der Idee eines später als Hypertext bekannt gewordenen Konzeptes,
über die ersten Hypertextsysteme, bis hin zum heutigen Web.
Verstehe den Ursprung von Hypertext und damit auch des Webs.
Entwicklungsverlauf der Hypertextsysteme
Von den Anfängen, bis zur Moderne
1945
Memex
Vorgestellt in Vannevar Bushs Artikel "As We May Think" im Magazin The Atlantic
Der Memex, von Vannevar Bush 1945 vorgestellt, ist ein visionäres Konzept, das die Grundlage für Hypertext und moderne Webentwicklung legte. Er beschreibt eine Maschine, die Informationen miteinander verknüpft und organisiert, ähnlich den heutigen digitalen Datenbanken und Links
1960
Xanadu
Das Projekt begann in den 1960er Jahren, aber das erste veröffentlichte System entstand 1988
Xanadu war ein revolutionäres Projekt von Ted Nelson, das auf die Umsetzung eines transklusiven Hypertextsystems abzielte. Es beeinflusste viele nachfolgende Technologien und bot eine visionäre Perspektive auf die Verknüpfung von Informationen im digitalen Raum
1968
oN-Line System (NLS)
Siehe Augment: NLS war der offizielle Name des Systems, das in der "Mother of All Demos" demonstriert wurde
Bahnbrechendes System von Douglas Engelbart mit Maussteuerung und interaktiver Textbearbeitung – Grundlagen moderner Computerinteraktion.
1968
Augment
Vorgestellt von Douglas Engelbart in der legendären "Mother of All Demos", die bahnbrechende Konzepte wie Hypertext, die Maus und kollaborative Arbeit präsentierte
Frühes Hypertextsystem zur Erweiterung menschlicher Denkprozesse – ein Meilenstein für die Interaktion mit digitalen Systemen.
1980
Enquire
Entwickelt von Tim Berners-Lee während seiner Zeit am CERN als Vorläufer des World Wide Web
Erstes Hypertextsystem von Tim Berners-Lee, das die Idee verknüpfter Informationen konkretisierte und das WWW inspirierte.
1980
Tangle
Ein experimentelles System von Tim Berners-Lee, das die Ideen von Enquire weiterentwickelte
Weiterentwicklung der Enquire-Ideen mit Fokus auf die Darstellung komplexer Informationsnetze.
1987
HyperCard
Vorgestellt von Apple auf dem Macworld-Event und revolutionär für die Erstellung von interaktiven, verknüpften Inhalten
Werkzeug von Apple zur einfachen Erstellung interaktiver, verknüpfter Inhalte – Vorläufer vieler moderner Webanwendungen.
1989
World Wide Web
Tim Berners-Lee stellte 1989 das Konzept vor, die erste Webseite ging 1991 online
Hypertextsystem von Tim Berners-Lee, das verknüpfte Informationen massentauglich machte und den Wissenszugang revolutionierte.
Warum Hypertext wichtig ist
Das Fundament der modernen Webentwicklung
Bevor es das Web gab, entstand die Idee von Hypertext: Informationen über Verknüpfungen miteinander zu verbinden.
Dieses Konzept bildet den Ursprung dessen, was wir heute als Internet und moderne Webentwicklung kennen.
Wer die Geschichte von Hypertext versteht, erkennt auch die Grundlagen, auf denen HTML, CSS, JavaScript und andere Webtechnologien aufgebaut sind.
Was Hypertext heute bedeutet
Von Links über SEO bis zu sauberer Informationsstruktur
SEO ist Strukturverständnis
Wer Hypertext versteht, versteht auch besser, warum interne Verlinkung, Semantik und Kontext für Suchmaschinen entscheidend sind.
Probleme beginnen oft bei der Struktur
Unklare Navigationspfade, chaotische Seitenbeziehungen und fehlende Informationshierarchien sind selten Designfehler, sondern Strukturfehler.
Entwicklungsverlauf des Informationsnetzes
Von statischen Webseiten, bis Künstliche Intelligenz
1990er
Web 1.0
Statische Seiten, HTML und einfaches CSS
Das Web 1.0 war hauptsächlich dokumentenzentriert. Nutzer konnten Informationen lesen, aber kaum selbst Inhalte erstellen.
2000er
Web 2.0
Soziale Netzwerke, JavaScript, AJAX
Mit Web 2.0 wurde das Netz interaktiver. Nutzer konnten nun Inhalte selbst erstellen, kommentieren und teilen.
2010er
Web 3.0
Semantisches Web, APIs, Linked Data
Im Web 3.0 stehen Daten im Mittelpunkt. Informationen werden besser verknüpft und maschinenlesbar, was intelligente Anwendungen ermöglicht.
2020er
Web 4.0
Intelligente Systeme, KI, personalisierte Erlebnisse
Web 4.0 kombiniert künstliche Intelligenz mit dem Internet. Ziel ist ein selbstlernendes, kontextbewusstes und stark personalisiertes Web.
Jede Webphase löst ein Problem und erzeugt ein neues
Fortschritt im Web ist immer auch ein Tauschgeschäft
Web 1.0
Statische Seiten machten Wissen verfügbar, aber Nutzer konnten kaum eingreifen, reagieren oder mitgestalten.
Web 2.0
Interaktion wurde einfacher, doch Plattformen gewannen enorme Kontrolle über Inhalte, Reichweite und Daten.
Web 3.0
Daten wurden strukturierter und vernetzter, aber auch komplexer, schwerer modellierbar und oft schwerer nutzbar.
Web 4.0
Kontext und KI versprechen bessere Systeme, bringen aber neue Fragen zu Abhängigkeit, Nachvollziehbarkeit und Qualität mit sich.
Grundlagen des Webs
Die Bausteine, auf denen alles aufbaut
Das moderne Web basiert auf einer Reihe grundlegender Technologien, die seine Struktur und Funktionsweise bestimmen.
HTML bildet das Rückgrat, indem es den Inhalt einer Seite strukturiert. CSS sorgt für Gestaltung und Layout, während JavaScript Interaktivität und Dynamik ermöglicht.
Zusammen schaffen diese Werkzeuge das Fundament, auf dem jede Website und jede Webanwendung entwickelt wird.
Meilensteine der Webentwicklung
Einblicke in die Moderne Webentwicklung
2010
Single Page Applications (SPA)
Ermöglichen eine nahtlose Benutzererfahrung ohne Seitenreloads
Single Page Applications, wie sie von Frameworks wie React und Vue.js unterstützt werden, ermöglichen dynamische, interaktive Webanwendungen, bei denen Inhalte asynchron geladen werden.
2011
Web Components
Wiederverwendbare, plattformunabhängige UI-Bausteine
Mit Web Components können Entwickler benutzerdefinierte HTML-Elemente erstellen, die in jeder Webanwendung wiederverwendbar sind. Standards wie Shadow DOM und Custom Elements machen dies möglich.
2011
WebRTC
Echtzeit-Kommunikation direkt im Browser
WebRTC ermöglicht Audio- und Videoanrufe sowie Datenübertragung ohne Plugins oder externe Software. Diese Technologie ist ein zentraler Bestandteil moderner Kommunikations-Tools wie Video-Chats und Livestreams.
2015
Progressive Web Apps (PWA)
Eine moderne Technologie für schnelle, zuverlässige und plattformunabhängige Anwendungen
Vereinen Vorteile von Webseiten und nativen Apps: Offline, Push-Benachrichtigungen und app-ähnliches Erlebnis im Browser.
2015
Service Worker und Web Push
Ermöglichen Offline-Funktionen und Push-Benachrichtigungen
Service Worker und Web Push Notifications machen Progressive Web Apps (PWAs) leistungsstark und flexibel. Sie erlauben Offline-Zugriff und Echtzeit-Benachrichtigungen direkt im Browser.
2015
Jamstack
Architektur für schnelle und sichere Webseiten
Jamstack steht für JavaScript, APIs und Markup. Diese Architektur ermöglicht schnelle Ladezeiten und erhöhte Sicherheit, indem statische Dateien und dynamische Inhalte effizient kombiniert werden.
2015
Brotli-Kompression
Höhere Kompression als Gzip für schnellere Webseiten
Schnellere Ladezeiten durch effizientere Kompression und geringeren Datenverbrauch.
2017
WebAssembly (WASM)
Eine revolutionäre Technologie für Hochleistungsanwendungen im Web
WebAssembly bietet Entwicklern die Möglichkeit, nahezu native Leistung im Browser zu erreichen, indem sie Code in Sprachen wie C++ oder Rust kompilieren und nahtlos in Webprojekte integrieren.
2018
HTTP/3 und QUIC
Ersetzt TCP durch das effizientere UDP-Protokoll
Schnellere, stabilere Verbindungen mit geringerer Latenz – besonders in mobilen Netzen.
2021
Privacy Sandbox
Datenschutzinitiative von Google für ein Cookie-freies Web
Die Privacy Sandbox von Google zielt darauf ab, Drittanbieter-Cookies zu ersetzen, um den Datenschutz zu verbessern. Gleichzeitig soll sie gezielte Werbung ermöglichen, ohne Benutzer auszuspionieren.
2022
WebTransport
Echtzeit-Datenübertragung über UDP
Web Transport ergänzt HTTP/3 und ermöglicht leistungsfähige Echtzeit-Kommunikation für Webanwendungen wie Multiplayer-Spiele und Videostreaming. Es bietet Entwicklern mehr Flexibilität für Echtzeit-Daten.
2022
Container Query CSS
Neue Flexibilität für responsives Webdesign
Regeln auf Basis der Containergröße statt des Viewports – deutlich bessere Layoutkontrolle.
2023
WebGPU
Moderner Ersatz für WebGL mit GPU-Zugriff
Direkter GPU-Zugriff für 3D und ML im Browser – deutlich höhere Performance.
Warum moderne Technologien existieren
Neue Technologien entstehen, weil alte Grenzen schmerzen
Moderne Webentwicklung ist interessant, aber vor allem eine Reaktion auf reale Engpässe. Entscheidend ist nicht nur, was neu ist, sondern welches Problem damit gelöst werden soll.
SPA
Single Page Applications entstanden, um Interaktionen flüssiger zu machen. Dafür wurden Navigation, Initial Load und SEO deutlich anspruchsvoller.
HTTP/3
HTTP/3 existiert, weil TCP und klassische Verbindungen bei Latenz und Paketverlust an Grenzen stoßen. QUIC reagiert auf genau dieses Problem.
WebGPU
WebGPU ist nicht bloß ein neues API-Label. Es ist die Antwort auf den Wunsch nach mehr Grafik- und Rechenleistung direkt im Browser.
TTT: Tipps – Tricks – Tools
Blog Webentwicklung
Finde in diesem Blog heraus, wo die Webentwicklung seinen Ursprung hat und erhalte nützliche Tipps, Linkssammlungen, Blogbeiträge, sowie auch digitale Dokumente und Videokurse an die Hand, um dich tiefergreifend mit dem Thema zu befassen.
Vom dokumentenzentrierten statischen Web 1.0, über ein soziales Web 2.0 und semantisches Web 3.0, bis hin zu einem intelligentem Web 4.0.
Entdecke, wie die moderne Webentwicklung heute gestaltet wird: Lerne die neuesten Technologien und Trends kennen, erhalte praktische Anleitungen und Zugang zu wertvollen Ressourcen, wie Tools, Frameworks, und Online-Communities, die dir helfen, deine Projekte auf das nächste Level zu bringen.