Academiejaar
2022-23
Komt voor in:
- Graduaat programmeren, trajectschijf 1
Dit is een enkelvoudig opleidingsonderdeel.
Studieomvang:
16 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): Inghelbrecht Denis, Maes Sven, Nys Vincent, Similon Andie
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: Dit opleidingsonderdeel komt in aanmerking voor tolerantie onder de voorwaarden van de opleiding waarvoor je bent ingeschreven.
Korte omschrijving
De module "Front-end webontwikkeling" behandelt de technieken die nodig zijn om een interactieve, visueel aantrekkelijke website 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: Ontwerpen: Maakt op basis van de analyse een onderbouwd voorstel van het ontwerp, de programmeertaal en -methodiek en stemt hiervoor af met de softwareontwikkelaar, analist en/of projectleider. Houdt rekening met de vooropgestelde methodiek en doelstellingen tijdens de uitvoering van het project.
De student hanteert op correcte wijze begrippen zoals variabelen, datatypen, declaraties, operatoren, expressies, statements, typeconversie. |
De student hanteert op correcte wijze begrippen zoals variabelen, datatypen, declaraties, operatoren, expressies, statements, typeconversie,… in functie van webapplicaties |
De student ontwerpt een web applicatie op basis van een functionele analyse. |
04: Opleveren: Is medeverantwoordelijk voor de eigen digitale werkomgeving en draagt bij tot de gedeelde infrastructuur nodig voor het ontwikkelen, testen en in productie brengen van projecten.
De student kan een web applicatie testen, debuggen en performance problemen oplossen |
10: Documenteren: Documenteert de zelf ontwikkelde applicaties op een adequate en overzichtelijke manier gebruikmakend van een kennisdatabank en volgens de afspraken binnen het bedrijf. Geeft kwalitatieve input voor de gebruikershandleidingen, referentiegidsen en online hulpbronnen.
De student documenteert de constructie van zijn/haar website op heldere wijze.
|
03: Uitvoeren: Realiseert softwareapplicaties en gegevensstructuren. Werkt hierbij planmatig binnen de context van het projectplan, de beschikbare tools en de vooropgestelde methodiek.
De student maakt gebruik van controlestructuren en andere technieken van gestructureerd programmeren (if, loops etc.). |
De student maakt gebruik van de bibliotheek van de ontwikkelomgeving en de bijbehorende hulpmiddelen voor foutopsporing (compilers, debuggers). |
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 ontwikkelt klassen en hanteert daarbij de juiste beperkingen en declaraties van attributen. |
De student host/structureert websites op een webserver.
|
De student gebruikt de juiste bestandsformaten voor beeld, video en audio voor gebruik op het web.
|
De student hanteert een correcte syntax en semantiek bij de structurele opbouw in HTML, CSS, JavaScript.
|
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 maakt gebruik van controlestructuren en andere technieken van gestructureerd programmeren (if, loops etc.) in functie van webapplicaties |
De student maakt gebruik van de hulpmiddelen voor foutopsporing in de browser |
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 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 kan herbruikbare componenten bouwen |
De student begrijpt de React Component Lifecycle |
05: Uitvoeren kwaliteit: Programmeert volgens de standaarden en afspraken binnen de organisatie.
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.
|
11: Levenslang leren: Volgt relevante IT-evoluties op en ontwikkelt en verbetert continu de eigen praktijk. Identificeert de behoefte aan eigen ontwikkelingsnoden.
De student interpreteert en verklaart foutmeldingen |
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.
Toetsing (lijst)
Evaluatie(s) voor de eerste examenkans
Moment | Vorm | % | Opmerking |
Academiejaar | Vaardigheidstoets in de examenreeks | 100,00 | |
Toetsing (tekst)
De 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.