fix: text formatting
This commit is contained in:
@@ -1,8 +1,8 @@
|
|||||||
# Docenttekst Les 1: Introductie AI & Large Language Models
|
# Docenttekst Les 1: Introductie AI & Large Language Models
|
||||||
|
|
||||||
> **Totale lesduur:** 3 uur (180 minuten)
|
> **Totale lesduur:** 3 uur (180 minuten)
|
||||||
> **Spreektijd docent:** ~55 minuten
|
> **Spreektijd docent:** ~55 minuten
|
||||||
> **Format:** Volledig uitgeschreven script per slide
|
> **Format:** Volledig uitgeschreven script per slide
|
||||||
> **Kernworkflow:** Schets op papier → ChatGPT → v0.dev → Website
|
> **Kernworkflow:** Schets op papier → ChatGPT → v0.dev → Website
|
||||||
|
|
||||||
---
|
---
|
||||||
@@ -10,28 +10,30 @@
|
|||||||
## BLOK 1: WELKOM & INTRODUCTIE (13 minuten)
|
## BLOK 1: WELKOM & INTRODUCTIE (13 minuten)
|
||||||
|
|
||||||
### Slide 1: Welkomstslide
|
### Slide 1: Welkomstslide
|
||||||
**[0:00 - 0:30]** *(30 seconden)*
|
|
||||||
|
|
||||||
*[Wacht tot iedereen zit, maak oogcontact]*
|
**[0:00 - 0:30]** _(30 seconden)_
|
||||||
|
|
||||||
|
_[Wacht tot iedereen zit, maak oogcontact]_
|
||||||
|
|
||||||
"Goedemorgen allemaal, welkom bij de eerste les van AI Fundamentals. Fijn dat jullie er zijn. Neem even de tijd om je laptop open te klappen en je spullen klaar te leggen."
|
"Goedemorgen allemaal, welkom bij de eerste les van AI Fundamentals. Fijn dat jullie er zijn. Neem even de tijd om je laptop open te klappen en je spullen klaar te leggen."
|
||||||
|
|
||||||
*[Korte pauze van 20-30 seconden]*
|
_[Korte pauze van 20-30 seconden]_
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Slide 2: Planning
|
### Slide 2: Planning
|
||||||
**[0:30 - 2:00]** *(1,5 minuut)*
|
|
||||||
|
**[0:30 - 2:00]** _(1,5 minuut)_
|
||||||
|
|
||||||
"Voordat we beginnen, laat ik jullie even zien wat we vandaag gaan doen. Zo weten jullie waar je aan toe bent."
|
"Voordat we beginnen, laat ik jullie even zien wat we vandaag gaan doen. Zo weten jullie waar je aan toe bent."
|
||||||
|
|
||||||
*[Wijs naar de tijdsblokken op de slide]*
|
_[Wijs naar de tijdsblokken op de slide]_
|
||||||
|
|
||||||
"We beginnen met theorie over wat AI is en hoe het werkt. Daarna gaan we praktisch aan de slag met ChatGPT - ik laat zien hoe je die tool effectief gebruikt."
|
"We beginnen met theorie over wat AI is en hoe het werkt. Daarna gaan we praktisch aan de slag met ChatGPT - ik laat zien hoe je die tool effectief gebruikt."
|
||||||
|
|
||||||
"Dan komt het spannende deel: prompt engineering. Hoe stel je de juiste vraag? Hoe geef je aan welke technologie, kleuren en stijl je wilt?"
|
"Dan komt het spannende deel: prompt engineering. Hoe stel je de juiste vraag? Hoe geef je aan welke technologie, kleuren en stijl je wilt?"
|
||||||
|
|
||||||
*[Met nadruk]*
|
_[Met nadruk]_
|
||||||
|
|
||||||
"En dan de grote finale: ik ga live demonstreren hoe je van een **tekening op papier** naar een **werkende website** gaat. En daarna gaan jullie dat zelf doen."
|
"En dan de grote finale: ik ga live demonstreren hoe je van een **tekening op papier** naar een **werkende website** gaat. En daarna gaan jullie dat zelf doen."
|
||||||
|
|
||||||
@@ -40,7 +42,8 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
### Slide 3: Voorstellen docent
|
### Slide 3: Voorstellen docent
|
||||||
**[2:00 - 3:30]** *(1,5 minuut)*
|
|
||||||
|
**[2:00 - 3:30]** _(1,5 minuut)_
|
||||||
|
|
||||||
"Laat ik mezelf even voorstellen. Mijn naam is [NAAM] en ik ben jullie docent voor deze leerlijn. Ik werk zelf als developer en gebruik dagelijks AI-tools in mijn werk."
|
"Laat ik mezelf even voorstellen. Mijn naam is [NAAM] en ik ben jullie docent voor deze leerlijn. Ik werk zelf als developer en gebruik dagelijks AI-tools in mijn werk."
|
||||||
|
|
||||||
@@ -51,26 +54,28 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
### Slide 4: Kennismaking
|
### Slide 4: Kennismaking
|
||||||
**[3:30 - 8:30]** *(5 minuten - studenten aan het woord)*
|
|
||||||
|
**[3:30 - 8:30]** _(5 minuten - studenten aan het woord)_
|
||||||
|
|
||||||
"Maar genoeg over mij - ik ben veel nieuwsgieriger naar jullie. Laten we een snelle ronde doen. Vertel kort je naam en geef antwoord op deze vraag..."
|
"Maar genoeg over mij - ik ben veel nieuwsgieriger naar jullie. Laten we een snelle ronde doen. Vertel kort je naam en geef antwoord op deze vraag..."
|
||||||
|
|
||||||
*[Wijs naar de slide]*
|
_[Wijs naar de slide]_
|
||||||
|
|
||||||
"...heb je al eens ChatGPT of een andere AI-tool gebruikt? En zo ja, waarvoor?"
|
"...heb je al eens ChatGPT of een andere AI-tool gebruikt? En zo ja, waarvoor?"
|
||||||
|
|
||||||
*[Laat iedereen kort reageren]*
|
_[Laat iedereen kort reageren]_
|
||||||
|
|
||||||
"Mooi, ik zie dat de meesten van jullie al wel eens met AI hebben gewerkt. Dat is een goed startpunt."
|
"Mooi, ik zie dat de meesten van jullie al wel eens met AI hebben gewerkt. Dat is een goed startpunt."
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Slide 5: De Leerlijn AI Developer
|
### Slide 5: De Leerlijn AI Developer
|
||||||
**[8:30 - 10:30]** *(2 minuten)*
|
|
||||||
|
**[8:30 - 10:30]** _(2 minuten)_
|
||||||
|
|
||||||
"Even een vooruitblik op wat we de komende 18 weken gaan doen."
|
"Even een vooruitblik op wat we de komende 18 weken gaan doen."
|
||||||
|
|
||||||
*[Wijs naar de drie hoofdstukken]*
|
_[Wijs naar de drie hoofdstukken]_
|
||||||
|
|
||||||
"We werken in drie fases. De eerste drie lessen - daar zitten we nu - gaan over AI Fundamentals. Hier leer je de basis: wat is AI, hoe werkt het, en hoe gebruik je tools als ChatGPT effectief."
|
"We werken in drie fases. De eerste drie lessen - daar zitten we nu - gaan over AI Fundamentals. Hier leer je de basis: wat is AI, hoe werkt het, en hoe gebruik je tools als ChatGPT effectief."
|
||||||
|
|
||||||
@@ -83,19 +88,20 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
### Slide 6: Accounts check
|
### Slide 6: Accounts check
|
||||||
**[10:30 - 13:00]** *(2,5 minuten)*
|
|
||||||
|
|
||||||
*[Iets serieuzer toon]*
|
**[10:30 - 13:00]** _(2,5 minuten)_
|
||||||
|
|
||||||
|
_[Iets serieuzer toon]_
|
||||||
|
|
||||||
"Oké, even een praktisch punt. Hebben jullie allemaal een account aangemaakt bij ChatGPT?"
|
"Oké, even een praktisch punt. Hebben jullie allemaal een account aangemaakt bij ChatGPT?"
|
||||||
|
|
||||||
*[Scan de groep, vraag om handopsteken]*
|
_[Scan de groep, vraag om handopsteken]_
|
||||||
|
|
||||||
"Wie heeft nog geen account? Oké, maak die dan nu even aan op chat.openai.com. Het is gratis en je hebt alleen een e-mailadres nodig."
|
"Wie heeft nog geen account? Oké, maak die dan nu even aan op chat.openai.com. Het is gratis en je hebt alleen een e-mailadres nodig."
|
||||||
|
|
||||||
"Je hebt ook een GitHub account nodig voor later vandaag. Als je die niet hebt, maak die ook even aan op github.com. GitHub is waar developers hun code opslaan en delen - we gebruiken het om onze website te deployen."
|
"Je hebt ook een GitHub account nodig voor later vandaag. Als je die niet hebt, maak die ook even aan op github.com. GitHub is waar developers hun code opslaan en delen - we gebruiken het om onze website te deployen."
|
||||||
|
|
||||||
*[Geef 2 minuten]*
|
_[Geef 2 minuten]_
|
||||||
|
|
||||||
"Is iedereen zover? Mooi, dan gaan we de diepte in."
|
"Is iedereen zover? Mooi, dan gaan we de diepte in."
|
||||||
|
|
||||||
@@ -104,17 +110,18 @@
|
|||||||
## BLOK 2: WAT IS AI? (15 minuten)
|
## BLOK 2: WAT IS AI? (15 minuten)
|
||||||
|
|
||||||
### Slide 7: Wat is Artificial Intelligence?
|
### Slide 7: Wat is Artificial Intelligence?
|
||||||
**[13:00 - 16:00]** *(3 minuten)*
|
|
||||||
|
**[13:00 - 16:00]** _(3 minuten)_
|
||||||
|
|
||||||
"Oké, eerste grote vraag: wat ís eigenlijk AI?"
|
"Oké, eerste grote vraag: wat ís eigenlijk AI?"
|
||||||
|
|
||||||
*[Laat dit even hangen]*
|
_[Laat dit even hangen]_
|
||||||
|
|
||||||
"AI, of Artificial Intelligence, is een verzamelnaam. Het zijn computersystemen die taken kunnen uitvoeren waarvoor normaal menselijke intelligentie nodig is."
|
"AI, of Artificial Intelligence, is een verzamelnaam. Het zijn computersystemen die taken kunnen uitvoeren waarvoor normaal menselijke intelligentie nodig is."
|
||||||
|
|
||||||
"Denk aan: patronen herkennen in data, beslissingen nemen op basis van informatie, taal begrijpen en genereren. Dingen die wij mensen doen met ons brein, maar dan door een computer."
|
"Denk aan: patronen herkennen in data, beslissingen nemen op basis van informatie, taal begrijpen en genereren. Dingen die wij mensen doen met ons brein, maar dan door een computer."
|
||||||
|
|
||||||
*[Maak onderscheid]*
|
_[Maak onderscheid]_
|
||||||
|
|
||||||
"Nu is er een belangrijk onderscheid dat je moet kennen. Er is Narrow AI - ook wel Weak AI genoemd - dat is AI die heel goed is in één specifieke taak. ChatGPT is daar een voorbeeld van. Het kan heel goed tekst genereren, maar het kan niet autorijden of schaken - tenzij je het specifiek daarop traint."
|
"Nu is er een belangrijk onderscheid dat je moet kennen. Er is Narrow AI - ook wel Weak AI genoemd - dat is AI die heel goed is in één specifieke taak. ChatGPT is daar een voorbeeld van. Het kan heel goed tekst genereren, maar het kan niet autorijden of schaken - tenzij je het specifiek daarop traint."
|
||||||
|
|
||||||
@@ -125,7 +132,8 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
### Slide 8: Hoe werken Large Language Models?
|
### Slide 8: Hoe werken Large Language Models?
|
||||||
**[16:00 - 20:00]** *(4 minuten)*
|
|
||||||
|
**[16:00 - 20:00]** _(4 minuten)_
|
||||||
|
|
||||||
"Nu de vraag die iedereen heeft: hoe werkt ChatGPT eigenlijk? Dit is fascinerend, en als je dit snapt, snap je ook waarom AI soms briljant is en soms complete onzin produceert."
|
"Nu de vraag die iedereen heeft: hoe werkt ChatGPT eigenlijk? Dit is fascinerend, en als je dit snapt, snap je ook waarom AI soms briljant is en soms complete onzin produceert."
|
||||||
|
|
||||||
@@ -133,7 +141,7 @@
|
|||||||
|
|
||||||
"Het model heeft al deze tekst 'gelezen' en daarvan geleerd. Maar wat heeft het precies geleerd?"
|
"Het model heeft al deze tekst 'gelezen' en daarvan geleerd. Maar wat heeft het precies geleerd?"
|
||||||
|
|
||||||
*[Laat dit even landen]*
|
_[Laat dit even landen]_
|
||||||
|
|
||||||
"Het heeft geleerd: als ik deze woorden zie, wat is dan het meest waarschijnlijke volgende woord?"
|
"Het heeft geleerd: als ik deze woorden zie, wat is dan het meest waarschijnlijke volgende woord?"
|
||||||
|
|
||||||
@@ -144,15 +152,16 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
### Slide 9: Next-Token Prediction
|
### Slide 9: Next-Token Prediction
|
||||||
**[20:00 - 23:00]** *(3 minuten)*
|
|
||||||
|
**[20:00 - 23:00]** _(3 minuten)_
|
||||||
|
|
||||||
"Laat me dit concreet maken met een voorbeeld."
|
"Laat me dit concreet maken met een voorbeeld."
|
||||||
|
|
||||||
*[Wijs naar de slide]*
|
_[Wijs naar de slide]_
|
||||||
|
|
||||||
"Als ik aan ChatGPT vraag: 'De kat zat op de...' - wat denk je dat hij zegt?"
|
"Als ik aan ChatGPT vraag: 'De kat zat op de...' - wat denk je dat hij zegt?"
|
||||||
|
|
||||||
*[Wacht op antwoorden]*
|
_[Wacht op antwoorden]_
|
||||||
|
|
||||||
"Precies, grote kans 'mat'. Waarom? Omdat in alle tekst waarop hij getraind is, die combinatie 'de kat zat op de mat' ontelbare keren voorkomt. Statistisch gezien is 'mat' het meest waarschijnlijke volgende woord."
|
"Precies, grote kans 'mat'. Waarom? Omdat in alle tekst waarop hij getraind is, die combinatie 'de kat zat op de mat' ontelbare keren voorkomt. Statistisch gezien is 'mat' het meest waarschijnlijke volgende woord."
|
||||||
|
|
||||||
@@ -165,15 +174,16 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
### Slide 10: Hallucinaties
|
### Slide 10: Hallucinaties
|
||||||
**[23:00 - 28:00]** *(5 minuten)*
|
|
||||||
|
|
||||||
*[Iets serieuzere toon]*
|
**[23:00 - 28:00]** _(5 minuten)_
|
||||||
|
|
||||||
|
_[Iets serieuzere toon]_
|
||||||
|
|
||||||
"Hallucinaties. Dit is een term die je moet kennen en onthouden."
|
"Hallucinaties. Dit is een term die je moet kennen en onthouden."
|
||||||
|
|
||||||
"Wat bedoelen we hiermee? AI kan dingen verzinnen. Compleet uit de lucht gegrepen informatie presenteren alsof het waar is. En het klinkt heel overtuigend, want het is grammaticaal perfect en logisch geformuleerd."
|
"Wat bedoelen we hiermee? AI kan dingen verzinnen. Compleet uit de lucht gegrepen informatie presenteren alsof het waar is. En het klinkt heel overtuigend, want het is grammaticaal perfect en logisch geformuleerd."
|
||||||
|
|
||||||
*[Geef concrete voorbeelden]*
|
_[Geef concrete voorbeelden]_
|
||||||
|
|
||||||
"Laat me een paar voorbeelden geven. Vraag ChatGPT naar een wetenschappelijk paper over een specifiek onderwerp. Hij kan je een titel geven, auteursnamen, een publicatiejaar, een samenvatting - van iets dat niet bestaat. Het klinkt volledig legitiem, maar als je het opzoekt: niets te vinden."
|
"Laat me een paar voorbeelden geven. Vraag ChatGPT naar een wetenschappelijk paper over een specifiek onderwerp. Hij kan je een titel geven, auteursnamen, een publicatiejaar, een samenvatting - van iets dat niet bestaat. Het klinkt volledig legitiem, maar als je het opzoekt: niets te vinden."
|
||||||
|
|
||||||
@@ -181,11 +191,11 @@
|
|||||||
|
|
||||||
"Ik heb ooit ChatGPT gevraagd naar restaurants in een stad waar ik naartoe ging. Drie van de vijf suggesties bestonden niet. Verzonnen namen, verzonnen adressen."
|
"Ik heb ooit ChatGPT gevraagd naar restaurants in een stad waar ik naartoe ging. Drie van de vijf suggesties bestonden niet. Verzonnen namen, verzonnen adressen."
|
||||||
|
|
||||||
*[Leg uit waarom dit gebeurt]*
|
_[Leg uit waarom dit gebeurt]_
|
||||||
|
|
||||||
"Waarom gebeurt dit? Onthoud: het model voorspelt wat het MEEST WAARSCHIJNLIJK volgende woord is. Het controleert niet of iets waar is. Het genereert tekst die LIJKT op tekst die het eerder heeft gezien. Als je vraagt naar een paper, genereert het tekst die eruitziet als een paper-referentie - maar dat betekent niet dat die referentie bestaat."
|
"Waarom gebeurt dit? Onthoud: het model voorspelt wat het MEEST WAARSCHIJNLIJK volgende woord is. Het controleert niet of iets waar is. Het genereert tekst die LIJKT op tekst die het eerder heeft gezien. Als je vraagt naar een paper, genereert het tekst die eruitziet als een paper-referentie - maar dat betekent niet dat die referentie bestaat."
|
||||||
|
|
||||||
*[Praktische implicaties]*
|
_[Praktische implicaties]_
|
||||||
|
|
||||||
"Wat betekent dit voor jullie als developers? Heel simpel: verifieer altijd. Kopieer nooit blindelings code van ChatGPT zonder te begrijpen wat het doet. Check of libraries bestaan. Test je code. Valideer feiten."
|
"Wat betekent dit voor jullie als developers? Heel simpel: verifieer altijd. Kopieer nooit blindelings code van ChatGPT zonder te begrijpen wat het doet. Check of libraries bestaan. Test je code. Valideer feiten."
|
||||||
|
|
||||||
@@ -196,11 +206,12 @@
|
|||||||
## BLOK 3: HET AI-LANDSCHAP (10 minuten)
|
## BLOK 3: HET AI-LANDSCHAP (10 minuten)
|
||||||
|
|
||||||
### Slide 11: De Grote Spelers
|
### Slide 11: De Grote Spelers
|
||||||
**[28:00 - 31:00]** *(3 minuten)*
|
|
||||||
|
**[28:00 - 31:00]** _(3 minuten)_
|
||||||
|
|
||||||
"Oké, nu je begrijpt hoe LLMs werken, laten we kijken welke er zijn. Het landschap verandert snel, maar dit zijn de grote namen."
|
"Oké, nu je begrijpt hoe LLMs werken, laten we kijken welke er zijn. Het landschap verandert snel, maar dit zijn de grote namen."
|
||||||
|
|
||||||
*[Wijs naar de tabel]*
|
_[Wijs naar de tabel]_
|
||||||
|
|
||||||
"ChatGPT van OpenAI - dat is de bekendste, de meesten van jullie hebben die al gebruikt. Het is de tool die AI mainstream maakte."
|
"ChatGPT van OpenAI - dat is de bekendste, de meesten van jullie hebben die al gebruikt. Het is de tool die AI mainstream maakte."
|
||||||
|
|
||||||
@@ -215,13 +226,14 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
### Slide 12: Gratis vs Betaald
|
### Slide 12: Gratis vs Betaald
|
||||||
**[31:00 - 34:00]** *(3 minuten)*
|
|
||||||
|
**[31:00 - 34:00]** _(3 minuten)_
|
||||||
|
|
||||||
"Een vraag die altijd komt: heb je de betaalde versie nodig?"
|
"Een vraag die altijd komt: heb je de betaalde versie nodig?"
|
||||||
|
|
||||||
"Het korte antwoord voor deze cursus: nee. De gratis versie van ChatGPT draait op GPT-4o, en dat is al behoorlijk krachtig. Je kunt afbeeldingen uploaden, documenten analyseren, code genereren - alles wat we vandaag doen."
|
"Het korte antwoord voor deze cursus: nee. De gratis versie van ChatGPT draait op GPT-4o, en dat is al behoorlijk krachtig. Je kunt afbeeldingen uploaden, documenten analyseren, code genereren - alles wat we vandaag doen."
|
||||||
|
|
||||||
*[Nuanceer]*
|
_[Nuanceer]_
|
||||||
|
|
||||||
"Wat krijg je wel met de betaalde versie? Meer requests per uur - de gratis versie heeft limieten. Toegang tot de nieuwste modellen. En features als GPT-4 met canvas voor documenten bewerken."
|
"Wat krijg je wel met de betaalde versie? Meer requests per uur - de gratis versie heeft limieten. Toegang tot de nieuwste modellen. En features als GPT-4 met canvas voor documenten bewerken."
|
||||||
|
|
||||||
@@ -232,11 +244,12 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
### Slide 13: Welke tool voor welke taak?
|
### Slide 13: Welke tool voor welke taak?
|
||||||
**[34:00 - 38:00]** *(4 minuten)*
|
|
||||||
|
**[34:00 - 38:00]** _(4 minuten)_
|
||||||
|
|
||||||
"Welke tool is het beste? Die vraag krijg ik vaak. En het eerlijke antwoord: het hangt af van wat je wilt doen."
|
"Welke tool is het beste? Die vraag krijg ik vaak. En het eerlijke antwoord: het hangt af van wat je wilt doen."
|
||||||
|
|
||||||
*[Loop door de tabel]*
|
_[Loop door de tabel]_
|
||||||
|
|
||||||
"Voor snelle code snippets - een functie schrijven, een bug fixen - zijn ChatGPT en Claude beide uitstekend. Ik wissel zelf regelmatig."
|
"Voor snelle code snippets - een functie schrijven, een bug fixen - zijn ChatGPT en Claude beide uitstekend. Ik wissel zelf regelmatig."
|
||||||
|
|
||||||
@@ -246,7 +259,7 @@
|
|||||||
|
|
||||||
"En voor zoeken naar actuele informatie gebruik je beter Perplexity of Gemini - die hebben toegang tot het internet. ChatGPT's kennis heeft een cutoff datum."
|
"En voor zoeken naar actuele informatie gebruik je beter Perplexity of Gemini - die hebben toegang tot het internet. ChatGPT's kennis heeft een cutoff datum."
|
||||||
|
|
||||||
*[Praktische tip]*
|
_[Praktische tip]_
|
||||||
|
|
||||||
"Mijn tip: experimenteer met meerdere tools. Elke tool heeft sterke en zwakke punten. De beste developers weten wanneer ze welke tool moeten gebruiken."
|
"Mijn tip: experimenteer met meerdere tools. Elke tool heeft sterke en zwakke punten. De beste developers weten wanneer ze welke tool moeten gebruiken."
|
||||||
|
|
||||||
@@ -255,17 +268,18 @@
|
|||||||
## BLOK 4: CHATGPT IN DE PRAKTIJK (22 minuten)
|
## BLOK 4: CHATGPT IN DE PRAKTIJK (22 minuten)
|
||||||
|
|
||||||
### Slide 14: ChatGPT Interface
|
### Slide 14: ChatGPT Interface
|
||||||
**[38:00 - 41:00]** *(3 minuten)*
|
|
||||||
|
|
||||||
*[Energieke toon]*
|
**[38:00 - 41:00]** _(3 minuten)_
|
||||||
|
|
||||||
|
_[Energieke toon]_
|
||||||
|
|
||||||
"Oké, genoeg theorie. Open allemaal ChatGPT op je laptop. Ga naar chat.openai.com en log in."
|
"Oké, genoeg theorie. Open allemaal ChatGPT op je laptop. Ga naar chat.openai.com en log in."
|
||||||
|
|
||||||
*[Wacht tot iedereen de pagina open heeft - 1 minuut]*
|
_[Wacht tot iedereen de pagina open heeft - 1 minuut]_
|
||||||
|
|
||||||
"Iedereen erin? Mooi. Laat me jullie rondleiden door de interface."
|
"Iedereen erin? Mooi. Laat me jullie rondleiden door de interface."
|
||||||
|
|
||||||
*[Open ChatGPT op het projectiescherm]*
|
_[Open ChatGPT op het projectiescherm]_
|
||||||
|
|
||||||
"In het midden heb je het chatvenster - daar typ je je vragen en zie je de antwoorden. Links zie je je chat geschiedenis - handig om terug te gaan naar eerdere gesprekken. Bovenaan kun je het model kiezen - daar komen we zo op. En rechtsonder in je profielfoto vind je instellingen."
|
"In het midden heb je het chatvenster - daar typ je je vragen en zie je de antwoorden. Links zie je je chat geschiedenis - handig om terug te gaan naar eerdere gesprekken. Bovenaan kun je het model kiezen - daar komen we zo op. En rechtsonder in je profielfoto vind je instellingen."
|
||||||
|
|
||||||
@@ -274,11 +288,12 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
### Slide 15: Model Kiezen
|
### Slide 15: Model Kiezen
|
||||||
**[41:00 - 43:00]** *(2 minuten)*
|
|
||||||
|
**[41:00 - 43:00]** _(2 minuten)_
|
||||||
|
|
||||||
"Kijk even bovenaan je scherm. Daar staat welk model je gebruikt."
|
"Kijk even bovenaan je scherm. Daar staat welk model je gebruikt."
|
||||||
|
|
||||||
*[Wijs op je eigen scherm]*
|
_[Wijs op je eigen scherm]_
|
||||||
|
|
||||||
"Je hebt een paar opties. GPT-4o is de standaard - dat is snel en voor de meeste taken meer dan genoeg. Dit is wat je waarschijnlijk ziet."
|
"Je hebt een paar opties. GPT-4o is de standaard - dat is snel en voor de meeste taken meer dan genoeg. Dit is wat je waarschijnlijk ziet."
|
||||||
|
|
||||||
@@ -291,11 +306,12 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
### Slide 16: Tijdelijke Chat
|
### Slide 16: Tijdelijke Chat
|
||||||
**[43:00 - 45:00]** *(2 minuten)*
|
|
||||||
|
**[43:00 - 45:00]** _(2 minuten)_
|
||||||
|
|
||||||
"Nu iets belangrijks over privacy: tijdelijke chat."
|
"Nu iets belangrijks over privacy: tijdelijke chat."
|
||||||
|
|
||||||
*[Demonstreer waar dit staat]*
|
_[Demonstreer waar dit staat]_
|
||||||
|
|
||||||
"Als je een nieuwe chat start, zie je een optie voor 'Temporary Chat'. Als je dit aanzet, wordt je gesprek niet opgeslagen in je geschiedenis en niet gebruikt om het model te trainen."
|
"Als je een nieuwe chat start, zie je een optie voor 'Temporary Chat'. Als je dit aanzet, wordt je gesprek niet opgeslagen in je geschiedenis en niet gebruikt om het model te trainen."
|
||||||
|
|
||||||
@@ -306,27 +322,28 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
### Slide 17: Afbeeldingen Analyseren
|
### Slide 17: Afbeeldingen Analyseren
|
||||||
**[45:00 - 50:00]** *(5 minuten)*
|
|
||||||
|
|
||||||
*[Dit is een belangrijke slide voor de workflow]*
|
**[45:00 - 50:00]** _(5 minuten)_
|
||||||
|
|
||||||
|
_[Dit is een belangrijke slide voor de workflow]_
|
||||||
|
|
||||||
"Nu een feature die cruciaal is voor wat we straks gaan doen: ChatGPT kan afbeeldingen lezen en begrijpen."
|
"Nu een feature die cruciaal is voor wat we straks gaan doen: ChatGPT kan afbeeldingen lezen en begrijpen."
|
||||||
|
|
||||||
*[Demonstreer live]*
|
_[Demonstreer live]_
|
||||||
|
|
||||||
"Kijk, ik klik hier op het paperclip icoontje... en ik kan een afbeelding uploaden."
|
"Kijk, ik klik hier op het paperclip icoontje... en ik kan een afbeelding uploaden."
|
||||||
|
|
||||||
*[Upload een simpele tekening of screenshot]*
|
_[Upload een simpele tekening of screenshot]_
|
||||||
|
|
||||||
"Ik upload hier een schets die ik eerder heb gemaakt... en ik vraag: 'Wat zie je op deze afbeelding? Beschrijf de layout.'"
|
"Ik upload hier een schets die ik eerder heb gemaakt... en ik vraag: 'Wat zie je op deze afbeelding? Beschrijf de layout.'"
|
||||||
|
|
||||||
*[Wacht op response]*
|
_[Wacht op response]_
|
||||||
|
|
||||||
"Kijk wat er gebeurt. ChatGPT beschrijft precies wat hij ziet. De positie van elementen, de structuur, zelfs details die ik misschien over het hoofd zou zien."
|
"Kijk wat er gebeurt. ChatGPT beschrijft precies wat hij ziet. De positie van elementen, de structuur, zelfs details die ik misschien over het hoofd zou zien."
|
||||||
|
|
||||||
"Dit heet image-to-text, of vision. Het model 'ziet' de afbeelding en kan erover praten."
|
"Dit heet image-to-text, of vision. Het model 'ziet' de afbeelding en kan erover praten."
|
||||||
|
|
||||||
*[Met nadruk]*
|
_[Met nadruk]_
|
||||||
|
|
||||||
"Dit is de sleutel tot onze workflow vandaag. Jullie gaan een schets tekenen op papier, een foto maken, en die uploaden naar ChatGPT. En ChatGPT gaat die schets 'vertalen' naar een gedetailleerde beschrijving die we kunnen gebruiken voor code generatie."
|
"Dit is de sleutel tot onze workflow vandaag. Jullie gaan een schets tekenen op papier, een foto maken, en die uploaden naar ChatGPT. En ChatGPT gaat die schets 'vertalen' naar een gedetailleerde beschrijving die we kunnen gebruiken voor code generatie."
|
||||||
|
|
||||||
@@ -335,11 +352,12 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
### Slide 18: Bestanden Uploaden
|
### Slide 18: Bestanden Uploaden
|
||||||
**[50:00 - 52:00]** *(2 minuten)*
|
|
||||||
|
**[50:00 - 52:00]** _(2 minuten)_
|
||||||
|
|
||||||
"Hetzelfde geldt voor documenten. Je kunt een PDF uploaden, een Word document, een Excel bestand, een code bestand."
|
"Hetzelfde geldt voor documenten. Je kunt een PDF uploaden, een Word document, een Excel bestand, een code bestand."
|
||||||
|
|
||||||
*[Demonstreer kort met een document]*
|
_[Demonstreer kort met een document]_
|
||||||
|
|
||||||
"Dit is handig voor: documentatie analyseren, code reviewen, data uit spreadsheets halen."
|
"Dit is handig voor: documentatie analyseren, code reviewen, data uit spreadsheets halen."
|
||||||
|
|
||||||
@@ -348,11 +366,12 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
### Slide 19: Custom Instructions
|
### Slide 19: Custom Instructions
|
||||||
**[52:00 - 55:00]** *(3 minuten)*
|
|
||||||
|
**[52:00 - 55:00]** _(3 minuten)_
|
||||||
|
|
||||||
"Dan iets heel nuttigs dat weinig mensen kennen: Custom Instructions."
|
"Dan iets heel nuttigs dat weinig mensen kennen: Custom Instructions."
|
||||||
|
|
||||||
*[Ga naar instellingen → Personalisatie]*
|
_[Ga naar instellingen → Personalisatie]_
|
||||||
|
|
||||||
"Hier kun je permanent instellen wie je bent en hoe ChatGPT moet antwoorden. Dit wordt automatisch meegenomen in élke chat."
|
"Hier kun je permanent instellen wie je bent en hoe ChatGPT moet antwoorden. Dit wordt automatisch meegenomen in élke chat."
|
||||||
|
|
||||||
@@ -360,14 +379,15 @@
|
|||||||
|
|
||||||
"Vanaf nu weet ChatGPT in elke nieuwe chat al deze context. Je hoeft niet elke keer opnieuw te vertellen welke technologie je gebruikt."
|
"Vanaf nu weet ChatGPT in elke nieuwe chat al deze context. Je hoeft niet elke keer opnieuw te vertellen welke technologie je gebruikt."
|
||||||
|
|
||||||
*[Praktische tip]*
|
_[Praktische tip]_
|
||||||
|
|
||||||
"Mijn tip: stel dit in vóór je begint met werken. Het scheelt enorm veel herhaling en je antwoorden worden relevanter."
|
"Mijn tip: stel dit in vóór je begint met werken. Het scheelt enorm veel herhaling en je antwoorden worden relevanter."
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Slide 20: Het Geheugen
|
### Slide 20: Het Geheugen
|
||||||
**[55:00 - 56:00]** *(1 minuut)*
|
|
||||||
|
**[55:00 - 56:00]** _(1 minuut)_
|
||||||
|
|
||||||
"Kort over geheugen. ChatGPT onthoudt je eerdere chats - je ziet ze in de zijbalk. Maar het gebruikt die informatie niet automatisch in nieuwe chats."
|
"Kort over geheugen. ChatGPT onthoudt je eerdere chats - je ziet ze in de zijbalk. Maar het gebruikt die informatie niet automatisch in nieuwe chats."
|
||||||
|
|
||||||
@@ -378,7 +398,8 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
### Slide 21: Praktijk Oefening
|
### Slide 21: Praktijk Oefening
|
||||||
**[56:00 - 60:00]** *(4 minuten - studenten werken)*
|
|
||||||
|
**[56:00 - 60:00]** _(4 minuten - studenten werken)_
|
||||||
|
|
||||||
"Oké, nu jullie. Vier minuten om te experimenteren."
|
"Oké, nu jullie. Vier minuten om te experimenteren."
|
||||||
|
|
||||||
@@ -387,18 +408,19 @@
|
|||||||
"Twee: upload een afbeelding - maak een foto van iets op je bureau - en vraag ChatGPT wat hij ziet."
|
"Twee: upload een afbeelding - maak een foto van iets op je bureau - en vraag ChatGPT wat hij ziet."
|
||||||
"Drie: ga naar Settings en bekijk waar de Custom Instructions staan."
|
"Drie: ga naar Settings en bekijk waar de Custom Instructions staan."
|
||||||
|
|
||||||
*[Geef 4 minuten - loop rond en help waar nodig]*
|
_[Geef 4 minuten - loop rond en help waar nodig]_
|
||||||
|
|
||||||
"Oké, tijd. Wie heeft iets interessants ontdekt?"
|
"Oké, tijd. Wie heeft iets interessants ontdekt?"
|
||||||
|
|
||||||
*[Laat 1-2 studenten kort delen]*
|
_[Laat 1-2 studenten kort delen]_
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## BLOK 5: PROMPT ENGINEERING (12 minuten)
|
## BLOK 5: PROMPT ENGINEERING (12 minuten)
|
||||||
|
|
||||||
### Slide 22: Wat is Prompt Engineering?
|
### Slide 22: Wat is Prompt Engineering?
|
||||||
**[60:00 - 62:00]** *(2 minuten)*
|
|
||||||
|
**[60:00 - 62:00]** _(2 minuten)_
|
||||||
|
|
||||||
"Nu komen we bij een cruciaal onderdeel: prompt engineering."
|
"Nu komen we bij een cruciaal onderdeel: prompt engineering."
|
||||||
|
|
||||||
@@ -413,32 +435,34 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
### Slide 23: Slechte vs Goede Prompt
|
### Slide 23: Slechte vs Goede Prompt
|
||||||
**[62:00 - 65:00]** *(3 minuten)*
|
|
||||||
|
**[62:00 - 65:00]** _(3 minuten)_
|
||||||
|
|
||||||
"Laat me het verschil laten zien."
|
"Laat me het verschil laten zien."
|
||||||
|
|
||||||
*[Wijs naar de slechte prompt]*
|
_[Wijs naar de slechte prompt]_
|
||||||
|
|
||||||
"Dit is wat de meeste mensen doen: 'Maak een button'. Drie woorden. Welke programmeertaal? HTML? React? Vue? Welke stijl? Groot? Klein? Welke kleur? De AI moet alles gokken. En gokken leidt tot generieke output."
|
"Dit is wat de meeste mensen doen: 'Maak een button'. Drie woorden. Welke programmeertaal? HTML? React? Vue? Welke stijl? Groot? Klein? Welke kleur? De AI moet alles gokken. En gokken leidt tot generieke output."
|
||||||
|
|
||||||
*[Wijs naar de goede prompt]*
|
_[Wijs naar de goede prompt]_
|
||||||
|
|
||||||
"En dit is beter: 'Maak een React button component met Tailwind CSS. Primary styling met een blauwe achtergrond (#2563EB). Include hover state en een loading state met een spinner.'"
|
"En dit is beter: 'Maak een React button component met Tailwind CSS. Primary styling met een blauwe achtergrond (#2563EB). Include hover state en een loading state met een spinner.'"
|
||||||
|
|
||||||
"Zie je het verschil? Je specificeert de technologie, de styling, de features. De AI weet precies wat je wilt."
|
"Zie je het verschil? Je specificeert de technologie, de styling, de features. De AI weet precies wat je wilt."
|
||||||
|
|
||||||
*[Demonstreer live als tijd het toelaat]*
|
_[Demonstreer live als tijd het toelaat]_
|
||||||
|
|
||||||
"Het resultaat? Bruikbare code die je direct in je project kunt zetten."
|
"Het resultaat? Bruikbare code die je direct in je project kunt zetten."
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Slide 24: Prompt Framework
|
### Slide 24: Prompt Framework
|
||||||
**[65:00 - 67:00]** *(2 minuten)*
|
|
||||||
|
**[65:00 - 67:00]** _(2 minuten)_
|
||||||
|
|
||||||
"Er is een framework dat helpt. Vier elementen die je kunt gebruiken."
|
"Er is een framework dat helpt. Vier elementen die je kunt gebruiken."
|
||||||
|
|
||||||
*[Wijs naar elk element]*
|
_[Wijs naar elk element]_
|
||||||
|
|
||||||
"Eén: Rol. Vertel de AI wie hij is. 'Je bent een senior frontend developer met 10 jaar ervaring.'"
|
"Eén: Rol. Vertel de AI wie hij is. 'Je bent een senior frontend developer met 10 jaar ervaring.'"
|
||||||
|
|
||||||
@@ -453,7 +477,8 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
### Slide 25: Tech Stack Specificeren
|
### Slide 25: Tech Stack Specificeren
|
||||||
**[67:00 - 69:00]** *(2 minuten)*
|
|
||||||
|
**[67:00 - 69:00]** _(2 minuten)_
|
||||||
|
|
||||||
"Nu iets dat jullie moeten begrijpen voor deze cursus: tech stack specificeren."
|
"Nu iets dat jullie moeten begrijpen voor deze cursus: tech stack specificeren."
|
||||||
|
|
||||||
@@ -463,18 +488,19 @@
|
|||||||
|
|
||||||
"Door expliciet te zeggen 'React met Tailwind CSS' krijg je code die je direct kunt gebruiken."
|
"Door expliciet te zeggen 'React met Tailwind CSS' krijg je code die je direct kunt gebruiken."
|
||||||
|
|
||||||
*[Met nadruk]*
|
_[Met nadruk]_
|
||||||
|
|
||||||
"En goed nieuws: v0.dev, de tool die we straks gebruiken, genereert automatisch React met Tailwind. Maar in ChatGPT moet je het wel specificeren!"
|
"En goed nieuws: v0.dev, de tool die we straks gebruiken, genereert automatisch React met Tailwind. Maar in ChatGPT moet je het wel specificeren!"
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Slide 26: Kleuren en Look & Feel
|
### Slide 26: Kleuren en Look & Feel
|
||||||
**[69:00 - 71:00]** *(2 minuten)*
|
|
||||||
|
**[69:00 - 71:00]** _(2 minuten)_
|
||||||
|
|
||||||
"Het volgende dat je moet specificeren: kleuren en stijl."
|
"Het volgende dat je moet specificeren: kleuren en stijl."
|
||||||
|
|
||||||
*[Loop door de opties]*
|
_[Loop door de opties]_
|
||||||
|
|
||||||
"Kleuren kun je meegeven op twee manieren. Exact met hex codes: '#2563EB voor primary blue'. Of beschrijvend: 'warm oranje thema met aarde-tinten'."
|
"Kleuren kun je meegeven op twee manieren. Exact met hex codes: '#2563EB voor primary blue'. Of beschrijvend: 'warm oranje thema met aarde-tinten'."
|
||||||
|
|
||||||
@@ -487,7 +513,8 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
### Slide 27: Prompting Tips
|
### Slide 27: Prompting Tips
|
||||||
**[71:00 - 72:00]** *(1 minuut)*
|
|
||||||
|
**[71:00 - 72:00]** _(1 minuut)_
|
||||||
|
|
||||||
"Even de tips op een rij voor we verder gaan:"
|
"Even de tips op een rij voor we verder gaan:"
|
||||||
|
|
||||||
@@ -500,15 +527,16 @@
|
|||||||
## BLOK 6: LIVE DEMO V0.DEV (25 minuten)
|
## BLOK 6: LIVE DEMO V0.DEV (25 minuten)
|
||||||
|
|
||||||
### Slide 28: Introductie v0.dev
|
### Slide 28: Introductie v0.dev
|
||||||
**[72:00 - 75:00]** *(3 minuten)*
|
|
||||||
|
|
||||||
*[Energieke toon]*
|
**[72:00 - 75:00]** _(3 minuten)_
|
||||||
|
|
||||||
|
_[Energieke toon]_
|
||||||
|
|
||||||
"Nu wordt het echt leuk. We gaan kijken naar v0.dev."
|
"Nu wordt het echt leuk. We gaan kijken naar v0.dev."
|
||||||
|
|
||||||
"Dit is een tool van Vercel - het bedrijf achter Next.js, een populair React framework. En het is een gamechanger voor UI development."
|
"Dit is een tool van Vercel - het bedrijf achter Next.js, een populair React framework. En het is een gamechanger voor UI development."
|
||||||
|
|
||||||
*[Open v0.dev op je scherm]*
|
_[Open v0.dev op je scherm]_
|
||||||
|
|
||||||
"Wat doet v0? Je beschrijft wat je wilt in tekst, of je uploadt een afbeelding, en v0 genereert werkende React code met Tailwind CSS. Je ziet direct een preview. En je kunt het direct deployen naar het internet."
|
"Wat doet v0? Je beschrijft wat je wilt in tekst, of je uploadt een afbeelding, en v0 genereert werkende React code met Tailwind CSS. Je ziet direct een preview. En je kunt het direct deployen naar het internet."
|
||||||
|
|
||||||
@@ -517,9 +545,10 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
### Slide 29: De Slimme Workflow
|
### Slide 29: De Slimme Workflow
|
||||||
**[75:00 - 78:00]** *(3 minuten)*
|
|
||||||
|
|
||||||
*[Wijs naar het diagram]*
|
**[75:00 - 78:00]** _(3 minuten)_
|
||||||
|
|
||||||
|
_[Wijs naar het diagram]_
|
||||||
|
|
||||||
"Dit is de workflow. Vijf stappen. Simpel maar krachtig."
|
"Dit is de workflow. Vijf stappen. Simpel maar krachtig."
|
||||||
|
|
||||||
@@ -533,7 +562,7 @@
|
|||||||
|
|
||||||
"Stap vijf: je plakt die prompt in V0.DEV en je krijgt een werkende website!"
|
"Stap vijf: je plakt die prompt in V0.DEV en je krijgt een werkende website!"
|
||||||
|
|
||||||
*[Leg uit waarom]*
|
_[Leg uit waarom]_
|
||||||
|
|
||||||
"Waarom doen we het zo? Twee redenen. Eén: v0 heeft beperkte gratis credits - ongeveer zeven generaties per dag. ChatGPT is onbeperkt. Door eerst in ChatGPT je prompt te optimaliseren, verspil je geen v0 credits aan slechte prompts."
|
"Waarom doen we het zo? Twee redenen. Eén: v0 heeft beperkte gratis credits - ongeveer zeven generaties per dag. ChatGPT is onbeperkt. Door eerst in ChatGPT je prompt te optimaliseren, verspil je geen v0 credits aan slechte prompts."
|
||||||
|
|
||||||
@@ -542,32 +571,34 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
### Slide 30: Live Demo - Schets Maken
|
### Slide 30: Live Demo - Schets Maken
|
||||||
**[78:00 - 81:00]** *(3 minuten)*
|
|
||||||
|
|
||||||
*[Pak pen en papier - dit is live!]*
|
**[78:00 - 81:00]** _(3 minuten)_
|
||||||
|
|
||||||
|
_[Pak pen en papier - dit is live!]_
|
||||||
|
|
||||||
"Oké, ik ga dit nu live doen. Kijk mee."
|
"Oké, ik ga dit nu live doen. Kijk mee."
|
||||||
|
|
||||||
*[Teken terwijl je praat]*
|
_[Teken terwijl je praat]_
|
||||||
|
|
||||||
"Ik teken een hero section voor een fictieve app. Links teken ik een groot tekstvak - hier komt de headline. Daaronder een kleiner vak voor de ondertitel. En daaronder een rechthoek - dat wordt de call-to-action button."
|
"Ik teken een hero section voor een fictieve app. Links teken ik een groot tekstvak - hier komt de headline. Daaronder een kleiner vak voor de ondertitel. En daaronder een rechthoek - dat wordt de call-to-action button."
|
||||||
|
|
||||||
"Rechts teken ik een groot vierkant met een X erdoor - dat is een placeholder voor een afbeelding of illustratie."
|
"Rechts teken ik een groot vierkant met een X erdoor - dat is een placeholder voor een afbeelding of illustratie."
|
||||||
|
|
||||||
*[Toon je tekening]*
|
_[Toon je tekening]_
|
||||||
|
|
||||||
"Kijk, het is niet mooi. Het hoeft ook niet mooi te zijn. Het zijn blokken en lijnen. Het gaat erom dat je de layout communiceert. Waar staat wat? Wat is groot, wat is klein? Dat is alles."
|
"Kijk, het is niet mooi. Het hoeft ook niet mooi te zijn. Het zijn blokken en lijnen. Het gaat erom dat je de layout communiceert. Waar staat wat? Wat is groot, wat is klein? Dat is alles."
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Slide 31: Live Demo - Foto naar ChatGPT
|
### Slide 31: Live Demo - Foto naar ChatGPT
|
||||||
**[81:00 - 88:00]** *(7 minuten)*
|
|
||||||
|
|
||||||
*[Maak foto en upload naar ChatGPT]*
|
**[81:00 - 88:00]** _(7 minuten)_
|
||||||
|
|
||||||
|
_[Maak foto en upload naar ChatGPT]_
|
||||||
|
|
||||||
"Ik maak een foto met mijn telefoon... even uploaden naar ChatGPT..."
|
"Ik maak een foto met mijn telefoon... even uploaden naar ChatGPT..."
|
||||||
|
|
||||||
*[Typ je prompt terwijl je hardop praat]*
|
_[Typ je prompt terwijl je hardop praat]_
|
||||||
|
|
||||||
"Nu typ ik mijn beschrijving. Let op wat ik allemaal meegeef:"
|
"Nu typ ik mijn beschrijving. Let op wat ik allemaal meegeef:"
|
||||||
|
|
||||||
@@ -580,64 +611,67 @@ Kleuren: Blauw thema met primary #2563EB en secondary #1E40AF
|
|||||||
Stijl: Modern, minimalistisch, professioneel met veel whitespace
|
Stijl: Modern, minimalistisch, professioneel met veel whitespace
|
||||||
Doel: SaaS landingspagina voor een projectmanagement tool genaamd TaskFlow"
|
Doel: SaaS landingspagina voor een projectmanagement tool genaamd TaskFlow"
|
||||||
|
|
||||||
*[Druk op enter en wacht]*
|
_[Druk op enter en wacht]_
|
||||||
|
|
||||||
"Kijk wat ChatGPT doet. Hij analyseert mijn schets - hij ziet de layout, de positie van elementen. En hij combineert dat met mijn specificaties."
|
"Kijk wat ChatGPT doet. Hij analyseert mijn schets - hij ziet de layout, de positie van elementen. En hij combineert dat met mijn specificaties."
|
||||||
|
|
||||||
*[Wacht op volledige response]*
|
_[Wacht op volledige response]_
|
||||||
|
|
||||||
"En kijk naar de output. Een gedetailleerde Engelse prompt. Hij beschrijft de layout, de kleuren, de styling, de functionaliteit... Dit is precies wat v0 nodig heeft."
|
"En kijk naar de output. Een gedetailleerde Engelse prompt. Hij beschrijft de layout, de kleuren, de styling, de functionaliteit... Dit is precies wat v0 nodig heeft."
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Slide 32: Live Demo - Prompt naar v0
|
### Slide 32: Live Demo - Prompt naar v0
|
||||||
**[88:00 - 93:00]** *(5 minuten)*
|
|
||||||
|
|
||||||
*[Kopieer en ga naar v0.dev]*
|
**[88:00 - 93:00]** _(5 minuten)_
|
||||||
|
|
||||||
|
_[Kopieer en ga naar v0.dev]_
|
||||||
|
|
||||||
"Ik kopieer deze volledige prompt... ga naar v0.dev... en plak hem hier in het tekstveld."
|
"Ik kopieer deze volledige prompt... ga naar v0.dev... en plak hem hier in het tekstveld."
|
||||||
|
|
||||||
*[Druk op enter]*
|
_[Druk op enter]_
|
||||||
|
|
||||||
"Het duurt even... dertig seconden tot een minuut..."
|
"Het duurt even... dertig seconden tot een minuut..."
|
||||||
|
|
||||||
*[Resultaat verschijnt]*
|
_[Resultaat verschijnt]_
|
||||||
|
|
||||||
"En daar is het! We hebben een hero section. Kijk - links de tekst met headline en button, rechts een afbeelding. De kleuren die ik specificeerde. De stijl die ik beschreef."
|
"En daar is het! We hebben een hero section. Kijk - links de tekst met headline en button, rechts een afbeelding. De kleuren die ik specificeerde. De stijl die ik beschreef."
|
||||||
|
|
||||||
*[Klik op Code tab]*
|
_[Klik op Code tab]_
|
||||||
|
|
||||||
"En hier is de code. Clean React components, Tailwind classes voor styling. Dit kun je kopiëren en direct in je project plakken. Het werkt."
|
"En hier is de code. Clean React components, Tailwind classes voor styling. Dit kun je kopiëren en direct in je project plakken. Het werkt."
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Slide 33: Live Demo - Itereren
|
### Slide 33: Live Demo - Itereren
|
||||||
**[93:00 - 95:00]** *(2 minuten)*
|
|
||||||
|
**[93:00 - 95:00]** _(2 minuten)_
|
||||||
|
|
||||||
"Maar we zijn niet klaar. De echte kracht is dat je kunt itereren."
|
"Maar we zijn niet klaar. De echte kracht is dat je kunt itereren."
|
||||||
|
|
||||||
*[Typ een follow-up]*
|
_[Typ een follow-up]_
|
||||||
|
|
||||||
"Stel ik wil de button groter. Ik typ: 'Make the button larger with more padding, and add a subtle hover animation that lifts it slightly.'"
|
"Stel ik wil de button groter. Ik typ: 'Make the button larger with more padding, and add a subtle hover animation that lifts it slightly.'"
|
||||||
|
|
||||||
*[Wacht op generatie]*
|
_[Wacht op generatie]_
|
||||||
|
|
||||||
"Kijk - de button is aangepast. Dit is hoe je met AI werkt. Je gaat in gesprek. Je verfijnt. Elke iteratie brengt je dichter bij wat je wilt."
|
"Kijk - de button is aangepast. Dit is hoe je met AI werkt. Je gaat in gesprek. Je verfijnt. Elke iteratie brengt je dichter bij wat je wilt."
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Slide 34: Live Demo - Deployen
|
### Slide 34: Live Demo - Deployen
|
||||||
**[95:00 - 97:00]** *(2 minuten)*
|
|
||||||
|
**[95:00 - 97:00]** _(2 minuten)_
|
||||||
|
|
||||||
"Laatste stap: hoe krijg je dit online?"
|
"Laatste stap: hoe krijg je dit online?"
|
||||||
|
|
||||||
*[Wijs naar de interface]*
|
_[Wijs naar de interface]_
|
||||||
|
|
||||||
"In v0 zie je een optie om te deployen. V0 vraagt je om je GitHub account te koppelen. Als je dat doet, maakt v0 automatisch een repository aan met je code."
|
"In v0 zie je een optie om te deployen. V0 vraagt je om je GitHub account te koppelen. Als je dat doet, maakt v0 automatisch een repository aan met je code."
|
||||||
|
|
||||||
"Dan deployt Vercel - het bedrijf achter v0 - je code automatisch. Binnen een minuut heb je een live URL die iedereen kan bezoeken."
|
"Dan deployt Vercel - het bedrijf achter v0 - je code automatisch. Binnen een minuut heb je een live URL die iedereen kan bezoeken."
|
||||||
|
|
||||||
*[Toon resultaat]*
|
_[Toon resultaat]_
|
||||||
|
|
||||||
"Van een tekening op papier naar een live website. In minder dan vijftien minuten. Dat is de kracht van deze workflow."
|
"Van een tekening op papier naar een live website. In minder dan vijftien minuten. Dat is de kracht van deze workflow."
|
||||||
|
|
||||||
@@ -646,15 +680,16 @@ Doel: SaaS landingspagina voor een projectmanagement tool genaamd TaskFlow"
|
|||||||
## BLOK 7: HANDS-ON OPDRACHT (53 minuten)
|
## BLOK 7: HANDS-ON OPDRACHT (53 minuten)
|
||||||
|
|
||||||
### Slide 35: Opdracht Introductie
|
### Slide 35: Opdracht Introductie
|
||||||
**[97:00 - 102:00]** *(5 minuten uitleg)*
|
|
||||||
|
**[97:00 - 102:00]** _(5 minuten uitleg)_
|
||||||
|
|
||||||
"Nu zijn jullie aan de beurt. De opdracht is precies wat ik net deed."
|
"Nu zijn jullie aan de beurt. De opdracht is precies wat ik net deed."
|
||||||
|
|
||||||
*[Pak papier en pennen - deel uit als nodig]*
|
_[Pak papier en pennen - deel uit als nodig]_
|
||||||
|
|
||||||
"Jullie gaan een hero section bouwen voor een fictief product. Maar - en dit is belangrijk - jullie beginnen met TEKENEN."
|
"Jullie gaan een hero section bouwen voor een fictief product. Maar - en dit is belangrijk - jullie beginnen met TEKENEN."
|
||||||
|
|
||||||
*[Loop door de stappen]*
|
_[Loop door de stappen]_
|
||||||
|
|
||||||
"Stap één: pak papier en pen. Teken je hero section. Het hoeft niet mooi - blokken en lijnen zijn genoeg."
|
"Stap één: pak papier en pen. Teken je hero section. Het hoeft niet mooi - blokken en lijnen zijn genoeg."
|
||||||
|
|
||||||
@@ -668,7 +703,7 @@ Doel: SaaS landingspagina voor een projectmanagement tool genaamd TaskFlow"
|
|||||||
|
|
||||||
"Stap zes: als je tijd hebt, deploy naar Vercel."
|
"Stap zes: als je tijd hebt, deploy naar Vercel."
|
||||||
|
|
||||||
*[Praktische info]*
|
_[Praktische info]_
|
||||||
|
|
||||||
"Je hebt 50 minuten. Werk individueel. Documenteer je stappen met screenshots - die heb je nodig voor je inlevering."
|
"Je hebt 50 minuten. Werk individueel. Documenteer je stappen met screenshots - die heb je nodig voor je inlevering."
|
||||||
|
|
||||||
@@ -677,13 +712,15 @@ Doel: SaaS landingspagina voor een projectmanagement tool genaamd TaskFlow"
|
|||||||
---
|
---
|
||||||
|
|
||||||
### Slide 36: Aan de slag
|
### Slide 36: Aan de slag
|
||||||
**[102:00 - 150:00]** *(48 minuten - studenten werken)*
|
|
||||||
|
**[102:00 - 150:00]** _(48 minuten - studenten werken)_
|
||||||
|
|
||||||
"Succes! Ik loop rond voor vragen."
|
"Succes! Ik loop rond voor vragen."
|
||||||
|
|
||||||
*[Studenten werken - loop actief rond en help]*
|
_[Studenten werken - loop actief rond en help]_
|
||||||
|
|
||||||
**Let op deze veelvoorkomende problemen:**
|
**Let op deze veelvoorkomende problemen:**
|
||||||
|
|
||||||
- Slaan ze de tekenstap over? Stuur ze terug naar papier.
|
- Slaan ze de tekenstap over? Stuur ze terug naar papier.
|
||||||
- Vergeten ze tech stack/kleuren/stijl in ChatGPT? Herinner ze.
|
- Vergeten ze tech stack/kleuren/stijl in ChatGPT? Herinner ze.
|
||||||
- v0.dev rate limit? Ze kunnen wachten of je backup screenshots tonen.
|
- v0.dev rate limit? Ze kunnen wachten of je backup screenshots tonen.
|
||||||
@@ -693,35 +730,37 @@ Doel: SaaS landingspagina voor een projectmanagement tool genaamd TaskFlow"
|
|||||||
|
|
||||||
"Even een snelle check. Steek je hand op als je al een prompt uit ChatGPT hebt."
|
"Even een snelle check. Steek je hand op als je al een prompt uit ChatGPT hebt."
|
||||||
|
|
||||||
*[Tel handen]*
|
_[Tel handen]_
|
||||||
|
|
||||||
"Mooi. Wie is al in v0.dev aan het genereren?"
|
"Mooi. Wie is al in v0.dev aan het genereren?"
|
||||||
|
|
||||||
*[Help kort indien nodig]*
|
_[Help kort indien nodig]_
|
||||||
|
|
||||||
"Nog 25 minuten. Focus op je schets, ChatGPT prompt, en v0 generatie. De deployment is een bonus."
|
"Nog 25 minuten. Focus op je schets, ChatGPT prompt, en v0 generatie. De deployment is een bonus."
|
||||||
|
|
||||||
*[Studenten werken door tot 150:00]*
|
_[Studenten werken door tot 150:00]_
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## BLOK 8: AFSLUITING (15 minuten)
|
## BLOK 8: AFSLUITING (15 minuten)
|
||||||
|
|
||||||
### Slide 37: Resultaten Delen
|
### Slide 37: Resultaten Delen
|
||||||
**[150:00 - 158:00]** *(8 minuten)*
|
|
||||||
|
**[150:00 - 158:00]** _(8 minuten)_
|
||||||
|
|
||||||
"Oké, tijd om af te ronden. Wie wil zijn resultaat laten zien?"
|
"Oké, tijd om af te ronden. Wie wil zijn resultaat laten zien?"
|
||||||
|
|
||||||
*[Laat 2-3 studenten hun scherm delen en kort presenteren]*
|
_[Laat 2-3 studenten hun scherm delen en kort presenteren]_
|
||||||
|
|
||||||
"Wat was je oorspronkelijke idee? Laat je schets zien. En wat heeft v0 ervan gemaakt?"
|
"Wat was je oorspronkelijke idee? Laat je schets zien. En wat heeft v0 ervan gemaakt?"
|
||||||
|
|
||||||
*[Geef korte positieve feedback per student]*
|
_[Geef korte positieve feedback per student]_
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Slide 38: Samenvatting
|
### Slide 38: Samenvatting
|
||||||
**[158:00 - 162:00]** *(4 minuten)*
|
|
||||||
|
**[158:00 - 162:00]** _(4 minuten)_
|
||||||
|
|
||||||
"Laten we even terugkijken naar wat jullie vandaag hebben geleerd."
|
"Laten we even terugkijken naar wat jullie vandaag hebben geleerd."
|
||||||
|
|
||||||
@@ -731,7 +770,7 @@ Doel: SaaS landingspagina voor een projectmanagement tool genaamd TaskFlow"
|
|||||||
|
|
||||||
"We hebben prompt engineering gehad: het belang van specificiteit, tech stack, kleuren en stijl meegeven."
|
"We hebben prompt engineering gehad: het belang van specificiteit, tech stack, kleuren en stijl meegeven."
|
||||||
|
|
||||||
*[Met nadruk]*
|
_[Met nadruk]_
|
||||||
|
|
||||||
"En het belangrijkste: jullie hebben de workflow geleerd en toegepast. Schets op papier, foto naar ChatGPT, prompt naar v0, en live op het internet."
|
"En het belangrijkste: jullie hebben de workflow geleerd en toegepast. Schets op papier, foto naar ChatGPT, prompt naar v0, en live op het internet."
|
||||||
|
|
||||||
@@ -740,11 +779,12 @@ Doel: SaaS landingspagina voor een projectmanagement tool genaamd TaskFlow"
|
|||||||
---
|
---
|
||||||
|
|
||||||
### Slide 39: Huiswerk
|
### Slide 39: Huiswerk
|
||||||
**[162:00 - 167:00]** *(5 minuten)*
|
|
||||||
|
**[162:00 - 167:00]** _(5 minuten)_
|
||||||
|
|
||||||
"Voor volgende week heb je huiswerk. Dit lever je in via Teams."
|
"Voor volgende week heb je huiswerk. Dit lever je in via Teams."
|
||||||
|
|
||||||
*[Wijs naar de slide]*
|
_[Wijs naar de slide]_
|
||||||
|
|
||||||
"Eén: schrijf een reflectie van 500 woorden over je eerste ervaring met AI tools. Wat heb je geleerd? Wat vond je lastig? Wat wil je meer leren?"
|
"Eén: schrijf een reflectie van 500 woorden over je eerste ervaring met AI tools. Wat heb je geleerd? Wat vond je lastig? Wat wil je meer leren?"
|
||||||
|
|
||||||
@@ -752,7 +792,7 @@ Doel: SaaS landingspagina voor een projectmanagement tool genaamd TaskFlow"
|
|||||||
|
|
||||||
"Drie: doorloop de workflow nog een keer met een ANDER component. Niet weer een hero section. Kies iets anders: een pricing table, een features section, een contact formulier, een footer."
|
"Drie: doorloop de workflow nog een keer met een ANDER component. Niet weer een hero section. Kies iets anders: een pricing table, een features section, een contact formulier, een footer."
|
||||||
|
|
||||||
*[Met nadruk]*
|
_[Met nadruk]_
|
||||||
|
|
||||||
"En vergeet niet: specificeer weer je tech stack, kleuren en stijl. Documenteer alles met screenshots."
|
"En vergeet niet: specificeer weer je tech stack, kleuren en stijl. Documenteer alles met screenshots."
|
||||||
|
|
||||||
@@ -761,7 +801,8 @@ Doel: SaaS landingspagina voor een projectmanagement tool genaamd TaskFlow"
|
|||||||
---
|
---
|
||||||
|
|
||||||
### Slide 40: Volgende Les
|
### Slide 40: Volgende Les
|
||||||
**[167:00 - 168:00]** *(1 minuut)*
|
|
||||||
|
**[167:00 - 168:00]** _(1 minuut)_
|
||||||
|
|
||||||
"Volgende week gaan we dieper in op AI code assistants. We introduceren OpenCode - een standalone tool voor AI-assisted development."
|
"Volgende week gaan we dieper in op AI code assistants. We introduceren OpenCode - een standalone tool voor AI-assisted development."
|
||||||
|
|
||||||
@@ -770,11 +811,12 @@ Doel: SaaS landingspagina voor een projectmanagement tool genaamd TaskFlow"
|
|||||||
---
|
---
|
||||||
|
|
||||||
### Slide 41: Vragen
|
### Slide 41: Vragen
|
||||||
**[168:00 - 180:00]** *(12 minuten - buffer voor vragen en uitloop)*
|
|
||||||
|
**[168:00 - 180:00]** _(12 minuten - buffer voor vragen en uitloop)_
|
||||||
|
|
||||||
"Zijn er nog vragen?"
|
"Zijn er nog vragen?"
|
||||||
|
|
||||||
*[Beantwoord vragen]*
|
_[Beantwoord vragen]_
|
||||||
|
|
||||||
"Geen vragen meer? Dan wil ik jullie bedanken voor jullie aandacht en inzet vandaag."
|
"Geen vragen meer? Dan wil ik jullie bedanken voor jullie aandacht en inzet vandaag."
|
||||||
|
|
||||||
@@ -782,22 +824,22 @@ Doel: SaaS landingspagina voor een projectmanagement tool genaamd TaskFlow"
|
|||||||
|
|
||||||
"Tot volgende week!"
|
"Tot volgende week!"
|
||||||
|
|
||||||
*[Einde les]*
|
_[Einde les]_
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## APPENDIX: Timing Overzicht
|
## APPENDIX: Timing Overzicht
|
||||||
|
|
||||||
| Blok | Onderwerp | Start | Eind | Duur |
|
| Blok | Onderwerp | Start | Eind | Duur |
|
||||||
|------|-----------|-------|------|------|
|
| ---- | ---------------------- | ----- | ---- | ------ |
|
||||||
| 1 | Welkom & Introductie | 0:00 | 0:13 | 13 min |
|
| 1 | Welkom & Introductie | 0:00 | 0:13 | 13 min |
|
||||||
| 2 | Wat is AI? | 0:13 | 0:28 | 15 min |
|
| 2 | Wat is AI? | 0:13 | 0:28 | 15 min |
|
||||||
| 3 | AI Landscape | 0:28 | 0:38 | 10 min |
|
| 3 | AI Landscape | 0:28 | 0:38 | 10 min |
|
||||||
| 4 | ChatGPT in de Praktijk | 0:38 | 1:00 | 22 min |
|
| 4 | ChatGPT in de Praktijk | 0:38 | 1:00 | 22 min |
|
||||||
| 5 | Prompt Engineering | 1:00 | 1:12 | 12 min |
|
| 5 | Prompt Engineering | 1:00 | 1:12 | 12 min |
|
||||||
| 6 | Live Demo v0.dev | 1:12 | 1:37 | 25 min |
|
| 6 | Live Demo v0.dev | 1:12 | 1:37 | 25 min |
|
||||||
| 7 | Hands-on Opdracht | 1:37 | 2:30 | 53 min |
|
| 7 | Hands-on Opdracht | 1:37 | 2:30 | 53 min |
|
||||||
| 8 | Afsluiting | 2:30 | 3:00 | 30 min |
|
| 8 | Afsluiting | 2:30 | 3:00 | 30 min |
|
||||||
|
|
||||||
**Spreektijd docent (Blok 1-6):** ~55 minuten
|
**Spreektijd docent (Blok 1-6):** ~55 minuten
|
||||||
**Hands-on + Afsluiting:** ~83 minuten
|
**Hands-on + Afsluiting:** ~83 minuten
|
||||||
@@ -825,9 +867,9 @@ Doel: SaaS landingspagina voor een projectmanagement tool genaamd TaskFlow"
|
|||||||
|
|
||||||
Laat studenten dit checken in hun ChatGPT prompt:
|
Laat studenten dit checken in hun ChatGPT prompt:
|
||||||
|
|
||||||
| Element | Voorbeeld |
|
| Element | Voorbeeld |
|
||||||
|---------|-----------|
|
| ---------- | -------------------------- |
|
||||||
| Tech stack | "React met Tailwind CSS" |
|
| Tech stack | "React met Tailwind CSS" |
|
||||||
| Kleuren | "#2563EB" of "warm oranje" |
|
| Kleuren | "#2563EB" of "warm oranje" |
|
||||||
| Stijl | "Modern, minimalistisch" |
|
| Stijl | "Modern, minimalistisch" |
|
||||||
| Doel | "SaaS landingspagina" |
|
| Doel | "SaaS landingspagina" |
|
||||||
|
|||||||
Reference in New Issue
Block a user