Good Ideas

Screenshot siti web

Review, fotografa i tuoi siti in un colpo solo

Posted by:

|

On:

|

,

Review è una utility per catturare gli screenshot di tutti i vostri siti in esecuzione e in diverse risoluzioni!

review-esempio

Come spiega bene la guida online, l’aggiornamento continuo dei siti, specialmente se sono responsive, può provocare delle rotture grafiche in qualche punto del sito o ad una certa risoluzione. Dare un’occhiata ad ogni singola pagina potrebbe essere una seccatura, soprattutto se moltiplicata per ogni risoluzione possibile.

Verificare se tutto è a posto non significa testare tutto, pagina per pagina, risoluzione per risoluzione, ma piuttosto usare l’ottima capacità della mente umana di acquisire rapidamente le informazioni e filtrare quello che serve, vale a dire ciò che è rotto.

Review è un’utility scritta in javascript per node.js che cattura gli screenshot dei vostri siti alle risoluzioni volute. Si può lanciare da riga di comando oppure configurare uno script in modo da poterlo riusare successivamente.

review

Installazione

L’installazione prevede l’utilizzo di npm, un gestore di pacchetti per node. Dovete aver installato Node.js per poterlo utilizzare. Inoltre si fa uso di HomeBrew, un gestore di pacchetti per OSX.

brew install phantomjs
npm install -g review # for cli
npm install review    # for library

Esempio

Seguendo la guida online, mi sono creato in una cartella review/ uno script chiamato index.js

var review = require('review')

review()
  .title('Google')
  .sites({ google: 'http://google.it/' })
  .resolutions(['1280x1024', '800x600', '480x320'])
  .cache({
    dir : __dirname + '/cache/',
    expires : 60
  })
  .listen(4000)

Prima di eseguire lo script, ricordatevi di creare una cartella cache/ all’interno della cartella review/ del progetto, con i diritti di scrittura. Poi lanciate il comando:

node index.js

In questo momento è avviato un server web che ascolta sulla porta 4000. Aprite il vostro browser e navigate la pagina http://localhost:4000 e vedrete il sito nelle varie risoluzioni configurate. Nell’esempio sopra ho impostato il sito di google con 3 risoluzioni ma le personalizzazioni sono chiaramente infinite.

Conclusioni

Review è un’ottimo strumento per web developer che può semplificare il lavoro quotidiano di verifica e test dei siti.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *