WT: User eXperience | Studiehandleiding

Inmiddels weet je hoe je een relatief simpel programma kan schrijven met Processing/Java (SPB/SPAD). Je kan ook requirements lezen en definiëren voor software (FAT). In deze course ga je die skills inzetten om een website te (leren) maken. Maar het web werkt nogal anders dan Processing.

In Web Technology: User eXperience (WTUX) leer je hoe je een website kan maken voor een gebruiker. Dat betekent dat je leert nadenken over hoe de functionaliteit die geëist wordt omgetoverd wordt in een interactieve pagina die je met je browser kan openen. Om dit te doen ga je aan de slag met wireframes, HTML en CSS. Om het werk te archiveren en in te leveren werken we met Git.

Schema

Studiepunten en studiebelasting

De course WTUX heeft een omvang van 2,5 studiepunten. Dat zijn 70 studiebelastingsuren.

Samenhang

Deze course hangt nauw samen met de course WT: Implementation & Security (WTIS). Daarin wordt ‘de andere helft’ van websites behandeld. Niet de gebruikerskant, maar de server side. In WTIS wordt aandacht besteed aan netwerken, webappbeveiliging, PHP en een koppeling met een database.

Praktische informatie

De course WTUX duurt drie weken. In de eerste week gaan we aan de slag met wireframes en maken we de eerste stappen in HTML en CSS. In de tweede week leer je nog een heleboel extra bouwblokken voor HTML en CSS. Gaandeweg werk je verder aan beroepsproduct 1. In de laatste week is er tijd om aan het beroepsproduct te werken. Dit gaat dus heel snel.

In de course werken we veelvuldig met het boek ‘HTML5 en CSS3’ van Peter Doolaard of met de online materialen van Mozilla Developer Network.

Erg belangrijk is dat deze course voor elke les voorbereiding heeft. Dat betekent dat je ongeveer 1,5 uur bezig bent met het voorbereiden van iedere les. Dit gaat dan om dingen zoals:

  • Het gebruiken van het boek of het lezen van online documentatie
  • Voorbereidende video’s kijken
  • Kleine oefeningen doen (soms zelfs een spelletje)
  • Software klaar zetten

De lessen bestaan altijd uit de volgende onderdelen:

  • Terugkoppeling op vragen uit de voorbereiding
  • Een stuk uitleg
  • Korte demonstraties
  • Kleine oefeningen
  • Toepassen in het beroepsproduct

Als het goed is ben je na twee weken klaargestoomd voor het grote werk: het eersteberoepsproduct, waarover hier onder meer.

Symboliek

Voor beide courses worden in de lesdocumenten de volgende symbolen gebruikt om verschillende type lesmomenten aan te duiden:

  • 👩🏻‍🏫 klassikaal moment (directe instructie of zoiets)
  • 👷🏼 bouwen in je eentje
  • 👷🏼👷🏿‍♂️ bouwen als duo
  • 👩🏻‍💻 online materiaal tot je nemen
  • 📖 lezen (uit boek of online)
  • 🎬 video kijken
  • 👩‍🎓 extra

Beroepsproduct: Statische website

Het beroepsproduct is een (statische) website die bestaat uit HTML/CSS, zonder een andere programmeertaal of database. Alle teksten die hierin staan, zijn dus ook altijd hetzelfde. Anders dan bijvoorbeeld nu.nl, waar elke dag nieuwe berichten bovenaanstaan. De hele opdracht staat hier en is voor iedereen hetzelfde. Echter zal iedereen een andere uitwerking hebben met een andere invulling van kleuren etc.

Het beroepsproduct levert een individueel cijfer op.

Toetsing

De course WebTech: User eXperience kent één deeltentamen: het beroepsproduct. Het beroepsproduct moet met een 5,5 of hoger beoordeeld worden en telt dus voor 100 % mee als tentamencijfer.

Welke competenties je nodig hebt voor elke toets en de specifieke beoordelingscriteria vind je terug op iSAS.

Inlevering en archivering

Het beroepsproduct dient volgens het toetsschema te worden ingeleverd. Het inleveren gebeurt digitaal via iSAS. Raadpleeg Intro-ICT of een docent op tijd als je hier niet uit dreigt te komen.

P.S.: Een kapotte laptop of verloren bestanden zijn geen excuus voor uitstel. Maak regelmatig backups van je data en bewaar ook eerdere versies. Alle kleine oefeningen die je maakt kun je misschien later gebruiken.

Materialen

  1. Reader WTUX
  2. Boek: HTML5 en CSS3 van Peter Doolaard (5e editie). ISBN: 9789463560818.
  3. Software: Visual Studio Code van Microsoft
  4. Referentiewebsite: MDN Web Docs