Videotutorial di Windows Live Writer, il miglior software per pubblicare post su Blogger o Wordpress

Ho pensato di fare cosa gradita ai lettori di questo blog realizzando un video tutorial per illustrare tutte le caratteristiche principali di Windows Live Writer che è un programma davvero insostituibile per i blogger. Permette infatti di velocizzare al massimo le procedure di pubblicazione dei post, consente di curarne meglio la confezione e l'aspetto; inoltre ha anche dei vantaggi dal lato SEO perché consente di ottimizzare le immagini aumentando la velocità di caricamento della pagina e inserendo in modo naturale i tag Alt e Title che, oltre ai motori, sono utili anche ai navigatori.

La realizzazione del filmato è stata fatta con l'ottimo programma Camtasia attraverso la registrazione dello schermo associata all'uso del microfono. Camtasia ha anche un sistema di produzione video denominato Smart Focus che consente di zoomare automaticamente nel punto in cui viene digitato del testo. E' inoltre visibile un cerchio giallo che indica i movimenti del mouse. I singoli spezzoni video li ho poi riunificati attraverso Windows Live Movie Maker che è l'editor di video gratuito della Microsoft e che si trova nella suite Windows Live Essentials. Il tutorial ritengo che sia particolarmente utile soprattutto per coloro che hanno iniziato da poco l'avventura del blogging e che ancora non conoscono tutte le potenzialità di WLW. La pubblicazione su Youtube l'ho effettuata direttamente da Windows Live Movie Maker inserendo le mie credenziali di accesso. In questo modo si risparmia un po' di tempo e non ci sono pericoli di chiusure accidentali di schede del browser. Non si ha però il controllo totale sul filmato postato dato che il rendering e il caricamento avvengono senza soluzione di continuità.

Come creare un blog chiuso visibile solo a utenti registrati.

L'obiettivo di un blogger è quello di essere letto da più persone possibile, questo nella grande maggioranza dei casi. Ci possono però essere delle esigenze diverse che impongono scelte diametralmente opposte. Si può cioè decidere di rendere visibile il blog e tutti i suoi contenuti solo a persone da noi selezionate. Le ragioni possono essere molteplici ma tutte legate ai contenuti che si mette online. Se si tratta di cose riservate si può fare in modo che queste siano visibili solo da una ristretta cerchia di amici.

Dopo aver creato il blog, per impedire che tutti possono visualizzarlo, occorre andare su Impostazioni > Autorizzazioni e, nella sezione dedicata ai lettori del blog, mettere la spunta a Solo questi lettori, quindi inserire gli indirizzi email delle persone invitate

Picasa aumenta lo spazio gratuito per immagini e video.

La notizia è stata accolta dalla comunità dei blogger con pochissimo clamore, credo di essere il primo a parlarne in Italia, a meno di smentite, ma è di quelle che cambiano le prospettive dell'attività di blogging. Google Operating System ha annunciato un significativo aumento dello spazio gratuito a disposizione su Picasa. Tale opportunità viene però offerta con delle modalità davvero originali.

Lo spazio gratuito rimane di 1024MB ma saranno conteggiate solo le immagini che superano gli 800 pixel. Tutto è nato da un thread protagonista Sam, dipendente Google. Magari seguitelo anche voi per vedere se riuscite a capire se gli 800 pixel si riferiscono alla larghezza massima dell'immagine, all'altezza o a entrambe.

Fatto sta che con questo nuovo sistema di calcolo, le piccole immagini (<800px), che poi tanto piccole non sono, non vengono considerate nel computo totale dello spazio occupato su Picasa. Per rendervene conto accedete al vostro account e guardate quanto spazio avete consumato

Il Mi Piace di Facebook per condividere post in Bacheca con un solo click.

Il pulsante Mi Piace applicato a moltissimi blog di tutte le piattaforme da oggi ha una funzionalità in più decisamente interessante. Fino a ieri se si cliccava su un pulsante collegato a un articolo, veniva pubblicata nella nostra Bacheca una brevissima notifica fra le attività recenti inserita insieme alle altre delle ultime ore. Già da diverso tempo, se oltre a cliccare si aggiungeva un commento, questo era considerato alla stregua di un post

 

Adesso, come potete constatare, è sufficiente pigiare sul Like Button di un articolo perché appaia in Bacheca e sia condiviso con i nostri amici

Come inserire delle frasi celebri, dei motti o degli aforismi nel blog in modo casuale.

L'idea è quella di inserire in un elemento del layout del blog che mostri in modo casuale delle frasi che abbiamo scelto. Secondo le varie tipologie di blog si possono selezionare versi di poesie, citazioni, proverbi oppure dei "consigli di vita" da parte dell'autore. Ricordo che con un metodo simile era stato creato un generatore automatico di frasi casuali; in questo caso lo script è ancora più semplice.

Si può incollare in Design > Aggiungi un gadget > HTML/Javascript o anche inserirlo direttamente in un articolo in modalità HTML. Si può anche mettere nel template di Blogger per esempio alla fine di ogni post. In questo caso bisogna andare su Design > Modifica HTML e espandere i modelli widget. Si incolla sotto la riga <data:post.body/> secondo le stesse modalità usate per il codice dell'invito a leggere un articolo a caso. Se si inserisce lo script direttamente nel template, sarà opportuno convertirlo in XML con lo strumento Blogcrowds. Ecco il codice

E' disponibile Windows Service Pack 1 aggiornamento per Windows 7.

Dopo molta attesa delusa finalmente la Microsoft si è decisa a rilasciare Windows Service Pack 1 per Windows 7 che permetterà di aggiornare l'ultimo sistema operativo della casa. Nel pacchetto sono presenti tutti gli aggiornamenti precedenti quindi è un modo per dare nuovo slancio e aumentare la sicurezza del vostro computer. Le ragioni per l'installazione del Service Pack 1 sono riassumibili con questi vantaggi

1. Il PC sempre aggiornato con un più elevato livello di supporto
2. Maggiore facilità per avere gli aggiornamenti successivi
3. Innovazioni nel campo della virtualizzazione

Il download è disponibile oltre che per Windows 7 anche per Windows Server 2008. Si può scaricare l'aggiornamento dal Microsoft Download Center

• Windows Service Pack 1 Download -

Come separare i commenti nei blog su Blogger con bordi o immagini.

Dopo aver presentato la personalizzazione su come inserire i commenti dell'autore del blog in un rettangolo colorato ecco un altro trucco per rendere più vivace quell'area dei siti su piattaforma Blogger. L'obiettivo è quello di inserire un separatore tra commento e commento. Cominciamo con applicare un semplice bordo tra ognuno di essi. Andiamo su Design > Modifica HTML e cerchiamo la riga ]]></b:skin> quindi, immediatamente sopra, incolliamo questo codice

#comments-block .comment-footer {
border-bottom:3px double #940F04; /* Bordo dei commenti */
}

Le parti in rosso possono essere personalizzate e riguardano lo stile del bordo e il suo colore. I commenti saranno divisi tra loro da una linea orizzontale

Google Cloud Connect per caricare automaticamente documenti Office su Google Docs.

La battaglia dell'ufficio sulla nuvola tra Google e Microsoft si arricchisce di un nuovo capitolo piuttosto interessante. Gli sviluppatori della casa di Mountain View hanno messo a punto un plugin da aggiungere a tutti i principali programmi della suite Office per condividere i file automaticamente in rete attraverso il servizio Google Documenti. L'intento di Google è quello di invogliare anche gli utenti di Word, Excel e Powerpoint ad usare il suo servizio di condivisione piuttosto che Office Live Skydrive.

Google Cloud Connect è compatibile con Windows XP (NET.Framework 2.0 o superiore), Windows Vista e Windows XP. Il download è contestuale alla installazione e il plugin verrà aggiunto a tutti i programmi Office compatibili che avete sul PC. Dovrete aprirne uno qualsiasi per effettuare la sincronizzazione con il vostro account Google

Dopo aver cliccato su Login si inseriscono le nostre credenziali Google e si permette l'accesso dell'applicazione nel nostro computer

Notepad++ strumento indispensabile per editare file in tutti i linguaggi di programmazione.

Tutta la comunità internazionale degli sviluppatori sta sostenendo il progetto Notepad++ che è adesso arrivato alla versione 5.8.7 e che avevo già presentato. Si tratta di un progetto open source che è disponibile in ben 57 lingue tra le quali l'italiano. E' fondamentale quando si vogliono modificare file JS, PHP, XML, CSS, ecc.

Si tratta in sostanza di un editor di testo ma con un sacco di funzionalità aggiuntive inserite appositamente per gli sviluppatori. Ha bisogno di macchine equipaggiate con OS Windows e sfrutta le API Win32. Funziona però anche con i sistemi a 64 bit.

 - - Download Notepad++ - -

Ecco in sintesi quello che riesce a fare

1. Evidenzia la sintassi di più di 50 linguaggi di programmazione attraverso una diversa colorazione degli elementi
2. C'è la funzione drag & drop per spostare porzioni di codice con il mouse
3. Autocompletamento del codice e suggerimento dei parametri
4. Evidenziazione delle parentesi
5. Plugin aggiuntivi
6. Registrazioni delle macro per riprodurre sequenze di istruzioni
7. Visualizzazione multitab per aprire più schede contemporaneamente
8. Funzione ricerca e sostituzione
9. Fondamentale usarlo insieme a DropBox se si usa questo strumento di hosting
10. Salvataggio di file in quasi tutti i formati dei linguaggi di programmazione

Menù JQuery Accordion per nuovi modelli di Blogger.

JQuery è uno software framework in javascipt che permette una grande personalizzazione dal lato client. Uno degli effetti più comuni è quello della dissolvenza che permette di far scomparire l'elemento con un effetto slide. Il menù che vado a presentarvi si basa in particolare sulla libreria Accordion e lo avevo già presentato qualche tempo fa. L'obiettivo è stato quello di renderlo compatibile anche con i nuovi template di Blogger ottenuti con il Designer Modelli.

Demo del Menù Accordion -

Il menù è situato nella sidebar di sinistra ma può essere messo anche a destra e personalizzato come dimensioni, colori e font. Ciascuna voce principale può nascondere un indefinito numero di voci secondarie che verranno aperte cliccandoci sopra con il mouse

Come aggiungere link al widget delle pagine statiche per creare un menù.

In Blogger, dopo l'introduzione delle pagine statiche, si può creare un menù orizzontale formato proprio da tutte quelle pagine che sono state pubblicate e che possono arrivare fino a dieci. Il menù che si viene a creare può essere inserito in senso orizzontale sotto l'intestazione o in senso verticale in una sidebar. C'è anche la possibilità di non associare alcun widget alle pagine statiche che è stata la scelta di questo blog. Blogger non dà nativamente la possibilità di inserire dei collegamenti a degli URL che non siano di pagine statiche di quello stesso blog.

Vediamo come sia possibile ovviare a questo problema e di come si possa creare un menù orizzontale molto efficiente e semplice da realizzare. Per prima cosa dobbiamo aver pubblicato almeno una pagina statica e averla salvata nel widget orizzontale. Andiamo adesso su Design > Modifica HTML e salviamo il modello completo. Dopo aver messo la flag a espandi modelli widget cerchiamo questo codice

Youtube modifica il metodo di incorporamento dei video.

La ragione per la quale c'è stata una modifica del codice per incorporare i video di Youtube forse risale all'introduzione del HTML5 che avrà un grosso impatto proprio nella gestione dei video. Al posto del contenitore object è quindi stato preferito un più flessibile iFrame che del resto verrà tra poco utilizzato anche da Facebook e che manderà in pensione applicazioni che hanno fatto la sua storia come Static FBML.  

Quando si inserisce un video con Windows Live Writer non si noteranno differenze perché, tramite l'apposito plugin, si incollerà solo l'URL del video. Se invece si usano altri metodi di pubblicazione dei post, per inserire un video dovremo andare su Codice da incorporare e sarà visibile un codice molto più corto basato come detto su un iFRame

Come incorporare un Canale di Youtube nel blog.

Molti blogger usano Youtube come supporto dei loro articoli e in molti casi i video postati sono la parte più interessante della loro produzione. 

Possono quindi avere l'esigenza di mostrare sul blog tutti i video del loro Canale per dare ai visitatori la possibilità di scorrerli e aprirli senza lasciare il sito.

Il procedimento per embeddare un Canale di Youtube è semplicissimo visto che c'è solo da incollare in un widget HTML questo codice

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/youtube.xml&up_channel=NomeCanale&synd=open&w=320&h=390&title=&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>

Dobbiamo sostituire a NomeCanale l'ID del Canale che vogliamo incorporare che poi non è altro che il nome dell'account. In teoria possiamo anche incorporare un Canale che non ci appartiene. Le dimensioni si possono modificare rispetto a quelle proposte, evidenziate di viola, ma potremmo nascondere qualcosa in caso di rimpicciolimento.

Come inserire l'invito a leggere un altro post a caso alla fine dell'articolo su Blogger.

Uno dei dati più importanti che si possono desumere da Google Analytics è quello del tempo medio che un visitatore trascorre nel nostro sito. Un  suo aumento porta sicuramente dei benefici al blog visto che ne aumenta la reputazione agli occhi dei motori di ricerca. Dobbiamo quindi cercare tutti i modi possibili per invogliare il visitatore occasionale a rimanere ancora a leggere i nostri post.

I sistemi più usati sono quelli di mostrare i widget degli Ultimi Articoli, quello degli Articoli Correlati, l'elenco delle etichette del sito, insomma bisogna mettere in bella vista tutto quello che offre il blog. Una cosa carina che potrebbe avere un certo impatto è quella di inserire una scritta direttamente nel modello che inviti a leggere un altro articolo casuale  del blog. Il testo comparirà alla fine di tutti i post e potrà essere personalizzato a piacere. Ecco uno screenshot che mostra una scritta di questo genere

Come eliminare lo spazio superiore nei nuovi modelli di Blogger.

Questo trucco non si rivolge solo a chi voglia cancellare lo spazio nella parte alta del template, dopo che è stata tolta la Navbar, ma a tutti coloro che vogliono modificarne le dimensioni in un senso o nell'altro.

 Ricordo che per eliminare la Barra di Navigazione nei template del Designer Modelli, si va su Design > Modifica HTML, si cerca il tag <body> e, immediatamente sotto, si incolla il seguente codice

<style type="text/css">
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
</style>

Nei modelli creati attraverso la finestra di progettazione di Designer, potrebbe non esserci il tag <body> ma uno simile a questo
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Come nascondere un widget in parti differenti del blog.

Ho già pubblicato articoli sui tag condizionali che consentono di visualizzare dei widget solo in certe parti del blog che possono essere i singoli post, la home page, le pagine statiche, ecc. Si può anche scegliere di mostrare un gadget ovunque escluso in una determinata tipologia di pagine. Una alternativa per nascondere i widget può essere quella di creare delle classi di stile specifiche. Può essere utile se il metodo illustrato nell'articolo citato e in quest'altro non funzionassero.

Innanzitutto fissiamo l'attenzione sul fatto che ciascun widget è univocamente determinato dal suo ID. Se andiamo su Design > Modifica HTML, senza espandere i modelli widget possiamo rendercene facilmente conto  

L'ID di un gadget è dato dal nome presente tra le virgolette dopo id= e in genere è rappresentato da HTMLX dove X è un numero progressivo. Vediamo alcune delle possibilità che si possono presentare. In ogni caso dobbiamo andare su Design > Modifica HTML e cercare la riga </head>. Immediatamente prima vanno incollati i seguenti codici in funzione del risultato che si vuole ottenere.

Come pubblicare dei contenuti visibili solo ai sottoscrittori del blog.

Chi decide di seguirci sottoscrivendo i nostri feed, abbonandosi alla newsletter o aggiungendo il suo Profilo a Google Friend Connect può essere ricompensato dall'autore del blog mostrandogli un contenuto esclusivo che sia nascosto a tutti gli altri che invece si limitano ad aprire un post. Questo contenuto può essere formato da semplice testo, da immagini, da video, da iFrame, da link o da qualsiasi altra cosa che sia possibile inserire in un articolo. La parte dell'articolo visibile solo a chi apre il feed può essere inserita solo in certi articoli a scelta dell'autore.

Il metodo usato è di una semplicità straordinaria e si basa sulla creazione di una classe specifica il cui ID poi viene ripreso nel post. La classe si può chiamare come meglio crediamo, per esempio extracontent. Andiamo in Design > Modifica HTML e cerchiamo la tag /b:skin che si trova nella riga

 ]]></b:skin>

Popup Menù compatibile con i template del Designer Modelli di Blogger.

Quello che vado a presentarvi è un menù molto particolare che ha le seguenti caratteristiche:

     E' multilivello e possono essere inserite moltissime voci

     E' utilizzabile soprattutto in una sidebar di sinistra

     Si può inserire questo menù contestualmente in qualsiasi link dentro un post o un widget

     Funziona con il modello Semplice del Designer Modelli e quindi è presumibile che non abbia       problemi anche con gli altri template più recenti

     Si visualizza correttamente anche con Internet Explorer anche se con questo browser è un po' più lento.

Prima di procedere all'installazione ecco come si presenta il menù quando si punta una delle sue voci con il mouse

Google Docs Viewer per aprire qualsiasi documento e per embeddarlo nel blog.

Google Docs Viewer è una funzionalità che mi risulta essere poco utilizzata ma che ha grandi potenzialità. Viene anche chiamato Visualizzatore di Documenti e permette di aprire direttamente nel browser tutta una serie di file di diversi formati. Proprio ieri il blog ufficiale di Google ha dato la notizia che ne sono stati aggiunti altri 12 a quelli che già erano supportati. Praticamente vengono aperti tutti i formati della Microsoft oltre ai PDF e molti altri quali .PAGES della Apple, .Al della Adobe, .PSD di Photoshop, .DXF di Autocad, .SVG, .EPS, .XML, .XPS, .TTF, ecc

Per visualizzare un documento presente in rete ne dobbiamo solo acquisire l'URL. Successivamente si incolla nell'apposito campo di Google Docs Viewer e si clicca su Genera link. Per rendere più chiaro il funzionamento ho inserito un documento DOCX su DropBox nella cartella Public e ne ho copiato l'URL pigiando sul destro del mouse e, successivamente, andando su DropBox > Copy Public Link

 

Tutti gli strumenti e i servizi gratuiti indispensabili per i blogger.

Avere un blog e pubblicare costantemente degli articoli è una cosa che comporta un certo numero di conoscenze e un investimento di tempo non indifferente. Con questo articolo cercherò di elencare le risorse gratuite che sono a disposizione dei blogger e che ci consentono di velocizzare la pubblicazione dei post, monitorare lo stato del nostro blog, gestire video, immagini o file musicali, insomma cercherò di elencare tutto quello che offre la rete per rendere più facile e gratificante il nostro hobby.

Account a cui registrarsi

E' evidente che non si può fare a meno di un account Google che può servire tra l'altro per creare blog con Blogger, ricevere la posta con GMail e moltissime altre cose. E' opportuno anche avere un account Microsoft di tipo hotmail oppure del tipo live. E' necessario per accedere a servizi di hosting gratuiti come SkyDrive, Office Live Workspace oltre che per la posta elettronica. E' utile avere anche un account Yahoo per accedere a servizi come Flickr e Yahoo Pipes. Se usate più computer per connettervi sarà utilissimo anche un account su DropBox perché permetterà di accedere a file e cartelle sincronizzate.  

Effetti per immagini realizzati solo con l'ausilio del mouse.

Vediamo come si possano postare delle foto su un articolo con alcuni effetti molto semplici e originali che si ottengono solo con l'uso del mouse e senza caricare nessun javascript nell'articolo e tanto meno nel modello. Il primo che vado a proporvi riguarda due immagini. La prima si visualizzerà in condizioni normali mentre la seconda apparirà solo se si passa sopra con il mouse. Il codice da incollare in un post o in un gadget HTML/Javascript è il seguente

<img src="URL PRIMA IMMAGINE" onmouseover="this.src='URL SECONDA IMMAGINE';" onmouseout="this.src='URL PRIMA IMMAGINE';" title="TITOLO" alt="TESTO ALTERNATIVO"/>

Menù orizzontale personalizzabile da inserire sopra l'header di un blog su Blogger.

Questo menù credo che sia l'ideale per siti con una grafica semplice e pulita ma potrebbe anche essere usato insieme a un altro menù basato su javascript. Il solo script che viene utilizzato per la sua installazione è open source e serve unicamente per visualizzare il menù in modo accettabile anche con Internet Explorer. Prima di procedere all'installazione vera e propria è opportuno inserire un elemento Aggiungi un gadget nella parte alta del template.
Nella fattispecie si va su Design > Modifica HTML e si espandono i modelli widget. Dopo aver salvato il modello completo, si cerca la riga

 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Ce ne potrebbe essere una leggermente diversa. Per individuarla si può pigiare su F3 e cercare showaddelement. La riga va modificata in questo modo

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

Questo ci consentirà di visualizzare Aggiungi un gadget anche nella parte alta e si potrà inserire anche un altro widget nell'header. Invece che 2 può essere messo anche un numero maggiore. Adesso cercate questa riga

Quinta raccolta di tutorial per Blogger.

In questo blog mi occupo di informatica a tutto tondo anche con puntatine in altri settori che, sebbene mi interessino di meno, sono molto più remunerativi in termini di ritorno pubblicitario. La maggior parte degli articoli che pubblico sono comunque rivolti a persone che hanno un blog su Blogger e che intendono migliorarlo sotto gli aspetti della grafica, della indicizzazione, del posizionamento e della ricchezza delle personalizzazioni. Già dopo qualche mese che avevo iniziato questa avventura avevo sentito il bisogno di raccogliere gli articoli che trattavano di tutorial per Blogger. Per una questione di motori di ricerca è bene non superare i 100 link per ogni post; visto che la mia produzione di articoli è largamente maggiore, ho già completato quattro raccolte. Ecco l'elenco dei post con etichetta blogger che ho già incluso:

   Prima raccolta di tutorial per Blogger - 


   Seconda raccolta di tutorial per Blogger - 


   Terza raccolta di tutorial per Blogger - 


   Quarta raccolta di tutorial per Blogger -

Slideshow di miniature e riassunto con link ai post.

In Blogger esiste lo splendido widget dello slideshow degli ultimi post che mostra gli ultimi articoli in verticale, ottimo per essere inserito in una sidebar. Mi è stato più volte chiesto se esisteva un analogo gadget in orizzontale. Al momento non mi risulta che qualche sviluppatore si sia cimentato con successo in questa realizzazione. Quello che presenterò adesso è un widget di uno slideshow con collegamento ai post, non ai più recenti acquisiti dai feed, ma solo ad alcuni particolarmente interessanti che vogliamo porre in primo piano.
In realtà non si tratta neppure di uno slideshow ma di una rotazione di articoli con effetto slide. Come è mia abitudine ho pubblicato una

• Dimostrazione del widget Slideshow di miniature con sommario -

Il gadget è visibile nella sidebar in alto a destra e mostra a rotazione gli articoli linkati con effetto scorrimento

Come collegare Strumenti per Webmaster a Google Analytics e DoubleClick AdPlanner.

Da poche ore è disponibile una nuova funzione su Strumenti per Webmaster, il tool di Google in cui è possibile monitorare le performance dei nostri siti, inviare le sitemap, controllare i backlink che riceviamo e con quale anchor text, monitorare la velocità di caricamento e molto altro. Appena entrati nel nostro account con le solite credenziali di Google, accanto a ciascun sito che abbiamo inserito, vedremo dei nuovi link Gestisci

Nel menù a tendina ci sono due opzioni di ulteriore configurazione per ciascun sito: Aggiungi o rimuovi proprietari e Profilo Google Analytics. Il primo serve per quei blog che sono gestiti da più persone o per quei siti amministrati da professionisti a cui può accedere anche il proprietario. Ricordo che in Google Analytics si possono creare quanti account si desiderano. Se però si volesse monitorare le entrate Adsense di ciascun sito, per conoscere quali siano i post che ricevono più click, dobbiamo creare più Profili di uno stesso account. Questo è importante per calibrare meglio i contenuti dei nostri post nella prospettiva di maggiori guadagni.

Come creare una galleria di video di Youtube per Blogger.

Probabilmente saprete che è possibile non solo incorporare un video di Youtube in un post del blog ma anche inserire una intera Playlist di video. Occorre per prima cosa creare la playlist con i filmati che ci piacciono e poi implementarne il codice. Vediamo come sia possibile inserire nel blog una galleria di video attraverso un elemento HTML. Questo gadget potrà poi essere mostrato in tutto il blog o solo in determinate pagine attraverso i tag condizionali. Sfrutteremo inoltre una proprietà di Youtube molto nota agli sviluppatori ma non altrettanto ai semplici blogger riguardo alle miniature dei video. Ci appoggeremo anche sulle librerie Google API che danno la possibilità di ottenere codice open source. Ricordo a questo proposito che derivano da lì anche gli effetti Scriptaculous e Prototype; in questo articolo sarà invece utilizzato lo script SWF Object.

Ogni video di Youtube ha un URL che è determinato dal nome del dominio e da un ID che lo identifica in modo univoco

Effetto Piecemaker 2 da inserire in Blogger.

Piecemaker 2 è la seconda versione di un effetto che ha avuto un certo successo e che consente di visualizzare dei banner personalizzati con effetti di transizione veramente particolari. Il progetto è open source e può essere scaricato gratuitamente dalla pagina di download di Piecemaker 2. Chi ha Wordpress può inserirlo nel blog attraverso appositi plugin e tutorial creati dalla community di Wordpress. Vediamo come fare per installarlo su Blogger in modo relativamente semplice. Prima di passare alla trattazione è utile che diate uno sguardo al blog di prova che ho messo in rete

• Demo dell'effetto Piecemaker 2 -

Si può navigare tra i banner mediante gli appositi pulsanti di navigazione posti in basso. Ce ne sarà uno per ogni immagine inserita. Gli effetti di transizione possono essere configurati a piacere e si possono inserire anche video, oggetti in flash e audio. Senza nessuna interazione da parte del navigatore, i banner inseriti verranno visualizzati uno dopo l'altro a rotazione.

Come espandere o nascondere testo formattato o widget con l'effetto Script.aculo.us.

Ho già presentato un trucco per mostrare o nascondere dei widget in un blog su Blogger. Ci si basava esclusivamente sui click del mouse senza aggiungere nessun altro effetto. Con questo post voglio adesso ampliare le possibilità di intervento a un qualsiasi testo formattato inserendo anche un effetto scorrimento. Si utilizza la libreria javascript Prototype & Script.aculo.us che potrebbe essere già presente nel vostro modello in quanto alla base di moltissimi effetti slide. Aprite quindi il vostro template andando su Design > Modifica HTML e cercate questo URL:  www.google.com/jsapi. Se è già presente, si può fare a meno di inserirlo una seconda volta. In caso contrario, cercate la riga </head> e, immediatamente sopra incollate il codice

<!--Prototype e Scriptaculous Inizio-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!--Prototype e Scriptaculous Fine - www.ideepercomputeredinternet.com-->

Salvate il modello. Adesso vediamo in concreto come nascondere e mostrare dei widget o una porzione di testo. Ho pubblicato un post come dimostrazione dell'effetto Slide con Prototype e Script.aculo.us e ho anche postato su Youtube un breve video di presentazione dell'effetto

• Demo dell'effetto slide per nascondere widget e altri elementi -

Come inserire il widget di Google News nel blog.

Mi ero già occupato di questo interessantissimo gadget ma, visto che ci sono stati dei problemi di cambi di indirizzo del servizio da parte di Google, ho deciso di riproporlo. Si tratta di una arricchimento particolarmente utile per siti che si occupano di attualità. Come vedremo è anche possibile personalizzare il flusso di notizie selezionando la lingua, l'area di interesse e le sezioni più in sintonia con gli argomenti del blog.

Si parte da Google Web Elements - News che è un widget facente parte di una collezione più ampia e che contiene anche il traduttore, la tastiera virtuale e i Top Video News di Youtube. La configurazione è semplicissima. Si possono scegliere due formati: il leaderboard 728x90 pixel e il rettangolo medio 300x250 pixel.

Dock Menù per Blogger con icone animate nella parte bassa del layout.

Quello che vado a presentare è un menù diverso dai soliti adatto a blog su Blogger che abbiano una grafica particolare. Il concetto è quello di inserire dei link a delle immagini in formato PNG che aumentano di dimensione quando ci si passa sopra con il mouse. Si tratta di un plugin basato su Javascript realizzato da Uvumi Tools. Le icone di default sono di argomento musicale ma, sostituendo le immagini, il menù si può adattare a qualsiasi esigenza. Oltre alla demo che potete vedere nella parte bassa del sito dell'autore, ne ho pubblicata un'altra per testare l'adattabilità ai nuovi template

• Demo del Dock Menù per Blogger - 

Se andate in fondo alla pagina e puntate con il mouse le icone, quest'ultime aumenteranno di dimensione con un effetto sorprendente

Menù orizzontale su più livelli per Blogger personalizzabile e funzionante anche con i template del Designer Modelli.

Ho presentato diversi menù per la precedente generazione di template di Blogger. Con l'avvento del Designer Modelli, alcuni di questi non sono più visualizzati correttamente. Mi ripropongo di ripresentarli in una versione universalmente funzionante in un prossimo futuro.

Adesso illustro il procedimento per l'installazione di un menù a beneficio di blogger che hanno l'esigenza di collegare molte pagine in home page. E' molto simile al menù multilivello e ne ricalca in qualche modo la struttura. Ci sono una serie di titoli principali al di sotto dei quali possono essere inserite delle voci secondarie su più livelli

• Demo del MattBlackMenù orizzontale -

Se si interagisce con il mouse ecco come si presenta il menù

Facebook introduce l'accesso come Pagina e aggiunge le notifiche.

Grosse novità per le pagine di Facebook che sono state introdotte proprio ieri sera. Molti amministratori di pagine fan avranno già ricevuto una comunicazione via email che si può così sintetizzare

1. E' iniziato l'aggiornamento delle pagine con un nuovo design e nuove funzioni
2. Le nuove pagine saranno disponibili per tutti dal 10 Marzo
3. Si riceveranno delle notifiche quando i fan interagiranno con la pagina o con i post presenti
4. Il layout diventerà simile a quello dei profili con un'area orizzontale destinata alle foto
5. Introduzione della sezione Notizie con gli aggiornamenti delle pagine che ci piacciono
6. Possibilità di pubblicare post o commenti a nome della pagina
7. Introduzione dei filtri antispam con blocco di alcune parole chiave ritenute offensive

Per iniziare a testare le nuove funzionalità andate su Account > Usa Facebook come pagina e clicca su Inverti su una delle pagine fan di cui sei amministratore

Come creare un sito e caricare file su Digilander di Libero.

Libero offre dei servizi a tutto tondo che vanno dalle notizie del giorno, all'oroscopo (per chi ci crede), agli sconti sulla falsariga di Groupon, alla chat, al cinema, alla condivisione di foto e video e molto altro ancora. Si tratta in sostanza di una community con cui si può anche creare un sito e interagire con gli amici. Per iscriversi al servizio occorre andare in alto a destra su Registrati, se si ha già un account invece si clicca su Accedi. Occorre inserire i dati anagrafici, un indirizzo email e una password. Si può usare lo stesso account utilizzato per l'internet a 54KB in dial-up che molti di voi avranno sperimentato prima dell'avvento dell'ADSL. Si può inserire anche un indirizzo email diverso da quello mionome@libero.it.

Quando l'account sarà attivato, potrete accedere a servizi interessanti visualizzati nella colonna di sinistra della vostra pagina personale. Si tratta delle sezioni: Messaggi, Profilo, Video, Blog, Sito, Foto e Amici. Esiste anche una gestione notifiche sul tipo di quella di Facebook per ricevere delle email per ogni visita al profilo, ai video, al blog, ecc. In questo articolo mi occuperò solo di come utilizzare questo servizio per caricare dei file online e su cosa fare per ottenere il link diretto da inserire in un codice HTML.

Come alternare degli header diversi in modo casuale nei blog su Blogger.

La scelta dell'header è una di quelle che caratterizzano maggiormente il blog. Si tratta infatti del biglietto da visita del sito, la cosa che salta subito agli occhi e che può fare la fortuna di un blog. Alcuni sono indecisi su che header scegliere ed è proprio a queste persone che si rivolge questo articolo. Illustrerò infatti come sia possibile visualizzare header diversi in modo casuale. Per rendervi conto di cosa stia parlando andate nel mio Blog di Prova. Se ricaricate la pagina, vedrete di volta in volta una diversa intestazione.

Si tratta del modello Simple, o Semplice detto in italiano, ma la personalizzazione credo che sia facilmente estendibile a quasi tutti i modelli ufficiali e non. Dobbiamo andare su Design > Modifica HTML e cercare il foglio di stile che sovrintende all'aspetto dell'header. Nel modello Semplice è

.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
}

Come aprire i file SWF con SWF & FLV Player per Windows.

I file SWF sono dei particolari oggetti in flash che si riproducono in modo continuativo. Sono molto utilizzati nei siti professionali perché sono l'ideale per mostrare messaggi pubblicitari accattivanti sotto forma di video. Questi file possono essere aperti da un qualsiasi browser visto che sono visibili nelle pagine web. Ci si clicca sopra con il destro del mouse e si sceglie Apri con, selezionando il nostro browser preferito.

Questi file possono essere caricati sul nostro blog, scaricati dalle pagine in cui sono presenti e caricati su un nostro spazio come Google Sites o in un servizio dedicato come Mega SWF che è un sito di sharing per questo genere di video in flash.

SWF & FLV Player della Etima è un software gratuito che permette di aprire questi video in modo semplicissimo. Esiste anche una versione Pro ma mi occuperò solo di quella gratuita. Nella pagina di presentazione del prodotto cliccate su Download e installate il software. Per associare questo player ai file SWF cliccate con il destro del mouse su uno di essi e scegliete Proprietà

Come mostrare l'intestazione nei post e un widget in homepage o viceversa.

In  un precedente articolo ho mostrato come si possa inserire un widget al posto della intestazione del blog. Nell'articolo prendevo in considerazione l'opzione di eliminare la vecchia intestazione per lasciare solo il widget che può essere formato da una immagine animata, da un effetto javascript, da uno slideshow o da qualunque altra cosa che sia possibile incollare in un gadget HTML/Javascript.

Se invece si volesse mostrare entrambe le cose ma in pagine diverse si può procedere in questo modo. Per chiarezza facciamo l'esempio che si voglia visualizzare una intestazione simile a quella standard nei singoli post, nelle etichette e nelle pagine di archivio mentre l'intestazione personalizzata vogliamo che risulti visibile solo in Homepage. Il codice della sezione dell'header avrà una struttura simile a questa

Effetti speciali, immagini, fiori, cartoline, clipart e wallpaper per San Valentino

Come tutti gli anni eccomi a scrivere il consueto post su San Valentino per dare qualche idea su come addobbare blog e computer per questa ricorrenza particolarmente sentita da che ha legami sentimentali in aggiunta a un animo romantico.

Come inserire del blog un effetto di cuoricini animati
Effetto di una cascata di cuoricini lampeggianti

Andare su Design > Aggiungi un gadget > HTML/Javascript e incollare il seguente codice

<script src="http://idee-per-computer-ed-internet-script.googlecode.com/files/cuorechelampeggia.js" type="text/javascript"></script>

Salvare e posizionare l'elemento nella parte alta del blog. Quando qualcuno aprirà una sua qualsiasi pagina vedrà una cascata di cuoricini lampeggianti che avranno questa forma . Vedi la Demo dell'effetto cuoricini lampeggianti.

Come inserire un widget HTML al posto dell'header di Blogger.

La piattaforma Blogger dà la possibilità di caricare una immagine da visualizzare al posto del nome del blog e della sua descrizione o anche insieme alle due cose. Per effettuare la modifica si va su Design > Elementi pagina e si pigia su Modifica nel gadget che riguarda l'intestazione del blog

L'immagine può essere caricata selezionandola dal computer oppure dal web. Sono presenti varie opzioni di configurazione

Come creare un cursore personalizzato per Blogger che funzioni anche con Internet Explorer.

Nell'articolo precedente ho parlato di come si possa modificare l'aspetto del cursore quando punta un determinato link. In articoli passati mi sono occupato più volte della personalizzazione di cursori, c'era sempre però il problema che questi non si visualizzavano correttamente con Internet Explorer. La ragione risiede nel fatto che IE riconosce come cursore solo immagini in formato ANI (absit iniura verbis) che sono di difficile reperimento. Gli altri browser invece funzionano con i formati più classici come GIF, PNG o JPG.

Per creare un cursore che sia visibile nello stesso modo da tutti i browser, dobbiamo quindi avere una stessa immagine con due formati diversi. I cursori gratuiti possono essere trovati nell'interessante portale Totally Free Cursors in cui ne sono presenti una infinità, suddivisi in categorie che vanno dagli animali ai segni dello zodiaco. Quando abbiamo individuato il cursore che ci interessa, dobbiamo scaricare l'immagine normale, solitamente in GIF, e quella da utilizzare per Internet Explorer che è, come già detto, in formato ANI.

Modificare la forma del cursore in tutto il blog o solo in particolari link.

I cursori sono moltissimi e ciascuno è in genere associato a una particolare azione.
 In Blogger vi sarete accorti che, quando puntiamo un link, il cursore si trasforma in una mano con in dito indice verso il collegamento. Se invece scriviamo un articolo con l'Editor di Blogger  o con Windows 

LIve Writer prende la forma di una linea verticale lampeggiante. Ecco un elenco dei principali tipi di cursori. Se puntate con il mouse un elemento, potrete visualizzarne la forma del cursore che vi è associato

Come sottolineare il nome del blog su Blogger.

Qualche giorno fa mi è stato chiesto in un commento se si potesse sottolineare il nome del blog. La domanda nasceva sulla falsariga della personalizzazione della sottolineatura al titolo del post. A mio parere la cosa migliore resta quella di inserire una immagine come header in modo da sbizzarrirci come ci pare. C'è però la possibilità di sottolineare il nome del blog nell'intestazione senza difficoltà, specie nei modelli più recenti.

Nei nuovi template ottenuti con il Designer Modelli si deve cercare il blocco di codice /* Header e la classe che determina il nome del blog. Nel modello Simple è questa

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
text-decoration: underline;
}

Come mostrare o nascondere il contenuto di un widget in Blogger.

Se avete  la sidebar piena di widget, sentirete certamente l'esigenza di ottimizzare lo spazio per non allungare troppo la colonna. Questo problema è comune a tutti coloro che hanno inserito il gadget del BlogRoll e che seguono parecchi siti. Esiste la possibilità di mostrare solo un numero determinato di post ma è innegabile che è uno di quei widget che allunga parecchio il layout del blog. Vediamo come sia possibile modificare il modello in modo che i lettori e lo stesso blogger possano scegliere se visualizzare o meno un determinato widget.

L'obiettivo è quello di inserire un link che mostri o nasconda  il widget esattamente come avviene per il gadget degli Ultimi Commenti presente in questo Blog di Prova. E' visibile una scritta che, se cliccata, nasconde o mostra il gadget

Tutorial su come salvare, modificare e ripristinare il modello su Blogger.

Con questo post inauguro una serie di video tutorial sui temi di cui mi occupo più spesso nei miei articoli. Ho iniziato illustrando le operazioni più semplici che possono essere fatte riguardo alla modifica, il salvataggio e il ripristino di un modello di Blogger. Essendo il primo tutorial che posto mi rendo conto che non è venuto un capolavoro di chiarezza. Spero di migliorare in seguito se apprezzerete queste pubblicazioni.

Il concetto alla base del video è quello di mostrare dal vivo cosa si deve fare per modificare un template di Blogger. Ricordo che la cosa più importante è sempre quella di Salvare il modello completo prima di ogni modifica per ripristinare la situazione originale in caso di cambiamenti che non siano andati a buon fine. Un'altra raccomandazione importante la traggo da alcuni commenti che ho visto sul blog simili a questo.

"Ho passato un'ora a controllare il codice del modello ma non ho trovato la riga a cui si  riferisce l'articolo.

Creare nuovi account alias in Hotmail per evitare lo spam in quello principale.

Chi si occupa di recensire siti di ogni genere e a tutti livelli, per una questione di professionalità è spesso obbligato a registrarsi a moltissimi servizi. Alcuni di questi purtroppo sono soliti inviare le loro newsletter che sono spesso informazioni di nessun interesse se non vero e proprio spam. Per cercare di non intasare l'account di posta elettronica principale sono nati una serie di siti che permettono di creare delle email temporanee. Ricordo tra gli altri 10 Minute Mail, Malinator, Incognito Mail e Mail Expire.

Il team di Hotmail ha annunciato che sarà possibile crearsi degli alias del nostro account con un semplice click. Il numero massimo sarà di cinque indirizzi di posta. Anche in GMail è possibile creare cinque account, con questa nuova funzionalità di Hotmail però si potrà accedere agli indirizzi creati dalla stessa schermata. Si creeranno cioè delle cartelle per ogni alias nel quale finiranno eventuali messaggi di contatti con cui lo abbiamo utilizzato.

Effetto Slideshow di una Galleria di Foto per Blogger con bottoni di controllo.

L'effetto che vado a proporvi può essere interessante per i blogger che vogliono evidenziare particolari pagine con uno slideshow posto nella sidebar che ne mostri le immagini relative. Si può associare un titolo a ciascuna foto, linkare un post o una pagina di etichette e inserire un titolo visibile in sovraimpressione. L'autore lo ha chiamato Simple Controls Gallery e le istruzioni per l'installazione si trovano su Dynamic Drive insieme a molti altri effetti, alcuni dei quali ho già presentato in articolo passati.

Ho già scaricato i file sorgente e le immagini, li ho modificati e caricati su Google Code, quindi l'installazione del widget non presenta particolari difficoltà. Ecco lo screenshot di esempio

Per vedere l'effetto all'opera dal vivo potete accedere alla

Widget di uno slideshow orizzontale con link alle pagine del blog.

In ogni blog ci sono quelli che vengono definiti gli articoli pilastro cioè quei post che caratterizzano il sito per la loro autorità, per i commenti o per i feedback che hanno ricevuto. Il gadget dei Post più popolari per Blogger presenta già gli articoli che ricevono più visite ma non è detto che questi siano quelli che riteniamo più importanti. Anzi spesso capita che i post più visitati non siano quelli cui siamo più affezionati e che riteniamo i più validi tra quelli pubblicati. Vado a presentare un widget relativo a uno slideshow che mostra una selezione dei nostri post migliori o una scelta delle etichette più interessanti. Per ciascuna pagina dobbiamo prima selezionare una immagine che la caratterizzi e dobbiamo fare in modo che quest'ultime abbiano all'incirca le stesse dimensioni. Il titolo del post corrispondente sarà visibile quando la miniatura sarà puntata dal mouse.

• Demo del widget dello slideshow di miniature con link -

L'aspetto del gadget potrà essere simile a questo

Come personalizzare il cursore in un blog su Blogger.

Un blog tenuto da una donna in genere si differenzia da quello di un uomo per alcune caratteristiche estetiche e di personalizzazioni che piacciono particolarmente all'universo femminile. Naturalmente non si può generalizzare, ma la mano di una donna è spesso visibile alla prima occhiata di un blog. Una personalizzazione molto amata dalle ragazze è quella della forma del cursore.

Se in un blog vedete il puntatore del mouse personalizzato, nove volte su dieci è una donna che lo amministra. Vediamo come fare per personalizzare l'immagine del cursore. Per prima cosa lo dobbiamo trovarne uno che ci soddisfi nei tanti siti in cui li offrono gratuitamente. Ecco un breve elenco:

1. Totally Free Cursor - sono divisi in categorie tra cui animali, anime, cartoon, fantasy, glitter, holiday, movie, zodiac
2. Cursor 4 You -  anche in questo sito c'è la suddivisone in categorie tra cui animated, celebrity, games, smileys, sport, simboli
3. Fun Utilities - come sopra e cito la sezione macchine, cose, cibo, politica, fiori, militari.

I migliori separatori nei Titoli e nelle Immagini.

Quando si scrive un post con Blogger ne viene determinato l'URL automaticamente prendendo la prima parte del titolo, eliminando le parole accentate e gli apostrofi e inserendo dei trattini tra una parola e un'altra. Ho anche pubblicato un post su come ottimizzare il titolo di un articolo in relazione all'URL che verrà generato.

Un'altra questione simile che ho già trattato riguarda il tag Alt e Title da inserire nelle immagini. Specialmente il tag Alt è molto importante perché è ciò che si visualizza quando il browser non riesce a caricare la foto. Non per nulla si chiama Testo Alternativo. Avevo consigliato di inserire un trattino tra le diverse keyword di questi tag in quanto scelta migliore in ottica SEO tra tutti gli altri separatori.

Proprio ieri Matt Cutts ha risposto a una domanda proveniente dall'Europa (il richiedente non ha specificato la Nazione) che riguardava l'utilità come separatore della virgola nel tag Title. Ecco il video con la chiarissima risposta di Matt

Effetto per ingrandire le immagini al passaggio del mouse o con un click

Ho già illustrato l'effetto Expando che è abbastanza semplice da installare e fa in modo di aumentare la dimensione delle immagini al passaggio del mouse. Questo effetto presuppone l'introduzione di un javascript nel modello di Blogger. Se si pensa di avere poche occasioni per proporre nel blog una simile personalizzazione, si può optare per un metodo di inserimento delle immagini meno invasivo che agirà solo su una determinata foto e solo nel post in cui è stata inserita.

Le immagini che si vogliono postare devono essere preventivamente caricate su servizi tipo Picasa, SkyDrive o DropBox. L'effetto funzionerà con tutti i browser ma con IE sarà più lento che con Chrome e Firefox.

Immagine che si ingrandisce al passaggio del mouse

Ecco il codice da inserire in modalità HTML

Aggiungere l'ora di pubblicazione alla data nei post di Blogger.

Mi è stato chiesto in un commento di affrontare l'argomento della visualizzazione dell'ora di pubblicazione di un post insieme alla data. Presenterò due versioni a seconda che si voglia mostrare l'ora in una seconda linea sotto alla data oppure che si voglia visualizzare tutto nella stessa riga.

Ecco nel mio blog di prova come appare la data in condizioni normali

Andiamo su Design > Modifica HTML e salviamo il modello completo. Dopo aver messo la flag a espandi modelli widget, cerchiamo con F3 o Ctrl+F la seguente stringa

<h2 class='date-header'>

Dobbiamo prendere in considerazione tutto il codice presente fino alla chiusura del tag h2. Nel modello Simple del Designer Modelli troviamo questa riga