Introduzione
Quando si configurano le fonti in Telematic.pro, la corretta configurazione dei selettori CSS svolge un ruolo importante. Essi consentono di:
- Estrarre i link agli articoli dalla pagina principale del sito.
- Trovare ed eseguire il parsing del contenuto principale all'interno di ogni articolo.
- Escludere gli elementi non necessari (ad esempio pubblicità, footer, menu laterali).
Per un parsing efficace è necessario saper individuare i selettori corretti utilizzando gli Strumenti per sviluppatori del browser. In questo articolo vedremo come fare.
Utilizzo degli Strumenti per sviluppatori per trovare i selettori
1. Apertura degli Strumenti per sviluppatori
Nel browser Google Chrome o Firefox, premere F12 o Ctrl + Shift + I (su Mac: Cmd + Option + I) per aprire gli Strumenti per sviluppatori (DevTools).
2. Individuazione del selettore dei link
Supponiamo di voler estrarre i link agli articoli dalla pagina principale del blog "https://example.com/news".
- Aprire gli Strumenti per sviluppatori e selezionare la scheda Elements.
- Posizionare il cursore sul titolo dell'articolo e fare clic con il tasto destro su Inspect (Ispeziona elemento).
- Nel codice della pagina individuare il tag
<a>più vicino che contiene il link all'articolo. - Controllare le relative classi, l'ID o altri attributi.
- Per copiare un selettore già pronto, fare clic con il tasto destro sull'elemento → Copy → Copy selector.
Esempio di codice HTML:
<article class="news-item">
<a href="/news/article-123" class="news-link">Titolo dell'articolo</a>
</article>
Il selettore CSS dei link sarà quindi:
.news-item .news-link
In Telematic.pro, indicare questo selettore nel campo Selettore CSS dei link.
3. Individuazione del selettore del contenuto
Dopo aver ottenuto l'elenco dei link, il sistema accede a ogni articolo ed estrae il contenuto. È necessario indicare dove si trova.
- Aprire gli Strumenti per sviluppatori nella pagina dell'articolo.
- Individuare il contenitore principale con il testo (di solito un
<div>,<article>o<section>). - Controllare le relative classi o l'ID.
- Selezionare il contenitore desiderato, fare clic con il tasto destro → Copy → Copy selector per ottenere rapidamente il selettore CSS.
Esempio di codice HTML:
<article class="article-content">
<h1>Titolo dell'articolo</h1>
<p>Testo dell'articolo...</p>
</article>
Il selettore CSS del contenuto:
.article-content
Indicarlo in Telematic.pro nel campo Selettore CSS del contenuto.
4. Esclusione degli elementi non necessari
A volte nell'articolo vengono inclusi elementi superflui: blocchi pubblicitari, pulsanti dei social network, link ad altri contenuti.
- Utilizzare gli Strumenti per sviluppatori per individuare il codice HTML degli elementi non necessari.
- Determinare le relative classi o l'ID.
- Selezionare l'elemento e fare clic con il tasto destro → Copy → Copy selector per ottenere il relativo selettore CSS.
- Verificare il selettore negli Strumenti per sviluppatori: aprire la console (scheda Console) e inserire:
Se vengono trovati più elementi, potrebbe essere necessario rendere il selettore più specifico.document.querySelectorAll('selettore')
Esempio di codice HTML con elementi indesiderati:
<article class="article-content">
<h1>Titolo dell'articolo</h1>
<p>Testo dell'articolo...</p>
<div class="related-posts">Altri articoli</div>
<div class="ad-banner">Pubblicità</div>
</article>
Selettori CSS da escludere:
.related-posts, .ad-banner
Aggiungerli in Telematic.pro nel campo Selettori CSS da escludere.
Esempio completo di configurazione in Telematic.pro
Supponiamo di configurare una fonte per un blog con URL https://example.com/news. Le impostazioni in Telematic.pro saranno le seguenti:
- Selettore CSS dei link:
.news-item .news-link - Selettore CSS del contenuto:
.article-content - Selettori CSS da escludere:
.related-posts, .ad-banner
Conclusione
La configurazione dei selettori CSS consente di estrarre con precisione i dati necessari ed escludere gli elementi non desiderati. Utilizzare gli Strumenti per sviluppatori per trovare i selettori corretti, copiarli tramite il menu contestuale e testarli nella console prima di aggiungerli a Telematic.pro.