fix: slides merge
This commit is contained in:
Tim Rijkse
@@ -643,98 +643,63 @@ _[Leg uit waarom]_
|
||||
|
||||
---
|
||||
|
||||
### Slide 31: Live Demo - Schets Maken
|
||||
### Slide 31: Live Demo
|
||||
|
||||
**[82:00 - 85:00]** _(3 minuten)_
|
||||
**[82:00 - 97:00]** _(15 minuten)_
|
||||
|
||||
_[Pak pen en papier - dit is live!]_
|
||||
|
||||
"Oké, ik ga dit nu live doen. Kijk mee."
|
||||
|
||||
**Stap 1: Tekenen**
|
||||
|
||||
_[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."
|
||||
|
||||
"Rechts teken ik een groot vierkant met een X erdoor - dat is een placeholder voor een afbeelding of illustratie."
|
||||
"Ik teken een simpele hero section. Links tekstvak voor headline, daaronder button. Rechts een vierkant met X - placeholder voor afbeelding."
|
||||
|
||||
_[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."
|
||||
"Het hoeft niet mooi te zijn. Blokken en lijnen zijn genoeg. Het gaat om de layout."
|
||||
|
||||
---
|
||||
**Stap 2: Foto naar ChatGPT**
|
||||
|
||||
### Slide 32: Live Demo - Foto naar ChatGPT
|
||||
_[Maak foto en upload naar ChatGPT Project]_
|
||||
|
||||
**[85:00 - 92:00]** _(7 minuten)_
|
||||
"Foto maken... uploaden naar mijn ChatGPT Project... en nu mijn beschrijving:"
|
||||
|
||||
_[Maak foto en upload naar ChatGPT]_
|
||||
"Dit is een schets voor een hero section. Beschrijf als v0.dev prompt. Tech stack: React + Tailwind. Kleuren: blauw thema #2563EB. Stijl: modern, minimalistisch."
|
||||
|
||||
"Ik maak een foto met mijn telefoon... even uploaden naar ChatGPT..."
|
||||
_[Wacht op response]_
|
||||
|
||||
_[Typ je prompt terwijl je hardop praat]_
|
||||
"Kijk - ChatGPT maakt een gedetailleerde Engelse prompt. Precies wat v0 nodig heeft."
|
||||
|
||||
"Nu typ ik mijn beschrijving. Let op wat ik allemaal meegeef:"
|
||||
**Stap 3: v0.dev**
|
||||
|
||||
"Dit is een schets voor een hero section van mijn website.
|
||||
_[Kopieer prompt naar v0.dev]_
|
||||
|
||||
Beschrijf deze schets als een gedetailleerde prompt voor v0.dev.
|
||||
|
||||
Tech stack: React met Tailwind CSS
|
||||
Kleuren: Blauw thema met primary #2563EB en secondary #1E40AF
|
||||
Stijl: Modern, minimalistisch, professioneel met veel whitespace
|
||||
Doel: SaaS landingspagina voor een projectmanagement tool genaamd TaskFlow"
|
||||
|
||||
_[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."
|
||||
|
||||
_[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."
|
||||
|
||||
---
|
||||
|
||||
### Slide 33: Live Demo - Prompt naar v0
|
||||
|
||||
**[92:00 - 97: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."
|
||||
|
||||
_[Druk op enter]_
|
||||
|
||||
"Het duurt even... dertig seconden tot een minuut..."
|
||||
"Prompt kopiëren... plakken in v0... genereren..."
|
||||
|
||||
_[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! Hero section met de kleuren en stijl die ik specificeerde. De code is clean React met Tailwind."
|
||||
|
||||
_[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."
|
||||
|
||||
---
|
||||
|
||||
### Slide 34: Live Demo - Itereren
|
||||
|
||||
**[97:00 - 99:00]** _(2 minuten)_
|
||||
|
||||
"Maar we zijn niet klaar. De echte kracht is dat je kunt itereren."
|
||||
**Stap 4: Itereren**
|
||||
|
||||
_[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.'"
|
||||
"Nu itereren: 'Make the button larger with hover animation.'"
|
||||
|
||||
_[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 - aangepast. Dát is de kracht: in gesprek gaan met de AI."
|
||||
|
||||
**Belangrijk:** Deployment laat ik NIET zien - dat gaan jullie straks zelf uitzoeken!
|
||||
|
||||
---
|
||||
|
||||
### Slide 35: Hoe deploy je naar Vercel?
|
||||
### Slide 32: Hoe deploy je naar Vercel?
|
||||
|
||||
**[99:00 - 101:00]** _(2 minuten)_
|
||||
**[97:00 - 99:00]** _(2 minuten)_
|
||||
|
||||
"Laatste vraag: hoe krijg je dit online? Dat ga ik jullie nu uitleggen, maar niet voordoen."
|
||||
|
||||
@@ -752,9 +717,9 @@ _[Met nadruk]_
|
||||
|
||||
## BLOK 7: HANDS-ON OPDRACHT (53 minuten)
|
||||
|
||||
### Slide 36: Opdracht Introductie
|
||||
### Slide 33: Opdracht Introductie
|
||||
|
||||
**[101:00 - 106:00]** _(5 minuten uitleg)_
|
||||
**[99:00 - 104:00]** _(5 minuten uitleg)_
|
||||
|
||||
"Nu zijn jullie aan de beurt. Maar let op - jullie opdracht is groter dan mijn demo."
|
||||
|
||||
@@ -786,9 +751,9 @@ _[Praktische info]_
|
||||
|
||||
---
|
||||
|
||||
### Slide 37: Aan de slag
|
||||
### Slide 34: Aan de slag
|
||||
|
||||
**[106:00 - 150:00]** _(44 minuten - studenten werken)_
|
||||
**[104:00 - 150:00]** _(46 minuten - studenten werken)_
|
||||
|
||||
"Succes! Ik loop rond voor vragen."
|
||||
|
||||
@@ -821,7 +786,7 @@ _[Studenten werken door tot 150:00]_
|
||||
|
||||
## BLOK 8: AFSLUITING (15 minuten)
|
||||
|
||||
### Slide 38: Resultaten Delen
|
||||
### Slide 35: Resultaten Delen
|
||||
|
||||
**[150:00 - 158:00]** _(8 minuten)_
|
||||
|
||||
@@ -835,7 +800,7 @@ _[Geef korte positieve feedback per student]_
|
||||
|
||||
---
|
||||
|
||||
### Slide 39: Samenvatting
|
||||
### Slide 36: Samenvatting
|
||||
|
||||
**[158:00 - 162:00]** _(4 minuten)_
|
||||
|
||||
@@ -855,7 +820,7 @@ _[Met nadruk]_
|
||||
|
||||
---
|
||||
|
||||
### Slide 40: Huiswerk
|
||||
### Slide 37: Huiswerk
|
||||
|
||||
**[162:00 - 167:00]** _(5 minuten)_
|
||||
|
||||
@@ -877,7 +842,7 @@ _[Met nadruk]_
|
||||
|
||||
---
|
||||
|
||||
### Slide 41: Volgende Les
|
||||
### Slide 38: Volgende Les
|
||||
|
||||
**[167:00 - 168:00]** _(1 minuut)_
|
||||
|
||||
@@ -887,7 +852,7 @@ _[Met nadruk]_
|
||||
|
||||
---
|
||||
|
||||
### Slide 42: Vragen
|
||||
### Slide 39: Vragen
|
||||
|
||||
**[168:00 - 180:00]** _(12 minuten - buffer voor vragen en uitloop)_
|
||||
|
||||
|
||||
@@ -592,77 +592,27 @@ Tekening → Foto → ChatGPT → Prompt → v0.dev → Website!
|
||||
|
||||
---
|
||||
|
||||
### Slide 31: Live Demo - Schets Maken
|
||||
*(3 minuten)*
|
||||
### Slide 31: Live Demo
|
||||
*(15 minuten)*
|
||||
|
||||
**Titel:** Stap 1: Tekenen
|
||||
**Titel:** Van schets naar website - live!
|
||||
|
||||
**Inhoud:**
|
||||
|
||||
*[Docent tekent live op papier]*
|
||||
*[Docent demonstreert de workflow live]*
|
||||
|
||||
**Ik teken een hero section:**
|
||||
- Links: titel + tekst + button
|
||||
- Rechts: afbeelding placeholder
|
||||
**De stappen:**
|
||||
- ✏️ **Tekenen:** Simpele hero section op papier (blokken en lijnen)
|
||||
- 📸 **Foto:** Upload naar ChatGPT Project
|
||||
- 💬 **Prompt:** "Beschrijf als v0.dev prompt, React + Tailwind, blauw thema"
|
||||
- ⚡ **v0.dev:** Prompt plakken → genereren (~30 sec)
|
||||
- 🔄 **Itereren:** "Make button larger", "Add gradient"
|
||||
|
||||
**Het hoeft niet mooi te zijn!**
|
||||
Blokken en lijnen zijn genoeg.
|
||||
**Belangrijk:** Deployment laat ik NIET zien - dat zoeken jullie straks zelf uit!
|
||||
|
||||
---
|
||||
|
||||
### Slide 32: Live Demo - ChatGPT
|
||||
*(7 minuten)*
|
||||
|
||||
**Titel:** Stap 2 & 3: Foto + Beschrijving
|
||||
|
||||
**Inhoud:**
|
||||
|
||||
*[Docent maakt foto en upload naar ChatGPT]*
|
||||
|
||||
**Prompt:**
|
||||
> "Dit is een schets voor een hero section.
|
||||
>
|
||||
> Beschrijf dit als een prompt voor v0.dev.
|
||||
>
|
||||
> Tech stack: React met Tailwind CSS
|
||||
> Kleuren: Blauw thema, primary #2563EB
|
||||
> Stijl: Modern, minimalistisch
|
||||
> Doel: SaaS landingspagina voor TaskFlow"
|
||||
|
||||
---
|
||||
|
||||
### Slide 33: Live Demo - v0.dev
|
||||
*(5 minuten)*
|
||||
|
||||
**Titel:** Stap 4 & 5: Genereren
|
||||
|
||||
**Inhoud:**
|
||||
|
||||
*[Docent kopieert prompt naar v0.dev]*
|
||||
|
||||
**Let op:**
|
||||
- Generatie duurt ~30 seconden
|
||||
- Direct een preview
|
||||
- Code is React + Tailwind
|
||||
|
||||
---
|
||||
|
||||
### Slide 34: Live Demo - Itereren
|
||||
*(2 minuten)*
|
||||
|
||||
**Titel:** Verfijnen
|
||||
|
||||
**Inhoud:**
|
||||
|
||||
**Follow-up prompts:**
|
||||
- "Make the button larger with hover animation"
|
||||
- "Add gradient to the background"
|
||||
|
||||
**Dit is de kracht:** In gesprek gaan met de AI!
|
||||
|
||||
---
|
||||
|
||||
### Slide 35: Hoe deploy je naar Vercel?
|
||||
### Slide 32: Hoe deploy je naar Vercel?
|
||||
*(2 minuten)*
|
||||
|
||||
**Titel:** Straks: Live zetten
|
||||
@@ -677,13 +627,13 @@ Blokken en lijnen zijn genoeg.
|
||||
|
||||
**Resultaat:** `jouw-project.vercel.app`
|
||||
|
||||
*Ik laat dit nu niet zien - jullie gaan dit straks zelf uitzoeken!*
|
||||
*Dit gaan jullie straks zelf uitzoeken!*
|
||||
|
||||
---
|
||||
|
||||
## BLOK 7: HANDS-ON OPDRACHT (50 minuten)
|
||||
|
||||
### Slide 36: Lesopdracht
|
||||
### Slide 33: Lesopdracht
|
||||
*(5 minuten uitleg)*
|
||||
|
||||
**Titel:** Nu zijn jullie aan de beurt!
|
||||
@@ -709,7 +659,7 @@ Blokken en lijnen zijn genoeg.
|
||||
|
||||
---
|
||||
|
||||
### Slide 37: Aan de slag!
|
||||
### Slide 34: Aan de slag!
|
||||
*(45 minuten - studenten werken)*
|
||||
|
||||
**Titel:** Succes!
|
||||
@@ -732,7 +682,7 @@ Blokken en lijnen zijn genoeg.
|
||||
|
||||
## BLOK 8: AFSLUITING (30 minuten)
|
||||
|
||||
### Slide 38: Resultaten Delen
|
||||
### Slide 35: Resultaten Delen
|
||||
*(8 minuten)*
|
||||
|
||||
**Titel:** Wie wil laten zien?
|
||||
@@ -745,7 +695,7 @@ Blokken en lijnen zijn genoeg.
|
||||
|
||||
---
|
||||
|
||||
### Slide 39: Samenvatting
|
||||
### Slide 36: Samenvatting
|
||||
*(4 minuten)*
|
||||
|
||||
**Titel:** Wat hebben we geleerd?
|
||||
@@ -760,7 +710,7 @@ Blokken en lijnen zijn genoeg.
|
||||
|
||||
---
|
||||
|
||||
### Slide 40: Huiswerk
|
||||
### Slide 37: Huiswerk
|
||||
*(5 minuten)*
|
||||
|
||||
**Titel:** Voor volgende week
|
||||
@@ -777,7 +727,7 @@ Blokken en lijnen zijn genoeg.
|
||||
|
||||
---
|
||||
|
||||
### Slide 41: Volgende Les
|
||||
### Slide 38: Volgende Les
|
||||
*(1 minuut)*
|
||||
|
||||
**Titel:** Les 2: AI Code Assistants
|
||||
@@ -792,7 +742,7 @@ Blokken en lijnen zijn genoeg.
|
||||
|
||||
---
|
||||
|
||||
### Slide 42: Vragen & Afsluiting
|
||||
### Slide 39: Vragen & Afsluiting
|
||||
*(12 minuten buffer)*
|
||||
|
||||
**Titel:** Tot volgende week!
|
||||
|
||||
Reference in New Issue
Block a user