# Web production 101

Intro over web production en hoe we de lessen organiseren

Multimedia & Creatieve Technologie · 2.1 Web production · Les 1 · Intro · versie 1.0.0 · 2026-09-26

Slides: <https://slides.mctantwerp.be/nl/web-production/01-intro>

Speaker notes: <https://slides.mctantwerp.be/nl/web-production/01-intro.notes.md>

<!-- slide 2 -->

## Agenda

1. Who's who
2. Web production
3. Tooling
4. Debugging basics
5. AI
6. Opdrachten

<!-- slide 3 -->

## 1. Who's who

<!-- slide 4 -->

### Whois

Bram Verdyck

- Gastdocent @ KdG
- Creative technologist & team lead @ VML
- Owner SoBra CommV, co-founder Hyperchicken
- Front-end, AI enthusiast, overall tech geek
- MCT alumni (2010)

[bram.verdyck@kdg.be](mailto:bram.verdyck@kdg.be) · @troti13 op Discord

![Bram Verdyck geeft een talk op een podium](https://slides.mctantwerp.be/decks/nl/web-production/01-intro/whois.jpg)

<!-- slide 5 -->

### De Mad Men van MCT

- ![Krantenartikel De Mad Men van MCT](https://slides.mctantwerp.be/decks/nl/web-production/01-intro/mad-men-mct.jpg)
- ![Bram Verdyck en Xavier Vermeiren in het artikel](https://slides.mctantwerp.be/decks/nl/web-production/01-intro/mad-men-bram-xavier.jpg)
- ![Fragment uit het artikel over These Days](https://slides.mctantwerp.be/decks/nl/web-production/01-intro/mad-men-these-days.jpg)

<!-- slide 6 -->

### Pioneer Steez

![Screenshot van de Pioneer Steez website](https://slides.mctantwerp.be/decks/nl/web-production/01-intro/pioneer-steez.jpg)

*[Pioneer Steez in het Internet Archive](https://web.archive.org/web/20111219053003/http://www.pioneer-steez.com/eu/en/)*

<!-- slide 7 -->

[Video](https://www.youtube.com/watch?v=VxghWZY69Og)

<!-- slide 8 -->

![Rij fietsen op een plein voor een groot scherm](https://slides.mctantwerp.be/decks/nl/web-production/01-intro/bikes-street.jpg)

![Winkelgevel met een fiets in de etalage](https://slides.mctantwerp.be/decks/nl/web-production/01-intro/bikes-store.jpg)

![Fiets tegen een brugleuning met de stad op de achtergrond](https://slides.mctantwerp.be/decks/nl/web-production/01-intro/bikes-bridge.jpg)

<!-- slide 9 -->

[Video](https://www.youtube.com/watch?v=eyYDsa-hQks)

<!-- slide 10 -->

[Video](https://www.youtube.com/watch?v=TbUzpwudUbI)

<!-- slide 11 -->

[Video](https://www.youtube.com/watch?v=Vn9ox3Fyhpk)

<!-- slide 12 -->

### OK Groomer

![OK Groomer, game over voor online kinderlokkers](https://slides.mctantwerp.be/decks/nl/web-production/01-intro/ok-groomer.jpg)

*[Ontdek het spel](https://childfocus.be/okgroomer)*

<!-- slide 13 -->

### Wat-je-nog-liggen-hadGPT

![Ik redde vandaag mijn restjes met Wat-je-nog-liggen-hadGPT](https://slides.mctantwerp.be/decks/nl/web-production/01-intro/ovam-restjes.jpg)

*[OVAM, wat-je-nog-liggen-hadGPT](https://watjenogliggenhad.dekostwinners.be/)*

<!-- slide 14 -->

![Installatie met een groot scherm en vier gekleurde buzzers](https://slides.mctantwerp.be/decks/nl/web-production/01-intro/installation-buttons.jpg)

<!-- slide 15 -->

### Miles for the Missing

![Homepage van Miles for the Missing met een teller van kilometers](https://slides.mctantwerp.be/decks/nl/web-production/01-intro/miles-for-the-missing.jpg)

*[milesforthemissing.be](https://milesforthemissing.be/nl)*

<!-- slide 16 -->

### Hyperchicken

![Hyperchicken logo over een zwart-witfoto](https://slides.mctantwerp.be/decks/nl/web-production/01-intro/hyperchicken.jpg)

<!-- slide 17 -->

### Lunar Strike

![Startscherm van Lunar Strike, bring down the sky](https://slides.mctantwerp.be/decks/nl/web-production/01-intro/lunar-strike.jpg)

*[lunarstrike.net](https://lunarstrike.net/)*

<!-- slide 18 -->

![Landingspagina met een waitlist formulier en een product preview](https://slides.mctantwerp.be/decks/nl/web-production/01-intro/waitlist.jpg)

<!-- slide 19 -->

**Awkward rondje**

Wie zijn jullie? Hebben jullie al een voorkeur voor frontend, backend of iets anders?

<!-- slide 20 -->

**Wat hopen jullie te leren dit jaar?**

<!-- slide 21 -->

## 2. Web production

<!-- slide 22 -->

**Web production**

Concepten en technieken die een website een extra voordeel geven om gevonden te worden en zich visueel of interactief te onderscheiden.

<!-- slide 23 -->

### Inhoudelijk

*Voorbeelden uit de ECTS-fiche*

- **Visuele frontend**
- **Animaties**
- **Banners en emails**
- **JavaScript libraries**: Interactiviteit
- **CMS**
- **SEO, eCRM en performance**
- **Accessibility**

<!-- slide 24 -->

### Doelen

*ECTS-fiche*

- **#SELECT**: Je hanteert hedendaagse webmanagement en -performance tools (zoals CMS'en, webanalytics, browser dev-toolbars) en technieken (zoals webperformance, banners, SEO, eCRM) en kan de toepassing ervan met professionele termen verduidelijken.
- **#DESIGN**: Je ontwerpt onder begeleiding visuele en/of interactieve elementen om een website mee te verrijken, houdt rekening met de compatibiliteit van eenvoudige websites en webapps met hedendaagse browsers en besturingssystemen, en kan je keuzes beargumenteren.

<!-- slide 25 -->

### Doelen

*ECTS-fiche*

- **#CREATE**: Je realiseert en test zelfstandig basis professionele websites en webapps in hedendaagse frontend technologieën die optimaal werken op verschillende platformen.
- **#CREATE**: Je zet een aangeleverd UI-design om naar kwalitatief werkende frontend code.

<!-- slide 26 -->

### Timing

- **P1 + P4 Periode 1 en 4**: 2x examen
- **30% Contacturen**: Op school
- **70% Zelfstudie**: Leerstof verwerken, thuis
- **125u 5 SP**: ≈ 12 weken aan 10u per week, lessen inbegrepen

Daaronder vallen ook oefeningen, je portfolio updaten, zelfstudie en examenvoorbereiding.

<!-- slide 27 -->

### Evaluatie

- **60% Portfolio bijhouden**
- **40% Examengesprek**: Op basis van je portfolio en de oefeningen

<!-- slide 28 -->

### Wat en hoe

- **Canvas**: Cursusinfo met de gedetailleerde planning
- **Discord**: Voor vragen en snelle communicatie

<!-- slide 29 -->

## 3. Tooling

<!-- slide 30 -->

### Coding

**[Visual Studio Code](https://code.visualstudio.com/)**

**[NodeJS via Herd](https://herd.laravel.com/windows)**

**[Cursor](https://cursor.com/)**: Eventueel

![Visual Studio Code met een React project](https://slides.mctantwerp.be/decks/nl/web-production/01-intro/vscode.jpg)

<!-- slide 31 -->

### NodeJS via Herd

![Herd instellingen met de geïnstalleerde Node versies](https://slides.mctantwerp.be/decks/nl/web-production/01-intro/herd-node.jpg)

<!-- slide 32 -->

### Experiments

*[CodePen](https://codepen.io/)*

- 
- 
-

<!-- slide 33 -->

### Inspiration

- **[CodePen Spark](https://codepen.io/spark)**
- **[Smashing Magazine](https://www.smashingmagazine.com/)**
- **[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web)**
- **[ChatGPT](https://chatgpt.com/)**

<!-- slide 34 -->

## 4. Debugging basics

<!-- slide 35 -->

**HTML**

De inhoud en de structuur van een pagina, opgemaakt in semantische tags die elk hun eigen functie hebben.

<!-- slide 36 -->

### DOM

- Een browser leest HTML in en zet die om in een boomstructuur met extra informatie: het Document Object Model
- Elk element (titel, paragraaf, input, button) krijgt een plek in die boom
- JavaScript kan die boom uitlezen en aanpassen zonder het oorspronkelijke HTML-bestand te wijzigen

<!-- slide 37 -->

### DOM aanpassen

*Wat JavaScript met de DOM kan doen*

- Tekst wijzigen
- Elementen toevoegen of verwijderen
- Classes en attributen aanpassen

<!-- slide 38 -->

### Shadow DOM

Een element kan een eigen, afgeschermde DOM-boom hebben met interne elementen.

- `<input type="range">`
- `<video controls>`
- Web components (Advanced web)

<!-- slide 39 -->

[Video](https://www.youtube.com/watch?v=KShnPYN-voI)

<!-- slide 40 -->

### Inspecteren

- Groot verschil tussen 'view source' en 'inspect element'
- Elke browser heeft developer tools om de DOM te inspecteren en met de hand aan te passen

> [!WARNING]
> De inspector is geen hacking tool.

<!-- slide 41 -->

### Source vs DOM

#### View source

Toont de HTML-bron van een pagina.

#### Inspect element

Toont de huidige state van de DOM, inclusief alles wat JavaScript al veranderd heeft.

<!-- slide 42 -->

### Dev tools

- Toolkit voor webontwikkelaars
- Rechtstreeks in de browser
- Aanpassingen testen
- Werkt op elke website

<!-- slide 43 -->

### Dev tools

*Chrome, Firefox en Safari*

- ![Chrome DevTools](https://slides.mctantwerp.be/decks/nl/web-production/01-intro/devtools-chrome.jpg)

  *Chrome*
- ![Firefox Developer Tools](https://slides.mctantwerp.be/decks/nl/web-production/01-intro/devtools-firefox.jpg)

  *Firefox*
- ![Safari Web Inspector](https://slides.mctantwerp.be/decks/nl/web-production/01-intro/devtools-safari.jpg)

  *Safari*

<!-- slide 44 -->

### Demo inspector

- Inspect element
- CSS updaten
- Nodes herschikken
- Node verwijderen

- Rulers
- Shadow DOM
- Responsive tools
- Pseudo-elementen (`::before` en `::after`)

<!-- slide 45 -->

### Demo andere tools

- Console
- Sources
- Network
- Application
- Lighthouse
- Network conditions

<!-- slide 46 -->

## 5. AI

<!-- slide 47 -->

**Wie gebruikt er al AI?**

<!-- slide 48 -->

**Welke tools gebruiken jullie?**

<!-- slide 49 -->

**Gratis of betaald?**

Er zit een groot verschil in kwaliteit en output tussen gratis en betaalde tools. Twijfel je over een betaald account, vraag gerust raad.

<!-- slide 50 -->

**AI is optioneel**

Voor dit vak heb je geen betaald account nodig. Je moet je werk wel zelf kunnen uitleggen, op onze vraag aanpassen en zelf testen.

<!-- slide 51 -->

## 6. Opdrachten

<!-- slide 52 -->

### Opdracht 0.1: Portfolio opzetten

Zet je portfolio op en dien het in op Canvas.

<!-- slide 53 -->

### Opdracht 0.2: Make websites ugly again

Zoek een leuke website en maak die via de inspector zo lelijk mogelijk. Meer info op Canvas.

## Begrippen

- **DOM**: Document Object Model. De boomstructuur die de browser maakt van je HTML. JavaScript kan die boom lezen en aanpassen zonder het HTML-bestand te wijzigen. (slide 36)
- **Shadow DOM**: Een eigen, afgeschermde DOM-boom binnen een element, zoals de knoppen van <video controls> of een web component. (slide 38)
- **View source**: Toont de HTML zoals de server hem stuurde. Inspect element toont de DOM zoals hij nu is, met alles wat JavaScript al veranderd heeft. (slide 41)
- **Dev tools**: De developer tools in je browser: de DOM inspecteren, CSS live aanpassen, de console, het netwerkverkeer en Lighthouse. Werkt op elke website. (slide 42)

## Links en bronnen

### In de presentatie

- [Pioneer Steez in het Internet Archive](https://web.archive.org/web/20111219053003/http://www.pioneer-steez.com/eu/en/) (slide 6)
- [Ontdek het spel](https://childfocus.be/okgroomer) (slide 12)
- [OVAM, wat-je-nog-liggen-hadGPT](https://watjenogliggenhad.dekostwinners.be/) (slide 13)
- [milesforthemissing.be](https://milesforthemissing.be/nl) (slide 15)
- [lunarstrike.net](https://lunarstrike.net/) (slide 17)
- [Visual Studio Code](https://code.visualstudio.com/) (slide 30)
- [NodeJS via Herd](https://herd.laravel.com/windows) (slide 30)
- [Cursor](https://cursor.com/) (slide 30)
- [CodePen](https://codepen.io/) (slide 32)
- [CodePen Spark](https://codepen.io/spark) (slide 33)
- [Smashing Magazine](https://www.smashingmagazine.com/) (slide 33)
- [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web) (slide 33)
- [ChatGPT](https://chatgpt.com/) (slide 33)