Welkom!

Welkom op de site die hoort bij het OPO (‘OPleidingsOnderdeel’) front-end basis van de opleiding ‘graduaat programmeren’ in het afstandstraject van de UCLL hogeschool.

Waarmee ik meteen al één van mijn vuistregels breek, nl. “Heet de bezoekers van je site geen welkom, want je deed moeite om deze site te maken en online te zetten voor iedereen. De mensen weten dus dat ze welkom zijn.”

Maar toch: welkom dus, want ik wil graag mijn studenten de eerste les welkom heten in onze opleiding en in dit vak OPO. Maar dit is een afstandstraject, dus geen eerste les met face-to-face contact. Maar je had al begrepen dat ik het fijn vind dat je hier bent en dat ik je ondanks onze afstandelijkheid mag begeleiden voor dit OPO.

Basis: HTML, CSS, JS

Deze site probeert de basis uit te leggen van front-end development: HTML voor structuur en inhoud, CSS voor presentatie en JavaScript (JS) voor gedrag en interactie. Het domein van front-end is altijd in beweging. Nieuwe frameworks en tools komen en gaan. Er verschijnen voortdurend nieuwe CSS-mogelijkheden die het leven van een developer eenvoudiger maken. De taal JS wordt stelselmatig uitgebreid. De echte basis blijft echter verbazingwekkend stabiel.

Op die basis leggen we hier de klemtoon.

Inhoud site

Eerst en vooral: deze cursus / site is een tweede versie. Er is veel tijd in gekropen, maar toch: het kan beter. Mag ik daarom een beroep op jou doen? Meld me fouten in de tekst (hoe klein ook). Vond je iets onduidelijk in de uitleg? Is er een stukje CSS dat niet naar behoren werkt, waardoor de site op jouw toestel niet helemaal goed getoond wordt?Stuur me AUB een mailtje of teams chat. Je vindt mijn contactgegevens bovenaan in de Toledo cursus. Die Toledo cursus is trouwens de basis van het OPO. Alle opdrachten enz. vind je daar. Deze site is een belangrijk deel van de cursus, nl. het stukje ‘cursusdocumenten’.

Deze cursustekst maakt gebruik van verschillende elementen:

• Elk deeltje begint met een overzicht van de leerdoelen.
• Tekst is nog steeds een belangrijk onderdeel van een site, en dus ga ik een uitleg in de vorm van tekst niet uit de weg.
• Vaak is het ook nuttig om dingen te tonen en dan is een opname meer op zijn plaats. Je ziet meestal mijn scherm, met code en het resultaat van deze code in een browser. Die video's zijn wat ze zijn: ik heb niet de tijd voor zware video-editing. Bovendien zorgt ons videoplatform (Kaltura) geregeld voor redelijk felle compressie. Ik hoop dat ze toch voldoende duidelijk zijn.

• Ik geef al les web design / front-end sinds 1997. Ondertussen heb ik een goed idee van waar de moeilijkheden zitten, wat studenten vaak fout doen, belangrijke zaken die over het hoofd gezien worden enz. Dit soort van kaders vraagt in dit verband je aandacht. Lees je de opmerking grondig en probeer je er aan te denken bij het uitwerken van je site?

• Als developer hoef je niet altijd het wiel uit te vinden (al vind ik wel dat er ook een zekere verdienste zit om toch eens één keer een wiel helemaal zelf te maken!). Er bestaan heel wat goede opnames waarin developers technieken uitleggen. Ik ben in het bijzonder fan van de video's van Kevin Powell. Die naam (en ook een paar andere) zal je geregeld zien passeren in deze cursustekst.
• Dingen die je kan intypen in je editor zoals HTML-elementen, CSS-regels, JS-eigenschappen staan als volgt aangegeven in de tekst: html, main, background-color, addEventListener() enz.
• HTML-, CSS en JS-code staat altijd in een donkere rechthoek. Soms zal je even moeten naar rechts scrollen om alle code te zien. Zo ziet de HTML-code van het begin van dit topic er als volgt uit:

  <h1>Welkom!</h1>
  <p><img src="/assets/Logo_UCLL_negatief_RGB.png" alt="UCLL" class="links" > Welkom 
    op de site die hoort bij het OPO (‘OPleidingsOnderdeel’) <em>front-end basis</em> 
    van de opleiding ‘graduaat programmeren’ in het afstandstraject van de UCLL hogeschool.
  </p>

• Dit soort van kaders nodigen je uit om over iets na te denken, een kleine oefening te maken, … Neem je editor erbij en probeer eens de uitleg uit het bijhorende stukje in de praktijk te brengen en zo de vraag te beantwoorden. Weet je wat ik misschien wel het allerbelangrijkste principe in webdesign vind? Klik op de knop hieronder om het antwoord te krijgen.

  Toon / verberg oplossing

  Ik vind het belangrijk om nooit te vergeten dat je dingen voor mensen bouwt. Jouw werk als developer heeft de kracht om dingen voor mensen mogelijk te maken. Zeker als het gaat over mensen met een handicap kan jouw code het verschil maken. Dankzij moderne technologie kan een blinde gebruiker nu een website bezoeken, dingen bestellen online enz … tenzij je als developer totaal geen rekening hield met toegankelijkheid.

Praktische uitwerking site

Dit is een statische site. Daarmee wordt bedoeld dat ze niet gegenereerd wordt op de server op basis van inhoud uit een databank. Deze site is helemaal handgecodeerd in HTML, CSS en JS. Er is geen enkel framework gebruikt. Practise what you preach …

Technisch is ze gemaakt met behulp van de SSG Astro (OK, ik geef toe, Astro is eigenlijk een framework …), zodat ik de eigenlijke inhoud van elke pagina kan inpluggen in een basislay-out en structuur. Ik had nog nooit met een SSG gewerkt en vond in deze cursustekst een ideale gelegenheid om het eens uit te testen. Meer dan de basis van Astro heb ik trouwens niet gebruikt.

Ik wens je veel plezier bij deze eerste stap op je pad als front-end developer.

Jan Van Hee, lector front-end in graduaat programmeren en bachelor Toegepaste informatica