Che cosa sono le immagini in formato SVG e come si creano.

Cercando le icone senza copyright su siti per esempio come Iconfinder ci si può imbattere su formati diversi dal solito come appunto SVG. Si tratta dell'acronimo di Scalable Vector Graphics ovvero di quella che può anche essere definita come Grafica Vettoriale Bidimensionale.  Il suo sviluppo è iniziato nel 2003 e recentemente sono state aggiunte nuove specifiche per i dispositivi mobili.

Il formato SVG è di tipo testuale e i file SVG non si aprono con un Editor grafico come potrebbe essere Photoshop, Gimp o Paint.NET ma con Notepad++ o addirittura con il Blocco Note. I file SVG sono quindi formati da un codice testuale e il loro linguaggio è stato codificato dal W3C quindi è open souce e non è proprietario. A differenza delle immagini raster come JPG o PNG le immagini SVG non perdono qualità quando vengono aumentate le loro dimensioni.

Come mostrare messaggi, link, icone e altri contenuti alla fine di ogni post di Blogger.

Tutti gli utenti della piattaforma Blogger sono alla ricerca di widget da mostrare ai loro lettori contestualmente ai contenuti pubblicati per mettere maggiormente in evidenza i loro profili sui social o per mostrare un messaggio soprattutto a quelli casuali o che abbiano aperto il sito per la prima volta. Con questo post intendo mostrare una procedura alla portata di tutti per creare un widget personale secondo le singole esigenze anche se non si conosce nessun linguaggio di programmazione.

L'idea è quella di creare un contenuto da visualizzare automaticamente alla fine di tutti i post che potrebbe essere un messaggio, un invito a sottoscrivere i feed, il consiglio di iscriversi alla pagina fan su Facebook, alla pagina business su Google+ o a un nostro board su Pinterest. Non ci sono limiti alla fantasia e si possono inserire immagini, link e anche video. È anche possibile inserire dei bottoni con script tipo di quelli allineati sotto il post di Facebook, Twitter e Google Plus.

Come condividere file .html, .js, .css e .xml in una cartella pubblica di Google Drive con il link diretto.

Aggiornamento del 20 Gennaio 2014 - Il metodo presentato in questo post per ottenere gli hotlink da Google Drive è stato perfezionato come illustrato nell'articolo Hosting Google Drive.

Verso febbraio di quest'anno fummo informati da un tecnico di Google mediante un post su Google+ della possibilità di usare Google Drive come hosting di file HTML, javascript, CSS o XML. Successivamente sono apparse delle istruzioni anche nel Centro assistenza di Google Drive che però sono tutt'altro che analitiche. A fronte di questa interessantissima funzionalità pubblicai un articolo su come caricare questi file e avere il loro link diretto. L'hotlink o link diretto è assolutamente necessario quando si voglia inserire l'indirizzo di tale file in un widget o in un modello. Successivamente ho perfezionato questo meccanismo che ho illustrato in un post del novembre scorso. 

Gli hotlink ottenuti con i due sistemi precedenti pur perfettamente funzionanti hanno però delle controindicazioni formali. Innanzitutto l'URL dei file è formato da un ID alfanumerico che non dice nulla sul suo nome e sul suo formato. In secondo luogo questi file non si possono visualizzare nel browser come invece accade con quelli caricati nella cartella Public di Dropbox.

Caricare javascript, file XML e CSS su Google Drive e ottenere l'hotlink per domini personalizzati.

Gli utenti di Blogger sanno che per personalizzare il loro blog devono caricare su altri spazi i file javascript, CSS e XML che sono necessari per alcune modifiche. Chi possiede un blog gratuito del tipo Blogspot può tranquillamente usare Google Sites che è veramente ottimo per caricare file di questo tipo in modalità Schedario. Invece coloro che sono passati a un dominio personalizzato non possono usare questo strumento perché Google ha probabilmente messo come vincolo che Google Sites come host debba funzionare solo nei siti di proprietà di Google.

Questi utenti sono quindi costretti a usare Dropbox che è un eccellente servizio ma che per gli account gratuiti rallenta molto il caricamento della pagina. All'inizio di quest'anno proprio un ingegnere Google ci informò che si poteva utilizzare Google Drive per avere il link diretto dei javascript e simili. La procedura era però piuttosto complessa e il file non veniva visualizzato nel browser. Vi propongo adesso un nuovo metodo per caricare file JS, XML e CSS su  Google Drive per poi ottenerne l'hotlink da incollare nel modello di Blogger o nei relativi widget.

Le Entities per convertire il linguaggio HTML in XML e viceversa.

Nei linguaggi di markup le Entità, o Entities in inglese, sono una regola di codifica per inserire caratteri speciali a prescindere dalla tastiera e dal sistema operativo che stiamo utilizzando.

La sintassi di una entità è la seguente: "&" + codice identificativo + ";" 

Il codice identificativo può essere numerico o alfanumerico. Nel primo caso inizia con un cancelletto ( # ) seguito da un numero mentre nel secondo caso ci sono una serie di lettere. Per esempio &#189; rappresenta ½ mentre &copy; il simbolo del copyright ©. Il linguaggio XML definisce cinque entità predefinite che rappresentano i caratteri speciali e che sono " & ' < > . Nel linguaggio HTML le entità predefinite sono invece 252. La lista completa dei caratteri può essere consultata sul W3C.

Ciascun carattere può essere rappresentato sotto forma di entità, decimale e esadecimale. Per esempio

< (simbolo)    &lt; (entità)   &#60; (decimale)   &#x003C; (esadecimale)  segno di minore (descrizione)

Come effettuare il backup del modello e del blog su Blogger.

Leggendo dei tweet su Twitter mi sono reso conto che non tutti sanno fare un backup del blog e del modello di Blogger. E' invece opportuno svolgere queste operazioni in modo sistematico. Il salvataggio del modello è cosa assolutamente prioritaria nel momento in cui si operi una modifica anche minima del template. Salvare un file costa pochi secondi e ci consente di ripristinare la situazione precedente nel momento in cui le modifiche introdotte non andassero a buon fine.

Il backup dell'intero blog ci consente di avere sempre una copia di tutti i contenuti che abbiamo caricato in rete. Non solo dei post e delle pagine statiche che abbiamo pubblicato ma anche di tutti i commenti ricevuti. In entrambi i casi si scaricheranno dei file in formato XML. Il file del modello sarà nominato template-12345678…… . Visto che la serie numerica non dice nulla è opportuno modificare immediatamente il file dandogli il nome del blog e inserendo anche la data per distinguerlo da altri modelli che sono stati scaricati in precedenza o che lo saranno in futuro.

Tool ufficiale di Blogger per importare un blog da Splinder.

Ieri 31 Gennaio 2012 il servizio italiano di blogging Splinder ha cessato la propria attività. E' comunque ancora possibile esportare tutto il contenuto di un blog per quello che riguarda articoli, immagini, video e commenti e importarlo su un'altra piattaforma. Nel momento in cui scrivo questo articolo Splinder però non è accessibile per problemi di manutenzione.

A questo scopo qualche mese fa avevo pubblicato un tutorial per importare un sito Splinder su Blogger o Wordpress. Da qualche giorno il Team di Blogger ha messo a disposizione degli utenti un tool per effettuare questa operazione in modo diretto. Con il mio metodo si doveva trasferire il contenuto del blog su Logga.me mediante il plugin Import Splinder, quindi scaricarlo nuovamente e convertirlo con lo strumento Wordpress2Blogger prima di importarlo definitivamente su Blogger.

Adesso c'è una pagina della guida di Blogger specificatamente dedicata all'importazione di blog Splinder su Blogger. Si rivolge solo a utenti Windows quindi chi ha un Mac o un OS Linux può solo provare con il vecchio metodo.

Come convertire file XML in HTML, un testo da maiuscolo in minuscolo e viceversa.

Tutti gli utenti di Blogger sanno che il modello del loro blog è in linguaggio XML e sanno anche che per inserire alcuni oggetti devono convertire il codice da HTML in XML. Quando in fatti si va su Design > Modifica HTML e si scarica il modello completo per un eventuale backup di ripristino, dal download si ricava un file XML. In rete esistono diversi strumenti per convertire HTML in XML, ricordo per tutti Blogcrowds che è un tool usato per esempio per inserire la pubblicità di Adsense above the fold.

Questi strumenti sono anche usati per inserire del testo formattato nel template per essere visibile in tutti i post. Se per esempio abbiamo effettuato questa personalizzazione e vogliamo modificare la scritta, ci troviamo in difficoltà perché dovremo editare nuovamente il testo per poi convertirlo in XML. Questo fino a poco tempo fa, perché adesso ho trovato in rete uno strumento che effettua entrambe le operazioni. Converte cioè file HTML in XML e file XML in HTML.

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

Come inserire la pubblicità solo nel primo post della homepage, delle etichette e delle pagine di archivio in un blog su Blogger.

In un blog su Blogger ci sono diversi tipi di pagine, due sono singole, vale a dire gli articoli e le pagine statiche mentre altre sono formate da collezioni di post più o meno lunghe, cioè la homepage, le pagine delle etichette e quelle di archivio. Ci sono righe di codice che permettono di visualizzare un elemento in un solo tipo di queste pagine o di non visualizzarlo.

Per una visione d'insieme del problema consultate il post "Come visualizzare o non visualizzare widget nei vari tipi di pagine". In genere la pubblicità viene inserita solo nei post e un metodo per farlo agevolmente in Blogger è illustrato in questo tutorial. Ricordo che tutti i circuiti pubblicitari (Adsense, eDintorni, Heyos, Simply, ecc) forniscono il codice nel linguaggio HTML. Per inserirlo nel modello di Blogger deve essere convertito nel linguaggio XML. In rete esistono vari strumenti di conversione, uno dei più usati è Blogcrowds. Si incolla il codice, si clicca su Parse, si seleziona e si copia il codice convertito in XML.

Nel momento in cui si volesse inserire la pubblicità anche negli altri tipi di pagine sussistono i seguenti problemi

1. Le pagine statiche hanno una struttura diversa da quella dei post e vengono utilizzate per altri scopi come, gallerie fotografiche, moduli di contatto, forum, ecc. Inoltre possono essere personalizzate. E' quindi opportuno o non inserire affatto pubblicità oppure crearla appositamente per loro utilizzando gli appositi tag condizionali.
2. La homepage, le pagine delle etichette (del tipo www.nome-blog.com/search/label/nome-etichetta) e le pagine di archivio ( del tipo www.nome-blog.com/2010_10_01_archive.html in cui i numeri si riferiscono ad anno e mese) sono formate da un numero variabile di post. Nel momento in cui inserissimo degli annunci pubblicitari questi sarebbero visibili in tutti questi post. Nel caso di Adsense è noto che è possibile visualizzare un massimo di tre annunci per pagina con il risultato che dal quarto articolo in poi sarebbe visualizzato solo un antiestetico spazio bianco.

Come inserire un codice per rendere più facilmente rilevabile il menù dai motori di ricerca.

In quasi tutti i blog sono presenti dei menù che però, specie per quanto riguarda la piattaforma Blogger, non sempre sono rilevati dai motori di ricerca (segnatamente da Google). Lo prova il fatto che se andate negli Strumenti per Webmaster in Configurazione Sito > Sitelink, vedrete che i link automatici creati per il vostro blog spesso non sono coerenti con il menù.
Per questo blog attualmente Google me ne rileva sette su più di ottanta presenti nel menù

E' possibile inserire nel modello uno script invisibile per aiutare i motori di ricerca a rilevare correttamente il menù. Il codice è di questo tipo

Come centrare un testo, un’immagine o un video in un articolo o in un elemento di Blogger.

Il sistema per centrare qualsiasi cosa in una sezione di un blog agendo sull’HTML è quello di inserire i due tag <center> e </center> all’inizio e alla fine della “cosa” che vogliamo nel centro del layout. Se è un’immagine si tratterà di un codice di questo tipo

<center><img src=”URL-Immagine”></center>

mentre se è un video, quello che vogliamo centrare in mezzo alla pagina o nella sidebar, il codice da inserire sarà il seguente

<center><object…….                …….</object></center>

dove <object… e …</object> rappresentano l’inizio e la fine del codice copiato p.e su Youtube. Ovviamente per inserire questo codice dobbiamo andare il modalità HTML se stiamo scrivendo un articolo oppure inserire questi tag in un elemento pagina HTML/Javascript.

La cosa funziona egregiamente anche con del testo. Per esempio questo codice

<center><p><font size="3"><strong>Testo centrato con il tag center</strong></font></p>
</center>

genera questa scritta

Testo centrato con il tag center

Questo tag ha però un problema, viene deprecato dal W3C che è l’istituzione che sovrintende al miglioramento dei protocolli. Se si stesse dietro a tutte le raccomandazioni di questo consorzio staremo freschi. Ecco per esempio come dovremmo inserire un oggetto flash secondo i dettami del W3C.

C’è però un’altra considerazione da fare. Il tag center non è supportato dall’XHMTL  che è un linguaggio che associa alcune proprietà dell’XML con le caratteristiche dell’HTML. In altri termini un file XHTML è una pagina HTML che rispetta lo standard XML.

Gli utenti di Blogger forse sapranno che i modelli del loro blog sono compilati proprio in XML.

Quindi se volessimo fare le cose precise, per centrare un oggetto, invece di usare il tag center dovremmo usare quest’altro tipo di codice

<div style="text-align:center;">oggetto da centrare</div>

e questo modo di procedere dà dei risultati sostanzialmente analoghi al precedente. Ecco quindi come dovrebbe essere impostato il codice per centrare video, immagini e testi

<div style="text-align:center;">testo da centrare</div>

<div style="text-align:center;"><img src=”URL-Immagine”></div>

<div style="text-align:center;"><object…           …</object></div>

dove al posto dei dati in rosso si inseriscono testo, immagine e video. Concludendo fate un po’ come vi pare, tanto funzionano tutti e due  .

Aggiornamento: In un commento mi è stato fatto notare che per centrare un oggetto si può utilizzare anche la seguente sintassi

<div align="center">oggetto da centrare</div>

questo sistema funziona perfettamente come gli altri due che ho illustrato. In questo caso non si usano i fogli di stile rappresentati dal tag style quindi sicuramente è meno apprezzato da parte del W3C, anche se questo consorzio invita ad usare certi protocolli non obbliga.