Copiare script e css di un sito Web
Hai visto un simpatico script in azione su di un sito Web e vuoi copiarlo? Se lo script in questione è Javascript client-side, l’operazione è possibile e non richiede strumenti particolari anche se ovviamente è necessario conoscere il linguaggio HTML e Javascript.
Le soluzioni per copiare script e css di un sito Web sono comunque diverse. Puoi cominciare con il download della pagina Web, in cui sono integrati gli script, attraverso WinHTTrack (la procedura è spiegata in questo post), oppure aprire la pagina di un browser Web e scegliere il menu File/Salva con nome, o ancora puoi aprire il file .html con Notepad++.
Esiste un’ulteriore opzione se non vogliamo scaricare la pagina, possiamo leggere il suo codice HTML direttamente dal browser. Se stiamo utilizzando Chrome basta anteporre view-source: all’indirizzo della pagina (ad esempio: view-source:http://www.tiscali.it). Quando andiamo a leggere il codice HTML in cerca di Javascript, basta eseguire una ricerca (dal menu Modifica/Trova), del tag <script.
Il codice può essere inserito in due modi:
- se si tratta di porzioni brevi viene solitamente inserito nel tag script: si può copiare selezionandolo e premendo CTRL+C;
- se invece si tratta di un codice più complesso, di solito viene inserito in un file a parte.
Il file viene integrato utilizzando una versione del tag <script con un riferimento al documento in questione. Per esempio <script type=”text/javascript” src=”http://www.sitoweb.it:80/global/menutendina.js”></script> indica che viene integrato il codice javascript contenuto nel file http://www.sitoweb.it:80/global/menutendina.js. Per prelevare questo codice è sufficiente aprire il suo URL nel browser e utilizzare il solito Salva con nome. Se vogliamo far funzionare una pagina HTML sul nostro sito, dobbiamo prelevare anche tutti i suoi file di script e salvarli sul nostro server. Per esempio se il file originale si chiama menutendina.js ci basta salvarlo nella stessa cartella del file HTML e modificare la riga che lo include in <script type=”text/javascript” src=”menutendina.js”></script>. In tal modo possiamo replicare l’intera logica della pagina, incluse le eventuali azioni dei menu o altri effetti che non possono essere gestiti dal solo HTML.
Molti siti Web sofisticati utilizzano il cosiddetto Node.js. Si tratta di un sistema in cui il codice javascript viene eseguito sul server e non sul client, quindi non è possibile risalire al codice originale, ma solo alla versione HTML prodotta dal server.
Per quanto riguarda i CSS, il meccanismo è molto simile. Basta cercare nel codice HTML della pagina tutti i tag <link che contengono la parola chiave “text/css”. E’ anche possibile che il codice di stile venga inserito direttamente nella pagina HTML, all’interno del tag <style. Ma è piuttosto raro dato che i fogli di stile sono sempre molto lunghi.
Esiste un ulteriore metodo per risalire a tutti i file CSS e Javascript collegati a una pagina: utilizzando Google Chrome basta cliccare col tasto destro sulla pagina Web di partenza e scegliere la voce di menu Altri strumenti > Strumenti Sviluppatori (in Mozilla Firefox, Strumenti > Sviluppo Web > Attiva Strumenti).
Nella scheda Resources è presente un diagramma ad albero che contiene la cartella Frames, all’interno della quale si trova un’ulteriore cartella che indica il sito Web visitato. Dentro questa cartella sono raggruppate tutte le risorse della pagina: script, immagini e fogli di stile. Nella cartella Scripts possiamo vedere tutti gli script caricati dalla pagina e con un clic del tasto destro è possibile salvarli nel computer. Stessa cosa vale per gli Stylesheets, i fogli di stile CSS.
Basterà modificare i riferimenti ai file .js e .css nella pagina HTML originale ed il gioco è fatto.
Approfondimenti