From bc36e196332d3ede35342b8658d6f5599bf506cf Mon Sep 17 00:00:00 2001 From: Florian Mathieu Date: Mon, 3 Jul 2023 19:43:03 +0200 Subject: [PATCH] ajout cours + TD encodage caracteres --- representation_base/.DS_Store | Bin 10244 -> 10244 bytes representation_base/chapitre_5/README.md | 277 +++--------------- .../assets/bo.png} | Bin .../chapitre_5/td/CORRECTION.md | 206 ------------- representation_base/chapitre_5/td/ENONCE.md | 189 +++++------- 5 files changed, 125 insertions(+), 547 deletions(-) rename representation_base/{assets/bo_texte_machine.png => chapitre_5/assets/bo.png} (100%) delete mode 100644 representation_base/chapitre_5/td/CORRECTION.md diff --git a/representation_base/.DS_Store b/representation_base/.DS_Store index 90d5998038a1704e89222401d2593a6d1b652c8e..2188d0ba3db75a37b4f875ff4a74e694b508c2ee 100644 GIT binary patch delta 41 ocmZn(XbISmD!|A-xlcHnkz?{JVc*UCf@SPT0*RZQB@gle027oA3IG5A delta 34 pcmZn(XbISmDloZMIGMxD)I>+Y#K>gx1%a*XK#_f$oh1+Q0RYeQ3=aSR diff --git a/representation_base/chapitre_5/README.md b/representation_base/chapitre_5/README.md index 1c6f685..4ba28b5 100644 --- a/representation_base/chapitre_5/README.md +++ b/representation_base/chapitre_5/README.md @@ -1,8 +1,10 @@ # Représentation d'un texte en machine -## Le programme +### Le programme -![bo](../assets/bo_texte_machine.png) +![bo](assets/bo.png) + +----------- @@ -10,272 +12,89 @@ Source : http://www.retourdemartine.free.fr/ +Prenons l'alphabet courant `A`, `B`, `C`, ... `Z` et plaçons-le dans un tableau. Il est important de noter que chaque lettre de l'alphabet est associée à un indice spécifique dans le tableau. -Prenons l'alphabet courant `A`, `B`, `C`, ... `Z` et plaçons le dans un tableau. +#### Tableau de l'alphabet avec indices associés - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ABCDEFGHIJKLMNOPQRSTUVWXYZ
+
0 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
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
-Regardons les indices associés à chaque lettre. +Ces indices sont essentiels car ils forment la base de la représentation des caractères en machine. Chaque caractère est représenté par un nombre entier, ce qui signifie qu'il peut être représenté en binaire dans une machine. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
012345678910111213141516171819202122232425
ABCDEFGHIJKLMNOPQRSTUVWXYZ
+**Définition** -À un indice correspond une lettre et à une lettre est associée un et un seul indice. +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 +Nous appelons cette correspondance entre caractères et nombres l'***encodage des caractères***. -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. +Il a existé et existe plusieurs encodages, nous allons discuter de quelques-uns d'entre eux. -___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`.) +### Encodage ASCII -___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. +En 1960, l'ISO (International Standards Organization) a introduit l'encodage ASCII (American Standard Code for Information Interchange). Dans l'ASCII, 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}`$ +Par exemple, le "A" majuscule correspond au code binaire `1000001`, qui est équivalent à `65` en base 10 ou `41` en base 16. -___Question___ +**Question** : Combien de points de code (et donc de caractères) peuvent être représentés grâce à l'encodage ASCII ? -> Combien de points de code (et donc de caractères) peuvent être représentés grâce à l'encodage ASCII ?" +**Travail à effectuer** -___Solution___ +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 en minuscule ? -> Avec 7 bits, on peut coder $`2^7`$ points de code, donc 128 caractères. +L'encodage ASCII est pratique pour la langue anglaise, mais il est insuffisant pour d'autres langues qui utilisent des caractères accentués, comme le français. C'est pourquoi d'autres encodages ont été développés. -___Travail à effectuer___ +### Encodage ISO-8859-1 -> 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 ? +L'encodage ISO-8859-1, également appelé "latin1", étend l'ASCII en utilisant 8 bits pour chaque point de code, ce qui permet de représenter 256 caractères différents. -___Solution___ +Ainsi, il est possible de représenter des caractères accentués français, mais pas des caractères d'autres langues comme le russe ou le chinois. -> 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. +**Question** : Comment est codé le caractère `é` en ISO-8859-1 ? -La norme ASCII convient bien à la langue anglaise, mais pose des problèmes dans d'autres langues, par exemple le français. +### Encodage Unicode -En effet, l'ASCII ne prévoit pas d'encoder les lettres accentuées. +Pour répondre aux besoins de représentation de tous les caractères de toutes les langues, l'Unicode a été créé. L'Unicode peut théoriquement représenter plus d'un million de caractères (1 114 112 pour être précis). -## Encodage ISO-8859-1 +**Question** : Quel est le point de code du caractère `é` en Unicode ? -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. +### Encodage UTF-8 -___Question___ +Le point de code Unicode ne donne que la correspondance entre un caractère et un nombre, mais ne dit pas comment ce nombre est représenté en binaire. C'est le travail d'un encodage comme l'UTF-8. -> Combien de points de code (et donc de caractères) peuvent être représentés grâce à l'encodage ISO-8859-1 ? +L'UTF-8 est un encodage à longueur variable. Cela signifie que chaque point de code Unicode peut être représenté par une séquence d'octets de longueur différente. -___Soution____ +Nombre d'octets en UTF-8 : -> Sur 8 bits, on peut représenter $`2^8`$ points de code, soit 256 caractères... 2 fois plus que l'encodage ASCII. +- 1 octet pour les points de code allant de 0 à 127 (ce qui inclut l'ASCII). +- 2 octets pour les points de code allant de 128 à 2047. +- 3 octets pour les points de code allant de 2048 à 65535. +- 4 octets pour les points de code allant de 65536 à 1 114 111. -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"). +Ainsi, tous les caractères ASCII sont codés en un seul octet, ce qui permet de conserver la compatibilité avec l'ASCII. Les caractères couramment utilisés dans la plupart des langues européennes, dont le français, sont codés en deux octets. Les autres caractères, y compris les caractères de langues comme le chinois, le japonais, le coréen, etc., sont codés en trois ou quatre octets. -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. +**Exemple pratique** : Supposons que nous voulions encoder le texte "Bonjour le monde!" en UTF-8. Pour chaque caractère, nous rechercherions son point de code Unicode, puis déterminerions combien d'octets sont nécessaires pour le représenter en UTF-8. Par exemple, le caractère 'B' a un point de code Unicode de 66, donc il serait encodé en un octet en UTF-8. Le caractère 'o' a un point de code Unicode de 111, donc il serait également encodé en un octet, et ainsi de suite pour tous les caractères du texte. -Des changements de configuration sont nécessaires pour afficher un texte dans l'encodage adéquat. +---------- -## Encodage Unicode +**Ressources supplémentaires** -Pour éviter ces problèmes, en 1991, une nouvelle norme a vu le jour : Unicode. +Pour approfondir le sujet, vous pouvez consulter les liens suivants : -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. +1. [Unicode](https://home.unicode.org/) +2. [UTF-8](https://fr.wikipedia.org/wiki/UTF-8) -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. +La représentation d'un texte en machine est un sujet complexe, mais essentiel pour la compréhension du fonctionnement des ordinateurs et du Web. En comprenant comment chaque caractère est représenté en binaire, vous pouvez mieux comprendre comment les ordinateurs traitent et stockent les informations. -Le plus utilisé, notamment sur le Web, est UTF-8. +-------- -### Nombre s'octets en UTF-8 +Auteur : Florian Mathieu -Pour encoder les caractères Unicode, UTF-8 utilise un nombre variable d'octets (jusque 4) : +Licence CC BY NC -- 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. - - - - - - - - - - - - -
Définition du nombre d'octets utilisés
Représentation binaire en UTF-8Signification
0xxxxxxx1 octet codant 1 à 7 bits
110xxxxx 10xxxxxx2 octets codant 8 à 11 bits
1110xxxx 10xxxxxx 10xxxxxx3 octets codant 12 à 16 bits
11110xxx 10xxxxxx 10xxxxxx 10xxxxxx4 octets codant 17 à 21 bits
- -### 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 : 100 0001 -2. 7 bits sont nécessaires $`\rightarrow`$​ 1 octet nécessaire pour le représenter en UTF-8 -3. Représentation en UTF-8 : 01000001 ou $`(41)_{16}`$ - -Exemple : le caractère œ a pour point de code 339 dans la table Unicode. - -1. Représentation binaire de 339 : 1 0101 0011 -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 : 1100101 10010011 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 ⇒ 1 octet nécessaire pour le réprésenter en UTF-8 -> - Représentation en UTF-8 : 01100010 ou $`(62)_{16}`$ -> 2. $`(\text{C}2\,80)_{16} = (11000010\,10000000)_{16}`$ - -Le point de code est représenté par les bits 11000010 10000000. Soit $`(10000000)_2 = (128)_{10}`$ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Exemples de codage UTF-8
Point de codeCaractèreReprésentation binaire UTF-8
66B01000010
233é11000011 10101001
8364€11100010 10000010 10101100
119070𝄞11110000 10011101 10000100 10011110
- -___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 11 est le premier octet d'un caractère codé sur plusieurs octets, -- tout octet de bits de poids fort valant 10 est à l'intérieur d'un caractère codé sur plusieurs octets. +Licence Creative Commons
Ce cours est mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International. diff --git a/representation_base/assets/bo_texte_machine.png b/representation_base/chapitre_5/assets/bo.png similarity index 100% rename from representation_base/assets/bo_texte_machine.png rename to representation_base/chapitre_5/assets/bo.png diff --git a/representation_base/chapitre_5/td/CORRECTION.md b/representation_base/chapitre_5/td/CORRECTION.md deleted file mode 100644 index 010cbc8..0000000 --- a/representation_base/chapitre_5/td/CORRECTION.md +++ /dev/null @@ -1,206 +0,0 @@ -# TD - Le Li�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 -``` diff --git a/representation_base/chapitre_5/td/ENONCE.md b/representation_base/chapitre_5/td/ENONCE.md index 573cdc9..908ebec 100644 --- a/representation_base/chapitre_5/td/ENONCE.md +++ b/representation_base/chapitre_5/td/ENONCE.md @@ -1,133 +1,98 @@ -# TD - Le Li�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 + +Licence Creative Commons
Ce cours est mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International.