FDND Style Guide

Omdat we heel veel verschillende pagina's op dezelfde manier willen vormgeven.

Kopteksten

Er worden zes heading levels gebruikt binnen de FDND pagina's, aangeduid door <h1>, <h2>, <h3>, <h4>, <h5> en <h6>. Deze dienen op correcte wijze te worden genest zodat de document outline een nette hierarchie heeft.


Heading level 1

<h1> wordt één keer per pagina gebruikt en staat in het <header> element.

Heading 2

<h2> wordt één keer per <section> of <article> toegepast welke in het <main> element staan.

Heading 3

<h3> mag per <section> of <article> meerdere keren voor komen nadat er binnen het parent element minstens een <h2> element aan vooraf gaat.

Heading 4

<h4> op zelfde wijze als <h3> maar er gaat binnen het parent element minstens een <h3> element aan vooraf.

Heading 5

<h5> op zelfde wijze als <h4> maar er gaat binnen het parent element minstens een <h4> element aan vooraf.

Heading 6

<h6> op zelfde wijze als <h5> maar er gaat binnen het parent element minstens een <h5> element aan vooraf.

Basis elementen

Paragraven

<p> heeft een neutrale vormgeving waarbij kleuren worden bepaald door het kleurenschema van het omringende <article> of <section> element.

p + p krijgt een margin aan de bovenkant bij de 2e paragraaf zodat lappen tekst opgedeeld worden en makkelijker te lezen zijn.

Links

<a href=""> wordt toegepast binnen de lopende tekst in een paragraaf. Links binnen de pagina worden anders weergegeven als links buiten de pagina, deze krijgen een icoon om te laten zien dat er van de huidige site weg genavigeerd wordt.

Links naar bestanden met een .pdf en .doc of een .zip, .rar en .tar extensie krijgen automatisch een icoon toebedeeld.

Lijsten

Het <ul> element:

Het <ol> element:

  1. is bedoeld voor lijsten met volgordelijkheid
  2. wordt weergegeven met cijfers als lijstaanduiding.

Gangbare Inline elementen

<abbr> geeft de uitwijding van afkortingen als Ad en FDND weer. Er verandert niets qua opmaak maar je kunt erover hoveren om de title te zien.

<b> staat voor b(ring to attention) en vestigt aandacht zonder verdere semantische waarde toe te kennen.

<code> wordt weergegeven op een manier die laat zien dat het om een kort codefragment gaat. Wij gebruiken dit om bestandsnamen als ./README.md of CLI commando's als git pull op te nemen in een paragraaf.

<em> staat voor em(phasize) en wordt gebruikt om semantische nadruk te geven.

<i> staat voor i(diomatic text) wordt gebruikt voor technische terminologie, jargon etc. zonder verdere semantische waarde toe te kennen.

<mark> markeert een stuk tekst alsof je er met een highlighter overheen gegaan bent.

<strong> staat voor strong(ly emphasize) en wordt gebruikt om sterke semantische nadruk te geven.

<time datetime=""> geeft een tijd of datum gerelateerde verwijzing aan, bijvoorbeeld .

Obscure Inline elementen

<del> representeert een stuk tekst dat uit het document verwijderd is. Het wordt herkenbaar opgemaakt met een achtergrond in de highlight kleur en doorgehaalde tekst. Ook staat er een min-teken voor de tekst die verwijderd wordt.

<ins> representeert een stuk tekst dat aan het document toegevoegd is. Het wordt herkenbaar opgemaakt met een achtergrond in de highlight kleur en er staat een min-teken voor de tekst die verwijderd wordt.

<kbd> maakt knopjes als Ctrl + Shift

<s> haalt een stuk tekst door.

<sub> is subschrift voor de cijfers in scheikundige formules zoals C8H10N4O2 beter bekend als caffeïne en C18H27NO3 beter bekend als capsaïcine.

<sup> is superschrift voor voetnoten1 of wiskundige formules als de stelling van Pythagoras: a2 + b2 = c2 of Einsteins relativiteitstheorie: E=mc2.

Verwijzingen of citaten

Bij het maken van verwijzingen hanteren we zo veel mogelijk de richtlijnen van APA Style In-Text Citations.

Voor verwijzingen worden een aantal HTML elementen in samenhang toegepast, hier onder een overzicht van de gebruikte elementen.

<blockquote> wordt gebruikt om een citaat langer dan 40 woorden op te nemen. Geeft een blok-citaat weer als apart element in de tekst en wordt onderscheidend opgemaakt.

<cite> bevat de referentie naar een creatief werk en behoort de titel van het werk te bevatten.

<q> wordt gebruikt om een citaat korter dan 40 woorden op te nemen. Geeft een inline quote weer binnen een paragraaf welke qua stijl niet verschilt van normale alineatekst.

Voet- of eindnoten

Er is nogal wat discussie over de manier van toepassen van voet- of eindnoten op websites. Voor de gemiddelde website is dit niet zo'n punt maar in de vertaling van onze documenten naar het web zullen we niet zonder noten kunnen. Jukka Korpela (2007) geeft een overzicht van de discussie op de website: https://jkorpela.fi/www/fn.html

Korte verwijzingen (< 40 woorden)

Korte verwijzingen staan in de lopende tekst van een paragraaf. De auteur en de datum van het originele werk kunnen gescheiden door een komma opgenomen tussen haakjes in of aan het eind van een zin, altijd opgenomen in een <cite> element:

<q><cite></cite></q> Bij de opening van de olympische spelen in Londen werd de beroemde uitspraak: This is for everyone (Lee, 2018), geprojecteerd op de tribunes.

In een lopende zin mag de auteur genoemd worden en enkel de datum van de bron tussen haakjes achter de auteur geplaatst worden:

<cite></cite><q></q> Sir Tim Berners Lee (1997) zegt dat de echte kracht van het web in haar universaliteit ligt.

In sommige gevallen kan er meer tekst binnen de haakjes van de verwijzing opgenomen worden en is een <cite> element voldoende, plaats dan komma's om het jaartal.

<cite></cite> Het web is bedacht als netwerk voor wetenschappelijke documenten bij CERN (zie Lee, 1989, voor meer uitleg) maar heeft inmiddels de hele wereld veroverd.

In bovenstaande gevallen dient de volledige bronvermelding in een bronnenlijst opgenomen te worden aan het eind van de pagina of op een speciale pagina.

Een directe bronvermelding mag ook, door een link op te nemen in een <cite> element.

<cite><a href=""></a></cite> In de context van het <cite> element mag naar allerlei creatieve werken verwezen worden (Bron: The Citation element).

Lange verwijzingen (> 40 woorden)

Lange verwijzingen worden als afzonderlijk blok opgemaakt en opgenomen in een <blockquote> element. Gebruik hierbij geen aanhalingstekens. Als er meer paragraven in het citaat staan wordt elke volgende paragraaf ingesprongen. De auteur en de datum van het originele werk of een directe bronvermelding worden, gescheiden door een komma, opgenomen tussen haakjes aan het eind van het citaat in een <cite> element.

<blockquote><cite></cite></blockquote> His followers called him Mahasamatman and said he was a god. He preferred to drop the Maha- and the -atman, and called himself Sam. He never claimed to be a god. But then, he never claimed not to be a god. Circumstances being what they were, neither admission could be of any benefit. (Zelasny, 1967)

Bij een narratieve manier van verwijzen heeft een introducerende alinea waarin de auteur in een lopende zin genoemd wordt in een <cite> element. Achter het citaat wordt in een tweede <cite> element het paginanummer of de directe link naar de bron opgenomen maar kunnen de auteur en het jaartal weggelaten worden.

<p><cite></cite></p><blockquote><cite></cite></blockquote> Tim Berners Lee (1989) schreef toen hij bij CERN werkte de inmiddels wereldberoemde fundamenten voor ons internet:

We should work toward a universal linked information system, in which generality and portability are more important than fancy graphics techniques and complex extra facilities.

The aim would be to allow a place to be found for any information or reference which one felt was important, and a way of finding it afterwards. The result should be sufficiently attractive to use that it the information contained would grow past a critical threshold, so that the usefulness the scheme would in turn encourage its increased use.

(Bron: Information Management: A Proposal )

Bronnenlijst

Een bronnenlijst bestaat over het algemeen uit vier zaken per bron: auteur, datum, titel en bron. Elk van deze zaken beantwoord een vraag.

Consistentie in het opmaken van bronnen helpt bezoekers het werk wat je gebruikt te begrijpen en de belangrijke verwijzingen snel op te zoeken. Hier onder staan een aantal voorbeelden van verwijzingen naar tekstuele- en online werken. Kijk voor meer typen bronnen naar voorbeelden op de apa.org website.

Tekstuele werken

Dochy, F. & Berghmans, I. (2015) Bouwstenen voor High impact learning. Amsterdam, Nederland: Boom Lemma Uitgevers.

Merriënboer, J.J.G. & Kirschner, P.A. (2013) Ten Steps to Complex Learning. (2nd ed) New York, USA: Routledge.

Zelasny, R. (1967) Lord of Light. (ed aug. 2006) London, GB: Gollancz.

Online werken

Lambert, S. (2016, 16 mei) Creating A Living Style Guide: A Case Study. Smashing Magazine. Geraadpleegd 19 mei 2022, van https://www.smashingmagazine.com/2016/05/creating-a-living-style-guide-case-study/

Lee, Sir T.B. (1989, maart) Information Management: A Proposal. CERN. Geraadpleegd 19 mei 2022, van https://www.w3.org/History/1989/proposal.html