Come misurare le distanze nel layout delle pagine del blog.

Come misurare le distanze di unaa pagina web con il programma Snagit o con l'addon Awesome Screenshot per Chrome e per Firefox.

Il layout di un sito è determinato dal CMS della piattaforma utilizzata (Blogger, Wordpress, Joomla, Drupal, Tumblr, cc) e dal Tema (o Modello) che si è scelto che, attraverso le regole CSS che vi sono state inserite, indicano al browser gli elementi da caricare, il loro posizionamento e la loro dimensione.

Un esperto di codici può quindi aprire i file che determinano l'aspetto del layout di un sito con un programma apposito tipo Notepad++ e controllare direttamente quale siano le dimensioni di un elemento della pagina, quale sia la larghezza della sidebar o l'altezza di una icona.

Chi non è sufficientemente esperto o chi voglia conoscere il valore di una dimensione in modo semplice senza spulciare codici può utilizzare un tool per lo screenshot che mostri anche le dimensioni della regione di cui si è fatta una istantanea. Come certo saprete ci sono programmi a pagamento per fare screenshot ma ce ne sono anche di gratuiti. Vediamo come procedere con Snagit 12, software a pagamento, e con Awesome Screenshot che è un addon gratis per Chrome e Firefox.

COME MISURARE UNA DISTANZA CON SNAGIT

Con tutte le versioni più recenti di Snagit si possono prendere degli screenshot di una regione di una pagina web. Prima di procedere bisogna essere sicuri di avere impostato il browser al 100%

della dimensione dei caratteri per non sballare tutte le distanze. Dopo aver selezionato la regione

si visualizzeranno i valori in pixel della larghezza e della altezza. Con questo metodo si possono quindi agevolmente misurare le varie distanze. Lo screenshot può anche essere aperto nell'Editor

di Snagit. Se si va nella scheda Image e si sceglie Resize > Resize Image si possono visualizzare le dimensioni dello screenshot effettuato nel caso in cui avessimo optato per un Profilo che non consenta la visualizzazione delle dimensioni nell'anteprima dello screenshot.

COME MISURARE LE DISTANZE CON AWESOME SCREENSHOT

Visto che Snagit costa circa 46 euro vediamo come eseguire questa stessa operazione con l'addon gratuito Awesome Screenshot per Chrome e per Firefox. Dopo la sua installazione si clicca sulla sua icona nella barra del browser e si sceglie l'opzione Capture selected area

quindi con il drag & drop del mouse si seleziona l'area della pagina che vogliamo misurare. Ricordo che anche in questo caso bisogna aver settato la dimensione dei caratteri al 100%. Per essere sicuri che sia proprio così basterà digitare Ctrl+0 per ripristinare le dimensioni originali in tutti i browser.

Si visualizzeranno 8 maniglie per una selezione più fine dell'area. Non occorrerà neppure catturare lo screenshot visto che in alto a sinistra si potranno ricavare le sue dimensioni in pixel. Se si va su Capture lo screenshot sarà aperto in un'altra scheda del browser

per aggiungere eventualmente altra grafica prima di andare su Done. Se invece si clicca sulla icona in alto a sinistra denominata Crop si visualizzeranno gli strumenti di Ritaglio

insieme alle dimensioni di larghezza e altezza dell'area selezionata.