Algemene organisatie

Je werkt tijdens de stage in het IT-lokaal aan je project. De leerkracht bij wie je normaal les hebt, houdt toezicht. Meneer Maes ondersteunt je tijdens zijn lesuren.

Gebruik van AI-tools

Tijdens deze stage is het toegestaan om gebruik te maken van AI-tools, maar enkel als ondersteunend hulpmiddel.

Het doel van deze stage is dat je zelf leert nadenken, ontwerpen en ontwikkelen. AI kan je hierbij helpen, maar mag jouw werk niet vervangen.

Waarom zelf werken zo belangrijk is

Door je website zelf te bouwen:

• Begrijp je beter hoe een website technisch in elkaar zit
• Ontwikkel je probleemoplossend denken, een skill die in elke studierichting en job van pas komt
• Maak je bewuste keuzes in design en functionaliteit
• Je kan de website exact afstemmen op jouw wensen of die van je opdrachtgever, zowel op vlak van code, lay-out als design
  Met AI is het vaak moeilijker om tot dit niveau van precisie te komen, zeker bij meer specifieke of unieke wensen
• Het is een zeer belangrijke voorbereiding op het examen

Zelf nadenken en oplossingen zoeken loont op langere termijn

Snelheid en efficiëntie

Wanneer jij of je opdrachtgever iets specifieks wil, is het vaak sneller en efficiënter om zelf aanpassingen te kunnen maken, maar dat kan enkel als je volledig begrijpt hoe je website werkt.

AI kan handig lijken en snel resultaat geven, maar naarmate je project complexer wordt:

• Neemt de kans op bugs toe
• Vergroot het risico op securityproblemen
• Zal je code ingewikkelder en onleersbaarder worden, tot op het punt dat je er zelf niet veel meer van gebrijpt

Wat is niet toegestaan?

• Volledige websites of grote delen laten genereren zonder ze zelf te begrijpen
• Code kopiëren zonder te weten wat deze doet
• Teksten overnemen zonder aanpassing of controle
• Werk indienen dat je zelf niet kan uitleggen

Verwachtingen

• Je kan alles wat je indient uitleggen
• Je maakt bewuste keuzes en kan deze motiveren
• Je gebruikt AI op een kritische en doordachte manier

Controle

Er zal gevraagd worden om:

• Je code of keuzes toe te lichten
• Live aanpassingen uit te voeren
• Vragen te beantwoorden over je code

Als blijkt dat je werk niet zelf gemaakt is of je het niet begrijpt, zal dit een negatieve invloed hebben op je punten.

Waarvoor AI nuttig kan zijn

• Ideeën en inspiratie opdoen
• Problemen beter begrijpen
  AI kan helpen om foutmeldingen te verduidelijken
• Structuur en aanpak verfijnen
  Je kan AI gebruiken om suggesties te krijgen voor de opbouw van je website of je code, die je daarna zelf uitwerkt en aanpast.
• Controleren en verbeteren van je werk
  Bijvoorbeeld om je teksten na te kijken op spelling en formulering, of om je code te laten controleren op logica.

Je gebruikt AI als ondersteuning, niet als vervanging van je eigen werk en inzicht

Week 1

Maandag: logboek

Op de eerste dag van de stage maak je een persoonlijk logboek aan en deel je dit met de leerkracht

Je houdt een persoonlijk logboek bij tijdens de volledige stageperiode. Hierin noteer je wanneer en hoe je aan je website hebt gewerkt, zowel op school als thuis.

De leerkrachten gebruiken dit logboek om je werkproces op te volgen.

Voor elke dag een nieuwe entry met:

• Datum
• Wat heb je gedaan?
• Wat ging goed / minder goed?
• Tijdsduur

Afspraken:

• Schrijf in volledige zinnen
• Gebruik correcte spelling en leestekens
• Houd het kort, maar duidelijk

Vrijdag: feedback momenet

Op het einde van week 1 geef je een (online) tussentijdse presentatie aan je opdrachtgever.
Het doel van deze presentatie is om je eerste versie van de website te tonen en feedback te verzamelen.

Dit moet zeker besproken worden:

• Hoe je project tot nu toe verloopt
• Welke keuzes je al gemaakt hebt qua design, structuur, functies
• Welke problemen je al bent tegengekomen
• Waar je nog twijfelt of hulp nodig hebt

Tijdens deze presentatie vraag je actief feedback aan je opdrachtgever:

• Is de inhoud duidelijk en bruikbaar?
• Past het design bij wat je voor ogen had?
• Mist er nog informatie of functionaliteit?
• Zijn er aanpassingen die nog gemaakt moeten worden?

Vereisten voor het eerste feedbackmoment

Het is belangrijk dat je project al een duidelijk en realistisch beeld geeft van het uiteindelijke afgewerkte resultaat.

Waar moet je website aan voldoen:

• Makkelijk te bekijken
  Je website is eenvoudig toegankelijk. Idealiter staat hij al online, zodat je opdrachtgever hem vlot kan openen en testen.
• Mobile friendly
  Je opdrachtgever zal je website vaak eerst op een gsm bekijken. Een slechte mobiele ervaring geeft meteen een verkeerde indruk.
  Layoutproblemen op mobiel los je beter vroeg op dan op het einde.
• Enkele pagina’s volledig afgewerkt
  Het is beter dat je een aantal pagina’s volledig af hebt, dan dat je op elke pagina een klein stukje hebt uitgewerkt.
  Zo krijgt je opdrachtgever een duidelijk beeld van het uiteindelijke niveau van afwerking.
• Duidelijke structuur en navigatie
  De belangrijkste pagina’s zijn aanwezig en de navigatie werkt logisch en overzichtelijk.

Het doel is niet dat je website al volledig af is, maar wel dat je iets toont waarop zinvolle feedback gegeven kan worden.

Checklist

Gebruik deze checklist om te controleren of je klaar bent voor het presentatiemoment:

Aanvulling logboek

Na je tussentijdse presentatie voeg je de huidige stand van je project, de gekregen feedback en de planning voor week 2 op basis van deze feedback toe aan je logboek.

Voor het gesprek

• Huidige stand van zaken
  Wat is al afgewerkt, wat werkt al goed, wat is nog niet af, …
• Gemaakte keuzes
  Belangrijkste keuzes op vlak van design en functionaliteit en een korte motivatie waarom je deze keuzes gemaakt hebt
• Problemen en oplossingen
  Welke problemen ben je al tegengekomen en hoe heb je deze proberen op te lossen
• Waar heb je nog hulp of feedback bij nodig?

Na het gesprek

• Feedback van opdrachtgever en leerkracht
  Noteer dit zo concreet mogelijk
• Planning voor week 2
  Welke aanpassingen en toevoegingen ga je maken, en wanneer ga je deze maken. Hou er rekening mee dat je ook een handleiding en eindpresentatie moet maken.

Afspraken:

• Schrijf in duidelijke en volledige zinnen
• Gebruik correcte spelling
• Houd het document overzichtelijk en beknopt

Week 2

Testing

Een website die alleen op jouw laptop werkt, is geen website maar een hobbyproject.
Je moet controleren of je site vlot laadt en bruikbaar is op elke telefoon, tablet, laptop en in elke browser.

Je website goed testen is heel belangrijk, anders loopt je opdrachtgever klanten of gebruikers mis omdat je site niet goed werkt waar zij hem openen.

Handleiding

Daarnaast maak je een handleiding voor je opdrachtgever waarin je uitlegt hoe de website later aangepast kan worden. Deze handleiding moet duidelijk en begrijpelijk zijn voor iemand zonder technische kennis.

Eindpresentatie

Op het einde van de stage stel je jouw afgewerkte website voor aan de opdrachtgever en de leerkracht.
Je geeft ook een duidelijke en gestructureerde presentatie (in het gekregen sjabloon).
Zo toon je niet alleen het eindresultaat, maar ook je denkproces, keuzes en leerervaringen.

Wat moet er zeker in de eindpresentatie zitten?

• Voorstelling van de klant
• Het doel van de website en de keuzes die hieruit voortvloeiden
• Gebruikte technologieën en technieken
• De belangrijkste keuzes op vlak van design en functionaliteiten en de motivatie achter deze keuzes
• Je demonstreert hoe de opdrachtgever de website zelf kan aanpassen en waar de handleiding te vinden is
• Reflectie: een kritische terugblik op je eigen werkproces en resultaat
  • Bespreek wat goed is verlopen en waarom.
  • Geef ook aan wat minder goed ging en wat je een volgende keer anders zou aanpakken.
  • Toon aan wat je geleerd hebt tijdens dit project en hoe je jezelf verder wil verbeteren.

Sjabloon presentatie

Officiële overdracht

Laat je opdrachtgever een eigen GitHub-account aanmaken en transfer daarna de repository naar die account of organisatie.

Dit zijn de logische opties:

• Repository overdragen
  Het properst, want de opdrachtgever wordt volledig eigenaar van code en hosting op GitHub Pages.
  Dan krijgt de opdrachtgever de broncode, commitgeschiedenis en het beheer van de GitHub Pages-site in eigen handen.
  GitHub Docs: Transferring a repository
• Opdrachtgever als collaborator toevoegen
  Handig als je nog tijdelijk support moeten geven, maar de site blijft dan niet volledig van de opdrachtgever.
  GitHub Docs: Inviting collaborators to a personal repository

Extra uitdaging (optioneel)

Ben je vroeger klaar met de basis van je website?
Dan kan je extra functionaliteiten of technieken toevoegen om je project verder uit te breiden.

Begin pas aan extra’s wanneer

• Alle gevraagde onderdelen van de opdrachtgever volledig afgewerkt zijn
• Je website stabiel werkt
• Je website mobile friendly is
• Alle feedback verwerkt is
• Je handleiding en eindpresentatie in orde zijn

Extra functionaliteiten leveren enkel een meerwaarde op wanneer:

• Ze degelijk uitgewerkt zijn
• Ze passen bij de website en doelgroep
• Je ze zelf begrijpt en kan uitleggen

Mogelijke uitbreidingen

Domeinnaam

Voeg aan je handleiding toe hoe je opdrachtgever een eigen domeinnaam kan kopen en koppelen aan de website.
Een eigen domeinnaam zorgt ervoor dat de website er professioneler uitziet.

Scrollanimaties met AOS.js

Met AOS.js kan je elementen laten verschijnen wanneer je naar beneden scrollt.

Belangrijk:

• Gebruik animaties subtiel
• Overdrijf niet: te veel animaties maken een website onrustig

Hover-effecten

Voorbeelden:

• Knoppen die van kleur veranderen
• Afbeeldingen die licht vergroten
• Cards met schaduw-effecten

Mogelijke technieken:

• CSS transition
• CSS transform

Contactformulier

Een contactformulier laat bezoekers berichten sturen.

Controleer of:

• Verplichte velden ingevuld zijn
• Een e-mailadres correct geschreven is

Zoektermen:

• Html form validation
• Javascript form validation

Belangrijk:

• Toon duidelijke foutmeldingen
• Maak het formulier gebruiksvriendelijk

Nieuws- of blogsysteem met Jekyll & Github Pages

Met Jekyll & Github Pages kan je eenvoudig nieuwsberichten of blogposts toevoegen.

Mogelijke toepassingen:

• Nieuwsberichten voor een vereniging
• Updates van evenementen
• Artikels of aankondigingen

Betere SEO

SEO helpt zoekmachines je website beter te begrijpen.

Zoektermen:

• SEO basics website
• URL SEO checker

Geanimeerde navigatie

Maak je navigatie interactiever en duidelijker.

Voorbeelden:

• Onderlijning die animeert
• Hamburger-menu met animatie
• Navigatie die mee scrollt
• Actieve pagina visueel aanduiden

Belangrijk:

• De navigatie moet vooral duidelijk en gebruiksvriendelijk blijven.

Evaluatie