{"id":307,"date":"2019-09-30T07:50:24","date_gmt":"2019-09-30T07:50:24","guid":{"rendered":"https:\/\/stud.hosted.hr.nl\/0980417\/?p=307"},"modified":"2020-06-11T08:21:00","modified_gmt":"2020-06-11T08:21:00","slug":"front-end-block","status":"publish","type":"post","link":"https:\/\/stud.hosted.hr.nl\/0980417\/2019\/09\/30\/front-end-block\/","title":{"rendered":"Front-end Block"},"content":{"rendered":"\n<p>Voor dit block bouw je een website met HTML, CSS en een snufje Javascript.<br><br>Je bouwt het raamwerk van je app volgens HTML standaarden. Met CSS ontwerp je een bruikbare interface die werkt op verschillende schermen en apparaten. Je gebruikt javascript om interactie aan je website toe te voegen. Je kan alle criteria aantonen en toelichten middels \u00e9\u00e9n web project waarbij alle onderdelen samen&nbsp;<em>\u00e9\u00e9n geheel<\/em>&nbsp;vormen. Jij hebt persoonlijk alle code geschreven.&nbsp;Kijk goed naar de bronnen die genoemd worden voor dit block! Voor dit block werk je&nbsp;<em>niet<\/em>&nbsp;met frameworks en libraries voor javascript en css.&nbsp;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p class=\"has-background has-light-green-cyan-background-color\"><strong>HTML<\/strong><br>Je hebt onderzoek gedaan naar het werken met HTML5 middels een online cursus. Je kan een heldere structuur opzetten middels moderne semantische tags zoals NAV en SECTION. Je HTML bevat geen inline styles en javascript.<\/p>\n\n\n\n<p>Door gebruik te maken van onder andere Pluralsight.com ben ik veel te weten gekomen over HTML5. De cursus genaamd &#8220;Practical HTML5&#8221; van Gill Cleeren heeft me hierbij geholpen. Waar ik veel gebruik van maak is de &lt;nav&gt; en &lt;footer&gt; tag omdat dat duidelijk aangeeft waar je je bevind in de code van de webpagina. Er wordt ook geen inline- styling en javascript toegepast binnen de HTML. Alle vormgeving wordt binnen de style.css file afgehandeld.<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-2 is-cropped\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/HTML5.jpg\"><img width=\"1024\" height=\"576\" src=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/HTML5-1024x576.jpg\" alt=\"\" data-id=\"1927\" data-full-url=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/HTML5.jpg\" data-link=\"https:\/\/stud.hosted.hr.nl\/0980417\/2019\/09\/30\/front-end-block\/html5\/\" class=\"wp-image-1927\" srcset=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/HTML5-1024x576.jpg 1024w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/HTML5-300x169.jpg 300w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/HTML5-768x432.jpg 768w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/HTML5-1536x864.jpg 1536w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/HTML5.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">HTML5 cursus (Pluralsigt)<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/home-secure.jpg\"><img width=\"1024\" height=\"555\" src=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/home-secure-1024x555.jpg\" alt=\"\" data-id=\"1926\" data-full-url=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/home-secure.jpg\" data-link=\"https:\/\/stud.hosted.hr.nl\/0980417\/2019\/09\/30\/front-end-block\/home-secure\/\" class=\"wp-image-1926\" srcset=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/home-secure-1024x555.jpg 1024w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/home-secure-300x163.jpg 300w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/home-secure-768x416.jpg 768w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/home-secure-1536x833.jpg 1536w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/home-secure.jpg 1922w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">Verzorgde code<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/footer-1.jpg\"><img width=\"1024\" height=\"555\" src=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/footer-1-1024x555.jpg\" alt=\"\" data-id=\"1936\" data-full-url=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/footer-1.jpg\" data-link=\"https:\/\/stud.hosted.hr.nl\/0980417\/2019\/09\/30\/front-end-block\/footer-2\/\" class=\"wp-image-1936\" srcset=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/footer-1-1024x555.jpg 1024w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/footer-1-300x163.jpg 300w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/footer-1-768x416.jpg 768w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/footer-1-1536x833.jpg 1536w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/footer-1.jpg 1922w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">Footer<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/manage-1.jpg\"><img width=\"1024\" height=\"555\" src=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/manage-1-1024x555.jpg\" alt=\"\" data-id=\"1937\" data-full-url=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/manage-1.jpg\" data-link=\"https:\/\/stud.hosted.hr.nl\/0980417\/2019\/09\/30\/front-end-block\/manage-2\/\" class=\"wp-image-1937\" srcset=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/manage-1-1024x555.jpg 1024w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/manage-1-300x163.jpg 300w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/manage-1-768x416.jpg 768w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/manage-1-1536x833.jpg 1536w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/manage-1.jpg 1922w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">Menu met admin pagina<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p class=\"has-background has-light-green-cyan-background-color\"><strong>CSS syntax<\/strong><br>Je kan werken met css selectors: tags, id\u2019s en classes. Je gebruikt flexbox of css grid om structuur in je layout aan te brengen. Je website is responsive door te werken met relatieve eenheden en media queries. Je site werkt goed op verschillende maten schermen en apparaten, \u00e9n in verschillende browsers.<\/p>\n\n\n\n<p>Zoals op het screenshot hieronder te zien is maak ik gebruik van verschillende CSS selectors. De standaard selectors die direct op DOM elementen werken zoals body en html gebruik ik om een basis ontwerp neer te zetten. Alle hyperlinks op de pagina geef ik dezelfde kleur en g\u00e9\u00e9n underscore door middel van &#8216;a, a:visited&#8217; toe te passen. Specifieke meldingen die tijdens het registreren op de site verschijnen hebben allemaal een uniek id, deze roep ik aan door gebruik te maken van &#8216;#errorsml&#8217; en &#8216;#successml&#8217;.<br><br>De site is geheel responsive gemaakt door gebruik te maken van media queries. De website verandert van design op basis van de breedte van de browser. Er zijn twee breakpoints aanwezig die onder andere de eigenschappen van de flexbox en tabellen aanpassen. Ik heb gekozen voor een flexbox in de header van het menu omdat dit alles mooi evenredig laat schalen. Zodra de knoppen in de flexbox te dicht op elkaar komen laat ik het verspringen naar een lay-out waarbij het onder elkaar komt te staan. Er is waar mogelijk gewerkt met percentages in plaats van fixed values omdat dit ten goede komt aan het responsive ontwerp. Het lastigste was het het schaalbaar maken van tabellen voor een smartphone omdat heel veel data op een klein en smal scherm moet komen. Dit probleem heb ik opgelost door de tabel zich vanaf 750 pixels anders te sorteren, data komt nu niet meer naast elkaar maar onder elkaar te staan. Het menu maakt gebruik van hetzelfde principe. Ik heb ervoor gekozen om het op deze manier te doen omdat je bij bijvoorbeeld een hamburgermenu een extra handeling nodig hebt om het menu te openen. Dit is bij deze site niet nodig en voor de eindgebruiker werkt dit ook sneller.<br><br>De website werkt op zo goed als alle moderne browers. De technieken die ik gebruikt heb heb ik gecontroleerd op <a href=\"https:\/\/caniuse.com\">caniuse.com<\/a>. Ook heb ik het getest op meerdere apparaten (Windows\/Mac), browsers (Chrome, Opera, IE, Edge, Firefox en Safari) en smartphones (iOS, Android). Dit werkt allemaal zoals het hoort zonder problemen.<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-2 is-cropped\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/DOMs.jpg\"><img width=\"1024\" height=\"576\" src=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/DOMs-1024x576.jpg\" alt=\"\" data-id=\"1954\" data-full-url=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/DOMs.jpg\" data-link=\"https:\/\/stud.hosted.hr.nl\/0980417\/2019\/09\/30\/front-end-block\/doms\/\" class=\"wp-image-1954\" srcset=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/DOMs-1024x576.jpg 1024w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/DOMs-300x169.jpg 300w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/DOMs-768x432.jpg 768w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/DOMs-1536x864.jpg 1536w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/DOMs.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">CSS DOM elementen<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/ids.jpg\"><img width=\"1024\" height=\"537\" src=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/ids-1024x537.jpg\" alt=\"\" data-id=\"1955\" data-full-url=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/ids.jpg\" data-link=\"https:\/\/stud.hosted.hr.nl\/0980417\/2019\/09\/30\/front-end-block\/ids\/\" class=\"wp-image-1955\" srcset=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/ids-1024x537.jpg 1024w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/ids-300x157.jpg 300w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/ids-768x403.jpg 768w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/ids.jpg 1307w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">CSS classes en IDs<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/screen-media.jpg\"><img width=\"1024\" height=\"576\" src=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/screen-media-1024x576.jpg\" alt=\"\" data-id=\"1956\" data-full-url=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/screen-media.jpg\" data-link=\"https:\/\/stud.hosted.hr.nl\/0980417\/2019\/09\/30\/front-end-block\/screen-media\/\" class=\"wp-image-1956\" srcset=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/screen-media-1024x576.jpg 1024w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/screen-media-300x169.jpg 300w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/screen-media-768x432.jpg 768w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/screen-media-1536x864.jpg 1536w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/screen-media.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">CSS media queries responsive<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/flexbox.jpg\"><img width=\"1024\" height=\"602\" src=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/flexbox-1024x602.jpg\" alt=\"\" data-id=\"1988\" data-full-url=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/flexbox.jpg\" data-link=\"https:\/\/stud.hosted.hr.nl\/0980417\/2019\/09\/30\/front-end-block\/flexbox\/\" class=\"wp-image-1988\" srcset=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/flexbox-1024x602.jpg 1024w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/flexbox-300x176.jpg 300w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/flexbox-768x452.jpg 768w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/flexbox.jpg 1199w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">CSS Flexbox responsive<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/1desktop.jpg\"><img width=\"1024\" height=\"555\" src=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/1desktop-1024x555.jpg\" alt=\"\" data-id=\"1951\" data-full-url=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/1desktop.jpg\" data-link=\"https:\/\/stud.hosted.hr.nl\/0980417\/2019\/09\/30\/front-end-block\/1desktop\/\" class=\"wp-image-1951\" srcset=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/1desktop-1024x555.jpg 1024w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/1desktop-300x163.jpg 300w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/1desktop-768x416.jpg 768w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/1desktop-1536x832.jpg 1536w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/1desktop.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">Responsive desktop<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/2tablet.jpg\"><img width=\"1024\" height=\"555\" src=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/2tablet-1024x555.jpg\" alt=\"\" data-id=\"1952\" data-full-url=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/2tablet.jpg\" data-link=\"https:\/\/stud.hosted.hr.nl\/0980417\/2019\/09\/30\/front-end-block\/2tablet\/\" class=\"wp-image-1952\" srcset=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/2tablet-1024x555.jpg 1024w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/2tablet-300x163.jpg 300w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/2tablet-768x416.jpg 768w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/2tablet-1536x832.jpg 1536w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/2tablet.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">Responsive tablet<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/3mobile.jpg\"><img width=\"1024\" height=\"555\" src=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/3mobile-1024x555.jpg\" alt=\"\" data-id=\"1953\" data-full-url=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/3mobile.jpg\" data-link=\"https:\/\/stud.hosted.hr.nl\/0980417\/2019\/09\/30\/front-end-block\/3mobile\/\" class=\"wp-image-1953\" srcset=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/3mobile-1024x555.jpg 1024w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/3mobile-300x163.jpg 300w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/3mobile-768x416.jpg 768w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/3mobile-1536x832.jpg 1536w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/3mobile.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">Responsive mobile<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video-container\"><iframe loading=\"lazy\" title=\"Resonsive design - flexbox and media screens\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/U5sqvrbGL8I?feature=oembed&#038;wmode=opaque\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<p class=\"has-background has-light-green-cyan-background-color\"><strong>CSS Ontwerp<\/strong><br>Je bent in staat om een bestaand visueel ontwerp om te zetten naar CSS code. Hiervoor kan je een ontwerp gebruiken uit de interactie ontwerp lessen, of een ontwerp uit CLE. Het ontwerp hoeft niet van jezelf te zijn.<\/p>\n\n\n\n<p>Een visueel ontwerp was er al in de basis. De klant waarvoor ik het systeem ontwikkeld heb heeft al <a href=\"http:\/\/www.schoonheidssalonlaro.nl\">een website<\/a>. Ze wilde graag dat het reserveringssysteem een nieuw en modern uiterlijk kreeg. In overleg heb ik een low fidelity wireframe\/schets gemaakt van het reserveringssysteem. De klant ging hier mee akkoord en dit is vertaald naar een interactieve website op basis van het eerder gemaakte ontwerp. Dit is een stramien wat als basis geldt voor de gehele website. Alle elementen in de site maken gebruik van dezelfde opmaak zodat er \u00e9\u00e9n lijn in het design zit. Er is een ontwerp voor de desktop, tablet in landscape mode en een mobiel design.<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-2 is-cropped\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/Tekengebied-1-100.jpg\"><img width=\"1024\" height=\"576\" src=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/Tekengebied-1-100-1024x576.jpg\" alt=\"\" data-id=\"1972\" data-full-url=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/Tekengebied-1-100.jpg\" data-link=\"https:\/\/stud.hosted.hr.nl\/0980417\/2019\/09\/30\/front-end-block\/tekengebied-1-100\/\" class=\"wp-image-1972\" srcset=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/Tekengebied-1-100-1024x576.jpg 1024w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/Tekengebied-1-100-300x169.jpg 300w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/Tekengebied-1-100-768x432.jpg 768w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/Tekengebied-1-100-1536x864.jpg 1536w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/Tekengebied-1-100.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">Wireframe-ontwerp desktop<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/Tekengebied-2-100.jpg\"><img width=\"1024\" height=\"768\" src=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/Tekengebied-2-100-1024x768.jpg\" alt=\"\" data-id=\"1995\" data-full-url=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/Tekengebied-2-100.jpg\" data-link=\"https:\/\/stud.hosted.hr.nl\/0980417\/2019\/09\/30\/front-end-block\/tekengebied-2-100\/\" class=\"wp-image-1995\" srcset=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/Tekengebied-2-100-1024x768.jpg 1024w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/Tekengebied-2-100-300x225.jpg 300w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/Tekengebied-2-100-768x576.jpg 768w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/Tekengebied-2-100.jpg 1441w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">Wireframe-ontwerp tablet<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/Tekengebied-3-100.jpg\"><img width=\"576\" height=\"1024\" src=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/Tekengebied-3-100-576x1024.jpg\" alt=\"\" data-id=\"1996\" data-full-url=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/Tekengebied-3-100.jpg\" data-link=\"https:\/\/stud.hosted.hr.nl\/0980417\/2019\/09\/30\/front-end-block\/tekengebied-3-100\/\" class=\"wp-image-1996\" srcset=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/Tekengebied-3-100-576x1024.jpg 576w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/Tekengebied-3-100-169x300.jpg 169w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/Tekengebied-3-100.jpg 611w\" sizes=\"(max-width: 576px) 100vw, 576px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">Wireframe-ontwerp mobile<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/aa02.jpg\"><img width=\"1024\" height=\"555\" src=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/aa02-1024x555.jpg\" alt=\"\" data-id=\"1968\" data-full-url=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/aa02.jpg\" data-link=\"https:\/\/stud.hosted.hr.nl\/0980417\/2019\/09\/30\/front-end-block\/aa02\/\" class=\"wp-image-1968\" srcset=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/aa02-1024x555.jpg 1024w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/aa02-300x163.jpg 300w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/aa02-768x416.jpg 768w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/aa02-1536x832.jpg 1536w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/aa02.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/aa01.jpg\"><img width=\"1024\" height=\"555\" src=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/aa01-1024x555.jpg\" alt=\"\" data-id=\"1967\" data-full-url=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/aa01.jpg\" data-link=\"https:\/\/stud.hosted.hr.nl\/0980417\/2019\/09\/30\/front-end-block\/aa01\/\" class=\"wp-image-1967\" srcset=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/aa01-1024x555.jpg 1024w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/aa01-300x163.jpg 300w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/aa01-768x416.jpg 768w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/aa01-1536x832.jpg 1536w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/aa01.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/aa.jpg\"><img width=\"1024\" height=\"555\" src=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/aa-1024x555.jpg\" alt=\"\" data-id=\"1966\" data-full-url=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/aa.jpg\" data-link=\"https:\/\/stud.hosted.hr.nl\/0980417\/2019\/09\/30\/front-end-block\/aa\/\" class=\"wp-image-1966\" srcset=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/aa-1024x555.jpg 1024w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/aa-300x163.jpg 300w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/aa-768x416.jpg 768w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/aa-1536x832.jpg 1536w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/aa.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/cc.jpg\"><img width=\"1024\" height=\"555\" src=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/cc-1024x555.jpg\" alt=\"\" data-id=\"1970\" data-full-url=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/cc.jpg\" data-link=\"https:\/\/stud.hosted.hr.nl\/0980417\/2019\/09\/30\/front-end-block\/cc\/\" class=\"wp-image-1970\" srcset=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/cc-1024x555.jpg 1024w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/cc-300x163.jpg 300w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/cc-768x416.jpg 768w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/cc-1536x832.jpg 1536w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/cc.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/dd.jpg\"><img width=\"1024\" height=\"555\" src=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/dd-1024x555.jpg\" alt=\"\" data-id=\"1971\" data-full-url=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/dd.jpg\" data-link=\"https:\/\/stud.hosted.hr.nl\/0980417\/2019\/09\/30\/front-end-block\/dd\/\" class=\"wp-image-1971\" srcset=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/dd-1024x555.jpg 1024w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/dd-300x163.jpg 300w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/dd-768x416.jpg 768w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/dd-1536x832.jpg 1536w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/dd.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/bb.jpg\"><img width=\"1024\" height=\"555\" src=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/bb-1024x555.jpg\" alt=\"\" data-id=\"1969\" data-full-url=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/bb.jpg\" data-link=\"https:\/\/stud.hosted.hr.nl\/0980417\/2019\/09\/30\/front-end-block\/bb\/\" class=\"wp-image-1969\" srcset=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/bb-1024x555.jpg 1024w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/bb-300x163.jpg 300w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/bb-768x416.jpg 768w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/bb-1536x832.jpg 1536w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/bb.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p class=\"has-background has-light-green-cyan-background-color\"><strong>Javascript<\/strong><br>Je begrijpt hoe je met modern ES6 javascript functionaliteit en interactie kan toevoegen aan je website. Je website kan input van de gebruiker verwerken met javascript, en je kan de website updaten met javascript.<\/p>\n\n\n\n<p>Omdat mijn bewijsmateriaal voor dit block grotendeels uit CLE2 komt en we hier nog niet actief hebben gewerkt met ES6 javascript heb ik het bewijsmateriaal uit CLE4 gehaald. Deze periode staat in het teken van een arcade game welke in de browser moet werken. De Covid Game maakt g\u00e9\u00e9n gebruik van frameworks en libraries, alles is in plain code geschreven.<br><br>Door gebruik te maken van Javascript heb ik functionaliteiten gebouwd voor de webgame. Waar ik onder andere aan gewerkt heb is het mogelijk maken voor de speler om de character in game te besturen door middel van het toetsenbord. Door gebruik te maken van een keylistener die werkt met een event die op keyboard inputs checkt stuur ik een boolean (true\/false) mee. Als bepaalde key ingedruk wordt heeft deze de value &#8217;true&#8217;, dit zet weer een nieuwe actie in gang zoals het lopen naar links of rechts.<br><br>Hieronder is de code te zien welke dit mogelijk maakt. De functies worden aangeroepen in weer een globale loopfunctie welke 60 keer per seconde elementen update zodat ze vloeiend over het scherm animeren. Hier is de gameloop voor verantwoordelijk.<br><br>De demo van het spel is speelbaar op <a href=\"https:\/\/www.brambenik.nl\/cle4\/\">brambenik.nl\/cle4\/<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/inputs-1.png\"><img width=\"1024\" height=\"795\" src=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/inputs-1-1024x795.png\" alt=\"\" data-id=\"1985\" data-full-url=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/inputs-1.png\" data-link=\"https:\/\/stud.hosted.hr.nl\/0980417\/2019\/09\/30\/front-end-block\/inputs-2\/\" class=\"wp-image-1985\" srcset=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/inputs-1-1024x795.png 1024w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/inputs-1-300x233.png 300w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/inputs-1-768x596.png 768w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/inputs-1-1536x1193.png 1536w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/inputs-1.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">Check uitvoeren op de keys<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/gameloop.png\"><img width=\"1024\" height=\"727\" src=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/gameloop-1024x727.png\" alt=\"\" data-id=\"1976\" data-full-url=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/gameloop.png\" data-link=\"https:\/\/stud.hosted.hr.nl\/0980417\/2019\/09\/30\/front-end-block\/gameloop\/\" class=\"wp-image-1976\" srcset=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/gameloop-1024x727.png 1024w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/gameloop-300x213.png 300w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/gameloop-768x546.png 768w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/gameloop.png 1174w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">Benodigde functies in game.ts 60 keer per seconde updaten<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/update.png\"><img width=\"971\" height=\"1024\" src=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/update-971x1024.png\" alt=\"\" data-id=\"1978\" data-full-url=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/update.png\" data-link=\"https:\/\/stud.hosted.hr.nl\/0980417\/2019\/09\/30\/front-end-block\/update\/\" class=\"wp-image-1978\" srcset=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/update-971x1024.png 971w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/update-284x300.png 284w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/update-768x810.png 768w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/update-1456x1536.png 1456w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/update.png 1746w\" sizes=\"(max-width: 971px) 100vw, 971px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">Functie die verantwoordelijk is voor het laten lopen van de player<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/walk.png\"><img width=\"1024\" height=\"317\" src=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/walk-1024x317.png\" alt=\"\" data-id=\"1979\" data-full-url=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/walk.png\" data-link=\"https:\/\/stud.hosted.hr.nl\/0980417\/2019\/09\/30\/front-end-block\/walk\/\" class=\"wp-image-1979\" srcset=\"https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/walk-1024x317.png 1024w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/walk-300x93.png 300w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/walk-768x238.png 768w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/walk-1536x476.png 1536w, https:\/\/stud.hosted.hr.nl\/0980417\/wp-content\/uploads\/2019\/09\/walk.png 2014w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"blocks-gallery-item__caption\">Functie die de speler een kant uit laat lopen en omzet naar een string voor de style.css<\/figcaption><\/figure><\/li><\/ul><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Voor dit block bouw je een website met HTML, CSS en een snufje Javascript. Je bouwt het raamwerk van je app volgens HTML standaarden. Met&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":235,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/stud.hosted.hr.nl\/0980417\/wp-json\/wp\/v2\/posts\/307"}],"collection":[{"href":"https:\/\/stud.hosted.hr.nl\/0980417\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stud.hosted.hr.nl\/0980417\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stud.hosted.hr.nl\/0980417\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stud.hosted.hr.nl\/0980417\/wp-json\/wp\/v2\/comments?post=307"}],"version-history":[{"count":35,"href":"https:\/\/stud.hosted.hr.nl\/0980417\/wp-json\/wp\/v2\/posts\/307\/revisions"}],"predecessor-version":[{"id":1999,"href":"https:\/\/stud.hosted.hr.nl\/0980417\/wp-json\/wp\/v2\/posts\/307\/revisions\/1999"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stud.hosted.hr.nl\/0980417\/wp-json\/wp\/v2\/media\/235"}],"wp:attachment":[{"href":"https:\/\/stud.hosted.hr.nl\/0980417\/wp-json\/wp\/v2\/media?parent=307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stud.hosted.hr.nl\/0980417\/wp-json\/wp\/v2\/categories?post=307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stud.hosted.hr.nl\/0980417\/wp-json\/wp\/v2\/tags?post=307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}