In deze reeks bouwen we een fictief Nederlands bedrijf een complete website, alleen via de chat in DirectAdmin, in ongeveer een uur. Deze keer Schildersbedrijf Van der Berg in Hoogeveen: sinds 2008, een vast team van drie vakmensen, binnen- en buitenschilderwerk, behangen, houtrotherstel en spuitwerk. Het model: Claude Sonnet, auto-modus. De site staat live op schilder.nieuwesite.nl en blijft staan.
Het uitgangspunt was geen oude handgemaakte site maar een export uit een website-bouwer. Zes pagina's, alles op een vaste breedte van 980 pixels, 256 losse stijlregels in de bestanden zelf en ruim honderd lege verpakkingslagen eromheen. In het stijlblad stond nog een blok "handmatige aanpassingen webmaster" uit 2019, waarmee iemand de huisstijl had overschreven.
En het echte probleem: het offerteformulier stuurde zijn inzendingen naar een adres van de bouwer zelf. Dat adres bestaat niet meer. Het formulier zag er nog uit alsof het werkte, en elke aanvraag verdween.
De cijfers
| Taak | Opdracht | Tijd | Goedkeuringen |
|---|---|---|---|
| 1 | Inhoud uit de export halen | 24 s | 0 |
| 2 | WordPress en een eigen thema | 664 s | 0 |
| 3 | Een offerteformulier dat werkt | 324 s | 0 |
| 4 | Cache, mobiel en doorverwijzingen | 126 s | 0 |
Totaal 1138 seconden, oftewel 18 minuten en 58 seconden. Geen enkele keer stilgestaan om iets te vragen.
De opdrachten
1. "In deze map staat een export van onze site uit een website-bouwer. Het offerteformulier werkt niet meer en de site is niet mobielvriendelijk. Haal alle bruikbare inhoud eruit (diensten, projecten, reviews, contactgegevens) en schrijf die in de notities over de website." 24 seconden, en dat getal verdient uitleg. Dit was de tweede poging; de notities uit de eerste run stonden er nog. De assistent las alle zes pagina's door, stelde vast dat de zes diensten, de acht projecten, de zes reviews, de openingstijden en de formuliervelden allemaal klopten, en wijzigde niets. In de eerste run kostte dezelfde taak 82 seconden.
2. "Installeer WordPress met de titel Schildersbedrijf Van der Berg en bouw een eigen thema met homepage, diensten, portfolio met de acht projecten, reviews en contact. Vakmanschap en betrouwbaarheid uitstralen, geen standaardsjabloon." 664 seconden, de langste taak. Eerst een backup, daarna de oude site naar een archiefmap in plaats van de prullenbak, en pas toen WordPress erop. Het thema houdt de kleuren van het bedrijf aan, rood op donkergroen, maar is nu wel mobielvriendelijk.
Twee keuzes maakte de assistent zelf. De zes vakgebieden staan als tegels in de kleuren van verfstalen en de reviews als citaatkaartjes. En belangrijker voor de eigenaar: de acht projecten en de zes reviews werden geen vaste tekst in het thema maar gewone items in het WordPress-beheerscherm. De schilder kan er dus zelf een project bij zetten zonder dat iemand aan code hoeft te komen.
3. "Maak een offerteformulier dat wél werkt: werkzaamheden, oppervlakte of aantal kozijnen, gewenste periode, foto's meesturen, en een mail naar het bedrijf met een kopie naar de klant. Voeg het toe op de homepage en de offertepagina." 324 seconden. Het formulier kreeg de gevraagde velden, met ruimte voor maximaal vijf foto's van elk vier megabyte. De aanvraag gaat naar het bedrijf, de aanvrager krijgt een kopie, en de foto's gaan als bijlage mee. Op de homepage stond eerst alleen een knop naar de contactpagina; daar staat nu het hele formulier onderaan.
Hij testte het met een proefaanvraag inclusief foto, controleerde dat de tijdelijke bestanden daarna werden opgeruimd, en merkte onderweg dat de pagina nog de oude versie toonde. Dat was de cache, die hij leegde.
4. "Stel LiteSpeed Cache in, controleer de site op mobiel met een screenshot, en zet doorverwijzingen van de oude adressen (diensten.html, portfolio.html, offerte.html, contact.html) naar de nieuwe pagina's." 126 seconden. Paginacache stond al aan; daar kwamen browsercache, het verkleinen van CSS, JavaScript en HTML, lazy loading en het weghalen van de emoji-scripts bij.
Opvallend is wat hij níet aanzette: het samenvoegen van CSS en JavaScript, en het weghalen van ongebruikte CSS. Zijn eigen toelichting: die opties kunnen met dit thema problemen geven. De vier oude adressen verwijzen nu permanent door naar de nieuwe pagina's, getest en werkend.
De hele site, pagina voor pagina
Alle vijf pagina's zoals ze nu live staan, als volledige schermafdruk. Scroll in het venster om een pagina helemaal te zien. Met de knop 2019 zie je de homepage van de oude bouwer-export; zet hem op 2019 en mobiel en je ziet waarom bezoekers moesten inzoomen.
Wat misging
Niet in deze run, maar in de run ervoor, en dat is de interessantste les van deze aflevering. Op 3 oktober liep dezelfde reeks vast bij taak 2. De assistent besteedde het bouwen van het thema uit aan een achtergrondtaak en meldde dat hij het zou laten weten zodra het klaar was. Alleen: onze aansturing beschouwt een taak als afgerond zodra het eindantwoord binnen is. Het thema kwam nooit aan, en taak 3 en 4 werkten op een kale WordPress-installatie. Twee van de vier taken klaar, na 3341 seconden.
De oorzaak zat niet in het model maar in de combinatie. Werk vooruitschuiven naar de achtergrond is prima in een terminal waar je blijft kijken, en onbruikbaar in een opdracht die als geheel af moet zijn. We hebben dat dichtgezet: achtergrondtaken worden geweigerd, en in de opdracht staat nu dat hij af moet maken voordat hij antwoordt. De run van 5 oktober liep in één keer door.
Wat we leerden
- "Klaar" moet betekenen dat het klaar is. Een antwoord dat eindigt met "ik laat het weten zodra het af is" is in een geautomatiseerde reeks hetzelfde als een mislukking. Dat dwing je af in je eigen aansturing, niet in het model.
- Elke taak begint een nieuw gesprek. De context tussen taak 1 en taak 2 loopt alleen via de notities over de website. Daarom is "schrijf het in de notities" geen bijzaak in taak 1 maar de hele reden dat taak 2 wist wat er moest komen.
- Een bouwer-export is bedrieglijker dan een oude handgemaakte site. Hij ziet er modern genoeg uit om te laten staan, terwijl de helft ervan naar een dienst wijst die je niet meer in de hand hebt.
Welk model en waarom
Deze aflevering draaide op Claude Sonnet, tegenover Claude Opus in aflevering 2 en Codex in aflevering 1. Sonnet is hier sneller: 19 minuten tegen 27 voor de fysiopraktijk, bij een opdracht met meer werk erin. Waar hij zich onderscheidt is het bewaren van een uitweg: eerst een backup, de oude site archiveren in plaats van verwijderen, en de instellingen die risico geven bewust uit laten. Geen van die drie stond in een opdracht.
Wil je dit zelf proberen, dan koppel je Claude of Codex in Invoker Link met je eigen abonnement; de pakketten staan bij webhosting.