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 utvikla seg enormt dei siste åra. Det som ein gong var statiske HTML-sider med litt CSS og JavaScript, er no komplekse applikasjonar som kan konkurrere med tradisjonelle desktop-program.

I dette kapittelet skal vi sjå på korleis moderne webutvikling fungerer, kva verktøy og rammeverk som blir brukte, og kva som skil frontend frå backend.

Frontend er alt brukaren ser og samhandlar med i nettlesaren:
- HTML-struktur
- CSS-styling
- JavaScript for interaktivitet
- Grafikk, animasjonar, skjema

Backend køyrer på serveren og handterer:
- Datalagring (databasar)
- Forretningslogikk
- Autentisering og tryggleik
- API-ar som frontend kommuniserer med

Fullstack-utviklarar jobbar med både frontend og backend.

✏️Tradisjonell web vs moderne web

Tradisjonell webapplikasjon:
Når brukaren klikkar på ei lenkje eller sender inn eit skjema, lastar heile sida på nytt. Serveren genererer ny HTML for kvar førespurnad.

Moderne webapplikasjon (SPA - Single Page Application):
Sida lastar éin gong. Deretter hentar JavaScript data frå serveren (vanlegvis JSON) og oppdaterer berre delar av sida dynamisk.

Fordelar med SPA:
- Raskare oppleving (inga full sidelasting)
- Meir app-liknande oppførsel
- Betre brukaroppleving

Ulemper:
- Krev meir JavaScript-kunnskap
- Kan vere vanskelegare å optimalisere for søkjemotorar (SEO)
- Krev meir kompleks arkitektur

Frontend-rammeverk:

React (bibliotek frå Meta/Facebook)
- Komponentbasert
- Mest populære valet
- Stort økosystem

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

Angular (frå Google)
- Komplett rammeverk
- Blir ofte brukt i store bedrifter
- Bratt læringskurve

Backend-rammeverk:

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

Django (Python)
- Meir omfattande
- Innebygd admin-panel og ORM

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

Spring Boot (Java)
- Kraftig
- Bedriftsstandard

✏️npm og pakkehandtering

npm (Node Package Manager) blir brukt til å installere JavaScript-bibliotek.

Installere eit bibliotek:

npm install react
npm install express

package.json held oversikt over avhengigheiter:

{
  "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 avhengigheiter:

npm install

Dette er essensielt for moderne webutvikling der prosjekt kan ha hundrevis av avhengigheiter.

✏️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 gjer det enklare å:
- Jobbe parallelt på frontend og backend
- Deploye delane separat
- Teste kvar del isolert

No skal du løyse oppgåver om moderne webutvikling, frontend/backend-arkitektur og verktøy.

Oppsummering

I dette kapittelet har du lært:

- Moderne webutvikling: byggjeverktøy og rammeverk i front.
- npm: pakkehandtering for JavaScript-prosjekt.
- Prosjektstruktur: organisering av filer og mapper.
- Tradisjonell vs. moderne web: statiske sider mot dynamiske appar.

Nøkkelbegrep

Begrep	Forklaring
npm	Pakkehandterar 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.