-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprincipe.html
76 lines (73 loc) · 4.3 KB
/
principe.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
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Le fonctionnement du Code QR</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="index.js" defer></script>
<script src="qrcode.min.js"></script>
<link rel="shortcut icon" href="assets/favicon.svg" type="image/x-icon">
</head>
<body>
<nav>
<p id="menu" class="navlist material-symbols-outlined" title="Retour à l'acceuil">menu</p>
<p id="index" class="navlist material-symbols-outlined" title="Retour à l'acceuil">home</p>
<p class="navlist" id="histoire">L'histoire du Code QR</p>
<p class="navlist" id="principe">Le fonctionnement du Code QR</p>
<p class="navlist" id="uses">Les fonctions du Code QR</p>
<p class="navlist" id="gen">Générateur avancé</p>
</nav>
<aside class="hidden" id="pagenav">
<a href="#" class="pagenav"><span class="pn1"><span class="material-symbols-outlined">north</span>Haut de la page</span></a>
<a href="#MyGithub" class="pagenav"><span class="pn1"><span class="material-symbols-outlined">qr_code_2</span>Composition du code QR</span></a>
<a href="#QR_exp" class="pagenav"><span class="pn1">La position des pixels</span></a>
</aside>
<h1 class="titre">Le fonctionnement du Code QR</h1>
<div class="Flex1">
<p>Le code QR est un code-barres en deux dimensions (ou code matriciel) constitué de modules noirs disposés dans
un carré à fond blanc. L'agencement de ces points définit l'information que contient le code. Il peut être
lu grâce à un lecteur de code-barres, un téléphone mobile, une webcam ou une tablette.<br><br>
Les quatre carrés permettent à l'appareil qui lit le code QR de déterminer l'orientation du code. En effet,
le code QR peut être lu dans n'importe quel sens, il n'y a pas de sens de lecture. C'est pour cela que les
carrés sont placés aux quatre coins du code QR. Ils permmettent donc de lire le code QR correctement.<br>
</p>
<div class="expandableIMG" id="square">
<img src="assets/Calibrate_square.svg" alt="Carré de calibration du lecteur">
<p class="legende">Les carrés de calibration du lecteur</p>
</div>
</div>
<div class="Flex1">
<div class="expandableIMG" id="MyGithub">
<img src="assets/My_Github_Page.svg" alt="Un QR Code menant vers ma page Github"
title="Un QR Code menant vers ma page Github" id="MyGithubIMG">
<p class="legende">Un QR Code menant tout droit vers ma <a href="https://github.com/basty7"
class="legende">page Github</a></p>
</div>
<p>Le code QR est doté de deux lignes pointillées (une colonne et une rangée) dite de timing (terme anglais).
Ces deux lignes permettent au logiciel d'identifier la localisation des début et fin de colonne et de
rangée.
Une fois ces informations obtenues, le logiciel peut calculer l'emplacement des pixels à lire et la lecture
d'un seul pixel suffit à lire un bit d'information.
Comme vous le voyez, le code QR est composé de deux couleurs: le noir et le blanc. Le carré noir <span
class="material-symbols-outlined"
style="vertical-align: bottom; font-variation-settings: 'FILL' 1;">square</span>
représente un bit à 1 et le carré blanc <span class="material-symbols-outlined"
style="vertical-align: bottom; font-variation-settings: 'FILL' 1; color: white;">square</span>
représente un bit à
0. En effet, le code QR n'encode en réalité qu'une chaîne de caractères, chaque caractère est donc converti
en binaire.
</p>
</div>
<div class="expandableIMG" id="QR_exp">
<img src="assets/QR_Character_Placement.svg">
<p class="legende">La position des pixels du code QR selon leur fonction</p>
</div>
<footer>
<p class="sources">Sources:</p>
<a href="https://en.wikipedia.org/wiki/QR_code" class="sources" title="Pas mal d'infos" target="_blank">Wikipedia - Codes QR - en</a>
<a href="https://fr.wikipedia.org/wiki/Code_QR" class="sources" title="Pas mal d'infos aussi" target="_blank">Wikipedia - Codes QR - fr</a>
<a href="https://en.wikipedia.org/wiki/VCard" class="sources" title="Les informations pour générer les cartes de Contact" target="_blank">Wikipedia - vCard - en</a>
<a href="https://github.com/zhiyuan-l/qrcodejs" class="sources" title="La libraire qui permet de générer les codes QR" target="_blank">qrcodejs</a>
</footer>
</body>