Merge remote-tracking branch 'refs/remotes/origin/master'

articles/conclusie/conclusie.md

@@ -0,0 +1,14 @@
+## Conclusie en samenvatting
+---
+Nou dat was een kleine reisje wat we gemaakt hebben. We begonnen bij een broodjeszaak en we eindigen met het maken van onze eigen data gedreven applicatie. Heel veel termen, concepten en andere dingen zijn langsgekomen. We hebben ook verschillende nieuwe dingen geleerd: hoe het internet werkt, wat data gedreven applicaties zijn en hoe Werkmanrooster werkt.  
+
+<sup>Elk hoofdstuk heeft een aparte conclusie en het herhalen van al die conclusie is een samenvatting, vandaar dat deze onderdelen zijn samengevoegd.</sup>
+
+---
+
+##### Summary
+Werkmanrooster or [rooster.io](http://github.com/96aa48/rooster.io) is a data-driven webapplication. This application works by [extracting information](/database) from the school [schedule website](http://roosters5.gepro-osi.nl/roosters/rooster.php?school=934). The extracted information is put into a [database](/opzoek) for storage and easy access.
+
+When a user connects to the website, multiple processes are at work to make sure that the information from the Werkmanrooster servers reaches the user. One of these processes is [`DNS`](/telefoonboek) or "Domain Name System", it translates domain names (`werkmanrooster.nl`) into an IP address so that the user can connect to the preferred server.
+
+When the user gets to the website and types in his or her name, rooster.io starts a set of processes in order to supply the user with his or her schedule. First, the name typed into the search bar is used to [go through](/opzoek) the previously [established database](/database). When a match is found, the  matched [database information](/opzoek) is used to acquire a link to the schedule on the school [schedule website](http://roosters5.gepro-osi.nl/roosters/rooster.php?school=934). The link is then used to download the user's schedule information. The downloaded information is then sorted to make it computer readable. The now computer readable information is then put into a [template](/templates) for design and consistency.

articles/dataapps/dataapps.md

@@ -1,4 +1,4 @@
-##### Data gedreven applicaties
+## Data gedreven applicaties
 ---
 Hoe Werkmanrooster werkt, is je waarschijnlijk nu duidelijk. Wat leuk is om te weten, is dat veel van de apps en programma's die jij dagelijks gebruikt, zijn in een zekere zin hetzelfde als Werkmanrooster of rooster.io. Wanneer een app of website veel informatie of data gebruikt, en deze data noodzakelijk is voor het functioneren van die app of website, dan spreken we over een "Data gedreven (web)applicatie". Voorbeelden van dit soort applicaties zijn: Facebook, Whatsapp, Instagram, Twitter, Skype, Marktplaats, Bol.com en Wehkamp. Wat zou Twitter zijn zonder tweets? Wat zou Bol.com zijn zonder producten. Deze applicaties en websites kunnen niet bestaan zonder het bestaan van de nodige data.
 

articles/database/database.md

@@ -1,9 +1,50 @@
-#### Leerlingen, Lokalen en Docenten
+# Leerlingen, Lokalen en Docenten
 ---
-We weten al hoe werkmanrooster jouw informatie gebruikt om het zoeken naar je rooster makkelijker te maken. Maar hoe komt werkmanrooster eigenlijk aan die informatie? Dat gaan we bespreken in dit hoofdstuk.
+We weten al hoe Werkmanrooster jouw informatie gebruikt om het zoeken naar je rooster makkelijker te maken. Maar hoe komt Werkmanrooster eigenlijk aan die informatie? Dat gaan we bespreken in dit hoofdstuk.
-  
+
 Werkmanrooster maakt gebruik van een zelfgeschreven script genaamd een "`crawler`". Deze crawler kan meerdere webpagina's afgaan om informatie te verkrijgen en deze opslaan. Dit doet hij door bepaalde patronen te herkennen in de webpagina's en daarmee de benodigde informatie herkennen. Het script heet in `spider.js` in het project.
 
 ---
-#### Een diepere ontleding
+## Een diepere ontleding
 Laten we wat beter kijken naar de manier waarop `spider.js` werkt.
+We nemen het gedeelte waar het belangrijkste gebeurd.
+
+![Rooster namen](http://i.imgur.com/89e4Y4M.png)
+
+```javascript
+// De variabele met de studenten bijv. "A6A - Bram van der Veen", "A6B - David Veenstra"
+var listOfStudents = cheerio('select', download).children();
+
+//Ga alle studenten in de lijst bij langs. (Werkt hetzelfde als each bij templates)
+for (student in listOfStudents) {
+  //Haal group, name en het leerlingnummer uit de student.
+  var group = student.split(' - ')[0];
+  var name = student.split(' - ')[1];
+  var id = student.value();
+
+  //Maak een dataobject wat later in de database gaat.
+  var databaseEntry = {
+    'id' : id,
+    'group' : group,
+    'username' : id + name.split(' ')[0],
+    'name' : name,
+    'first_name' : name.split(' ')[0],
+    'last_name' : name.split(' ').splice(1).join(' '),
+    'studentcategory' : studentcategory,
+    'type' : page.type.replace(/rooster/g, '')
+  }
+
+  //Stop het dataobject in de database
+  database.insert(databaseEntry);
+}
+```
+Aan de rechter kant zien we de lijst met mogelijke leerlingen als je een rooster wil opvragen op de normale rooster site. Aan de rechter kant zien we het stuk code wat deze informatie verwerkt. De lijst aan de linker kant is heel mooi georganiseerd. Als iets in een mooi patroon voorkomt kunnen we daar gemakkelijk code voor schrijven om er informatie uit te filtreren! Laten we langs de code gaan aan de rechter kant.
+
+De eerste stap die je ziet, is dat er een variabele wordt verklaard genaamd `listOfStudents`. Dit variabele houdt een object vast waar alle leerlingen in zitten. Vervolgens word er met het `for` `keyword` duidelijk gemaakt dat we voor elke `student` in de `listOfStudents` bij langs willen. Dit gebeurd tussen de `{` en de `}` die volgt na het `for` `keyword`. Er worden dan weer een set met variabele verklaard. Een variabele genaamd `name`, `group` en `id`. Wat deze variabelen vasthouden aan informatie is waarschijnlijk niet een schok. Hoe ze aan die informatie komen is wel wat moeilijker.
+
+Bij de declaratie van `name` bijvoorbeeld : `var name = student.split(' - ')[1]`, wat betekent dat? Het eerste gedeelte is nog wel te verklaren met wat je weet. Het variabele `name` is gelijk aan `student.split(' - ')[1]`, maar wat `.split(' - ')[1]` nou weer betekent, is je waarschijnlijk onbekend. De functie `split()` kun je zien als een soort schaar. Hij knipt namelijk op een gegeven punt (dat word doorgegeven tussen de haakjes) en geeft een dataobject terug waar een zin in stukjes zit. Dit is heel erg handig als je kijkt naar de lijst aan de linker kant. Je ziet dat elke keer als we een `student` nemen uit `listOfStudents` dat we dan iets krijgen zoals `A6A - Bram van der Veen`. We krijgen dus de naam er uit door dit te knippen met `.split()`. Dit doen we dan met door `' - '` door te geven. Want als we zo knippen, houden we een dataobject over met `A6A` en `Bram van der Veen`. Het enige wat we dan nog moeten doen is dan de goede selecteren. Dus doen we er een `[1]` achter. Waarom `1` en niet `0`? De manier waarop computers werken, is dat ze beginnen met tellen bij `0`, en dus is `0` het eerste wat we kunnen krijgen uit een object en `1` het tweede.
+
+Daar onder zien we een variabele genaamd `databaseEntry`, wat heel erg veel lijkt op het [dataobject](http://Werkmanrooster.nl/api/search?name=Bram van der Veen) uit het [archiefkast hoofdstuk](/opzoek). Dat komt omdat het gaat over hetzelfde object! De code die hier boven staat is dus verantwoordelijk voor het functioneren van rooster.io. Waar rooster.io een data gedreven applicatie is, is dit de data.
+
+---
+[Volgende >>](/handenuitdemouwen)

articles/handenuitdemouwen/webapp.md

@@ -0,0 +1,75 @@
+# Handen uit de mouwen
+---
+
+We gaan samen een data gedreven applicatie maken! Je dacht misschien dat het alleen bleef bij wat vertellen en misschien een conclusie, maar ik ga een stapje verder. Jij en ik, gaan gewoon even onze handen bij elkaar steken en gewoon iets op de wereld zetten samen. Maak je maar niet te veel zorgen, ik heb het meeste werk al gedaan. We hoeven alleen de laatste handen nog te leggen, maar hier valt veel van te leren.
+
+We hebben het volgende nodig:
+  * Een computer
+  * Een [zip](#) van het project
+  * Een programma waarmee je kan programeren (bijv [Atom](http://atom.io))
+  * Wat tijd en zin
+
+---
+Nadat je [Atom](http://atom.io) gedownload en ge"instaleerd hebt, is het tijd om de [zip](#) te downloaden waar het project in zit.
+Pak de zip uit in een map en ga de map binnen. Je ziet een paar dingen. Een bestand genaamd `node`, `app.js`, `database.json` en `web.js`. Het bestand wat voor ons belangrijk is, is het `app.js` bestand. Dit is namelijk waar we onze app gaan bouwen. Open `app.js` met [Atom](http://atom.io). Dit is wat je nu moet zien :
+
+```javascript
+//Handen uit de mouwen!
+
+//Importeren van het database dataobject
+var database = require('./database.json');
+var web = require('./web');
+
+var publishBuffer = '';
+
+//Loop door alle dingen van de database heen.
+for (entry of database.data) {
+  //Hier gaan wij programeren!
+  publishBuffer +=;
+}
+
+//We laten via het web zien wat we gedaan hebben.
+web.publish(publishBuffer);
+
+```
+
+Maak je maar geen zorgen, ik laat je niet zomaar alles zelf bedenken. Ik hou je hand vast terwijl ik je stap voor stap zeg wat we gaan doen. Laat ik beginnen met uitleggen wat er nu voor je neus staat. Aan het begin van het bestand zien we twee `var` verklaard worden. Het variabele `database` is een database van alle leerlingen, docenten en lokalen die publiek online verkrijgbaar zijn. Het variabele `web` is een object met functies die we kunnen gebruiken voor verschillende doeleinden, in ons geval iets aan het web laten zien. Een object met functies dat ge"importeerd word via `require()` noemen we een module.
+
+Dan hebben we een `var` genaamd `publishBuffer`, dit is een `string`. Een string word altijd aangegeven tussen quotes. Een string houd informatie vast zoals een woord of een zin, tussen die twee quotes. Hier is een voorbeeld van een string `'Dit is een string'`. Als het laatste zien we dat we een functie gebruiken van de `web` module. Met de functie `web.publish()` publiceren we een gegeven string naar het internet, die string is ons geval het `var` `publishBuffer`.
+
+Dan is er nog een stuk waar er staat `//Hier gaan we programeren`. Zoals de comment het aangeeft, is dit de plek waar wij gaan programeren. Het `for` `keyword` er boven zorgt ervoor dat we door alle dingen van de database heen gaan. Tussen de haakjes (`{` en `}`) kunnen we het variabele `entry` gebruiken om bij onze database te komen.
+
+---
+
+# Switch-a-roo
+
+Laten we beginnen met het schrijven van wat simpele code. Typ het volgende tussen de haakjes van het `for` `keyword` (Waar `//Hier gaan we programeren` staat).
+
+```javascript
+publishBuffer += entry + '\n';
+```
+**Stappenplan**: Zorg er vervolgens voor dat je het bestand heb opgeslagen. Ga nu weer terug naar het mapje wat je hebt uigepakt en klik en sleep `app.js` op `node` en laat los. Ga vervolgens naar deze [link](http://localhost:1025).
+
+ Wat je op die webpagina te zien krijgt is het resultaat van wat we net hebben geschreven. Je ziet waarschijnlijk heel vaak `[object Object]` staan, en dat klopt. We hebben namelijk iedere keer geprobeerd een object toe te voegen aan onze webpagina en `Javascript` laat het vervolgens zo zien. Laten we een kleine aanpassing maken waardoor we wat te zien krijgen.
+
+```javascript
+publishBuffer += entry.name + '\n';
+```
+
+Herhaal het stappenplan van eerder. En en refresh de [pagina](http://localhost:1025) waar je net op was.
+Er is wat veranderd! Je ziet namelijk niet meer `[object Object]` maar van alles wat, leerlingen, lokalen en docenten. Laten we nog een paar veranderingen maken, we gaan namelijk gebruik maken van het `if` `keyword` om een afweging te doen. We willen namelijk alleen nog maar docenten laten zien. Vervang alles tussen de haakjes van `for` met :
+
+```javascript
+//Als entry.type gelijk is aan (hetzelfde is als) 'docent'
+if (entry.type == 'docent') {
+  //Voeg het toe aan de publishBuffer
+  publishBuffer += entry.name += '\n';
+}
+```
+
+Herhaal het stappenplan net zoals bij de eerste keer en bekijk de resultaten. Je ziet als het goed is alleen nog maar de namen van docenten! We kunnen in het oneindig doorgaan met verschilende dingen verzinnen wat we met deze data kunnen doen. Het punt is, dat je zelf iets gemaakt hebt waar je informatie verwerkt op de manier waarop jij het wil. Als je zelf wat aanpassingen wil maken aan de code, doe het vooral, leef je uit! Als je terug gaat naar het hoofdstuk over de [archiefkast](/opzoek) dan zie je onderaan de pagina een voorbeeld dataobject. Dit dataobject gebruik jij ook. Als jij dus bijvoorbeeld `entry.type == 'leerling'` doet krijg je alleen maar leerlingen. Je kan ook mensen gaan filteren met dezelfde voornaam of achternaam.
+
+Bedenk ook een keer zelf een manier waarop je de informatie kan sorteren of verwerken, hoe je dit wil doen en pas de code aan. Herhaal de stappen van het stappenplan, blijf de code zo vaak aan passen als je wil en speel er gewoon wat mee. Weet gewoon dat je vandaag heb geprogrameerd, op een manier waarop ik ook ooit begon, met kleine stapjes. Ik hoop dat je het leuk vond!
+
+---
+[Volgende >>](/conclusie)

articles/index.md

@@ -1,24 +1,9 @@
-#### Hoe werkt Werkmanrooster?
+# Hoe werkt Werkmanrooster?
+## of data gedreven applicaties
+Door B. van der Veen, Atheneum 6 2016, begeleidt door B. Gelling, N&G Profiel Wiskunde
+
 ---
-Welkom bij mijn profielwerkstuk. Dit werkstuk bestaat uit een serie webpagina's die stap voor stap laten zien hoe Werkmanrooster werkt. Klik aan de link aan de onderkant van de pagina om naar de volgende pagina te gaan.
+Welkom bij mijn profielwerkstuk. Dit werkstuk bestaat uit een serie webpagina's die stap voor stap laten zien hoe Werkmanrooster werkt. Klik op de link aan de onderkant van de pagina om naar de volgende pagina te gaan.
 Bedankt voor het lezen!
 
----
-<!--
-Ik ben in de laatste paar weken druk bezig geweest met het maken van het nieuwe Werkmanrooster.
-Ik wil dit nu opnieuw gemaakte project gaan onderzoeken en aan de hand daarvan mensen uit leggen hoe de website achter de schermen werkt. (onderzoek)
-Ik ben hier aan toegekomen in de PWS week maar heb niet een geschreven deel waarvan er al uitleg is, ik heb het voorwerk gedaan om mijn uitleg zo begrijpbaar mogelijk te houden.
-Ik heb volgens mijn logboek nu 55 uur in mijn PWS zitten, dit is het meeste uitgegaan naar het maken van de nieuwe Werkmanrooster en de documentatie daarvan.
-In de zomervakantie ga ik bezig met het maken van een uitleg die voor iedereen te begrijpen is, dit zal dan ook de grond van mijn PWS worden.
-Je kunt de [Werkmanrooster site](http://werkmanrooster.nl) zien als het werk wat ik tot nu toe gedaan heb.
-
-Voor een "logboek" van mijn veranderingen en werk kun je [hier](http://git.werkmanrooster.nl/werkmanrooster/rooster-io/commits/master) terecht.
-Op deze website is alles wat ik heb gedaan bijgehouden met datum, tijd en de verandingen die ik gedaan heb.  
-Daarnaast is het project zelf (de code) [hier](http://git.werkmanrooster.nl/werkmanrooster/rooster-io) te vinden.
-
-Mijn geschreven PWS is deze website waar je nu op zit.  
-Voor het project van deze website kun je [hier terecht](http://git.werkmanrooster.nl/werkmanrooster/hoewerkt) en voor het [logboek hier](http://git.werkmanrooster.nl/werkmanrooster/hoewerkt/commits/master).
-
-De resultaten van de enquête die ik heb gedaan is [hier](https://docs.google.com/spreadsheets/d/1aFATRxpZHEEclkP5N8JychHlphkcezI4vAAl2nWqXe0/edit#gid=547327911) te vinden. -->
-
 [Naar de inleiding >>](/inleiding)

articles/inhetkort/broodjeszaak.md

@@ -1,20 +1,20 @@
-#### In het kort - De broodjeszaak
+# In het kort - De broodjeszaak
 ---
 Ik hoop dat ik je geen honger heb gegeven met deze titel, ik moet toegeven dat ik zelf ook honger kreeg toen ik dit voorbeeld bedacht.
-Laten we beginnen. Hoe Werkmanrooster werkt is vergelijkbaar met een broodjeszaak, een soort Subway. Als jij binnen komt bij een broodjeszaak, dan loop je naar de balie en bestel je een broodje. Dit broodje wordt dan vervolgens voor je gemaakt: er worden ingrediënten voorbereid en uiteinelijk op je broodje gedaan. Uiteindelijk word het broodje ingepakt in wat papier met wat servetten, daarna kan je genieten van je broodje.
+Laten we beginnen. Hoe Werkmanrooster werkt is vergelijkbaar met een broodjeszaak, een soort Subway. Als jij binnen komt bij een broodjeszaak, dan loop je naar de balie en bestel je een broodje. Dit broodje wordt dan vervolgens voor je gemaakt: er worden ingrediënten voorbereid en uiteindelijk op je broodje gedaan. Het broodje ingepakt in wat papier met wat servetten, daarna kan je genieten van je broodje.
 
 Dit lijkt allemaal vrij triviaal. Tuurlijk zou je zeggen, dat is inderdaad hoe een broodjeszaak werkt, dat hoef je me niet uit te leggen. Meeste mensen zullen ook vragen wat dit nou te maken heeft met Werkmanrooster. Een goede vraag om te stellen. Het is namelijk zo dat Werkmanrooster en heel veel andere websites, apps en programma's op een soortgelijke manier werken. Laten we kort kijken wat je doet bij Werkmanrooster om je rooster te krijgen.
 
-Je gaat naar [werkmanrooster.nl](http://werkmanrooster.nl) en typt je naam in bij de zoekbalk die je ziet. Werkmanrooster zoekt het rooster voor je op, en verwerkt de informatie tot een leesbaar rooster. Je ziet dat de webpagina voor je geladen wordt en je rooster verschijnt zo voor je neus met wat stijlvol webdesign.
+Je gaat naar [Werkmanrooster.nl](http://Werkmanrooster.nl) en typt je naam in bij de zoekbalk die je ziet. Werkmanrooster zoekt het rooster voor je op, en verwerkt de informatie tot een leesbaar rooster. Je ziet dat de webpagina voor je geladen wordt en je rooster verschijnt zo voor je neus met wat stijlvol webdesign.
 
 Laten we nu de broodjeszaak met Werkmanrooster vergelijken.
 
 | Stap | Broodjeszaak | Werkmanrooster |
 | :--: | ------------ | -------------- |
 |1| Je vraagt naar je broodje | Je vraagt naar je naam
-|2| Ingredienten worden verwerkt (klaargemaakt) | [Je rooster informatie wordt verwerkt](http://werkmanrooster.nl/api/search?name=Bram%20van%20der%20Veen)|
+|2| Ingredienten worden verwerkt (klaargemaakt) | [Je rooster informatie wordt verwerkt](http://Werkmanrooster.nl/api/search?name=Bram%20van%20der%20Veen)|
 |3| De ingredienten worden op je broodje gedaan| Je rooster informatie wordt gesorteerd in een leesbaar rooster|
-|4| Je broodje word ingepakt in wat papier en wat servetten| [Je rooster verschijnt voor je neus met wat stijlvol webdesign](http://werkmanrooster.nl/rooster/Bram%20van%20der%20Veen)|
+|4| Je broodje word ingepakt in wat papier en wat servetten| [Je rooster verschijnt voor je neus met wat stijlvol webdesign](http://Werkmanrooster.nl/rooster/Bram%20van%20der%20Veen)|
 
 Je ziet dat er in beide gevallen sprake is van opvragen.
 Er is beide gevallen sprake van het verwerken van grondstoffen, of het nou ingredienten zijn of informatie van een rooster.
@@ -23,21 +23,21 @@ Het uiteindelijk geheel word ingepakt om het gebruiksvriendelijker te maken.
 
 ---
 
-#### Hoe werktmanrooster
+## Hoe werktmanrooster
 
 Tijd om ons los te maken van de broodjes en de lekkere dingen. Tijd voor wat details, we gaan nu elke stap weer langs van rooster.io. Klik op de kopjes om alvast naar het bijhorende hoofdstuk te gaan.
 
-##### [Je gaat naar werkmanrooster.nl](/intypen)
+## [Je gaat naar Werkmanrooster.nl](/intypen)
-Voordat je naar de website gaat zijn er een paar dingen die gebeuren tussen jouw computer en het internet. Je typt `werkmanrooster.nl` in, in je adresbalk. Vervolgens word je gestuurd naar de website. Wat de meeste mensen niet weten is dat er aardig wat processen zijn verlopen in de tijd dat jij op enter hebt gedrukt en wanneer de webpagina voor jou laadt.
+Voordat je naar de website gaat zijn er een paar dingen die gebeuren tussen jouw computer en het internet. Je typt `Werkmanrooster.nl` in, in je adresbalk. Vervolgens word je gestuurd naar de website. Wat de meeste mensen niet weten is dat er aardig wat processen zijn verlopen in de tijd dat jij op enter hebt gedrukt en wanneer de webpagina voor jou laadt.
 
-##### [Rooster.io gaat een match zoeken van je zoekopdracht.](/opzoek)
+## [Rooster.io gaat een match zoeken van je zoekopdracht.](/opzoek)
 Nadat je naam is opgevraagd bij rooster.io gaat de webapplicatie bezig met het vergelijken van jou zoekopdracht met een database vol met informatie van leerlingen, docenten, klassen en lokalen. Als het een overeenkomst vind met jouw zoekopdracht en een stuk informatie in de database, dan wordt die informatie vervolgens gebruikt voor het maken van een rooster.
 
-##### [Het verkrijgen en verwerken van het rooster](/verkrijgen).
+## [Het verkrijgen en verwerken van het rooster](/verkrijgen).
 In deze stap gaat rooster.io bezig met het gebruiken van de gevonden informatie om een rooster op te halen. Hij doet dit door het downloaden van een rooster aan de hand van de informatie die hij heeft verkregen in de database. Vervolgens wordt deze informatie verwerkt zodat het laten zien kan worden op een webpagina.
 
-##### [Het renderen van het rooster](/renderen).
+## [Het renderen van het rooster](/renderen).
-Maar hoe zorgen we ervoor dat [dit](http://werkmanrooster.nl/api/schedule?name=Bram%20van%20der%20veen) er uit gaat zien als [dat](http://werkmanrooster.nl/rooster/Bram van der Veen)?  
+Maar hoe zorgen we ervoor dat [dit](http://Werkmanrooster.nl/api/schedule?name=Bram%20van%20der%20veen) er uit gaat zien als [dat](http://Werkmanrooster.nl/rooster/Bram van der Veen)?  
 Het laatste deel van de rooster.io weg is het geven van de informatie in de vorm van een webpagina. Het verwerkte rooster uit de vorige stap word gestopt in een voorontworpen templaat en word vervolgens gestuurd naar de gebruiker.
 
 [Volgende](/intypen)

articles/inleiding/inleiding.md

@@ -1,12 +1,12 @@
-#### Inleiding
+# Inleiding
 ---
 Heel veel mensen op het Werkmancollege locatie Stadslyceum gebruiken een alternatieve manier van hun rooster bekijken. Ze doen dit via Werkmanrooster, een door leerlingen opgerichte website voor het bekijken van je eigen rooster.  
 [Het eerste initiatief](http://web.archive.org/web/20101216064457/http://werkmanrooster.nl/) was van een paar leerlingen, later [overgenomen](http://web.archive.org/web/20140103031959/http://werkmanrooster.nl/) door Daniël Koster & Friso Wobben.  
 Sinds December 2014 was het mijn beurt om het domein te beheren.
 
-Mijn passie voor programeren en dingen uitzoeken heeft me de laatste paar jaar bezig gehouden met het steeds beter worden in het ontwikkelen van websites, applicaties en andere technische snufjes. Werkmanrooster is daar geen uitzondering van. Dit is dan ook de reden dat ik mijn profielwerkstuk hierover schrijf, omdat ik het heel leuk vind om uit te leggen hoe programeren te werk gaat en misschien mensen iets nieuws laten leren.
+Mijn passie voor programeren en dingen uitzoeken heeft me de laatste paar jaar bezig gehouden met het steeds beter worden in het ontwikkelen van websites, applicaties en andere technische snufjes. Werkmanrooster is daar geen uitzondering op. Dit is dan ook de reden dat ik mijn profielwerkstuk hierover schrijf. Ik vind het heel leuk vind om uit te leggen hoe programeren te werk gaat en misschien mensen iets nieuws laten leren.
-  
+
-Toen het mijn beurt was om Werkmanrooster te beheren, zijn er al veel versies van Werkmanrooster langsgekomen. Dit profielwerkstuk gaat over mijn tweede versie van Werkmanrooster, genaamd [`rooster.io`](http://git.werkmanrooster.nl/werkmanrooster/rooster-io). Dit is de versie van werkmanrooster die iedereen heeft gebruikt voor de twee jaar. Ik ga in dit profielwerkstuk aan jou uitleggen hoe het internet werkt, hoe Werkmanrooster werkt, wat data-gedreven applicaties zijn en nog veel meer.
+Toen het mijn beurt was om Werkmanrooster te beheren, zijn er al veel versies van Werkmanrooster langsgekomen. Dit profielwerkstuk gaat over mijn tweede versie van Werkmanrooster, genaamd [rooster.io](http://github.com/96aa48/rooster.io). Dit is de versie van Werkmanrooster die iedereen heeft gebruikt voor de laatste twee jaar. In dit profielwerkstuk gaan we samen opzoek naar de antwoorden op vragen zoals: hoe werkt het internet en hoe werken data gedreven applicaties? Maar ook vooral waar het hele profielwerkstuk over gaat: hoe werkt Werkmanrooster?
 
 ---
 [Volgende >>](/moeilijkheidsgraad)

articles/intypen/telefoonboek.md

@@ -1,9 +1,9 @@
-##### Je gaat naar de website - Telefoonboek
+# Je gaat naar de website - Telefoonboek
 ---
 Iedereen gebruikt het internet dagelijks, en vaak zonder te weten wat er eigenlijk allemaal gebeurd achter de schermen. Een van de dingen die vrijwel het vaakste word uitgevoerd is het gaan naar een website. Wat veel mensen niet weten is dat het internet net zo werkt als dat wij onze telefoons gebruiken.
-  
+
-Wanneer jij je beste vriend of vriendin wil opbellen toets je niet hun naam in je telefoon in, maar hun telefoonnummer. Het internet bestaat uit vergelijkbare nummers genaamd `ip`-addressen. `ip`-addressen zijn het fundament van hoe computers met elkaar communiceren. Elke computer, smartphone en laptop die verbonden is met een netwerk heeft een `ip` adres. Websites hebben ook een `ip` adres. Een `ip` adres kan van `0.0.0.0` tot `255.255.255.255` varieren. Maar hoe weet jouw computer nou welk ip adres hij moet hebben? Dat gaat via het `DNS` systeem. `DNS` staat voor 'Domain Name System', wat dat systeem doet is het vertalen van een 'domain name', zoals `werkmanrooster.nl`,  naar een `ip` adres (`85.214.232.210`).
+Wanneer jij je beste vriend of vriendin wil bellen toets je niet hun naam in je telefoon in, maar hun telefoonnummer. Het internet bestaat uit vergelijkbare nummers genaamd `ip`-addressen. `ip`-addressen zijn het fundament van hoe computers met elkaar communiceren. Elke computer, smartphone en laptop die verbonden is met een netwerk heeft een `ip` adres. Websites hebben ook een `ip` adres. Een `ip` adres kan van `0.0.0.0` tot `255.255.255.255` varieren. Maar hoe weet jouw computer nou welk ip adres hij moet hebben? Dat gaat via het `DNS` systeem. `DNS` staat voor 'Domain Name System', wat dat systeem doet is het vertalen van een 'domain name', zoals `Werkmanrooster.nl`,  naar een `ip` adres (`85.214.232.210`).
-  
+
 Op deze manier weet jouw computer waar hij moet zijn voor Werkmanrooster. Dit is handiger dan het `ip` adres uit je hoofd leren!
 
 ---

articles/moeilijkheidsgraad/eli5.md

@@ -1,29 +1,29 @@
-#### Moeilijkheidsgraad
+# Moeilijkheidsgraad
 ---
-#### EL15
+## ELI5
-Als je naar de titel van deze pagina kijkt dan denk je zeker, wat is dit nou weer voor een rare term. Vast voor iets gerelateerd aan programeren of zo iets moeilijks. Gelukkig voor jou, de lezer, is dat het omgekeerde. ELI5 is een term die is onstaan voor het makkelijker te begrijpen van moeilijke begrippen. ELI5 word vaak gebruikt in online gemeenschappen om te vragen naar de meeste makkelijk begrijpbare uitleg van een begrip, namelijk een uitleg die je ook zou geven aan een vijf jarige. Dit is om ervoor te zorgen dat mijn uitleg voor iedereen begrijpbaar zou moeten zijn. Bij elke pagina zal het van makkelijk naar steeds moelijker gaan verlopen om het zo goed mogelijk uit te leggen.
+Als je naar de titel van deze pagina kijkt dan denk je zeker, wat is dit nou weer voor een rare term. Vast voor iets gerelateerd aan programeren of zo iets moeilijks. Gelukkig voor jou, de lezer, is dat het omgekeerde. ELI5 is een term die is onstaan voor het makkelijker te begrijpen van moeilijke begrippen. Het staat letterlijk voor "Explain Like I'm 5". ELI5 word vaak gebruikt in online gemeenschappen om te vragen naar de meeste makkelijk begrijpbare uitleg van een begrip, namelijk een uitleg die je zou geven aan een vijf jarige. Dit is om ervoor te zorgen dat mijn uitleg voor iedereen begrijpbaar zou moeten zijn. Bij elke pagina zal het van makkelijk naar steeds moelijker gaan verlopen om het zo goed mogelijk uit te leggen.
 
-Mocht je de uitdaging aan willen om meer inzicht te krijgen in Werkmanrooster, dan daag ik je uit om de [code](http://github.com/96aa48/rooster.io) te lezen. Gelukkig heb ik rekening gehouden met potentiele lezers van de code. De code is goed gedocumenteerd met verschillende "comments" aangeduid met `//` en `/*`. Het is namelijk ook belangrijk dat je code leesbaar blijft voor mensen, naast de code optimaliseren van code voor computers voor maximale effeci"entie.
+Mocht je de uitdaging aan willen om meer inzicht te krijgen in Werkmanrooster, dan daag ik je uit om de [code](http://github.com/96aa48/rooster.io) te lezen. Gelukkig heb ik rekening gehouden met potentiele lezers van de code. De code is goed gedocumenteerd met verschillende "comments" aangeduid met `//` en `/*`. Het is namelijk ook belangrijk dat je code leesbaar blijft voor mensen, naast de code optimaliseren voor computers voor maximale effeci"entie.
 
 ---
-#### Rooster.io en code
+## Rooster.io en code
 
-Werkmanrooster is meer dan alleen wat webpagina's met roosters. Werkmanrooster is een kleine data-gedreven-webapplicatie. Dit wil zeggen dat Werkmanrooster zijn functioneren volledig afhangt van de data die ze heeft. Werkmanrooster is geschreven in verschillende programeertalen in de vorm van `code`. `Code` is een manier om een computer te laten weten wat hij moet doen. Dit klinkt allemaal heel moeilijk, maar het is niets meer dan een manier voor programmeurs te communiceren met computers. Wees vooral niet bang om wat nieuws te leren, want ik moet helaas soms de 'naakte' code laten zien om deze uitleggen.
+Werkmanrooster is meer dan alleen wat webpagina's met roosters. Werkmanrooster is een kleine data-gedreven-webapplicatie. Dit wil zeggen dat Werkmanrooster zijn functioneren volledig afhangt van de data die ze heeft. Werkmanrooster is geschreven in verschillende programeertalen in de vorm van `code`. `Code` is een manier om een computer te laten weten wat hij moet doen. Dit klinkt allemaal heel moeilijk, maar het is niets meer dan een manier voor programeurs te communiceren met computers. Wees vooral niet bang om wat nieuws te leren, want ik moet helaas soms de 'naakte' code laten zien om deze uitleggen.
 
-De code die we nu kort gaan bekijken is geschreven in de taal "`Javascript`" soms verkort naar "`js`". `Javascript` is een van de makkelijkste talen om op te pakken en snel dingen mee te maken die werken. `Javascript` wordt vaak gebruikt voor het toevoegen van interactiviteit aan webpagina's of soms wel voor een heel project. `Javascript` (maar ook andere programeertalen) zijn geschreven zodat er op verschillende manieren aan de computer duidelijk gemaakt kan worden wat de programeur de computer wil laten doen. Dit wordt vaak gedaan met het gebruik van zogenaamde "`keywords`". Dit zijn dingen zoals "`var`" voor het defineren van een variabele, "`function`" voor het defineren van een functie (vergelijkbaar met een wiskundige functie) nog veel meer. Ook word er met code sommige afwegingen gemaakt. Denk dan vooral aan het nakijken van dingen. Hoe dit word beschreven in `code` is te herkennen van wiskunde bijvoorbeeld de `<`, `>` en `=` tekens.
+De `code` die we nu kort gaan bekijken is geschreven in de taal "`Javascript`" soms verkort naar "`js`". `Javascript` is een van de makkelijkste talen om op te pakken en er is snel dingen mee te maken die werken. `Javascript` wordt vaak gebruikt voor het toevoegen van interactiviteit aan webpagina's of soms wel voor een heel project. `Javascript` (maar ook andere programeertalen) zijn geschreven zodat er op verschillende manieren aan de computer duidelijk gemaakt kan worden wat de programeur de computer wil laten doen. Dit wordt vaak gedaan met het gebruik van zogenaamde "`keywords`". Dit zijn dingen zoals "`var`" voor het defineren van een variabele, "`function`" voor het defineren van een functie (vergelijkbaar met een wiskundige functie) nog veel meer. Ook word er met code sommige afwegingen gemaakt. Denk dan vooral aan het nakijken van dingen. Hoe dit word beschreven in `code` is te herkennen van wiskunde bijvoorbeeld de `<`, `>` en `=` tekens.
 
-Laten we kijken naar een klein stukje code met verschillende `keywords` en een afweging, aangegeven met `if`. De dingen tekst die volgt na de `//` word genegeerd door de computer, dit is om opmerkingen achter te laten aan potentiele lezers.
+Laten we kijken naar een klein stukje code met verschillende `keywords` en een afweging, aangegeven met het `keyword` `if`. De dingen tekst die volgt na de `//` word genegeerd door de computer, dit is om opmerkingen achter te laten aan potentiele lezers.
 
 ```javascript
 //Defineer het variabele fount_students en geef het een waarde van 10.
-var found_students = 10;
+var aantalStudenten = 10;
 
-//We weten dat found_students 10 is. 10 is groter dan 1, dus deze afweging klopt.
+//We weten dat aantalStudenten 10 is. 10 is groter dan 1, dus deze afweging klopt.
-if (found_students > 1) { //Afweging: als er meer dan één leerling is gevonden
+if (aantalStudenten > 1) { //Afweging: als er meer dan één leerling is.
   //Als de bovenstaande afweging klopt, wordt deze code uitgevoerd.
 }
 else {
-  //Als de eerste afweging niet klopt dan wordt deze code uitgevoerd.
+  //Als de eerste afweging niet klopt, wordt deze code uitgevoerd.
 }
 ```
 

articles/opzoek/archiefkast.md

@@ -1,9 +1,9 @@
-##### Opzoek naar je naam
+# Opzoek naar je naam
 ---
 
-##### De Werkmanrooster archiefkast
+## De Werkmanrooster archiefkast
 
-Nadat je computer werkmanrooster.nl heeft gevonden via het [`DNS` telefoonboek](/intypen), maakt hij verbinding met de website. Je ziet de hoofdpagina van de website en typt je naam in. Je drukt op enter en de je rooster laadt in minder dan een seconde.
+Nadat je computer Werkmanrooster.nl heeft gevonden via het [`DNS` telefoonboek](/intypen), maakt hij verbinding met de website. Je ziet de hoofdpagina van de website en typt je naam in. Je drukt op enter en de je rooster laadt in minder dan een seconde.
 
 In die ene seconden zijn heel wat processen aan de gang om ervoor te zorgen dat jij je rooster te zien krijgt. We gaan ons nu bezighouden met hoe Werkmanrooster bijhoudt wie welk rooster heeft. Je hebt vast wel gehoord van een `database`, in een film of je favoriete serie. De nerd met een bril zit achter de computer terwijl hij iets met een `database` doet. Maar wat is een database eigenlijk? Een `database` is een groot digitaal archief waar informatie in zit. Laten we kijken naar een voorbeeld met een archiefkast.
 
@@ -19,12 +19,12 @@ Werkmanrooster beschikt over een grote archiefkast van leerlingen, docenten, kla
   Rooster: roosters5.gepro-osi.nl/roosters/rooster.php?school=934&type=Leerlingrooster&afdeling=l_atheneum 6&leerling=16374
 ```
 
-Wat de secretaresse doet is elk bestand bij langs gaan en dit vergelijken met jouw zoekopdracht. Als jij vraagt naar "Bram" dan zal ze alle Brammen pakken. Vraag jij bevoorbeeld naar "Atheneum 6" dan zal zij alle bestanden pakken die uit Atheneum 6 komen. Mocht ze alleen maar een bestand vinden bij de zoekopdracht, dan stuurt ze het gevonden bestand naar haar collega die het rooster zal opzoeken en uitprinten.
+Wat de secretaresse doet is elk bestand bij langs gaan en dit vergelijken met jouw zoekopdracht. Als jij vraagt naar "Bram" dan zal ze alle Brammen pakken. Vraag jij bijvoorbeeld naar "Atheneum 6" dan zal zij alle bestanden pakken die uit Atheneum 6 komen. Mocht ze alleen maar een bestand vinden bij de zoekopdracht, dan stuurt ze het gevonden bestand naar haar collega die het rooster zal opzoeken en uitprinten.
 
 ---
 
-##### Zoeken naar een naald in een naaldberg
+## Zoeken naar een naald in een naaldberg
-Bij het intypen van `Bram van der Veen` zal `rooster.io` [de informatie](http://werkmanrooster.nl/api/search?name=Bram van der Veen) vinden die daar bij hoort. Je ziet een duidelijke overeenkomst tussen het onder weergeven database bestand en het bestand van de archiefkast. Het verschil zijn wat vreemde tekens in en rond de informatie. Wat betekent dit allemaal?
+Bij het intypen van `Bram van der Veen` zal rooster.io [de informatie](http://Werkmanrooster.nl/api/search?name=Bram van der Veen) vinden die daar bij hoort. Je ziet een duidelijke overeenkomst tussen het onder weergeven database bestand en het bestand van de archiefkast. Het verschil zijn wat vreemde tekens in en rond de informatie. Wat betekent dit allemaal?
 
 ```javascript
 //In dit voorbeeld heeft naam_voor_de_data, de waarde "data".
@@ -35,9 +35,9 @@ Bij het intypen van `Bram van der Veen` zal `rooster.io` [de informatie](http://
 }
 ```
 
-Wat we hier zien is ook een soort van `code`. Het is misschien niet direct een manier van vertellen wat een computer moet doen, maar een manier waarop code informatie kan vasthouden en organiseren. De structuur (of syntax) is vergelijkbaar met die van `Javascript`, dat klopt ook zeker. Dit is namelijk een dataobject genoteerd in zogenaamd "**J**ava**s**cript **O**bject **N**otation", `JSON` in het kort. Eigenlijk staat er precies hetzelfde als in het bestand uit de archierkast, maar er zijn wat tekens aan toegevoegd zodat de computer het kan lezen.
+Wat we hier zien is ook een soort van `code`. Het is misschien niet direct een manier van vertellen wat een computer moet doen, maar een manier waarop code informatie kan vasthouden en organiseren. De structuur (of syntax) is vergelijkbaar met die van `Javascript`, dat klopt ook zeker. Dit is namelijk een dataobject genoteerd in zogenaamd "**J**ava**s**cript **O**bject **N**otation", `JSON` in het kort. Eigenlijk staat er precies hetzelfde als in het bestand uit de archiefkast, maar er zijn wat tekens aan toegevoegd zodat de computer het kan lezen.
-  
+
-`Rooster.io` werkt hier net zoals de secretaresse. Hij gaat alle bestanden bij langs om te kijken of jouw zoekopdracht overeenkomt met een van de vele bestanden in de database. Zo'n bestand ziet er zo uit:
+rooster.io werkt hier net zoals de secretaresse. Hij gaat alle bestanden bij langs om te kijken of jouw zoekopdracht overeenkomt met een van de vele bestanden in de database. Zo'n bestand ziet er zo uit:
 ```javascript
 //Een dataset voor de zoekopdracht "Bram van der Veen"
 {
@@ -54,7 +54,7 @@ Wat we hier zien is ook een soort van `code`. Het is misschien niet direct een m
       "url": "roosters5.gepro-osi.nl/?school=934&type=Leerlingrooster&afdeling=l_atheneum 6&leerling=16374"
   }
 ```
-Het bestand is eigenlijk een groep variabeles die het systeem bij langs gaat. In dit geval komt `Bram van der Veen` overeen met de waarde van het variabele `name`. Maar hetzelfde geld als ik bijvoorbeeld alleen `Bram` of `van der Veen` intyp, het systeem zal alleen [meerdere ](http://werkmanrooster.nl/api/search?name=Bram)[mensen](http://werkmanrooster.nl/api/search?name=van der Veen) vinden met dezelfde waardes.  
+Het bestand is eigenlijk een groep variabeles die het systeem bij langs gaat. In dit geval komt `Bram van der Veen` overeen met de waarde van het variabele `name`. Maar hetzelfde geld als ik bijvoorbeeld alleen `Bram` of `van der Veen` intyp, het systeem zal alleen [meerdere ](http://Werkmanrooster.nl/api/search?name=Bram)[mensen](http://Werkmanrooster.nl/api/search?name=van der Veen) vinden met dezelfde waardes.  
-Als `rooster.io` meerdere mensen vindt voor dezelfde zoekopdracht dan maakt hij een lijst zodat de gebruiker kan kiezen uit welk van de mensen hij of zij het rooster wil zien. Als er maar één persoon gevonden wordt dan gaat `rooster.io` verder met de volgende stap, het rooster verkrijgen en verwerken.
+Als rooster.io meerdere mensen vindt voor dezelfde zoekopdracht dan maakt hij een lijst zodat de gebruiker kan kiezen uit welk van de mensen hij of zij het rooster wil zien. Als er maar één persoon gevonden wordt dan gaat rooster.io verder met de volgende stap, het rooster verkrijgen en verwerken.
 
 [Volgende >>](/verkrijgen)

articles/templates/koekjesvorm.md

@@ -1,21 +1,21 @@
-#### Roosters en webpagina's als koekjesvorm
+# Roosters en webpagina's als koekjesvorm
 ---
 
-#### Waarom moeilijk doen als het ook makkelijk kan?
+## Waarom moeilijk doen als het ook makkelijk kan?
-Je hebt tot nu toe gelezen wat er allemaal gebeurd als je rooster wordt opgevraagd. In de allerlaatste stap mogen we ons druk gaan maken over de opmaak van het rooster en Werkmanrooster. Dit wordt gedaan aan zogenaamde "templates", een soort koekjesvorm. 
+Je hebt tot nu toe gelezen wat er allemaal gebeurd als je rooster wordt opgevraagd. In de allerlaatste stap mogen we ons druk gaan maken over de opmaak van het rooster en Werkmanrooster. Dit wordt gedaan aan zogenaamde "templates", een soort koekjesvorm.
 
 Wat is een template eigenlijk? Een template is een versimpelde progammatuur in een bepaalde structuur stopt, vaak om het leesbaar te maken voor mensen. Je geeft een template een set van informatie, en dit template gaat dan aan de hand van hoe het geschreven is, de informatie op een bepaalde manier laten zien. Het is als een soort van koekjesvorm omdat je eigenlijk de informatie behandelt als je deeg. Je hebt heel veel deeg, maar uiteindelijk druk je er allemaal verschillende vormpjes uit waardoor je koekjes er anders uit komen. Zo kan Werkmanrooster snel en simpel een rooster van heel veel verschillende mensen ophalen en laten zien, zonder elke leerling apart in te programeren.
 
 ---
 
-#### Formules en functies.
+## Formules en functies.
-Hoe een templaat werkt, is te vergelijken met wiskundige formules. Je hebt gewoon een soort standaard manier van werken met een variabele. We nemen als voorbeeld de formule `y = x + 2`. Iedereen weet wat er gebeurd met `y` als je x veranderd. `y` is dan gewoon `x` plus twee erbij. Bij templates werkt het vrijwel hetzelfde, maar in plaats van een wiskundige formule, is het een hele lange formule die niet alleen cijfers kan verwerken maar ook woorden en zinnen. Ik kan bijvoorbeeld iemand groeten die zijn rooster bezoekt door het variabele van zijn naam te gebruiken in zo'n templaat.
+Hoe een template werkt, is te vergelijken met wiskundige formules. Je hebt gewoon een soort standaard manier van werken met een variabele. We nemen als voorbeeld de formule `y = x + 2`. Iedereen weet wat er gebeurd met `y` als je x veranderd. `y` is dan gewoon `x` plus twee erbij. Bij templates werkt het vrijwel hetzelfde, maar in plaats van een wiskundige formule, is het een hele lange formule die niet alleen cijfers kan verwerken maar ook woorden en zinnen. Ik kan bijvoorbeeld iemand groeten die zijn rooster bezoekt door het variabele van zijn naam te gebruiken in zo'n template.
 
 ```jade
 p Hallo #{naam}, hoe gaat het met jou?
 ```
-  
+
-Ik voer dan voor het variabele `naam` dan de naam van de rooster opvrager. Op die manier krijg ik dus bijvoorbeeld `Hallo Bert, hoe gaat het met jou?` als het variabele naam gelijk staat aan `Bert`. Deze templaten zijn echter geschreven in een taal die dit soort vergelijkingen makkelijk leesbaar maakt voor de programeur, ik heb voor `rooster.io` gekozen voor `Jade`. `Jade` kan veel handige dingen zoals het importeren van templaten in een ander templaat, waardoor je een project modulair kan aanpakken. Laten we eens bekijken hoe zo'n templaat er uit ziet.
+Ik voer dan voor het variabele `naam` dan de naam van de rooster opvrager. Op die manier krijg ik dus bijvoorbeeld `Hallo Bert, hoe gaat het met jou?` als het variabele naam gelijk staat aan `Bert`. Deze templaten zijn echter geschreven in een taal die dit soort vergelijkingen makkelijk leesbaar maakt voor de programeur, ik heb voor rooster.io gekozen voor `Jade`. `Jade` kan veel handige dingen zoals het importeren van templaten in een ander template, waardoor je een project modulair kan aanpakken. Laten we eens bekijken hoe zo'n template er uit ziet.
 
 ```jade
 .bar
@@ -24,30 +24,61 @@ Ik voer dan voor het variabele `naam` dan de naam van de rooster opvrager. Op di
     //- Laat dan het volgende zien
     ul.left
       li Hey, #{user.naam}
-      li | 
+      li |
-      li 
+      li
         a(href="/rooster/#{user.id}") Jouw Rooster
       li
         a(href=user.rooster, target="_blank") Andere roostersite
     ul.right
-      li 
+      li
         a(href="/logout") Logout
   //- Als er niet is ingelogd
   else
     //- Laat dan het volgende zien
     ul
-      li 
+      li
         a(href="/login") Login
       li |
       li
-        a(href="http://hoewerkt.werkmanrooster.nl", target="_blank") Hoe werkt Werkmanrooster?
+        a(href="http://hoewerkt.Werkmanrooster.nl", target="_blank") Hoe werkt Werkmanrooster?
     ul.right
       li
-        a(href="http://git.werkmanrooster.nl/werkmanrooster/rooster-io.git", target="_blank") Recente ontwikkelingen
+        a(href="http://git.Werkmanrooster.nl/Werkmanrooster/rooster-io.git", target="_blank") Recente ontwikkelingen
 ```
 
-Dit templaat zorgt voor de kleine rode of blauwe bar aan de bovenkant van elke Werkmanrooster pagina. Wat hier belangrijk is, is de evalutatie van het variabele `user`. Dit variabele bepaald namelijk hoe de pagina er uit gaat zien. Als het variabele `user` niet bestaat, en er dus niet is ingelogd dan word de gebruiker een login knopje laten zien. Als de gebruiker wel is ingelogd (het variabele `user` bestaat) dan wordt dat variabele gebruikt om een groet aan de gebruiker te laten zien.
+Dit template zorgt voor de kleine rode of blauwe bar aan de bovenkant van elke Werkmanrooster pagina. Wat hier belangrijk is, is de evalutatie van het variabele `user`. Dit variabele bepaald namelijk hoe de pagina er uit gaat zien. Als het variabele `user` niet bestaat, en er dus niet is ingelogd dan word de gebruiker een login knopje laten zien. Als de gebruiker wel is ingelogd (het variabele `user` bestaat) dan wordt dat variabele gebruikt om een groet aan de gebruiker te laten zien.
+
+Alle in het rood gekleurde letters en woorden die je aan het begin van elke regel ziet staan zijn verschillende `HTML` elementen. Elke webpagina bestaat uit `HTML` en nog een taal genaamd `CSS`. `HTML` is ervoor om een duidelijke structuur aan de pagina te geven met verschillende "elementen". Deze elementen kunnen een vormgevende functie of een inhoudelijke functie hebben. In het voorbeeld hierboven maken we bijvoorbeeld gebruik van het element `a` die als een link fungeert zodat de gebruiker naar een andere website kan als hij op de link klikt. Het is niet al te belangrijk om te weten wat het meeste er van betekent.
+
+Het volgende wat we gaan bekijken is de template voor het renderen van een rooster uit een database bestand.
+```jade
+//- Andere templaten die nodig zijn voor de pagina
+include header
+include search
+
+.schedule
+  //- Ga elke dag in het rooster bij langs
+  each day in schedule
+    .day
+      //- Ga elk uur in de dag bij langs
+      each hour in day
+        //- Als er niet 'vrij' staat op de plek van een uur
+        if hour.teacher != 'vrij'
+          .hour(class=(hour.changed == 'true' ? 'changed' : ''))
+               span.teacher
+                  a(href=hour.teacher) #{hour.teacher}
+               span.chamber
+                  a(href=hour.chamber) #{hour.chamber}
+               span.course= #{hour.course}
+        //- Staat er wel 'vrij', dan laat het uur vrij zijn! (yay)
+        else
+          .hour.changed(class= current ? ' current' : '')
+            span.free Vrij
+```
+
+Je zou denken dat hier niet zoveel gebeurd. Laten we kijken naar een van de `keywords` die we een paar keer zien. Je ziet helemaal aan de bovenkant een paar keer `include` staan met daar achter een ander woord. `include` zorgt ervoor dat wij andere templaten kunnen importeren zoals `search` wat in ons geval de zoekbalk is die op elke pagina van Werkmanrooster staat.
+
+Dan is er nog `each`. `each` is een keyword waarmee de programeur zegt 'voor elke', dat wil zeggen, als een data object meerdere dingen bevat kan hij ze op die manier bij langs gaan. Het is hetzelfde wanneer je een ballenbak hebt en de kleuren wil sorteren. De ballenbak is dan het dataobject. Je zegt dan bijvoorbeeld  dat voor elke bal die ik hier uit pak, gaat de groene naar links en de rode naar rechts. En je pakt alle ballen uit de ballenbak totdat je allemaal gehad hebt. Hetzelfde gebeurd hier. Iedere keer als het `each` `keyword` word gebruikt gaat hij alle mogelijke dingen bij langs totdat hij klaar is. Hier kun je bijvoorbeeld zien bij de eerste `each` dat hij elke dag in het rooster bij langs gaat, en dat hij vervolgens elke dag ook nog alle uren bij langs gaat. Op deze manier komen alle dagen en uren aan bod!
 
 ---
 [Volgende  >>](/database)
-

articles/verkrijgen/balie.md

@@ -1,6 +1,6 @@
-#### Verkrijgen en verwerken
+# Verkrijgen en verwerken
 ---
-#### De volgende balie
+## De volgende balie
 Om terug te komen op het archiefkast voorbeeld, gaan we verder met de volgende balie. De secretaresse heeft het gevonden bestand gegeven aan haar collega die vervolgens opzoek gaat naar jouw rooster. Hij neemt het bestand in handen en kijkt ernaar.
 ```json
   Naam: Bram van der Veen
@@ -15,9 +15,9 @@ Hij bekijkt het bestand en richt zich gelijk op de laatste waarde van het bestan
 
 ---
 
-#### Data verkrijgen en algoritmes
+## Data verkrijgen en algoritmes
-`Rooster.io` gaat ook verder, door het bestand uit de database te verwerken. Hij doet hetzelfde als de collega in het verhaal hierboven. Hij knipt en plakt het rooster in een nieuw jasje. Maar dan op een geprogrameerde en effici"ente manier.
+Rooster.io gaat ook verder, door het bestand uit de database te verwerken. Hij doet hetzelfde als de collega in het verhaal hierboven. Hij knipt en plakt het rooster in een nieuw jasje. Maar dan op een geprogrameerde en effici"ente manier.
 
-Hij gaat naar de link die is gegeven in het bestand en download het daar gevonden rooster als tekstbestand. Vervolgens gaat hij door dit tekstbestand heen om het rooster uit te vissen. Hij leest dit bestand volgens een bepaald algoritme. Dit algoritme is voorgeprogrameerd om bepaalde informatie er uit te halen. De informatie die verkregen word uit de webpagina is bijvoorbeeld de rooster informatie. Dit zijn dingen zoals welk uren je welke lessen hebt met welke docenten en in welk lokaal. Het algoritme verkrijgt ook informatie zoals het naam van het rooster.  Hij vertaalt dan deze door mensen te lezen informatie, in een soortgelijk [database bestand](http://werkmanrooster.nl/api/schedule?name=16374) zodat een computer het kan lezen. Het verschil in database bestanden tussen een rooster en die van een leerling, is het verschil van inhoud. Een database bestand van een leerling houdt informatie vast over de leerling, terwijl een database bestand van een rooster informatie vasthoud over een specifiek rooster. Nu moet er van dit database bestand een webpagina gemaakt worden.
+Hij gaat naar de link die is gegeven in het bestand en download het daar gevonden rooster als tekstbestand. Vervolgens gaat hij door dit tekstbestand heen om het rooster uit te vissen. Hij leest dit bestand volgens een bepaald algoritme. Dit algoritme is voorgeprogrameerd om bepaalde informatie er uit te halen. De informatie die verkregen word uit de webpagina is bijvoorbeeld de rooster informatie. Dit zijn dingen zoals welke uren je welke lessen hebt met welke docenten en in welk lokaal. Het algoritme verkrijgt ook informatie zoals het naam van het rooster.  Hij vertaalt dan deze door mensen te lezen informatie, in een soortgelijk [database bestand](http://Werkmanrooster.nl/api/schedule?name=16374) zodat een computer het kan lezen. Het verschil in database bestanden tussen een rooster en die van een leerling, is het verschil van inhoud. Een database bestand van een leerling houdt informatie vast over de leerling, terwijl een database bestand van een rooster informatie vasthoud over een specifiek rooster. Nu moet er van dit database bestand een webpagina gemaakt worden.
 
 [Volgende >>](/templates)

hoewerkt.js

@@ -8,9 +8,10 @@ var articles = [
   'intypen:Je gaat naar de website',
   'opzoek:Op zoek naar je naam',
   'verkrijgen:Verkrijgen en verwerken',
-  'dataapps:Data gedreven applicaties',
   'templates:Templaten',
-  'database:De database'
+  'database:De database',
+  'handenuitdemouwen:Handen uit de mouwen',
+  'conclusie:Conclusie'
 ]
 
 module.exports = function (req, res, next) {

resources/jade/article.jade

@@ -10,13 +10,6 @@ html
     .container
       .row
       .sidebar.five
-          div
-            h5 Profielwerkstuk
-            p Hoe werkt Werkmanrooster?
-            //- sup Door :
-            a(href="http://96aa48.github.io")
-              img(src="/images/face.png")
-            sup Bram van der Veen
           ul
             for article in articles
               li

resources/less/style.less

@@ -16,7 +16,7 @@
 
   p {
     margin-top: -10px;
-    font-size: 15px;
+    font-size: 15pxb
   }
 
   img {
@@ -62,6 +62,13 @@
 }
 
 div.content {
+  h1 {
+    font-size: 3.0rem
+  }
+
+  h2 {
+    font-size: 2.5rem;
+  }
   > div {
     padding: 10px;
   }
@@ -70,6 +77,16 @@ div.content {
     color: #3949D4;
   }
 
+  ul {
+    list-style: initial;
+    padding-left: 20px;
+    margin-top: -15px;
+
+    li {
+      margin: 3px;
+    }
+  }
+
   blockquote {
     background-color: #DDD;
     width: 500px;
@@ -82,6 +99,13 @@ div.content {
   pre {
     font-size: 13px;
   }
+
+  code {
+    background-color: #272822;
+    padding: 2px;
+    border-radius: 3px;
+    color: #DFDFDF;
+  }
 }
 
 .night {
@@ -97,3 +121,8 @@ div.content {
     border-color: #C5C9B8;
   }
 }
+
+img {
+  float: left;
+  margin-right: 10px;
+}