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

ajout cours + TD encodage caracteres

Browse Source
This commit is contained in:
Florian Mathieu
2023-07-03 19:43:03 +02:00
parent a7f88cfaa7
commit bc36e19633
5 changed files with 125 additions and 547 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,206 +0,0 @@
# 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
```

189
representation_base/chapitre_5/td/ENONCE.md
View File

@@ -1,133 +1,98 @@
# TD - Le Li<4C>vre et la Tortue
## **TD : Manipulation des encodages de caractères**
## Contexte
### **Objectifs** :
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.
1. Comprendre comment les caractères sont encodés en utilisant différents systèmes d'encodage.
2. Savoir comment convertir entre différents encodages.
3. Être capable d'identifier l'encodage utilisé pour un texte donné.
![Couverture](./assets/couverture.jpg)
Source : Wikipédia
### **Partie 1 : Découverte des encodages**
Si on ouvre ces 2 fichiers dans un navigateur Web, des symboles étranges apparaissent, rendant la lecture inconfortable.
Pour cette partie, utilisez un éditeur de texte qui permet de choisir l'encodage lors de l'enregistrement d'un fichier (comme Notepad++).
Ce TD a pour but de comprendre l'origine de ce phénomène.
1. Créez un nouveau fichier texte, et écrivez le mot "Bonjour" dedans.
2. Enregistrez le fichier en utilisant l'encodage ASCII. Qu'observez-vous ?
3. Réessayez en utilisant l'encodage ISO-8859-1. Qu'est-ce qui change ?
4. Enfin, enregistrez le fichier en utilisant l'encodage UTF-8.
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.
### **Partie 2 : Conversion entre encodages**
Les parties doivent être traitées dans l'ordre.
Pour cette partie, utilisez un outil en ligne qui permet de convertir entre différents encodages, comme [cet outil](https://www.browserling.com/tools/text-to-binary).
# Pré-Requis
1. Choisissez un mot ou une phrase en français qui utilise des caractères accentués (par exemple, "révolution").
2. Convertissez ce texte en binaire en utilisant l'encodage UTF-8. Notez le résultat.
3. Convertissez maintenant le même texte en binaire en utilisant l'encodage ISO-8859-1. Notez le résultat.
4. Comparez les deux résultats. Qu'observez-vous ?
Avoir l'extension [Set Character Encoding](https://chrome.google.com/webstore/detail/set-character-encoding/bpojelgakakmcfmjfilgdlmhefphglae) installée sur votre poste.
### **Partie 3 : Identification de l'encodage**
# Partie 1 - Exploration et découverte
Pour cette partie, utilisez un outil en ligne qui permet de deviner l'encodage d'un texte, comme [cet outil](https://dencode.com).
Cette partie vise à vous faire comprendre le problème d'encodage par différentes observations, calculs et manipulations à réaliser.
1. Choisissez trois textes différents, de préférence dans différentes langues.
2. Convertissez chaque texte en binaire en utilisant un encodage différent pour chaque texte.
3. Utilisez l'outil pour essayer de deviner quel encodage a été utilisé pour chaque texte. L'outil a-t-il raison ?
A la fin de cette partie, vous devez répondre à un questionnaire et le valider avec votre professeur.
### **Partie 4 : Python**
En cas de réussite, vous pouvez aborder la partie 2.
1. 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`?
## Table d'encodage et calcul de la représentation binaire
```python
>>> chr(212)
'Ô'
>>> chr(169)
'©'
```
### ISO-8859-1
2. 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`?
Voici la table d'encodage ISO-8859-1 :
```python
>>> ord('©')
169
>>> ord('à')
224
```
![Table de codage](./assets/iso-8859-1.png)
3. É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).
Exemple : la point de code du caractère `A` est 41 (ligne 4x et colonne x1).
Conseil : Vous pouvez réutiliser les fonctions de conversion en binaire des précédentes séances ainsi que la méthode vu en cours.
***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)
```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
```
**Réflexion Finale** :
1. Pourquoi est-il important de connaître l'encodage utilisé pour un texte ?
2. Quels problèmes peut-on rencontrer si on utilise le mauvais encodage pour lire un texte ?
3. Comment l'UTF-8 a-t-il aidé à résoudre certains de ces problèmes ?
--------------
Auteurs : Florian Mathieu - Philippe Boddaert
Licence CC BY NC
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a> <br />Ce cours est mis à disposition selon les termes de la <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International</a>.