Misurare larghezze e lunghezze del layout di una pagina web.

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.

Come diminuire la larghezza del menù delle pagine statiche.

Su Blogger viene automaticamente creato un menù con tutte le pagine statiche che vengono pubblicate. La prima voce del menù è Home quindi a seguire tutte le altre in ordine di pubblicazione.

Questa funzionalità di Blogger è stata estesa ad altri collegamenti. E' quindi possibile creare un menù usando il widget delle pagine statiche con collegamenti a qualsiasi pagina web. Basta andare su Pagine > Nuova pagina > e scegliere Indirizzo web al posto di Pagina vuota.

Il menù delle pagine statiche può essere inserito in una sidebar e allora prenderà una forma di elenco verticale oppure sotto l'intestazione e, in questo caso, si visualizzerà per tutta la larghezza del template. Mi è stato chiesto in un commento se fosse possibile personalizzare questa larghezza.

Come ridurre lo spazio tra post e sidebar nei template del Designer Modelli.

I nuovi modelli di Blogger, non mi riferisco a quelli a Visualizzazione Dinamica ma a quelli del Designer Modelli, lasciano un po' troppo spazio tra la parte centrale in cui viene visualizzato il post e le sidebar. Questo spazio potrebbe invece essere utilizzato per allargare l'area del post o le colonne laterali. Ricordo che si può modificare la larghezza del layout del blog attraverso il cursore presente nel tool del Designer Modelli oppure agendo direttamente nel codice.

Nel caso si voglia sfruttare lo spazio in maniera ottimale si può ridurre la distanza tra la/e sidebar e la parte centrale del layout. Si va su Modello > Backup/Ripristino e si salva il modello completo per un backup di sicurezza. Si torna su Modello > Modifica HTML > Procedi e si controlla se nel codice c'è la stringa di codice Content Padding. Nel caso fosse presente significa che abbiamo il modello Travel (o Viaggi) oppure un template personalizzato che è comunque una sua derivazione. Dovrebbe essere allora presente un codice simile a questo

Come aumentare la larghezza dei post nel Professional Template e variare la dimensione dei font del testo in Blogger.

In tutti i modelli di Blogger è da poco presente una funzione per modificare la dimensione dei caratteri del testo oltre che la loro famiglia. Andando infatti in Caratteri e Colori si può trovare Carattere Testo con tutte le possibili opzioni di font e dimensione

Nel Professional Template di cui mi sono occupato in articolo specifico e che può essere scaricato da qui, queste opzioni sono veramente moltiplicate esponenzialmente. Non c’è infatti solo la casella Carattere testo ma si trovano anche

1. Carattere Titolo Blog
2. Carattere Descrizione Blog
3. LinkBar Text Font
4. Carattere Titolo Font
5. Carattere intestazione data
6. Carattere Testo
7. Blockquote Font
8. Carattere Titolo Sidebar
9. Sidebar text font
10. Post Footer Text Font
11. Comment Title Font
12. Comment Text Font
13. Footer Header Font
14. Footer Text Font

e scusate se è poco .

Il modello Professional si pone quindi come uno dei migliori modelli di Blogger se non il migliore. Ha un solo difetto piuttosto importante: la larghezza veramente modesta della zona in cui viene inserito l’articolo, soltanto 476 pixel.

Infatti se si apre il modello andando su Layout >  Modifica HTML > seguendo le indicazioni dell’articolo in cui parlo di come allargare un template di Blogger, si ricavano questi dati. Occorre cliccare su F3 oppure su Ctrl+F e digitare la parola width

body – width: 100%;
outer-wrapper- width: 100%;
blog-wrapper - width:980px;
topads-wrapper – width: 100%;
header-wrapper – width: 970px;
header – width: 970px;
linkbar-wrapper – width 978px;
linkbar – width: 100%,
middleads-wrapper – width 980px;
content-wrapper – width: 978 px;
main-wrapper – width: 486px;
main – width: 476px;
side-wrapper1 – width: 156px;
side-wrapper2 – width: 336px;
sidebar1 – width: 156px;
sidebar2 – width: 332px;
sidebar3 – widht: 164px;
sidebar4 – width: 164px;
lower-wrapper – width: 978px;
lowerbar-wrapper – widht: 320px;
lowerads-wrapper – widht: 100%;
footer-wrapper – widht: 980px;
footer – width: 978px;
bottomads-wrapper – widht: 100%
credit – widht: 100%;
credit-left – widht: 71%;
credit-right – width: 30%;

La risoluzione dei browser si è molto allargata in questi ultimi tempi ma è buona norma non superare i 1020 pixel essendo 1024x768 pixel la risoluzione dei navigatori che hanno quella più bassa (sono circa il 30%), escluso ovviamente chi si collega con computer palmari o iPhone. Questo blog ha una larghezza superiore ed infatti non è visualizzato correttamente da coloro che hanno una risoluzione inferiore a 1280x800 pixel.

La larghezza massima del modello Professional è però di 980px e quindi possiamo allargare di 40 pixel nell’area del post che sono importanti per inserire per esempio dei video di youtube in formato 16:9 che con questo main-wrapper non c’entrano.

Ecco come si presenta questo modello prima di queste modifiche

I parametri da sostituire sono

blog-wrapper - width: 1020px;
header-wrapper – width: 1010px;
header – width: 1010px;
linkbar-wrapper – width 1018px;
middleads-wrapper – width 1020px;
content-wrapper – width: 1018 px;
main-wrapper – width: 526px;
main – width: 516px;
lower-wrapper – width: 1018px;
lowerbar-wrapper – widht: 334px;
footer-wrapper – widht: 1020px;
footer – width: 1018px;

L’aspetto non è che cambi di molto

ma sono stati aggiunti quei 40 pixel in più tutti nell’area dei post che secondo me migliorano notevolmente il modello soprattutto per quei blog che sono soliti postare dei video. Se non vi preoccupate tanto di coloro che hanno risoluzioni video basse, come del resto faccio anche io con questo blog, si può ulteriormente aumentare la larghezza del main-wrapper. L’importante è mantenere le proporzioni; per quanto riguarda le sidebar ho lasciato stare tutto come era in precedenza ma ovviamente si può operare anche in quel settore. Se siete interessati date uno sguardo all’articolo sulla larghezza del template già citato.

Come aumentare la larghezza delle colonne, delle sidebar e dell’area dell’articolo in un modello di Blogger.

Bisogna ricordare che di modelli per Blogger ce ne sono centinaia se non migliaia, alcuni anche molto complessi quindi questo mini-tutorial vuole essere un’introduzione a questo tipo di modifica per permettere ai blogger di farle nel proprio template sapendo almeno dove mettere le mani.

Il parametro che indica la larghezza in un modello è width che nei fogli di stile è seguito da due punti e da un valore che può essere assoluto o in percentuale. Per esempio

width:660px; oppure width: 32%;

che significa che la larghezza è 660 pixel oppure il 32% della misura a cui si riferisce. Ci sono varie sezioni del blog che hanno al loro interno l’indicazione della larghezza. Alcune sezioni esistono in tutti i template mentre altre solo in alcuni. Ecco una rassegna

1. Header-wrapper – E’ la parte alta del blog in cui c’è l’intestazione
2. Outer-wrapper – E’ l’insieme di tutte le colonne del blog, in sostanza l’area totale del blog con area del post e sidebar
3. Main-wrapper – E’ l’area in cui appare l’articolo
4. Sidebar-wrapper – E’ la sidebar del blog, ovvero la colonna in genere più stretta. Nel caso di un blog a tre o più colonne ci possono essere più sidebar e il loro stile può essere indicate p.e. come sidebar1-wrapper e sidebar2-wrapper
5. Content-wrapper – ovvero l’area dei contenuti è in genere simile all’outer-wrapper è rappresenta la parte del blog che comprende post e sidebar. Non è presente in tutti i modelli.

Un’esposizione di questo tipo si deve necessariamente basare su degli esempi e come blog-cavia ho preso questo Blog di Prova. Ecco come si presenta il blog prima delle modifiche




Andiamo su Layout > Modifica HTML e clicchiamo su F3 o Ctrl+F quindi inseriamo la parola width e vediamo tutte le righe che la contengono cliccando su Trova successivo (con Firefox, comunque il sistema funziona anche con gli altri browser). Troviamo i seguenti codici

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }
#outer-wrapper {
  background:$bgcolor;
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }
#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }
#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Vediamo che la larghezza dell’intestazione è la stessa (660 pixel) di quella dell’area dei contenuti (outer-wrapper), mentre quella del post è 410 pixel, decisamente stretta, e quella della sidebar è 220 pixel. Da notare che 410+220=630 che è inferiore di 30 pixel ai 660 dell’outer-wrapper questo per non tenere attaccati post e sidebar. Si trova anche il codice max-width:700px; ma è nella sezione #header .description e riguarda il testo inserito come descrizione del blog, quindi non c’entra nulla con il nostro discorso.

Da 660 passiamo a 950 come totale di area dei contenuti e li ripartiamo così

1. header-wrapper: 950 pixel
2. outer-wrapper: 950 pixel
3. main-wrapper: 620 pixel
4. sidebar-wrapper: 300 pixel

Anche in questo caso larghezza header = larghezza outer e somma di main-wrapper e sidebar-wrapper inferiore di 30 pixel all’outer-wrapper. Andiamo nel modello e inseriamo questi dati al posto degli altri. Salviamo il template e vediamo come si presenta adesso il blog




come potete vedere l’area a disposizione è indubbiamente maggiore e può anche essere ulteriormente allargata.

La ragione per cui è molto spesso una necessità allargare sia il main-wrapper che la sidebar risiede nella seguenti cause

1. su Youtube sono da qualche tempo presenti i video in alta definizione che hanno un player più largo e che per far entrare nei modelli stretti dobbiamo modificare i parametri del l’HTML.
2. Se si usa Adsense in modelli con main-wrapper largo possiamo inserire anche due annunci di rettangoli grandi affiancati
3. Non tutti i widget sono modificabili in larghezza e qualche volta non entrano se si hanno delle sidebar troppo strette
4. In modelli con main-wrapper largo ci possono comodamente stare anche foto e immagini di grandi dimensioni; nei modelli stretti dobbiamo ridimensionarle perdendo la perfetta visione dei particolari

Devo solo aggiungere alcune cose

• Se si ha un template con delle immagini di sottofondo questo tipo di personalizzazione molto spesso fallisce. Per esempio in questo blog il risultato ottenuto con queste modifiche è stato bruttino proprio perché ha  un’immagine di sfondo. Se si ha un blog in cui si è inserita un’immagine di sottofondo e si vuole allargare area del post e sidebar occorre per prima cosa togliere l’immagine, allargare il template con il procedimento appena illustrato quindi inserire nuovamente il background.
• Nel caso si abbiano dei modelli più complessi il modo di procedere è comunque questo e si possono fare tranquillamente delle prove anche senza conoscere l’HTML semplicemente cercando le righe di codice con width e salvando preventivamente il template per un eventuale backup.
• Se la larghezza (width) è presente sotto forma di percentuale ovviamente dobbiamo fare in modo che non si superi il 100% con la somma di main-wrapper e sidebar (una o più di una). In certi modelli sono presenti entrambe le notazioni, assoluta e percentuale; occorre quindi fare un po’ di calcoli da scuola media inferiore…
• Una simile procedura può essere anche utilizzata nel caso si abbiano delle colonne a piè di pagina come per esempio in questo blog. La larghezza delle colonne è rispettivamente 31%, 32% e 31% (somma 94%

Aggiornamento: Questi codici sono relativi a modelli di molti anni fa e quindi sono da considerare  un esempio su come procedere visto che gli ID e le classi di stile sono generalmente diversi.

Come espandere un video di Youtube fino al massimo senza passare alla modalità tutto schermo e come inserirlo nei blog che hanno layout di qualsiasi dimensione.

Per vedere un video di Youtube a tutto schermo basta cliccare su F11 e successivamente su Esc per tornare alla modalità normale. Può però essere interessante vedere il video nella sua ampiezza massima senza arrivare a vederlo a tutto schermo.

Basta modificare leggermente l’URL del video aggiungendo _popup dopo watch come mostrato nell’esempio seguente

www.youtube.com/watch?v=9WjLP837LsY si sostituisce con

www.youtube.com/watch_popup?v=9WjLP837LsY

Ecco come si presenta un video con questa modalità

Con questo sistema si può inserire nel blog un qualsiasi video senza preoccuparci delle dimensioni del nostro modello e quelle dello stesso video. Basta usare un iFrame. Il codice da inserire è il seguente

<iframe src="http://www.youtube.com/watch_popup?v=9WjLP837LsY" align="center" scrolling="yes" width="400" height="300"></iframe>

Dove dopo src= dovete inserire l’URL del video di Youtube a cui avete aggiunto _popup come spiegato in precedenza. I numeri 400 e 300 rappresentano rispettivamente la larghezza e l’altezza e possono essere personalizzati a piacere. Ecco un esempio di questo modo di inserimento

L’unico problema è che risulta difficile inserire il parametro autoplay=”0” per non farlo iniziare automaticamente. Per impedire la riproduzione del video cliccate sul pulsante Pausa.