ChatGPT is sinds een paar maanden publiek beschikbaar. De chatbot heeft sindsdien enorm veel aandacht in de media gekregen, meer dan welke enkele andere tool ook. Maar hoe capabel is ChatGPT als het gaat om het maken van websites?
Ook wij vroegen ChatGPT onlangs om advies: Welke tips heeft ChatGPT voor een veiliger internet? Maar ChatGPT kan veel meer dan alleen teksten produceren. Met deze nieuwe tool kun je ook code genereren. We hebben dit eens getest aan de hand van een concreet voorbeeld, waarbij we ChatGPT vroegen of het de code voor een eenvoudige portfoliowebsite kon maken.
Stap 1: de basis
Dat ging zo:
Stel je voor dat je een ervaren front-end ontwikkelaar bent en ik vraag je een eenvoudige statische website voor me te maken?
Onze eerste vraag aan ChatGPT
Dit was het antwoord van ChatGPT:
Natuurlijk, ik help je graag met het maken van een eenvoudige statische website. Om te beginnen, zal ik eerst enkele vragen stellen om een idee te krijgen van wat voor soort website je wilt en wat je specifieke wensen zijn.
- Wat is het doel van de website en wat voor soort inhoud wil je op de site hebben?
- Heb je een voorkeur voor de lay-out en het ontwerp van de site? Zo ja, heb je al ideeën of voorbeelden om te delen?
- Moet de site responsive zijn, dus geschikt voor verschillende schermgroottes zoals mobiele telefoons en tablets?
- Heb je al inhoud zoals afbeeldingen, tekst en logo’s? Zo niet, moeten deze nog worden gemaakt of wil je dat ik ze voor je maak?
- Moet de site geoptimaliseerd zijn voor zoekmachines of voor sociale media?
Afhankelijk van jouw antwoorden op deze vragen, kan ik dan aan de slag gaan met het ontwerpen en bouwen van de website. Ik kan een eenvoudig ontwerp maken met behulp van HTML, CSS en eventueel JavaScript, en deze vervolgens uploaden naar een webhostingplatform, zodat de site online beschikbaar is voor het publiek.
Antwoord van ChatGPT op onze eerste vraag
Stap 2: de details
Om een bruikbaar antwoord te krijgen, is het essentieel dat je de vraag en je eisen exact en duidelijk formuleert. In ons voorbeeld stelden we de volgende vraag:
Ik heb een eenvoudige one-pager nodig waarop ik mijn diensten en recent werk als freelance schrijver kan presenteren. De website moet ook geoptimaliseerd zijn voor mobiele apparaten. De pagina moet bestaan uit vijf gedeelten. Het bovenste gedeelte, de header, zou linksboven mijn naam ‘Alexios Barnabas’ hebben, gevolgd door mijn functietitel ‘Freelance schrijver’. In de kop staan ook de links naar de afzonderlijke rubrieken: ‘Over mij’, ‘Publicaties’, ‘Contact’.
In de tweede hoofdrubriek (‘Over mij’), die daaronder volgt, komt een tekst (graag invullen met dummytekst) over mijn ervaring en diensten. Deze tekst bestaat uit een kop, 2 alinea’s en een opsomming.
In de derde hoofdrubriek (‘Publicaties’) noem je de laatste drie publicaties van mij. Dit bestaat uit een subkopje en een korte tekst.
Het vierde hoofdgedeelte (‘Contactgegevens’) bevat de contactgegevens.
Daaronder staat de footer met copyright en de links naar het colofon en privacybeleid.
De website moet responsive zijn, de kleur van het lettertype moet donkergrijs zijn, maar niet zwart. Gebruik het standaard lettertype van het systeem. De kleur van de links moet petrol zijn. De maximale breedte van de inhoud moet 960 pixels zijn.
Onze concrete eisen aan ChatGPT
Stap 3: de HTML-code
Dit is natuurlijk een vrij lange vraag. Maar het leverde wel een bruikbaar resultaat op, want ChatGPT gaf deze HTML-code als antwoord:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alexios Barnabas - Freelance schrijver</title>
<style>
/* CSS hier invoegen */
</style>
</head>
<body>
<header>
<h1>Alexios Barnabas</h1>
<nav>
<a href="#about">Over mij</a>
<a href="#publications">Publicaties</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="about">
<h2>Over mij</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget lectus vel sapien finibus facilisis. Etiam at mauris a purus tincidunt viverra. Nullam ultricies ligula eu odio blandit fringilla.</p>
<p>Donec fermentum massa eget leo mollis, vel gravida orci pulvinar. Fusce sollicitudin massa eget rhoncus dapibus. Sed condimentum, nulla a auctor consectetur, ipsum enim venenatis ipsum, vel pharetra orci tellus vel ipsum.</p>
<ul>
<li>Copywriting en SEO-geoptimaliseerde inhoud</li>
<li>Content voor social media</li>
<li>Content strategie voor corporate blogs</li>
</ul>
</section>
<section id="publications">
<h2>Publicaties</h2>
<ul>
<li>
<h3>Artikel 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget lectus vel sapien finibus facilisis.</p>
<p><a href="#">Meer info</a></p>
</li>
<li>
<h3>Artikel 2</h3>
<p>Etiam at mauris a purus tincidunt viverra. Nullam ultricies ligula eu odio blandit fringilla.</p>
<p><a href="#">Meer info</a></p>
</li>
<li>
<h3>Artikel 3</h3>
<p>Fusce sollicitudin massa eget rhoncus dapibus. Sed condimentum, nulla a auctor consectetur, ipsum enim venenatis ipsum, vel pharetra orci tellus vel ipsum.</p>
<p><a href="#">Meer info</a></p>
</li>
</ul>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Contacteer me per mail of telefonisch:</p>
<p>E-mail: <a href="mailto:alexios@barnabas.com">alexios@barnabas.com</a></p>
<p>Telefoon: +31 123 456789</p>
</section>
</main>
<footer>
<p>© 2023 Alexios Barnabas</p>
<nav>
<a href="#">Colofon</a>
<a href="#">Privacyverklaring</a>
</nav>
</footer>
</body>
</html>
Daarin zie je dat ChatGPT eigenlijk precies deed wat we vroegen: een eenvoudige website maken waarop een freelancer zich voorstelt. De site heeft drie secties: ‘Over mij’, ‘Publicaties’ en ‘Contact’, die onder elkaar zijn geplaatst. Interessant is ook dat ChatGPT in ons gesprek merkte dat we Nederlands spreken en meteen het juiste +31-telefoonnummer en de juiste taalinformatie in het html-document heeft gezet: <html lang=”nl”>.
Stap 4: de CSS-code voor de opmaak
Vervolgens vroegen we ChatGPT om ook de CSS-code te genereren. Daarbij kwam dit als resultaat:
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: #333333;
line-height: 1.5;
margin: 0;
padding: 0;
}
header {
background-color: #ffffff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
padding: 20px;
}
h1 {
font-size: 2rem;
margin: 0;
}
nav {
display: flex;
align-items: center;
}
nav a {
color: #00788a;
text-decoration: none;
margin-left: 20px;
}
main {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
section {
margin-bottom: 40px;
}
h2 {
font-size: 1.5rem;
margin-bottom: 20px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin-bottom: 10px;
}
a {
color: #00788a;
text-decoration: none;
}
footer {
background-color: #f7f7f7;
padding: 20px;
text-align: center;
}
Als je het eindresultaat in de browser bekijkt, zie je enerzijds dat de website er erg eenvoudig uitziet. Anderzijds is de site volledig functioneel en kun je hem zelf verder aanpassen aan je eisen.
Kom je niet verder? Vraag ChatGPT om hulp
ChatGPT is niet alleen interessant om code te genereren. Je kunt de chatbot ook vragen om de code uit te leggen. Bijvoorbeeld zo:
Kun je me uitleggen wat <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /> is en waar het voor dient?
Vraag ChatGPT om uitleg bij de code
Je krijgt dan dit antwoord:
Ja, natuurlijk! De meta tag <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /> is een belangrijke tag die wordt gebruikt bij het ontwikkelen van responsive websites. Het biedt instructies aan de browser over hoe de webpagina moet worden weergegeven op verschillende apparaten en schermgroottes.
De width=device-width instructie zorgt ervoor dat de breedte van de viewport gelijk is aan de breedte van het apparaat waarop de pagina wordt weergegeven. Dit betekent dat de breedte van de pagina zich aanpast aan de breedte van het apparaat, zodat de inhoud niet buiten het scherm valt.
De initial-scale=1.0 instructie stelt het initiële zoomniveau van de pagina in. Een waarde van 1.0 betekent dat de pagina op 100% grootte wordt weergegeven wanneer deze voor het eerst wordt geladen.
Kortom, de <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /> tag zorgt ervoor dat de website optimaal wordt weergegeven op verschillende apparaten en schermgroottes, waardoor de gebruikerservaring wordt verbeterd. Het is een belangrijke tag om te gebruiken bij het ontwikkelen van een responsive website.
Het antwoord van ChatGPT
Je kunt ChatGPT dus als studiehulp gebruiken.
Samenvatting: ChatGPT als websitegenerator
Zoals je in dit eenvoudige voorbeeld ziet, geeft ChatGPT vrij goede resultaten. Maar het werkt alleen als je van tevoren precies weet wat je nodig hebt en waarop je moet letten. Je moet dus nauwkeurige, doelgerichte vragen stellen. Wat dat betreft is het als met elk ander gereedschap: je bereikt pas bruikbare resultaten als je er ervaring mee hebt.
Maar als hulpmiddel voor het begrijpen van de code merk je al vroeg de toegevoegde waarde. ChatGPT helpt je om dingen beter te begrijpen.
Hoe dan ook blijft het belangrijk om ChatGPT niet blindelings te vertrouwen. Controleer de resultaten van deze tool dus regelmatig, bijvoorbeeld door ook via een zoekmachine antwoorden op je vragen te zoeken en de uitkomsten te vergelijken.
Ben je nog op zoek naar geschikte hosting voor jouw project?
Naar de STRATO hostingpakketten
Vladimir Simović
Vladimir Simović setzt seit 2000 mit HTML & CSS und seit 2004 mit WordPress Website-Projekte um. Seit Januar 2004 hat er als einer der ersten Blogger im deutschsprachigen Raum zu den WordPress Anfängen Tipps und Tricks veröffentlicht. Seit April 2022 ist er als Redakteur für den Blog-Bereich von STRATO verantwortlich und verfasst Informationsartikel insbesondere zu WordPress Themen. Im Laufe der Jahre hat er Fachbücher sowie über 60 Fachartikel publiziert und weit über hundert WordPress Projekte betreut und umgesetzt. Aktuell beschäftigt er sich mit dem Einsatz von KI im Content-Marketing.
Benemortasia zei op
Goed artikel, helemaal mee eens.
Het werkt ontzettend goed zolang het gesprek niet te lang wordt.
ChatGPT maakt op een gegeven moment ruimte vrij door oude context te vergeten.
Met een paar truukjes aan het begin van een gesprek en bij een vraag kun je veel verder komen tot het punt dat het lukte om flask een folder/file structuur van een Flask web app te geven, de bedoeling, en praktisch klaar en functioneerende code voor elke file in het project te laten schrijven.
In je Stap2 voorbeeld, als je hier de “opmaak” iets veranderd, zal ChatGPT de verzoeken beter verwerken. Dit door simpelweg een “opsomming” stijl te gebruiken met bijvoorbeeld – of #.
Bijvoorbeeld als je het zo vraagt (Stap 2)
__________________________________________________________________________________________________
Ik heb een eenvoudige one-pager nodig waarop ik mijn diensten en recent werk als freelance schrijver kan presenteren. De website moet ook geoptimaliseerd zijn voor mobiele apparaten. De pagina moet bestaan uit vijf gedeelten:
# Het bovenste gedeelte, de header, zou linksboven mijn naam ‘Alexios Barnabas’ hebben, gevolgd door mijn functietitel ‘Freelance schrijver’. In de kop staan ook de links naar de afzonderlijke rubrieken: ‘Over mij’, ‘Publicaties’, ‘Contact’.
# In de tweede hoofdrubriek (‘Over mij’), die daaronder volgt, komt een tekst (graag invullen met dummytekst) over mijn ervaring en diensten. Deze tekst bestaat uit een kop, 2 alinea’s en een opsomming.
# In de derde hoofdrubriek (‘Publicaties’) noem je de laatste drie publicaties van mij. Dit bestaat uit een subkopje en een korte tekst.
# Het vierde hoofdgedeelte (‘Contactgegevens’) bevat de contactgegevens.
Daaronder staat de footer met copyright en de links naar het colofon en privacybeleid.
# De website moet responsive zijn, de kleur van het lettertype moet donkergrijs zijn, maar niet zwart. Gebruik het standaard lettertype van het systeem. De kleur van de links moet petrol zijn. De maximale breedte van de inhoud moet 960 pixels zijn.
(zie complex instructions: https://learn.microsoft.com/en-us/azure/cognitive-services/openai/concepts/prompt-engineering#instructions )
__________________________________________________________________________________________________
De tweede tip die ontzettend sterk is, is ChatGPT aan het begin van een nieuw gesprek hem voor te bereiden op een lang gesprek met veel lange code examples. Dit kan ik het beste uitleggen door het begin van een lang gesprek te laten zien wat een compleet python flask webapplication project file voor file aanlevert.
Q = mijn vraag
A = antwoord ChatGPT
NOTE: Voor exact hetzelfde effect kopieer de eerste 2 vragen exact, dus geen nieuwe regel of enter ergens. Dit veranderd de reactie namelijk. Deze exacte vragen geven telkens hetzelfde gewenste effect.
__________________________________________________________________________________________________
Q:
When i implicitly state that I want you to remember everything we said, for as long as the conversation is still open in my browser. I need you to be able to remember everything we are goin to talk about now because i will give you multiple questions and code questions where you cannot help me if you do not remember this whole conversation
—-
A:
As an AI language model, I am capable of retaining information for as long as the conversation is open in your browser, provided that you do not clear your browsing data or close the window. However, please note that my memory capacity is not unlimited, and there may be instances where I may not be able to remember every single detail of our conversation, particularly if the conversation is very long or if there are significant time gaps between our interactions.
That being said, I will do my best to remember our previous conversations and help you with any questions or coding problems that you may have. Please feel free to ask me anything and I will do my best to provide you with accurate and helpful responses.
—
Q:
When you give a reply that is important and needed, i will tell you to prioritize them higher to keep in memory above code that i didnt tell you to give a higher priority. Also you always give the code in your responses priority over your explanation, because i can give that to you, but i cannot figure out what code your would have given if you didnt stop the reply short.
Are you ready to go through my flask web application im building using Twitter OAuth1.0a (3legged) user authentication flow, and Oauth2.0PKCE authorization flow that user can complete to add all the oauth1.0a tokens and Oauth2.0 with PCKE tokens into a database to make requests on behalf of them.
We are now going to write python that will be able to use the tokens to make requests on behalf of users
—
A:
Yes, I am ready to assist you with your Flask web application and OAuth implementation. Please feel free to ask any questions or provide any additional information that you need to help me understand your project better.
To clarify, when you ask me to prioritize certain information or code, please let me know explicitly which parts you would like me to remember better. Additionally, when I provide you with code snippets, please let me know if you need any explanations or additional information to help you understand how the code works.
Let’s proceed with writing Python code that will use the OAuth tokens to make requests on behalf of users. Please let me know if you have any specific questions or if you need guidance on how to implement this functionality.
—
Q:
Im am going to give you my code for the oauth1a.py file containing routes.
Im telling you explicitly to remember this complete script code:
import oauth2 as oauth
import urllib.request
import urllib.error
import urllib.parse
import json
from flask import Flask, Blueprint, render_template, request, url_for
from sqlalchemy.exc import IntegrityError
from flask_login import current_user
from datetime import datetime
from .models import db, OAuth10a
request_token_url = ‘https://api.twitter.com/oauth/request_token’
access_token_url = ‘https://api.twitter.com/oauth/access_token’
…
.
..
…
En zo het gesprek verder.
__________________________________________________________________________________________________
Jorrit van der Heide zei op
Hi Benemortasia,
Bedankt voor deze tips en de link naar de instructies. Als het gaat om een programmeertaak, is het inderdaad essentieel dat ChatGPT zich uitsluitend houdt aan de gegeven input en geen zaken “vergeet” of vervangt. Over het algemeen werkt dat echter heel behoorlijk.
Hartelijke groet,
Jorrit