This repository has been archived by the owner on Jan 10, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
encryptie-controleren.html
257 lines (235 loc) · 17.1 KB
/
encryptie-controleren.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
<!DOCTYPE HTML>
<!--
Editorial by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>CyberUitleg | Encryptie controleren</title>
<meta name="description" content="Hier leer je hoe jij zelf kan zien of jij veilig op het internet bent....." />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<!--[if lte IE 8]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.min.js"></script><![endif]-->
<script src="assets/js/google/tag.js" async></script>
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<link rel="icon" href="images/favicon.ico">
</head>
<body class="fade-out">
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P2MJLPK" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<div id="wrapper">
<!-- Main -->
<div id="main">
<div class="inner">
<!-- Header -->
<header id="header">
<a href="index.html" class="logo"><strong>Cyber</strong> uitleg</a>
<ul class="icons">
<li><a href="https://twitter.com/csm_devs" class="icon fa-twitter" target="_blank"><span class="label">Twitter</span></a></li>
<li><a href="https://www.facebook.com/CSMDevs/" class="icon fa-facebook" target="_blank"><span class="label">Facebook</span></a></li>
<li><a href="https://www.instagram.com/csm_devs/" class="icon fa-instagram" target="_blank"><span class="label">Instagram</span></a></li>
<li><a href="https://csmdevs.github.io" class="icon fa-code" target="_blank"><span class="label">CSM-Devs</span></a></li>
</ul>
</header>
<!-- Content -->
<section>
<div style="position: fixed; z-index: 1000000; top: 0px; left: 0px; right: 0px; background-color: #f9f9f9;" id="already-finished">
<p style="width: 100%; text-align: center; font-size: 3vw; text-align: center; margin-bottom: -0.3vw;"><strong>Je hebt dit gedeelte al gedaan.</strong><span onclick="hideBanner()"><img src="images/cancel.svg" style="height: 2vw; position: fixed; right: 1.25vw; top: 1.2vw; cursor:pointer;"></span></p>
</div>
<header class="main">
<h1>Encryptie controleren</h1>
</header>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Header -->
<p>Advertentie:</p>
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8952340716409624" data-ad-slot="6997533943" data-ad-format="horizontal" data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br><br>
<span class="image main"><img src="images/encryptie-controleren-top.jpg" alt="" /></span>
<p>Het internet is niet altijd goed beveiligd. Wij gaan jouw leren hoe jij kan herkennen of een website veilig is en hoe je ervoor kan zorgen dat jij niet gehacked kan worden. Het is zeker belangrijk om dit te doen, want anders loop je het risico dat
al jouw foto's, video's en wachtwoorden op het internet voor iedereen te zien worden.</p>
<div id="video">
<video id="intro-video" poster="images/encryptie-controleren-video.jpg" controls style="margin-left: auto; margin-right: auto; display:block; max-width:80%; max-heigt: 500px;" data-pause1="2" data-ans1="addb" data-ans2="http" data-ans3="addbs" data-ans4="https" data-ansc="four">
<source src="https://res.cloudinary.com/michdenheijer/video/upload/vc_h264/v1539236235/1D1E83B2-8F30-4F6D-8698-DC0CD4A4138A.mp4" type="video/mp4">
</video><br>
</div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<p>Advertentie:</p>
<ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-8952340716409624" data-ad-slot="5069374603"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div id="questions">
<h2>Hoe heet de technologie die voor een beveiligde verbinding zorgt?</h2>
<p><i>Wij gebruiken deze technologie ook!</i></p>
<div id="answer-buttons">
<button id="answer-1" onclick="">Answer 1</button> <button id="answer-2" onclick="">Answer 2</button> <button id="answer-3" onclick="">Answer 3</button> <button id="answer-4" onclick="">Answer 4</button>
</div>
<div id="correct">
<p>Je hebt het goede antwoord gekozen!</p>
<button id="verder-correct">Verder</button>
</div>
<div id="wrong">
<p>Je hebt het verkeerde antwoord gekozen, je moet weer terug naar het begin.....</p>
<button id="verder-wrong">Verder</button>
</div>
<br>
</div>
<div id="after-video">
<br>
<h2>Beschrijving</h2>
<p>Je kan nu herkennen of een website veilig is, en welke websites dat niet zijn. <i>Om je te herinneren, <b>https</b> zorgt voor de veilige verbinding.</i> Ga nu zelf op onderzoek uit en probeer niet beveiligde websites te zoeken. <i>Wil je meer weten over hoe <b>https</b> werkt? Kijk de linkjes hieronder voor meer</i></p>
<h3>Linkjes</h3>
<ul>
<li><a href="https://nl.wikipedia.org/wiki/HyperText_Transfer_Protocol_Secure" target="_blank">Wikipedia</a></li>
<li><a href="https://www.instantssl.com/ssl-certificate-products/https.html">Hoe werkt https?</a></li>
</ul>
<h2>Kan jij zelf websites vinden zonder <strong>https</strong>?</h2>
<p>Websites zonder <strong>https</strong> versturen al je gegevens, zonder beveiliging. Dit is helemaal niet veilig, en je kan dus niet zomaar daar je wachtwoord in vullen. Bekijk zelf of jij websites kan vinden die deze beveiling niet gebruiken.</p>
<pre><code>Bijv.
http://sdaf.org/
http://www.marca.com/</code></pre>
<div id="answer-place">
<p>Vul dan hier het jouw antwoord in:</p>
<input type='text' name='antwoord-invul' id="antwoord-invul-plek" placeholder="Vul hier je goede antwoord in....." /><br>
<button id="verder-after-video">Verder</button>
</div>
<div id="cannot-click">
<br>
<p>Je kan nog niet verder, omdat je nog geen antwoord hebt ingevuld.</p>
</div>
</div>
<div id="second">
<hr class="major" />
<h2>Antwoord</h2>
<p>Jouw antwoord was <strong id="your-answer"></strong>. Veel antwoorden zijn (helaas) mogelijk, waaronder <a href="http://hvc.nl" target="_blank">http://hvc.nl</a>.</p>
<p>Je kan zelf zien of een website een beveiligde verbinding heeft door te kijken naar wat er in de url staat. Als er <b>https</b> staat dan is de verbinding beveiligd is. Als je een les hebt van een docent hebt die een website beheerd, zeg dan tegen
die docent dat een beveiligde verbinding nodig is.</p>
<p>Zeker als je les hebt van Mr. Oppelaar, steek dan op dit moment je vinger op en stel hem deze vraag: "Waarom maakt de website van het hvc nog gebruik van verouderde en onveilige technieken?". Als hij niet snapt wat je bedoelt, zeg dan dat je niet
het slotje bovenaan ziet staan en de website dus onveilig is. Kijken wat zijn reactie is.</p>
<div id="your-answer-weer-verder-button">
<button id="antwoord-weer-verder">Verder</button>
</div>
</div>
<div id="meer-vertellen-gwn">
<hr class="major" />
<h2>Hoe veilig is jouw wachtwoord?</h2>
<p>Test zelf hoe veilig jouw wachtwoord is, of maak een beter wachtwoord......</p>
<div>
<input type="password" id="password" placeholder="Wachtwoord" />
</div><br>
<h4>Sterkte:</h4>
<div id="strength_human"><code>Vul iets in...</code></div><br>
<div id="your-answer-verder-button">
<button id="antwoord-verder">Verder</button>
</div>
</div>
<div id="einde-les">
<hr class="major" />
<h2>Einde van deze les</h2>
<p>Je hebt deze les geleerd dat je <strong>nooit</strong> gebruik moet maken van een onbeveiligd wifi netwerk. Tenzij je gebruik maakt van een VPN. Ook heb je geleerd dat je altijd moet kijken of een website veilig is met behulp van het slotje bovenaan.
Als je les hebt van meneer Oppelaar en hem de aanbevolen vraag durfde te stellen, hopelijk heb je daar ook nog wat van geleerd.
<p>
<p>Dit was de laatste les over encryptie. Je kan hierna een toets maken, zodat je kan zien hoe goed je alles hebt geleerd.</p>
<button onclick="window.location.href = 'encryptie-toets.html';">Naar de volgende les</button>
</div>
</section>
</div>
</div>
<!-- Sidebar -->
<div id="sidebar">
<div class="inner">
<nav id="menu">
<header class="major">
<h2>Menu</h2>
</header>
<ul>
<li><a href="index.html">Home</a></li>
<li>
<span class="opener">Encyptie</span>
<ul>
<li><a href="encryptie-introductie.html">Introductie</a></li>
<li><a href="encryptie-maken.html">Zelf maken</a></li>
<li><a href="encryptie-controleren.html">Controleren</a></li>
<li><a href="encryptie-toets.html">Toets</a></li>
</ul>
</li>
<li>
<span class="opener">Poorten</span>
<ul>
<li><a href="poorten-introductie.html">Introductie</a></li>
<li><a href="poorten-instellen.html">Instellen</a></li>
<li><a href="poorten-hacker.html">Verkeerd ingesteld</a></li>
<li><a href="poorten-quiz.html">Quiz</a></li>
</ul>
</li>
<li><a href="over.html">Over Ons</a></li>
</ul>
</nav>
<div class="mini-posts">
<article>
<p>Advertentie:</p>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Menu -->
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8952340716409624" data-ad-slot="4397143538" data-ad-format="rectangle, vertical" data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</article>
<article>
<header class="major">
<h2>Onze school</h2>
</header>
<a href="http://hvc.nl" class="image"><img src="images/hvc.jpg" alt="Het Herbert Vissers College" /></a>
<p>Dit project is in opdracht gemaakt voor het <a href="http://hvc.nl">Herbert Vissers College.</a> Dit project wordt ook getest op 1 vwo leerlingen van deze school.</p>
</article>
<section>
<div id='map' style='width: 100%; height: 300px;'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibWljaGFkZW5oZWlqZXIiLCJhIjoiY2pqdWYxcGo4M2YxaTNrcGJ2YzI1MzV1NSJ9.HCYrmz-O-qUCZIFulOYodQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/michadenheijer/cjjufq14r1k232spl6ulyvbz0'
});
</script>
</section>
<section>
<header class="major">
<h2>Contact opnemen</h2>
</header>
<p>Heb je een probleem of een vraag? Of wil je gewoon even wat feedback geven over de lessen en de website, dan kan dat met de onderstaande methoden.</p>
<ul class="contact">
<li class="fa-envelope-o"><a href="mailto:[email protected]">[email protected]</a></li>
<li class="fa-twitter"><a href="//twitter.com/csm_devs" target="_blank">@CSM_Devs</a></li>
<li class="fa-instagram"><a href="//instagram.com/csm_devs" target="_blank">@CSM_Devs</a></li>
<li class="fa-code"><a href="//csmdevs.github.io" target="_blank">CSMdevs.github.io</a></li>
</ul>
</section>
<footer id="footer">
<br><br>
<p class="copyright">© <a href="https://michadenheijer.com/nl/?utm_source=cyberuitleg&utm_medium=website&utm_campaign=linking" target="_blank">Micha den Heijer</a>, <a href="http://cemresuler.nl" target='_blank'>Cemre Süler</a>, <a href="https://instagram.com/stanverlaan/" target="_blank">Stan Verlaan</a> & <a href="https://instagram.com/patrick_13db" target="_blank">Patrick de Bruijn</a>. All rights reserved. Images: <a href="https://unsplash.com">Unsplash</a>. Design: <a href="https://html5up.net">HTML5 UP</a> We hebben ook een nieuwe website gemaakt voor als je meer wilt leren over programmeren, ga dan naar <a href="https://prgrmmr.nl/?utm_source=cyberuitleg&utm_medium=website&utm_campaign=linking">Prgrmmr.nl</a>.</p>
</footer>
</div>
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/skel/3.0.1/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
<script src="assets/js/scrolling.js"></script>
<script src="assets/js/video.js"></script>
<script src="assets/js/continue.js"></script>
<script src="assets/js/extra-continue.js"></script>
<script src="assets/js/password.js"></script>
<script src="assets/js/end-animation.js"></script>
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=default%2CPromise%2CPromise.prototype.finally%2Cconsole.error%2Cdocument.querySelector%2Cdocument.getElementsByClassName%2Cdocument%2Cfetch%2ClocalStorage%2C%7Ehtml5-elements%2C%7Eviewport%2Cdocument.head%2Cconsole.log%2Cconsole.info%2CWebAnimations%2CJSON%2CIntersectionObserver%2CHTMLPictureElement%2CEvent%2CHTMLDocument%2CDate.now"></script></body></html>