Questo capitolo è dedicato all’approfondimento delle tecnologie di Internet. Si tratta di una lettura opzionale, ma fortemente consigliata agli utenti con poca o media esperienza nonché ai curiosi, interessati a padroneggiare appieno il funzionamento di Free/Batch Data Collector.
E’ possibile evitare a pie’ pari queste nozioni se le esigenze di estrazione fossero soddisfatte dal trattamento del codice esclusivamente come una lunga stringa di testo anziché come una mappa gerarchica di informazioni da identificare per mezzo di selettori.
Quali sono le tecnologie coinvolte?
Anzitutto HTML, il famoso HyperText Markup Language. E’ il linguaggio scelto per la rappresentazione di documenti da pubblicare all’interno di Internet. E’ chiamato di markup in quanto prende in prestito dalla tipografia il termine marker, ovvero la delimitazione (tramite evidenziatore) delle parti di testo da revisionare prima di una stampa. HTML fa più o meno lo stesso, delimitando sezioni di un testo da pubblicare tra codici detti tag. Abbiamo già spiegato nella precedente unità a cosa servano e grossomodo come funzionino, ma è importante memorizzare che all’apertura di un tag corrisponde l’applicazione di determinate regole (generalmente visuali o di collegamento ipertestuale) che cessano alla chiusura del tag stesso.
Il XHTML (eXtensible HyperText Markup Language) è grossomodo il successore di HTML e ne rappresenta la declinazione standard voluta nel 2000 dal consorzio W3C. Le regole principali del linguaggio sono le seguenti:
- i tag sono da scrivere sempre con lettere minuscole;
- all’apertura di ogni tag corrisponde sempre un tag di chiusura;
- per i tag che non possono essere chiusi bisogna prevedere la terminazione implicita (ad esempio, il tag del ritorno a capo, che in HTML si esprime con <br>, in XHTML è rappresentato come <br />);
- gli attributi sono delimitati da virgolette ed anche i nomi degli attributi vanno scritti con lettere minuscole.
Altre regole, seppur importanti, non saranno oggetto di questa trattazione.
Infine c’è XML che somiglia a HTML e XHTML in termini di logica e struttura. E’ costruito con tag che seguono le medesime regole. La sua particolarità, però, è che permette di definire anche tag non-standard. Pertanto se HTML è pensato come un insieme di qualche centinaio di tag predefiniti, XML può contenere un insieme pressoché infinito di tag.
Che bisogno c’era di XML?
XML rappresenta un ottimo sistema di comunicazione tra applicativi o device o database anche molto diversi tra loro. In pratica, se il frigorifero parla con il forno a microonde, probabilmente lo fa in XML. E ovviamente non usa HTML perché non ha bisogno di sfruttare elementi di formattazione del testo per comunicare i propri messaggi.
In rete si trovano tantissimi servizi che rispondono in formato XML. Su richiesta lo fanno anche Google, tantissime interfacce software (dette API), giornali e riviste specializzate, archivi telefonici, servizi di localizzazione territoriale, e molto altro ancora… Free e Batch Data Collector possono analizzare una risposta in formato XML e raccogliere da essi i valori racchiusi tra tag o gli attributi che li definiscono anche in caso di attributi non-standard. Scaricare un file XML, tra l’altro, è molto più rapido rispetto al rendering di un’intera pagina HTML in quanto ovviamente non sono presenti immagini e stili di formattazione. In breve, XML è una soluzione di comunicazione performante, adatta a molteplici device e ambienti di lavoro e rappresenta una risorsa da tenere senz’altro in considerazione in caso di scraping massivo.
HTML, istruzioni per l’uso
Una pagina HTML non è altro che un file di testo contenente tag di apertura e chiusura, e tra essi porzioni di ulteriore testo, generalmente disegnato sulla finestra del browser.
E’ importante familiarizzare con i tag più comuni utilizzati nel codice sorgente ed è altrettanto importante non farsi spaventare da quelli sconosciuti. Ricordare la struttura generale di un tracciato HTML aiuterà a riconoscere sempre le sezioni principali del codice e renderà curioso e divertente – con un po’ di pazienza – il tracciamento degli elementi da catturare da una pagina web. La scelta dell’elemento migliore è un’arte e quindi diverrai presto un artista. E ovviamente un web-scraper specialist!
Ecco quali tag, e in che ordine, compaiono sempre in una pagina web well-formed:
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
<meta charset=”UTF-8″ />
<meta name=”description” content=”A short webpage description” />
<meta name=”author” content=”Author Name” />
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
</head>
<body>
Visible page content
</body>
Come da tracciato sopra, ad ogni tag aperto ne corrisponde uno chiuso, ad eccezione dei tag con terminazione implicita (meta è un esempio). Nella sua interezza, il codice è strutturato gerarchicamente: un tag può contenerne un altro, a patto che la chiusura dei tag avvenga in ordine inverso di apertura. Ovvero, l’ultimo tag aperto è il primo chiuso. E’ quindi ammessa la seguente combinazione:
<div><strong></strong></div>
Mentre non è ammissibile la seguente:
<div><strong></div></strong>
Analizziamo nel dettaglio il significato dei usati nell’esempio:
- <!DOCTYPE html>
E’ un elemento di sistema che in apertura del documento specifica il motivo del documento stesso: creare una pagina di tipo html. - <html>
Identifica l’inizio e la fine dell’intero documento html. Tutti gli altri tag saranno suoi figli. - <head>
Contiene informazione per la buona interpretazione della pagina o utili ai motori di ricerca per indicizzare correttamente il sito web. Nel nostro esempio, in sequenza, comunichiamo l’uso di caratteri appartenenti allo standard UTF-8 (cioè diciamo che la pagina è scritta in una lingua latina) e forniamo a motori di ricerca tipo Google una descrizione della pagina e un riferimento all’autore. - <link>
Non tutto il codice della pagina è sempre contenuto all’interno dello stesso documento. Ad esempio le regole CSS sono solitamente definite in file esterni simili a librerie di supporto. Il tag link non crea collegamenti ipertestuali navigabili dall’utente, bensì carica le altre parti del codice necessarie a visualizzare correttamente la pagina. Nel nostro esempio è richiamato il file style.css nella sottocartella css. - <body>
E’ il cuore della pagina, quanto visualizzato sul browser di navigazione. Non solo direttive e comandi ma anche il vero contenuto testuale leggibile.
Selettori e altri tag
I tag rappresentano già di per sé dei selettori generici. “html“, “head” e “body” sono senz’altro selettori univoci che compaiono una sola volta e possono essere utilizzati per catturare elementi. Il compito più importante durante la definizione di una ricetta è individuare il selettore giusto. La conoscenza di base della struttura gerarchica descritta sopra ed un’infarinatura dei tag esistenti sono la chiave d’accesso alla scelta si selettore.
Tra i tag più comuni, ricordiamo i seguenti:
- <h1> <h2> <h3> <h4> <h5> <h6>
Delimita un titolo o un sottotitolo.
La “h” in questo caso significa header. Esistono 6 stili predefiniti.
Esempio: <h1>titolo</h1> - <p>
Delimita un paragrafo.
Un paragrafo è solitamente separato dai blocchi precedenti e successivi per mezzo di una spaziatura verticale. Genera anche un ritorno a capo al termine del paragrafo stesso.
Esempio: <p>In questo capitolo parleremo di ecologia</p> - <strong>
Delimita un testo un grassetto.
In passato si utilizzava il tag <bold>. - <em>
Delimita un testo in corsivo.
In passato si utilizzava il tag <i>. - <span>
Delimita una parte di testo a cui solitamente si vuole attribuire un id o una class. Da solo, però non fa effettivamente nulla. - <div>
Delimita una parte di testo a cui solitamente si vuole attribuire un id o una class. Da solo, però non fa nulla di diverso dal tag p. - <br />
Crea un’interruzione di riga (ritorno a capo). - <img />
Permette di caricare un’immagine laddove il tag è posizionato rispetto al resto del testo.
Il percorso del file è specificato nell’attributo src, mentre la descrizione della foto (opzionale) nell’attributo alt.
Esempio: <img src=”filename.jpg” alt=”Description” /> - <a>
Delimita elementi collegati ad un URL. Tra il tag di apertura e chiusura possono essere presenti una o più stringhe e/o una o più immagini.
L’URL è specificato nell’attributo href.
Esempio: <a href=”https://www.google.com”>Go to Google</a> - <ul><li></li></ul>
Tipica struttura di un elenco puntato. Tutto l’elenco è racchiuso fra tag ul mentre gli elementi figli, ovvero i singoli punti elenco, sono delimitati da li.
Esempio: <ul><li>First element</li><li>Second element</li></ul> - <table><tr><td></td></tr></table>
Tipica struttura di una tabella che inizia e finisce con il tag table. Ogni riga della tabella è racchiusa in tr, mentre le colonne in td.
L’esempio seguente pertanto definisce una tabella di una riga e due colonne, ciascuna contenente un numero.
Esempio: <table><tr><td>1</td><td>2</td></tr></table>
Elencati i tag più importanti è doveroso ricordare che a ciascuno può essere attribuito un id e una o più class. Di seguito qualche esempio pratico con il relativo selettore da usare in Free/Batch Data Collector:
<img src=”filename.jpg” id=”mypicture” />
Selettore: img#mypicture
Catturerà una sola immagine, in quanto gli id sono unici in tutta la pagina web.
<span id=”mytext”>Relevant note for the reader</span>
Selettore: span#mytext
Catturerà solo il testo contenuto nel tag
<div class=”daysoftheweek”>Monday</div>
Selettore: div.daysoftheweek
<div class=”daysoftheweek”>Tuesday</div>
<div class=”daysoftheweek”>Wednesday</div>
Catturerà tutti e tre gli elementi (perché una classe può essere attribuita a più tag).
<div class=”daysoftheweek monday”>Monday</div>
Selettore: div.daysoftheweek.monday
<div class=”daysoftheweek”>Tuesday</div>
<div class=”daysoftheweek”>Wednesday</div>
Catturerà solo il primo degli elementi.
<span id=”mytext” class=”redText”>Relevant note for the reader</span>
Selettore: span#mytext.redText
Catturerà solo il testo contenuto nel tag. Sebbene la classe non sia indispensabile, è possibile specificarla.
Il nostro excursus nelle tematiche relative ad html termina qui. Per i più interessati è consigliabile la guida ufficiale del W3C disponibile qui: https://www.w3schools.com/html/.
Nelle prossime unità apprenderemo come creare una prima ricetta e come costruire selettori sempre più potenti.