Skip to content
eelcodijkstra edited this page Jun 30, 2019 · 5 revisions

Welkom bij de handleiding voor de inf2019-website!

Deze website is de "startpagina" voor het lesmateriaal van de keuzethema's van het informatica curriculum 2019. Dit materiaal is in opdracht van SLO ontwikkeld door teams van docenten/vakdidactici/inf-steunpuntcoördinatoren.

We beschrijven hier hoe de website georganiseerd is, en hoe je de pagina's kunt aanpassen.

De website inf2019 maakt gebruik van Jekyll en Github Pages:

Een aanpassing in de bronbestanden (.md-bestanden, enz.) wordt door deze programma's automatisch verwerkt tot een statische html-website. We gebruiken als

Aanpassingen test je eerst uit in de staging website; als dit er goed uit ziet, kun je een "Pull Request" indienen om de veranderingen over te brengen naar de production website. We handelen deze verzoeken handmatig af, maar we proberen dit altijd zo vlot mogelijk te doen.

GitHub

Opmerkingen, vragen, suggesties, enz. bij de website kun je plaatsen via de "issues"-tab van het project. Hiervoor heb je een (gratis) GitHub-account nodig.

Om de tekst van de website aan te kunnen passen, als lid van een ontwikkelteam, moet je als "collaborator" bij dit project aangemeld worden. Neem daarvoor contact op met .... Ook hiervoor heb je een GitHub-account nodig.

Deze website gebruikt GitHub voor het bewaren van de bestanden, en GitHub Pages voor het publiceren. Een verandering in een pagina in dit GitHub-project resulteert na enige tijd (enkele seconden, meestal) in een verandering van de gepubliceerde website. Dit betekent dat je voorzichtig moet zijn met de "save" functie in de GitHub editor: gebruik eerst de "preview" om het resultaat te beoordelen.

Jekyll/Liquid/Markdown

Deze (statische) website gebruikt GitHub Pages via Jekyll. Jekyll genereert de html-bestanden voor de website uit de bronbestanden (.md-bestanden, include-bestanden, enz.). De meeste bronbestanden zijn in het Markdown-formaat (.md). Binnen Markdown kun je, als je dat nodig denkt te hebben, ook rechtstreeks html-code gebruiken.

Zowel de .md- als de .html-bronbestanden worden verwerkt door de Liquid template-machinerie. Deze verwerkt de constructies met accolades, zoals {{ page.title }} en {% if %}.

Thema-teams

Elk thema-ontwikkelteam heeft een eigen plek op deze website:

  • een "home" pagina <<thema>>.md in /_themas
    • bijvoorbeeld: /_themas/databases.md
  • een folder <<thema>> in /_themas
    • bijvoorbeeld: `/_themas/

De thema-pagina bevat de belangrijkste informatie voor bezoekers. In de folder kun je bijvoorbeeld plaatsen:

  • download-bestanden voor je thema
  • plaatjes
  • subpagina's

Een verwijzing naar het bestand hoofdstuk1.pdf in de thema-folder computational-science ziet er in Jekyll/Markdown als volgt uit:

[tekst...]({{ site.baseurl }}/themas/computational-science/hoofdstuk1.pdf)

Merk op dat in dit geval de _ van de _themas-folder verdwenen is.

Markdown

De .md-pagina's zijn geschreven in Markdown; voor niet al te ingewikkelde teksten werkt dit veel handiger dan puur html. In de GitHub-editor kun je "Markdown" instellen; dan krijg je ook een aantal knoppen met veel gebruikte instellingen en een "hulp"-knop bovenin. Bovendien kun je via de "Preview"-tab zien hoe e.e.a. er geformatteerd uitziet.

Meer informatie over (GitHub-)Markdown vind je bijvoorbeeld via:

Jekyll

Jekyll gebruikt, zoals gezegd, Markdown voor de opmaak van tekst, en daarnaast Liquid als templating engine. Deze laatste wordt onder andere gebruikt voor het opmaken van pagina's, zie bijvoorbeeld de bestanden in _layouts en _includes. Haakjesparen als {{ ... }} en {% ... %} geven het gebruik van Liquid-elementen aan.

links

  • Voor een absolute interne link gebruik je {{ site.baseurl }}/map/bestand. Voor map gebruik je geen _: deze wordt alleen in de bronversie gebruikt, in de html-versie verdwijnt deze. Voor bestand gebruik je geen .md: het markdown-bestand (.md) wordt omgezet in een html-bestand, de link wordt daarop automatisch aangepast.
  • voor een externe link is het default-gedrag dat deze in hetzelfde browser-venster opent. Vaak is het handiger om deze in een nieuw venster/tabblad te openen. Voeg daarvoor aan het eind van de link toe: {:target="_blank"}.
    Voorbeeld: [i&i](https://ieni.org){:target="_blank"}