Artesis Plantijn Hogeschool Antwerpen
Media, Design en IT
Webtechnologie36802/3334/2425/1/08
Studiegids

Webtechnologie

36802/3334/2425/1/08
Academiejaar 2024-25
Komt voor in:
  • Graduaat programmeren, trajectschijf 1
Dit is een enkelvoudig opleidingsonderdeel.
Studieomvang: 9 studiepunten
Men kan dit opleidingsonderdeel niet volgen binnen een
  • creditcontract.
  • examencontract (met het oog op het behalen van een creditbewijs).
  • examencontract (met het oog op het behalen van een diploma).
Co-titularis(sen): Lettany Barbara, Maes Sven, Van Camp Vincent
Onderwijstalen: Nederlands
Kalender: Semester 1 of Semester 2
Dit opleidingsonderdeel wordt gequoteerd op 20 (tot op een geheel getal).

Volgtijdelijkheid

Op dit opleidingsonderdeel is er geen volgtijdelijkheid van toepassing.
Tweede examenkans: wel mogelijk.
Tolereerbaarheid: Voor dit opleidingsonderdeel moet je slagen (wordt nooit getolereerd).
Totale studietijd: 234,00 uren

Korte omschrijving

Het olod Webtechnologie behandelt het creëren van interactieve en grafische websites met behulp van HTML, CSS en JavaScript.
Het olod Webtechnologie bereidt voor op het creëren van een volledige dynamische website.

OLR-Leerdoelen (lijst)

02: De gegradueerde maakt een onderbouwd voorstel van het ontwerp, de webframeworks en stemt hiervoor af met collega, belanghebbenden, teamleden, rekening houdende met de technische en functionele vereisten.
Je geeft een webpagina vorm o.b.v. eigen inzichten en onderzoek.
04: De gegradueerde neemt verantwoordelijkheid voor de eigen digitale werkomgeving en draagt bij tot de gedeelde digitale infrastructuur nodig voor het ontwikkelen, testen en in productie brengen van projecten.
Je gebruikt de juiste bestandsformaten voor beeld, video en audio voor gebruik op het web.
Je werkt met een geïntegreerde ontwikkelomgeving (IDE) voor het schrijven, uitvoeren en debuggen van jouw code.
05: De gegradueerde programmeert volgens de standaarden en afspraken binnen de organisatie.
Je bouwt de semantische structuur van een statische webpagina op.
Je gebruikt de correcte bouwstenen voor verschillende soorten tekst bij het opbouwen van een webpagina.
Je gebruikt de correcte bouwstenen voor verschillende media bij het opbouwen van een webpagina.
Je geeft een webpagina vorm o.b.v. een voorgedefinieerde lay-out.
Je gebruikt de correcte stijlregels om een webpagina vorm te geven.
Je hanteert lay-out-technieken om elementen op te pagina te plaatsen.
Je structureert webapplicaties zodat ze op een webserver kunnen staan.
Je maakt gebruik van bibliotheken om de mogelijkheden van jouw website uit te breiden.
Je gebruikt de basisconcepten van gebruiksvriendelijkheid en gebruikerservaring om jouw website te optimaliseren voor eindgebruikers.
Je past de basisconcepten van functioneel programmeren toe om een webpagina interactief te maken.
Je maakt correct gebruik van verschillende controlestructuren in een interactieve webpagina.
Je gebruikt arrays en objecten om meerdere gegevensitems te organiseren en te verwerken.
Je respecteert bij implementaties de afgesproken regels voor naamgeving en codering.
Je past DOM-manipulatie toe om de structuur en inhoud van een webpagina dynamisch te wijzigen op basis van gebruikersinteractie (events).
Je gebruikt geavanceerde array-functies om efficiënt en expressief te werken met arrays van gegevens.
Je past asynchrone programmeertechnieken toe om een webpagina dynamisch te maken.
Je haalt data op van een externe bron met behulp van asynchrone code en integreert deze in een webpagina.
06: De gegradueerde documenteert in functie van kwalitatieve gebruikershandleidingen, referentiegidsen en online hulpbronnen waar nodig.
Je hanteert op correcte wijze de benamingen van de bouwstenen van een webpagina (elementen, eigenschappen en waardes).
Je documenteert de constructie van jouw website op heldere wijze.
Je documenteert jouw webpagina's waardoor de leesbaarheid, begrijpelijkheid en onderhoudbaarheid van de code worden verbeterd.
07: De gegradueerde gaat volgens testscenario’s de werking en functionaliteit van de gerealiseerde code na en verbetert deze op basis van gerapporteerde bugs en issues.
Je verbetert de werking van jouw website o.b.v. testresultaten.
Je verbetert de toegankelijkheid van jouw website.
Je lost problemen in jouw code op m.b.v. de console in de webbrowser.
Je test en evalueert een webpagina op verschillende browsers en apparaten om consistentie te waarborgen.
08: De gegradueerde voert, op basis van feedback, onderhoud en aanpassingen uit op de webapplicatie.
Je voert aanpassingen uit aan bestaande webapplicaties om functionaliteit te verbeteren of nieuwe features te implementeren.
12: De gegradueerde volgt relevante IT-evoluties op, identificeert de eigen ontwikkelingsnoden en verbetert continu de eigen praktijk.
Je bouwt een eigen project om je vaardigheden te versterken en vertrouwd te raken met interactieve webpagina's.
Je maakt gebruik van de bibliotheek van de ontwikkelomgeving en de bijbehorende hulpmiddelen.
Je bouwt een eigen interactieve webapplicatie om je vaardigheden te versterken en vertrouwd te raken met front-end technieken.

Leerinhoud

Basis van het structureren van webpagina's in HTML:

  • De bouwstenen: elementen, tags en attributen
  • Structuur kunnen geven aan teksten met semantische HTML-elementen
  • Lijsten, andere tekstmarkeringen en speciale tekens
  • Koppelingen

Basis van het vormgeven van webpagina’s in CSS:

  • De opbouw van stijlregels en waar die komen te staan
  • Het gebruik van lettertypen en de opmaak van tekst en menu’s
  • Gebruikmaken van eenvoudige en meer geavanceerde selectors
  • Het boxmodel en de positionering van elementen

Diepgang bij het vormgeven van webpagina's in CSS:

  • Lay-outtechnieken: grid lay-out en flexbox
  • Kleurgebruik en achtergrondafbeeldingen
  • Responsive webdesign met media queries met een mobile first-aanpak
  • CSS3 custom properties, nesting

Basis van de werking van webpagina's:

  • Filestructuur op webserver
  • Bestandsformaten
  • Toegankelijkheid
  • UI/UX
  • Front-end testing

Basis van programmeren in JavaScript:

  • Wat is JavaScript
  • Programmeerconcepten
  • Leren programmeren met een IDE
  • Fouten in code opsporen
  • Variabelen en identifiers
  • Expressies en statements
  • Methoden
  • Selectie- en iteratiestructuren

Uitgebreid programmeren in JavaScript:

  • DOM-manipulatie
  • EventListeners
  • ES6 array-functies
  • JS objecten
  • Promises
  • Callbacks
  • async/await

Basis van werken met API's:

  • Data uit API m.b.v. een GUI ophalen
  • Data uit API m.b.v. JS ophalen
  • JSON-formaat
  • POST/GET-commando's
  • Uitlezen van data uit API in website

Studiematerialen (lijst)

StudiewijzerVerplicht
Online leermateriaal op DigitapVerplicht

Onderwijsorganisatie

Avondtraject
Practicum en/of oefeningen (avondtraject)48,00 uren
Werktijd buiten de contacturen (avondtraject)186,00 uren
Dagtraject
Practicum en/of oefeningen (dagtraject)72,00 uren
Werktijd buiten de contacturen (dagtraject)162,00 uren

Toetsing (lijst)

Evaluatie(s) voor de eerste examenkans
MomentVorm%Opmerking
Eerste examenperiodeVaardigheidstoets eenmalig tijdens de lesweken30,00Tussentijdse digitale toets. Georganiseerd tijdens de toetsweek.
Eerste examenperiodeVaardigheidstoets in de examenreeks40,00Digitaal
Evaluatie(s) voor de tweede examenkans
MomentVorm%Opmerking
Tweede examenperiodeVaardigheidstoets in de examenreeks70,00Digitaal
Evaluatie(s) voor beide examenkansen, niet herhaalbaar in tweede examenkans
MomentVorm%Opmerking
Eerste examenperiodeProjectopdracht30,00

Toetsing (tekst)

De totale examentijd voor de digitale kennis- en inzichtstoets(en) en/of de digitale vaardigheidstoets(en) die tijdens de examenreeks en de toetsweek plaatsvinden, bestaat uit de voorziene tijd hiervoor plus ¼ extra examentijd – met een max. van 30 min. – voor alle studenten. De extra examentijd als individuele aanpassing is hierbij dus inbegrepen. Indien er op het moment van de toetsing een aanvullende toetsing plaats zou vinden, dan wordt de extra examentijd met een maximum van 30 min. toegekend.