Conoscerete certamente Lorem Ipsum, il celebre testo in latino scorretto che viene usato da più di 500 anni per testare la grafica nelle realizzazioni tipografiche. Lorem Pixum vi si ispira ed è un servizio gratuito che permette di inserire delle immagini casuali nel blog che possono essere configurate per dimensioni, colore e argomenti
In alcuni casi possiamo avere l'esigenza o la curiosità di conoscere in quanti hanno cliccato su un determinato collegamento. Potremmo essere curiosi di sapere in quante persone hanno aperto la pagina di un tuo ebook su Lulu oppure in quanti si sono recati sul tuo canale di Youtube attraverso un particolare referral. Un sistema eccellente per poterlo fare è quello di utilizzare le statistiche dei servizi nati per accorciare gli URL.
Indichiamo subito i limiti di questo metodo. Per monitorare i rendimenti di referral pubblicitari quali quelli di Sprintrade o Tradedoubler dobbiamo prima informarci con il loro supporto se sia possibile creare dei link intermedi. Con alcuni network pubblicitari si può fare con altri invece è vietato. Inoltre non viene dato il totale delle visite a una certa pagina ma solo il numero di coloro che l'hanno raggiunta da un particolare link.
I servizi tipo goo.gl o bit.ly sono nati per accorciare gli URL per poter postare su Twitter utilizzando meno caratteri possibili. Vediamo nel dettaglio invece come usarli entrambi come contatori di click.
Presento la terza versione della personalizzazione che inserisce una icona con il numero dei commenti accanto al titolo del post in un blog su Blogger. Il primo articolo era basato sull'introduzione della classe comment-bubble mentre il secondo concerneva in una serie di javascript a seconda dell'icona che si sarebbe scelta. Ho anche presentato un tutorial per numerare con una immagine i singoli commenti in modo da renderli più facilmente identificabili.
Questo articolo dà una ulteriore chance di inserire l'icona con il numero dei commenti specialmente a chi utilizza i nuovi template del Designer modelli. Si tratta di una modalità di installazione molto semplice che non ha bisogno di file javascript esterni ma che si limita al solo HTML. Ha quindi un incidenza bassissima sulla velocità di caricamento delle pagine. Cliccando sul numero dei commenti all'interno dell'icona, si potrà accedere direttamente a quell'area. Ecco uno screenshot di questa personalizzazione testata nel mio Blog di prova con numeri a una e a due cifre
Dopo aver presentato il menù verticale con le etichette, mi è stato chiesto se fosse possibile personalizzarne l'aspetto per renderlo più intonato ai colori del blog. La cosa è fattibilissima e, per maggiore chiarezza, ripercorrerò tutte le tappe della creazione di questo menù. In sostanza si tratta di trasformare il widget delle Etichette di Blogger in un menù a tendina. Se avete già installato il gadget andate al passaggio successivo, se invece ancora non lo avete messo sul blog, cliccate su Design > Aggiungi un gadget > Etichette
Nella finestra successiva date un nome univoco al widget in modo da non confonderlo con un altro che potreste avere nel modello
Quando mi arrivava la notifica che un nuovo utente iniziava a seguirmi su Twitter, contraccambiavo diventando un suo follower a mia volta. Poi mi sono accorto che molti di questi utenti o non producevano affatto contenuti interessanti o quelli che postavano erano piuttosto imbarazzanti. Quando ho creato The Ernesto T. Daily attraverso Paper.li ho visto infatti che, senza rendermene conto, stavo seguendo diversi siti che pubblicavano contenuti per adulti. Da quel momento ho cambiato radicalmente comportamento decidendo di non aggiungere altri follower se non in casi eccezionali.
Un servizio molto divertente ma anche utile può aiutare a scoprire ex ante quello che posta un utente di Twitter attraverso l'analisi delle sue parole chiave. Tweet Topic Explorer crea una grafica molto suggestiva formata proprio dalle keyword più usate da quell'utente di Twitter. Di default vengono analizzati i dati del New York Times di cui vengono riportati gli ultimi tweet sulla destra.
Se si vogliono conoscere gli argomenti più trattati da un utente qualsiasi bisogna andare in basso, inserire il relativo ID di Twitter e cliccare su Explore. Ho provato a inserire parsifal32 ed ecco quelli che sono i topic che uso maggiormente
Ho appena illustrato come installare il bottone Invia nel modello di Blogger per poterlo visualizzare in tutti i post in modo da dare la possibilità ai lettori di condividere l'articolo con singoli amici o con un gruppo. Si può inserire nel blog il pulsante Invia anche a prescindere dal Mi Piace per poterlo collocare per esempio in una diversa posizione.
Si deve creare l'applicazione di Facebook per il blog e ottenerne l'ID come illustrato nel post sul Like + Send. Nel momento in cui scrivo questo post non è ancora possibile utilizzare la lingua italiana. Quindi per adesso il bottone sarà visualizzato come Send. L'esperienza dell'anno scorso con il passaggio dal Like al Mi Piace mi fa ritenere che ci vorranno solo pochi giorni per avere anche la versione dello script localizzata in italiano perfettamente funzionante. Sarà mia cura aggiornare il post quando questo accadrà.
Dopo aver presentato nel precedente post il nuovo pulsante Invia di Facebook, passo ad illustrare come fare per inserire questo plugin che permetterà ai visitatori del vostro blog, non solo di condividere un singolo post nel loro Profilo cliccando su Mi Piace, ma anche di inviarlo a uno o più amici con il bottone Send. Nel momento in cui scrivo questo articolo, il pulsante funziona solo se si sceglie la lingua inglese americana ovvero en_US ma ritengo che nei prossimi giorni se non nelle prossime ore sarà perfettamente funzionante anche con quella italiana. Per prima cosa bisogna andare su Create App per creare una applicazione per il nostro sito. Basta inserire un qualsiasi nome e cliccare sul pulsante Create App. In seguito sarà richiesta anche l'URL della homepage del blog. Se avete più siti, è possibile avere una applicazione per ciascuno di essi.
Si va su Sviluppatori - Le mie Applicazioni per poterle gestire. Ogni applicazione avrà un suo ID e le sue API Key che in questo contesto non ci servono
A un anno esatto dall'introduzione del Mi Piace, Facebook festeggia l'evento con l'introduzione del pulsante Invia (Send) che serve per condividere una pagina web, non con tutti gli amici ma solo un numero selezionato o con un gruppo a cui si appartiene. La funzionalità è stata appena presentata e per il momento è difficile da rendere pienamente operativa per gli utenti di Blogger.
Non appena sarò riuscito a risolvere l'inghippo sarà mia cura scrivere un post apposito. Secondo le istruzioni di Facebook, il Send Button può essere semplicemente aggiunto al codice del Mi Piace semplicemente aggiungendo la stringa send=true. E' stato anche aggiornato il Like Button Plugin per implementare questa nuova funzione
Gli Strumenti per Webmaster sono l'interfaccia con cui un possessore o gestore di siti web si relaziona con Google. Nelle varie sezioni possiamo conoscere quanti sono i nostri link interni, quanti backlink abbiamo ricevuto e da chi, l'anchor text con cui veniamo citati e molte altre cose ancora . Un altro tool ci consente di conoscere le query con cui il nostro sito viene raggiunto e, in Prestazioni del sito, valutare anche la sua velocità di caricamento.
Una operazione particolarmente importante da compiere è quella di eliminare i link non trovati andando su Dashboard > Errori di scansione > Non trovato per mettere a posto collegamenti che non esistono più o che abbiamo sbagliato a inserire. Quelli soggetti a restrizioni da robots.txt sono invece una precisa scelta di Blogger che non indicizza le pagine delle etichette.
Il webmaster ha un altro compito fondamentale che è quello di inviare una o più sitemap. Non è che la cosa sia obbligatoria visto che Google indicizza comunque i siti che non hanno provveduto a inviarla. Nel caso di Blogger, una sitemap di default viene spedita automaticamente a Google ma contiene solo gli ultimi 25 articoli pubblicati insieme alla homepage. Da qualche settimana nel mio account ma anche in quello di molti lettori di questo blog vengono visualizzati 0 URL indicizzati accanto a alcune sitemap.
Ci sono diversi modi per visualizzare le etichette in un blog su Blogger. Ricordo il classico elenco verticale e la nuvola di etichette, entrambi offerti dalla piattaforma. C'è anche il widget Blogumus che è le mostra animate e che si muovono al passaggio del mouse ma che ha il difetto di non funzionare con tutti i modelli. In un singolo blog possiamo inserire anche più di un widget di etichette. In questo caso i gadget saranno univocamente individuati dal loro numero di ordine (Labels1, Labels2, ecc). Vediamo come realizzare un menù verticale con tutte le etichette presenti nel nostro blog e che mostri anche il numero di articoli in cui ciascuna di essa sia stata inserita. Per prima cosa bisogna aver installato il widget andando su Design > Aggiungi un gadget > Etichette
Le pagine statiche di Blogger vengono pubblicate con lo stesso editor dei post e non è possibile farlo mediante strumenti esterni quali Windows Live Writer. Si può scegliere se visualizzarle in un widget orizzontale o in uno verticale come fossero un menù. Si può anche optare per un semplice collegamento manuale. L'uso che se ne fa può essere molto vario e può andare da un modulo di contatto a una galleria di foto o di video. In una pagina statica ho persino inserito l'editor di immagini Pixlr per averlo direttamente su un mio sito
L'aspetto di questa pagina, al momento, è questo
Nei vecchi template di Blogger era diventato abbastanza semplice togliere le sidebar dalle pagine statiche; con l'avvento dei template del Designer Modelli, la cosa è invece diventata più complicata ma finalmente fattibile. Prima di passare a illustrare il procedimento, ricordo che l'eliminazione delle sidebar risponde all'esigenza di avere un layout molto più ampio tale da poter utilizzare dette pagine per gallerie fotografiche, gallerie di video o landing page particolari. Nei nuovi modelli si può optare tra vari layout e si possono anche scegliere le dimensioni dei vari elementi. Se si va su Design > Designer Modelli > Layout si può vedere che si possono avere fino a tre sidebar e fino a tre colonne nel piè di pagina
Ho recentemente avuto uno scambio di opinioni nei commenti sulla questione dei "credit" inseriti in modelli, script o widget. Il discorso è molto ampio e non intendo affrontarlo con questo post che ha un suo obiettivo limitato. E' però legittimo che un autore in senso lato, quando condivide in rete un suo script, un widget o comunque un suo lavoro, inserisca un riferimento al suo sito. Si può trattare di un vero e proprio collegamento diretto, di un semplice watermark, di due righe che indicano la paternità della realizzazione senza link attivo e di altro ancora. Poi sta all'utilizzatore decidere cosa mantenere e cosa eliminare del collegamento di attribuzione. Ci sono delle licenze a cui si fa spesso riferimento per le modalità di condivisione. A titolo di esempio, visto che ho installato molti script provenienti da loro, si può usare tutto il materiale proveniente da Dynamic Drive senza limitazioni con l'unico obbligo di lasciare nel file javascript il nome dell'autore e l'URL della sua homepage.
Alcuni nuovi template di Blogger sono stati realizzati da dei grafici e la piattaforma gratuita di Google gli ha permesso di inserire il link di attribuzione nella parte bassa del modello
Se si hanno immagini di dimensioni, come peso, inferiori a 300KB ci si può divertire a creare effetti speciali originali in modo semplicissimo. Qualsiasi macchina digitale e anche molti telefonini tuttavia creano immagini con una risoluzione maggiore di quella massima consentita dal servizio che vado a illustrarvi. Si può comunque diminuirne il peso fino a 300KB utilizzando un qualsiasi programma di grafica come Photoshop o Gimp o, alternativamente, caricando la foto sull'editor online Pixlr per salvarla con le appropriate dimensioni
Se siete lettori di riviste di gossip avrete certamente visto come i volti dei minorenni subiscano una modifica per renderli irriconoscibili. Si tratta semplicemente di sostituire un certo numero di pixel con un numero inferiore in modo da rendere la foto sgranata in corrispondenza del volto. Questa operazione può essere effettuata anche su delle nostre foto personali con una applicazione gratuita. Può servire anche per non vedere il volto di una persona che ci sta antipatica in una foto che invece ci piace oppure per nascondere le facce delle persone che non vogliamo vengano riconosciute per questioni di privacy visto che abbiamo deciso di rendere la foto pubblica.
PhotoHide permette di nascondere il volto di una o più persone in modo molto intuitivo. Si può anche accedere all'interfaccia italiana di PhotoHide. Si va su Scegli file per selezionare la foto, quindi su Upload per caricarla.
Gli appassionati di cartoon sono moltissimi, di tutte le età e con le più svariate formazioni culturali. Non è affatto una prerogativa di ragazzi giovani leggere le strisce di cartoni animati. I collezionisti spesso sono tutt'altro che persone in tenera età. Creare un cartone animato da una foto può quindi essere una cosa carina per generare degli avatar o comunque delle immagini suggestive.
In rete c'è una applicazione gratuita che consente di farlo in modo semplicissimo. Cartoonize Net permette appunto di convertire una foto in un cartone animato. Si può caricare l'immagine dall'hard-disk oppure incollare l'URL se è già presente in rete
Le piattaforme di blogging danno la possibilità iscriversi ai feed in modo che il lettore possa visualizzare i contenuti degli articoli dal suo lettore di feed senza che debba recarsi direttamente nel sito. Wordpress e, da qualche tempo anche Blogger, hanno una funzionalità per mostrare solo la prima parte del post. Per Blogger significa renderlo visibile fino al Read More. Attraverso FeedBurner si può anche settare il numero di caratteri da mostrare liberamente nel feed per invogliare l'utente a cliccare sull'articolo e quindi visitare materialmente il blog.
Ci sono correnti di pensiero a favore dei feed completi e invece altri che pensano che sia meglio offrirgli in modo parziale. I primi ritengono che si abbia un aumento di iscritti a mostrare tutto il post mentre i secondi pensano di avere un aumento delle visualizzazioni di pagine e una diminuzione di siti plagiatori se si mettono delle limitazioni. In questo blog ho due feed
http://feeds.feedburner.com/ComputerChePassione
http://feeds.feedburner.com/ideepercomputeredinternet/zUQN
L'esigenza di scaricare interi siti web era particolarmente sentita qualche anno fa quando non era le connessioni non erano ancora ad alta velocità. Se un sito interessava, si scaricava totalmente e poi si navigava con comodo offline con maggiore velocità e senza spendere ulteriore denaro per la connessione in dial-up. Adesso la maggior parte dei contratti internet sono flat e quindi l'interesse verso questo tipo di programmi è diminuita.
Chi ha comunque tuttora la necessità di scaricare un sito con tutti i suoi file, può utilizzare il programma gratuito Fresh WebSuction. Dopo aver cliccato su Download Free, bisogna inserire il nome e un indirizzo email. Dopo aver inviato la richiesta, ci verrà spedito un link di conferma mediante il quale iniziare il download del programma. Successivamente verrà anche spedita un'altra mail con il codice di registrazione.
Si può comunque iniziare a usare il programma subito dopo l'installazione. All'atto della sua apertura bisogna inserire l'URL del sito da scaricare e il nome del progetto. Nella finestra successiva bisognerà indicare fino a che livello di profondità scaricare il sito. Livello 0 significa solo la homepage (o la pagina corrente), Livello 1 anche tutte le altre pagine che sono collegate con un link alla home. Livello 2 serve per scaricare quelle pagine che a loro volta sono collegate con quelle del Livello 1 e così via. Si può decidere di scaricare tutti i file presenti oppure selezionare quelli da escludere
Vado a presentare uno slideshow semplicissimo che può essere installato su Blogger senza caricare file javascript su hosting esterni. Il concetto è quello di inserire delle immagini una di seguito all'altra e di visualizzare l'immagine che ci interessa mediante il click del mouse.
Nella parte bassa ci sono i pulsanti di navigazione per scorrere le diverse immagini. Bisogna prestare attenzione alla geometria. Se abbiamo sette foto larghe 500 pixel allora la sua dimensione complessiva sarà di 500x7=3500 pixel. C'è però il problema che alcuni modelli inseriscono dei bordi alle immagini in modo automatico. E' anche il caso del blog che ho usato per effettuare il test. La cosa varia ovviamente da template a template. Vedremo come ovviare a questo inconveniente alla fine dell'articolo.
Gli sviluppatori chiamano Easter Eggs dei programmi nascosti che inseriscono appositamente per fare dei piacevoli scherzi agli utenti. Si tratta di qualcosa che è estraneo alle funzionalità del software e sono sempre assolutamente innocui. In genere si tratta di videogiochi o cose simili. Non ho intenzione di fare nulla di simile ma mi è stato chiesto in un commento o in una email, adesso non ricordo bene, se intendevo presentare degli effetti dedicati alle prossime Festività Pasquali.
Non sono in una particolare fase creativa quindi mi sono limitato a utilizzare il celebre script di Dynamic Drive per la neve che cade inserendo delle immagini più attinenti a questo periodo. Ho sostituito quindi i fiocchi di neve, i cristalli di neve e le foglie secche con delle immagini animate tipiche del periodo pasquale. Riporto i codici qui di seguito. Vedremo successivamente come e dove inserirli:
Chi conosce Messenger della Microsoft sa che c'è una opzione particolarmente utile per non avere scocciature. E' infatti possibile entrare come Invisibili; in questo modo si può vedere chi è online senza far sapere che anche noi siamo collegati. Nonostante gli accordi di collaborazione che la Microsoft ha intrapreso con Facebook,in questo social network al momento non è disponibile una simile funzionalità.
Quelli che come me hanno un blog che si occupa di tutorial per altri blogger sono praticamente nella impossibilità di stare online in chat. Quando questo accade sono infatti subissato da richieste di consulenze che ovviamente non ho il tempo di soddisfare. C'è però la possibilità di vedere chi è online su Facebook senza per forza dover aprire la chat.
Nell'articolo in cui ho parlato della introduzione da parte di Blogger del widget Segui tramite Email avevo già proposto alcune personalizzazioni. Forse è il caso di riprendere il discorso in modo più dettagliato. Senza ulteriori modifiche, il gadget ufficiale per ricevere la newsletter del blog, ha questa forma
dove il titolo del gadget può essere scelto all'atto della sua installazione che avviene da Design > Aggiungi un gadget > Segui tramite email. La prima operazione consigliata è cambiare Email address… e Submit con espressioni italiane. Occorre quindi andare su Design > Modifica HTML e espandere i modelli widget. Bisogna cercare questo blocco di codice
La recente tragica scomparsa di Vittorio Arrigoni è stata già ampiamente e giustamente trattata dalla stampa e dalle televisioni; mi sembra quindi superfluo aggiungere nuove parole di cordoglio. Questo volontario che aveva dedicato la sua vita a una causa in cui credeva era però anche un blogger. Attraverso il suo sito Guerrilla Radio informava il mondo sulle condizioni di vita nella Striscia di Gaza. L'ultimo post che ha scritto risale al 13 Aprile e si possono leggere i commenti delle persone che gli hanno mostrato la loro solidarietà durante il breve e tragico rapimento.
Insieme a questo evento terribile ne vorrei ricordare un altro, meno traumatico, ma che comunque riguarda sempre la morte di una blogger. Rosa Torres aveva un meraviglioso sito di tutorial per utenti di Blogger. Esattamente come questo su cui state leggendo, ma di una qualità superiore, visto che poteva contare su più di 6000 abbonati ai feed. Numero di iscritti che è rimasto quasi immutato anche dopo la sua scomparsa. Di lei so solo che abitava nel nord della Spagna, precisamente nelle Asturie, e non sono riuscito a trovare in rete la causa della sua morte prematura; può essere stato un incidente, una malattia o qualche altro crudele scherzo del destino.
El Escaparate De Rosa, il suo sito, è ancora online, l'ultimo aggiornamento è del 17 Gennaio con un post su un widget per diventare follower su Blogger. C'è sempre la pubblicità Adsense, ma non ci sono più commenti. L'ultimo risale alla stessa data del post appena citato. Fa anche tristezza vedere come le immagini del template e degli articoli non siano più visibili, forse per un problema di hosting. Difficilmente spiegabile visto che erano state caricate su Picasa. Per alcune settimane sono stati esposti in diversi siti dei widget listati a lutto che la ricordavano. Molti suoi colleghi di lingua spagnola le hanno dedicato articoli di dolente commiato ed è nata anche la pagina fan in Memoria di Rosa El Escaparate. Sono molti i lettori che lasciano tuttora una testimonianza di affetto e di ringraziamento per l'aiuto ricevuto dalla sua "Vetrina".
Ho presentato molti gadget per mostrare gli Articoli Più Recenti del nostro blog su Blogger. Ricordo quello semplice con solo titoli e sommario, quello più complesso con le miniature e infine il gadget slideshow, il più sofisticato. Questo widget che vado a presentare è molto originale ed è stato realizzato usando le API di Google. Può essere personalizzato nei colori e nel numero dei post da visualizzare. La sua particolarità risiede nel fatto che saranno mostrati gli Ultimi Post con un breve sommario di solo uno di questi. Ci sarà un effetto di transizione che porterà in primo piano alternativamente tutti gli articoli dell'elenco. Per avere una idea del suo funzionamento visionatelo sulla destra del post di prova
Aspettate qualche secondo per apprezzarne appieno le potenzialità. Ci sarà una freccia che indica di volta in volta il post di cui si visualizza l'incipit
La velocità con cui si riesce a trovare quello che si cerca sul web è un dato fondamentale nel misurare la produttività di tutti coloro che frequentano internet vuoi per lavoro, vuoi per diletto. Nonostante le recenti critiche da parte di molti Guru del settore credo che i risultati prodotti da Google siano ancora nettamente i migliori. Almeno per quanto riguarda l'Italia, per il momento non c'è confronto con Bing. Da più parti viene auspicata la nascita di un nuovo Google con meno conflitti di interessi in modo da alleviare questa stato da posizione dominante; la competizione è sempre positiva e, se nascerà un motore affidabile e preciso, ce ne avvantaggeremo tutti.
Google Operating System dà notizia dell'integrazione di Google Instant Preview con l'estensione Quick Scroll for Chrome. L'add-on può essere installato senza dover riavviare il browser come accade con tutti i componenti aggiuntivi di Chrome. Dopo aver effettuato una normale ricerca con Google, appaiono i risultati man mano che stiamo digitando le query
In tutti i modelli di Blogger c'è una classe che sovrintende all'aspetto dei link che si vedono nei post o nei widget. Più che di classe si dovrebbe parlare di pseudo-classe visto che non definisce un elemento ma un suo stato particolare. Per esempio la pseudo classe
a:link {color: #004488;}
inserisce la regola che i link non ancora visitati abbiano quel particolare colore. Un'altra pseudo classe sicuramente presente potrà essere così
a:visited {color: #800080;}
in cui la regola impone il colore del codice esadecimale per i link che sono già stati aperti. Ai meno esperti consiglio di leggere il post sui codici dei colori. L'altra pseudo classe utilizzata per i link è la seguente
a:hover {color: #FDBCB7;}
Gmail è uno dei client più diffusi per la posta elettronica anche perché consente di gestire numerosi account da una stessa pagina. Da poche ore è possibile personalizzare il tema della finestra del browser quando si accede al nostro account principale. Si va in alto a destra su Impostazioni > Temi
Oltre ai numerosi template già presenti, in basso a destra, c'è l'opzione Crea il tuo Tema. Se ci clicchiamo sopra possiamo configurare l'aspetto della schermata. Cliccando su una qualsiasi zona si aprono tre tavolozze di colori che permettono di configurare la colorazione dello sfondo, del testo e del link. Questo può essere fatto indipendentemente da una sezione all'altra
Eccomi a illustrare l'ennesimo slideshow di foto da installare in un blog su Blogger. La particolarità di questo widget risiede nel fatto che non occorre caricare alcun file CSS o Javascript su un hosting esterno. In genere questi tipi di file li carico su i miei account Google Code, Google Sites con la modalità Schedario o DropBox e la possibilità che questi servizi vadano in blackout è remota. Però avere il totale controllo di tutto quello che si ha sul blog è sempre meglio.
Ci si reca su Design > Modifica HTML e si cerca la riga </head>. Immediatamente sopra si incolla questo codice che ho pubblicato su Google Documenti
Ho colorato di rosso i parametri più interessanti da modificare. Ho inoltre inserito dei commenti nei blocchi di codice per indicare a cosa si riferisca ciascuno di essi. IL dato più importante da considerare è che la larghezza totale del contenitore (560 nel codice proposto) deve essere maggiore o uguale alla somma della larghezza delle immagini (490 la misura proposta), delle due frecce direzionali (32 ciascuna) e dei bordi. Salvare il modello.
Questo pulsante si basa sulle API di Topsy che è forse il miglior motore di ricerca per Twitter. Si tratta di visualizzare nella parte alta del post la icona dell'utente che ha cliccato su Retweet. In sostanza si tratta di stimolare la "vanità" dei navigatori per ottenere qualche Tweet in più. Ho messo in rete un articolo con una demo di questo pulsante
L'installazione si effettua direttamente sul modello. Si va su Design > Modifica HTML e si cerca la riga </head>. Subito sopra si incolla il codice
Le foto scattate con i cellulari qualche volta rivaleggiano in qualità con quelle delle camere digitali ma, se si ha un modello vecchio, possono essere bisognose di ritocchi per migliorarne la qualità. FotoFuze è una applicazione online che permette di elevare la qualità delle foto senza usare programmi di grafica sofisticati come Photoshop o Gimp. Dopo una rapida registrazione si può decidere di caricare una normale foto oppure scegliere di cimentarsi nella creazione di una immagine in 3D. Per creare le foto in tre dimensioni ci vogliono una macchina fotografica, un treppiede, una base girevole e occorre scattare venti o trenta foto, ciascuna dopo una rotazione di 15-20 gradi.
Limitandoci alle foto in due dimensioni, si deve solo fare l'upload della immagine che si vuole migliorare. E' un procedimento molto utile se si vuole evidenziare un oggetto rispetto allo sfondo. Dopo aver caricato l'immagine si evidenzia con il mouse la parte della foto da mettere maggiormente in risalto. Con lo strumento gomma invece si cancellano i particolari indesiderati. Sulla destra si vedrà l'anteprima delle modifiche
Quando si apre una pagina con il browser si può aumentare la dimensione dei font pigiando su Ctrl e sul tasto del più (+). Se invece si vuole diminuire la dimensione dei caratteri si va sempre su Ctrl ma sul meno. Per ritornare alle dimensioni originali occorre cliccare su Ctrl+0. Questo per quanto riguarda gli OS Windows. Può essere carino inserire un widget che consenta al lettore di modificare le dimensioni del testo a sua discrezione mediante un cursore.
Si utilizza lo script MooTools che è già stato usato per il suggestivo Menù Accordion presentato qualche settimana fa. Si va su Design > Modifica HTML e si salva il modello completo. Importante non mettere la flag su Espandi modelli widget. Si cerca la riga </head> e, subito sopra si incolla il codice
L'obiettivo di un blogger è in linea di massima quello di riuscire a farsi indicizzare tutti i contenuti del blog per riuscire ad avere più traffico possibile dai motori di ricerca. Tutti i siti però non sono uguali e ci sono blog nati con altre finalità. Mettiamo che venga creato un sito in cui vengono postate immagini di vita familiare; credo che chi lo pubblichi non ami vedere le foto dei propri figli inserite nei risultati di Google Immagini. Se per favorire l'indicizzazione delle foto era opportuno inserire i tag Title e Alt, per impedire che vengano indicizzate possiamo regolarci in questo modo.
Andiamo su Design > Modifica HTML e cerchiamo la riga
<title><data:blog.pageTitle/></title>
Immediatamente sopra incolliamo il codice
<meta name="robots" content="noimageindex"/>
che darà istruzioni ai bot dei motori di ricerca di non indicizzare le foto. Purtroppo questo sistema impedirà la comparsa nei risultati di ricerca di tutte le foto presenti in tutti gli articoli del blog.
Se in questi ultimi giorni vi siete recati negli Strumenti per Webmaster, cosa che consiglio vivamente di fare almeno una volta a settimana, vi sarete certamente accorti di moltissimi errori di scansione del tipo 404 Non Trovato
E' importante cercare di rimediare a questi link non funzionanti quando provocati da errori di inserimento di collegamenti. In questo caso sembra però che la cosa dipenda proprio da Blogger. La prima riga sembra voler puntare al sommario del post, come se quelli di Blogger stessero per inserire uno script diverso per il read more. La seconda riga di pagine non trovate fa ritenere con ragionevole certezza che sia di prossima uscita una nuova funzionalità, quella dei Argomenti Correlati.
Come già anticipato da Blogger Buzz sarà possibile aprire una nuova finestra che permetterà di scoprire contenuti simili a quelli che si sta leggendo sempre su altri blog di Blogger. Ecco lo screenshot fornito da Blogger Buzz
![articoli simili widget[4]](http://lh5.ggpht.com/_nT13UtBmmiU/TaMQKnw3uLI/AAAAAAAASzM/YIcUJQBibjQ/articoli%20simili%20widget%5B4%5D%5B2%5D.jpg?imgmax=800 "articoli simili widget[4]")
Dopo aver presentato il gadget degli Articoli Correlati ho provato a installarlo in questo blog e, con sorpresa, ho visto che non funzionava. Come test avevo usato un template del Designer Modelli e lo avevo provato solo uno dei vecchi template. Mi sono quindi messo all'opera per risolvere la questione e per rendere il widget esteticamente ancora più apprezzabile. Coloro che avessero quindi delle difficoltà di installazione possono seguire questi passaggi invece del tutorial di cui al post citato. La differenza sostanziale sta nell'inserire i CSS direttamente nella sezione <b:skin> invece di inglobarli in <head> dentro il tag <style>. Con questo metodo è stato infatti possibile visualizzare correttamente il widget.
Si va su Design > Modifica HTML e si salva il modello completo. Si mette la flag su espandi modelli widget e si cerca la riga ]]></b:skin>. Immediatamente sopra si incolla questo codice
/* Articoli Correlati Inizio */
#articoli_correlati { float : left; width : 750px; margin-top:20px; margin-left : 5px; margin-bottom:15px; font : 11px Trebuchet MS; margin-bottom:10px; } #articoli_correlati .widget { list-style-type : none; margin : 4px 0 4px 0; padding : 0; } #articoli_correlati .widget h2, #articoli_correlati h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #articoli_correlati a { text-decoration : none; } #articoli_correlati a:hover { text-decoration : none; } #articoli_correlati ul { border : medium none; margin : 10px; padding : 0; } #articoli_correlati ul li { display : block; background : url(https://lh4.googleusercontent.com/_nT13UtBmmiU/TaGnc29XyAI/AAAAAAAASys/Hub0D5RhfGc/blue-arrow.png) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #003366; }
/* Articoli Correlati Fine */
Per le personalizzazioni vi rimando all'articolo precedente ricordando che
Il Designer Modelli ha certamente introdotto delle funzionalità interessantissime per tutti gli utenti di Blogger. Ci sono state però anche alcune difficoltà soprattutto riguardo all'inserimento di menù che tuttora permangono. Il fatto è che molti di quei menù che funzionavano perfettamente con i vecchi modelli adesso non funzionano più con i nuovi template. Il malfunzionamento riguarda soprattutto l'apertura delle sotto-tabelle o delle voci secondarie se si vogliono chiamare così. La ragione è che questi template hanno stili predefiniti in grado di disabilitare qualsiasi menù che si aggiunga sotto l'intestazione del blog.
Vediamo come sia possibile risolvere questo problema in modo da rendere installabile la maggior parte dei vecchi menù che siamo abituati a utilizzare da molti mesi se non da anni. Prima di procedere con questa modifica è opportuno salvare il modello completo per un eventuale backup. Si va su Design > Modifica HTML e si cerca la riga seguente con F3 o con Ctrl+F (CMD+F per Mac)
Qualche mese fa ebbe un grande successo il widget LinkWithin che inseriva degli articoli simili a quelli dell'articolo corredati da miniature. Questo gadget non è personalizzabile in quanto lo script è nei server della società che lo ha creato. Ultimamente è meno utilizzato perché, visto che la velocità di caricamento è diventata un importante parametro per determinare la SERP di una pagina, gli webmaster tendono a alleggerire i blog gli widget troppo pesanti. Per mostrare alla fine del post altri articoli con argomento simile si tende quindi a scegliere dei gadget che mostrino solo l'elenco dei titoli di altri post che hanno le stesse etichette di quello visualizzato.
Quello che vado a presentare ha la particolarità di essere abbastanza leggero ma anche non disprezzabile dal punto di vista estetico. Si va su Design > Modifica HTML e, dopo aver salvato il template, si cerca la solita riga </head>, subito sopra si incolla questo codice
<!-- Articoli Correlati Inizio -->
<style> #articoli_correlati { float : left; width : 530px; margin-top:20px; margin-left : 5px; margin-bottom:15px; font : 11px Verdana; margin-bottom:10px; } #articoli_correlati .widget { list-style-type : none; margin : 4px 0 4px 0; padding : 0; } #articoli_correlati .widget h2, #articoli_correlati h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #articoli_correlati a { text-decoration : none; } #articoli_correlati a:hover { text-decoration : none; } #articoli_correlati ul { border : medium none; margin : 10px; padding : 0; } #articoli_correlati ul li { display : block; background : url("https://lh6.googleusercontent.com/_nT13UtBmmiU/TaBhKce4T1I/AAAAAAAASyU/DNQrGBf85Z4/rss-blu.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='https://sites.google.com/site/scriptperilblog/javascript-2/articoli-simili.js' type='text/javascript'/>
<!--Articoli Correlati Fine - www.ideepercomputeredinternet.com -->
Le personalizzazioni da fare sono molte ma solo di adattamento al nostro template. Riguardano la larghezza (width), i margini, la dimensione dei caratteri, lo stile dei bordi (border-bottom:1px dotted #cccccc;) che è punteggiato di grigio e la icona che si visualizza sulla sinistra di ogni articolo, che ha l'URL evidenziato di viola e che può essere sostituita da un'altra a nostro piacimento. Ricordo che ha dimensioni 16x16 pixel e che è in formato PNG.
Se passi molto tempo online su Facebook, Twitter e altri social network allora forse ti conviene lasciare Chrome, Firefox e Internet Explorer per l'innovativo browser RockMelt. E' ancora in Beta e fino a pochi giorni fa era ancora a inviti. Adesso è invece possibile scaricare il programma andando su Download RockMelt. Sarà scaricato un piccolo file che funge da wizard per la successiva installazione che durerà circa un minuto, anche meno per chi ha una connessione superveloce. In linea con la sua vocazione social, alla prima schermata dovranno essere inserite le nostre credenziali Facebook
Chi mi segue da qualche tempo conosce la mia idiosincrasia per tutti i programmi di grafica. Mio malgrado qualche volta sono costretto obtorto collo a usarli. Se poi riesco a imparare qualcosa, sono così felice che mi va subito di condividerlo con altri disgraziati come me, visto che sul web non ci sono guide decenti per neofiti di questa materia. Quelle che ci sono sono spesso inaccessibili a chi non ha mai avuto a che fare con livelli, sfumature e gradienti.
Passo a illustrare analiticamente come sia riuscito a eliminare lo sfondo da una immagine e a renderlo trasparente salvando il file in formato PNG usando il programma gratuito Gimp che serve anche per creare immagini animate. Si inizia con File > Apri e si seleziona l'immagine a cui si deve togliere lo sfondo. Si va quindi su Livello > Trasparenza > Aggiungi canale alfa
Zoom.it è un interessante tool gratuito della Microsoft per inserire nei nostri siti delle foto di grandi dimensioni. Inoltre è gratuito e di facilissimo utilizzo. Per prima cosa va caricata la foto su un hosting come Picasa o Skydrive quindi ne va acquisito il link diretto. Zoom.it fornisce un javascript che permette di zoomare nella immagine senza bisogno di installare nulla nel nostro sito. Questo è fondamentale per evitare problemi di compatibilità tra le diverse librerie di javascript.
Occorre semplicemente incollare l'URL della immagine nella parte bassa della pagina e cliccare su Create. Dopo un processo rapidissimo compariranno due opzioni, la prima per ottenere il link diretto della immagine con gli strumenti di zoom e la seconda per avere il codice HTML da incollare nel blog appunto in modalità HTML
Questo articolo è sotto certi aspetti su ordinazione nel senso che mi è stata esplicitamente richiesta questa personalizzazione da Natalia in questo commento. Prendo spesso spunto da delle domande dei lettori per scrivere dei post ma questo solo se ritengo si tratti di argomenti che possano interessare anche altri, se la cosa è fattibile e non eccessivamente impegnativa e se ho le conoscenze necessarie per venire a capo del problema che mi è stato posto. Ma veniamo al nocciolo della questione. In un blog con più autori c'è la necessità di individuare in modo immediato colui che ha scritto un determinato post. Ho già avuto modo di illustrare come fare a inserire firme diversificate alla fine dell'articolo, adesso mi occuperò di come visualizzare una immagine identificativa che può essere l'avatar dell'autore. Questa immagine viene inserita automaticamente e può essere posizionata in vari punti del layout del blog su Blogger.
Il tema delle immagini che si possono o non si possono aprire in un'altra scheda del browser è un argomento ricorrente nei commenti. Ci sono coloro che vorrebbero che le foto si aprissero in un'altra finestra a grandezza naturale per renderle più visibili e coloro che invece non vogliono che siano cliccabili per altre ragioni. Facciamo quindi un po' di chiarezza su un argomento che comunque è piuttosto semplice.
Se si postano gli articoli con Windows Live Writer vengono create due immagini nell'album di Picasa, quella originale con il link e quella ridimensionata che che si vede nel post. Se si vuole rendere l'immagine non cliccabile si deve scegliere Strumenti immagine > Collega a > Nessun collegamento
Le gallerie di foto più accattivanti sono quelle che hanno effetti dinamici. Solitamente si tratta di Slideshow che presentano le foto con particolari effetti di transizione. La maggior parte di quest'ultimi è basata su Libreria Javascript JQuery. Space Gallery è sostanzialmente diversa da tutte le altre gallerie perché le immagini sono posizionate una dietro all'altra con un interessante effetto 3D.
Per passare da una immagine all'altra occorre cliccarci sopra con il mouse. Ho postato la galleria sul web
Quando si vogliono fare delle prove di come potrebbe essere l'aspetto grafico di una pagina o di un intero blog, in genere si usa il classico Lorem Ipsum che è un testo di prova usato fin dal 1500, inventato da uno stampatore dell'epoca per mostrare i propri caratteri e che è rimasto immutato fino ad oggi. Il testo è in un latino scorretto arditamente ripreso da uno scritto di Cicerone. Si può copiare uno o più paragrafi e saperne di più sull'argomento, accedendo alla pagina del Generatore di Lorem Ipsum.
Considerato che sono più di 500 anni che tipografi, editori, grafici, designer e adesso anche webmaster vedono sempre le stesse parole c'è a chi è venuto in mente di usare un altro generatore casuale di frasi. Non si tratta del goliardico creatore casuale di frasi di Berlusconi ma di una cosa decisamente più seria. Si va su F*** Lorem Ipsum e si clicca su Reload per generare frasi random da inserire in post o realizzazioni grafiche
Mi è stato chiesto se fosse possibile far in modo di aprire i post e le pagine di un blog in modo automatico in un altra finestra. Per ottenere questo risultato in un singolo link occorre aggiungere il target="_blank" con questa sintassi
<a href="URL COLLEGAMENTO" target="_blank">Testo del link</a>
Quando verrà cliccato su Testo del link, il collegamento si aprirà in un'altra scheda del browser. La parte visibile di un collegamento è chiamata anchor text o testo di ancoraggio ed è importantissima in chiave SEO. Con un semplice artificio si può fare in modo che tutti i link abbiano il target="_blank" in automatico. Basta andare su Design > Modifica HTML e cercare la riga <head>. Subito sotto va incollato il codice
Questa personalizzazione è veramente l'uovo di Colombo ma fino ad ora non ci aveva ancora pensato nessuno. Pochi minuti fa Blogger Buster ha pubblicato un articolo in cui si tratta proprio di questo semplicissimo ma interessante hack. Andando su Design > Elementi pagina > Post sul blog > Modifica si può scegliere la frase da visualizzare alla fine della parte visibile del post che può essere Continua leggere >> , Leggi tutto… oppure un'altra simile a queste. Invece di visualizzare una semplice scritta con il link al post completo potrebbe essere utile visualizzarne anche tutto il titolo
Questo link sarà visibile anche nelle pagine delle etichette e in quelle di archivio. Si va su Design > Modifica HTML e si cerca il codice del read more, dopo aver salvato il modello completo e aver messo la flag su espandi modelli widget. Si usa F3 o Ctr+F (CMD+F per Mac).
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
Ogni colore è univocamente associato a un suo codice che lo individua completamente. I codici dei colori possono essere scritti secondo le regole HEX o RGB ma c'è anche la possibilità di contrassegnarli con il loro nome in inglese usando per esempio le tabelle di W3Schools ColorNames. Un altro tool molto interessante è la tabella dei colori in italiano che converte un nome di colore italiano in un codice. Dopo aver parlato del programma non gratuito Color Schemer Studio e della sua versione gratuita online, ho anche accennato a Color Picker altro tool semplicissimo da usare per conoscere i codici dei colori che non ha neppure bisogno di installazione.
PF Color Tool è un altro programma gratuito che ci consente di fare moltissime cose nell'ambito dei colori. Tra l'altro ha anche una versione in italiano. Durante l'installazione occorre stare attenti a non scaricare altri programmi che fanno da sponsor. E' sufficiente inserire le flag solo nelle opzioni che interessano. L'interfaccia del programma si presenta in questo modo
Google ha messo a disposizione degli webmaster una guida per l'ottimizzazione del blog nella sua interezza e per i singoli articoli. Se siete miei lettori da qualche tempo, non ci troverete molto di più di quello che avete appreso dai miei post, ma il fatto di avere tutta la materia SEO in un unico documento, per giunta ufficiale di Google, è sempre importante anche per andare a spulciare tra le righe un dettaglio che era sfuggito a una prima analisi.
La guida più datata, disponibile anche in italiano, è stata presentata da Google Blog Italia nell'Aprile del 2009. Si può scaricare la Guida SEO in formato PDF. Recentemente è stato fatto un aggiornamento che però è disponibile in lingue quali l'ungherese, il finlandese, lo svedese, naturalmente l'inglese ma non l'italiano. Si può scaricare il PDF della nuova Guida SEO in inglese. Gli aggiornamenti, da quel poco che ho avuto modo di consultare, riguardano essenzialmente la versione mobile dei blog e questo la dice lunga su quale importanza dia Google alla navigazione tramite dispositivi mobili.
La piattaforma Blogger permette di scegliere se far visualizzare il nostro sito da chiunque o solo dagli utenti che siano registrati. Si va su Impostazioni > Autorizzazioni e si può scegliere l'opzione che solo persone selezionate possano visualizzarlo. In questo caso si deve inserire l'indirizzo email di ciascun contatto affinché gli sia concesso di entrare nel nostro blog chiuso.
Questa funzione mi risulta che sia poco utilizzata e che invece ci sia un'altra esigenza. Alcuni vorrebbero che il loro blog fosse visibile a chiunque ma al contempo desidererebbero che solo alcuni utenti selezionati avessero il permesso di accedere a una sezione specifica del blog. L'intento di questo post è proprio quello di mantenere uno o più post riservati e lasciare libero accesso a tutto il resto del blog. Per rendervi conto di quello che parlo, cercate di aprire l'articolo: Post a cui si può accedere con password. Vedrete una finestrella di questo tipo
){kind=link}