Récupérer la liste des plus belles actrices françaises

Il y a quelque temps de ça, j’ai réalisé une vidéo où je proposais aussi de récupérer la liste des plus belles femmes monde.

Je vous invite à la regarder !

À l’époque j’essayais une nouvelle technique de story telling, et la vidéo prend son temps avant d’amener le sujet, donc je me suis dit que ce serait sympa de refaire la même sur le blog, et d’approfondir le sujet des sites qui font ce type de top.

En réalité ce genre de top n’a que pour seul intérêt de capter votre attention pour vous gaver en publicités.

En soi c’est normal, toute entreprise a besoin de vivre ! Mais la publicité sur internet ne rapporte pas tant d’argent que ça. Et avec les bloqueurs de publicité, ça ne s’est pas arrangé. Donc les sites médias abusent de plus en plus.

Et quand j’ai envie de trouver la femme de ma vie en regardant qu’elles sont les plus belles actrices au monde, ou en France tout au moins, et bien je n’aime trop que ma navigation soit obstrué par tout un tas de publicités.

Donc dans vidéo le top est sur viepratique.fr , là mon top sur les belles actrices françaises de tous les temps est sur Marie France. On pourrait donc penser que niveau pub c’est moins grave, mais non !
Je vous invite à vérifier :

https://www.mariefrance.fr/culture/george-ryan-et-moi/plus-belles-actrices-francaises-de-temps-442764.htm

Il y a tellement de pubs qui se chargent, que cela ralentit mon ordinateur !

Pour faire, j’ai réalisé une analyse du code sur la console et l’inspecteur de code (pour y accéder faite F12 sur Chrome).

Je me suis donné 2 objectifs :

  • Obtenir la liste des actrices.
  • Obtenir la liste de l’url des photos.

Idéalement il faudrait que la photo soit raccordé à l’actrice, mais la structure du site rend le raccordement quelque peu compliqué.

Voici comment j’ai fait pour obtenir la liste des noms :

const actricesList = document.querySelectorAll('figcaption ul li');
let actrices = [];
actricesList.forEach(element => actrices.push(element.querySelector('.legend_title').textContent));
console.log(actrices);

En gros les actrices sont contenu dans une liste à puces. Je récupère donc un tableau dans lequel il y a chacune des puces. Et dans ces puces, il y a un élément de classe legend_title qui contient le nom de l’actrice.

Voici ce que cela donne :

  1. Léa Seydoux
  2. Isabelle Adjani
  3. Leïla Bekhti
  4. Laetitia Casta
  5. Bérénice Bejo
  6. Jeanne Moreau
  7. Aïssa Maïga
  8. Danielle Darrieux
  9. Marion Cotillard
  10. Sophie Marceau
  11. Sara Forestier
  12. Audrey Tautou
  13. Catherine Deneuve
  14. Isabelle Huppert
  15. Emmanuelle Riva
  16. Sara Martins
  17. Mélanie Laurent
  18. Brigitte Bardot
  19. Adèle Exarchopoulos
  20. Josiane Balasko
  21. Anny Duperey
  22. Nadège Beausson Diagne
  23. Juliette Binoche
  24. Elvire Popesco
  25. Mireille Darc

Dans ma vidéo je m’étais contenté de la liste des noms. Une des raisons, c’est que la récupération des urls des photos c’est une autre pair de manche.

En soi il faut simuler l’appui sur le bouton suivant.

Et en soit c’est simple. Il suffit de récupérer la div, et de lancer l’événement click qui se simule via une fonction native :

const next = document.querySelector('.arrow_next');
next.click();

Le problème c’est qu’il y a des protections. Voici ce qu’il se passe avec le script complet ci-dessous :

let imagesList = [];

function getImagesUrl() {
  const image = document.querySelector('figure img');
  imagesList.push(image.src);
  const next = document.querySelector('.arrow_next');
  next.click();
}

for (let i = 0; i < actrices.length; i++) {
  getImagesUrl();
}

console.log(imagesList);

J’ai l’erreur suivante qui s’affiche dans la console, et la liste des urls contient 25 fois la premières url :

J’ai donc imaginé qu’il fallait simuler une latence entre chaque clique suivant. Pour cela il y a setTimeout, mais de même il y a des protections native à Chrome qui empêche une utilisation optimale. J’ai donc décidé de créer une fonction sleep :

function sleep(milliseconds) {
  const date = Date.now();
  let currentDate = null;
  do {
    currentDate = Date.now();
  } while (currentDate - date < milliseconds);
}

Ainsi je pensais qu’appeler la fonction comme cela fonctionnerait (avec une pause de 6 secondes entre chaque appel de fonction) :

for (let i = 0; i < actrices.length; i++) {
  getImagesUrl();
  sleep(6000);
}

Mais non ! Toujours la même erreur ! En faite, après avoir fait quelques recherches j’ai trouvé qu’il y a une protection sur Chrome qui empêche le fait de pompé de la données. C’est le Cross-Origin Read Blocking (CORB).

Donc étant donné qu’il n’y a que 25 images, je me suis résolu à réaliser une action manuelle ! Tout d’abord je déclare la fonction ainsi que le tableau :

let imagesList = [];
function getImagesUrl() {
  const image = document.querySelector('figure img');
  imagesList.push(image.src);
  const next = document.querySelector('.arrow_next');
  next.click();
}

Et puis ensuite je lance manuellement pour chaque nouvelle image :

getImagesUrl();
console.log(imagesList);

Et puis à la fin je récupère le contenu de mon tableau imagesList.

Et bon on ne va pas se quitter sans montrer comment exploiter ce qu’on vient de récupérer.

Voici une petite app web montrant comment mettre forme ce qu’on vient de récupérer.

Pour cela j’ai réalisé une petite page html :

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Les actrices françaises les plus belles de tous les temps</title>
</head>
<body>
  <h1>Les actrices françaises les plus belles de tous les temps</h1>
  <div class="container"></div>

  <script src="data.js"></script>
  <script src="index.js"></script>
</body>
</html>

Comme on le voit les données sont rangées dans data.js :

const actrices = [
  {
    name: "Léa Seydoux",
    url: "https://sf2.viepratique.fr/wp-content/uploads/sites/5/2018/12/gettyimages-958932890-720x410.jpg",
  },
  {
    name: "Isabelle Adjani",
    url: "https://sf2.viepratique.fr/wp-content/uploads/sites/5/2018/12/gettyimages-949070172-748x410.jpg",
  },
  {
    name: "Leïla Bekhti",
    url: "https://sf1.viepratique.fr/wp-content/uploads/sites/5/2018/12/gettyimages-1025662768-743x410.jpg",
  },
  {
    name: "Laetitia Casta",
    url: "https://sf1.viepratique.fr/wp-content/uploads/sites/5/2018/12/gettyimages-1038013490-724x410.jpg",
  },
  {
    name: "Bérénice Bejo",
    url: "https://sf2.viepratique.fr/wp-content/uploads/sites/5/2018/12/gettyimages-842002428-722x410.jpg",
  },
  {
    name: "Jeanne Moreau",
    url: "https://sf2.viepratique.fr/wp-content/uploads/sites/5/2018/12/gettyimages-141563506-715x410.jpg",
  },
  {
    name: "Aïssa Maïga",
    url: "https://sf2.viepratique.fr/wp-content/uploads/sites/5/2018/12/gettyimages-959235902-712x410.jpg",
  },
  {
    name: "Danielle Darrieux",
    url: "https://sf2.viepratique.fr/wp-content/uploads/sites/5/2018/12/gettyimages-607381682-729x410.jpg",
  },
  {
    name: "Marion Cotillard",
    url: "https://sf2.viepratique.fr/wp-content/uploads/sites/5/2018/12/gettyimages-957906390-730x410.jpg",
  },
  {
    name: "Sophie Marceau",
    url: "https://sf2.viepratique.fr/wp-content/uploads/sites/5/2018/12/gettyimages-475517086-722x410.jpg",
  },
  {
    name: "Sara Forestier",
    url: "https://sf2.viepratique.fr/wp-content/uploads/sites/5/2018/12/gettyimages-161599105-743x410.jpg",
  },
  {
    name: "Audrey Tautou",
    url: "https://sf2.viepratique.fr/wp-content/uploads/sites/5/2018/12/gettyimages-463430520-724x410.jpg",
  },
  {
    name: "Catherine Deneuve",
    url: "https://sf2.viepratique.fr/wp-content/uploads/sites/5/2018/12/gettyimages-948070438-677x410.jpg",
  },
  {
    name: "Isabelle Huppert",
    url: "https://sf1.viepratique.fr/wp-content/uploads/sites/5/2018/12/gettyimages-1059217110-689x410.jpg",
  },
  {
    name: "Emmanuelle Riva",
    url: "https://sf2.viepratique.fr/wp-content/uploads/sites/5/2018/12/gettyimages-104422453-725x410.jpg",
  },
  {
    name: "Sara Martins",
    url: "https://sf1.viepratique.fr/wp-content/uploads/sites/5/2018/12/258bcbfb2f0ebad5b698a687c1c89924-273x410.jpg",
  },
  {
    name: "Mélanie Laurent",
    url: "https://sf1.viepratique.fr/wp-content/uploads/sites/5/2018/12/gettyimages-1017902128-737x410.jpg",
  },
  {
    name: "Brigitte Bardot",
    url: "https://sf2.viepratique.fr/wp-content/uploads/sites/5/2018/12/gettyimages-607394542-730x410.jpg",
  },
  {
    name: "Adèle Exarchopoulos",
    url: "https://sf2.viepratique.fr/wp-content/uploads/sites/5/2018/12/gettyimages-844196902-707x410.jpg",
  },
  {
    name: "Josiane Balasko",
    url: "https://sf2.viepratique.fr/wp-content/uploads/sites/5/2018/12/gettyimages-468927460-679x410.jpg",
  },
  {
    name: "Anny Duperey",
    url: "https://sf2.viepratique.fr/wp-content/uploads/sites/5/2018/12/gettyimages-948311684-709x410.jpg",
  },
  {
    name: "Nadège Beausson Diagne",
    url: "https://sf2.viepratique.fr/wp-content/uploads/sites/5/2018/12/gettyimages-959239178-679x410.jpg",
  },
  {
    name: "Juliette Binoche",
    url: "https://sf1.viepratique.fr/wp-content/uploads/sites/5/2018/12/gettyimages-1042005258-750x410.jpg",
  },
  {
    name: "Elvire Popesco",
    url: "https://sf2.viepratique.fr/wp-content/uploads/sites/5/2018/12/220px-elvira_popescu_greyscaled.jpg"
  },
  {
    name: "Mireille Darc",
    url: "#"
  }
];

Je dois vous avouer que j’ai du remplir ce fichier manuellement. L’idéal aurait été de créer ce fichier de façon automatique. Aussi, je n’ai pas eu la dernière image de Mireille Darc, car je me suis arrêté quand j’ai vu 25/25. Mais il fallait que je fasse un dernier max. Enfin bon !

Après je structure les données dans différents blocs que je vais présenter via le css :

body {
  background-color: #333333;
  color: aliceblue;
  text-align: center;
  margin: auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.actrice-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 40vw;
  height: 200px;
  border-radius: 15px;
  border: 4px solid #BB2233;
  box-shadow: 3px 4px 7px #BB2233;
  padding: 20px;
  margin-left: 15px;
  margin-bottom: 20px;
}

.actrice-name {
  font-size: 2.5em;
}

.actrice-image {
  width: 45%;
  object-fit: fill;
  border-radius: 15px;
  box-shadow: 4px 4px 8px black;
}

Les classes actrice-container, actrice-name, actrice-image n’existent pas. Donc on va les créer dans notre script index.js.

const container = document.querySelector('.container');
actrices.forEach(actrice => {
  const actriceContainer = document.createElement('div');
  actriceContainer.classList.add('actrice-container');

  const actriceName = document.createElement('h3');
  actriceName.classList.add('actrice-name');
  actriceName.textContent = actrice.name;

  const actriceImage = document.createElement('img');
  actriceImage.classList.add('actrice-image');
  actriceImage.setAttribute('src', actrice.url);

  actriceContainer.appendChild(actriceName);
  actriceContainer.appendChild(actriceImage);
  container.appendChild(actriceContainer);
});

On crée les éléments, on leur ajoute la données appropriées et puis on les raccorde à leur élément parent.

Voilà ! On a récupérer les données d’un site, et on les a exploités sur un autre site.

Bien évidemment il ne faut faire cela qu’à titre d’exercice. J’ai réalisé cela pour m’entraîner, car c’est une façon ludique de pratiquer.

Il faut avoir en tête que toutes exploitations commerciales de données ne vous appartenant pas vous expose à des poursuites judiciaires.

Donc amusez vous bien, mais n’abusez pas !

Pour marque-pages : Permaliens.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *