Creare dei titoli animati per i video

Per rendere più professionale un video che abbiamo realizzato con il cellulare, con una fotocamera o anche con un programma per screencast del computer, è consigliabile aggiungere un titolo all'inizio dello stesso e magari prima di ogni sezione del filmato, se non fosse costituito da un'unica scena.

Un titolo animato fa indubbiamente un effetto migliore di un titolo statico. In questo articolo vedremo appunto come creare tali video animati con due programmi multipiattaforma che quindi possono essere entrambi installati su Windows, Mac e Linux.

Sarà per esempio possibile creare dei titoli animati in tre dimensioni con lo stile di Guerre Stellari con il testo che si allontana con un effetto prospettiva. Sono disponibili anche altri stili tra cui due per mostrare dei percorsi su un mappamondo che ricordano Google Earth. Molto interessanti anche i titoli animati che mostrano il titolo dopo un ciak, quelli con riflessi di lenti e con cornici di foto.

Come creare Titoli in 3D per i video con Openshot e Blender.

Sicuramente avrete visto almeno un film della serie Star Wars o Guerre Stellari come da traduzione in italiano. All'inizio del film viene mostrato un titolo in tre dimensioni con un testo che si muove con una prospettiva verso l'infinito.

In questo articolo vi mostrerò come creare un titolo in tre dimensioni con lo stesso stile e come crearne altri con più di 20 stili diversi tutti animati e tutti in tre dimensioni. Si usano i modelli predefiniti dei titoli in tre dimensioni presenti in OpenShot che però hanno bisogno del programma Blender per funzionare.

Sia Openshot che Blender sono programmi gratuiti, open source e multipiattaforma che possono essere installati su Windows, Mac e Linux. Per fare in modo che questi due programmi funzionino in sinergia occorre solo una semplice configurazione come vedremo in seguito.

COME SCARICARE E INSTALLARE OPENSHOT E BLENDER

Prima di poter creare il Titolo in 3D occorre scaricare e installare i due programmi menzionati:

1. Scarica e Installa Openshot
2. Scarica e Installa Blender

Sia nella pagina di download di Openshot sia in quella di Blender si potrà scegliere il file adatto al nostro sistema operativo e alla nostra macchina da 32bit o da 64bit.

Come personalizzare i titoli dei widget di Blogger.

Ho ricevuto una richiesta in un commento a cui mi era difficile rispondere in modo esauriente quindi ho deciso di farlo con un post che penso possa interessare anche altri lettori e che prende in esame un aspetto più generale.

La domanda riguarda la possibilità di modifica del colore di sfondo del titolo del widget dei Lettori Fissi. In questo post vedremo gran parte delle possibili modifiche che si possono effettuare all'aspetto dei titoli di tutti i widget di Blogger. Vedremo come modificare i titoli di tutti i widget e come invece modificare quello di uno soltanto. Oltre al colore di sfondo potremo cambiare il colore del testo, la famiglia di caratteri, l'allineamento e la dimensione dei font.

Aggiungere bordo arrotondato ai titoli dei widget di Blogger.

Ho appena ricevuto un commento in cui mi si chiede come contornare i titoli dei widget con un bordo arrotondato. Si tratta di una personalizzazione non semplicissima perché per una ragione che ancora non ho compreso la regola CSS dei titoli dei widget di Blogger è la stessa di quella della data.

Quindi se si utilizza il selettore del titolo dei gadget per aggiungere delle regole generali, verranno modificati non solo quest'ultimi ma anche la data, e questo spesso va contro le esigenze dell'amministratore del sito. Come soluzione si possono trovare gli ID dei singoli widget e applicare la regola in modo selettivo.

Come aggiungere una sottolineatura anche animata al titolo del post in Blogger.

Ho recentemente pubblicato un articolo su come si possa personalizzare il titolo del post in Blogger. Queste modifiche sono sempre molto richieste tanto che in questo post voglio aggiungerne un'altra vale a dire la possibilità di sottolineare il titolo anche per dividerlo dal resto del contenuto e eventualmente anche da banner pubblicitari che possono essere inseriti subito sotto.

L'inserimento di una riga di sottolineatura può essere fatta con l'aggiunta di un tag HTML  o con un CSS. In entrambi i casi dobbiamo modificare il modello quindi prima di procedere bisogna aver salvato il template per un eventuale ripristino.

Come centrare il titolo del post in Blogger.

Giusto ieri ho ricevuto un commento che mi chiedeva come si potesse centrare il titolo dell'articolo in Blogger. Visto che il tema può interessare altri lettori e che era difficile spiegarlo in un commento ho pensato di realizzare un breve articolo che illustra come centrare il titolo nella versione desktop e/o nella versione mobile di Blogger.

I codici che pubblicherò si riferiscono a un template ufficiale di Blogger. Chi avesse un modello scaricato da internet dovrà modificare i codici sostituendo i selettori univoci del titolo utilizzando gli strumenti Ispeziona Elemento di Chrome e Analizza Elemento di Firefox.

Con Firefox si clicca con il destro del mouse sulla pagina in questione e si sceglie Analizza Elemento. Si aprirà un riquadro in basso in cui cliccare nella icona in alto a sinistra per poi andare con il mouse sul titolo dell'articolo. Si visualizzerà il selettore dell'elemento da sostituire solo se diverso da quello ufficiale

Come personalizzare l'aspetto del titolo dei post di Blogger.

Il titolo del post è uno dei più importanti fattori di ranking per i motori di ricerca ma anche un elemento fondamentale per far preferire agli utenti il nostro articolo, e quindi cliccarci sopra, quando visualizzano risultati di ricerca di Google. Un titolo deve essere breve ma descrittivo e tale compromesso non è sempre facile da trovare.

In questo articolo mi occuperò del titolo da un altro punto di vista cioè del suo aspetto. Le dimensioni dei caratteri e il colore del titolo del blog sono determinati dal modello e possono essere modificati cercando nel template il blocco di codice che inizia con h3.post-title e che tra le parentesi graffe contiene le informazioni per colori, dimensioni, margini e famiglia di font.

Come aggiungere una immagine prima e/o dopo il titolo di un widget di Blogger.

I titoli dei widget di Blogger sono inseriti con il tag <h2> che è lo stesso utilizzato anche per la data. Non è quindi agevole modificare l'aspetto dei titoli di tutti i gadget di Blogger senza modificare anche l'aspetto della data. Una operazione come quella di aggiungere una icona al titolo del post non si può compiere con la stessa procedura.

Però si possono aggiungere immagini prima e dopo il titolo di un singolo widget inserendo un opportuno CSS in funzione del suo ID. Innanzitutto dobbiamo aprire Picasa e aggiungere l'icona o le icone che vogliamo utilizzare per questa personalizzazione quindi dobbiamo ricavare il loro URL diretto. 

Come mostrare il titolo del post prima del nome del blog nei link su Facebook e nelle ricerche.

L'obiettivo degli webmaster è quello di posizionare al meglio i post del proprio sito nei risultati di ricerca specie del motore di ricerca per antonomasia. Come è noto l'algoritmo di Google si basa su più di duecento fattori di ranking.  Oltre che pubblicare contenuti di buon livello bisogna stare attenti a inserire il tag Alt nelle immagini, prestare grande attenzione al titolo del post, inserire la giusta densità di parole chiave nel testo, aggiungere collegamenti a nostri articoli passati che trattavano lo stesso tema e linkare risorse esterne al sito per arricchire la nostra offerta.

Questo però non è sufficiente. Avere il nostro articolo nelle prime posizioni dei risultati di ricerca non significa che poi verrà scelto tra gli altri. È dimostrato che il primo risultato è il più cliccato e poi gli altri a seguire. In questa fase è particolarmente importante l'autorevolezza di un dominio. Se l'utente che ha effettuato la ricerca trova tra i risultati un post proveniente da un sito che ha già aperto e di cui conosce la affidabilità probabilmente sarà quello su cui cliccherà.

Come aggiungere una immagine all'inizio o alla fine dei titoli dei post su Blogger.

Alcuni siti pubblicano articoli su diversi argomenti che possono essere organizzati mediante le etichette. Il lettore però non ha immediata evidenza di che cosa tratti l'articolo. Forse non tutti lo sanno ma il Titolo dei blog su Blogger supporta molti tag contrariamente per esempio ai commenti che supportano solo i tag di grassetto e corsivo oltre a quello del link.

C'è però la controindicazione che specie la prima parte del titolo viene indicizzata da Google quindi inserirvi una immagine può portare dei problemi a livello di SEO. È opportuno quindi qualora si scelga questa opzione di aggiungere la foto o icona alla fine del post.

Come evidenziare il titolo di un post di Blogger.

Dopo aver mostrato come personalizzare i font, i colori  e come aggiungere immagini al titolo di un post di Blogger adesso vediamo come si possa anche evidenziare. Si può decidere di evidenziare tutti i titoli del blog ovviamente con lo stesso colore oppure di evidenziare un singolo titolo con un dato colore per poi evidenziarne eventualmente un altro con un colore diverso.

La ragione di questa scelta estetica può essere quella di dare maggior forza a un titolo in cui crediamo particolarmente. Mentre esiste su Modello >Personalizza > Avanzato la possibilità di modificare il colore di sfondo della data questa opzione non esiste per il Titolo del post. 

COME EVIDENZIARE TUTTI I TITOLI DEI POST DI BLOGGER

Dopo aver salvato il template si va su Modello > Modifica HTML, si cerca la sezione <b:skin> intorno alla 14-esima riga e si clicca sulla freccetta nera sulla sinistra per visualizzare tutto il codice. Tramite Ctrl+F si cerca quindi la riga di codice ]]></b:skin> e, subito sopra, si incolla questo codice

Come personalizzare, font, colori e dimensioni dei titoli di Blogger e inserirvi immagini.

Alla luce di una conversazione avuta nei commenti su un vecchio post che riguardava la sottolineatura dei titoli di Blogger è forse opportuno integrare l'articolo in cui mostravo come si potesse mostrare solo una parte del titolo in corsivo (o in grassetto) con un nuovo post più approfondito.

Cominciamo col dire che forse non tutti sano che si possono aggiungere una o più immagini al titolo di Blogger. Si possono mettere all'inizio, alla fine oppure nel mezzo del titolo stesso. La piattaforma Blogger infatti supporta l'inserimento del tag <img> nel campo del titolo.

Cambiare colore e carattere al titolo di un widget di Blogger.

Nel post precedente abbiamo visto come utilizzare Analizza Elemento di Firefox per trovare i selettori di un oggetto o di una selezione presente nel layout. In questo articolo vedremo come applicare queste conoscenze a un tema specifico vale a dire alla modifica dell'aspetto del titolo di uno o più widget del nostro blog su Blogger.

Se si analizza l'elemento con Firefox o con Chrome troveremo che il selettore del titolo di gadget è h2 che però è lo stesso non solo di tutti i titoli dei widget ma anche della data.  Quindi se noi aggiungessimo un CSS del tipo h2 { … } si andrebbero a modificare tutti questi elementi. Per cambiare aspetto solo al titolo di un particolare widget dobbiamo determinarne l'ID. Se utilizzate Firefox o Chrome basterà cliccare nella icona del cacciavite e della chiave inglese che vengono visualizzati dall'amministratore del blog quando si sia loggato con il suo account Google. Alternativamente potete andare su Layout e cliccare su Modifica nel widget di cui volete personalizzare il titolo. Nella finestra che si apre dovete scorrere tutto l'indirizzo fino in fondo aiutandovi con i tasti direzionali

Come mostrare parte del titolo in corsivo su Blogger.

Ho appena ricevuto una una email in cui mi si chiedeva un aiuto per pubblicare una parte del titolo in corsivo mentre l'altra parte nel modo consueto. Pare che i nomi botanici in latino per convenzione debbano proprio essere postati in corsivo e questo pone appunto il problema di visualizzarli in modo diverso rispetto al resto del titolo. Nel caso in cui si volessero tutti i Titoli di un blog su Blogger in corsivo non si deve fare altro che andare su Modello > Personalizza > Avanzato > Titolo blog e si scegliere tra l'altro la Famiglia dei font e la loro dimensione. Pigiando poi sulla icona I si può settare il titolo in corsivo mentre se si sceglie l'icona B si visualizzerà in grassetto.

Nel caso che mi è stato prospettato nella email si tratta di avere solo una parte del titolo in corsivo. Per essere più chiaro prendo come esempio proprio quello che mi è stato proposto nel messaggio. Dobbiamo creare un titolo come questo 

Come mostrare la descrizione sotto il titolo del blog nei Modelli a Visualizzazione Dinamica di Blogger.

Nei Modelli a Visualizzazione Dinamica o Dynamic Views di Blogger le personalizzazioni sono molto limitate e questo è un vero peccato perché la potenzialità di questi template e la loro velocità di caricamento ne farebbero un prodotto ottimale per chi si diletta con il blogging. È finalmente disponibile anche per quei modelli la funzione per selezionare uno sfondo tra quelli proposti nella Libreria oppure di caricarne uno di nostro gradimento con cui creare un Header o Intestazione.

Si va su Modello > Personalizza > Sfondo > Immagine di sfondo e se ne sceglie una tra quelle proposte. Alternativamente si può andare su Carica immagine e selezionare una immagine dal nostro computer che abbia esattamente le dimensioni dell'Header o Intestazione (soprattutto in altezza). L'immagine in questo modo sarà lo sfondo di tutto il blog. Andate adesso su Allineamento e selezionate uno dei tre proposti in alto (a sinistra, al centro o a destra). 

Mostrare il titolo del blog scorrevole nella scheda del browser.

Cercare di colpire i lettori fin dalla prima volta che arrivano sul nostro sito è uno dei sistemi più validi per poterli fidelizzare. Naturalmente per farlo la cosa migliore è cercare di offrire informazioni valide e dei contenuti emozionanti e pieni di aspettativa ma si può anche agire sul design del sito rendendolo più originale. Più che slideshow fantasmagorici o widget straordinari possono fare la differenza dei piccoli accorgimenti in grado di stupire il navigatore quel tanto che basta per farlo diventare un nostro lettore abituale.

Abbiamo già visto come inserire dei Ticker scorrevole di notizie e, seguendo la falsariga dello slide, in questo post vediamo come si possa mostrare nella scheda del browser il titolo del sito o qualunque altro testo in modo scorrevole. Questa personalizzazione funzionerà su tutti i principali browser desktop mentre non si può dire nulla di certo per il mobile. L'immagine animata seguente è stata presa con Firefox

 

Come aggiungere Occhiello e Cappello al Titolo di un Articolo.

Proprio ieri ho letto un post nella Pagina Facebook di questo blog che ha stimolato la mia curiosità. Mi si chiedeva se fosse possibile creare dei sottotitoli con Blogger. Sul momento sono rimasto un po' interdetto e ho pensato che la lettrice avesse fatto confusione tra un post e un video. Riflettendo però ho realizzato che si riferiva alla impaginazione degli articoli tipica dei quotidiani cartacei. Insieme al titolo principale che prende la maggior parte del riquadro e al corpo dell'articolo spesso ci sono uno e talvolta altri due elementi che illustrano meglio il contenuto e che si trovano sopra o sotto il titolo principale.

In gergo giornalistico il titolo secondario che si trova sopra a quello principale si chiama Occhiello e serve a introdurre il tema del contenuto mentre l'altro elemento che si trova sotto al titolo principale si chiama Cappello e funziona come introduzione all'articolo. Vediamo come sia possibile in Blogger pubblicare un post con questi due elementi di contorno del titolo principale.

Come mostrare una riga di sottolineatura anche animata e colorata nel titolo del post di Blogger.

Andiamo per gradi in quella che è una personalizzazione modesta ma che può risultare gradita agli utenti più attenti all'originalità dell'aspetto del loro blog su Blogger. Esiste un tag HTML che serve per introdurre una riga orizzontale, si tratta di <hr>. Questo tag non può essere inserito in questo modo nel template di Blogger in quanto è possibile che quest'ultimo non venga salvato. Bisogna convertire il tag in XML come abbiamo fatto altre volte usando per esempio lo strumento Parse HTML che convertirà il tag in una espressione che è invece accettata da Blogger.

La conversione di <hr> ci porta a ottenere &lt;hr&gt; e adesso vediamo dove potrebbe essere inserita. Dopo aver salvato il template andate su Modello > Modifica HTML e cercate la riga

<b:includable id='post' var='post'>

Scorrete il codice verso il basso fino a trovare le righe <div class='post-header'> o    <div class='post-header-line-1'/> e, subito sopra a una di queste, incollate

Come aggiungere immagini a nome e descrizione del blog e al titolo del post in Blogger.

Gli utenti di Blogger sono già a conoscenza della possibilità di inserire una immagine nella Intestazione del blog che può sostituire il nome dello stesso o essere messa come sottofondo a Nome e Descrizione. Ho anche illustrato un procedimento per inserire una icona prima o dopo il titolo di tutti i post. La cosa sorprendente di Blogger è che nelle Impostazioni di base in cui si possono cambiare nome e descrizione del blog nei rispettivi campi si può anche inserire del codice HTML. Non sono supportati tutti i tag ma lo è sicuramente quello per aggiungere delle immagini.

Con mio stupore ho potuto constatare che i tag delle immagini sono supportate anche nei titoli dei post. Questo comporta che per esempio potremo aggiungere foto insieme al nome o alla descrizione del blog e icone prima o dopo il Titolo di un post.

Come aggiungere Titolo, Miniatura e Sommario a Post più Recenti e Post più Vecchi in Blogger.

Alla fine di ciascun post di Blogger sono presenti tre link che rimandano rispettivamente alla Homepage, al Post più Recente e al Post più Vecchio di quello che stiamo visualizzando. Questo sistema di navigazione viene usato dai lettori che amano particolarmente quello che scriviamo e che vogliono visualizzare i nostri contenuti uno per uno. Questi tre link a fondo pagina non sono molto amati dagli utenti di Blogger e in passato ho presentato delle personalizzazioni per sostituirli con tre icone. Mi ricordo di aver anche illustrato un metodo per mostrare direttamente il titolo del post al posto delle espressioni Post più vecchio e Post più recente che non danno nessuna informazione sul link che si va ad aprire.

Il bravissimo blogger finlandese MS - potilas, programmatore in pensione affetto da sclerosi multipla, ha messo a punto un sistema per sostituire questi link con Titolo, Miniatura e Snippet dell'articolo che andremo ad aprire. L'ho tradotto e modificato in qualche dettaglio che illustrerò alla fine. In sostanza in fondo a tutti i post visualizzeremo miniatura, titolo e snippet