Opdrachten

Opdracht: maak kennis met je site

1. Log in op je eigen site via /wp-login.php en zet het adres van je beheer bij je bladwijzers.
2. Vul in je profiel je voor- en achternaam in en kies bij “Weergave naam publiekelijk tonen als” je echte naam. Klik op Profiel bijwerken.
3. Open via het blok “Cursus” op het dashboard de cursussite.
4. Bekijk de voorkant van je site via de sitenaam → Website bezoeken. Open daarna je site in een privévenster en vergelijk: wat is er anders?
5. Ga met je muis over elk item van het linkermenu en noteer voor jezelf drie onderdelen die je nog niet kende.

Opdracht: leg de basis van je eigen site

Kies een onderwerp voor je site (je eigen bedrijfje, een vereniging, een fictieve zaak zoals de bakkerij) en doe het volgende:

1. Stel bij Instellingen → Algemeen een passende websitetitel en slogan in en controleer of de tijdzone op Brussel staat.
2. Maak vier pagina’s aan: Home, Over ons, Contact en Blog. Publiceer ze (ook al zijn ze nog leeg).
3. Stel bij Instellingen → Lezen Home in als homepage en Blog als berichtenpagina.
4. Zet de reacties op nieuwe berichten uit.
5. Hernoem de categorie “Uncategorized” naar “Nieuws” en maak er nog één categorie bij.
6. Verklein drie eigen foto’s tot maximaal 1920 pixels breed en onder 300 KB, geef ze een zinnige bestandsnaam en upload ze. Vul bij elke foto een alt-tekst in.
7. Schrijf twee blogberichten in de klassieke editor, elk met minstens één tussentitel (Koptekst 2), een link, een afbeelding in de tekst, een categorie, twee tags en een uitgelichte afbeelding.
8. Maak een menu met je vier pagina’s in een logische volgorde en sla het op. Controleer later, wanneer je je header bouwt, of de menuwidget dit menu toont.
9. Verplaats een testbericht naar de prullenmand en herstel het daarna.

Bouw je eigen oefenpagina en daarna je homepagina.

1. Maak een nieuwe pagina Oefenpagina Elementor en open ze met Elementor. Laat ze als concept staan.
2. Voeg een container toe met de structuur twee gelijke kolommen. Zet links een Afbeelding en rechts een Koptekst, een Teksteditor en een Knop.
3. Geef de container een achtergrondkleur en een padding van 60 px boven en onder.
4. Voeg eronder een container toe met drie Afbeeldingsvakken naast elkaar. Maak er eerst één helemaal af en dupliceer hem twee keer.
5. Voeg een container met drie Tellers toe en experimenteer met Richting, Inhoud uitlijnen en Ruimtes.
6. Bekijk alles in de Mobiel-weergave. Pas minstens één instelling enkel voor gsm aan (bijvoorbeeld een kleinere titel) en verberg één element op gsm. Controleer met Voorbeeld wijzigingen.
7. Verwijder een widget, en zet hem terug via Geschiedenis → Acties.
8. Sla op als concept. Pas daarna wat je geleerd hebt toe op je echte homepagina en publiceer die.

Maak de huisstijl van je eigen site.

1. Bedenk waar je site over gaat en welke sfeer ze moet uitstralen. Schrijf drie sleutelwoorden op (bijvoorbeeld warm, ambachtelijk, vertrouwd).
2. Stel op coolors.co een palet samen van vier à zes kleuren: primair, secundair, accent, tekst en een of twee neutrale achtergrondkleuren. Noteer de hexcodes.
3. Controleer met de WebAIM Contrast Checker minstens: je tekstkleur op je achtergrond, en witte tekst op je accentkleur (je knoppen). Haal je geen 4.5:1? Pas de kleur aan.
4. Kies op fonts.google.com twee lettertypes: één voor titels, één voor tekst.
5. Vul in Elementor bij Website instellingen je Globale kleuren en Globale lettertypes in. Geef elke kleur een duidelijke naam.
6. Stel bij Thema stijl de Typografie in (tekst en H1 tot H3, met kleinere waarden op gsm) en geef je Knoppen een kleur, afronding en hoverkleur.
7. Vul bij Website identiteit je sitenaam, beschrijving, logo en favicon in.
8. Klik op Wijzigingen opslaan. Controleer of al je titels, teksten en knoppen netjes je huisstijl volgen. Zet waar nodig in widgets de kleur en typografie via het wereldbolletje op een globale waarde.

Opdracht: de vaste onderdelen van jouw site. Werk op je eigen site (sNN.ucll.somesites.be).

1. Maak een header met de widgets Site Logo, WordPress Menu en een knop naar je contactpagina. Gebruik globale kleuren en lettertypes, maak hem sticky, verberg de knop op gsm en test het hamburgermenu.
2. Publiceer de header met de voorwaarde Entire site en controleer drie pagina’s op de voorkant.
3. Maak een footer met minstens drie kolommen (bv. over jou, openingsuren of praktische info met een Icoon lijst, contact) en een copyright-regel met een dynamisch jaartal. Controleer dat de kolommen op gsm onder elkaar staan.
4. Schrijf (als je dat nog niet deed) minstens twee blogberichten met een uitgelichte afbeelding. Maak een Single Post-sjabloon met Post Title, Featured Image, Post Info, Post Content en Post Navigation (voorwaarde: Berichten).
5. Maak een Archive-sjabloon met Archive Posts in kaartjes (voorwaarde: All archives) en een 404-sjabloon met een knop naar de homepage.
6. Test alles: een blogbericht, je blogpagina en een niet-bestaand adres, telkens op computer én gsm.

Opdracht: jouw homepage, Over ons en Contact. Werk op je eigen site (sNN.ucll.somesites.be).

1. Maak een nieuwe pagina, kies de pagina lay-out Elementor volledige breedte en bouw een homepage met minstens: een hero (achtergrondfoto + overlay + H1 + inleiding + twee knoppen), een sectie tekst + foto in twee kolommen, drie kaarten met Afbeelding vak, getuigenissen of een andere vorm van bewijs, en een call-to-action-band.
2. Gebruik enkel je globale kleuren en lettertypes, maximaal twee lettertypes en voldoende witruimte.
3. Controleer en verbeter de pagina in de gsm-weergave en op je eigen gsm.
4. Geef hoogstens drie elementen een rustige ingangsanimatie.
5. Sla je call-to-action-band op als sjabloon en voeg hem in op twee andere pagina’s.
6. Bouw een Over ons-pagina en een Contact-pagina die met dezelfde banner beginnen.
7. Maak een popup met een nieuwtje die enkel opent als een bezoeker op een knop klikt.
8. Stel de nieuwe pagina in als je homepage (Instellingen → Lezen) en zet hem in je menu.

Opdracht 1: een contactformulier met Elementor

1. Zet op de contactpagina van je eigen site een Formulier-widget met minstens: naam, e-mail (type Email), bericht (Textarea) en een privacyvinkje (Acceptance, verplicht, met een link naar je privacyverklaring). Voeg een veld van het type Honeypot toe.
2. Zet Naam en E-mail naast elkaar (Column Width 50%) en geef de knop een duidelijke tekst.
3. Stel de acties in: Collect Submissions en Email (naar je eigen adres, een duidelijk onderwerp, Reply-To = het e-mailveld).
4. Zet Custom Messages aan en schrijf een Nederlands bedankbericht en foutmelding.
5. Stijl het formulier met je globale kleuren en lettertypes. Publiceer, en doe één testinzending in een privévenster. Controleer de inzending onder Elementor → Submissions.

Opdracht 2: een uitgebreid formulier met Gravity Forms

1. Bedenk voor je eigen site een formulier dat meer vraagt dan een contactformulier: een inschrijving voor een activiteit, een offerteaanvraag, een reservatie ….
2. Maak het in Gravity Forms met minstens zes velden, waarvan een datum, een getal met minimum en maximum, een keuzelijst en een Consent-veld.
3. Stel twee meldingen in: één naar jezelf (met Reply To naar de bezoeker) en één bevestiging naar de bezoeker. Schrijf een persoonlijke bevestiging met de naam van de bezoeker.
4. Zet de Advanced Honeypot aan en kies Euro als munt.
5. Zet het formulier met de Shortcode-widget op een nieuwe pagina, publiceer die en doe één testinzending. Bekijk ze onder Forms → Entries en exporteer ze naar CSV.
6. Schrijf in twee zinnen waarom je voor dit formulier Gravity Forms koos en niet Elementor.

Opdracht: maak je site klaar voor Google

1. Bedenk voor je homepagina en voor twee andere pagina’s een focuszoekwoord: welke woorden zou een klant in Google typen?
2. Open elke pagina op de voorkant (ingelogd), klik op de blauwe SEOPress-knop en schrijf een metatitel (50–60 tekens, zoekwoord vooraan) en een metabeschrijving (120–160 tekens, uitnodigend). Controleer dat de tellers niet rood staan en bekijk de Snippet Preview.
3. Vul bij Content Analysis je focuszoekwoord in, sla op, klik op Refresh analysis en los minstens twee rode of oranje punten op (de Meta robots-melding mag blijven).
4. Geef minstens vijf afbeeldingen in je mediabibliotheek een goede alt-tekst.
5. Controleer op elke pagina dat er precies één H1 is.
6. Kies onder SEO → Social Networks → Facebook (Open Graph) een standaard-deelafbeelding.
7. Laat Zoekmachine zichtbaarheid (Instellingen → Lezen) aangevinkt: het blijft een oefensite.

Opdracht: maak je eigen site privacyproof

1. Maak onder Weergave → Menu’s een nieuw, leeg menu Juridisch aan.
2. Doorloop de Complianz-wizard volledig met de gegevens van jouw (fictieve) organisatie. Kijk eerst al je pagina’s na: welke diensten van derden gebruik je (kaart, video, lettertypes, sociale media)?
3. Zet in Elementor Load Google Fonts Locally aan.
4. Geef de banner de kleuren en de knopvorm van je huisstijl. Controleer dat alle Accessibility-labels groen of oranje zijn.
5. Zet het menu Juridisch in je footer.
6. Test in een privévenster, op je computer én op je gsm: verschijnt de banner, werkt Weiger, blijft je kaart of video weg tot je accepteert, en werken de links naar de drie documenten?

Opdracht: een “binnenkort online”-pagina voor je eigen site

1. Maak een onderhoudspagina met je eigen logo, een korte titel, een tekst met contactgegevens en een achtergrondfoto in je huisstijl.
2. Vul de SEO-titel en -beschrijving in.
3. Zet de onderhoudsmodus aan en neem met je gsm een schermafbeelding van wat een bezoeker ziet. Past alles op het scherm?
4. Zet de onderhoudsmodus weer uit en controleer in een privévenster dat je gewone site terug zichtbaar is.

Opdracht: je eerste bewaarpunt

1. Maak een volledige back-up (database + bestanden) van je eigen site.
2. Kijk in het logboek hoe groot de onderdelen zijn. Welk onderdeel is het grootst, en waarom?
3. Download het onderdeel Database naar je computer en bewaar het in een map met de datum in de naam.
4. Open Herstellen, vink alleen Database aan, klik op Volgende en stop bij de laatste stap met Annuleren. Zo weet je waar alles staat als het ooit echt nodig is.
5. Spreek met jezelf af: vóór elke grote wijziging eerst een back-up.

Opdracht: beveilig je eigen site

1. Installeer een wachtwoordbeheerder (bv. Bitwarden) of gebruik die van je browser. Laat WordPress in je profiel een nieuw, sterk wachtwoord maken, bewaar het in je wachtwoordbeheerder en klik op Profiel bijwerken. Log uit en weer in om te testen.
2. Open Limit Login Attempts en sluit het welkomstvenster. Noteer hoeveel mislukte pogingen er de laatste 24 uur waren en hoeveel pogingen je krijgt voor je buitengesloten wordt.
3. Ga naar Dashboard → Updates en noteer de huidige WordPress-versie en of er plugins wachten op een update. Controleer op de pluginpagina dat de auto-updates overal aanstaan.
4. Open Tools → Websitediagnose. Noteer de kritieke problemen en aanbevolen verbeteringen, en schrijf er telkens bij of je er iets aan moet doen of dat het normaal is op je oefensite.
5. Kijk de gebruikerslijst na: hoeveel beheerders zijn er? Moet een docent of medestudent meewerken, maak dan een account met de rol Redacteur in plaats van je wachtwoord te delen.

Opdracht: de oplevering van je eigen site

1. Werk alle punten van de checklist af op je eigen site. Noteer bij elk punt kort wat je controleerde en wat je aanpaste.
2. Maak schermafbeeldingen op je gsm van je homepage en je contactpagina.
3. Laat een medestudent je site testen op zijn of haar gsm, zonder uitleg. Waar twijfelt die persoon? Wat vindt die niet?
4. Meet je homepage met PageSpeed Insights (mobiel) en noteer de score. Kies één tip uit het rapport en voer ze uit.
5. Maak tot slot een volledige back-up.

Opdracht: wees voorbereid

1. Zoek uit waar op je eigen site de prullenbak van Pagina’s staat en waar je de Revisies van een pagina vindt.
2. Open een pagina in Elementor, verander iets kleins, publiceer, en zet daarna via de Geschiedenis → Revisies de vorige versie terug.
3. Maak een back-up met UpdraftPlus voor je aan een grote wijziging begint.