Come creare degli stili personalizzati per inserire il codice HTML in un articolo.

Quando si vuole inserire del codice HTML in un post bisogna stare attenti a che non venga interpretato come tale da Blogger quindi per prima cosa se si usa l'editor di Blogger bisogna mettere la spunta a Mostra HTML letteralmente

mentre se si usa Windows Live Writer non ci sono problemi di questo tipo. In questo blog, fino a questo momento ho inserito il codice HTML in una citazione che genera una cosa di questo tipo

Codice HTML inserito in un articolo

che non è un granché ma che ha un tocco di originalità perché ho personalizzato la classe di stile del blockquote. Si può fare un passo ulteriore creandoci uno stile personalizzato per il codice. Vi presento tre diverse opzioni

Codice numero uno

.codice {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://5nxhyw.blu.livefilestore.com/y1pBmcsjN_C4Uz9apV4bqw0j4loIwnc6UgkhSOoSjJvltkgT_NywgOstjy2kWpNxLxGK8-tKrGD6sap9b1vTPJXG65BmSTZC8k7/codice-1.gif) no-repeat right bottom;
border : 2px solid #eeeeee;
color : #7D7D7D;
}

Codice numero due

.codice {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://5nxhyw.blu.livefilestore.com/y1pwb62k412-Whxwy-bDnggvi6aEkRyUbK4W9V-ujTxnoPZM78_uZmTHqHPky4Kev3THgC13jMWKK0xPbS0fI5AwGhNEYqyGq1U/codice-2.gif) no-repeat right bottom;
border : 2px solid #eeeeee;
color : #7D7D7D;
}

Codice numero tre

.codice {
margin : 10px;
padding: 0px 25px 5px 40px;
background : #ffffff url(http://5nxhyw.blu.livefilestore.com/y1pVZITfkJXZcRByP6rN1HGvFapbMijXNwFBk3R6gN8kd_fgygFJlx-C0_JdTexebihTUblgV3HCORgUipndTCztdk-bn8BEBx-/codice-4.png) no-repeat top left;
font: 0.9em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #767675;
border: 1px solid #767675;
}

dove possono essere personalizzati i colori di sfondo (p.e. background : #f9f9f9), i colori del bordo (p.e. #eeeeee), il tipo di bordo (solid, dashed, dotted) e la sua dimensione (p.e. 2px). Se non sono adatti al nostro modello si possono cambiare anche i valori accanto a margin e a padding. Rappresentano la distanza dal resto del layout (margin) e del codice dal rettangolo in cui è contenuto (padding). I quattro numeri sono relativi alle quattro direzioni partendo dall'alto e finendo alla sinistra in senso orario.

Gli URL evidenziati di verde sono quelli delle immagini di sfondo che sono stati caricati su un mio hosting. Potete lasciarli invariati oppure scaricare le immagini e ricaricarle su un vostro spazio tipo Skydrive sostituendone successivamente l'indirizzo. I più bravi in grafica possono personalizzare ulteriormente le immagini inserendo il logo del proprio blog.

Andiamo su Layout > Modifica HTML e cerchiamo la riga

]]></b:skin>

quindi, immediatamente sopra, si incolla il codice prescelto e si Salva il Modello.

Quando si inserisce del codice in un nostro articolo, per visualizzarlo con questo aspetto bisogna passare alla Modalità HTML (Origine se si usa WLW) e, all'inizio e alla fine del codice si inseriscono le due righe seguenti

<div class="codice">
Codice da visualizzare nel post
</div>

come mostrato nel seguente screenshot

Per vedere una dimostrazione reale di tutte e tre le classi di stile si può dare uno sguardo al mio blog di demo all'articolo sulla personalizzazione dello stile del codice. 

---

E' possibile scaricare i video Mediaset solo se consentito dall'azienda.

Mi è stato chiesto come fare per scaricare i video dal nuovo portale Video Mediaset. Il fatto è che cambiano impostazioni tutte le settimane ed è possibile farlo solo con quei video che l'azienda permette di scaricare. In genere ce ne sono due o tre e solo in alcune sezioni.
Lo strumento di elezione per scaricare i video è Download Helper, un'estensione di Firefox che riesce a rilevare automaticamente se nella pagina web sono presenti contenuti multimediali. Ne veniamo informati dall'icona che comincia a animarsi. Nel caso dei Video di Mediaset, dopo che si sono aperti, occorre aspettare la fine della pubblicità quindi cliccare sulla freccia accanto all'icona dell'addon per aprire il menù a tendina

Nel momento in cui il video è iniziato si guarda il tipo di file che è stato rilevato. Se è del formato .FLV si può scaricare andando su Download e scaricare il video senza altri problemi. Questo però funziona solo con i video che permettono di scaricare.
Se ne vogliamo cambiare il formato si può usare Format Factory per la conversione in AVI, MP4, GP3 per i cellulari, formati per iPhone, ecc. Mi sono imbattuto anche in un file di tipo F4V che è una evoluzione del FLV sempre sviluppato dalla Adobe. In questo caso la conversione è più complessa e non può essere fatta con Format Factory perché ancora non lo supporta.
Il file può essere aperto con Adobe Flash Player che probabilmente avete nel computer senza saperlo mentre per la conversione bisogna seguire le indicazioni dell'articolo "Come convertire i file F4V con Media Convert".
Se si vogliono guardare e registrare le dirette della RAI e di Mediaset si possono usare i programmi StreamRAI o TVOSA.

---

Google Apps Shortcuts è un'estensione di Chrome per accedere in modo rapido a quasi tutti i servizi di Google.

Google Apps Shortcuts è stata appena realizzata ma promette molto bene visto che permette un accesso facilissimo a tutti i principali servizi di Google. Dopo l'installazione si visualizzerà una icona nella barra del browser

 

Se ci si clicca sopra si aprirà un menù a tendina (drop down menù) con tutte le opzioni a disposizione

Saranno suddivise in categorie come GMail, Calendar, Google Documenti, Google Reader, Google Wave e Google Voice.  Per il momento Google Voice in Italia non mi risulta sia disponibile ma se si vuole per esempio spedire una email si clicca su New Email e si apre subito il modulo relativo. Si può anche iniziare a editare un nuovo documento, una nuova presentazione o un nuovo foglio di calcolo andando nell'icona relativa (New Doc, New Presentation e New Spreadsheet).

In Options c'è anche la possibilità di aggiungere altri servizi

Se per esempio abbiamo acquistato un dominio personalizzato da Google automaticamente avremo anche un account Google Apps che potremo usare come casella di posta elettronica e inserire il relativo URL nelle impostazioni della estensione.

---

DigiBody per creare simpatici avatar e caricature divertenti.

DigiBody presenta due servizi online davvero curiosi per creare degli avatar e delle caricature da inserire nel nostro profilo per fare uno scherzo agli amici. In Aim Avatar Maker possiamo creare un avatar utilizzando gli strumenti messi a disposizione

Sulla sinistra c'è l'anteprima dell'avatar che può essere modificato scegliendo, sulla destra, il background, la mascella, la testa, gli occhi, le sopracciglia, gli occhiali, il naso e le orecchie. Quando siamo soddisfatti sempre sulla sinistra si può salvare l'immagine in formato GIF, PNG o JPG.

In Caricature Maker abbiamo strumenti molto simili
Sulla sinistra è visualizzata l'anteprima della caricatura mentre sulla destra si possono scegliere i vari elementi che sono: la faccia, la bocca, il naso, gli occhi, le sopracciglia, le orecchie e i capelli. La differenza rispetto al precedente tool risiede nella possibilità di posizionare ciascun elemento con delle frecce direzionali e nel disegno, che è al tratto e in bianco e nero, come fosse una caricatura fatta a matita.
Con questo tool viene data anche la possibilità di inserire la caricatura che si è creata in un sito o in forum (linguaggio BBCode) mediante l'acquisizione  del codice HTML.
Altri tool per creare avatar e caricature sono Alpoy, Avatar Photo, Voky e Portrait Illustration Maker.

---

Come inserire una icona con il numero dei commenti accanto al titolo di ogni articolo in un blog su Blogger.

In un precedente articolo avevo illustrato come inserire delle icone numerate nei commenti del blog e avevo anche postato una dimostarione nell'articolo sulla numerazione dei commenti. Se adesso andate nel mio blog di demo vedrete che le stesse icone sono presenti anche in Homepage accanto al titolo di ogni post 

Il metodo che vado ad illustrare consente di inserire l'icona con il numero dei commenti ricevuti da ciascun articolo e sono possibili le seguenti personalizzazioni

1. Si può scegliere l'icona che si desidera e anche le sue dimensioni, in questo post ne presento ventisette già caricate nel web
2. Si può personalizzare la posizione dell'icona relativamente al layout del blog
3. Si può scegliere il colore del numero che si visualizza dentro la stessa icona

Andate su Layout > Modifica HTML e salvate il modello completo. Dopo aver messo la spunta a "Espandi i modelli widget" cercate la riga

<h3 class='post-title entry-title'>

quindi, immediatamente sotto, incollate il seguente codice

<!--ICONE NUMERO COMMENTI INIZIO-->
<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
<!--ICONE NUMERO COMMENTI FINE - www.ideepercomputeredinternet.com-->

come mostrato dallo screenshot

Successivamente cercate la riga

</head> 

e, immediatamente sopra, incollate questo codice

<!--ICONE NUMERO COMMENTI INIZIO-->
<style type="text/css">
.comment-bubble {
float: right;
color: white !important;
background: url(http://public.blu.livefilestore.com/y1p4jsEcyWGgFNHqh2Rx0OrOsGvFXOwAdBWJ63vKCm6i_4PDTCMJzTk71PSzV_PcQYt858Oqxxr6hfly1c4m1vhLw/bivlu77.png) no-repeat;
width: 50px;
height: 48px;
font-size: 18px;
margin-top: -5px;
margin-right: 8px;
text-align: center;
}
</style>
<!--ICONE NUMERO COMMENTI FINE - www.ideepercomputeredinternet.com-->

come mostrato in un nuovo screenshot

Non resta che salvare il modello e guardare il risultato. Le personalizzazioni da fare sono

1. white è il colore del numero all'interno dell'icona. Si può usare qualsiasi altro colore, l'importante è usare l'espressione inglese (red, blue, black, green, ecc) 
2. 50 e 48 sono le dimensioni dell'icona in larghezza e altezza e ovviamente possono essere variate a seconda delle esigenze del nostro modello. Questi valori devono essere modificati anche nel caso non fosse perfettamente centrato il numero all'interno della stessa icona 
3. -5px e 8px rappresentano la distanza in pixel dal margine alto e dal margine destro del layout del post e possono essere modificati, magari in un secondo tempo per posizionare al meglio l'icona
4. 18px rappresenta la dimensione del carattere del numero all'interno dell'icona
5. L'URL evidenziato in rosso è quello della icona che si è scelta per il nostro blog e può essere sostituito con un altro di una immagine caricata da noi su un hosting tipo Skydrive. Per agevolare coloro che volessero installare questa personalizzazione qui di seguito inserisco 27 icone di diverso colore e genere

                       

                       

               
Per acquisire l'URL di quella che vogliamo utilizzare è sufficiente cliccarci sopra e copiare l'indirizzo nella barra del browser

Questa fa parte di quelle modifiche che non aggiungono nulla in termini di posizionamento e usabilità ma rendono il blog più carino e suscitano una buona impressione nei lettori.

---

Perché i Guest Post convengono sia a chi li scrive che a chi li ospita nel proprio blog.

I Guest Post sono degli articoli scritti da persone diverse dall'autore del blog. La particolarità di questi articoli è che possono essere utili sia a chi li scrive che a chi li ospita. Il beneficio per il blog che ospita il guest post sta nell'avere un articolo in più senza nessuno sforzo mentre quello dell'autore del post è nell'opportunità di farsi conoscere a una platea diversa dalla solita.

Non ho usato l'espressione più grande perché non è assolutamente detto che l'autore del guest post debba avere un blog più piccolo di quello a cui invia l'articolo da pubblicare. Ci possono essere dei casi che per opportunità non si possa affrontare un determinato argomento sul nostro blog ma sia possibile farlo in un altro.

A me per esempio piacerebbe molto scrivere dei guest post di argomento politico per blog che abbiano quella tipologia. E' evidente che il tema dell'articolo deve avere un minimo di attinenza con i temi trattati per non essere considerato un corpo estraneo dai lettori.

Nel blogging esistono anche forme di pubblicazione a pagamento degli articoli che personalmente non ho mai sperimentato e che si dividono grossomodo nelle due categorie

1. Io ti pago se scrivi un post per il mio blog
2. Tu mi paghi se scrivo un articolo che fa pubblicità al tuo sito o alla tua attività

Nel primo caso sono i proprietari dei grandi siti che pagano dei ragazzi per scrivere degli articoli che poi monetizzeranno con Adsense e altri programmi di affiliazione. E' una nuova forma di investimento, se così si può chiamare. Nel secondo caso si tratta invece di quelli che vengono anche chiamati "articoli marchette" in cui il blogger percepisce dei soldi per fare pubblicità a prodotti o siti.

Il caso del Guest Post è completamente diverso e presuppone che non ci sia alcun passaggio di denaro. Si basa tutto su una reciproca convenienza che può essere così sintetizzata

1. Chi scrive il guest post ha la possibilità di farsi conoscere, di far conoscere il proprio sito e di ottenere dei link. Se scrive un articolo di valore è probabile che in molti sottoscriveranno i suoi feed
2. Chi ospita il guest post dà un aiuto a un "collega" meritevole e, mi piace ripetere, la generosità viene alla lunga ripagata nella rete.
3. Inserire articoli con stili e contenuti diversi, ma collaterali a quelli soliti è comunque un arricchimento per il blog che li ospita
4. In fatto di link ci guadagnano tutti visto che ci sarà quello al blog dell'autore del post che a sua volta avviserà i suoi lettori di aver scritto un articolo su un altro blog mettendo il relativo link. Essendo collegamenti a dei contenuti reali non verranno certo assimilati a degli scambi di link.

Ho deciso quindi di accettare degli articoli scritti da altri blogger e ho postato in una pagina statica le linee guida per la pubblicazione di guest post.

Per evitare fraintendimenti vorrei sottolineare alcune cose

1. L'argomento dell'articolo dovrà riguardare l'informatica (anche intesa in senso lato)
2. Non presentate articoli che sono già stati pubblicati perché i contenuti duplicati danneggiano il blog
3. Inserirò il link al blog dell'autore del post quindi non c'è bisogno di aggiungerne altri
4. I guest post non possono riguardare una recensione del proprio sito o della propria attività professionale perché allora si rientrerebbe in uno dei casi degli articoli a pagamento illustrati in precedenza
5. Nel caso in cui non accettassi di pubblicare dei guest post che mi sono stati proposti vi invito comunque a non essere rancorosi nei miei confronti perché certo non sono mosso da antipatia

Sono curioso di vedere se e quante proposte di guest post riceverò. Per saperne di più consultate la pagina "Collabora con un Guest Post".

---

Cosa sono i Sitelink, perché sono utili, come incrementarli e come rimuoverli.

Se andate su Google a cercare questo blog vi verrà un risultato di questo tipo

Insieme al nome del blog, alla sua descrizione, più in basso vengono visualizzati un numero variabile di collegamenti interni a delle sezioni del blog (in questo momento sono quattro). Dobbiamo fare alcune considerazioni

1. Su Blogger non ci sono sezioni e solo da poco sono comparse le pagine statiche che potrebbero essere considerate tali
2. Non tutti i blog hanno questi Sitelink; averli non è sinonimo di grande dimensione del blog. Qualche volta succede che grandi blog non li abbiano mentre sono presenti in altri veramente piccoli
3. Google genera questi link automaticamente quando delle pagine interne sono collegate all'Homepage
4. Se si hanno molti link a pagine interne come nel caso di questo blog, la scelta di Google avviene in un modo francamente imperscrutabile

Avere questi link sotto la homepage nelle ricerche di Google è importante perché dà maggiore visibilità al sito. Un modo per indurre Google a generarli è quello di mettere un menù che serve da collegamento a pagine interne. Per la scelta dei menù da inserire potete dare uno sguardo anche a quelli presentati da me: Menù a soffietto, Menù laterale scorrevole, Tre menù scorrevoli e Menù orizzontale.

Se si hanno molte pagine con il collegamento in home, Google deve operare delle scelte sui Sitelink da mostrare e non è detto che queste siano giuste. Nel mio caso ha messo un articolo su un elenco di risorse per Blogger però gli altri sitelink non sono proprio indicativi degli articoli del sito. Da notare anche il collegamento in "Altri risultati in …>>" che, se cliccato, permette di avere un elenco degli articoli del blog in una pagina di ricerca di Google.

In linea di massima si possono tenere i sitelink che Google ci ha assegnato con la speranza che li aumenti. Quando però sono presenti dei link che possono fuorviare il navigatore sulla tipologia del nostro blog si può anche eliminarli. Non mi è dato sapere se in questo caso Google li sostituirà con dei link nuovi più pertinenti. Farò dei test e poi vi saprò dire.

Per toglierne uno o più bisogna accedere alla Bacheca per Webmaster. Andando su Configurazione Sito > Sitelink possiamo eventualmente eliminare quelli indesiderati

cliccando su Blocca presente sulla destra di ciascun link.

---

Tuxpi per inserire effetti speciali alle vostre foto o immagini.

Tuxpi mette a disposizione gratuitamente ben 41 strumenti e effetti speciali per modificare, abbellire, ritoccare le vostre foto. Il fine è soprattutto quello del divertimento nel vedere un'immagine inserita in un collage stile Andy Warhol o in un improbabile fotogramma di un film. Il funzionamento è quello solito vale a dire si carica una foto dall'hard-disk o dal web e si sceglie l'effetto desiderato.

Faccio un elenco dei principali tool messi a disposizione

1. Motivational Poster Tool -
2. Postage Stamp -
3. Polaroid Effect -
4. Pop Art Collage -
5. Film Strip Frame -
6. Infinity -
7. Mat Picture Frame -
8. Wanted Poster -
9. Flag Collage -
10. Canvas Tiles -
11. Thumbnail Picture Frame  -
12. Stardust -
13. Lomo Style Effect -
14. Newscast Picture -
15. Pixels -
16. Wirl -
17. Blueprint Photo Effect -
18. Wall Painting Photo Effect -
19. Brushstroke Frame -
20. Photo Circles -
21. Fiery Flames -
22. Nightvision -
23. Heatmap -
24. Photo Strips -
25. Tritone Filter -
26. Color Channel Swap -
27. Pencil Sketch -
28. Sepia Tone Effect -
29. Swirl Picture Frame -
30. Fade Out Effect -
31. Shape Tool -
32. Pixeled Picture Frame -

L'immagine caricata non può essere più grande di 2MB e i formati supportati sono JPG, PNG e GIF. Se si vogliono modificare foto o immagini inserendole in un contesto divertente si possono anche utilizzare anche i seguenti servizi

1. Clip Your Photos -
2. Photofunia -
3. AmigoXAmigo -
4. Fun Photo Box -
5. LoonaPix -
6. Groos Out -

---

TVOSA per guardare e registrare tutti i canali della RAI e di Mediaset.

TVOSA è un programma gratuito che non richiede installazione e che ricorda molto StreamRAI di cui avevo già parlato. Anche TVOSA si basa su VLC Videolan  e ha bisogno di avere Framework.NET installato nel computer, cosa che può comunque essere fatta gratuitamente dal sito della Microsoft.

Dopo aver cliccato sull'icona dell'installazione ci viene chiesto di selezionare una cartella dove depositare i file. E' opportuno crearne una nuova da utilizzare allo scopo. Successivamente si aprirà un'interfaccia che è in tutto simile a un telecomando

Oltre a vedere lo streaming dei canali RAI e Mediaset è anche possibile registrarli in diretta andando sul pulsante REC. Si possono aprire contemporaneamente anche più canali, si può accedere alla programmazione televisiva di ogni singola emittente e si può aggiornare la lista dei canali in automatico. Tutti i file del programma rimangono all'interno della cartella che si è scelto in fase di installazione e in quella stessa cartella saranno destinati anche i file che si sono registrati.

---

Regalare delle mutandine geek con codice di stato per San Valentino.

Ormai mancano poco più di 15 giorni a San Valentino e c'è già chi pensa a qualche regalo originale. Nel mondo di internet gadget particolari non mancano di sicuro. Se chi riceve il regalo è un appassionato della rete forse potrebbe essere interessante regalare qualcosa che nello stesso tempo è originale, piccante e geek.

In internet esistono i cosiddetti codici di stato che sono dei messaggi standardizzati per delle categorie di risposte. Chi non si è imbattuto nel classico 404 Not Found?  

Il primo numero riguarda la categoria; quelli del tipo 1xx sono detti "Informational", vale a dire "ricevuto e in fase di elaborazione", quelli che cominciano con il due cioè 2xx indicano che il messaggio è stato compreso e accettato. I messaggi 3xx sono relativi al re-indirizzamento di un sito o di una pagina mentre quelli 4xx implicano un errore del client; gli errori del server sono indicati da numeri del tipo 5xx.

Alcuni di questi messaggi si prestano a equivoci di natura sessuale, ovviamente in chiave scherzosa e assolutamente non volgare per esempio 403: Forbidden (Vietato) oppure 413: Request Entity Too Large (Entità della richiesta troppo grande).

ThinkGeek ha pensato di creare degli slip personalizzati con questi codici di stato

             

 

            

 

Le immagini riguardano slip femminili ma ce ne sono anche di maschili e di unisex. Il costo è veramente abbordabile visto che è di $7.99 cioè 5.71€ e possono essere acquistati con una carta di credito anche di quelle prepagate che sono l'ideale per acquisti in rete.

Per abbellire il blog in occasione di San Valentino si possono invece inserire nel sito delle affascinanti cascate di cuoricini lampeggianti.

 

---