-
Notifications
You must be signed in to change notification settings - Fork 3
/
ontwikkelaar.html
757 lines (651 loc) · 52.5 KB
/
ontwikkelaar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
<!DOCTYPE html>
<html lang="nl">
<head>
<title>Ontwikkelaar | Vlaanderen.be</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://dij151upo6vad.cloudfront.net/2.latest/css/vlaanderen-ui.css" />
<link rel="stylesheet" href="https://dij151upo6vad.cloudfront.net/2.latest/css/vlaanderen-ui-corporate.css" />
<link rel="stylesheet" href="css/customstyle.css" />
<link rel="icon" sizes="192x192" href="https://dij151upo6vad.cloudfront.net/2.latest/icons/app-icon/icon-highres-precomposed.png">
<link rel="apple-touch-icon" href="https://dij151upo6vad.cloudfront.net/2.latest/icons/app-icon/touch-icon-iphone-precomposed.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://dij151upo6vad.cloudfront.net/2.latest/icons/app-icon/touch-icon-ipad-precomposed.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://dij151upo6vad.cloudfront.net/2.latest/icons/app-icon/touch-icon-iphone-retina-precomposed.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://dij151upo6vad.cloudfront.net/2.latest/icons/app-icon/touch-icon-ipad-retina-precomposed.png">
<meta name="msapplication-square70x70logo" content="https://dij151upo6vad.cloudfront.net/2.latest/icons/app-icon/tile-small.png" />
<meta name="msapplication-square150x150logo" content="https://dij151upo6vad.cloudfront.net/2.latest/icons/app-icon/tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="https://dij151upo6vad.cloudfront.net/2.latest/icons/app-icon/tile-wide.png" />
<meta name="msapplication-square310x310logo" content="https://dij151upo6vad.cloudfront.net/2.latest/icons/app-icon/tile-large.png" />
<meta name="msapplication-TileColor" content="#FFE615" />
</head>
<body>
<!-- Start page content -->
<div class="page">
<div class="layout layout--wide">
<div class="skiplink">
<a href="#main">Overslaan en naar de algemene inhoud gaan</a>
</div>
</div>
<div style="min-height:44px;;" id="vlaanderen-header">
<!-- insert your global header here -->
<script type="text/javascript" src="//widgets.vlaanderen.be/widget/live/5ecf33a0a922428cb9d944c55362ed15"></script>
<!-- end global header-->
</div>
<header class="content-header " role="banner">
<div class="content-header__wrapper">
<picture>
<!--[if IE 9]>
<video style="display: none;"><![endif]-->
<source srcset="https://www.vlaanderen.be/sites/default/files/ip_acm/page_banner_wide_alt/header.jpg 1x" media="(min-width: 1024px)">
<source srcset="https://www.vlaanderen.be/sites/default/files/ip_acm/page_banner_mobile_alt/header.jpg 1x" media="(max-device-width: 767px)">
<source srcset="https://www.vlaanderen.be/sites/default/files/ip_acm/page_banner_narrow/header.jpg 1x" media="(max-width: 1023px)">
<!--[if IE 9]></video><![endif]-->
<!--[if lt IE 9]>
<img itemprop="image" src=//www.vlaanderen.be/sites/default/files/ip_acm/page_banner_wide_alt/header.jpg" alt="" title=""/><![endif]-->
<!--[if !lt IE 9]><!-->
<img src="https://www.vlaanderen.be/sites/default/files/ip_acm/page_banner_wide_alt/header.jpg" srcset="https://www.vlaanderen.be/sites/default/files/ip_acm/page_banner_mobile_alt/header.jpg 320w, //www.vlaanderen.be/sites/default/files/ip_acm/page_banner_narrow/header.jpg 1024w, //www.vlaanderen.be/sites/default/files/ip_acm/page_banner_wide_alt/header.jpg 1600w"
alt="" title="">
<!-- <![endif]-->
</picture>
<div class="layout layout--wide">
<div class="content-header__content">
<h1 class="content-header__title" itemprop="name">
<span class="content-header__title__content">Ontwikkelaar</span>
</h1>
</div>
</div>
</div>
</header>
<div id="main" itemprop="mainContentOfPage" role="main" tabindex="-1" class="main-content">
<div class="region">
<div class="layout layout--wide">
<div class="grid">
<div class="col--8-12 col--12-12--s col--8-12--m">
<div class="content typography introduction" id="intro">
<p>Ontwikkelaars bouwen applicaties op basis van vooraf beschreven informatiemodellen en business-vereisten. Vier cases komen aan bod die de stappen beschrijven die een ontwikkelaar kan toepassen bij het gebruik van OSLO.</p>
</div>
</div>
<!-- <div class="col--3-12 col--12-12--s col--4-12--m push--1-12 push--reset--m">
<div class="infotexts u-hidden-mobile" id="info">
<div class="grid">
<div class="col--6-12">
<div class="infotext-wrapper">
<div class="infotext infotext--badge">
<div class="infotext__value js-infotext__value">123</div>
<div class="infotext__text">Aantal lorem</div>
</div>
</div>
</div>
<div class="col--6-12">
<div class="infotext-wrapper">
<div class="infotext infotext--badge">
<div class="infotext__value js-infotext__value">4.467</div>
<div class="infotext__text">Totaal lorem</div>
</div>
</div>
</div>
</div>
</div>
</div> -->
</div>
</div>
</div>
<div class="region">
<div class="layout layout--wide">
<div class="grid">
<div class="col--9-12 col--12-12--s col--8-12--m">
<div class="js-scrollspy__content">
<div class="u-spacer">
<!-- demo doormat component in grid -->
<ul class="grid grid--is-stacked js-equal-height-container">
<li class="col--4-12 col--6-12--m col--12-12--xs">
<a class="doormat js-equal-height" href="#case1">
<h2 class="doormat__title" data-clamp="2">Case 1: Een API opzetten</h2>
</a>
</li>
<li class="col--4-12 col--6-12--m col--12-12--xs">
<a class="doormat js-equal-height" href="#case2">
<h2 class="doormat__title" data-clamp="2">Case 2: Een database opzetten</h2>
</a>
</li>
<li class="col--4-12 col--6-12--m col--12-12--xs">
<a class="doormat js-equal-height" href="#case3">
<h2 class="doormat__title" data-clamp="2">Case 3: Gegevensuitwisseling</h2>
</a>
</li>
<li class="col--4-12 col--6-12--m col--12-12--xs">
<a class="doormat js-equal-height" href="#case4">
<h2 class="doormat__title" data-clamp="2">Case 4: Van tabulaire naar linked data</h2>
</a>
</li>
</ul>
<!-- end component -->
</div>
<div class="u-spacer--large">
<div class="u-spacer">
<h1 class="h1 u-named-anchor" id="case1">Case 1: Een API opzetten</h1>
<p>REST en RDF, de technologie die Linked Data onderbouwt, delen een aantal fundamentele principes:</p>
<br>
<ul class="bullet-list bullet-list--check">
<li class="bullet-list__item">Aan de basis van informatie ligt het concept ‘resource’;</li>
<li class="bullet-list__item">Maken gebruik van HTTP(S) en HTTP(S) URI’s;</li>
<li class="bullet-list__item">Zelfbeschrijvend, er is geen voorkennis nodig om de relaties tussen resources te begrijpen;</li>
<li class="bullet-list__item">Geschikt voor Domain Driven Design.</li>
</ul>
<br>
<p>In combinatie zijn ze in staat om resources (data) te ontsluiten samen met het achterliggend informatiemodel, gebruik te maken van meer gesofisticeerde semantiek voor state-transitions en het Web of Data write-enabled te maken.</p>
<br>
<p>De W3C Recommendation <a href="https://www.w3.org/TR/ldp-primer/" target="_blank">Linked Data Platform</a> is een specificatie die patronen aanreikt om RESTful HTTP services te bouwen die in staat zijn om read-write operaties uit te voeren op Linked Data. Daarnaast wint een specificatie in opbouw, <a href="https://www.hydra-cg.com/spec/latest/core/" target="_blank">Hypermedia Driven Web APIs (HYDRA)</a>, aan populariteit om Linked Data principes toe te passen op REST API’s door een vocabularium van termen aan te reiken waarmee generieke API clients gemaakt kunnen worden.
Tot slot is het mogelijk om bestaande REST API’s die gebruik maken van JSON om te vormen met minimale inspanning door een @context definitie mee te geven in de HTTP Link Header. Meer informatie hieromtrent is terug te vinden in de <a href="https://www.w3.org/TR/json-ld/#interpreting-json-as-json-ld" target="_blank">JSON-LD specificatie</a>.</p>
</div>
<div class="u-spacer--large">
<div class="u-spacer">
<h1 class="h1 u-named-anchor" id="case2">Case 2: Een database opzetten</h1>
<p>Bij het opzetten van een database worden volgende zaken best in acht genomen:</p>
<br>
<ul class="bullet-list bullet-list--check">
<li class="bullet-list__item"><strong>Gebruik van NoSQL databases.</strong><br>
Linked Data is gebaseerd op graph data, waarbij in tegenstelling tot een relationeel of hiërarchisch data model, objecten rechtstreeks aan elkaar gelinkt worden, via relaties, en deze relaties ook rechtstreeks deel kunnen uitmaken van een query.
<br>
<div class="voorbeeld">
<strong>Voorbeeld:</strong> relationeel versus graph data model.<br><br>
Relationele data:
<div class="lightbox js-lightbox gallery">
<a data-lightbox-item class="gallery__item" href="img/relationeel.png" data-size="1007x276" itemprop="contentUrl">
<figure>
<img itemprop="thumbnail" src="img/relationeel.png" srcset="img/relationeel.png 1x, img/relationeel.png 2x" alt="" />
<figcaption class="js-lightbox-caption lightbox-caption" itemprop="caption description">Voorbeeld van een relationeel data model</figcaption>
</figure>
</a>
</div>
<br>
Graph data:
<div class="lightbox js-lightbox gallery">
<a data-lightbox-item class="gallery__item" href="img/graph.png" data-size="740x212" itemprop="contentUrl">
<figure>
<img itemprop="thumbnail" src="img/graph.png" srcset="img/graph.png 1x, img/graph.png 2x" alt="" />
<figcaption class="js-lightbox-caption lightbox-caption" itemprop="caption description">Voorbeeld van graph data model</figcaption>
</figure>
</a>
</div>
</div>
<p>NoSQL databases zoals MongoDB, CouchDB, Neo4J, Virtuoso en Redis zijn dankzij hun performantie en flexibiliteit om complexe semi-gestructureerde data op te slaan meer geschikt dan traditionele relationele databases om Linked Data applicaties te onderbouwen.</p>
<div class="voorbeeld">
<strong>Voorbeeld:</strong> query voor het ophalen van gezinsleden voor een specifiek persoon in SQL (relationeel) vs. SPARQL (graph).<br><br>
<a href="https://github.com/pwc-technology-be/handreikingOslo/blob/master/snippets/ontwikkelaar_sql.sql?footer=no">SQL</a><br>
<a href="https://github.com/pwc-technology-be/handreikingOslo/blob/master/snippets/ontwikkelaar_sparql.rq?footer=no">SPARQL</a><br>
</div>
<p>Voor ondervragingen is SPARQL in dit geval compacter dan de traditionele relationele database query. Desalniettemin maken relationele databases het beheer (write) makkelijker omdat transacties een duidelijke betekenis hebben.</p><br>
</li>
<li class="bullet-list__item"><strong>Gebruik van Triplestores</strong><br><br>
<p>Triplestores vormen een subset van NoSQL databases waar informatie wordt opgeslagen als triples en opgevraagd kan worden door gebruik te maken van semantische queries met behulp van de query-taal <a href="https://www.w3.org/TR/sparql11-overview/" target="_blank">SPARQL</a>. Ze onderscheiden zich van andere NoSQL databases doordat ze efficiënt gebruik kunnen maken van URIs als identifiers. Daarnaast bieden triplestores native ondersteuning voor het gebruik van meerdere namespaces (meerdere informatiemodellen) door elkaar en het afleiden van niet-expliciete relaties door inferentie van het informatiemodel.
Dit maakt triplestores uitermate geschikt om centraal informatie bij te houden uit meerdere bronnen met elk een eigen informatiemodel en waar bovendien veel relaties tussen de verschillende objecten bestaan. Er bestaan zowel open source triplestores zoals <a href="https://jena.apache.org/documentation/serving_data/" target="_blank">Apache Jena Fuseki</a> en <a href="https://virtuoso.openlinksw.com/" target="_blank">OpenLink Virtuoso</a>, als commerciële varianten zoals <a href="https://aws.amazon.com/neptune/" target="_blank">Neptune</a>, dat onderdeel uitmaak van Amazon Web Services.</p>
<br>
<p>Wanneer een triplestore gebruikt wordt in combinatie met een SPARQL endpoint om gegevens te ontsluiten kan dit resulteren in een zware belasting van de server, in het bijzonder wanneer meerdere requests tegelijk behandeld moeten worden. Om de performantie te verbeteren, kan gebruik gemaakt worden van caching technieken als <a href="http://linkeddatafragments.org/" target="_blank">Linked Data Fragments</a>.</p>
</li>
</ul>
</div>
</div>
</div>
<div class="u-spacer--large">
<div class="u-spacer">
<h1 class="h1 u-named-anchor" id="case3">Case 3: Gegevensuitwisseling</h1>
<p>Naast een semantisch afgestemd informatiemodel heeft een toepassing nood aan een concrete methode voor gegevensuitwisseling. Een mogelijk formaat om semantiek mee te geven in API payloads is JSON-LD (JSON Linked Data). JSON-LD laat ontwikkelaars toe om applicaties en diensten die gebruik maken van JSON, met een minimale inspanning Linked Data enabled te maken.</p>
<br>
<p>De stabiele <a href="https://www.w3.org/TR/json-ld/" target="_blank">JSON-LD 1.0 specificatie</a> werd gepubliceerd door W3C als een <a href="https://www.w3.org/standards/faq#std" target="_blank">Recommendation</a>. De meest recente specificatie en documentatie is te vinden op <a href="https://json-ld.org/">json-ld.org</a>. JSON-LD kenmerkt zich door het toevoegen van volgende elementen aan een klassiek JSON object:</p>
<br>
<ul class="bullet-list bullet-list--check">
<li class="bullet-list__item"><strong>@context:</strong> bevat een oplijsting van keys die doorheen het JSON(-LD) object gebruikt worden samen met een link (IRI) die verwijst naar hun definitie en indien relevant een type die aangeeft wat de verwachte value is voor deze keys. Op deze manier wordt de “context” meegegeven aan de ontvanger van het JSON object.</li>
<li class="bullet-list__item"><strong>@id:</strong> een unieke identificator voor objecten.</li>
<li class="bullet-list__item"><strong>@type:</strong> bepaalt het type van het object of de node en kan ook meegegeven worden in de context.</li>
</ul>
<br>
<p>Voor een volledige uiteenzetting van de specificatie verwijzen we naar <a href="https://www.w3.org/TR/json-ld/" target="_blank">JSON-LD 1.0</a>.</p>
<br>
<p>De W3C Recommendation <a href="https://www.w3.org/TR/ldp-primer/" target="_blank">Linked Data Platform</a> is een specificatie die patronen aanreikt om RESTful HTTP services te bouwen die in staat zijn om read-write operaties uit te voeren op Linked Data. Daarnaast wint een specificatie in opbouw, <a href="https://www.hydra-cg.com/spec/latest/core/" target="_blank">Hypermedia Driven Web APIs (HYDRA)</a>, aan populariteit om Linked Data principes toe te passen op REST API’s door een vocabularium van termen aan te reiken waarmee generieke API clients gemaakt kunnen worden.
Tot slot is het mogelijk om bestaande REST API’s die gebruik maken van JSON om te vormen met minimale inspanning door een @context definitie mee te geven in de HTTP Link Header. Meer informatie hieromtrent is terug te vinden in de <a href="https://www.w3.org/TR/json-ld/#interpreting-json-as-json-ld" target="_blank">JSON-LD specificatie</a>.</p>
<br>
<div class="voorbeeld">
<strong>Voorbeeld:</strong> twee JSON-LD payloads met dezelfde data die niet uitwisselbaar zijn door verschillende terminologie.<br><br>
<script src="https://gist-it.appspot.com/https://github.com/pwc-technology-be/handreikingOslo/blob/master/snippets/ontwikkelaar_jsonld_nietuitwisselbaar.jsonld?footer=no"></script>
</div>
<br>
<div class="voorbeeld">
<strong>Voorbeeld:</strong> twee JSON-LD payloads met dezelfde data die wel uitwisselbaar zijn met JSON-LD.<br><br>
<script src="https://gist-it.appspot.com/https://github.com/pwc-technology-be/handreikingOslo/blob/master/snippets/ontwikkelaar_jsonld_uitwisselbaar.jsonld?footer=no" footer="no"></script>
</div>
</div>
</div>
<div class="u-spacer--large">
<div class="u-spacer">
<h2 class="h2 u-named-anchor" id="case3_sub1">Gebruik van @context definities</h2>
<p>De @context heeft als doel de semantiek samen met de data te ontsluiten. Dit kan op verschillende manieren gebeuren:</p>
<br>
<ul class="bullet-list bullet-list--check">
<li class="bullet-list__item"><strong>Hergebruik van bestaande context definitie</strong><br>
Voor OSLO vocabularia bestaan herbruikbare context files in JSON-LD formaat waar naar verwezen kan worden vanuit een JSON-LD object.<br><br>
<table>
<tr>
<td><strong>OSLO vocabularium</strong></td>
<td><strong>Context file</strong></td>
</tr>
<tr>
<td>Generiek</td>
<td><a href="http://data.vlaanderen.be/context/generiek.jsonld" target="_blank">http://data.vlaanderen.be/context/generiek.jsonld</a></td>
</tr>
<tr>
<td>Adres</td>
<td><a href="http://data.vlaanderen.be/context/adres.jsonld" target="_blank">http://data.vlaanderen.be/context/adres.jsonld</a></td>
</tr>
<tr>
<td>Persoon</td>
<td><a href="http://data.vlaanderen.be/context/persoon.jsonld" target="_blank">http://data.vlaanderen.be/context/persoon.jsonld</a></td>
</tr>
<tr>
<td>Organisatie</td>
<td><a href="http://data.vlaanderen.be/context/organisatie.jsonld" target="_blank">http://data.vlaanderen.be/context/organisatie.jsonld</a></td>
</tr>
<tr>
<td>Dienst</td>
<td><a href="http://data.vlaanderen.be/context/dienst.jsonld" target="_blank">http://data.vlaanderen.be/context/dienst.jsonld</a></td>
</tr>
</table>
<br>
<div class="voorbeeld">
<strong>Voorbeeld:</strong> hergebruik van OSLO context definitie.<br><br>
<script src="https://gist-it.appspot.com/https://github.com/pwc-technology-be/handreikingOslo/blob/master/snippets/ontwikkelaar_jsonld_hergebruik.jsonld?footer=no"></script>
</div>
</li>
<li class="bullet-list__item"><strong>Combineren van meerdere context definities</strong><br>
<p>In vele gevallen is het mogelijk dat meerdere entiteiten uit verschillende vocabularia in hetzelfde JSON-LD object voorkomen. Daarom is het mogelijk om ook meerdere context referenties mee te geven in hetzelfde JSON-LD object. In het geval dat bepaalde termen overlappen, zal de laatst gedefinieerde term (in onderstaand voorbeeld uit de adres context) voorgaande termen met dezelfde benaming overschrijven.</p>
<br>
<div class="voorbeeld">
<strong>Voorbeeld:</strong> hergebruik van OSLO context definitie.<br><br>
<script src="https://gist-it.appspot.com/https://github.com/pwc-technology-be/handreikingOslo/blob/master/snippets/ontwikkelaar_jsonld_combineren.jsonld?footer=no"></script>
</div>
</li>
<li class="bullet-list__item"><strong>Gebruik van eigen termen</strong><br>
<p>Wanneer een bestaande API zijn informatie wil ontsluiten conform de OSLO semantische informatiemodellen als JSON-LD, zonder de reeds gebruikte keys aan te passen, kan er voor gekozen worden om een eigen context file te creëren. Het blijft evenwel een vereiste om eerst het <a href="analist.html#subcategorie" target="_blank">semantisch afstemmingstraject</a> te doorlopen. Voor meer informatie met betrekking tot het creëren van een context file refereren we naar de <a href="https://json-ld.org/spec/latest/json-ld/#the-context" target="_blank">JSON-LD specificatie</a>. Voor bestaande API’s kan de context definitie meegegeven worden in de HTTP Link Header in plaats van als onderdeel van de payload.</p>
<br>
<div class="voorbeeld">
<strong>Voorbeeld:</strong> hergebruik van OSLO context definitie.<br><br>
<script src="https://gist-it.appspot.com/https://github.com/pwc-technology-be/handreikingOslo/blob/master/snippets/ontwikkelaar_jsonld_html.html?footer=no"></script>
</div>
</li>
<li class="bullet-list__item"><strong>Bestaande context definitie uitbreiden</strong><br>
<p>Indien een JSON-LD object gebruik maakt van zowel OSLO als andere entiteiten, en indien deze andere entiteiten relevant zijn voor de uitwisselingen van informatie met andere toepassingen of agentschappen, kan een bestaande OSLO @context uitgebreid worden met nieuwe termen.</p>
<br>
<div class="voorbeeld">
<strong>Voorbeeld:</strong> OSLO context definitie voor persoon uitbreiden met nieuwe termen van het <a href="http://xmlns.com/foaf/spec/" target="_blank">FOAF vocabularium</a> voor het weergeven van een profielfoto.<br><br>
<script src="https://gist-it.appspot.com/https://github.com/pwc-technology-be/handreikingOslo/blob/master/snippets/ontwikkelaar_jsonld_nieuw.jsonld?footer=no"></script>
</div>
<div class="suggestie">
<strong>Verduidelijking:</strong> Het is ook mogelijk om in een JSON-LD object gewone JSON attributen mee te geven, zonder deze te definiëren in de @context. Wanneer het object als JSON-LD geparsed wordt, zullen termen die niet voorkomen in de @context genegeerd worden. De term zal dus enkel beschikbaar zijn voor de lokale applicatie, binnen de bounded context.
</div>
</li>
<li class="bullet-list__item"><strong>Overschrijven van context definities</strong><br>
<p>In JSON-LD is het mogelijk om de definitie van termen te overschrijven. Dit is vooral relevant wanneer een bestaande API omgevormd wordt zonder de JSON-structuur aan te passen én wanneer bepaalde keys een andere betekenis hebben afhankelijk van het niveau waarop ze voorkomen.</p>
<br>
<div class="voorbeeld">
<strong>Voorbeeld:</strong> de eigenschap ‘plaats’ heeft afhankelijk van waar het voorkomt in het JSON-LD object, ofwel als verwacht type <a href="http://www.w3.org/1999/02/22-rdf-syntax-ns#langString" target="_blank">‘GeografischePlaats’</a>, wat de standaard optie is in OSLO en dus ook in de OSLO context definitie voor persoon staat, of <a href="http://www.w3.org/ns/locn#Address" target="_blank">‘Adresvoorstelling’</a>. In onderstaand voorbeeld wordt <a href="http://www.w3.org/1999/02/22-rdf-syntax-ns#langString" target="_blank">‘GeografischePlaats’</a> als type gebruikt voor plaats onder ‘inwonerschap’ en overschreven met <a href="http://www.w3.org/ns/locn#Address" target="_blank">‘Adresvoorstelling’</a> in de context definitie onder ‘heeftGeboorte’.<br><br>
<script src="https://gist-it.appspot.com/https://github.com/pwc-technology-be/handreikingOslo/blob/master/snippets/ontwikkelaar_jsonld_overschrijven.jsonld?footer=no"></script>
</div>
</li>
</ul>
</div>
</div>
<div class="u-spacer--large">
<div class="u-spacer">
<h2 class="h2 u-named-anchor" id="case3_sub2">Omgaan met identificatoren</h2>
<p>In Linked Data, en zo ook in JSON-LD, wordt als identificator voor een object waar mogelijk gebruik gemaakt van een URI (uniform resource identifier). In JSON-LD kan elk ‘node object’ een eigen identificator hebben, aangeduid met de key “@id”. Om hier invulling aan te geven kan gebruik gemaakt worden van absolute URI’s, relatieve URI’s of ‘blank node identifiers’.</p>
<br>
Bij <strong>Absolute URI’s</strong> wordt de volledige URI meegegeven als waarde van de “@id” key.
<div class="voorbeeld">
<strong>Voorbeeld:</strong> absolute URI’s
<br>
<br>
<script src="https://gist-it.appspot.com/https://github.com/pwc-technology-be/handreikingOslo/blob/master/snippets/ontwikkelaar_jsonld_absoluteuri.jsonld?footer=no"></script>
</div>
<p>Wanneer de value van de “@id” key niet start met http(s) wordt de string geïnterpreteerd als een <strong>relatieve URI</strong>. Als basis wordt dan de URI van de request header genomen. Alternatief kan in de context definitie ook een ‘base URI’ vastgelegd worden.</p>
<div class="voorbeeld">
<strong>Voorbeeld:</strong> relatieve URI’s
<br>
<br>
<script src="https://gist-it.appspot.com/https://github.com/pwc-technology-be/handreikingOslo/blob/master/snippets/ontwikkelaar_jsonld_relatieveuri.jsonld?footer=no"></script>
</div>
<p>Een <strong>blank node identifier</strong> is een string die dienst doet als identificator voor een <a href="https://www.w3.org/TR/rdf11-concepts/#dfn-blank-node" target="_blank">blank node</a> object. Een blank node identifier is een lokale identificator en is niet persistent, waardoor ze niet bruikbaar zijn buiten de applicatie of service waar ze hun oorsprong vinden. Blank node identifiers hebben steeds _: als prefix, opdat ze niet als relatieve URI zouden geïnterpreteerd worden.</p>
<div class="voorbeeld">
<strong>Voorbeeld:</strong> gebruik van blank node identifiers
<br>
<br>
<script src="https://gist-it.appspot.com/https://github.com/pwc-technology-be/handreikingOslo/blob/master/snippets/ontwikkelaar_jsonld_blanknode.jsonld?footer=no"></script>
</div>
<div class="aanbeveling">
<strong>Aanbeveling:</strong> tenzij het belangrijk is om de lokale identificator mee te geven in het kader van informatie uitwisseling, in welk geval het nuttig kan zijn <a href="https://docs.google.com/document/d/1tbK17wmgkIlNOXjYRE3Arf3PMI--8TvidBprKOcgcvQ/edit#heading=h.g91vhgxio1p" target="_blank">gebruik te maken van een URI</a>, hoeft de blank node identifier niet expliciet te worden meegegeven in een “@id” key. Tijdens de parsing van JSON-LD zullen automatisch blank node identifiers worden toegekend door de reasoner.
</div>
<div class="suggestie">
<strong>Verduidelijking:</strong> “@id” kan ook voorkomen als value voor “@type” in de context definitie. Hiermee wordt aangegeven dat het verwacht type voor een bepaald eigenschap een URI is.
<br>
<br>
<script src="https://gist-it.appspot.com/https://github.com/pwc-technology-be/handreikingOslo/blob/master/snippets/ontwikkelaar_jsonld_verwachttype.jsonld?footer=no"></script>
</div>
</div>
</div>
<div class="u-spacer--large">
<div class="u-spacer">
<h2 class="h2 u-named-anchor" id="case3_sub3">Nesting en arrays</h2>
<p>In JSON-LD wordt het nesten van objecten gebruikt om relaties tussen objecten weer te geven, niet om een hiërarchisch verband voor te stellen. Elk genest object kan bijgevolg ook een eigen “@id” en “@type” hebben.</p><br>
<p>Net zoals bij JSON kunnen arrays weergegeven worden door gebruik te maken van vierkante haakjes. In tegenstelling tot JSON, zijn bij JSON-LD arrays standaard niet geordend. Om het concept van collecties te bewaren kan <a href="https://www.w3.org/TR/json-ld/#sets-and-lists" target="_blank">gebruik gemaakt worden van @list</a>.</p>
</div>
</div>
<div class="u-spacer--large">
<div class="u-spacer">
<h2 class="h2 u-named-anchor" id="case3_sub4">Definiëren van codelijsten, taxonomieën en thesauri</h2>
<p>Het <a href="https://www.w3.org/TR/skos-primer/" target="_blank">Simple Knowledge Organisation System (SKOS)</a> is een generiek datamodel voor het delen van controlled vocabularies zoals codelijsten, thesauri en taxonomieën in een machine-leesbaar formaat op het Web. Het beschikbaar maken van codelijsten volgens SKOS brengt enkele voordelen met zich mee:</p><br>
<ul class="bullet-list bullet-list--check">
<li class="bullet-list__item"><strong>De-referencing:</strong> de principes van Linked Data zijn ook van toepassing op codelijsten en stellen dat elke term in een codelijst moet corresponderen met een URI op basis van het HTTP protocol. Mensen die een term uit een codelijst tegenkomen kunnen dan makkelijk de betekenis opzoeken door de URI in te voeren in een web browser.</li>
<li class="bullet-list__item"><strong>Machine-leesbaarheid:</strong> via de URI kan zowel een machine- als mens-leesbare versie van de codelijst worden opgehaald. SKOS is bovendien een W3C Recommendation, wat interoperabiliteit bevordert met andere systemen die SKOS implementeren.</li>
<li class="bullet-list__item"><strong>Meertaligheid:</strong> SKOS laat toe om makkelijk labels en definities in meerdere talen toe te voegen.</li>
</ul>
<br>
<p>Een codelijst kan in SKOS worden voorgesteld door gebruik te maken van de volgende klassen, eigenschappen en relaties:</p><br>
<ul class="bullet-list bullet-list--check">
<li class="bullet-list__item"><strong>skos:ConceptScheme:</strong> de codelijst zelf kan voorgesteld worden als een skos:ConceptScheme.</li>
<li class="bullet-list__item"><strong>skos:Concept:</strong> elke term in de codelijst is een instantie van de klasse skos:Concept.</li>
<li class="bullet-list__item"><strong>skos:hasTopConcept:</strong> deze eigenschap laat toe om een hiërarchie in een codelijst te stoppen, bijvoorbeeld types en subtypes, door voor een skos:ConceptScheme aan te duiden welke termen zich op het hoogste niveau bevinden.</li>
<li class="bullet-list__item"><strong>skos:inScheme:</strong> deze eigenschap laat toe om vanuit een bepaalde term (een skos:Concept) aan te geven bij welke codelijst deze behoort.</li>
<li class="bullet-list__item"><strong>skos:definition:</strong> deze eigenschap laat toe om een definitie (in tekstvorm) mee te geven aan een terms in de codelijst (een skos:Concept).</li>
<li class="bullet-list__item"><strong>skos:notation:</strong> deze eigenschap laat toe om aan een bepaalde term een code toe te kennen.</li>
<li class="bullet-list__item"><strong>skos:prefLabel:</strong> het (mens-leesbare) label dat geassocieerd is met de term.</li>
</ul>
<br>
<div class="voorbeeld">
<strong>Voorbeeld:</strong> codelijst voor Burgerlijke Staat: omzetten van <a href="http://www.ibz.rrn.fgov.be/fileadmin/user_upload/nl/rr/instructies/IT-lijst/IT120_Burgerlijke_Staat_20170103.pdf" target="_blank">rijksregister IT 120</a> naar SKOS
<br>
<br>
<script src="https://gist-it.appspot.com/https://github.com/pwc-technology-be/handreikingOslo/blob/master/snippets/ontwikkelaar_skos_codelijst.jsonld?footer=no"></script>
</div>
<div class="voorbeeld">
<strong>Voorbeeld:</strong> taxonomie in SKOS
<br>
<br>
<script src="https://gist-it.appspot.com/https://github.com/pwc-technology-be/handreikingOslo/blob/master/snippets/ontwikkelaar_skos_taxonomie.jsonld?footer=no"></script>
</div>
</div>
</div>
<div class="u-spacer--large">
<div class="u-spacer">
<h2 class="h2 u-named-anchor" id="case3_sub5">Containers en paginering</h2>
<p>Soms is het nodig om in één JSON(-LD) document meerdere top-level objecten mee te geven die allen dezelfde context delen als antwoord op een specifieke API request. Bijvoorbeeld om een overzichtspagina te maken of een oplijsting van objecten te tonen met een bepaalde filter erop toegepast. In deze gevallen kan gebruik gemaakt worden van <a href="https://www.hydra-cg.com/spec/latest/core/" target="_blank">HYDRA</a>. De HYDRA specificatie voor hypermedia-driven Web APIs laat toe om meer informatie mee te geven aan een container, specifiek voor het aansturen van REST APIs, in lijn met de principes van Linked Data.</p><br><br>
<div class="voorbeeld">
<strong>Voorbeeld:</strong> pagination meegeven met behulp van HYDRA
<br>
<br>
<script src="https://gist-it.appspot.com/https://github.com/pwc-technology-be/handreikingOslo/blob/master/snippets/ontwikkelaar_hydra.jsonld?footer=no"></script>
</div>
</div>
</div>
<div class="u-spacer--large">
<div class="u-spacer">
<h2 class="h2 u-named-anchor" id="case3_sub6">Input of output structuur vastleggen met JSON-LD framing</h2>
<p><a href="https://json-ld.org/spec/latest/json-ld-framing/" target="_blank">JSON-LD framing</a> is een techniek waarbij ontwikkelaars een bepaalde structuur (een frame) kunnen opleggen aan het JSON-LD payload. Er kan onder meer een onderscheid gemaakt worden tussen verplichte en optionele nodes en standaardwaarden voor attributen kunnen worden meegegeven. Op die manier kan consistentie gegarandeerd worden en kunnen deze frames dienen als basis voor tests, validatie en het toelaten van meerdere datastructuren langs input zijde. Het <a href="https://json-ld.org/spec/latest/json-ld-framing/#framing-algorithm" target="_blank">Framing Algoritme</a> is bovendien in staat om JSON-LD objecten om te zetten naar de gewenste structuur. Voor meer details verwijzen we naar de <a href="https://json-ld.org/spec/latest/json-ld-framing/" target="_blank">specificatie</a>.</p><br><br>
<div class="voorbeeld">
<strong>Voorbeeld:</strong> wanneer de “rol” informatie niet wordt meegegeven zal volgens onderstaand frame “Indiener” als standaardwaarde gebruikt worden.
<br>
<br>
<script src="https://gist-it.appspot.com/https://github.com/pwc-technology-be/handreikingOslo/blob/master/snippets/ontwikkelaar_framing.jsonld?footer=no"></script>
</div>
</div>
</div>
<div class="u-spacer--large">
<div class="u-spacer">
<h2 class="h2 u-named-anchor" id="case3_sub7">Beschikbare tools en libraries</h2>
<p>Er bestaan tools en libraries voor de meeste web-programmeertalen. Onderstaande tabel geeft een overzicht van JSON-LD processors en API’s in verschillende programmeertalen.</p>
<br>
<table>
<tr>
<td><strong>Programmeertaal</strong></td>
<td><strong>Wat?</strong></td>
<td><strong>Link</strong></td>
</tr>
<tr>
<td>JavaScript</td>
<td>JSON-LD Processor en API library</td>
<td><a href="https://github.com/digitalbazaar/jsonld.js/ " target="_blank">https://github.com/digitalbazaar/jsonld.js/ </a></td>
</tr>
<tr>
<td>Java</td>
<td>JSON-LD Processor en API library</td>
<td><a href="https://github.com/jsonld-java/jsonld-java" target="_blank">https://github.com/jsonld-java/jsonld-java</a></td>
</tr>
<tr>
<td>.NET</td>
<td>JSON-LD Processor</td>
<td><a href="https://github.com/NuGet/json-ld.net" target="_blank">https://github.com/NuGet/json-ld.net</a></td>
</tr>
<tr>
<td>PHP</td>
<td>JSON-LD Processor en API library<br>
EasyRDF Library voor RDF manipulatie (met ondersteuning voor JSON-LD)
</td>
<td><a href="https://github.com/digitalbazaar/php-json-ld" target="_blank">https://github.com/digitalbazaar/php-json-ld</a><br>
<a href="http://www.easyrdf.org/" target="_blank">http://www.easyrdf.org/</a></td>
</tr>
<tr>
<td>NodeJS</td>
<td>JSON-LD Processor</td>
<td><a href="https://www.npmjs.com/package/jsonld" target="_blank">https://www.npmjs.com/package/jsonld</a></td>
</tr>
<tr>
<td>Ruby</td>
<td>JSON-LD Processor en API library</td>
<td><a href="https://rubygems.org/gems/json-ld" target="_blank">https://rubygems.org/gems/json-ld</a></td>
</tr>
</table>
<br>
<p>De OSLO tool <a href="https://github.com/Informatievlaanderen/OSLO-SpecificationGenerator" target="_blank">SpecificationGenerator</a> kan gebruikt worden om vertrekkend uit een domeinmodel een JSON-LD context file te genereren. Verder is de <a href="https://json-ld.org/playground/" target="_blank">JSON-LD Playground</a> een handige tool om snel JSON-LD objecten te valideren op vlak van syntax.</p>
</div>
</div>
<div class="u-spacer--large">
<div class="u-spacer">
<h2 class="h2 u-named-anchor" id="case3_sub8">Andere serialisaties</h2>
<p>Naast JSON-LD bestaan tal van andere serialisaties voor Linked Data, elk met een eigen syntax.
De meest gebruikte zijn:</p>
<br>
<ul class="bullet-list bullet-list--check">
<li class="bullet-list__item"><a href="https://www.w3.org/TR/rdf-syntax-grammar/" target="_blank">RDF/XML</a></li>
<li class="bullet-list__item"><a href="https://www.w3.org/TR/turtle/" target="_blank">Turtle</a></li>
<li class="bullet-list__item"><a href="https://www.w3.org/TR/n-triples/" target="_blank">N-triples</a></li>
<li class="bullet-list__item"><a href="https://www.w3.org/TeamSubmission/n3/" target="_blank">Notation3</a></li>
<li class="bullet-list__item"><a href="https://www.w3.org/TR/rdfa-syntax/" target="_blank">RDFa</a> (HTML annotaties)</li>
</ul>
</div>
</div>
<div class="u-spacer">
<h1 class="h1 u-named-anchor" id="case4">Case 4: van tabulaire naar linked data</h1>
<p>Het merendeel van de bestaande data is enkel beschikbaar in tabulair formaat zoals Excel of CSV bestanden. Omzetten van deze tabulaire data naar linked data kan op verschillende manieren gebeuren. De meest geautomatiseerde manier is om een transformatiescript te programmeren die de relevante triples genereert op basis van de tabulaire data. Deze aanpak vereist programmeerervaring en een specifieke implementatie. Hier stellen we een alternatieve en meer toegankelijke werkwijze voor die steunt op <a href="http://openrefine.org/" target="_blank">Open Refine</a>.</p>
<br>
<p>Open Refine is een tool om met (rommelige) data te werken en laat toe om data op te schonen, te transformeren en uit te breiden. Om eveneens met linked data formaten te kunnen werken, is ook de <a href="http://openrefine.org/download.html" target="_blank">RDF extensie</a> voor Open Refine nodig. Eenmaal de software geïnstalleerd is, kunnen volgende stappen doorlopen worden om van tabulaire naar linked data te gaan:</p>
<br>
<ul class="bullet-list bullet-list--check">
<li class="bullet-list__item">Zorg dat een data- of informatiemodel beschikbaar is. Zie de <a href="analist.html" target="_blank">handreiking voor de analist</a> voor een stappenplan om een dergelijk model te ontwikkelen.</li>
<li class="bullet-list__item">Orden de tabulaire data zodat elke kolom een eigenschap van het model bevat. Onderstaande figuur illustreert dit voor een fictief voorbeeld waarbij een boek wordt omschreven door middel van een Titel, Beschrijving en een Klantenbeoordeling.
<div class="lightbox js-lightbox gallery">
<a data-lightbox-item class="gallery__item" href="img/openrefine_data.png" data-size="1232x429" itemprop="contentUrl">
<figure>
<img itemprop="thumbnail" src="img/openrefine_data.png" srcset="img/openrefine_data.png 1x, img/openrefine_data.png 2x" alt="" />
<figcaption class="js-lightbox-caption lightbox-caption" itemprop="caption description">Tabulaire data</figcaption>
</figure>
</a>
</div>
<br>
</li>
<li class="bullet-list__item">Importeer de tabulaire data in Open Refine.</li>
<li class="bullet-list__item">Map de kolommen van de tabulaire data naar de klassen en eigenschappen van het model. Dit kan via de “Edit RDF Skeleton” optie. Een venster getiteld “RDF Schema Alignment” opent waarin manueel kan bepaald worden op welke eigenschap elke kolom moet gemapt worden. In onderstaand voorbeeld wordt de kolom met de boektitels gemapt op dct:title en de beschrijving op dct:description ter illustratie.
<div class="lightbox js-lightbox gallery">
<a data-lightbox-item class="gallery__item" href="img/openrefine_map.png" data-size="834x293" itemprop="contentUrl">
<figure>
<img itemprop="thumbnail" src="img/openrefine_map.png" srcset="img/openrefine_map.png 1x, img/openrefine_map.png 2x" alt="" />
<figcaption class="js-lightbox-caption lightbox-caption" itemprop="caption description">Mapping naar het datamodel</figcaption>
</figure>
</a>
</div>
<br>
</li>
<li class="bullet-list__item">Eenmaal de mapping volledig gebeurd is en alle instellingen gespecificeerd zijn, kan de data geëxporteerd worden als RDF. Dit kan via “Export” > “RDF as RDF/XML”. Onderstaande afbeelding toont het resultaat voor het fictief voorbeeld.
<div class="lightbox js-lightbox gallery">
<a data-lightbox-item class="gallery__item" href="img/openrefine_rdf.png" data-size="1062x307" itemprop="contentUrl">
<figure>
<img itemprop="thumbnail" src="img/openrefine_rdf.png" srcset="img/openrefine_rdf.png 1x, img/openrefine_rdf.png 2x" alt="" />
<figcaption class="js-lightbox-caption lightbox-caption" itemprop="caption description">Mapping naar het datamodel</figcaption>
</figure>
</a>
</div>
<br>
</li>
</ul>
</div>
</div>
</div>
<div class="col--3-12 col--12-12--s col--4-12--m">
<nav class="side-navigation js-sticky js-scrollspy" data-scrollspy-mobile="Componenten" data-sticky-offset-top="25">
<div class="side-navigation__content">
<div class="side-navigation__group">
<ul>
<li class="side-navigation__item">
<a href="#case1" data-child="parent-2">Case 1: Een API opzetten</a>
</li>
<li class="side-navigation__item">
<a href="#case2" data-child="parent-2">Case 2: Een database opzetten</a>
</li>
<li class="side-navigation__item">
<a class="side-navigation__toggle" href="#case3" data-child="parent-1">Case 3: Gegevensuitwisseling</a>
<ul>
<li class="side-navigation__item">
<a href="#case3_sub1" data-parent="parent-1">Gebruik van @context definities</a>
</li>
<li class="side-navigation__item">
<a href="#case3_sub2" data-parent="parent-1">Omgaan met identificatoren</a>
</li>
<li class="side-navigation__item">
<a href="#case3_sub3" data-parent="parent-1">Nesting en arrays</a>
</li>
<li class="side-navigation__item">
<a href="#case3_sub4" data-parent="parent-1">Definiëren van codelijsten, taxonomieën en thesauri</a>
</li>
<li class="side-navigation__item">
<a href="#case3_sub5" data-parent="parent-1">Containers en paginering</a>
</li>
<li class="side-navigation__item">
<a href="#case3_sub6" data-parent="parent-1">Input of outputstructuur vastleggen</a>
</li>
<li class="side-navigation__item">
<a href="#case3_sub7" data-parent="parent-1">Beschikbare tools en libraries</a>
</li>
<li class="side-navigation__item">
<a href="#case3_sub8" data-parent="parent-1">Andere serialisaties</a>
</li>
</ul>
</li>
<li class="side-navigation__item">
<a href="#case4" data-child="parent-2">Case 4: Van tabulaire naar linked data</a>
</li>
</ul>
</div>
<div class="side-navigation__group">
<ul>
<li class="side-navigation__item"><a href="#handleidingen">Profielgebaseerde handleidingen</a>
</li>
<li class="side-navigation__item"><a href="architectuur.html">Architecturale overwegingen</a>
</li>
</ul>
</div>
<div class="side-navigation__group">
<ul>
<li class="side-navigation__item"><a href="index.html">Hoofdpagina handreiking</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="region region--alt">
<div class="layout layout--wide">
<div class="u-spacer--large">
<h2 class="h2 u-named-anchor" id="handleidingen">Profielgebaseerde handleidingen</h2>
<!-- demo doormat component in grid -->
<ul class="grid grid--is-stacked js-equal-height-container">
<li class="col--4-12 col--6-12--m col--12-12--xs">
<a class="doormat js-equal-height" href="businessverantwoordelijke.html">
<h2 class="doormat__title" data-clamp="2">Business verantwoordelijke</h2>
<div class="doormat__text" data-clamp="3">Integreren van de informatiestrategie in een projectplan.
</div>
</a>
</li>
<li class="col--4-12 col--6-12--m col--12-12--xs">
<a class="doormat js-equal-height" href="analist.html">
<h2 class="doormat__title" data-clamp="2">Analist</h2>
<div class="doormat__text">Uitwerken van een informatiemodel op basis van de behoeften.
</div>
</a>
</li>
<li class="col--4-12 col--6-12--m col--12-12--xs">
<a class="doormat js-equal-height" href="ontwikkelaar.html">
<h2 class="doormat__title" data-clamp="2">Ontwikkelaar</h2>
<div class="doormat__text" data-clamp="3">Implementeren van semantische afspraken in elektronische diensten.
</div>
</a>
</li>
</ul>
<!-- end component -->
</div>
</div>
</div>
<!-- <div class="region">
<div class="layout layout--wide">
<div class="grid" data-tabs data-tabs-responsive-label="Navigatie" data-active="tab-2-nummer-1">
<div class="col--1-1">
<div class="tabs__wrapper">
<ul class="tabs" data-tabs-list>
<li class="tab">
<a class="tab__link" id="tab-2-nummer-1" href="#" data-tab>Syntax 1</a>
</li>
<li class="tab">
<a class="tab__link" id="tab-2-nummer-2" href="#" data-tab>Syntax 2</a>
</li>
<li class="tab">
<a class="tab__link" id="tab-2-nummer-3" href="#" data-tab>Syntax 3</a>
</li>
</ul>
</div>
</div>
<section class="col--1-1 tab__pane tab–active" data-tab-pane>
<script src="https://gist-it.appspot.com/https://github.com/pwc-technology-be/handreikingOslo/blob/master/snippets/snippet1.html"></script>
</section>
<section class="col--1-1 tab__pane" data-tab-pane>
<script src="https://gist-it.appspot.com/https://github.com/pwc-technology-be/handreikingOslo/blob/master/snippets/snippet2.rdf"></script>
</section>
<section class="col--1-1 tab__pane" data-tab-pane>
<h1 class="h3">Syntax 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta suscipit exercitationem, eligendi quia eum doloribus ab sint consequatur amet nesciunt impedit perferendis iure aliquam odit nihil error illo dolore eaque, eius quam officiis ipsa nobis, quaerat!</p>
</section>
</div>
</div>
</div> -->
</div>
</div>
<!-- End page content -->
<div id="vlaanderen-footer">
<!-- insert your Vlaanderen-footer-code here -->
<script src="//widgets.vlaanderen.be/widget/live/d6d44414e7c242f396ab6da8f8da5198" type=
"text/javascript">
<![CDATA[]]>
</script> <!-- End global footer-->
</div>
<script src="https://dij151upo6vad.cloudfront.net/2.latest/js/vlaanderen-ui.js"></script>
</body>
</html>