Filip - CodeRocketFilip
User profile
Latest components
contact.html
<!DOCTYPE html>
<html lang="nl" data-theme="business">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact - Kaya Brankjanner</title>
<meta name="description" content="Neem contact op met Kaya Brankjanner voor samenwerkingen of vragen.">
<link href="https://cdn.jsdelivr.net/npm/daisyui@latest/dist/full.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="bg-base-200 min-h-screen flex flex-col">
<!-- Sticky Header -->
<header class="sticky top-0 z-50 bg-base-100 shadow-md">
<div class="navbar container mx-auto">
<div class="navbar-start">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<!-- Hamburger menu icon van w3.org -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
</svg>
</div>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
<li><a href="index.html">Over Mij</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
</ul>
</div>
<img src="images/Group 1.svg" alt="Kaya Brankjanner Logo" class="h-8 mr-2">
<a class="btn btn-ghost text-xl">Contact</a>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<li><a href="index.html">Over Mij</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
</ul>
</div>
</div>
</header>
<main class="flex-grow container mx-auto px-4 py-8">
<div class="card w-full max-w-md mx-auto bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-center">Neem Contact Op</h2>
<form action="mailto:info@bleizovitz.nl" method="get" enctype="text/plain">
<div class="form-control">
<label class="label" for="naam">
<span class="label-text">Naam</span>
</label>
<input type="text" id="naam" name="naam" placeholder="Uw naam" class="input input-bordered" required />
</div>
<div class="form-control">
<label class="label" for="email">
<span class="label-text">E-mail</span>
</label>
<input type="email" id="email" name="email" placeholder="Uw e-mailadres" class="input input-bordered" required />
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Uw bericht</span>
</label>
<textarea name="bericht" class="textarea textarea-bordered h-24" placeholder="Typ uw bericht hier" required></textarea>
</div>
<div class="form-control mt-6">
<button type="submit" class="btn btn-primary">Verzenden</button>
<button type="reset" class="btn btn-ghost mt-2">Formulier leegmaken</button>
</div>
</form>
</div>
</div>
</main>
<!-- Sticky Footer -->
<footer class="footer footer-center p-4 bg-base-300 text-base-content sticky bottom-0">
<aside>
<p>© 2024 Kaya Brankjanner - Alle rechten voorbehouden</p>
</aside>
</footer>
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="nl" data-theme="business">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kaya Brankjanner - Multimedia Kunstenaar</title>
<meta name="description" content="Portfolio van Kaya Brankjanner, een multimedia kunstenaar gespecialiseerd in innovatieve kunst die technologie en traditie combineert.">
<link href="https://cdn.jsdelivr.net/npm/daisyui@latest/dist/full.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="bg-base-200 min-h-screen flex flex-col">
<!-- Sticky Header -->
<header class="sticky top-0 z-50 bg-base-100 shadow-md">
<div class="navbar container mx-auto">
<div class="navbar-start">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<!-- Hamburger menu icon van w3.org -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
</div>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<img src="images/Group 1.svg" alt="Kaya Brankjanner Logo" class="h-8 mr-2">
<a class="btn btn-ghost text-xl">Over Mij</a>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</header>
<main class="flex-grow container mx-auto px-4 py-8">
<div class="grid md:grid-cols-2 gap-8 items-center">
<div class="prose max-w-prose">
<h1 class="text-3xl font-bold mb-4">Hallo, ik ben Kaya Brankjanner</h1>
<p>Als multimedia kunstenaar uit Delft verken ik de grenzen tussen kunst, technologie en menselijke ervaring. Mijn werk is een reis door kleuren, patronen en verhalen die voortkomen uit mijn rijke achtergrond.</p>
<h2 class="text-2xl mt-6">Missie</h2>
<p>Ik streef ernaar kunst te creëren die mensen uitdaagt om de wereld vanuit een nieuw perspectief te bekijken. Door traditionele kunstvormen te combineren met moderne digitale technieken, vertel ik verhalen die raken en inspireren.</p>
<div class="mt-6 flex space-x-4">
<a href="portfolio.html" class="btn btn-secondary">Bekijk Portfolio</a>
<a href="contact.html" class="skeleton btn btn-outline">Neem Contact Op</a>
</div>
</div>
<div class="flex justify-center">
<img src="images/portret.jpg" alt="Portret van Kaya Brankjanner" class="rounded-lg shadow-2xl max-w-full h-auto">
</div>
</div>
</main>
<!-- Sticky Footer -->
<footer class="footer footer-center p-4 bg-base-300 text-base-content sticky bottom-0">
<aside>
<p>© 2024 Kaya Brankjanner - Alle rechten voorbehouden</p>
</aside>
</footer>
</body>
</html>
portfolio.html
<!DOCTYPE html>
<html lang="nl" data-theme="business">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio - Kaya Brankjanner</title>
<meta name="description" content="Portfolio van kunstwerken door Kaya Brankjanner, een multimedia kunstenaar.">
<link href="https://cdn.jsdelivr.net/npm/daisyui@latest/dist/full.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<script src="js/portfolio.js"></script>
</head>
<body class="bg-base-200 min-h-screen flex flex-col">
<!-- Sticky Header -->
<header class="sticky top-0 z-50 bg-base-100 shadow-md">
<div class="navbar container mx-auto">
<div class="navbar-start">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<!-- Hamburger menu icon van w3.org -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
</svg>
</div>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
<li><a href="index.html">Over Mij</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<img src="images/Group 1.svg" alt="Kaya Brankjanner Logo" class="h-8 mr-2">
<a class="btn btn-ghost text-xl">Portfolio</a>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<li><a href="index.html">Over Mij</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</header>
<!-- Main Content: Portfolio Slideshow -->
<main class="flex-grow container mx-auto px-4 py-8 flex items-center justify-center">
<div class="portfolio-slideshow w-full max-w-4xl">
<div class="relative">
<!-- Grote Afbeelding -->
<div id="mainImage" class="w-full aspect-video bg-cover bg-center rounded-xl shadow-2xl"
style="background-image: url('images/artwork_1.jpeg')">
<!-- Overlay met titel -->
<div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-4">
<h2 id="imageTitle" class="text-2xl font-bold text-center">The Wall</h2>
</div>
</div>
<!-- Navigatie Pijlen -->
<button id="prevBtn" class="absolute left-4 top-1/2 transform -translate-y-1/2 btn btn-circle btn-primary btn-lg shadow-xl">
<i class="fas fa-chevron-left text-2xl"></i>
</button>
<button id="nextBtn" class="absolute right-4 top-1/2 transform -translate-y-1/2 btn btn-circle btn-primary btn-lg shadow-xl">
<i class="fas fa-chevron-right text-2xl"></i>
</button>
</div>
<!-- Thumbnail Indicatoren -->
<div class="flex justify-center mt-4 space-x-2">
<div id="thumbnails" class="flex space-x-2">
<div class="w-16 h-16 bg-cover bg-center rounded-md opacity-50 cursor-pointer active"
data-image="images/artwork_1.jpeg"
data-title="The Wall"
style="background-image: url('images/artwork_1.jpeg')"></div>
<div class="w-16 h-16 bg-cover bg-center rounded-md opacity-50 cursor-pointer"
data-image="images/artwork_2.jpeg"
data-title="Helicopter View"
style="background-image: url('images/artwork_2.jpeg')"></div>
<div class="w-16 h-16 bg-cover bg-center rounded-md opacity-50 cursor-pointer"
data-image="images/artwork_3.jpeg"
data-title="Planeten"
style="background-image: url('images/artwork_3.jpeg')"></div>
<div class="w-16 h-16 bg-cover bg-center rounded-md opacity-50 cursor-pointer"
data-image="images/artwork_4.jpeg"
data-title="Vrije Inspiratie"
style="background-image: url('images/artwork_4.jpeg')"></div>
</div>
</div>
</div>
</main>
<!-- Sticky Footer -->
<footer class="footer footer-center p-4 bg-base-300 text-base-content sticky bottom-0">
<aside>
<p>© 2024 Kaya Brankjanner - Alle rechten voorbehouden</p>
</aside>
</footer>
</body>
</html>
portfolio.js
document.addEventListener('DOMContentLoaded', () => {
const mainImage = document.getElementById('mainImage');
const imageTitle = document.getElementById('imageTitle');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const thumbnails = document.querySelectorAll('#thumbnails > div');
let currentIndex = 0;
const images = Array.from(thumbnails).map(thumb => ({
src: thumb.dataset.image,
title: thumb.dataset.title
}));
function updateImage(index) {
// Update main image
mainImage.style.backgroundImage = `url('${images[index].src}')`;
imageTitle.textContent = images[index].title;
// Update thumbnail active state
thumbnails.forEach((thumb, i) => {
thumb.classList.toggle('opacity-100', i === index);
thumb.classList.toggle('opacity-50', i !== index);
});
}
// Next Button
nextBtn.addEventListener('click', () => {
currentIndex = (currentIndex + 1) % images.length;
updateImage(currentIndex);
});
// Previous Button
prevBtn.addEventListener('click', () => {
currentIndex = (currentIndex - 1 + images.length) % images.length;
updateImage(currentIndex);
});
// Thumbnail Click
thumbnails.forEach((thumb, index) => {
thumb.addEventListener('click', () => {
currentIndex = index;
updateImage(currentIndex);
});
});
});
change the layout of overmij.html make it more interactive and add some things that fit for a portfolio website
portfolio.html
<!DOCTYPE html>
<html>
<head>
<title>PORTFOLIO</title>
</head>
<body>
<div width=100%>
<a href="index.html">OVER MIJ</a> -
<a href="contact.html">CONTACT</a>
</div>
<h2>Mij Werken</h2>
<img src="images/artwork_1.jpeg" /><br/> The Wall<br/>
<img src="images/artwork_2.jpeg" /><br/> Helicopter View<br/>
<img src="images/artwork_3.jpeg" /><br/> Planeten<br/>
<img src="images/artwork_4.jpeg" /><br/> Vrije Inspiratie<br/>
</body>
</html>
index.html
<!DOCTYPE html>
<html>
<head>
<title>Over Mij</title>
</head>
<body>
<div width=100%>
<a href="portfolio.html">PORTFOLIO</a> -
<a href="contact.html">CONTACT</a>
</div>
<h2>Hallo, ik ben Kaya Brankjanner</h2>
<img src="images/portret.jpg" style="float:right" />
<p>Over de Kunstenaar
Welkom op mijn website! Ik ben een gepassioneerde multimedia kunstenaar, geboren en opgegroeid in het schilderachtige Delft. De levendige kleuren, patronen en verhalen uit mijn jeugd hebben een blijvende indruk op mij achtergelaten en vormen nog steeds een belangrijke bron van inspiratie in mijn werk.
Als kunstenaar laat ik mij inspireren door de interactie tussen mens en technologie, de kracht van natuur en de dynamiek van stedelijke landschappen. Ik ben gefascineerd door hoe traditionele kunstvormen kunnen samensmelten met moderne digitale technieken om unieke ervaringen te creëren. Muziek, literatuur en de constante evolutie van technologie spelen ook een grote rol in mijn creatieve proces.
<h3>Missie</h3>
Met mijn kunst wil ik verhalen vertellen die mensen aan het denken zetten en hen uitnodigen om de wereld om hen heen op een nieuwe manier te zien. Ik streef ernaar een verbinding te creëren tussen traditie en innovatie, en hoop daarmee een emotionele snaar te raken bij iedereen die mijn werk ervaart.<br/>
Neem gerust een kijkje in mijn <a href="portfolio.html">portfolio</a> of neem <a href="contact.html">contact</a> met mij op voor samenwerkingen of vragen. Ik kijk ernaar uit om mijn visie met je te delen!
</p>
</body>
</html>
contact.html
<!DOCTYPE html>
<html>
<head>
<title>Galerij</title>
</head>
<body>
<div width=100%>
<a href="index.html">OVER MIJ</a> -
<a href="portfolio.html">PORTFOLIO</a>
</div>
<h2>Contact</h2>
<form action="mailto:info@bleizovitz.nl" method="get" enctype="text/plain">
<div>
<label for="name">Naam:
<input type="text" name="naam" id="naam" />
</label>
</div>
<div>
<label for="email">E-mail:
<input type="text" name="email" id="email" />
</label>
</div>
<div>
<label>Uw bericht:</label>
<br />
<textarea name="bericht" rows="12" cols="35">Stuur uw reactie.</textarea>
</div>
<div>
<input type="submit" name="submit" value="Verzenden" />
<input type="reset" name="reset" value="Formulier leegmaken" />
</div>
</form>
</body>
</html>
De klant wil een website die zowel op grote schermen als op mobiele apparaten goed functioneert en goed zichtbaar is. Dit betekent dat de website flexibel en aanpasbaar moet zijn voor verschillende schermformaten.
Voor de portfolio heeft de klant een slideshow-functionaliteit waarbij steeds één werk wordt getoond, en bezoekers kunnen navigeren door afbeeldingen met behulp van pijltjesknoppen. Dit biedt een gebruiksvriendelijke manier om het werk te presenteren zonder de pagina te voltooien met meerdere afbeeldingen.
Verder wil de klant dat de website goed vindbaar is op zoekmachines, dus er moet rekening worden gehouden met zoekmachineoptimalisatie (SEO). Dit zorgt ervoor dat de website beter scoort in zoekresultaten, wat helpt om meer bezoekers te trekken.
Tot slot hoeft de website geen geavanceerde functionaliteit te bevatten, zoals een database voor opslaan van gegevens, maar moet er wel een simpel contactformulier zijn dat de ingevulde gegevens via e-mail kan versturen zonder dat deze worden opgeslagen op de server.
galerij.html
<!DOCTYPE html>
<html>
<head>
<title>Galerij</title>
</head>
<body>
<div width=100%>
<a href="index.html">OVER MIJ</a> -
<a href="contact.html">CONTACT</a>
</div>
<h2>Galerij</h2>
<img src="images/foto1.jpg"/><br/>
Een beeld<br/>
<img src="images/foto2.jpg"/><br/>
Man op motorfiets<br/>
<img src="images/foto3.jpg"/><br/>
Maan boven bomen<br/>
<img src="images/foto4.jpg"/><br/>
Gebouw<br/>
</body>
</html>
index.html
<!DOCTYPE html>
<html>
<head>
<title>Over Mij</title>
</head>
<body>
<div width=100%>
<a href="galerij.html">GALERIJ</a> -
<a href="contact.html">CONTACT</a>
</div>
<h2>Hallo, ik ben Hannie Bleizovitz</h2>
<img src="images/portret.jpg" style="float:right"/>
<p>Ik volg een opleiding aan de Fotovakschool Rotterdam. In mijn vrije tijd fotografeer ik ook graag, en via deze website wil ik u een aantal van mijn foto's tonen.<br/>
Om mijn portfolio verder uit te breiden kom ik graag bij u langs om uw evenement, bijvoorbeeld uw builoft, vast te leggen in een mooie fotoreportage.<br/>
Op de pagina met de <a href="galerij.html">galerij</a> vindt u een aantal voorbeelden van mijn foto's.<br/><br/>
Op de <a href="contact.html">contactpagina</a> vindt u meer informatie over hoe u contact met mij kunt opnemen.<br/>
</p>
</body>
</html>
contact.html
<!DOCTYPE html>
<html>
<head>
<title>Galerij</title>
</head>
<body>
<div width=100%>
<a href="index.html">OVER MIJ</a> -
<a href="galerij.html">GALERIJ</a>
</div>
<h2>Contact</h2>
<form action="mailto:info@bleizovitz.nl" method="get" enctype="text/plain">
<div>
<label for="name">Naam:
<input type="text" name="naam" id="naam" />
</label>
</div>
<div>
<label for="email">E-mail:
<input type="text" name="email" id="email" />
</label>
</div>
<div>
<label>Uw bericht:</label>
<br />
<textarea name="bericht" rows="12" cols="35">Stuur uw reactie.</textarea>
</div>
<div>
<input type="submit" name="submit" value="Verzenden" />
<input type="reset" name="reset" value="Formulier leegmaken" />
</div>
</form>
</body>
</html>
Fix these three pages, make tailwind css for this in order for it to be beautiful.
De omschrijving van het werkproces is als volgt:
De beginnend beroepsbeoefenaar vertaalt de klantwens ten aanzien van de gebruikerservaring
naar technische oplossingen voor de frontend. Hij kiest de juiste frameworks. Hij stelt de
ontwikkelomgeving vast en maakt een stylesheet. Vervolgens programmeert hij de
functionaliteiten mbt de frontend en stemt daarbij eventueel af met de backend developer. Hij
test de gebruikerservaring van de frontend en functionaliteit en doet eventueel aanpassingen.
Uiteindelijk wordt het volgende opgeleverd als resultaat:
Een werkende hoofdstructuur van de frontend dat aansluit bij de gebruikerservaring
De volgende taken worden hiervoor uitgevoerd; dit wordt ook wel gedrag genoemd:
• Stemt tijdig af met betrokkenen (zoals klanten, backend developers en eventueel
leidinggevende) over de frontend oplossingen.
• Kiest op basis van technisch inzicht, de klantwensen en de gebruikerservaringen de meest
passende frontend technieken, frameworks en programmeertalen ten behoeve van de basis
structuur van de frontend.
• Hanteert de programmacodes op de voorgeschreven wijze.
• Achterhaalt zorgvuldig en systematisch de wensen van de klant en de ervaringen van de
gebruikers ten aanzien van de frontend.
UITVOERING
Om bovenstaande criteria (taken) te bewijzen ga je de volgende opdracht(-en) uitvoeren
1. Lees de opdracht goed en maak een samenvatting: wat wil de klant precies?
Leg dit allemaal vast in een verslag
2. Mocht je die nog niet hebben gekregen dan kan je de structuur van pagina’s vastleggen in
een wireframe.
In leerjaar 1 heb je al een keer wireframes moeten maken. Kijk anders op internet hoe je
dit het beste kan doen; bijvoorbeeld op https://balsamiq.com/learn/articles/#/
3. Bepaal welke technieken je gaat gebruiken.
Daarvoor zal je ook onderzoek moeten doen: welke technieken kan je gebruiken om aan
de eisen van de klant te voldoen?
Kijk eens op internet; bijvoorbeeld
a. https://www.netguru.com/blog/front-end-technologies
b. Of zoek bv naar “frontend techniques”
c. (En kijk alvast bij ‘D1-K1-W2’)
d. Ook de gebruikte technieken zet je in het verslag. Geef daarbij ook goed aan
waarom je die technieken gaat gebruiken.
4. Maak de basisstructuur
Zorg dat alle css, indien mogelijk, in één apart css-bestand staat en geen css in de html-
Keuzedeel Frontend Development, voorbereiding examen
4
pagina’s. Hetzelfde geldt voor de js die je gebruikt.
Maak een goede mappenstructuur waarin je alle bestanden zet.
D1-K1-W2: MAAKT EEN USER INTERFACE RESPONSIVE
De omschrijving van het werkproces is als volgt:
De beginnend beroepsbeoefenaar stelt vast op welke devices de applicatie zal draaien. Hij past
de gehele frontend hierop aan. Hij test de responsiviteit van de interface en verbetert eventueel
de responsiviteit.
Uiteindelijk wordt het volgende opgeleverd als resultaat:
De user interface is geschikt voor gewenste devices
De volgende taken worden hiervoor uitgevoerd; dit wordt ook wel gedrag genoemd:
• Stelt op basis van klantwensen en gebruikerservaring de meest gebruikte devices vast.
• Kiest de meest geschikte technieken voor de gewenste devices en voor een zo optimaal
mogelijk functionerende applicatie.
• Hanteert de codes voor de userinterface volgens de voorgeschreven wijze.
• Voert systematisch en efficiënt tests uit om de responsiviteit te meten.
UITVOERING
Om bovenstaande criteria (taken) te bewijzen ga je de volgende opdracht(-en) uitvoeren
1. Bepaal voor welke devices de website gemaakt moet worden en leg dit vast.
Leg ook vast welke technieken je daarvoor gaat gebruiken
=> In principe heb je dit al gedaan bij het vorige werkproces.
2. Test van tevoren de website op responsiviteit.
Leg de (uitkomsten van de) test vast
3. Verbeter de responsiviteit van de website
4. Zorg ervoor dat je netjes programmeert:
Houd css, js en html apart,
Gebruik logische namen voor de html-elementen (zoals divs),
Gebruik de juiste elementen voor de content (header, h1, nav, main, …),
Spring in om de code overzichtelijk te houden
5. Test of de responsiviteit is verbeterd
Leg de (uitkomsten van de) test vast
De omschrijving van het werkproces is als volgt:
De beginnend beroepsbeoefenaar bepaalt de specifieke eigenschappen van de doelgroep en van
de zoekmachines. Hij onderzoekt de vindbaarheid van de webapplicatie. Vervolgens
optimaliseert hij de code van de applicatie. Hij adviseert de klant de klant over de vindbaarheid
van applicatie..
Uiteindelijk wordt het volgende opgeleverd als resultaat:
Een optimaal vindbare applicatie voor de doelgroep
De volgende taken worden hiervoor uitgevoerd; dit wordt ook wel gedrag genoemd:
• Past de relevante tools toe om de vindbaarheid te meten.
• Hanteert de voorschreven programmacodes zorgvuldig en volgt de aanwijzingen van de
relevante zoekmachines nauwgezet op.
Keuzedeel Frontend Development, voorbereiding examen
6
• Is vindingrijk in het optimaliseren van de vindbaarheid en komt daarbij met creatieve en
realiseerbare oplossingen.
• Komt met een goed beargumenteerd en op de klant toegesneden advies ten aanzien van de
vindbaarheid van webapplicatie..
UITVOERING
Om bovenstaande criteria (taken) te bewijzen ga je de volgende opdracht(-en) uitvoeren
1. Test de bestaande website op vindbaarheid. Voer een SEO-test uit.
Leg de (uitkomsten van) de test vast.
2. Verbeter de vindbaarheid
Pas jouw code aan, voeg META-tags toe, ……. (Zie “extra informatie”)
Geef in je verslag duidelijk aan wat je hebt gedaan om de vindbaarheid te verbeteren
3. Test opnieuw op SEO en leg ook deze uitkomsten vast.
Laat zien dat de vindbaarheid is verbeterd.
4. Geef de klant tips om de zoekbaarheid van de website verder te verbeteren.
