Template Dokumentasjon

Case Study Template

Hvordan porteføljesidene er bygget

Dokumentasjon og struktur for langt-form case study sider

Om denne malen

Dette er en dokumentasjonsside som forklarer hvordan case study-sidene i porteføljen er bygget. Den tjener også som en midlertidig placeholder til neste prosjekt (CORPUS) er ferdig implementert.

Hver case study følger en narrativ struktur som viser forskningsprosessen, metodikken, og resultatet på en tilgjengelig måte.

Teknisk informasjon

Teknologi:: HTML5, CSS3, Vanilla JavaScript
Stil:: Minimal og ren, typografi-fokusert
Responsive:: Fungerer på desktop, tablet, og mobil
Filer:: portfolio.css (delt styling), individuelle HTML-filer per prosjekt

Sidestruktur

1. Hero-seksjon

Toppen av siden inneholder:

Meta-badges: Små merker som viser år, prosjekttype, og institusjon
H1 tittel: Hovedtittel på prosjektet
H2 undertittel: Beskrivende undertittel på norsk
Subtitle: Engelsk oversettelse eller utdypning

        Eksempel fra Masteroppgave:
        Badges: "2019", "Masteroppgave", "UiO"
H1: "Facilitating for Capabilities"
H2: "Myndiggjøring av personer med utviklingshemming..."

      

2. Oversikt-seksjon

To-kolonnes layout (på desktop) med:

Sammendrag (venstre): 2-3 avsnitt som beskriver prosjektet overordnet
Detaljboks (høyre): Strukturert informasjon i definition list-format
- Tidslinje
- Min rolle
- Samarbeidspartnere
- Metoder
- Relevante lenker

3. Hovedinnhold

Narrativ-seksjonene følger en logisk flyt:

Utfordringen: Kontekst, problemområde, interessenter
Forskningsprosess: Metoder, tilnærming, etiske hensyn
Prosess: Nøkkelaktiviteter, iterasjoner, deltakelse
Funn/Resultater: Hva kom ut av det, impact, publikasjoner
Refleksjoner: Læring, hva ville du gjort annerledes

4. Navigasjon

Bunnen av siden har:

Lenke tilbake til porteføljeoversikten
Lenke til neste prosjekt (eller disabled hvis siste)

Interaktive funksjoner

Definition Tooltips

Fagtermer er markert med en prikket rød understrek. Når du holder musepekeren over dem (desktop) eller trykker på dem (mobil), vises en kort forklaring.

Implementasjon

Tooltips er implementert med en JavaScript-klasse som:

Detekterer om enheten er touch-basert eller ikke
Viser tooltip ved hover (desktop) eller tap (mobil)
Posisjonerer tooltip automatisk innenfor viewport
Lukker tooltip når du klikker utenfor (mobil)

Progress Navigation

En scrollbar til venstre for innholdet viser:

Vertikal linje: Representerer hele sidens lengde
Rød indikator: Viser nåværende scroll-posisjon
Seksjonslenker: Klikkbare lenker til hoveddeler av siden
Aktiv seksjon: Fremhevet i rødt når du scroller

Visuell feedback

Progress navigasjonen vises først etter at du scroller forbi hero-seksjonen. Alle elementer er 60% transparente for å ikke distrahere fra innholdet.

Responsivt design

Siden tilpasser seg automatisk til skjermstørrelse:

Desktop (>900px): Full progress nav med tekst
Mobil (≤900px): Kompakt nav med horisontale streker istedenfor tekst
Tablet: Gradvis skalering av tekststørrelser

Visuell stil

Fargepalett

Primary:: #0a0a0a (svart tekst)
Secondary:: #666 (grå tekst)
Accent:: #dc2626 (rød for fremheving)
Background:: #ffffff (hvit) / #f9fafb (alternativ)
Border:: #e5e5e5 (lys grå)

Typografi

Systemfonter brukes for rask lasting og lesbarhet:

Font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', etc.
Base font-size: 1.05rem (lett større enn standard)
Line-height: 1.7 (god lesbarhet)
Antialiasing aktivert for jevnere tekst

Komponenter

Flere gjenbrukbare komponenter er tilgjengelige:

.finding - Funnboks

Grå bakgrunn med rød tittel. Brukes til å fremheve viktige forskningsfunn eller innsikter.

        .highlight-box - Fremhevingsboks
        Gul bakgrunn med oransje venstre-border
Brukes til viktige punkter eller lister

      

.insight-box - Innsiktboks

Som highlight-box, men for enkeltavsnitt eller korte innsikter.

.publication-box - Publikasjonsboks

Grønn bakgrunn. Brukes til å fremheve publikasjoner, priser, eller eksterne anerkjennelser.

Forskningsspørsmål

.research-question brukes til å fremheve hovedforskningsspørsmålet. Grå bakgrunn med rød venstre-border.

"Pullquote brukes til viktige sitater eller statement som fortjener ekstra oppmerksomhet."

Teknisk implementasjon

Filstruktur

Porteføljedelen er organisert som følger:

portfolio-website/
├── server.js
├── package.json
└── public/
    ├── index.html
    ├── css/
    │   └── main.css
    ├── pasientjournal/
    │   ├── index.html
    │   ├── css/
    │   │   └── pasientjournal.css
    │   └── js/
    │       ├── TooltipManager.js
    │       └── app.js
    └── portfolio/
        ├── masteroppgave.html
        ├── template.html
        ├── css/
        │   └── portfolio.css
        └── js/
            ├── DefinitionTooltips.js
            ├── ProgressNavigation.js
            └── main.js

JavaScript-klasser

DefinitionTooltips

Håndterer alle interaktive definition tooltips:

Finner alle elementer med .term klassen
Leser tooltip-tekst fra data-tooltip attributt
Oppretter og posisjonerer tooltip-elementer dynamisk
Håndterer både hover og touch events

ProgressNavigation

Styrer scroll tracking og navigasjon:

Beregner scroll-prosent og oppdaterer rød indikator
Skjuler/viser navigation basert på scroll-posisjon
Fremhever aktiv seksjon basert på viewport
Smooth scroll til seksjoner ved klikk

Accessibility

Sidene følger grunnleggende accessibility-prinsipper:

Semantisk HTML: Korrekt bruk av header, nav, main, section, article
Keyboard navigasjon: Alle interaktive elementer kan nås med tastatur
Farge-kontrast: Møter WCAG AA-standard
Focus states: Synlige når du navigerer med tastatur
Alt-tekst: Bør legges til alle bilder (kommer)

Neste steg

Planlagte case studies

Masteroppgave (2019) - Ferdig implementert
CORPUS (2020-2022) - Kommende
- Helsedigitalisering og kapasitetsbygging
- 12 intervjuer med implementeringsledere
- Innføring av digital hjemmetjeneste i Oslo
Doktorgradsarbeid - Kommende
- Democratic Design Theory
- Informasjonssystemer-perspektiv
- Teoretisk utvikling (early-stage)

Forbedringer og justeringer

Legge til workshop-bilder og prosessdiagrammer
Revidere innhold for klarhet og nøyaktighet
Lage porteføljelanding-side (index.html)
Teste med eksterne brukere for feedback
Vurdere norsk vs. engelsk for bredere publikum

Bruke malen

For å lage en ny case study-side:

Kopier strukturen fra masteroppgave.html
Erstatt innhold med nytt prosjekt
Behold hero, overview, og navigasjonsstruktur
Legg til definition tooltips for fagtermer (<span class="term" data-tooltip="...">)
Sett ID-er på hovednivå h2-seksjoner for progress nav
Test responsivt design på ulike enheter
Oppdater navigasjonslenker mellom prosjekter

← Forrige prosjekt Hjem