Studiedag Tech Campus Website Maken
Workshop website maken
Onderdelen in deze les
Workshop website maken
Kennismaking
Wie ben je?
Wat zijn je verwachtingen?
Programma
Kennismaking
Wat weten jullie over web development? (10 min)
Deel A → Zelf een website maken (30 min)
Deel B → Website maken met AI (20 min)
Vraag
Wat gebeurt er volgens jouw als je een web-adres intypt?
De route van het web
Laptop
rocmn.nl
AP
Laptop
De route van het web
Access Point
draadloos via Wi-Fi
AP
Laptop
De route van het web
Modem
Voorziet het gebouw van internet
AP
Modem
DNS
Laptop
De route van het web
Domain Name System
Telefoonboek voor domeinnamen
rocmn.nl -> 86.105.246.112
AP
DNS
Server
Laptop
De route van het web
Modem
Webservers van het ROCMN
AP
Modem
DNS
Server
Laptop
De route van het web
Stuurt de HTML-pagina terug naar ons modem
AP
Modem
DNS
Server
Laptop
De route van het web
Terug naar het access point
AP
Modem
DNS
Server
Laptop
De route van het web
Terug naar onze laptop
AP
Modem
DNS
Server
Laptop
De route van het web
Onze webbrowser verwerkt de HTML, CSS & JavaScript oftewel, de website
De 3 benodigdheden
HTML
Browser
(Web) server
De 3 benodigdheden: HTML
HyperText Markup Language
Structuur van een website
Gebruikt CSS voor opmaak (visueel)
Gebruikt JavaScript voor interactie
De 3 benodigdheden: server
Een computer waarop één of meerdere websites staan (host).
Staat vaak in een datacenter
De 3 benodigdheden: browser
Kan websites opvragen van een server
Zet HTML, CSS en JavaScript om van structuur naar iets visueels
Webdevelopment
3 verschillende talen
HTML → structuur
CSS → opmaak
JavaScript → interactie
Deel A: zelf een website maken
Simpele webpagina over jezelf
Deel A: zelf een website maken
Laptop met Visual Studio Code
Web browser voor het visualiseren van HTML
Terminal (windows zoeken: terminal)
Neem de volgende commands over in Terminal
Deel B: Website door AI
Snel websites neerzetten met ChatGPT of Copilot
Prompt: Maak een nieuwe website voor het sinterklaasjournaal met bootstrap 5.
Workshop deel B: Website door AI
Opdracht: laat door AI een nieuwe website maken voor jouw opleiding/vakgebied/afdeling.
Tip: geef de AI instructie om gebruik te maken van Bootstrap 5
Workshop deel B: Website door AI
Wie wil zijn/haar webpagina laten zien?
Nadeel van AI websites
Beperkte originaliteit en generieke ontwerpen
Beperkte mogelijkheden voor maatwerk en complexe functionaliteit
Soms inefficiënte of slecht onderhoudbare code
Minder controle over details en aanpassingen
Potentiële beveiligingsrisico’s
Samenvatting
Jullie hebben een eigen webpagina gebouwd en aangepast.
Jullie hebben gezien dat je zonder technische voorkennis toch snel iets kunt maken dat 'werkt'.
Afsluiting
Wil je je website toegestuurd krijgen? Laat dan je e-mailadres achter in Visual Studio Code
