Naciśnij “Enter” aby skoczyć do treści

Wstęp do automatycznego scrapingu danych – HTML i CSS

Analityk OSINT nie musi być programistą, ale warto aby niektóre informacje dotyczące chociażby budowy stron internetowych nie były mu obce. Jednym z elementów analizy źródeł otwartych jest pozyskiwanie danych. Może ono się odbywać na różne sposoby – poprzez przeszukiwanie baz, albo eksplorację wyszukiwarek (sprawdź naszą odpowiedź na pytanie czy istnieje świat poza Google?).

Świat OSINT to niemierzalne zasoby stron internetowych, baz danych, mediów społecznościowych i innych źródeł otwartych. Ich analiza – w dobie zalewu informacyjnego – wymaga zorganizowanych metod. Jedną z nich jest WEB SCRAPING, którzy przydaje się na każdym etapie prowadzonego rozpoznania. Pod pojęciem scrapingu mieści się szereg działań i metod zmierzających do zautomatyzowanego pobierania danych i zapisu ich w formie ustrukturalizowanej – przystępnej do dalszej analizy.

Komu przyda się umiejętność web scraping’u?

Zastosowań technik scrapingu jest wiele – od śledczych, aż po marketingowe i czysto komercyjne. Przede wszystkim:

  • firmy mogą pobierać informacje o produktach swojej konkurencji,
  • można pobierać informacje o potencjalnych klientach (osoby fizyczne lub inne firmy),
  • scraping pozwala na porównywanie danych w celu znalezienia najlepszej oferty (tak działa np. ceneo.pl),
  • portale agregujące oferty o prace mogą pobierać informacje o nowych ofertach pracy z innych źródeł,
  • portale o nieruchomościach mogą pobierać dane o nowo powstałych projektach inwestycyjnych,
  • scraping jest metodą na gromadzenie wiedzy w wewnętrznej, prywatnej bazie danych,
  • wiele, wiele więcej!

Struktura strony internetowej a scraping danych

Aby dobrze zrozumieć działanie scraperów powinniśmy poznać strukturę kodu stron internetowych. HTML nie jest językiem programowania, a językiem znaczników (ang. markup language). HTML składa się z serii znaczników (tagów), których używa się do zamknięcia, opakowania różnych części treści, tak aby wyglądały i/lub działały w określony sposób. Z pomocą tagów możesz ze słów czy obrazów zrobić linki do innych stron, sprawić by były napisane kursywą, większą czcionką itp. CSS natomiast to język, który służy do opisu warstwy prezentacji (wyglądu) stron internetowych, w tym kolorów, układu i czcionek. Umożliwia dostosowanie prezentacji do różnych typów urządzeń i technologii, np. telefonów czy wydruków. 

To właśnie znaczniki HTML oraz ich klasy CSS będą dla nas najistotniejsze w zakresie scrapingu danych. Zobaczmy poniższy fragment kodu HTML:

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<p>This is some text.</p>
<br>

<h2>This is heading 2</h2>
<p>This is some other text.</p>
<br>

<h2>This is heading 2</h2>
<p>This is some other text.</p>

</body>
</html>

Jego bliższa analiza pokazuje, że mamy tu jeden nagłówek w tagu <h1> oraz dwa w tagu <h2>. W kodzie widać także tag <p>, który oznacza paragraf. Znacznik <br> to nic innego jak ENTER. Całość kodu zamknięta jest w znaczniku <body>, informującym nas, że jest to główna treść naszej strony internetowej. Skopiowanie tego kodu do notatnika i zapisanie w formacie .HTML wygeneruje taki wygląd strony internetowej:

Każdy z tagów może mieć dodatkową KLASĘ (class) lub ID, np.:

<h2>This is heading 2</h2>
<p id="paragraph2">This is some other text.</p>

Klasy oraz ID pozwalają w kodzie CSS odwoływać się do konkretnych tagów HTML i zmieniać ich wygląd. Pozwalają także jeszcze precyzyjniej definiować elementy na stronie internetowej, ponieważ mogą znajdować się na niej setki nagłówków <h1>, a nas będzie interesować każdy, który ma klasę class=”wazny_naglowek”.

Jak badać stronę internetową do scraping’u?

Każda strona internetowa dzięki przeglądarce może być przez nas dokładnie zbadana pod względem jej struktury. Badanie to polega na odpaleniu narzędzi developerskich (np. w BRAVE oraz Chrome wciskamy na klawiaturze F12).

Widok Devtools w przeglądarce CHROME

Następnie klikamy pierwszą po lewo ikonę w pasku narzędzi developerskich, która kiedy jest aktywna pozwala nam na interpretację struktury strony internetowej. Po kliknięciu na wybrany element widzimy, że każdy tytuł artykułu na OSINTQUEST.PL zbudowany jest ze znacznika <h2> o klasie post-title. Oznacza to, że jeśli chcemy automatycznie pobrać wszystkie tytuły artykułów z OSINT Quest to właśnie tak powinniśmy precyzyjnie skonfigurować nasz scraper.

Z góry przepraszamy – w szczególności wszystkich programistów Front End – za uproszczenie zagadnień związanych z layoutem stron WWW, ale na potrzeby udostępnienia wiedzy naszym czytelnikom takie założenia i opis są w zupełności wystarczające i nie komplikują niepotrzebnie całego zagadnienia.

Umiem i rozumiem, ale co dalej? Kiedy scraping?

Teraz podejścia są dwa – dla tych, którzy umieją programować i znają np. język backendowy Python oraz dla tych, którzy nie specjalizują się w kodowaniu, a i tak chcą pobierać automatycznie dane z Internetu. Pierwsi powinni usiąść przed komputerem i poświęcić kilka dłuższych chwil na:

  1. Znalezienie właściwego targetu (adresu URL do scrapingu);
  2. Poznanie struktury kodu strony www;
  3. Przygotować środowisko do pracy (np. Python);
  4. Napisać kod;
  5. Przygotować filtrowanie tekstu.

Ci, którzy chcą spróbować innych – przystępniejszych metod muszą uzbroić się w cierpliwość. Już w kolejnym artykule pokażemy jak zbudować prosty scraper w oparciu o powszechnie dostępny plugin przeglądarkowy.

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *