Wat veranderingen gemaakt aan de opmaak
This commit is contained in:
Bram van der Veen
parent
3486267346
commit
91ee706331
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
#### 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.
|
||||
|
||||
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.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
#### Handen uit de mouwen
|
||||
# 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.
|
||||
|
|
@ -41,7 +41,7 @@ Dan is er nog een stuk waar er staat `//Hier gaan we programeren`. Zoals de comm
|
|||
|
||||
---
|
||||
|
||||
#### Switch-a-roo
|
||||
# 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).
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
#### Hoe werkt Werkmanrooster?
|
||||
# Hoe werkt Werkmanrooster?
|
||||
## of data gedreven applicaties
|
||||
---
|
||||
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!
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
#### 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 uiteindelijk op je broodje gedaan. Het broodje ingepakt in wat papier met wat servetten, daarna kan je genieten van je broodje.
|
||||
|
|
@ -23,20 +23,20 @@ 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.
|
||||
|
||||
##### [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)?
|
||||
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.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
#### Inleiding
|
||||
# Inleiding
|
||||
---
|
||||
Heel veel mensen op het Werkmancollege locatie Stadslyceum gebruiken een alternatieve manier om hun rooster bekijken. Dit doen ze 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.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
##### 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.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
#### Moeilijkheidsgraad
|
||||
# Moeilijkheidsgraad
|
||||
---
|
||||
#### ELI5
|
||||
## 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. 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 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 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.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
##### 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.
|
||||
|
||||
|
|
@ -23,7 +23,7 @@ Wat de secretaresse doet is elk bestand bij langs gaan en dit vergelijken met jo
|
|||
|
||||
---
|
||||
|
||||
##### 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?
|
||||
|
||||
```javascript
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
#### 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.
|
||||
|
||||
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 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
|
||||
|
|
|
|||
|
|
@ -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,7 +15,7 @@ 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.
|
||||
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue