Vi starter rejsen fra statiske HTML-sider til dynamiske web-applikationer. Vi kigger på hvorfor frameworks som Vue er relevante i moderne multimedieproduktion.
", "tags": ["Teori"] }, { "id": "v5-4", "type": "video", "title": "Intro til vue", "url": "", "tags": ["Vue"] }, { "id": "v5-5", "type": "video", "title": "Reactivity", "url": "", "tags": ["Vue", "Data"] }, { "id": "f5-1", "type": "file", "title": "Vue starter (HTML fil)", "url": "", "tags": ["Code"] }, { "id": "v5-6", "type": "video", "title": "Events & methods", "url": "", "tags": ["Vue", "Interaktion"] }, { "id": "a5-1", "type": "assignment", "title": "Opgave: Vælg stemning", "content_html": "Brug starterfilen og prøv at genskabe kommentareksemplet fra videoerne. Vis én enkelt kommentar på siden (brug samme struktur som i videoen: fx article, header, main osv.).
Når man klikker på en af knapperne, skal teksten i kommentaren ændre sig og passe til den valgte stemning. Det er stadig den samme kommentar, vi ændrer bare teksten dynamisk. Formålet er at prøve at bruge starter filen, skrive jeres første template og bruge @click.
", "is_completed": false, "tags": ["Vue", "Events", "Interaktion"] } ] }, { "day_name": "Fredag", "date": "2026-01-30", "items": [ { "id": "l5-2", "type": "lecture", "title": "Fra brandguide til designprincipper – introduktion til systemtænkning", "content_html": "At introducere arbejdet med design systemer gennem en konkret og realistisk case. De studerende skal opnå forståelse for, hvordan en brandguide kan oversættes til styrende designprincipper, som danner fundamentet for opbygningen af et konsistent og skalerbart digitalt design system.
I skal arbejde med SEA-brandguiden og formulere 1–2 designprincipper, som er centrale for SEA’s digitale udtryk. Designprincipperne skal være overordnede designholdninger, udledt direkte af brandguiden og formuleret i jeres eget sprog.
At forankre de fælles designprincipper i et konkret format i Figma, som fungerer som referencepunkt for det videre arbejde.
Fokus er på klarhed og anvendelighed – ikke på æstetisk finish.
", "is_completed": false, "tags": ["Figma", "Dokumentation"] } ] } ] }, { "week_number": 6, "week_label": "Vue Logik & Figma Foundations", "is_current": false, "days": [ { "day_name": "Mandag", "date": "2026-02-02", "items": [ { "id": "v6-1", "type": "video", "title": "▶️ Løsning på opgaven (fra uge 5)", "url": "", "tags": ["Vue", "Review"] }, { "id": "v6-2", "type": "video", "title": "▶️ Opsamling (uge 5)", "url": "", "tags": ["Vue"] }, { "id": "v6-3", "type": "video", "title": "▶️ Conditionals", "url": "", "tags": ["Vue", "Logik"] }, { "id": "f6-1", "type": "file", "title": "📄 Vue Starter (2.0)", "url": "", "tags": ["Code"] }, { "id": "a6-1", "type": "assignment", "title": "Opgave: Produktside med lagerstatus", "content_html": "En produktside med: Produktnavn (fx “T-Shirt”), Farve, Pris (fx 179 DKK), Lagerindikator og en “Køb nu”-knap.
Opret en liste med størrelses-objekter (Navn, Antal på lager). Når man klikker på en størrelse, skal den valgte størrelse gemmes i data, og lagerindikatoren skal opdatere sig automatisk baseret på den specifikke størrelse.
Tip: Vi skal bruge function parameters for at give funktionen det korrekte antal fra listen.
", "is_completed": false, "tags": ["Vue", "Advanced"] } ] }, { "day_name": "Tirsdag", "date": "2026-02-03", "items": [ { "id": "a6-3", "type": "assignment", "title": "Selvstændig opgave: Loops in loops", "content_html": "Byg en kategoriside med en liste af produkter. I får udleveret data med produkter (T-Shirt, Hoodie, Jeans, Sneakers osv.), som hver indeholder arrays for både størrelser og farver. Brug v-for til at loope igennem produkterne, og derefter loops inde i loopet til at vise de tilgængelige valgmuligheder.
", "is_completed": false, "tags": ["Vue", "Nested Loops"] } ] }, { "day_name": "Onsdag", "date": "2026-02-04", "items": [ { "id": "l6-3", "type": "lecture", "title": "📅 I dag: Fra designprincipper til systemstruktur", "content_html": "I dag arbejder vi med foundations i et design system. Formålet er at omsætte SEA’s design principles til konkrete designbeslutninger om farver, typografi og struktur for at skabe et fælles visuelt fundament.
Indsæt alle SEA’s design principles fra sidste undervisning. For hvert princip skal I vise ét konkret eksempel på, hvordan det kan se ud i praksis (f.eks. et UI-udsnit eller en simpel wireframe). Forklar kort koblingen: hvordan understøtter eksemplet princippet?
", "is_completed": false, "tags": ["Figma", "Workshop"] }, { "id": "l6-4", "type": "lecture", "title": "🎨 Foundation 1 – Color & 🔤 Typography", "content_html": "Farver i et design system handler om funktion, hierarki og tilgængelighed. Vi definerer farver ud fra roller (Primary, Secondary, Neutral, Feedback). Typografi skal sikre hierarki og læsbarhed på tværs af skærmstørrelser.
", "tags": ["Foundations", "UX"] } ] }, { "day_name": "Torsdag", "date": "2026-02-05", "items": [ { "id": "v6-13", "type": "video", "title": "▶️ Løsning - lagerstatus opgave", "url": "", "tags": ["Vue"] }, { "id": "v6-14", "type": "video", "title": "▶️ Løsning - Loops in Loops opgave", "url": "", "tags": ["Vue"] }, { "id": "v6-15", "type": "video", "title": "▶️ Function parameters", "url": "", "tags": ["JS"] }, { "id": "v6-16", "type": "video", "title": "▶️ Ekstern data & fetch", "url": "", "tags": ["Vue"] }, { "id": "v6-17", "type": "video", "title": "▶️ Array push", "url": "", "tags": ["JS"] }, { "id": "a6-5", "type": "assignment", "title": "Opgave: Kommentarsektion", "content_html": "Kombiner fetch (fra comments.json), loops, v-model og @click til at gennemskabe en kommentarsektion. Like-knappen skal bare vises (behøver ikke fungere).
", "is_completed": false, "tags": ["Vue", "Fetch"] }, { "id": "a6-6", "type": "assignment", "title": "Opgave 2: Spot fejlene (debugging)", "content_html": "Find og ret fejlene i de udleverede filer (score-tracker, inkøb, menu, productlist). Tips: Åbn Console (F12), forklar koden for en anden, og vær opmærksom på røde linjer i VS Code.
", "is_completed": false, "tags": ["Debugging", "JS"] }, { "id": "f6-7", "type": "file", "title": "📄 score-tracker.html", "url": "", "tags": ["Code"] }, { "id": "f6-8", "type": "file", "title": "📄 inkøb.html", "url": "", "tags": ["Code"] }, { "id": "f6-9", "type": "file", "title": "📄 menu.html", "url": "", "tags": ["Code"] } ] }, { "day_name": "Fredag", "date": "2026-02-06", "items": [ { "id": "l6-5", "type": "lecture", "title": "📚 Forberedelse: Arbejde videre med SEA Design System", "content_html": "Inden undervisningen skal jeres Figma-fil indeholde: Design Principles side med visualiseringer og Foundations side med navngivne farver (Primary, Secondary, Neutral) og typografi (Headings, Body, Small) oprettet som Styles.
", "tags": ["Forberedelse"] }, { "id": "v6-18", "type": "video", "title": "▶️ [04:22] Figma tutorial: Components - The Basics", "url": "", "tags": ["Figma"] }, { "id": "a6-7", "type": "assignment", "title": "Opgave: Design et SEA UI-component", "content_html": "Design et uddannelsescard, der indeholder: Navn, kort beskrivelse, praktisk info (varighed, start), CTA og evt. et foto. Krav: Skal bygges med Auto Layout og jeres Styles. Inkludér SEA's grafiske cirkler som visuel accent.
", "is_completed": false, "tags": ["Figma", "UI"] } ] } ] }, { "week_number": 8, "week_label": "API & Avancerede Komponenter", "is_current": true, "days": [ { "day_name": "Mandag", "date": "2026-02-16", "items": [ { "id": "v8-1", "type": "video", "title": "▶️ Synkron og Asynkron", "url": "", "tags": ["JS"] }, { "id": "v8-2", "type": "video", "title": "▶️ API´s (ekstern data)", "url": "", "tags": ["Vue"] }, { "id": "a8-1", "type": "assignment", "title": "Opgave 1: Hent data og vis oversigt", "content_html": "Fetch blogposts fra API'et. Gem i en variabel og brug v-for til at vise billede, titel, forfatter og metadata (likes/views). Lav en 'Læs mere' begrænsning på 100 tegn vha. slice.
", "is_completed": false, "tags": ["API", "Vue"] }, { "id": "a8-2", "type": "assignment", "title": "Opgave 2: Vis et blogpost (Boolean logik)", "content_html": "Brug showDetails (boolean) og v-if til at skifte mellem oversigten og en detaljeret visning af ét indlæg med fuld brødtekst og kommentarer.
", "is_completed": false, "tags": ["Logik", "Vue"] } ] }, { "day_name": "Onsdag", "date": "2026-02-18", "items": [ { "id": "v8-3", "type": "video", "title": "▶️ Creating components - af Figma", "url": "", "tags": ["Figma"] }, { "id": "v8-4", "type": "video", "title": "▶️ Variants - af Figma", "url": "", "tags": ["Figma"] }, { "id": "v8-5", "type": "video", "title": "▶️ Figma Tutorial: Master Figma Components and Variants", "url": "", "tags": ["Figma"] }, { "id": "a8-3", "type": "assignment", "title": "Opgave 1: Systematisér uddannelsescard (Variants)", "content_html": "Gå fra et 'designet element' til et 'struktureret system-element'. Opret variants for Default og Hover states. Navngivning: Card / Education. Property: State.
", "is_completed": false, "tags": ["Figma", "Design System"] }, { "id": "a8-4", "type": "assignment", "title": "Opgave 2: Primary Button variant", "content_html": "Design en Primary Button med states: Default, Hover og Disabled. Brug Auto Layout og jeres Styles. Navngivning: Button / Primary.
", "is_completed": false, "tags": ["Figma", "UI"] } ] }, { "day_name": "Torsdag", "date": "2026-02-19", "items": [ { "id": "v8-6", "type": "video", "title": "▶️ Løsning til API opgaven", "url": "", "tags": ["Review"] }, { "id": "f8-1", "type": "file", "title": "📄 notifications.json", "url": "", "tags": ["Data"] }, { "id": "a8-5", "type": "assignment", "title": "Opgave 1-3: Notifikations-oversigt", "content_html": "Byg en liste fra notifications.json. Implementér: 1. Skift mellem læst/ulæst ved klik vha. dynamisk class binding. 2. Filtrering (Alle, Ulæste, Læste) vha. currentFilter property.
", "is_completed": false, "tags": ["Vue", "Interaktion"] }, { "id": "a8-6", "type": "assignment", "title": "Opgave 4: Udfold preview (Progressive Disclosure)", "content_html": "Brug v-if til at udfolde preview-teksten, når man klikker på en notifikation. Sikre at kun notifikationer med preview viser klik-muligheden.
", "is_completed": false, "tags": ["UX", "Vue"] } ] }, { "day_name": "Fredag", "date": "2026-02-20", "items": [ { "id": "v8-7", "type": "video", "title": "▶️ Video: Let's make a bouncy accordion in Figma", "url": "", "tags": ["Animation"] }, { "id": "v8-8", "type": "video", "title": "▶️ Video: Ultimate Guide to Figma Components", "url": "", "tags": ["Figma"] }, { "id": "v8-9", "type": "video", "title": "▶️ Video: Creating Interactive Accordion in Figma", "url": "", "tags": ["Figma"] }, { "id": "a8-7", "type": "assignment", "title": "Opgave 1: Udvikling af accordionkomponent", "content_html": "Brug 'Change to Variant' i Figma Prototype mode. Hele headeren skal være klikbar. Brug evt. Smart Animate (200-300ms) for blød overgang.
", "is_completed": false, "tags": ["Prototyping", "Figma"] }, { "id": "l8-6", "type": "lecture", "title": "📅 Projektintroduktion: Redesign af LMS", "content_html": "Gennemgang af uge 9 projektet. I skal implementere en forbedret kursusoversigt i Vue baseret på SEA design systemet. Fokus er på visuel scannability og progressive disclosure.
", "tags": ["Projekt"] } ] } ] } ] }