6.1 Moderne webutvikling | IT 2

HTML5, CSS3, responsivt design og tilgjengelighet.

60 min

6 oppgaver

HTML5CSS3Responsivt designTilgjengelighet

Du leser den tradisjonelle versjonen

Din fremgang i kapitlet

0 / 6 oppgaver

Webutvikling har utviklet seg enormt de siste årene. Det som en gang var statiske HTML-sider med litt CSS og JavaScript, er nå komplekse applikasjoner som kan konkurrere med tradisjonelle desktop-programmer.

I dette kapittelet skal vi se på hvordan moderne webutvikling fungerer, hvilke verktøy og rammeverk som brukes, og hva som skiller frontend fra backend.

Frontend er alt brukeren ser og samhandler med i nettleseren:
- HTML-struktur
- CSS-styling
- JavaScript for interaktivitet
- Grafikk, animasjoner, skjemaer

Backend kjører på serveren og håndterer:
- Datalagring (databaser)
- Forretningslogikk
- Autentisering og sikkerhet
- API-er som frontend kommuniserer med

Fullstack-utviklere jobber med både frontend og backend.

✏️Tradisjonell web vs moderne web

Tradisjonell webapplikasjon:
Når brukeren klikker på en lenke eller sender inn et skjema, laster hele siden på nytt. Serveren genererer ny HTML for hver forespørsel.

Moderne webapplikasjon (SPA - Single Page Application):
Siden laster én gang. Deretter henter JavaScript data fra serveren (vanligvis JSON) og oppdaterer bare deler av siden dynamisk.

Fordeler med SPA:
- Raskere opplevelse (ingen full sidelasting)
- Mer app-lignende oppførsel
- Bedre brukeropplevelse

Ulemper:
- Krever mer JavaScript-kunnskap
- Kan være vanskeligere å optimalisere for søkemotorer (SEO)
- Krever mer kompleks arkitektur

Frontend-rammeverk:

React (bibliotek fra Meta/Facebook)
- Komponentbasert
- Mest populære valget
- Stort økosystem

Vue.js
- Enklere å lære enn React
- God dokumentasjon
- Fleksibel

Angular (fra Google)
- Komplett rammeverk
- Brukes ofte i store bedrifter
- Bratt læringskurve

Backend-rammeverk:

Flask (Python)
- Lettvekts
- God for læring og små prosjekter

Django (Python)
- Mer omfattende
- Innebygd admin-panel og ORM

Express (Node.js/JavaScript)
- Minimalistisk
- Fleksibel

Spring Boot (Java)
- Kraftig
- Bedriftsstandard

✏️npm og pakkehåndtering

npm (Node Package Manager) brukes til å installere JavaScript-biblioteker.

Installere et bibliotek:

npm install react
npm install express

package.json holder oversikt over avhengigheter:

{
  "name": "mitt-prosjekt",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.2.0",
    "express": "^4.18.2"
  },
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  }
}

Installere alle avhengigheter:

npm install

Dette er essensielt for moderne webutvikling hvor prosjekter kan ha hundrevis av avhengigheter.

✏️Typisk prosjektstruktur

Fullstack webprosjekt:

mitt-prosjekt/
├── backend/
│   ├── app.py              # Flask-applikasjon
│   ├── models.py           # Databasemodeller
│   ├── routes.py           # API-ruter
│   └── requirements.txt    # Python-avhengigheter
├── frontend/
│   ├── public/
│   │   └── index.html
│   ├── src/
│   │   ├── components/     # React-komponenter
│   │   ├── App.js
│   │   └── index.js
│   ├── package.json        # npm-avhengigheter
│   └── package-lock.json
├── database/
│   └── init.sql
└── README.md

Denne separasjonen gjør det enklere å:
- Jobbe parallelt på frontend og backend
- Deploy delene separat
- Teste hver del isolert

Nå skal du løse oppgaver om moderne webutvikling, frontend/backend-arkitektur og verktøy.

Oppsummering

I dette kapittelet har du lært:

- Moderne webutvikling: byggeverktoey og rammeverk i front.
- npm: pakkehaandtering for JavaScript-prosjekter.
- Prosjektstruktur: organisering av filer og mapper.
- Tradisjonell vs. moderne web: statiske sider mot dynamiske apper.

Noekkelbegreper

Begrep	Forklaring
npm	Pakkehaandterer for JavaScript
Pakke	Gjenbrukbar kodemodul

Oppgaver

Dette kapitlet er skrevet av Anthropics toppmodeller (Claude Opus og Claude Fable) og er foreløpig ikke manuelt gjennomgått — kvalitetskontrollen gjøres av uavhengige KI-agenter, og innmeldte feil rettes fortløpende. Funnet en feil? Meld fra, så retter vi den. Les mer om hvordan innholdet lages.