Teori & noter

WordPress 101

WordPress er et CMS (Content Management System), altså et system til at opbygge, redigere og administrere hjemmesider – uden at man nødvendigvis skal kunne kode alt fra bunden. WordPress bruges af over 40 % af alle websites i verden – det er fleksibelt og open source.

Visuel redigering med drag-and-drop page builders (fx Elementor, Gutenberg)

Kan kombineres med designprincipper, UX og responsive layouts

Let at koble til SEO, Google Analytics og sociale medier

Mulighed for at kode egne temaer/skabeloner i HTML, CSS, PHP

Som multimediedesigner kan man tilpasse udseendet og funktionaliteten af en WordPress-hjemmeside ved at:

1. Lave eget tema fra bunden
2. Lave et child theme (et “under-tema” til et eksisterende tema)

Byg dit eget tema fra bunden:

Et tema er en mappe med PHP-, CSS- og evt. JS-filer, typisk placeret her:

📁 /wp-content/themes/din-temamappe/

Mindst 2 filer er nødvendige:

• style.css → Indeholder metadata og styling
• index.php → Hovedskabelonen

Tilpas eksisterende tema – child theme

Et child theme arver alt fra et eksisterende (parent) tema, men du kan overskrive udvalgte filer og styles. Det er smart, fordi:

• Du beholder muligheden for opdatering af parent theme
• Du kan tilpasse design og funktioner, uden at ændre originalen

1. Opret en ny mappe i /wp-content/themes/, fx:

/wp-content/themes/astra-child/

2. Lav en style.css med metadata:

/*
Theme Name: Astra Child
Template: astra
*/

NB: Template-navnet skal matche mappenavnet på parent theme!

3. Lav en functions.php til at importere parent styles:

<?php
function astra_child_enqueue_styles() {
    wp_enqueue_style('astra-parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'astra_child_enqueue_styles');

4. Tilpas frit!

• Du kan nu oprette fx footer.php i child-temaet, og det vil overskrive parent-temaets footer.
• Du kan tilføje ekstra CSS i style.css eller nye funktioner i functions.php.

SASS

Der er mange mulighederne med SASS og SCSS, hvilket er relevant, hvis man arbejder med stylesheets i multimediedesign-arbejde og vil effektivisere og strukturere CSS-koden bedre. Ved brug af Sass opnår man et mere effektivt og ensartet webdesign.

Selvom CSS og Sass teoretisk set har de samme funktioner, kan Sass udføre det samme arbejde med mindre kode. 

Sass tillader variabler og kodestykker, der kan genbruges igen og igen, hvilket sparer en masse tid og reducerer risikoen for kodefejl, men gør det også nemmere og hurtigere at ændre stilarter flere steder i koden, f.eks. rammestørrelser, kantstilarter, farver osv.

Sass er et præprocessorsprog, der fortolkes til CSS. Et præprocessorsprog tager inputdata og konverterer det til output, der bruges som input af et andet program. Det betyder, at når du kører Sass-kode, konverterer du faktisk din kode til CSS. Den CSS-kode, der genereres, bruges derefter direkte af en browser. Hvorfor dette ekstra trin med at konvertere fra Sass til CSS? Fordi browsere kun kan læse CSS-kode.

SASS (Syntactically Awesome Stylesheets) er en CSS preprocessor – altså et værktøj, der udvider CSS med funktioner som variabler, funktioner, nesting, mixins m.m.

SCSS er den mest brugte syntaks for SASS – den ligner almindelig CSS, men med ekstra funktionalitet.
Den anden syntaks (klassisk SASS) er mere “kortfattet”, men sjældnere brugt i dag.

FORDELE MED SASS/SCSS

• Gør det nemt at genbruge værdier (fx farver, skrifttyper, afstande). (Variabler)
• Skriv CSS mere struktureret, så det følger HTML-strukturen. (Nesting)
• Split din CSS op i mindre filer med _nav.scss, _footer.scss osv. (Modulopdeling/Partials)
• Genbrug af kode med mulighed for parametre – lidt som funktioner i JS. (Mixins)
• Del fælles CSS-styles mellem elementer. (Inheritance)
• Regn på værdier og lav egne funktioner. (Funktioner/operationer)

Vi vil bruge SCSS.

Variabler er genbrugelige værdier. De gør det nemt at sikre ensartede værdier. Variabler starter med dollartegnet: $ Variabler kan bruges alle steder i koden efter de er sat, men bør altid være først i dokumentet.

• Eks: $navFontSize: 16px;

Nesting er en god måde at samle kode der har en forbindelse med hinanden.

Partials inkluderer delvise filer, der tilsammen definerer hele projektet. Når en partial starter med underscore _
vil filen ikke blive processeret til en CSSfil, men kun inkluderet i filen der inkluderer den. Use er smart til at yderligere splitte koden op.

Mixins er små bidder af kode der kan genbruges. Mixins kan holde værdier, der senere kan inkluderes gentagne gange i koden.

Brug kun mixinssammen med argumenter/parametre

Farvemanipulation darken (regnes i procent), lighten (regnes i procent) og rgba (regnes ligesom i CSS som
kommaværdi) I stedet for at skrive farve, kan du bruge hex, rgb eller variabel.

Andre måder at manipulere: saturate, desaturate, adjust-hue, tint, shade

Opgaver:

VPC (Value Proposition Canvas)

En model der kan gøre os bevidste om hvordan at vi møder kundens / brugernes forhåbninger og ønsker ift. vores produkt eller serviceydelse. Formålet er at få indsigt i hvilke logikker og barrierer der kan forøge eller reducere kundens lyst til at købe vores produkter eller serviceydelser, samt at kunne tilpasse disse, på en måde som imødekommer kundens ønsker og forventninger bedst muligt.

Et værditilbud er en marketingerklæring, der opsummerer, hvorfor forbrugere bør vælge et bestemt produkt eller en bestemt tjenesteydelse, og fremhæver de specifikke fordele, det leverer.  Se artikel: https://www.investopedia.com/terms/v/valueproposition.asp

Jeg har lavet to eksempler, det ene tager udgangspunkt i mit eget brand og mine egne produkter i min hobbyvirksomhed og det andet tager udgangspunkt i min uddannelse til multimediedesigner.

Multi Channel Media

Integreret kommunikation:

• Brandet, kanaler, samspil.
• Digitale platforme (Tiktok, Instagram, Facebook, Linkedin)
• Integreret kommunikation er også tv, print, radio, direkte, e-mail, instant messaging, youtube.
• “The medium is the message” – Marshall McLuhan, 1964: Et medie har stor indflydelse på vores oplevelse og opfattelse af budskabet, ofte mere end selve budskabets indhold.

Medietype:

• Betalte medier (tv-reklamer, annoncer i aviser m.m.). Betalte medier kan ændre sig til at være fortjente medier, d.v.s. at de ved at blive delt på some-platforme)
• Ejede medier (eget website, blog, e-mail-lister, eller sociale medieprofiler.)

Medievalg- og planlægning

• Evnen til at kommunikere
• Budskabsdesign (Etos, Patos, Logos og Kairos)
• Indrykningsstrategi (kontinuitet, Flighting, Pulsing, Bursting, Frontloading, Backloading

Den strategiske indsats

• TMK-modellen (værditilbud, målgruppe, budskab, appelformer, tone)

Mål & Måling

• SMART (Specific, Measurable, Attainable, Relevant, Time-based)
• ROI (Return Of Investment)
• ROAS (Return On Ad Spend)
• KPI (Key Performance Indicators)

Multi & Omni

• Multi: (Flere kanaler, ofte separate fra hinanden, fokus på kanalen og kundeinddragelse og modtageren skal kunne finde budskabet på deres foretrukne kanaler.
• Omni: Flere kanaler, integrerede og relaterede til hinanden, fokus på kunden og kundeoplevelsen og modtageren kan skifte fra en platform til en anden og forvente den samme, helstøbte oplevelse med minimal friktion.

Consulting 101

XR-teknologi

VR (virtual reality) og AR (argumented reality f.eks. pokemon go (også hvis man kan se f.eks. ledninger inde i en væg, så man ikke borer der hvor ledningerne er).

MR – Mixed reality (hvor man blander VR og AR)

Prøv Finding Waldo – youtube – hvor man skal klikke rundt og finde Waldo.

Waymo 360 degrees experience – a fully autonomous Driving Journey

Om nom 360 (3D)

Exposure Therapy

Hololens – briller med hologrammer (see thoroug model)

XR UX

• Indlevelse (for meget hjælp kan lede til for mange forstyrrelser og for lidt hjælp, så kan brugeren sidde fast og ikke kan komme videre).
• Brugervenlighed (designe intuitive grænseflader og klare instruktioner)
• Komfort (ergonomisk)
• Kontekstuel relevans (skal være relevant for brugerens behov og kontekst, hvornår, hvor, formålet og teknologiske krav).
• Kompatibilitet
• Storytelling
• Dos og Dont’s
• Husk at tænke på start/slut i produktet, hvordan starter det, og hvordan slutter oplevelsen
• Se ready player one
• Se slides med links til ”læsestof til eftertanke”

Niveauer på konsulentens rolle

• Strategisk
• Taktisk
• Operationelt

Citater fra Aristoteles og Sokrates.

”the man who asks a question is a fool for a minute, the man who does not is a fool for life.”

“I know you won’t believe me, but the highest form of human excellence is to question oneself and others.”

Se tidslinje for consultation

Metoder:

MECE: Mutallly Exclusive Collectively Exhaustive (når vi skal forstå problemer)

Brug denne metode når det er smart at analysere, kategorisere eller præsentere data.

Ved tvivl om nogle problemstillinger kan bruges i MECE – brug AI – lav en MECE-compliant liste – der skal ikke være overlap i listen.

En liste med tal er nemmere at gennemskue. Det er sværere når det er ren tekst.

SCAMPER (når vi skal være kreative) (Substitute, Combime, Adapt, Moditfy, Put to other use, Eliminate, Reverse)

• Google cardboard egen vr (pap og mobiltlf)

SUND UX Consulting

Deltog desværre ikke p.g.a. influenza.

AI-Workshop

Case: Sikker digital adfærd

Udvikl en kampagne rettet mod at øge bevidstheden om sikker onlineadfærd. Målgruppen er børn og unge under15år. Opgaven går ud på at vi IKKE må tage stilling til noget selv og at vi skal lade AI generere ALT for os.

Konklusion: Noget output var noget værre vrøvl og nogle ting gav slet ikke mening og ville ikke ramme målgruppen. I gruppen (Mads, Sofie og jeg) talte vi om, hvorvidt det ville have været bedre at prompte på engelsk end på dansk i.f.t. outputtet. AI-drevet kampagne om sikker online adfærd for børn og unge

Casebeskrivelse: Du skal udvikle en digital kampagne, der øger bevidstheden om sikker online adfærd blandt børn og unge under 15 år. Kampagnen skal være visuelt tiltalende, pædagogisk og letforståelig for målgruppen, og alle dele skal skabes med AI-værktøjer.

Opgaver:

1. Målgruppeanalyse med AI
   
   • Brug AI til at analysere målgruppen: deres online vaner, udfordringer og adfærd (ChatGPT, Google Bard).
   • Skab AI-genererede personas og brugerrejser, der illustrerer typiske digitale situationer for børn og unge.
     
2. Kampagnekoncept & Budskaber
   
   • Udarbejd et kreativt kampagnekoncept med stærke nøglebudskaber, der taler til børn og unge (ChatGPT, Jasper)
   • Generér forslag til catchy slogans og hashtags.
     
3. Visuel identitet
   
   • Design kampagnens visuelle elementer (logo, farvepalet, illustrationer) med AI (DALL·E, Midjourney, Canva AI).
   • Lav animationer eller korte videoer, der formidler budskabet på en engagerende måde (Runway, Lumen5).
     
4. Kampagnemateriale
   
   • Udarbejd plakater, SoMe opslag, og korte videoannoncer, som appellerer til den unge målgruppe.
   • Brug AI til at skabe en prototype af en interaktiv mini-webside med tips og gode råd (Uizard, Figma AI).

5. Kommunikation & Tonalitet
   
   • Skriv al tekst i kampagnen – fra overskrifter til korte tekster – med AI, så det passer til børn og unges sprogbrug (ChatGPT).
     
6. Pitch og præsentation
   
   • Lav en fængende præsentation af kampagnen ved hjælp af AI-værktøjer (Beautiful.ai, Tome).
   • Skab en AI-genereret voice-over eller video-pitch, der kan præsenteres for kommunen eller skolemyndigheder (Synthesia, ElevenLabs).
     

Krav:

• Alt materiale skal udvikles udelukkende med AI-værktøjer.
• Dokumentér hvilke AI-værktøjer, der er brugt til hvad.
• Afslut med en refleksion over muligheder og udfordringer ved at lave en sådan kampagne 100 % med AI.
  

Læringsmål:

• Forståelse for målgruppeanalyse og brugercentreret kommunikation.
• Kreativ anvendelse af AI i kampagneudvikling.
• Evne til at tilpasse sprog og visuelle elementer til børn og unge.
• Kritisk refleksion over AI’s rolle i samfundsrelevante kommunikationsopgaver.
  

Vil du have, at jeg hjælper med at lave et konkret undervisningsforløb ud fra denne case?

Målgruppeanalyse med AI

Online vaner, udfordringer og adfærd – AI-analyse (baseret på danske data + AI-syntese):

Vaner:

• 2-3 timer dagligt på sociale medier og digitale spil.
• Foretrukne platforme: TikTok, YouTube, Snapchat, Instagram (dog under 15 år ikke officielt på Instagram).
• Brug af digitale devices starter typisk omkring 10-årsalderen.
  

Udfordringer:

• Digital mobning, eksklusion fra grupper på sociale medier.
• Følelse af ansvar for at undgå ubehag, men manglende redskaber til at tackle det.
• Risiko for afhængighedssymptomer og dårlig trivsel især blandt piger og børn med lav selvkontrol.
  

Adfærd:

• Mange er aktive skabere af indhold (videoer, memes).
• Søger fællesskab og social anerkendelse online.
• Undgår ofte at involvere voksne ved problemer, hvilket øger risiko for ubehag.
  

AI-genererede personas og brugerrejser

Persona 1: Emma, 13 årAktiv på TikTok og Snapchat, elsker at lave videoer. Oplever pres for at være “perfekt” og få mange likes. Er ofte usikker på, hvordan hun skal håndtere negative kommentarer. Tør ikke altid tale med forældrene om det.

Persona 2: Oscar, 11 årSpiller meget online og chatter med venner i spillet. Føler sig tit udenfor, fordi han ikke er med i klassens WhatsApp-gruppe. Vil gerne have mere mod til at sige fra, når andre er slemme online. Bruger YouTube til at lære nye ting og få inspiration.

Typisk brugerrejse for Emma:

1. Morgen: Tjekker TikTok og Instagram efter likes og kommentarer.
2. Skole: Snakker med venner, føler pres for at “være som de andre”.
3. Efter skole: Spiller online, oplever en negativ kommentar i en chat.
4. Aften: Føler sig usikker, men tøver med at fortælle en voksen.
5. Løsning: Ser en kampagnevideo om, hvordan hun kan sige fra og søge hjælp.
   

Kampagnekoncept: “Stærk Online – Stærk I Dig”

• Fokus: Selvtillid, mod og støtte i digitale udfordringer.
• Empower børn til at tage kontrol over deres online liv med mod og venskab.
  

Nøglebudskaber:

• “Du er stærk, også når du er online.”
• “Sig fra, når noget føles forkert.”
• “Fællesskab gør os stærkere.”
• “Det er okay at bede om hjælp.”
  

Sloganforslag:

• #StærkOnline
• #MinStemmeMinStyrke
• #SigFraStyrkDig
• #FællesskabErKraft
  

Visuel identitet

• Logo: En stiliseret megafon, der samtidig former et hjerte — symbol på at blive hørt med omsorg.

• Farvepalet: Energi og tryghed i kombination — varme orange, rolige blå og grønne nuancer.
  

• Illustrationer: Børn i forskellige digitale og sociale situationer, med fokus på smil og empowerment.

Kampagnemateriale

• Plakater: Med slogans og illustrationer i skolernes fællesområder.
• SoMe opslag: Engagerende videoer med personas, tips til at sige fra og mod til at bede om hjælp.
• Prototype mini-webside: Interaktive tips, persona-historier, quizzer og videoer – kan bygges i Uizard eller Figma AI.
  

Kommunikation & Tonalitet

• Sproget er enkelt, nærværende og opmuntrende.
• Brug af direkte tiltale: “Du kan…”, “Husk, det er okay at…”.
• Fokus på empowerment fremfor frygt: vi styrker børn, ikke skræmmer dem.
  

Eksempel på overskrift:
“Styrk dig selv online – det er din verden!”
Eksempel på tekst:
“Det er ikke altid nemt at være online. Nogle gange kan det føles svært at sige fra. Men du er ikke alene – og du er stærkere, end du tror.”

Pitch og præsentation

• Powerpoint eller AI-præsentation via Beautiful.ai med overskuelige slides, grafik og korte videoer.
  
• AI-genereret voice-over pitch til kommunen/skolemyndigheder via Synthesia eller ElevenLabs, der præsenterer kampagnen klart og engagerende.
  

Kampagne hjemmeside:

https://v0.app/chat/online-safety-campaign-l3DZiiO435L

Kampagne sang:

https://suno.com/s/yldqGSAGHXlYEkcG