La dimensione dell'immagine del profilo in Facebook

La dimensione dell'immagine del profilo in Facebook è 180×540 pixel: diverso tempo fa era leggermente più grande, 200×600 pixel.
Le proporzioni, in ogni caso, sono rimaste le stesse, poiché 600 diviso 200 e 540 diviso 180 danno entrambi come risultato 3.
Secondo "Portent Interactive" l'area sicura dove inserire il marchio è grande 160×160 pixel.
Se accettiamo questa misura, per mantenere la propozione 1 a 3 contando i margini interni di 10 pixel, in alto, a destra, in basso e a sinistra, forse conviene usare un'immagine di 180×520 pixel. Con un'immagine di queste dimensioni possiamo avere tre quadrati di 160×160 pixel distanziati in maniera equivalente di 10 pixel l'uno dall'altro e rispetto al margine esterno dell'immagine.
In un'ipotesi del genere possiamo avere come guide orizzontali:

• x 0, y 10 (0+10),
• x 0, y 170 (160+10),
• x 0, y 180 (170+10),
• x 0, y 340 (180+160),
• x 0, y 350 (340+10),
• x 0, y 510 (350+160),

e come guide verticali

• x 10, y 0 (0+10),
• x 170, y 0 (160+10).

D'altro canto nulla vieta che il margine interno basso sia maggiore rispetto al margine interno alto, anzi spesso a livello compositivo è considerata più equilibrata un'immagine che ha più margine sotto rispetto che sopra. In questo caso non cambia nulla, l'immagine diventa 180×540 pixel, le guide sono le stesse indicate sopra e in basso invece di 10 pixel rimarranno 30 pixel di margine interno. Al limite, se vogliamo vedere dove si trovano i 10 pixel di margine esterno sotto l'ultimo quadrato, possiamo aggiungere una guida orizzontale a x 0, y 520, ovvero:

• x 0, y 10 (0+10),
• x 0, y 170 (160+10),
• x 0, y 180 (170+10),
• x 0, y 340 (180+160),
• x 0, y 350 (340+10),
• x 0, y 510 (350+160),
• x 0, y 520 (510+10).

Nel caso in cui x 0, y 0 non si trovasse in testa all'immagine ma dalla parte opposta (dove normalmente si trova x 0, y 540), le coordinate orizzontali sarebbero leggermente differenti, poiché 540 meno 520 è uguale a 20, andrebbero aggiunti 20 pixel ad ogni guida:

• x 0, y 30 (0+10+20),
• x 0, y 190 (160+10+20),
• x 0, y 200 (160+10+20),
• x 0, y 360 (180+160+20),
• x 0, y 370 (340+10+20),
• x 0, y 530 (350+160+20),
• x 0, y 540 (510+10+20).

L'ultima guida (x 0, y 540) coincide con il margine esterno dell'immagine, perché in questo caso andrebbe ribaltata dalla parte opposta, quindi la sequenza giusta sarebbe:

• x 0, y 20 (0+10+20-10),
• x 0, y 30 (0+10+20),
• x 0, y 190 (160+10+20),
  
• x 0, y 200 (160+10+20),
• x 0, y 360 (180+160+20),
• x 0, y 370 (340+10+20),
• x 0, y 530 (350+160+20).

Il risultato è mostrato nell'immagine successiva, dove in nero sono rappresentati i margini esterni che individuano la dimensione 180×540 pixel e in rosso le guide, due verticali e sette orizzontali.

Se poi vogliamo aggiungere una griglia elementare per aiutarci nell'impaginazione dell'immagine, possiamo utilizzare una semplice griglia di 10×10 pixel, evidenziata in blu nell'immagine successiva.

Fonti

1. Centro assistenza Facebook, Aggiornamento delle Pagine - Cosa è cambiato con il nuovo design delle Pagine?, Facebook, senza data, www.facebook.com/help/?faq=19849, URL consultato il 28 febbraio 2011
2. Portent Interactive, Facebook Page Changes You Must Make Before You Upgrade, Facebook, 14 febbraio 2011, www.facebook.com/notes/portent-interactive/facebook-page-changes-you-must-make-before-you-upgrade/193066634051529, URL consultato il 28 febbraio 2011x0

La dimensione del testo impostata nei fogli di stile e le funzioni di ingrandimento offerte dai browser

In una pagina di un sito web la dimensione del testo può essere regolata utilizzando i fogli di stile (CSS) attraverso la proprietà "font-size" che accetta valori di tipo numerico, per esempio "5mm" o letterale, per esempio "larger"[1]. I valori numerici devono essere accompagnati da un'abbreviazione che indica l'unità di misura: "5mm", cioè cinque millimetri[1].
In un browser l'utente spesso ha a disposizione una funzione per modificare la dimensione del testo per adattarla alle sue specifiche esigenze di lettura. Per esempio se il testo mi appare troppo piccolo e faccio fatica a leggerlo, attraverso il browser posso renderlo più grande "sovrascrivendo" le dimensioni che erano state impostate dai fogli di stile.
Oltre alla dimensione del testo, il browser spesso offre la possibilità di ingrandire tutta la pagina facendo uno "zoom" sull'intero documento: ovviamente se lo scopo dell'utente è ingrandire il testo per leggere meglio, vedere immagini, video, e altri elementi che cambiano dimensione occupando molto spazio sullo schermo può essere solo di intralcio alla navigazione.

In alcuni casi la funzione di ingrandimento del testo offerta dal browser può dipendere dal tipo di valore che è stato assegnato alla proprietà "font-size" nel foglio di stile, è il caso di Internet Explorer: se è stato utilizzato un valore in pixel, l'utente non ha più la possibilità, almeno di default, di variare la dimensione del testo. Questa caratteristica è stata mantenuta nella versione 7, nella versione 8, e, allo stato attuale, anche nella versione 9, così come riportato, di volta in volta da Roger Johansson nel suo sito 456 Berea Street.

Fonti

1. Hȧkon Wium Lie, Bert Bos, Cascading Style Sheets, guida pratica, Pearson Education Italia S.r.l, Milano, 2006, p.104 ss.
2. Richard Rutter, How to size text using ems, clagnut, 18 maggio 2004, clagnut.com/blog/348/, URL consultato il 22 febbraio 2011
3. Roger Johansson, IE 7 does not resize text sized in pixels, 456 Berea Street, 20 marzo 2007, www.456bereastreet.com/archive/200703/ie_7_does_not_resize_text_sized_in_pixels/, URL consultato il 22 febbraio 2011
4. Roger Johansson, IE 8 still does not resize text sized in pixels, 456 Berea Street, 23 febbraio 2009, www.456bereastreet.com/archive/200902/ie_8_still_does_not_resize_text_sized_in_pixels/, URL consultato il 22 febbraio 2011
5. Roger Johansson, IE 9 does not resize text sized in pixels, 456 Berea Street, 18 ottobre 2010, www.456bereastreet.com/archive/201010/ie_9_does_not_resize_text_sized_in_pixels/, URL consultato il 22 febbraio 2011

Bloccare il piè di pagina

Nell'impaginazione di un documento il piè di pagina è quella parte di contenuto che si trova fisso in fondo alla pagina.
In un documento cartaceo realizzare un piè di pagina non è particolarmente difficile.
In una pagina di un sito web, al contrario, possono sorgere diversi problemi perché la posizione del piè di pagina è determinata dalla quantità di contenuto che lo precede.
Per esempio, se una pagina ha poco testo il piè di pagina potrebbe "galleggiare" nel mezzo dello schermo.
Una delle prime soluzioni a questo problema è stata proposta da Bobby van der Sluis nell'articolo Exploring Footers apparso su A List Apart il 6 febbraio 2004.
Un'altra soluzione è stata proposta da Craig Erskine nel suo footerStick che, a detta dell'autore stesso, è stato sorpassato da footerStickAlt tecnica pubblicata il 25 agosto 2005 da Cameron Adams.
La soluzione di Craig Erskine è citata anche il 13 agosto 2005 da Roger Johansson nel suo 456 Berea street.
Johansson interviene sullo stesso argomento il 3 settembre 2005 con footerStickAlt - positioning a footer with CSS.
Ryan Fait propone la sua soluzione su CSS Sticky Footer.
Tomas Bagdanavičius propone un Pure CSS: Sticky Footer il 2 febbraio 2008.
Il 31 ottobre 2009 Steve Hatcher propone un'altra soluzione su A CSS Sticky Footer that Works in 2009 (Chrome too).

Fonti

1. Bobby van der Sluis, Exploring Footers, A List Apart, 6 febbraio 2004, www.alistapart.com/articles/footers/, URL consultato il 10 febbraio 2011
2. Craig Erskine, footerStick, qrayg.com, senza data, qrayg.com/learn/code/footerstick/, URL consultato il 10 febbraio 2011
3. Cameron Adams, footerStickAlt, The Man in Blue, 25 agosto 2005, www.themaninblue.com/experiment/footerStickAlt/, URL consultato il 10 febbraio 2011
4. Roger Johansson, footerStick, 456 Berea Street, 13 agosto 2005, www.456bereastreet.com/archive/200508/footerstick/, URL consultato il 10 febbraio 2011
5. Roger Johansson, footerStickAlt - positioning a footer with CSS, 456 Berea Street, 3 settembre 2005, www.456bereastreet.com/archive/200509/footerstickalt_positioning_a_footer_with_css/, URL consultato il 10 febbraio 2011
6. Ryan Fait, A CSS sticky footer, Las Vegas Web Design, senza data, ryanfait.com/sticky-footer/, URL consultato il 10 febbraio 2011
7. Tomas Bagdanavičius, Pure CSS: Sticky Footer, Science and Society by Tomas Bagdanavičius, 2 febbraio 2008, www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/, URL consultato il 10 febbraio 2011
8. Steve Hatcher, A CSS Sticky Footer that Works in 2009 (Chrome too), cssstickyfooter.com, 31 ottobre 2009, www.cssstickyfooter.com/, URL consultato il 10 febbraio 2011