Länkar är ingen detalj
Kopplingar avgör hur människor och system hittar, klassificerar och relaterar innehåll.
En resa genom webbutvecklingens värld
Följ med på en resa från idén som senare blev känd som hypertext,
genom de första hypertextsystemen till dagens webb.
Förstå ursprunget till hypertext och därmed webben i sig.
Utvecklingen av hypertextsystem
Från början till modern tid
1945
Memex
Presenterad i Vannevar Bushs artikel ”As We May Think” (The Atlantic)
Ett visionärt koncept av Vannevar Bush som lade grunden för hypertext och modern webbutveckling: att organisera och länka information som i dagens databaser och länkar.
1960
Xanadu
Projektet startade på 1960-talet; första publicerade systemet 1988
Ett banbrytande projekt av Ted Nelson för ett transklusivt hypertextsystem. Påverkade senare tekniker och synen på länkad information.
1968
oN-Line System (NLS)
Det officiella namnet på systemet i ”Mother of All Demos”
Banbrytande system av Douglas Engelbart med mus och interaktiv textredigering – grundpelare i modern interaktion.
1968
Augment
Visades i den legendariska ”Mother of All Demos”
Ett av de första hypertextsystemen som förstärkte mänskligt tänkande – en milstolpe för interaktion med digitala system.
1980
Enquire
Utvecklat av Tim Berners-Lee vid CERN – föregångare till webben
Berners-Lees första hypertextsystem som konkretiserade länkad information och inspirerade webben.
1980
Tangle
Experimentellt system av Tim Berners-Lee
Vidareutvecklade Enquire-idéer med fokus på komplexa informationsnätverk.
1987
HyperCard
Presenterat av Apple – förenklade skapandet av länkade innehåll
Verktyg för att skapa interaktivt, länkad innehåll – föregångare till många moderna webbappar.
1989
World Wide Web
Koncept 1989; första webbplatsen 1991
Tim Berners-Lees hypertextsystem som gjorde länkad information allmänt känd och revolutionerade kunskapstillgången.
Varför hypertext är viktigt
Grunden för modern webbutveckling
Innan webben fanns uppstod idén om hypertext: att koppla samman information.
Detta koncept utgör ursprunget till det vi idag känner som internet och modern webbutveckling.
Att förstå hypertextens historia visar också grunderna som HTML, CSS, JavaScript och andra webbtekniker bygger på.
Vad hypertext betyder i dag
Från länkar och SEO till ren informationsarkitektur
SEO börjar med struktur
Om du förstår hypertext förstår du också bättre varför internlänkning, semantik och kontext spelar roll för sökmotorer.
Problem börjar ofta i strukturen
Otydlig navigation, kaotiska relationer mellan sidor och saknade hierarkier är sällan designproblem. Det är strukturproblem.
Informationsnätets utveckling
Från statiska webbplatser till artificiell intelligens
1990er
Web 1.0
Statiska sidor, HTML och enkel CSS
Webb 1.0 var främst dokumentcentrerat. Användare kunde läsa information men knappt skapa eget innehåll.
2000er
Web 2.0
Sociala nätverk, JavaScript, AJAX
Med Webb 2.0 blev internet mer interaktivt. Användare kunde nu skapa, kommentera och dela innehåll.
2010er
Web 3.0
Semantiskt webb, API:er, Linked Data
I Webb 3.0 står data i centrum. Information är bättre sammanlänkad och maskinläsbar, vilket möjliggör intelligenta applikationer.
2020er
Web 4.0
Intelligenta system, AI, personliga upplevelser
Webb 4.0 kombinerar artificiell intelligens med internet. Målet är ett självlärande, kontextmedvetet och starkt personligt web.
Varje webbfass löser ett problem och skapar ett nytt
Framsteg på webben är alltid en kompromiss
Web 1.0
Statiska sidor gjorde kunskap tillgänglig, men användare kunde knappt reagera, delta eller påverka.
Web 2.0
Interaktion blev enklare, men plattformar fick enorm kontroll över innehåll, räckvidd och data.
Web 3.0
Data blev mer strukturerad och sammankopplad, men också mer komplex, svårare att modellera och ofta svårare att använda väl.
Web 4.0
Kontext och AI lovar bättre system, men för med sig nya frågor om beroende, spårbarhet och kvalitet.
Webbens grunder
Byggstenarna som allt bygger på
Det moderna webben bygger på en rad grundläggande tekniker som avgör dess struktur och funktion.
HTML utgör ryggraden genom att strukturera innehållet på en sida. CSS ansvarar för design och layout, medan JavaScript möjliggör interaktivitet och dynamik.
Tillsammans skapar dessa verktyg det fundament som varje webbplats och webbtillämpning byggs på.
Milstolpar i webbutvecklingen
Inblickar i modern webbutveckling
2010
Single Page Applications (SPA)
Sömlös UX utan sidomladdning
Dynamiska, interaktiva appar med asynkron laddning – populariserade av ramverk som React och Vue.
2011
Web Components
Återanvändbara, plattformsoberoende UI-byggstenar
Anpassade HTML-element som kan återanvändas i alla appar; möjliggjorda av standarder som Shadow DOM och Custom Elements.
2011
WebRTC
Realtidskommunikation i webbläsaren
Ljud, video och data utan plugins – en hörnsten i moderna kommunikationsverktyg.
2015
Progressive Web Apps (PWA)
Snabba, tillförlitliga och plattformsoberoende
Förenar webbens och de inbyggda apparna bästa: offline, pushnotiser och app-liknande upplevelse i webbläsaren.
2015
Service Worker och Web Push
Offlinefunktioner och aviseringar
Möjliggör offlineåtkomst och aviseringar i realtid – gör PWA kraftfulla och flexibla.
2015
Jamstack
Arkitektur för snabba och säkra webbplatser
Kopplar isär frontend och backend och kombinerar statisk leverans med dynamiska API:er för prestanda och säkerhet.
2015
Brotli-komprimering
Högre komprimering än Gzip
Snabbare laddning tack vare effektivare komprimering och lägre datamängder.
2017
WebAssembly (WASM)
Hög prestanda på webben
Ger nästan inbyggd prestanda genom att köra kompilerad kod (t.ex. C++/Rust) i webbläsaren.
2018
HTTP/3 och QUIC
Effektivare anslutningar via UDP
Snabbare och stabilare anslutningar med lägre latens – särskilt i mobila nät.
2021
Privacy Sandbox
Integritetsinitiativ för en web utan cookies
Siktar på bättre integritet utan cookies från tredje part och ändå relevanta annonser.
2022
WebTransport
Realtidsdata över UDP
Möjliggör högpresterande realtidskommunikation för spel, streaming m.m.
2022
Container Query CSS
Större flexibilitet för responsiv design
Regler baserade på containerstorlek i stället för viewport – mycket bättre layoutkontroll.
2023
WebGPU
Modern ersättare för WebGL
Direkt GPU-åtkomst för 3D och ML i webbläsaren – avsevärt högre prestanda.
Varför modern teknik finns
Nya verktyg uppstår eftersom gamla begränsningar gör ont
Modern webbutveckling är intressant, men framför allt en reaktion på verkliga flaskhalsar. Den viktiga frågan är inte bara vad som är nytt, utan vilket problem det är tänkt att lösa.
SPA
Single Page Applications skapades för att göra interaktion smidigare. I utbyte blev navigation, initial laddning och SEO mycket svårare.
HTTP/3
HTTP/3 finns eftersom TCP och klassiska anslutningar når sina gränser vid latens och paketförlust. QUIC svarar exakt på det problemet.
WebGPU
WebGPU är inte bara ännu en API-etikett. Det är ett svar på behovet av mer grafik- och beräkningskraft direkt i webbläsaren.
TTT: Tips – Tricks – Verktyg
Blogg om webbutveckling
Ta reda på var webbutvecklingen har sitt ursprung och få användbara tips, länksamlingar, blogginlägg samt digitala dokument och videokurser för att fördjupa dig i ämnet.
Från det dokumentcentrerade statiska Web 1.0, via ett socialt Web 2.0 och ett semantiskt Web 3.0, till ett intelligent Web 4.0.
Upptäck hur modern webbutveckling formas idag: lär dig de senaste teknikerna och trenderna, få praktiska guider och tillgång till värdefulla resurser såsom verktyg, ramverk och onlinegemenskaper som hjälper dig att ta dina projekt till nästa nivå.