Testare come si visualizza un sito o una pagina con i vari modelli di PC, Tablet, Smartphone e Smart TV.

Mentre nel recente passato gli webmaster di tutto il mondo avevano il problema di armonizzare il layout dei siti se aperti con i diversi browser adesso le cose sono sensibilmente cambiate. Il browser più difficile da supportare per i siti delle varie piattaforme era senza ombra di dubbio Internet Explorer che adesso pur essendo ancora presente su Windows 10 cliccando su Start -> Accessori Windows è stato sostanzialmente abbandonato dalla Microsoft a vantaggio di Microsoft Edge. 

La sfida fondamentale per i possessori di un sito è quindi diventata quella di mostrare un layout efficace e friendly in tutti i dispositivi con cui può essere aperto. La navigazione in internet non si fa più esclusivamente con il computer ma si utilizzano altri dispositivi che diventano sempre più importanti per attrarre traffico.

Come modificare la favicon di Blogger da Layout o dal modello.

Quando si apre una pagina web nella scheda del browser, a sinistra del titolo della pagina viene visualizzata una piccola icona chiamata favicon che è una contrazione della espressione inglese favorite icon. Questa funzionalità è stata introdotta dalla Microsoft con Internet Explorer 5 ma adesso è comune a tutti i principali browser. All'inizio la favicon era posizionata nella radice di archiviazione ovvero in quella che viene anche chiamata webroot. In seguito è stato introdotto un apposito tag HTML per aggiungere la favicon nella sezione HEAD della pagina web con questa sintassi

        <link rel="icon" href="http://...../favicon.ico" />

dove si inserisce l'URL diretto della immagine della favicon. All'inizio le favicon erano tutte in formato .ICO ma adesso possono essere aggiunte come favicon anche immagini .GIF o .PNG. Un discorso analogo vale per le dimensioni. Quelle delle immagini in formato .ICO erano comprese tra 16 e 48 pixel mentre le immagini .PNG e .GIF possono essere di qualunque dimensione.

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.

Modificare la larghezza del blog e delle sidebar in Blogger.

Con l'avvento sei anni fa del Designer Modelli gli utenti di Blogger possono crearsi il layout che preferiscono. Dopo aver scelto il Template si va su Modello -> Personalizza quindi si sceglie la scheda Layout in cui ci sono 8 opzioni per il corpo del post e 3 per il footer o piè di pagina. Per il footer si può optare per una, due o tre colonne mentre per il corpo del post si può scegliere un layout senza sidebar, con una sidebar a sinistra e una a destra, per una sola sidebar (a sinistra o a destra), per due sidebar (tutte a destra o tutte a sinistra) o per tre sidebar (due a sinistra e una a destra o viceversa).

Queste configurazioni debbono essere fatte all'inizio perché dopo che si sono inseriti dei widget o delle personalizzazioni si rischierebbe di sfalsare tutto. Un discorso analogo va fatto per la scheda Modifica le larghezze in cui settare la larghezza dell'intero blog e della/e sidebar. Infatti già il solo cliccare su Modello -> Personalizza può portare a delle modifiche non volute del modello se si sono già inserite delle personalizzazioni.

Centrare il layout di Blogger o spostarlo in alto o in basso.

A seguito di un commento ricevuto ieri passo a illustrare una semplice procedura per centrare il layout del nostro sito su Blogger oppure per spostarlo più in alto o più in basso qualora ci fosse troppo o troppo poco spazio sopra all'Header o Intestazione. Premetto che le personalizzazioni e soprattutto i codici che andrò a presentare li ho testati in un modello ufficiale di Blogger. Non si può dire nulla in proposito ai template scaricati da internet in cui tali codici potrebbero o non potrebbero funzionare.

COME SPOSTARE IL LAYOUT DI BLOGGER SULLA SINISTRA O SULLA DESTRA

Poniamo che nonostante i nostri sforzi il layout del nostro sito non sia perfettamente centrato e che si veda spostato troppo da una parte. Si può risolvere con una semplice modifica al modello. Tanto per fissare le idee ecco due screenshot esemplificativi del problema e della sua soluzione. La situazione di partenza in effetti è perfetta e non ha bisogno di modifiche. Ho solo testato la funzionalità

Come misurare le distanze nel layout delle pagine del blog.

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.

Come allargare il layout di una o di tutte le pagine statiche di Blogger nascondendo sidebar e/o footer e/o commenti.

Le pagine statiche sono state introdotte da Blogger molti anni fa e i nuovi utenti neppure sanno che all'inizio non c'erano e che ci si doveva arrangiare pubblicando post retrodatati. Tali pagine sono in genere utilizzate per contenuti particolari quali la Informativa lunga per i Cookie, il Disclaimer del blog, la Mappa del sito ma soprattutto Gallerie Fotografiche o Widget con tutti i post del blog divisi per etichette.

Con scelte di questo tipo è quindi opportuno cercare di rendere il layout delle pagine statiche più largo del normale. Il procedimento illustrato in questo post sarà appunto quello di nascondere la sidebar e/o il footer in una determinata pagina statica o in tutte le pagine statiche.

Come aggiungere 1, 2 o 3 widget allineati sopra e/o sotto l'Header di Blogger.

Continuo nell'aggiornamento di vecchi tutorial per Blogger alla luce delle novità introdotte nel codice del suo Editor del Template. Dopo aver visto come aggiungere due o tre colonne sopra e/o sotto l'area del post e aver visto come dividere in due o tre parti l'Intestazione di Blogger adesso è la volta di una guida su come aggiungere uno, due, tre o più widget allineati sopra o sotto l'Header.

Il caso di un solo widget è molto semplice visto che basta sbloccare l'elemento Header per poi aggiungere un gadget da Layout. Per due o tre widget allineati la cosa è un po' più complessa e dovremo mettere mano al codice. In sostanza dovremo passare da una situazione come questa

Come aggiungere due o più colonne sopra e/o sotto l'area del post nel Layout di Blogger.

Più di tre anni e mezzo fa pubblicai un post per modificare il layout di Blogger in modo di aggiungere delle colonne sopra e/o sotto la zona del post di Blogger. Questa modifica è interessante per chi voglia aggiungere subito sopra o subito sotto ai post non un solo widget ma almeno due gadget incolonnati. Le colonne possono essere configurate della stessa larghezza ma anche di diverse dimensioni. Inoltre invece che due colonne si può scegliere di inserirne tre o anche di più mantenendo la stessa sintassi.

Mi sono deciso a riprendere quell'articolo perché da allora sono sopravvenute molte modifiche nel codice di Blogger e ho potuto constatare da dei commenti ricevuti che alcuni lettori non riuscivano a implementare tali modifiche. Per fissare le idee questa è la situazione iniziale in Layout

Come bloccare o sbloccare un widget di Blogger.

Gli utenti di Blogger andando su Layout possono organizzare i framework dei vari elementi trascinandoli con il mouse per posizionarli altrove oppure andare su Modifica per cambiarne i contenuti o addirittura per eliminarli. Specialmente nei template scaricati da internet ci sono però degli Elementi pagina bloccati che non possono essere né spostati né tanto meno eliminati.

In realtà è abbastanza semplice bloccare o sbloccare dei widget se si sa come cercare il codice HTML in un template di Blogger. L'esigenza di bloccare un widget è rara e in genere viene usata solo dagli web designer ma quella di eliminare i vincoli dei gadget è invece molto sentita dagli utenti. È spesso il widget della Attribuzione che finisce nell'elenco degli imputati anche se personalmente ritengo che l'autore del template debba avere un qualche riconoscimento se non altro come backlink.

Nuova grafica per le Pagine Statiche di Blogger.

Dopo la frenetica attività di restyling  della piattaforma Blogger avvenuta negli anni scorsi erano invece diversi mesi che il servizio di blogging di Google sembrava finita nell'immobilismo. Questo aveva dato adito a ipotesi anche apocalittiche come quella della cancellazione di Blogger così come è successo con Google Reader e altri servizi minori. Questi sospetti credo siano assolutamente infondati in quanto i siti ospitati su Blogger portano a Google un notevole flusso di denaro derivante dalla pubblicità fornita dallo stesso Google. Una cosa è cancellare un servizio in perdita un'altra è rinunciare a delle entrate sicure.

Comunque l'immobilismo è finito visto che da qualche ora è disponibile una nuova funzionalità della Bacheca che riguarda le Pagine Statiche. Queste sono state assimilate ai post per quello che riguarda la loro modifica. Ecco come si presenta la nuova Scheda Pagine

Come mostrare link e numero di commenti sotto il titolo del post in Blogger.

La piattaforma Blogger ha una funzionalità non troppo conosciuta per spostare gli elementi del post in posizioni diverse. Per configurare cosa vedere nei singoli articoli e in che ordine visualizzarli bisogna configurare il post andando su Layout > Post sul blog > Modifica, mettendo la spunta agli elementi che si vogliono mostrare e trascinandoli con il mouse nella posizione desiderata. Dopo ciascuna modifica occorre andare su Salva per rendere effettive le nuove impostazioni.

Questa funzionalità è perfettamente in grado di ordinare gli elementi quando vengano posizionati sotto il Corpo del post ma non risponde alle aspettative se si volesse spostare uno o più elementi al di sopra dell'articolo. Questo accade non solo per i modelli molto personalizzati ma anche per i template ufficiali.

A seguito di una richiesta postatami nella pagina fan vado a illustrare come visualizzare il link con il numero dei commenti sotto il titolo del post invece che nel footer come di default

Come nascondere sidebar, footer e commenti in un post di Blogger.

Mi ricordo quando per la prima volta pubblicai un tutorial per nascondere le sidebar nei nuovi modelli di Blogger e per applicare queste personalizzazioni a una singola pagina statica. Seguendo la falsariga del post in cui illustravo come mostrare un background personalizzato in un determinato articolo vediamo come sia possibile modificare il layout di un qualsiasi post o di una singola pagina statica senza neppure intervenire nel codice del modello.

La prima cosa da fare è quella di scoprire i fogli di stile di tutti gli elementi che vogliamo modificare o nascondere. Si può usare Firebug, estensione di Firefox, oppure la più semplice Firebug Lite per Chrome. Chi non le conoscesse può leggersi i post che ho linkato e dove ho anche pubblicato dei videotutorial di questi addon per i due browser.

Ogni modello ha una struttura dei fogli di stile sotto certi aspetti unica, dobbiamo quindi scoprirli tramite Firebug e Firebug Lite. Con quest'ultima basta cliccare sul destro del mouse e scegliere Inspect with Firebug Lite per poi cliccare su Inspect e selezionare con il mouse l'elemento che ci interessa.

Come inserire un cursore di scorrimento nei widget di Blogger.

I blogger si trovano molto spesso ad affrontare questioni di spazio nella gestione del layout. Si devono sempre cercare dei compromessi tra far vedere al visitatore il più possibile e la mancanza di spazio sufficiente per poterlo fare.

Sono sicuro che questo semplicissimo tutorial risolverà dei problemi a molti di voi. Come tutte le cose particolarmente efficienti è di una immediatezza disarmante e può essere usato per tutti i widget di Blogger o di altre piattaforme che vengano installati mediante codice HTML/Javascript.

L'idea è quella di inserire un cursore nel widget in modo da ridurne drasticamente l'altezza ma non la possibilità di consultarlo. Vi faccio un esempio pratico. Se volete mostrare il widget degli articoli recenti relativamente agli ultimi 25 post, questo avrebbe una altezza decisamente troppo elevata e comprometterebbe gli equilibri estetici del layout. Se invece poniamo che debba essere alto solo 150 pixel e inseriamo un cursore ecco che tutto viene risolto

Come aggiungere l'Icona Preferita a Blogger.

Da molto tempo i più esperti avevano inserito la favicon per mostrare una immagine diversa dalla B bianca di Blogger su sfondo arancione nella barra del browser. Poi Blogger ha introdotto questa funzionalità prima su Blogger in Draft e successivamente nella Bacheca normale.

Nella versione italiana all'inizio c'erano dei problemi di grafica visto che la scritta del widget era parzialmente coperta da Modifica. Da qualche settimana è tutto perfettamente funzionante. Ho potuto testare questa feature su Chrome, Firefox, Internet Explorer 9 e Safari e funziona con tutti i browser. Per vedere correttamente l'icona potrebbe essere necessario rinfrescare un paio di volte la pagina per acquisire i nuovi cookie.

Vediamo come procedere per inserire la favicon o Icona Preferita direttamente dalla Bacheca di Blogger. Per prima cosa bisogna procurarci una immagine perfettamente quadrata nei formati JPG, PNG, GIF. In teoria si potrebbero anche caricare immagini animate ma non ho testato se si animano effettivamente e dovrebbero essere comunque di peso inferiore ai 100kB.

Per rendere una immagine perfettamente quadrata si può usare un programma di grafica quale Photoshop o Gimp. Se nel computer non ne abbiamo installato nessuno, possiamo procedere a un ritaglio e a un eventuale ridimensionamento con l'ottimo editor Pixlr che è uno strumento online. Si apre Pixlr, si clicca su Apri immagine dal computer e si seleziona il file da modificare. Successivamente si può ritagliare la foto e ridimensionarla

Come aggiungere due colonne sopra o sotto l'area del post su Blogger

Ho già illustrato come dividere l'header in due parti e come dividere in tre o quattro parti l'area sotto l'header. In questo articolo vediamo come sia possibile aggiungere due colonne sopra l'area del post e due colonne sotto l'area del post. Dico subito che le colonne possono anche essere tre e che si possono aggiungere solo quelle sopra, solo quelle sotto o entrambe. Si può inoltre aggiungere per esempio tre colonne sotto l'area del post e due colonne sopra.

Per effettuare questa personalizzazione basta inserire degli elementi Aggiungi un gadget in quella zona del layout. Successivamente sarà facile inserire dei widget che possono essere del tipo HTML/Javascript oppure di altro genere. L'obiettivo è quello di creare un layout di questo tipo

Come ridurre lo spazio sotto il modulo dei commenti di Blogger.

In alcuni modelli di Blogger, specie dopo che si sono fatte delle personalizzazioni, qualche volta compare stranamente un grande spazio vuoto sotto il modulo che si usa per commentare, sempre che si sia utilizzata l'opzione del suo incorporamento sotto il post. Come mi è stato più volte fatto notare nei commenti, se non si sono aggiunti altri elementi in quella zona del template, potrebbe verificarsi una cosa simile a questa

Come inserire due widget da entrambi i lati dell'header di un blog su Blogger.

Mi sono già occupato di come dividere l'Intestazione o Header del blog in due parti e di come inserire sotto l'header tre widget separati. Questo articolo introduce una personalizzazione ulteriore per permettere di inserire nell'header nel blog due nuovi widget, uno sulla sinistra e uno sulla destra. Si può trattare di testo, immagini, video o qualsiasi altro gadget che possa essere inserito in Blogger.

Se si va su Layout si vede che non è possibile inserire dei gadget nella Intestazione di un blog su Blogger perché l'elemento è bloccato

 

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 eliminare il messaggio Visualizzazione degli ultimi post … quando si apre una etichetta.

In Blogger si può accedere a tutti i post pubblicati con una determinata etichetta cliccandoci sopra alla fine di un articolo, andando sulla tag nel widget della nuvola di etichette, cliccando sul gadget Blogumus o semplicemente aprendo una pagina di questo tipo

 http://nome-blog.blogspot.com/search/label/nome-etichetta

All'inizio della pagina Blogger mostra questo messaggio : Visualizzazione degli ultimi post con etichetta "nome-tag" - Mostra tutti i post (o i post precedenti)

Mi fu chiesto in un commento se fosse possibile togliere questa frase perché è colorata di grigio e non si adatta al layout di molti blog. Se si immette un nome di etichetta che non esiste, il messaggio diventa