Elke week bouwen we een fictief bedrijf een complete website in ongeveer een uur, alleen via de chat in DirectAdmin. Deze week geen leeg domein maar een verbouwing: Fysiotherapie De Rugzak in Assen, twee fysiotherapeuten, met een site die sinds 2012 niet is aangeraakt. Het model: Claude Opus, auto-modus. De site staat live op fysio.nieuwesite.nl en blijft staan.
Wat er stond, was authentiek 2012: een vaste breedte van 780 pixels, tabellen en 76 font-tags over vijf pagina's, een lopende tekstbalk, een bezoekersteller die vastzat op 3417, "geoptimaliseerd voor Internet Explorer 8" op de homepage en in de voettekst "Laatst bijgewerkt: 3 maart 2014". Op een telefoon moest je inzoomen om iets te kunnen lezen.
De regels zijn die van vorige week: vier opdrachten die we letterlijk intypen, niemand die tussendoor iets repareert. De tijden komen uit het run-log van de assistent.
De cijfers
| Taak | Opdracht | Tijd | Goedkeuringen |
|---|---|---|---|
| 1 | Inhoud inventariseren | 228 s | 0 |
| 2 | Site opnieuw opbouwen | 609 s | 0 |
| 3 | Pagina Afspraak maken | 373 s | 0 |
| 4 | Controleren en vindbaar maken | 383 s | 0 |
Model: Claude Opus, auto-modus. Totale run: 1593 seconden, oftewel 26 minuten en 33 seconden. De assistent stond geen enkele keer stil om iets te vragen en geen taak liep vast.
De opdrachten
1. "Bekijk de huidige website in deze map. Het is een site uit 2012 met tabellen en font-tags. Maak een overzicht van alle inhoud die we moeten bewaren: behandelingen, tarieven, team, openingstijden en contactgegevens. Zet dat in de notities over de website." 228 seconden. Alle vijf pagina's doorgelezen en de inhoud letterlijk overgenomen: de praktijkgegevens, de openingstijden voor de hele week, de vijf behandelingen met hun volledige beschrijving en de vier tarieven met de tekst eromheen over vergoedingen.
Toen kwam er iets onverwachts. In het notitiebestand stond al een beschrijving van een vernieuwde versie, met afspraakformulier en groene huisstijl. Die versie bestond niet op de server; het was een plan dat nooit was uitgevoerd. De assistent meldde dat en zette de notities gelijk aan wat er echt stond.
2. "Bouw de site opnieuw als een moderne, mobielvriendelijke statische website met dezelfde pagina's en alle bewaarde inhoud. Rustige uitstraling die past bij een fysiotherapiepraktijk, geen standaardsjabloon. Zet de oude bestanden apart in een map oud-2012 buiten de webroot." 609 seconden, de langste taak van de dag. Alle vijf pagina's opnieuw: Home, Behandelingen, Tarieven, Ons team, Contact & route. De adressen bleven gelijk, dus oude links en bookmarks werken nog.
De uitstraling: zacht papierwit, donkergroen, een warm terracotta accent, klassieke koppen. Een getekend logo in de vorm van een rugzakje, een tekening van het praktijkpand en twee portretplaatshouders. Het telefoonnummer staat bovenaan elke pagina en is aan te tikken om te bellen.
Weg: de bezoekersteller, de regel over Internet Explorer 8 en de datum uit 2014. De lopende tekstbalk beweegt niet meer, maar de tekst over dry needling die erin stond is bewaard als rustige melding. En een detail dat niemand vroeg: op de pagina sportfysiotherapie stond "Sport je regelmatig", wat bij de rest van de site niet paste. Dat is nu "Sport u regelmatig".
3. "Voeg een pagina Afspraak maken toe met een formulier (naam, telefoon, klacht, voorkeursdag) dat een mail stuurt naar het praktijkadres en een bevestiging toont. Zorg dat de oude adressen zoals behandelingen.html blijven werken met een doorverwijzing." 373 seconden. Een formulier dat ingevulde gegevens vasthoudt als je een veld vergeet en aangeeft welk vakje mist, een bedankpagina, en een onzichtbaar veld dat spamrobots afvangt. "Afspraak maken" staat in het menu, in de voettekst en als knop op de vijf andere pagina's.
Eén keuze maakte de assistent zelf: de klachtomschrijving wordt alleen gemaild en niet op de website opgeslagen, met als toelichting dat dit gezondheidsinformatie is en niet op de server hoort te blijven staan.
Bovenop de gevraagde doorverwijzingen werken nu ook adressen zonder .html erachter.
4. "Controleer de site op mobiel en desktop met een screenshot, kijk of alle links werken, voeg nette paginatitels en beschrijvingen toe voor Google en meet de laadtijd." 383 seconden. Alle 25 adressen nagelopen: geen enkele dode link. De titels en beschrijvingen stonden er al en hadden de goede lengte; wat ontbrak is toegevoegd, waaronder een vast webadres per pagina en deelgegevens voor een link in WhatsApp of Facebook.
De hele site, pagina voor pagina
Alle zes pagina's zoals ze nu live staan, als volledige schermafdruk. Scroll in het venster om een pagina helemaal te zien. Met de knop 2012 zie je dezelfde pagina van de oude site; Afspraak maken bestond toen nog niet. Zet hem op 2012 en mobiel en je ziet waarom je moest inzoomen.
Wat misging
Twee dingen, en de assistent vond ze zelf in taak 4. Op mobiel plakte het telefoonnummer bovenin tegen de rechterrand van het scherm, en op Contact en Tarieven liep de tekst tot helemaal tegen de linkerrand. De oorzaak waren twee regels in het stijlblad die de zijmarge wegdrukten. Hij heeft ze verwijderd en met nieuwe screenshots gecontroleerd dat het klopte.
Dat betekent dat taak 2 een site opleverde met twee zichtbare fouten op mobiel. Zonder de controletaak erna waren die blijven staan. De les: zet "controleer het resultaat op mobiel en desktop" als eigen opdracht aan het eind, niet als bijzin in de bouwopdracht.
Het tweede punt komt uit taak 1: de notities over de website beschreven een site die niet bestond. Die notities gaan elke sessie mee als context, dus een plan dat je opschrijft en nooit uitvoert wordt na een tijd een verkeerd uitgangspunt.
En een derde, dat de assistent zelf meldde aan het eind van taak 3: de aanvragen gaan naar het adres dat op de oude site stond, en dat domein kan geen mail ontvangen. Het formulier werkt, de aanvragen komen nergens aan. Hij vroeg naar welk adres ze wel moeten.
Wat we leerden
- Bewaren is een aparte opdracht. Taak 1 deed niets aan de site, alleen inventariseren. Die 228 seconden waren goed besteed: alle teksten, tarieven en openingstijden stonden vast voordat er iets werd gesloopt.
- Niets hernoemen scheelt werk. Omdat de adressen gelijk bleven, waren er geen doorverwijzingen nodig voor de bestaande pagina's.
Claude of Codex?
Deze aflevering draaide op Claude Opus in auto-modus, tegenover Codex op GPT-6-Astra in aflevering 1. Het verschil dat opvalt is niet de snelheid maar het initiatief: Opus koos zelf om gezondheidsinformatie niet op te slaan, corrigeerde een tekst die niet bij de rest paste en herstelde notities die niet klopten. Geen van die drie stond in een opdracht.
Volgende week een derde bedrijf. Wil je dit zelf proberen, dan koppel je Claude of Codex in Invoker Link met je eigen abonnement; de pakketten staan bij webhosting.