Florian/1ereNSI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mise à jour

Browse Source
This commit is contained in:
Florian Mathieu
2021-10-01 11:22:41 +02:00
parent f105ace008
commit cf7eca63af
129 changed files with 5823 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

283
representation_base/chapitre_5/README.md Normal file
View File

@@ -0,0 +1,283 @@
# Représentation d'un texte en machine
## Attendus
| Contenus | Capacités attendues |
| :--: | :-- |
| Représentation d’un texte en machine.<br />Exemples des encodages ASCII, ISO-8859-1, Unicode | Identifier l’intérêt des différents systèmes d’encodage.<br />Convertir un fichier texte dans différents formats d’encodage. |
## Contexte
![Martine écrit en UTF-8](https://www.apprendre-en-ligne.net/bloginfo/images/humour/geek_martine-ecrit-en-utf-8.jpg)
Source : http://www.retourdemartine.free.fr/
Prenons l'alphabet courant `A`, `B`, `C`, ... `Z` et plaçons le dans un tableau.
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
<td>U</td>
<td>V</td>
<td>W</td>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
</table>
Regardons les indices associés à chaque lettre.
<table>
<tr>
<th>0</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
<th>16</th>
<th>17</th>
<th>18</th>
<th>19</th>
<th>20</th>
<th>21</th>
<th>22</th>
<th>23</th>
<th>24</th>
<th>25</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
<td>U</td>
<td>V</td>
<td>W</td>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
</table>
À un indice correspond une lettre et à une lettre est associée un et un seul indice.
## Définition
En généralisant à l'ensemble des caractères (`,`, `é`, `%`, ...), un caractère peut être représenté par un entier, donc avoir une représentation binaire en machine.
___Définition___
> L'entier associé à un caractère est appelé ___point de code___ de ce caractère (0 est le point de code de `A`. 25 le point de code de `Z`.)
___Définition___
> On parle ainsi d'___encodage de caractères___ : mécanisme qui gère les points de code en octets dans la mémoire de l’ordinateur, puis lit les octets à nouveau en points de code.
Il a existé et existe plusieurs encodages.
## Encodage ASCII
En 1960, l'organisation internationale de normalisation (ISO) décide de créer la norme ASCII (American Standard Code for Information Interchange).
À chaque caractère est associé un nombre binaire sur 7 bits.
![Table ASCII](https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/ASCII-Table.svg/738px-ASCII-Table.svg.png)
Source : Wikipédia
Comme vous pouvez le constater dans le tableau ci-dessus, au "A" majuscule correspond le code binaire $`(1000001)_2`$ $`(65)_{10}`$ ou $`(41)_{16}`$
___Question___
> Combien de points de code (et donc de caractères) peuvent être représentés grâce à l'encodage ASCII ?"
___Solution___
> Avec 7 bits, on peut coder $`2^7`$ points de code, donc 128 caractères.
___Travail à effectuer___
> 1. Quel est le point de code et la représentation en binaire, du caractère `a` ?
> 2. Comment grâce à la représentation, en binaire, peut-on savoir si une lettre est en majuscule ou minuscule ?
___Solution___
> 1. Le caractère `a` a pour point de code 97, soit $`(1100001)_2`$.
> 2. Le bit de rang 5 est égal à :
> - 1 si la lettre est en minuscule,
> - 0 si la lettre est en majuscule.
La norme ASCII convient bien à la langue anglaise, mais pose des problèmes dans d'autres langues, par exemple le français.
En effet, l'ASCII ne prévoit pas d'encoder les lettres accentuées.
## Encodage ISO-8859-1
Cette norme reprend les mêmes principes que l'ASCII, mais les points de code associés à chaque caractère sont codés sur 8 bits.
___Question___
> Combien de points de code (et donc de caractères) peuvent être représentés grâce à l'encodage ISO-8859-1 ?
___Soution____
> Sur 8 bits, on peut représenter $`2^8`$ points de code, soit 256 caractères... 2 fois plus que l'encodage ASCII.
Cette norme va être principalement utilisée dans les pays européens puisqu'elle permet d'encoder les caractères utilisés dans les principales langues européennes (la norme ISO-8859-1 est aussi appelée "latin1" car elle permet d'encoder les caractères de l'alphabet dit "latin").
Problème, il existe beaucoup d'autres langues dans le monde qui n'utilisent pas l'alphabet dit "latin", par exemple le chinois ou le japonais ! D'autres normes ont donc dû voir le jour.
Des changements de configuration sont nécessaires pour afficher un texte dans l'encodage adéquat.
## Encodage Unicode
Pour éviter ces problèmes, en 1991, une nouvelle norme a vu le jour : Unicode.
Unicode a pour ambition de rassembler tous les caractères existant afin qu'une personne utilisant Unicode puisse, sans changer la configuration de son traitement de texte, à la fois lire des textes en français ou en japonais.
Unicode est une table qui regroupe tous les caractères existant au monde. Unicode accepte plusieurs systèmes de codage : UTF-8, UTF-16, UTF-32.
Le plus utilisé, notamment sur le Web, est UTF-8.
### Nombre s'octets en UTF-8
Pour encoder les caractères Unicode, UTF-8 utilise un nombre variable d'octets (jusque 4) :
- Les caractères de numéro 0 à 127 sont codés sur un octet dont le bit de poids fort est toujours nul,
- Les caractères de numéro supérieur à 127 sont codés sur plusieurs octets.
- Dans ce cas, les bits de poids fort du premier octet forment une suite de 1 de longueur égale au nombre d'octets utilisés pour coder le caractère, les octets suivants ayant 10 comme bits de poids fort.
<table>
<caption><b>Définition du nombre d'octets utilisés</b></caption>
<thead>
<tr><th>Représentation binaire en UTF-8</th><th>Signification</th></tr>
</thead>
<tbody>
<tr><td>0xxxxxxx</td><td>1 octet codant 1 à 7 bits</td></tr>
<tr><td>110xxxxx 10xxxxxx</td><td>2 octets codant 8 à 11 bits</td></tr>
<tr><td>1110xxxx 10xxxxxx 10xxxxxx</td><td>3 octets codant 12 à 16 bits</td></tr>
<tr><td>11110xxx 10xxxxxx 10xxxxxx 10xxxxxx</td><td>4 octets codant 17 à 21 bits</td></tr>
</tbody>
</table>
### Méthode pour obtenir la représentation binaire en UTF-8 d'un caractère
1. Représenter le point de code associé au caractère en binaire
2. En fonction du nombre de bits, définir le nombre d'octets nécessaires pour une représentation en UTF-8
3. Découper les blocs de bits en autant d'octets nécessaires.
Exemple : le caractère `A` a pour point de code 65 dans la table Unicode.
1. Représentation binaire de 65 : <tt>100 0001</tt>
2. 7 bits sont nécessaires $`\rightarrow`$​ 1 octet nécessaire pour le représenter en UTF-8</li>
3. Représentation en UTF-8 : <tt><b>0</b>1000001</tt> ou $`(41)_{16}`$
Exemple : le caractère &#339; a pour point de code 339 dans la table Unicode.
1. Représentation binaire de 339 : <tt>1 0101 0011</tt>
2. 9 bits sont nécessaires $`\rightarrow`$ 2 octets nécessaires pour le représenter en UTF-8
3. l'octet de poids faible codant les 6 bits de poids faible, l'octet poids fort codant les 3 bits de poids forts
4. Représentation en UTF-8 : <tt><b>110</b>0101 <b>10</b>010011</tt> ou $`(\text{C}5\,93)_{16}`$
___Travail à effectuer___
> 1. Quelle est la représentation binaire du caractère `b` (point de code : 98) en UTF-8 ?
> 2. Quel est le point de code représenté par $`(\text{C}2\,80)_{16}`$ en UTF-8 ?
___Solution___
> 1. Le point de code 98 a comme représentatio binaire : $`(1100010)_`$
> - 7 bits sont nécessaires &rArr; 1 octet nécessaire pour le réprésenter en UTF-8
> - Représentation en UTF-8 : <tt><b>0</b>1100010</tt> ou $`(62)_{16}`$
> 2. $`(\text{C}2\,80)_{16} = (11000010\,10000000)_{16}`$
Le point de code est représenté par les bits <tt>110<b>00010</b> 10<b>000000</b></tt>. Soit $`(10000000)_2 = (128)_{10}`$
<table>
<caption><b>Exemples de codage UTF-8</b></caption>
<thead>
<tr>
<th>Point de code</th>
<th>Caractère</th>
<th>Représentation binaire UTF-8</th>
</tr>
</thead>
<tbody>
<tr>
<td>66</td>
<td>B</td>
<td><tt><b>0</b>1000010</tt></td>
</tr>
<tr>
<td>233</td>
<td>é</td>
<td><tt><b>110</b>00011 <b>10</b>101001</tt></td>
</tr>
<tr>
<td>8364</td>
<td>€</td>
<td><tt><b>1110</b>0010 <b>10</b>000010 <b>10</b>101100</tt></td>
</tr>
<tr>
<td>119070</td>
<td>𝄞</td>
<td><tt><b>11110</b>000 <b>10</b>011101 <b>10</b>000100 <b>10</b>011110</tt></td>
</tr>
</tbody>
</table>
___Observation___
Dans toute chaîne de caractères UTF-8, on remarque que :
- tout octet de bit de poids fort nul code un caractère ASCII sur un octet,
- tout octet de bits de poids fort valant <tt><b>11</b></tt> est le premier octet d'un caractère codé sur plusieurs octets,
- tout octet de bits de poids fort valant <tt><b>10</b></tt> est à l'intérieur d'un caractère codé sur plusieurs octets.

42
representation_base/chapitre_5/debranche/README.md Normal file
View File

@@ -0,0 +1,42 @@
# Activité débranchée : Codage des caractères
## Contexte
L'histoire de la communication est aussi ancienne que l'histoire de l'humanité. Depuis les origines, l'homme a eu besoin de communiquer. Pour cela il mit au point des codes, des alphabets et des langages. Parole, gestes de la main, signaux de fumée, tam-tam, document écrit… tout était bon pour véhiculer le message.
Dès la préhistoire, les hommes ont commencés à communiquer notamment grâce à l'art rupestre.
Les peintures rupestres pouvaient permettre de marquer un territoire d'habitation ou de chasse ou transmettre des pensées, une façon de voir le monde et ce qu'il l'entoure.
![Photographie de peintures d'animaux dans la grotte de Lascaux](./assets/lascaux.jpeg)
Photographie de peintures d'animaux dans la grotte de Lascaux, Source : Wikimedia
Le __codage des caractères__ est une convention qui permet, à travers un codage connu de tous, de transmettre de l'information textuelle, là où aucun support ne permet l'écriture scripturale et sa transmission.
Cela consiste à représenter chaque caractère, par un motif visuel, un motif sonore, ou une séquence abstraite.
## Objectifs
L'objectif de ce TD est d'étudier des codages ancestraux de l'ère de la mécanisation et de la numérisation des communications.
4 codages sont étudiés :
- [L'alphabet de Chappe](./chappe/),
- [Le code morse](./morse/),
- [Le code Baudot](./baudot),
- [Le code BCD](./bcd).
## Consignes
- Par groupe, vous devez étudier les documents relatifs au codage,
- Individuellement : (20 minutes)
- Coder votre nom et âge,
- Coder une phrase de votre choix de 10-15 caractères,
- L'échanger à un autre membre,
- Décoder la phrase transmise
- Collectivement, répondre aux questions suivantes (10 minutes) :
- Époque du codage
- Principe de fonctionnement : nombre de caractères codés, mécanisme pour coder un caractère
- Avantages / inconvénients
- A la fin du temps imparti, un élève du groupe présente au reste de la classe les réponses aux questions traitées. (5 minutes)

BIN
representation_base/chapitre_5/debranche/assets/lascaux.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

BIN
representation_base/chapitre_5/debranche/baudot/description.pdf Normal file
View File

Binary file not shown.

BIN
representation_base/chapitre_5/debranche/baudot/table.pdf Normal file
View File

Binary file not shown.

BIN
representation_base/chapitre_5/debranche/bcd/description.pdf Normal file
View File

Binary file not shown.

BIN
representation_base/chapitre_5/debranche/bcd/table.pdf Normal file
View File

Binary file not shown.

BIN
representation_base/chapitre_5/debranche/chappe/description.pdf Normal file
View File

Binary file not shown.

BIN
representation_base/chapitre_5/debranche/morse/description.pdf Normal file
View File

Binary file not shown.

204
representation_base/chapitre_5/debranche/morse/table.svg Normal file
View File

@@ -0,0 +1,204 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="450" height="580" viewBox="0 0 414.772 500.994" id="Layer_2" xml:space="preserve">
<defs id="defs3017" />
<g id="g2643">
<text x="67.249229" y="10.537716" id="text2872" style="font-size:22px;font-family:DejaVu Sans;">Code morse international</text>
<text x="24.051781" y="38.502422" id="text2874" style="font-size:10px;font-family:DejaVu Sans;">
<tspan x="24.051781" y="38.502422" id="tspan2876">1. Un tiret est égal à trois points.</tspan>
<tspan x="24.051781" y="52.90242" id="tspan2878">2. L’espacement entre deux éléments d’une même lettre est égal à un point.</tspan>
<tspan x="24.051781" y="67.302414" id="tspan2880">3. L’espacement entre deux lettres est égal à trois points.</tspan>
<tspan x="24.051781" y="81.702415" id="tspan2882">4. L’espacement entre deux mots est égal à sept points.</tspan>
</text>
</g>
<g transform="translate(-3.8164787,0)" id="g3272">
<g transform="translate(-18.434315,0)" id="g3132">
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,202.38592,-57.340438)" id="circle3554" />
<rect width="27.651466" height="9.217145" x="285.73181" y="121.45683" id="rect3556" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,220.82023,-57.340438)" id="circle3558" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,202.38592,-38.906127)" id="circle3560" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,220.82023,-38.906126)" id="circle3562" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,239.25454,-38.906126)" id="circle3564" />
<rect width="27.651466" height="9.217145" x="304.16614" y="139.89114" id="rect3566" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,202.38592,-20.471816)" id="circle3568" />
<rect width="27.651466" height="9.217145" x="267.29752" y="158.32545" id="rect3570" />
<rect width="27.651466" height="9.217145" x="304.16614" y="158.32544" id="rect3572" />
<rect width="27.651466" height="9.217145" x="248.8632" y="176.75975" id="rect3574" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,239.25454,-2.0375037)" id="circle3576" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,257.68885,-2.0375037)" id="circle3578" />
<rect width="27.651466" height="9.217145" x="322.60043" y="176.75977" id="rect3580" />
<rect width="27.651466" height="9.217145" x="248.8632" y="195.19408" id="rect3588" />
<rect width="27.651466" height="9.217145" x="304.16614" y="195.19408" id="rect3590" />
<rect width="27.651466" height="9.217145" x="341.03476" y="195.19408" id="rect3592" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,239.25454,16.396807)" id="circle3594" />
<rect width="27.651466" height="9.217145" x="248.8632" y="213.62837" id="rect3596" />
<rect width="27.651466" height="9.217145" x="285.73181" y="213.62839" id="rect3598" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,276.12316,34.831118)" id="circle3600" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,294.55748,34.831118)" id="circle3602" />
<g transform="translate(-1.8497366,0)" id="g2615">
<text x="231.22548" y="130.67398" id="text3604" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">U</text>
<text x="231.74756" y="149.10829" id="text3608" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">V</text>
<text x="229.15523" y="167.31757" id="text3612" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">W</text>
<text x="231.73405" y="185.97691" id="text3616" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">X</text>
<text x="231.76105" y="204.41122" id="text3620" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">Y</text>
<text x="232.27863" y="222.84554" id="text3624" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">Z</text>
</g>
</g>
<g id="g3169">
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,-9.6086576,-57.340437)" id="circle2870" />
<rect width="27.651466" height="9.217145" x="55.302933" y="121.45683" id="rect3010" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,27.496285,-38.906126)" id="circle3324" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,45.694276,-38.611276)" id="circle3326" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,64.122679,-38.906126)" id="circle3328" />
<rect width="27.651466" height="9.217145" x="36.868622" y="158.32544" id="rect3330" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,27.23125,-20.471815)" id="circle3332" />
<rect width="27.651466" height="9.217145" x="92.171555" y="158.32544" id="rect3334" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,82.623628,-20.471815)" id="circle3336" />
<rect width="27.651466" height="9.217145" x="36.868622" y="176.75977" id="rect3338" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,27.17162,-2.0375044)" id="circle3340" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,45.694276,-1.8597136)" id="circle3342" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,-9.6086576,16.396807)" id="circle3412" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,-9.6086574,34.831118)" id="circle3414" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,8.8256537,34.831118)" id="circle3416" />
<rect width="27.651466" height="9.217145" x="73.737244" y="213.62837" id="rect3420" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,64.128587,34.831118)" id="circle3422" />
<rect width="27.651466" height="9.217145" x="36.868622" y="232.06268" id="rect3424" />
<rect width="27.651466" height="9.217145" x="73.737244" y="232.06268" id="rect3426" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,64.128587,53.265429)" id="circle3428" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,-9.6086576,71.69974)" id="circle3458" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,8.8256535,71.69974)" id="circle3460" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,27.259965,71.69974)" id="circle3462" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,45.694276,71.69974)" id="circle3464" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,-9.6086576,90.134051)" id="circle3466" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,8.8256537,90.134051)" id="circle3468" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,-9.6086576,108.56836)" id="circle3470" />
<rect width="27.651466" height="9.217145" x="55.302933" y="287.36563" id="rect3472" />
<rect width="27.651466" height="9.217145" x="92.171555" y="287.36563" id="rect3474" />
<rect width="27.651466" height="9.217145" x="129.04018" y="287.36563" id="rect3476" />
<rect width="27.651466" height="9.217145" x="36.868622" y="305.79993" id="rect3478" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,27.259965,127.00267)" id="circle3480" />
<rect width="27.651466" height="9.217145" x="92.171555" y="305.79996" id="rect3482" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,-9.6086576,145.43698)" id="circle3484" />
<rect width="27.651466" height="9.217145" x="55.302933" y="324.23425" id="rect3486" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,45.694276,145.43698)" id="circle3488" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,64.128587,145.43698)" id="circle3490" />
<rect width="27.651466" height="9.217145" x="36.868622" y="342.66858" id="rect3492" />
<rect width="27.651466" height="9.217145" x="73.737244" y="342.66858" id="rect3494" />
<rect width="27.651466" height="9.217145" x="36.868622" y="361.10287" id="rect3496" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,27.259965,182.30561)" id="circle3498" />
<rect width="27.651466" height="9.217145" x="36.868622" y="379.5372" id="rect3500" />
<rect width="27.651466" height="9.217145" x="73.737244" y="379.5372" id="rect3502" />
<rect width="27.651466" height="9.217145" x="110.60587" y="379.5372" id="rect3504" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,-9.6086576,219.17423)" id="circle3506" />
<rect width="27.651466" height="9.217145" x="55.302933" y="397.9715" id="rect3508" />
<rect width="27.651466" height="9.217145" x="92.171555" y="397.9715" id="rect3510" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,82.562898,219.17423)" id="circle3512" />
<rect width="27.651466" height="9.217145" x="36.868622" y="416.40579" id="rect3514" />
<rect width="27.651466" height="9.217145" x="73.737244" y="416.40582" id="rect3516" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,64.128587,237.60854)" id="circle3518" />
<rect width="27.651466" height="9.217145" x="129.04018" y="416.40582" id="rect3520" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,-9.6086574,256.04285)" id="circle3522" />
<rect width="27.651466" height="9.217145" x="55.302933" y="434.84012" id="rect3524" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,45.694276,256.04285)" id="circle3526" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,27.259965,274.47716)" id="circle3528" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,8.8256537,274.47716)" id="circle3530" />
<circle cx="39.4" cy="141.48" r="3.555" transform="matrix(1.296365,0,0,1.296365,-9.6086574,274.47716)" id="circle3532" />
<rect width="27.651466" height="9.217145" x="36.868622" y="471.70874" id="rect3534" />
<g id="g2573">
<text x="17.138149" y="130.67398" id="text3309" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">A</text>
<text x="16.953625" y="149.10829" id="text3344" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">B</text>
<text x="16.535072" y="167.31757" id="text3350" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">C</text>
<text x="16.409058" y="185.97691" id="text3356" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">D</text>
<text x="16.904119" y="204.41122" id="text3360" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">E</text>
<text x="17.322672" y="222.84554" id="text3364" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">F</text>
<text x="16.202032" y="241.05481" id="text3368" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">G</text>
<text x="16.634085" y="259.71414" id="text3372" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">H</text>
<text x="20.693594" y="278.14847" id="text3376" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">I</text>
<text x="19.145401" y="296.58276" id="text3380" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">J</text>
<text x="16.481066" y="315.01709" id="text3384" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">K</text>
<text x="17.813232" y="333.45139" id="text3388" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">L</text>
<text x="15.621459" y="351.88571" id="text3392" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">M</text>
<text x="16.683592" y="370.32001" id="text3396" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">N</text>
<text x="16.085016" y="388.75433" id="text3400" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">O</text>
<text x="16.058014" y="425.62296" id="text3404" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">Q</text>
<text x="16.82761" y="407.18866" id="text3408" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">P</text>
<text x="16.022009" y="444.05728" id="text3536" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">R</text>
<text x="17.205658" y="462.49158" id="text3540" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">S</text>
<text x="17.62421" y="480.9259" id="text3544" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">T</text>
</g>
<use transform="translate(-18.43431,18.434311)" id="use2703" x="0" y="0" width="414.772" height="500.99399" xlink:href="#rect3010" />
</g>
<g transform="translate(-18.434314,64.295099)" id="g3051">
<use transform="translate(211.99458,119.82302)" id="use2707" x="0" y="0" width="414.772" height="500.99399" xlink:href="#rect3010" />
<use transform="translate(248.8632,119.82301)" id="use2709" x="0" y="0" width="414.772" height="500.99399" xlink:href="#rect3010" />
<use id="use2711" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2709" />
<use transform="translate(285.73182,119.82301)" id="use2713" x="0" y="0" width="414.772" height="500.99399" xlink:href="#rect3010" />
<use transform="translate(322.60045,119.82301)" id="use2715" x="0" y="0" width="414.772" height="500.99399" xlink:href="#rect3010" />
<use transform="translate(211.99458,119.82302)" id="use2717" x="0" y="0" width="414.772" height="500.99399" xlink:href="#circle2870" />
<use transform="translate(211.99458,138.25733)" id="use2719" x="0" y="0" width="414.772" height="500.99399" xlink:href="#circle2870" />
<use transform="translate(230.42889,138.25733)" id="use2721" x="0" y="0" width="414.772" height="500.99399" xlink:href="#circle2870" />
<use transform="translate(230.42889,138.25733)" id="use2723" x="0" y="0" width="414.772" height="500.99399" xlink:href="#rect3010" />
<use transform="translate(267.29751,138.25733)" id="use2725" x="0" y="0" width="414.772" height="500.99399" xlink:href="#rect3010" />
<use transform="translate(304.16613,138.25732)" id="use2727" x="0" y="0" width="414.772" height="500.99399" xlink:href="#rect3010" />
<use transform="translate(211.99458,156.69164)" id="use2779" x="0" y="0" width="414.772" height="500.99399" xlink:href="#circle2870" />
<use transform="translate(18.434309,4.0522843e-6)" id="use2781" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2779" />
<use transform="translate(18.434311,0)" id="use2783" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2781" />
<use transform="translate(18.434309,18.434308)" id="use2785" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2723" />
<use transform="translate(36.868622,9.8155382e-8)" id="use2787" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2785" />
<use transform="translate(2.324722e-7,18.434311)" id="use2789" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2779" />
<use transform="translate(18.434311,7.8636818e-8)" id="use2791" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2789" />
<use transform="translate(18.434311,0)" id="use2793" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2791" />
<use transform="translate(18.434311,0)" id="use2795" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2793" />
<use transform="translate(18.434313,18.434307)" id="use2797" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2785" />
<use transform="translate(-2.3247221e-7,18.434311)" id="use2799" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2789" />
<use transform="translate(18.434311,-4.2724257e-8)" id="use2801" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2799" />
<use transform="translate(18.434311,0)" id="use2803" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2801" />
<use transform="translate(18.434312,0)" id="use2805" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2803" />
<use transform="translate(18.434311,0)" id="use2807" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2805" />
<use transform="translate(36.868622,36.868622)" id="use2809" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2789" />
<use transform="translate(36.868622,36.868622)" id="use2811" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2791" />
<use transform="translate(36.868622,36.868622)" id="use2813" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2793" />
<use transform="translate(36.868622,36.868622)" id="use2815" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2795" />
<use transform="translate(-73.737245,36.868622)" id="use2817" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2797" />
<use id="use2819" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2779" />
<use id="use2821" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2781" />
<use id="use2823" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2783" />
<use id="use2825" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2785" />
<use id="use2827" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2787" />
<use transform="translate(73.737242,73.737248)" id="use2829" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2779" />
<use transform="translate(73.737244,73.737244)" id="use2831" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2781" />
<use transform="translate(73.737244,73.737244)" id="use2833" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2783" />
<use transform="translate(-55.302932,73.73724)" id="use2845" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2825" />
<use transform="translate(-55.302931,73.737251)" id="use2847" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2827" />
<use transform="translate(36.868622,18.434311)" id="use2849" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2829" />
<use transform="translate(36.868622,18.434311)" id="use2851" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2831" />
<use transform="translate(36.868622,18.434311)" id="use2855" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2845" />
<use transform="translate(36.868622,18.434311)" id="use2857" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2847" />
<use transform="translate(-36.868622,3.3648014e-7)" id="use2859" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2855" />
<use transform="translate(-18.434316,147.4745)" id="use2861" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2707" />
<use transform="translate(-18.434316,147.4745)" id="use2863" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2709" />
<use transform="translate(-18.434316,147.4745)" id="use2865" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2711" />
<use transform="translate(-18.434316,147.4745)" id="use2867" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2713" />
<use transform="translate(-18.434316,147.4745)" id="use2869" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2715" />
<use transform="translate(-110.60587,18.434302)" id="use2873" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2869" />
<use transform="translate(18.434312,18.434312)" id="use2875" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2851" />
<use transform="translate(36.868625,18.434302)" id="use2877" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2861" />
<use transform="translate(36.868625,18.434302)" id="use2879" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2863" />
<use transform="translate(36.868625,18.434302)" id="use2881" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2865" />
<use transform="translate(36.868625,18.434302)" id="use2883" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2867" />
<use transform="translate(36.868625,18.434302)" id="use2885" x="0" y="0" width="414.772" height="500.99399" xlink:href="#use2869" />
<g id="g3029">
<text x="231.75656" y="250.49699" id="text2889" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">1</text>
<text x="231.284" y="268.9313" id="text2893" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">2</text>
<text x="231.09947" y="287.14056" id="text2897" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">3</text>
<text x="231.39651" y="305.79993" id="text2901" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">4</text>
<text x="231.05447" y="324.23422" id="text2905" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">5</text>
<text x="231.14449" y="342.66855" id="text2909" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">6</text>
<text x="231.04997" y="360.87781" id="text2913" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">7</text>
<text x="231.09947" y="379.53714" id="text2917" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">8</text>
<text x="231.09048" y="397.97147" id="text2921" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">9</text>
<text x="231.12648" y="416.40576" id="text2925" xml:space="preserve" style="font-size:18px;font-family:DejaVu Sans">0</text>
</g>
</g>
</g>
</svg>

206
representation_base/chapitre_5/td/CORRECTION.md Normal file
View File

@@ -0,0 +1,206 @@
# TD - Le Li<4C>vre et la Tortue
## Contexte
2 fichiers `lièvre-iso-8859-1.html` et `lièvre-utf8.html` contiennent le même texte : la fable du lièvre et de la tortue de Jean de La Fontaine.
![Couverture](./assets/couverture.jpg)
Source : Wikipédia
Si on ouvre ces 2 fichiers dans un navigateur Web, des symboles étranges apparaissent, rendant la lecture inconfortable.
Ce TD a pour but de comprendre l'origine de ce phénomène.
Cette séance se découpe en 2 parties :
- La première consiste à explorer et découvrir la problématique d'encodage,
- La deuxième consiste à manipuler la représentation des chaines de caractères en python.
Les parties doivent être traitées dans l'ordre.
# Pré-Requis
Avoir l'extension [Set Character Encoding](https://chrome.google.com/webstore/detail/set-character-encoding/bpojelgakakmcfmjfilgdlmhefphglae) installée sur votre poste.
# Partie 1 - Exploration et découverte
Cette partie vise à vous faire comprendre le problème d'encodage par différentes observations, calculs et manipulations à réaliser.
A la fin de cette partie, vous devez répondre à un questionnaire et le valider avec votre professeur.
En cas de réussite, vous pouvez aborder la partie 2.
## Table d'encodage et calcul de la représentation binaire
### ISO-8859-1
Voici la table d'encodage ISO-8859-1 :
![Table de codage](./assets/iso-8859-1.png)
Exemple : la point de code du caractère `A` est 41 (ligne 4x et colonne x1).
***Observation 1.*** Sachant que l'encodage ISO-8859-1 représente les points de code sur 1 octet. Quelle est la représentation binaire du caractère `A` ?
Le point de code du caractère `A` est $`41_{16}`$ soit $`0100\,0001`$ en binaire.
***Observation 2.*** Quelle est le point de code du caractère `<` ? Quelle est sa représentation binaire ?
Le point de code du caractère `<` est $`3C_{16}`$ soit $`0011\,1100`$ en binaire.
***Observation 3.*** Quelle est la point de code du caractère `à`? Quelle est sa représentation binaire ?
Le point de code du caractère `à` est $`E0_{16}`$ soit $`1110\,0000`$ en binaire.
***Observation 4.*** Étant donné le mot binaire $`(10101001)_2`$, quel caractère représente-il ? Quel est celui associé au mot binaire $`(11110100)_2`$ ?
- $`(10101001)_2 = \text{A}9_{16}`$, soit le point de code lié au caractère `©`.
- $`(11110100)_2 = \text{F}4_{16}`$, soit le point de code lié au caractère `ô`.
### Unicode UTF-8
La table d'encodage de l'UTF-8 est plus conséquente que celle de l'encodage ISO-8859-1. Le site https://unicode-table.com/fr permet d'obtenir les correspondances entre les caractères, leur point de code ainsi que leur représentation binaire UTF-8.
Exemple : le caractère `©` a le point de code U+00A9 (U+ symbolise le fait que l'encodage est Unicode), soit le 169ème point de code ($`(A9)_{16} = (169)_{10}`$) dans la table d'encodage.
***Observation 5.*** En vous référant au cours sur l'encodage UTF-8, calculez la représentation binaire UTF-8 de ce caractère.
La représentation binaire du point de code est $`(10101001)_2`$, qui nécessite 8 bits.
Selon la règle de codage UTF-8, 2 octets sont nécessaires pour représenter en binaire UTF-8 le caractère, sous la forme : $`110XXXXX\,10XXXXXX`$ où X représente les bits de la représentation binaire du point de code.
La représentation binaire UTF-8 est : $`11000010\,10101001`$.
***Observation 6.*** Cherchez le point de code et la représentation binaire du caractère ♧.
Le point de code du caractère ♧ est 2667. La représentation binaire du point de code est : $`2667_{16} = 0010\,0110\, 0110\,0111_2`$, qui nécessite 16 bits.
Selon la règle de codage UTF-8, 3 octets sont nécessaires pour représenter en binaire UTF-8 le caractère, sous la forme : $`1110XXXX\,10XXXXXX\,10XXXXXX`$ où X représente les bits de la représentation binaire du point de code.
La représentation binaire UTF-8 est : $`11100010\,10011001\,10100111`$.
***Observation 7.*** Cherchez le point de code et le caractère associés à la représentation binaire $`(11100010\,10000100 \,10111100)_2`$.
La représentation binaire UTF-8 du caractère est sur 3 octets, sous la forme $`1110XXXX\,10XXXXXX\,10XXXXXX`$ où X représente les bits de la représentation binaire du point de code.
La représentation binaire du point de code est : $`0010\,0001\, 0011\,1100_2`$, Soit $`213C_{16}`$.
Le caractère associé est : ℼ.
## Effet visuel du problème d'encodage
***Observation 8.*** Ouvrez dans votre navigateur Web les fichiers `lièvre-iso-8859-1.html` et `lièvre-utf8.html`.
Quelles différences constatez-vous ?
Des caractères bizarres apparaissent.
***Observation 9.*** Dans l'explorateurs de fichiers, comparez la taille de ces 2 fichiers (en octets). Quelles différences constatez-vous ?
- ISO-8859-1 : 1385 octets,
- UTF-8 : 1418 octets.
***Observation 10.*** Dans votre navigateur Web, en faisant clic droit sur le page `lièvre-iso-8859-1.html`, changer la valeur de `Set Encoding character` avec les autres valeurs que celle sélectionnée. Que constatez-vous ?
***Observation 11.*** Dans votre navigateur Web, en faisant clic droit sur le page `lièvre-utf8.html`, changer la valeur de `Set Encoding character` avec les autres valeurs que celle sélectionnée. Que constatez-vous ?
Les caractères bizarres disparaissent au profit d'accents.
## Analyse de la représentation binaire d'un fichier texte
Nous allons utiliser un éditeur hexadécimal de texte en ligne https://www.onlinehexeditor.com/, il permet de visualiser le contenu réel d'un fichier texte, i.e les mots binaires (en héxadécimal) qui représentent les caractères.
***Observation 12.*** Dans votre navigateur Web, rendez-vous sur la page https://www.onlinehexeditor.com/ et ouvrez les 2 fichiers `lièvre-iso-8859-1.html` et `lièvre-utf8.html` en cliquant sur `open file`. Quelles différences constatez-vous ?
***Observation 13.*** Au vu des observations précédentes, comment expliquez-vous que votre navigateur affiche :
- `LiÚvre` au lieu de `lièvre` quand on ouvre le fichier `lièvre-utf8.html` avec un encodage iso-8859-1 ?
- `t<>moignage` au lieu de `témoignage` quand on ouvre le fichier `lièvre-iso-8859-1.html` avec un encodage UTF-8 ?
## Questionnaire
Q1. le caractère `à` a toujours la même représentation en mémoire quelque soit l'encodage utilisé ?
A. Vrai
B. Faux [X]
Q2. Dans la table d'encodage Unicode, le caractère `Ô` est le :
A. 212ème [X]
B. 213ème
C. $`(D4)_{16}`$ème [X]
D. Il n'existe dans la table d'encodage Unicode
Q3. En UTF-8, les caractères sont représentés sur :
A. 1 octet
B. 2 octets
C. 7 bits
D. un nombre variable entre 1 et 4 octets [X]
Q4. En cas de problème d'affichage visuel d'un texte, quelle(s) est(sont) la(les) solution(s) selon vous ?
A. s'assurer que l'encodage du fichier et le même que celui qui sert à l'affichage [X]
B. modifier le fichier pour corriger les erreurs
C. appeler son professeur pour qu'il corrige le problème
D. modifier l'encodage de la visualisation [X]
Q5. Soit le point de code U+00D4, cela vous indique que :
A. l'encodage est Unicode et la représentation binaire du caractère est $`(01001101)_2`$
B. l'encodage est Unicode et la représentation binaire du caractère est $`(11000011 \,10010100)_2`$ [X]
C. l'encodage est Unicode et le caractère associé est la lettre Ô [X]
D. l'encodage est ISO-8859-1 et la représentation binaire du caractère est $`(01001101)_2`$
Q6. Quand une application traite un fichier encodé en iso-8859-1 :
A. Elle traite octet par octet [X]
B. Elle traite un nombre variable d'octets
C. calcule la position en fonction de la valeur de l'octet et affiche le caractère associé [X]
D. affiche les caractères en fonction de la table d'encodage Unicode
## Partie 2 - Manipulation en Python
***Q1.*** Dans un interpréteur Python, exécutez successivement les instructions `chr(212)` et `chr(169)`. Qu'en déduisez-vous sur la spécification de la fonction `chr`?
```python
>>> chr(212)
'Ô'
>>> chr(169)
'©'
```
`chr` donne le caractère associé au point de code passé en paramètre.
***Q2.*** Dans un interpréteur Python, exécutez successivement les instructions `ord('©')` et `ord('à')`. Qu'en déduisez-vous sur la spécification de la fonction `ord`?
```python
>>> ord('©')
169
>>> ord('à')
224
```
`ord` donne le point de code du caractère passé en paramètre.
***Q3.*** Écrire une fonction `binaire_utf8`, qui prend en paramètre un point de code Unicode sous la forme d'un entier et renvoie la représentation binaire UTF-8 du caractère associé, sous la forme d'une liste d'octet (un octet est une liste de bits). (Aide : Vous pouvez réutiliser les fonctions de conversion en binaire des précédentes séances ainsi que la méthode vu en cours)
```python
def binaire_utf8(code):
binaire_code = binaire(code)
if len(binaire_code) < 8:
return binaire_code
elif 8 <= binaire_code < 12:
return '110' + binaire_code[:5] + '10' + binaire_code[5:]
elif 12 <= binaire_code < 17:
return '1110' + binaire_code[:4] + '10' + binaire_code[4:10] + '10' + binaire_code[10:]
elif 17 <= binaire_code:
return '11110' + binaire_code[:3] + '10' + binaire_code[3:9] + '10' + binaire_code[9:15] + '10' + binaire_code[15:]
```
***Q4.*** Écrire une fonction `str_to_utf8`, qui prend en paramètre une chaine de caractère et renvoie la représentation binaire UTF-8, en hexadécimal, de l'ensemble des caractères de la chaine. Exécutez votre fonction sur la chaine `Rien ne sert de courir ; il faut partir à point. Le Lièvre et la Tortue en sont un témoignage.` Comparez le résultat obtenu avec celui de l'observation 12.
```python
def str_to_utf8(chaine):
l = []
for caractere in chaine:
l.append(hexadecimal(binaire_utf8(ord(caractere))))
return l
```

133
representation_base/chapitre_5/td/ENONCE.md Normal file
View File

@@ -0,0 +1,133 @@
# TD - Le Li<4C>vre et la Tortue
## Contexte
2 fichiers `lièvre-iso-8859-1.html` et `lièvre-utf8.html` contiennent le même texte : la fable du lièvre et de la tortue de Jean de La Fontaine.
![Couverture](./assets/couverture.jpg)
Source : Wikipédia
Si on ouvre ces 2 fichiers dans un navigateur Web, des symboles étranges apparaissent, rendant la lecture inconfortable.
Ce TD a pour but de comprendre l'origine de ce phénomène.
Cette séance se découpe en 2 parties :
- La première consiste à explorer et découvrir la problématique d'encodage,
- La deuxième consiste à manipuler la représentation des chaines de caractères en python.
Les parties doivent être traitées dans l'ordre.
# Pré-Requis
Avoir l'extension [Set Character Encoding](https://chrome.google.com/webstore/detail/set-character-encoding/bpojelgakakmcfmjfilgdlmhefphglae) installée sur votre poste.
# Partie 1 - Exploration et découverte
Cette partie vise à vous faire comprendre le problème d'encodage par différentes observations, calculs et manipulations à réaliser.
A la fin de cette partie, vous devez répondre à un questionnaire et le valider avec votre professeur.
En cas de réussite, vous pouvez aborder la partie 2.
## Table d'encodage et calcul de la représentation binaire
### ISO-8859-1
Voici la table d'encodage ISO-8859-1 :
![Table de codage](./assets/iso-8859-1.png)
Exemple : la point de code du caractère `A` est 41 (ligne 4x et colonne x1).
***Observation 1.*** Sachant que l'encodage ISO-8859-1 représente les points de code sur 1 octet. Quelle est la représentation binaire du caractère `A` ?
***Observation 2.*** Quelle est le point de code du caractère `<` ? Quelle est sa représentation binaire ?
***Observation 3.*** Quelle est la point de code du caractère `à`? Quelle est sa représentation binaire ?
***Observation 4.*** Étant donné le mot binaire $`(10101001)_2`$, quel caractère représente-il ? Quel est celui associé au mot binaire $`(11110100)_2`$ ?
### Unicode UTF-8
La table d'encodage de l'UTF-8 est plus conséquente que celle de l'encodage ISO-8859-1. Le site https://unicode-table.com/fr permet d'obtenir les correspondances entre les caractères, leur point de code ainsi que leur représentation binaire UTF-8.
Exemple : le caractère `©` a le point de code U+00A9 (U+ symbolise le fait que l'encodage est Unicode), soit le 169ème point de code ($`(A9)_{16} = (169)_{10}`$) dans la table d'encodage.
***Observation 5.*** En vous référant au cours sur l'encodage UTF-8, calculez la représentation binaire UTF-8 de ce caractère. Qu'observez-vous par rapport à l'observation 8 ?
***Observation 6.*** Cherchez le point de code et la représentation binaire du caractère ♧.
***Observation 7.*** Cherchez le point de code et le caractère associés à la représentation binaire $`(11100010\,10000100 \,10111100)_2`$.
## Effet visuel du problème d'encodage
***Observation 8.*** Ouvrez dans votre navigateur Web les fichiers `lièvre-iso-8859-1.html` et `lièvre-utf8.html`.
Quelles différences constatez-vous ?
***Observation 9.*** Dans l'explorateurs de fichiers, comparez la taille de ces 2 fichiers (en octets). Quelles différences constatez-vous ?
***Observation 10.*** Dans votre navigateur Web, en faisant clic droit sur le page `lièvre-iso-8859-1.html`, changer la valeur de `Set Encoding character` avec les autres valeurs que celle sélectionnée. Que constatez-vous ?
***Observation 11.*** Dans votre navigateur Web, en faisant clic droit sur le page `lièvre-utf8.html`, changer la valeur de `Set Encoding character` avec les autres valeurs que celle sélectionnée. Que constatez-vous ?
## Analyse de la représentation binaire d'un fichier texte
Nous allons utiliser un éditeur hexadécimal de texte en ligne https://www.onlinehexeditor.com/, il permet de visualiser le contenu réel d'un fichier texte, i.e les mots binaires (en héxadécimal) qui représentent les caractères.
***Observation 12.*** Dans votre navigateur Web, rendez-vous sur la page https://www.onlinehexeditor.com/ et ouvrez les 2 fichiers `lièvre-iso-8859-1.html` et `lièvre-utf8.html` en cliquant sur `open file`. Quelles différences constatez-vous ?
***Observation 13.*** Au vu des observations précédentes, comment expliquez-vous que votre navigateur affiche :
- `LiÚvre` au lieu de `lièvre`quand on ouvre le fichier `lièvre-utf8.html` avec un encodage iso-8859-1 ?
- `t<>moignage` au lieu de `témoignage`quand on ouvre le fichier `lièvre-iso-8859-1.html` avec un encodage UTF-8 ?
## Questionnaire
Q1. le caractère `à` a toujours la même représentation en mémoire quelque soit l'encodage utilisé ?
A. Vrai
B. Faux
Q2. Dans la table d'encodage Unicode, le caractère `Ô` est le :
A. 212ème
B. 213ème
C. $`(D4)_{16}`$ème
D. Il n'existe dans la table d'encodage Unicode
Q3. En UTF-8, les caractères sont représentés sur :
A. 1 octet
B. 2 octets
C. 7 bits
D. un nombre variable entre 1 et 4 octets
Q4. En cas de problème d'affichage visuel d'un texte, quelle(s) est(sont) la(les) solution(s) selon vous ?
A. s'assurer que l'encodage du fichier et le même que celui qui sert à l'affichage
B. modifier le fichier pour corriger les erreurs
C. appeler son professeur pour qu'il corrige le problème
D. modifier l'encodage de la visualisation
Q5. Soit le point de code U+00D4, cela vous indique que :
A. l'encodage est Unicode et la représentation binaire du caractère est $`(01001101)_2`$
B. l'encodage est Unicode et la représentation binaire du caractère est $(11000011 \,10010100)_2$
C. l'encodage est Unicode et le caractère associé est la lettre Ô
D. l'encodage est ISO-8859-1 et la représentation binaire du caractère est $`(01001101)_2`$
Q6. Quand une application traite un fichier encodé en iso-8859-1 :
A. Elle traite octet par octet
B. Elle traite un nombre variable d'octets
C. calcule la position en fonction de la valeur de l'octet et affiche le caractère associé
D. affiche les caractères en fonction de la table d'encodage Unicode
## Partie 2 - Manipulation en Python
***Q1.*** Dans un interpréteur Python, exécutez successivement les instructions `chr(212)` et `chr(169)`. Qu'en déduisez-vous sur la spécification de la fonction `chr`?
***Q2.*** Dans un interpréteur Python, exécutez successivement les instructions `ord('©')` et `ord('à')`. Qu'en déduisez-vous sur la spécification de la fonction `ord`?
***Q3.*** Écrire une fonction `binaire_utf8`, qui prend en paramètre un point de code Unicode sous la forme d'un entier et renvoie la représentation binaire UTF-8 du caractère associé, sous la forme d'une liste d'octet (un octet est une liste de bits). (Aide : Vous pouvez réutiliser les fonctions de conversion en binaire des précédentes séances ainsi que la méthode vu en cours)
***Q4.*** Écrire une fonction `str_to_utf8`, qui prend en paramètre une chaine de caractère et renvoie la représentation binaire UTF-8, en hexadécimal, de l'ensemble des caractères de la chaine. Exécutez votre fonction sur la chaine `Rien ne sert de courir ; il faut partir à point. Le Lièvre et la Tortue en sont un témoignage.` Comparez le résultat obtenu avec celui de l'observation 12.

BIN
representation_base/chapitre_5/td/assets/couverture.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
representation_base/chapitre_5/td/assets/iso-8859-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB