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

Progressive Web Apps (PWA)

Progressive Web Apps representerar en av de mest spännande utvecklingarna inom modern webbteknik. PWA kombinerar det bästa från webb och appvärlden för att skapa appliknande upplevelser direkt i webbläsaren.

Vad är PWA?

En Progressive Web App är en webbapplikation som använder moderna webbtekniker för att leverera en appliknande användarupplevelse. PWA:er kan installeras på användarens enhet och fungera offline, precis som en vanlig app.

Tekniska komponenter som krävs för PWA

1. HTML-meta-taggar

För att en webbplats ska fungera som PWA krävs specifika meta-taggar i HTML-huvudet:

<!-- PWA-stöd -->
<meta name="theme-color" content="#4285f4">
<meta name="description" content="Beskrivning av appen">
<link rel="manifest" href="/manifest.json">

<!-- iOS PWA-stöd -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="App-namn">
<link rel="apple-touch-icon" href="/icons/icon-192x192.png">
                

2. Manifest.json-filen

Manifestfilen definierar hur appen ska bete sig när den installeras. Den innehåller metadata om appen:

{
  "name": "Kent Lundgren",
  "short_name": "KentL",
  "description": "Kent Lundgrens personliga hemsida",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4285f4",
  "icons": [
    {
      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "icons/icon-512x512.png", 
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}
                

Viktiga egenskaper i manifest.json:

name - Fullständigt appnamn
short_name - Kort namn för hemskärmen
start_url - Vilken sida som öppnas när appen startas
display - Hur appen visas ("standalone", "fullscreen", "minimal-ui", "browser")
theme_color - Färg för statusfältet
background_color - Bakgrundsfärg när appen laddas
icons - Array med ikoner för olika skärmstorlekar

3. Service Worker (service-worker.js)

Service Worker är hjärtat i PWA-funktionaliteten. Det är ett JavaScript-skript som körs i bakgrunden och möjliggör offline-funktionalitet och caching:

// Grundläggande Service Worker-struktur
const CACHE_NAME = 'app-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  '/icons/icon-192x192.png'
];

// Installera service worker och cacha filer
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        return cache.addAll(urlsToCache);
      })
  );
});

// Hämta filer från cache eller nätverk
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        return response || fetch(event.request);
      }
    )
  );
});
                

Service Worker-funktioner:

Caching - Sparar filer lokalt för offline-åtkomst
Background sync - Synkroniserar data när anslutningen återställs
Push-notifikationer - Kan ta emot meddelanden även när appen är stängd
Nätverkshantering - Bestämmer när online/offline-innehåll ska användas

4. JavaScript för PWA-installation

För att hantera installation och användarinteraktion:

// Registrera service worker
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js')
        .then(registration => {
            console.log('Service Worker registrerad');
        });
}

// Hantera installationsprompt
window.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    // Spara eventet för senare användning
    deferredPrompt = e;
    // Visa egen installationsknapp
    showInstallButton();
});
                

Fördelar med PWA

Offline-funktionalitet - Fungerar utan internetanslutning
App-liknande upplevelse - Kan installeras på hemskärmen
Snabbare laddning - Cachade resurser laddas snabbt
Push-notifikationer - Kan skicka meddelanden till användare
Automatiska uppdateringar - Service worker uppdaterar innehåll automatiskt
Mindre dataförbrukning - Endast nya innehåll laddas ned
Plattformsoberoende - Fungerar på alla enheter med modern webbläsare

Nackdelar och utmaningar

Komplexitet - Kräver fördjupad kunskap om caching och service workers
Cachingsproblem - Gamla versioner kan fastna i cache
Begränsat iOS-stöd - Apple har historiskt begränsat PWA-funktioner
Utvecklingsutmaningar - Debugging av service workers kan vara svårt
Användarförvirring - Användare kanske inte förstår skillnaden mellan PWA och vanlig app

Så här stänger du av PWA helt

Baserat på den praktiska erfarenheten från denna webbplats, här är stegen för att helt inaktivera PWA:

1. Kommentera bort HTML-meta-taggar

<!-- PWA-FUNKTIONALITET BORTKOPPLAD
<meta name="theme-color" content="#4285f4">
<link rel="manifest" href="/manifest.json">
-->
                

2. Lägg till cache-busting meta-taggar

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
                

3. Avregistrera service workers via JavaScript

// Avregistrera alla service workers
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.getRegistrations().then(function(registrations) {
        for(let registration of registrations) {
            registration.unregister();
        }
    });
}

// Rensa PWA-cacher
if ('caches' in window) {
    caches.keys().then(function(cacheNames) {
        return Promise.all(
            cacheNames.map(function(cacheName) {
                return caches.delete(cacheName);
            })
        );
    });
}
                

4. Avinstallera redan installerade PWA-appar

För användare som redan installerat appen:

Chrome: Gå till chrome://apps/ och avinstallera appen
Eller: Gå till webbplatsinställningar och "Rensa data"
Mobil: Långtryck på app-ikonen och välj "Avinstallera"

5. Ta bort eller döp om manifestfilen

För att helt förhindra PWA-upptäckt kan manifestfilen döpas om till manifest.json.disabled eller tas bort helt.

När ska man använda PWA?

PWA är bra för:

Webbapplikationer som används regelbundet
Tjänster som behöver offline-funktionalitet
E-handel och produktkataloger
Nyhetswebbplatser och bloggar
Verktyg och kalkylatorer

PWA är mindre lämpligt för:

Enkla informationswebbplatser
Webbplatser som uppdateras sällan
När utvecklingsresurserna är begränsade
När målgruppen huvudsakligen använder äldre enheter

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.