fix: add lesson files
This commit is contained in:
Tim Rijkse
286
Les01-Introductie-AI/Les01-Lesplan.md
Normal file
286
Les01-Introductie-AI/Les01-Lesplan.md
Normal file
@@ -0,0 +1,286 @@
|
||||
# Lesplan Les 1: Introductie AI & Large Language Models
|
||||
|
||||
> **Titel cursus:** AI Fundamentals
|
||||
> **Leeruitkomst/prestatie-indicatoren** waaraan gewerkt wordt:
|
||||
|
||||
- De student schrijft effectieve prompts voor tekst-, beeld- en codegeneratie met tools zoals ChatGPT, DALL-E en Midjourney.
|
||||
- De student past AI op ethische wijze toe en houdt rekening met de valkuilen, waaronder auteursrecht, bias en transparantie.
|
||||
- De student reflecteert kritisch op het gebruik van AI binnen het creatieve of ontwikkelproces.
|
||||
|
||||
---
|
||||
|
||||
| **Les 1: Introductie AI & Large Language Models (3 uur)** | |
|
||||
|---|---|
|
||||
| **Voorbereiding** | Studenten hebben zich ingeschreven voor een gratis account bij ChatGPT (chat.openai.com) en Claude (claude.ai). Optioneel: GitHub account aangemaakt. |
|
||||
| **EdHub** | Hfst 1: Introductie AI (indien beschikbaar) |
|
||||
| **Benodigdheden** | Laptop met internetverbinding, projectiescherm, **papier en pen voor elke student**, toegang tot v0.dev, GitHub account |
|
||||
| **Bijzonderheden** | Dit lesplan is voor een **fysieke** les. Focus op "wow-factor" en enthousiasmeren. Kernworkflow: schets op papier → ChatGPT → v0.dev → website. |
|
||||
|
||||
---
|
||||
|
||||
## Lesverloop
|
||||
|
||||
| **Tijd (minuten)** | **Onderdeel** | **Werkvorm + toelichting + clue** |
|
||||
|---|---|---|
|
||||
| | | |
|
||||
| **0-13** | **Welkom & Introductie** | **Welkom en kennismaking** |
|
||||
| | | *Werkvorm: klassikaal gesprek (5 min)* |
|
||||
| | | Stel jezelf voor als docent. Vraag kort wie de studenten zijn en wat hun achtergrond is met AI. Peiling: "Wie heeft ChatGPT al eens gebruikt?" |
|
||||
| | | |
|
||||
| | | **Lesindeling en planning** |
|
||||
| | | Communiceer duidelijk de structuur van de les: |
|
||||
| | | - Theorie over AI en LLMs (~45 min) |
|
||||
| | | - Praktijk: ChatGPT leren gebruiken (~25 min) |
|
||||
| | | - Prompt Engineering basics (~15 min) |
|
||||
| | | - Live demo: van schets naar website (~27 min) |
|
||||
| | | - Hands-on opdracht: jouw tekening wordt een website (~55 min) |
|
||||
| | | |
|
||||
| | | **Leerdoelen van vandaag** |
|
||||
| | | 1. Begrijpen wat AI en LLMs zijn |
|
||||
| | | 2. ChatGPT praktisch leren gebruiken |
|
||||
| | | 3. Prompt engineering: tech stack, kleuren, stijl specificeren |
|
||||
| | | 4. **Van schets op papier naar werkende website** |
|
||||
| | | |
|
||||
| | | **Accounts check** |
|
||||
| | | Check of iedereen een ChatGPT en GitHub account heeft. Laat studenten die dit nog moeten doen dit nu aanmaken. |
|
||||
| | | |
|
||||
| **13-33** | **Wat is AI?** | *Inventariseren voorkennis (5 min)* |
|
||||
| | | *Werkvorm: brainstorm* |
|
||||
| | | |
|
||||
| | | Stel de vraag: "Wat is AI volgens jullie?" Laat studenten vrijuit antwoorden. Noteer kernwoorden op het bord/scherm. |
|
||||
| | | |
|
||||
| | | *Instructievorm: interactief doceren (15 min)* |
|
||||
| | | |
|
||||
| | | **Definitie AI** |
|
||||
| | | Leg uit dat AI een verzamelnaam is voor systemen die taken uitvoeren waarvoor normaal menselijke intelligentie nodig is. Maak onderscheid tussen: |
|
||||
| | | - Narrow AI (specifieke taken) |
|
||||
| | | - General AI (theoretisch, nog niet bereikt) |
|
||||
| | | |
|
||||
| | | **Large Language Models (LLMs)** |
|
||||
| | | Kernuitleg: |
|
||||
| | | - Getraind op enorme hoeveelheden tekst |
|
||||
| | | - Voorspellen het volgende woord (next-token prediction) |
|
||||
| | | - Geen echte "kennis" of "begrip", wel patroonherkenning |
|
||||
| | | |
|
||||
| | | *Demonstratie: Next-token prediction (5 min)* |
|
||||
| | | Open ChatGPT en typ langzaam een zin. Bijvoorbeeld: "De kat zat op de..." |
|
||||
| | | |
|
||||
| | | **Hallucinaties** |
|
||||
| | | Leg uit wat hallucinaties zijn en waarom ze voorkomen. Benadruk het belang van verificatie. |
|
||||
| | | |
|
||||
| | | **Clue: LLMs zijn geen databases met feiten, maar statistische modellen die patronen herkennen.** |
|
||||
| | | |
|
||||
| **33-45** | **AI Landscape** | *Instructievorm: vergelijkende demonstratie (12 min)* |
|
||||
| | | |
|
||||
| | | **De grote spelers** |
|
||||
| | | Loop door de belangrijkste AI-tools: ChatGPT, Claude, Gemini, Grok. |
|
||||
| | | |
|
||||
| | | **Gratis vs Betaald** |
|
||||
| | | Bespreek kort de verschillen. Conclusie: gratis is voldoende voor deze cursus. |
|
||||
| | | |
|
||||
| | | **Welke tool voor welke taak?** |
|
||||
| | | Korte klassikale discussie. |
|
||||
| | | |
|
||||
| | | **Clue: Er is geen "beste" AI-tool - de juiste keuze hangt af van je specifieke use case.** |
|
||||
| | | |
|
||||
| **45-70** | **ChatGPT in de Praktijk** | *Werkvorm: interactieve demonstratie met meekijken (25 min)* |
|
||||
| | | *Doel:* Studenten leren ChatGPT effectief gebruiken |
|
||||
| | | |
|
||||
| | | **Interface rondleiding (5 min)** |
|
||||
| | | Open ChatGPT op het projectiescherm. Laat studenten meekijken en hun eigen ChatGPT openen. |
|
||||
| | | |
|
||||
| | | **Model kiezen (3 min)** |
|
||||
| | | Demonstreer de model selector: GPT-4o, GPT-4o with canvas, GPT-4. |
|
||||
| | | |
|
||||
| | | **Tijdelijke Chat (3 min)** |
|
||||
| | | Demonstreer waar dit staat en wanneer je het gebruikt. |
|
||||
| | | |
|
||||
| | | **Afbeeldingen analyseren (5 min)** |
|
||||
| | | Live demonstratie: upload een schets en laat ChatGPT beschrijven wat hij ziet. **Dit is de basis voor de workflow straks!** |
|
||||
| | | |
|
||||
| | | **Bestanden uploaden (3 min)** |
|
||||
| | | Demonstreer het uploaden van een PDF of document. |
|
||||
| | | |
|
||||
| | | **Custom Instructions (3 min)** |
|
||||
| | | Laat zien waar dit staat en geef voorbeelden. |
|
||||
| | | |
|
||||
| | | **Mini-oefening (3 min)** |
|
||||
| | | Laat studenten experimenteren: start een chat, upload een afbeelding. |
|
||||
| | | |
|
||||
| | | **Clue: ChatGPT kan afbeeldingen "lezen" - dit gebruiken we straks om schetsen om te zetten naar prompts.** |
|
||||
| | | |
|
||||
| **70-85** | **Prompt Engineering Basics** | *Instructievorm: demonstratie met oefening (15 min)* |
|
||||
| | | |
|
||||
| | | **Wat is een prompt?** |
|
||||
| | | Een prompt is de instructie die je aan een AI geeft. |
|
||||
| | | |
|
||||
| | | **Slechte vs Goede Prompt** |
|
||||
| | | Toon het verschil tussen vage en specifieke prompts. |
|
||||
| | | |
|
||||
| | | **Prompt Framework** |
|
||||
| | | Introduceer: Rol, Context, Taak, Format. |
|
||||
| | | |
|
||||
| | | **Tech Stack Specificeren** |
|
||||
| | | Leg uit wat een tech stack is en waarom je dit moet meegeven: |
|
||||
| | | - React - JavaScript framework voor UI |
|
||||
| | | - Tailwind CSS - Utility-first CSS framework |
|
||||
| | | - "v0.dev genereert automatisch React + Tailwind" |
|
||||
| | | |
|
||||
| | | **Kleuren en Look & Feel** |
|
||||
| | | Leg uit hoe je visuele specificaties meegeeft: |
|
||||
| | | - Kleuren: hex codes (#2563EB) of beschrijvend ("warm oranje") |
|
||||
| | | - Stijl: modern, minimalistisch, speels, corporate, etc. |
|
||||
| | | - Sfeer en referenties: "In de stijl van Stripe.com" |
|
||||
| | | |
|
||||
| | | **Clue: Specificeer altijd je tech stack, kleuren en stijl voor consistente resultaten.** |
|
||||
| | | |
|
||||
| **85-112** | **Live Demo: v0.dev** | *Instructievorm: live demonstratie (27 min)* |
|
||||
| | | *Doel:* "Wow-moment" creëren met de schets-naar-website workflow |
|
||||
| | | |
|
||||
| | | **Introductie v0.dev (3 min)** |
|
||||
| | | Leg uit wat v0.dev is: AI-powered UI generator van Vercel. |
|
||||
| | | |
|
||||
| | | **De Slimme Workflow (2 min)** |
|
||||
| | | Leg de 5-stappen workflow uit: |
|
||||
| | | 1. TEKEN op papier |
|
||||
| | | 2. FOTO maken |
|
||||
| | | 3. Upload naar CHATGPT + beschrijf wensen (tech stack, kleuren, stijl) |
|
||||
| | | 4. ChatGPT maakt PROMPT |
|
||||
| | | 5. Plak in V0.DEV → Website! |
|
||||
| | | |
|
||||
| | | **Demo 1: Schets maken (3 min)** |
|
||||
| | | Teken live op papier een hero section: links tekst + button, rechts afbeelding placeholder. |
|
||||
| | | |
|
||||
| | | **Demo 2: Foto naar ChatGPT (8 min)** |
|
||||
| | | Upload foto en geef beschrijving mee: |
|
||||
| | | - "Dit is een schets voor een hero section" |
|
||||
| | | - Tech stack: React met Tailwind CSS |
|
||||
| | | - Kleuren: Blauw thema met primary #2563EB |
|
||||
| | | - Stijl: Modern, minimalistisch, professioneel |
|
||||
| | | - "Maak hier een gedetailleerde prompt voor v0.dev van" |
|
||||
| | | |
|
||||
| | | **Demo 3: Prompt naar v0 (6 min)** |
|
||||
| | | Kopieer de gegenereerde prompt naar v0.dev. Toon het resultaat. |
|
||||
| | | |
|
||||
| | | **Demo 4: Itereren (3 min)** |
|
||||
| | | Verfijn met follow-up prompts. |
|
||||
| | | |
|
||||
| | | **Demo 5: Deployen (2 min)** |
|
||||
| | | Doorloop het deployment proces: Add Integration → GitHub → Deploy. |
|
||||
| | | |
|
||||
| | | **Clue: De schets is je startpunt, ChatGPT is je vertaler, v0.dev is je bouwer.** |
|
||||
| | | |
|
||||
| **112-165** | **Hands-on Opdracht** | *Werkvorm: individueel werken (53 min)* |
|
||||
| | | *Doel:* Zelfstandig de workflow doorlopen |
|
||||
| | | |
|
||||
| | | **Opdracht introductie (5 min)** |
|
||||
| | | Deel de opdracht uit (zie Bijlage: Lesopdracht). Studenten gaan: |
|
||||
| | | 1. **TEKENEN** op papier - hero section |
|
||||
| | | 2. **FOTO** maken van schets |
|
||||
| | | 3. **CHATGPT** - upload + beschrijf (tech stack, kleuren, stijl) |
|
||||
| | | 4. **PROMPT** kopiëren |
|
||||
| | | 5. **V0.DEV** - genereren |
|
||||
| | | 6. **DEPLOY** naar Vercel |
|
||||
| | | |
|
||||
| | | **Benodigdheden check** |
|
||||
| | | Zorg dat iedereen papier en pen heeft! |
|
||||
| | | |
|
||||
| | | **Zelfstandig werken (40 min)** |
|
||||
| | | Loop rond en help studenten waar nodig. Let op: |
|
||||
| | | - Kwaliteit van de schets (simpel is prima) |
|
||||
| | | - Volledigheid van ChatGPT prompt (tech stack, kleuren, stijl) |
|
||||
| | | - Problemen met v0.dev of deployment |
|
||||
| | | |
|
||||
| | | **Tussentijdse check (halverwege)** |
|
||||
| | | "Wie heeft al een prompt uit ChatGPT?" |
|
||||
| | | "Wie is al in v0.dev bezig?" |
|
||||
| | | |
|
||||
| | | **Clue: Het doel is de workflow leren, niet perfectie!** |
|
||||
| | | |
|
||||
| **165-180** | **Afsluiting** | *Werkvorm: klassikaal gesprek (15 min)* |
|
||||
| | | |
|
||||
| | | **Korte terugblik (5 min)** |
|
||||
| | | Vraag 2-3 studenten om te delen: |
|
||||
| | | - Hoe was de ervaring? |
|
||||
| | | - Leek het resultaat op je schets? |
|
||||
| | | |
|
||||
| | | **Samenvatting (3 min)** |
|
||||
| | | - LLMs en next-token prediction |
|
||||
| | | - Prompt engineering: tech stack, kleuren, stijl |
|
||||
| | | - **De workflow: Schets → ChatGPT → v0.dev → Website** |
|
||||
| | | |
|
||||
| | | **Huiswerk (5 min)** |
|
||||
| | | Deel de huiswerkopdracht (zie Bijlage: Huiswerkopdracht): |
|
||||
| | | - Reflectie schrijven (500 woorden) |
|
||||
| | | - 5 AI use cases bedenken |
|
||||
| | | - **Tweede schets doorlopen met andere component** |
|
||||
| | | - Inleveren via Teams chat |
|
||||
| | | |
|
||||
| | | **Vooruitblik** |
|
||||
| | | Volgende les: Prompt Engineering verdieping. |
|
||||
| | | |
|
||||
| | | **Afsluiting** |
|
||||
| | | Bedank de studenten. Wijs op de beschikbaarheid voor vragen (Teams). |
|
||||
|
||||
---
|
||||
|
||||
## Timing Overzicht
|
||||
|
||||
| Blok | Onderwerp | Start | Eind | Duur |
|
||||
|------|-----------|-------|------|------|
|
||||
| 1 | Welkom & Introductie | 0:00 | 0:13 | 13 min |
|
||||
| 2 | Wat is AI? | 0:13 | 0:33 | 20 min |
|
||||
| 3 | AI Landscape | 0:33 | 0:45 | 12 min |
|
||||
| 4 | ChatGPT in de Praktijk | 0:45 | 1:10 | 25 min |
|
||||
| 5 | Prompt Engineering | 1:10 | 1:25 | 15 min |
|
||||
| 6 | Live Demo v0.dev | 1:25 | 1:52 | 27 min |
|
||||
| 7 | Hands-on Opdracht | 1:52 | 2:45 | 53 min |
|
||||
| 8 | Afsluiting | 2:45 | 3:00 | 15 min |
|
||||
|
||||
**Totaal: 180 minuten (3 uur)**
|
||||
|
||||
---
|
||||
|
||||
## Notities voor de docent
|
||||
|
||||
### Voorbereiding
|
||||
- **BELANGRIJK:** Zorg voor papier en pennen voor alle studenten
|
||||
- Test v0.dev vooraf - soms zijn er rate limits
|
||||
- Zorg voor backup-schermafbeeldingen mocht live demo falen
|
||||
- Maak zelf een schets klaar voor de demo
|
||||
- Zorg dat je eigen accounts werken (ChatGPT, Claude, v0.dev, GitHub)
|
||||
|
||||
### De Schets-Workflow - Key Points
|
||||
- Benadruk dat tekenen NIET mooi hoeft te zijn
|
||||
- Simpele blokken en lijnen zijn voldoende
|
||||
- Het gaat om communiceren van layout en structuur
|
||||
- ChatGPT is de "vertaler" - die maakt de technische prompt
|
||||
|
||||
### Prompt Specificaties - Wat moeten studenten meegeven?
|
||||
1. **Tech stack:** React met Tailwind CSS (v0 default)
|
||||
2. **Kleuren:** Hex codes of beschrijving
|
||||
3. **Stijl:** Modern/minimalistisch/speels/corporate etc.
|
||||
4. **Responsive:** Mobile-first design
|
||||
5. **Doel:** Type website (SaaS, portfolio, webshop)
|
||||
|
||||
### Mogelijke vragen/discussiepunten
|
||||
- "Kan ik ook mijn eigen schets direct uploaden naar v0?" → Ja, maar ChatGPT maakt de prompt gedetailleerder
|
||||
- "Wat als mijn tekening lelijk is?" → Maakt niet uit, het gaat om de layout
|
||||
- "Welke kleuren moet ik kiezen?" → Kies wat je wilt, of gebruik Tailwind default colors
|
||||
|
||||
### Differentiatie
|
||||
- **Snelle studenten:** Laat ze een tweede component maken of experimenteren met andere stijlen
|
||||
- **Studenten die moeite hebben:** Help met de ChatGPT prompt, geef ze het template
|
||||
|
||||
### Assessment indicatoren
|
||||
Observeer tijdens de les:
|
||||
- Maken studenten daadwerkelijk een schets?
|
||||
- Geven ze volledige specificaties mee aan ChatGPT?
|
||||
- Kunnen ze de workflow zelfstandig doorlopen?
|
||||
- Begrijpen ze waarom je tech stack/kleuren/stijl specificeert?
|
||||
|
||||
---
|
||||
|
||||
## Bijlagen
|
||||
1. Bijlage A: Lesopdracht - Van Schets naar Website met AI
|
||||
2. Bijlage B: Huiswerkopdracht - Reflectie, Use Cases en Tweede Schets
|
||||
Reference in New Issue
Block a user