Teknikbeskrivning - Kent Lundgrens hemsida

Denna sida beskriver den tekniska utvecklingen av webbdesign, med fokus på skillnaderna mellan den äldre frames-baserade tekniken och den modernare ansatsen som nu används på denna hemsida.

Den gamla tekniken: Frames

Den ursprungliga versionen av kentlundgren.se använde HTML-frames, en teknik som var populär under sent 1990-tal och tidigt 2000-tal. Frames möjliggjorde uppdelning av webbläsarfönstret i flera separata HTML-dokument.

Besök den gamla hemsidan

<frameset cols="200,*">
    <frame name="contents" target="main" src="frame_to_index.html" scrolling="auto">
    <frame name="main" src="huvudsida.html" target="_self" scrolling="auto">
    <noframes>
        <body>
            <p>This page uses frames, but your browser doesn't support them.</p>
        </body>
    </noframes>
</frameset>
                

Sidans struktur bestod av tre separata filer:

index.html - Huvudfilen som definierade frames-layouten
frame_to_index.html - Vänsterkolumnen med navigering
huvudsida.html - Huvudinnehållet i högerkolumnen

Problem med frames-tekniken

Tillgänglighetsproblem - Skärmläsare och andra hjälpmedel har svårt att navigera frames
SEO-utmaningar - Sökmotorer har svårt att indexera innehåll i frames korrekt
Responsiva begränsningar - Frames fungerar dåligt på mobila enheter och med olika skärmstorlekar
Användarupplevelseproblem - Problem med bokmärkning, delning och navigationshistorik
Föråldrad teknik - Frames har fasats ut i HTML5-standarden

Modern webbteknik

Den nya versionen av hemsidan använder moderna webbutvecklingstekniker organiserade i tre huvudfiler:

index.html

Innehåller sidans struktur och text.

HTML5 använder semantiska element som <header>, <nav>, <main>, <section> och <footer> för bättre struktur och tillgänglighet.

styles.css

Separerat stilark som hanterar all visuell formatering.

Använder CSS flexbox, media queries och andra moderna CSS-tekniker.

script.js

JavaScript-fil för interaktivitet.

Hanterar t.ex. mobilmenyn och dynamiska effekter.

Hur sidopanelen implementeras i modern webbteknik

Istället för frames används nu CSS och JavaScript för att skapa en liknande men mer flexibel layout:

Positionering med CSS - Sidopanelen positioneras med position: fixed så att den alltid syns oavsett skrollning
Responsiv design - På mindre skärmar (mobiler) döljs sidopanelen och kan tas fram med en menyknapp
Interaktivitet med JavaScript - Menyn kan visas/döljas på mobila enheter med JavaScript

/* CSS för sidopanelen */
nav {
    background-color: #333;
    color: white;
    width: 250px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    padding: 2rem 1rem;
    transition: all 0.3s ease;
}

/* Responsivitet för sidopanelen */
@media (max-width: 768px) {
    nav {
        transform: translateX(-100%);
        z-index: 99;
    }
    
    .menu-toggle {
        display: block;
    }
    
    .nav-active {
        transform: translateX(0);
    }
}
                

JavaScript används för att göra menyn interaktiv:

// Toggle för mobilmeny
document.querySelector('.menu-toggle').addEventListener('click', function() {
    document.getElementById('sidebar').classList.toggle('nav-active');
    document.querySelector('.overlay').classList.toggle('overlay-active');
});
                

Fördelar med den moderna ansatsen

Bättre tillgänglighet - Sidans struktur är tydlig och följer standarder
Förbättrad SEO - Sökmotorer kan enkelt indexera innehållet
Responsiv design - Fungerar väl på allt från mobiltelefoner till stora skärmar
Separation av innehåll och design - HTML för struktur, CSS för design, JavaScript för beteende
Enklare underhåll - Tydligare kodstruktur underlättar uppdateringar

Webbteknikens utveckling över tid

1990-talet

HTML-fokuserad era

HTML 2.0 (1995) och HTML 3.2 (1997) utvecklades
Webbsidor var primärt statiska dokument
Tabeller användes för layout
Frames introducerades för att dela upp sidor
CSS 1 introducerades 1996 men användes begränsat
JavaScript introducerades 1995 men var primitivt
Animerade GIF:ar och blinkande text var populärt

2000-talet

CSS och dynamikens framväxt

XHTML introducerades som striktare HTML-variant
CSS 2 blev mer utbrett för siddesign
Tabellbaserad design började ersättas av div-baserad layout ("div soup")
AJAX (2005) revolutionerade dynamiska webbsidor
Web 2.0 med användarskapat innehåll och interaktivitet
Flash var populärt för animationer och interaktivitet
jQuery (2006) förenklade JavaScript-utveckling
Frames fasades gradvis ut till förmån för div-baserade layouter

2010-talet

Mobilfokus och modernt ramverk

HTML5 (2014) blev officiell standard
Responsiv design blev nödvändig med mobil internetanvändning
CSS3 med avancerade funktioner som animationer, flexbox och grid
JavaScript-ramverk som React, Angular och Vue växte fram
Mobilanpassad design först ("mobile-first approach")
Semantic HTML uppmuntrades för bättre tillgänglighet
Flash dog ut till förmån för HTML5
Single-page applications (SPAs) blev populära

2020-talet

Användarfokus och prestanda

Prestanda och laddningstider är kritiska faktorer
CSS-Framework (Bootstrap, Tailwind) effektiviserar design
Jamstack-arkitektur för snabbare, säkrare webbplatser
PWA (Progressive Web Apps) suddar ut gränsen mellan webb och app
Dark mode och användarpreferenser i fokus
Tillgänglighet (a11y) är en grundläggande aspekt
Serverless-funktioner för enklare backend
WebAssembly för högpresterande webbapplikationer
Core Web Vitals som SEO-faktor för användarupplevelse

Framtidsutsikter för webbteknik

Kommer HTML, CSS och JavaScript fortsätta vara grunden för webbutveckling? Mycket tyder på det, men med intressanta utvecklingar:

Fortsatt relevans för grundteknikerna

HTML kommer fortsätta vara strukturgrunden, men med ökad semantik och tillgänglighet
CSS utvecklas med nya layouttekniker, variabler och beräkningsförmågor
JavaScript vidareutvecklas ständigt med nya standarder (ES-versioner)

Troliga utvecklingstrender

AI-baserad webbutveckling - Verktyg som hjälper utvecklare att skapa och underhålla kod
Komponentsbaserad utveckling - Fortsatt utveckling mot återanvändbara komponenter
Metaramverk - Som Next.js, Astro och Remix som kombinerar server och klient
WebAssembly (WASM) - Möjliggör användning av andra programmeringsspråk i webbläsaren
Headless CMS - Separerar innehåll från presentation för flexiblare lösningar
No-code/low-code - Gör webbutveckling tillgänglig för fler utan djup teknisk kunskap
Mer avancerad CSS - Med Container Queries, Cascade Layers och nya layoutmöjligheter
Immersiva upplevelser - AR/VR och 3D via WebXR och WebGPU

Långsiktiga trender

På lång sikt kommer vi troligen se:

En fortsatt ökning av webben som applikationsplattform snarare än dokumentbaserad
Integrering av AI-assistans direkt i webbsidor och applikationer
Ökad betydelse av privacy, säkerhet och användarkontroll
Mer sömlös integration mellan enheter och plattformar

Trots nya tekniker kommer webbens grundtekniker - HTML, CSS och JavaScript - sannolikt förbli centrala, men abstraktionslagret ovanpå dessa kan förändras betydligt.