Artesis Plantijn Hogeschool Antwerpen
Media, Design en IT
Front-end webontwikkeling37313/3062/2324/1/40
Studiegids

Front-end webontwikkeling

37313/3062/2324/1/40
Academiejaar 2023-24
Komt voor in:
  • Graduaat programmeren, trajectschijf 1
Dit is een enkelvoudig opleidingsonderdeel.
Studieomvang: 16 studiepunten
Men kan dit opleidingsonderdeel niet volgen binnen een
  • examencontract (met het oog op het behalen van een creditbewijs).
  • examencontract (met het oog op het behalen van een diploma).
Co-titularis(sen): Nys Vincent
Co-titularis(sen) zijn nog niet (allemaal) gekend.
Onderwijstalen: Nederlands
Kalender: Semester 1 of Semester 2 of Academiejaar
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: 416,00 uren

Korte omschrijving

De module "Front-end webontwikkeling" behandelt de technieken die nodig zijn om een interactieve, visueel aantrekkelijke websites te bouwen. Hierbij wordt gebruik gemaakt van HTML, CSS, TypeScript en React. In de loop van deze module werkt de student enkele nuttige voorbeeldprojecten en één eigen project uit. Deze module geeft toegang tot de module "Back-end webontwikkeling".

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.
De student ontwerpt een web applicatie op basis van een functionele analyse.
03: De gegradueerde programmeert webapplicaties en databankstructuren en werkt hierbij planmatig gebruikmakend van de Agile methodiek.
De student maakt gebruik van controlestructuren en andere technieken van gestructureerd programmeren (if, loops etc.).
De student ontwikkelt klassen en hanteert daarbij de juiste beperkingen en declaraties van attributen.
De student past HTML toe voor de constructie van een webpagina en hedendaagse webfunctionaliteiten.
De student voegt eenvoudige JavaScript-functionaliteiten toe aan een website. 
De student realiseert een website in HTML en CSS op basis van een gegeven wireframe/mockup. 
De student realiseert een website in HTML en CSS op basis van een gegeven ontwerp.
De student maakt gebruik van controlestructuren en andere technieken van gestructureerd programmeren (if, loops etc.) in functie van webapplicaties
De student maakt web applicaties in react js
De student maakt componenten met properties, hooks en states
De student maakt gebruik van een routing library voor een applicatie met meerdere pagina’s
De student maakt componenten die met elkaar communiceren aan de hand van een gedeelde state
De student maakt web applicaties te gebruik maken van externe web services
De student bouwt een user interface met gebruik van een UI component library
De student begrijpt de React Component Lifecycle
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.
De student host/structureert websites op een webserver.
De student gebruikt de juiste bestandsformaten voor beeld, video en audio voor gebruik op het web. 
05: De gegradueerde programmeert volgens de standaarden en afspraken binnen de organisatie.
De student hanteert op correcte wijze begrippen zoals variabelen, datatypen, declaraties, operatoren, expressies, statements, typeconversie.
De student respecteert bij implementaties de afgesproken regels voor naamgeving en codering (naming conventions, coding rules).
De student schrijft eenvoudige algoritmes.
De student maakt gebruik van arrays.
De student hanteert een correcte syntax en semantiek bij de structurele opbouw in HTML, CSS, JavaScript. 
De student hanteert op correcte wijze begrippen zoals variabelen, datatypen, declaraties, operatoren, expressies, statements, typeconversie,… in functie van webapplicaties
De student respecteert bij implementaties de afgesproken regels voor naamgeving en codering (naming conventions, coding rules)
De student maakt gebruik van arrays en JavaScript objecten
De student kan herbruikbare componenten bouwen
06: De gegradueerde documenteert in functie van kwalitatieve gebruikershandleidingen, referentiegidsen en online hulpbronnen waar nodig.
De student documenteert de constructie van zijn/haar website op heldere wijze.
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.
De student interpreteert en verklaart foutmeldingen
De student maakt gebruik van de hulpmiddelen voor foutopsporing in de browser
De student kan een web applicatie testen, debuggen en performance problemen oplossen
12: De gegradueerde volgt relevante IT-evoluties op, identificeert de eigen ontwikkelingsnoden en verbetert continu de eigen praktijk.
De student maakt gebruik van de bibliotheek van de ontwikkelomgeving en de bijbehorende hulpmiddelen voor foutopsporing (compilers, debuggers).

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
  • Beeld, geluid en andere externe inhouden
  • Werken met tabellen en formulieren
  • HTML validatie

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
  • Gebruikmaken van pseudo-selectors en pseudo-classes
  • 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 transitions en animations
  • CSS preprocessors (SASS)

Basis van de werking van webpagina's:

  • Filestructuur op webserver
  • Bestandsformaten
  • SEO
  • Toegankelijkheid
  • UI/UX

Basis van programmeren in TypeScript:

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

Basis van werken met API's:

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

Basiskennis van een React.js applicatie:

  • Combineren van HTML, CSS en JSX
  • Schrijven van eigen functional components
  • Doorgeven van data via properties
  • Lifecycle van een React Component (useEffect hook)
  • Gebruik van React Router
  • Controlled en uncontrolled components
  • Event- en callback handlers
  • Stijlen van componenten

Beheren van de status van de applicatie

  • Beheren van state van een component
  • Manieren van state delen tussen verschillende componenten (context, redux,...)
  • Uitvoeren van API calls

Studiematerialen (tekst): Verplicht

Het cursusmateriaal wordt via Digitap ter beschikking gesteld.

Laptop:
De student dient voor dit opleidingsonderdeel zijn/haar persoonlijke laptopcomputer te gebruiken. Er worden faciliteiten geboden voor de aanschaf/installatie van de noodzakelijke software.

Onderwijsorganisatie

Afstandstraject
Individuele begeleiding (afstandstraject)12,00 uren
Practicum en/of oefeningen (afstandstraject)6,00 uren
Voorziene tijd voor toetsing (afstandstraject)1,00 uren
Werktijd buiten de contacturen (afstandstraject)397,00 uren

Toetsing (lijst)

Evaluatie(s) voor de eerste examenkans
MomentVorm%Opmerking
Eerste examenperiodeVaardigheidstoets in de examenreeks100,00De student werkt tijdens de lesweken zelfstandig een eigen opdracht uit. Deze opdracht wordt tijdens het examenmoment uitgebreid overlopen en aan de hand van een mondelinge bevraging wordt de kennis van de eigen applicatie getoetst.
Evaluatie(s) voor de tweede examenkans
MomentVorm%Opmerking
Tweede examenperiodeVaardigheidstoets in de examenreeks100,00De student werkt zelfstandig een eigen opdracht uit. Deze opdracht wordt tijdens het examenmoment uitgebreid overlopen en aan de hand van een mondelinge bevraging wordt de kennis van de eigen applicatie getoetst.

Toetsing (tekst)

AFWEZIG OP (DEEL)EVALUATIE
Als je afwezig bent voor een (deel)evaluatie buiten de afgebakende examenreeksen, kan je deze evaluatieactiviteit inhalen op voorwaarde dat dit organisatorisch mogelijk is én :

  • Je jouw afwezigheid meldt via de module ‘Mijn afwezigheden’ in iBaMaFlex voor aanvang van de (deel)evaluatie.

  • Je dient je aanvraag voor een inhaalmoment tezamen met het nodige medisch attest in via de webmodule ‘Mijn afwezigheden’ in iBaMaFlex. Je doet dit binnen 2 kalenderdagen na de gemiste (deel)evaluatie. Indien de 2de kalenderdag een zaterdag, zondag, feest-of verlofdag is, wordt de termijn verlengd tot de eerstvolgende werkdag.

  • Je maakt, binnen de 4 kalenderdagen na de gemiste (deel)evaluatie, zelf per e-mail een afspraak met de lector omtrent het tijdstip en de wijze waarop deze (deel)evaluatie kan ingehaald worden. Je kan slechts één (deel)evaluatie per opleidingsonderdeel inhalen en daarvoor éénmaal een dergelijke afspraak maken. Ben je op die afspraak voor het inhaalmoment ook afwezig, dan kan je de (deel)evaluatie niet meer inhalen. Je dient het origineel geldig medisch attest te bewaren zodat dit in geval van onduidelijkheid alsnog kan worden opgevraagd.

Voldoe je niet aan de voorgaande voorwaarden, dan heb je geen recht op een inhaalmoment en krijg je bijgevolg 0 op deze (deel)evaluatie.