Come funziona il nuovo Editor del modello di Blogger.

Come funziona e quali sono le caratteristiche della nuova interfaccia dell'Editor HTML del modello di Blogger.

Stamani ho ricevuto una email in cui mi si chiedevano delucidazioni sulla nuova grafica dell'Editor del template di Blogger. Mi sono incuriosito e sono andato a vedere. In effetti come annunciato da Blogger Buzz sono state apportate molte migliorie nella visualizzazione del codice sorgente dei nostri blog. Alle novità bisogna però abituarci e a prima vista la grafica sembra meno usabile della precedente che in sostanza aveva solo l'opzione Espandi i modelli widget che adesso non è più presente.

Le novità introdotte riguardano la possibilità di accedere immediatamente al codice di un particolare widget attraverso un menù verticale, la possibilità di espandere il codice di un dato blocco, l'anteprima del blog visibile direttamente nella stessa area, la formattazione del codice, la numerazione delle righe, la colorazione diversa dei vari elementi per aiutare i programmatori e le opzioni Trova e Sostituisci. Per operare sul template si va sempre su Modello > Modifica HTML e la scheda che si aprirà di default sarà quella Modifica Modello

VAI AL WIDGET

Usando questa opzione si può andare direttamente al gadget di cui si conosca l'ID cliccandoci sopra. Il contenuto principale del blog, quello che su Layout viene denotato da Post sul blog ha l'ID Blog1

Per espandere il codice relativo a un widget o a Blog1 si clicca sulla freccia nera presente sulla sinistra. Se si clicca nuovamente sulla stessa area, il modello si collassa di nuovo

Come vedete nel caso di Blog1 ci sono diverse sezioni di codice suddivise in blocchi oltre alla diversa colorazione e alla identazione che aiuta nelle modifiche. C'è il blocco dei commenti nidificati come quello dei bottoni ufficiali di Blogger. Secondo Blogger Buzz con questo sistema sarà più semplice spostare un elemento più in alto o più in basso del layout. Nelle personalizzazioni l'area di Blog1 più usata è quella denotata da id='post' in cui si possono trovare le righe dove incollare bottoni, banner o altri oggetti. Andando sempre sulla freccetta nera accanto a id='post' possiamo scoprire tutto il codice

Se leggete un tutorial in cui vi si chiede di cercare la riga <data:post.body/> o l'altra riga <div class='post-footer'> queste si troveranno proprio aprendo Blog1 > id='post' e pigiando su F3 o su Ctrl+F.

ESPANDERE IL CODICE DEI VARI SEGMENTI

Come detto si può espandere il codice di ciascun widget cliccando sulla freccetta nera a sinistra. Cliccando nuovamente nella stesa zona si collassa di nuovo tutto il codice. In genere occorrono due click

Con il primo si visualizzano le righe che servono per inserire i tag condizionali che sono evidenziate di blu nello screenshot mentre con il secondo click si vede tutto il codice.

ANTEPRIMA DEL MODELLO NELLA STESSA SCHEDA DEL BROWSER

Andando su Anteprima Modello si visualizzerà il blog prima di aver salvato le modifiche



Sono sempre presenti i bottoni Salva modello, Annulla modifiche e Ripristina modelli widget ai valori predefiniti che non è il caso di usare se non in caso di assoluta necessità quando siamo nel caos più totale perché equivale alla formattazione del PC o al ripristino delle impostazioni di fabbrica nei cellulari.

FUNZIONE CERCA E SOSTITUISCI

Se andiamo su Modifica Modello, clicchiamo nell'area del codice e digitiamo Ctr+F si aprirà una casella per cercare una data occorrenza. Se si digita e si va su Invio e si visualizzeranno tutte quelle presenti

Se invece digitassimo Ctrl+Shift+F visualizzeremo la casella Replace. Digitando la parola e andando su Invio si potrà sostituire tale stringa con un'altra

Per il momento userò ancora il browser per queste operazioni e per le sostituzioni meglio non abbandonare ancora il buon Notepad++ fino a che non avrò padroneggiato questi nuovi  strumenti.

FORMATTAZIONE DEL MODELLO

Se siete della idea di avere modelli molto compatti per ottimizzare la richiesta di indirizzi e quindi aumentare la velocità di caricamento della pagina allora questa opzione può essere in qualche modo controproducente. E' invece molto utile per mettere ordine nel vostro template specialmente se è stato personalizzato a più riprese. Cliccando su Formatta Modello, il codice diventerà molto più leggibile

In questo caso i CSS e i javascript prenderanno la loro struttura classica di identazione e saranno più facilmente identificabili e quindi modificabili. Prima di salvare il modello dopo averlo formattato è opportuno andare su Anteprima Modello per verificare che sia tutto OK.

CONCLUSIONI

Sembra che questo nuovo Editor sia stato introdotto a tutti gli utenti di Blogger e che non ci siano opzioni per tornare alla vecchia interfaccia. Nei tutorial che siete abituati a seguire dovete abituarvi a trovare il codice in modo diverso rispetto al classico Espandi i modelli widget quindi su Ctrl+F. Le novità introdotte vanno indubbiamente verso un miglioramento dell'Editor e della sua usabilità ma come in tutte le cose bisognerà prenderci pratica. Quando le cose si saranno un po' stabilizzate sarà mia cura pubblicare un tutorial nel mio Canale Youtube su questo nuovo Editor del template di Blogger.