HF 1 : Website bouwen met CRM
1.0 BOUWSTENEN- HTML/CSS/JAVASCRIPT
De browser op jouw toestel waarmee je een webpagina bekijkt ontvangt typisch 3 verschillende
types instructietalen van de webserver. Ieder van die 3 talen heeft een ander doel, en is
gespecialiseerd voor dat doel. We hebben het over:
HTML5 : taal waarmee je web pagina's opbouwt
CSS3: taal waarmee je webpagina's hun opmaak geeft
JavaScript: taal waarmee je logica programmeert in een webpagina
1.1 HTML (H YPER TEKST MARKUP LANGUAGE )
HTML ondersteunt hypertekst: documenten &
bestanden die verbonden zijn door direct volgbare
verwijzingen, de zogenaamde hyperlinks.
Het is ook een opmaaktabel: met notaties, vr kopjes,
vindeling in paragrafen, van tabellen en van afbeeldingen
en multimedia
Bestaat uit platte tekst met markeringstekens (tags)
Volgens HTML5 standaard => bedoeling dat de tags in
het document alleen structuur en algemene
eigenschappen vd tekst aangeven, terwijl de details vd
presentatie apart vh document w gespecifieerd, het CSS
document. => voordeel: opmaak gewijzigd w van alle
documenten tegelijk => aangepast op eigenschappen v
gebruiker : kleurenblind of weergevende apparaat (klein
beeldscherm, zwart-wit papier)
1.2 CSS3 (C ASCADING SYLE SHEETS)
Styles definieert hoe HTML elementen moeten weergegeven w
Styles werden aan HTML 4.0 toegevoegd omdat stijlen opnemen in de HTML tekst niet flexibel
was
Probleemoplossend:
o Probleem: HTML was oorspronkelijk bedoeld voor het vastleggen van
documentinhoud zonder specifieke opmaakinstructies. Echter, met de
toevoeging van tags zoals font en kleurattributen in de HTML 3.2 specificatie
ontstond het probleem van inconsistente stijlinstructies op verschillende
pagina's, wat leidde tot aanzienlijke tijdsinvesteringen om een uniforme stijl
op websites te handhaven.
o Oplossing: door vanaf HTML 4 het concept van CSS te introduceren is nu het
formateringsdetail losgekoppeld, en kun je vlot de looks van een hele
website wijzigen zonder iets aan de HTML te moeten wijzigen.
1.3 JAVASCRIPT
Synoniem: dynamic HTML
De tag <script> geeft aan dat wat nu volgt geen HTML meer is
maar de taal van JavaScript
Mogelijkheid om wegbpagina’s interactief te maken
, 1.4 WAAROM MAG FLASH NIET MEER?
Wegblijven van andere talen en technologie als deze de werking op bv tablets, pc’s en
smartphones verstoren/nt werken => beruchte voorbeeld van platformprobleem : ‘Flash’ ( adobe)
en ‘Silverlight’ (microsoft) Video met uitleg op canva module website bouwen
2.0 CMS (=CONTENT MANAGEMENT SYSTEEM)
2.1 WAT IS EEN CMS?
= software oplossing waarbij zonder technische kennis over website development met een
WYSIWYG (what you see is what you get) editor een vrij toonbare website kan ontwikkeld w.
Gemakkelijke stijl templates om consistente look tssn webpagina’s te behouden
2.2 WRM EEN CMS GEBRUIKEN ?
Basisvoordeel: communicatieverantwoordelijke binnen bedrijf die geen ICT deskundige is vlot
ermee kan werken.
2.3 OPLOSSINGVORMEN
Vroeger kocht je duur kant en klaar software pakket (COTS, common of the shelve software) maar
continue blijven ontwikkelen daarin is duur DUS:
Public cloud oplossing:
O Kant en klare technologische oplossing met een CMS
O Gwn zelf nog website aanmaken met CMS
Soms incl webshop
O Je moet geen rekening houden met beheer, security,…
Open source oplossing:
O Je krijgt software uit de community
O Je moet nu wel beslissen wie het technisch onderhoud waarneemt, waar dit gehost
wordt, wanneer je naar een volgende versie overgaat, enz...
Of je gaat volledig voor maatwerk:
O Veel custom geprogrammeerd
O Afhankelijk vh servicebedrijf om wijzigingen aan te brengen aan je website => veel
duurder / vast aan dienstverlener
3.0 EEN ICT VENDOR EVALUEREN
Rekening houden met
Product:
o heeft het de gewenste kwaliteit, performantie en functionaliteit?
o Volgt het standaarden?
, o Hvl klanten zijn er momenteel momenteel die dit product gebruiken/ wat is het
marktaandeel?
Prijs:
o Hoe relateert de prijs tot het scenario dat je wil volgen?
o Heb je veel bezoekers moet je bijbetalen? Extra kosten? ….
Service:
o Kun je hulp krijgen van dit bedrijf indien nodig, of is er enkel een mailadres waar
niemand op reageert... Wat is het serviceniveau dat men kan aanbieden. Zijn ze 24x7
bereikbaar ? Waar zitten ze fysisch. Welke talen worden ondersteund
HF 2 : Website usability
Best practice
TOEGANKELIJKHEID
Laden vd webpagina verloopt voldoende snel
Voldoende contrast tssn tekst en achtergrond
, Font grootte en lijnafstanden bieden een goede leesbaarheid
Wees spaarzaam met animatie (gn flash maar trio)
Beelden voorzie je van een ALT Tag die samenvat waar het plaatje over handelt
o ALT Tag: Vr zoekmachines zoals Google is het essentieel om Alt Tags toe te voegen
aan afbeeldingen, dit vertelt hun waar de afbeelding over gaat, zodat jouw
productfoto vindbaar en geïndexeerd id zoekresultaten.
Site heeft een Not-found/404 redirect Pagina
Website maakt gebruik van responsive design
o Responsive design: = een benadering van webdesign waarbij de web developer
streeft nr een optimale webervaring vr een breed scala aan apparaten (men raadt
zelfs aan om website te ontwerpen als mobile first)
IDENTITEIT
Bedrijfslogo goed zichtbaar (maar nt overdreven groot)
Toon een heldere bedrijfsslogan
Home-pagina valt in 5sec te snappen
Bedrijfsinfo makkelijk te vinden + vertrouwen scheppen
HTTPS & SSL
o HTTPS: De extra S’’ staat vr Secured, info wordt namelijk versleuteld zodat alleen
verstuurder en ontvanger de info kunnen lezen (kan dus nt door kwaadwillende
partijen gezien w) + te herkennen aan groene hangslot aan adresbalk
Wrm zo belangrijk?: zndr een SSL certificaat kan ongecodeerde info ergens in
het netwerk w onderbroken, gevangen en verzameld. HTTP is onveilig
(kunnen ze ‘meeluisteren); het beschermd nt alleen data van uw bezoeker
maar zorgt er ook voor dat de gebruiker echt verbinding maakt met de juiste
site (nt een nep-website) Google beloont je door het gebruik van dit met
hoger in de zoekresultaten te staan
NAVIGATIE
Heldere navigatiestructuur met korte tekstlabels
Niet teveel navigatie-elementen
Als je op het bedrijfslogo klikt, ga je naar de home-pagina
Links moeten consistent onderlijnd en herkenbaar zijn
Zorg voor een zoekveld
INHOUD
Gebruik titels die helder beschrijven waarover de onderliggende tekst gaat.
Wat belangrijk is bevindt zich boven de vouw (= ondergrens vh scherm, alles dat je kan lezen
zonder te moeten scrollen)
Consistent gebruik van stijl en kleur
Advertenties & pop-ups spaarzaam gebruiken
Minder is meer
URL’s die betekenis hebben en gebruiksvriendelijk zijn
HTML pagina titels geven het doel van de pagina wee
HF 3 : AI prompt writing
PROMPT BEST PRACTISES
GIGO (GARBAGE IN, GARBAGE OUT)
Als je je instructie prompt nt verzorgt, zonder na te denken/kennis opstelt => krijg je
onbruikbare rommel als output
1.0 BOUWSTENEN- HTML/CSS/JAVASCRIPT
De browser op jouw toestel waarmee je een webpagina bekijkt ontvangt typisch 3 verschillende
types instructietalen van de webserver. Ieder van die 3 talen heeft een ander doel, en is
gespecialiseerd voor dat doel. We hebben het over:
HTML5 : taal waarmee je web pagina's opbouwt
CSS3: taal waarmee je webpagina's hun opmaak geeft
JavaScript: taal waarmee je logica programmeert in een webpagina
1.1 HTML (H YPER TEKST MARKUP LANGUAGE )
HTML ondersteunt hypertekst: documenten &
bestanden die verbonden zijn door direct volgbare
verwijzingen, de zogenaamde hyperlinks.
Het is ook een opmaaktabel: met notaties, vr kopjes,
vindeling in paragrafen, van tabellen en van afbeeldingen
en multimedia
Bestaat uit platte tekst met markeringstekens (tags)
Volgens HTML5 standaard => bedoeling dat de tags in
het document alleen structuur en algemene
eigenschappen vd tekst aangeven, terwijl de details vd
presentatie apart vh document w gespecifieerd, het CSS
document. => voordeel: opmaak gewijzigd w van alle
documenten tegelijk => aangepast op eigenschappen v
gebruiker : kleurenblind of weergevende apparaat (klein
beeldscherm, zwart-wit papier)
1.2 CSS3 (C ASCADING SYLE SHEETS)
Styles definieert hoe HTML elementen moeten weergegeven w
Styles werden aan HTML 4.0 toegevoegd omdat stijlen opnemen in de HTML tekst niet flexibel
was
Probleemoplossend:
o Probleem: HTML was oorspronkelijk bedoeld voor het vastleggen van
documentinhoud zonder specifieke opmaakinstructies. Echter, met de
toevoeging van tags zoals font en kleurattributen in de HTML 3.2 specificatie
ontstond het probleem van inconsistente stijlinstructies op verschillende
pagina's, wat leidde tot aanzienlijke tijdsinvesteringen om een uniforme stijl
op websites te handhaven.
o Oplossing: door vanaf HTML 4 het concept van CSS te introduceren is nu het
formateringsdetail losgekoppeld, en kun je vlot de looks van een hele
website wijzigen zonder iets aan de HTML te moeten wijzigen.
1.3 JAVASCRIPT
Synoniem: dynamic HTML
De tag <script> geeft aan dat wat nu volgt geen HTML meer is
maar de taal van JavaScript
Mogelijkheid om wegbpagina’s interactief te maken
, 1.4 WAAROM MAG FLASH NIET MEER?
Wegblijven van andere talen en technologie als deze de werking op bv tablets, pc’s en
smartphones verstoren/nt werken => beruchte voorbeeld van platformprobleem : ‘Flash’ ( adobe)
en ‘Silverlight’ (microsoft) Video met uitleg op canva module website bouwen
2.0 CMS (=CONTENT MANAGEMENT SYSTEEM)
2.1 WAT IS EEN CMS?
= software oplossing waarbij zonder technische kennis over website development met een
WYSIWYG (what you see is what you get) editor een vrij toonbare website kan ontwikkeld w.
Gemakkelijke stijl templates om consistente look tssn webpagina’s te behouden
2.2 WRM EEN CMS GEBRUIKEN ?
Basisvoordeel: communicatieverantwoordelijke binnen bedrijf die geen ICT deskundige is vlot
ermee kan werken.
2.3 OPLOSSINGVORMEN
Vroeger kocht je duur kant en klaar software pakket (COTS, common of the shelve software) maar
continue blijven ontwikkelen daarin is duur DUS:
Public cloud oplossing:
O Kant en klare technologische oplossing met een CMS
O Gwn zelf nog website aanmaken met CMS
Soms incl webshop
O Je moet geen rekening houden met beheer, security,…
Open source oplossing:
O Je krijgt software uit de community
O Je moet nu wel beslissen wie het technisch onderhoud waarneemt, waar dit gehost
wordt, wanneer je naar een volgende versie overgaat, enz...
Of je gaat volledig voor maatwerk:
O Veel custom geprogrammeerd
O Afhankelijk vh servicebedrijf om wijzigingen aan te brengen aan je website => veel
duurder / vast aan dienstverlener
3.0 EEN ICT VENDOR EVALUEREN
Rekening houden met
Product:
o heeft het de gewenste kwaliteit, performantie en functionaliteit?
o Volgt het standaarden?
, o Hvl klanten zijn er momenteel momenteel die dit product gebruiken/ wat is het
marktaandeel?
Prijs:
o Hoe relateert de prijs tot het scenario dat je wil volgen?
o Heb je veel bezoekers moet je bijbetalen? Extra kosten? ….
Service:
o Kun je hulp krijgen van dit bedrijf indien nodig, of is er enkel een mailadres waar
niemand op reageert... Wat is het serviceniveau dat men kan aanbieden. Zijn ze 24x7
bereikbaar ? Waar zitten ze fysisch. Welke talen worden ondersteund
HF 2 : Website usability
Best practice
TOEGANKELIJKHEID
Laden vd webpagina verloopt voldoende snel
Voldoende contrast tssn tekst en achtergrond
, Font grootte en lijnafstanden bieden een goede leesbaarheid
Wees spaarzaam met animatie (gn flash maar trio)
Beelden voorzie je van een ALT Tag die samenvat waar het plaatje over handelt
o ALT Tag: Vr zoekmachines zoals Google is het essentieel om Alt Tags toe te voegen
aan afbeeldingen, dit vertelt hun waar de afbeelding over gaat, zodat jouw
productfoto vindbaar en geïndexeerd id zoekresultaten.
Site heeft een Not-found/404 redirect Pagina
Website maakt gebruik van responsive design
o Responsive design: = een benadering van webdesign waarbij de web developer
streeft nr een optimale webervaring vr een breed scala aan apparaten (men raadt
zelfs aan om website te ontwerpen als mobile first)
IDENTITEIT
Bedrijfslogo goed zichtbaar (maar nt overdreven groot)
Toon een heldere bedrijfsslogan
Home-pagina valt in 5sec te snappen
Bedrijfsinfo makkelijk te vinden + vertrouwen scheppen
HTTPS & SSL
o HTTPS: De extra S’’ staat vr Secured, info wordt namelijk versleuteld zodat alleen
verstuurder en ontvanger de info kunnen lezen (kan dus nt door kwaadwillende
partijen gezien w) + te herkennen aan groene hangslot aan adresbalk
Wrm zo belangrijk?: zndr een SSL certificaat kan ongecodeerde info ergens in
het netwerk w onderbroken, gevangen en verzameld. HTTP is onveilig
(kunnen ze ‘meeluisteren); het beschermd nt alleen data van uw bezoeker
maar zorgt er ook voor dat de gebruiker echt verbinding maakt met de juiste
site (nt een nep-website) Google beloont je door het gebruik van dit met
hoger in de zoekresultaten te staan
NAVIGATIE
Heldere navigatiestructuur met korte tekstlabels
Niet teveel navigatie-elementen
Als je op het bedrijfslogo klikt, ga je naar de home-pagina
Links moeten consistent onderlijnd en herkenbaar zijn
Zorg voor een zoekveld
INHOUD
Gebruik titels die helder beschrijven waarover de onderliggende tekst gaat.
Wat belangrijk is bevindt zich boven de vouw (= ondergrens vh scherm, alles dat je kan lezen
zonder te moeten scrollen)
Consistent gebruik van stijl en kleur
Advertenties & pop-ups spaarzaam gebruiken
Minder is meer
URL’s die betekenis hebben en gebruiksvriendelijk zijn
HTML pagina titels geven het doel van de pagina wee
HF 3 : AI prompt writing
PROMPT BEST PRACTISES
GIGO (GARBAGE IN, GARBAGE OUT)
Als je je instructie prompt nt verzorgt, zonder na te denken/kennis opstelt => krijg je
onbruikbare rommel als output
