CSC 4508 - Traduction: corrigé du TP noté 2011-2012

Recherche dans un document HTML

La recherche et l'accès aux documents comportent de nombreux aspects : repérage de mots-clés et de leurs variantes, repérage de paragraphes, constitution de tables exploitables en recherche... etc. L'exercice en donne un aperçu, en se limitant à une analyse structurelle minimale, l'extraction de descriptions de "paragraphes" (selon un format de document particulier), la génération de code HTML permettant ensuite de visualiser les paragraphes par surbrillance HTML + Javascript.

Objectif de l'exercice

L'objectif de cet exercice est est l'analyse de fichier HTML pour générer du code permettant des surbrillances ; en bonus il est aussi possible de vérifier la structure HTML. L'exemple concerne des conseils d'utilisation Windows (d'après «SOS PC», éditions Le Titan). Dans cet exercice, nous vous proposons deux extraits concernant la manipulation de la barre des tâches:

doc1-Short.htm: extrait court (voir le source)
doc1-Full.htm: extrait long (voir le source)

1 - Analyseur lexical seul (7 points)

Mettre au point un analyseur lexical lex1.flex reconnaissant les deux fichiers en définissant les macros suivantes :

les balises HTML simples (OP pour open et CL pour close) :
- HTML_OP, HTML_CL pour <html> et </html>
- HEAD_OP, HEAD_CL pour <head> et </head>
- BODY_OP, BODY_CL pour <body> et </body>
- PRE_OP, PRE_CL pour <pre> et </pre>
- I_OP, I_CL pour <i> et </i>
- P_OP, P_CL pour <p> et </p>
- BR pour <br>
les espaces et le texte :
- SPS pour espace(s) ou tabulation(s)
- NL pour un newline, à définir comme \r\n ou \r ou \n (pour traiter les différences Windows/Linux/Mac)
- PURE_TEXT pour du texte pur, sans balise HTML. Hypothèse simplificatrice : considérer qu'il suffit de ne pas avoir de caractère '<' (mais autoriser les '>' pour accepter par exemple des renvois comme "=>")
des balises plus élaborées :
- H_OP, H_CL pour <hX> </hX>, avec X = 1,... 5
- LINK pour la balise link (à la fois ouvrante et fermante) telle que:
```
<link rel="stylesheet" href="divColors.css" type="text/css"/>
  
```
  Hypothèse simplificatrice : on ne distingue pas les différents attributs de cette balise.
- SCRIPT_OP et SCRIPT_CL pour la balise script telle que:
```
<script type="text/javascript" src="HL.js"></script> 
  
```
  Hypothèse simplificatrice : on ne distingue pas les différents attributs de cette balise.
les «autres» balises, c'est-à-dire les balises non traitées jusqu'ici
- OTHERTAG_OP, OTHERTAG_CL permettant de récupérer toutes les balises non traitées jusqu'ici
les balises ancres:
- AH_OP pour l'ouverture d'une balise de lien de type <a href=...>
- AN_OP pour l'ouverture d'une balise d'ancre nommée de type <a name="..." >
- A_CL pour la fermeture d'une balise ancre : </a>
les balises «division»:
- CDIV_OP pour l'ouverture d'une balise «division coloree» de type <div class="...">. Hypothèse simplificatrice : on ne récupère pas la couleur.
- DIV_OP pour l'ouverture de d'une balise division (non colorée) : <div...>. Hypothèse simplificatrice : on ne récupère pas les valeurs des attributs.
- DIV_CL pour la fermeture d'une balise de division : </div>

Indications

Chaque macro doit permettre de traiter les balises en minuscules et/ou majuscules.
Hypothèse simplificatrice : on ne récupère pas ici les valeurs des attributs des balises.
Imprimer chaque unité lexicale reconnue (pour vérification) au moyen d'une fonction auxiliaire incluse dans le prologue
Implanter une règle-balai affichant tout caractère inattendu en entrée.

Corrigé

lex1.flex

2 - Mise au point d'une grammaire minimale avec passage de valeurs et traitement d'erreur (7 points)

Mettre au point un analyseur lex2.flex, gram2.bison définissant les catégories lexicales correspondant à celles reconnues dans la question précédente.

La grammaire doit contenir deux règles :

une règle Text (texte acceptable en entrée) permettant de reconnaître une suite de LexUnit,
une règle LexUnit permettant de reconnaître chacune des catégories lexicales définies ci-dessus.

Indications

Au niveau lexical
- ne pas retourner SPS et NL au niveau syntaxique
- aucune impression ne sera faite au niveau lexical
- les caractères inattendus doivent être retournés à l'analyseur syntaxique
- la grammaire ne doit générer aucun conflit de type réduction/réduction ou de type décalage/réduction entre les règles.
Au niveau syntaxique
- pour chaque catégorie lexicale reçue, faire, au niveau syntaxique, une impression de vérification caractéristique.
- les catégories lexicales OTHERTAG_OP et OTHERTAG_CL sont considérées comme des erreurs au niveau syntaxique
- traitez les cas d'erreur: l'analyseur doit afficher un message, le plus explicite possible et continuer.
Test de la récupération sur erreur: fournissez le fichier doc-erreurs.htm contenant des erreurs.

Corrigé

3 - Génération d'un menu déroulant

Le nombre de conseils contenus dans le fichier HTML peut être très grand. Le but de cette partie est de générer un menu déroulant permettant de surligner en couleur le sujet sélectionné. La structure proposée est composée de trois fichiers:

index.htm permettant d'afficher deux fichiers HTML dans deux frames différentes
control.htm affiché en partie gauche, contenant le menu déroulant (voir le source)
doc1-Short.htm affiché en partie droite, contenant l'extrait court traité dans les questions précédentes

L'objectif de cette partie est de générer le contenu de la balise select dans le fichier control.htm.

3.1 - Reconnaissance des ancres et des divisions colorées (4 points)

Afin de générer le menu déroulant, il faut reconnaître les noms des ancres nommées et les insérer dans le menu déroulant. Dans cette partie, on se focalisera sur le traitement des ancres nommées, seules, ou contenues dans des divisions colorées pour récupérer les noms d'ancres.

Créez l'analyseur lex3.flex, gram3.bison reconnaissant les règles suivantes:

NamedAnchor : pour reconnaître les ancres nommées
```
<a name="bTachesZonesIcones">BARRE DES TACHES, ZONES, ICONES</a>
```
l'analyseur lexical devra passer la valeur de l'attribut name au niveau syntaxique.
ColoredDiv : pour reconnaître une portion délimitée par une balise ouvrante telle que <div class="Orange0" id="0"> et une balise fermante </div>. l'analyseur lexical devra passer la valeur de l'attribut id au niveau syntaxique.

Indications

Au niveau lexical

créez une nouvelle catégorie lexicale GEN_TEXT reconnaissant du texte généralisé, c'est-à-dire un motif constitué de texte pur et aussi:
- toutes les balises reconnues précédemment sauf celles correspondant aux catégories utiles pour la reconnaissance d'ancres nommées et de divisions colorées
- la catégorie lexicale GEN_TEXT permettra donc de reconnaître les balises HTML, HEAD, BODY, PRE, I, P, BR, H, LINK, SCRIPT...
- Attention: un motif constitué uniquement de SPS et NL n'est pas considéré comme du GEN_TEXT
supprimez alors toutes les catégories lexicales devenues inutiles
aucune impression ne sera faite au niveau lexical
les balises ancres et division devront être reconnues ainsi que les catégories lexicales nécessaires pour récupérer les valeurs des attributs name et id

Au niveau syntaxique

affichez les valeurs des attributs name et id au niveau syntaxique
les caractères inattendus doivent être retournés à l'analyseur syntaxique
la grammaire ne doit générer aucun conflit de type réduction/réduction ou de type décalage/réduction entre les règles.

Corrigé

La plupart d'entre vous sont partis sur une solution plus simple et probablement meilleure, consistant à reconnaître au niveau lexical AN_OP et à ne transmettre au niveau syntaxique que la valeur de l'attribut name, en faisant côté lexical une fonction récupérant directement la valeur de cet attribut. La grammaire est alors beaucoup plus simple puisqu'il n'y a pas à décrire la syntaxe des attributs.

3.2 - Enregistrement des ancres nommées (2 points)

Complétez l'analyseur précédent pour générer à partir des noms des ancres nommées le menu déroulant. Supposons que le fichier initial contienne les ancres nommées suivantes:

      <a name="nom1">Titre 1</a>
      <a name="nom2">Titre 2</a>
      <a name="nom3">Titre 3</a>
      <a name="nom4">Titre 4</a>

Le résultat de l'analyseur devra être :

      <option value="-1">nom1</option>
      <option value="-1">nom2</option>
      <option value="-1">nom3</option>
      <option value="-1">nom4</option>

Pour l'instant toutes les valeurs de l'attribut value seront égales à -1.

Corrigé

3.3 - Récupération des divisions colorées (bonus)

Complétez l'analyseur précédent pour récupérer à partir des valeurs des divisions colorées, la valeur du menu déroulant. Si une ancre nommée fait partie d'une ColoredDiv, enregistrez l'ancre avec la valeur d'attribut id de la division. Supposons que le fichier initial contienne les ancres nommées suivantes:

<div class="Orange0" id="1">
...
      <a name="nom1">Titre 1</a>
...
</div>
<div class="Yellow0" id="2">
...
      <a name="nom2">Titre 2</a>
...
</div>
<div class="Yellow0" id="3">
...
      <a name="nom3">Titre 3</a>
...
</div>
<div class="Lime0" id="4">
...
      <a name="nom4">Titre 4</a>
...
</div>

Le résultat de l'analyseur devra être :

      <option value="1">nom1</option>
      <option value="2">nom2</option>
      <option value="3">nom3</option>
      <option value="4">nom4</option>

Corrigé

3.4 - Test du résultat obtenu (bonus)

Testez votre analyseur sur doc1-Full.htm. Créez le fichier controlFull.htm obtenir à partir du fichier control.htm apèrs insertion du résultat de votre analyseur dans le corps de la balise select. Créez le fichier indexFull.htm obtenu à partir du fichier index.htm en modifiant les noms des fichiers ouverts dans chacune des frames. Ouvrez ce dernier fichier dans votre navigateur et testez.

Corrigé

Un petit jeu de test
- index-doc2.html
- le répertoire datatest
Test sur doc1-Full.htm
- indexFull.html

CSC 4508, Télécom SudParis, INF, F. MEUNIER, F. SILBER-CHAUSSUMIER

Last modified: Fri May 18 17:24:47 CEST 2012