Découpage des articles d’une page web

Cette méthode est à utiliser si vous voulez récupérer des articles listés sur une page donnée, mais qu’aucun flux RSS n’est disponible spécifiquement pour récupérer ces articles. Cela peut par exemple être la liste des derniers communiqués de presse d’une entreprise, les dernières actualités, les derniers articles d’une rubrique d’un site média… On ne surveille donc pas complètement la page où se trouve cette liste, mais une partie des informations liées à cette page.

Le paramétrage de cette méthode suit le principe suivant :

• Sur la page, on va définir des éléments qui constitueront chacun un article, grâce à la définition d’un sélecteur CSS3.
• D’autres sélecteurs CSS3, définis à partir de chaque élément, seront à saisir pour récupérer un lien web qui sera l’URL unique de l’article, un titre, et optionnellement une description et une date.

Cela nécessite donc une maîtrise de la syntaxe CSS3. Afin de simplifier la saisie, il est possible d’utiliser

Restriction des zones à surveiller pour éviter le bruit

Cela nécessite donc une maîtrise de la syntaxe CSS3. Afin de simplifier la saisie, il est possible d’utiliser l’interface de paramétrage visuel en cliquant sur le bouton :

Paramétrage visuel

Quelques secondes après avoir cliqué sur le bouton de paramétrage visuel, une nouvelle fenêtre de navigateur s’ouvre avec une interprétation de la page telle que vue par Scan. Il se peut qu’il y ait quelques petites différences avec la page originale telle que vous la verriez depuis votre navigateur. En cas de non affichage de la page, vous pourrez activer l’option Selenium.

Menu de la fenêtre de paramétrage visuel

La fenêtre de paramétrage visuel affiche le nombre de zones sélectionnées, ainsi que 5 boutons :

• Le premier bouton vous permettra de valider les zones sélectionnées et de calculer automatiquement les sélecteurs CSS3 du flux. Cliquer sur le bouton fermera la fenêtre de paramétrage visuel.
• Le second bouton permet de sélectionner les zones similaires à celles que vous avez déjà sélectionnées.
• Le troisième bouton permettra, si besoin, d’afficher les éléments cachés (tels que des menus, des zones affichées en accordéon…). À noter que cette action n’est pas réversible, et que l’affichage général de la page peut être perturbé.
• Le quatrième bouton effacera toutes les sélections effectuées.
• Le dernier bouton annulera le paramétrage visuel et fermera la fenêtre.

Sélection des éléments à récupérer

Une fois la fenêtre ouverte, vous aurez la possibilité de sélectionner un ou plusieurs éléments dans la page, qui constitueront chacun un article.

En déplaçant la souris, vous remarquerez que des zones sont mises en valeur par une bordure de pointillés verts.

En cliquant avec le bouton gauche de votre souris, la zone active aura une bordure de pointillés bleus et sera considérée comme un élément. Vous pouvez sélectionner plusieurs zones sur la page si besoin. Si la structure HTML de la page le permet, un titre sera mis en valeur (soulignement en vert) ainsi qu’une description (soulignement en saumon). À noter que la sélection de l’élément est « intelligente » : étant donné qu’il est impératif qu’un élément ait un lien web valide qui servira d’URL de l’article, la zone de l’élément peut être plus large que la zone que vous avez cliqué afin de trouver le nœud-parent le plus proche contenant au moins un lien web.

Un clic avec le bouton gauche de la souris permet non seulement de définir un élément, mais aussi – si possible – un lien, un titre et une description. Vous pouvez corriger les zones de titres en combinant une touche de votre clavier avec un clic gauche :

• Ctrl + clic gauche : sélection ou désélection d’un titre (soulignement en vert)
• Alt + clic gauche : sélection ou désélection d’une zone de description (soulignement en saumon).

À noter qu’il est possible de définir plusieurs zones de description dans un même élément – les valeurs textes seront alors concaténées.

Si vous cliquez de nouveau sur un élément que vous aviez sélectionné, l’élément est alors désélectionné et les soulignements du titre et de la description de cet élément disparaissent.

Définition de zones à ne pas prendre en compte : les nœuds-bruits

Le paramétrage visuel vous permet de bien définir les éléments. Néanmoins, la définition des descriptions dans un élément peut rapporter du bruit (étiquettes, catégories…). Si vous jugez que des éléments d’une zone de description sélectionnée contiennent des informations inintéressantes, il vous est possible d’indiquer ces éléments comme « nœuds-bruits ». Pour cela, il vous suffit de survoler la zone en question (qui sera entourée d’une bordure de pointillés verts) et de cliquer sur le bouton droit de votre souris. À noter qu’il est possible d’annuler cette action en re-cliquant avec le bouton droit sur cette même zone.

Dissimulation de nœuds HTML gênants

Il se peut qu’il apparaisse sur la page des éléments qui se retrouvent au-dessus du contenu que vous voulez sélectionner (une boîte de dialogue vous demandant d’accepter les cookies par exemple, ou des éléments de menus précédemment cachés mais révélés par le bouton d’affichage des éléments cachés). Il vous est possible de dissimuler ces éléments en appuyant sur la touche Ctrl de votre clavier et en cliquant avec le bouton droit de votre souris. À noter que cette action est irréversible pour la durée de session de paramétrage visuel – si vous avez dissimulé un nœud HTML par erreur, il vous faudra soit annuler le paramétrage en cliquant sur le bouton correspondant, soit valider votre paramétrage et relancer une nouvelle session de paramétrage visuel.

Validation des zones sélectionnées

Le menu Scan en bas de la fenêtre vous indique dans sa zone centrale le nombre d’éléments sélectionnés. Cliquez sur le premier bouton « tick » pour valider votre sélection et remplir les cinq champs « Sélecteur CSS3 vers les éléments », « Sélecteur CSS3 vers les liens », « Sélecteur CSS3 vers les titres », et si indiqués « Sélecteur CSS3 vers les descriptions » et « Sélecteur CSS3 de nœuds-bruits à supprimer avant traitement ».

Les sélecteurs sont générés automatiquement, de façon la plus optimale possible. Il faut noter qu’il est fort probable que saisir manuellement des sélecteurs les rende plus efficaces (en utilisant notamment les classes et les ids des nœuds HTML) mais cela vous nécessiterait de maîtriser la syntaxe des sélecteurs CSS3.

Options avancées du paramétrage manuel

Le paramétrage visuel permet de définir les règles essentielles pour récupérer les articles. Le paramétrage manuel du flux donne accès à des options permettant d’être encore plus précis – mais cela reste inutile dans la majorité des cas. Voici un récapitulatif de ces options.

Code HTML pouvant distinguer deux éléments dans un même élément

Il peut arriver que la page HTML soit mal structurée, mais qu’une balise HTML (une ligne <hr> par exemple) sépare chaque élément dans la page. Ce champ permet de découper la zone définie dans le champ « Sélecteur CSS3 vers les éléments » en plusieurs sous-éléments qui seront considérés chacun comme des articles.

Si vous êtes dans ce cas, il est préférable de contacter le support.

Nombre maximum d’éléments à traiter

Si la page contient des dizaines d’articles mais qu’il n’y a que cinq articles ajoutés par jour, il est préférable – pour des raisons de performance générale de Scan – de restreindre le nombre d’éléments à traiter. Ce paramètre permet ainsi de ne prendre en compte que les N premiers éléments trouvés sur la page.

Paramètres d’expression régulière de correction des liens

Ces deux champs sont des paramètres avancés permettant de corriger des liens ayant des informations inutiles. Le premier paramètre définit le pattern de l’expression régulière, le second paramètre définit la règle de remplacement. Ces paramètres nécessitent une maîtrise des règles d’expression régulière – si vous avez des soucis avec les liens récupérés, contactez le support.

Code HTML à partir duquel on lira la page

Ce paramètre permet de définir à partir de quelle zone on traitera la page, ignorant le code HTML se trouvant au-dessus du code HTML saisi dans le champ.

URL d’une page à charger avant import

Dans des cas problématiques, il peut être utile de demander à Scan d’ouvrir une page avant de se rendre sur la page surveillée, afin de récupérer un cookie de session par exemple. Ce champ permet de définir l’URL de la page à ouvrir.