Misurare larghezze e lunghezze del layout di una pagina web.

Come misurare le dimensioni degli elementi di una pagina web (banner, immagini, layout, sidebar, footer) con il Righello dei Pixel di PicPick.

Il codice HTML e CSS di una pagina web determina le dimensioni degli elementi che la compongono. Un esperto di linguaggi di programmazione può digitare Ctrl+U per aprire il sorgente pagina e spulciare il codice della pagina per risalire alle dimensioni dei vari elementi aiutandosi anche con gli strumenti Ispeziona Elemento di Chrome o Analizza Elemento di Firefox.

Gli utenti di Blogger possono modificare le larghezze di tutto il blog e delle sidebar operando nel codice del template. C'è pure la valida estensione per Chrome denominata Image Size Info utilissima per conoscere larghezza e lunghezza di una immagine di qualsiasi pagina web. Non è però così semplice determinare le dimensioni di un elemento del layout dal codice e qualche volta può essere necessario utilizzare dei sistemi empirici.

Un tool molto interessante in tal senso lo offre il programma gratuito PicPick che solitamente serve per catturare screenshot e per aggiungerci grafica. Dopo aver scaricato il software dalla sua pagina di download e averlo installato si visualizzerà nella barra delle applicazioni una icona. Cliccandoci sopra con il destro del mouse si visualizzeranno tutti gli strumenti di PicPick  

In questo contesto ci interessa il Righello dei pixel su cui dovremo cliccare. Si visualizzerà un righello orizzontale che però potrà essere modificato in verticale cliccando sulla icona della freccia curva. Si potrà anche aumentare la larghezza del righello orizzontale o la lunghezza di quello verticale cliccando sulla apposita icona. In questo modo potranno essere misurate le distanze degli elementi del desktop

La stessa cosa può essere fatta anche per gli elementi di una pagina web. Ho pubblicato sul mio canale Youtube un video tutorial del semplice procedimento

Dopo aver aperto la pagina web che ci interessa dovremo essere sicuri che non sia stato attivato lo zoom. Si può digitare Ctrl+0 per resettarlo ma si può anche andare sul menù posto in alto a destra di Chrome o Firefox e controllare che la dimensione dei caratteri sia al 100%

Eventualmente cliccare sul + o sul meno per ripristinarla. Si clicca poi con il destro del mouse sulla icona di PicPick posta nella Barra in basso e si sceglie Righello dei pixel come prima

Con il drag and drop si trascina il righello all'inizio della dimensione da misurare e si scorre sempre con il cursore fino alla fine dell'elemento. Verrà mostrato il valore in pixel di larghezza e/o lunghezza. Se il righello fosse troppo corto si clicca sulla icona >> per aumentarla mentre l'icona << serve per diminuirla. Per chiudere lo strumento si clicca invece sulla icona della croce.