-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
305 lines (279 loc) · 13 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MASK - Télégraphe</title>
<script src="entity.js"></script>
<script src="sparckle.js"></script>
<script src="morse.js"></script>
<script src="interface.js"></script>
<script src="index.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<style>
body{
background-color: #24292E;
text-align: center;
}
.game
{
display: inline-block;
}
canvas
{
display: inline-block;
}
div.interface
{
display: inline-block;
vertical-align: top;
width: 250px;
}
div.grey
{
padding: 10px;
background-color: #3F4448;
border-radius: 2px;
font-size: 20px;
font-family: arial, sans-serif;
letter-spacing: 1px;
text-align: left;
}
div.grey div, div.grey h2
{
color: #F8F9FA;
margin-bottom: 5px;
margin-top: 0px;
}
div.grey hr
{
border-color:#8D8571;
}
div.grey p
{
color: white;
}
img
{
border-radius: 2px;
}
div.interface span
{
color: #D5D6D7;
}
div.instructions
{
color: white;
}
</style>
</head>
<body>
<nav class="navbar navbar-light bg-light sticky-top mb-4">
<a class="navbar-brand" href="#introduction">
<img src="pioche.png" width="30" height="30" class="d-inline-block align-top" alt="">
MASK - Télégraphe Morse
</a>
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#references">Tables de référence</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#game">Démonstration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mask">Eléments MASK</a>
</li>
</ul>
</nav>
<div class="container pt-4">
<h1 id="introduction" class="text-white">
Introduction
</h1>
<div>
<div class="grey mb-5">
<p>
Cette page répertorie le résultat des recherches de quatre étudiants de l'Ecole Nationale Supérieure de Cognitique (ENSC) relatives à l'envoi et la réception de télégrammes à l'aide du télégraphe Morse, et ce, dans le cadre de l'enseignement "Gestion des connaissances" proposé par Monsieur Serge Ariès.
</p>
<p>
Les résultats obtenus sont présentés au sein de cette page sous la forme de <a href="#mask">différents diagrammes</a> basés sur <a href="https://fr.wikipedia.org/wiki/MASK_m%C3%A9thode_d%27ing%C3%A9nierie_des_connaissances">la méthode MASK</a>.
Ceux-ci proviennent d'un panel de ressources numériques, ainsi que des précieux propos recueillis auprès de Monsieur Claude Portron, ayant travaillé pendant de nombreuses années au sein de la Marine Française entre 1960 et 1995.
</p>
<p>
En parallèle de ces diagrammes, la présente page propose également une <a href="#game">démonstration interactive</a>, permettant de s'essayer à l'envoi de télégrammes Morse.
</p>
</div>
</div>
<h1 id="references" class="text-white">
Tables de référence
</h1>
<div>
<div class="grey mb-4">
<h2>Table code morse international</h2>
<hr>
<center>
<img src="morse.png">
</center>
</div>
<div class="grey mb-5">
<h2>Arbre mnémotechnique de décodage</h2>
<hr>
<center>
<img src="Morse_tree.svg">
</center>
</div>
</div>
<h1 id="game" class="text-white">
Démonstration
</h1>
<div class="game">
<div class="instructions grey mb-4">
<h2>Instructions</h2>
<hr>
<p>
Ci-dessous, se trouve une animation permettant d'émuler le fonctionnement d'un manipulateur de télégraphe Morse.
</p>
<p>
En appuyant sur la touche espace du clavier, vous pouvez actionner le levier et ainsi envoyer un signal. <br>
La durée de ce signal peut-être modulée en appuyant plus ou moins longtemps sur la touche espace, permettant ainsi d'envoyer des signaux courts, long et des interruptions.
</p>
<p>
Le premier signal envoyé sert de signal étalon. Sa durée servira de référence pour établir celle d'un signal court (Ti). Veuillez attendre sa réception avant de poursuivre l'envoi de votre message.<br><br>
Un signal long (Taah, ou Ta) présente une durée équivalente à trois fois celle du signal court (Ti).
</p>
<p>
Pour construire des messages et jouer avec cette démonstration, vous pouvez vous référer à la table et à l'arbre présentés plus haut. Pour redémarrer la démonstration, vous pouvez recharger la page.
</p>
<p class="small">(A noter que cette démonstration n'a pas vocation à émuler le comportement d'un télégraphe morse. En effet, cette démonstration s'en différencie grandement de part le mécanisme de réception fonctionnant ici "en temps réel", tandis que l'analyse d'un télégramme Morse ne pouvait se réaliser qu'une fois le message totalement transmis.)</p>
</div>
<canvas id="container" widht="480px" height="380px"></canvas>
<div class="interface grey">
<div>Signal courant: <span id="currentPacket">N/A</span></div>
<div>Lettre courante: <span id="currentLetter">N/A</span></div>
<div>Mot courant: <span id="currentWord">N/A</span></div>
<div>Phrase: <span id="sentence">N/A</span></div>
</div>
</div>
<h1 id="mask" class="text-white">
Eléments MASK
</h1>
<div class="mb-5">
<div class="grey mb-4">
<h2>Diagramme des concepts</h2>
<hr>
<center>
<a href="concepts.png" target="_blank"><img src="concepts.png" width="100%" height="auto"></a>
<p class="small">
(Cliquez sur l'image pour agrandir)
</p>
</center>
<div class="text-right small">
<a href="concepts.xmind">Télécharger au format Xmind</a>
</div>
</div>
<div class="grey mb-4">
<h2>Diagrammes des phénomènes</h2>
<hr>
<div>
<h3>Conduction</h3>
<center>
<a href="Conduction.png" target="_blank"><img src="Conduction.png" width="100%" height="auto"></a>
<p class="small">
(Cliquez sur l'image pour agrandir)
</p>
</center>
<div class="text-right small">
<a href="Conduction.xmind">Télécharger au format Xmind</a>
</div>
</div>
<br>
<div>
<h3>Elasticité</h3>
<center>
<a href="Elasticité.png" target="_blank"><img src="Elasticité.png" width="100%" height="auto"></a>
<p class="small">
(Cliquez sur l'image pour agrandir)
</p>
</center>
<div class="text-right small">
<a href="Elasticité.xmind">Télécharger au format Xmind</a>
</div>
</div>
<br>
<div>
<h3>Oscillation</h3>
<center>
<a href="Oscillation.png" target="_blank"><img src="Oscillation.png" width="100%" height="auto"></a>
<p class="small">
(Cliquez sur l'image pour agrandir)
</p>
</center>
<div class="text-right small">
<a href="Oscillation.xmind">Télécharger au format Xmind</a>
</div>
</div>
</div>
<div class="grey mb-4">
<h2>Diagrammes des activités</h2>
<hr>
<div>
<h3>Encodage et envoi d'un télégramme</h3>
<center>
<a href="Envoi.png" target="_blank"><img src="Envoi.png" width="100%" height="auto"></a>
<p class="small">
(Cliquez sur l'image pour agrandir)
</p>
</center>
<div class="text-right small">
<a href="Envoi.xmind">Télécharger au format Xmind</a>
</div>
</div>
<div>
<h3>Réception et décodage d'un télégramme</h3>
<center>
<a href="Réception.png" target="_blank"><img src="Réception.png" width="100%" height="auto"></a>
<p class="small">
(Cliquez sur l'image pour agrandir)
</p>
</center>
<div class="text-right small">
<a href="Réception.xmind">Télécharger au format Xmind</a>
</div>
</div>
</div>
<div class="grey mb-4">
<h2>Diagrammes des tâches</h2>
<hr>
<div>
<h3>Encodage et envoi d'un télégramme</h3>
<center>
<a href="TEnvoi.png" target="_blank"><img src="TEnvoi.png" width="100%" height="auto"></a>
<p class="small">
(Cliquez sur l'image pour agrandir)
</p>
</center>
<div class="text-right small">
<a href="TEnvoi.xmind">Télécharger au format Xmind</a>
</div>
</div>
<div>
<h3>Réception et décodage d'un télégramme</h3>
<center>
<a href="TRéception.png" target="_blank"><img src="TRéception.png" width="100%" height="auto"></a>
<p class="small">
(Cliquez sur l'image pour agrandir)
</p>
</center>
<div class="text-right small">
<a href="TRéception.xmind">Télécharger au format Xmind</a>
</div>
</div>
</div>
</div>
</div>
<div class="footer-copyright py-3 text-center bg-light">
© 2018 Copyright:
Younès Rabii, Louis Hache, Julien Brochier et Clovis Portron<br>
<img src="https://ensc.bordeaux-inp.fr/sites/default/files/upload/page-edito/inp/img/logos/logo.ensc-bxinp.jpg" width="auto" height="50">
</div>
</body>
</html>