De laatste paar dagen heb ik weer nieuwe inspiratie gekregen om met websites aan de slag te gaan. Voor de digibeten die niet houden van technische verhalen over AI, websites bouwen en beheren: stop met lezen!
De uitdaging: een nieuwe website bouwen
Het nerd-virus is weer in mij gevaren: ik wil proberen een nieuwe meertalige website te bouwen ter vervanging van de Fengshuiwebwinkel site. Een grote uitdaging, want los van mijn experimenten tot nu toe met verhalenvanmensen heb ik nog niet geprobeerd een echte professionele website te bouwen.
Zoals ik al eerder meldde, kun je Google werkelijk alles vragen. Dat wil dus zeggen de zoekpagina met AI. Die staat automatisch aan heb ik de indruk, wil je geen AI antwoorden, dan moet je dit zelf uitzetten. Van Google AI krijg je heel goede technische uitleg. Best goed van Google!
Ik vind deze antwoorden mede daarom goed, omdat je bij het antwoord – met de disclaimer ‘dit is AI en AI kan zich vergissen’ – ook de bronnen ziet waar Google dit vandaan heeft gehaald. Je kunt dus prima controleren of AI onzin verkoopt of niet. Soms doet het dat wel, zoals toen ik een vraag over WordPress 7.1.2 stelde, en Google zei: ‘die versie bestaat nog niet, de hoogste versie is 6.*’. Bullshit natuurlijk, maar daarop aangesproken herstelde de AI zich.
Uitbreiding van de webhosting omgeving
Om die ontwikkelomgeving (vaak aangeduid als ‘dev.domeinnaam.nl’, waarbij ‘dev’ staat voor development) te kunnen inrichten moet je eerst een webhostingomgeving hebben. Die heb ik natuurlijk al voor de Fengshuiwebwinkel en nu ook voor verhalenvanmensen, maar ik moest het pakket uitbreiden om meer websites te kunnen onderbrengen.
Ik zit met verhalenvanmensen bij TransIP, een hostingpartij waar ik erg tevreden mee ben. Een erg overzichtelijk dashboard en zéér toegankelijke helpdesk (zowel via de chat/mail als telefonisch). Je kunt mooi zien welke domeinnamen je allemaal hebt en welke beheer/hostingomgevingen. Echt top!
Het uitbreiden van de webhosting bracht wel enige verwarring met zich mee. Ik heb voor verhalenvanmensen een ‘Core’ abonnement bij TransIP. Dat is heel handig, je hebt een WordPress omgeving en automatisch ook een dev-omgeving die daaraan verbonden is. Omdat ik een beetje aanrommel binnen deze website vind ik het handig om nieuwe content (zoals dit blog) te schrijven in de dev-omgeving. Als ik er tevreden mee ben, klik ik in een menuutje op ‘copieer dev-omgeving naar live’ en voilá, zo geschiedt!
Nou dacht ik: ik upgrade dat Core abonnement even naar Pro, en ‘Bob’s your uncle!’. Core kost € 9,99 per maand, en Pro € 15,99. En in Pro kun je drie website beheren, in Core één. Dus reken maar uit. Maar zo eenvoudig was dat niet.
Het bleek – na enig heen en weer vragen met de helpdesk van TransIP – dat dit twee gescheiden werelden zijn. Je kunt een Core niet upgraden naar Pro. Pro is een professionelere omgeving, waarin je meer kunt beheren. In Core kun je aan de WordPress website knutselen en dat is dat. In Core kun je onder andere hostingomgevingen voor subsites aanmaken (je maakt dan in het dashboard eerst de subsite domeinnaam aan, bvb. dev.fengshuiwebwinkel.nl, en dan kun je in de Pro omgeving de opdracht geven: ‘maak een WordPress omgeving voor deze ontwikkelomgeving’.
En vervolgens kun je daarmee aan de slag. Een website van Core naar Pro verhuizen kan dus niet via een simpele upgrade van het Core abonnement. Je moet dan een export maken van de WordPress database van je website in Core, dan moet je een nieuwe omgeving maken in Pro, en vervolgens importeer je die export in die nieuwe omgeving. Dat moet met beleid, want je kunt de domeinnaam uit het Core pakket niet zomaar verhuizen naar Pro terwijl daar nog een live site op draait.
Overigens heb je ook nog zoiets als e-mailpakketten. Het aanschaffen van een e-mailservice (met een eigen server voor dat verkeer) is een aparte dienst. Die heb ik voor Fengshuiwebwinkel wel bij TransIP, voor verhalenvanmensen heb ik geen e-maildienst. Maar dit terzijde.
Heel veel leermomenten! Ik heb verhalenvanmensen nog niet naar de Pro omgeving verhuisd: dat is een uitdaging die ik nog tegemoet ga. Maar met de begeleiding van TransIP komt dat vast wel goed.
Een dev-site voor Fengshuiwebwinkel in Pro
Maar ik wilde dus een ontwikkelomgeving inrichten om eigenhandig een nieuwe site te maken voor Fengshuiwebwinkel.nl. De laatste tijd ben ik steeds meer dingetjes aan het aanpassen in de achterkant van die website. Omdat ik die niet gebouwd heb is dat af en toe nog best zoeken.
Zo staat er in de header een rijtje categorieën van produkten. Daar stond ook de categorie ‘Uncategorized’ met nul produkten in. Nogal slordig. Het was even zoeken waar je dit kunt aanpassen. Met hulp van vraag en antwoord met Google ben ik er uit gekomen. Ook wilde ik de SEO (online vindbaarheid) verbeteren door meer tekst te zetten bij productcategorieën. Dat vindt de zoekmachine van Google leuk. Het had ook behoorlijk wat voeten in de aarde voordat ik dat gevonden had. Maar ook dat is gelukt.
Dit technische geknutsel aan de live webwinkel smaakte naar meer: laat ik een nieuwe website ontwikkelen voor de webwinkel!
Plugins
Met de nieuwe website heb ik ambitieuze plannen. Ik wil die (nog) sneller maken, en ik wil een meertalige website ontwerpen. Daarbij komen veel vragen bovendrijven: welke plugins heb je nodig? Plugins zijn hulpprogrammaatjes die je als aanvulling op de WordPress omgeving daarin kunt installeren. Die worden door heel veel partijen ontwikkeld voor WordPress. Zo heb je de Woocommerce plugin (voor het inrichten van een webshop), de Mollie plugin (zodat klanten betalingen kunnen doen) en nog vele andere. Meer technische plugins zijn er voor de bescherming van de veiligheid van je website. Een aan de voorkant zichtbare is de Captcha plugin, die je bij een formulier moet invullen om te laten zien dat je een mens bent. Maar er zijn ook anti-Spam plugins die aan de achterkant werken. En nog veel meer.
Het aantal plugins is dus een oerwoud, want de keuze is reuze. Je kunt in WordPress als je een nieuwe plugin wilt installeren zoeken op naam, en je ziet wie de plugin ontwikkeld heeft en hoeveel sterren die heeft en in hoeveel websites die geïnstalleerd is. Net zoals in de Appstore. Maar soms heb je twee gelijkwaardige, en sta je dus in dubio welke je moet kiezen. Google to the rescue!
Gaandeweg ben ik aan het project ‘nieuwe website Fengshuiwebwinkel’ aan het werken en aan het uitzoeken hoe ik de website moet opbouwen en welke plugins het beste zijn. Daar komt bij dat er naast gratis plugins ook betaalde zijn. Verder vraag ik Google om mij te vertellen welke het beste is voor de Google ranking. Daarbij is laadsnelheid oftewel mate van belasting van de server een aspect. Maar ook de SEO aspecten van een plugin. De discussie met Google AI sla ik op in een project-logboek (in LibreOffice Writer, de gratis Linux variant van Word), en de uitkomsten/keuzes sla ik op in een resumé. Anders weet ik ook niet meer wat ik allemaal bedisseld heb met Google en op welke keuzes ik ben uitgekomen.
Aldus ben ik vooralsnog uitgekomen op Kadence als ’theme’ (dit is een licht theme dat goed werkt binnen de Gutenberg editor van WordPress). Ik heb bewust niet gekozen voor Bricks, omdat dit toch veel technischer is. Dan komt die website nooit af. En voor de meertaligheid heb ik vooralsnog gekozen voor TranslatePress. Er waren drie plugins in de beauty contest, en deze leek me het beste omdat die een hoge laadsnelheid heeft en deze is gratis. Je kunt een Pro abonnement nemen maar dat heb ik vooralsnog niet nodig.
Een zwaardere meertalige website plugin is WPML. Deze vertaalplugins vertalen vaak met behulp van AI. Nu weet ik nog zo net niet of ik dat wel aan wil zetten (in de gratis versie ben je overigens ook beperkt tot 2.000 woorden, terwijl ik als ik 4 websites met 400 produkten wil bouwen ik het tienvoudige nodig heb).
Inmiddels heb ik al de nodige plugins in de dev-site geïnstalleerd. Maar dat is nog maar het begin. Het echte design moet nog komen, en daarna het vullen van de produktdatabase met alle producten, SEO-teksten en foto’s. Wel in het format ‘webp’, niet in ‘jpg’ of ‘jpeg´, om het allemaal zo licht en zo snel mogelijk te houden. O ja, en een lokaal lettertype natuurlijk (zie een vorig blogje).
Ik kan mijn borst dus wel nat maken.
De hulp van AI: Claude
Voor die nieuwe website heb ik ook aangepaste logo’s nodig. Zo heb ik een domeinnaam ‘fengshui-boutique.be’ (en de .nl variant) gekocht, om de website ook in het Frans te maken. Daarmee hoop ik ook de Walen te verleiden mijn kamerfonteinen te kopen. Maar ja, het logo luidt ‘Feng Shui – webwinkel’.
Misschien, zo dacht ik, kan ik AI vragen dit voor mij aan te passen. In plaats van een paar honderd euro kwijt te zijn aan een grafisch ontwerper. Welke AI zal ik hiervoor inschakelen?
Op één of andere manier heb ik meer sympathie opgevat voor de AI tool ‘Claude’ van Anthropic. OpenAI vind ik toch minder sympathiek. Wellicht vanwege het meer principiële standpunt van Anthropic wat betreft gebruik van hun AI voor zelfstandig opererende wapens, en de aanvaring daarover met het Ministerie van Defensie in de US. Of ze werkelijk zoveel nobeler zijn moet nog maar blijken, maar goed.
Ik was ook wel onder de indruk van de berichten over de ongelooflijke kracht van Claude. Of het een verkooppraatje was of niet, ze hadden één van de nieuwste tools – Claude Mythos – ‘onder embargo’ aan een beperkte groep deskundigen vrijgegeven, omdat misbruik door hackers anders op de loer zou kunnen liggen. Terecht of niet, dat verkooppraatje sloeg bij mij wel aan.
Zo gezegd, zo gedaan. Ik vroeg – de gratis versie van – Claude: ‘pas dit logo aan, waarbij het woord ‘webwinkel’ wordt vervangen door ‘boutique’. Ziehier het resultaat! Verbluffend!
Daar worden grafisch designers natuurlijk niet blij van, want dit is keiharde broodroof. Maar ja, voor de consument – mij dus – is dit toch wel fijn. Natuurlijk moet je voor meer geavanceerde designs wel naar een professional, maar voor een klein klusje als dit is het toch wel heel fijn als je dit in een handomdraai gratis zelf voor elkaar kunt krijgen.
Een criticus (een verbolgen grafisch designer) zal wellicht opmerken: die letters van ‘boutique’ zijn kleiner! Dat is waar, ik zie het nu ook pas, maar ik denk dat ik dit vrij makkelijk kan laten corrigeren door onze vriend Claude (niet te verwarren met de zanger).
En ik moet erbij zeggen dat AI er soms helemaal niets van bakt, met name met grafische dingen. Ik had een tijdje terug gevraagd een foto met een doos met edelstenen om te zetten in een tekening, waarin de stenen in de doos omlijnd werden. AI bakte er niets van! Ook na herhaalde verzoeken tot verbetering – en schuldbewuste antwoorden van AI – bleef het maar schamel. Terwijl ik dacht: hoe ingewikkeld kan het zijn om een foto na te tekenen?
Ik weet overigens niet meer of ik dit aan Claude heb gevraagd of aan ChatGPT. Kan zijn dat het de laatste was.
Kan Claude ook een web-app maken?
Overmoedig geworden door dit succes kwam ik op het idee om Claude te vragen een web-app te maken. Al jaren loop ik met het idee om een prijsvergelijker te maken. Ik laat – om de concurrentie niet teveel aan de neus te hangen – nu even in het midden welke prijzen vergeleken moeten worden. Ben Woolderink hoeft zich geen zorgen te maken (die is mij al lichtjaren voor op dit vlak trouwens; hoewel ik het label ‘Gaslicht’ tegen de achtergrond van de term ‘gaslighting’ ongelukkig gekozen vind).
Door de ervaring met het logo wist ik wel: vraag niet te vaak iets, want dan ben je al zo door je vijf gratis vragen heen en moet je weer uren wachten voordat je weer mag. Tip: ga niet in op de suggestie een demo te maken, want voor je het weet heb je een Powerpoint presentatie over de Golden Gate Bridge, waar je niet op zat te wachten en die je alweer een token op achterstand zet (nog los van de verspilling van energie enz.).
Dus ik had een goede prompt gemaakt, die gerust lang mag zijn. Claude kwam nog met twee nadere vragen, onder andere ‘moet iedere website bezoeker gebruik kunnen maken van de web-app of alleen aangemelde bezoekers?’. Een goede vraag. Waarna Claude aan de slag ging en na niet al te lange tijd (10 minuten? 15 minuten?) er een kant-en-klaar zipfile gedownload kon worden met de web-app. Echt mind-boggling!
Maar zoals de Engelsen zeggen: ’the proof of the pudding is in the eating’. Dus moest ik die web-app eerst in een WordPress omgeving installeren om die te testen.
Een localWP server kan er ook nog wel bij
Gelet op de nieuw bestelde Pro webhosting omgeving bij TransIP wilde ik dit proeflapje niet zomaar daar onderbrengen. Dan moest ik ook weer een domeinnaam registreren (of deze dev-omgeving parkeren onder een andere naam die er niks mee van doen had).
Nu herinnerde ik mij, dat ik in een grijs verleden ooit een lokale server geïnstalleerd had op mijn Windows computer. Zou dat bij Linux ook kunnen? Jawel hoor: met LocalWP voor Linux is dit zo geregeld. Aldus Google AI (met vindplaatsen, die ik meestal helemaal niet hoef te lezen).
Zo gezegd, zo gedaan. LocalWP voor Linux gedownload. Maar als je in Linux iets wilt installeren, dan komt daar wel wat meer bij kijken. Je moet allerlei cryptische commando’s invoeren in het – als een DOS-omgeving eruit ziende – control panel van Linux. Je hebt het dan over commando’s als ‘BASH’, ‘apt install’, ‘sudo weetikveelwat’ en zo voort. Ik heb als ik die instructies geef geen idee wat ik aan het doen ben. Je kunt ook niets copy-pasten in dat controlpanel. Je moet het echt allemaal heel precies overtypen, anders krijg je een ‘error’ (als je geen geduld hebt krijg je die zelf, hahaha!). Maar Google AI helpt je er doorheen en legt het wel uit.
Enfin, uiteindelijk is het gelukt! Mijn local-server draait, geheel buiten het internet om. Dus ik WordPress geïnstalleerd (of was die al ingebakken in LocalWP, ben ik even kwijt), de web-app geïnstalleerd (het duurde even omdat ik niet doorhad dat ik een plugin moest installeren en Claude niet een website gemaakt had).
En de website draaide! Heel basic, maar het leek toch zomaar te werken. Onderdeel van de web-app is dat je een foto van een bonnetje moet maken en uploaden, dat dan met OCR (letterherkenning) wordt overgezet in de database van de web-app. Aan de hand daarvan kunnen de geladen data worden gebruikt voor de prijsvergelijking.
Ik moest eerst nog een ‘API’ ophalen bij de OCR-server die deze functionaliteit aanlevert (die door Claude was ingebouwd). Claude had een prima tekst-handleiding erbij gedaan hoe dit te doen. Maar…
Helaas, helaas, mijn foto’s werden door de OCR niet herkend. Dus kan ik niet zien of de web-app verder doet wat-ie moet doen. Maar goed ook dat ik hiervoor slechts een local server gebruik. Inmiddels was het al laat, maar eenmaal in bed kon ik van opwinding over al deze belevenissen echt niet slapen! Ik bedacht meteen een domeinnaam voor deze mogelijke website (gecheckt: die is nog vrij). Maar ik heb die nog niet geregistreerd, het moet eerst maar eens werkend gemaakt worden.
Maar Google AI adviseerde mij al om eens te kijken of een andere – betere – OCR het karwei wel zou kunnen klaren. Dus zal ik mij terug melden bij Claude en – in één lange instructie – opdragen om de web-app toch wat aan te passen (ik denk dat het een nieuwe build wordt), om daarna te kijken of die wel werkt.
Ik vraag me ondertussen af of Claude ook een bestaande website zou kunnen aanpassen? Hm…
Daar gaan we nog wel achter komen.
