CyberLearning
Speak / lydspor

Der er gjort plads til speaks i projektet. Her kan man koble lokale MP3/WAV-filer på de enkelte sider eller styre afspilningen via SCORM/LMS.

Plads til foto eller illustration – fx gerningssted, kontor eller mailspor
CyberLearning · true crime / nordic noir
Case: Den forsvundne adgangskode

En medarbejder har modtaget en mistænkelig mail, og nogen forsøger at få adgang til virksomhedens systemer. I kurset opklarer man sagen ved at gennemgå spor, Outlook-mails og videoklip.

Læringsmål

Identificere tegn på phishingVurdere afsender, links og sprogbrug i en mail.
Analysere digitale sporBrug zoom, callouts og fotos til at finde det afgørende bevis.
Handle korrektBeslutte, hvad der bør gøres, når noget virker mistænkeligt.
Brug af interaktive elementerVideo, hotspot, slider, karusel og burger-menu.
✔ Runde navigationsknapper ✔ Logo øverst til venstre ✔ Mulighed for speak
Indholdstype 1
Opslagstavle: Hvad er der sket?

Her præsenteres sagen på en visuel og dramatisk måde. Brugeren kan få overblik over personer, spor og hændelser.

Mail modtaget kl. 07:02
“Advarsel – mail blokeret”
Linket leder til en ekstern side.
Medarbejder – sidste kendte aktivitet
IT-afdelingen afviser at have sendt beskeden.
Overvågningsbillede
Kodeordet 1234 er fundet i den mistænkte notesbog. Skal det bruges senere?
Klik dig gennem sporene og find gerningspersonen.
Indholdstype 2
Ren tekstside

Phishing er en metode, hvor kriminelle prøver at få adgang til følsomme oplysninger ved at udgive sig for at være en troværdig afsender. Ofte bruger de mails, beskeder eller falske websites, der ligner ægte tjenester.

Et phishingangreb kan være svært at opdage, fordi design og tone ofte ligner noget, man kender. Men der er typiske faresignaler: stavefejl, uventede links, en hastende tone og afsendere, der ser rigtige ud – men ikke er det.

På de næste sider ser du forskellige måder at arbejde med indhold på: fotos, callouts, animationer, zoom, slider, karusel, video og interaktive hotspots.

  • Vær skeptisk over for uopfordrede beskeder.
  • Undersøg afsender og links nøje.
  • Rapportér mistænkelige henvendelser til IT.
Indholdstype 3
To-spaltet layout med fotos

Hvad gør en mail mistænkelig?

  • Afsenderen bruger et domæne, der kun ligner den rigtige adresse.
  • Mailen opfordrer til hurtig handling: “Klik her med det samme”.
  • Formuleringerne er generiske og kunne være sendt til hvem som helst.

Denne type side er god til tekst og foto/illustrationsbokse forskellige steder.

Plads til et realistisk foto eller skærmbillede
Anden illustration/fotokasse – fx nærbillede af link eller tastatur
Indholdstype 4
Analyser en mail i Outlook

Et realistisk Outlook-skærmbillede med callouts, pile og feedback gør det tydeligt, hvilke detaljer brugeren skal lægge mærke til.

Outlook eksempel
Dette er en phishingmail, målet er at få dig til at klikke på et link.Mailen virker generel og bruger en falsk afsender.
Mailen ser ud til at komme fra en korrekt e-mail, men er forfalsket.
Den første del af linket ser korrekt ud: https://support... – men resten leder til en phishing-side.
Bemærk den generiske formulering – teksten kunne være sendt til andre virksomheder.
Korrekt!Det er en phishingmail.
Indholdstype 5
Tre typiske faresignaler

1. Uventet afsender

Kontrollér altid afsenderens domæne. Små variationer i adressen kan være et tegn på bedrageri.

fx it@cyberleaming.dk

2. Hastende besked

“Din konto er ved at blive lukket” eller “klik nu” er klassiske metoder til at få dig til at handle hurtigt.

Social engineering

3. Mistænkelige links

Hold musen over linket, før du klikker. Undersøg om domænet stemmer overens med afsenderen.

Hold musemarkøren over linket
Indholdstype 6
Åbn dossieret

Accordioner er gode til at skjule tekst, så brugeren selv vælger, hvad der skal læses.

Mistænkt A: “IT-afdelingen” ＋
Mailen udgiver sig for at komme fra IT. Afsenderfeltet ser troværdigt ud, men domænet er ændret en smule.
Mistænkt B: Linket ＋
Linkteksten ser legitim ud, men URL’en peger til en anden side. Hold musen over linket for at se den egentlige destination.
Mistænkt C: Sprog og tone ＋
Teksten er meget generel og forsøger at stresse modtageren til at handle uden at tænke.
Indholdstype 7
Trinvis animation

Et klik kan afsløre et spor ad gangen. Det giver rytme og understøtter forklaringen.

1
Brugeren modtager en mail fra “IT-afdelingen”.
2
Afsenderen virker legitim, men mailadressen er forfalsket.
3
Linket fører til en falsk side, hvor adgangskoden kan blive stjålet.
Indholdstype 8
Zoom ind på et spor

Her kan man klikke eller aktivere en zoom-funktion for at se detaljer – fx et domæne eller en lille afvigelse i teksten.

support.iteodne.com/addspace
Indholdstype 9
Sammenlign to billeder med en slider
Rigtig side
Phishing-side

Slid mellem to tilstande – fx ægte og falsk login eller før/efter et klik.

Hvorfor er denne type god?

  • Gør små forskelle tydelige.
  • Egner sig til sammenligning af ægte og falske sider.
  • Kan også bruges til "før / efter" eller "sikkert / usikkert".
Indholdstype 10
Foto-karusel / billedserie
Foto 1 – kontorbord med telefon og noter

Spor 1

En telefon ligger ved siden af et notat med koden 1234.

Foto 2 – skærm med mistænkelig loginboks

Spor 2

Skærmen viser en advarsel og beder brugeren bekræfte sin konto.

Foto 3 – kameraovervågning af person ved skrivebord

Spor 3

På videoen kan man se en kollega kigge mod skærmen uden at låse computeren.

Indholdstype 11
Video-side

Her er plads til en almindelig video (MP4/WebM) med eller uden speaks. Nedenfor ses en placeholder med kontroller.

▶
01:24 / 03:16

I det færdige kursus kan man tilknytte et rigtigt videoklip og evt. et speak-spor med play/pause-kontrol.

Indholdstype 12
Interaktiv video – klik på det mistænkelige sted

Videoen pauser, indtil brugeren klikker på det rigtige sted. Et korrekt klik fører til en halvtransparent grøn boks; et forkert klik fører til en rød boks.

Video pause – klik på det sted, hvor du ser noget mistænkeligt.
Se på kollegaens telefon og adfærd. Klik på det sted, der udgør en sikkerhedsrisiko.
Ekstra
Eksempler på grafik-effekter

Inspiration fra animate.style og motion.dev. Her vises både indbyggede CSS-animationer og interaktioner, som kan oversættes til JavaScript eller React/Framer Motion i et rigtigt projekt.

Fade in / slide up

Elementet animeres ind, når siden vises. God til step-by-step og fokus på vigtige områder.

animate__fadeInUp

Pulse

Et hotspot eller en CTA kan få en diskret pulsering for at guide brugeren.

animate__pulse

Motion / hover

Kortet reagerer ved hover med 3D-lignende bevægelse – inspireret af motion.dev / Framer Motion.

whileHover={{ scale: 1.02 }}
Afslutning

Sagen er opklaret

Dette er en afsluttende side med plads til opsummering, resultat og næste skridt. I en rigtig SCORM-pakke kan man markere kurset som gennemført og sende data tilbage til LMS’et.

Tak for din deltagelse

1 / 18