-
Notifications
You must be signed in to change notification settings - Fork 75
/
101.html
546 lines (531 loc) · 20.6 KB
/
101.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
<!DOCTYPE html>
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="description" content="Une variante de QWERTY pour les développeurs
francophones et les typographes exigeants. " />
<title> Lafayette101 </title>
<link type="text/css" rel="stylesheet" href="css/layout.css" />
<link type="text/css" rel="stylesheet" href="css/101/layout.css" />
<link type="text/css" rel="stylesheet" href="css/101/keyboard.css"/>
<link type="text/css" rel="stylesheet" href="css/demo.css" />
<link type="image/svg+xml" rel="icon" href="favicon.svg" sizes="any" />
<script type="module" src="js/x-keyboard.js"></script>
<script type="text/javascript" src="js/timesheets-min.js"></script>
<script type="text/javascript" src="js/adblock-tester.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript">
function select(element) { document.body.className = element.id; }
</script>
</head>
<body class="qwerty">
<header>
<h1> <button hidden>démo !</button> Lafayette101 </h1>
<nav> <a href=".">« <small>QWERTY</small>-Lafayette</a> </nav>
<p> <small>QWERTY</small>-Lafayette, canal historique ! :-) </p>
</header>
<dialog>
<input spellcheck="false">
<x-keyboard src="layouts/lafayette101.json"></x-keyboard>
<p> <span> powered by
<a href="https://OneDeadKey.github.io/x-keyboard/">x-keyboard</a>
</span> géométrie :
<select>
<option value="iso"> ISO </option>
<option value="ansi"> ANSI </option>
<option value="ol60"> TMx </option>
</select>
</p>
</dialog>
<div style="position: relative; margin: 0 auto; width: 664px;">
<p id="badRendering">
Votre navigateur n’affiche pas correctement la disposition de clavier
ci-dessous. <br />
Veuillez essayer de désactiver votre bloqueur de publicités (AdBlockPlus…)
et recharger cette page.
</p>
</div>
<div id="keyboard">
<div id="row_AE">
<kbd id="key_TLDE">
<span class="level1"> ` </span>
<span class="level2"> ~ </span>
<span class="level5 deadKey"> ` </span>
<span class="level6 deadKey"> ~ </span>
</kbd>
<kbd id="key_AE01">
<span class="level1"> 1 </span>
<span class="level2"> ! </span>
<span class="level3 secondary"> „ </span>
<span class="level4 secondary"> ¡ </span>
<span class="level5"> ! </span>
</kbd>
<kbd id="key_AE02">
<span class="level1"> 2 </span>
<span class="level2"> @ </span>
<span class="level3 secondary"> “ </span>
<span class="level4 secondary"> ‘ </span>
<span class="level5"> ( </span>
</kbd>
<kbd id="key_AE03">
<span class="level1"> 3 </span>
<span class="level2"> # </span>
<span class="level3 secondary"> ” </span>
<span class="level4 secondary"> ’ </span>
<span class="level5"> ) </span>
</kbd>
<kbd id="key_AE04">
<span class="level1"> 4 </span>
<span class="level2"> $ </span>
<span class="level3 secondary"> £ </span>
<span class="level4 secondary"> ¢ </span>
<span class="level5"> ' </span>
</kbd>
<kbd id="key_AE05">
<span class="level1"> 5 </span>
<span class="level2"> % </span>
<span class="level3"> € </span>
<span class="level4 secondary"> ‰ </span>
<span class="level5"> " </span>
</kbd>
<kbd id="key_AE06">
<span class="level1"> 6 </span>
<span class="level2"> ^ </span>
</kbd>
<kbd id="key_AE07">
<span class="level1"> 7 </span>
<span class="level2"> & </span>
<span class="level5"> 7 </span>
</kbd>
<kbd id="key_AE08">
<span class="level1"> 8 </span>
<span class="level2"> * </span>
<span class="level3 secondary"> § </span>
<span class="level5"> 8 </span>
</kbd>
<kbd id="key_AE09">
<span class="level1"> 9 </span>
<span class="level2"> ( </span>
<span class="level3 secondary"> ¶ </span>
<span class="level5"> 9 </span>
</kbd>
<kbd id="key_AE10">
<span class="level1"> 0 </span>
<span class="level2"> ) </span>
<span class="level3 secondary"> ° </span>
<span class="level5"> / </span>
</kbd>
<kbd id="key_AE11">
<span class="level1"> - </span>
<span class="level2"> _ </span>
<span class="level3"> — </span>
</kbd>
<kbd id="key_AE12">
<span class="level1"> = </span>
<span class="level2"> + </span>
<span class="level3 secondary"> ≠ </span>
<span class="level4 secondary"> ± </span>
</kbd>
<kbd id="key_BKSP" class="specialKey"></kbd>
</div>
<div id="row_AD">
<kbd id="key_TAB" class="specialKey"></kbd>
<kbd id="key_AD01">
<span class="level2"> Q </span>
<span class="level3 secondary"> æ </span>
<span class="level5"> = </span>
</kbd>
<kbd id="key_AD02" class="alt_only">
<span class="level2"> W </span>
<span class="level3"> é </span>
<span class="level5"> < </span>
</kbd>
<kbd id="key_AD03" class="alt_only">
<span class="level2"> E </span>
<span class="level3"> è </span>
<span class="level5"> > </span>
</kbd>
<kbd id="key_AD04">
<span class="level2"> R </span>
<span class="level3 secondary"> ® </span>
<span class="level4 secondary"> ™ </span>
<span class="level5"> - </span>
</kbd>
<kbd id="key_AD05">
<span class="level2"> T </span>
<span class="level3 secondary"> þ </span>
<span class="level5"> + </span>
</kbd>
<kbd id="key_AD06">
<span class="level2"> Y </span>
<span class="level3 secondary"> ¥ </span>
<span class="level4 secondary"> ¤ </span>
</kbd>
<kbd id="key_AD07">
<span class="level2"> U </span>
<span class="level3"> ù </span>
<span class="level5"> 4 </span>
</kbd>
<kbd id="key_AD08">
<span class="level2"> I </span>
<span class="level3 secondary"> ij </span>
<span class="level5"> 5 </span>
</kbd>
<kbd id="key_AD09">
<span class="level2"> O </span>
<span class="level3"> œ </span>
<span class="level5"> 6 </span>
</kbd>
<kbd id="key_AD10">
<span class="level2"> P </span>
<span class="level5"> * </span>
</kbd>
<kbd id="key_AD11" class="qwerty">
<span class="level1 deadKey"> ^ </span>
<span class="level2"> « </span>
</kbd>
<kbd id="key_AD12" class="qwerty">
<span class="level1 deadKey"> ¨ </span>
<span class="level2"> » </span>
</kbd>
<kbd id="key_BKSL">
<span class="level1"> \ </span>
<span class="level2"> | </span>
</kbd>
</div>
<div id="row_AC">
<kbd id="key_CAPS" class="specialKey"></kbd>
<kbd id="key_AC01" class="alt_only">
<span class="level2"> A </span>
<span class="level3"> à </span>
<span class="level5"> { </span>
</kbd>
<kbd id="key_AC02" class="alt_only">
<span class="level2"> S </span>
<span class="level3 secondary"> ß </span>
<span class="level5"> [ </span>
</kbd>
<kbd id="key_AC03" class="alt_only">
<span class="level2"> D </span>
<span class="level3 secondary"> ð </span>
<span class="level5"> ] </span>
</kbd>
<kbd id="key_AC04" class="alt_only">
<span class="level2"> F </span>
<span class="level3 secondary"> ſ </span>
<span class="level4 secondary"> ª </span>
<span class="level5"> } </span>
</kbd>
<kbd id="key_AC05">
<span class="level2"> G </span>
<span class="level3 secondary"> © </span>
<span class="level5"> / </span>
</kbd>
<kbd id="key_AC06">
<span class="level2"> H </span>
<span class="level3 secondary"> ← </span>
</kbd>
<kbd id="key_AC07">
<span class="level2"> J </span>
<span class="level3 secondary"> ↓ </span>
<span class="level5"> 1 </span>
</kbd>
<kbd id="key_AC08">
<span class="level2"> K </span>
<span class="level3 secondary"> ↑ </span>
<span class="level5"> 2 </span>
</kbd>
<kbd id="key_AC09">
<span class="level2"> L </span>
<span class="level3 secondary"> → </span>
<span class="level5"> 3 </span>
</kbd>
<kbd id="key_AC10" class="qwerty">
<span class="level2 deadKey" style="margin: 6px;"> ★ </span>
<span class="level5"> - </span>
</kbd>
<kbd id="key_AC11">
<span class="level1"> ' </span>
<span class="level2"> " </span>
<span class="level5 deadKey"> ´ </span>
</kbd>
<kbd id="key_RTRN" class="specialKey"></kbd>
</div>
<div id="row_AB">
<kbd id="key_LFSH" class="specialKey"></kbd>
<kbd id="key_AB01">
<span class="level2"> Z </span>
<span class="level5"> ~ </span>
</kbd>
<kbd id="key_AB02">
<span class="level2"> X </span>
<span class="level3 secondary"> × </span>
<span class="level5"> ` </span>
</kbd>
<kbd id="key_AB03">
<span class="level2"> C </span>
<span class="level3"> ç </span>
<span class="level5"> | </span>
</kbd>
<kbd id="key_AB04">
<span class="level2"> V </span>
<span class="level3 secondary"> ŭ </span>
<span class="level5"> _ </span>
</kbd>
<kbd id="key_AB05">
<span class="level2"> B </span>
<span class="level3 secondary"> † </span>
<span class="level5"> \ </span>
</kbd>
<kbd id="key_AB06">
<span class="level2"> N </span>
<span class="level3 secondary"> ñ </span>
</kbd>
<kbd id="key_AB07">
<span class="level2"> M </span>
<span class="level3 secondary"> µ </span>
<span class="level4 secondary"> º </span>
<span class="level5"> 0 </span>
</kbd>
<kbd id="key_AB08" class="qwerty">
<span class="level1"> , </span>
<span class="level2"> ; </span>
<span class="level3 secondary"> · </span>
<span class="level4 secondary"> • </span>
<span class="level5"> , </span>
</kbd>
<kbd id="key_AB09" class="qwerty">
<span class="level1"> . </span>
<span class="level2"> : </span>
<span class="level3"> … </span>
<span class="level5"> . </span>
</kbd>
<kbd id="key_AB10">
<span class="level1"> / </span>
<span class="level2"> ? </span>
<span class="level3 secondary"> ؟ </span>
<span class="level4 secondary"> ¿ </span>
<span class="level5"> + </span>
</kbd>
<kbd id="key_RTSH" class="specialKey"></kbd>
</div>
<div id="row_AA">
<kbd id="key_LCTL" class="specialKey">
<span class="level1"> ctrl </span>
</kbd>
<kbd id="key_LWIN" class="specialKey">
<span class="level1"> super </span>
</kbd>
<kbd id="key_LALT" class="specialKey">
<span class="level1"> alt </span>
</kbd>
<kbd id="key_SPCE">
<span class="level1"> ⍽ espace </span>
<span class="level2"> ⍽ espace insécable fine </span>
<span class="level3"> ’ </span>
</kbd>
<kbd id="key_RALT" class="specialKey">
<span class="level1"> altgr </span>
</kbd>
<kbd id="key_RWIN" class="specialKey">
<span class="level1"> super </span>
</kbd>
<kbd id="key_MENU" class="specialKey">
<span class="level1"> menu </span>
</kbd>
<kbd id="key_RCTL" class="specialKey">
<span class="level1"> ctrl </span>
</kbd>
</div>
</div>
<p id="selector">
<a id="navHome" href="#_home"> Objectif </a>
<a id="navQwerty" href="#_qwerty"> QWERTY </a>
<a id="navLafayette" href="#_lafayette"> Accents </a>
<a id="navExtra" href="#_extra"> Extra </a>
<a id="navAltGr" href="#_altgr"> AltGr </a>
</p>
<div id="description" data-timecontainer="seq">
<div data-onbegin="select(this)" id="home">
<p>
Une adaptation du QWERTY-US pour les francophones :
</p>
<ul>
<li>
pour un <a href="#_qwerty">accès direct aux chiffres</a>, sans <kbd>Shift</kbd>
ni <kbd>CapsLock</kbd> ;
</li>
<li>
pour une <a href="#_lafayette">typographie soignée</a> en français :
majuscules accentuées, lettres entrelacées, guillemets…
</li>
<li>
pour saisir facilement des <a href="#_qwerty">espaces insécables</a>
avant les ponctuations doubles (;:?!) et à l’intérieur des guillemets
(« ») ;
</li>
<li>
pour disposer d’une couche <a href="#_altgr">AltGr personnalisable</a>,
notamment pour les langages de programmation.
</li>
</ul>
<p>
L’objectif est de conserver l’efficacité du QWERTY (chiffres en direct,
développement) tout en proposant une disposition de clavier plus
efficace que l’AZERTY pour le français.
</p>
</div>
<div data-onbegin="select(this)" id="qwerty">
<p>
Cette disposition de clavier ne diffère que très peu du QWERTY-US :
seules 5 touches sont affectées. Elle convient donc particulièrement aux
claviers QWERTY, mais s’utilise tout aussi bien sur un clavier AZERTY
pour ceux qui savent taper en méthode dactylo.
</p>
<p>
Le principal intéret de cette modification est de permettre une saisie
confortable des <strong>espaces insécables</strong> avant les
ponctuations doubles (;:?!) et à l’intérieur des guillemets
typographiques («») : il suffit de maintenir la touche <kbd>Shift</kbd> enfoncée,
puis de presser <kbd>Espace</kbd> et la touche de ponctuation.
</p>
<p>
Par rapport au layout AZERTY de référence pour les francophones,
l’autre avantage de cette disposition est d’accéder aux
<strong>chiffres en direct</strong> — sans <kbd>Shift</kbd> ni
<kbd>CapsLock</kbd>. Le pavé numérique n’est plus indispensable.
</p>
</div>
<div data-onbegin="select(this)" id="lafayette">
<p>
La plupart des accents utilisés en français sont obtenus par une seule
touche morte, située sur la rangée de base — cf. <kbd>★</kbd> l’étoile sur fond
rouge dans le schéma ci-dessus.
</p>
<p>
Cette touche morte permet aussi de saisir facilement les majuscules accentuées
ansi que des caractères tels que Œ, Æ ou les points de suspension (…).
Contrairement aux apparences, cette disposition de clavier est donc
<strong>plus adaptée au français que l’AZERTY</strong>.
</p>
<p>
Cela augmente d’environ 3% le nombre de frappes sur un texte
francophone ; en revanche, les touches étant plus accessibles (plus
besoin d’aller chercher les caractères accentués sur la ligne des
chiffres), la frappe est plus fluide et plus confortable, si bien que
ces 3% de frappes supplémentaires ne pénalisent pas la vitesse de
saisie.
</p>
</div>
<div data-onbegin="select(this)" id="extra">
<p>
Cette disposition de clavier a été pensée pour une utilisation
occasionnelle en allemand (ß), néerlandais (ij), espagnol (ñ), catalan (l·l), portugais,
italien et espéranto : accents, tildes, cédilles, umlauts, guillemets spécifiques…
</p>
<p>
Contrairement à la plupart des dispositions de clavier, les caractères
spéciaux requis pour ces langues ne sont pas obtenus avec <kbd>AltGr</kbd> mais
avec la touche morte <kbd>★</kbd>, afin de privilégier le confort et la fluidité de
la saisie.
</p>
<p>
De même, tous les caractères spéciaux tels que ≤≠±≥©®™μ… sont obtenus
avec la même touche morte. <a href="#_altgr">La couche AltGr</a> est donc spécifique
aux symboles de programmation, et peut être entièrement personnalisée.
</p>
</div>
<div data-onbegin="select(this)" id="altgr">
<p>
La couche AltGr est dédiée aux symboles de programmation et cherche à en faciliter les
enchaînements. Les développeurs sont invités à l’adapter librement à leurs besoins.
</p>
<p>
Dans la version de base ci-dessus, les caractères les plus utilisés en
C/C++ (ou Java, JavaScript…) et HTML/XML sont disponibles en <kbd>AltGr</kbd> +
main gauche. Cela permet de saisir rapidement des digrammes du type ->,
</, />. Les accolades {} et crochets [] sont sur la rangée de base,
bien plus accessibles qu’en QWERTY classique.
</p>
<p>
Sous la main droite, un pavé numérique virtuel (comparable à ceux des
portables) est proposé. Il n’est pas très facile d’accès sous Linux (pas
de touche <kbd>AltGr</kbd> / <kbd>Ctrl</kbd><kbd>Alt</kbd> à gauche)
mais permet néanmoins de saisir rapidement des (0) ou [0], très
fréquents dans les langages de programmation.
</p>
</div>
</div>
<h2 id="avertissement"> Avertissement <a href="#avertissement">#</a> </h2>
<p> Cette version est dépréciée et n’est présentée ici qu’à titre d’archive.
La version actuelle, anciennement appelée <a href=".">Lafayette42</a>, nous
semble supérieure dans tous les domaines : </p>
<ul>
<li> plus proche du QWERTY ANSI (seules 3 touches diffèrent) ; </li>
<li> plus efficace pour écrire du code (couche AltGr optimisée) ; </li>
<li> plus efficace pour écrire du français, tout en maintenant un support
typographique iréprochable — majuscules accentuées, espaces insécables
avant les ponctuations doubles, guillemets et symboles typographiques… </li>
</ul>
<h2 id="pilotes"> Téléchargement <a href="#pilotes">#</a> </h2>
<dl class="download">
<dt>
<strong> Windows : </strong>
<a href="./releases/lafayette_windows_v0.8.exe">lafayette_windows_v0.8.exe</a> (1.03 Mo)
</dt>
<dd>
<p> Exécuter l’installeur. La disposition de clavier apparaît dans la
barre de langues (indicateur de la barre des tâches). </p>
</dd>
<dt hidden>
<strong> Windows, version portable : </strong>
<a href="./releases/lafayette_pkl_v0.8.zip">lafayette_pkl_v0.8.zip</a> (330 Ko)
</dt>
<dd hidden>
<p>
dézipper et exécuter <code>pkl.exe</code>.
</p>
<p>
Un indicateur apparaît dans la barre des tâches. Ne nécessite pas de
droits d’administration, peut fonctionner depuis une clé USB.
</p>
</dd>
<dt>
<strong> macOS : </strong>
<a href="./releases/lafayette_macos_v0.8.keylayout">lafayette_macos_v0.8.keylayout</a> (68 Ko)
</dt>
<dd>
<p> Enregistrer dans <code>~/Library/Keyboard Layouts</code> (pour le seul
utilisateur courant) ou <code>/Library/Keyboard Layouts</code> (pour
tous les utilisateurs), et relancer la session. </p>
<p> La disposition de clavier sera disponible dans vos préférences
« Langue et Texte », onglet « Méthodes de saisie ». </p>
</dd>
<dt>
<strong> GNU/Linux : </strong>
<a href="./releases/lafayette_linux_v0.8.1.py">lafayette_linux_v0.8.1.py</a> (45 Ko)
</dt>
<dd>
<p> Script d’installation, nécessitant Python3 et lxml : </p>
<pre>
sudo apt install python3-lxml
curl -Ls https://qwerty-lafayette.org/releases/lafayette_linux_v0.8.1.py | sudo python3
</pre>
<p> L’installeur contient les deux variantes, Lafayette et Lafayette101.
Ces dispositions sont activables par le gestionnaire de préférences de
votre bureau ou directement en ligne de commande (sous Xorg) : </p>
<pre>
setxkbmap fr -variant lafayette
setxkbmap fr -variant lafayette101
</pre>
</dd>
</dl>
<h2 id="license"> Licence <a href="#license">#</a> </h2>
<p> <a href="http://wtfpl.net/">WTFPL</a>
– Do What the Fuck You Want to Public License. </p>
<footer>
<a href="https://github.com/fabi1cazenave/qwerty-lafayette">dépôt GitHub</a> |
<a href="https://discord.gg/5xR5K3nAFX">serveur Discord</a>
</footer>
</body>
</html>